*{box-sizing:border-box}html,body,#root{margin:0;width:100%;min-height:100%}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#e6ecf6;background:radial-gradient(circle at 15% 20%,#6f7f95 0,transparent 35%),radial-gradient(circle at 85% 75%,#5d6f86 0,transparent 34%),linear-gradient(180deg,#2c3644,#1d2531)}.velodrome-root{min-height:100dvh;padding:clamp(.3rem,1vw,.75rem);display:grid;place-items:center}.velodrome-stage{width:min(1760px,100%);display:grid;grid-template-columns:minmax(0,40fr) minmax(520px,24fr) minmax(0,40fr);grid-template-rows:auto auto;gap:.6rem;align-items:start}.stage-deck-a{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0}.stage-deck-b{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-width:0}.stage-mixer{grid-column:2;grid-row:1 / span 2;z-index:2;display:flex;align-items:flex-start;justify-content:center;min-width:0}.stage-info{grid-column:1 / -1;grid-row:2;z-index:1;border-radius:10px;background:linear-gradient(180deg,#1a212cdb,#121821db);border:1px solid rgba(114,131,157,.4);padding:.65rem;min-height:120px}.now-grid{height:100%;display:grid;grid-template-columns:minmax(0,40fr) minmax(520px,24fr) minmax(0,40fr);gap:.6rem}.now-card{border-radius:8px;border:1px solid rgba(128,145,171,.35);background:linear-gradient(180deg,#2c3849a6,#1c2531a6);padding:.55rem .6rem}.now-a{grid-column:1}.now-b{grid-column:3}.now-card h3{margin:0 0 .2rem;font-size:.68rem;letter-spacing:.08em;color:#d7e2f1;text-transform:uppercase}.now-card p{margin:.14rem 0;font-size:.62rem;color:#b7c3d6}.track-title{color:#eef4ff;font-size:.74rem;letter-spacing:.03em}.deck-headline,.mixer-headline{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.35rem;font-size:.72rem;letter-spacing:.05em;color:#a6b0bf}.deck-headline h2,.mixer-headline h2{margin:0;font-size:.9rem;color:#ecf1f8}.deck-image-wrap,.mixer-image-wrap{min-width:0}.deck-image{position:relative;width:100%;aspect-ratio:1154 / 898;background-repeat:no-repeat;background-size:contain;background-position:center;border-radius:8px;overflow:hidden}.platter-layer{position:absolute;top:1.11%;left:2.17%;width:74.84%;aspect-ratio:1 / 1;transform-origin:center center}.platter-layer img{width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.tonearm-layer{position:absolute;top:0;height:100%;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;z-index:4}.tonearm-layer.dragging{cursor:grabbing}.tonearm-layer img{height:100%;width:auto;display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.click-zone{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;transition:filter .12s ease,transform .12s ease;touch-action:manipulation}.click-zone:disabled{cursor:not-allowed;opacity:.45}.click-zone.active{filter:drop-shadow(0 0 8px rgba(255,96,96,.7))}.click-zone img{width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.zone-onoff{top:75.83%;left:1.73%;width:6.06%;height:7.79%}.zone-startstop{top:86.86%;left:2.17%;width:9.71%;height:10.02%}.zone-rpm33{top:94.21%;left:12.91%;width:5.03%;height:3.56%}.zone-rpm45{top:94.21%;left:18.45%;width:5.03%;height:3.56%}.zone-reset{top:78.4%;left:83.79%;width:3.21%;height:4.12%}.zone-x2{top:46.77%;left:90.26%;width:4.68%;height:2%}.zone-light{top:92.53%;left:55.8%;width:3.73%;height:4.79%;border-radius:999px}.zone-light.active{box-shadow:inset 0 0 0 1px #ffe7a3,0 0 12px #ffedaef2}.zone-pitch{position:absolute;top:52.78%;left:90.87%;width:3.99%;height:34.63%;display:block}.zone-pitch img{position:absolute;left:0;width:100%;top:42%;pointer-events:none}.zone-pitch input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:ns-resize;touch-action:none}.strobe-light{position:absolute;top:92.7%;left:56.2%;width:2.9%;height:3.9%;border-radius:999px;background:radial-gradient(circle at center,#fff5c2 10%,#ffe259 60%,#ffe25900 70%);filter:blur(.2px)}.led{position:absolute;width:1.9%}.led-33{top:95.33%;left:15.6%}.led-45{top:95.33%;left:21.49%}.led-reset{top:69.82%;left:88.21%}.led-x2{top:47.44%;left:92.88%}.deck-strip{margin-top:.28rem;display:grid;grid-template-columns:auto auto 1fr auto 1fr;gap:.35rem;align-items:center;font-size:.58rem;color:#a4afbe}.deck-meter{margin-top:.25rem;display:grid;grid-template-columns:auto 1fr;gap:.35rem;align-items:center;font-size:.62rem;color:#9da8b7}.meter-track{height:8px;border-radius:999px;background:#21252d;border:1px solid #343b47;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#3adb8f,#f1dc5a,#ff7171)}.mixer-image{position:relative;width:100%;aspect-ratio:357 / 898;background-repeat:no-repeat;background-size:contain;background-position:center;border-radius:8px;overflow:hidden}.x92-wrap{width:100%;min-width:0;overflow:hidden;border-radius:8px;display:flex;justify-content:center;align-items:flex-start}.x92-image{position:relative;width:min(100%,640px);aspect-ratio:789 / 920;background-size:100% 100%;background-repeat:no-repeat;background-position:center;overflow:hidden}.x92-hot-knob,.x92-hot-fader{position:absolute;z-index:10;display:block;pointer-events:auto}.x92-hot-knob{transform:translate(-50%,-50%);aspect-ratio:1/1;border-radius:50%}.x92-knob-sprite{position:absolute;left:50%;top:50%;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;transform-origin:50% 50%;pointer-events:none;transition:transform 60ms linear}.x92-hot-knob input,.x92-hot-fader input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;touch-action:none;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}.x92-hot-knob input{cursor:grab;clip-path:circle(50% at 50% 50%)}.x92-hot-fader.v input{cursor:ns-resize}.x92-hot-fader.h input{cursor:ew-resize}.x92-fader-thumb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-o-object-fit:contain;object-fit:contain;pointer-events:none;transition:top 40ms linear,left 40ms linear}.x92-fader-thumb.mic{width:108%;height:34%;transform:translate(-43%,-40%)}.x92-fader-thumb.channel{width:132%;height:19%;transform:translate(-42%,-39%)}.x92-fader-thumb.h{width:11.5%;height:168%;transform:translate(-43%,-41%)}.x92-hot-btn{position:absolute;z-index:16;border:1px solid transparent;border-radius:5px;background:transparent;color:transparent;font-size:0;line-height:1;padding:0;cursor:pointer;touch-action:manipulation;transition:transform .1s ease}.x92-hot-btn:active{transform:scale(.96)}.x92-hot-btn.active{border-color:#f0f7ff24;box-shadow:inset 0 0 0 1px #e2ecf81a}.x92-hot-btn.active-red{border-color:#ff7a7ae0;box-shadow:inset 0 0 0 1px #ff7a7ab8,0 0 9px #ff6262a6}.x92-hot-btn.active-blue{border-color:#80cdffe0;box-shadow:inset 0 0 0 1px #80cdffb8,0 0 9px #5abaffa6}.x92-hot-btn.active-yellow{border-color:#ffe080e6;box-shadow:inset 0 0 0 1px #ffe080bf,0 0 9px #ffce5a9e}.x92-hot-btn.active-green{border-color:#84f69aeb;box-shadow:inset 0 0 0 1px #84f69abd,0 0 9px #65ec839e}.x92-hit-knob,.x92-hit-fader,.x92-hit-btn{position:absolute;z-index:9;pointer-events:none}.x92-hit-knob{transform:translate(-50%,-50%);aspect-ratio:1/1;border:1px dashed rgba(95,203,255,.9);border-radius:999px;background:#5fcbff1f}.x92-hit-fader{border:1px dashed rgba(255,225,110,.9);border-radius:4px;background:#ffe16e1a}.x92-hit-btn{border:1px dashed rgba(255,116,116,.9);border-radius:4px;background:#ff74741a}.x92-led{position:absolute;z-index:12;border-radius:999px;transform:translate(-50%,-50%);opacity:.2;background:#9ea6b1;box-shadow:0 0 5px #060a128c;transition:opacity .12s ease,box-shadow .12s ease;pointer-events:none}.x92-led.on{opacity:1}.x92-led.red{background:#f77}.x92-led.red.on{box-shadow:0 0 8px #ff5d5df2,0 0 14px #ff5d5d8c}.x92-led.amber{background:#ffd47a}.x92-led.amber.on{box-shadow:0 0 8px #ffcf5ff2,0 0 14px #ffc54e8c}.x92-led.green{background:#8bff95}.x92-led.green.on{box-shadow:0 0 8px #66ff82f2,0 0 14px #58ff7280}.x92-led.blue{background:#90cbff}.x92-led.blue.on{box-shadow:0 0 8px #6fcbfff2,0 0 14px #62c4ff80}.x92-vu{position:absolute;z-index:6;width:3%;height:13%;border:1px solid rgba(72,83,96,.6);background:#161c2473;display:flex;align-items:flex-end;overflow:hidden}.x92-vu-fill{width:100%;background:linear-gradient(180deg,#ff6d6d,#f0da5a 55%,#52df9e)}.x92-vu-fill.booth{background:linear-gradient(180deg,#71d2ff,#89e7a9)}.x92-vu-fill.cue{background:linear-gradient(180deg,#ff98cb,#ffe56f,#81f0b3)}@media (max-width: 1200px){.velodrome-root{place-items:start stretch;padding:calc(.45rem + env(safe-area-inset-top)) calc(.45rem + env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) calc(.45rem + env(safe-area-inset-left))}.velodrome-stage{width:100%;max-width:820px;grid-template-columns:1fr;grid-template-rows:auto;gap:.75rem;align-items:start}.stage-deck-a,.stage-deck-b,.stage-mixer,.stage-info{grid-column:1;grid-row:auto}.stage-deck-a,.stage-deck-b,.stage-mixer{border-radius:10px;border:1px solid rgba(114,131,157,.28);background:linear-gradient(180deg,#151c26e6,#10161fe0);padding:.48rem}.deck-headline,.mixer-headline{margin-bottom:.3rem;font-size:.75rem}.deck-headline h2,.mixer-headline h2{font-size:.96rem}.deck-image-wrap{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:.15rem}.deck-image,.deck-strip,.deck-meter{width:100%;min-width:540px;margin-inline:auto}.deck-strip,.deck-meter{font-size:.72rem;gap:.42rem}.deck-strip input[type=range]{min-height:28px}.x92-wrap{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:.15rem}.x92-image{width:100%;min-width:460px}.now-grid{grid-template-columns:1fr;gap:.5rem}.now-a,.now-b{grid-column:1}.now-card h3{font-size:.76rem}.track-title{font-size:.86rem}.now-card p{font-size:.76rem}.stage-info{min-height:auto;padding:.55rem}}@media (max-width: 760px){.deck-image,.deck-strip,.deck-meter{min-width:500px}.x92-image{min-width:430px}}@media (max-width: 460px){.velodrome-root{padding:calc(.38rem + env(safe-area-inset-top)) calc(.35rem + env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) calc(.35rem + env(safe-area-inset-left))}.deck-image,.deck-strip,.deck-meter{min-width:470px}.x92-image{min-width:400px}}@media (max-width: 1600px){.velodrome-stage,.now-grid{grid-template-columns:minmax(0,39fr) minmax(420px,22fr) minmax(0,39fr)}}@media (pointer: coarse){.click-zone:after,.x92-hot-btn:after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px}.x92-hot-knob input{top:-10px;right:-10px;bottom:-10px;left:-10px}.x92-hot-fader.v input{left:-8px;right:-8px;top:-10px;bottom:-10px}.x92-hot-fader.h input{left:-10px;right:-10px;top:-8px;bottom:-8px}.zone-pitch input{top:-12px;right:-12px;bottom:-12px;left:-12px}}