:root{--bg:#fff;--fg:#1b1f24;--mut:#5b6572;--line:#d5dae0;--acc:#2457d6;--code:#fafbfc}
@media(prefers-color-scheme:dark){:root{--bg:#111418;--fg:#e6e9ee;--mut:#98a2b0;--line:#2c333b;--acc:#7aa2ff;--code:#161a20}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg)}
header{flex:none;display:flex;align-items:center;gap:.8rem;padding:.4rem .8rem;border-bottom:1px solid var(--line)}
h1{font-size:1rem;margin:0;font-weight:700}
#msg{color:var(--mut);font-size:.85rem}
.export{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.export span{color:var(--mut);font-size:.85rem;margin-right:.1rem}
button{font:inherit;font-weight:600;padding:.3rem .75rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);cursor:pointer}
button:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
button:focus-visible,#code:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
button:disabled{opacity:.45;cursor:not-allowed}
main{flex:1;display:flex;min-height:0;min-width:0}
.pane{min-width:0;min-height:0;display:flex}
#codepane{flex:0 0 50%}
#viewpane{flex:1 1 0;position:relative;background:#fff;color:#111}
#code{flex:1;width:100%;height:100%;border:0;resize:none;padding:.8rem;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--code);color:var(--fg);tab-size:2;white-space:pre;overflow:auto}
#split{flex:none;width:10px;cursor:col-resize;background:var(--line);touch-action:none;position:relative}
#split::after{content:"";position:absolute;left:3px;top:50%;width:4px;height:36px;margin-top:-18px;border-left:1px solid #fff9;border-right:1px solid #fff9;opacity:.8}
#split:hover,#split:focus-visible,body.dragging #split{background:var(--acc);outline:none}
body.dragging{user-select:none;-webkit-user-select:none;cursor:col-resize}
#view{flex:1;min-width:0;overflow:auto;padding:1rem;display:flex;align-items:flex-start;justify-content:center}
#view svg{max-width:100%;height:auto}
#view.stale svg{opacity:.35}
#error{position:absolute;left:0;right:0;bottom:0;max-height:45%;margin:0;padding:.6rem .8rem;overflow:auto;background:#fdecec;color:#8a1111;border-top:1px solid #f3b3b3;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap}
@media(max-width:700px){
  main{flex-direction:column}
  #split{width:auto;height:12px;cursor:row-resize}
  #split::after{left:50%;top:3px;width:36px;height:4px;margin:0 0 0 -18px;border:0;border-top:1px solid #fff9;border-bottom:1px solid #fff9}
  body.dragging{cursor:row-resize}
  .export span{display:none}
}