:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#172c40;--muted:#4d6274;--border:#aab9c5;--rule:#d7e0e8;--chrome:#e5edf4;--blue:#174e78;--mono:ui-monospace, SFMono-Regular, Consolas, monospace}*{box-sizing:border-box}body{color:var(--ink);background:#f0f4f7;margin:0;font:12px/1.35 Arial,sans-serif}.toolbar,.statusbar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:5px 12px;padding:4px 8px;display:flex}.toolbar{background:var(--chrome);min-height:34px}h1{margin:0;font-size:14px}.tools,.exports{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.engine,.validity{margin-left:auto}.engine,.statusbar{font:11px var(--mono)}.statusbar{background:#f5f8fb;min-height:25px}.statusbar strong{color:var(--blue)}.validity,.hint,small{color:var(--muted)}button,input,select,summary{color:inherit;font:inherit;background:#fff;border:1px solid #879caf;border-radius:0;min-width:0}button,summary{cursor:pointer;min-height:23px;padding:2px 8px}button:hover:not(:disabled),summary:hover{background:#e1ecf6}button:disabled{color:#667786;cursor:default;background:#edf1f4}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline-offset:2px;outline:2px solid #2078b0}button.run{background:var(--blue);color:#fff;border-color:var(--blue)}button.run:hover:not(:disabled){background:#236491}button.run:disabled{opacity:.7}.export-menu{position:relative}.export-menu>div{z-index:3;background:var(--chrome);border:1px solid var(--border);gap:3px;min-width:120px;padding:4px;display:grid;position:absolute;top:100%;left:0}main{grid-template-columns:clamp(190px,17vw,250px) minmax(0,1fr) clamp(228px,20vw,305px);gap:3px;height:calc(100dvh - 59px);padding:3px;display:grid}main>aside,.visual{border:1px solid var(--border);background:#fff;min-width:0;min-height:0;overflow:auto}.visual{background:#edf2f6}h2{border-bottom:1px solid var(--border);background:var(--chrome);font:700 11px var(--mono);text-transform:uppercase;justify-content:space-between;align-items:center;gap:4px;margin:0;padding:5px 7px;display:flex}main h2{z-index:1;position:sticky;top:0}h2 small{font:10px var(--mono)}h3,legend{color:var(--blue);font:700 11px var(--mono);text-transform:uppercase;margin:0}#encoder-form,.inspector-section{padding:7px}.inspector-section+.inspector-section{border-top:1px solid var(--border)}fieldset{border:0;min-width:0;margin:0 0 10px;padding:0}legend{border-bottom:1px solid var(--rule);width:100%;padding:2px 0}label{gap:2px;margin-top:5px;font-size:11px;font-weight:600;display:grid}label :is(select,input){width:100%;padding:2px 4px}input[type=range]{accent-color:var(--blue);padding:0}input[type=file]{padding:2px}.hint,.error{margin:5px 0;font-size:11px}.error{color:#8c2424;border-left:2px solid #a73434;padding-left:5px}.plot-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:4px;padding:4px;display:grid}figure,.preview{border:1px solid var(--border);background:#fff;min-width:0;margin:0}figcaption,.preview h3{border-bottom:1px solid var(--rule);background:#f2f6fa;flex-wrap:wrap;justify-content:space-between;gap:2px 6px;padding:3px 5px;font-size:11px;font-weight:700;display:flex}figcaption span,.preview h3 span{font:10px var(--mono);color:var(--muted)}figure svg{width:100%;display:block}svg text{font:10px var(--mono);fill:var(--muted)}.grid,.axes{stroke:#d4e0ea;stroke-width:1px;fill:none}.axes{stroke:#7e93a4}.trace{stroke:currentColor;stroke-width:1.35px;fill:none;vector-effect:non-scaling-stroke}.t0{color:#12638f}.t1{color:#8b4b1a}.legend{font:10px var(--mono);flex-wrap:wrap;gap:2px 10px;padding:0 5px 3px;display:flex}.frame-view{height:clamp(100px,12vw,155px);min-height:100px;color:var(--muted);text-align:center;background:#e6edf3;place-items:center;display:grid}.frame-view canvas{width:auto;height:calc(100% - 10px);max-height:145px;image-rendering:pixelated;border:1px solid #7e93a4}.preview label{border-top:1px solid var(--rule);grid-template-columns:auto 1fr auto;align-items:center;margin:0;padding:3px 5px}output{font:10px var(--mono)}.inspect{grid-template-columns:1fr 1fr;gap:0 5px;margin-bottom:4px;display:grid}.inspect label:last-child{grid-column:1/-1}dl{grid-template-columns:minmax(0,1fr) auto;margin:4px 0;font-size:11px;display:grid}dt,dd{border-bottom:1px solid var(--rule);padding:2px 0}dd{text-align:right;font-family:var(--mono);margin:0;padding-left:4px}.exports{margin-top:5px}dialog{border:1px solid var(--border);width:min(650px,100% - 20px);max-height:85dvh;color:var(--ink);padding:0}dialog::backdrop{background:#162a4066}dialog h2{position:sticky;top:0}.documentation{padding:8px 12px}.documentation h3{margin-top:10px}.documentation p{margin:4px 0 9px}.hash{overflow-wrap:anywhere;font-family:var(--mono)}@media (max-width:1080px){.plot-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width:780px){main{grid-template-columns:minmax(0,1fr);height:auto}main>aside,.visual{overflow:visible}main h2{position:static}.engine,.validity{margin-left:0}.plot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:540px){.plot-grid{grid-template-columns:minmax(0,1fr)}}