@font-face{font-family:comfortaa;src:url("./media/Comfortaa-QXRSOIE3.ttf");font-display:swap}@font-face{font-family:heyseisynth;src:url("./media/heysei-synth-QNPTY7ZT.ttf")}@font-face{font-family:pixel2;src:url("./media/midicakeLCD-MOAXU6O2.ttf")}:root{--app-chrome: 232px;--chrome-page-bg: #FFFFFF;--chrome-surface: #FFFFFF;--chrome-surface-2: #ECE8DD;--chrome-titlebar-bg: #eaf0f3;--chrome-titlebar-text: #1E1D1A;--chrome-text: #000000;--chrome-text-inverted: #FFFFFF;--chrome-text-muted: #6E6C64;--chrome-border: #D9D5C9;--chrome-border-inverted: #33333A;--chrome-border-width: 2px;--chrome-accent: #ff8e00;--chrome-on-accent: #2A1605;--chrome-focus-color: #ff8e00;--chrome-focus-width: 2px;--chrome-focus-offset: 0px;--chrome-font: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;--color-text: var(--chrome-text);--color-page-bg: var(--chrome-page-bg);--color-accent: var(--chrome-accent);--color-inverse-bg: #FFFFFF;--color-on-inverse: #000000;--color-surface: #A7A7A7;--color-link: #1976d2;--color-input-border: #BDBDBD;--color-success: green;--color-error: red;--color-disabled: lightgrey;--color-track: blue;--brand-green: #00ff00;--brand-magenta: #ff00ff;--brand-orange: #ff8e00;--brand-cyan: #00ffff;--brand-yellow: #ffff00;--brand-red: #ff0000;--fn-melody: var(--brand-magenta);--fn-chord: var(--brand-green);--fn-bass: var(--brand-orange);--accent-magenta: var(--brand-magenta);--accent-magenta-fg: #000;--accent-magenta-inverse: var(--brand-green);--accent-orange: var(--brand-orange);--accent-orange-fg: #000;--accent-orange-inverse: var(--brand-cyan);--accent-green: var(--brand-green);--accent-green-fg: #000;--accent-green-inverse: var(--brand-magenta);--accent-cyan: var(--brand-cyan);--accent-cyan-fg: #000;--accent-cyan-inverse: var(--brand-orange);--subbtn-bg: #000;--subbtn-fg: #fff;--subbtn-radius: 8px;--subbtn-selected-bg: #fff;--subbtn-selected-fg: #000;--subbtn-selected-border: #000;--subbtn-disabled-bg: #2a2a2a;--subbtn-disabled-fg: #6d6d6d;--action-primary: #0d6efd;--action-neutral: #6c757d;--action-danger: #dc3545;--action-success: #198754;--color-log-clock: var(--brand-magenta);--color-log-sysex: #0eff00;--color-log-noteon: #00e7ff;--color-log-noteoff: #ff8c00;--color-log-debug: #999999;--color-viz-border: #444;--color-viz-border-2: #555;--color-lcd-prompt: #cccccc}[data-theme=dark]{--chrome-page-bg: #131316;--chrome-surface: #1B1B1F;--chrome-surface-2: #26262C;--chrome-titlebar-bg: #1F1F24;--chrome-titlebar-text: #F2F0E9;--chrome-text: #F2F0E9;--chrome-text-muted: #8A8880;--chrome-border: #33333A;--chrome-border-inverted: #D9D5C9;--chrome-border-width: 2px;--chrome-accent: #ff8e00;--chrome-on-accent: #2A1605;--chrome-focus-color: #ff8e00;--chrome-focus-width: 2px;--chrome-focus-offset: 0px;--color-inverse-bg: #000000;--color-on-inverse: #ffffff;--color-link: #4da1ff;--color-input-border: #5a5a60;--color-success: #4caf50;--color-error: #ff6b6b;--color-disabled: #6b6b70;--color-track: #7eb6ff}*{font-family:var(--chrome-font);box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html body{height:100%;width:100%;margin:0;color:var(--color-text);background-color:var(--chrome-page-bg)}*:focus-visible{outline:var(--chrome-focus-width) solid var(--chrome-focus-color);outline-offset:var(--chrome-focus-offset)}textarea{box-sizing:border-box;width:95%}h1{font-size:32px}h2{font-size:28px}h3{font-size:24px}h1,h2,h3{font-weight:lighter}p{font-size:14px}a{cursor:pointer;color:var(--color-link);text-decoration:none}a:hover{opacity:.8}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}input{font-size:14px;border-radius:2px;padding:8px;margin-bottom:16px;border:1px solid var(--color-input-border)}label{font-size:12px;font-weight:700;margin-bottom:4px;display:block;text-transform:uppercase}html,body{height:100%}body{margin:0;font-family:var(--chrome-font)}.main-content{padding-bottom:10px}.main-content>.row{--bs-gutter-x: .75rem}.footer{border-Top:5px solid var(--chrome-border);background-color:var(--chrome-surface);color:var(--chrome-text);padding:10px;text-align:center}.console{background-color:var(--color-inverse-bg)}.rowContainer{border:5px solid var(--chrome-border);border-radius:10px;position:relative}.rowSubContainer{padding-top:10px;padding-bottom:10px;overflow:auto;min-height:50vh;max-height:50vh}.subHeaderRow{padding:4px 64px 4px 12px;margin-bottom:0;background-color:var(--accent, var(--chrome-titlebar-bg));color:var(--accent-fg, var(--chrome-titlebar-text));border-top-left-radius:5px;border-top-right-radius:5px;align-items:center;min-height:44px}.subHeaderRow span{font-family:var(--chrome-font);font-size:20px;font-weight:600;letter-spacing:.01em;color:var(--accent-fg, var(--chrome-titlebar-text))}.subButtonRow{padding:4px;color:var(--chrome-text)}.subHeaderButtonRow{padding:0 4px}@media (max-width:767px){.rowContainerLeft{padding-bottom:10px}}@media (min-width:1200px){.rowSubContainer{min-height:70vh;height:calc(100vh - var(--app-chrome));max-height:calc(100vh - var(--app-chrome))}.subHeaderRow{height:44px;flex-wrap:nowrap}.subHeaderRow>div{white-space:nowrap;overflow-x:auto}}app-top-bar{width:100%;min-height:68px;background-color:#000;border-bottom:5px solid var(--chrome-accent);padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}app-top-bar h1{color:#fff;font-size:35px;padding-top:10px;margin:10px;display:inline}.device-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--chrome-text)}.device-controls .form-control{width:auto;max-width:240px}@media (max-width: 768px){app-top-bar{flex-direction:column;align-items:flex-start}}html:has(.vm-expanded){overflow:hidden}.vm-expanded{position:fixed;inset:0;z-index:1040;width:100vw;height:100vh;margin:0;border-radius:0;background-color:var(--color-page-bg);display:flex;flex-direction:column;overflow:hidden}.vm-expanded>.row:not(.subHeaderRow):not(.rowSubContainer),.vm-expanded>.row:not(.subHeaderRow):not(.rowSubContainer)>.col:has(.rowSubContainer){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.vm-expanded>.row:not(.subHeaderRow):not(.rowSubContainer)>.col:not(:has(.rowSubContainer)){flex:0 0 auto}.vm-expanded .rowSubContainer{flex:1 1 auto;min-height:0;max-height:none;height:auto}.vm-expanded>.subHeaderRow,.vm-expanded>.row>.col>.subHeaderRow{padding-right:92px}.rowContainer:fullscreen{width:100vw;height:100vh;background-color:var(--color-inverse-bg)}.rowContainer:fullscreen .subHeaderRow{display:none}.rowContainer:fullscreen .rowSubContainer{min-height:0;max-height:none;height:100vh}.cinema-slot{display:none}.rowContainer.cinema-split{display:flex}.rowContainer.cinema-split>.row,.rowContainer.cinema-split>.cinema-slot{flex:1 1 50%;min-width:0}.rowContainer.cinema-split>.cinema-slot,.rowContainer.cinema-other>.cinema-slot{display:block;height:100vh}.rowContainer.cinema-other>.row{display:none}.cinema-slot>app-lcdscreen,.cinema-slot>app-midi-visualizer{display:block;height:100vh}.cinema-slot .rowContainer{border:0;border-radius:0;height:100vh}.cinema-slot app-view-controls,.cinema-slot .subHeaderRow{display:none}.cinema-slot button.vizCycle{right:106px;background-color:transparent}.cinema-slot .rowSubContainer{min-height:0;max-height:none;height:100vh}.cinema-slot .lcdContainer{height:100%}.cinema-slot svg.lcd{width:100%;height:100%;max-width:none;max-height:none;padding:0}.accent-magenta{--accent: var(--accent-magenta);--accent-fg: var(--accent-magenta-fg);--accent-inverse: var(--accent-magenta-inverse)}.accent-orange{--accent: var(--accent-orange);--accent-fg: var(--accent-orange-fg);--accent-inverse: var(--accent-orange-inverse)}.accent-green{--accent: var(--accent-green);--accent-fg: var(--accent-green-fg);--accent-inverse: var(--accent-green-inverse)}.accent-cyan{--accent: var(--accent-cyan);--accent-fg: var(--accent-cyan-fg);--accent-inverse: var(--accent-cyan-inverse)}.buttonRow{padding:8px 0}.button{display:inline-flex;align-items:center;margin-right:2px;border-radius:10px;border:var(--chrome-border-width) solid var(--chrome-border);font-size:10px;cursor:pointer;background-color:var(--chrome-surface-2);color:var(--chrome-text)}.button:hover{opacity:.8;font-weight:400}.buttonRow .button,.buttonRow .button:hover{font-weight:600}.button:disabled{opacity:.5;cursor:auto}@media (min-width:575px){.button{font-size:14px}}.subButton,button{display:inline-flex;align-items:center;padding:4px 10px;margin-right:2px;border-radius:8px;border:var(--chrome-border-width) solid var(--chrome-border);font-size:12px;cursor:pointer;background-color:var(--chrome-surface-2);color:var(--chrome-text)}.subButton:hover,button:hover{opacity:.8;font-weight:400}.subButton:disabled,button:disabled{opacity:.5;cursor:auto}.icon{height:20px;width:20px;cursor:pointer;margin-right:10px}.selected-button{background-color:var(--chrome-accent);color:var(--chrome-on-accent);border-color:var(--chrome-accent)}.buttonRow .button{background-color:#000;color:#fff;border-color:var(--accent, var(--chrome-border));border-width:3px;opacity:1}.buttonRow .button.selected-button{background-color:var(--accent);color:var(--accent-fg)}.action-primary{--accent: var(--action-primary)}.action-neutral{--accent: var(--action-neutral)}.action-danger{--accent: var(--action-danger)}.action-success{--accent: var(--action-success)}.subButton{background-color:var(--subbtn-bg);color:var(--subbtn-fg);border:2px solid var(--accent, var(--chrome-border));border-radius:var(--subbtn-radius);padding:3px 12px;font-size:13px;font-weight:500;opacity:1}.subButton:hover{background-color:var(--subbtn-bg);color:var(--accent, var(--chrome-accent));border-color:var(--accent, var(--chrome-accent));opacity:1;font-weight:500}.subButton.selected-button{background-color:var(--accent-inverse, var(--subbtn-selected-bg));color:var(--accent-fg, var(--subbtn-selected-fg));border-color:var(--accent-fg, var(--subbtn-selected-border))}.subButton:disabled{background-color:var(--subbtn-disabled-bg);color:var(--subbtn-disabled-fg);border-color:transparent;cursor:not-allowed;opacity:1}.button-refresh{background-color:transparent;border-color:var(--accent, var(--chrome-accent));color:var(--accent, var(--chrome-accent));padding:6px 8px}.button-refresh:hover{background-color:var(--accent, var(--chrome-accent));color:var(--accent-fg, var(--chrome-on-accent));opacity:1}.button-refresh .refresh-icon{width:22px;height:22px;display:block;fill:currentColor}.disabled{color:var(--color-disabled)}.active{color:var(--color-success)}.error{color:var(--color-error)}.whitescreen{display:none;padding:20px}.whitescreen a{color:#00f}.whitescreen-top{background:var(--chrome-accent);font-size:20px;padding:20px;color:var(--chrome-on-accent)}.whitescreen-bottom{font-size:14px;padding:20px}.whitescreen-icon{font-size:30px;padding-bottom:20px}