[hidden]{display:none!important}
.mode-menu{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:radial-gradient(at top left,#ffe9a6,transparent 60%),linear-gradient(135deg,#c5f5e9,#d5c8ff);overflow:auto;color:#193d4a}
.mode-card{text-align:center;width:min(850px,100%)}.menu-star{font-size:4rem}.mode-card h1{font-size:clamp(2rem,6vw,4rem);margin:10px}.mode-options{display:flex;gap:20px;margin-top:30px}.mode-options button{flex:1;border:4px solid white;border-radius:30px;padding:30px 15px;background:#fff8e7;box-shadow:0 10px 0 #9bced0;cursor:pointer;font-size:3rem;color:#193d4a}.mode-options button+button{background:#e6d7ff}.mode-options strong,.mode-options small{display:block;font-size:1.4rem;margin-top:14px}.mode-options small{font-size:.9rem}.menu-tip{margin-top:30px}.back-modes{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;z-index:35;padding:12px 18px;border:2px solid white;border-radius:30px;background:#fff;color:#263354;cursor:pointer}.toy .brand{margin-left:110px}
#djMode{position:fixed;inset:0;overflow:auto;background:radial-gradient(at 20% 0,#533080,transparent 65%),#111629;color:#fff;padding:max(20px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));touch-action:manipulation}
.dj-header{text-align:center;margin:0 80px 16px}.dj-header h1{font-size:clamp(1.7rem,4vw,3rem);margin:0}.dj-header p{color:#c3d0eb;margin:6px}.dj-close{position:absolute;right:15px;top:15px;background:#ff597c;color:white;border:2px solid white;border-radius:50%;width:48px;height:48px;font-size:2rem;cursor:pointer}
.dj-console{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 180px 1fr;gap:20px;align-items:center}.deck{background:#242942;border:2px solid #ffffff25;border-radius:28px;padding:18px;text-align:center}.deck h2{font-size:1rem;letter-spacing:.13em;color:#73f4df}.deck.right h2{color:#ffabde}
.jog{display:grid;place-items:center;width:min(28vw,300px);aspect-ratio:1;border:9px solid #62ecdb;border-radius:50%;margin:10px auto 16px;background:transparent;color:white;box-shadow:0 0 35px #36dbc433;touch-action:none;cursor:grab}.right .jog{border-color:#ef8dc7}.jog span{display:grid;place-items:center;width:55%;aspect-ratio:1;border-radius:50%;background:#65dfca;font-size:clamp(2rem,5vw,4rem);pointer-events:none}.right .jog span{background:#ef8dc7}.jog:active{box-shadow:0 0 40px #fff9}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.pad{border:0;border-bottom:6px solid #0004;border-radius:14px;min-height:65px;font-size:1.7rem;cursor:pointer;touch-action:none;background:var(--pad);color:#1c2340}.pad small{display:block;font-size:.64rem}.pad:active,.pad.hit{filter:brightness(1.4);transform:translateY(3px)}
.mixer{display:grid;gap:18px;text-align:center}.mixer label{font-size:.8rem;color:#dce6ff}.mixer input{display:block;width:100%;margin-top:12px;accent-color:#ffda71;min-height:32px;touch-action:none}.fx{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fx button{padding:15px 5px;border:2px solid #b4a3ff;border-radius:15px;background:#453867;color:white;cursor:pointer;touch-action:none}.beat-light{width:20px;height:20px;border-radius:50%;background:#81ffe3;margin:auto;opacity:.3}.beat-light.pulse{opacity:1;box-shadow:0 0 24px #81ffe3}.dj-status{min-height:24px;text-align:center;margin:20px;color:#ffe6a0}.dj-help{text-align:center;color:#a7b6d1;font-size:.8rem}
@media(max-width:700px){.mode-options{flex-direction:column}.mode-options button{padding:15px}.menu-star{font-size:2rem}.dj-console{grid-template-columns:1fr 1fr;gap:6px;align-items:start}.mixer{grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;gap:8px}.deck{padding:6px;border-radius:16px}.pads{grid-template-columns:repeat(4,1fr);gap:4px}.pad{min-height:40px;border-radius:8px;font-size:1.1rem;border-bottom-width:3px}.pad small{font-size:.42rem}.jog{width:30vw;border-width:5px;margin:4px auto 6px}.jog span{font-size:clamp(1.5rem,7vw,3rem)}.dj-header{padding-top:30px;margin:0 0 4px}.dj-header h1{font-size:1.5rem}.dj-header p{font-size:.7rem;margin:2px}#djMode{padding:4px 6px}.fx{gap:4px}.fx button{padding:7px 3px;font-size:.7rem}.mixer label{font-size:.6rem}.mixer input{margin-top:2px;min-height:22px}.dj-status,.dj-help{font-size:.65rem;margin:5px}.beat-light{display:none}.toy .brand{margin-left:90px;font-size:.8rem}}
@media (orientation: landscape) and (max-height: 600px){#djMode{padding-top:4px}.dj-header{margin-bottom:2px}.dj-console{grid-template-columns:1fr 130px 1fr;gap:6px}.mixer{display:grid;grid-template-columns:1fr;gap:4px}.mixer .fx{order:0}.mixer label{font-size:.62rem}.mixer input{min-height:20px}.jog{width:min(22vw,170px);margin:2px auto 4px}.deck{padding:5px}.pads{gap:3px}.pad{min-height:34px;font-size:1rem}.pad small{font-size:.36rem}.dj-header h1{font-size:1.25rem}.dj-header p{display:none}.dj-status,.dj-help{margin:2px;font-size:.55rem}}