:root {
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#25282b;
  background:#f7f7f4;
  font-synthesis:none;
  --accent:#c35435;
  --muted:#777d82;
  --line:#e2e4e1;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; border:0; touch-action:manipulation; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
button,a,input { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.topbar { max-width:1320px; margin:auto; height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; }
.brand { text-decoration:none; color:inherit; font-size:22px; font-weight:700; letter-spacing:-1px; display:flex; align-items:center; }
.brand-disc { color:var(--accent); font-size:31px; margin-right:9px; }
.brand-light { font-weight:400; }
.connection { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:24px; padding:10px 15px; background:#fff8; font-size:11px; }
.topbar-actions { display:flex; align-items:center; gap:8px; min-width:0; }
#album-menu,.songs-cue { display:none; }
#album-dialog { width:min(460px,calc(100% - 24px)); max-height:calc(100svh - 32px); padding:20px; border:1px solid var(--line); border-radius:20px; background:#f7f7f4; color:inherit; }
#album-dialog::backdrop { background:#141a2070; }
#album-dialog form { display:flex; justify-content:flex-end; }
body:has(#album-dialog[open]) { overflow:hidden; }
.status-dot { width:5px; height:5px; background:#77956b; border-radius:50%; }
main { max-width:1160px; margin:auto; padding:12px 32px 60px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:68px; align-items:start; }
.listening { min-width:0; }
.disc-stage { position:relative; padding:58px 32px 32px; overflow:hidden; isolation:isolate; }
.chamber {
  position:relative;
  aspect-ratio:1;
  border-radius:32px;
  perspective:2400px;
  perspective-origin:50% 5%;
  background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px),linear-gradient(135deg,#44484b,#24272a 42%,#34383b);
  border:1px solid #575b5d;
  box-shadow:0 1px 1px #ffffffe0 inset,0 0 0 3px #acb0b1,0 0 0 4px #73787b,0 8px 0 2px #64696b,0 11px 0 1px #464b4d,0 18px 14px -6px #171a1b50,0 28px 38px -14px #141a2044;
}
.well {
  position:absolute; inset:5%; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 43%,#26292b 0 38%,#101315 66%,#030505 70%,#3d4245 70.5%,#1c2022 72%,#101315 74%,#51575a 75%,#181c1e 77%);
  box-shadow:0 2px 3px #000 inset,0 -1px 1px #8b909466;
}
.well:before { content:''; position:absolute; inset:10%; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 4px,#ffffff06 4px 5px); }
.laser-rail { position:absolute; width:17%; height:43%; left:41.5%; top:49%; border:4px solid #101314; background:linear-gradient(90deg,#050607 6%,#929b9c 7%,#d8dfdf 10%,#393f41 14%,#101416 16% 83%,#899395 85%,#b9c5c4 89%,#22282a 93%); border-radius:5px; box-shadow:0 1px 3px #000; }
.laser-rail:after { content:''; position:absolute; width:60%; aspect-ratio:1; left:20%; top:34%; border:4px solid #30383c; border-radius:4px; background:radial-gradient(circle,#69c6dd 0 8%,#201d63 12% 23%,#090b17 28% 35%,#445157 38% 48%,#11171a 50%); box-shadow:0 3px 4px #000; }
.spindle { position:absolute; width:12%; aspect-ratio:1; left:44%; top:44%; border-radius:50%; background:radial-gradient(circle,#d5d8d8 0 13%,#555c5f 15% 21%,#141819 23% 55%,#676f72 58% 62%,#161a1c 65%); box-shadow:0 2px 5px #000; }
.hinge { position:absolute; z-index:5; top:2%; width:14%; height:5%; border-radius:4px; background:linear-gradient(#171b1d,#9ba1a2 20%,#484f51 42%,#161c1e 72%,#757c7e); box-shadow:0 2px 4px #000a; }
.hinge-left { left:26%; }
.hinge-right { right:26%; }
.case-screw { position:absolute; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#50585b 43%,#111517 46% 56%,#6b7478 59%); box-shadow:0 0 0 1px #141819,0 1px 1px #a8b2b544; }
.top-left { top:6%; left:6%; } .top-right { top:6%; right:6%; }
.bottom-left { bottom:6%; left:6%; } .bottom-right { bottom:6%; right:6%; }
.disc-carriage { position:absolute; width:80%; aspect-ratio:1; left:10%; top:10%; z-index:2; transform:translate3d(0,0,0); will-change:transform,opacity; isolation:isolate; }
.disc { position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; will-change:transform; background:conic-gradient(from var(--light-angle,-40deg),#c9d0d4,#fff,#868c94,#f3f6f7,#b3bdc2,#fff,#c9d0d4); box-shadow:0 3px 6px #0009,0 0 0 1px #ffffffb0; }
.disc-rotor { position:absolute; inset:0; border-radius:50%; will-change:transform; }
.disc-art { position:absolute; inset:1.5%; border-radius:50%; overflow:hidden; background:#747c80; }
.disc-art img { width:100%; height:100%; object-fit:cover; }
.disc-art:has(.disc-label) { inset:0; background:transparent; }
.disc-art .disc-label { object-fit:contain; }
.disc-hub { position:absolute; width:19%; aspect-ratio:1; left:40.5%; top:40.5%; border-radius:50%; background:radial-gradient(circle,#202426 0 27%,#929b9e 28% 33%,#d7dcdd 34% 39%,#838e9470 41% 58%,#e6e9ebaa 60% 64%,#c3cbd18a 66% 70%,transparent 72%); box-shadow:0 0 0 1px #ffffff66; }
.disc-sheen { position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse at var(--light-x,30%) var(--light-y,20%),#ffffff20,transparent 62%),conic-gradient(from var(--light-angle,-40deg),transparent 0deg,#fff2 23deg,#80c8ff28 30deg,#bd9aff22 38deg,transparent 52deg,transparent 180deg,#9de3d722 205deg,#ffbfa020 220deg,#fff2 228deg,transparent 246deg); mix-blend-mode:screen; }
.disc-rainbow {
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 1px,#ffffff40 1px 1.6px),conic-gradient(from var(--light-angle,-40deg),#dce4e8 0deg,#f9fcff 20deg,#a3a2ff 28deg,#4dc5ff 35deg,#6ceebc 42deg,#ecf8a7 49deg,#ffc17e 56deg,#f08ac2 63deg,#ac9fe4 70deg,#b6c4cb 80deg,#f8fcfd 120deg,#9aabb5 160deg,#d2d9e0 180deg,#d0aaff 196deg,#80c7fc 203deg,#77e4cf 210deg,#e3e99d 217deg,#ffba8a 224deg,#f696c9 231deg,#c0a4e7 238deg,#c2cdd4 250deg,#f4f9fa 290deg,#a2afb9 330deg,#dce4e8 360deg);
  mask-image:radial-gradient(circle closest-side,transparent 0 12%,#0009 13% 17%,transparent 18% 94%,#000 96%);
}
.lid {
  position:absolute; z-index:4; inset:4%; border-radius:50%; transform-origin:50% 1%; transform-style:preserve-3d;
  border:2px solid #adbfc03d; background:linear-gradient(135deg,#a1c2c20a,#10232809 45%,#779fa40a);
  box-shadow:0 1px 2px #fff7 inset,0 -1px 1px #090f12,0 0 0 3px #0a1014b0,0 5px 8px #0004;
  pointer-events:none;
}
.lid-glint { position:absolute; inset:0; border-radius:50%; background:linear-gradient(125deg,transparent 18%,#d5f6ff06 18.4%,#d5f6ff26 43%,transparent 43.3%,transparent 74%,#fff3 74.3%,transparent 75%); background-size:180% 180%; background-position:0% 20%; opacity:.65; }
.lid-grip { position:absolute; bottom:1.5%; left:42%; width:16%; height:3%; border-radius:30px; background:linear-gradient(#4b555a,#141b1f); box-shadow:0 1px #b7c1c144 inset,0 1px 3px #0008; }
.player-controls { padding:16px 26px 0; }
.playback-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:1.2px; }
#play-state { color:var(--accent); }
#now-title { font-size:24px; font-weight:600; letter-spacing:-.7px; line-height:1.3; margin:12px 0 6px; overflow-wrap:anywhere; }
#now-artist { color:var(--muted); font-size:12px; line-height:1.6; margin:0; min-height:20px; }
input[type=range] { accent-color:#2c3337; height:4px; cursor:pointer; }
.scrubber { margin-top:23px; }
.scrubber input { width:100%; display:block; margin:0; }
.scrubber>div { display:flex; justify-content:space-between; margin-top:10px; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.transport { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:20px; }
.transport button { display:flex; align-items:center; justify-content:center; }
.icon-button { background:transparent; width:40px; height:48px; border-radius:12px; }
.icon-button:hover { background:#e9ece9; }
.icon-button[aria-pressed=true] { color:var(--accent); background:#c354350d; }
.play-button { background:#252c30; color:white; width:62px; height:62px; border-radius:50%; box-shadow:0 5px 12px #1b262318; }
.play-button:hover { background:#414a50; }
.play-button svg { width:28px; height:28px; }
.transport button:active { transform:scale(.96); }
#stop { flex-direction:column; gap:3px; }
#stop small { font-size:8px; }
.volume { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:22px; color:var(--muted); }
.volume svg { width:16px; height:16px; }
.volume input { width:85px; }
.collection { padding-top:54px; min-width:0; }
.collection-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
h2 { font-size:24px; letter-spacing:-.7px; font-weight:600; margin:0; }
.count { color:var(--muted); font-size:10px; white-space:nowrap; }
.search { display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; padding:8px 12px; gap:9px; background:#fff9; }
.search>span { font-size:24px; color:#8a9398; }
.search input { background:transparent; border:0; min-width:0; flex:1; font-size:12px; }
.search input::placeholder { color:#929a9f; }
.albums { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; margin-top:22px; max-height:350px; overflow:auto; padding:5px 5px 12px; scrollbar-width:thin; scrollbar-color:#c4cbc9 transparent; }
.album-card { background:transparent; text-align:left; padding:0; min-width:0; }
.cover { position:relative; aspect-ratio:1; overflow:hidden; border-radius:7px; box-shadow:0 3px 8px #18282013; border:1px solid #0001; }
.cover img { width:100%; height:100%; object-fit:cover; }
.album-card.selected .cover { outline:2px solid var(--accent); outline-offset:3px; }
.album-card.selected .cover:before { content:'LOADED'; position:absolute; right:5px; bottom:5px; border-radius:4px; background:#fff; padding:4px 5px; font-size:7px; letter-spacing:.7px; z-index:1; }
.album-card.selected:disabled .cover:before { content:'LOADING'; }
.album-card strong { display:block; margin-top:10px; font-size:11px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-card small { display:block; margin-top:4px; font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.album-detail { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
.album-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:17px; }
.album-heading>div { min-width:0; }
.album-heading h3 { font-size:20px; font-weight:600; margin:0 0 6px; letter-spacing:-.5px; overflow-wrap:anywhere; }
.album-heading p { font-size:11px; color:var(--muted); margin:0; }
.album-heading>span { font-size:9px; line-height:1.8; text-align:right; color:var(--muted); white-space:pre-line; }
.track { display:flex; align-items:center; width:100%; gap:14px; padding:13px 10px; background:transparent; text-align:left; border-radius:8px; font-size:11px; }
.track:hover { background:#ecefec; }
.track.active { background:#e9eeea; color:#335b48; }
.track-number { font-size:10px; color:#88968e; min-width:16px; }
.track-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-duration { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.tracks { max-height:275px; overflow:auto; scrollbar-width:thin; }
.notice { background:#f6e8df; color:#80452b; padding:14px 18px; border-radius:10px; margin:16px 0; font-size:13px; }
.text-button { background:none; color:var(--accent); font-size:12px; padding:12px 0; }
.empty { font-size:13px; line-height:1.7; color:var(--muted); grid-column:1/-1; padding:15px 0; }
.login { border:1px solid var(--line); border-radius:20px; background:#fff8; padding:32px; width:min(400px,100%); margin:48px auto; }
.login h1 { font-size:27px; line-height:1.2; margin:0; font-weight:600; letter-spacing:-1px; }
.login form>p { font-size:12px; color:var(--muted); line-height:1.7; }
.login label { display:block; font-size:11px; margin-top:18px; }
.login input { display:block; width:100%; margin-top:7px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; font-size:13px; }
.login input[readonly] { color:#8a9298; background:#eef0ed; }
.primary { background:#252c30; color:white; width:100%; padding:14px; border-radius:8px; font-size:12px; }
#login-error { color:#ae3d28; min-height:20px; }
@media(max-width:1000px) {
  .workspace { gap:32px; }
  .topbar { padding:0 30px; }
  .disc-stage { padding:52px 16px 28px; }
  .transport { gap:14px; }
  .player-controls { padding:16px 12px 0; }
}
@media(max-width:720px) {
  .topbar { height:70px; padding:0 22px; }
  .connection { font-size:10px; padding:9px 11px; }
  main { padding:0 22px 38px; }
  .workspace { grid-template-columns:1fr; gap:0; max-width:460px; margin:auto; }
  #album-menu { display:flex; flex-shrink:0; }
  .brand { font-size:18px; }
  .brand-disc { margin-right:5px; }
  #connection { min-width:0; }
  #connection-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px; }
  .listening { min-height:calc(100svh - 70px); display:flex; flex-direction:column; }
  .disc-stage { padding:42px 14px 28px; width:100%; max-width:min(100%,max(140px,calc(100svh - 450px))); margin:auto; flex-shrink:0; }
  .songs-cue { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin-top:auto; padding:16px 0; color:var(--muted); text-decoration:none; font-size:12px; }
  .collection { display:contents; }
  .album-detail { margin-top:0; padding-top:24px; scroll-margin-top:16px; }
  .tracks { max-height:none; }
  #album-dialog .albums { max-height:none; }
  .chamber { border-radius:25px; }
  .player-controls { padding:12px 8px 0; }
  #now-title { font-size:22px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .transport { gap:20px; }
  .collection { padding-top:0; }
  .albums { max-height:380px; }
  .login { margin:35px auto; padding:28px; }
}