:root{color-scheme:light;--ink: #202020;--muted: #606060;--surface: #ffffff;--surface-raised: #fafafd;--canvas: #f0f1f2;--line: #f0f1f2;--line-subtle: #e5e5e5;--control-border: #d8d8d866;--hover: #e3e3e5;--accent: #0069cc;--accent-dark: #0063c1;--success: #16825d;--warning: #895503;--error: #ad0707;--error-surface: #fdeded;--editor-bg: #ffffff;--editor-ink: #202020;--editor-muted: #606060;--editor-active: #eaeaea40;--selection: #0069cc40;--whitespace: #60606080;--divider: #f0f1f2;--divider-handle: #b8b8b8;--status-bg: #fafafd;--status-fg: #606060;--status-border: #f0f1f2;--status-hover: #e3e3e5;--status-active: #0069cc;--status-active-fg: #ffffff;--status-pending: #526f8a;--status-success: #16825d;--status-warning: #895503;--status-error: #ad0707;--preview-shadow: rgba(32, 32, 32, .12);--scrollbar: #64646466;--syntax-comment: #6e7781;--syntax-string: #0a3069;--syntax-number: #098658;--syntax-keyword: #cf222e;--syntax-function: #8250df;--syntax-type: #267f99;--syntax-variable: #953800}:root[data-theme=quiet-light]{--ink: #333333;--muted: #6d705b;--surface: #f5f5f5;--surface-raised: #ececec;--canvas: #e7e7e7;--line: #d4d4d4;--line-subtle: #dedede;--control-border: #c8c8c8;--hover: #e4f6d4;--accent: #705697;--accent-dark: #604782;--success: #448c27;--warning: #9c5d27;--error: #cd3131;--error-surface: #f8e8e8;--editor-bg: #f5f5f5;--editor-ink: #333333;--editor-muted: #6d705b;--editor-active: #e4f6d466;--selection: #c9d0d9;--whitespace: #777777;--divider: #d4d4d4;--divider-handle: #9769dc;--status-bg: #705697;--status-fg: #ffffff;--status-border: #604782;--status-hover: #ffffff22;--status-active: #9769dc;--status-active-fg: #ffffff;--status-pending: #ffffff;--status-success: #ffffff;--status-warning: #ffffff;--status-error: #ffffff;--preview-shadow: rgba(51, 51, 51, .16)}*{box-sizing:border-box;letter-spacing:0}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--ink);background:var(--canvas);font-family:Bahnschrift,Noto Sans SC,Microsoft YaHei UI,sans-serif}*{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .6s ease-out}*:hover{scrollbar-color:var(--scrollbar) transparent;transition-duration:.1s}button{color:inherit;font:inherit}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.app-shell{display:grid;grid-template-rows:minmax(0,1fr) 30px;height:100vh}.view-switch,.preview-tools,.backend-tabs,.pane-tabs{display:flex;align-items:center}.preview-tools[hidden]{display:none}.backend-tab,.compile-button{min-height:30px;border:0;cursor:pointer}.view-switch{align-self:stretch;overflow:hidden;border-right:1px solid var(--status-border)}.view-switch button,.theme-button{min-height:30px;padding:0 9px;border:0;border-right:1px solid var(--status-border);color:var(--status-fg);background:transparent;font-size:11px;cursor:pointer}.view-switch button:last-child{border-right:0}.view-switch button:hover,.theme-button:hover{background:var(--status-hover)}.view-switch button[aria-pressed=true]{color:var(--status-active-fg);background:var(--status-active)}.theme-control{position:relative;align-self:stretch;border-right:1px solid var(--status-border)}.theme-button{min-width:101px;height:100%}.theme-button:after{margin-left:7px;content:"⌃";font-size:9px}.theme-menu{position:absolute;z-index:40;bottom:calc(100% + 5px);left:4px;display:grid;width:126px;padding:4px;border:1px solid var(--control-border);border-radius:4px;color:var(--ink);background:var(--surface);box-shadow:0 -7px 22px var(--preview-shadow)}.theme-menu[hidden]{display:none}.theme-menu button{min-height:30px;padding:0 8px;border:0;border-radius:3px;text-align:left;color:inherit;background:transparent;font-size:11px;cursor:pointer}.theme-menu button:hover,.theme-menu button:focus-visible{background:var(--hover)}.theme-menu button[aria-checked=true]:before{margin-right:7px;color:var(--accent);content:"✓"}.theme-menu button[aria-checked=false]{padding-left:23px}.workspace{--editor-width: 40%;display:grid;grid-template-columns:minmax(280px,var(--editor-width)) 7px minmax(320px,1fr);min-width:0;min-height:0}.workspace[data-view=editor],.workspace[data-view=preview]{grid-template-columns:minmax(0,1fr)}.workspace[data-view=editor] .preview-panel,.workspace[data-view=editor] .workspace-divider,.workspace[data-view=preview] .editor-panel,.workspace[data-view=preview] .workspace-divider{display:none}.editor-panel,.preview-panel{min-width:0;min-height:0}.editor-panel{display:grid;grid-template-rows:40px minmax(0,1fr);background:var(--editor-bg)}.preview-panel{display:grid;grid-template-rows:40px minmax(0,1fr);container-type:inline-size;background:var(--canvas)}.pane-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:0 10px;border-bottom:1px solid var(--line);background:var(--surface-raised)}.pane-tabs{align-self:stretch;min-width:0}.pane-tab{display:flex;align-items:center;align-self:stretch;gap:8px;min-width:0;padding:0 12px;border:0;border-right:1px solid var(--line-subtle);border-bottom:2px solid transparent;color:var(--muted);background:transparent;font-size:12px;font-weight:600;cursor:pointer}.pane-tab:hover{color:var(--ink);background:var(--hover)}.pane-tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);background:var(--surface)}.file-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--accent)}.source-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-icon{color:var(--accent);font-size:9px}.tab-badge{display:grid;min-width:18px;height:18px;padding:0 5px;place-items:center;border-radius:9px;color:var(--muted);background:var(--hover);font-family:Cascadia Mono,monospace;font-size:9px}.pane-tab[data-severity=error] .tab-badge{color:#fff;background:var(--error)}.pane-tab[data-severity=warning] .tab-badge{color:#fff;background:var(--warning)}.source-size{color:var(--muted);font-family:Cascadia Mono,monospace;font-size:10px;white-space:nowrap}.pane-stack,.source-pane,.editor-host,.preview-pane{min-width:0;min-height:0;height:100%}.pane-stack,.source-pane,.preview-pane{overflow:hidden}[role=tabpanel][hidden]{display:none}.cm-editor .cm-selectionLayer .cm-selectionBackground{background:var(--selection)!important}.cm-editor .cm-content ::selection{background:var(--selection)}.cm-editor[data-has-selection=true] .cm-activeLine{background:transparent}.cm-selected-space,.cm-selected-tab{position:relative}.cm-selected-space:after,.cm-selected-tab:after{position:absolute;inset:0;color:var(--whitespace);line-height:inherit;pointer-events:none}.cm-selected-space:after{content:"·";text-align:center}.cm-selected-tab:after{content:"→";text-align:left}.workspace-divider{position:relative;z-index:5;cursor:col-resize;touch-action:none;background:var(--divider)}.workspace-divider:after{position:absolute;top:50%;left:2px;width:3px;height:36px;border-radius:2px;background:var(--divider-handle);content:"";transform:translateY(-50%)}.workspace-divider:hover,.workspace-divider:focus-visible,.resizing .workspace-divider{background:var(--hover)}.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.playback-pane,.problems-pane{height:100%;min-width:0;min-height:0;background:var(--surface)}.playback-scroll{height:100%;overflow:auto;padding:24px}.problems-summary,.section-heading,.voice-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.problems-summary h2{margin:2px 0 0;font-family:Georgia,"Noto Serif SC",serif;font-size:21px}.section-kicker{color:var(--accent);font-size:9px;font-weight:700}.playback-status{display:block;width:100%;max-width:620px;min-height:34px;margin:0 auto 8px;padding:7px 10px;overflow:hidden;border:1px solid var(--line-subtle);border-radius:3px;color:var(--muted);text-align:left;text-overflow:ellipsis;white-space:nowrap;background:var(--surface-raised);font-size:10px}.playback-status[data-state=warning]{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 32%,transparent);cursor:pointer}.playback-status[data-state=error]{color:var(--error);border-color:color-mix(in srgb,var(--error) 32%,transparent)}.playback-status[data-state=error]:not(:disabled){cursor:pointer}.control-section{max-width:620px;margin:0 auto;padding:17px 0;border-top:1px solid var(--line-subtle)}.section-heading{min-height:28px;margin-bottom:12px}.section-heading h3{margin:0;font-size:12px}.section-heading span,.switch-label,.voice-title span{color:var(--muted);font-size:10px}.transport-controls{display:flex;gap:8px}.transport-button{display:grid;width:36px;height:34px;place-items:center;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer}.transport-button.primary,.voice-actions button[aria-pressed=true]{color:#fff;border-color:var(--accent);background:var(--accent)}.transport-button:disabled,.playback-pane input:disabled,.playback-pane select:disabled{opacity:.52;cursor:not-allowed}.playback-progress{width:100%;height:24px;margin:9px 0 12px;accent-color:var(--accent);cursor:pointer}.parameter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.parameter-grid .full{grid-column:1 / -1}.parameter-grid label,.field-label{display:grid;gap:6px;color:var(--muted);font-size:10px}.playback-pane input[type=number],.playback-pane select{width:100%;height:32px;padding:0 9px;border:1px solid var(--line);border-radius:3px;color:var(--ink);background:var(--surface-raised)}.range-label{display:grid;grid-template-columns:52px minmax(0,1fr) 40px;align-items:center;gap:8px;color:var(--muted);font-size:10px}.range-label input{accent-color:var(--accent)}.range-label output{color:var(--ink);text-align:right;font-family:Cascadia Mono,monospace}.mixer-tracks{display:grid;gap:8px}.voice-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:13px;border-left:3px solid var(--accent);background:var(--surface-raised)}.voice-title{align-items:baseline}.voice-actions{display:flex;gap:4px}.voice-actions button{width:28px;height:26px;border:1px solid var(--line);background:var(--surface);font-size:10px;cursor:pointer}.voice-strip .full,.voice-strip .field-label{grid-column:1 / -1}.problems-pane{display:grid;grid-template-rows:auto minmax(0,1fr)}.problems-summary{min-height:72px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--surface-raised)}.problems-summary>span{color:var(--muted);font-size:10px}.diagnostics-panel{min-height:0;overflow:auto;background:var(--surface)}.diagnostics-panel[data-empty=false] .diagnostics-empty{display:none}.diagnostics-empty{display:grid;gap:5px;padding:42px 20px;text-align:center;color:var(--muted)}.diagnostics-empty strong{color:var(--ink);font-size:13px}.diagnostics-empty span{font-size:11px}.diagnostic-row{display:grid;grid-template-columns:3px auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:46px;padding:9px 14px 9px 0;border:0;border-bottom:1px solid var(--line-subtle);text-align:left;background:transparent;cursor:pointer}.diagnostic-row:hover{background:var(--hover)}.diagnostic-row:before{align-self:stretch;background:var(--warning);content:""}.diagnostic-row[data-severity=error]:before{background:var(--error)}.diagnostic-code,.diagnostic-position{font-family:Cascadia Mono,monospace;font-size:10px}.diagnostic-row[data-severity=error] .diagnostic-code{color:var(--error)}.diagnostic-row[data-severity=warning] .diagnostic-code{color:var(--warning)}.diagnostic-message{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.diagnostic-position{color:var(--muted)}.result-toolbar{padding:0 12px 0 0}.compile-button{display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:4px;color:#fff;background:var(--accent);font-size:12px;font-weight:700}.compile-button:hover{background:var(--accent-dark)}.compile-button span{font-size:9px}.preview-tools{gap:7px}.tool-button{min-height:30px;padding:0 9px;border:1px solid var(--control-border);border-radius:4px;color:var(--muted);background:var(--surface);font-size:10px;cursor:pointer}.tool-button:hover{color:var(--ink);background:var(--hover)}.zoom-control,.export-control{position:relative}.zoom-button{min-width:52px;font-family:Cascadia Mono,monospace}.zoom-menu,.export-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);box-shadow:0 8px 24px var(--preview-shadow)}.zoom-menu{z-index:20;display:grid;width:max-content;padding:4px;border:1px solid var(--line);border-radius:4px}.zoom-menu[hidden],.export-menu[hidden]{display:none}.zoom-menu button{min-height:28px;padding:0 8px;border:0;border-radius:3px;text-align:center;color:var(--ink);background:transparent;font-family:Cascadia Mono,monospace;font-size:10px;cursor:pointer}.zoom-menu button:hover,.zoom-menu button:focus-visible{background:var(--hover)}.zoom-menu-separator{height:1px;margin:4px;background:var(--line-subtle)}.backend-tabs{overflow:hidden;border:1px solid var(--line);border-radius:4px}.backend-tab{padding:0 10px;border-right:1px solid var(--line);color:var(--muted);background:var(--surface);font-family:Cascadia Mono,monospace;font-size:10px}.backend-tab:last-child{border-right:0}.backend-tab[aria-selected=true]{color:#fff;background:var(--accent)}@container (max-width: 446px){.backend-tabs{display:none}}.export-button{display:grid;width:32px;padding:0;border:0;place-items:center;color:#fff;background:var(--accent)}.export-button:hover{color:#fff;background:var(--accent-dark)}.export-button svg{display:block}.export-menu{z-index:30;width:276px;overflow:hidden;border:1px solid var(--control-border);border-radius:5px;box-shadow:0 12px 30px var(--preview-shadow)}.export-menu-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 14px 11px;border-bottom:1px solid var(--line-subtle)}.export-menu-header strong{font-family:Georgia,"Noto Serif SC",serif;font-size:15px}.export-menu-header span{color:var(--muted);font-size:9px}.export-ppi{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:40px;margin:4px 0;padding:5px 10px;border-top:1px solid var(--line-subtle);border-bottom:1px solid var(--line-subtle);color:var(--muted);background:var(--surface-raised);font-size:10px}.export-ppi-input{display:flex;align-items:center;gap:6px}.export-ppi input{width:62px;height:30px;padding:0 7px;border:1px solid var(--control-border);border-radius:3px;color:var(--ink);background:var(--surface);font-family:Cascadia Mono,monospace;font-size:11px}.export-formats{display:grid;padding:4px}.export-formats button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:36px;padding:0 10px;border:0;border-radius:3px;text-align:left;background:transparent;cursor:pointer}.export-formats button:hover,.export-formats button:focus-visible{background:var(--hover)}.export-formats button:disabled{opacity:.52;cursor:wait}.export-formats strong{font-family:Cascadia Mono,monospace;font-size:11px}.export-formats span{color:var(--muted);font-size:9px}.preview-scroll{height:100%;min-width:0;min-height:0;overflow:auto;scrollbar-gutter:stable;padding:24px 0;background-color:var(--canvas);background-image:radial-gradient(color-mix(in srgb,var(--muted) 22%,transparent) .55px,transparent .55px);background-size:9px 9px}.preview-host{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px;width:max-content;min-width:100%;min-height:100%}.preview-page{position:relative;flex:0 0 auto;line-height:0}.preview-page>svg,.preview-page>canvas{display:block;border:1px solid var(--line);box-shadow:0 7px 24px var(--preview-shadow);-webkit-user-select:none;user-select:none}.preview-overlay{position:absolute;inset:0;overflow:hidden;pointer-events:none}.preview-focus-ripple{--focus-diameter: 64px;position:absolute;width:var(--focus-diameter);height:var(--focus-diameter);border-radius:50%;transform:translate(-50%,-50%)}.preview-playback-cursor{position:absolute;border-radius:2px;background:color-mix(in srgb,var(--accent) 20%,transparent);transition:left 80ms linear,top 80ms linear,width 80ms linear,height 80ms linear}.preview-focus-ripple:before,.preview-focus-ripple:after{position:absolute;inset:0;border:2px solid color-mix(in srgb,var(--accent) 82%,#ffffff);border-radius:inherit;content:"";animation:preview-focus-wave .7s cubic-bezier(.16,.72,.22,1) forwards}.preview-focus-ripple:after{animation-delay:.11s}@keyframes preview-focus-wave{0%{opacity:0;transform:scale(.18)}18%{opacity:.95}to{opacity:0;transform:scale(1)}}.preview-error{max-width:720px;margin:0 auto;padding:16px;border-left:3px solid var(--error);color:var(--error);background:var(--error-surface);font-family:Cascadia Mono,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap}.statusbar{display:flex;align-items:center;gap:0;min-width:0;min-height:30px;overflow:visible;border-top:1px solid var(--status-border);color:var(--status-fg);background:var(--status-bg);font-family:Cascadia Mono,monospace;font-size:11px;white-space:nowrap}.status-results{display:flex;align-items:center;align-self:stretch;min-width:0;margin-left:auto;overflow:hidden}.status-item,.status-message{padding:0 9px}.status-item{overflow:hidden;border-right:1px solid var(--status-border);text-overflow:ellipsis}.status-message{align-self:stretch;border:0;border-right:1px solid var(--status-border);color:inherit;background:transparent;font-family:inherit;font-size:inherit;cursor:pointer}.status-message:hover{background:var(--status-hover)}.status-message[data-state=pending]{color:var(--status-pending)}.status-message[data-state=ok]{color:var(--status-success)}.status-message[data-state=warning]{color:var(--status-warning)}.status-message[data-state=error]{color:var(--status-error)}.drop-overlay{position:fixed;z-index:100;inset:0;display:grid;padding:20px;place-items:center;pointer-events:none;background:color-mix(in srgb,var(--canvas) 76%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.drop-overlay[hidden]{display:none}.drop-overlay:before{position:absolute;inset:18px;border:2px dashed var(--accent);content:""}.drop-message{z-index:1;display:grid;min-width:min(340px,calc(100vw - 64px));padding:28px 34px;place-items:center;border:1px solid var(--control-border);border-radius:6px;color:var(--ink);background:var(--surface);box-shadow:0 12px 36px var(--preview-shadow)}.drop-icon{display:grid;width:42px;height:42px;margin-bottom:14px;place-items:center;border-radius:50%;color:#fff;background:var(--accent);font-family:Cascadia Mono,monospace;font-size:25px}.drop-icon:before{content:"↓"}.drop-message strong{font-size:16px}.drop-message>span:last-child{margin-top:7px;color:var(--muted);font-size:11px}.drop-overlay[data-state=rejected]{background:color-mix(in srgb,var(--error-surface) 88%,transparent)}.drop-overlay[data-state=rejected]:before,.drop-overlay[data-state=rejected] .drop-message{border-color:var(--error)}.drop-overlay[data-state=rejected] .drop-icon{background:var(--error)}.drop-overlay[data-state=rejected] .drop-icon:before{content:"×"}.drop-overlay[data-state=rejected] .drop-message strong{color:var(--error)}.drop-overlay[data-state=pending] .drop-icon{color:var(--ink);background:var(--hover)}.print-host{display:none}@media(max-width:800px){html,body{height:auto;min-height:100%;overflow:auto}.app-shell{display:block;height:auto;min-height:100vh;padding-bottom:30px}.workspace,.workspace[data-view=editor],.workspace[data-view=preview]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(480px,58vh) minmax(480px,72vh)}.workspace[data-view] .editor-panel,.workspace[data-view] .preview-panel{display:grid}.workspace-divider{display:none}.editor-panel{border-bottom:1px solid var(--line)}.preview-scroll{padding:14px 0}.playback-scroll{padding:18px}.statusbar{position:fixed;z-index:30;right:0;bottom:0;left:0}}@media(max-width:480px){.source-size{display:none}.pane-tab{padding:0 9px}.preview-panel{grid-template-rows:80px minmax(0,1fr)}.result-toolbar{flex-wrap:wrap;gap:0;padding:0 6px}.result-toolbar>.pane-tabs{height:40px}.preview-tools{width:100%;height:40px;justify-content:flex-end;border-top:1px solid var(--line)}.compile-button{padding:0 9px;font-size:0}.compile-button span{font-size:9px}.diagnostic-row{grid-template-columns:3px auto minmax(0,1fr)}.diagnostic-position{display:none}.parameter-grid{grid-template-columns:minmax(0,1fr)}.theme-button{min-width:87px;padding:0 6px;font-size:10px}.status-item{padding:0 6px}#layoutStats{max-width:120px}}@media print{html,body{width:auto;height:auto;overflow:visible;background:#fff}.print-ready .app-shell{display:none!important}.print-ready .print-host{display:block}.print-host>svg{display:block;width:100%;height:auto;break-after:page;page-break-after:always}.print-host>svg:last-child{break-after:auto;page-break-after:auto}}