:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;--page:#0d0d0d;--surface:#1a1a19;--surface-raised:#232321;--surface-hover:#2c2c2a;--ink:#fff;--ink-secondary:#c3c2b7;--ink-muted:#898781;--line:#2c2c2a;--line-strong:#383835;--accent:#3987e5;--accent-soft:#3987e529;--category-note:#3987e5;--category-control:#d95926;--category-system:#199e70;--category-program:#9085e9;--category-unknown:#e66767;--good:#0ca30c;--warning:#fab219;--serious:#ec835a;--critical:#d03b3b;--focus:#86b6ef;--shadow:0 18px 50px #00000047;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--page)}body{background:radial-gradient(circle at 9% -10%, #3987e51f, transparent 34rem), radial-gradient(circle at 92% 0%, #199e7014, transparent 30rem), var(--page);min-width:320px;min-height:100vh;color:var(--ink);margin:0}button,input,select{font:inherit}button,select,input[type=range]{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,select:focus-visible,input:focus-visible,.monitor-row:focus-visible,.monitor-table:focus-visible{outline:3px solid var(--focus);outline-offset:2px}h1,h2,p{margin:0}h1,h2{letter-spacing:-.025em}code,time,.event-type,.direction-badge,.panel__count,.pause-counter,.monitor-row{font-variant-numeric:tabular-nums}.app-shell{width:min(1540px,100% - 40px);margin:0 auto;padding:20px 0 28px}.topbar{grid-template-columns:minmax(240px,1fr) auto auto;align-items:center;gap:18px;min-height:72px;padding:10px 2px 22px;display:grid}.brand-lockup,.topbar__status,.topbar__actions,.log-actions,.keyboard-actions,.keyboard-controls,.mobile-tabs{align-items:center;display:flex}.brand-lockup{gap:12px}.brand-mark{color:#a8cdf8;background:linear-gradient(145deg,#3987e53d,#199e701f);border:1px solid #3987e58a;border-radius:14px;place-items:center;width:42px;height:42px;font-size:25px;font-weight:700;display:grid;box-shadow:inset 0 1px #ffffff14}.brand-lockup h1{font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.1}.brand-lockup p{color:var(--ink-muted);margin-top:4px;font-size:.78rem}.topbar__status{gap:8px}.topbar__actions{justify-content:flex-end;gap:8px}.status-pill{border:1px solid var(--line);min-height:29px;color:var(--ink-secondary);white-space:nowrap;background:#1a1a19d1;border-radius:999px;align-items:center;gap:6px;padding:4px 9px;font-size:.74rem;display:inline-flex}.status-pill__icon{font-size:.75rem}.status-pill--success{border-color:color-mix(in srgb, var(--good) 45%, var(--line));color:#b9edb9}.status-pill--success .status-pill__icon{color:var(--good)}.status-pill--warning{border-color:color-mix(in srgb, var(--warning) 45%, var(--line));color:#f7d894}.status-pill--warning .status-pill__icon{color:var(--warning)}.status-pill--danger{border-color:color-mix(in srgb, var(--critical) 50%, var(--line));color:#f3b2b2}.status-pill--danger .status-pill__icon{color:var(--critical)}.status-pill--info .status-pill__icon{color:var(--accent)}.button{min-height:38px;color:var(--ink);border:1px solid #0000;border-radius:10px;padding:8px 12px;font-size:.8rem;font-weight:650;transition:border-color .16s,background .16s,transform .16s}.button:not(:disabled):active{transform:translateY(1px)}.button--primary{background:#2a78d6;border-color:#5aa0eb}.button--primary:not(:disabled):hover{background:#3987e5}.button--secondary{background:#199e702e;border-color:#199e70a6}.button--secondary:not(:disabled):hover{background:#199e7052}.button--ghost{border-color:var(--line-strong);color:var(--ink-secondary);background:0 0}.button--ghost:not(:disabled):hover{border-color:var(--ink-muted);background:var(--surface-hover);color:var(--ink)}.button--panic{color:#ffcece;background:#d03b3b2e;border-color:#d03b3bbf}.button--panic:not(:disabled):hover{background:#d03b3b52}.language-select select{border:1px solid var(--line-strong);background:var(--surface);min-height:38px;color:var(--ink-secondary);border-radius:10px;padding:0 8px}.runtime-message{color:#cfe4ff;background:#3987e51a;border:1px solid #3987e55c;border-radius:10px;align-items:center;gap:9px;margin-bottom:14px;padding:10px 12px;font-size:.85rem;display:flex}.runtime-message>span{background:var(--accent);color:#061323;border-radius:50%;place-items:center;width:18px;height:18px;font-size:.72rem;font-weight:800;display:inline-grid}.runtime-message--error{color:#ffd3d3;background:#d03b3b21;border-color:#d03b3b8a}.runtime-message--error>span{background:var(--critical);color:#fff}.app-layout{grid-template-columns:minmax(260px,300px) minmax(0,1fr);gap:16px;display:grid}.control-rail{align-content:start;gap:14px;display:grid}.workspace{grid-template-rows:auto minmax(360px,1fr);gap:16px;min-width:0;display:grid}.keyboard-zone{margin-top:16px}.panel{border:1px solid var(--line);background:linear-gradient(160deg,#232321f2,#1a1a19f2);border-radius:16px;min-width:0;box-shadow:inset 0 1px #ffffff09}.panel__heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:63px;padding:14px 16px;display:flex}.panel__heading--wrap{flex-wrap:wrap}.panel__heading h2{font-size:.97rem}.eyebrow{color:var(--ink-muted);letter-spacing:.13em;margin-bottom:4px;font-size:.64rem;font-weight:760}.panel__count{background:var(--surface-hover);min-width:25px;height:25px;color:var(--ink-secondary);border-radius:999px;place-items:center;font-size:.76rem;display:grid}.field{gap:6px;min-width:0;display:grid}.field__label{color:var(--ink-muted);font-size:.7rem;font-weight:680}.field select,.field input[type=range]{width:100%}.field select{border:1px solid var(--line-strong);background:var(--surface);min-height:38px;color:var(--ink);border-radius:9px;padding:0 9px}.field select:disabled{color:var(--ink-muted)}.field--compact{grid-template-columns:auto minmax(84px,1fr) auto;align-items:center;gap:8px}.field--compact .field__label{grid-column:1/-1}.field--compact output{min-width:24px;color:var(--ink-secondary);text-align:right;font-size:.78rem}.connection-panel .port-stack{gap:12px;padding:15px 16px 10px;display:grid}.muted-note,.privacy-note,.keyboard-hint,.panic-hint{color:var(--ink-muted);font-size:.73rem;line-height:1.45}.connection-panel .muted-note,.connection-panel .privacy-note{padding:0 16px 10px}.privacy-note{color:#b8d3f4}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:15px 16px 10px;display:grid}.filter-grid .field:last-child{grid-column:1/-1}.toggle-row{color:var(--ink-secondary);align-items:flex-start;gap:9px;padding:3px 16px 16px;font-size:.75rem;line-height:1.4;display:flex}.toggle-row input{accent-color:var(--accent);margin-top:2px}.compatibility-alert{border-left:3px solid var(--warning);color:#f5daa2;background:#fab21917;border-radius:0 8px 8px 0;margin:14px 16px 8px;padding:10px;font-size:.76rem;line-height:1.45}.support-list{color:var(--ink-secondary);gap:7px;margin:0;padding:5px 16px 16px 32px;font-size:.75rem;line-height:1.35;display:grid}.support-list li::marker{color:var(--accent)}.live-activity{overflow:hidden}.event-family{border:1px solid var(--line-strong);color:var(--ink-muted);text-transform:capitalize;border-radius:999px;padding:4px 8px;font-size:.7rem}.event-family[data-family=channel]{color:#bcdcff;border-color:#3987e5a6}.event-family[data-family=system-realtime]{color:#a9ebd4;border-color:#199e70a6}.event-family[data-family=unknown]{color:#ffc2c2;border-color:#e66767a6}.live-activity__body{grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:16px;display:grid}.event-hero{align-content:center;gap:8px;min-height:80px;display:grid}.event-hero strong{color:#dcecff;text-transform:lowercase;font-size:clamp(1.25rem,2.8vw,2rem);line-height:1}.event-hero span{color:var(--ink-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;overflow:hidden}.event-metrics{grid-template-columns:repeat(3,minmax(64px,1fr));gap:10px;margin:0;display:grid}.event-metrics div{border:1px solid var(--line);background:#0d0d0d57;border-radius:11px;min-width:68px;padding:10px}.event-metrics dt{color:var(--ink-muted);font-size:.65rem}.event-metrics dd{color:var(--ink);margin:5px 0 0;font-size:1rem;font-weight:740}.active-notes{border-top:1px solid var(--line);grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;padding:12px 16px;display:grid}.active-notes__label{color:var(--ink-muted);font-size:.7rem;font-weight:700}.active-notes__grid{flex-wrap:wrap;align-items:center;gap:6px;min-height:25px;display:flex}.note-chip{color:#d6eaff;background:#3987e524;border:1px solid #3987e599;border-radius:999px;align-items:baseline;gap:2px;padding:3px 8px;font-size:.74rem;font-weight:700;display:inline-flex}.note-chip sup{color:#a8cdf8;font-size:.58rem}.realtime-summary{border-top:1px solid var(--line);grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;padding:10px 16px;display:grid}.realtime-summary__label{color:var(--ink-muted);font-size:.7rem;font-weight:700}.realtime-summary__entries{flex-wrap:wrap;gap:6px;display:flex}.realtime-chip{color:#a9ebd4;background:#199e701f;border:1px solid #199e7080;border-radius:999px;gap:4px;padding:3px 8px;font-size:.72rem;display:inline-flex}.realtime-chip strong{color:var(--ink)}.monitor-panel{grid-template-rows:auto minmax(280px,1fr);min-height:0;display:grid;overflow:hidden}.log-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}.log-actions .button{min-height:32px;padding:6px 8px;font-size:.7rem}.pause-counter,.action-message{color:#f5daa2;background:#fab21921;border-radius:8px;padding:5px 7px;font-size:.7rem}.action-message{color:#cfe4ff;background:#3987e526}.monitor-table{outline:none;min-height:0;max-height:540px;overflow:auto}.monitor-table__header,.monitor-row{grid-template-columns:80px 84px minmax(116px,.9fr) minmax(180px,2fr) minmax(110px,1fr);align-items:center;gap:10px;min-width:700px;padding:0 16px;display:grid}.monitor-table__header{z-index:2;border-bottom:1px solid var(--line);height:35px;color:var(--ink-muted);letter-spacing:.04em;text-transform:uppercase;background:#1a1a19fa;font-size:.65rem;font-weight:720;position:sticky;top:0}.monitor-table__canvas{min-width:700px;position:relative}.monitor-row{width:100%;min-height:48px;color:var(--ink-secondary);background:0 0;border-bottom:1px solid #2c2c2ac7;font-size:.75rem;position:absolute;left:0}.monitor-row:hover,.monitor-row:focus{background:#3987e517}.monitor-row[data-family=channel] .event-type{color:#bcdcff}.monitor-row[data-family=system-realtime] .event-type{color:#a9ebd4}.monitor-row[data-family=system-common] .event-type{color:#e9caff}.monitor-row[data-family=unknown] .event-type{color:#ffc2c2}.direction-badge{width:fit-content;color:var(--ink-muted);background:#89878129;border-radius:5px;padding:3px 5px;font-size:.63rem;font-weight:710}.direction-badge[data-direction=in]{color:#bcdcff;background:#3987e526}.direction-badge[data-direction=out]{color:#a9ebd4;background:#199e7026}.direction-badge[data-direction=virtual]{color:#d5d0ff;background:#9085e926}.event-type{text-overflow:ellipsis;white-space:nowrap;font-weight:690;overflow:hidden}.event-detail{color:var(--ink-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.monitor-row code{color:var(--ink-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.monitor-empty{min-height:180px;color:var(--ink-muted);place-items:center;font-size:.84rem;display:grid}.keyboard-panel{padding-bottom:14px;overflow:hidden}.keyboard-controls{flex-wrap:wrap;gap:14px;padding:14px 16px 4px}.keyboard-controls .field{flex:154px}.keyboard-hint{padding:7px 16px 12px}.piano{border:1px solid var(--line-strong);touch-action:none;-webkit-user-select:none;user-select:none;background:#0a0a0a;border-radius:12px;min-height:174px;margin:0 16px;position:relative;overflow:hidden}.piano__whites{grid-template-columns:repeat(var(--white-key-count), minmax(44px, 1fr));height:174px;display:grid}.piano-key{border:0;transition:background 90ms linear,box-shadow 90ms linear}.piano-key--white{color:#1b1b19;background:linear-gradient(#f5f4ed,#d9d7ca);border-right:1px solid #3d3d39;position:relative}.piano-key--white:last-child{border-right:0}.piano-key--white span{color:#5a5954;text-align:center;font-size:.63rem;font-weight:730;position:absolute;bottom:6px;left:4px;right:4px}.piano-key--black{z-index:2;top:0;left:var(--black-key-left);width:calc((100% / var(--white-key-count)) * .64);background:linear-gradient(#3e3e3c,#0b0b0b 65%);border:1px solid #000;border-radius:0 0 7px 7px;height:106px;position:absolute;transform:translate(-50%);box-shadow:0 4px 7px #00000080}.piano-key.is-active.piano-key--white{background:linear-gradient(#9dcbf9,#67a8eb);box-shadow:inset 0 -4px #2a78d6}.piano-key.is-active.piano-key--black{background:linear-gradient(#4db5a0,#147a66 75%);box-shadow:inset 0 0 0 2px #9aead6,0 4px 7px #00000080}.piano-key:hover{filter:brightness(1.05)}.panic-hint{color:#f1b6b6;padding:10px 16px 0}.mobile-tabs,.mobile-settings-trigger,.drawer-close{display:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=1120px){.topbar{grid-template-columns:1fr auto}.topbar__status{grid-area:2/1/auto/-1}.topbar__actions{grid-area:1/2}.button--demo{display:none}}@media (width<=780px){.app-shell{width:min(100%,680px);padding:12px 12px 18px}.topbar{grid-template-columns:1fr auto;gap:10px;padding-bottom:12px}.brand-mark{border-radius:11px;width:36px;height:36px;font-size:21px}.brand-lockup p{display:none}.topbar__status{grid-column:1/-1;gap:6px;padding-bottom:2px;overflow-x:auto}.topbar__actions{gap:6px}.topbar__actions .button{min-height:36px;padding:7px 9px;font-size:.72rem}.language-select select{min-height:36px}.runtime-message{margin-bottom:10px}.mobile-tabs{grid-template-columns:repeat(3,1fr) auto;gap:5px;margin-bottom:12px;display:grid}.mobile-tabs>button{border:1px solid var(--line-strong);background:var(--surface);min-height:42px;color:var(--ink-secondary);border-radius:10px;font-size:.75rem;font-weight:680}.mobile-tabs>button.is-active{border-color:var(--accent);background:var(--accent-soft);color:#d9eaff}.mobile-tabs .mobile-settings-trigger{padding:0 10px;display:block}.app-layout{display:block}.control-rail{z-index:20;border:1px solid var(--line-strong);max-height:min(78vh,680px);box-shadow:var(--shadow);background:#171716;border-radius:18px;padding:36px 4px 4px;transition:transform .18s;position:fixed;bottom:10px;left:10px;right:10px;overflow:auto;transform:translateY(calc(100% + 24px))}.control-rail.is-open{transform:translateY(0)}.drawer-close{background:var(--surface-hover);width:32px;height:28px;color:var(--ink);border:0;border-radius:8px;place-items:center;font-size:1.3rem;display:grid;position:absolute;top:7px;right:8px}.workspace{display:block}.workspace__log,.keyboard-zone{margin-top:12px}.app-shell[data-mobile-view=monitor] .mobile-view-log,.app-shell[data-mobile-view=monitor] .mobile-view-keyboard,.app-shell[data-mobile-view=keyboard] .mobile-view-monitor,.app-shell[data-mobile-view=keyboard] .mobile-view-log,.app-shell[data-mobile-view=log] .mobile-view-monitor,.app-shell[data-mobile-view=log] .mobile-view-keyboard{display:none}.live-activity__body{grid-template-columns:1fr}.event-metrics{grid-template-columns:repeat(3,1fr)}.active-notes,.realtime-summary{grid-template-columns:1fr;gap:8px}.monitor-table{max-height:calc(100dvh - 235px)}.monitor-panel{min-height:calc(100dvh - 230px)}.panel__heading--wrap{align-items:flex-start}.log-actions{justify-content:flex-start;width:100%}.piano{min-height:206px;margin:0 10px}.piano__whites{height:206px}.piano-key--black{height:126px}.keyboard-controls{gap:10px;padding-inline:10px}.keyboard-controls .field{flex-basis:135px}.keyboard-hint,.panic-hint{padding-inline:10px}}@media (width<=510px){.status-pill{font-size:.68rem}.filter-grid{grid-template-columns:1fr}.filter-grid .field:last-child{grid-column:auto}.event-metrics{gap:6px}.event-metrics div{min-width:0;padding:8px}.event-metrics dd{font-size:.9rem}.keyboard-controls .field{flex-basis:100%}.piano__whites{grid-template-columns:repeat(var(--white-key-count), minmax(32px, 1fr))}.piano-key--white span{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){.status-pill,.event-family,.direction-badge,.note-chip,.button,.panel{border:1px solid canvastext}.piano-key--white{color:canvastext;background:canvas}.piano-key--black{background:canvastext;border-color:canvas}.piano-key.is-active{outline-offset:-4px;outline:3px solid highlight}}