:root{color:#202421;font-synthesis:none;letter-spacing:0;--bg:#f4f5f3;--surface:#fff;--surface-muted:#eef0ed;--border:#d4d9d4;--border-strong:#b8c0ba;--text:#202421;--text-muted:#68716b;--accent:#146b4f;--accent-hover:#0e593f;--code-bg:#151a17;--code-text:#dce6df;--code-muted:#7f8d84;--warning:#9a5b0b;--warning-soft:#fff1d4;--error:#ac322d;--error-soft:#fde5e2;--note:#42627b;--note-soft:#e3eef5;--focus:#278665;background:#f4f5f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;letter-spacing:0}html,body{background:var(--bg);min-width:320px;min-height:100%;margin:0}body{min-height:100dvh}button,select,textarea{font:inherit}button,select{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,pre:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.app-shell{grid-template-rows:60px minmax(0,1fr);height:100dvh;min-height:100dvh;display:grid;overflow:hidden}.topbar{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;gap:16px;padding:0 16px;display:flex}.brand-block,.topbar-actions,.panel-tools,.primary-button,.toggle-button,.icon-button{align-items:center;display:flex}.brand-block{gap:10px;min-width:0}.brand-mark{color:#fff;background:#174c3b;border:1px solid #174c3b;border-radius:5px;place-items:center;width:32px;height:32px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:12px;font-weight:700;display:grid}.brand-name{font-size:16px;font-weight:740;line-height:1.1}.brand-subtitle{color:var(--text-muted);margin-top:2px;font-size:11px;line-height:1.1}.topbar-actions{gap:10px}.primary-button{border:1px solid var(--accent);color:#fff;background:var(--accent);cursor:pointer;border-radius:5px;justify-content:center;gap:7px;min-width:104px;height:34px;padding:0 13px;font-size:12px;font-weight:680}.primary-button:hover:not(:disabled){border-color:var(--accent-hover);background:var(--accent-hover)}.primary-button:disabled{cursor:progress;opacity:.65}.button-icon,.icon-button span,.diagnostic-icon{display:inline-flex}.workspace{grid-template-columns:minmax(0,1fr) 7px minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.preview-stage[hidden]{display:none}.preview-header{z-index:1;color:var(--code-text);background:#101411;border-bottom:1px solid #303832;justify-content:space-between;align-items:center;gap:16px;padding:0 14px;display:flex;position:absolute;top:0;left:0;right:0}.preview-header>div{align-items:baseline;gap:9px;display:flex}.preview-header .panel-kicker{color:#7ee2b8}.preview-title{font-size:12px;font-weight:680}.preview-status{color:#aeb9b2;text-overflow:ellipsis;white-space:nowrap;max-width:min(65vw,720px);font-family:SFMono-Regular,Consolas,monospace;font-size:10px;overflow:hidden}.preview-status[data-state=ready]{color:#7ee2b8}.preview-status[data-state=error]{color:#ff9c92}.preview-stage{background:#0a0d0b;min-height:0;position:absolute;inset:0;overflow:hidden}#previewCanvas{width:100%;height:100%;display:block}.preview-message{color:#ffd8d4;white-space:pre-wrap;background:#35100ee8;border:1px solid #dd5b518c;border-radius:4px;max-height:calc(100% - 24px);padding:10px 12px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.45;position:absolute;bottom:12px;left:12px;right:12px;overflow:auto}.workspace.show-ir{grid-template-columns:minmax(0,1.03fr) 7px minmax(0,.97fr) 7px minmax(0,1.08fr)}.panel{border-right:1px solid var(--border);background:var(--surface);grid-template-rows:55px minmax(0,1fr) 29px;min-width:0;min-height:0;display:grid;container-type:inline-size}.panel:last-child{border-right:0}.ir-panel{display:none}.workspace.show-ir .ir-panel{display:grid}.pane-divider{z-index:2;border:0;border-right:1px solid var(--border);border-left:1px solid var(--border);background:var(--surface-muted);cursor:col-resize;touch-action:none;width:7px;min-width:7px;display:block;position:relative}.pane-divider:after{border-right:1px solid var(--border-strong);border-left:1px solid var(--border-strong);content:"";width:1px;height:34px;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.pane-divider:hover,.pane-divider:focus-visible,.workspace.is-resizing .pane-divider{background:#dfeae4}.pane-divider:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.ir-divider{display:none}.workspace.show-ir .ir-divider{display:block}.workspace.is-resizing,.workspace.is-resizing *{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.output-panel{grid-template-rows:55px minmax(180px,1fr) minmax(128px,31%)}.panel-header{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:0 14px 0 13px;display:flex;overflow:hidden}.panel-title-group{flex-direction:column;flex:auto;justify-content:center;min-width:0;display:flex;overflow:hidden}.panel-kicker{color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:700;line-height:1.15}.panel-title,.flavor-select{margin-top:3px;font-size:13px;font-weight:680;line-height:1.25}.flavor-select{cursor:pointer;background-color:#0000;border:0;border-radius:0;width:min(175px,100%);height:22px;padding:0 23px 0 0}.example-select{border:1px solid var(--border);background:var(--surface);text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:4px;width:128px;height:30px;padding:0 24px 0 8px;font-size:11px;font-weight:650;overflow:hidden}.example-select:hover:not(:disabled){background:var(--surface-muted)}.example-select:disabled{cursor:progress;opacity:.65}.panel-tools{flex:none;gap:4px;min-width:0}.output-panel .panel-header{padding-right:17px}.panel-stat{color:var(--text-muted);white-space:nowrap;margin-right:3px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:10px}.icon-button{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;justify-content:center;width:30px;height:30px;padding:0}.icon-button:hover{border-color:var(--border);background:var(--surface-muted)}.github-link{color:inherit;text-decoration:none}.toggle-button{border:1px solid var(--border);background:var(--surface);white-space:nowrap;cursor:pointer;border-radius:5px;justify-content:center;gap:7px;height:34px;padding:0 10px;font-size:12px;font-weight:650}.toggle-button:hover{background:var(--surface-muted)}.toggle-button[aria-pressed=true]{color:var(--accent);background:#e6f2ed;border-color:#8ab7a4}.topbar-icon-button{border-color:var(--border);background:var(--surface)}.topbar-icon-button[aria-pressed=true]{color:var(--accent);background:#e6f2ed;border-color:#8ab7a4}.editor-stage,.code-stage{background:var(--code-bg);min-width:0;min-height:0;position:relative;overflow:hidden}.code-output,.monaco-host{width:100%;height:100%;color:var(--code-text);background:var(--code-bg);font-variant-ligatures:none;tab-size:4;border:0;border-radius:0;margin:0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.62}.code-output::selection{color:#fff;background:#356f5b}.code-output{white-space:pre;padding:15px 16px 80px;overflow:auto}.word-wrap .code-output{white-space:pre-wrap;overflow-wrap:anywhere}.code-output:empty:before{color:var(--code-muted);content:attr(data-placeholder)}.json-output{color:#cde2d5}.drop-overlay{color:#d9f5e7;pointer-events:none;background:#0f3125eb;border:1px dashed #71b999;border-radius:5px;place-content:center;place-items:center;gap:8px;font-size:13px;font-weight:680;display:none;position:absolute;inset:10px}.source-panel.is-dragging .drop-overlay{display:grid}.source-toast{z-index:3;color:#d9f5e7;overflow-wrap:anywhere;background:#0f3125f0;border:1px solid #79a993;border-radius:4px;max-width:calc(100% - 24px);padding:8px 10px;font-size:11px;line-height:1.35;position:absolute;bottom:12px;right:12px}.source-toast[data-state=error]{color:#ffd8d4;background:#35100ef0;border-color:#d7685f}.source-toast[hidden]{display:none}.panel-footer{border-top:1px solid var(--border);min-width:0;color:var(--text-muted);background:var(--surface-muted);white-space:nowrap;justify-content:space-between;align-items:center;gap:10px;padding:0 12px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:9px;display:flex}.panel-footer span{text-overflow:ellipsis;overflow:hidden}.source-panel .panel-footer{justify-content:flex-end}.diagnostics-panel{border-top:1px solid var(--border);background:#fafbfa;min-height:0;overflow:hidden}.diagnostics-header{border-bottom:1px solid var(--border);height:34px;color:var(--text-muted);text-transform:uppercase;justify-content:space-between;align-items:center;padding:0 12px;font-size:10px;font-weight:760;display:flex}.diagnostics-count{border:1px solid var(--border);background:var(--surface);border-radius:4px;place-items:center;min-width:20px;height:18px;padding:0 5px;font-family:SFMono-Regular,Consolas,monospace;display:grid}.diagnostics-list{height:calc(100% - 34px);margin:0;padding:0;list-style:none;overflow:auto}.diagnostics-panel[data-empty=true] .diagnostics-list:before{color:var(--text-muted);content:"No diagnostics";padding:12px;font-size:11px;display:block}.diagnostic{border-bottom:1px solid #e3e6e3;grid-template-columns:18px minmax(0,1fr);gap:5px;padding:9px 11px;font-size:11px;display:grid}.diagnostic-error{background:var(--error-soft)}.diagnostic-warning{background:var(--warning-soft)}.diagnostic-note{background:var(--note-soft)}.diagnostic-error .diagnostic-icon{color:var(--error)}.diagnostic-warning .diagnostic-icon{color:var(--warning)}.diagnostic-note .diagnostic-icon{color:var(--note)}.diagnostic-body{min-width:0}.diagnostic-heading{justify-content:space-between;gap:8px;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;font-weight:760;display:flex}.diagnostic-location{color:var(--text-muted);white-space:nowrap;font-weight:500}.diagnostic-message{color:#333a35;overflow-wrap:anywhere;margin-top:3px;line-height:1.35}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1050px){.panel-header{padding-left:10px}.panel-stat{display:none}}@container (width<=390px){.panel-stat{display:none}.example-select{width:92px}}@container (width<=330px){.panel-header{gap:7px;padding-left:10px;padding-right:10px}.output-panel .panel-header{padding-right:12px}.example-select{width:82px;padding-left:6px}}@media (width<=900px){.app-shell{height:auto;display:block;overflow:visible}.topbar{z-index:5;height:58px;position:sticky;top:0}.workspace{display:block;overflow:visible}.pane-divider,.workspace.show-ir .pane-divider{display:none}.panel,.output-panel{border-right:0;border-bottom:1px solid var(--border-strong);grid-template-rows:55px minmax(420px,62vh) 29px;min-height:504px}.output-panel{grid-template-rows:55px minmax(420px,62vh) minmax(150px,auto)}.diagnostics-panel{min-height:150px;max-height:300px}.diagnostics-list{max-height:266px}}@media (width<=520px){.topbar{padding:0 10px}.brand-subtitle{display:none}.primary-button{min-width:96px}.toggle-button{width:30px;padding:0}.toggle-label{display:none}.panel-footer{padding:0 10px}.code-output{font-size:11px}}@media (width<=390px){.brand-block>div:last-child{display:none}.topbar-actions{gap:4px}.primary-button{width:34px;min-width:34px;padding:0}.primary-button>span:last-child{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}