:root{--room:#101113;--faceplate:#1a1c1f;--panel:#212327;--groove:#0c0d0e;--edge-hi:#33363b;--alu:#c7ccd1;--alu-dim:#82888f;--amber:#ffb000;--amber-glow:#ffb00059;--led-green:#71d98b;--led-red:#e8604c;--walnut:#4e3a2a;--walnut-hi:#6b5138;--label:600 .8rem "Barlow Condensed", sans-serif;--mono:"IBM Plex Mono", monospace}*{box-sizing:border-box}html{scrollbar-gutter:stable}body{background:var(--room);min-height:100vh;color:var(--alu);justify-content:center;margin:0;padding:2.5rem 1rem;font:400 .95rem/1.45 system-ui,sans-serif;display:flex}#app{width:min(430px,100%);min-width:0}.deck{--deck-pad:1.3rem;background:linear-gradient(180deg, var(--edge-hi) 0%, var(--faceplate) 4%, var(--faceplate) 96%, #08090a 100%);border-top:7px solid var(--walnut);width:100%;box-shadow:inset 0 1px 0 var(--walnut-hi), 0 25px 60px -20px #000000e6;padding:1.1rem var(--deck-pad) 1.4rem;border-radius:10px}.brand{border-bottom:1px solid var(--groove);box-shadow:0 1px 0 var(--edge-hi);justify-content:space-between;align-items:baseline;margin-bottom:.4rem;padding-bottom:.75rem;display:flex}.brand h1{letter-spacing:.34em;text-transform:uppercase;color:var(--alu);margin:0;font:600 1.25rem Barlow Condensed,sans-serif}.brand .model{font:var(--label);letter-spacing:.18em;color:var(--alu-dim)}.brand .lamp{vertical-align:1px;background:#3a3d42;border-radius:50%;width:7px;height:7px;margin-right:.5em;display:inline-block}.brand .lamp.on{background:var(--led-green);box-shadow:0 0 6px var(--led-green)}.deck section{border-bottom:1px solid var(--groove);box-shadow:0 1px 0 var(--edge-hi);padding:1.25rem 0}.deck section:last-of-type{box-shadow:none;border-bottom:none}.deck>section:first-of-type{box-shadow:none;border-bottom:none;padding-bottom:.2rem}.panel-label{font:var(--label);letter-spacing:.28em;text-transform:uppercase;color:var(--alu-dim);margin:0 0 .55rem}.value{color:var(--alu)}.value.unset{color:var(--alu-dim);font-style:italic}.slot-wrap{align-items:flex-end;gap:.7rem;display:flex;padding-top:.9rem!important}.tray{flex:1;height:118px;position:relative;overflow:hidden}.slot-mouth{border:1px solid var(--groove);height:34px;box-shadow:inset 0 3px 8px #000c, 0 1px 0 var(--edge-hi);z-index:5;background:linear-gradient(#202226,#141518);border-radius:5px;position:absolute;bottom:0;left:0;right:0}.slot-mouth:before{content:"";background:#000;border-radius:2px;height:4px;position:absolute;top:4px;left:12%;right:12%}.tray.glowing .slot-mouth{box-shadow:inset 0 3px 8px #000c, 0 0 14px var(--amber-glow), 0 1px 0 var(--edge-hi)}.tray-led{z-index:6;background:#35383d;border-radius:50%;width:7px;height:7px;position:absolute;bottom:9px;right:4%}.tray.glowing .tray-led{background:var(--amber);box-shadow:0 0 8px var(--amber-glow)}.spine{z-index:3;color:#33291f;background:linear-gradient(#ece4cf,#ddd3b8);border-radius:4px 4px 2px 2px;flex-direction:row;align-items:center;gap:10px;width:min(82%,340px);margin-left:calc(min(82%,340px)/-2);padding:8px 12px 12px 10px;transition:transform .5s cubic-bezier(.3,.9,.3,1);display:flex;position:absolute;bottom:18px;left:50%;transform:rotate(-.6deg);box-shadow:0 6px 14px #00000080}.spine:after{content:"";background:repeating-linear-gradient(90deg,#c7bd9f 0 5px,#b3a983 5px 10px);border-radius:0 0 2px 2px;height:6px;position:absolute;bottom:0;left:0;right:0}.spine .cl-art{object-fit:cover;border-radius:3px;flex:none;width:36px;height:36px;display:block;box-shadow:0 1px 3px #00000059}.spine .cl-text{flex-direction:column;align-items:flex-start;gap:2px;min-width:0;display:flex}.spine .cl-name{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font:600 1.2rem/1 Caveat,cursive;overflow:hidden}.spine .cl-meta{color:#5c4c37;font:600 .85rem/1 Caveat,cursive}.tray.ready .spine{transform:translateY(-30px)rotate(-.6deg)}.tray.loaded .spine{transform:translateY(6px)rotate(-.6deg)}.tray.empty .spine{transform:translateY(70px)}@media (prefers-reduced-motion:reduce){.spine{transition:none}}.readout{border:1px solid var(--groove);font:500 .85rem/1.5 var(--mono);color:var(--amber);text-shadow:0 0 7px var(--amber-glow);white-space:nowrap;text-overflow:ellipsis;background:#121006;border-radius:5px;height:5em;margin-bottom:1.1rem;padding:.8rem .9rem 1.25rem;overflow:hidden;box-shadow:inset 0 3px 10px #000c}.readout .readout-row{letter-spacing:.06em;justify-content:space-between;gap:1rem;margin-top:.3rem;font-size:.78rem;display:flex}.readout .dim{color:#8a6a1e;text-shadow:none}.readout .err{color:var(--led-red);text-shadow:0 0 7px #e8604c66}button{font:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--alu);cursor:pointer;background:linear-gradient(#34373c,#24262a 55%,#1c1e21);border:1px solid #0f1011;border-radius:5px;padding:.55rem .9rem;box-shadow:inset 0 1px #474b51,0 2px #0a0b0c}button:hover{filter:brightness(1.12)}button:active{transform:translateY(2px);box-shadow:inset 0 1px #474b51,0 0 #0a0b0c}button:disabled{color:#55595f;cursor:default;filter:none}button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}[data-act=insert]{color:#1a1305;background:linear-gradient(#ffc63d,#eaa310 55%,#cf8c07);border-color:#6e4d00;flex-direction:column;flex:0 0 72px;justify-content:center;align-items:center;gap:4px;height:60px;padding:.4rem;line-height:1.15;display:inline-flex;box-shadow:inset 0 1px #ffe08a,0 2px #5c3f00}[data-act=insert]:disabled{color:#6d6d6d;background:linear-gradient(#34373c,#24262a);border-color:#0f1011;box-shadow:inset 0 1px #474b51,0 2px #0a0b0c}[data-act=insert] svg{width:22px;height:19px}[data-act=insert].playing{color:var(--alu);background:linear-gradient(#34373c,#24262a 55%,#1c1e21);border-color:#0f1011;box-shadow:inset 0 1px #474b51,0 2px #0a0b0c}.transport{box-shadow:inset 0 2px 6px #000000b3, 0 1px 0 var(--edge-hi);background:linear-gradient(#101113,#1a1c1f);border:1px solid #0c0d0e;border-radius:7px;grid-template-columns:1fr 1.4fr 1fr;gap:3px;padding:5px;display:grid}.transport button{background:linear-gradient(#3b3e44,#2b2d31 60%,#202226);border:1px solid #0f1011;border-radius:4px;justify-content:center;align-items:center;min-height:54px;margin-bottom:5px;padding:0;display:flex;box-shadow:inset 0 1px #565b62,0 5px #101113,0 6px 8px #0000008c}.transport svg{width:26px;height:16px;color:var(--alu);filter:drop-shadow(0 1px 1px #0009);display:block}.transport button:active,.transport button.on{background:linear-gradient(#2c2e32,#222428 60%,#1b1d20);transform:translateY(4px);box-shadow:inset 0 1px #3e4249,inset 0 2px 5px #00000073,0 1px #101113}.key-strip{text-align:center;font:var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--alu-dim);grid-template-columns:1fr 1.4fr 1fr;margin-top:.35rem;font-size:.6rem;display:grid}.deck ul{gap:4px;margin:.6rem 0 .9rem;padding:0;list-style:none;display:grid}.deck ul button{text-align:left;text-transform:none;letter-spacing:.02em;background:var(--panel);width:100%;box-shadow:inset 0 1px 0 var(--edge-hi);font:400 .9rem system-ui,sans-serif}.deck ul button:hover{background:#2a2d31}.deck ul button.sel{outline:2px solid var(--amber);outline-offset:-2px}.deck ul button.sel:before{content:"● ";color:var(--amber)}.sleeves{perspective:900px;scroll-snap-type:x mandatory;margin:0 calc(var(--deck-pad) * -1);padding:34px 40% 24px;display:flex;overflow:auto hidden}.sleeves::-webkit-scrollbar{height:6px}.sleeves::-webkit-scrollbar-thumb{background:#33363b;border-radius:3px}.sleeves::-webkit-scrollbar-track{background:0 0}.sleeve{text-align:left;text-transform:none;letter-spacing:.02em;background:var(--panel);transform-origin:50%;scroll-snap-align:center;border-radius:3px;flex:none;width:196px;height:196px;margin-left:-30px;padding:0;font:400 .78rem/1.3 system-ui,sans-serif;transition:transform .12s linear;position:relative;overflow:hidden;box-shadow:6px 0 14px #0000008c}.sleeve.sel{box-shadow:0 8px 20px #000000b3}.sleeves.minimal .sleeve-name,.sleeves.minimal .badge{display:none}.sleeves.minimal .sleeve{background:0 0;border-radius:2px}.sleeves.minimal .sleeve.sel{outline:none}.sleeves.minimal .sleeve.in-deck{outline:none;box-shadow:6px 0 14px #0000008c}.sleeve img{object-fit:cover;width:100%;height:100%;display:block}.sleeve-fallback{width:100%;height:100%;color:var(--alu-dim);background:#191b1e;place-items:center;font-size:1.7rem;display:grid}.sleeve-name{color:var(--alu);white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(#0000,#000000d9);padding:.9rem .4rem .3rem;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.sleeve.sel{outline:2px solid var(--alu-dim);outline-offset:-2px}.sleeve.in-deck{outline:2px solid var(--amber);outline-offset:-2px;box-shadow:0 0 12px var(--amber-glow)}.sleeve.in-deck .sleeve-name{color:var(--amber)}.sleeve .deck-badge{background:var(--amber);box-shadow:0 0 8px var(--amber-glow);left:auto;right:4px}.sleeve{position:relative}.sleeve .badge{z-index:1;font:var(--label);letter-spacing:.14em;color:#16130a;background:#ffb000e6;border-radius:2px;padding:2px 5px;font-size:.58rem;position:absolute;top:4px;left:4px}button.linkish{box-shadow:none;color:var(--alu-dim);background:0 0;border:none;padding:.4rem 0;text-decoration:underline}button.linkish:active{transform:none}.deck ul button.sleeping{opacity:.6}.deck ul button.sleeping .zzz{color:var(--alu-dim);font-size:.8rem}.dev-actions{gap:.6rem;display:flex}.dev-actions [data-act=wake]{flex:1}.out-line{align-items:baseline;gap:.7rem;display:flex}.out-line .panel-label{margin:0}.out-line .value{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.out-line .linkish,.label-row .linkish{margin:0;padding:0}.label-row{justify-content:space-between;align-items:baseline;display:flex}button.linkish.tiny{letter-spacing:.1em;font-size:.68rem}.deck-footer{justify-content:center;gap:2rem;padding-top:1.4rem;display:flex}small{margin-bottom:.6rem;line-height:1.5}.vol-row{align-items:center;gap:1rem;margin-top:1.1rem;padding:.5rem 0 .3rem;display:flex}.vol-row .panel-label{margin:0}input[type=range]{appearance:none;background:var(--groove);height:6px;box-shadow:0 1px 0 var(--edge-hi);border-radius:3px;flex:1}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:grab;background:radial-gradient(circle at 50% 32%,#565b62 0 18%,#0000 19%),conic-gradient(#3d4147,#23252a,#3d4147,#23252a,#3d4147);border:2px solid #0f1011;border-radius:50%;width:34px;height:34px;box-shadow:inset 0 2px 3px #ffffff1f,0 3px 7px #000000a6}input[type=range]:disabled::-webkit-slider-thumb{cursor:default;background:#1d1f22}input[type=range]::-moz-range-thumb{cursor:grab;background:radial-gradient(circle at 50% 32%,#565b62 0 18%,#2a2d31 19%);border:2px solid #0f1011;border-radius:50%;width:34px;height:34px}small{color:var(--alu-dim);margin-top:.4rem;display:block}.sleeve-back{z-index:50;background:#08090ab8;flex-direction:column;padding:3vh 5vw;animation:.35s ease-out flip-in;display:flex;position:fixed;inset:0}.back-scroll{flex:1;width:min(430px,100%);min-height:0;margin:0 auto;overflow-y:auto}@keyframes flip-in{0%{opacity:.2;transform:perspective(900px)rotateY(70deg)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.sleeve-back{animation:none}}.sleeve-back.no-anim{animation:none}.back-cover-big{aspect-ratio:1;object-fit:cover;border-radius:6px 6px 0 0;width:100%;display:block}.back-scroll>:first-child{border-radius:6px 6px 0 0}.back-scroll>:last-child{border-radius:0 0 6px 6px;padding-bottom:1.2rem}.sleeve-back header{border-radius:0}.readout .track-wrap{white-space:nowrap;display:block;overflow:hidden}.readout .track-inner{white-space:nowrap;display:inline-block}.readout .track-inner.marquee{animation:9s linear infinite marquee}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.readout .track-inner.marquee{animation:none}}.readout .notice{color:var(--amber);font-style:italic;animation:1.2s step-end infinite notice-blink}@keyframes notice-blink{50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.readout .notice{animation:none}}.back-scroll>*{margin:0}.sleeve-back header,.sleeve-back .sides,.sleeve-back .side-note,.sleeve-back .loading,.sleeve-back .clipping,.sleeve-back .back-actions{color:#2c2318;background:linear-gradient(#ece5d3,#e2d9c2);padding:1rem 1.2rem}.sleeve-back header{border-radius:6px 6px 0 0;padding-top:1.3rem}.sleeve-back .back-actions{border-radius:0 0 8px 8px;flex-shrink:0;width:min(430px,100%);margin:0 auto;box-shadow:0 -8px 16px -10px #00000080}#sleeve-back li[data-pos]{cursor:pointer}.back-scroll>:last-child{border-radius:0}.sleeve-back h2{margin:0;font:700 1.5rem/1.15 Georgia,Times New Roman,serif}.sleeve-back .meta{letter-spacing:.08em;text-transform:uppercase;color:#6b5c45;margin:.3rem 0 0;font:400 .8rem Georgia,serif}.sleeve-back .sides{grid-template-columns:1fr 1fr;gap:1.2rem;display:grid}.sleeve-back .sides.one{grid-template-columns:1fr}.sleeve-back h3{letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid #b8ab8e;margin:0 0 .4rem;padding-bottom:.25rem;font:700 .85rem Georgia,serif}.sleeve-back ol{margin:0;padding:0;font:400 .82rem/1.7 Georgia,serif;list-style:none}.sleeve-back ol li{align-items:baseline;gap:.35rem;display:flex}.sleeve-back .tnr{color:#8a7a5e;flex-shrink:0}.sleeve-back .tdur{color:#8a7a5e;flex-shrink:0;margin-left:auto;font-size:.72rem}.sleeve-back .side-note,.sleeve-back .loading{color:#8a7a5e;padding-top:.4rem;font:italic 400 .72rem Georgia,serif}.sleeve-back .clipping{background:linear-gradient(#f4ecd4,#eadfbe);border-top:1px dashed #b8ab8e;border-bottom:1px dashed #b8ab8e}.sleeve-back .clipping h4{color:#4a3b26;margin:0 0 .35rem;font:600 1.15rem Caveat,cursive}.sleeve-back .clipping p{margin:0 0 .4rem;font:400 .82rem/1.55 Georgia,serif}.sleeve-back .clipping a{color:#6b5c45;font-size:.72rem}.sleeve-back .back-actions{gap:.6rem;display:flex}.sleeve-back .back-actions [data-act=back-play]{color:#1a1305;background:linear-gradient(#ffc63d,#eaa310 55%,#cf8c07);border-color:#6e4d00;flex:1;box-shadow:inset 0 1px #ffe08a,0 2px #5c3f00}@media (width>=760px){#app{max-width:560px}}@media (width<=500px){body{padding:0}#app{width:100%}.deck{min-height:100vh;box-shadow:inset 0 1px 0 var(--walnut-hi);--deck-pad:1rem;padding:1.1rem var(--deck-pad) 2rem;border-radius:0}}.power-screen{text-align:center;align-self:center;width:100%}.power-screen .deck{padding-bottom:2rem}.power-screen p{color:var(--alu-dim);margin:1.2rem 0 1.4rem}#login{letter-spacing:.22em;padding:.85rem 2.2rem}.sleeve-back .sides{min-height:min(48vh,420px)}.sleeve-back .skel-row{background:#2c231829;border-radius:3px;height:.95rem;margin:.7rem 0;animation:1.1s ease-in-out infinite skel-pulse;display:block}.sleeve-back .skel-row:nth-child(2n){width:82%}@keyframes skel-pulse{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.sleeve-back .skel-row{animation:none}}@media (orientation:landscape) and (width>=680px){#app{width:min(980px,100%)}.deck{grid-template-columns:1.15fr 1fr;grid-template-areas:"brand brand""crate panel""slot panel""slot out""foot foot";align-items:start;column-gap:2.2rem;display:grid}.brand{grid-area:brand}.deck>section:first-of-type{grid-area:crate}.deck>section.slot-wrap{grid-area:slot}.deck>section:nth-of-type(3){grid-area:panel}.deck>section:nth-of-type(4){grid-area:out}.deck-footer{grid-area:foot}.sleeves{margin:0}}