:root{--accent:#1f6f61;--accent-contrast:#fff;--brand-tile:#f7d154;--brand-bg:#dff0ed;--danger:#b42318;--drop-bg:#eef8f6;--focus:#1f6f6140;--page-bg:#eef2f5;--panel-bg:#f9fbfc;--panel-alt-bg:#f7faf8;--control-bg:#fff;--input-bg:#fff;--textarea-bg:#fcfdfe;--text:#111827;--text-strong:#111827;--text-muted:#64748b;--text-subtle:#475569;--button-text:#334155;--icon-text:#344054;--border:#c9d2dc;--border-strong:#c4cfd9;--border-soft:#d7dfe7;--shadow:0 8px 24px #2b364414;color:var(--text);background:var(--page-bg);font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html[data-theme=dark]{--accent:#58c4ae;--accent-contrast:#10201d;--brand-tile:#e5b93d;--brand-bg:#183b35;--danger:#ff9b8f;--drop-bg:#17342f;--focus:#58c4ae47;--page-bg:#171716;--panel-bg:#24231f;--panel-alt-bg:#1f2924;--control-bg:#302e28;--input-bg:#302e28;--textarea-bg:#1d1d1b;--text:#e8e4dc;--text-strong:#fbf7ef;--text-muted:#ada79d;--text-subtle:#c5bfb4;--button-text:#e7e0d4;--icon-text:#e7e0d4;--border:#4b4740;--border-strong:#5e594f;--border-soft:#3f3b35;--shadow:0 8px 24px #0000003d}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,label,input,textarea{font:inherit}button{cursor:pointer}.shell{grid-template-rows:auto auto 1fr;gap:12px;min-height:100vh;padding:18px;display:grid}.shell[data-dragging=true] .editor-panel:first-child{border-color:var(--accent);background:var(--drop-bg);box-shadow:0 0 0 4px var(--focus), var(--shadow)}.topbar,.settings,.editor-panel{border:1px solid var(--border);background:var(--panel-bg);box-shadow:var(--shadow);border-radius:8px}.topbar{justify-content:space-between;align-items:center;gap:16px;padding:14px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand__mark{border:2px solid var(--accent);background:linear-gradient(90deg, transparent 48%, var(--accent) 48% 52%, transparent 52%), linear-gradient(var(--brand-tile) 0 0) 50% 50% / 17px 17px no-repeat, var(--brand-bg);border-radius:8px;flex:none;width:36px;height:36px}h1{overflow-wrap:anywhere;color:var(--text-strong);margin:0;font-size:1.15rem;font-weight:700;line-height:1.15}p{overflow-wrap:anywhere;color:var(--text-muted);margin:4px 0 0;font-size:.9rem}p[data-state=error]{color:var(--danger)}.actions,.settings,.tabs,.theme-control{align-items:center;gap:8px;display:flex}.actions{flex-wrap:wrap;justify-content:flex-end}.ghost-button,.icon-button,.primary-button,.theme-button{border-radius:8px;justify-content:center;align-items:center;min-height:38px;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.icon-button{border:1px solid var(--border-strong);background:var(--control-bg);width:38px;color:var(--icon-text)}.primary-button,.ghost-button,.theme-button{border:1px solid #0000;gap:8px;padding:0 12px;font-weight:700}.primary-button{background:var(--accent);color:var(--accent-contrast)}.ghost-button{border-color:var(--border-strong);background:var(--control-bg);color:var(--button-text)}.theme-control{border:1px solid var(--border-strong);background:var(--control-bg);border-radius:8px;min-height:38px;padding:2px}.theme-button{width:34px;min-height:32px;color:var(--icon-text);background:0 0;border-radius:6px;padding:0}.theme-button[data-active=true]{background:var(--accent);color:var(--accent-contrast)}button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}svg{stroke-width:2.1px;width:18px;height:18px}.settings{flex-wrap:wrap;padding:10px}.settings label{min-height:38px;color:var(--text-subtle);align-items:center;gap:8px;font-size:.9rem;font-weight:650;display:inline-flex}.settings input[type=number]{border:1px solid var(--border-strong);background:var(--input-bg);width:78px;height:34px;color:var(--text-strong);border-radius:8px;padding:0 8px}.toggle{border:1px solid var(--border-strong);background:var(--control-bg);border-radius:8px;padding:0 10px}.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:0;display:grid}.workspace[data-preview-collapsed=true]{grid-template-columns:minmax(0,1fr)}.workspace[data-preview-collapsed=true] .output-panel{display:none}.editor-panel{grid-template-rows:auto minmax(440px,1fr);min-height:0;display:grid;overflow:hidden}.panel-header{border-bottom:1px solid var(--border-soft);min-height:42px;color:var(--text-subtle);justify-content:space-between;align-items:center;gap:12px;padding:0 12px;font-size:.85rem;font-weight:750;display:flex}.panel-header output{color:var(--text-muted);font-weight:600}.panel-tools{align-items:center;gap:10px;display:inline-flex}.file-picker{border-radius:7px;width:30px;min-height:30px;position:relative}.file-picker input{cursor:pointer;opacity:0;width:100%;height:100%;position:absolute;inset:0}.file-picker svg{width:16px;height:16px}textarea{resize:none;background:var(--textarea-bg);width:100%;height:100%;min-height:440px;color:var(--text-strong);tab-size:2;border:0;padding:14px;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.92rem;line-height:1.55}#outputEditor{background:var(--panel-alt-bg)}@media (width<=860px){.shell{padding:10px}.topbar{flex-direction:column;align-items:flex-start}.actions{justify-content:flex-start;width:100%}.workspace{grid-template-columns:1fr}.editor-panel{grid-template-rows:auto minmax(320px,52vh)}textarea{min-height:320px}}