.landing{flex-direction:column;max-width:960px;min-height:100dvh;margin:0 auto;padding:16px;display:flex}.hero{--p:1;flex:1;grid-template-columns:minmax(0,1fr);align-items:center;gap:32px;padding:40px 0;display:grid}.hero-copy{flex-direction:column;align-items:flex-start;gap:24px;min-width:0;display:flex}.hero-welcome{color:var(--c-text-muted);margin:0;font-size:.9375rem}.hero-art{aspect-ratio:1;justify-self:center;place-items:center;width:100%;max-width:420px;display:grid;position:relative}.hero-art .mascot{width:min(220px,60%);height:auto}.hero-tile{white-space:nowrap;background:var(--c-surface);max-width:46%;color:var(--c-text);border:2px solid var(--c-border);border-bottom-width:4px;border-radius:14px;padding:8px 12px;font-size:.875rem;font-weight:800;position:absolute}.tile-code{color:var(--c-syntax-string);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;top:6%;left:0}.tile-answer{background:var(--c-success-soft);color:var(--c-success-text);border-color:var(--c-success);bottom:10%;left:2%}.tile-node{background:var(--c-brand);border-color:var(--c-brand-shadow);width:52px;height:52px;color:var(--c-on-brand);border-radius:50%;place-items:center;padding:0;display:grid;top:14%;right:6%}.tile-xp{background:var(--c-surface);color:var(--c-xp-text);border-color:var(--c-xp);border-radius:999px;align-items:center;gap:4px;display:flex;bottom:18%;right:0}@media (max-width:399px){.hero-tile{padding:6px 8px;font-size:.75rem}.tile-code{text-overflow:ellipsis;max-width:58%;overflow:hidden}.tile-node{width:44px;height:44px;padding:0}}@media (min-width:900px){.landing{max-width:1120px}.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}}@media (prefers-reduced-motion:no-preference){.hero-tile{transform:translateY(calc((var(--p0,var(--p)) - var(--p)) * var(--depth) * 1px))}}.hero-title{letter-spacing:-.02em;overflow-wrap:anywhere;max-width:100%;margin:0;font-size:clamp(2.25rem,9vw,4.5rem);font-weight:800;line-height:1.05}.hero-sub{max-width:34em;color:var(--c-text-muted);margin:0;font-size:clamp(1.0625rem,3.5vw,1.375rem)}.hero-cta{flex-wrap:wrap;align-items:center;gap:12px 16px;width:100%;display:flex}.btn{text-align:center;border-radius:16px;max-width:100%;padding:14px 24px;font-size:1.0625rem;font-weight:800;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:inline-block}.btn-primary{background:var(--c-brand);color:var(--c-on-brand);box-shadow:0 5px 0 var(--c-brand-shadow)}.btn-primary:active{box-shadow:0 0 0 var(--c-brand-shadow);transform:translateY(5px)}.btn-quiet{background:var(--c-surface);color:var(--c-brand-text);border:2px solid var(--c-border);box-shadow:0 4px 0 var(--c-neutral-shadow);padding:12px 22px}.btn-quiet:active{box-shadow:0 0 0 var(--c-neutral-shadow);transform:translateY(4px)}
.mascot{max-width:100%;height:auto;display:block;overflow:visible}.mascot-body,.mascot-eyes{transform-box:fill-box;transform-origin:50%}.mascot-eyes{translate:calc(var(--lx,0) * 1px) calc(var(--ly,0) * 1px)}.confetti-layer{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-piece{left:var(--ox);top:var(--oy);background:var(--c);opacity:0;border-radius:3px;width:10px;height:14px;position:absolute}@media (prefers-reduced-motion:no-preference){.mascot[data-mood=idle] .mascot-body,.mascot[data-mood=oops] .mascot-body{animation:2.6s ease-in-out infinite alternate mascot-bob}.mascot[data-mood=oops] .mascot-body{animation:.32s linear mascot-wobble,2.6s ease-in-out .32s infinite alternate mascot-bob}.mascot[data-mood=cheer] .mascot-body{animation:mascot-hop .6s var(--pop) 1}.mascot[data-mood=celebrate] .mascot-body{animation:mascot-hop-big .5s var(--pop) 3, mascot-bob 2.6s ease-in-out 1.5s infinite alternate}.mascot .mascot-eyes{animation:4s infinite mascot-blink}.final-cta:not(.in) .mascot .mascot-body,[data-screen]:not(.on) .mascot .mascot-body{animation:none}.hero:has(.btn-primary:hover,.btn-primary:focus-visible) .mascot-body{animation:mascot-hop .6s var(--pop) 1}.confetti-piece{animation:confetti-fly 1.4s cubic-bezier(.2, .6, .4, 1) var(--d,0s) both}}@keyframes mascot-bob{to{transform:translateY(-.7px)}}@keyframes mascot-hop{40%{transform:translateY(-5px)}}@keyframes mascot-hop-big{40%{transform:translateY(-7px)}}@keyframes mascot-wobble{25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}@keyframes mascot-blink{0%,98.4%{transform:scaleY(1)}98.5%,99.9%{transform:scaleY(.13)}to{transform:scaleY(1)}}@keyframes confetti-fly{0%{opacity:1;transform:translate(0, 0) rotate(var(--r))}70%{opacity:1}to{opacity:0;transform:translate(var(--vx), calc(var(--vy) + 220px)) rotate(calc(var(--r) + var(--spin)))}}
.idea{padding:72px 0}.idea-text{max-width:22ch;color:var(--c-text);margin:0;font-size:clamp(1.75rem,6vw,3rem);font-weight:800;line-height:1.15}.stepper{--stage-top:0px;--stage-pad:8px;--phone-h:clamp(300px, 46vh, 420px);padding:24px 0 48px}.stepper-heading{color:var(--c-text);margin:0 0 16px;font-size:clamp(1.5rem,4.5vw,2.25rem);line-height:1.15}.stepper-body{flex-direction:column;display:flex}.stepper-stage{top:var(--stage-top);z-index:2;padding:var(--stage-pad) 0;background:var(--c-background);order:-1;justify-content:center;display:flex;position:sticky}.phone{width:min(100%,340px);height:var(--phone-h);border:4px solid var(--c-border);background:var(--c-surface);border-radius:28px;flex-direction:column;display:flex;position:relative;overflow:hidden}.phone-notch{background:var(--c-border);z-index:1;border-radius:3px;width:36px;height:5px;margin-left:-18px;position:absolute;top:6px;left:50%}.phone-screens{flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);min-height:0;position:relative;overflow:hidden}.step{box-sizing:border-box;min-height:calc(100vh - var(--stage-top) - 2 * var(--stage-pad) - var(--phone-h) - 64px);min-height:calc(100svh - var(--stage-top) - 2 * var(--stage-pad) - var(--phone-h) - 64px);padding:8px 0 24px}.step:last-child{min-height:0}.step-text{padding-left:16px;position:relative}.step-text:before{content:"";background:var(--c-brand);border-radius:2px;width:4px;position:absolute;top:2px;bottom:2px;left:0;transform:scaleY(0)}[data-steps].live .step:not(.on) h3{color:var(--c-text-muted)}[data-steps].live .step.on p{color:var(--c-text)}[data-steps].live .step.on .step-text:before{transform:none}.step h3{color:var(--c-text);margin:0 0 6px;font-size:1.25rem}.step p{color:var(--c-text-muted);margin:0}@media (max-height:500px){.stepper{--phone-h:clamp(170px, 42vh, 300px)}}@media (min-width:900px){.stepper-body{grid-template-columns:minmax(0,1fr) 320px;gap:48px;display:grid}.stepper-steps{grid-area:1/1}.stepper{--phone-h:min(540px, 80vh)}.stepper-stage{top:calc(50vh - var(--phone-h) / 2);background:0 0;order:0;grid-area:1/2;align-self:start;padding:0}.phone{width:320px}.step,.step:last-child{flex-direction:column;justify-content:center;min-height:60vh;padding:0;display:flex}}.scr{background:var(--c-surface);min-width:0;min-height:0;color:var(--c-text);flex-direction:column;gap:10px;padding:22px 14px 14px;font-size:.875rem;display:flex;overflow:hidden}.scr-title{margin:0;font-weight:800;line-height:1.3}.scr-code{background:var(--c-well);border:2px solid var(--c-border);color:var(--c-syntax-string);border-radius:12px;margin:0;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;overflow-x:auto}.scr-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.opt{text-align:center;border:2px solid var(--c-border);background:var(--c-surface);overflow-wrap:anywhere;isolation:isolate;border-bottom-width:4px;border-radius:12px;padding:8px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;position:relative}.opt.picked{border-color:var(--c-selected-line);background:var(--c-selected-soft);color:var(--c-on-selected)}.opt.wrong{border-color:var(--c-danger);background:var(--c-danger-soft);color:var(--c-danger)}.tap-dot{background:var(--c-brand);pointer-events:none;border-radius:50%;width:18px;height:18px;display:none;position:absolute;bottom:6px;right:14px}.tile{border:2px solid var(--c-border);background:var(--c-surface);border-bottom-width:4px;border-radius:10px;padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;display:inline-block}.tile.ghost{visibility:hidden}.slots,.bank{flex-wrap:wrap;gap:8px;display:flex}.slots{border-bottom:2px dashed var(--c-border);padding:8px 0}.slot{min-width:36px;min-height:36px}.tile.placed{border-color:var(--c-selected-line);background:var(--c-selected-soft);color:var(--c-on-selected)}.bank{position:relative}.match{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.match-col{flex-direction:column;gap:8px;display:flex}.pair{background:var(--pc);color:var(--c-on-pair);overflow-wrap:anywhere;isolation:isolate;border-radius:10px;padding:7px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;font-weight:700;position:relative}.sheet{background:var(--c-danger-soft);border-top:3px solid var(--c-danger);padding:12px 14px 16px;position:absolute;bottom:0;left:0;right:0}.sheet-title{color:var(--c-danger);display:block}.sheet-body{margin:4px 0 0;font-size:.8125rem}.scr:has(.sheet){position:relative}.chip{background:var(--c-value-soft);color:var(--c-text);border-radius:6px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.key-idea{background:var(--c-key-idea);color:var(--c-key-idea-text);border-radius:4px;padding:0 3px}.scr-done{text-align:center;justify-content:center;align-items:center}.done-title{margin:0;font-size:1.25rem;font-weight:800}.done-xp{color:var(--c-xp-text);margin:0;font-size:1.125rem;font-weight:800}@media (prefers-reduced-motion:no-preference){.step h3,.step p{transition:color .3s var(--ease)}.step-text:before{transition:transform .35s var(--ease)}[data-screen].on .opt.picked:before,[data-screen].on .opt.wrong:before,[data-screen].on .pair:before{content:"";z-index:-1;box-sizing:border-box;border-radius:inherit;pointer-events:none;position:absolute;inset:-2px -2px -4px}[data-screen].on .opt.picked:before,[data-screen].on .opt.wrong:before{border:2px solid var(--c-border);background:var(--c-surface);border-bottom-width:4px}[data-screen].on .pair:before{background:var(--c-neutral);inset:0}[data-screen].on .opt.picked:before{animation:scr-fade .35s var(--ease) .9s both}[data-screen].on .tap-dot{animation:scr-tap 1.1s var(--ease) .1s both;display:block}[data-screen].on .tile.placed{animation:scr-fly .6s var(--spring) calc(.15s + var(--i) * .14s) both}[data-screen].on .pair:before{animation:scr-fade .4s var(--ease) calc(.15s + var(--k) * .25s) both}[data-screen].on .opt.wrong:before{animation:scr-fade .35s var(--ease) .2s both}[data-screen].on .sheet{animation:scr-sheet .5s var(--spring) .7s both}[data-screen].on .scr-done>*{animation:scr-pop .5s var(--spring) both}}@keyframes scr-fade{to{opacity:0}}@keyframes scr-tap{0%{opacity:0;transform:translate(70px,60px)scale(1)}40%{opacity:.9}75%{opacity:.9;transform:translate(0)scale(1)}85%{transform:translate(0)scale(.7)}to{opacity:0;transform:translate(0)scale(1.4)}}@keyframes scr-fly{0%{transform:translate(var(--from-x), var(--from-y))}}@keyframes scr-sheet{0%{transform:translateY(100%)}}@keyframes scr-pop{0%{transform:scale(.7)}}
.try-one{padding:24px 0 48px}.try-one-heading{color:var(--c-text);margin:0 0 16px;font-size:clamp(1.5rem,4.5vw,2.25rem);line-height:1.15}.try-one-body{align-items:flex-end;gap:16px;display:flex}.try-one-mascot{flex:none;width:120px;height:120px}.try-one-card{border:2px solid var(--c-border);background:var(--c-surface);border-radius:20px;flex-direction:column;flex:1;gap:14px;min-width:0;max-width:520px;padding:18px;display:flex}.try-one-code{font-size:1rem}.try-one-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.try-one-opt{color:var(--c-text);cursor:pointer;padding:12px 8px;font-size:1rem}.try-one-opt:disabled{cursor:default}.try-one-opt:focus-visible,.try-one-check:focus-visible{outline:3px solid var(--c-selected);outline-offset:2px}.try-one-check{background:var(--c-success);color:var(--c-on-success);box-shadow:0 5px 0 var(--c-success-shadow);font:inherit;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:0;border-radius:16px;padding:14px 24px;font-size:1.0625rem;font-weight:800;transition:transform 80ms,box-shadow 80ms}.try-one-check:active:not(:disabled){box-shadow:0 0 0 var(--c-success-shadow);transform:translateY(5px)}.try-one-check:disabled{background:var(--c-success-soft);color:var(--c-success-text);box-shadow:0 5px 0 var(--c-success-soft);outline:2px dashed var(--c-success);outline-offset:-2px;cursor:not-allowed}.try-one-result{border-left:5px solid var(--c-success);background:var(--c-success-soft);color:var(--c-success-text);border-radius:14px;padding:12px 14px;font-weight:700}.try-one-result.bad{border-left-color:var(--c-danger);background:var(--c-danger-soft);color:var(--c-danger)}.try-one-result p{margin:0 0 12px}.try-one-actions{flex-wrap:wrap;gap:12px 16px;display:flex}@media (max-width:520px){.try-one-body{flex-direction:column;align-items:stretch}.try-one-mascot{align-self:center}}.try-one-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--c-brand-text);margin:0 0 6px;font-size:.875rem;font-weight:800}@media (max-width:399px){.try-one-opt{padding:12px 6px;font-size:.875rem}}
.paths-map{--lane-l:0px;--lane-w:72px;--badge:44px;--row-pad:8px;padding:24px 0 56px}.map-heading{color:var(--c-text);margin:0 0 8px;font-size:clamp(1.5rem,4.5vw,2.25rem);line-height:1.15}.map-sub{color:var(--c-text-muted);margin:0 0 16px}.map-section{position:relative}.map-road{top:0;bottom:0;left:var(--lane-l);width:var(--lane-w);pointer-events:none;position:absolute}.map-road-svg{width:100%;height:100%;display:block;overflow:visible}.map-road-svg path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.road-bed{stroke:var(--c-neutral-shadow);stroke-width:16px}.road-line{stroke:var(--c-brand);stroke-width:6px}.map-road.branch .road-bed{stroke-width:12px}.map-road.branch .road-line{stroke-width:5px;stroke-dasharray:.1 12}.map-list{grid-auto-rows:1fr;margin:0;padding:0;list-style:none;display:grid;position:relative}.map-node{--f:.3;min-width:0;padding:var(--row-pad) 0}.map-node:nth-child(2n){--f:.7}.map-pop{align-items:center;height:100%;display:flex;position:relative}.map-card{min-width:0;margin-left:calc(var(--lane-l) + var(--lane-w) + 8px);border:2px solid var(--c-border);background:var(--c-surface);color:var(--c-text);overflow-wrap:anywhere;border-radius:20px;flex-direction:column;flex:1;padding:14px;text-decoration:none;display:flex}.map-card:hover{border-color:var(--accent)}.map-badge{top:calc(50% - var(--badge) / 2);left:calc(var(--lane-l) + var(--lane-w) * var(--f) - var(--badge) / 2);width:var(--badge);height:var(--badge);border:3px solid var(--c-background);background:var(--accent);color:var(--on);border-radius:50%;place-items:center;display:grid;position:absolute}.map-title{margin:0;font-size:1.15rem;line-height:1.2}.map-blurb{color:var(--c-text-muted);margin:8px 0 0;font-size:.9rem;line-height:1.4}.map-icons{color:var(--accent);flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.map-count{color:var(--c-text);margin-top:8px;font-size:.85rem;font-weight:700}.map-branch{margin-top:8px}.map-link{width:0;height:40px;margin-left:calc(var(--lane-l) + var(--lane-w) * var(--f,.3) - 2px);border-left:4px dotted var(--c-brand);display:block}.map-branch-heading{padding-left:calc(var(--lane-w) + 8px);color:var(--c-text);margin:8px 0;font-size:1.25rem}@media (min-width:768px){.paths-map{--lane-w:152px;--lane-l:calc(50% - var(--lane-w) / 2);--badge:56px;--row-pad:14px}.map-branch-heading{text-align:center;padding-left:0}.map-card{width:calc(50% - var(--lane-w) / 2 - 8px);flex:none;margin-left:0;padding:18px}.map-node:nth-child(2n) .map-card{margin-left:auto}}@media (prefers-reduced-motion:no-preference){.map-road.drawn .road-line{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:calc(var(--len) * (1 - min(1, var(--p,1) * 1.3)))}}
.numbers{padding:24px 0 40px}.numbers-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}@media (min-width:640px){.numbers-list{grid-template-columns:repeat(4,minmax(0,1fr))}}.numbers-tile{background:var(--c-surface);border:2px solid var(--c-border);border-radius:18px;flex-direction:column;align-items:center;gap:4px;padding:18px 8px;display:flex}.numbers-n{color:var(--c-brand-text);font-variant-numeric:tabular-nums;font-size:clamp(1.75rem,8vw,2.5rem);font-weight:800;line-height:1}.numbers-label{color:var(--c-text-muted);font-weight:700}.marquee{gap:14px;max-width:100%;padding:8px 0 40px;display:grid}.marquee-rows{gap:14px;max-width:100%;display:grid;overflow:hidden}.track-chip{white-space:nowrap;color:var(--c-brand-text);background:var(--c-surface);border:2px solid var(--c-border);border-radius:999px;align-items:center;gap:8px;padding:10px 16px;font-weight:700;display:inline-flex}.marquee-toggle{border:2px solid var(--c-brand);background:var(--c-surface);width:44px;height:44px;color:var(--c-brand-text);cursor:pointer;border-radius:50%;justify-self:end;place-items:center;padding:0;display:grid}.marquee-toggle[aria-pressed=true]{background:var(--c-brand);color:var(--c-on-brand)}.marquee-toggle[hidden]{display:none}.marquee.paused .mo-track{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.marquee-toggle{display:none}}.built-with{padding:8px 0 40px}.built-heading{color:var(--c-text);margin:0 0 8px;font-size:clamp(1.5rem,4.5vw,2.25rem);line-height:1.15}.built-text{max-width:40rem;color:var(--c-text-muted);margin:0;font-size:1.125rem;line-height:1.5}.final-cta{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:24px 0 48px;display:flex}.final-heading{color:var(--c-text);margin:0;font-size:clamp(1.5rem,5vw,2.25rem);line-height:1.15}