#print-root{display:none}@media print{html,body{background:0 0!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important}body{display:block!important}body>:not(#print-root){display:none!important}#print-root{break-inside:avoid;page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden;margin:0!important;padding:0!important;display:block!important;position:static!important}#print-root>svg{width:100%;height:100%;display:block}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#efede8;--side:#f7f6f3;--surface:#fff;--border:#e3dfd7;--border-strong:#d2ccc1;--text:#1c1e21;--muted:#5f646b;--accent:#2d6a55;--accent-strong:#22533f;--accent-soft:#e4efe9;--accent-ring:#2d6a5538;--danger:#b3261e;--danger-soft:#fcecea;--danger-line:#f1c3be;--warning:#7d5300;--warning-soft:#fdf4dd;--warning-line:#efdba6;--shadow-sm:0 1px 2px #281e0a0f;--shadow-md:0 1px 3px #281e0a14, 0 6px 18px #281e0a12;--radius:12px;--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-code:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.app{grid-template-areas:"header header""banner banner""side main";grid-template-columns:clamp(300px, var(--side-width,clamp(340px, 30%, 440px)), calc(100% - 400px)) minmax(0, 1fr);grid-template-rows:auto auto minmax(0,1fr);height:100dvh;display:grid}.app-header{background:var(--surface);border-bottom:1px solid var(--border);grid-area:header;justify-content:space-between;align-items:center;gap:16px;padding:10px 18px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.logo{width:30px;height:30px;color:var(--accent);flex:none}.brand h1{letter-spacing:-.01em;margin:0;font-size:16px;font-weight:700;line-height:1.2}.tagline{color:var(--muted);margin:0;font-size:12.5px;line-height:1.2}.share{align-items:center;gap:12px;min-width:0;display:flex}.share-note{max-width:250px;color:var(--muted);text-align:right;margin:0;font-size:12px;line-height:1.35}.banner{background:var(--warning-soft);border-bottom:1px solid var(--warning-line);color:#5a3c00;grid-area:banner;margin:0;padding:9px 18px;font-size:13px}.side{background:var(--side);border-right:1px solid var(--border);flex-direction:column;grid-area:side;gap:14px;min-height:0;padding:16px;display:flex;overflow-y:auto}.splitter{z-index:5;cursor:col-resize;touch-action:none;outline:none;grid-area:main;justify-self:start;width:10px;margin-left:-3px;position:relative}.splitter:before,.splitter:after{content:"";position:absolute}.splitter:before{background:var(--accent);opacity:0;width:3px;transition:opacity .15s;top:0;bottom:0;left:1px}.splitter:after{border:1px solid var(--border-strong);background:var(--surface);border-radius:3px;width:6px;height:36px;transition:border-color .15s,background-color .15s;top:50%;left:-.5px;transform:translateY(-50%)}.splitter:hover:before,.splitter:focus-visible:before,.app.is-resizing .splitter:before{opacity:1;transition-delay:60ms}.splitter:hover:after,.splitter:focus-visible:after,.app.is-resizing .splitter:after{border-color:var(--accent);background:var(--accent-soft)}.app.is-resizing,.app.is-resizing *{cursor:col-resize;-webkit-user-select:none;user-select:none}.main{flex-direction:column;grid-area:main;min-width:0;min-height:0;display:flex}.btn{border:1px solid var(--border-strong);background:var(--surface);white-space:nowrap;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:7px;height:34px;padding:0 14px;font-size:13.5px;font-weight:600;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.btn:hover:not(:disabled){background:#f5f3ef}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{border-color:var(--accent);background:var(--accent);color:#fff}.btn.primary:hover:not(:disabled),.btn.primary.is-done{border-color:var(--accent-strong);background:var(--accent-strong)}.btn.ghost{color:var(--muted);background:0 0;border-color:#0000}.btn.ghost:hover:not(:disabled){color:var(--text);background:#0000000d}.btn.small{height:30px;padding:0 10px;font-size:12.5px}.btn.icon-only{width:30px;height:30px;padding:0}.icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:16px;height:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-direction:column;gap:10px;padding:14px;display:flex}.card-title{margin:0;font-size:15px;font-weight:650}.chatbot{flex-direction:column;gap:8px;display:flex}.card-hint{color:var(--muted);margin:0;font-size:12.5px}.card-actions,.card-foot{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.prompt-fallback{border:1px solid var(--border-strong);width:100%;min-height:92px;font:12px/1.45 var(--font-code);resize:vertical;background:#fdfcfa;border-radius:8px;padding:10px 12px}.prompt-fallback:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);outline:none}.prompt-status,.editor-status{color:var(--accent-strong);margin:0;font-size:12.5px}.prompt-status:empty,.editor-status:empty{display:none}.prompt-status[data-tone=error]{color:var(--danger)}.editor-status{color:var(--muted);margin-left:auto}.editor{flex:1 0 auto}.code{border:1px solid var(--border-strong);background:#fdfcfa;border-radius:8px;flex:1 0 auto;min-height:260px;display:flex;position:relative;overflow:hidden}.code:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}.editor:has(.has-errors) .code:not(:focus-within){border-color:var(--danger-line)}.gutter{border-right:1px solid var(--border);color:#aaa59c;width:38px;font:12px/20px var(--font-code);text-align:right;-webkit-user-select:none;user-select:none;background:#f4f2ee;flex:none;padding:10px 0;overflow:hidden}.gutter-lines>div{padding-right:8px}.gutter-lines>.has-error{background:var(--danger-soft);color:var(--danger);font-weight:700}.gutter-lines>.has-warning{color:var(--warning);font-weight:700}.code-input{min-width:0;font:12px/20px var(--font-code);white-space:pre;resize:none;tab-size:2;background:0 0;border:0;outline:none;flex:1;margin:0;padding:10px 12px;overflow:auto}.diagnostics{flex-direction:column;gap:4px;display:flex}.diagnostics.has-errors,.diagnostics.has-warnings{border-radius:8px;padding:8px}.diagnostics.has-errors{background:var(--danger-soft);border:1px solid var(--danger-line);animation:.6s ease-out flag}.diagnostics.has-warnings{background:var(--warning-soft);border:1px solid var(--warning-line)}@keyframes flag{0%{box-shadow:0 0 0 4px #b3261e2e}to{box-shadow:0 0 #b3261e00}}.diag-summary{margin:0;padding:0 4px;font-size:12.5px;font-weight:600}.diag-summary:empty{display:none}.has-errors .diag-summary{color:var(--danger)}.has-warnings .diag-summary{color:var(--warning)}.diag-list{gap:2px;max-height:168px;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.diag-list:empty{display:none}.diag{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:baseline;gap:10px;width:100%;padding:5px 6px;display:flex}.diag:hover{background:#0000000d}.diag-line{min-width:52px;color:var(--danger);font:600 11.5px/18px var(--font-code);flex:none}.diag.warning .diag-line{color:var(--warning)}.diag-message{font-size:13px;line-height:18px}.options{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 16px;display:flex}.fields,.toggles{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.toggles{gap:6px}.field{align-items:center;gap:7px;display:inline-flex}.field label{color:var(--muted);font-size:12.5px}.field select{border:1px solid var(--border-strong);appearance:none;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235f646b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center/12px no-repeat;border-radius:8px;height:32px;padding:0 28px 0 10px;font-size:13.5px}.field select:disabled{opacity:.55;cursor:not-allowed}.toggle{border:1px solid var(--border-strong);-webkit-user-select:none;user-select:none;cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;font-size:13px;transition:background-color .15s,border-color .15s;display:inline-flex}.toggle:hover{border-color:#b9b2a5}.toggle input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0}.toggle:has(input:checked){background:var(--accent-soft);color:var(--accent-strong);border-color:#b5d1c4}.toggle:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.toggle input:focus-visible{outline:none}.preview{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.notices{flex-wrap:wrap;gap:6px;margin:0;padding:10px 16px 0;list-style:none;display:flex}.notices:empty{display:none}.notice{border:1px solid var(--warning-line);background:var(--warning-soft);color:var(--warning);border-radius:999px;align-items:center;gap:6px;padding:4px 10px 4px 8px;font-size:12.5px;display:inline-flex}.notice .icon{width:14px;height:14px}.viewport-wrap{flex:1;min-height:0;position:relative}.viewport{cursor:grab;-webkit-user-select:none;user-select:none;outline:none;position:absolute;inset:0;overflow:hidden}.viewport:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}.viewport.is-dragging{cursor:grabbing}.stage{transform-origin:0 0;background:#fff;transition:opacity .2s,filter .2s;position:absolute;top:0;left:0;box-shadow:0 2px 5px #281e0a29,0 30px 80px #281e0a3d}.stage>svg{width:100%;height:100%;display:block}.viewport.is-stale .stage{opacity:.4;filter:grayscale(.7)}.stale-badge{background:var(--danger);max-width:calc(100% - 32px);box-shadow:var(--shadow-md);color:#fff;text-align:center;pointer-events:none;border-radius:999px;margin:0;padding:6px 14px;font-size:12.5px;font-weight:600;display:none;position:absolute;top:14px;left:50%;transform:translate(-50%)}.viewport.is-stale .stale-badge{display:block}.placeholder{color:var(--muted);text-align:center;pointer-events:none;place-items:center;margin:0;padding:32px;font-size:14px;display:grid;position:absolute;inset:0}.zoom-bar{border:1px solid var(--border);box-shadow:var(--shadow-md);background:#fffffff0;border-radius:10px;align-items:center;gap:2px;padding:3px;display:flex;position:absolute;bottom:14px;right:14px}.zoom-level{min-width:44px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;font-size:12px}.export-bar{background:var(--surface);border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;display:flex}.export-buttons{flex-wrap:wrap;gap:6px;display:flex}.export-feedback{flex:1;align-items:center;gap:10px;min-width:200px;display:flex}.export-progress{width:96px;height:6px;accent-color:var(--accent)}.export-status{color:var(--accent-strong);margin:0;font-size:12.5px}.export-status[data-tone=error]{color:var(--danger)}.export-note{color:var(--muted);flex-basis:100%;margin:0;font-size:12px}@media (width<=860px){.app{flex-direction:column;height:auto;min-height:100dvh;display:flex}.app-header{z-index:10;padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top));flex-wrap:wrap;gap:6px 12px;position:sticky;top:0}.tagline{display:none}.share{display:contents}.share-note{text-align:left;flex-basis:100%;order:3;max-width:none;font-size:11.5px}.banner{padding:8px 12px}.side{border-right:0;border-bottom:1px solid var(--border);gap:10px;padding:12px;overflow:visible}.splitter{display:none}.code{min-height:240px}.gutter{display:none}.code-input{white-space:pre-wrap;overflow-wrap:anywhere;line-height:22px}.code-input,.field select{font-size:16px}.options{flex-direction:column;align-items:stretch;gap:10px;padding:10px 12px 12px}.fields{grid-template-columns:1fr 1fr;gap:8px 10px;display:grid}.field{flex-direction:column;align-items:stretch;gap:3px}.field label{font-size:11.5px;font-weight:600}.field select{width:100%;min-width:0;height:38px}.preview{flex:none;height:min(80vh,150vw)}.export-bar{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}