:root{color-scheme:light;--bg:#f6f7f9;--paper:#fff;--ink:#182a3a;--muted:#536374;--line:#c8d1dc;--accent:#176358;--tint:#e3f0ec}
:root.dark{color-scheme:dark;--bg:#151e29;--paper:#1e2a37;--ink:#edf1f5;--muted:#b5c4d4;--line:#536477;--accent:#91d7c6;--tint:#243e3d}
*{box-sizing:border-box}body{margin:0;background:transparent;font:15px/1.75 system-ui,-apple-system,"PingFang SC",sans-serif;color:var(--ink)}main{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,4vw,32px);overflow:hidden}h1{font-size:clamp(22px,4vw,29px);line-height:1.4;margin:4px 0 14px;letter-spacing:-.03em}h2{font-size:18px;margin:0 0 12px}h3{font-size:16px;margin:0 0 6px}p{margin:8px 0 16px}.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:700}.intro,.note{color:var(--muted)}.controls{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0}label{display:flex;flex:1;min-width:145px;flex-direction:column;gap:5px;font-size:13px;font-weight:600}select,button{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:7px;padding:9px 12px;background:var(--paper);color:var(--ink)}select{width:100%}button{cursor:pointer}button.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.surface{border:1px solid var(--line);border-radius:9px;padding:18px;min-width:0;background:var(--paper)}.surface.soft{--view-accent:#725545;background:#f7eee6;color:#382b24;border-radius:22px}.dark .surface.soft{background:#382d29;color:#f6e6db;--view-accent:#dfbca3}.surface.plain{--view-accent:var(--accent)}.surface.bold{--view-accent:#253db5;border:3px solid currentColor;border-radius:0;background:#f3ed91;color:#1b2450;box-shadow:4px 4px 0 currentColor}.dark .surface.bold{background:#d6ce79;color:#182145}.surface nav{border-bottom:1px solid currentColor;font-size:12px;padding-bottom:10px;margin-bottom:14px;opacity:.8}.surface section{padding:10px 0;border-bottom:1px solid #80808055}.surface section:last-of-type{border-bottom:0}.surface p{font-size:13px;margin:3px 0}.surface button{margin-top:12px;background:transparent;color:inherit;border-color:currentColor}.caption{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 8px}.status{padding:13px 16px;background:var(--tint);border-left:3px solid var(--accent);overflow-wrap:anywhere;margin:18px 0}.saved{color:var(--muted);font-size:13px}.trace{padding-left:26px}.trace li{padding:7px 0}.trace li[aria-current=step]{font-weight:700;color:var(--accent)}details{border:0;margin-top:12px}summary{cursor:pointer;min-height:44px;padding:9px 0;color:var(--accent)}details p{color:var(--muted)}.pipeline{display:flex;gap:5px;margin:22px 0;flex-wrap:wrap}.pipeline span{padding:6px 10px;border:1px solid var(--line);border-radius:4px;font-size:12px}.pipeline .active{background:var(--accent);color:var(--bg)}.stage-box{min-height:130px;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.progress{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}.result{background:var(--paper);padding:16px;border:1px solid var(--line);border-radius:8px}.result h2{margin:0}output{display:block}.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:580px){.compare{grid-template-columns:1fr}.controls{gap:10px}label{min-width:100%}.surface{padding:14px}.stage-box{min-height:180px}main{border-radius:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}