@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap";:root{font-family:Space Grotesk,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:dark;background:radial-gradient(circle at 20% 20%,#0f1627,#04060e 55%);color:#e8ecf3}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}main.control-layout{display:grid;grid-template-columns:2fr 1fr;gap:1.2rem;padding:1.5rem;min-height:100vh}@media(max-width:900px){main.control-layout{grid-template-columns:1fr}}.panel-wide{grid-column:1 / -1}.panel{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 60px #00000059}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}.panel-subtitle{margin:.1rem 0 0;opacity:.7}.panel h1{margin:0 0 .75rem;letter-spacing:-.02em;font-size:1.6rem}.panel h2{margin:1rem 0 .5rem;font-size:1rem;opacity:.9}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem}.control-block{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:.9rem}.control-block label{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-bottom:.3rem}.control-block input[type=number],.control-block input[type=text]{width:100%;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;padding:.7rem .8rem;font-size:1rem}.control-block input[type=color]{width:100%;height:48px;border:none;border-radius:10px;padding:0;background:transparent}.color-picker{display:grid;grid-template-columns:1fr 36px;gap:.65rem;align-items:stretch;margin-top:.35rem}.color-area{position:relative;border:1px solid rgba(255,255,255,.2);border-radius:10px;overflow:hidden;min-height:200px;background:linear-gradient(0deg,#000,#0000),linear-gradient(90deg,#fff,#00d4ff);cursor:crosshair;touch-action:none;box-shadow:inset 0 1px 2px #0006}.color-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #000000a6;transform:translate(-50%,-50%);pointer-events:none}.hue-slider{position:relative;width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(to bottom,red,#ff0,#0f0,#0ff,#00f,#f0f,red);overflow:hidden;touch-action:none;cursor:pointer;box-shadow:inset 0 1px 2px #0006}.hue-thumb{position:absolute;left:50%;transform:translate(-50%,-50%);width:26px;height:6px;border-radius:4px;border:1px solid rgba(0,0,0,.55);background:#ffffffe6;box-shadow:0 0 0 1px #ffffff1a;pointer-events:none}.strobe-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.client-count{font-size:2.6rem;font-weight:700;letter-spacing:-.04em}.midi-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.midi-row button{padding:.55rem .9rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(120deg,#0ac4ff33,#ffffff0a);color:#fff;cursor:pointer}.metronome-row{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}.metronome-row button{padding:.45rem .85rem;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(120deg,#ffffff14,#0ac4ff24);color:#fff;cursor:pointer}.metronome-flash{background:#fff;color:#000;transition:background .08s ease,color .08s ease}.tempo-control{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;margin:.4rem 0 .6rem;font-weight:600}.tempo-control input[type=range]{width:100%}.midi-visual{margin-top:.65rem;background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.75rem .85rem}.midi-visual__header{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.midi-visual__title{font-weight:700;letter-spacing:-.01em}.midi-visual__meta{font-size:.9rem;opacity:.7}.midi-visual__playhead-label{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;background:#0ac4ff29;border:1px solid rgba(10,196,255,.3);padding:.25rem .5rem;border-radius:8px;font-size:.9rem}.midi-visual__body{position:relative;--label-width: 72px;margin-top:.6rem;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.5rem .65rem .8rem;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.02),transparent 40%),#ffffff05;overflow:hidden}.midi-visual__rows{display:flex;flex-direction:column;gap:.4rem;position:relative;z-index:1}.midi-visual__row{display:grid;grid-template-columns:var(--label-width, 72px) 1fr;align-items:center;gap:.5rem}.midi-visual__note{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.9rem;opacity:.75}.midi-visual__track{position:relative;height:18px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;overflow:hidden}.midi-visual__block{position:absolute;top:2px;height:calc(100% - 4px);border-radius:0;background:#000;border:1px solid #ffffff;box-shadow:0 3px 10px #00000059;opacity:1}.midi-visual__block.is-active{background:#fff;box-shadow:0 0 0 2px #0ac4ff,0 6px 20px #00000073}.midi-visual__playhead{position:absolute;inset:0 auto 0 0;width:2px;background:#0ac4ff;box-shadow:0 0 0 6px #0ac4ff29;opacity:0;pointer-events:none;z-index:2;transition:opacity .15s ease}.qr-box{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center}.qr{background:#fff;padding:.75rem;border-radius:12px}.link-pill{display:inline-flex;align-items:center;gap:.5rem;background:#ffffff0f;border:1px dashed rgba(255,255,255,.18);padding:.65rem .9rem;border-radius:999px;font-size:.95rem;word-break:break-all}.copy-btn{cursor:pointer;padding:.5rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#ffffff14;color:#fff}.status{display:flex;align-items:center;gap:.5rem;font-size:.95rem;opacity:.85}.status-dot{width:10px;height:10px;border-radius:50%;background:#fba300;box-shadow:0 0 0 6px #fba30026}.pad{position:relative;border-radius:14px;background:linear-gradient(145deg,#ffffff0d,#ffffff05);border:1px solid rgba(255,255,255,.08);height:280px;margin-top:.5rem;overflow:hidden;touch-action:none}.pad:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x, 50%) var(--y, 50%),rgba(10,196,255,.25),transparent 35%);pointer-events:none}.pad-indicator{position:absolute;width:16px;height:16px;border-radius:50%;background:#0ac4ff;border:2px solid #fff;box-shadow:0 0 0 8px #0ac4ff33;transform:translate(-50%,-50%);pointer-events:none}.pad-labels{position:absolute;inset:.65rem;display:flex;flex-direction:column;justify-content:space-between;font-size:.9rem;opacity:.7;pointer-events:none}.pad-labels .row{display:flex;justify-content:space-between}.client-screen{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#000;position:relative}.note-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);grid-template-rows:repeat(var(--rows, 1),1fr);gap:4px;background:#000;z-index:1;pointer-events:none}.note-grid.is-empty{display:none}.note-cell{background:#0b0b0b;border:1px solid #111;display:flex;align-items:center;justify-content:center;color:#5f6470;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:.02em;font-size:clamp(.9rem,2vw,1.4rem);transition:background 80ms ease,color 80ms ease,box-shadow .12s ease,transform 80ms ease}.note-cell.is-active{background:#fff;color:#000;box-shadow:0 0 0 2px #fff,0 0 40px #ffffff73;transform:scale(1.02)}.client-overlay{position:absolute;top:1rem;left:1rem;padding:.7rem .9rem;border-radius:12px;background:#00000059;border:1px solid rgba(255,255,255,.1);color:#e8ecf3;font-size:.95rem;max-width:min(440px,90vw);line-height:1.4}.client-overlay button{margin-top:.5rem;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);color:#fff;padding:.45rem .75rem;border-radius:8px;cursor:pointer}.client-overlay strong{font-weight:600}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.play-button{width:clamp(140px,18vw,180px);aspect-ratio:1 / 1;border:none;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffffe6,#ff6b00 70%);box-shadow:0 10px 40px #00000059,0 0 0 12px #ffffff14;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease}.play-button:active{transform:scale(.97);box-shadow:0 8px 32px #00000047,0 0 0 10px #ffffff14}.play-button:focus-visible{outline:3px solid rgba(255,255,255,.5);outline-offset:4px}.play-button .play-icon{width:0;height:0;border-style:solid;border-width:16px 0 16px 24px;border-color:transparent transparent transparent rgba(0,0,0,.8);margin-left:4px}.play-button.is-hidden{display:none}