:focus-visible{outline:none!important}:root{--void: #000000;--void-soft: #050508;--surface: #0a0a0d;--surface-elevated: #101014;--surface-hover: #16161a;--neon-primary: #00ffcc;--neon-secondary: #ff00aa;--neon-tertiary: #ffcc00;--neon-blue: #00aaff;--neon-red: #ff3355;--neon-green: #00ff66;--text-max: #ffffff;--text-high: #cccccc;--text-mid: #666666;--text-low: #333333;--ok: var(--neon-green);--warn: var(--neon-tertiary);--err: var(--neon-red);--font-display: "Anybody", system-ui, sans-serif;--font-code: "IBM Plex Mono", "SF Mono", monospace;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--s7: 48px;--border: rgba(255, 255, 255, .06);--border-focus: rgba(0, 255, 204, .4);--r1: 4px;--r2: 8px;--r3: 12px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}.dropdown-menu [role=menuitem]{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;color:var(--text-high);text-decoration:none;font-size:13px;background:transparent;border:none;width:100%;cursor:pointer;transition:all .15s ease;text-align:left;font-family:inherit;box-sizing:border-box}.dropdown-menu [role=menuitem]:is(:hover,:focus-visible){background:#00ffcc1a;color:var(--neon-primary)}.dropdown-menu [role=menuitem] svg{width:16px;height:16px;flex-shrink:0}body{font-family:var(--font-code);font-size:13px;background:var(--void);color:var(--text-high);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.viz-layer{position:fixed;inset:0;width:100%;height:100%;z-index:0}#test-canvas{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;z-index:5!important;pointer-events:none!important}.noise-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}#app{position:relative;z-index:10;height:100vh;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s5);background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%);border-bottom:1px solid var(--border)}.logo-group{display:flex;align-items:center}.logo{font-family:var(--font-code);font-size:18px;font-weight:600;letter-spacing:-.02em}.logo-strudel{color:var(--text-max)}.logo-wasm{color:var(--neon-primary);opacity:.8}.metrics{display:flex;gap:var(--s4)}.metric{display:flex;flex-direction:column;align-items:center;padding:var(--s1) var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r1);min-width:60px}.metric-value{font-size:16px;font-weight:600;color:var(--neon-primary);font-variant-numeric:tabular-nums;text-shadow:0 0 20px var(--neon-primary)}.metric-label{font-size:9px;letter-spacing:.1em;color:var(--text-low);text-transform:uppercase}.status-group{display:flex;align-items:center}.status{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r1)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-mid);transition:all .2s ease}.status-text{font-size:11px;letter-spacing:.05em;color:var(--text-mid);text-transform:uppercase;transition:color .2s ease}.status.ready .status-dot{background:var(--neon-primary);box-shadow:0 0 8px var(--neon-primary)}.status.ready .status-text{color:var(--neon-primary)}.status.playing .status-dot{background:var(--neon-green);box-shadow:0 0 8px var(--neon-green);animation:pulse .5s ease-in-out infinite}.status.playing .status-text{color:var(--neon-green)}.status.loading .status-dot{background:var(--neon-tertiary);box-shadow:0 0 8px var(--neon-tertiary);animation:pulse 1s ease-in-out infinite}.status.loading .status-text{color:var(--neon-tertiary)}.status.error .status-dot{background:var(--neon-red);box-shadow:0 0 8px var(--neon-red)}.status.error .status-text{color:var(--neon-red)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}main{flex:1;display:flex;align-items:stretch;justify-content:center;min-height:0;gap:0}.editor-panel{flex:1;max-width:720px;margin:var(--s4);display:flex;flex-direction:column;background:#0a0a0d99;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--r3);box-shadow:0 20px 60px #0006,0 0 1px #ffffff1a inset;animation:slideUp .3s ease-out;transition:box-shadow .3s ease,border-color .3s ease}.editor-panel:focus-within{border-color:var(--border-focus);box-shadow:0 20px 60px #0009,0 0 40px #00ffcc1a,0 0 1px #ffffff1a inset}.editor-panel.playing{border-color:#00ff664d;box-shadow:0 20px 60px #0009,0 0 40px #00ff6626,0 0 1px #ffffff1a inset}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.editor-chrome{display:flex;align-items:center;padding:var(--s2) var(--s3);background:#101014e6;border-bottom:1px solid var(--border);border-radius:var(--r3) var(--r3) 0 0}.chrome-left,.chrome-right{display:flex;align-items:center;gap:var(--s2);min-width:80px}.chrome-right{justify-content:flex-end}.chrome-center{flex:1;text-align:center}.chrome-dots{display:flex;gap:6px}.dot{width:10px;height:10px;border-radius:50%;background:var(--text-low);transition:all .15s ease;cursor:default}.dot-close{background:#ff5f57}.dot-min{background:#febc2e}.dot-max{background:#28c840}.dot:hover,.dot:focus-visible{filter:brightness(1.2);transform:scale(1.1)}.editor-title{font-size:11px;color:var(--text-low);letter-spacing:.02em}.btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:var(--r1);background:transparent;color:var(--text-mid);cursor:pointer;transition:all .15s ease}.btn svg{width:12px;height:12px}.btn-play:hover,.btn-play:focus-visible{color:var(--neon-green);border-color:var(--neon-green);background:#00ff661a;box-shadow:0 0 12px #0f63}.btn-play.active{color:var(--neon-green);border-color:var(--neon-green);background:#00ff6626}.btn-stop:hover,.btn-stop:focus-visible{color:var(--neon-red);border-color:var(--neon-red);background:#ff33551a;box-shadow:0 0 12px #f353}.btn-nav{opacity:.6}.btn-nav:hover,.btn-nav:focus-visible{opacity:1;color:var(--neon-secondary);border-color:var(--neon-secondary);background:#ff00aa1a;box-shadow:0 0 12px #f0a3}.btn-nav:disabled{opacity:.2;cursor:not-allowed}.btn-nav:disabled:hover,.btn-nav:disabled:focus-visible{color:var(--text-mid);border-color:var(--border);background:transparent;box-shadow:none}.btn:active{transform:scale(.95)}.editor-body{display:flex;flex:1;min-height:140px;overflow:hidden}.line-numbers{padding:var(--s3);padding-right:var(--s2);font-size:13px;line-height:1.65;color:var(--text-low);text-align:right;user-select:none;background:#0003;border-right:1px solid var(--border);min-width:40px;overflow:hidden;white-space:pre-line}.editor-container{flex:1;position:relative;overflow:hidden}.syntax-highlight,#editor{position:absolute;top:0;left:0;width:100%;height:100%;padding:var(--s3);margin:0;font-family:var(--font-code);font-size:13px;line-height:1.65;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;tab-size:2;overflow:auto}.syntax-highlight{pointer-events:none;color:var(--text-high);z-index:1}#editor{z-index:2;color:transparent;caret-color:var(--neon-primary);background:transparent;border:none;outline:none;resize:none}#editor::placeholder{color:var(--text-low)}#editor::selection{background:#00ffcc40}.flash-overlay{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:radial-gradient(circle at center,rgba(0,255,102,.3) 0%,transparent 70%);transition:opacity .05s ease-out}.flash-overlay.flash{opacity:1}.syntax-highlight .hl-str{color:var(--neon-primary);text-shadow:0 0 8px var(--neon-primary)}.syntax-highlight .hl-fn{color:var(--neon-secondary);text-shadow:0 0 6px var(--neon-secondary)}.syntax-highlight .hl-num{color:var(--neon-tertiary);text-shadow:0 0 6px var(--neon-tertiary)}.syntax-highlight .hl-op{color:var(--neon-blue)}.syntax-highlight .hl-kw{color:#f7a;font-weight:600}.syntax-highlight .hl-cm{color:#555;font-style:italic}.syntax-highlight .hl-note{color:var(--neon-green);text-shadow:0 0 8px var(--neon-green);font-weight:600}.syntax-highlight .hl-samp{color:#a7f;text-shadow:0 0 6px #aa77ff}.syntax-highlight .hl-br{color:var(--text-mid)}.syntax-highlight .hl-plain{color:var(--text-high)}.syntax-highlight .hl-active{background:#00ff664d;outline:2px solid var(--neon-green);outline-offset:-1px;border-radius:2px;animation:pulse-glow .15s ease-out}@keyframes pulse-glow{0%{background:#0f69;box-shadow:0 0 20px var(--neon-green)}to{background:#00ff664d;box-shadow:0 0 8px var(--neon-green)}}.editor-statusbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);background:#101014e6;border-top:1px solid var(--border);border-radius:0 0 var(--r3) var(--r3);font-size:10px;color:var(--text-low)}.statusbar-item{display:flex;align-items:center;gap:var(--s1)}.statusbar-spacer{flex:1}.statusbar-item.shortcut{opacity:.5}kbd{display:inline-block;padding:1px 4px;font-family:var(--font-code);font-size:9px;background:var(--surface);border:1px solid var(--border);border-radius:3px;color:var(--text-mid)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-low);border-radius:3px}::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:focus-visible{background:var(--text-mid)}.nav-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s5);background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,transparent 100%);border-bottom:1px solid var(--border);position:relative;z-index:100}.nav-left{display:flex;align-items:center}.nav-right{display:flex;align-items:center;gap:var(--s4)}.nav-dropdown{position:relative}.nav-trigger{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r1);color:var(--text-mid);font-family:var(--font-code);font-size:11px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease}.nav-trigger:hover,.nav-trigger:focus-visible,.nav-trigger[aria-expanded=true]{color:var(--neon-primary);border-color:var(--neon-primary);background:#00ffcc0d}.nav-trigger .chevron{width:12px;height:12px;transition:transform .15s ease}.nav-trigger[aria-expanded=true] .chevron{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + var(--s2));right:0;min-width:200px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r2);box-shadow:0 10px 40px #00000080;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;z-index:1000}.nav-dropdown[data-open=true] .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu button{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s3) var(--s4);background:transparent;border:none;color:var(--text-high);font-family:var(--font-code);font-size:12px;text-align:left;cursor:pointer;transition:all .15s ease}.dropdown-menu button:first-child{border-radius:var(--r2) var(--r2) 0 0}.dropdown-menu button:last-child{border-radius:0 0 var(--r2) var(--r2)}.dropdown-menu button:hover,.dropdown-menu button:focus-visible{background:#00ffcc1a;color:var(--neon-primary)}.dropdown-menu button svg{width:16px;height:16px;color:var(--text-mid);flex-shrink:0}.dropdown-menu button:is(:hover,:focus-visible) svg{color:var(--neon-primary)}.modal-root{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:none}.modal-root[aria-hidden=false]{pointer-events:auto}.modal-backdrop{position:absolute;inset:0;background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s ease}.modal-root[aria-hidden=false] .modal-backdrop{opacity:1}.modal-container{position:relative;width:90vw;max-width:800px;max-height:85vh;background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);box-shadow:0 40px 80px #0009,0 0 60px #00ffcc1a;transform:scale(.95) translateY(20px);opacity:0;transition:all .3s cubic-bezier(.16,1,.3,1);overflow:hidden;display:flex;flex-direction:column}.modal-root[aria-hidden=false] .modal-container{transform:scale(1) translateY(0);opacity:1}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);background:var(--surface-elevated);border-bottom:1px solid var(--border);flex-shrink:0}.modal-title{font-family:var(--font-code);font-size:14px;font-weight:600;color:var(--neon-primary);text-transform:uppercase;letter-spacing:.1em}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:var(--r1);color:var(--text-mid);cursor:pointer;transition:all .15s ease}.modal-close svg{width:16px;height:16px}.modal-close:hover,.modal-close:focus-visible{color:var(--neon-red);border-color:var(--neon-red);background:#ff33551a}.modal-body{flex:1;padding:var(--s5);overflow-y:auto}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);padding:var(--s4) var(--s5);background:var(--surface-elevated);border-top:1px solid var(--border);flex-shrink:0}.modal-loading{display:flex;align-items:center;justify-content:center;padding:var(--s7);color:var(--text-mid);font-size:13px}.modal-error{padding:var(--s4);background:#ff33551a;border:1px solid var(--neon-red);border-radius:var(--r2);color:var(--neon-red);font-size:13px}.modal-footer .btn{display:inline-flex;align-items:center;justify-content:center;min-width:100px;padding:10px 20px;font-family:var(--font-code);font-size:13px;font-weight:500;border-radius:var(--r2);cursor:pointer;transition:all .15s ease;white-space:nowrap;text-align:center}.modal-footer .btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text-mid)}.modal-footer .btn-secondary:hover,.modal-footer .btn-secondary:focus-visible{border-color:var(--text-mid);color:var(--text-high);background:#ffffff08}.modal-footer .btn-primary{background:var(--neon-primary);border:1px solid var(--neon-primary);color:var(--void);font-weight:600}.modal-footer .btn-primary:hover,.modal-footer .btn-primary:focus-visible{background:#3fd;box-shadow:0 0 20px #00ffcc4d}.modal-footer .btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.modal-footer .btn-primary:disabled:hover,.modal-footer .btn-primary:disabled:focus-visible{background:var(--neon-primary)}.examples-gallery{display:flex;flex-direction:column;gap:var(--s4)}.examples-search{padding:var(--s3) var(--s4);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r2);color:var(--text-high);font-family:var(--font-code);font-size:13px;width:100%}.examples-search:focus{border-color:var(--neon-primary);outline:none;box-shadow:0 0 0 2px #00ffcc1a}.examples-search::placeholder{color:var(--text-low)}.examples-categories{display:flex;gap:var(--s2);flex-wrap:wrap}.category-tag{padding:var(--s1) var(--s3);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r1);font-family:var(--font-code);font-size:11px;color:var(--text-mid);cursor:pointer;transition:all .15s ease}.category-tag:hover,.category-tag:focus-visible,.category-tag.active{color:var(--neon-primary);border-color:var(--neon-primary);background:#00ffcc0d}.examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3);max-height:400px;overflow-y:auto}.example-card{padding:var(--s4);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r2);cursor:pointer;transition:all .2s ease}.example-card:hover,.example-card:focus-visible{border-color:var(--neon-primary);box-shadow:0 0 20px #00ffcc26;transform:translateY(-2px)}.example-name{font-family:var(--font-code);font-size:13px;font-weight:500;color:var(--text-high);margin-bottom:var(--s2)}.example-preview{font-size:11px;color:var(--text-mid);font-family:var(--font-code);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:var(--s2)}.example-tags{display:flex;gap:var(--s1);flex-wrap:wrap}.example-tag{font-size:9px;padding:2px 6px;background:var(--surface);border-radius:var(--r1);color:var(--text-mid)}.midi-converter{display:flex;flex-direction:column;gap:var(--s5)}.upload-zone{border:2px dashed var(--border);border-radius:var(--r2);padding:var(--s7);text-align:center;transition:all .2s ease;cursor:pointer}.upload-zone:hover,.upload-zone:focus-visible,.upload-zone.dragover{border-color:var(--neon-primary);background:#00ffcc0d}.upload-zone svg{width:48px;height:48px;color:var(--text-low);margin-bottom:var(--s3)}.upload-zone.dragover svg,.upload-zone:hover svg,.upload-zone:focus-visible svg{color:var(--neon-primary)}.upload-zone p{color:var(--text-mid);font-size:13px;margin-bottom:var(--s1)}.upload-zone .upload-link{color:var(--neon-primary);text-decoration:underline;cursor:pointer}.upload-hint{font-size:11px;color:var(--text-low)}.midi-info{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding:var(--s4);background:var(--surface-elevated);border-radius:var(--r2);border:1px solid var(--border)}.midi-stat{text-align:center}.midi-stat-value{font-family:var(--font-code);font-size:18px;font-weight:600;color:var(--neon-primary)}.midi-stat-label{font-size:10px;color:var(--text-low);text-transform:uppercase;letter-spacing:.1em}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}.option-group{display:flex;flex-direction:column;gap:var(--s2)}.option-label{font-size:11px;color:var(--text-mid);text-transform:uppercase;letter-spacing:.05em}.option-select,.option-input{padding:var(--s2) var(--s3);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r1);color:var(--text-high);font-family:var(--font-code);font-size:12px}.option-select:focus,.option-input:focus{border-color:var(--neon-primary);outline:none}.option-checkbox{flex-direction:row;align-items:center}.option-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--neon-primary)}.option-checkbox label{font-size:12px;color:var(--text-high);cursor:pointer}.markov-generator{display:flex;flex-direction:column;gap:var(--s5)}.markov-section{padding:var(--s4);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r2)}.markov-section-title{font-size:12px;font-weight:600;color:var(--neon-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--s3)}.pattern-type-selector{display:flex;gap:var(--s2)}.pattern-type-btn{flex:1;padding:var(--s3);background:transparent;border:1px solid var(--border);border-radius:var(--r1);color:var(--text-mid);font-family:var(--font-code);font-size:11px;text-transform:uppercase;cursor:pointer;transition:all .15s ease}.pattern-type-btn.active,.pattern-type-btn:hover,.pattern-type-btn:focus-visible{color:var(--neon-primary);border-color:var(--neon-primary);background:#00ffcc1a}.slider-group{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-label{font-size:11px;color:var(--text-mid)}.slider-value{font-family:var(--font-code);font-size:12px;color:var(--neon-primary)}.slider-input{-webkit-appearance:none;width:100%;height:4px;background:var(--surface);border-radius:2px}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--neon-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--neon-primary)}.slider-input:focus-visible{filter:brightness(1.2)}.slider-hint{font-size:10px;color:var(--text-low);margin-top:var(--s1)}.uploaded-files{margin-top:var(--s4)}.uploaded-files h4{font-size:12px;color:var(--text-mid);margin-bottom:var(--s2);text-transform:uppercase;letter-spacing:.05em}.file-list{list-style:none;padding:0;margin:0 0 var(--s3) 0}.file-list li{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s3);background:#00ffcc0d;border:1px solid var(--border);border-radius:var(--r1);margin-bottom:var(--s2)}.file-list .file-name{font-size:12px;color:var(--text-high)}.file-list .remove-file{background:none;border:none;padding:var(--s1);cursor:pointer;color:var(--text-low);transition:color .2s}.file-list .remove-file:hover,.file-list .remove-file:focus-visible{color:var(--neon-secondary)}.file-list .remove-file svg{width:14px;height:14px}.btn-small{padding:var(--s1) var(--s3);font-size:11px}.training-summary{margin-top:var(--s4);padding:var(--s4);background:#00ffcc0d;border:1px solid var(--border);border-radius:var(--r2)}.training-summary h4{font-size:12px;color:var(--text-mid);margin-bottom:var(--s3);text-transform:uppercase;letter-spacing:.05em}.summary-stats{display:flex;gap:var(--s4);flex-wrap:wrap}.summary-stats .stat{display:flex;flex-direction:column;align-items:center;min-width:60px}.summary-stats .stat-value{font-size:24px;font-weight:700;color:var(--neon-primary);font-family:var(--font-display)}.summary-stats .stat-label{font-size:10px;color:var(--text-low);text-transform:uppercase;letter-spacing:.05em}.file-tag{padding:var(--s1) var(--s3);background:#00ffcc1a;border:1px solid var(--neon-primary);border-radius:var(--r1);font-size:11px;color:var(--neon-primary)}.advanced-toggle{display:flex;align-items:center;gap:var(--s2);background:none;border:none;color:var(--text-mid);font-size:12px;cursor:pointer;padding:var(--s2) 0;margin-top:var(--s3)}.advanced-toggle:hover,.advanced-toggle:focus-visible{color:var(--text-high)}.advanced-toggle .chevron{width:14px;height:14px;transition:transform .2s}.advanced-toggle.open .chevron{transform:rotate(180deg)}.advanced-content{padding-top:var(--s3);border-top:1px solid var(--border);margin-top:var(--s3)}.markov-output{background:var(--void);border:1px solid var(--border);border-radius:var(--r2);padding:var(--s4);font-family:var(--font-code);font-size:12px;line-height:1.6;max-height:200px;overflow-y:auto;color:var(--text-high);white-space:pre-wrap}@media(max-width:768px){header,.nav-header{padding:var(--s2) var(--s3);gap:var(--s2)}.nav-left{flex:1;min-width:0;gap:var(--s2)}.nav-right{flex-shrink:0;gap:var(--s2)}.logo{font-size:14px;white-space:nowrap}.metrics{gap:var(--s2)}.metric{min-width:45px;padding:var(--s1) var(--s2)}.metric-value{font-size:13px}.metric-label{font-size:8px}.nav-dropdown{display:none}.queue-indicator{font-size:10px;padding:var(--s1) var(--s2)}.status{padding:var(--s1) var(--s2)}.status-text{font-size:10px}main{flex-direction:column;padding:0}.editor-panel{max-width:100%;margin:var(--s2);flex:1;min-height:0;border-radius:var(--r2)}.editor-wrapper{min-height:200px}#editor{font-size:14px!important}.editor-chrome{padding:var(--s2) var(--s3)}.editor-title{font-size:11px}.songs-panel{position:fixed;top:0;left:0;bottom:0;width:85vw;max-width:320px;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1000;border-right:1px solid var(--border);box-shadow:4px 0 30px #000c}.songs-panel.mobile-open{transform:translate(0)}.mobile-overlay{position:fixed;inset:0;background:#0009;z-index:999;opacity:0;pointer-events:none;transition:opacity .3s ease}.mobile-overlay.visible{opacity:1;pointer-events:auto}.mobile-menu-toggle{display:flex!important;align-items:center;justify-content:center;width:36px;height:36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);color:var(--text-high);cursor:pointer;margin-right:var(--s2)}.mobile-menu-toggle svg{width:20px;height:20px}.statusbar-item.shortcut,.songs-panel-toggle,.chrome-dots{display:none}.panel-categories{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--s1)}.panel-categories::-webkit-scrollbar{display:none}.panel-category{flex-shrink:0;white-space:nowrap}.panel-queue{min-height:100px;max-height:150px}.btn{width:36px;height:36px}.btn svg{width:16px;height:16px}.btn-nav{width:32px;height:32px}.editor-statusbar{padding:var(--s2) var(--s3)}.line-numbers{font-size:12px;min-width:32px;padding:var(--s3) var(--s1)}.modal-container{width:95vw;max-height:90vh}.modal-footer{flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s4)}.modal-footer .btn{flex:1 1 auto;min-width:80px;padding:12px 16px;font-size:14px}.options-grid,.examples-grid{grid-template-columns:1fr}.pattern-type-selector{flex-wrap:wrap}.summary-stats{justify-content:space-around}.panel-song-tags{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.panel-song-tags::-webkit-scrollbar{display:none}.panel-song-tag{flex-shrink:0}.panel-song{padding:var(--s3) var(--s3);margin-bottom:4px;border-radius:var(--r2)}.panel-song-name{font-size:13px;margin-bottom:2px}.panel-song-meta{font-size:11px}.panel-song-queue,.panel-song-share{opacity:.6}.panel-song:is(:hover,:focus-within) .panel-song-queue,.panel-song:is(:hover,:focus-within) .panel-song-share,.panel-song:is(:hover,:focus-within) .panel-song-strudel{opacity:1}}@media(max-width:374px){.logo{font-size:12px}.logo-wasm{display:none}.metric{min-width:40px}.metric-value{font-size:12px}.status-text{display:none}}.mobile-menu-toggle{display:none}.songs-panel{width:260px;min-width:260px;background:#0a0a0db3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width .2s ease,min-width .2s ease;z-index:10}.songs-panel.collapsed{width:48px;min-width:48px}.songs-panel.collapsed .songs-panel-content,.songs-panel.collapsed .songs-panel-header h3 span{display:none}.songs-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);background:var(--surface)}.songs-panel-header h3{display:flex;align-items:center;gap:var(--s2);font-size:12px;font-weight:600;color:var(--neon-secondary);text-transform:uppercase;letter-spacing:.5px}.songs-panel-header h3 svg{width:16px;height:16px}.songs-panel-toggle{width:24px;height:24px;border:none;background:transparent;color:var(--text-mid);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--r1);transition:all .15s ease}.songs-panel-toggle:hover,.songs-panel-toggle:focus-visible{color:var(--text-high);background:var(--surface-hover)}.songs-panel-toggle svg{width:16px;height:16px;transition:transform .2s ease}.songs-panel.collapsed .songs-panel-toggle svg{transform:rotate(180deg)}.songs-panel-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.panel-search{padding:var(--s3);border-bottom:1px solid var(--border)}.panel-search-input{width:100%;padding:var(--s2) var(--s3);background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r1);color:var(--text-high);font-family:var(--font-code);font-size:11px}.panel-search-input:focus{border-color:var(--neon-primary);outline:none}.panel-search-input::placeholder{color:var(--text-low)}.panel-categories{display:flex;gap:var(--s1);padding:var(--s2) var(--s3);flex-wrap:wrap;border-bottom:1px solid var(--border)}.panel-category{padding:2px 8px;background:transparent;border:1px solid var(--border);border-radius:var(--r1);font-family:var(--font-code);font-size:10px;color:var(--text-low);cursor:pointer;transition:all .15s ease}.panel-category:hover,.panel-category:focus-visible,.panel-category.active{color:var(--neon-primary);border-color:var(--neon-primary);background:#00ffcc0d}.panel-songs{flex:1;overflow-y:auto;padding:var(--s2)}.panel-empty{text-align:center;padding:var(--s4);color:var(--text-low);font-size:11px}.panel-song{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s3);margin-bottom:2px;border-radius:var(--r1);cursor:pointer;transition:background .15s ease}.panel-song:hover,.panel-song:focus-visible{background:var(--surface-hover)}.panel-song-info{min-width:0;flex:1}.panel-song-name{display:block;font-size:12px;color:var(--text-high);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-song-meta{display:block;font-size:10px;color:var(--text-low);margin-top:2px}.panel-song-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.panel-song-tag{display:inline-block;font-size:9px;padding:1px 5px;border-radius:8px;background:#00ffcc1a;color:var(--neon-primary);border:1px solid rgba(0,255,204,.2);white-space:nowrap;cursor:pointer;transition:all .15s ease}.panel-song-tag:hover,.panel-song-tag:focus-visible{background:#00ffcc40;border-color:#00ffcc80;transform:scale(1.05)}.panel-song-tag-more{display:inline-block;font-size:9px;padding:1px 5px;border-radius:8px;background:#ffffff0d;color:var(--text-low);white-space:nowrap}.panel-song:is(:hover,:focus-within) .panel-song-tag{background:#00ffcc26;border-color:#00ffcc4d}.panel-song-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}.panel-song-queue,.panel-song-share{width:22px;height:22px;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--text-low);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s ease;flex-shrink:0}.panel-song:is(:hover,:focus-within) .panel-song-queue,.panel-song:is(:hover,:focus-within) .panel-song-share,.panel-song:is(:hover,:focus-within) .panel-song-strudel{opacity:1}.panel-song-queue:hover,.panel-song-queue:focus-visible{border-color:var(--neon-secondary);color:var(--neon-secondary);background:#ff00aa1a}.panel-song-share:hover,.panel-song-share:focus-visible{border-color:var(--neon-blue);color:var(--neon-blue);background:#00aaff1a}.panel-song-share.copied{border-color:var(--neon-green);color:var(--neon-green);background:#00ff6626;opacity:1}.panel-song-queue svg,.panel-song-share svg{width:12px;height:12px}.panel-queue{border-top:1px solid var(--border);padding:var(--s3);background:var(--surface);min-height:120px;max-height:200px;display:flex;flex-direction:column;transition:background .15s ease,border-color .15s ease}.panel-queue:not(.has-items){opacity:.8}.panel-queue.drag-over{background:#ff00aa14;border-color:var(--neon-secondary)}.panel-queue-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}.queue-title{font-size:11px;font-weight:600;color:var(--text-mid);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:var(--s2)}.queue-badge{padding:0 5px;background:var(--neon-secondary);color:var(--void);border-radius:8px;font-size:9px;font-weight:600}.queue-actions{display:flex;gap:var(--s1)}.queue-play-btn,.queue-clear-btn{width:22px;height:22px;border-radius:var(--r1);background:transparent;border:none;color:var(--text-mid);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.queue-play-btn:hover,.queue-play-btn:focus-visible:not(:disabled){color:var(--neon-green);background:#00ff661a}.queue-play-btn:disabled{opacity:.3;cursor:not-allowed}.queue-clear-btn:hover,.queue-clear-btn:focus-visible{color:var(--neon-red);background:#ff33551a}.queue-play-btn svg,.queue-clear-btn svg{width:12px;height:12px}.panel-queue-items{flex:1;overflow-y:auto}.queue-empty{text-align:center;padding:var(--s4);color:var(--text-low);font-size:11px;font-style:italic;flex:1;display:flex;align-items:center;justify-content:center;border:2px dashed var(--border);border-radius:var(--r2);margin-top:var(--s2);transition:border-color .15s ease,color .15s ease}.panel-queue.drag-over .queue-empty{border-color:var(--neon-secondary);color:var(--neon-secondary)}.queue-item{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2);border-radius:var(--r1);cursor:pointer;transition:background .15s ease;margin-bottom:2px}.queue-item:hover,.queue-item:focus-visible{background:var(--surface-hover)}.queue-item.now-playing{background:#00ffcc1a}.queue-item-num{font-size:10px;color:var(--text-low);width:14px;text-align:center}.queue-item.now-playing .queue-item-num{color:var(--neon-primary);font-weight:600}.queue-item-name{flex:1;font-size:11px;color:var(--text-high);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item-remove{width:18px;height:18px;border-radius:var(--r1);background:transparent;border:none;color:var(--text-low);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s ease}.queue-item:is(:hover,:focus-within) .queue-item-remove,.queue-item:is(:hover,:focus-within) .queue-item-drag{opacity:1}.queue-item-remove:hover,.queue-item-remove:focus-visible{color:var(--neon-red);background:#ff33551a}.queue-item-remove svg{width:10px;height:10px}.queue-item-drag{width:14px;display:flex;align-items:center;justify-content:center;color:var(--text-low);cursor:grab;opacity:.5;flex-shrink:0}.queue-item-drag:active{cursor:grabbing}.queue-item-drag svg{width:10px;height:10px}.queue-item:is(:hover,:focus-within) .queue-item-drag{opacity:1}.panel-song.dragging,.queue-item.dragging{opacity:.5}.panel-queue-items.drag-over{background:#ff00aa0d;border-radius:var(--r1)}.panel-song{cursor:grab}.panel-song:active{cursor:grabbing}.queue-indicator{padding:var(--s1) var(--s3);background:#ff00aa26;border:1px solid var(--neon-secondary);border-radius:var(--r1);font-size:11px;color:var(--neon-secondary);font-family:var(--font-code)}.dropdown-divider{height:1px;background:var(--border);margin:var(--s2) 0}.footer-left{display:flex;gap:var(--s2);margin-right:auto}.footer-left .btn svg{width:14px;height:14px;margin-right:var(--s1)}.site-footer{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s2) var(--s4);background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--border);font-size:11px;color:var(--text-low);z-index:100}.site-footer a{color:var(--text-mid);text-decoration:none;transition:color .15s ease}.site-footer a:hover,.site-footer a:focus-visible{color:var(--neon-primary)}.footer-sep{color:var(--text-low);opacity:.5}.footer-license{color:var(--text-low);font-size:10px}.panel-song-strudel{width:22px;height:22px;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--text-low);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s ease;flex-shrink:0}.panel-song:is(:hover,:focus-within) .panel-song-strudel{opacity:1}.panel-song-strudel:hover,.panel-song-strudel:focus-visible{border-color:var(--neon-tertiary);color:var(--neon-tertiary);background:#ffcc001a}.panel-song-strudel svg{width:12px;height:12px}main{padding-bottom:32px}@media(max-width:768px){.site-footer{padding:var(--s1) var(--s3);font-size:10px;gap:var(--s1)}.footer-license{font-size:9px}}