:root{--bg: #0a0c10;--bg2: #0d1016;--bg3: #11151c;--line: #1f2733;--text: #c9d1d9;--dim: #6b7685;--dimmer: #3a4454;--accent: #79c0ff;--green: #8ddb8d;--yellow: #f0c060;--red: #ff6b6b;--input-bg: #07090c;--on-bg: #1c3550;--on-fg: #dbeeff;--rec-bg: #4a1f1f;--rec-fg: #ffd8d8;--mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:12px/1.3 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}.mono{font-family:var(--mono)}button{background:var(--bg3);color:var(--text);border:1px solid var(--line);border-radius:2px;font:inherit;padding:2px 7px;cursor:pointer;line-height:1.3}button:hover{border-color:var(--dimmer);background:var(--bg3);filter:brightness(1.15)}button:disabled{opacity:.4;cursor:default}button.on{background:var(--on-bg);border-color:var(--accent);color:var(--on-fg)}button.play{color:var(--green)}button.play.on{background:color-mix(in srgb,var(--green) 22%,var(--bg3));border-color:var(--green);color:var(--green)}button.on.rec{background:var(--rec-bg);border-color:var(--red);color:var(--rec-fg)}button.primary{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600;padding:6px 14px}button.primary:hover{background:#9bd1ff}button.danger{color:var(--red)}button.warn{background:#4a3a10;border-color:var(--yellow);color:#ffe9a8}button.mini{padding:0 5px;font-size:10px}input,select{background:var(--input-bg);color:var(--text);border:1px solid var(--line);border-radius:2px;font:inherit;padding:1px 4px;min-width:0}input:focus,select:focus{outline:none;border-color:var(--accent)}input[type=range]{width:90px;padding:0;background:transparent;border:0}kbd{font-family:var(--mono);font-size:10px;background:var(--bg3);border:1px solid var(--line);border-bottom-color:#2b3442;border-radius:2px;padding:0 4px;margin-right:3px}.spacer{flex:1}.dim{color:var(--dim)}.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.app{height:100%;display:flex;flex-direction:column}.topbar,.transport,.statusbar{display:flex;align-items:center;gap:6px;padding:3px 8px;background:var(--bg2);border-bottom:1px solid var(--line);flex-shrink:0}.statusbar{border-bottom:0;border-top:1px solid var(--line);color:var(--dim)}.main{flex:1;display:flex;min-height:0}.pattern-wrap{flex:1;min-width:0;position:relative;background:var(--bg)}.pattern-canvas{display:block;outline:none;cursor:default}.sidebar{width:320px;flex-shrink:0;border-left:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;min-height:0}.tabs{display:flex;border-bottom:1px solid var(--line)}.tabs button{flex:1;border:0;border-radius:0;background:transparent;color:var(--dim);padding:5px}.tabs button.on{color:var(--text);background:var(--bg3);box-shadow:inset 0 -2px 0 var(--accent)}.logo{font-family:var(--mono);font-weight:700;letter-spacing:.08em;color:var(--text);display:inline-flex;align-items:center;gap:.35em}.logo-block{width:.55em;height:.9em;background:var(--accent);display:inline-block;animation:blink 1.4s steps(1) infinite}@keyframes blink{50%{opacity:.25}}.tagline-inline{color:var(--dim);font-style:italic;margin-left:2px}.title{width:160px;font-family:var(--mono)}.peers{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.peer{display:inline-flex;align-items:center;gap:4px;padding:0 6px;border:1px solid;border-radius:10px;font-size:11px;line-height:16px;background:var(--bg3)}.peer i{width:7px;height:7px;border-radius:50%;display:inline-block}.peer.me{opacity:.8}.conn{font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:1px 6px;border-radius:2px}.conn.ok{color:var(--green);background:#10261a}.conn.syncing{color:var(--yellow);background:#2b2410}.conn.off{color:var(--red);background:#2d1414}.transport{flex-wrap:wrap}.group{display:flex;align-items:center;gap:4px;padding-right:8px;border-right:1px solid var(--line)}.group:last-of-type{border-right:0}.field{display:inline-flex;align-items:center;gap:4px}.field>span{color:var(--dim);font-size:11px}.field input{font-family:var(--mono);text-align:right}.lbl{color:var(--dim);font-size:11px}.order .mono{font-size:12px}.master{display:flex;flex-direction:column;gap:2px;width:110px;margin-left:auto}.meter{height:5px;background:var(--bg3);border-radius:1px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#4fd18f 0,#4fd18f 70%,#f0c060 85%,#ff6b6b);transition:width 40ms linear}.meter-fill.clip{background:var(--red)}.panel{display:flex;flex-direction:column;min-height:0;flex:1}.panel-head{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);color:var(--dim);text-transform:lowercase;letter-spacing:.04em}.panel-head .name-input{width:120px;font-family:var(--mono)}.inst-list{overflow-y:auto;flex:1}.inst-row{display:flex;align-items:center;gap:8px;padding:2px 8px;cursor:pointer;border-bottom:1px solid var(--bg3)}.inst-row:hover{background:var(--bg3)}.inst-row.sel{background:var(--on-bg);box-shadow:inset 2px 0 0 var(--accent)}.inst-row.ghost{color:var(--dimmer)}.inst-row .num{color:var(--accent)}.inst-row.ghost .num{color:var(--dimmer)}.inst-row .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inst-row .len{color:var(--dim);font-size:11px}.instruments.drag{outline:2px dashed var(--accent);outline-offset:-4px}.empty-hint{color:var(--dim);text-align:center;padding:30px 10px;line-height:1.6}.busy{padding:4px 8px;color:var(--yellow);font-size:11px}.sample .waveform{width:100%;height:120px;display:block;border-bottom:1px solid var(--line);cursor:crosshair;background:var(--bg)}.sample-info{padding:4px 8px;color:var(--dim);font-size:11px}.sample .row{padding:3px 8px}.keys-help{padding:6px 10px;overflow-y:auto;font-size:11px;color:var(--text)}.keys-help h4{margin:8px 0 3px;color:var(--dim);font-weight:600;text-transform:lowercase;letter-spacing:.05em}.keys-help pre{font-family:var(--mono);font-size:11px;background:var(--bg);padding:6px 8px;border:1px solid var(--line);margin:0;overflow-x:auto}.keys-help p{color:var(--text);opacity:.85}.keys-help p{margin:4px 0;line-height:1.5}.c-note{color:var(--text);font-family:var(--mono)}.c-inst{color:var(--accent);font-family:var(--mono)}.c-vol{color:var(--green);font-family:var(--mono)}.c-fx{color:var(--yellow);font-family:var(--mono)}.mode{font-family:var(--mono);font-weight:700;padding:0 6px;border-radius:2px;background:var(--bg3);color:var(--dim)}.mode.rec{background:var(--rec-bg);color:var(--rec-fg)}.hint{color:var(--yellow)}.warn-text{color:var(--red);font-weight:600}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10}.modal{background:var(--bg2);border:1px solid var(--line);width:min(720px,92vw);max-height:85vh;overflow:auto;padding:10px 14px;border-radius:3px}.modal-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.settings-section{padding:8px 0;border-top:1px solid var(--line)}.keymap-table{margin-top:6px}.keymap-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0;border-bottom:1px solid var(--bg3)}.keymap-row .keys{display:flex;align-items:center;gap:4px}.report{font-family:var(--mono);font-size:11px;line-height:1.6;padding-left:18px;color:var(--text)}.landing{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,var(--bg3) 0,var(--bg) 60%)}.landing-card{width:360px;display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);background:var(--bg2);border-radius:4px}.tagline{font-family:var(--mono);color:var(--accent);font-size:14px;letter-spacing:.02em;margin-top:-4px}.blurb{color:var(--dim);margin:0;line-height:1.5}.field.big{flex-direction:column;align-items:stretch;gap:3px}.field.big input{font-size:14px;padding:5px 8px;text-align:left;font-family:var(--sans)}.or{text-align:center;color:var(--dimmer);font-size:11px}.landing .row input{flex:1}.error{color:var(--red)}.fine{color:var(--dimmer);font-size:10px;text-align:center}.menu-wrap{position:relative}.menu{position:absolute;top:100%;right:0;z-index:5;min-width:180px;background:var(--bg2);border:1px solid var(--line);border-radius:2px;padding:4px;display:flex;flex-direction:column;gap:2px;box-shadow:0 6px 20px #0006}.menu button{text-align:left;border:0;background:transparent;padding:4px 8px}.menu button:hover{background:var(--bg3)}.menu .field{padding:4px 8px}.progress{height:3px;background:var(--bg3);margin:4px 8px}.progress>div{height:100%;background:var(--accent);transition:width 80ms linear}.about{line-height:1.55}.about h3{margin:10px 0 4px;font-size:12px;text-transform:lowercase;letter-spacing:.05em;color:var(--dim)}.about .build{font-family:var(--mono);color:var(--accent)}.about ul{margin:2px 0;padding-left:18px}.about a{color:var(--accent)}html.crt body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(to bottom,#0000 0,#0000 2px,#00000038 2px,#00000038 3px);mix-blend-mode:multiply}html.crt body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:101;background:radial-gradient(ellipse at center,#0000 55%,#00000073)}html.crt .app{text-shadow:0 0 3px currentColor;animation:crt-flicker 4s steps(60) infinite}@keyframes crt-flicker{0%,97%,to{opacity:1}98%{opacity:.93}99%{opacity:.97}}.modal.confirm{width:min(440px,92vw)}.modal.confirm p{margin:4px 0 12px;color:var(--text);line-height:1.5}.confirm-actions button{padding:4px 12px}button.danger-fill{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}.chat-list{flex:1;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:2px}.chat-msg{line-height:1.4}.chat-msg:not(.cont){margin-top:6px}.chat-meta{display:flex;gap:6px;align-items:baseline}.chat-name{font-weight:600;font-size:11px}.chat-time{color:var(--dimmer);font-size:10px}.chat-text{color:var(--text);word-break:break-word;white-space:pre-wrap}.chat-input{display:flex;gap:4px;padding:6px 8px;border-top:1px solid var(--line)}.chat-input input{flex:1}.unread{display:inline-block;margin-left:5px;min-width:14px;padding:0 4px;border-radius:7px;background:var(--accent);color:#000;font-size:10px;font-weight:700;line-height:14px;text-align:center}.save-now{padding:6px 8px}.save-now input{flex:1}.saves-note{padding:0 8px 6px;font-size:11px;line-height:1.4}.saves-list{flex:1;overflow-y:auto}.save-row{display:flex;align-items:center;gap:6px;padding:3px 8px;border-bottom:1px solid var(--bg3)}.save-row .save-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text}.save-row .save-name-input{flex:1}.save-row .save-time{color:var(--dim);font-size:10px;white-space:nowrap}.badge{font-size:9px;text-transform:uppercase;letter-spacing:.06em;padding:0 4px;border-radius:2px;background:var(--bg3);color:var(--dim)}.badge.manual{color:var(--accent)}.badge.restore{color:var(--yellow)}.saves .error{padding:4px 8px}.copyright{color:var(--dimmer);font-size:10px;margin-top:14px}
