@font-face{font-family:Geist;src:url(/fonts/Geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ink:#171717;--body:#4d4d4d;--muted:#707070;--edge:#8a8a8a;--line:#e3e3e3;--neg:#c5221f;--canvas:#ffffff;--ground:#fafafa;--onink:#ffffff;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#f2f2f2;--body:#b9b9b9;--muted:#8f8f8f;--edge:#6b6b6b;--line:#2a2a2a;--neg:#f2766b;--canvas:#141414;--ground:#0e0e0e;--onink:#111111;color-scheme:dark}
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shell{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:48px 16px;text-align:center}
.brand{display:inline-flex;align-items:center;gap:.22em;text-decoration:none;font-size:clamp(28px,5vw,64px);font-weight:600;letter-spacing:-.04em}
.brand img{width:1.3em;height:1.3em}
h1{margin:0;max-width:14ch;text-wrap:balance;font-size:clamp(40px,8vw,96px);line-height:1;font-weight:600;letter-spacing:-.04em}
.shell>p{margin:0;max-width:52ch;text-wrap:pretty;color:var(--body);font-size:17px;line-height:1.5}
::selection{background:var(--ink);color:var(--onink)}
/* One pill like the teaser's `cake.dev →`: the field and the button share an outline of at least 3:1. */
.join{display:flex;align-items:center;width:100%;max-width:520px;height:60px;padding:4px;border:1px solid var(--edge);border-radius:999px;background:var(--canvas)}
.join:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.join input[type=email]{flex:1;min-width:0;height:100%;padding:0 12px 0 20px;border:0;background:none;color:var(--ink);caret-color:var(--ink);font:inherit;font-size:17px}
.join input[type=email]:focus-visible{outline:none}
.join input::placeholder{color:var(--muted);opacity:1}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border:0;border-radius:999px;background:var(--ink);color:var(--onink);font-family:var(--sans);font-size:17px;font-weight:500;white-space:nowrap;cursor:pointer;transition:opacity .15s,transform .15s cubic-bezier(.16,1,.3,1)}
.pill svg{width:16px;height:16px}
.pill:hover{opacity:.88}
.pill:active{transform:scale(.97)}
.pill[aria-disabled=true]{opacity:.6;cursor:progress}
/* Too narrow for one pill: the field and the button stack, each carrying its own outline and focus. */
@media (max-width:479px){
  .join{flex-direction:column;gap:8px;height:auto;padding:0;border:0;background:none}
  .join:focus-within{outline:none}
  .join input[type=email]{width:100%;flex:none;height:52px;border:1px solid var(--edge);border-radius:999px;background:var(--canvas)}
  .join input[type=email]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  .pill{width:100%;height:52px}
}
@media (prefers-reduced-motion:reduce){.pill{transition:none}}
.shell .line{color:var(--muted);font-size:15px}
.shell .note{color:var(--muted);font-size:13px;margin-top:-12px}
.note a{display:inline-block;padding-block:4px}
/* Flow and error pages: the brand is a way home, the heading states a result rather than a claim. */
.utility .brand{font-size:28px}
.utility h1{max-width:20ch;font-size:clamp(32px,6vw,56px)}
.trap,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.prose{text-align:left;max-width:60ch}
.prose h2{font-size:17px;margin:24px 0 4px}
.prose p{color:var(--body);font-size:15px;line-height:1.6}

/* The headline, acted out: crumbs go into the cake, it collects, measures and analyses, and a slice comes out as one decision.
   One 8 s loop shared by every part, so the delays keep them in step; without motion the finished state shows. */
.stage{--loop:8s;display:grid;grid-template-columns:auto 200px 56px minmax(0,280px);align-items:center;gap:0 20px;margin:0;width:100%;max-width:800px;justify-content:center}
.crumbs{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-right:16px}
.crumb{position:relative;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--canvas);font-family:var(--mono);font-size:12px;color:var(--body);animation:chip var(--loop) ease-out infinite;animation-delay:calc(var(--i) * .5s)}
.crumb::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink)}
/* The chip stays as the source; a crumb leaves its right edge and drops into the cake. */
.crumb::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink);opacity:0;--tx:96px;--ty:calc((1 - var(--i)) * 36px);animation:crumb var(--loop) cubic-bezier(.5,0,.75,0) infinite;animation-delay:inherit}
@keyframes chip{0%,2%{border-color:var(--line);color:var(--body)}4%,12%{border-color:var(--ink);color:var(--ink)}20%,100%{border-color:var(--line);color:var(--body)}}
@keyframes crumb{0%,3%{opacity:0;transform:none}5%{opacity:1;transform:none}22%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(.7)}25%,100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.4)}}
.engine{display:flex;flex-direction:column;align-items:center;gap:6px}
.cake{width:100%;height:auto;overflow:visible}
.c-floor{fill:color-mix(in srgb,var(--ink) 14%,var(--canvas))}
/* The side is solid, the cut face darker still: it reads as the inside of the cake, not a hole. */
.c-band.l1{fill:color-mix(in srgb,var(--ink) 8%,var(--canvas))}
.c-band.l2{fill:color-mix(in srgb,var(--ink) 16%,var(--canvas))}
.c-band.l3{fill:color-mix(in srgb,var(--ink) 26%,var(--canvas))}
.c-band.cut.l1{fill:color-mix(in srgb,var(--ink) 20%,var(--canvas))}
.c-band.cut.l2{fill:color-mix(in srgb,var(--ink) 30%,var(--canvas))}
.c-band.cut.l3{fill:color-mix(in srgb,var(--ink) 40%,var(--canvas))}
.c-line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.c-top{fill:var(--canvas);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.flash{fill:var(--ink);opacity:0;animation:flash var(--loop) ease-out infinite}
.f-collect{animation-delay:2.2s}.f-measure{animation-delay:2.7s}.f-analyse{animation-delay:3.2s}
@keyframes flash{0%{opacity:0}3%{opacity:.35}12%,100%{opacity:0}}
.steps{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.steps span{animation:step var(--loop) ease-out infinite;animation-delay:var(--d)}
.steps span+span::before{content:" · ";color:var(--muted)}
.s-collect{--d:2.2s}.s-measure{--d:2.7s}.s-analyse{--d:3.2s}
@keyframes step{0%{color:var(--muted)}3%,10%{color:var(--ink)}14%,100%{color:var(--muted)}}
.wire{position:relative;height:1px;background:repeating-linear-gradient(90deg,var(--edge) 0 3px,transparent 3px 7px)}
.wire-end{position:absolute;right:-2px;top:-5px;width:8px;height:10px;fill:none;stroke:var(--edge);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.p-side{fill:color-mix(in srgb,var(--ink) 20%,var(--canvas))}
.p-top{fill:var(--canvas)}
.piece{--travel:34px;position:absolute;left:-2px;top:-11px;width:20px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;opacity:0;animation:piece var(--loop) cubic-bezier(.65,0,.35,1) infinite}
@keyframes piece{0%,43%{opacity:0;transform:translateX(0)}45%{opacity:1}55%{opacity:1;transform:translateX(var(--travel))}57%,100%{opacity:0;transform:translateX(var(--travel))}}
.decision{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--canvas);text-align:left;animation:card var(--loop) cubic-bezier(.16,1,.3,1) infinite}
.decision p{margin:0;font-size:13px;line-height:1.4;color:var(--body);animation:line var(--loop) cubic-bezier(.16,1,.3,1) infinite;animation-delay:var(--d)}
.decision .d-find{font-size:15px;font-weight:500;color:var(--ink);padding-right:52px}
.decision .neg{color:var(--neg);font-weight:600}
.decision .d-do{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:500}
.d-do svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.d-tag{position:absolute;top:12px;right:12px;padding:1px 6px;border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.d-find{--d:.15s}.d-why{--d:.55s}.d-do{--d:.95s}
/* The card never empties: last week's decision rests dimmed while new crumbs go in, then the fresh one writes over it. */
@keyframes card{0%,55%{border-color:var(--line)}58%{border-color:var(--ink)}72%,100%{border-color:var(--line)}}
@keyframes line{0%{opacity:.4;filter:none}50%{opacity:.4;filter:none}54%{opacity:0;filter:blur(3px)}60%,92%{opacity:1;filter:none}100%{opacity:.4;filter:none}}
.stage-toggle{grid-column:-2 / -1;justify-self:end;margin-top:8px;min-height:24px;padding:0 4px;border:0;background:none;font-family:var(--mono);font-size:11px;color:var(--muted);cursor:pointer}
.stage-toggle:hover{color:var(--ink)}
.stage.paused *,.stage.paused *::after{animation-play-state:paused!important}
/* The row needs about 754px (crumbs, cake, wire, card and gaps); narrower screens and 200% zoom stack it. */
@media (max-width:799px){
  .stage{grid-template-columns:104px 28px minmax(0,1fr);row-gap:14px;max-width:420px}
  .crumbs{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:6px;margin-right:0}
  .crumb{height:24px;font-size:11px;padding:0 8px}
  .crumb::after{--tx:calc(-28px - var(--i) * 70px);--ty:52px}
  .piece{--travel:6px}
  .decision{padding:12px}
  .decision .d-find{font-size:14px;padding-right:0}
  .d-tag{position:static;align-self:flex-start;order:-1}
  .steps{display:flex;flex-direction:column;align-items:center;font-size:10px;line-height:1.35}
  .steps span+span::before{content:none}
}
@media (prefers-reduced-motion:reduce){
  .stage *,.stage *::after{animation:none!important}
  .stage-toggle{display:none}
}