:root{--bg0: #0c0e12;--bg1: #15181f;--metal-hi: #eef0f4;--metal: #c2c6cd;--metal-lo: #8d929b;--metal-edge: #5b5f68;--oled-bg: #04130f;--oled: #56f5c6;--oled-dim: #1f6e58;--oled-amber: #ffcf6b;--ink: #e9edf4;--ink-dim: #9aa2b1;--accent: #56f5c6;--deck: #191c23;--deck2: #21252e;--chip: #2a2f3a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;min-height:100%}body{font-family:Outfit,system-ui,sans-serif;background:radial-gradient(1200px 800px at 50% -10%,#1b2230 0%,var(--bg1) 40%,var(--bg0) 100%);color:var(--ink);min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 14px 60px}.brandline{width:100%;max-width:940px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}.brandline h1{font-family:Orbitron,sans-serif;font-weight:900;letter-spacing:3px;font-size:21px;margin:0;text-shadow:0 0 18px rgba(86,245,198,.25)}.brandline h1 b{color:var(--accent)}.modeToggle{display:flex;background:#1b1f27;border:1px solid #2b303a;border-radius:11px;padding:3px;gap:3px}.modeToggle button{appearance:none;border:none;cursor:pointer;background:transparent;color:var(--ink-dim);font-family:Outfit;font-weight:600;font-size:12.5px;letter-spacing:.5px;padding:7px 16px;border-radius:8px;transition:.15s}.modeToggle button.on{background:var(--accent);color:#06241c;box-shadow:0 0 14px #56f5c659}.stage{width:100%;display:flex;justify-content:center;align-items:flex-start;gap:22px;flex-wrap:wrap}.app.expanded .stage{max-width:940px}.app.compact .stage{max-width:560px}.device{position:relative;width:100%;max-width:520px;flex:0 0 auto;border-radius:34px;padding:20px 20px 24px;background:linear-gradient(150deg,#f3f5f8,#cfd3da 22%,#a7acb5 55%,#c9cdd4 78%,#9aa0a9);box-shadow:0 1px #ffffffb3 inset,0 -2px 8px #0000002e inset,0 30px 60px #0000008c,0 6px 0 var(--metal-edge);border:1px solid rgba(255,255,255,.4)}.device:after{content:"";position:absolute;inset:0;border-radius:34px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);mix-blend-mode:screen;opacity:.5}.screen{position:relative;background:radial-gradient(120% 140% at 50% 0%,#0a241c 0%,var(--oled-bg) 70%);border-radius:14px;padding:13px 16px;border:2px solid #0a0d0c;box-shadow:0 2px 5px #00000080 inset,0 1px #ffffff80;font-family:Share Tech Mono,monospace;color:var(--oled);text-shadow:0 0 8px rgba(86,245,198,.55);overflow:hidden}.screen:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(transparent 0 2px,#0009 2px 3px)}.scr-top{display:flex;justify-content:space-between;font-size:11px;color:var(--oled-dim);letter-spacing:1px}.scr-chord{font-size:40px;line-height:1;font-weight:700;letter-spacing:1px;margin:6px 0 2px;min-height:40px;display:flex;align-items:baseline}.scr-menu{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--oled-amber);text-shadow:0 0 8px rgba(255,207,107,.5);margin:4px 0 2px}.scr-menu .caret{opacity:.7}.scr-menu .m-label{color:var(--oled-dim);text-shadow:none}.scr-menu .m-value{font-weight:700}.scr-bot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--oled);margin-top:5px}.scr-bot .lab{color:var(--oled-dim)}.beatdots{display:flex;gap:5px}.beatdots i{width:8px;height:8px;border-radius:50%;background:#0c2b22;display:inline-block;box-shadow:0 0 0 1px #0a3a2c inset}.beatdots i.on{background:var(--oled-amber);box-shadow:0 0 8px var(--oled-amber)}.funcrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.fkey{appearance:none;border:none;cursor:pointer;border-radius:10px;padding:9px 4px 8px;font-family:Outfit;font-weight:600;font-size:11px;letter-spacing:.5px;color:#23262c;background:linear-gradient(180deg,#fbfcfd,#d3d7dd);box-shadow:0 2px #9aa0a9,0 3px 5px #00000040,0 1px #fff inset;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .04s,box-shadow .04s,filter .1s}.fkey small{font-size:13px;font-weight:700;color:#0b0d10}.fkey:active{transform:translateY(2px);box-shadow:0 0 #9aa0a9,0 1px 3px #0000004d inset}.fkey.rec-on{background:linear-gradient(180deg,#ff8a96,#c0263a);color:#fff}.fkey.rec-on small{color:#fff}.fkey.loop-on{background:linear-gradient(180deg,#8ff6da,#25c79c);color:#06241c}.play{display:grid;grid-template-columns:118px 1fr;gap:16px;margin-top:18px;align-items:center}.stickwrap{display:flex;flex-direction:column;align-items:center;gap:8px}.stick{position:relative;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#3a3f47,#15171c 70%);box-shadow:0 3px 8px #00000080 inset,0 1px #ffffff80;touch-action:none;cursor:grab}.stick .ring{position:absolute;inset:10px;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}.stick .knob{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#f0f2f5,#b9bec6 55%,#84899180);box-shadow:0 4px 8px #0000008c,0 1px #fffc inset;transition:transform .08s cubic-bezier(.3,1.4,.5,1);display:flex;align-items:center;justify-content:center}.stick .knob:after{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5b6068,#23262c)}.stick .dir{position:absolute;font-size:9px;color:#fff6;font-family:Share Tech Mono}.stick .du{top:5px;left:50%;transform:translate(-50%)}.stick .dd{bottom:5px;left:50%;transform:translate(-50%)}.stick .dl{left:6px;top:50%;transform:translateY(-50%)}.stick .dr{right:6px;top:50%;transform:translateY(-50%)}.sticklabel{font-family:Share Tech Mono;font-size:10px;color:#3c4047;letter-spacing:1px}.chordpad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.cbtn{position:relative;appearance:none;border:none;cursor:pointer;aspect-ratio:1 / 1;border-radius:14px;background:linear-gradient(180deg,#fdfdfe,#e4e7ec 60%,#cfd3da);box-shadow:0 3px #a3a8b1,0 5px 9px #0000004d,0 1px #fff inset;font-family:Orbitron;font-weight:700;font-size:20px;color:#1a1d22;display:flex;align-items:center;justify-content:center;transition:transform .05s,box-shadow .05s,filter .1s;overflow:hidden;touch-action:none}.cbtn .deg{position:absolute;bottom:5px;right:7px;font-family:Share Tech Mono;font-size:9px;color:#7b818c;font-weight:400}.cbtn .bar{position:absolute;top:0;left:0;right:0;height:6px;border-radius:14px 14px 0 0}.cbtn:active{transform:translateY(3px);box-shadow:0 0 #a3a8b1,0 2px 5px #0000004d inset}.cbtn.lit{box-shadow:0 3px #a3a8b1,0 0 22px 2px var(--litcol),0 5px 9px #0000004d;filter:brightness(1.05) saturate(1.2)}.cbtn-filler{border-radius:14px;opacity:0}.foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:0 4px}.speaker{display:grid;grid-template-columns:repeat(8,5px);grid-auto-rows:5px;gap:4px}.speaker i{background:radial-gradient(circle,#3a3f47,#181a1f);border-radius:50%;box-shadow:0 1px #fff6}.wheel{display:flex;flex-direction:column;align-items:center;gap:4px}.wheel .vol{-webkit-appearance:none;appearance:none;width:96px;height:8px;border-radius:6px;background:linear-gradient(90deg,var(--metal-edge),var(--metal-hi));outline:none;box-shadow:0 1px 2px #0006 inset}.wheel .vol::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:22px;border-radius:5px;background:linear-gradient(180deg,#fafbfc,#aeb3bb);box-shadow:0 2px 4px #00000080,0 1px #fff inset;cursor:pointer}.wheel .vol::-moz-range-thumb{width:18px;height:22px;border:none;border-radius:5px;background:linear-gradient(180deg,#fafbfc,#aeb3bb);cursor:pointer}.wheel span{font-family:Share Tech Mono;font-size:9px;color:#3c4047;letter-spacing:1px}.logo{font-family:Orbitron;font-weight:700;font-size:11px;color:#3c4047;letter-spacing:2px}.deck{flex:1 1 360px;min-width:300px;max-width:400px;align-self:stretch;background:linear-gradient(180deg,var(--deck2),var(--deck));border:1px solid #2b303a;border-radius:20px;padding:16px;box-shadow:0 18px 40px #00000080,0 1px #ffffff0d inset;display:flex;flex-direction:column;gap:16px}.row{display:flex;flex-direction:column;gap:8px}.rowlab{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim);font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:7px}.chip{appearance:none;border:1px solid #343a46;cursor:pointer;background:var(--chip);color:var(--ink-dim);border-radius:9px;padding:7px 11px;font-family:Outfit;font-weight:600;font-size:12px;letter-spacing:.3px;transition:.12s}.chip:hover{border-color:#4a5160}.chip.on{background:var(--accent);color:#06241c;border-color:var(--accent);box-shadow:0 0 14px #56f5c666}.chip.alt.on{background:var(--oled-amber);color:#3a2600;border-color:var(--oled-amber);box-shadow:0 0 14px #ffcf6b59}.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width: 480px){.deck-grid{grid-template-columns:1fr}}.tempo{display:flex;align-items:center;gap:10px}.tempo input[type=range]{flex:1;accent-color:var(--accent)}.tempo .bpm{font-family:Share Tech Mono;font-size:15px;color:var(--accent);min-width:64px}.bpm b{color:var(--ink-dim);font-size:10px;margin-left:3px}.looprow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lbtn{appearance:none;border:none;cursor:pointer;font-family:Outfit;font-weight:700;font-size:12px;padding:9px 14px;border-radius:10px;color:#fff;letter-spacing:.5px;background:#3a414e;transition:.12s;display:flex;align-items:center;gap:6px}.lbtn .dotr{width:9px;height:9px;border-radius:50%;background:#ff5c6c}.lbtn.rec.on{background:#c0263a}.lbtn.rec.on .dotr{animation:pulse 1s infinite}@keyframes pulse{0%{box-shadow:0 0 #ff5c6cb3}70%{box-shadow:0 0 0 9px #ff5c6c00}to{box-shadow:0 0 #ff5c6c00}}.lbtn.play.on{background:var(--accent);color:#06241c}.lbtn:active{transform:translateY(1px)}.loopcount{font-family:Share Tech Mono;font-size:11px;color:var(--ink-dim)}.powerhint{text-align:center;font-size:12px;color:var(--ink-dim);padding:10px 14px;border:1px dashed #3a414e;border-radius:12px;cursor:pointer}.powerhint b{color:var(--accent)}.help{max-width:560px;font-size:11.5px;color:var(--ink-dim);line-height:1.6;text-align:center;padding:2px 4px}.help b{color:var(--accent);font-family:Share Tech Mono}.help kbd{background:#2a2f3a;border:1px solid #3a414e;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:Share Tech Mono;font-size:11px;color:var(--ink)}.foot-credit{font-size:11px;color:#5a606d;letter-spacing:.4px}