: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: rgba(201, 152, 90, .38);--line-soft: rgba(201, 152, 90, .16);--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;line-height:1.3;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overflow:hidden;background:radial-gradient(circle at 50% -8%,rgba(224,122,40,.14),transparent 46%),radial-gradient(circle at 50% 108%,rgba(140,43,30,.18),transparent 42%),linear-gradient(150deg,#1d0d07 0%,var(--bg) 45%,#0a0402 100%)}button,input{font:inherit;-webkit-tap-highlight-color:transparent}button{border:1px solid rgba(238,211,160,.4);border-radius:var(--rad-sm);color:var(--cream);cursor:pointer;font-weight:600;letter-spacing:.03em;background:linear-gradient(180deg,#2b1c12,#150c06);box-shadow:inset 0 1px #ffe6b429,inset 0 -3px 6px #00000073,0 2px 5px #00000080;transition:transform .1s ease,box-shadow .1s ease,filter .14s ease,opacity .14s ease}button:active:not(:disabled){transform:translateY(1px);filter:brightness(1.08);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:2px solid rgba(238,211,160,.55);outline-offset:1px}.btn-brass,.file-button,.url-form button,.calibration-controls .set-downbeat,.stepper-buttons button{border-color:#ffecbe80;background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 42%,var(--brass-lo) 100%);color:#241407;text-shadow:0 1px 0 rgba(255,240,205,.4);box-shadow:inset 0 1px #fff5d7a6,inset 0 -3px 5px #462a0e80,0 2px 5px #0000008c}.app-shell{display:flex;justify-content:center;width:100%;height:100vh;height:100dvh;padding:clamp(3px,.8vh,10px) clamp(4px,1.6vw,10px);padding-bottom:max(clamp(3px,.8vh,10px),env(safe-area-inset-bottom))}.device{position:relative;display:flex;flex-direction:column;gap:var(--gap);width:100%;max-width:430px;height:100%;max-height:960px;margin:auto;padding:var(--pad);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;border:2px solid var(--bezel);border-radius:clamp(14px,2.4vh,22px);background:repeating-linear-gradient(93deg,rgba(0,0,0,.15) 0 2px,transparent 2px 9px,rgba(255,196,130,.05) 9px 11px,transparent 11px 18px),radial-gradient(ellipse 130% 55% at 32% 10%,rgba(255,170,90,.1),transparent 62%),linear-gradient(150deg,var(--wood-1),var(--wood-2) 52%,var(--wood-3) 100%);box-shadow:inset 0 0 0 1px #eed3a02e,inset 0 0 26px #000000a6,0 18px 42px #0009}.device:before{position:absolute;inset:clamp(5px,.9vh,8px);z-index:0;pointer-events:none;content:"";border:1px solid rgba(201,152,90,.22);border-radius:clamp(10px,1.8vh,16px);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%)}.device>*{position:relative;z-index:1}.device::-webkit-scrollbar{display:none}.top-bar{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(6px,2vw,10px);align-items:center;padding:0 clamp(2px,.6vw,4px)}.name-plate{display:inline-flex;align-items:center;padding:clamp(2px,.4vh,4px) clamp(10px,3vw,16px);border:1px solid rgba(201,152,90,.46);border-radius:4px;background:repeating-linear-gradient(180deg,rgba(238,211,160,.045) 0 1px,transparent 1px 4px),linear-gradient(180deg,#30261b,#19110b,#0b0705);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:"";width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--brass-hi) 0 18%,var(--brass) 45%,var(--brass-lo) 76%,#251407 100%);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;font-size:clamp(12px,1.9vh,16px);font-weight:700;letter-spacing:.24em;text-shadow:0 1px 0 rgba(0,0,0,.78),0 0 4px rgba(255,161,67,.16);white-space:nowrap}.top-bar:after{content:"";grid-column:2;grid-row:1;height:3px;border-radius:999px;background:linear-gradient(180deg,#000000a6,#ffdca01a);box-shadow:0 1px #ffdca014}.ready-state{grid-column:3;display:flex;gap:6px;align-items:center;color:var(--brass-hi);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.12em;white-space:nowrap}.pilot-light{width:clamp(10px,1.7vh,14px);height:clamp(10px,1.7vh,14px);border:1px solid rgba(240,215,170,.35);border-radius:50%;background:radial-gradient(circle at 36% 32%,#ffc7a0 0,#ffc7a0 14%,#9c2a1f 44%,#260806 76%);box-shadow:0 0 6px #e07a288c,inset 0 -1px 2px #00000080}.pilot-light.is-playing{background:radial-gradient(circle at 36% 32%,#ecf7c8 0,#ecf7c8 14%,#7fb25f 44%,#17300f 78%);box-shadow:0 0 7px #a9cf8299,inset 0 -1px 2px #00000080;animation:pilot-pulse 1.1s ease-in-out infinite}@keyframes pilot-pulse{50%{box-shadow:0 0 11px #a9cf82e6,inset 0 -1px 2px #00000080}}.player-window,.panel,.transport-row,.beat-footer{flex:0 0 auto;min-height:0;margin:0;border:1px solid var(--line-soft);border-radius:var(--rad);background:linear-gradient(180deg,rgba(255,210,150,.035),transparent 34%),linear-gradient(180deg,var(--panel),var(--panel-2));box-shadow:inset 0 1px #ffdca012,inset 0 0 14px #00000059,0 3px 9px #0006}.player-window{flex:1 1 auto;display:grid;grid-template-columns:clamp(64px,19vw,96px) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:clamp(3px,.6vh,6px) clamp(7px,2vw,10px);min-height:clamp(104px,17vh,165px);padding:var(--pad)}.record-area{position:relative;grid-row:1 / 4;align-self:stretch;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;container-type:size}.turntable{position:relative;flex:0 0 auto;width:100%;width:min(100%,100cqh);aspect-ratio:1;max-height:100%;border:1px solid rgba(124,87,48,.55);border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(224,122,40,.1),transparent 62%),radial-gradient(circle,#140c07,#0b0705 68%,#050302);box-shadow:inset 0 0 0 1px #000000bf,inset 0 3px 10px #000c,0 1px #ffdca00f}.vinyl{position:absolute;top:3%;right:3%;bottom:3%;left:3%;border-radius:50%;background:url(/assets/ui/vinyl-disc.png) center / contain no-repeat;animation:vinyl-spin 3.6s linear infinite;animation-play-state:paused;will-change:transform}.vinyl.is-spinning{animation-play-state:running}@keyframes vinyl-spin{to{transform:rotate(360deg)}}.tone-arm{position:absolute;top:-4%;right:3%;z-index:2;width:34%;aspect-ratio:618 / 1073;pointer-events:none;background:url(/assets/ui/tone-arm.png) center / contain no-repeat;filter:drop-shadow(2px 3px 3px rgba(0,0,0,.6))}@media (prefers-reduced-motion: reduce){.vinyl{animation:none}}.track-area{display:contents;min-width:0}.loader-row{grid-column:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(4px,1.2vw,7px);align-items:center}.file-button,.url-form button{min-height:var(--btn-h);padding:0 clamp(7px,2.2vw,12px);font-size:var(--fs-sm);text-align:center}.file-button{display:grid;place-items:center;white-space:nowrap}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.url-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(4px,1.2vw,7px);min-width:0}.url-form input,.number-row input{min-width:0;border:1px solid var(--line-soft);border-radius:var(--rad-sm);background:#060302;color:var(--text);box-shadow:inset 0 2px 7px #000000bf,inset 0 0 0 1px #00000080}.url-form input{height:var(--btn-h);padding:0 9px;color:var(--muted);font-size:var(--fs-sm)}.track-area h1{grid-column:2;min-width:0;margin:0;overflow:hidden;color:var(--cream);font-size:clamp(14px,2.4vh,20px);font-weight:600;font-style:italic;letter-spacing:.02em;line-height:1.25;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap}.wave-line{grid-column:2;display:flex;align-items:center;justify-content:center;gap:2px;min-height:clamp(20px,3.6vh,36px);overflow:hidden;padding:2px clamp(3px,1.4vw,7px);border-radius:var(--rad-sm);background:#00000059;box-shadow:inset 0 1px 4px #00000080}.wave-line span{width:2px;max-width:3px;flex:1 1 2px;border-radius:999px;background:linear-gradient(180deg,#c85a3a,var(--red));opacity:.4;box-shadow:0 0 3px #b2402d4d}.wave-line.has-waveform span{opacity:.85}.time-row{grid-column:1 / -1;display:flex;justify-content:space-between;gap:10px;color:var(--amber);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.06em;text-shadow:0 0 5px rgba(224,122,40,.3)}.progress{grid-column:1 / -1}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:clamp(14px,2.4vh,20px);margin:0;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:5px;border:1px solid rgba(201,152,90,.35);border-radius:999px;background:linear-gradient(180deg,#070403,#1c120b);box-shadow:inset 0 1px 3px #000000d9}input[type=range]::-webkit-slider-thumb{width:clamp(15px,2.6vh,20px);height:clamp(15px,2.6vh,20px);margin-top:calc((5px - clamp(15px,2.6vh,20px))/2 - 1px);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,236,190,.6);border-radius:5px;background:linear-gradient(90deg,transparent 46%,rgba(60,34,12,.65) 47% 53%,transparent 54%),linear-gradient(90deg,var(--brass-lo),var(--brass-hi) 50%,var(--brass-lo));box-shadow:inset 0 1px #ffffff47,0 2px 5px #00000073}input[type=range]::-moz-range-track{height:5px;border:1px solid rgba(201,152,90,.35);border-radius:999px;background:#0f0a06}input[type=range]::-moz-range-progress{height:5px;border-radius:999px;background:var(--amber-deep)}input[type=range]::-moz-range-thumb{width:clamp(15px,2.6vh,20px);height:clamp(15px,2.6vh,20px);border:1px solid rgba(255,236,190,.6);border-radius:5px;background:linear-gradient(90deg,transparent 46%,rgba(60,34,12,.65) 47% 53%,transparent 54%),linear-gradient(90deg,var(--brass-lo),var(--brass-hi) 50%,var(--brass-lo));box-shadow:0 2px 5px #00000073}.transport-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.5vw,8px);padding:clamp(5px,.9vh,8px)}.transport-button{display:grid;gap:clamp(1px,.3vh,3px);place-items:center;min-height:clamp(34px,5.6vh,52px);padding:clamp(2px,.4vh,5px) 0;border-color:#eed3a047;background:linear-gradient(180deg,#2c1d12,#170e07 60%,#0d0704);color:var(--text)}.t-icon{position:relative;display:block;width:clamp(15px,2.4vh,20px);height:clamp(11px,1.9vh,15px);color:var(--brass-hi);filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}.icon-play{background:currentColor;clip-path:polygon(8% 0,100% 50%,8% 100%)}.icon-pause{background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64% 100%)}.icon-stop{width:clamp(11px,1.9vh,15px);border-radius:2px;background:currentColor}.icon-rew:before,.icon-rew:after,.icon-ff:before,.icon-ff:after{content:"";position:absolute;top:0;width:54%;height:100%;background:currentColor}.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{border-color:#ffc8aa66;background:linear-gradient(180deg,var(--red-hi) 0%,var(--red) 55%,#5c1a10 100%);color:#ffe9c4;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{margin-bottom:clamp(3px,.5vh,5px);color:var(--brass);text-align:center;font-size:var(--fs-sm);font-weight:700;letter-spacing:.22em;text-transform:uppercase}.calibration-panel{text-align:center}.calibration-readout{margin-bottom:clamp(3px,.6vh,6px);color:var(--amber);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.06em;text-shadow:0 0 5px rgba(224,122,40,.3)}.calibration-controls{display:grid;grid-template-columns:1fr 1.35fr 1fr .8fr;gap:clamp(4px,1.3vw,7px)}.calibration-controls button{display:grid;gap:1px;place-items:center;align-content:center;min-width:0;min-height:clamp(30px,5vh,44px);padding:2px 4px;font-size:var(--fs-sm);white-space:nowrap;line-height:1.1}.calibration-controls button small{opacity:.72;color:inherit;font-family:var(--font-mono);font-size:.8em;letter-spacing:.02em}.beat-settings{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(4px,1.4vw,8px)}.number-control{min-width:0;text-align:center}.number-control label{display:block;min-height:1.3em;margin-bottom:clamp(2px,.4vh,4px);color:var(--muted);font-size:var(--fs-sm);line-height:1.15}.number-row{display:grid;grid-template-columns:minmax(0,1fr) clamp(24px,7.6vw,32px);gap:clamp(3px,1vw,5px)}.number-row input{height:clamp(36px,6.6vh,60px);padding:0 2px;text-align:center;color:var(--amber);font-family:var(--font-mono);font-size:clamp(19px,4.2vh,36px);font-weight:700;letter-spacing:.01em;text-shadow:0 0 8px rgba(255,161,67,.4);background:linear-gradient(rgba(255,161,67,.05),transparent 40%),#060302}.number-row input:focus,.url-form input:focus{outline:2px solid rgba(224,122,40,.5);outline-offset:1px}.stepper-buttons{display:grid;grid-template-rows:1fr 1fr;gap:clamp(3px,.5vh,4px)}.stepper-buttons button{min-height:0;padding:0;font-size:clamp(9px,1.3vh,12px);line-height:1}.slider-panel{display:grid;gap:clamp(1px,.3vh,3px)}.slider-header{display:flex;justify-content:space-between;gap:10px;align-items:baseline;color:var(--text);font-size:var(--fs)}.slider-header strong{color:var(--amber);font-family:var(--font-mono);font-size:clamp(13px,2vh,17px);text-shadow:0 0 5px rgba(224,122,40,.3)}.slider-panel p{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.2}.loop-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,1.3vw,7px)}.loop-buttons button{min-height:var(--btn-h);padding:0 3px;font-size:var(--fs-sm)}.loop-buttons button:nth-child(3){border-color:#ffc8aa66;background:linear-gradient(180deg,var(--red-hi),var(--red) 60%,#5c1a10);color:#ffe9c4}.loop-buttons .active{filter:brightness(1.2);box-shadow:inset 0 2px 6px #280602b3,0 0 9px #b2402d8c}.loop-readout{display:flex;justify-content:center;align-items:center;gap:12px;min-height:clamp(20px,3.4vh,27px);margin-top:clamp(3px,.5vh,5px);padding:2px 8px;border:1px solid var(--line-soft);border-radius:var(--rad-sm);background:#060302;box-shadow:inset 0 2px 6px #000000b3;color:var(--amber);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.04em;text-shadow:0 0 5px rgba(224,122,40,.3)}.mixer-panel{display:grid;gap:clamp(2px,.5vh,5px)}.volume-row{display:grid;grid-template-columns:clamp(62px,18vw,80px) minmax(0,1fr) clamp(34px,10vw,42px);gap:clamp(6px,1.8vw,9px);align-items:center;min-height:clamp(20px,3.4vh,27px);color:var(--text);font-size:var(--fs-sm)}.volume-row strong{color:var(--amber);text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm)}.status-message{position:fixed;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%);width:max-content;max-width:min(88vw,380px);margin:0;padding:clamp(7px,1.2vh,11px) clamp(12px,3.4vw,16px);border:1px solid rgba(238,211,160,.55);border-radius:var(--rad-sm);background:linear-gradient(180deg,#4a160df7,#280b06f7);box-shadow:0 10px 26px #000000b3,inset 0 1px #ffdca024;color:var(--cream);font-size:var(--fs);line-height:1.4;text-align:center;animation:status-in .18s ease-out}@keyframes status-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.94)}}.beat-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,36%) minmax(0,1fr);gap:clamp(5px,1.5vw,8px);align-items:stretch;padding:clamp(4px,.8vh,7px)}.speaker-grille{min-height:clamp(26px,4.4vh,42px);border:1px solid rgba(0,0,0,.6);border-radius:var(--rad-sm);background:linear-gradient(#0a070659,#0a070680),url(/assets/ui/speaker-grille.webp) center / cover;opacity:.72;box-shadow:inset 0 0 12px #000c,inset 0 1px #ffdca00d}.beat-status{display:grid;gap:clamp(3px,.6vh,6px);place-items:center;align-content:center;padding:clamp(3px,.6vh,6px);border:1px solid rgba(201,152,90,.3);border-radius:var(--rad-sm);background:#070403;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{display:grid;width:100%;max-width:clamp(120px,34vw,170px);gap:clamp(3px,1vw,6px);align-items:center}.beat-lights i{aspect-ratio:1;min-width:0;border:0;border-radius:50%;background:url(/assets/ui/beat-light-off.png) center / contain no-repeat;box-shadow:none;transition:filter 60ms linear}.beat-lights i.active{background:url(/assets/ui/beat-light-on.png) center / contain no-repeat;filter:drop-shadow(0 0 5px rgba(255,161,67,.55))}.beat-lights i.downbeat.active{filter:drop-shadow(0 0 8px rgba(255,161,67,.85)) brightness(1.15)}@media (max-height: 480px){body{overflow-y:auto}.app-shell{height:auto;min-height:100svh}.device{max-height:none}.player-window{min-height:132px}}