@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#d5d6d4;font-synthesis:none;--bg:#080b0c;--surface:#101415;--surface-2:#14191a;--surface-3:#1a1f20;--border:#3a4242;--border-soft:#2b3232;--text:#d5d6d4;--muted:#8c9291;--accent:#f09222;--accent-dark:#8f5310;--danger:#ff6b59;--success:#7eba86;--radius:4px;background:#080b0c;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% -20%, #182020 0, var(--bg) 36%);min-width:1180px;min-height:100vh;margin:0}button,input,select,textarea{color:inherit;font:500 13px/1.2 Barlow Condensed,Inter,sans-serif}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button{cursor:pointer}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.42}.app-shell{flex-direction:column;gap:5px;min-height:100vh;padding:4px;display:flex}.app-header,.status-bar,.panel{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(110deg,#0c1011,#111718);box-shadow:0 8px 24px #00000024}.app-header{justify-content:space-between;align-items:center;min-height:58px;padding:8px 24px;display:flex}.brand{align-items:baseline;gap:32px;display:flex}.brand h1{letter-spacing:.02em;color:#e4e4e2;margin:0;font:600 31px/1 Barlow Condensed,sans-serif}.brand span{color:#9ba09f;letter-spacing:.03em;font:500 17px/1 Barlow Condensed,sans-serif}.enable-button{border:1px solid var(--accent);border-radius:var(--radius);color:var(--accent);letter-spacing:.04em;background:#0c0f10;align-items:center;gap:12px;padding:10px 17px;font:600 16px/1 Barlow Condensed,sans-serif;display:inline-flex}.enable-button:hover:not(:disabled){background:#25190d}.banner{border-radius:var(--radius);grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:9px 14px;font-size:12px;display:grid}.banner--error{color:#f3bab2;background:#241513;border:1px solid #75372f}.banner button{color:inherit;background:0 0;border:0;font-size:20px;line-height:1}main{gap:5px;display:grid}.panel{min-width:0;overflow:hidden}.panel__header{border-bottom:1px solid var(--accent-dark);justify-content:space-between;align-items:center;height:34px;padding:0 10px;display:flex;position:relative}.panel__header:after{content:"";z-index:0;opacity:.65;background:repeating-linear-gradient(90deg, transparent 0 19px, var(--accent) 19px 20px, transparent 20px 24px);clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%);height:5px;position:absolute;bottom:-1px;left:7px;right:7px}.panel__header h2{z-index:1;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;background:#101515;margin:0;padding-right:12px;font:600 18px/1 Barlow Condensed,sans-serif;position:relative}.panel__actions{z-index:1;background:#111617;align-items:center;gap:10px;padding-left:12px;display:flex;position:relative}.panel__body{padding:9px 12px}.button{border-radius:var(--radius);white-space:nowrap;background:#101415;justify-content:center;align-items:center;gap:9px;min-height:34px;padding:7px 13px;display:inline-flex}.button--primary{border:1px solid var(--accent);color:var(--accent)}.button--primary:hover:not(:disabled){background:#25190d}.button--write-pattern{color:#ffc15d;border-color:#ffc15d;box-shadow:0 0 0 1px #6d4318,0 0 0 3px #0d1112}.button--write-pattern:hover:not(:disabled){background:#32210e;border-color:#ffe0a0;box-shadow:0 0 0 1px #a46520,0 0 0 3px #0d1112,0 0 12px #f0922238}.button--secondary,.button--quiet{color:#b9bcba;border:1px solid #485050}.button--secondary:hover:not(:disabled),.button--quiet:hover:not(:disabled),.button--quiet.is-active{background:#1b2121;border-color:#7c8584}input,select,textarea{border-radius:var(--radius);background:#111617;border:1px solid #454d4c}input,select{min-height:34px;padding:6px 9px}select{appearance:none;background-image:linear-gradient(45deg,#0000 50%,#89908f 50%),linear-gradient(135deg,#89908f 50%,#0000 50%);background-position:calc(100% - 13px) 14px,calc(100% - 9px) 14px;background-repeat:no-repeat;background-size:4px 4px,4px 4px;padding-right:28px}.device-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.device-group+.device-group{border-left:1px solid var(--border-soft);padding-left:20px}.device-group h3,.control-section h3{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin:0 0 7px;font:600 15px/1 Barlow Condensed,sans-serif}.device-head,.device-row{grid-template-columns:minmax(280px,2.6fr) minmax(120px,1.4fr) 90px;align-items:center;gap:12px;display:grid}.device-head{color:var(--muted);padding:0 10px 5px;font:500 12px/1 Barlow Condensed,sans-serif}.device-row select{width:100%}.device-row>span{color:#aeb2b0;padding-left:6px;font:500 12px/1 Barlow Condensed,sans-serif}.state-online{color:var(--success)!important}.workspace-grid{grid-template-columns:minmax(280px,.92fr) minmax(320px,1.04fr) minmax(500px,1.18fr);gap:5px;min-height:382px;display:grid}.workspace-grid--patterns{grid-template-columns:280px minmax(560px,1.45fr) minmax(470px,.9fr);min-height:580px}.workspace-grid .panel{flex-direction:column;display:flex}.workspace-grid .panel__body{flex:1}.pattern-library .panel__body{grid-template-rows:auto auto auto auto 1fr auto;gap:7px;display:grid}.library-actions{flex-wrap:wrap;gap:6px;display:flex}.library-actions .button{min-height:30px;padding:5px 8px}.search-control{position:relative}.search-control svg{z-index:1;color:#707776;position:absolute;top:10px;right:10px}.search-control input{width:100%;padding-right:32px}.filters{grid-template-columns:1fr;gap:7px;display:grid}.favorite-row{border-radius:var(--radius);color:#8d9291;border:1px solid #394140;align-items:center;gap:9px;min-height:32px;padding:5px 9px;font:500 13px Barlow Condensed,sans-serif;display:flex}.favorite-row input{min-height:auto;margin-left:auto}.empty-state{text-align:center;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;font:400 13px/1.35 Barlow Condensed,sans-serif;display:flex}.empty-state strong{color:#c7c9c7;font-size:16px;font-weight:500}.empty-state--library{border-radius:var(--radius);border:1px dashed #555d5b;min-height:130px}.mini-status{border-radius:var(--radius);color:#838a88;border:1px solid #333b3a;justify-content:space-between;align-items:center;min-height:29px;padding:5px 8px;font:500 11px Barlow Condensed,sans-serif;display:flex}.pattern-list{border-radius:var(--radius);background:#0b0f10;border:1px solid #303737;min-height:0;overflow:auto}.pattern-row{border-bottom:1px solid #282f2f;grid-template-columns:1fr 29px 29px;align-items:center;gap:3px;min-height:59px;padding:4px;display:grid}.pattern-row:last-child{border-bottom:0}.pattern-row:hover,.pattern-row.is-selected{background:#171c1c}.pattern-row.is-selected{box-shadow:inset 3px 0 var(--accent)}.pattern-row__main{text-align:left;background:0 0;border:0;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:7px 8px;display:flex}.pattern-row__main strong{color:#d1d3d0;text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.pattern-row__main span{color:#7f8785;font-size:11px}.icon-button{color:#68706f;background:0 0;border:1px solid #0000;border-radius:3px;place-items:center;width:27px;height:27px;padding:0;display:grid}.icon-button:hover{color:#afb4b1;border-color:#4d5654}.icon-button.is-favorite{color:var(--accent)}.icon-button--danger:hover{color:var(--danger);border-color:#744238}.sequencer-panel .panel__body{grid-template-rows:auto 1fr auto;gap:8px;min-height:0;padding:8px;display:grid}.sequencer-actions{gap:6px;display:flex}.sequencer-actions .button{min-height:27px;padding:4px 9px}.pattern-toolbar{border-radius:var(--radius);background:#0c1011;border:1px solid #343c3b;grid-template-columns:minmax(120px,1.1fr) minmax(135px,1.3fr) 74px 82px minmax(105px,1fr) auto;align-items:end;gap:6px;padding:8px;display:grid}.pattern-toolbar--midi{grid-template-columns:minmax(175px,1.35fr) 72px 80px 78px auto}.pattern-toolbar label{flex-direction:column;gap:4px;min-width:0;display:flex}.pattern-toolbar label>span{color:#8f9694;font:500 11px/1 Barlow Condensed,sans-serif}.pattern-toolbar select,.pattern-toolbar input{width:100%;min-width:0}.pattern-toolbar .loop-control{flex-direction:row;align-items:center;gap:7px;min-height:34px;padding:0 6px}.pattern-toolbar .loop-control input{width:auto;min-height:auto}.pattern-toolbar .loop-control span{color:#b7bbb8}.sequencer-scroll{background:linear-gradient(145deg,#080a0b,#111515);border:1px solid #3b4241;border-radius:6px;min-height:0;padding:6px;overflow:auto;box-shadow:inset 0 0 28px #0000008c}.sequencer{--step-count:16;min-width:calc(86px + var(--step-count) * 25px);grid-template-columns:82px 1fr;gap:4px;padding:4px;display:grid;position:relative}.sequencer-corner{background:linear-gradient(#252a2a,#111414);border:1px solid #343a39;border-radius:4px;justify-content:space-between;align-items:center;min-height:35px;padding:0 9px;display:flex}.sequencer-corner strong{color:#d8dad7;font:600 15px Barlow Condensed,sans-serif}.sequencer-corner span{color:#858b89;text-transform:uppercase;font:500 10px Barlow Condensed,sans-serif}.step-rail,.step-grid{grid-template-columns:repeat(var(--step-count), 1fr);gap:2px;display:grid}.step-rail{background:linear-gradient(#181c1c,#0c0f10);border:1px solid #343a39;border-radius:4px;align-items:center;min-height:35px;padding:2px 1px}.step-rail span{color:#686f6d;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:100%;font:500 9px JetBrains Mono,monospace;display:flex}.step-rail i{background:#4a3020;border-radius:50%;width:5px;height:5px;box-shadow:inset 0 1px 1px #000}.step-rail span.is-beat i{background:#8e4e18;width:8px;height:8px;box-shadow:0 0 6px #f0922247,inset 0 1px 1px #2a1307}.step-highlights{z-index:4;grid-template-columns:repeat(var(--step-count), 1fr);pointer-events:none;grid-template-rows:35px repeat(9,42px);gap:4px 2px;display:grid;position:absolute;inset:4px 4px 4px 90px}.step-highlight-dot{background:#ffc15d;border-radius:50%;place-self:start center;width:8px;height:8px;margin-top:8px;box-shadow:0 0 9px #f09222}.step-highlight-pad{border:1px solid #a8651b;border-radius:5px;box-shadow:0 0 0 1px #f09222,0 0 10px #f092224d}.sequencer-row{display:contents}.lane-label{background:linear-gradient(145deg,#282d2d,#101313 70%);border:1px solid #313837;border-radius:5px;justify-content:space-between;align-items:center;gap:4px;min-height:42px;padding:0 7px;display:flex;box-shadow:inset 0 1px #ffffff0d,0 2px 3px #000}.lane-label strong{color:#d1d3d0;text-transform:uppercase;letter-spacing:.015em;font:600 12px/1 Barlow Condensed,sans-serif}.lane-label span{color:#626966;font:400 6px/1 JetBrains Mono,monospace}.step-grid{min-width:0}.step-pad{background:linear-gradient(145deg,#606363,#2d3030 62%,#202323);border:1px solid #292e2e;border-radius:5px;min-width:21px;min-height:42px;padding:0;position:relative;box-shadow:inset 0 1px 1px #ffffff24,inset 0 -3px 5px #00000061,0 2px 2px #050606}.step-pad:hover{filter:brightness(1.13);border-color:#9b6628}.step-pad:active{transform:translateY(1px)}.step-pad.is-beat{border-left-color:#535b59}.step-pad span{background:linear-gradient(145deg,#ffe59a,#d59a2c 62%,#8b5312);border-radius:4px;position:absolute;inset:2px;box-shadow:0 0 9px #f0922259,inset 0 1px 1px #fff2bd}.sequencer-status{border-radius:var(--radius);color:#7e8583;border:1px solid #333b3a;align-items:center;gap:14px;min-height:31px;padding:5px 9px;font:500 10px Barlow Condensed,sans-serif;display:flex}.sequencer-status strong{color:#bfc2bf;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin-right:auto;overflow:hidden}.sequencer-empty{color:#7d8583;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:100%;padding:30px;display:flex}.sequencer-empty__rail{color:#8b541d;letter-spacing:.12em;background:#0b0e0f;border:1px solid #424947;border-radius:6px;width:min(440px,90%);padding:12px;font:500 13px JetBrains Mono,monospace}.sequencer-empty strong{color:#c2c5c2;font:500 17px Barlow Condensed,sans-serif}.sequencer-empty span{font:400 13px Barlow Condensed,sans-serif}.sr16-controls .panel__body{padding:8px 14px}.control-section{border-bottom:1px solid #333a39;padding:8px 0 13px}.control-section:last-child{border:0;padding-bottom:0}.control-line{align-items:end;gap:14px;display:flex}.control-line--note{gap:10px}.control-line--memory{align-items:center}.control-line--memory>span{color:#929896;font:400 13px/1.2 Barlow Condensed,sans-serif}.control-line--memory code{color:#e6b963;font:500 11px JetBrains Mono,monospace}.field{flex-direction:column;gap:4px;min-width:84px;display:flex}.field span{color:#a7abaa;font:500 12px/1 Barlow Condensed,sans-serif}.field input{width:84px}.control-line--note .field:nth-child(4){min-width:94px}.control-line--note .field:nth-child(4) input{width:94px}.control-line .button{min-height:37px;margin-left:auto}.control-line--note .button{margin-left:0}.sysex-layout{grid-template-columns:400px minmax(420px,1fr) 250px;align-items:center;gap:32px;display:grid}.sysex-file-actions{gap:12px;display:flex}.hex-editor textarea{resize:vertical;color:#c4c7c4;letter-spacing:.04em;width:100%;height:86px;padding:10px 12px;font:400 12px/1.55 JetBrains Mono,monospace}.sysex-send{min-height:42px}.midi-monitor .panel__body{padding:0 10px 7px}.panel__actions .button{min-height:27px;padding:4px 9px}.history-size{color:#a3a7a6;align-items:center;gap:8px;font:500 11px Barlow Condensed,sans-serif;display:flex}.history-size select{min-height:28px;padding-top:3px;padding-bottom:3px}.monitor-table{min-height:170px}.monitor-row{color:#b9bcba;border-bottom:1px solid #262d2d;grid-template-columns:130px 48px minmax(260px,1.8fr) minmax(160px,1fr) minmax(210px,1.1fr);align-items:center;gap:12px;min-height:31px;padding:4px 14px;font:400 12px/1 Barlow Condensed,sans-serif;display:grid}.monitor-head{color:#8e9492;min-height:36px}.monitor-scroll{height:130px;overflow:auto}.monitor-scroll code{text-overflow:ellipsis;color:#c5c8c5;white-space:nowrap;font:400 11px/1 JetBrains Mono,monospace;overflow:hidden}.empty-state--monitor{height:128px}.monitor-limit{color:#707775;text-align:right;padding:4px 14px 1px;font:500 10px Barlow Condensed,sans-serif}.direction{font-weight:600}.direction--in{color:#7db9c7}.direction--out{color:var(--accent)}.status-bar{color:#929796;align-items:center;gap:0;min-height:48px;padding:0 22px;font:500 12px Barlow Condensed,sans-serif;display:flex}.status-bar>span{border-right:1px solid #303737;align-items:center;gap:7px;padding:0 20px;display:inline-flex}.status-bar>span:first-child{padding-left:0}.status-bar>span:last-child{border:0;padding-right:0}.status-bar strong{color:#b4b8b6;font-weight:500}.status-bar .status-ok strong{color:var(--success)}.status-spacer{flex:1;border:0!important}.repository-link{color:#b9bcba;padding-left:20px;text-decoration:none}.repository-link:hover{color:var(--accent);text-underline-offset:3px;text-decoration:underline}.repository-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#010303c7;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.pattern-write-dialog{background:linear-gradient(145deg,#151b1b,#0b0e0f 72%);border:1px solid #74501f;border-radius:6px;width:min(458px,100%);overflow:hidden;box-shadow:0 22px 65px #000000b3,inset 0 1px #ffffff14}.pattern-write-dialog__header{border-bottom:1px solid var(--accent-dark);justify-content:space-between;align-items:center;min-height:48px;padding:0 11px 0 15px;display:flex;position:relative}.pattern-write-dialog__header:after{content:"";opacity:.65;background:repeating-linear-gradient(90deg, transparent 0 19px, var(--accent) 19px 20px, transparent 20px 24px);clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%);height:5px;position:absolute;bottom:-1px;left:9px;right:9px}.pattern-write-dialog__header>div{color:var(--accent);align-items:center;gap:9px;display:flex}.pattern-write-dialog__header h2{text-transform:uppercase;letter-spacing:.07em;margin:0;font:600 20px/1 Barlow Condensed,sans-serif}.pattern-write-dialog__body{color:#b9bfbc;gap:12px;padding:17px 16px 14px;font:400 15px/1.35 Barlow Condensed,sans-serif;display:grid}.pattern-write-dialog__body p{margin:0}.pattern-write-dialog__body p>strong{color:#e3e4e1;font-weight:600}.pattern-write-dialog__warning{border-radius:var(--radius);background:#1d1710;border:1px solid #674620;padding:11px 12px}.pattern-write-dialog__warning strong{color:#ffc15d;text-transform:uppercase;letter-spacing:.05em;font:600 14px/1 Barlow Condensed,sans-serif}.pattern-write-dialog__warning ul{gap:5px;margin:9px 0 0;padding:0;list-style:none;display:grid}.pattern-write-dialog__warning li{align-items:center;gap:7px;display:flex}.pattern-write-dialog__warning li:before{content:"•";color:var(--accent);font-size:17px;line-height:10px}.pattern-write-dialog code{color:#f2ca81;font:500 12px JetBrains Mono,monospace}.pattern-write-dialog__note{color:#9da4a1;font-size:13px}.pattern-write-dialog__actions{background:#0d1112;border-top:1px solid #303737;justify-content:flex-end;gap:7px;padding:10px 12px;display:flex}.pattern-write-dialog__actions .button{min-width:104px}@media (width<=1320px){.app-shell{padding:3px}.workspace-grid{grid-template-columns:280px 310px 1fr}.workspace-grid--patterns{grid-template-columns:260px 520px 1fr}.sysex-layout{grid-template-columns:340px minmax(380px,1fr) 210px;gap:18px}.control-line{gap:8px}.field,.field input{width:68px;min-width:68px}}@media (prefers-reduced-motion:no-preference){.button,.enable-button{transition:background-color .12s,border-color .12s,color .12s}}