@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-sans-latin-ext-400-normal-Q_nF8v4l.woff2)format("woff2"),url(/assets/instrument-sans-latin-ext-400-normal-r32jotim.woff)format("woff");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:Instrument Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-sans-latin-400-normal-DRC__1Mx.woff2)format("woff2"),url(/assets/instrument-sans-latin-400-normal-D1W7dsQl.woff)format("woff");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:Instrument Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/instrument-sans-latin-ext-600-normal-BsaQcF38.woff2)format("woff2"),url(/assets/instrument-sans-latin-ext-600-normal-DMks36a2.woff)format("woff");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:Instrument Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/instrument-sans-latin-600-normal-B7fBEWYG.woff2)format("woff2"),url(/assets/instrument-sans-latin-600-normal-B9e8oLYv.woff)format("woff");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{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--x-bg:#1b1f27;--x-panel:#20252f;--x-raised:#282e3a;--x-line:#343b4a;--x-ink:#e9edf3;--x-muted:#939cad;--x-accent:#ffb23e;--x-on-accent:#15171c;--x-accent-soft:#ffb23e29;--x-sketch:#5aa9ff;--x-link:var(--x-sketch);--x-glow:radial-gradient(90% 80% at 50% 0%, #46557a 0%, #29313f 45%, #1b1f27 80%);--x-glow-muted:#c8cfdb;--x-glow-link:#a4cfff;--x-logo-top:#ffc76a;--x-logo-side:#e0922a;--x-logo-sketch:#5aa9ff;--x-logo-sketch-fill:#5aa9ff29;--x-shadow:0 24px 60px -24px #000000b3}@media (prefers-color-scheme:light){:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--x-bg:#fff;--x-panel:#f3f5f9;--x-raised:#fff;--x-line:#e0e4ec;--x-ink:#111318;--x-muted:#5b6375;--x-accent:#e08a1e;--x-on-accent:#15171c;--x-accent-soft:#e08a1e24;--x-sketch:#2f86f0;--x-link:#1a6ad0;--x-glow:radial-gradient(90% 80% at 50% 0%, #fff 0%, #eef1f5 50%, #fff 85%);--x-glow-muted:var(--x-muted);--x-glow-link:var(--x-link);--x-logo-top:#f2a93b;--x-logo-side:#c97a16;--x-logo-sketch:#2f86f0;--x-logo-sketch-fill:#2f86f01f;--x-shadow:0 24px 60px -28px #11131859}}:root:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--x-bg:#1b1f27;--x-panel:#20252f;--x-raised:#282e3a;--x-line:#343b4a;--x-ink:#e9edf3;--x-muted:#939cad;--x-accent:#ffb23e;--x-on-accent:#15171c;--x-accent-soft:#ffb23e29;--x-sketch:#5aa9ff;--x-link:var(--x-sketch);--x-glow-muted:#c8cfdb;--x-glow-link:#a4cfff;--x-logo-top:#ffc76a;--x-logo-side:#e0922a;--x-logo-sketch:#5aa9ff;--x-logo-sketch-fill:#5aa9ff29;--x-shadow:0 24px 60px -24px #000000b3}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:radial-gradient(60% 100% at 12% 0%, #5aa9ff29, transparent 70%) 0 0 / 100% 900px no-repeat, radial-gradient(50% 90% at 92% 6%, #ffb23e1c, transparent 70%) 0 0 / 100% 900px no-repeat, radial-gradient(90% 100% at 50% 0%, #3a4766 0%, #262d3b 45%, #1b1f27 80%) 0 0 / 100% 1100px no-repeat, var(--x-bg);color:var(--x-ink);margin:0;font:400 1.0625rem/1.6 Instrument Sans,system-ui,sans-serif;position:relative;overflow-x:hidden}a{color:var(--x-link)}code{background:var(--x-raised);border:1px solid var(--x-line);border-radius:4px;padding:.05em .3em;font-family:ui-monospace,JetBrains Mono,monospace;font-size:.9em}.skip{position:absolute;left:-999px}.skip:focus{z-index:1;background:var(--x-raised);padding:8px 12px;top:16px;left:16px}.top,main,.foot{max-width:1120px;margin:0 auto;padding:0 16px}.top{justify-content:space-between;align-items:center;gap:16px;padding-top:20px;padding-bottom:20px;display:flex}.brand{color:var(--x-ink);align-items:center;gap:10px;text-decoration:none;display:flex}.mark-top{fill:var(--x-logo-top)}.mark-side{fill:var(--x-logo-side)}.mark-sketch{fill:var(--x-logo-sketch-fill);stroke:var(--x-logo-sketch);stroke-width:2px;stroke-dasharray:3.2 2.6}.mark-dot{fill:var(--x-logo-sketch)}.wordmark{letter-spacing:-.04em;font-size:1.5rem;font-weight:600;line-height:1}.wordmark:after{content:"";background:var(--x-accent);border-radius:.03em;width:.15em;height:.15em;margin-left:.07em;display:inline-block}nav{align-items:center;gap:20px;display:flex}nav a:not(.button){color:var(--x-glow-muted);text-decoration:none}nav a:not(.button):hover{color:var(--x-ink)}.button{background:var(--x-accent);color:var(--x-on-accent);border-radius:10px;align-items:center;gap:.5em;padding:.6em 1.1em;font-weight:600;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.button:hover{box-shadow:0 10px 24px -12px var(--x-accent);transform:translateY(-1px)}.button:focus-visible,a:focus-visible{outline:2px solid var(--x-sketch);outline-offset:3px}.button.small{padding:.45em .9em;font-size:.95rem}.button.big{border-radius:14px;padding:.85em 1.6em;font-size:1.25rem}.hero{text-align:center;padding:56px 0 32px;position:relative}h1{letter-spacing:-.03em;max-width:16em;margin:0 auto;font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:600;line-height:1.22}.hl-sketch,.hl-solid{white-space:nowrap}.hl-solid{color:var(--x-accent)}.hl-sketch{position:relative}.hl-sketch:after,.hl-sketch:before{content:"";position:absolute;left:0;right:0}.hl-sketch:after{background:repeating-linear-gradient(90deg, var(--x-sketch) 0 11px, transparent 11px 19px);height:3px;bottom:-.1em}.hl-sketch:before{background:radial-gradient(circle 5px at 5px 50%, var(--x-sketch) 96%, transparent) no-repeat, radial-gradient(circle 5px at calc(100% - 5px) 50%, var(--x-sketch) 96%, transparent) no-repeat;height:10px;bottom:calc(-.1em - 3.5px)}.soon{color:var(--x-glow-muted);text-align:left;background:#5aa9ff17;border:1px dashed #5aa9ff8c;border-radius:999px;align-items:center;gap:10px;margin:18px 0 0;padding:5px 14px 5px 5px;font-size:.92rem;line-height:1.35;display:inline-flex}.soon b{background:var(--x-sketch);color:#10141b;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;flex:none;padding:2px 9px;font:600 .7rem ui-monospace,monospace}.lead{max-width:36em;color:var(--x-glow-muted);margin:14px auto 0;font-size:1.2rem}.actions{margin:32px 0 0}.edge-note{color:var(--x-glow-muted);margin:16px 0 0;font-size:.95rem}.edge-note a{color:var(--x-glow-link)}.hero-text{min-width:0}.toy{margin:36px 0 0}.toy svg{width:100%;height:auto;display:block;overflow:visible}@media (scripting:none){.toy{display:none}}@media (min-width:960px) and (scripting:enabled){.hero{text-align:left;grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:center;gap:32px;padding-top:40px;display:grid}.hero h1{margin-left:0;font-size:clamp(2.1rem,4.3vw,3.4rem)}.hero .lead{margin-left:0}.toy{margin:0}}.toy-panel{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--x-line);text-align:left;background:#282e3ad9;border-radius:14px;max-width:420px;margin:-8px auto 0;padding:12px 16px 14px;box-shadow:0 14px 30px -16px #0009}.toy-title{align-items:center;gap:8px;margin:0 0 8px;font-size:.85rem;font-weight:600;display:flex}.toy-title svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;color:#ff8a78;width:18px;height:18px}.toy-title output{color:var(--x-glow-muted);margin-left:auto;font:400 .8rem ui-monospace,monospace}.toy-row{grid-template-columns:56px 1fr 62px;align-items:center;gap:12px;font:400 .85rem ui-monospace,JetBrains Mono,monospace;display:grid}.toy-row+.toy-row{margin-top:4px}.toy-row output{text-align:right;color:var(--x-ink);font-variant-numeric:tabular-nums}.toy-row span{color:var(--x-sketch)}.toy-row input{width:100%;accent-color:var(--x-accent);cursor:grab}.toy-note{text-align:center;color:var(--x-glow-muted);margin:10px 0 0;font-size:.85rem}.eyebrow{color:var(--x-sketch);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:10px;margin:0 0 14px;font:600 .75rem/1 ui-monospace,JetBrains Mono,monospace;display:inline-flex}.eyebrow:before,.eyebrow:after{content:"";background:linear-gradient(var(--x-sketch), var(--x-sketch)) center / 100% 1.5px no-repeat;width:40px;height:11px}.eyebrow:before{border-left:1.5px solid var(--x-sketch)}.eyebrow:after{border-right:1.5px solid var(--x-sketch)}.doodle{display:none}@media (min-width:1380px){.doodle{pointer-events:none;display:block;position:absolute}}.doodle.a{top:40px;left:-150px}.doodle.b{bottom:10px;right:-140px}.sprite{width:0;height:0;position:absolute;overflow:hidden}.sprite .f{fill:currentColor;fill-opacity:.22}.cat-sketch{--cat:#7c9bff}.cat-solid{--cat:#3dd6a3}.cat-param{--cat:#ff8a78}.cat-print{--cat:#ffc93c}.cat-home{--cat:#3cc7d4}.cat-open{--cat:#ff7eb6}.cat-neutral{--cat:#939cad}.walkthrough{padding:72px 0 24px}.walkthrough-lead{color:var(--x-glow-muted);margin:0 0 32px}.steps{margin:0;padding:0;list-style:none}.step{margin:0 0 48px}.step figure{margin:0}.step h3{color:var(--x-ink);margin:16px 0 8px;font-size:1.15rem;font-weight:600}.step p{color:var(--x-glow-muted);margin:0}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}h2{letter-spacing:-.02em;margin:0 0 24px;font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:600}.walkthrough[data-enhanced]{text-align:center;padding-top:8px}.walkthrough[data-enhanced] h2{margin-bottom:8px}.walkthrough[data-enhanced] .walkthrough-lead{margin-bottom:0}.scrolly-track{height:calc(var(--steps) * 80vh + 100vh)}.scrolly-pin{flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100vh;display:flex;position:sticky;top:0}@supports (height:100svh){.scrolly-pin{height:100svh}}.hero-shot{isolation:isolate;perspective:1600px;width:min(100%,1040px,160vh - 480px);margin:0 auto;position:relative}.hero-shot:before{content:"";z-index:-1;filter:blur(80px);background:linear-gradient(90deg,#5aa9ff80,#ffb23e73);position:absolute;inset:10% 2% -6%}.frame{transform:rotateX(calc(var(--tilt,0) * 1deg)) scale(calc(1 - var(--tilt,0) * .004));transform-origin:50% 100%;background:#1b1f27;border:1px solid #4a5670;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -30px #000c,0 0 0 6px #ffffff08}.frame-bar{background:#14171d;border-bottom:1px solid #2a303c;align-items:center;gap:7px;height:34px;padding:0 14px;display:flex}.frame-bar i{background:#3a4252;border-radius:50%;width:10px;height:10px}.frame-bar b{color:#939cad;background:#20252f;border-radius:999px;margin:0 auto;padding:2px 44px;font:400 .75rem ui-monospace,monospace;transform:translate(-22px)}.deck{aspect-ratio:1440/900;background:#1b1f27;position:relative;overflow:hidden}.deck img{transform-origin:0 100%;will-change:transform;width:100%;height:100%;display:block;position:absolute;inset:0;box-shadow:0 -30px 60px #0009}.caption-area{width:100%;max-width:620px}.walkthrough-counter{color:var(--x-accent);letter-spacing:.08em;margin:0;font:600 .75rem ui-monospace,monospace}.captions{display:grid}.caption{visibility:hidden;opacity:0;grid-area:1/1;transform:translateY(10px)}.caption[data-active]{visibility:visible;opacity:1;transform:none}.caption h3{margin:2px 0 4px;font-size:1.25rem;font-weight:600}.caption p{color:var(--x-glow-muted);margin:0}.rail{border:1px solid var(--x-line);background:#20252fd9;border-radius:12px;gap:8px;padding:6px 12px 6px 8px;display:flex;position:relative}.chip{aspect-ratio:1;background:color-mix(in srgb, var(--cat) 16%, var(--x-bg));width:clamp(20px,11.1111vw - 14.2222px,34px);color:var(--cat);opacity:.35;cursor:pointer;border:1.5px solid #0000;border-radius:9px;flex:none;place-items:center;padding:0;display:grid}.chip[data-done]{opacity:1}.chip[data-active]{border-color:var(--cat);transform:translateY(-3px)}.chip svg,.card-icon svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}.chip svg{width:62%;height:62%}.marker{background:var(--x-accent);width:3px;box-shadow:0 0 10px var(--x-accent);border-radius:2px;position:absolute;top:3px;bottom:3px;left:0}.card-icon{width:46px;height:46px;color:var(--cat);background:color-mix(in srgb, var(--cat) 16%, transparent);border-radius:12px;place-items:center;margin-bottom:14px;display:grid}.card-icon svg{width:26px;height:26px}@media (prefers-reduced-motion:no-preference){.mark-top,.mark-side{animation:.8s cubic-bezier(.2,.8,.2,1) .9s both extrude-in}.mark-sketch{animation:.9s both sketch-in}.brand:hover .mark-top,.brand:hover .mark-side{animation:.6s cubic-bezier(.2,.8,.2,1) both extrude-again}.hl-sketch:after,.hl-sketch:before{animation:.9s cubic-bezier(.65,0,.35,1) .3s both draw}.doodle{animation:7s ease-in-out infinite alternate float}.doodle.b{animation-delay:-3s}.button{transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s cubic-bezier(.2,.8,.2,1)}.button.big span{transition:transform .14s}html.js .cards li:not(.in),html.js .templates:not(.in){opacity:0}html.js .cards li.in,html.js .templates.in{animation:reveal .6s calc(var(--i,0) * 70ms) cubic-bezier(.2, .8, .2, 1) backwards}.caption{transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}.caption[data-active]{transition-delay:0s}.chip{transition:opacity .2s,transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}.card-icon{transition:transform .2s cubic-bezier(.2,.8,.2,1)}.cards li:hover .card-icon{transform:rotate(-7deg)scale(1.1)}}@media (prefers-reduced-motion:reduce){.frame{transform:none}}@keyframes extrude-in{0%{opacity:0;transform:translate(-14px,14px)}}@keyframes extrude-again{0%{opacity:0;transform:translate(-14px,14px)}}@keyframes sketch-in{0%{stroke-dasharray:0 112;fill-opacity:0}to{stroke-dasharray:3.2 2.6}}@keyframes draw{0%{clip-path:inset(-4px 100% -4px -6px)}to{clip-path:inset(-4px -6px)}}@keyframes reveal{0%{opacity:0;transform:translateY(22px)}}@keyframes float{to{transform:translateY(-14px)rotate(3deg)}}.button{box-shadow:3px 3px #b06f1c}.button.big{box-shadow:5px 5px #b06f1c}.button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px #b06f1c}.button.big:hover{transform:translate(-3px,-3px);box-shadow:8px 8px #b06f1c}.button:active,.button.big:active{transform:translate(3px,3px);box-shadow:0 0 #b06f1c}.button.big:hover span{transform:translate(4px)}.shot{border:1px solid var(--x-line);width:100%;height:auto;box-shadow:var(--x-shadow);background:var(--x-panel);border-radius:14px;display:block}.features{padding:72px 0 24px}.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.cards li{background:linear-gradient(155deg, color-mix(in srgb, var(--cat) 11%, var(--x-panel)), var(--x-panel) 60%);border:1px solid var(--x-line);border-radius:16px;padding:22px;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s;position:relative}.cards li:hover{border-color:color-mix(in srgb, var(--cat) 60%, var(--x-line));box-shadow:0 22px 44px -26px var(--cat);transform:translateY(-5px)}.cards li:nth-child(2){--i:1}.cards li:nth-child(3){--i:2}.cards li:nth-child(4){--i:3}.cards li:nth-child(5){--i:4}.cards li:nth-child(6){--i:5}.cards h3{margin:0 0 8px;font-size:1.1rem;font-weight:600}.cards p{color:var(--x-muted);margin:0}.templates{grid-template-columns:1fr 1.4fr;align-items:center;gap:40px;padding:72px 0;display:grid}.templates p{color:var(--x-muted)}@media (max-width:760px){.templates{grid-template-columns:1fr}nav a:not(.button){display:none}.hero{padding-top:32px}}.foot{border-top:1px solid var(--x-line);padding-top:32px;padding-bottom:48px;font-size:.95rem}.muted{color:var(--x-muted)}