@font-face{font-family:DM Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin.woff2)format("woff2")}@font-face{font-family:Instrument Serif;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif.woff2)format("woff2")}@font-face{font-family:Instrument Serif;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic.woff2)format("woff2")}:root{color:#29282b;font-synthesis:none;--paper:#f5f2eb;--ink:#29282b;--muted:#74716d;--line:#dcd8ce;--orange:#bd4b29;scroll-behavior:smooth;background:#f5f2eb;font-family:DM Sans,sans-serif;font-weight:450}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,pre:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button{border:0}img{display:block}::selection{background:#eac6ac}.wrap{max-width:1248px;margin:auto;padding-inline:48px}.site-header{justify-content:space-between;align-items:center;height:112px;display:flex}.brand{letter-spacing:-1px;align-items:center;gap:10px;font-size:23px;font-weight:650;display:flex}.brand span{color:var(--muted);letter-spacing:0;border-left:1px solid var(--line);margin-left:6px;padding-left:15px;font-size:11px;font-weight:450}.site-header nav{gap:29px;font-size:12px;display:flex}.site-header nav a:hover,footer a:hover{color:var(--orange)}.site-header .github{border-left:1px solid var(--line);padding-left:29px}.hero{text-align:center;padding-top:79px;padding-bottom:86px;position:relative}.eyebrow,.section-number,.live-label{letter-spacing:1.5px;font-size:10px;font-weight:600}.eyebrow{color:#6d665b;justify-content:center;align-items:center;gap:9px;display:flex}.pip{background:var(--orange);border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}h1,h2,h3,p{margin:0}h1,h2,.closing p{letter-spacing:-2px;font-family:Instrument Serif,Georgia,serif;font-weight:400}h1{margin:26px 0;font-size:clamp(72px,8.2vw,116px);line-height:1.01}h1 em{color:var(--orange)}em{font-weight:400}h2{font-size:48px;line-height:1.08}h3{font-size:15px;font-weight:550}.hero-description{color:#6c6864;font-size:15px;line-height:1.8}.hero-actions{justify-content:center;align-items:center;gap:14px;margin-top:29px;display:flex}.button{border-radius:5px;justify-content:center;align-items:center;gap:22px;min-height:46px;padding:0 21px;font-size:12px;font-weight:550;transition:background .2s,transform .2s;display:inline-flex}.button:active{transform:translateY(1px)}.primary{background:var(--ink);color:var(--paper)}.primary:hover{background:#454047}.install-command{border:1px solid var(--line);background:0 0;border-radius:5px;align-items:center;gap:12px;padding:14px 17px;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;display:inline-flex}.install-command:hover{background:#eae6dd}.install-command>span:first-child{color:var(--orange)}.copy-icon{color:var(--muted)}.hero-footnote{color:var(--muted);justify-content:center;gap:12px;margin-top:21px;font-size:10px;display:flex}.hero-doodle{color:#8b8176;pointer-events:none;position:absolute;bottom:43px;right:67px}.section-top{justify-content:space-between;align-items:flex-end;margin-bottom:26px;display:flex}.section-number{color:#898075;font-size:9px}.section-top h2{letter-spacing:-1px;margin-top:12px;font-size:38px}.live-label{letter-spacing:1px;align-items:center;gap:8px;padding-bottom:7px;font-size:9px;display:flex}.studio{background:#eee9df;border:1px solid #d1cbbf;border-radius:10px;grid-template-columns:minmax(0,1fr) 274px;display:grid;overflow:hidden;box-shadow:0 20px 60px -45px #63543c4d}.stage-shell{min-width:0}.browser-bar{color:#8b8376;background:#f0ece3;border-bottom:1px solid #ddd7cc;justify-content:space-between;align-items:center;height:42px;padding:0 19px;font-size:10px;display:flex}.window-dots{gap:5px;display:flex}.window-dots i{background:#d1c7b8;border-radius:100%;width:6px;height:6px}.browser-mark{font-size:13px}.stage{isolation:isolate;background:#e6e0d4;height:502px;transition:background .3s;position:relative;overflow:hidden}.stage-grid{opacity:.22;pointer-events:none;background-image:radial-gradient(#9f9480 .7px,#0000 .7px);background-size:18px 18px;position:absolute;inset:0}.stage-label{letter-spacing:1.8px;color:#7a7266;font-size:7px;position:absolute;top:28px;left:32px}.demo-card{border-radius:6px;position:absolute;box-shadow:0 14px 30px -16px #322b2440}.back-card{color:#f2eee6;z-index:1;background:#353139;width:57%;height:321px;padding:35px 29px;top:87px;left:7%;transform:rotate(-5deg)}.card-kicker{letter-spacing:1.8px;opacity:.65;font-size:7px}.back-card p{letter-spacing:-.8px;margin-top:26px;font-family:Instrument Serif,Georgia,serif;font-size:47px;line-height:1.04}.back-card em{color:#cbbca5}.card-bottom{justify-content:space-between;align-items:center;margin-top:30px;display:flex}.card-bottom span:first-child{letter-spacing:1px;color:#bfb3a3;font-size:6px}.card-bottom span:last-child{color:#bfb3a3;font-size:25px}.note-card{color:#29282b;z-index:2;background:#faf8f0;width:43%;height:275px;padding:34px 25px;top:132px;right:7%;transform:rotate(5deg);box-shadow:0 17px 30px -15px #322b2459}.note-card h3{letter-spacing:-1px;margin-top:30px;font-family:Instrument Serif,Georgia,serif;font-size:35px;font-weight:400}.note-card p{color:#7d7569;margin-top:9px;font-size:12px;line-height:1.8}.handwritten{color:#bd4b29;margin-top:18px;font-family:Instrument Serif,Georgia,serif;font-size:17px;font-style:italic}.note-number{letter-spacing:1.2px;color:#8a8072;font-size:6px;position:absolute;bottom:19px}.mini-card{color:#fff1e2;z-index:3;background:#bd4b29;border-radius:5px;align-items:center;gap:19px;width:237px;height:78px;padding:17px 23px;font-size:11px;line-height:1.6;display:flex;position:absolute;bottom:49px;left:27%;transform:rotate(-3deg);box-shadow:0 10px 25px -10px #9b3b2155}.mini-icon{font-size:33px}.mini-card strong{font-weight:500}.stage-caption{color:#867b6a;font-family:Instrument Serif,Georgia,serif;font-size:15px;font-style:italic;position:absolute;bottom:20px;right:23px}.stage.dark{background:#242229}.stage.dark .stage-label,.stage.dark .stage-caption{color:#bbb1a0}.stage.dark .back-card{background:#44404c}.stage.dark .note-card{color:#f2eee6;background:#343139}.stage.dark .note-card p,.stage.dark .note-number{color:#c3b6a7}.stage.dark .note-card .handwritten{color:#dfb089}.stage.flipped .back-card{z-index:4}.stage-toolbar{background:#eee9df;border-top:1px solid #d9d1c5;justify-content:space-between;align-items:center;gap:10px;height:47px;padding:0 17px;display:flex}.text-button{white-space:nowrap;background:0 0;padding:10px 0;font-size:9px}.text-button span{margin-right:5px;font-size:14px}#activity{color:#81786c;font-size:8px}.controls{background:#f9f6ef;border-left:1px solid #d7d0c4;padding:29px 25px}.controls-heading h3{letter-spacing:-.4px;margin:10px 0 28px;font-size:16px}fieldset{border:0;margin:0 0 26px;padding:0}legend,.range-label,.switch-row label{font-size:11px;font-weight:550}legend{margin-bottom:12px}.segmented{background:#eee9df;border:1px solid #ddd6c9;border-radius:5px;padding:3px;display:flex}.segmented button{color:#7d7365;background:0 0;border-radius:3px;flex:1;padding:9px 5px;font-size:10px}.segmented button[aria-pressed=true]{color:#35302a;background:#fffdf8;box-shadow:0 1px 3px #5343311a}.range-label{justify-content:space-between;margin-bottom:13px;display:flex}.range-label output{color:#8d8172;font-size:10px;font-weight:450}input[type=range]{width:100%;accent-color:var(--orange);cursor:pointer;height:3px;margin:0 0 28px}.switch-row{justify-content:space-between;align-items:center;gap:7px;margin-bottom:24px;display:flex}.switch-row small{color:#8a8073;margin-top:6px;font-size:9px;font-weight:400;line-height:1.5;display:block}.switch-row input{appearance:none;cursor:pointer;background:#d6ccbe;border:1px solid #c8bdad;border-radius:14px;flex-shrink:0;width:29px;height:17px;margin:0;position:relative}.switch-row input:before{content:"";background:#fff9ef;border-radius:50%;width:11px;height:11px;transition:transform .2s;position:absolute;top:2px;left:2px}.switch-row input:checked{background:var(--orange);border-color:var(--orange)}.switch-row input:checked:before{transform:translate(12px)}.pause-button{background:0 0;border:1px solid #d6cbbb;width:100%;min-height:39px;margin-top:0;font-size:10px}.pause-button:hover{background:#eee7db}.controls-note{color:#918575;text-align:center;margin-top:15px;font-size:9px;line-height:1.8}.craft{grid-template-columns:1fr 1.25fr;gap:90px;margin-top:110px;margin-bottom:110px;display:grid}.craft-intro h2,.install-heading h2{margin:20px 0}.craft-intro h2 em,.install-heading h2 em{color:#8d7d69}.craft-intro p,.install-heading>p{color:#7c746b;font-size:12px;line-height:1.8}.craft-list article{border-bottom:1px solid var(--line);gap:20px;padding:25px 0;display:flex}.craft-list article:first-child{padding-top:6px}.feature-symbol{color:#8e7962;flex-shrink:0;width:30px;font-size:28px;font-weight:400}.craft-list h3{margin:2px 0 9px;font-size:14px}.craft-list p{color:#7c746b;font-size:11px;line-height:1.9}.feature-index{color:#a39785;margin-left:12px;font-size:9px}.install-section{grid-template-columns:1fr 1.25fr;gap:90px;padding-top:66px;padding-bottom:66px;display:grid;position:relative}.install-section:before{content:"";z-index:-1;background:#ece7dc;border-radius:8px;position:absolute;inset:0}.install-heading .install-command{border-color:#cfc4b2;margin-top:23px}.code-panel{color:#d6cbb9;background:#302d34;border-radius:6px;align-self:center;min-width:0;overflow:hidden;box-shadow:0 18px 40px -28px #1b172e80}.code-tabs{border-bottom:1px solid #49434d;align-items:center;gap:22px;min-height:48px;padding:0 17px;display:flex}.code-tabs button{color:#a29ba8;background:0 0;padding:16px 0;font-size:10px}.code-tabs button[aria-selected=true]{color:#f2eee6;border-bottom:1px solid #dec8a8}.code-tabs #copy-code{margin-left:auto;font-size:9px}.code-panel pre{tab-size:2;min-height:227px;margin:0;padding:25px 23px;font:10px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-x:auto}.code-panel pre code{font:inherit}.code-bottom{color:#a49aab;border-top:1px solid #49434d;align-items:center;gap:8px;padding:15px 22px;font-size:8px;display:flex}.code-bottom .pip{background:#b4bb9e;width:4px;height:4px}.questions{grid-template-columns:1fr 1.25fr;gap:90px;margin-top:100px;margin-bottom:90px;display:grid}.questions h2{letter-spacing:-1px;margin-top:16px;font-size:36px}.question-list details{border-bottom:1px solid var(--line);font-size:12px}.question-list summary{cursor:pointer;justify-content:space-between;gap:15px;padding:21px 0;list-style:none;display:flex}.question-list details:first-child summary{padding-top:6px}.question-list summary:after{content:"+";color:#92836d}.question-list details[open] summary:after{content:"−"}.question-list p{color:#7c746b;padding:0 20px 20px 0;font-size:11px;line-height:1.9}.question-list a{text-decoration:underline}.question-list code{font-size:10px}.closing{text-align:center;border-top:1px solid var(--line);padding-top:51px;padding-bottom:64px}.closing-star{color:var(--orange);font-size:31px}.closing p{margin:22px 0 26px;font-size:45px;line-height:1.12}.closing p em{color:#8d7d69}footer{border-top:1px solid var(--line);color:#8b8175;justify-content:space-between;align-items:center;min-height:100px;font-size:9px;display:flex}footer .brand{color:var(--ink);font-size:19px}footer .brand span{font-size:9px}footer>div{gap:21px;display:flex}.toast{z-index:1000;background:var(--ink);color:var(--paper);border-radius:6px;max-width:90vw;padding:14px 22px;font-size:11px;position:fixed;bottom:25px;left:50%;transform:translate(-50%);box-shadow:0 5px 30px #0002}.toast[hidden]{display:none}section[id]{scroll-margin-top:28px}@media (width>=1450px){.wrap{max-width:1340px;padding-inline:65px}.stage{height:530px}.back-card{width:54%;left:9%}.note-card{right:10%}.hero{padding-top:88px}}@media (width<=1050px){.wrap{padding-inline:30px}.studio{grid-template-columns:minmax(0,1fr) 240px}.controls{padding:27px 21px}.back-card{padding:28px 21px}.back-card p{font-size:39px}.note-card{padding:29px 18px}.note-card h3{font-size:31px}.handwritten{font-size:14px}.mini-card{width:208px;left:20%}.craft,.install-section,.questions{gap:45px}.hero-doodle{opacity:.7;width:100px;right:15px}.code-tabs{gap:15px}.hero{padding-top:60px}}@media (width<=800px){.studio{grid-template-columns:1fr}.controls{border-top:1px solid #d7d0c4;border-left:0;grid-template-columns:1fr 1fr;gap:0 28px;display:grid}.controls-heading{grid-column:1/-1}.controls-heading h3{margin-bottom:20px}.controls fieldset{grid-column:1/-1;margin-bottom:25px}.controls .range-label[for=spider-size]{grid-area:3/1}.controls #spider-size{grid-area:4/1}.controls .range-label[for=web-size]{grid-area:3/2}.controls #web-size{grid-area:4/2}.controls .switch-row{margin-top:0}.controls-note{align-self:center;margin-top:0}.stage{height:490px}.back-card{width:54%;top:80px;left:9%}.note-card{width:40%;top:126px;right:9%}.mini-card{bottom:55px;left:27%}.craft,.install-section,.questions{grid-template-columns:.9fr 1.1fr;gap:35px}.craft{margin-top:80px;margin-bottom:80px}h2{font-size:39px}.install-section{padding-top:45px;padding-bottom:45px}.code-panel pre{padding:22px 17px;font-size:9px}.code-tabs{gap:14px;padding-inline:14px}.code-tabs button{font-size:9px}.code-bottom{padding-inline:15px;font-size:7px}.hero-doodle,footer>span{display:none}}@media (width<=600px){.wrap{padding-inline:22px}.site-header{height:82px}.brand{gap:6px;font-size:21px}.brand img{width:27px}.brand span{margin-left:3px;padding-left:9px;font-size:9px}.site-header nav{gap:20px;font-size:11px}.site-header nav a:first-child{display:none}.site-header .github{border:0;padding-left:0}.hero{padding-top:50px;padding-bottom:62px}.eyebrow{letter-spacing:1.2px;gap:7px;font-size:7px}h1{letter-spacing:-2.4px;margin-top:24px;margin-bottom:23px;font-size:79px}.hero-description{font-size:12px;line-height:1.9}.hero-actions{flex-direction:column;gap:12px;margin-top:25px}.hero-actions .button{min-height:43px}.install-command{padding:14px;font-size:10px}.hero-footnote{gap:8px;margin-top:22px;font-size:8px}.section-top{align-items:center;margin-bottom:22px}.section-top h2{margin-top:10px;font-size:29px}.section-number{letter-spacing:1.1px;font-size:7px}.live-label{letter-spacing:.6px;gap:5px;padding-top:17px;font-size:6px}.live-label .pip{width:4px;height:4px}.studio{border-radius:7px}.stage{height:426px}.browser-bar{height:34px;padding-inline:12px;font-size:8px}.stage-label{letter-spacing:1.2px;font-size:5px;top:24px;left:20px}.back-card{width:61%;height:264px;padding:26px 17px;top:73px;left:6%;transform:rotate(-4deg)}.card-kicker{letter-spacing:1.1px;font-size:5px}.back-card p{margin-top:25px;font-size:34px}.card-bottom{margin-top:23px}.card-bottom span:first-child{font-size:4px}.card-bottom span:last-child{font-size:22px}.note-card{width:46%;height:224px;padding:22px 15px;top:124px;right:6%}.note-card h3{margin-top:29px;font-size:28px}.note-card p{margin-top:6px;font-size:10px}.handwritten{margin-top:13px;font-size:12px}.note-number{font-size:4px;bottom:16px}.mini-card{gap:14px;width:177px;height:63px;padding:13px 18px;font-size:9px;bottom:43px;left:14%}.mini-icon{font-size:28px}.stage-caption{font-size:12px;bottom:16px;right:15px}.stage-toolbar{height:43px;padding-inline:12px}.text-button{font-size:8px}.text-button span{font-size:12px}#activity{display:none}.controls{gap:0 20px;padding:24px 20px}.controls-heading h3{font-size:15px}.controls-note{font-size:8px}.switch-row label{font-size:10px}.switch-row small{font-size:8px}.switch-row{gap:4px}.switch-row input{width:27px}.switch-row input:checked:before{transform:translate(10px)}.controls .pause-button{gap:12px;padding-inline:10px;font-size:9px}.craft,.install-section,.questions{grid-template-columns:1fr;gap:34px}.craft{margin-top:66px;margin-bottom:65px}.craft-intro h2,.install-heading h2{margin:15px 0;font-size:42px}.craft-intro p,.install-heading>p{font-size:12px}.craft-list article{padding:21px 0}.craft-list article:first-child{padding-top:0}.craft-list p{font-size:11px}.craft-list h3{font-size:13px}.install-section{margin-inline:12px;padding-block:37px;padding-inline:22px}.install-heading .install-command{margin-top:20px}.code-panel pre{min-height:209px;font-size:9px}.code-tabs button{font-size:9px}.code-tabs{gap:22px}.code-bottom{font-size:7px}.questions{gap:24px;margin-top:65px;margin-bottom:59px}.questions h2{margin-top:12px;font-size:34px}.question-list summary{font-size:12px}.closing{padding-top:37px;padding-bottom:44px}.closing p{letter-spacing:-1px;font-size:37px}.closing .button{font-size:11px}footer{flex-direction:column;justify-content:center;gap:20px;min-height:130px}footer .brand span{font-size:9px}footer>div{gap:28px;font-size:10px}.toast{text-align:center;width:max-content;font-size:10px}.desktop-break{display:none}}@media (prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,:before,:after{transition:none!important}}.controls #clear-webs{grid-column:1/-1;margin-top:8px}.controls-note{grid-column:1/-1}