: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{scroll-behavior:smooth;height:100%}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--bg);min-height:100%;color:var(--text);flex-direction:column;margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;display:flex}body.busy .stage{cursor:progress}.layout{height:100vh;flex:none;grid-template-columns:330px 1fr;height:100dvh;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);flex-wrap:wrap;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)}.about-link{color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:1px;font-size:12px;text-decoration:none}.about-link:hover{color:var(--accent);border-color:var(--accent)}.about{border-top:1px solid var(--line);background:var(--panel);padding:56px 24px 72px}.about-inner{max-width:880px;margin:0 auto}.about h1{letter-spacing:-.01em;margin:0 0 16px;font-size:27px;font-weight:650;line-height:1.3}.about-lead{color:var(--muted);max-width:70ch;margin:0 0 42px;font-size:15px;line-height:1.75}.about h2{margin:46px 0 18px;font-size:18px;font-weight:600}.about a{color:var(--accent);text-decoration:none}.about a:hover{text-decoration:underline}.about-cards{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.about-cards li{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}.about-cards h3{margin:0 0 7px;font-size:14px;font-weight:600}.about-cards p{color:var(--muted);margin:0;font-size:13px;line-height:1.65}.about-steps{color:var(--muted);gap:10px;max-width:72ch;margin:0;padding-left:22px;font-size:14px;line-height:1.7;display:grid}.about-steps li::marker{color:var(--accent);font-weight:600}.about-faq details{border-bottom:1px solid var(--line)}.about-faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;font-size:14.5px;font-weight:500;list-style:none;display:flex}.about-faq summary::-webkit-details-marker{display:none}.about-faq summary:hover{color:var(--accent)}.about-faq summary:after{content:"+";color:var(--muted);font-size:17px;line-height:1}.about-faq details[open] summary:after{content:"−"}.about-faq p{color:var(--muted);max-width:72ch;margin:0 0 16px;font-size:13.5px;line-height:1.75}.about-foot{border-top:1px solid var(--line);color:var(--muted);margin:46px 0 0;padding-top:20px;font-size:12.5px}@media (max-width:640px){.about{padding:40px 18px 56px}.about h1{font-size:23px}}