:root{color:#191917;font-synthesis:none;text-rendering:optimizelegibility;--paper:#f3efe3;--paper-bright:#fffdf7;--ink:#191917;--blue:#1462ff;--pink:#ff3158;--acid:#eae353;--green:#27a66c;--demo-dood:#ff3158;--line:2px solid var(--ink);--display:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;--mono:"SFMono-Regular", "Cascadia Code", Consolas, monospace;background:#f3efe3;font-family:Avenir Next,Futura,Century Gothic,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 12% 5%, #ffffffb8, transparent 25rem), repeating-linear-gradient(0deg, transparent 0 47px, #19191706 48px), var(--paper);min-width:320px;margin:0;overflow-x:hidden}button,input,select,textarea{color:inherit;font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}code,pre{font-family:var(--mono)}.skip-link{z-index:100;color:#fff;background:var(--ink);padding:.7rem 1rem;position:fixed;top:.75rem;left:.75rem;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.site-header{z-index:5;border-bottom:var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f3efe3e0;grid-template-columns:1fr auto 1fr;align-items:center;min-height:5.5rem;padding:1rem clamp(1.1rem,3vw,3.5rem);display:grid;position:relative}.brand{font-family:var(--display);letter-spacing:-.09em;justify-self:start;font-size:clamp(2rem,3vw,3rem);font-weight:700;line-height:.8;text-decoration:none}.brand__dot{color:var(--pink)}.header-note{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.7rem}.site-nav{justify-self:end;gap:clamp(.8rem,2vw,2rem);display:flex}.site-nav a{text-underline-offset:.22em;text-decoration-thickness:1px;position:relative}.site-nav a:before{background:var(--pink);content:"";opacity:0;border-radius:50%;width:.35rem;height:.35rem;transition:all .18s;position:absolute;top:50%;left:-.72rem;transform:translateY(-50%)scale(0)}.site-nav a:hover:before,.site-nav a:focus-visible:before{opacity:1;transform:translateY(-50%)scale(1)}.section-shell{width:min(100% - clamp(2.2rem,7vw,7rem),92rem);margin-inline:auto}.hero{grid-template-columns:minmax(0,1fr) minmax(18rem,.34fr);align-items:center;gap:clamp(2rem,7vw,8rem);min-height:min(54rem,100svh - 5.5rem);padding-block:clamp(5rem,11vw,10rem) clamp(4rem,8vw,8rem);display:grid;position:relative}.hero:before{z-index:-1;aspect-ratio:1;content:"";border:2px solid #1919172e;border-radius:50%;width:36vw;min-width:23rem;position:absolute;top:7%;right:calc(-50vw + 50%)}.hero__index{font-family:var(--mono);letter-spacing:.09em;font-size:.65rem;position:absolute;top:2rem;left:0}.kicker,.eyebrow{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem;font-size:.7rem;font-weight:700}.kicker:before,.eyebrow:before{content:"[ ";color:var(--pink)}.kicker:after,.eyebrow:after{content:" ]";color:var(--pink)}.hero h1{max-width:14ch;font-family:var(--display);letter-spacing:-.075em;margin:0;font-size:clamp(4.4rem,10.5vw,10rem);font-weight:700;line-height:.78}.hero-card{border:var(--line);background:var(--acid);box-shadow:12px 12px 0 var(--ink);margin-top:6rem;padding:clamp(1.4rem,3vw,2.3rem);position:relative;transform:rotate(2deg)}.hero-card p:not(.eyebrow){margin:0 0 2rem;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.55}.hero-card code{border:1px solid var(--ink);background:var(--paper-bright);padding:.5rem .65rem;font-size:.72rem;display:inline-block}.hero-card__pin{border:var(--line);background:var(--pink);border-radius:50%;width:1.2rem;height:1.2rem;position:absolute;top:-.7rem;left:50%;transform:translate(-50%)}.hero__scribble{flex-wrap:wrap;gap:.45rem;display:flex;position:absolute;bottom:2rem;left:0}.hero__scribble span{border:1px solid var(--ink);background:var(--paper-bright);font-family:var(--mono);text-transform:uppercase;border-radius:2rem;padding:.38rem .65rem;font-size:.62rem}.proof-strip{border-block:var(--line);color:#fff;background:var(--blue);white-space:nowrap;justify-content:center;align-items:center;gap:1.5rem;min-height:4.5rem;padding:1rem 2rem;display:flex;overflow:hidden}.proof-strip p{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.72rem}.proof-strip span{color:var(--acid)}.mockup-section,.playground,.doodle-shelf,.multiple,.reference,.install{padding-block:clamp(5rem,10vw,10rem)}.section-heading{max-width:54rem;margin-bottom:clamp(2.5rem,5vw,5rem)}.section-heading--split{grid-template-columns:minmax(0,1fr) minmax(16rem,.45fr);align-items:end;gap:3rem;max-width:none;display:grid}.section-heading h2,.multiple h2,.install h2{font-family:var(--display);letter-spacing:-.06em;margin:0;font-size:clamp(3rem,7vw,6.5rem);line-height:.91}.section-intro{margin:0;font-size:1.05rem;line-height:1.6}.section-intro code{font-size:.8em}.mockup-board{border:var(--line);background:var(--paper-bright);min-height:34rem;box-shadow:18px 18px 0 var(--pink);grid-template-columns:1fr 11rem;display:grid;position:relative}.mockup-board__meta{border-bottom:1px solid var(--ink);font-family:var(--mono);justify-content:space-between;padding:.8rem 1rem;font-size:.63rem;display:flex;position:absolute;inset:0 0 auto}.mockup-board__content{flex-direction:column;justify-content:center;padding:clamp(4rem,8vw,8rem);display:flex}.mockup-board__content h3{letter-spacing:-.055em;margin:0 0 2rem;font-size:clamp(2.7rem,5.8vw,6rem);line-height:.96}.mockup-board__content h3 em{font-style:normal}.mockup-board__content p{max-width:46rem;margin:0;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6}.mockup-board__attribute{border-left:var(--line);color:#fff;background:var(--ink);font-family:var(--mono);writing-mode:vertical-rl;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;display:flex;transform:rotate(180deg)}.mockup-board__attribute span{color:#aaa99f;font-size:.64rem}.mockup-board__attribute strong{color:var(--acid);font-size:.85rem}.playground{border-block:var(--line);background:var(--paper-bright);width:100%;max-width:none;padding-inline:clamp(1.1rem,3.5vw,4rem)}.playground-grid{border:var(--line);grid-template-columns:minmax(20rem,.75fr) minmax(0,1.25fr);display:grid}.controls{background:var(--ink);border-right:var(--line);grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:1px;display:grid}.control,.swatches{background:var(--paper);border:0;min-width:0;margin:0;padding:1.15rem}.control--wide{grid-column:1/-1}.control label,.swatches legend{font-family:var(--mono);letter-spacing:.04em;margin:0 0 .55rem;padding:0;font-size:.66rem;font-weight:700;display:block}.control input,.control select,.control textarea{border:0;border-bottom:1px solid var(--ink);width:100%;font-family:var(--mono);background:0 0;border-radius:0;outline:0;font-size:.78rem}.control input,.control select{min-height:2.2rem}.control textarea{resize:vertical;line-height:1.5}.control input:focus,.control select:focus,.control textarea:focus{border-color:var(--blue);box-shadow:0 2px 0 var(--blue)}.swatches{flex-wrap:wrap;gap:.5rem;display:flex}.swatches legend{float:left;width:100%}.swatch{border:1px solid var(--ink);color:#0000;cursor:pointer;border-radius:50%;width:2rem;height:2rem;transition:transform .16s;overflow:hidden}.swatch:hover,.swatch:focus-visible{transform:scale(1.13)rotate(-8deg)}.swatch--pink{background:var(--pink)}.swatch--blue{background:var(--blue)}.swatch--ink{background:var(--ink)}.swatch--green{background:var(--green)}.preview-panel{background:var(--acid);grid-template-rows:auto minmax(26rem,1fr) auto;min-width:0;display:grid}.preview-panel__topline,.code-output__header{border-bottom:1px solid var(--ink);font-family:var(--mono);justify-content:space-between;padding:.75rem 1rem;font-size:.62rem;display:flex}#preview-status{color:#191917a1}.preview-stage{background:linear-gradient(90deg, #1919170d 1px, transparent 1px), linear-gradient(#1919170d 1px, transparent 1px), var(--acid);background-size:2rem 2rem;place-items:center;min-width:0;padding:clamp(3rem,7vw,7rem);display:grid}.preview-stage p{max-width:14ch;font-family:var(--display);letter-spacing:-.055em;margin:0;font-size:clamp(3rem,6.5vw,6.8rem);font-weight:700;line-height:.95}.code-output{border-top:var(--line);color:#fff;background:var(--ink);min-width:0}.code-output__header{border-color:#fff3}.code-output__header button{color:var(--acid);font-family:inherit;font-size:inherit;text-underline-offset:.2em;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.code-output pre{color:#d5d2c8;white-space:pre-wrap;max-height:15rem;margin:0;padding:1.3rem;font-size:.72rem;line-height:1.6;overflow:auto}.doodle-grid{border-top:var(--line);border-left:var(--line);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.doodle-card{border-right:var(--line);border-bottom:var(--line);background:var(--paper-bright);grid-template-rows:1fr auto;min-height:15rem;padding:1rem;display:grid;position:relative;overflow:hidden}.doodle-card:nth-child(5n+2),.doodle-card:nth-child(5n+4){background:#e6dfcc}.doodle-card__number{font-family:var(--mono);font-size:.6rem;position:absolute;top:.8rem;left:.8rem}.doodle-card__stage{place-items:center;padding:3.5rem 2rem 2rem;display:grid}.doodle-card__stage p{font-family:var(--display);text-align:center;margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1}.doodle-card__stage strong{font-weight:inherit}.doodle-card>code{justify-self:end;font-size:.66rem}.multiple{grid-template-columns:minmax(0,.8fr) minmax(22rem,1.2fr);align-items:center;gap:clamp(3rem,9vw,10rem);display:grid}.multiple__copy>p:last-child{max-width:44rem;margin:2rem 0 0;font-size:1.05rem;line-height:1.65}.multiple__demo{border:var(--line);background:var(--acid);min-height:28rem;box-shadow:-15px 15px 0 var(--blue);place-items:center;padding:4rem;display:grid;position:relative;transform:rotate(-1deg)}.multiple__demo p{font-family:var(--display);letter-spacing:-.05em;margin:0;font-size:clamp(3rem,6vw,6rem);font-weight:700;line-height:.95}.multiple__demo strong,.multiple__demo em{font:inherit}.multiple__demo code{border:1px solid var(--ink);background:var(--paper-bright);padding:.4rem .55rem;font-size:.65rem;position:absolute;bottom:1rem;right:1rem}.reference{color:#fff;background:var(--ink);width:100%;max-width:none;padding-inline:clamp(1.1rem,3.5vw,4rem)}.reference .eyebrow,.reference .section-heading h2{color:#fff}.reference-table{border-top:1px solid #ffffff73}.reference-row{border-bottom:1px solid #ffffff40;grid-template-columns:minmax(10rem,.45fr) minmax(20rem,1fr) minmax(7rem,.25fr);align-items:center;gap:2rem;min-height:6rem;display:grid}.reference-row--head{color:#aaa99f;min-height:3.4rem;font-family:var(--mono);text-transform:uppercase;font-size:.6rem}.reference-row code{color:var(--acid);font-size:.8rem}.reference-row p,.reference-row span{margin:0;font-size:.92rem;line-height:1.5}.reference-row>span:last-child{color:#aaa99f;font-family:var(--mono);font-size:.7rem}.install{grid-template-columns:minmax(0,.8fr) minmax(24rem,1.2fr);align-items:end;gap:clamp(3rem,8vw,9rem);display:grid}.install__code pre{border:var(--line);color:#fff;background:var(--blue);box-shadow:12px 12px 0 var(--ink);margin:0;padding:clamp(1.5rem,3vw,2.5rem);font-size:.75rem;overflow:auto}.install__code{min-width:0;overflow:hidden}.install__code p{max-width:42rem;margin:2rem 0 0;line-height:1.6}.site-footer{border-top:var(--line);background:var(--acid);grid-template-columns:1fr auto 1fr;align-items:end;gap:2rem;min-height:13rem;padding:2rem clamp(1.1rem,3.5vw,4rem);display:grid}.site-footer p{margin:0}.site-footer p:first-child{font-family:var(--display);letter-spacing:-.08em;font-size:clamp(3rem,7vw,7rem);font-weight:700;line-height:.7}.site-footer p:first-child span{color:var(--pink)}.site-footer p:nth-child(2){max-width:24rem;font-family:var(--mono);text-align:center;text-transform:uppercase;font-size:.66rem;line-height:1.5}.site-footer a{justify-self:end;font-size:.8rem}@media (width<=980px){.hero{grid-template-columns:1fr;min-height:auto}.hero-card{width:min(32rem,88%);margin:0 0 2rem auto}.hero__scribble{grid-column:1;position:static}.playground-grid,.multiple,.install{grid-template-columns:minmax(0,1fr)}.controls{border-right:0;border-bottom:var(--line)}.doodle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=720px){.site-header{grid-template-columns:1fr auto}.header-note{display:none}.section-shell{width:min(100% - 2rem,92rem)}.hero h1{font-size:clamp(4rem,20vw,7rem)}.hero:before{display:none}.proof-strip{white-space:normal;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;min-height:auto}.proof-strip p{font-size:.58rem}.section-heading--split{grid-template-columns:1fr;gap:1.5rem}.mockup-board{box-shadow:9px 9px 0 var(--pink);grid-template-columns:1fr}.mockup-board__content{min-height:30rem;padding:5rem 2rem 3rem}.mockup-board__attribute{border-top:var(--line);writing-mode:initial;border-left:0;min-height:4rem;transform:none}.playground,.reference{padding-inline:1rem}.controls{grid-template-columns:1fr}.control--wide{grid-column:auto}.preview-stage{min-height:25rem;padding:3rem 2rem}.doodle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-row,.reference-row--head{grid-template-columns:1fr;gap:.65rem;padding:1.25rem 0}.reference-row--head{display:none}.install__code pre{white-space:pre-wrap;overflow-wrap:anywhere}.multiple__demo{min-height:23rem;box-shadow:-8px 8px 0 var(--blue);padding:2.5rem}.site-footer{grid-template-columns:1fr;align-items:start}.site-footer p:nth-child(2){text-align:left}.site-footer a{justify-self:start}}@media (width<=460px){.site-nav a:nth-child(2){display:none}.doodle-grid{grid-template-columns:1fr}.doodle-card{min-height:13rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important}}