@font-face{font-family:"Londrina Solid";src:url(/fonts/londrina-solid-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Londrina Solid";src:url(/fonts/londrina-solid-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lexend";src:url(/fonts/lexend-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#231e16; --cream:#fff8e2; --shadow:#41538f; --metal:#eef0f0;
  --sky:#f4b829; --fg:var(--ink); --sun:.04; --night:0;
  --stage-h:50svh; --rail:min(500px,35vw);
  --fall:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 1.1875rem/1.5 "Lexend",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;transition:background-color .9s ease;overflow-x:hidden}
h1,h2{font-family:"Londrina Solid","Arial Narrow",sans-serif;font-weight:900;margin:0;text-wrap:balance}
p{margin:0 0 .8em;max-width:34em}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}

/* ---------- the stage ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--sky);transition:background-color .9s ease;touch-action:pan-y;cursor:grab}
.stage.drag{cursor:grabbing}
.fig{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;overflow:visible}
#figHalo,#figTop{pointer-events:none}
#figHalo{mix-blend-mode:screen}
#figArt{transition:filter .9s ease}
#notes text{font-family:"Lexend",system-ui,sans-serif;font-weight:700}
html.lite #art{filter:none}

.sky{position:absolute;inset:0;overflow:hidden}
.sun{position:absolute;right:13vw;top:calc(6% + var(--sun)*88%);width:min(30vmin,300px);aspect-ratio:1;border-radius:50%;
  background:#fff0b4;transition:top 1.2s var(--fall),background-color 1.2s}
.moon{position:absolute;left:40vw;top:7%;width:min(15vmin,140px);aspect-ratio:1;border-radius:50%;background:transparent;
  box-shadow:calc(min(15vmin,140px)*-.26) calc(min(15vmin,140px)*.04) 0 0 #fff0b4;opacity:0;transform:translateY(40px);transition:opacity 1.6s,transform 1.8s var(--fall)}
.stars{position:absolute;inset:0;opacity:var(--night);transition:opacity 1.2s}
.stars i{position:absolute;width:var(--s,10px);height:var(--s,10px);background:#fff0b4;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

html.lit .moon{opacity:1;transform:none}

/* ---------- controls on the stage ---------- */
.bar{position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(14px,3vh,30px);left:calc(var(--rail) + 8vw);display:flex;align-items:center;gap:10px;z-index:3;cursor:default}
.bar[hidden]{display:none}
.tool{flex:none;appearance:none;width:44px;height:44px;display:grid;place-items:center;padding:0;background:var(--cream);color:var(--ink);border:2.5px solid var(--ink);border-radius:9px;
  box-shadow:-3px 4px 0 var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .15s}
.tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{background:#fff}
.tool:active{transform:translate(-3px,4px);box-shadow:0 0 0 var(--shadow)}
.tool.word{position:absolute;right:0;bottom:calc(100% + 12px);width:auto;padding:0 14px;font:600 1rem/1 "Lexend",system-ui,sans-serif}
.tool.word[hidden]{display:none}
.tool[aria-pressed=true]{background:var(--ink);color:var(--cream)}
.ruler{position:relative;flex:1;min-width:0;height:44px;background:var(--metal);border:2.5px solid var(--ink);border-radius:6px;box-shadow:-3px 4px 0 var(--shadow)}
.marks{position:absolute;inset:0;display:flex}
.marks b{flex:1;position:relative;font:400 1.0625rem/1 "Londrina Solid",sans-serif;color:var(--ink);text-align:center;padding-top:17px;border-left:1.5px solid var(--ink)}
.marks b:first-child{border-left:0}
.marks b::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 20%)}
.marks b.on{font-weight:900;background:var(--sun-tint,#ffd98a)}
#scrub{position:absolute;inset:-2.5px;width:calc(100% + 5px);height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
#scrub::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:44px;background:#e2483d;border-radius:2px}
#scrub::-moz-range-thumb{width:5px;height:44px;background:#e2483d;border:0;border-radius:2px}
#scrub:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---------- the text ---------- */
main{position:relative;z-index:2;pointer-events:none;width:var(--rail);margin-left:clamp(24px,5.5vw,92px)}
.panel{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:48px 0;color:var(--ink);scroll-margin-top:0}
.panel > *{pointer-events:auto}
.panel.dark{color:#fff}
.hero h1{font-size:clamp(4.2rem,9.6vw,9rem);line-height:.86;letter-spacing:-.01em;color:var(--ink);text-shadow:-.045em .055em 0 var(--shadow);margin-bottom:.32em;hyphens:manual}
.lead{font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.38}
.facts{list-style:none;margin:.2em 0 1.6em;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li,.mass li{padding:.22em .8em;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:99px;font-weight:700;font-size:1rem}
h2{font-size:clamp(2.6rem,4.6vw,4rem);line-height:.98;margin-bottom:.42em}
.num{font:900 clamp(5rem,9vw,8.5rem)/.8 "Londrina Solid",sans-serif;margin-bottom:.12em;color:inherit;text-shadow:-.05em .06em 0 var(--shadow)}
.dark .num{text-shadow:-.05em .06em 0 rgba(10,12,50,.55)}
.mass{list-style:none;margin:.4em 0 1.2em;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.warn{font-weight:700}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.3em 1.2em;margin-top:.5em;background:var(--cream);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:10px;box-shadow:-5px 6px 0 var(--shadow);font:400 1.625rem/1 "Londrina Solid",sans-serif;text-decoration:none;cursor:pointer;
  transition:transform .13s,box-shadow .13s,background-color .15s}
.btn:hover{background:#fff}
.btn:active{transform:translate(-5px,6px);box-shadow:0 0 0 var(--shadow)}
.dark .btn{box-shadow:-5px 6px 0 rgba(10,12,50,.6)}
.dark .btn:active{box-shadow:0 0 0 rgba(10,12,50,.6)}
.btn.big{font-size:2.25rem;min-height:68px;padding:.3em 1.2em}
html.lit .btn.big{background:#ffd76a}

fieldset{border:0;margin:0;padding:0}
legend{padding:0;font-weight:700;margin-bottom:6px}
.picks{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0 0 14px}
.sws{display:flex;flex-wrap:wrap;gap:8px}
.sw{appearance:none;width:44px;height:44px;padding:0;border:2.5px solid var(--ink);border-radius:8px;background:var(--c);cursor:pointer;box-shadow:-3px 4px 0 var(--shadow);transition:transform .12s,box-shadow .12s}
.sw[aria-pressed=true]{transform:translate(-3px,4px);box-shadow:0 0 0 var(--shadow),inset 0 0 0 3px var(--cream)}
.check{list-style:none;margin:0 0 12px;padding:0;columns:2;column-gap:20px;width:100%;max-width:560px}
.check li{break-inside:avoid}
.check label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;line-height:1.2;font-size:1.0625rem}
.check input{appearance:none;flex:none;width:24px;height:24px;margin:0;background:var(--cream);border:2.5px solid var(--ink);border-radius:5px;cursor:pointer;display:grid;place-items:center}
.check input:checked::after{content:"";width:13px;height:7px;border-left:3.5px solid #e2483d;border-bottom:3.5px solid #e2483d;transform:translateY(-2px) rotate(-45deg)}
.check small{display:block;font-size:.875rem;margin-top:1px}

.plan{width:100%;max-width:520px;height:auto;margin:6px 0 14px;overflow:visible}
.plan rect{fill:var(--cream);stroke:var(--ink);stroke-width:2.5}
.plan .strip{fill:var(--cream);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.plan .sheet rect:not(.base){fill:#fff;stroke-width:1.8}
.plan .fold{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:7 5}
.plan .cross,.plan .dim{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.plan .cutc{fill:#f79f34;stroke:var(--ink);stroke-width:1.6}
.plan text{font:700 15px "Lexend",system-ui,sans-serif;fill:var(--ink);text-anchor:middle}
.plan text.s{font-weight:400;font-size:14px}
.plan text.left{text-anchor:start}

.end{min-height:64svh;justify-content:flex-end;padding-bottom:64px}
.foot{display:flex;flex-direction:column;gap:6px;margin-top:40px;font-size:1rem}
.nojs{position:relative;z-index:3;padding:16px;background:var(--cream);color:var(--ink)}

/* ---------- phone and narrow windows: the stage sticks to the top, the text scrolls under it ---------- */
@media (max-width:899px){
  :root{--rail:100%}
  body{font-size:1.125rem}
  .stage{position:sticky;top:0;height:var(--stage-h);z-index:3;box-shadow:0 2px 0 var(--ink)}
  .page{display:block}
  main{width:auto;margin:0;padding:0 18px;pointer-events:auto}
  .panel{min-height:calc(100svh - var(--stage-h));justify-content:flex-start;padding:22px 0 30px;scroll-margin-top:var(--stage-h)}
  .step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start}
  .step > *{grid-column:1 / -1}
  .step .num{grid-column:1;font-size:4.5rem;margin:0 0 6px}
  .step h2{grid-column:2;margin:0 0 6px;font-size:2.25rem}
  .hero h1{font-size:clamp(2.9rem,15.2vw,5.6rem);line-height:.95;margin-bottom:.2em;text-shadow:-.035em .04em 0 var(--shadow)}
  .lead{font-size:1.1875rem}
  .facts{margin-bottom:.9em}
  h2{font-size:2.5rem}
  .bar{left:10px;right:10px;bottom:8px;gap:6px}
  .marks b{font-size:.9375rem}
  .sun{right:8%;top:calc(4% + var(--sun)*96%);width:30vmin}
  .moon{top:7%;left:9%}
  .check{columns:1}
  .tool.word{bottom:auto;top:calc(10px - var(--stage-h) + 54px);padding:0 12px;font-size:.9375rem}
}
@media (max-width:899px) and (max-height:620px){:root{--stage-h:44svh}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,.stage,#figArt,.sun,.moon,.stars{transition:none}
}
@media print{
  .stage{display:none}
  body{background:#fff}
  main{width:auto;margin:0}
  .panel,.panel.dark{min-height:0;color:#000;padding:10px 0;break-inside:avoid}
  .num{text-shadow:none!important}
  .btn,.foot{display:none}
}

/* stills of a single frame, and the one behind og.png */
html.still *{transition:none!important}
html.bare main > :not(#start),html.bare .lead,html.bare .facts,html.bare .btn,html.bare .bar{display:none}
html.bare .hero{min-height:100vh}
html.bare .hero h1{color:#fff;text-shadow:-.045em .055em 0 #2b3a8a}