.drawably-host{position:relative;isolation:isolate;font-family:Inter,system-ui,sans-serif}.drawably-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}.drawably-svg path{fill:none;stroke:var(--drawably-ink, var(--drawably-stroke, #2724d1));stroke-width:var(--drawably-width, 2);stroke-linecap:round;stroke-linejoin:round}.drawably-boil{opacity:0;animation:drawably-boil-0 1.2s step-end infinite}.drawably-boil[data-i="1"]{animation-name:drawably-boil-1}.drawably-boil[data-i="2"]{animation-name:drawably-boil-2}@keyframes drawably-boil-0{0%{opacity:1}33.33%{opacity:0}}@keyframes drawably-boil-1{0%{opacity:0}33.33%{opacity:1}66.67%{opacity:0}}@keyframes drawably-boil-2{0%{opacity:0}66.67%{opacity:1}to{opacity:0}}.drawably-svg .drawably-blob{fill:var(--drawably-ink, var(--drawably-fill, #2724d1));stroke:var(--drawably-ink, var(--drawably-fill, #2724d1));stroke-width:4}.drawably-svg .drawably-scribble{stroke-width:1.5}.drawably-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border:0;background:none;font:inherit;font-family:Inter,system-ui,sans-serif;color:var(--drawably-ink, var(--drawably-stroke, #2724d1));cursor:pointer;outline:none;transition:transform .12s ease}.drawably-button:active{transform:scale(.92)}.drawably-button--neutral{--drawably-stroke: #6e675f;--drawably-fill: #6e675f}.drawably-button--danger{--drawably-stroke: var(--drawably-error, #d12724);--drawably-fill: var(--drawably-error, #d12724)}.drawably-button[data-state=error]{--drawably-ink: var(--drawably-error, #d12724)}.drawably-button[data-state=success]{--drawably-ink: var(--drawably-success, #188a42)}.drawably-button[data-state=loading]{cursor:progress;opacity:.6}.drawably-button[data-state=loading] .drawably-boil{animation-duration:.45s}.drawably-button--solid{color:var(--drawably-paper, #fff)}.drawably-svg .drawably-focus{visibility:hidden;stroke-width:1.5}.drawably-host:is(:focus-visible,:has(:focus-visible)) .drawably-focus{visibility:visible}.drawably-checkbox,.drawably-radio{display:inline-block;width:22px;height:22px}.drawably-toggle{display:inline-block;width:44px;height:24px}:is(.drawably-checkbox,.drawably-radio,.drawably-toggle) input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.drawably-svg .drawably-dot{fill:var(--drawably-ink, var(--drawably-fill, #2724d1));stroke:var(--drawably-ink, var(--drawably-fill, #2724d1));visibility:hidden;transform:scale(.5);transform-box:fill-box;transform-origin:center;transition:transform .16s ease-out}.drawably-radio[data-checked] .drawably-dot{visibility:visible;transform:scale(1)}.drawably-svg .drawably-knob{transition:transform .16s ease-out}.drawably-toggle[data-checked] .drawably-knob{transform:translate(20px)}.drawably-divider{display:block;height:10px;border:0}.drawably-svg .drawably-check{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .24s ease-out}.drawably-checkbox[data-checked] .drawably-check{stroke-dashoffset:0}.drawably-inputbox{display:inline-block}.drawably-inputbox input{border:0;background:none;font:inherit;color:inherit;padding:8px 12px;width:100%;box-sizing:border-box;outline:none}.drawably-card{padding:16px}@media(prefers-reduced-motion:reduce){.drawably-boil{animation:none}.drawably-boil[data-i="0"]{opacity:1}.drawably-svg .drawably-check,.drawably-svg .drawably-dot,.drawably-svg .drawably-knob{transition:none}}:root{--ink: #18181b;--ink-2: #474645;--ink-3: #a1a1aa;--pen: #2724d1;--paper: #e3e3e1;--code-k: #2724d1;--code-s: #0f766e;--code-n: #18181b;--code-o: #b45309;--code-p: #71717a;--ease: cubic-bezier(.2, 0, 0, 1);--drawably-stroke: #2724d1;--drawably-fill: #2724d1;--drawably-paper: #e3e3e1}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-width:thin;scrollbar-color:gray transparent}*{scrollbar-width:thin;scrollbar-color:gray transparent}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em}body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}.toc{display:none}.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}.toc li{counter-increment:toc}.toc a{display:flex;align-items:center;min-height:40px;color:var(--ink-3);text-decoration:none;font-size:14px;transition:color .16s var(--ease)}.toc a:before{content:counter(toc) ".";width:1.4em;flex-shrink:0;font-variant-numeric:tabular-nums}.toc a:hover,.toc a[aria-current=true]{color:var(--ink)}.toc a:focus-visible{outline:1.5px solid var(--pen);outline-offset:2px}.hero-actions{position:absolute;top:14px;right:16px;z-index:3;display:flex;align-items:center;gap:2px}.github{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--ink-3);transition:color .16s var(--ease),transform .12s var(--ease)}.github svg{width:14px;height:14px;fill:currentColor}.github:hover{color:var(--ink)}.github:active{transform:scale(.96)}.github:focus-visible{outline:1.5px solid var(--pen);outline-offset:2px}.agent{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 8px;border:0;background:none;font:500 11px/1 Geist Mono,ui-monospace,monospace;color:var(--ink-3);cursor:pointer;letter-spacing:0;transition:color .16s var(--ease),transform .12s var(--ease)}.agent:hover{color:var(--ink)}.agent:active{transform:scale(.96)}.agent:focus-visible{outline:1.5px solid var(--pen);outline-offset:2px}.agent .cmd-icons{width:12px;height:12px}.agent .cmd-icons svg{width:12px;height:12px;stroke:currentColor}.hero,.board{position:relative;min-height:100dvh;overflow:clip}.board{scroll-margin-top:0}.brand{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;pointer-events:none}.logo{display:block;margin:0 auto 18px}h1{margin:0;font-size:clamp(48px,8vw,88px);font-weight:600;letter-spacing:-.04em;line-height:.95;text-wrap:balance;pointer-events:auto}.tagline{margin:14px auto 0;max-width:28ch;color:var(--ink-2);text-wrap:pretty;pointer-events:auto}.piece{position:absolute;z-index:1}.piece-done{top:13%;left:11%;rotate:-8deg}.piece-cancel{top:18%;right:12%;rotate:6deg}.piece-save{top:58%;left:8%;rotate:4deg}.piece-check{top:46%;right:10%;rotate:-5deg}.piece-input{bottom:16%;left:14%;rotate:-3deg;width:200px}.piece-card{bottom:12%;right:11%;rotate:3deg;width:min(220px,42vw)}.piece-wait{top:8%;left:42%;rotate:4deg}.piece-retry{top:36%;right:6%;rotate:-7deg}.piece-ok{bottom:7%;left:40%;rotate:5deg}.piece-del{top:68%;right:7%;rotate:6deg}.piece-radios{top:38%;left:6%;rotate:-4deg;display:flex;gap:12px;align-items:center}.piece-toggle{bottom:30%;right:14%;rotate:3deg}.piece-div{top:50%;left:28%;rotate:-2deg;width:88px;margin:0}.piece-mit{top:16%;left:18%;rotate:-7deg}.piece-ver{top:20%;right:14%;rotate:5deg}.piece-react{bottom:14%;right:12%;rotate:-4deg;width:max-content;max-width:min(280px,70vw)}.piece-fn-btn{top:14%;left:18%;rotate:-6deg}.piece-fn-check{top:18%;right:11%;rotate:5deg}.piece-fn-input{bottom:20%;left:18%;rotate:4deg}.piece-fn-card{bottom:16%;right:10%;rotate:-5deg}.piece-fn-radio{top:8%;left:40%;rotate:4deg}.piece-fn-toggle{bottom:8%;left:38%;rotate:-3deg}.piece-fn-div{top:48%;left:8%;rotate:5deg}.piece-input input{width:100%;font:inherit;color:var(--ink)}.piece-input input::placeholder{color:var(--ink-3)}.check-label{display:flex;align-items:center;gap:10px;min-height:40px;color:var(--ink-2);font-size:14px}.note,.fn,.meta{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}.fn,.meta{font-family:Geist Mono,ui-monospace,monospace;font-size:12.5px}.cmd-wrap{pointer-events:auto;width:max-content;max-width:82vw}#install-card.drawably-card{padding:6px 10px}.code-wrap{pointer-events:auto;width:min(420px,86vw);text-align:left}.cmd{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0;border:0;background:none;box-shadow:none;font:500 13px/1 Geist Mono,ui-monospace,monospace;color:var(--ink);cursor:pointer;transition:transform .12s var(--ease)}.cmd:active{transform:scale(.96)}.cmd:focus-visible{outline:1.5px solid var(--pen);outline-offset:2px}.dollar{color:var(--ink-3)}.cmd-text{flex:1;text-align:left}.cmd-icons{position:relative;width:16px;height:16px;flex-shrink:0;overflow:visible}.cmd-icons svg{position:absolute;inset:0;width:16px;height:16px;fill:none;stroke:var(--pen);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%;transition:opacity .3s var(--ease),transform .3s var(--ease),filter .3s var(--ease)}.cmd-icons .copy{opacity:1;transform:scale(1);filter:blur(0)}.cmd-icons .tick,.cmd[data-copied] .copy,.agent[data-copied] .copy{opacity:0;transform:scale(.25);filter:blur(4px)}.cmd[data-copied] .tick,.agent[data-copied] .tick{opacity:1;transform:scale(1);filter:blur(0)}pre{margin:0;padding:0;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;font:400 12.5px/1.7 Geist Mono,ui-monospace,monospace;text-align:left}.k{color:var(--code-k)}.s{color:var(--code-s)}.n{color:var(--code-n)}.o{color:var(--code-o)}.p{color:var(--code-p)}@media(prefers-reduced-motion:no-preference){.brand,.piece{opacity:0;animation:enter .7s var(--ease) forwards}.hero .brand{animation-delay:80ms}.piece-done{animation-delay:.16s}.piece-cancel{animation-delay:.24s}.piece-save{animation-delay:.32s}.piece-check{animation-delay:.4s}.piece-input{animation-delay:.48s}.piece-card{animation-delay:.56s}.piece-wait{animation-delay:.2s}.piece-retry{animation-delay:.36s}.piece-ok{animation-delay:.52s}}@keyframes enter{0%{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.cmd-icons svg{transition:none}.toc li{transition:none;translate:none}}@media(max-width:1300px){.piece-div{left:10%}.piece-fn-div{top:68%;left:6%}}@media(min-width:840px)and (min-height:621px){.rest{position:relative}.toc{display:block;position:absolute;left:28px;top:50vh;bottom:0;z-index:2;pointer-events:none}.toc ol{position:sticky;top:50%;translate:0 -50%;pointer-events:none}.toc li{opacity:0;translate:0 6px;transition:opacity .48s var(--ease),translate .48s var(--ease)}.toc.is-in ol{pointer-events:auto}.toc.is-in li{opacity:1;translate:0 0}.toc.is-in li:nth-child(1){transition-delay:0ms}.toc.is-in li:nth-child(2){transition-delay:80ms}.toc.is-in li:nth-child(3){transition-delay:.16s}}@media(max-width:720px),(max-height:620px){.hero,.board{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:48px 20px 40px}.brand{position:static;padding:0}.piece{position:static;rotate:0deg}.piece-input,.piece-card,.piece-react{width:min(260px,100%)}.scatter{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 22px}}