:root{--bg:#fff;--fg:#1a1a1a;--muted:#6b7280;--line:#e5e7eb;--panel:#fafafa;--accent:#1d4ed8;--danger:#b91c1c}@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--fg:#e6e6e6;--muted:#9aa1ac;--line:#262b33;--panel:#161a20;--accent:#7aa2f7;--danger:#f87171}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}.app{flex-direction:column;height:100vh;display:flex}header{border-bottom:1px solid var(--line);align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex}header strong{letter-spacing:-.01em}.status{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85em}.status[data-state=error]{color:var(--danger)}.exports{gap:.4rem;margin-left:auto;display:flex}.exports button{border:1px solid var(--line);color:var(--accent);font:inherit;cursor:pointer;background:0 0;border-radius:6px;padding:.3rem .7rem;font-weight:600}.exports button:hover:not(:disabled){border-color:var(--accent)}.exports button:disabled{opacity:.45;cursor:not-allowed}main{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;display:grid}.editor{border-right:1px solid var(--line);background:var(--panel);flex-direction:column;min-width:0;display:flex}.tabs{border-bottom:1px solid var(--line);gap:.25rem;padding:.5rem .75rem 0;display:flex}.tabs button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:.45rem .7rem}.tabs button.on{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}.tabbody{flex:1;min-height:0;overflow:auto}.source{resize:none;width:100%;height:100%;color:var(--fg);background:0 0;border:0;padding:1rem;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.preview{background:var(--panel);min-width:0}.preview iframe{border:0;width:100%;height:100%}.placeholder{color:var(--muted);text-align:center;padding:2rem}.error{border-top:1px solid var(--line);background:color-mix(in srgb, var(--danger) 10%, transparent);color:var(--danger);white-space:pre-wrap;max-height:8rem;margin:0;padding:.75rem 1rem;font:12px/1.5 ui-monospace,monospace;overflow:auto}.form{padding:.75rem 1rem 2rem}fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 .9rem;padding:.6rem .8rem .8rem}legend{align-items:center;gap:.6rem;padding:0 .35rem;font-weight:600;display:flex}label{color:var(--muted);flex-direction:column;gap:.2rem;margin-bottom:.5rem;font-size:.85em;display:flex}input,.form textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);resize:vertical;border-radius:6px;width:100%;padding:.35rem .5rem}input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}.grid2{grid-template-columns:1fr 1fr;gap:0 .7rem;display:grid}.span2{grid-column:1/-1}.hint{color:var(--muted);font-size:.85em}.card{border:1px solid var(--line);background:var(--bg);border-radius:8px;margin-bottom:.6rem;padding:.6rem}.cardbar{color:var(--muted);align-items:center;gap:.3rem;margin-bottom:.4rem;font-size:.8em;display:flex}.cardbar span{margin-right:auto;font-weight:600}.cardbar button,.add{border:1px solid var(--line);color:var(--fg);cursor:pointer;font:inherit;background:0 0;border-radius:5px;padding:.1rem .45rem;font-size:.9em}.cardbar button:disabled{opacity:.35;cursor:not-allowed}.cardbar .del:hover{color:var(--danger);border-color:var(--danger)}.add{color:var(--accent);margin-left:auto}.controls{flex-direction:column;gap:.9rem;padding:1rem 1.1rem 2rem;display:flex}.slider span{color:var(--fg);justify-content:space-between;display:flex}.slider b{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:500}.slider input[type=range]{width:100%;accent-color:var(--accent);padding:0}.colour,.check{color:var(--fg);flex-direction:row;align-items:center;gap:.6rem;font-size:.9em}.colour input{width:3rem;height:1.8rem;padding:2px}.check input{width:auto}.reset{border:1px solid var(--line);color:var(--muted);font:inherit;cursor:pointer;background:0 0;border-radius:6px;align-self:flex-start;padding:.35rem .7rem}@media (width<=900px){main{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.editor{border-right:0;border-bottom:1px solid var(--line)}.grid2{grid-template-columns:1fr}}