:root{--ground:#f6f7f9;--surface:#fff;--surface2:#edf0f5;--text:#141b26;--muted:#5b6878;--line:#dce2ea;--accent:#3557a8;--accent-soft:#e7edf9;--good:#1b7a5a;--bad:#b23c2b;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#0e131a;--surface:#161d27;--surface2:#1c2531;--text:#e3e9f1;--muted:#94a2b4;--line:#2a3441;--accent:#82a3ea;--accent-soft:#1b2740;--good:#4fbe97;--bad:#e8836f;color-scheme:dark}}
:root[data-theme="dark"]{--ground:#0e131a;--surface:#161d27;--surface2:#1c2531;--text:#e3e9f1;--muted:#94a2b4;--line:#2a3441;--accent:#82a3ea;--accent-soft:#1b2740;--good:#4fbe97;--bad:#e8836f;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--text);font:15px/1.55 "IBM Plex Sans","Helvetica Neue",Arial,sans-serif}.wrap{max-width:900px;margin:auto;padding:22px 18px 64px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.brand{display:flex;align-items:center;gap:9px;color:var(--text);font:700 15px Archivo,sans-serif;text-decoration:none}.logo{width:22px;height:22px;border-radius:6px;background:var(--accent)}.langs{display:flex;gap:3px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:2px}.langs a{padding:4px 10px;color:var(--muted);text-decoration:none;font:600 12px "IBM Plex Mono",monospace;border-radius:5px}.langs a[aria-current=true]{background:var(--surface);color:var(--accent)}h1,h2{font-family:Archivo,sans-serif}h1{font-size:34px;line-height:1.15;letter-spacing:-.025em;margin:0 0 12px}.lead{font-size:18px;color:var(--muted);max-width:680px;margin:0 0 24px}.tool{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 12px 36px -24px #000;margin-bottom:32px}.drop{display:grid;place-items:center;text-align:center;min-height:150px;border:2px dashed var(--line);border-radius:12px;background:var(--surface2);padding:24px;cursor:pointer}.drop:hover,.drop:focus{border-color:var(--accent);outline:none}.drop strong{display:block;color:var(--text);font-size:17px}.drop span{color:var(--muted);font-size:13px}.workspace{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:24px;margin-top:22px}.preview{position:relative;aspect-ratio:3/4;background:#d9dee6;border-radius:10px;overflow:hidden;border:1px solid var(--line)}canvas{display:block;width:100%;height:100%}.controls label{display:block;color:var(--text);font-weight:600;margin:0 0 5px}.controls input[type=range]{width:100%;margin:0 0 18px}.row{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:9px;padding:10px 14px;font:600 14px inherit;cursor:pointer}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.status{margin:16px 0 0;padding:12px;border-radius:9px;background:var(--accent-soft);color:var(--muted);font-size:14px}.status.good{color:var(--good)}.status.bad{color:var(--bad)}.hide{display:none!important}.prose{max-width:70ch}.prose h2{font-size:21px;margin:30px 0 10px}.prose p,.prose li{color:var(--muted)}.legal-foot{display:flex;flex-wrap:wrap;gap:8px 16px;border-top:1px solid var(--line);margin-top:36px;padding-top:16px;font-size:12.5px}.legal-foot a{color:var(--muted)}@media(max-width:680px){h1{font-size:27px}.workspace{grid-template-columns:1fr}.preview{max-width:330px;margin:auto}.tool{padding:16px}}