:root{color:#202124;font-synthesis:none;text-rendering:optimizelegibility;background:#f6f7f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.theme-light{--app-bg:#f6f7f8;--panel-bg:#fff;--panel-border:#d7dce3;--subtle-border:#e3e7ed;--text:#202124;--muted-text:#5c6878;--control-bg:#fff;--control-text:#18212f;--control-border:#b8c0cc;--control-hover-bg:#f0f4f8;--control-hover-border:#50627a;--play-control:#16803a;--play-control-bg:#edf8f0;--play-control-border:#71b989;--stop-control:#c92c2c;--stop-control-bg:#fff0f0;--stop-control-border:#e07d7d;--diagnostics-bg:#fff9f3}.theme-dark{--app-bg:#17191f;--panel-bg:#22262f;--panel-border:#3a4250;--subtle-border:#343b47;--text:#e8edf5;--muted-text:#a5afbf;--control-bg:#2c3340;--control-text:#f8fafc;--control-border:#596577;--control-hover-bg:#384252;--control-hover-border:#8b9bb1;--play-control:#58d27d;--play-control-bg:#1d3728;--play-control-border:#458a5b;--stop-control:#ff7a7a;--stop-control-bg:#432426;--stop-control-border:#9c5555;--diagnostics-bg:#2d261b}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{border:1px solid var(--control-border);background:var(--control-bg);color:var(--control-text);cursor:pointer;border-radius:6px;padding:8px 12px}button:hover:not(:disabled){border-color:var(--control-hover-border);background:var(--control-hover-bg)}button:disabled{cursor:not-allowed;opacity:.55}.icon-button{place-items:center;width:38px;height:38px;padding:0;display:inline-grid}.playback-button{border-color:var(--control-hover-border)}.play-button{color:var(--play-control);background:var(--play-control-bg);border-color:var(--play-control-border)}.stop-button{color:var(--stop-control);background:var(--stop-control-bg);border-color:var(--stop-control-border)}.toolbar-icon{fill:currentColor;width:22px;height:22px}.toolbar-icon-play,.toolbar-icon-stop{width:26px;height:26px}.toolbar-icon-cutout{fill:var(--control-bg)}.app-shell{min-height:100vh;color:var(--text);background:var(--app-bg);flex-direction:column;display:flex}.topbar{border-bottom:1px solid var(--panel-border);background:var(--panel-bg);justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 24px;display:flex}.topbar h1{margin:0;font-size:22px}.topbar p{color:var(--muted-text);margin:6px 0 0}.actions,.examples-grid{gap:8px;display:flex}.actions{flex-wrap:wrap;justify-content:flex-end;align-items:center}.export-menu{position:relative}.export-menu summary{border:1px solid var(--control-border);background:var(--control-bg);color:var(--control-text);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;align-items:center;padding:8px 12px;list-style:none;display:inline-flex}.export-menu summary.icon-button{padding:0;display:inline-grid}.export-menu summary::-webkit-details-marker{display:none}.export-menu summary:not(.icon-button):after{content:"";border-top:5px solid;border-left:4px solid #0000;border-right:4px solid #0000;width:0;height:0;margin-left:8px}.export-menu[open] summary,.export-menu summary:hover{border-color:var(--control-hover-border);background:var(--control-hover-bg)}.export-menu-items{z-index:10;border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:8px;gap:6px;min-width:132px;padding:8px;display:grid;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 28px #0f172a2e}.export-menu-items button{text-align:left;width:100%}.export-status{color:var(--muted-text);margin:2px 4px 0;font-size:12px;line-height:1.4}.number-control,.select-control,.range-control,.checkbox-control,.color-control,.text-control{color:var(--muted-text);align-items:center;gap:8px;font-size:14px;display:inline-flex}.number-control input{border:1px solid var(--control-border);width:92px;color:var(--control-text);background:var(--control-bg);border-radius:6px;padding:8px 10px}.text-control input,.select-control select{border:1px solid var(--control-border);width:220px;color:var(--control-text);background:var(--control-bg);border-radius:6px;padding:8px 10px}.range-control input{width:120px}.range-control span{width:38px;color:var(--muted-text);font-variant-numeric:tabular-nums}.checkbox-control input{width:16px;height:16px}.color-control input{border:1px solid var(--control-border);background:var(--control-bg);border-radius:6px;width:40px;height:36px;padding:3px}.workspace{grid-template-columns:minmax(280px, var(--editor-pane-percent,45%)) 12px minmax(280px, 1fr);flex:1;gap:0;min-height:0;padding:16px;display:grid}.editor-panel,.preview-panel,.settings-panel,.examples-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px}.panel-title h2{margin:0;font-size:15px}.editor-panel,.preview-panel{flex-direction:column;min-width:0;display:flex}.workspace-resizer{cursor:col-resize;touch-action:none;min-width:12px;position:relative}.workspace-resizer:before{content:"";background:var(--panel-border);border-radius:1px;width:2px;position:absolute;top:0;bottom:0;left:5px}.workspace-resizer:hover:before,.workspace-resizer:focus-visible:before,.workspace-resizer:active:before{background:var(--control-hover-border)}.workspace-resizer:focus-visible{outline:2px solid var(--control-hover-border);outline-offset:2px}.settings-panel,.examples-panel{margin:16px 16px 0}.settings-sections{padding:0 14px}.settings-section{padding:14px 0}.settings-section+.settings-section{border-top:1px solid var(--subtle-border)}.settings-section h3{color:var(--muted-text);margin:0 0 12px;font-size:13px}.settings-grid{flex-wrap:wrap;justify-content:flex-start;gap:12px 18px;display:flex}.settings-grid.page-settings-grid .select-control select{width:180px}.settings-grid.page-settings-grid .number-control input{width:96px}.settings-grid .select-control select{width:min(280px,100%)}.settings-grid button{justify-self:start}.settings-note{color:var(--muted-text);margin:0;font-size:13px;line-height:1.4}.settings-warnings{background:var(--diagnostics-bg);color:#8a5b00;border:1px solid #8a5b0047;border-radius:6px;margin-top:12px;padding:8px 10px}.settings-warnings p{margin:0;font-size:13px;line-height:1.4}.settings-warnings p+p{margin-top:4px}.examples-grid{flex-wrap:wrap;padding:14px}.score-warning-overlay{z-index:40;background:#0f172a6b;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.score-warning-dialog{border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:8px;width:min(520px,100%);padding:18px;box-shadow:0 20px 40px #0f172a47}.score-warning-dialog h2{margin:0 0 8px;font-size:16px}.score-warning-dialog p{color:var(--muted-text);margin:0;line-height:1.5}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.danger-action{color:#b3261e;border-color:#b3261e}.danger-action:hover:not(:disabled){background:#fbe9e7;border-color:#8f1d15}.panel-title{border-bottom:1px solid var(--subtle-border);justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.panel-title span{color:var(--muted-text);font-size:13px}.panel-title-actions{align-items:center;gap:8px;display:inline-flex}.panel-title-actions button{padding:5px 9px;font-size:13px}.panel-title .status-ok{color:#2f6f3e}.panel-title .status-warning{color:#8a5b00}.panel-title .status-error{color:#b3261e}.editor-field{background:var(--panel-bg);--editor-font-size:14px;flex:1;grid-template-columns:minmax(44px,max-content) minmax(0,1fr);min-height:520px;display:grid;position:relative}.editor-hide-line-numbers{grid-template-columns:minmax(0,1fr)}.editor-line-numbers,.editor-current-line,.editor-highlights,textarea{font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:var(--editor-font-size);font-variant-ligatures:none;font-feature-settings:"liga" 0, "calt" 0;line-height:1.55}.editor-line-numbers{color:var(--muted-text);background:var(--app-bg);border-right:1px solid var(--subtle-border);text-align:right;-webkit-user-select:none;user-select:none;padding:14px 10px;overflow:hidden}.editor-line-number-row{grid-template-columns:10px minmax(2ch,1fr);align-items:start;gap:7px;min-width:44px;display:grid}.editor-line-number-text{min-width:2ch}.editor-line-number-row.current .editor-line-number-text{color:var(--text);font-weight:700}.editor-gutter-diagnostic,.editor-gutter-spacer{width:8px;height:8px;margin-top:.55em;display:block}.editor-gutter-diagnostic{cursor:pointer;border:0;border-radius:50%;padding:0}.editor-gutter-diagnostic.error{color:#b3261e;background:#b3261e;box-shadow:0 0 0 2px #b3261e2e}.editor-gutter-diagnostic.warning{color:#8a5b00;background:#8a5b00;box-shadow:0 0 0 2px #8a5b002e}.editor-gutter-diagnostic:hover,.editor-gutter-diagnostic:focus-visible{outline-offset:2px;outline:2px solid}.editor-source-layer{min-width:0;position:relative}.editor-current-line,.editor-highlights{pointer-events:none;tab-size:4;scrollbar-gutter:stable;border:0;margin:0;padding:14px;position:absolute;inset:0;overflow:hidden}.editor-wrap .editor-current-line,.editor-wrap .editor-highlights{overflow-wrap:anywhere;white-space:pre-wrap}.editor-nowrap .editor-current-line,.editor-nowrap .editor-highlights{white-space:pre}.editor-current-line{color:#0000;background:0 0}.editor-current-line span{width:fit-content;min-width:100%;min-height:1.55em;display:block}.editor-current-line .current{background:#60a5fa1f}.editor-hide-current-line .editor-current-line .current{background:0 0}.editor-highlights{z-index:2;color:#0000;background:0 0}.editor-highlights:after{content:" "}.diagnostic-highlight{color:#0000;pointer-events:none;border-radius:2px}.diagnostic-highlight.error{background:#b3261e38;box-shadow:0 0 0 1px #b3261e4d}.diagnostic-highlight.warning{background:#8a5b0038;box-shadow:0 0 0 1px #8a5b004d}textarea{z-index:1;resize:vertical;width:100%;height:100%;min-height:520px;color:var(--text);tab-size:4;scrollbar-gutter:stable;background:0 0;border:0;outline:0;flex:1;padding:14px;position:relative}.editor-wrap textarea{overflow-wrap:anywhere;white-space:pre-wrap}.editor-nowrap textarea{overflow-wrap:normal;white-space:pre}.diagnostics{border-top:1px solid var(--subtle-border);background:var(--diagnostics-bg);padding:8px 14px}.diagnostics p{margin:4px 0;font-family:Cascadia Code,Consolas,monospace;font-size:13px}.diagnostics button{color:inherit;font:inherit;text-align:left;background:0 0;border:0;padding:0}.diagnostics button:hover,.diagnostics button:focus-visible{text-decoration:underline}.diagnostics .error{color:#b3261e}.diagnostics .warning{color:#8a5b00}.preview-scroll{flex:1;padding:16px;overflow:auto}.preview-notice{color:#b3261e;background:var(--diagnostics-bg);border:1px solid #b3261e59;border-radius:10px;margin:0 0 12px;padding:10px 12px;font-size:13px}.score-svg{color:#111827;width:100%}.score-svg svg{background:#fff;max-width:100%;height:auto;display:block}.score-svg [data-note-index]{pointer-events:auto}@media (width<=980px){.topbar{flex-direction:column}.workspace{grid-template-columns:1fr;gap:16px}.workspace-resizer{display:none}.editor-field,textarea{min-height:360px}}