:root{color-scheme:dark;--bg: #0a0a0a;--fg: #f2f2f2;--accent: #1d76db}*{box-sizing:border-box}button,.btn,.pads,.keyboard,.beat,.bass,.seq,.mixer,.looper,.session__peers,.session__colors,.panel__head{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}html,body,#root{margin:0;min-height:100%}body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,sans-serif}.app{width:100%;max-width:none;margin:0;padding:1.25rem clamp(.75rem,2.2vw,2rem);display:flex;flex-direction:column;gap:1.25rem}.app__head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}.app__head h1{margin:0;font-weight:600;letter-spacing:.04em}.app__tag{font-size:.8rem;opacity:.5}.stage{display:flex;flex-direction:column;gap:1.25rem}.viz{position:relative}.vscreen{margin:0;overflow:hidden;background:#060608}.vscreen .viz,.vscreen canvas.waveform{width:100vw;height:100vh;border:0;border-radius:0}.viz__frame{display:block;width:100%;height:clamp(360px,60vw,560px);border:0;border-radius:8px;background:#060608}.waveform{display:block;width:100%;height:clamp(220px,40vw,380px);background:radial-gradient(circle at 50% 45%,#0e0e14,#060608 70%);border:1px solid #222;border-radius:8px}.viz__controls{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.5rem}.viz__fs{margin-left:auto}.viz__mod{display:flex;align-items:flex-end;gap:.3rem}.viz__axis{width:auto;padding:.2rem .3rem;font-size:.7rem}.viz__hosthint{font-size:.7rem;opacity:.55}.viz__speed{display:flex;flex-direction:column;font-size:.7rem;opacity:.8;gap:.2rem}.viz__palette{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}.viz__panel{position:absolute;top:.5rem;right:.5rem;width:220px;max-height:calc(100% - 1rem);overflow-y:auto;display:flex;flex-direction:column;gap:.2rem;padding:.5rem;background:#0a0a0eb8;border:1px solid #2a2a2a;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.viz__prow{display:grid;grid-template-columns:64px 1fr 46px;align-items:center;gap:.3rem}.viz__plabel{font-size:.6rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viz__prow input[type=range]{width:100%}.viz__pnum{width:46px;background:#161616;color:var(--fg);border:1px solid #333;border-radius:4px;font-size:.6rem;padding:.15rem .2rem;font-variant-numeric:tabular-nums}.viz__hint{font-size:.65rem;opacity:.45}.viz__controls--off{margin-top:0}.shaderview__err{position:absolute;top:8px;left:8px;max-width:90%;font-size:.7rem;color:#e0726b;background:#00000080;padding:.3rem .5rem;border-radius:6px;font-family:monospace}.viz:fullscreen{display:flex;flex-direction:column;background:#060608}.viz:fullscreen .waveform{height:100vh;border:none;border-radius:0}.viz:fullscreen .viz__controls{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);margin:0;padding:.5rem .9rem;background:#0a0a0e99;border-radius:12px;z-index:10}.control{display:flex;flex-direction:column;gap:.4rem}.control input[type=range]{width:100%}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #333;background:#161616;color:var(--fg);padding:.75rem 1.1rem;border-radius:8px;font-size:1rem;cursor:pointer}.btn:hover{border-color:#555}.btn--start{align-self:flex-start}.btn--on{background:var(--accent);border-color:var(--accent)}.control select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#161616;color:var(--fg);border:1px solid #333;border-radius:8px;padding:.6rem .8rem;font-size:1rem}.keyboard{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;touch-action:none;-webkit-user-select:none;user-select:none}.key{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #333;background:#ededed;color:#111;height:7rem;border-radius:0 0 8px 8px;font-size:.9rem;font-weight:600;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.6rem}.key--on{background:var(--accent);color:#fff;border-color:var(--accent)}.surface{display:flex;flex-direction:column;gap:1.25rem;touch-action:none;-webkit-user-select:none;user-select:none}.xypad__surface{position:relative;width:100%;aspect-ratio:2 / 1;background:radial-gradient(circle at 50% 50%,#16243a,#0d0d0d 70%);border:1px solid #222;border-radius:10px;overflow:hidden;cursor:crosshair}.xypad__dot{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px 4px #1d76db99;pointer-events:none}.xypad__axis{position:absolute;font-size:.7rem;opacity:.5;pointer-events:none}.xypad__axis--x{bottom:.4rem;right:.6rem}.xypad__axis--y{top:.4rem;left:.6rem}.surface__knobs{display:flex;gap:1.25rem;align-items:flex-end;flex-wrap:wrap}.knob{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:64px}.knob__dial{width:64px;height:64px;touch-action:none;cursor:ns-resize}.knob__face{fill:#161616;stroke:#333;stroke-width:2}.knob__pointer{stroke:var(--accent);stroke-width:4;stroke-linecap:round}.knob__label{font-size:.7rem;opacity:.7;font-family:ui-monospace,SF Mono,Roboto Mono,Menlo,Consolas,monospace;text-align:center;line-height:1.15}.knob__value{font-size:.7rem;opacity:.4;font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Roboto Mono,Menlo,Consolas,monospace;text-align:center}.fader{display:flex;flex-direction:column;align-items:center;gap:.4rem}.fader__track{position:relative;width:28px;height:90px;background:#161616;border:1px solid #333;border-radius:6px;cursor:ns-resize;overflow:hidden}.fader__fill{position:absolute;left:0;bottom:0;width:100%;background:#1d76db59;pointer-events:none}.fader__handle{position:absolute;left:-2px;width:32px;height:8px;margin-bottom:-4px;background:var(--accent);border-radius:3px;pointer-events:none}.fader__label{font-size:.7rem;opacity:.7}.rack{display:flex;gap:1.1rem;align-items:flex-end;flex-wrap:wrap}.pads{display:flex;flex-direction:column;gap:.6rem}.pads__controls{display:flex;gap:.5rem}.pads__controls select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.35rem .5rem;font-size:.8rem}.pads__row,.surface__triggers{display:flex;gap:.6rem;flex-wrap:wrap}.trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #333;background:#161616;color:var(--fg);padding:.8rem 1.4rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;touch-action:none}.trigger--on{background:var(--accent);border-color:var(--accent);color:#fff}.canvaswrap{display:flex;flex-direction:column;gap:.6rem}.canvaswrap__bar{display:flex;gap:.5rem}.btn--small{padding:.4rem .8rem;font-size:.85rem}.canvas{width:100%}.canvas--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-flow:row dense;gap:14px;align-items:start}@media (min-width: 760px){.canvas--grid{grid-auto-rows:2px}}.canvas--grid .panel--wide,.canvas--grid .panel--zoomed{grid-column:1 / -1}.panel--zoomed .panel__body{min-height:62vh}.panel__head-right{display:flex;align-items:center;gap:.4rem}.panel__zoom,.panel__hide,.panel__lock{background:none;border:none;color:inherit;cursor:pointer;opacity:.55;font-size:.9rem;line-height:1;padding:0 .2rem}.panel__lock--on{opacity:1}.panel--locked .panel__head{position:relative;z-index:2}.panel__lockscrim{position:absolute;left:0;right:0;bottom:0;top:2.2rem;z-index:1;cursor:not-allowed;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#e0726b0d,#e0726b0d 8px,#e0726b1a 8px,#e0726b1a 16px);touch-action:none}.panel__lockby{opacity:.5;font-size:.85rem;font-weight:600;letter-spacing:.03em;pointer-events:none}.panel--hidden{opacity:.4;outline:1px dashed #555}.panel__zoom:hover{opacity:1}.canvas--editing{position:relative;border:1px solid var(--accent);border-radius:10px;background:linear-gradient(#141414 1px,transparent 1px) 0 0 / 100% 24px,linear-gradient(90deg,#141414 1px,transparent 1px) 0 0 / 24px 100%,#0c0c0c}.panel{position:relative;display:flex;flex-direction:column;background:#111;border:1px solid #242424;border-radius:10px;overflow:hidden}.panel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;border:2px solid var(--cc, transparent);box-shadow:inset 0 0 0 1px var(--cc, transparent),inset 0 0 22px -6px var(--cc, transparent);opacity:0;transition:opacity .7s cubic-bezier(.45,0,.55,1);z-index:4}.panel--present:after{opacity:1}.canvas--editing .panel{position:absolute}.panel--editing{border-color:#3a3a3a;box-shadow:0 6px 22px #00000080}.panel__head{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.5;padding:.45rem .7rem;border-bottom:1px solid #1c1c1c;display:flex;align-items:center;justify-content:space-between;gap:.5rem;transition:border-color .2s,color .2s}.panel__head{transition:color .7s cubic-bezier(.45,0,.55,1),border-bottom-color .7s cubic-bezier(.45,0,.55,1),opacity .7s cubic-bezier(.45,0,.55,1)}.panel--present .panel__head,.panel__head--active{border-bottom-color:var(--cc, var(--accent));color:var(--cc, var(--accent));opacity:.95}.panel__owner{font-size:.66rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--cc, var(--accent));padding:.05rem .4rem;border-radius:999px;border:1px solid var(--cc, var(--accent));opacity:0;transition:opacity .7s cubic-bezier(.45,0,.55,1)}.panel--present .panel__owner{opacity:1}.panel--editing .panel__head{cursor:grab;opacity:.85}.panel__body{flex:1;padding:.7rem;overflow:auto}.panel__scrim{position:absolute;top:0;right:0;bottom:0;left:0;cursor:grab;background:#1d76db0a;touch-action:none}.panel--editing .panel__head{position:relative;z-index:2}.panel__resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--accent) 50%);touch-action:none}.sensors{display:flex;flex-direction:column;gap:.7rem}.sensors__row{display:flex;align-items:center;gap:.7rem}.sensors__gear{margin-left:auto}.sensors__routes{display:flex;flex-direction:column;gap:.4rem;padding:.5rem;background:#121212;border:1px solid #222;border-radius:8px}.sensors__route,.sensors__smoothrow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.sensors__smoothrow{padding-bottom:.4rem;margin-bottom:.2rem;border-bottom:1px solid #222}.sensors__sel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.25rem .35rem;font-size:.7rem}.sensors__arrow{opacity:.5;font-size:.7rem}.sensors__mul{flex:1;min-width:70px}.sensors__mulval{font-size:.65rem;opacity:.6;font-variant-numeric:tabular-nums;min-width:42px}.sensors__del{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:#e0726b;cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem}.sensors__readout{font-size:.72rem;opacity:.6;font-variant-numeric:tabular-nums}.sensors__readout--off{opacity:.35;font-style:italic}.sensors__meter{position:relative;flex:1;height:8px;background:#161616;border:1px solid #2a2a2a;border-radius:4px;overflow:hidden}.sensors__meter-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);transition:width .05s linear}.sensors__error{font-size:.7rem;color:#e0726b}.btn:disabled{opacity:.4;cursor:not-allowed}.controllers{display:flex;flex-direction:column;gap:.7rem}.controllers__row{display:flex;align-items:center;gap:.7rem}.controllers__readout{font-size:.72rem;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controllers__readout--off{opacity:.35;font-style:italic}.controllers__error{font-size:.7rem;color:#e0726b}.agent{display:flex;flex-direction:column;gap:.6rem;height:100%}.agent__row{display:flex;align-items:center;gap:.7rem}.agent__status{font-size:.72rem;opacity:.45}.agent__status--on{opacity:.9;color:var(--accent)}.agent__intent{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.45rem .6rem;font-size:.85rem}.agent__log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1;min-height:0}.agent__empty{font-size:.72rem;opacity:.35;font-style:italic}.agent__cmd{font-size:.72rem;font-variant-numeric:tabular-nums;display:flex;gap:.5rem;opacity:.8}.agent__src{color:var(--accent);text-transform:uppercase;font-size:.6rem;align-self:center}.seq{display:flex;flex-direction:column;gap:.6rem;-webkit-user-select:none;user-select:none}.seq__bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.seq__play{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #333;background:#161616;color:var(--fg);padding:.4rem 1.1rem;border-radius:6px;font-weight:600;cursor:pointer}.seq__play--on{background:var(--accent);border-color:var(--accent);color:#fff}.seq__clear{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #333;background:#161616;color:var(--fg);padding:.4rem .9rem;border-radius:6px;cursor:pointer}.seq__tempo{display:flex;flex-direction:column;font-size:.7rem;opacity:.7;gap:.2rem}.seq__grid{display:flex;flex-direction:column;gap:3px;max-height:60vh;overflow-y:auto}.seq__shift{display:flex;align-items:center;gap:.4rem}.seq__range{font-size:.65rem;opacity:.6;font-variant-numeric:tabular-nums;min-width:84px;text-align:center}.seq__row{display:flex;align-items:center;gap:3px}.seq__name{width:34px;font-size:.6rem;opacity:.5;text-align:right;font-variant-numeric:tabular-nums;flex:none}.seq__cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:22px;border:1px solid #222;border-radius:4px;background:#161616;cursor:pointer;padding:0}.seq__cell--beat{background:#1c1c1c}.seq__cell--on{background:var(--accent);border-color:var(--accent)}.seq__cell--cursor{box-shadow:inset 0 0 0 2px #ffffff8c}.share{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}.share__msg{font-size:.72rem;color:var(--accent)}.looper{display:flex;flex-direction:column;gap:.6rem}.looper__bar{display:flex;gap:.5rem;flex-wrap:wrap}.looper__rec--on{background:#c0392b;border-color:#c0392b;color:#fff}.looper__tracks{display:flex;flex-direction:column;gap:.35rem}.looper__track{display:flex;align-items:center;gap:.5rem}.looper__tracknum{font-size:.72rem;letter-spacing:.04em;min-width:3.6rem}.looper__tracklen{font-size:.7rem;opacity:.6;font-variant-numeric:tabular-nums;margin-left:auto}.looper__hint{font-size:.72rem;opacity:.5}.looper__readout{font-size:.72rem;opacity:.6;font-variant-numeric:tabular-nums}.logs{font-size:.7rem;overflow:auto;max-height:100%}.logs__empty{opacity:.4;font-style:italic}.logs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}.logs__item{color:#e0726b;display:flex;gap:.4rem;font-variant-numeric:tabular-nums}.logs__time{opacity:.5;flex:none}.updatebar{position:sticky;top:0;z-index:50;background:var(--accent);color:#fff;text-align:center;font-size:.85rem;font-weight:600;padding:.6rem 1rem;border-radius:8px}.vibe{display:flex;gap:.6rem;flex-wrap:wrap}.vibe__btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:120px;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;background:#161616;color:var(--fg);border:1px solid #333;border-left:4px solid var(--accent);border-radius:8px;padding:.7rem .9rem;cursor:pointer}.vibe__btn:hover{border-color:var(--accent)}.vibe__btn--on{border-color:var(--accent);border-left-width:4px;background:#1d76db2e;box-shadow:0 0 0 1px var(--accent) inset}.vibe__name{font-weight:600;letter-spacing:.02em}.vibe__blurb{font-size:.68rem;opacity:.5}.session{display:flex;flex-direction:column;gap:.6rem}.session__row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.session__name,.session__room{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.4rem .6rem;font-size:.85rem}.session__you{font-size:.7rem;opacity:.8}.session__roles{display:flex;gap:.4rem;margin-left:auto}.session__peers{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.session__chip{font-size:.72rem;border:1px solid #444;border-left-width:4px;border-radius:4px;padding:.15rem .5rem}.session__chip--me{display:inline-flex;align-items:center;gap:.35rem;background:#161616;color:var(--fg);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.session__chip--me *{pointer-events:none;-webkit-user-select:none;user-select:none}.session__swatch{width:10px;height:10px;border-radius:50%;display:inline-block}.session__colors{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}.session__color{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.session__color--on{border-color:#fff}.session__color--locked{opacity:.28;cursor:not-allowed;position:relative}.session__color--locked:after{content:"×";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff}.session__chip em{opacity:.5;font-style:normal}.session__hint{font-size:.7rem;opacity:.4;font-style:italic}.session__live--on{background:#c0392b;border-color:#c0392b;color:#fff}.knobcell,.xywrap{position:relative}.knobcell{display:flex;flex-direction:column;align-items:center;gap:.25rem}.knobcell__sync{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#15151c;color:var(--fg);border:1px solid #2a2a33;border-radius:5px;padding:.1rem .25rem;font-size:.62rem}.knobcell__sync--on{border-color:var(--accent);color:var(--accent)}.callout{position:absolute;top:-10px;left:50%;z-index:5;display:flex;flex-direction:column;align-items:center;pointer-events:none;transform:translate(-50%,-100%)}.callout__name{font-size:.62rem;font-weight:600;letter-spacing:.03em;color:var(--cc, var(--accent));background:#0c0c0c;border:1px solid var(--cc, var(--accent));border-radius:4px;padding:.08rem .4rem;white-space:nowrap}.callout__line{width:1px;height:12px;background:var(--cc, var(--accent))}.callout__dot{width:7px;height:7px;border-radius:50%;background:var(--cc, var(--accent));margin-top:-1px}.knob--locked,.fader--locked,.xypad--locked{opacity:.55}.knob--locked .knob__dial,.fader--locked .fader__track,.xypad--locked .xypad__surface{cursor:not-allowed}.knob--locked .knob__pointer,.knob--held .knob__pointer,.knob--held .knob__face{stroke:var(--cc, var(--accent))}.fader--held .fader__fill{background:color-mix(in srgb,var(--cc, var(--accent)) 45%,transparent)}.fader--held .fader__handle{background:var(--cc, var(--accent))}.mixer__cell{position:relative;display:flex}.beat{display:flex;flex-direction:column;gap:.8rem}.beat__bar{display:flex;gap:.5rem;flex-wrap:wrap}.beat__controls{display:flex;align-items:flex-end;gap:1.2rem;flex-wrap:wrap}.beat__tempo{display:flex;flex-direction:column;font-size:.7rem;opacity:.7;gap:.2rem}.beat__grid,.bass__grid{display:flex;flex-direction:column;gap:3px}.beat__row,.bass__row{display:flex;align-items:center;gap:3px}.beat__name,.bass__name{width:40px;font-size:.6rem;opacity:.55;text-align:right;flex:none}.beat__cell,.bass__cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:20px;border:1px solid #222;border-radius:4px;background:#161616;cursor:pointer;padding:0}.beat__cell--beat,.bass__cell--beat{background:#1c1c1c}.beat__cell--on{background:#e0726b;border-color:#e0726b}.bass__cell--on{background:#2ecc71;border-color:#2ecc71}.beat__bar,.bass__bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}.bass__tempo,.beat__tempo{display:flex;flex-direction:column;font-size:.7rem;opacity:.7;gap:.2rem}.beat__cell--cursor{box-shadow:0 0 6px 1px #f4d35e;border-color:#f4d35e}.beat__cell--on.beat__cell--cursor{background:#f4d35e}.bass__cell--cursor{box-shadow:0 0 6px 1px #f4d35e;border-color:#f4d35e}.bass__cell--on.bass__cell--cursor{background:#aef5c8}.beat__rowset{display:flex;gap:.25rem;flex:none;padding-right:.4rem;border-right:1px solid #242424;margin-right:.2rem}.beat__rowset .knob{width:34px;gap:.05rem}.beat__rowset .knob__dial{width:34px;height:34px}.beat__rowset .knob__label,.beat__rowset .knob__value{font-size:.5rem}.beat__bars{display:flex;gap:2px;margin-left:auto}.beat__voices{display:flex;flex-wrap:wrap;gap:4px}.beat__len{display:flex;align-items:center;gap:.3rem;font-size:.62rem;opacity:.7}.beat__len input{width:3rem;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.15rem .25rem;font-size:.7rem}.beat__strip{display:flex;align-items:center;gap:.7rem;padding:.4rem .6rem;background:#121212;border:1px solid #222;border-radius:8px}.beat__strip .beat__name{width:auto;min-width:3rem;text-align:left;font-size:.72rem;opacity:.75}.beat__steprow{display:flex;gap:3px}.beat__steprow .beat__cell{height:34px}.beat__acc{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:14px;border:1px solid #222;border-radius:4px;background:#161616;cursor:pointer;padding:0}.beat__acc--on{background:#f4d35e;border-color:#f4d35e}.mixer{display:flex;flex-direction:column;gap:.9rem}.mixer__faders{display:flex;gap:1.2rem;align-items:flex-end;flex-wrap:wrap}.mixer__cell--master{margin-left:.4rem;padding-left:.9rem;border-left:1px solid #242424}.mixer__tempo{display:flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.04em}.mixer__tempo input[type=range]{flex:1}.mixer__tempo-read{min-width:4.5rem;font-weight:700;color:var(--accent)}.mysample{display:flex;flex-direction:column;gap:.7rem}.mysample__bar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.mysample__upload{cursor:pointer}.mysample__status{font-size:.7rem;opacity:.55}.mysample__knobs{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}.sampler{display:flex;flex-direction:column;gap:.8rem}.sampler__bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.sampler__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.4rem .6rem;font-size:.82rem}.sampler__status{font-size:.7rem;opacity:.5}.sampler__knobs{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}@media (max-width: 640px){.app{gap:1rem}.canvas--grid{gap:10px}.key{height:5rem}.seq__name{width:26px}}.app__head{align-items:center;gap:.9rem;background:#fff500;color:#0a0a0a;border-bottom:none;border-radius:6px;padding:.7rem 1rem}.app__head h1{display:flex;align-items:center;gap:.7rem;font-size:1.55rem;color:#0a0a0a}.app__head h1:before{content:none}.brand__silno{height:1.4rem;width:auto;display:block}.brand__x{font-weight:400;opacity:.75}.brand__prasdov{font-weight:700;letter-spacing:.08em}.app__head .app__tag{color:#0a0a0a;opacity:.65}.panel__head{display:flex;align-items:center;gap:.45rem}.panel__head:before{content:"";width:6px;height:6px;background:var(--accent);opacity:.85;flex:none}.btn--start{align-self:center;margin:4rem auto;padding:1rem 2.4rem;font-size:1.1rem;letter-spacing:.04em;border-color:var(--accent)}.btn--start:hover{background:var(--accent);color:#fff}.bind{display:flex;flex-direction:column;gap:.4rem}.bind__hint{margin:0;font-size:.72rem;opacity:.55}.bind__route{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}.bind__sel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.25rem .35rem;font-size:.7rem}.bind__sel--curve{width:3.4rem}.bind__arrow{opacity:.5;font-size:.7rem}.bind__inv{display:flex;align-items:center;gap:.2rem;font-size:.65rem;opacity:.7}.bind__rng{flex:1;min-width:56px}.bind__del{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:#e0726b;cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem}.patch{display:flex;flex-direction:column;gap:.5rem;width:100%;box-sizing:border-box}.patch__scope{height:56px;border:1px solid #2a2a2a;border-radius:8px;background:radial-gradient(circle at 50% 0%,#14201a,#0e0e0e 70%);overflow:hidden}.patch__scope canvas{display:block;width:100%;height:100%}.patch__group{border-top:2px solid #2a2a2a}.patch__head{color:#9ad7b0}.patch__group{display:flex;flex-direction:column;gap:.25rem;padding:.4rem .5rem;background:#121212;border:1px solid #222;border-radius:8px}.patch__head{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.55}.patch__row,.patch__route{display:flex;align-items:center;gap:.35rem}.patch__label{font-size:.66rem;opacity:.7;min-width:4.6rem}.patch__row input[type=range],.patch__rng{flex:1;min-width:56px}.patch__num{width:3.6rem;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.15rem .25rem;font-size:.66rem;font-variant-numeric:tabular-nums}.patch__sel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.2rem .3rem;font-size:.68rem}.patch__arrow{opacity:.5;font-size:.7rem}.patch__del{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:#e0726b;cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem}.synth{display:flex;flex-direction:column;gap:.5rem}.synth__tabs{display:flex;flex-wrap:wrap;gap:4px}.synth__group{display:flex;flex-direction:column;gap:.45rem;padding:.45rem .55rem;background:#121212;border:1px solid #222;border-radius:8px}.synth__row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.synth__knobs{display:flex;flex-wrap:wrap;gap:.55rem}.synth__knobs .knob{width:58px;gap:.05rem}.synth__knobs .knob__dial{width:46px;height:46px}.synth__check{display:flex;align-items:center;gap:.2rem;font-size:.62rem;opacity:.75}.knob__input{width:3.2rem;background:#161616;color:var(--fg);border:1px solid #333;border-radius:6px;padding:.1rem .2rem;font-size:.62rem;text-align:center;font-variant-numeric:tabular-nums}.knob__value--editable{cursor:pointer;border-bottom:1px dotted #555}