:root{--accent:#0f766e;--accent-soft:#0f766e29;--bg:#f6f7fb;--border:#d8dee9;--button-bg:#fff;--code-bg:#101828;--code-text:#e5edf8;--control-bg:#eef2f7;--muted:#64748b;--preview-bg:#fff;--surface:#fff;--text:#475569;--text-strong:#0f172a;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--text);background:var(--bg);font:16px/1.45 var(--sans);font-synthesis:none;letter-spacing:0;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;margin:0}.app-shell{min-height:100svh;padding:28px}body.preview-fullscreen-active{overflow:hidden}.topbar{justify-content:space-between;align-items:flex-end;gap:20px;max-width:1500px;margin:0 auto 22px;display:flex}.eyebrow,.panel-kicker{color:var(--muted);letter-spacing:0;text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:700}h1,h2{color:var(--text-strong);margin:0}h1{font-size:30px;line-height:1.15}h2{font-size:16px;line-height:1.25}button{background:var(--button-bg);border:1px solid var(--border);color:var(--text-strong);cursor:pointer;font:600 14px/1 var(--sans);border-radius:7px;align-items:center;gap:7px;min-height:36px;padding:0 12px;display:inline-flex}button:hover:not(:disabled){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.5}.topbar-actions,.button-row,.output-controls{flex-wrap:wrap;gap:8px;display:flex}.download-control{display:inline-flex;position:relative}.download-control>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.download-control .dropdown-trigger{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:34px;padding:0 8px}.download-menu{background:var(--surface);border:1px solid var(--border);z-index:4;border-radius:8px;gap:3px;min-width:92px;padding:5px;display:grid;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 10px 24px #0f172a29}.download-menu button{background:0 0;border-color:#0000;justify-content:flex-start;min-height:30px}.download-menu button:hover,.download-menu button.active{background:var(--control-bg);box-shadow:none}.output-controls{justify-content:flex-end;align-items:center}.segmented-control{background:var(--control-bg);border:1px solid var(--border);border-radius:8px;gap:2px;padding:3px;display:inline-flex}.segmented-control button{background:0 0;border-color:#0000;min-height:30px;padding:0 10px}.segmented-control button:hover:not(:disabled){box-shadow:none;border-color:#0000}.segmented-control button.active{background:var(--surface);border-color:var(--border);color:var(--accent);box-shadow:0 1px 3px #0f172a1a}.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;max-width:1500px;margin:0 auto;display:grid}.output-panel{grid-column:1/-1}.panel,.preview-section{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 35px #0f172a0f}.panel{flex-direction:column;min-height:520px;display:flex;overflow:hidden}.panel-header,.preview-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:14px;min-height:68px;padding:14px 16px;display:flex}textarea{background:var(--code-bg);color:var(--code-text);font:13px/1.5 var(--mono);resize:vertical;tab-size:4;border:0;outline:none;flex:1;width:100%;min-height:360px;padding:16px}textarea:focus{box-shadow:inset 0 0 0 2px var(--accent)}.code-output{min-height:360px}.result-display{flex:1;min-height:360px;display:grid}.result-display.mode-both{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.result-display.mode-code,.result-display.mode-preview{grid-template-columns:1fr}.result-display .code-output,.result-display .result-preview{border-top:1px solid var(--border);height:100%}.result-display.mode-both .result-preview{border-left:1px solid var(--border)}.status,.status-list{border-top:1px solid var(--border)}.status{color:var(--text);white-space:pre-wrap;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:10px 16px;font-size:13px;display:flex}.status.success{color:#065f46;background:#ecfdf5}.status.warning{color:#92400e;background:#fffbeb}.status.error{color:#991b1b;background:#fef2f2;display:block}.merge-summary{color:#3730a3;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;align-items:center;gap:7px;margin:14px 0 0;padding:7px 11px;font-size:13px;font-weight:700;display:inline-flex}.preview-canvas{background:linear-gradient(90deg, #94a3b81c 1px, transparent 1px), linear-gradient(#94a3b81c 1px, transparent 1px), var(--preview-bg);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background-size:24px 24px;height:360px;min-height:360px;padding:24px;position:relative;overflow:hidden}.preview-canvas.is-dragging{cursor:grabbing}.preview-fullscreen-overlay{background:var(--preview-bg);overscroll-behavior:contain;z-index:20;position:fixed;inset:0}.preview-canvas.fullscreen-preview{border:0;width:100vw;height:100svh;min-height:100svh;padding:28px}.preview-tools{border:1px solid var(--border);z-index:2;background:#fffffff0;border-radius:8px;align-items:center;gap:6px;padding:5px;display:flex;position:absolute;top:14px;right:14px;box-shadow:0 8px 24px #0f172a1f}.preview-tools button{min-height:30px;padding:0 9px}.zoom-level{color:var(--text-strong);text-align:center;min-width:45px;font-size:12px;font-weight:700}.drag-hint{color:#fff;z-index:2;background:#0f172ab8;border-radius:999px;align-items:center;gap:6px;padding:7px 10px;font-size:12px;font-weight:700;display:inline-flex;position:absolute;bottom:14px;left:14px}.svg-wrap{cursor:inherit;width:100%;height:100%;display:block}.svg-wrap svg{max-width:none;height:auto;display:block}.empty-preview{color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:360px;font-size:14px;font-weight:700;display:flex}@media (width<=1180px){.workspace,.result-display.mode-both{grid-template-columns:1fr}.result-display.mode-both .result-preview{border-left:0}.panel{min-height:430px}}@media (width<=720px){.app-shell{padding:16px}.topbar,.panel-header,.preview-header{flex-direction:column;align-items:stretch}h1{font-size:24px}.topbar-actions,.button-row,.output-controls,.segmented-control{width:100%}.segmented-control button{flex:1}button{justify-content:center}.topbar-actions button,.button-row button{flex:1}.preview-canvas{height:360px;min-height:360px;padding:14px}.preview-canvas.fullscreen-preview{height:100svh;min-height:100svh;padding:16px}}