:root{--panel: #e6e2da;--panel-dark: #cfcabd;--ink: #101010;--orange: #ff5a1f;--yellow: #ffd400;--blue: #1e5cff;--green: #17b26a;--pink: #ff3fa4;--red: #ff2d2d;--led: #2aff95;--screen: #06120c;--drums: var(--orange);--bass: var(--blue);--keys: var(--green);--lead: var(--pink);--display: "Archivo Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;--mono: "DM Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--edge: 4px;--lift: 5px;--round: 16px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}#app{min-height:100vh;padding:16px;display:flex;justify-content:center;align-items:flex-start}.screen{position:relative;width:100%;max-width:960px;background:var(--panel);border:var(--edge) solid var(--ink);border-radius:22px;padding:16px;box-shadow:12px 12px 0 var(--orange);display:flex;flex-direction:column;gap:10px;font-size:14px}@media (min-width: 901px){.screen{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;height:calc(100vh - 32px);max-height:820px;overflow:hidden}}.bar{background:var(--ink);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}.bar-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.lcd{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--screen);color:var(--led);border-radius:8px;padding:8px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.logo{font-family:var(--display);font-size:clamp(34px,8.5vw,76px);line-height:.92;letter-spacing:-.035em;color:var(--panel);text-transform:uppercase;margin:0}.logo i{font-style:normal;color:var(--yellow)}.screen[data-live] .logo{font-size:clamp(26px,5vw,38px)}.swatches{display:flex;gap:6px}.swatches span{width:20px;height:20px;border-radius:5px;background:var(--c)}.pill{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px 6px;border-radius:7px;background:var(--screen);color:var(--led);border:2px solid #23402f;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.pill:before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.pill.live{color:var(--led)}.pill.error{color:#ff6b6b;border-color:#5a2020;white-space:normal}.zone{--zone-ink: var(--ink);background:var(--panel-dark);color:var(--zone-ink);border:var(--edge) solid var(--ink);border-radius:var(--round);padding:13px;display:flex;flex-direction:column;gap:11px}.zone--orange{background:var(--orange)}.zone--yellow{background:var(--yellow)}.zone--blue{background:var(--blue);--zone-ink: var(--panel)}.zone--green{background:var(--green)}.zone--pink{background:var(--pink)}.zone--ink{background:var(--ink);--zone-ink: var(--panel)}.zone h4,.zone-label{margin:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--zone-ink);opacity:.85}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.key,.choice button,.btn{font-family:var(--display);font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);background:var(--panel);border:var(--edge) solid var(--ink);border-radius:13px;padding:14px 18px;cursor:pointer;box-shadow:var(--lift) var(--lift) 0 var(--ink);transition:transform .26s cubic-bezier(.2,1.6,.4,1),box-shadow .16s ease-out,background-color .2s ease,color .2s ease;text-align:center}.key:active,.choice button:active,.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);transition:transform 60ms ease-out,box-shadow 60ms ease-out}.key:focus-visible,.choice button:focus-visible,.btn:focus-visible,.knob:focus-visible{outline:4px solid var(--ink);outline-offset:3px}.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}.choice button.on{background:var(--yellow)}#genre-choice button,#source-choice button{min-height:76px;font-size:19px}#source-choice{align-content:center;grid-auto-rows:minmax(76px,104px)}#genre-choice button[data-genre=lofi]{--c: var(--orange)}#genre-choice button[data-genre=funk]{--c: var(--yellow)}#genre-choice button[data-genre=rock]{--c: var(--blue)}#genre-choice button[data-genre=jazz]{--c: var(--pink)}#genre-choice button.on{background:var(--c);color:var(--ink)}#genre-choice button:not(.on){color:var(--c);background:var(--panel)}#genre-choice button[data-genre=rock]:not(.on){color:var(--blue)}.btn.big,#start-jam{background:var(--green);font-size:clamp(24px,5vw,40px);padding:22px 34px;letter-spacing:.04em;flex:1}#stop-jam,.power-off{background:var(--red);color:var(--panel);font-size:20px;padding:16px 34px}#power-key,#power-off-key{font-size:clamp(16px,2.4vw,22px);padding:14px 28px;flex:0 0 auto}#power-off-key{background:#ff2d2d;color:var(--ink)}.dimmed{opacity:.4;filter:grayscale(.4)}.inert{pointer-events:none}.switch{display:inline-grid;grid-auto-flow:column;background:var(--ink);border:var(--edge) solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--lift) var(--lift) 0 #10101059}.switch button{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:none;background:transparent;color:#8b8b84;padding:11px 16px;cursor:pointer;box-shadow:none;border-radius:0}.switch button:active{transform:none}.switch button.on{background:var(--panel);color:var(--ink)}.switch button:disabled{color:#4a4a46;cursor:not-allowed}.engine-keys{display:flex;flex-direction:column;gap:6px;width:100%}.engine-key{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:var(--panel);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:6px 10px;cursor:pointer;text-align:left;box-shadow:2px 2px 0 var(--ink)}.engine-key:active{transform:none}.engine-key-text{display:flex;flex-direction:column;gap:1px;min-width:0}.engine-key-name{font-family:var(--display);font-size:13px;line-height:1.1;text-transform:uppercase;color:var(--ink)}.engine-key-desc{font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:#5a564c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.engine-key.on{background:var(--ink)}.engine-key.on .engine-key-name{color:var(--panel)}.engine-key.on .engine-key-desc{color:#a8a49a}.engine-led{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#8b8b84}.engine-led.online{background:var(--led);box-shadow:0 0 4px var(--led)}.engine-led.offline{background:#6b6a63}.engine-led.connecting{background:var(--led);animation:engine-led-blink .9s steps(2,start) infinite}@keyframes engine-led-blink{50%{opacity:.15}}.switch-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}#auth-row .btn{font-size:13px;padding:11px 16px;font-family:var(--mono);font-weight:500;letter-spacing:.1em}.foot{display:flex;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}.hint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:var(--zone-ink, var(--ink));opacity:.75;margin:0;flex:1 1 200px}.err{background:var(--red);color:var(--panel);border:var(--edge) solid var(--ink);border-radius:12px;padding:12px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.readout{background:var(--screen);border:var(--edge) solid var(--ink);border-radius:var(--round);padding:13px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:end;box-shadow:inset 0 4px 18px #000000d9;position:relative;overflow:hidden}.readout:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 20%,var(--flash, var(--led)) 50%,transparent 80%)}.readout small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#3f7a5c}.readout strong{display:block;font-family:var(--mono);font-weight:500;color:var(--led);font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 14px rgba(42,255,149,.45)}.ro-tempo strong b{display:inline-block;font-weight:inherit}.ro-tempo strong{font-size:clamp(50px,11vw,88px);letter-spacing:-.02em}.ro-side{display:grid;grid-auto-flow:column;justify-content:end;gap:36px;padding-bottom:8px}.ro-side strong{font-size:clamp(26px,5vw,40px)}.beats{grid-column:1 / -1;display:flex;align-items:center;gap:10px;border-top:2px solid #14301f;padding-top:12px}.beats b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#3f7a5c;margin-right:6px}.beats i{width:18px;height:18px;border-radius:50%;background:#10241a;border:2px solid #1d3d2b}.inst{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.inst button{--c: var(--panel);position:relative;min-height:128px;padding:14px;background:var(--panel);border:var(--edge) solid var(--c);border-radius:var(--round);box-shadow:var(--lift) var(--lift) 0 var(--ink);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-align:left;color:var(--ink);overflow:hidden;transition:transform .26s cubic-bezier(.2,1.6,.4,1),box-shadow .16s ease-out,border-color .2s ease,opacity .2s ease,filter .2s ease}.inst button:before{content:"";position:absolute;top:-60%;right:-60%;width:220%;height:220%;border-radius:50%;background:var(--c);transform:scale(0);transform-origin:100% 0;transition:transform .22s cubic-bezier(.3,.9,.3,1)}.inst button.on:before{transform:scale(1)}.inst button>*{position:relative;z-index:1}.inst button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);transition:transform 60ms ease-out,box-shadow 60ms ease-out}.inst button:focus-visible{outline:4px solid var(--ink);outline-offset:3px}.inst button.drums{--c: var(--drums)}.inst button.bass{--c: var(--bass)}.inst button.keys{--c: var(--keys)}.inst button.lead{--c: var(--lead)}.inst button.on{border-color:var(--ink)}.screen[data-live]:not(.locked) .inst button,.screen.stopping .inst button{opacity:.5;filter:grayscale(.35)}.inst .name{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;color:var(--c)}.inst button.on .name{color:var(--ink)}.inst .st{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.inst .st-text{opacity:.7}.inst .meter{display:block;height:8px;margin-top:8px;background:#10101029;border-radius:2px;overflow:hidden}.inst button.on .meter{background:#10101047}.inst .meter i{display:block;height:100%;background:var(--ink)}.inst .dot{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;border:3px solid var(--ink);background:transparent}.inst button.on .dot{background:var(--panel)}.row2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:0}.row2 .zone{min-height:0;height:100%;overflow:hidden}.bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch}.knob-zone{align-items:center;text-align:center}.knob{--k: 0;width:112px;height:112px;border-radius:50%;border:var(--edge) solid var(--ink);background:conic-gradient(from 225deg,var(--yellow) 0turn calc(var(--k) * .75turn),rgba(16,16,16,.25) calc(var(--k) * .75turn) .75turn,transparent .75turn 1turn) border-box,var(--panel);box-shadow:var(--lift) var(--lift) 0 var(--ink),0 0 calc(var(--k) * 26px) rgba(255,212,0,calc(var(--k) * .85));position:relative;cursor:ns-resize;touch-action:none;flex:none;transition:box-shadow .15s ease-out}.knob:before{content:"";position:absolute;top:16px;right:16px;bottom:16px;left:16px;border-radius:50%;background:var(--ink)}.knob .ptr{position:absolute;left:50%;top:50%;width:7px;height:40%;border-radius:4px;background:var(--yellow);transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(calc(-135deg + var(--k) * 270deg));transition:transform .15s cubic-bezier(.3,.8,.3,1)}.knob-val{font-family:var(--display);font-size:26px;color:var(--ink);letter-spacing:.02em}.chips{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;flex:1;min-height:0}.chip{font-family:var(--display);font-size:15px;text-transform:uppercase;color:var(--ink);background:var(--panel);border:3px solid var(--ink);border-radius:10px;padding:12px 8px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform 80ms steps(2),box-shadow 80ms steps(2)}.chip:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}.chip:focus-visible{outline:4px solid var(--panel);outline-offset:3px}.chip[data-genre=lofi]{--c: var(--orange)}.chip[data-genre=funk]{--c: var(--yellow)}.chip[data-genre=rock]{--c: var(--blue)}.chip[data-genre=jazz]{--c: var(--pink)}.chip.on{background:var(--c)}.engine{justify-content:center;align-items:stretch;gap:10px;text-align:center}.engine .switch{width:100%;justify-content:center}.engine .switch button{flex:1;text-align:center}.engine #github-login{font-size:12px;padding:10px 12px;font-family:var(--mono);font-weight:500;letter-spacing:.08em}.engine #signed-in-as{color:var(--panel)}.manual{justify-content:space-between;gap:10px}.manual .field{justify-content:space-between}.field{display:flex;align-items:center;gap:8px}.field label,.field .fl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}.manual input[type=number],.manual select{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--panel);border:3px solid var(--ink);border-radius:9px;padding:6px 8px;width:92px;min-width:0}.manual #tempoMode button{padding:8px;font-size:10px}#tempoMode-note{text-transform:uppercase;font-size:10px;flex:0 0 auto}.you{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}.you .label{font-family:var(--display);font-size:22px;text-transform:uppercase}.you .level{position:relative;height:26px;background:var(--screen);border:3px solid var(--ink);border-radius:6px;overflow:hidden;container-type:inline-size}.you .level i{display:block;height:100%;background-image:linear-gradient(90deg,var(--led) 0%,var(--led) 55%,var(--yellow) 55%,var(--yellow) 80%,var(--red) 80%);background-repeat:no-repeat;background-size:100% 100%;background-size:100cqw 100%;transition:width 60ms linear}.you .level:before{content:"";position:absolute;top:0;bottom:0;width:4px;left:calc(var(--peak, 0) * 1% - 4px);background:var(--panel);opacity:.9}.you .level:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 11px,var(--screen) 11px 15px)}.you .pill{background:var(--ink);border-color:var(--ink);color:var(--panel)}.you .pill:before{display:none}.screen[data-live] .foot{flex-direction:row;align-items:center;justify-content:flex-end;gap:12px}.screen[data-live] .foot .hint{flex:0 0 auto;text-align:right}#latency{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;flex:0 1 auto}.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}@media (max-width: 900px){.row2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(160px,auto)}.row2 .zone{height:auto}.bottom{grid-template-columns:1fr}.knob-zone{flex-direction:row;justify-content:space-between;text-align:left}}@media (max-width: 640px){.row2{grid-template-columns:1fr}}@media (max-width: 620px){#app{padding:16px}.screen{padding:14px;gap:12px;box-shadow:8px 8px 0 var(--orange)}.grid2{grid-template-columns:1fr}.inst{grid-template-columns:1fr 1fr}.inst button{min-height:128px}.readout{grid-template-columns:1fr;gap:14px}.ro-side{gap:12px}.manual{grid-template-columns:1fr;align-items:stretch}.field{justify-content:space-between}.manual input[type=number],.manual select{width:130px}.you{grid-template-columns:auto 1fr}.you .pill{grid-column:1 / -1}.foot{flex-direction:column;align-items:stretch}.foot .hint{flex:0 0 auto}#stop-jam,#start-jam{width:100%;flex:0 0 auto}.chips{grid-template-columns:1fr 1fr}.ro-side{justify-content:start;padding-bottom:0}}@media (prefers-reduced-motion: no-preference){.beats.run i{animation:beatled calc(var(--beat, .5s) * 4) linear infinite;animation-delay:calc(var(--beat, .5s) * var(--n, 0))}.inst.run button.on{animation:breath calc(var(--beat, .5s) * 4) ease-out infinite}.pill.live:before{animation:blink .6s steps(1,end) infinite}.inst button.pending .dot{animation:blink var(--beat, .5s) steps(1,end) infinite}.ro-tempo strong.roll b{animation:rollup .32s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:var(--d, 0ms)}.screen.flash:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:22px;pointer-events:none;background:var(--flash, var(--yellow));animation:flash .15s ease-out forwards}.readout.sweep:after{animation:sweep .3s ease-in-out}.inst.retint button{animation:retint .2s ease-out}.screen.intro>*{animation:dropin .3s cubic-bezier(.2,.9,.3,1) backwards}.screen.intro>:nth-child(1){animation-delay:0ms}.screen.intro>:nth-child(2){animation-delay:30ms}.screen.intro>:nth-child(3){animation-delay:60ms}.screen.intro>:nth-child(4){animation-delay:90ms}.screen.intro>:nth-child(5){animation-delay:.12s}.screen.intro>:nth-child(6){animation-delay:.15s}.screen.intro>:nth-child(n+7){animation-delay:.18s}.screen.stopping .ro-tempo strong b{animation:fall .2s ease-in forwards;animation-delay:var(--d, 0ms)}}@keyframes breath{0%{scale:1.02}9%,to{scale:1}}@keyframes rollup{0%{transform:translateY(.55em);opacity:0}to{transform:none;opacity:1}}@keyframes fall{to{transform:translateY(.8em);opacity:0}}@keyframes flash{0%{opacity:.5}to{opacity:0}}@keyframes sweep{0%{opacity:.55;transform:translate(-100%)}to{opacity:.55;transform:translate(100%)}}@keyframes retint{50%{filter:saturate(1.6) brightness(1.06)}}@keyframes dropin{0%{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}@keyframes beatled{0%,20%{background:var(--led);border-color:var(--led);box-shadow:0 0 14px var(--led)}25%,to{background:#10241a;border-color:#1d3d2b;box-shadow:none}}@keyframes blink{50%{opacity:.15}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}