:root{color-scheme:light;--bg:#f5f0e7;--surface:#fffcf7;--raised:#eee5d8;--text:#292622;--muted:#6e6258;--line:#29262224;--accent:#ab503c;--ink:#ffffff;--serif:Georgia,'Times New Roman',serif;--charcoal:#292a2c;--amber:#e8af68;--gutter:48px;--sidebar:232px;--player:112px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 'DM Sans',Arial,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:hover:not(:disabled){filter:brightness(1.12)}[hidden]{display:none!important}i[data-icon]{width:19px;height:19px;display:inline-flex;flex:0 0 auto}svg{width:100%;height:100%}h1,h2,p{margin-top:0}h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5vw,76px);line-height:1.04;letter-spacing:-2px;margin-bottom:22px}h1 em{font-weight:400;color:#ab503c}h2{font-family:var(--serif);font-weight:400;line-height:1.15;font-size:32px;letter-spacing:-.6px}.eyebrow,.nav-caption{font-size:10px;letter-spacing:2.3px;font-weight:600;color:var(--muted)}.eyebrow{margin-bottom:24px}.subtle{font-size:12px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.brand{display:block;font-size:19px;letter-spacing:4px;white-space:nowrap}.brand span{display:block;color:var(--muted);font-size:8px;letter-spacing:2.6px;margin-top:8px}.sidebar{position:fixed;inset:0 auto var(--player) 0;width:var(--sidebar);padding:34px 22px;background:#292a2c;border-right:1px solid var(--line);z-index:20;display:flex;flex-direction:column;overflow:auto}.sidebar .brand{margin-bottom:54px}.nav-caption{font-size:9px;margin:0 0 16px 12px;letter-spacing:1.6px}.nav-item{width:100%;display:flex;align-items:center;gap:13px;border-radius:7px;padding:13px 12px;text-align:left;color:var(--muted);font-size:12px}.nav-item.active{color:var(--accent);background:#e8af681a}.nav-item:hover{background:#29262208}.playlist-heading{display:flex;align-items:center;justify-content:space-between;margin-top:40px}.playlist-heading .nav-caption{margin:0}.playlist-item{display:flex;gap:6px;align-items:center}.playlist-item .nav-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item .remove-playlist{opacity:0;padding:8px;color:var(--muted)}.playlist-item:hover .remove-playlist,.playlist-item:focus-within .remove-playlist{opacity:1}.sidebar-foot{margin-top:auto;padding:36px 12px 0;display:flex;flex-direction:column;gap:14px;color:var(--muted);font-size:10px}.sidebar-foot button{text-align:left;padding:0;color:var(--muted)}.private-label{font-size:8px;letter-spacing:1.5px;display:flex;align-items:center;gap:7px}.private-label i{width:12px;height:12px}.library-main{margin-left:var(--sidebar);padding:0 48px calc(var(--player) + 32px);min-height:100vh;background:radial-gradient(ellipse at 78% 12%,#e8af6824,transparent 55%)}.topbar{display:flex;align-items:center;gap:22px;height:95px}.search{display:flex;gap:12px;align-items:center;color:var(--muted);max-width:410px;flex:1}.search input{border:0;background:transparent;color:var(--text);padding:10px 0;width:100%;font-size:12px;outline-offset:2px}.search input::placeholder{color:#746a61}.topbar .quiet-button{margin-left:auto}.topbar>#queue-toggle{margin-left:auto}.library-hero{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:40px 0 54px;min-height:350px}.library-hero>div:first-child{z-index:1}.library-hero>div>p:not(.eyebrow){color:var(--muted);font-size:13px}.hero-actions{display:flex;align-items:center;gap:15px;margin-top:30px;flex-wrap:wrap}.primary-button{display:inline-flex;justify-content:center;align-items:center;gap:10px;background:var(--accent);color:var(--ink);border-radius:100px;padding:13px 23px;font-size:12px;font-weight:600;min-height:44px}.circle-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;color:var(--muted)}.circle-button{border:1px solid #907b615c;width:44px;height:44px;color:var(--text)}.icon-button:hover{background:#2926220c;color:var(--text)}.icon-button[aria-pressed=true]{color:var(--accent)}.quiet-button{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text);padding:10px}.text-button{color:var(--muted);font-size:12px;padding:6px 0;text-decoration:underline;text-underline-offset:4px}.sleeve-stack{position:relative;width:240px;height:250px;flex-shrink:0;margin-right:15px}.sleeve-stack img{position:absolute;inset:0;width:225px;aspect-ratio:1;object-fit:cover;border:1px solid #29262224;box-shadow:0 20px 45px #0005}.sleeve-stack img:first-child{transform:rotate(9deg) translate(20px,0);filter:brightness(.58)}.sleeve-stack img:nth-child(2){transform:rotate(-6deg)}.sleeve-stamp{position:absolute;bottom:0;right:-4px;width:58px;height:58px;display:grid;place-items:center;font:italic 26px var(--serif);color:var(--ink);background:var(--accent);border-radius:50%;transform:rotate(8deg)}.library-toolbar{display:flex;align-items:center;gap:20px;padding:0 0 24px;border-bottom:1px solid var(--line)}.filter-tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1}.filter-tab{font-size:10px;padding:8px 12px;color:var(--muted);border:1px solid transparent;border-radius:50px;white-space:nowrap}.filter-tab.active{border-color:#ab503c55;color:var(--accent)}.sort-label{display:flex;gap:7px;font-size:10px;color:var(--muted);align-items:center}.sort-label select{background:none;border:0;color:var(--text);font-size:10px;max-width:135px;padding:7px 0}.list-heading,.track-row{display:grid;grid-template-columns:28px minmax(160px,1fr) minmax(100px,.45fr) 42px 72px;gap:12px;align-items:center}.list-heading{padding:18px 12px 10px;color:#6e6258;font-size:9px;letter-spacing:1.5px}.duration-label{justify-self:end;width:14px}.track-row{padding:11px 12px;border-radius:6px;min-height:77px;position:relative}.track-row:hover,.track-row.current{background:#ab503c0b}.track-number{font-size:11px;color:#746a61}.track-number button{padding:4px 0;display:flex;width:28px;justify-content:flex-start}.track-row.current .track-number{color:var(--accent)}.track-title-button{display:flex;text-align:left;align-items:center;gap:15px;min-width:0;padding:0}.track-title-button img{width:48px;height:48px;object-fit:cover;border-radius:3px;background:var(--surface)}.song-text{min-width:0}.song-text strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:13px;font-weight:500;color:var(--text)}.song-text small{font-size:10px;color:var(--muted)}.track-row.current .song-text strong{color:var(--accent)}.track-album{font-size:11px;color:var(--muted)}.track-duration{font-size:11px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.track-actions{display:flex;justify-content:flex-end}.track-actions .icon-button{width:32px;height:32px}.track-actions i{width:16px;height:16px}.favorite-on{color:var(--accent)!important}.favorite-on svg{fill:currentColor}.library-footnote{font:italic 16px var(--serif);color:#756451;margin:40px 12px}.empty-state{padding:50px 12px;color:var(--muted);text-align:center;border-bottom:1px solid var(--line)}.player-bar{position:fixed;inset:auto 0 0;height:var(--player);background:#292a2cf5;backdrop-filter:blur(24px);border-top:1px solid #29262224;z-index:40;display:flex;align-items:center;gap:16px;padding:18px 26px}.now-playing{display:flex;align-items:center;gap:13px;text-align:left;padding:0;min-width:0;width:225px}.now-playing img{width:58px;height:58px;object-fit:cover;border-radius:4px}.now-playing>span{min-width:0}.now-playing strong{font-size:12px;font-weight:500;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.now-playing small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.transport{flex:1;max-width:600px;margin:auto}.transport-buttons{display:flex;align-items:center;justify-content:center;gap:20px}.play-button{width:39px;height:39px;display:grid;place-items:center;background:var(--text);color:var(--ink);border-radius:50%}.play-button i{width:18px;height:18px}.progress-row{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}.progress-row span{min-width:28px}.progress-row span:last-child{text-align:right}.progress-row input{width:100%}input[type=range]{accent-color:var(--accent);cursor:pointer;height:3px}input[type=range]::-webkit-slider-thumb{width:10px;height:10px}.player-extras{display:flex;align-items:center;gap:5px;margin-left:auto}.player-extras input{width:72px}.queue-panel{position:fixed;right:0;top:0;bottom:var(--player);width:340px;background:#fffcf7;border-left:1px solid #29262224;z-index:30;padding:30px 22px;overflow:auto;transform:translateX(100%);transition:transform .25s ease}.queue-panel.open{transform:translateX(0)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.panel-heading h2{margin:0}.queue-caption{display:flex;align-items:center;justify-content:space-between;margin:25px 0 15px;font-size:9px;letter-spacing:2px;color:var(--muted)}.queue-caption button{font-size:10px;letter-spacing:0}.queue-row{display:flex;align-items:center;gap:5px;padding:9px 0}.queue-row .track-title-button{flex:1;overflow:hidden;gap:10px}.queue-row img{width:42px;height:42px}.queue-row .song-text strong{font-size:12px}.queue-row .icon-button{width:26px}.queue-row .reorder{font-size:15px;color:var(--muted);padding:5px}.toast{position:fixed;bottom:calc(var(--player) + 20px);left:50%;transform:translate(-50%,15px);opacity:0;background:var(--accent);color:var(--ink);border-radius:8px;padding:12px 20px;box-shadow:0 8px 35px #0004;z-index:100;font-size:12px;max-width:calc(100% - 30px);pointer-events:none;transition:all .2s}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{background:#fffcf7;color:var(--text);border:1px solid #29262230;padding:36px;border-radius:15px;width:480px;max-width:calc(100vw - 30px);max-height:calc(100dvh - 35px);box-shadow:0 30px 90px #0008}dialog::backdrop{background:#1e1d1bb3;backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:12px;top:12px}dialog h2{margin-bottom:15px}dialog .eyebrow{margin-top:15px}label{display:block}form label,dialog>label{color:var(--muted);font-size:11px;margin:20px 0}input:not([type=range]),select,textarea{display:block;width:100%;background:#ffffff;color:var(--text);border:1px solid #29262230;border-radius:6px;padding:12px;margin-top:7px;outline-color:var(--accent)}textarea{resize:vertical}form .primary-button{margin-top:5px}input[type=file]{font-size:11px;padding:10px}input[type=file]::file-selector-button{background:#e9ddcc;color:var(--text);border:0;padding:8px;border-radius:3px;margin-right:9px}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.error-box,.success-box{padding:12px 15px;border-radius:6px;background:#ae59401c;border:1px solid #d98a6855;font-size:12px;margin:15px 0;color:#8b3828}.success-box{background:#e8af6820;border-color:#ad875266;color:var(--accent)}.note-entry{padding:16px 0;border-top:1px solid var(--line);margin-top:20px}.note-entry p{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}.note-entry header{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}.menu-action{display:block;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--line)}.now-dialog{text-align:center;width:480px}.now-dialog>img{width:100%;max-width:330px;aspect-ratio:1;object-fit:cover;border-radius:6px;margin:0 auto 24px;box-shadow:0 12px 32px #0004}.now-dialog h2{margin-bottom:5px}.now-dialog>.quiet-button{display:flex;margin:12px auto 0}.mobile-only{display:none}.login-page{min-height:100vh;background:radial-gradient(ellipse at 15% 35%,#e8af6830,transparent 60%),var(--bg);overflow-x:hidden}.login-brand{position:relative;margin:38px 6vw;z-index:1}.login-layout{max-width:1170px;margin:65px auto 60px;display:grid;grid-template-columns:1.2fr 1fr;gap:100px;padding:0 35px;align-items:center}.login-intro{position:relative;min-height:520px;isolation:isolate}.login-intro h1{font-size:clamp(58px,6.3vw,88px);margin-bottom:28px}.login-intro>p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.8}.record-art{position:absolute;right:0;bottom:0;width:270px;height:270px;z-index:-1;border-radius:50%;background:repeating-radial-gradient(circle,#292a2c 0px,#484847 2px,#232426 3px,#303133 5px);box-shadow:10px 20px 50px #0005;opacity:.75;display:grid;place-items:center;transform:rotate(-18deg)}.record-label{border-radius:50%;background:#e8af68;color:#292622;width:95px;height:95px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:italic 36px var(--serif)}.record-label small{font:6px Arial,sans-serif;letter-spacing:1.5px;margin-top:7px}.login-card{position:relative;background:#fffcf7;border:1px solid #29262224;border-radius:14px;padding:38px 36px;box-shadow:0 20px 60px #0002}.login-card h2{font-size:33px}.login-card .eyebrow{margin-bottom:20px}.login-card form>.primary-button{width:100%;margin:10px 0 18px;justify-content:space-between}.login-card .privacy-note{font-size:10px;line-height:1.8;color:#6e6258;border-top:1px solid var(--line);padding-top:22px;margin:24px 0}.back-home{color:var(--muted);font-size:11px}.login-footer{display:flex;justify-content:space-between;padding:30px 6vw;font-size:8px;letter-spacing:2px;color:#746a61;border-top:1px solid var(--line)}.admin-dialog{width:950px}.admin-tabs{display:flex;gap:15px;border-bottom:1px solid var(--line);margin-bottom:24px}.admin-tabs button{font-size:12px;padding:12px 0;color:var(--muted)}.admin-tabs button.active{color:var(--accent);border-bottom:1px solid var(--accent)}.invite-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.invite-grid label{margin:8px 0}.admin-table{width:100%;border-collapse:collapse;font-size:11px}.admin-table th{text-align:left;color:var(--muted);font-size:9px;letter-spacing:1px;font-weight:400}.admin-table td,.admin-table th{padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:middle}.admin-table small{display:block;color:var(--muted);margin-top:3px}.admin-table select{min-width:115px;font-size:10px;padding:7px;margin:0}.admin-table .text-button{font-size:10px}.table-scroll{overflow:auto}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.stat-card{padding:18px;border:1px solid var(--line);border-radius:8px}.stat-card strong{font:30px var(--serif);display:block}.stat-card span{font-size:10px;color:var(--muted)}.admin-toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between}.admin-toolbar select{width:220px;margin:0}.admin-description{font-size:11px;color:var(--muted);line-height:1.8}
@media(min-width:1600px){.library-main{padding-left:70px;padding-right:70px}.library-hero{padding-top:60px;padding-bottom:70px}.sleeve-stack{margin-right:80px;width:290px;height:290px}.sleeve-stack img{width:270px}}
@media(max-width:1150px){:root{--sidebar:205px}.sidebar{padding:28px 16px}.brand{font-size:16px}.library-main{padding-left:30px;padding-right:30px}.sleeve-stack{width:175px;height:190px}.sleeve-stack img{width:170px}.library-hero{gap:20px}.hero-actions .subtle{width:100%}.player-extras input{display:none}.now-playing{width:190px}.list-heading,.track-row{grid-template-columns:23px minmax(140px,1fr) 95px 35px 65px;gap:8px}.transport-buttons{gap:13px}.login-layout{gap:50px}}
@media(max-width:850px){:root{--sidebar:190px}.library-main{padding-left:24px;padding-right:24px}.sleeve-stack{display:none}.library-hero{min-height:310px}.desktop-column{display:none}.list-heading,.track-row{grid-template-columns:22px minmax(140px,1fr) 36px 65px}.player-bar{padding:16px;gap:8px}.now-playing{width:155px}.now-playing img{width:46px;height:46px}.player-heart{display:none}.player-extras{gap:0}.player-extras #mute{display:none}.transport-buttons{gap:9px}.library-toolbar{align-items:flex-start;flex-direction:column;gap:8px}.login-layout{gap:30px}.login-card{padding:30px 25px}.login-intro h1{font-size:64px}.record-art{width:220px;height:220px;right:10px;bottom:35px}}
@media(max-width:640px){:root{--sidebar:255px;--player:150px}.mobile-only{display:inline-flex}.sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:20px 0 60px #0008;bottom:var(--player)}.sidebar.open{transform:translateX(0)}.sidebar .brand{margin-top:15px;margin-bottom:35px}.library-main{margin:0;padding:0 18px calc(var(--player) + 25px)}.topbar{height:72px;gap:9px}.search{gap:7px}.search>i{display:none}.search input{font-size:11px;margin:0;min-width:0}.topbar .quiet-button{padding:6px}.topbar .quiet-button span{display:none}.library-hero{padding:25px 6px 35px;min-height:300px}.library-hero h1{font-size:54px;letter-spacing:-1.5px}.library-hero .eyebrow{font-size:8px;letter-spacing:1.8px}.hero-actions{gap:13px;margin-top:24px}.hero-actions .subtle{width:auto;font-size:10px}.filter-tabs{flex-wrap:nowrap;overflow:auto;width:100%;padding-bottom:5px}.library-toolbar{gap:8px;padding-bottom:12px}.filter-tab{font-size:10px;padding:7px 11px}.sort-label{align-self:flex-end}.list-heading{padding:16px 4px 8px;grid-template-columns:18px minmax(100px,1fr) 30px 55px;gap:6px;font-size:8px}.track-row{padding:10px 4px;min-height:72px;grid-template-columns:18px minmax(100px,1fr) 30px 55px;gap:6px}.track-title-button{gap:10px}.track-title-button img{width:43px;height:43px}.song-text strong{font-size:12px}.song-text small{font-size:9px}.track-actions .icon-button{width:28px}.track-actions i{width:14px;height:14px}.track-duration,.track-number{font-size:10px}.player-bar{display:grid;grid-template-columns:minmax(0,1fr) 36px 38px 38px;grid-template-rows:52px 54px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));height:calc(var(--player) + env(safe-area-inset-bottom));gap:0 9px}.now-playing{width:auto;grid-column:1/3;grid-row:1}.now-playing img{width:44px;height:44px}.now-playing strong{font-size:12px}.transport{display:contents}.transport-buttons{display:contents}.transport-buttons #play{grid-column:3;grid-row:1}.transport-buttons #next{grid-column:4;grid-row:1}.transport-buttons #previous{grid-column:1;grid-row:2;justify-self:start;align-self:end;width:30px;height:30px}.transport-buttons #shuffle{position:absolute;right:117px;bottom:8px;width:28px;height:28px}.transport-buttons #repeat{position:absolute;right:78px;bottom:8px;width:28px;height:28px}.progress-row{grid-column:1/5;grid-row:2;align-self:start;width:100%;margin:7px 0 0}.player-extras{display:contents}.player-extras #notes-open{position:absolute;right:39px;bottom:8px;width:28px;height:28px}.player-extras #expand-player{position:absolute;right:5px;bottom:8px;width:28px;height:28px}.player-extras #volume{display:none}.queue-panel{width:100%;bottom:calc(var(--player) + env(safe-area-inset-bottom))}.toast{bottom:calc(var(--player) + 26px);width:max-content}.library-footnote{font-size:14px;text-align:center}.login-brand{margin:28px 25px}.login-layout{display:block;margin:45px auto 30px;padding:0 24px}.login-intro{min-height:0;margin-bottom:35px}.login-intro h1{font-size:52px;line-height:1.04;margin-bottom:18px}.login-intro h1 br:nth-child(2){display:none}.login-intro .eyebrow{font-size:8px;letter-spacing:1.6px}.login-intro>p:not(.eyebrow){font-size:12px}.record-art{width:150px;height:150px;right:-30px;bottom:-20px;opacity:.4}.record-label{width:55px;height:55px;font-size:24px}.record-label small{display:none}.login-card{padding:28px 23px}.login-card h2{font-size:29px}.login-footer{padding:25px;gap:25px;line-height:1.8;font-size:7px}.login-footer span:last-child{text-align:right}dialog{padding:30px 23px}.now-dialog>img{max-width:260px}.invite-grid{grid-template-columns:1fr}.admin-table td,.admin-table th{padding:11px 6px}.stat-grid{gap:6px}.stat-card{padding:12px}.stat-card strong{font-size:25px}.stat-card span{font-size:9px}.admin-toolbar{align-items:flex-start;flex-direction:column}.admin-toolbar select{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.queue-panel:not(.open){visibility:hidden}.search input{margin:0;border:0;background:transparent;padding:10px 0}.playlist-item svg{width:18px;height:18px;flex-shrink:0}.now-playing img{background:var(--surface)}
@media(max-width:640px){.sidebar:not(.open){visibility:hidden}.playlist-item .remove-playlist{opacity:1}}
.connection-status{font-size:9px;letter-spacing:1px;white-space:nowrap;color:var(--muted);order:3}.connection-status.is-offline{color:var(--accent)}.download-toolbar{display:flex;justify-content:flex-end;padding:0 0 12px}.download-toolbar .quiet-button{font-size:10px}.download-badge{display:block;color:var(--accent);font-size:8px;letter-spacing:.6px;margin-top:4px}.offline-access{font-size:12px;line-height:1.7}.offline-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0}.offline-file{display:flex;gap:15px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.offline-file span{flex:1;font-size:12px}.offline-file small{font-size:10px;color:var(--muted)}progress{width:100%;height:7px;accent-color:var(--accent)}.group-offline{margin:28px 0;padding:18px;border:1px solid var(--line);border-radius:8px}.group-offline summary{cursor:pointer;color:var(--accent);font-size:12px}.group-offline p{margin-top:16px}.group-offline label{display:flex;align-items:center;justify-content:space-between;font-size:11px;gap:20px;padding:6px 0}.group-offline select{max-width:150px;margin:0;padding:8px}.admin-table td:nth-child(4) select{min-width:150px}#install-dialog>p{line-height:1.8;font-size:12px}#install-dialog strong{color:var(--accent)}
@media(max-width:640px){.connection-status{display:none}.download-toolbar{justify-content:flex-start;padding:0 0 18px}.offline-actions{flex-direction:column;align-items:stretch;gap:15px}.sidebar-foot{gap:12px;padding-top:20px}.sidebar .brand{margin-bottom:25px}.playlist-heading{margin-top:24px}}

/* Icons keep their own dimensions in Safari, buttons, and inline links. */
.ui-icon{display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:middle;pointer-events:none}
.sidebar-foot .ui-icon,.back-home .ui-icon{width:14px;height:14px;flex-basis:14px;margin-inline:3px}
.remove-playlist,.queue-row .reorder{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}
.remove-playlist .ui-icon,.queue-row .reorder .ui-icon{width:16px;height:16px;flex-basis:16px}

#install-dialog{width:min(560px,calc(100vw - 32px))}#install-dialog h2{font-size:clamp(32px,7vw,46px)}#install-dialog p,#install-dialog li{line-height:1.65}#install-dialog ol{padding-left:22px}#install-dialog li{padding:5px 0}#install-dialog .ui-icon{vertical-align:middle}.install-device-label{display:grid;gap:8px;margin:20px 0 12px}.install-offline{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:12px}.install-offline h3{margin:0 0 8px}.install-offline p{margin:0;font-size:14px}#install-dialog .offline-actions{flex-wrap:wrap}#install-dialog [hidden]{display:none!important}

.install-offline summary{cursor:pointer;color:var(--accent);font-weight:500}.install-offline[open] summary{margin-bottom:12px}

.library-order-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;margin-left:auto}.favorites-filter{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:22px;font-size:11px;color:var(--muted)}.favorites-filter[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}.favorites-filter .ui-icon{width:15px;height:15px;flex-basis:15px}.favorites-filter[hidden]{display:none}@media(max-width:640px){.library-order-controls{width:100%;justify-content:space-between;gap:8px}.library-order-controls .sort-label{align-self:center}}

.activity-filters{display:flex;align-items:end;gap:16px;flex-wrap:wrap}.activity-filters label{flex:1;min-width:160px;font-size:12px;color:var(--muted)}.report-pages{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:16px 0 30px}.feedback-entry{border-top:1px solid var(--line);padding:18px 0}.feedback-entry h4{margin:0;font-size:14px}.feedback-body{white-space:pre-wrap;overflow-wrap:anywhere}.note-sharing{display:flex;gap:10px;align-items:center}.note-sharing input[type=checkbox]{display:inline-block;width:18px;height:18px;margin:0;accent-color:var(--accent)}.note-entry header{flex-wrap:wrap;gap:8px}.note-entry header button{margin-left:10px}
@media(max-width:640px){.player-bar{padding-left:calc(18px + env(safe-area-inset-left,0px));padding-right:calc(18px + env(safe-area-inset-right,0px))}.transport-buttons #shuffle{right:calc(146px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:36px;height:36px}.transport-buttons #repeat{right:calc(104px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:36px;height:36px}.player-extras #notes-open{right:calc(62px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:36px;height:36px}.player-extras #expand-player{right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:36px;height:36px}}

/* A guided collection, with room for the songs to breathe. */
.library-toolbar{align-items:flex-start;flex-wrap:wrap}.filter-tabs{flex-basis:100%;gap:8px}.filter-tab{font-size:12px;padding:10px 14px;min-height:44px;border-color:#29262226}.filter-tab.active{background:#ab503c10}.chapter-count{font-size:10px;opacity:.65;margin-left:8px}.library-order-controls{margin-left:auto}.chapter-heading{padding:32px 12px 16px;border-top:1px solid var(--line);margin-top:18px}.chapter-heading:first-child{margin-top:0}.chapter-heading .eyebrow{font-size:9px;margin:0 0 9px}.chapter-heading h2{font-size:30px;color:var(--accent);margin:0 0 10px}.chapter-heading>p:last-child{font-size:12px;color:var(--muted);max-width:66ch;margin:0}.song-text small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;margin-top:3px}.library-hero>div>p:not(.eyebrow){max-width:52ch}.queue-row .song-text small{display:none}@media(max-width:600px){.filter-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:3px 2px 12px;scrollbar-width:thin}.filter-tab{flex-shrink:0}.chapter-heading{padding:26px 4px 14px}.chapter-heading h2{font-size:27px}.track-row{padding:13px 4px}.track-title-button{gap:11px}.song-text small{font-size:10px}}

/* Keep app navigation below iPhone status icons, including the installed app. */
@media(max-width:640px){.topbar{position:sticky;top:0;z-index:25;height:auto;min-height:calc(72px + env(safe-area-inset-top,0px));padding:calc(8px + env(safe-area-inset-top,0px)) 18px 8px;margin:0 -18px;background:#292a2cf5;backdrop-filter:blur(18px)}.topbar .search{min-width:0;flex:1}.topbar .search input{font-size:16px;min-height:44px}.topbar .icon-button,.topbar .quiet-button{width:44px;min-width:44px;height:44px;padding:10px}.sidebar{z-index:60;padding-top:calc(28px + env(safe-area-inset-top,0px))}.queue-panel{padding-top:calc(24px + env(safe-area-inset-top,0px))}}
.now-dialog{width:480px;padding:34px 32px 24px;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 28px);overflow-y:auto;overscroll-behavior:contain}.now-dialog .eyebrow{margin:20px 24px 24px;font-size:9px}.now-dialog>img{max-width:min(290px,34dvh);display:block;margin:0 auto 22px}.now-dialog h2{font-size:36px;line-height:1.15;margin-bottom:8px}.now-dialog #expanded-artist{font-size:11px;color:var(--muted);margin-bottom:22px}.now-word{font-size:11px;font-weight:600;letter-spacing:3px;color:var(--accent);margin:0 0 9px}.now-tagline{font-size:13px;line-height:1.6;color:var(--muted);max-width:36ch;margin:0 auto}.expanded-progress{margin:24px 0 10px}.expanded-progress input{display:block;width:100%;height:24px;margin:0}.expanded-times{display:flex;justify-content:space-between;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}.expanded-transport{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 20px}.expanded-transport .icon-button{width:46px;height:46px}.expanded-transport .ui-icon{width:23px;height:23px;flex-basis:23px}.expanded-play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--ink);flex:0 0 64px}.expanded-play .ui-icon{width:27px;height:27px}.expanded-secondary{display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid var(--line);padding-top:12px}.expanded-secondary .quiet-button{font-size:12px}.now-dialog .dialog-close{width:44px;height:44px;right:8px;top:8px}@media(max-width:640px){.now-dialog{padding:24px 22px 18px;width:calc(100vw - 24px);max-width:440px}.now-dialog .eyebrow{margin-top:24px}.now-dialog>img{max-width:min(260px,30dvh)}.now-dialog h2{font-size:32px}.expanded-transport{gap:4px}.expanded-progress{margin-top:18px}}

/* Ivory & Charcoal: light reading surfaces, dark navigation and playback. */
body{background:var(--bg)}
h1 em{color:var(--text)}
.library-main{padding-inline:var(--gutter);background:radial-gradient(ellipse at 82% 4%,#e8af6833,transparent 42%),var(--bg)}
.library-hero{background:radial-gradient(ellipse at 75% 70%,#e8af681f,transparent 65%)}
.eyebrow,.chapter-heading .eyebrow{color:#92583a}
.chapter-heading h2{color:var(--text)}
.sleeve-stamp{background:var(--amber);color:var(--charcoal)}
.sleeve-stack img{box-shadow:0 14px 35px #29262225}
.filter-tab{background:var(--surface);border-color:var(--line);color:var(--text)}
.filter-tab.active{background:var(--charcoal);color:#fffcf7;border-color:var(--charcoal)}
.track-row{border-bottom:1px solid #2926220d}
.track-row:hover{background:#ab503c08}
.track-row.current{background:#ab503c10;box-shadow:inset 3px 0 var(--accent)}
.favorites-filter{border-color:#907b6166}
.favorites-filter[aria-pressed=true]{background:var(--charcoal);color:#fffcf7;border-color:var(--charcoal)}
.sort-label select{background:transparent}
.queue-panel{box-shadow:-12px 0 45px #29262218}
dialog{box-shadow:0 24px 85px #18181840}
input:not([type=range]),select,textarea{border-color:#95816b66}
input[type=file]::file-selector-button{color:#292622}
.success-box{color:#775028;background:#f5e7d3;border-color:#ad875266}
.error-box{color:#8b3828;background:#f9e9e2}
.toast{background:var(--charcoal);color:#fffcf7;border:1px solid #e8af6870}
.stat-card,.group-offline,.install-offline{background:#f5f0e7}
/* Dark surfaces use their own semantic colors, including focus and active states. */
.sidebar,.topbar,.player-bar,.now-header,.now-controls,.login-brand,.login-footer{
 color-scheme:dark;--text:#fffcf7;--muted:#c8bfb3;--accent:#e8af68;--ink:#292622;--line:#fffcf72b;--surface:#363638;--raised:#414143;
 background:var(--charcoal);color:var(--text)
}
.sidebar{border-right-color:#fffcf71c}
.sidebar .nav-caption,.sidebar .eyebrow{color:var(--muted)}
.nav-item.active{color:var(--accent);background:#e8af6817}
.sidebar .nav-item:hover,.sidebar .icon-button:hover{background:#ffffff0d}
.sidebar-foot a:hover,.sidebar-foot button:hover{color:var(--text)}
.topbar{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);border-bottom:1px solid #fffcf71c}
.topbar .search{gap:10px;background:#ffffff09;border:1px solid #fffcf733;border-radius:100px;padding:0 15px}
.topbar .search input{background:transparent;border:0;margin:0;padding:11px 0;color:var(--text);border-radius:0;box-shadow:none}
.topbar .search input::placeholder{color:var(--muted)}
.topbar .quiet-button,.topbar .icon-button,.player-bar .icon-button,.now-controls .icon-button{color:var(--text)}
.topbar .icon-button:hover,.player-bar .icon-button:hover,.now-controls .icon-button:hover{background:#ffffff12}
.player-bar{border-color:#fffcf726;box-shadow:0 -6px 28px #29262220}
.player-bar .play-button,.now-controls .expanded-play{background:var(--amber);color:var(--charcoal)}
.player-bar .icon-button[aria-pressed=true],.now-controls .icon-button[aria-pressed=true]{color:var(--amber)}
/* Keep artwork and editorial copy on ivory; group controls on charcoal. */
.now-dialog{padding:0 26px 24px;background:radial-gradient(ellipse at 50% 36%,#e8af6820,transparent 60%),var(--surface)}
.now-header{position:relative;display:flex;align-items:center;justify-content:center;min-height:70px;margin:0 -26px 24px;padding:12px 52px 12px 20px;border-bottom:1px solid #ffffff1a}
.now-dialog .now-header .eyebrow{color:var(--amber);margin:0;font-size:9px;letter-spacing:2px}
.now-dialog .now-header .dialog-close{top:13px;right:9px;color:var(--text)}
.now-dialog>img{box-shadow:0 10px 28px #29262229}
.now-word{color:#92583a;font-size:11px;letter-spacing:3px;margin-bottom:10px}
.now-tagline{font:italic 16px/1.5 var(--serif);color:#554b42}
.now-controls{margin-top:22px;padding:16px 18px 12px;border-radius:18px;box-shadow:0 7px 20px #29262216}
.now-controls .expanded-progress{margin:0 0 10px}
.now-controls .expanded-transport{margin:16px 0 18px}
.now-controls .expanded-secondary{border-color:var(--line)}
.now-controls .expanded-times{color:var(--muted)}
.now-controls .quiet-button{color:var(--text)}
/* One palette for sign-in, invitation acceptance, and password reset. */
.login-page{background:radial-gradient(ellipse at 18% 40%,#e8af682e,transparent 60%),var(--bg)}
.login-brand{display:block;margin:0;padding:30px 6vw}
.login-card{border-color:#29262224;box-shadow:0 16px 50px #29262212}
.record-art{opacity:.9;box-shadow:10px 20px 40px #29262222}
.record-label{background:var(--amber);color:var(--charcoal)}
.login-footer{border-color:var(--line)}
@media(min-width:1600px){:root{--gutter:70px}}
@media(max-width:1150px){:root{--gutter:30px}}
@media(max-width:850px){:root{--gutter:24px}}
@media(max-width:640px){
 :root{--gutter:18px}
 .library-main{padding-inline:var(--gutter);padding-bottom:calc(var(--player) + env(safe-area-inset-bottom,0px) + 25px)}
 .topbar{background:var(--charcoal);padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px));gap:3px}
 .topbar .search{padding-inline:12px}
 .topbar .search input{font-size:16px;min-height:44px}
 .library-hero h1{font-size:clamp(38px,12vw,54px)}
 .now-dialog{padding:0 18px 18px}
 .now-header{margin-inline:-18px;margin-bottom:20px;min-height:64px}
 .now-dialog .now-header .dialog-close{top:10px}
 .now-controls{padding:12px 12px 10px;margin-top:18px}
 .now-controls .expanded-transport{gap:2px}
 .now-controls .expanded-play{width:58px;height:58px;flex-basis:58px}
 .now-controls .expanded-transport .icon-button{width:42px;height:44px}
 .now-controls .expanded-secondary{gap:5px}
 .now-controls .expanded-secondary .quiet-button{font-size:11px;padding-inline:4px}
 .login-brand{margin:0;padding:calc(22px + env(safe-area-inset-top,0px)) 25px 22px}
 .login-footer{padding-bottom:calc(25px + env(safe-area-inset-bottom,0px))}
 .toast{bottom:calc(var(--player) + env(safe-area-inset-bottom,0px) + 20px)}
}
@media(max-height:740px){
 .now-dialog>img{max-width:min(230px,24dvh);margin-bottom:16px}
 .now-dialog #expanded-artist{margin-bottom:12px}
 .now-header{min-height:56px;margin-bottom:16px}
 .now-dialog .now-header .dialog-close{top:6px}
 .now-controls{margin-top:14px}
 .now-controls .expanded-transport{margin:10px 0 12px}
}