:root{--bg:#0f1115;--panel:#161a21;--panel-2:#1c212a;--line:#262d38;--text:#e7ecf3;--muted:#8d99ab;--accent:#4c8dff;--danger:#ff6b6b;--radius:10px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);flex-direction:column;font:14px/1.5 system-ui,-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;display:flex}body.busy .stage{cursor:progress}.layout{flex:1;grid-template-columns:330px 1fr;min-height:0;display:grid}.panel{border-right:1px solid var(--line);background:var(--panel);padding:16px;overflow-y:auto}.block{margin-bottom:26px}.block h2{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:600}.dropzone{border:1.5px dashed var(--line);border-radius:var(--radius);text-align:center;cursor:pointer;gap:4px;padding:22px 14px;transition:border-color .15s,background .15s;display:grid}.dropzone:hover,.dropzone:focus-visible,.dropzone.hover{border-color:var(--accent);background:#4c8dff12;outline:none}.dropzone.loaded{border-style:solid}.dropzone strong{font-size:13.5px}.dropzone span{color:var(--muted);font-size:11.5px}.samples{flex-wrap:wrap;gap:6px;margin:12px 0 16px;display:flex}.chip{border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:999px;padding:5px 11px;font-size:12px;transition:border-color .15s,background .15s}.chip:hover{border-color:var(--accent)}.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.chip.ghost{color:var(--muted);background:0 0}.chip.ghost:hover{color:var(--text)}.presets{flex-wrap:wrap;gap:6px;display:flex}.hint{color:var(--muted);margin:10px 0 0;font-size:11.5px;line-height:1.55}.controls{gap:16px;display:grid}.field{gap:5px;display:grid}.field>span{color:var(--text);justify-content:space-between;gap:8px;font-size:12px;display:flex}.field>span b{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}.field em{color:var(--muted);font-size:11px;font-style:normal;line-height:1.45}.field input[type=range]{width:100%;accent-color:var(--accent)}.field select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);font:inherit;border-radius:7px;padding:6px 8px;font-size:12.5px}.check{cursor:pointer;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;display:flex}.check input{accent-color:var(--accent)}.check em{color:var(--muted);flex-basis:100%;font-size:11px;font-style:normal}.check.inline{color:var(--muted)}.stage{flex-direction:column;min-width:0;min-height:0;display:flex}.stage-toolbar{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:10px 16px;display:flex}.spacer{flex:1}.tabs{gap:4px;display:flex}.tabs button{color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;padding:5px 11px;font-size:12.5px}.tabs button:hover{color:var(--text)}.tabs button.active{background:var(--panel-2);border-color:var(--line);color:var(--text)}button.primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:7px;padding:7px 14px;font-size:12.5px;font-weight:500}button.primary:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed}.viewer{background:var(--line);flex:1;gap:1px;min-height:0;padding:1px;display:grid}.viewer[data-view=split]{grid-template-columns:1fr 1fr}.viewer[data-view=split] .code,.viewer[data-view=source] #paneResult,.viewer[data-view=source] .code,.viewer[data-view=result] #paneSource,.viewer[data-view=result] .code,.viewer[data-view=code] #paneSource,.viewer[data-view=code] #paneResult{display:none}.pane{background:var(--bg);flex-direction:column;min-width:0;min-height:0;display:flex;position:relative}.pane-label{color:var(--muted);z-index:1;pointer-events:none;background:#0f1115cc;border-radius:999px;padding:3px 8px;font-size:11px;position:absolute;top:10px;left:12px}.canvas-wrap{background-image:linear-gradient(45deg,#1a1d24 25%,#0000 25%),linear-gradient(-45deg,#1a1d24 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1a1d24 75%),linear-gradient(-45deg,#0000 75%,#1a1d24 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px;flex:1;place-items:center;min-height:0;padding:34px 18px 18px;display:grid}.canvas-wrap canvas,.svg-host{object-fit:contain;max-width:100%;max-height:100%}.canvas-wrap canvas{image-rendering:pixelated;display:block}.svg-host{place-items:center;width:100%;height:100%;display:grid}.svg-host svg{max-width:100%;max-height:100%}.viewer.outlines .svg-host svg path{stroke:var(--accent);stroke-width:.4px;vector-effect:non-scaling-stroke;fill-opacity:.12}.code{background:var(--bg);color:#b8c4d4;white-space:pre-wrap;word-break:break-all;grid-column:1/-1;margin:0;padding:16px;font:11.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.stats{border-top:1px solid var(--line);background:var(--panel);flex-wrap:wrap;align-items:center;gap:20px;min-height:42px;padding:10px 16px;font-size:12px;display:flex}.stat{align-items:baseline;gap:7px;display:flex}.stat i{color:var(--muted);font-size:11px;font-style:normal}.stat b{font-variant-numeric:tabular-nums;font-weight:600}.stat.note{color:var(--muted);font-size:11.5px}.stat.error{color:var(--danger)}.placeholder{color:var(--muted)}@media (max-width:900px){.layout{grid-template-columns:1fr}.panel{border-right:none;border-bottom:1px solid var(--line);max-height:46vh}.viewer[data-view=split]{grid-template-rows:1fr 1fr;grid-template-columns:1fr}}.stat.warn{color:#ffb454}.lang-toggle{border:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:7px;padding:5px 10px;font-size:12px}.lang-toggle:hover{color:var(--text);border-color:var(--accent)}