:root{--day-p:0;--n:clamp(0, var(--day-p), 1);--w1:clamp(0, calc(var(--n) * 3), 1);--w2:clamp(0, calc(var(--n) * 3 - 1), 1);--w3:clamp(0, calc(var(--n) * 3 - 2), 1);--i:clamp(0, calc((var(--n) - .74) * 7), 1);--warm:clamp(0, calc(1 - max(var(--n) - .3333, .3333 - var(--n)) * 3), 1);--t:clamp(0, calc((var(--n) - .64) / .36), 1);--dusk:calc(4 * var(--t) * (1 - var(--t)));--p-bg:color-mix(in oklab, #0e0e0e calc(var(--w3) * 100%), color-mix(in oklab, #ffe9c9 calc(var(--w2) * 100%), color-mix(in oklab, #ffeeda calc(var(--w1) * 100%), #fff)));--p-surface:color-mix(in oklab, #1a1a1a calc(var(--w3) * 100%), color-mix(in oklab, #ffdcae calc(var(--w2) * 100%), color-mix(in oklab, #ffdfc0 calc(var(--w1) * 100%), #f4f4f4)));--p-ink:color-mix(in oklab, #f5f5f3 calc(var(--i) * 100%), color-mix(in oklab, #3a2212 calc(var(--w2) * 100%), color-mix(in oklab, #2e1c12 calc(var(--w1) * 100%), #111)));--p-muted:color-mix(in oklab, #9c9c9c calc(var(--i) * 100%), color-mix(in oklab, #86654a calc(var(--w2) * 100%), color-mix(in oklab, #85664f calc(var(--w1) * 100%), #6b6b6b)));--p-line:color-mix(in oklab, #2b2b2b calc(var(--w3) * 100%), color-mix(in oklab, #efca9c calc(var(--w2) * 100%), color-mix(in oklab, #f3d0ae calc(var(--w1) * 100%), #e3e3e3)));--ui-accent:color-mix(in oklab, var(--accent-night,#7f9cff) calc(var(--w3) * 100%), var(--accent-day,#1a4be0));--ui-accent-ink:color-mix(in oklab, #0d0d0d calc(var(--w3) * 100%), #fff);--ui-ink:var(--p-ink);--ui-bg:color-mix(in oklab, #171717 calc(var(--w3) * 100%), color-mix(in oklab, #fff4e1 calc(var(--w2) * 100%), color-mix(in oklab, #fff6ea calc(var(--w1) * 100%), #fff)));--ui-soft:color-mix(in oklab, #252525 calc(var(--w3) * 100%), color-mix(in oklab, #ffe5c2 calc(var(--w2) * 100%), color-mix(in oklab, #ffe8cf calc(var(--w1) * 100%), #f4f4f4)));--ui-line:color-mix(in oklab, #353535 calc(var(--w3) * 100%), color-mix(in oklab, #eccd9f calc(var(--w2) * 100%), color-mix(in oklab, #f1d3b3 calc(var(--w1) * 100%), #e3e3e3)));--ui-muted:var(--p-muted);--font:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--gutter:clamp(16px, 4vw, 40px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-phase="1"]{--day-p:.3333}:root[data-phase="2"]{--day-p:.6667}:root[data-phase="3"]{--day-p:1;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}body{background:var(--p-bg);color:var(--p-ink);font-family:var(--font);-webkit-font-smoothing:antialiased;background-image:radial-gradient(color-mix(in srgb, var(--p-ink) 14%, transparent) 1px, transparent 1.4px);background-size:26px 26px;margin:0;font-size:16px;line-height:1.5;transition:background .3s,color .3s}.backdrop{color:var(--p-ink);outline-color:var(--ui-accent);z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}body{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable],pre,code{-webkit-user-select:text;user-select:text}*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--p-ink) 28%, transparent) transparent}@supports selector(::-webkit-scrollbar){*{scrollbar-width:auto;scrollbar-color:auto}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--p-ink) 26%, transparent) padding-box;border:4px solid #0000;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--p-ink) 50%, transparent) padding-box;border-width:3px}::-webkit-scrollbar-thumb:active{background:var(--ui-accent) padding-box;border-width:3px}}.theme-switching,.theme-switching *,.theme-switching :before,.theme-switching :after{transition:none!important}body:before,body:after{content:"";z-index:-2;pointer-events:none;position:fixed;inset:0}body:before{opacity:var(--dusk);background:linear-gradient(#3f2a78,#7a45a8 20%,#ff5d8a 55%,#ff8a4c)}body:after{opacity:calc(var(--warm) * .7);background:linear-gradient(#ffe2bf,#ffb98f 55%,#ffc98a)}h1,h2,h3,p{margin:0}a{color:inherit}code{font-family:var(--mono);font-size:.92em}:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}.wrap{width:100%;max-width:1280px;padding-inline:var(--gutter);margin-inline:auto}.num{font-family:var(--mono);color:var(--p-muted);font-size:13px;font-weight:400}.btn{background:var(--ui-accent);height:48px;color:var(--ui-accent-ink);font:inherit;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:0 20px;font-weight:500;text-decoration:none;transition:translate .2s cubic-bezier(.2,.8,.2,1),scale .2s,background .2s,color .2s;display:inline-flex}.btn:hover{translate:0 -2px}.btn:active{translate:0;scale:.97}.btn.quiet{background:var(--p-surface);color:var(--p-ink)}.btn.sm{border-radius:10px;height:36px;padding:0 12px;font-size:14px}.btn[data-copied=true]{background:var(--p-ink);color:var(--p-bg)}.btn .draw{stroke-dasharray:16;animation:.3s draw}.icon-btn{background:var(--p-surface);width:36px;height:36px;color:var(--p-ink);cursor:pointer;border:0;border-radius:10px;place-items:center;padding:0;transition:translate .2s,scale .2s;display:grid}.icon-btn:hover{translate:0 -2px}.icon-btn:active{translate:0;scale:.94}@keyframes draw{0%{stroke-dashoffset:16px}}.top{z-index:30;border-bottom:1px solid var(--p-line);position:relative}.top-row{justify-content:space-between;align-items:center;gap:28px;height:64px;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:10px;font-size:18px;font-weight:600;text-decoration:none;display:inline-flex}.brand-ui{background:var(--p-surface);color:var(--p-muted);font-family:var(--mono);letter-spacing:0;border-radius:6px;margin-left:-5px;padding:2px 6px;font-size:12px;font-weight:500}.brand-mark{flex:none;overflow:visible}.brand-bot,.brand-lids,.brand-drop{fill:var(--ui-accent);transition:fill .3s}.brand-pupils{translate:calc(var(--ex,0) * .6px) calc(var(--ey,0) * .45px);transition:translate .12s ease-out}.brand-lids{opacity:0}a.brand:hover .brand-mark{animation:.5s steps(4,end) infinite brand-hop}a.brand:hover .brand-lids{animation:1.2s step-end infinite brand-blink}a.brand:hover .brand-drop{animation:.7s steps(5,end) infinite brand-drip}@keyframes brand-hop{50%{translate:0 -3px}}@keyframes brand-blink{0%,to{opacity:0}45%,60%{opacity:1}}@keyframes brand-drip{to{opacity:0;translate:0 6px}}.top-nav{gap:24px;margin-left:auto;font-size:15px;display:flex}.top-nav a,.foot a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;text-decoration:none;transition:background-size .3s cubic-bezier(.2,.8,.2,1)}.top-nav a:hover,.foot a:hover{background-size:100% 1.5px}.hero{align-items:center;min-height:calc(100svh - 65px);padding-block:48px;display:grid}.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,5vw,80px);display:grid}.hero h1{letter-spacing:-.045em;text-wrap:balance;font-size:clamp(40px,5.6vw,76px);font-weight:500;line-height:1.02}.lede{max-width:34em;color:var(--p-muted);margin-top:24px;font-size:clamp(17px,1.4vw,20px);line-height:1.5}.facts{color:var(--p-muted);flex-wrap:wrap;gap:8px 28px;margin:28px 0 0;padding:0;font-size:15px;list-style:none;display:flex}.facts b{color:var(--p-ink);font-family:var(--mono);margin-right:6px;font-size:17px;font-weight:500}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:36px;display:flex}.hero-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.tile{border:1px solid var(--p-line);background:var(--ui-bg);border-radius:24px;grid-template-columns:minmax(0,1fr);place-items:center;min-height:clamp(160px,22vh,220px);padding:20px;transition:background .3s,border-color .3s;display:grid}.library,.use{border-top:1px solid var(--p-line);padding-block:clamp(56px,8vw,104px)}.section-head{gap:10px;margin-bottom:32px;display:grid}.section-head h2{letter-spacing:-.035em;font-size:clamp(30px,3.6vw,48px);font-weight:500;line-height:1.08}.section-head p{color:var(--p-muted);font-size:17px}.toolbar{z-index:20;margin:0 calc(var(--gutter) * -1) 24px;padding:12px var(--gutter);background:color-mix(in srgb, var(--p-bg) 86%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);justify-content:space-between;align-items:center;gap:16px;display:flex;position:sticky;top:0}.chips{scrollbar-width:none;gap:6px;min-width:0;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chip{border:1px solid var(--p-line);height:38px;color:var(--p-ink);font:inherit;cursor:pointer;background:0 0;border-radius:19px;flex:none;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:500;transition:background .2s,color .2s,border-color .2s,scale .2s;display:inline-flex}.chip span{color:var(--p-muted);font-family:var(--mono);font-size:12px;transition:color .2s}.chip:hover{border-color:var(--p-ink)}.chip:active{scale:.95}.chip:focus-visible{outline-offset:-2px}.chip[aria-pressed=true]{border-color:var(--p-ink);background:var(--p-ink);color:var(--p-bg)}.chip[aria-pressed=true] span{color:inherit;opacity:.7}.find{width:220px;color:var(--p-muted);flex:none;position:relative}.find svg{pointer-events:none;position:absolute;top:11px;left:13px}.find input{border:1px solid var(--p-line);background:var(--p-bg);width:100%;height:38px;color:var(--p-ink);font:inherit;border-radius:19px;outline:0;padding:0 12px 0 36px;font-size:16px;transition:border-color .2s,box-shadow .2s}.find input::placeholder{color:var(--p-muted);font-size:14px}.find input:focus{border-color:var(--ui-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--ui-accent) 16%, transparent)}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.card{border:1px solid var(--p-line);background:var(--ui-bg);border-radius:20px;grid-template-rows:1fr auto;min-width:0;transition:border-color .2s,background .3s;animation:.35s cubic-bezier(.2,.8,.2,1) backwards card-in;display:grid;position:relative}.card:hover,.card:focus-within{z-index:2;border-color:color-mix(in srgb, var(--p-ink) 30%, var(--p-line))}.stage{text-align:center;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;min-height:320px;padding:28px 20px;display:grid}.stage-wait{justify-content:center;align-items:center;gap:6px;display:flex}.stage-wait i{background:var(--p-line);border-radius:50%;width:7px;height:7px;animation:.9s ease-in-out infinite stage-wait}.stage-wait i:nth-child(2){animation-delay:.12s}.stage-wait i:nth-child(3){animation-delay:.24s}.stage:not(.stage-wait){animation:.4s cubic-bezier(.2,.8,.2,1) card-in}@keyframes stage-wait{40%{background:var(--ui-accent);translate:0 -6px}}.stage[data-align=top]{align-items:start;padding-top:44px}.card-foot{border-top:1px solid var(--p-line);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:12px 12px 14px 18px;display:grid}.card-foot h3{letter-spacing:-.01em;align-items:baseline;gap:8px;min-width:0;font-size:16px;font-weight:500;display:flex}.card-foot h3 span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.card-foot p{color:var(--p-muted);grid-column:1/-1;font-size:14px}.card-actions{gap:6px;display:flex}.empty{color:var(--p-muted);text-align:center;justify-items:center;gap:16px;padding:80px 0;display:grid}@keyframes card-in{0%{opacity:0}}.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;display:grid}.steps li{border:1px solid var(--p-line);border-radius:20px;align-content:start;gap:8px;padding:24px;display:grid}.steps h3{letter-spacing:-.015em;font-size:19px;font-weight:500}.steps p{color:var(--p-muted);font-size:15px}.theme{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px;display:grid}.theme-copy{border:1px solid var(--p-line);background:var(--ui-bg);border-radius:20px;align-content:start;justify-items:start;gap:16px;padding:24px;display:grid}.theme-copy h3{letter-spacing:-.025em;font-size:24px;font-weight:500;line-height:1.15}.theme-copy p{color:var(--p-muted);font-size:15px}.theme-controls{margin-top:8px}.theme-samples{flex-wrap:wrap;align-items:center;gap:24px;margin-top:8px;display:flex}.theme-code{color:#ededed;background:#111;border-radius:20px;grid-template-rows:auto 1fr;display:grid;overflow:hidden}[data-phase="3"] .theme-code{background:#1a1a1a}.theme-code-head{font-family:var(--mono);color:#9c9c9c;border-bottom:1px solid #2b2b2b;justify-content:space-between;align-items:center;padding:12px 12px 12px 20px;font-size:13px;display:flex}.theme-code .btn.quiet{color:#ededed;background:#262626}.theme-code pre{font-family:var(--mono);margin:0;padding:20px;font-size:13px;line-height:1.8;overflow-x:auto}.foot{border-top:1px solid var(--p-line)}.foot-row{color:var(--p-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:28px;font-size:14px;display:flex}.foot .brand{color:var(--p-ink);font-size:16px}.sheet{color:#ededed;background:#111;border:0;width:min(760px,100vw);max-width:none;height:100dvh;max-height:none;margin:0 0 0 auto;padding:0}.sheet[open]{animation:.45s cubic-bezier(.2,.9,.2,1) sheet-in}.sheet[open]::backdrop{background:#00000073;animation:.3s fade}.sheet[data-closing=true]{animation:.22s ease-in forwards sheet-out}.sheet[data-closing=true]::backdrop{animation:.22s reverse forwards fade}.sheet-body{grid-template-rows:auto auto 1fr;height:100%;display:grid}.sheet-head{border-bottom:1px solid #2b2b2b;align-items:center;gap:8px;padding:16px 16px 16px 24px;display:flex}.sheet-head>div{min-width:0;margin-right:auto}.sheet-head h2{font-family:var(--mono);text-overflow:ellipsis;font-size:16px;font-weight:500;overflow:hidden}.sheet-head p{color:#9c9c9c;font-size:13px}.sheet .icon-btn{color:#ededed;background:#262626}.sheet pre{font-family:var(--mono);tab-size:2;margin:0;font-size:13px;line-height:1.7}.usage{background:#171717;border-bottom:1px solid #2b2b2b;padding:16px 24px;overflow-x:auto}.code{outline-offset:-2px;padding:20px 24px 40px;overflow:auto}.tok-c{color:#7d7d7d}.tok-s{color:#9ecf9a}.tok-k{color:#8fb0ff}.tok-t{color:#f0b072}.tok-p{color:#d7d7d7}.tok-n{color:#e6c07b}@keyframes sheet-in{0%{translate:100%}}@keyframes sheet-out{to{translate:100%}}@keyframes fade{0%{opacity:0}}@media (width<=1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=900px){.hero{min-height:0;padding-block:56px}.hero-grid,.theme,.steps{grid-template-columns:minmax(0,1fr)}.toolbar{flex-direction:column;align-items:stretch;gap:10px}.chips{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}.find{width:100%}}@media (width<=760px){.grid{grid-template-columns:minmax(0,1fr)}.top-nav{display:none}.top-row{justify-content:space-between}.hero{padding-block:40px}.hero-actions .btn{flex:100%}.tile{border-radius:20px;min-height:140px}.tile:nth-child(n+3){display:none}.stage{padding-inline:16px}}@media (width<=380px){.stage{padding-inline:8px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.sheet[open],.sheet[open]::backdrop{animation:none}}