@layer components{.hero{display:grid;gap:2.5rem;padding-top:clamp(2rem,1.1rem + 3.2vw,3.5rem)}.hero-h1{max-width:9.6em;font-size:var(--text-h1);line-height:var(--text-h1--line-height);letter-spacing:var(--text-h1--letter-spacing);font-weight:600;text-wrap:balance}.hero-sub{max-width:36rem;margin-top:clamp(1.25rem,.9rem + 1.2vw,2rem);color:var(--color-ink-2);font-size:var(--text-lede);line-height:var(--text-lede--line-height);letter-spacing:var(--text-lede--letter-spacing);text-wrap:pretty}.hero-sub-line{display:block;text-wrap:balance}.hero-em{color:var(--color-brand)}@media(max-width:479px){.hero-h1{font-size:clamp(2.25rem,11.4vw - .3rem,2.75rem)}}.hero-form{display:flex;flex-direction:column;gap:.75rem;max-width:30rem;margin-top:1.75rem}.hero-field{flex:1;min-width:0}@media(min-width:480px){.hero-form{flex-direction:row;align-items:flex-start;gap:.5rem}.hero-submit{flex:none}}@media(min-width:1200px){.hero{padding-top:clamp(2.5rem,1rem + 2vw,4rem)}.hero-h1{max-width:none}}}@layer components{.hero{justify-items:center;gap:clamp(2.5rem,1.75rem + 2vw,3.5rem);text-align:center}.hero .hero-copy{display:flex;flex-direction:column;align-items:center;max-width:64rem}.hero .hero-h1{max-width:14em}.hero .hero-sub{max-width:41rem}.hero .hero-sub{margin-inline:auto}.hero .hero-form{width:100%;margin-inline:auto;text-align:left}@media(min-width:480px){.hero .hero-form{justify-content:center}}@media(min-width:1200px){.hero .hero-h1{max-width:none}}}@layer components{.ans-src{display:flex;flex-wrap:wrap;gap:.5rem}@media(max-width:767px){.ans-src>*{padding-inline:.5rem}}@media(min-width:768px){.ans-q{font-size:var(--text-body);padding:.75rem 1rem}}[data-type] .ch{white-space:pre-wrap}}@layer components{.how-h2{max-width:14em}.h2-quiet{color:var(--color-ink-2)}.how-step{margin-top:3rem}.how-name{display:flex;align-items:center;gap:.75rem;font-size:var(--text-title);line-height:var(--text-title--line-height);letter-spacing:var(--text-title--letter-spacing);font-weight:600}.how-name:before{content:attr(data-num);flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--color-brand);color:var(--color-sheet);font-size:var(--text-small);line-height:1;letter-spacing:0;font-weight:600;font-variant-numeric:tabular-nums}.how-go{font:inherit;letter-spacing:inherit;text-align:left}.how-stage{display:none}.how-text{max-width:30rem;margin-top:.5rem;color:var(--color-ink-2);text-wrap:pretty}.how-vis{display:grid;place-items:center;margin:1.25rem 0 0;padding:1.25rem .75rem;border-radius:var(--radius-panel);background:var(--color-stage)}.how-vis>:not(figcaption){width:100%;max-width:34rem}@media(min-width:768px){.how-step{margin-top:4rem}.how-vis{padding:2.5rem}}@media(min-width:1024px){.rail .how-pin{--stage-h: min(38rem, 100svh - var(--header-h) - 6rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto repeat(6,auto);column-gap:1.5rem}.rail .how-h2{grid-column:1 / -1;grid-row:1;margin-bottom:3rem}.rail .how-step{display:contents}.rail .how-name,.rail .how-text{grid-column:1 / span 4;padding-right:1.5rem}.rail .how-step[data-step=ask] .how-name{grid-row:2}.rail .how-step[data-step=ask] .how-text{grid-row:3}.rail .how-step[data-step=build] .how-name{grid-row:4}.rail .how-step[data-step=build] .how-text{grid-row:5}.rail .how-step[data-step=share] .how-name{grid-row:6}.rail .how-step[data-step=share] .how-text{grid-row:7}.rail .how-text{min-height:calc(var(--stage-h) * .8)}.rail .how-step[data-step=share] .how-text{min-height:calc(var(--stage-h) * .9)}.rail .how-name{position:relative;display:block;padding:1.25rem 0 0 2.75rem;border-left:2px dotted var(--color-line-3);font-size:var(--text-title);line-height:var(--text-title--line-height)}.rail .how-text{padding:.5rem 0 1.75rem 2.75rem;margin:0;border-left:2px dotted var(--color-line-3);font-size:var(--text-body)}.rail .how-name:before{position:absolute;left:calc(-1rem - 1px);top:1.25rem;box-shadow:0 0 0 4px var(--color-ground);transition:background-color var(--duration-state) linear,color var(--duration-state) linear}.rail .how-step[data-step=ask] .how-name{border-left-color:transparent;background:repeating-linear-gradient(to bottom,var(--color-line-3) 0 2px,transparent 2px 4px) -2px 2.25rem / 2px calc(100% - 2.25rem) no-repeat border-box}.rail .how-step:not([data-active]) .how-name:before{background:var(--color-ground);color:var(--color-ink-2);box-shadow:0 0 0 4px var(--color-ground),inset 0 0 0 1.5px var(--color-line-3)}.rail .how-go{cursor:pointer}.rail .how-step:not([data-active]) :is(.how-name,.how-text){color:var(--color-ink-2)}.rail .how-step[data-active] .how-name,.rail .how-step[data-active] .how-text{color:var(--color-ink)}.rail :is(.how-name,.how-text){transition:color var(--duration-state) linear}.rail .how-vis{grid-column:5 / -1;grid-row:2 / 8;align-self:start;position:sticky;top:calc(var(--header-h) + (100svh - var(--header-h) - var(--stage-h)) / 2);height:var(--stage-h);margin:0;padding:1.5rem;background:none;opacity:0;visibility:hidden;transition:opacity var(--duration-ui) linear,visibility 0s linear var(--duration-ui)}.rail .how-step[data-active] .how-vis{opacity:1;visibility:visible;transition:opacity var(--duration-state) linear .15s}.rail .how-vis>:not(figcaption){max-width:36rem}.rail .how-stage{display:block;grid-column:5 / -1;grid-row:2 / 8;align-self:start;position:sticky;top:calc(var(--header-h) + (100svh - var(--header-h) - var(--stage-h)) / 2);height:var(--stage-h);border-radius:var(--radius-panel);background:var(--color-stage)}}@media(min-width:1200px){.rail .how-vis{grid-column:5 / -1;padding:2.5rem}}}@media(prefers-reduced-motion:reduce){.rail :is(.how-vis,.how-name,.how-text),.rail .how-name:before{transition:none!important}}@layer components{.night .how-text{color:var(--color-on-night-2)}.night .how-vis{background:var(--color-night-2)}.night .how-vis>*{color:var(--color-ink)}.night .how-name:before{box-shadow:none}@media(min-width:1024px){.night.rail .how-vis{background:none}.night.rail .how-stage{background:var(--color-night-2)}.night.rail :is(.how-name,.how-text){border-left-color:color-mix(in srgb,var(--color-on-night) 28%,transparent)}.night.rail .how-step[data-step=ask] .how-name{border-left-color:transparent;background-image:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--color-on-night) 28%,transparent) 0 2px,transparent 2px 4px)}.night.rail .how-name:before{box-shadow:0 0 0 4px var(--color-night)}.night.rail .how-step:not([data-active]) .how-name:before{background:var(--color-night);color:var(--color-on-night-2);box-shadow:0 0 0 4px var(--color-night),inset 0 0 0 1.5px color-mix(in srgb,var(--color-on-night) 35%,transparent)}.night.rail .how-step:not([data-active]) :is(.how-name,.how-text){color:var(--color-on-night-2)}.night.rail .how-step[data-active] .how-name{color:var(--color-on-night)}.night.rail .how-step[data-active] .how-text{color:color-mix(in srgb,var(--color-on-night) 88%,transparent)}.rail .how-step[data-step=share] .how-text{border-left-color:transparent}}}@layer components{.night .how-vis{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.75rem;padding:0;background:none}.night .how-vis.has-ctl{padding-bottom:0}.how .how-vis>.loop-ctl{position:static;flex:none}@media(min-width:1024px){.night.rail .how-stage{background:none}.night.rail .how-vis{padding:0}.night.rail .how-vis.has-ctl{padding-bottom:0}.night.rail .how-vis>:not(figcaption){max-width:42rem}.night.rail .how-vis:is([data-vis=ask],[data-vis=build],[data-vis=share]){--win-w: 38rem;--win-h: 28rem;padding-left:max(0px,(100% - var(--win-w)) / 2)}.night.rail .how-vis[data-vis=ask] .ask-chat{width:min(100%,var(--win-w));height:var(--win-h);max-height:none;flex:none}.night.rail .how-vis[data-vis=build] .bv-scene{width:min(100%,var(--win-w));height:var(--win-h)}.night.rail .how-vis[data-vis=share] .sv-scene{max-width:none;min-height:var(--win-h)}.night.rail .how-vis[data-vis=share] .sv-win{width:min(100%,var(--win-w));height:var(--win-h)}.night.rail .how-step .how-vis{transition:none}}.how .loop-ctl{background:var(--color-night-2);box-shadow:inset 0 0 0 1px var(--color-line);-webkit-backdrop-filter:none;backdrop-filter:none}.how .loop-ctl:hover{background:var(--color-tint)}}