:root{color-scheme:dark;font:16px/1.5 system-ui,sans-serif;color:var(--text,#f8fafc);background:var(--bg,#101015)}
*{box-sizing:border-box}body{margin:0}main{max-width:880px;margin:auto;padding:0 clamp(16px,4vw,40px) 48px}
header,.brand,.controls,.settings,.row,.volume,li{display:flex;align-items:center;gap:10px}header,.settings{justify-content:space-between}
header{padding:18px 0;border-bottom:1px solid var(--line)}.brand{font-weight:800;font-size:1.15rem}.brand{min-width:0}.brand strong{overflow-wrap:anywhere;min-width:0}.brand img{object-fit:contain;flex-shrink:0}.brand-icon{width:38px;height:38px;border-radius:9px}.brand-logo{max-width:min(35vw,220px);height:38px}.brand .brand-section{font-weight:450;color:var(--muted);border-left:1px solid var(--line);padding-left:10px}
h1,h2,p{margin:0}h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.045em;overflow-wrap:anywhere}h2{font-size:1.45rem}p{color:var(--muted)}#access{margin:18px 0;font-size:.9rem}
.hero{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:clamp(18px,4vw,36px);align-items:center;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,var(--hero-start),var(--hero-end) 75%);padding:clamp(18px,3.5vw,32px)}#login{margin-top:36px}#login p{margin:14px 0 22px}
.sleeve{position:relative;aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(145deg,var(--sleeve-start),var(--selected) 65%,var(--sleeve-end));border-radius:8px;overflow:hidden}.record{width:79%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--surface) 2%,var(--highlight) 2.5% 13%,var(--accent) 13.5% 15%,transparent 16%),repeating-radial-gradient(circle,var(--raised) 0 2px,var(--surface) 3px 5px)}.sleeve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.details{min-width:0}.caption{color:var(--highlight);text-transform:uppercase;letter-spacing:.12em;font-size:.73rem;font-weight:750;margin-bottom:8px}#artist{margin-top:6px}#credit{font-size:.88rem;margin:5px 0 16px}
button,a.primary,input{font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--raised);color:inherit;padding:7px 12px}button,a{cursor:pointer}button:hover:enabled{border-color:var(--highlight)}button:disabled{opacity:.45;cursor:default}.primary,a.primary{background:var(--accent);border-color:transparent;color:var(--accent-text);font-weight:700;text-decoration:none;display:inline-block}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.settings,.controls{flex-wrap:wrap}.settings{margin:18px 0 30px}.volume,legend,#add label{font-size:.9rem;font-weight:650}fieldset{margin:0;padding:0;border:0}legend{margin-bottom:5px}fieldset button{font-size:.85rem;padding:4px 10px}button[aria-pressed=true]{color:var(--text);border-color:var(--accent);background:var(--selected)}input[type=range]{accent-color:var(--accent);width:90px;padding:0}output{min-width:3ch;font-variant-numeric:tabular-nums}
form{margin:24px 0}.row{margin-top:6px}.row input{flex:1;min-width:0;background:var(--surface)}ol{padding:0;margin:8px 0}li{border-top:1px solid var(--line);padding:12px 0;gap:8px}li .info{flex:1;min-width:0;overflow-wrap:anywhere}li small{display:block;color:var(--muted)}li.skipped{color:var(--muted)}li.skipped strong{text-decoration:line-through}li button{font-size:.8rem}#status{margin-top:16px;color:var(--highlight)}[hidden]{display:none!important}
@media(max-width:550px){.hero{grid-template-columns:1fr}.sleeve{width:min(70%,210px);justify-self:center}.settings{gap:18px}.controls{gap:6px}.brand{font-size:1rem}}

.person{display:inline-flex;align-items:center;gap:6px;margin-right:12px}.avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;overflow:hidden;background:var(--selected);color:#fff;font-size:.75rem}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}li.skipped .avatar{filter:grayscale(1)}li small{margin-top:3px}
.timeline{margin:16px 0}.timeline label{font-size:.8rem;color:var(--muted)}.timeline input{display:block;width:100%;height:28px;margin:2px 0;cursor:pointer}.timeline input:disabled{cursor:default;opacity:.5}.times{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}#seek-hint{font-size:.75rem;min-height:1.5em}