:root{--bg:#160905;--wood-1:#4c2114;--wood-2:#35160d;--wood-3:#1e0c07;--panel:#181008;--panel-2:#0e0904;--bezel:#090402;--brass:#c9985a;--brass-hi:#eed3a0;--brass-lo:#7c5730;--cream:#f3ddb3;--text:#f0d6aa;--muted:#ab8258;--amber:#ffa143;--amber-deep:#e07a28;--red:#8c2b1e;--red-hi:#b2402d;--green:#a9cf82;--line:#c9985a61;--line-soft:#c9985a29;--gap:clamp(3px, .8vh, 8px);--pad:clamp(4px, .9vh, 9px);--rad:clamp(8px, 1.3vh, 13px);--rad-sm:clamp(5px, .9vh, 8px);--btn-h:clamp(24px, 4vh, 36px);--fs:clamp(12px, 1.7vh, 15px);--fs-sm:clamp(10px, 1.45vh, 13px);--font-main:"Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;--font-mono:"Courier Prime", "Courier New", "Consolas", monospace;color:var(--text);background:var(--bg);font-family:var(--font-main);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;line-height:1.3}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 50% -8%, #e07a2824, transparent 46%), radial-gradient(circle at 50% 108%, #8c2b1e2e, transparent 42%), linear-gradient(150deg, #1d0d07 0%, var(--bg) 45%, #0a0402 100%);overflow:hidden}button,input{font:inherit;-webkit-tap-highlight-color:transparent}button{border-radius:var(--rad-sm);color:var(--cream);cursor:pointer;letter-spacing:.03em;background:linear-gradient(#2b1c12,#150c06);border:1px solid #eed3a066;font-weight:600;transition:transform .1s,box-shadow .1s,filter .14s,opacity .14s;box-shadow:inset 0 1px #ffe6b429,inset 0 -3px 6px #00000073,0 2px 5px #00000080}button:active:not(:disabled){filter:brightness(1.08);transform:translateY(1px);box-shadow:inset 0 2px 5px #0000008c,0 1px 2px #0000004d}button:disabled,input:disabled{cursor:not-allowed;opacity:.4;filter:saturate(.6)}button:focus-visible,input:focus-visible{outline-offset:1px;outline:2px solid #eed3a08c}.btn-brass,.file-button,.url-form button,.calibration-controls .set-downbeat,.stepper-buttons button{background:linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 42%, var(--brass-lo) 100%);color:#241407;text-shadow:0 1px #fff0cd66;border-color:#ffecbe80;box-shadow:inset 0 1px #fff5d7a6,inset 0 -3px 5px #462a0e80,0 2px 5px #0000008c}.app-shell{width:100%;height:100dvh;padding:clamp(3px,.8vh,10px) clamp(4px,1.6vw,10px);padding-bottom:max(clamp(3px, .8vh, 10px), env(safe-area-inset-bottom));justify-content:center;display:flex}.device{gap:var(--gap);width:100%;max-width:430px;height:100%;max-height:960px;padding:var(--pad);scrollbar-width:none;border:2px solid var(--bezel);background:repeating-linear-gradient(93deg, #00000026 0 2px, transparent 2px 9px, #ffc4820d 9px 11px, transparent 11px 18px), radial-gradient(ellipse 130% 55% at 32% 10%, #ffaa5a1a, transparent 62%), linear-gradient(150deg, var(--wood-1), var(--wood-2) 52%, var(--wood-3) 100%);border-radius:clamp(14px,2.4vh,22px);flex-direction:column;margin:auto;display:flex;position:relative;overflow:hidden auto;box-shadow:inset 0 0 0 1px #eed3a02e,inset 0 0 26px #000000a6,0 18px 42px #0009}.device:before{z-index:0;pointer-events:none;content:"";background:radial-gradient(circle 4px at 12px 12px, var(--brass-hi) 0 30%, var(--brass-lo) 60%, transparent 70%), radial-gradient(circle 4px at calc(100% - 12px) 12px, var(--brass-hi) 0 30%, var(--brass-lo) 60%, transparent 70%), radial-gradient(circle 4px at 12px calc(100% - 12px), var(--brass-hi) 0 30%, var(--brass-lo) 60%, transparent 70%), radial-gradient(circle 4px at calc(100% - 12px) calc(100% - 12px), var(--brass-hi) 0 30%, var(--brass-lo) 60%, transparent 70%);border:1px solid #c9985a38;border-radius:clamp(10px,1.8vh,16px);position:absolute;inset:clamp(5px,.9vh,8px)}.device>*{z-index:1;position:relative}.device::-webkit-scrollbar{display:none}.top-bar{flex:none;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(6px,2vw,10px);padding:0 clamp(2px,.6vw,4px);display:grid}.name-plate{background:repeating-linear-gradient(#eed3a00b 0 1px,#0000 1px 4px),linear-gradient(#30261b 0%,#19110b 50%,#0b0705 100%);border:1px solid #c9985a75;border-radius:4px;align-items:center;padding:clamp(2px,.4vh,4px) clamp(10px,3vw,16px);display:inline-flex;box-shadow:inset 0 1px #eed3a02e,inset 0 0 0 1px #00000057,inset 0 -2px 3px #0000009e,0 2px 5px #0000008c}.name-plate:before,.name-plate:after{content:"";background:radial-gradient(circle at 35% 30%, var(--brass-hi) 0 18%, var(--brass) 45%, var(--brass-lo) 76%, #251407 100%);border-radius:50%;width:5px;height:5px;box-shadow:inset 0 1px #fff4da47,inset 0 -1px 1px #261405cc,0 0 0 1px #0000006b}.name-plate:before{margin-right:clamp(6px,1.8vw,10px)}.name-plate:after{margin-left:clamp(6px,1.8vw,10px)}.name-plate span{color:#c9985a;letter-spacing:.24em;text-shadow:0 1px #000000c7,0 0 4px #ffa14329;white-space:nowrap;font-size:clamp(12px,1.9vh,16px);font-weight:700}.top-bar:after{content:"";background:linear-gradient(#000000a6,#ffdca01a);border-radius:999px;grid-area:1/2;height:3px;box-shadow:0 1px #ffdca014}.ready-state{color:var(--brass-hi);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.12em;white-space:nowrap;grid-column:3;align-items:center;gap:6px;font-weight:700;display:flex}.pilot-light{background:radial-gradient(circle at 36% 32%,#ffc7a0 0 14%,#9c2a1f 44%,#260806 76%);border:1px solid #f0d7aa59;border-radius:50%;width:clamp(10px,1.7vh,14px);height:clamp(10px,1.7vh,14px);box-shadow:0 0 6px #e07a288c,inset 0 -1px 2px #00000080}.pilot-light.is-playing{background:radial-gradient(circle at 36% 32%,#ecf7c8 0 14%,#7fb25f 44%,#17300f 78%);animation:1.1s ease-in-out infinite pilot-pulse;box-shadow:0 0 7px #a9cf8299,inset 0 -1px 2px #00000080}@keyframes pilot-pulse{50%{box-shadow:0 0 11px #a9cf82e6,inset 0 -1px 2px #00000080}}.player-window,.panel,.transport-row,.beat-footer{border:1px solid var(--line-soft);border-radius:var(--rad);background:linear-gradient(180deg, #ffd29609, transparent 34%), linear-gradient(180deg, var(--panel), var(--panel-2));flex:none;min-height:0;margin:0;box-shadow:inset 0 1px #ffdca012,inset 0 0 14px #00000059,0 3px 9px #0006}.player-window{min-height:clamp(104px,17vh,165px);padding:var(--pad);flex:auto;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-columns:clamp(64px,19vw,96px) minmax(0,1fr);gap:clamp(3px,.6vh,6px) clamp(7px,2vw,10px);display:grid}.record-area{grid-row:1/4;justify-content:center;align-self:stretch;align-items:center;width:100%;min-height:0;display:flex;position:relative;container-type:size}.turntable{aspect-ratio:1;background:radial-gradient(circle at 50% 38%,#e07a281a,#0000 62%),radial-gradient(circle,#140c07 0%,#0b0705 68%,#050302 100%);border:1px solid #7c57308c;border-radius:50%;flex:none;width:min(100%,100cqh);max-height:100%;position:relative;box-shadow:inset 0 0 0 1px #000000bf,inset 0 3px 10px #000c,0 1px #ffdca00f}.vinyl{will-change:transform;background:url(/assets/ui/vinyl-disc.png) 50%/contain no-repeat;border-radius:50%;animation:3.6s linear infinite paused vinyl-spin;position:absolute;inset:3%}.vinyl.is-spinning{animation-play-state:running}@keyframes vinyl-spin{to{transform:rotate(360deg)}}.tone-arm{z-index:2;aspect-ratio:618/1073;pointer-events:none;filter:drop-shadow(2px 3px 3px #0009);background:url(/assets/ui/tone-arm.png) 50%/contain no-repeat;width:34%;position:absolute;top:-4%;right:3%}@media (prefers-reduced-motion:reduce){.vinyl{animation:none}}.track-area{min-width:0;display:contents}.loader-row{grid-column:2;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(4px,1.2vw,7px);display:grid}.file-button,.url-form button{min-height:var(--btn-h);font-size:var(--fs-sm);text-align:center;padding:0 clamp(7px,2.2vw,12px)}.file-button{white-space:nowrap;place-items:center;display:grid}.file-button input{opacity:0;width:1px;height:1px;position:absolute}.url-form{grid-template-columns:minmax(0,1fr) auto;gap:clamp(4px,1.2vw,7px);min-width:0;display:grid}.url-form input,.number-row input{border:1px solid var(--line-soft);border-radius:var(--rad-sm);min-width:0;color:var(--text);background:#060302;box-shadow:inset 0 2px 7px #000000bf,inset 0 0 0 1px #00000080}.url-form input{height:var(--btn-h);color:var(--muted);font-size:var(--fs-sm);padding:0 9px}.track-area h1{min-width:0;color:var(--cream);letter-spacing:.02em;text-overflow:ellipsis;text-shadow:0 1px 3px #0009;white-space:nowrap;grid-column:2;margin:0;font-size:clamp(14px,2.4vh,20px);font-style:italic;font-weight:600;line-height:1.25;overflow:hidden}.wave-line{border-radius:var(--rad-sm);background:#00000059;grid-column:2;justify-content:center;align-items:center;gap:2px;min-height:clamp(20px,3.6vh,36px);padding:2px clamp(3px,1.4vw,7px);display:flex;overflow:hidden;box-shadow:inset 0 1px 4px #00000080}.wave-line span{background:linear-gradient(180deg, #c85a3a, var(--red));opacity:.4;border-radius:999px;flex:2px;width:2px;max-width:3px;box-shadow:0 0 3px #b2402d4d}.wave-line.has-waveform span{opacity:.85}.time-row{color:var(--amber);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.06em;text-shadow:0 0 5px #e07a284d;grid-column:1/-1;justify-content:space-between;gap:10px;display:flex}.progress{grid-column:1/-1}input[type=range]{appearance:none;background:0 0;width:100%;height:clamp(14px,2.4vh,20px);margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(#070403,#1c120b);border:1px solid #c9985a59;border-radius:999px;height:5px;box-shadow:inset 0 1px 3px #000000d9}input[type=range]::-webkit-slider-thumb{appearance:none;background:linear-gradient(90deg, transparent 46%, #3c220ca6 47% 53%, transparent 54%), linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 50%, var(--brass-lo));border:1px solid #ffecbe99;border-radius:5px;width:clamp(15px,2.6vh,20px);height:clamp(15px,2.6vh,20px);margin-top:calc(1.5px - clamp(15px,2.6vh,20px)/2);box-shadow:inset 0 1px #ffffff47,0 2px 5px #00000073}input[type=range]::-moz-range-track{background:#0f0a06;border:1px solid #c9985a59;border-radius:999px;height:5px}input[type=range]::-moz-range-progress{background:var(--amber-deep);border-radius:999px;height:5px}input[type=range]::-moz-range-thumb{background:linear-gradient(90deg, transparent 46%, #3c220ca6 47% 53%, transparent 54%), linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 50%, var(--brass-lo));border:1px solid #ffecbe99;border-radius:5px;width:clamp(15px,2.6vh,20px);height:clamp(15px,2.6vh,20px);box-shadow:0 2px 5px #00000073}.transport-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.5vw,8px);padding:clamp(5px,.9vh,8px);display:grid}.transport-button{min-height:clamp(34px,5.6vh,52px);color:var(--text);background:linear-gradient(#2c1d12 0%,#170e07 60%,#0d0704 100%);border-color:#eed3a047;place-items:center;gap:clamp(1px,.3vh,3px);padding:clamp(2px,.4vh,5px) 0;display:grid}.t-icon{width:clamp(15px,2.4vh,20px);height:clamp(11px,1.9vh,15px);color:var(--brass-hi);filter:drop-shadow(0 1px 1px #000000b3);display:block;position:relative}.icon-play{clip-path:polygon(8% 0,100% 50%,8% 100%);background:currentColor}.icon-pause{background:linear-gradient(90deg,currentColor 0 36%,#0000 36% 64%,currentColor 64% 100%)}.icon-stop{background:currentColor;border-radius:2px;width:clamp(11px,1.9vh,15px)}.icon-rew:before,.icon-rew:after,.icon-ff:before,.icon-ff:after{content:"";background:currentColor;width:54%;height:100%;position:absolute;top:0}.icon-rew:before,.icon-rew:after{clip-path:polygon(100% 0,0 50%,100% 100%)}.icon-ff:before,.icon-ff:after{clip-path:polygon(0 0,100% 50%,0 100%)}.icon-rew:before,.icon-ff:before{left:0}.icon-rew:after,.icon-ff:after{right:0}.transport-button span{font-size:var(--fs-sm);letter-spacing:.08em}.transport-button.play{background:linear-gradient(180deg, var(--red-hi) 0%, var(--red) 55%, #5c1a10 100%);color:#ffe9c4;border-color:#ffc8aa66;box-shadow:inset 0 1px #ffdcbe4d,inset 0 -3px 7px #300803a6,0 2px 6px #0000008c}.transport-button.play .t-icon{color:#ffe9c4}.panel{padding:clamp(4px,.8vh,9px) clamp(7px,2.4vw,12px)}.panel-title{color:var(--brass);text-align:center;font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase;margin-bottom:clamp(3px,.5vh,5px);font-weight:700}.calibration-panel{text-align:center}.calibration-readout{color:var(--amber);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.06em;text-shadow:0 0 5px #e07a284d;margin-bottom:clamp(3px,.6vh,6px)}.calibration-controls{grid-template-columns:1fr 1.35fr 1fr .8fr;gap:clamp(4px,1.3vw,7px);display:grid}.calibration-controls button{min-width:0;min-height:clamp(30px,5vh,44px);font-size:var(--fs-sm);white-space:nowrap;align-content:center;place-items:center;gap:clamp(2px,.35vh,4px);padding:2px 4px;line-height:1.1;display:grid}.calibration-controls button small{opacity:.72;color:inherit;font-family:var(--font-mono);letter-spacing:.02em;font-size:.8em}.beat-settings{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(4px,1.4vw,8px);display:grid}.number-control{text-align:center;min-width:0}.number-control label{min-height:1.3em;color:var(--muted);font-size:var(--fs-sm);margin-bottom:clamp(2px,.4vh,4px);line-height:1.15;display:block}.number-row{grid-template-columns:minmax(0,1fr) clamp(24px,7.6vw,32px);gap:clamp(3px,1vw,5px);display:grid}.number-row input{text-align:center;height:clamp(36px,6.6vh,60px);color:var(--amber);font-family:var(--font-mono);letter-spacing:.01em;text-shadow:0 0 8px #ffa14366;background:linear-gradient(#ffa1430d,#0000 40%),#060302;padding:0 2px;font-size:clamp(19px,4.2vh,36px);font-weight:700}.number-row input:focus,.url-form input:focus{outline-offset:1px;outline:2px solid #e07a2880}.stepper-buttons{grid-template-rows:1fr 1fr;gap:clamp(3px,.5vh,4px);display:grid}.stepper-buttons button{min-height:0;padding:0;font-size:clamp(9px,1.3vh,12px);line-height:1}.slider-panel{gap:clamp(2px,.5vh,5px);display:grid}.slider-header{min-height:clamp(24px,4vh,32px);color:var(--text);font-size:var(--fs);align-items:center;gap:clamp(6px,1.6vw,10px);display:flex}.slider-title{color:var(--brass);letter-spacing:.22em;font-weight:700;font-size:var(--fs-sm);text-transform:uppercase;white-space:nowrap}.lock-hint{border:1px solid var(--line-soft);height:clamp(16px,2.6vh,20px);color:var(--muted);font-family:var(--font-main);letter-spacing:.12em;text-indent:.12em;white-space:nowrap;background:#060302;border-radius:999px;justify-content:center;align-self:center;align-items:center;padding:0 clamp(7px,1.8vw,10px);font-size:clamp(9px,1.3vh,11px);line-height:1.2;transition:color .16s,text-shadow .16s;display:inline-flex;box-shadow:inset 0 1px 4px #000000b3}.slider-panel:not(.locked) .lock-hint{color:var(--amber);text-shadow:0 0 5px #ffa14366}.slider-actions{justify-content:flex-end;align-items:center;gap:clamp(4px,1vw,7px);min-width:0;margin-left:auto;display:flex}.slider-control-row{grid-template-columns:minmax(0,1fr) clamp(48px,12vw,64px);align-items:center;gap:clamp(7px,1.8vw,12px);display:grid}.speed-readout{border:1px solid var(--line-soft);border-radius:var(--rad-sm);height:clamp(22px,3.8vh,30px);color:var(--amber);font-family:var(--font-mono);text-shadow:0 0 8px #ffa14366;background:linear-gradient(#ffa1430d,#0000 40%),#060302;justify-content:center;align-items:center;gap:1px;padding:0 clamp(4px,1.2vw,7px);font-size:clamp(14px,2.2vh,19px);font-weight:700;line-height:1;transition:color .16s,opacity .16s;display:inline-flex;box-shadow:inset 0 2px 6px #000000b3}.speed-readout small{opacity:.75;font-size:.62em;font-weight:700}.slider-panel.locked .speed-readout{color:var(--muted);opacity:.8;text-shadow:none}.icon-button{width:clamp(24px,4vh,32px);height:clamp(24px,4vh,32px);min-height:0;color:var(--cream);border-radius:6px;place-items:center;padding:0;display:inline-grid}.icon-button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:62%;height:62%}.lock-button.is-unlocked{color:var(--amber);border-color:#ffb46e99;box-shadow:inset 0 1px #ffe6b429,inset 0 -3px 6px #00000073,0 0 8px #ffa14366,0 2px 5px #00000080}.slider-panel.locked input[type=range]:disabled{opacity:.45;filter:saturate(.5)brightness(.75)}.slider-footer{color:var(--muted);font-size:var(--fs-sm);margin:0;line-height:1.2}.slider-footer strong{color:var(--amber);font-family:var(--font-mono);text-shadow:0 0 5px #e07a284d;font-weight:700}.loop-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,1.3vw,7px);display:grid}.loop-buttons button{min-height:var(--btn-h);font-size:var(--fs-sm);padding:0 3px}.loop-buttons button:nth-child(3){background:linear-gradient(180deg, var(--red-hi), var(--red) 60%, #5c1a10);color:#ffe9c4;border-color:#ffc8aa66}.loop-buttons .active{filter:brightness(1.2);box-shadow:inset 0 2px 6px #280602b3,0 0 9px #b2402d8c}.loop-readout{border:1px solid var(--line-soft);border-radius:var(--rad-sm);min-height:clamp(20px,3.4vh,27px);color:var(--amber);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.04em;text-shadow:0 0 5px #e07a284d;background:#060302;justify-content:center;align-items:center;gap:12px;margin-top:clamp(3px,.5vh,5px);padding:2px 8px;display:flex;box-shadow:inset 0 2px 6px #000000b3}.mixer-panel{gap:clamp(2px,.5vh,5px);display:grid}.volume-row{min-height:clamp(20px,3.4vh,27px);color:var(--text);font-size:var(--fs-sm);grid-template-columns:clamp(62px,18vw,80px) minmax(0,1fr) clamp(34px,10vw,42px);align-items:center;gap:clamp(6px,1.8vw,9px);display:grid}.volume-row strong{color:var(--amber);text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm)}.status-message{z-index:30;border-radius:var(--rad-sm);width:max-content;max-width:min(88vw,380px);color:var(--cream);font-size:var(--fs);text-align:center;background:linear-gradient(#4a160df7,#280b06f7);border:1px solid #eed3a08c;margin:0;padding:clamp(7px,1.2vh,11px) clamp(12px,3.4vw,16px);line-height:1.4;animation:.18s ease-out status-in;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 26px #000000b3,inset 0 1px #ffdca024}@keyframes status-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.94)}}.beat-footer{grid-template-columns:minmax(0,1fr) minmax(96px,36%) minmax(0,1fr);align-items:stretch;gap:clamp(5px,1.5vw,8px);padding:clamp(4px,.8vh,7px);display:grid}.speaker-grille{border-radius:var(--rad-sm);opacity:.72;background:linear-gradient(#0a070659,#0a070680),url(/assets/ui/speaker-grille.webp) 50%/cover;border:1px solid #0009;min-height:clamp(26px,4.4vh,42px);box-shadow:inset 0 0 12px #000c,inset 0 1px #ffdca00d}.beat-status{border-radius:var(--rad-sm);background:#070403;border:1px solid #c9985a4d;align-content:center;place-items:center;gap:clamp(3px,.6vh,6px);padding:clamp(3px,.6vh,6px);display:grid;box-shadow:inset 0 2px 8px #0009}.beat-status>span{color:var(--muted);font-size:var(--fs-sm);letter-spacing:.18em}.beat-status>span.playing{color:var(--brass-hi)}.beat-lights{align-items:center;gap:clamp(3px,1vw,6px);width:100%;max-width:clamp(120px,34vw,170px);display:grid}.beat-lights i{aspect-ratio:1;min-width:0;box-shadow:none;background:url(/assets/ui/beat-light-off.png) 50%/contain no-repeat;border:0;border-radius:50%;transition:filter 60ms linear}.beat-lights i.active{filter:drop-shadow(0 0 5px #ffa1438c);background:url(/assets/ui/beat-light-on.png) 50%/contain no-repeat}.beat-lights i.downbeat.active{filter:drop-shadow(0 0 8px #ffa143d9)brightness(1.15)}@media (height<=480px){body{overflow-y:auto}.app-shell{height:auto;min-height:100svh}.device{max-height:none}.player-window{min-height:132px}}