:root{color:#080908;font-synthesis:none;text-rendering:optimizelegibility;--ink:#080908;--charcoal:#171917;--steel:#686d68;--paper:#eff2ed;--deck:#c9cdc7;--acid:#b7ff00;background:#080908;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--ink);min-width:320px}body{background:linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px), var(--ink);background-size:28px 28px;min-width:320px;min-height:100svh;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,[tabindex]:focus-visible,a:focus-visible{outline:3px solid var(--acid);outline-offset:3px}.app-shell{min-height:100svh;padding:max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));place-items:center;display:grid}.player{width:min(100%,620px);color:var(--ink);background:var(--paper);clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);padding:clamp(18px,4vw,30px);position:relative;overflow:hidden;box-shadow:0 32px 80px #00000080}.player:after{content:"";clip-path:inherit;pointer-events:none;border:1px solid #08090829;position:absolute;inset:7px}.player-header,.player-footer,.volume-row,.timecodes,.track-number,.deck-status,.next-up span,.empty-state>span{letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.player-header{justify-content:space-between;align-items:center;margin-bottom:18px;font-size:.68rem;font-weight:750;display:flex}.wordmark{color:inherit;letter-spacing:.08em;align-items:center;gap:9px;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:1.18rem;font-weight:900;text-decoration:none;display:inline-flex}.wordmark-mark{border:5px solid var(--ink);border-radius:50%;width:18px;height:18px;position:relative}.wordmark-mark:after{content:"";background:var(--acid);border-radius:50%;width:4px;height:4px;position:absolute;top:2px;left:2px}.deck-status{align-items:center;gap:7px;display:inline-flex}.status-light{border:1px solid var(--steel);background:0 0;border-radius:50%;width:7px;height:7px}.status-light--on{border-color:var(--acid);background:var(--acid);box-shadow:0 0 11px #b7ff00bf}.deck{aspect-ratio:1.12;border:1px solid var(--ink);background:linear-gradient(135deg, #fff6, transparent 35%), var(--deck);position:relative;overflow:visible;box-shadow:inset 0 0 0 6px #0809080a}.deck:before,.deck:after{content:"";border:1px solid var(--steel);border-radius:50%;width:6px;height:6px;position:absolute;top:9px}.deck:before{left:9px}.deck:after{right:9px}.deck-scale{z-index:4;color:#454945;align-items:center;gap:6px;font:700 .58rem/1 ui-monospace,monospace;display:flex;position:absolute;bottom:12px;left:13px}.deck-scale i{background:repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 5px);width:32px;height:5px;display:block}.record-gesture{z-index:2;aspect-ratio:1;touch-action:pan-y;cursor:grab;border-radius:50%;width:76%;transition:transform .38s cubic-bezier(.2,.8,.2,1);position:absolute;top:8%;left:12%}.record-gesture:active{cursor:grabbing}.platter{background:#747974;border:1px solid #050505;border-radius:50%;place-items:center;display:grid;position:absolute;inset:0;box-shadow:8px 9px #0809083d}.vinyl{background:radial-gradient(circle at 34% 28%,#ffffff21,#0000 21%),repeating-radial-gradient(circle,#0a0b0a 0 2px,#171917 3px 5px,#080908 6px 8px);border-radius:50%;width:94%;height:94%;position:relative;box-shadow:inset 0 0 0 1px #2a2d2a,0 4px 9px #00000073}.vinyl-grooves{background:conic-gradient(from 45deg,#0000,#ffffff0f,#0000 24%,#ffffff08,#0000 50%);border:1px solid #ffffff14;border-radius:50%;position:absolute;inset:6%}.record-label{z-index:2;aspect-ratio:1;width:31%;color:var(--paper);background:var(--charcoal);cursor:pointer;border:1px solid #d8ddd5;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-label:disabled{cursor:default}.record-label span,.record-label small{letter-spacing:.16em;font:700 clamp(.4rem,1.5vw,.58rem)/1 ui-monospace,monospace}.record-label strong{color:var(--acid);margin:3px 0;font:900 clamp(1.1rem,5vw,2.2rem)/.9 Impact,Haettenschweiler,sans-serif}.spindle{z-index:3;background:var(--ink);pointer-events:none;border:2px solid #dfe2dd;border-radius:50%;width:7px;height:7px;position:absolute}.tonearm{z-index:3;transform-origin:50% 9%;filter:drop-shadow(3px 5px 2px #00000040);pointer-events:none;width:9%;height:72%;transition:transform .75s cubic-bezier(.2,.75,.25,1);position:absolute;top:8%;right:4.5%;transform:rotate(-11deg)}.tonearm--engaged{transform:rotate(25deg)}.tonearm-pivot{z-index:2;aspect-ratio:1;border:5px solid var(--charcoal);background:var(--steel);width:100%;box-shadow:inset 0 0 0 3px var(--deck);border-radius:50%;position:absolute;top:0;left:0}.tonearm-rod{background:#3f433f;border-radius:99px;width:12%;height:80%;position:absolute;top:8%;left:44%;box-shadow:inset 2px 0 #ffffff4d}.tonearm-head{background:var(--ink);border-radius:2px;width:58%;height:15%;position:absolute;bottom:1%;left:21%}.tonearm-head:after{content:"";background:var(--acid);width:28%;height:35%;position:absolute;bottom:-28%;left:36%}.track-panel,.empty-state{border-bottom:1px solid #08090838;min-height:118px;padding:22px 0 17px}.track-panel{grid-template-columns:minmax(0,1fr) minmax(110px,30%);align-items:end;gap:24px;display:grid}.track-number,.empty-state>span{color:var(--steel);margin-bottom:7px;font-size:.62rem;font-weight:750;display:block}.track-copy h1,.empty-state h1{letter-spacing:.005em;text-overflow:ellipsis;white-space:nowrap;margin:0;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:clamp(1.9rem,7vw,3.4rem);font-weight:900;line-height:.98;overflow:hidden}.track-copy h1{text-overflow:clip;position:relative;container-type:inline-size}.track-copy h1 span{width:max-content;min-width:100%;display:block}.scrolling-title--overflowing span{animation:9s ease-in-out infinite alternate title-scroll}.scrolling-title--overflowing:before,.scrolling-title--overflowing:after{content:"";z-index:1;pointer-events:none;width:clamp(40px,12%,72px);position:absolute;top:0;bottom:0}.scrolling-title--overflowing:before{background:linear-gradient(90deg, var(--paper) 0%, #eff2edfa 18%, #eff2ede0 38%, #eff2ed94 62%, #eff2ed38 82%, #eff2ed00 100%);animation:9s ease-in-out infinite alternate title-fade-left;left:-2px}.scrolling-title--overflowing:after{background:linear-gradient(270deg, var(--paper) 0%, #eff2edfa 18%, #eff2ede0 38%, #eff2ed94 62%, #eff2ed38 82%, #eff2ed00 100%);animation:9s ease-in-out infinite alternate title-fade-right;right:-2px}@keyframes title-scroll{0%,18%{transform:translate(0)}82%,to{transform:translate(calc(100cqw - 100%))}}@keyframes title-fade-left{0%,20%{opacity:0}32%,to{opacity:1}}@keyframes title-fade-right{0%,68%{opacity:1}80%,to{opacity:0}}.track-copy p,.empty-state p{color:#4a4e4a;margin:8px 0 0;font-size:.86rem;font-weight:650}.next-up{border-left:4px solid var(--acid);min-width:0;padding-left:14px}.next-up span{color:var(--steel);margin-bottom:5px;font-size:.57rem;display:block}.next-up strong{text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1.3;display:block;overflow:hidden}.empty-state code{color:var(--paper);background:var(--charcoal);padding:2px 5px;font-family:ui-monospace,monospace;font-size:.78em}.timeline{padding:19px 0 4px}.range{--range-progress:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}.range::-webkit-slider-runnable-track{border:1px solid var(--ink);background:linear-gradient(90deg, var(--acid) 0 var(--range-progress), transparent var(--range-progress));height:4px}.range::-moz-range-track{border:1px solid var(--ink);background:linear-gradient(90deg, var(--acid) 0 var(--range-progress), transparent var(--range-progress));height:2px}.range::-webkit-slider-thumb{border:2px solid var(--paper);background:var(--ink);width:12px;height:12px;box-shadow:0 0 0 1px var(--ink);appearance:none;border-radius:0;margin-top:-5px}.range::-moz-range-thumb{border:2px solid var(--paper);background:var(--ink);width:9px;height:9px;box-shadow:0 0 0 1px var(--ink);border-radius:0}.range:disabled{cursor:default;opacity:.4}.timecodes{color:#4d514d;justify-content:space-between;margin-top:1px;font-size:.6rem;font-weight:700;display:flex}.controls{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:12px 0 18px;display:grid}.control-group{align-items:center;gap:4px;display:flex}.control-group--left{justify-content:flex-end}.control-group--right{justify-content:flex-start}.control-button,.volume-button{color:var(--ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;padding:0;display:grid}.control-button{width:44px;height:44px}.control-button svg,.volume-button svg{width:21px;height:21px}.control-button:hover:not(:disabled),.volume-button:hover{border-color:var(--ink)}.control-button:disabled{cursor:default;opacity:.28}.control-button[data-active]{color:#466300;background:#b7ff0047}.control-button--primary{width:62px;height:62px;color:var(--acid);background:var(--ink)}.control-button--primary:hover:not(:disabled){border-color:var(--ink);color:var(--ink);background:var(--acid)}.control-button--primary svg{width:26px;height:26px}.repeat-icon{place-items:center;display:grid;position:relative}.repeat-icon b{font:900 .5rem/1 ui-monospace,monospace;position:absolute}.volume-row{border-top:1px solid #08090838;grid-template-columns:32px minmax(0,1fr) 30px;align-items:center;gap:10px;padding:10px 0 18px;font-size:.65rem;font-weight:750;display:grid}.volume-button{width:32px;height:32px}.range--volume::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--ink) 0 var(--range-progress), #aeb2ad var(--range-progress));border:0;height:2px}.range--volume::-moz-range-track{background:linear-gradient(90deg, var(--ink) 0 var(--range-progress), #aeb2ad var(--range-progress));border:0;height:2px}.range--volume::-webkit-slider-thumb{margin-top:-5px}.error-message{border-left:4px solid var(--acid);color:var(--paper);background:var(--charcoal);margin:-2px 0 14px;padding:9px 11px;font-size:.78rem}.player-footer{color:var(--steel);justify-content:space-between;font-size:.55rem;font-weight:700;display:flex}audio{display:none}@media (width<=480px){html,body{background:var(--paper)}.app-shell{place-items:start center;padding:0}.player{min-height:100svh;padding-top:max(18px, env(safe-area-inset-top));padding-right:max(18px, env(safe-area-inset-right));padding-bottom:max(18px, env(safe-area-inset-bottom));padding-left:max(18px, env(safe-area-inset-left));clip-path:none}.player:after{display:none}.track-panel{grid-template-columns:minmax(0,1fr);gap:14px}.next-up{display:none}.controls{gap:0}.control-button{width:40px;height:40px}.control-button--primary{width:58px;height:58px}}@media (width<=480px) and (height<=740px){.player-header{margin-bottom:12px}.deck{width:80%;margin-inline:auto}.track-panel,.empty-state{min-height:104px;padding:14px 0 10px}.timeline{padding-top:10px}.controls,.volume-row{padding:4px 0 8px}.player-footer{display:none}}@media (orientation:landscape) and (height<=500px){.app-shell{place-items:stretch stretch;min-height:100svh;padding:0}.player{width:100%;max-width:none;height:100svh;min-height:100svh;padding-top:max(10px, env(safe-area-inset-top));padding-right:max(14px, env(safe-area-inset-right));padding-bottom:max(10px, env(safe-area-inset-bottom));padding-left:max(14px, env(safe-area-inset-left));clip-path:none;grid-template-rows:auto minmax(0,1fr) auto auto auto auto minmax(0,1fr);grid-template-columns:minmax(220px,42%) minmax(0,1fr);column-gap:clamp(14px,3vw,28px);display:grid}.player:after{display:none}.player-header{grid-area:1/1/auto/-1;margin-bottom:6px}.deck{grid-area:2/1/-1;place-self:center;width:100%;max-height:100%}.track-panel,.empty-state{grid-area:3/2;align-self:start;min-height:0;padding:4px 0 8px}.track-panel{grid-template-columns:minmax(0,1fr);gap:0}.track-copy h1,.empty-state h1{font-size:clamp(1.55rem,5vw,2.8rem)}.track-copy p,.empty-state p{margin-top:5px;font-size:.75rem}.next-up{display:none}.timeline{grid-area:4/2;padding:8px 0 0}.controls{grid-area:5/2;padding:2px 0 7px}.control-button{width:40px;height:40px}.control-button--primary{width:56px;height:56px}.volume-row{grid-area:6/2;padding:5px 0 0}.error-message{right:max(14px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));width:calc(58% - 28px);margin:0;position:absolute}.player-footer{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.track-copy h1{scrollbar-width:none;overflow-x:auto}.track-copy h1 span{animation:none}.scrolling-title--overflowing:before,.scrolling-title--overflowing:after{display:none}}