:root{--shodo-mist:#f2f0ff;--shodo-haze:#e2ddff;--shodo-lilac:#ccc4ff;--shodo-peri:#a99eff;--shodo-blurple:#7a67f5;--shodo-ink:#1b1450;--shodo-deep:#120e33;--shodo-night:#0b0920;--shodo-white:#fff;--shodo-fog:#f3f2ef;--shodo-cobalt:#2443e0;--shodo-orange:#ff6a21;--shodo-pink:#ff7eb6;--shodo-paper:#f2e8c9;--shodo-yellow:#f5cf2e;--shodo-radius-s:14px;--shodo-radius-m:22px;--shodo-radius-l:36px;--shodo-ease-spring:cubic-bezier(.34, 1.56, .64, 1);--shodo-ease-flow:cubic-bezier(.45, 0, .2, 1);--shodo-dur-fast:.16s;--shodo-dur-flow:.52s}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(./geist-latin-ext-wght-normal-DC-KSUi6.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(./geist-latin-wght-normal-BgDaEnEv.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(./geist-mono-latin-ext-wght-normal-Bwz-egvJ.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(./geist-mono-latin-wght-normal-XN7g48iV.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Public Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(./public-sans-latin-ext-wght-normal-MQgHevqp.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Public Sans;font-style:normal;font-weight:100 900;font-display:swap;src:url(./public-sans-latin-wght-normal-DdeTHZLK.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ui-title:clamp(33px, 26px + 2.2vw, 56px);--ui-h2:clamp(27px, 22px + 1.4vw, 42px);--ui-h3:clamp(19px, 17px + .6vw, 25px);--ui-lead:clamp(18px, 16px + .6vw, 22px);--ui-text:clamp(16px, 15px + .25vw, 18px);--ui-small:13px;--ui-heading:600;--ui-track-title:-.02em;--ui-track-h2:-.015em;--ui-track-h3:-.01em;--ui-hairline:#0b0a121a;--ui-space-1:8px;--ui-space-2:16px;--ui-space-3:24px;--ui-space-4:40px;--ui-space-5:64px;--ui-space-6:96px;font-synthesis:none}@supports (color:lab(0% 0 0)){:root{--ui-hairline:lab(2.96932% 1.30808 -3.67774/.1)}}h1,h2,h3,h4{text-wrap:balance}p,li,dd,figcaption,blockquote{text-wrap:pretty}a{text-underline-offset:.2em;text-decoration-thickness:1px}output,meter,progress,.num{font-variant-numeric:tabular-nums}h1,h2,h3,h4,nav,button,.button,label,legend,summary{text-transform:lowercase}:is(h1,h2,h3,h4,nav,button,.button,label,legend,summary) :is(code,kbd,samp){text-transform:none}:root{--ui-ink:#0b0a12;--ui-paper:#f4f0e6;--ui-cobalt:#2340ff;--ui-vermilion:#ff4b2b;--ui-amber:#ffb224;--ui-bg:var(--ui-paper);--ui-surface:#fff;--ui-surface-2:#fbf9f4;--ui-fg:var(--ui-ink);--ui-muted:#5e5a73;--ui-line:#d8d2c3;--ui-accent:var(--ui-cobalt);--ui-mark:var(--ui-vermilion);--ui-display:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;--ui-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--ui-mono:"Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;--ui-r-1:2px;--ui-r-2:4px;--ui-r-3:6px;--ui-ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ui-ease-flow:cubic-bezier(.45, 0, .2, 1);--ui-dur-fast:.16s;--ui-scheme:light;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[data-theme=light]{--ui-bg:var(--ui-paper);--ui-surface:#fff;--ui-surface-2:#fbf9f4;--ui-fg:var(--ui-ink);--ui-muted:#5e5a73;--ui-line:#d8d2c3;--ui-accent:var(--ui-cobalt);--ui-scheme:light;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}.ui{background:var(--ui-bg);color:var(--ui-fg);font:13px / 1.4 var(--ui-body)}.ui :focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}.ui-btn{border-radius:var(--ui-r-2);background:var(--ui-fg);color:var(--ui-bg);font:500 12px var(--ui-mono);cursor:pointer;transition:transform .2s var(--ui-ease-spring);border:0;align-items:center;gap:6px;padding:6px 14px;display:inline-flex}.ui-btn:hover{transform:scale(1.05)}.ui-btn:active{transform:scale(.96)}.ui-btn:disabled{opacity:.4;cursor:default;transform:none}.ui-btn.quiet{color:var(--ui-fg);box-shadow:inset 0 0 0 1px var(--ui-line);background:0 0}.ui-btn.danger{color:var(--ui-mark);border-radius:var(--ui-r-1);background:0 0;border:1px solid;padding:6px 12px;font-weight:400}.ui-btn.danger:hover{background:color-mix(in srgb, var(--ui-mark) 10%, transparent);transform:none}.ui-bar{border-radius:var(--ui-r-2);background:var(--ui-ink);color:var(--ui-paper);font:500 12px var(--ui-mono);gap:2px;padding:3px;display:inline-flex}.ui-bar button,.ui-bar a{border-radius:var(--ui-r-1);min-width:34px;height:30px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0 10px;text-decoration:none;display:flex}.ui-bar [aria-pressed=true]{background:var(--ui-paper);color:var(--ui-ink)}.ui-bar button:hover:not([aria-pressed=true]),.ui-bar a:hover{background:#f4f0e624}.ui-bar .ui-bar-read{font-variant-numeric:tabular-nums;align-items:center;padding:0 8px;display:flex}.ui-panel{background:var(--ui-bg);color:var(--ui-fg);padding:16px;font-size:13px}.ui-section+.ui-section{border-top:1px solid var(--ui-fg);margin-top:20px;padding-top:8px}.ui-label{font:500 11px var(--ui-mono);letter-spacing:.02em;text-transform:lowercase;margin:0 0 8px}.ui-heading{border-top:1px solid var(--ui-fg);margin:20px 0 8px;padding-top:8px}.ui-heading:first-child{border-top:0;margin-top:0;padding-top:0}.ui-hint{opacity:.7;margin:6px 0;line-height:1.4}.ui-dial{gap:2px;margin:0 0 10px;display:grid}.ui-dial-top{justify-content:space-between;gap:8px;display:flex}.ui-dial-top span{font-weight:600}.ui-dial-top output{font:500 12px var(--ui-mono);color:var(--ui-muted);font-variant-numeric:tabular-nums}.ui-dial input[type=range]{width:100%;accent-color:var(--ui-dial-accent,var(--ui-fg));margin:2px 0}.ui-dial-ends{font-variant-numeric:tabular-nums;opacity:.6;justify-content:space-between;font-size:11px;display:flex}.ui-dial p{opacity:.7;margin:0;font-size:11.5px}.ui-chip{border:1px solid var(--ui-line);border-radius:var(--ui-r-2);color:var(--ui-fg);font:500 12px var(--ui-mono);cursor:pointer;background:0 0;padding:4px 12px}.ui-chip[aria-pressed=true]{background:var(--ui-fg);color:var(--ui-bg);border-color:var(--ui-fg)}.ui-toggles{margin:0;padding:0;list-style:none}.ui-toggle{border:0;border-bottom:1px dashed var(--ui-line);width:100%;color:inherit;font:13px var(--ui-mono);text-align:left;opacity:.5;cursor:pointer;background:0 0;padding:4px 0;display:flex}.ui-toggle[aria-pressed=true]{opacity:1}.ui-toggle[aria-pressed=true]:before{content:"● ";color:var(--ui-mark)}.ui-check{cursor:pointer;align-items:center;gap:10px;display:flex}.ui-check input{accent-color:var(--ui-fg)}.ui-field{gap:4px;display:grid}.ui-field>span{font:500 12px / 1.6 var(--ui-mono);color:var(--ui-muted)}.ui-input{box-sizing:border-box;border:1px solid var(--ui-line);border-radius:var(--ui-r-2);background:var(--ui-surface-2);width:100%;color:var(--ui-fg);font:inherit;padding:8px 12px}textarea.ui-input{resize:vertical;line-height:1.5}.ui-selected{outline:1.5px solid var(--ui-accent);outline-offset:0;border-radius:var(--ui-r-1)}.ui-code{border-radius:var(--ui-r-3);background:var(--ui-ink);color:var(--ui-paper);font:13px / 1.7 var(--ui-mono);white-space:pre;margin:0;padding:22px;overflow-x:auto}@media (max-width:480px){.ui-code{padding:16px;font-size:12px}}:root{--bg:var(--ui-bg);--surface:var(--ui-surface);--surface-2:var(--ui-surface-2);--fg:var(--ui-fg);--muted:var(--ui-muted);--line:var(--ui-line);--accent:var(--ui-accent);--display:var(--ui-display);--body:var(--ui-body);--mono:var(--ui-mono);--scheme:var(--ui-scheme)}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);font:var(--ui-text) / 1.55 var(--body);padding-inline:max(16px, env(safe-area-inset-left,0px)) max(16px, env(safe-area-inset-right,0px));margin:0}.wrap{gap:56px;max-width:1040px;margin-inline:auto;padding-block:32px 96px;display:grid}h1,h2{font-family:var(--display);text-wrap:balance;letter-spacing:-.02em;margin:0;line-height:1.05}h1{letter-spacing:-.035em;font-size:clamp(36px,6vw,64px);font-weight:700}h1 em{color:var(--accent);font-style:normal}h2{font-size:var(--ui-h2);line-height:1.15;font-weight:var(--ui-heading);letter-spacing:var(--ui-track-h2)}p{max-width:62ch;margin:0}.lede{color:var(--muted);font-size:var(--ui-lead)}code,pre{font-family:var(--mono)}code{font-size:.9em}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{display:inline-flex}.mark{width:34px;height:34px;display:block}.mark-pale,:root[data-theme=dark] .mark-ink{display:none}:root[data-theme=dark] .mark-pale{display:block}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mark-ink{display:none}:root:not([data-theme=light]) .mark-pale{display:block}}.toggle{background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:transform .2s var(--shodo-ease-spring);border-radius:4px;padding:8px 16px}.toggle:hover{transform:scale(1.05)}.toggle:active{transform:scale(.96)}.intro{gap:16px;display:grid}main{gap:72px;display:grid}.figure{gap:20px;min-width:0;display:grid}.figure .head{gap:10px;display:grid}.controls{background:var(--surface);border-radius:6px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px 20px;padding:20px;display:grid}.presets{background:var(--surface);border-radius:6px;gap:8px;padding:14px 20px;display:grid}.presets[hidden],.link-note[hidden],.ui-btn[hidden]{display:none}.preset-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.preset-label{font:500 12px / 1.6 var(--mono);color:var(--muted);min-width:7ch}.link-note{border:1px dashed var(--line);border-radius:6px;justify-items:start;gap:6px;padding:12px 16px;font-size:13px;display:grid}.link-note ul{color:var(--muted);margin:0;padding-left:1.2em}.effect-groups{gap:14px;display:grid}.effect-group{border:1px solid var(--line);border-radius:4px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px 20px;margin:0;padding:12px 16px 16px;display:grid}.effect-group legend{font:500 12px var(--mono);color:var(--muted);padding:0 6px}.field{align-content:start;gap:6px;min-width:0;display:grid}.field.wide,.controls .wide{grid-column:1/-1}.field-head{justify-content:space-between;gap:8px;font-size:14px;display:flex}.field-head output{font:500 12px / 1.6 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}.field.check{cursor:pointer;align-items:center;gap:10px;font-size:14px;display:flex}input[type=range],input[type=checkbox]{accent-color:var(--fg)}input[type=range]{width:100%}select,input[type=text],textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;width:100%;padding:8px 12px}textarea{resize:vertical;line-height:1.5}input[type=color]{background:var(--surface-2);border:1px solid var(--line);cursor:pointer;border-radius:4px;width:100%;height:36px;padding:2px}.note{color:var(--muted);max-width:none;font-size:13px}.stage{background:var(--surface);border-radius:6px;position:relative;overflow:hidden}.stage canvas{width:100%;display:block}.tools{gap:8px;display:flex;position:absolute;top:12px;right:12px}.status{min-height:1.6em;font:500 12px / 1.6 var(--mono);color:var(--muted);margin-top:-12px}.ui-code[hidden]{display:none}.ui-code pre{white-space:pre;margin:0}.props{color:var(--muted);font-size:13px}.props[hidden]{display:none}.props summary{cursor:pointer;font:500 12px var(--mono);color:var(--fg)}.props table{border-collapse:collapse;margin-top:12px;display:block;overflow-x:auto}.props th,.props td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:6px 12px 6px 0}.props th{font:500 12px var(--mono);color:var(--fg);white-space:nowrap}.props td:first-child{white-space:nowrap}.error{background:var(--surface);color:var(--fg);border-radius:6px;padding:20px}.stack{counter-reset:s;gap:8px;margin:0;padding:0;list-style:none;display:grid}.stack li{grid-template-columns:28px 1fr auto auto;align-items:center;gap:8px;display:grid}.stack li:before{counter-increment:s;content:counter(s);font:600 12px / 28px var(--mono);text-align:center;background:var(--fg);color:var(--bg);border-radius:50%;width:28px;height:28px}.stack label{cursor:pointer;align-items:center;gap:10px;display:flex}.foot{color:var(--muted);font-size:14px}@media (max-width:480px){.controls{padding:16px}}.dropin{gap:20px;display:grid}.dropin .head{gap:10px;display:grid}.drop{background:var(--surface);border:2px dashed var(--line);transition:border-color var(--shodo-dur-fast) var(--shodo-ease-flow);border-radius:6px;justify-items:start;gap:12px;padding:24px;display:grid}.drop.over{border-color:var(--fg)}.drop-options{flex-wrap:wrap;align-items:end;gap:8px 12px;display:flex}.drop-options [hidden]{display:none}.drop-field{font:500 12px / 1.6 var(--mono);color:var(--muted);gap:4px;display:grid}.drop-field input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:var(--shodo-radius-s,6px);width:16ch;padding:6px 8px}.drop progress{width:100%;max-width:420px;accent-color:var(--fg)}.drop-status{font:500 13px / 1.6 var(--mono);color:var(--muted)}.drop-status.bad{color:var(--fg)}.drop-info{grid-template-columns:max-content 1fr;gap:4px 16px;margin:0;font-size:14px;display:grid}.drop-info[hidden],.drop-actions[hidden]{display:none}.drop-info dt{font:500 12px / 1.9 var(--mono);color:var(--muted)}.drop-info dd{overflow-wrap:anywhere;margin:0}.drop-actions{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}