:root{color-scheme:dark;--bg: #101413;--surface: #1b2220;--raised: #26312c;--text: #f4f3e9;--muted: #adb9b1;--accent: #c6ed9e;--border: #39463e;--danger: #ffb4ab;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--text);background:var(--bg);accent-color:var(--accent)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid transparent;background:var(--raised);padding:.7rem 1rem;border-radius:8px;min-height:44px}button:hover{background:#34463a}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{color:var(--accent)}a{color:inherit;text-decoration:none}input,select{background:#111813;border:1px solid #67766b;border-radius:8px;padding:.8rem;color:var(--text);min-width:0}input[type=range]{padding:0;accent-color:var(--accent);border:0;min-height:24px}input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}h1,h2,p{margin-top:0}h1{font-size:clamp(2.6rem,5vw,4.6rem);letter-spacing:-.06em;font-weight:550;margin-bottom:1rem}h2{font-size:1.4rem;font-weight:550}p,small{color:var(--muted);line-height:1.65}small{display:block;font-size:.8rem}.eyebrow{font-size:.65rem;letter-spacing:.16em;font-weight:650}.brand{display:block;font-size:2rem;font-weight:650;letter-spacing:-.07em}.primary{background:var(--accent);color:#172312;font-weight:650}.primary:hover{background:#ddffbc}.shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100dvh}.sidebar{position:fixed;inset:0 auto 100px 0;width:228px;background:#111814;padding:32px 22px;border-right:1px solid #273329;display:flex;flex-direction:column;overflow:auto}.sidebar>.eyebrow{margin-top:40px;font-size:.55rem}.sidebar nav{display:grid;gap:5px}.sidebar nav button{background:none;text-align:left;color:var(--muted);display:flex;gap:15px;align-items:center;padding:.65rem .8rem}.sidebar nav button span{font-size:1.35rem;width:24px}.sidebar nav button[aria-current=page]{background:#2a392c;color:var(--accent)}.sidebar-foot{margin-top:auto;padding-top:30px;font-size:.8rem}.sidebar-foot small{margin:10px 0}.sidebar-foot button{padding:.3rem .7rem;min-height:36px}.status-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:5px}.content{grid-column:2;padding:26px 48px 155px;min-width:0;background:radial-gradient(ellipse at 40% 0,#26382955,transparent 550px)}.topbar{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;letter-spacing:.16em;color:var(--muted);margin-bottom:55px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#c6d3b9;color:#26312c;font-size:.8rem}.page-heading{margin-bottom:44px}.page-heading p:last-child{font-size:.95rem}.section-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:24px 0}.section-title h2{margin:0}.section-title button{font-size:.8rem}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:28px 22px}.album-card{display:block;padding:0;text-align:left;background:none;min-width:0}.album-card:hover{background:none}.cover{display:block;aspect-ratio:1;background:linear-gradient(140deg,#708572,#354734 45%,#c2b48b);border-radius:9px;overflow:hidden;position:relative;box-shadow:0 12px 28px #0003}.cover img,.thumb img{width:100%;height:100%;object-fit:cover;display:block}.art-placeholder{display:grid;width:100%;height:100%;place-items:center;font-size:4rem;color:#dce8cd9c}.cover-play{position:absolute;bottom:12px;right:12px;background:var(--accent);color:#20311d;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;opacity:0}.album-card:hover .cover-play,.album-card:focus-visible .cover-play{opacity:1}.album-card strong{display:block;margin:14px 0 3px;font-size:.9rem}.album-card small{font-size:.8rem}.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px;margin:28px 0}.artist-card{background:none}.artist-icon{border-radius:50%;background:var(--raised);display:grid;place-items:center;width:95px;height:95px;font-size:2.5rem;margin:0 auto 16px}.artist-card strong{display:block}.tracks{list-style:none;padding:0}.tracks li{display:flex;align-items:center;gap:14px;border-bottom:1px solid #29342d;padding:8px 0;font-size:.85rem}.tracks li.current strong{color:var(--accent)}.tracks li>button{background:none;padding:.5rem}.track-play{display:flex;align-items:center;gap:15px;text-align:left;flex:1;min-width:0}.track-play>span:last-child{min-width:0}.track-play strong,.playing-track strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-number{color:var(--muted);font-size:.75rem;min-width:22px}.thumb{width:44px;height:44px;flex-shrink:0;display:block;border-radius:5px;overflow:hidden;background:var(--raised)}.thumb .art-placeholder{font-size:2rem}.album-name{width:22%;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duration{color:var(--muted);font-size:.75rem}.empty{text-align:center;padding:60px 20px;color:var(--muted);border:1px dashed var(--border);border-radius:12px}.empty>span{font-size:4rem}.empty h2{color:var(--text);margin-top:20px}.search{max-width:680px;margin-bottom:32px}.search label,.playlist-form label{display:block;margin-bottom:10px;font-size:.85rem}.search>div{display:flex;gap:10px}.search input{flex:1}.playlist-form{padding:24px;background:var(--surface);border-radius:12px;margin:28px 0}.playlist-form input{margin-right:12px;max-width:100%}.playlist-card{display:flex;width:100%;gap:20px;align-items:center;text-align:left;margin:8px 0}.playlist-card small{margin-left:auto}.pagination{display:flex;justify-content:space-between;margin:24px 0}.error{border:1px solid #a46459;color:var(--danger);border-radius:8px;padding:12px 18px;margin:12px 0;display:flex;justify-content:space-between;align-items:center}.error button{background:none}.player{position:fixed;bottom:0;left:0;right:0;min-height:100px;background:#1b251ff5;border-top:1px solid #3c4d3e;padding:12px 24px;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:30px;align-items:center}.playing-track{display:flex;align-items:center;gap:12px;background:none;text-align:left;min-width:0;padding:0}.playing-track>span:last-child{min-width:0}.playing-track strong{font-size:.8rem}.transport-buttons{display:flex;justify-content:center;gap:12px;align-items:center}.transport-buttons button{background:none;padding:.4rem;min-width:32px;min-height:32px}.transport-buttons .play-button{background:var(--accent);color:#21371c;border-radius:50%;width:38px;height:38px}.seek{display:flex;align-items:center;gap:10px;font-size:.6rem;color:var(--muted);margin-top:6px}.seek input{flex:1;width:100%}.player-extra{display:flex;align-items:center;justify-content:flex-end;gap:18px}.player-extra button{background:none}.player-extra label{font-size:.65rem;display:flex;gap:10px;align-items:center}.player-extra input{width:80px}.now-playing{max-width:440px;margin:auto;text-align:center}.now-playing .cover{margin-bottom:24px}.now-playing button{margin:8px}.settings{max-width:680px}.settings h2{margin-top:32px}.settings label{display:block;margin-bottom:10px}.device{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}.skip{position:fixed;top:-80px;left:20px;padding:12px;background:var(--accent);color:#000;z-index:10}.skip:focus{top:10px}.login{min-height:100dvh;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:10vw;padding:7vw;background:radial-gradient(ellipse at 15% 80%,#48684d55,transparent 70%)}.login-story{position:relative;min-height:650px}.login-story>.eyebrow{margin-top:70px}.login-story h1{line-height:1.05}.login-story p{font-size:.9rem}.login-card{padding:40px;border:1px solid var(--border);border-radius:16px;background:#1b251ed9;display:grid;max-width:440px;width:100%;box-shadow:0 20px 70px #0003}.login-card h2{font-size:2rem;letter-spacing:-.04em;margin-bottom:10px}.login-card label{font-size:.8rem;margin:18px 0 8px}.login-card .primary{margin:26px 0 20px}.login-card small{font-size:.7rem}.record{width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(#111b13 0 3px,#263126 4px 5px);display:grid;place-items:center;margin:32px 40px;transform:rotate(-15deg);box-shadow:16px 15px 30px #0005}.record span{border-radius:50%;width:78px;height:78px;background:#bfcea3;color:#233b22;display:grid;place-items:center;font-size:3rem;font-family:Georgia,serif}.login-story .brand{font-size:2.5rem}@media(max-width:1050px){.content{padding-inline:28px}.player{gap:15px;grid-template-columns:1fr 1.2fr}.player-extra,.album-name{display:none}}@media(max-width:700px){.shell{display:block}.sidebar{position:static;width:auto;padding:18px 18px 10px;border-right:0}.sidebar .brand{font-size:1.7rem}.sidebar>.eyebrow,.sidebar-foot{display:none}.sidebar nav{display:flex;overflow:auto;margin-top:16px;gap:6px}.sidebar nav button{white-space:nowrap;font-size:.8rem;padding:8px 12px}.sidebar nav button span{display:none}.content{padding:20px 18px 185px}.topbar{margin-bottom:25px}.page-heading{margin-bottom:30px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.tracks li{gap:5px}.tracks li .thumb{display:none}.track-play{gap:8px}.track-number{min-width:16px}.duration{display:none}.player{padding:10px 16px 16px;grid-template-columns:1fr;gap:5px}.playing-track{max-width:100%;min-height:42px}.playing-track .thumb{width:32px;height:32px}.transport{display:flex;flex-direction:column}.transport-buttons{gap:20px}.transport-buttons button{min-height:38px}.seek{margin-top:0}.login{display:block;padding:30px 20px}.login-story{min-height:0}.login-story>.eyebrow{margin-top:35px}.login-story h1{font-size:3rem}.record{display:none}.login-card{padding:25px;margin:30px auto}.playlist-form input{width:100%;margin-bottom:12px}}