/* Shared site styles (hub + content pages). Games stay self-contained. Tokens match DESIGN.md. */
[hidden]{display:none !important}
/* Atkinson Hyperlegible Next (SIL OFL, assets/fonts): headings, the wordmark, and printed sheets; body text stays the
   fast system font (brand plan, EVIDENCE-DESIGN.md §3) */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/atkinson-next-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/atkinson-next-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* its digits come from Fredoka (the bold slot: a static weight-575 instance, whose strokes match Atkinson 700's), as in the games and printed sheets: Atkinson's 0 is slashed and reads as "Ø" to young kids
   (DESIGN.md craft rule 12); declared after Atkinson, so these win for 0–9 */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/fredoka-digits.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/fredoka-digits-575.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
/* Fredoka (SIL OFL): kids' worksheet headings only, the same face the games use; downloaded only by pages that show one */
@font-face{font-family:"Fredoka";src:url(fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
/* printed sheets: Atkinson with the games' rounded digits (Atkinson's slashed zero read as "Ø" to young kids: "0–10" became "Ø–1Ø") */
@font-face{font-family:"WSK Text";src:url(fonts/atkinson-next-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"WSK Text";src:url(fonts/atkinson-next-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"WSK Text";src:url(fonts/fredoka-digits.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:"WSK Text";src:url(fonts/fredoka-digits-575.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0030-0039}
:root{
  --bg:#f6f3ee; --surface:#ffffff; --surface-2:#eef1ef; --ink:#1c2b33; --ink-2:#4f6170;
  --accent:#1f6f78; --accent-ink:#ffffff; --play:#e2725b; --good:#2e7d5b; --warm:#9a4d10; --line:#dcd6cc;
  --shadow:0 4px 16px rgba(28,43,51,.10); --radius:20px; --tap:56px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head:"Atkinson Hyperlegible Next", var(--font);
  --accent-deep:#17565d;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1a20; --surface:#172730; --surface-2:#1f333d; --ink:#e9f0f2; --ink-2:#a7b9c2;
    --accent:#5fb3b3; --accent-deep:#8fd0d5; --accent-ink:#0b1a1f; --play:#f0937e; --good:#6fcf9f; --warm:#f2b36b; --line:#2a4350;
    --shadow:0 4px 16px rgba(0,0,0,.35); color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1a20; --surface:#172730; --surface-2:#1f333d; --ink:#e9f0f2; --ink-2:#a7b9c2;
  --accent:#5fb3b3; --accent-deep:#8fd0d5; --accent-ink:#0b1a1f; --play:#f0937e; --good:#6fcf9f; --warm:#f2b36b; --line:#2a4350;
  --shadow:0 4px 16px rgba(0,0,0,.35); color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:80px} /* in-page links (#library, #plan) land below the sticky header */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.5;-webkit-tap-highlight-color:transparent}
a{color:var(--accent)}
a:not(.btn):hover{color:var(--accent-deep)}
h1,h2,h3,.wordmark{font-family:var(--head);font-weight:700}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none;margin-right:auto}
.brand svg{width:34px;height:34px;flex:none}
.brand .logo-stick{stroke:var(--ink)} /* the joystick stays visible on the dark header */
.wordmark{font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.wordmark span{color:var(--accent)}
.nav a.link{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 8px;text-decoration:none;color:var(--ink-2);font-weight:600;border-radius:12px}
.btn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;border-radius:999px;border:2px solid transparent;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn.play{background:var(--play);color:#1c1410;box-shadow:inset 0 -3px 0 rgba(28,20,16,.45)} /* a dark edge: coral on paper is under 3:1, so the button's edge gets its own contrast */
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn:not(.play):not(.ghost):hover{background:var(--accent-deep)} /* deep teal for hover/pressed */
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--warm);outline-offset:3px}
.hero{padding:48px 0 24px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.hero .kicker{margin:0 0 10px;font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:.01em;color:var(--accent-deep, var(--accent))} /* who made it, above the headline (Chase, N2) */
.hero h1{font-size:clamp(34px,5.4vw,54px);line-height:1.08;margin:0 0 14px;letter-spacing:-.5px}
.hero p.lead{font-size:20px;color:var(--ink-2);margin:0 0 22px}
.hero-art{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--shadow)}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.crew{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} /* 4 lab creatures: 2x2, no orphan */
.crew > a{text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;aspect-ratio:1/1.05;overflow:hidden;padding-bottom:8px}
.crew svg{width:82%;height:auto}
.crew > a:hover{transform:translateY(-3px);box-shadow:0 6px 0 rgba(0,0,0,.08)}
.crew > a:focus-visible{outline:3px solid var(--accent, #ef6f52);outline-offset:3px}
.crew-lbl{font-weight:800;font-size:15px;line-height:1.1;color:#1d2433;margin-top:-6px}
/* homepage crew: pupils that look toward the pointer (assets/site.js) ease there and back */
.crew .pp{transition:transform .25s ease-out}
@media (prefers-reduced-motion: reduce){ .crew .pp{transition:none;transform:none !important} }
:root[data-motion="reduced"] .crew .pp,:root[data-anim="paused"] .crew .pp{transform:none !important}
/* motion:start (generated by tools/build.js from src/motion.css; edit that file, not this block) */
/* ===== Shared motion for site art and game banners (single source) =====
   tools/build.js copies this into assets/site.css (between the motion markers) and into every game's start screen.
   "@S" (then a space) stands for the scope that switches motion on:
     site:  the home crew (.alive), detail-page banners and cards (.scene, .art.alive), and library cards on hover/focus
     games: the start-screen banner (#heroArt), never in Calm mode
   Everything sits inside prefers-reduced-motion: no-preference, so nothing moves for people who ask for less motion.
   cr-* = the four lab critters; m-* = general motion for the game banners and thumbnails.
   SVG elements with their own transform attribute get the class on a wrapping <g> (a CSS transform replaces the attribute). */
/* The Joystick Critter's greeting (Muse/Chase, Oct 16): a gentle hop while the joystick waves, 1.3 s, once, no sound.
   Site only: the header logo on hover or keyboard focus (plays again on the next hover), and the beta welcome dialog when it opens
   (.jc-hello, added by assets/site.js). Inside the game shell the mascot stays still (Chase). Transforms only, so nothing reflows.
   Animation audit (DESIGN.md craft rule 2): header logo: touches no text (the 34px logo hops 6px inside a 64px header; the wordmark
   sits 10px away and the ball moves under 3px); runs on hover/focus, never while reading. Dialog: the 48px critter beside the title,
   12px gap, same distances; runs once as the dialog opens, before reading. Neither runs with prefers-reduced-motion or Calm mode. */
@media (prefers-reduced-motion: no-preference){
  :root:not([data-motion="reduced"]) :is(.brand:hover, .brand:focus-visible, .jc-hello) > svg{animation:jc-hop 1.3s ease-out 1}
  :root:not([data-motion="reduced"]) :is(.brand:hover, .brand:focus-visible, .jc-hello) .jc-stick{animation:jc-wave 1.3s ease-in-out 1;transform-box:fill-box;transform-origin:0% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-shiver{animation:cr-shiver .45s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-lines{animation:cr-lines .9s ease-in-out infinite alternate} /* smooth fades, no stepped frames (Chase: smoother) */
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-boil{animation:cr-boil 3.2s linear infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-steam{animation:cr-steam 2.2s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-rain{animation:cr-rain 1.3s linear infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-r2{animation-delay:.45s} :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-r3{animation-delay:.9s} :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-r4{animation-delay:.25s} :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-r5{animation-delay:.7s}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-cloud{animation:cr-cloud 3.6s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-slump{animation:cr-slump 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-tear{animation:cr-tear 3.6s ease-in infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-point{animation:cr-point 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-nag{animation:cr-nag 1.4s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-q{animation:cr-steam 2.6s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-note{animation:cr-note 3s ease-in infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-lid{animation:cr-lid 3s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-breathe{animation:cr-breathe 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-sun{animation:cr-steam 3s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cr-heart{animation:cr-heart 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-float{animation:m-float 4s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-bob{animation:m-float 1.8s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-rise{animation:m-rise 3.4s linear infinite;transform-box:fill-box}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-sway{animation:m-sway 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-tilt{animation:m-tilt 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-twinkle{animation:m-twinkle 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-drift{animation:m-drift 6s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-fall{animation:m-fall 1.1s linear infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-pulse{animation:m-pulse 2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-wave{animation:m-wave 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 50%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-draw{stroke-dasharray:1;animation:m-draw 1.4s ease-out .3s both} /* once, on load: a path draws itself (needs pathLength="1"); without motion it is simply there */
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-blink{animation:m-blink 1.2s ease-in-out infinite alternate}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-flutter{animation:m-flutter .35s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-spin{animation:m-spin 8s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-pop{animation:m-pop 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-grow{animation:m-grow 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-creak-r{animation:m-creak 3s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 50%} :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-creak-l{animation:m-creak 3s ease-in-out infinite;animation-delay:-1.5s;transform-box:fill-box;transform-origin:100% 50%} /* a signpost arrow creaks on its nail: it pivots where it meets the post, so it never leaves it */
  /* the critic's one ambient motion (A1-FIX, motion research): the whole critter (body, megaphone and starburst together) breathes
     as one group, so it reads as one thing (common fate); no separate mouth, megaphone or starburst loops */
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .cp-breathe{animation:cp-breathe 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  /* wind (Path Picker scene round): one motion group. Canopies lean from their base (skew plus a little drift: the top moves
     most, the trunk stays still; never a whole-tree rotation) and clouds drift on the same 7 s cycle, in phase */
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-wind{animation:m-wind 7s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-wind-c{animation:m-wind-c 7s ease-in-out infinite}
  :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-d1{animation-delay:-.8s} :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-d2{animation-delay:-1.6s} :is(.alive,.scene,.card:hover .art,.card:focus-within .art,#library .card .art) .m-d3{animation-delay:-2.4s}
}
@keyframes jc-hop{0%,62%,100%{transform:translateY(0)}20%{transform:translateY(-6px)}40%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes jc-wave{0%,100%{transform:rotate(0)}18%{transform:rotate(16deg)}36%{transform:rotate(-12deg)}54%{transform:rotate(12deg)}72%{transform:rotate(-5deg)}86%{transform:rotate(0)}}
@keyframes cr-shiver{0%,100%{transform:translateX(0)}50%{transform:translateX(1.4px)}}
@keyframes cr-lines{0%{opacity:1}100%{opacity:.35}}
@keyframes cr-boil{from{transform:translateX(0)}to{transform:translateX(-40px)}} /* one full wave (crest + trough), so the loop is seamless */
@keyframes cr-steam{0%,100%{transform:translateY(0);opacity:.95}50%{transform:translateY(-5px);opacity:.55}}
/* low mood (Chase: the least noticeable of the four): a slow, deep sigh, steadier rain from a bobbing cloud, and a tear */
@keyframes cr-rain{0%{transform:translateY(-4px);opacity:0}20%{opacity:1}55%{opacity:1}80%{opacity:0}100%{transform:translateY(4px);opacity:0}} /* a short fall, gone (80%, +2.4) before the lowest drop reaches Rain Cloud's head */
@keyframes cr-cloud{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@keyframes cr-slump{0%,100%{transform:scale(1,1)}40%,55%{transform:scale(1.05,.9)}}
@keyframes cr-tear{0%,30%{transform:translateY(0) scale(.15);opacity:0}38%{opacity:1}46%{transform:translateY(0) scale(1)}82%{transform:translateY(7px) scale(1);opacity:1}100%{transform:translateY(10px) scale(1);opacity:0}}
@keyframes cr-point{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
@keyframes cr-nag{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cr-note{0%{transform:translateY(-58px);opacity:0}15%{opacity:1}55%{transform:translateY(22px);opacity:1}62%,100%{transform:translateY(22px);opacity:0}} /* the note's resting place is on the lid, so a still frame never shows it hanging in the air */
@keyframes cr-lid{0%,30%{transform:rotate(0)}40%,55%{transform:rotate(-14deg)}65%,100%{transform:rotate(0)}}
@keyframes cp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} /* cr-breathe's timing, peak 1.03 */
@keyframes cr-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes cr-heart{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
/* m-* use the separate translate / rotate / scale properties, which stack on top of an SVG transform attribute instead of
   replacing it, so a class can go straight on a positioned group like <g transform="translate(470 205)"> */
@keyframes m-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes m-rise{0%{translate:0 10px;opacity:0}20%{opacity:1}80%{opacity:1}100%{translate:0 -34px;opacity:0}}
@keyframes m-sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes m-tilt{0%,100%{rotate:-2.5deg;translate:0 0}50%{rotate:2.5deg;translate:0 -6px}}
@keyframes m-twinkle{0%,100%{opacity:1;scale:1}50%{opacity:.3;scale:.7}}
@keyframes m-drift{0%,100%{translate:0 0}50%{translate:16px 0}}
@keyframes m-fall{0%{translate:0 -8px;opacity:0}20%{opacity:1}100%{translate:0 18px;opacity:0}}
@keyframes m-pulse{0%,100%{scale:1}50%{scale:1.08}}
@keyframes m-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes m-wave{0%,100%{rotate:0deg;scale:1 1}50%{rotate:-7deg;scale:.88 1}}
@keyframes m-blink{0%{opacity:1}100%{opacity:.35}}
@keyframes m-flutter{0%,100%{scale:1 1}50%{scale:.35 1}}
@keyframes m-spin{to{rotate:360deg}}
@keyframes m-creak{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@keyframes m-pop{0%,62%,100%{scale:1;opacity:1}72%{scale:1.14;opacity:.75}80%{scale:.5;opacity:0}88%{scale:.7;opacity:.4}95%{scale:1.03;opacity:1}}
@keyframes m-grow{0%,100%{scale:1}50%{scale:1.06 1.12}}
@keyframes m-wind{0%,100%{transform:translateX(0) skewX(0deg)}50%{transform:translateX(2.5px) skewX(-3deg)}}
@keyframes m-wind-c{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
/* motion:end */
/* library cards (Chase, scene round): a thumbnail's motion pauses in place when the pointer leaves and resumes from that frame
   on the next hover (or keyboard focus), never a reset. Library grid only; other cards, crew tiles and banners are unchanged */
#library .card .art *{animation-play-state:paused !important} /* !important: the motion shorthand above would reset it to running */
:root:not([data-anim="paused"]) #library .card:is(:hover,:focus-within) .art *{animation-play-state:running !important} /* the page's Pause still wins */
.crew-cap{margin:12px 2px 0;font-weight:800;color:var(--ink-2);text-align:center}
.mini div{border-radius:18px;padding:14px;font-weight:700;font-size:15px;min-height:82px;display:flex;align-items:flex-end}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:20px 0 8px}
.promise{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;gap:12px}
.promise-wide{grid-column:1/-1} /* the screen-share line runs the full width under the four promises instead of sitting alone in a row */
.promise svg{flex:none;width:24px;height:24px;color:var(--accent);margin-top:2px}
.promise b{display:block}
.promise span{color:var(--ink-2);font-size:15px}
h2{font-size:30px;margin:44px 0 6px}
.sub{color:var(--ink-2);margin:0 0 16px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 18px}
.filters input{min-height:var(--tap);flex:1 1 240px;min-width:0;max-width:100%;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:0 18px;font:inherit}
.chip{min-height:48px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:16px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .art{height:120px;display:flex;align-items:center;justify-content:center;font-size:52px}
/* critter scale token for thumbnails (CRITTER-AUDIT.md): card art is a 160-unit drawing times the token */
:root{--crit-u-thumb:.74px}
.card .art svg{width:calc(160 * var(--crit-u-thumb));height:calc(160 * var(--crit-u-thumb))}
/* worksheet cards: page 1 sits straight and sharp with page 2 just behind it (two pages, at a glance); the whole picture
   is a button that opens the preview window. "Preview" shows on hover or keyboard focus, and always on touch screens */
.card .ws-art{height:176px;width:100%;border:0;padding:0;margin:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:var(--surface-2);position:relative;cursor:zoom-in;font:inherit;color:inherit}
.card .ws-art::after{content:"";position:absolute;inset:auto 0 0 0;height:28px;background:linear-gradient(transparent,var(--surface-2));pointer-events:none;z-index:2}
.ws-stack{position:relative;margin-top:18px;display:block}
.ws-stack::before{content:"";position:absolute;inset:0;background:#fff;border-radius:3px;box-shadow:0 2px 8px rgba(20,30,40,.12),0 0 0 1px rgba(20,30,40,.08);translate:8px 6px}
.ws-stack img{position:relative;display:block;width:130px;height:auto;background:#fff;border-radius:3px;box-shadow:0 4px 14px rgba(20,30,40,.16),0 0 0 1px rgba(20,30,40,.08)}
.ws-peek{position:absolute;right:10px;bottom:10px;z-index:3;background:var(--ink);color:var(--bg);font-size:13px;font-weight:800;border-radius:999px;padding:4px 12px;opacity:0;transition:opacity .15s}
.card .ws-art:is(:hover,:focus-visible) .ws-peek{opacity:1}
@media (hover: none){ .ws-peek{opacity:.92} }
.card .ws-art:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media (prefers-reduced-motion: no-preference){ .ws-stack img,.ws-stack::before{transition:translate .25s cubic-bezier(.3,1.4,.5,1)} .card .ws-art:is(:hover,:focus-visible) .ws-stack img{translate:0 -8px} .card .ws-art:is(:hover,:focus-visible) .ws-stack::before{translate:12px 0} }
/* the sheet you last previewed stays marked, so it's easy to find again */
.ws-card.viewed{outline:3px solid var(--accent);outline-offset:2px}
.tag.ws-viewed{background:var(--accent);color:var(--accent-ink,#fff)}
/* worksheet preview window */
dialog.wsp{padding:0;width:min(920px,calc(100vw - 24px));max-width:none;height:min(94vh,1100px);max-height:none;border:0;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.35);display:none;overflow:hidden}
dialog.wsp[open]{display:grid;grid-template-rows:auto 1fr auto auto auto}
dialog.wsp::backdrop{background:rgba(15,26,32,.55)}
.wsp-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.wsp-head h2{margin:0;font-size:clamp(19px,3.2vw,24px);line-height:1.2}
.wsp-count{margin:0 0 2px;font-size:14px;font-weight:700;color:var(--ink-2)}
.wsp-x{flex:none;min-width:var(--tap);padding:0}
.wsp-body{overflow:auto;background:var(--surface-2);padding:16px;overscroll-behavior:contain}
.wsp-pages{display:grid;gap:18px;justify-items:center}
.wsp-pages figure{margin:0;width:100%;max-width:700px}
.wsp-pages img{display:block;width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:0 4px 18px rgba(20,30,40,.18)}
.wsp-pages figcaption{text-align:center;font-size:13px;font-weight:700;color:var(--ink-2);margin-top:6px}
dialog.wsp.zoomed .wsp-pages{justify-items:start}
dialog.wsp.zoomed .wsp-pages figure{max-width:none;width:170%}
.wsp-note{margin:0;padding:8px 18px 0;font-size:14px;color:var(--ink-2)}
.wsp-status{margin:0;padding:0 18px;font-size:14px;font-weight:700;color:var(--ink);min-height:4px}
.wsp-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:10px 18px 16px}
.wsp-nav,.wsp-act,.wsp-print{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wsp-print .lbl{font-weight:800;font-size:15px}
.wsp-frame{position:fixed;left:-10000px;top:0;width:900px;height:1200px;border:0;opacity:0;pointer-events:none}
@media (max-width:620px){ dialog.wsp{width:100vw;height:100dvh;border-radius:0} .wsp-body{padding:10px} .wsp-foot{padding:8px 12px 12px} .wsp-nav .btn,.wsp-act .btn{padding:0 14px} }
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:22px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.tag.free{background:color-mix(in srgb, var(--good) 18%, var(--surface));color:var(--ink)}
.tag.member{background:color-mix(in srgb, var(--accent) 18%, var(--surface));color:var(--ink)}
.tag.soon{background:color-mix(in srgb, var(--warm) 16%, var(--surface));color:var(--ink)}
.card p{margin:0;color:var(--ink-2);font-size:16px}
/* line icons (no emoji as icons, DESIGN.md craft rule 1) */
.emo{width:1.3em;height:1.3em;vertical-align:-.28em;display:inline-block;flex:none;overflow:visible}
.ic{width:1.1em;height:1.1em;vertical-align:-.18em;flex:none}
.btn .ic,.tag .ic{margin-right:5px}.tag .ic{width:1em;height:1em}
.ic.play-tri{width:1em;height:1em;margin-right:6px}
.concern-ic svg{width:34px;height:34px;color:var(--accent)}.concern-ic.big svg{width:46px;height:46px}
.chip .ic{margin-right:6px;color:var(--accent)}
h2 .ic{color:var(--accent);margin-right:4px}
.card p.meta{font-size:14px;font-weight:700;margin-top:-2px} /* length + languages: the two things a clinician checks before opening */
.card .actions{margin-top:auto;padding-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.empty{color:var(--ink-2);padding:20px 0}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.price.best{border:2px solid var(--accent)}
.price .amt{font-size:34px;font-weight:800}
.price ul{padding-left:20px;margin:10px 0 16px}
.notice{background:var(--surface-2);border-radius:16px;padding:14px 16px;font-size:15px;color:var(--ink-2);margin-top:14px}
.draft{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--warm)}
footer{border-top:1px solid var(--line);margin-top:56px;padding:28px 0 40px;color:var(--ink-2);font-size:15px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
dialog{border:none;border-radius:24px;padding:24px;max-width:520px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(10,14,24,.55)}
@media (max-width:760px){ .hero{grid-template-columns:1fr;padding-top:28px} .nav a.link{display:none} }
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }
/* the pause button (site.js) stops every animation on the page; it isn't needed when nothing moves */
:root[data-anim="paused"] *,:root[data-anim="paused"] *::before,:root[data-anim="paused"] *::after{animation-play-state:paused !important}
.motion-btn{display:block;margin:8px auto 0;min-height:var(--tap);padding:0 14px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.scene + .motion-btn{margin:-12px 0 12px auto}
@media (prefers-reduced-motion: reduce){ .motion-btn{display:none} }
/* credibility strip on each resource page (brand plan): who made it, review status, ages, languages, sources, colleague link */
.cred{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:15px;color:var(--ink-2);margin:14px 0;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cred b{color:var(--ink)}
.cred-share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%}
.cred-share .btn{min-height:44px;padding:0 16px;font-size:15px}
.cred .share-out{flex:1 1 220px;min-width:0;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.cred .share-status{font-size:14px}

/* ---------- content pages ---------- */
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:10px 14px;border-radius:10px;z-index:20}
.skip:focus{left:8px}
/* beta feedback button (Google Form, new tab): under the hero buttons and in the footer; tester and preview builds only */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 0}
.fb-row span{font-size:15px;color:var(--ink-2);flex:1 1 220px}
.btn.fb-foot{min-height:44px;padding:0 16px;font-size:15px;margin-top:10px}
/* worksheet helper: the Joystick Critter beside the page's tip (screen only; the printed sheet has its own lockup) */
.helper-card{display:flex;align-items:flex-start;gap:12px;margin:16px 0}
.helper-card[hidden]{display:none}
.hc-av{flex:none;width:44px;height:44px;margin-top:4px}
.hc-av svg{width:44px;height:44px}
.hc-av .logo-stick{stroke:var(--ink)}
.hc-bub{position:relative;flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 10px 12px 16px}
.hc-bub::before{content:"";position:absolute;left:-8px;top:18px;width:14px;height:14px;background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.hc-bub p{margin:0;flex:1 1 260px}
.hc-x{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.hc-x:hover{background:var(--bg);color:var(--ink)}
.btn.fb-point{outline:3px solid var(--warm);outline-offset:4px} /* after the welcome closes: a still ring (no motion) on the visible Send feedback button */
/* beta welcome (tester and preview builds only): the site dialog, with the Joystick Critter introducing it (DESIGN.md craft rule 3) */
dialog.welcome{max-width:470px;padding:24px 22px 22px}
.wel-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.wel-head svg{width:48px;height:48px;flex:none}
.wel-head .logo-stick{stroke:var(--ink)}
.wel-head h2{margin:0;font-size:26px;line-height:1.15}
.welcome p{margin:0 0 10px}
.wel-fb{white-space:nowrap}
.wel-fb svg{width:1em;height:1em;vertical-align:-2px;margin-right:4px;color:var(--accent)}
.wel-where{color:var(--ink-2);font-size:15px}
.wel-off{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;min-height:44px;margin:12px 0 16px;cursor:pointer}
.wel-off input{width:22px;height:22px;margin:0;accent-color:var(--accent)}
.wel-off span{color:var(--ink-2);font-size:14px}
/* Calm (less motion), from the welcome dialog or the footer toggle: nothing on the site moves */
:root[data-motion="reduced"] *,:root[data-motion="reduced"] *::before,:root[data-motion="reduced"] *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
.calm-site{margin-right:8px}
.calm-site[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.wel-btns{display:flex;flex-wrap:wrap;gap:10px}
.wel-btns .btn{flex:1 1 170px}
.nav a.link[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
/* desktop: hover feedback on everything clickable */
@media (hover:hover) and (pointer:fine){
  .btn{transition:filter .12s, transform .12s, border-color .12s}
  .btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
  .btn.ghost:hover{border-color:var(--accent)}
  .btn:active{transform:translateY(1px)}
  .nav a.link:hover{color:var(--ink);background:var(--surface-2)}
  .chip:not([aria-pressed="true"]):hover{border-color:var(--accent)}
  .card{transition:box-shadow .15s, transform .15s}
  #grid .card:hover,.card.concern:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(28,43,51,.12)}
}
.crumbs{font-size:15px;color:var(--ink-2);margin:22px 0 4px}
.crumbs a{color:var(--ink-2)}
.page-head h1{font-size:clamp(30px,4.6vw,46px);line-height:1.1;margin:6px 0 10px;letter-spacing:-.4px}
.page-head .lead{font-size:20px;color:var(--ink-2);margin:0 0 16px;max-width:760px}
.prose{max-width:760px}
.prose h2{font-size:26px;margin:34px 0 8px}
.prose h3{font-size:20px;margin:22px 0 6px}
.prose p,.prose li{color:var(--ink)}
.prose li{margin:6px 0}
.callout{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--warm);border-radius:14px;padding:14px 18px;margin:16px 0}
.callout.info{border-left-color:var(--accent)}
.two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.side{position:sticky;top:84px;display:grid;gap:12px}
.side .card .body{gap:10px}
.facts{display:grid;gap:6px;font-size:16px}
.facts > div{display:flex;gap:8px} .facts b{flex:none;min-width:100px} /* long values wrap beside the label, not under it */
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{min-height:48px;min-width:64px;padding:6px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:16px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--shadow)}
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2px 18px;margin:10px 0}
details.faq summary{min-height:56px;display:flex;align-items:center;font-weight:700;cursor:pointer}
table.simple{border-collapse:collapse;width:100%;font-size:16px}
table.simple th,table.simple td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
@media (max-width:860px){ .two{grid-template-columns:1fr} .side{position:static} }

/* ---------- worksheet paper (screen preview + print) ---------- */
.paper{font-family:var(--head);background:#fff;color:#111;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:36px 40px;margin:8px 0 24px;font-size:15px;line-height:1.45;max-width:820px}
.paper:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.paper .ws h1{font-size:26px;margin:0;line-height:1.15;flex:1;min-width:0;text-wrap:balance}
.paper .ws .ws-brand{white-space:nowrap;margin-left:10px}
.paper .ws .ws-lockup{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:15px;color:#1c2b33;letter-spacing:-.01em;vertical-align:middle}
.paper .ws .ws-lockup svg{width:24px;height:24px;flex:none}
.paper .ws .ws-lockup .wm span{color:#1f6f78}
.paper .ws h2{font-size:17px;margin:16px 0 6px;border-bottom:1.5px solid #17565d;color:#17565d;padding-bottom:2px}
.paper .ws .line{border-bottom:1px solid #888;height:28px}
.paper .ws .box{border:1.5px solid #222;border-radius:10px;padding:8px 12px;margin:8px 0}
.paper .ws .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.paper .ws .foot{font-size:12px;margin-top:14px;border-top:1px solid #222;padding-top:6px}
.paper .ws ul{margin:4px 0;padding-left:20px}
.paper .ws ul.check{list-style:none;padding-left:4px}
.paper .ws .small{font-size:13px}
.paper .ws-free{font-size:11pt;color:#17565d;margin-top:6px}
@media (max-width:620px){ .paper{padding:20px 16px;overflow-x:auto} .paper .ws .cols,.paper .ws .wsk-cols{grid-template-columns:1fr} .paper .ws .wsk-cols>.wsk-box{margin:0} } /* wide grids (week planner) scroll inside the sheet, not the page */
@media print{
  @page{margin:14mm}
  body{background:#fff !important}
  body > *:not(main), .no-print, dialog{display:none !important}
  main{padding:0 !important;max-width:none !important}
  .print-root > *:not(.paper){display:none !important}
  .paper{box-shadow:none;padding:0;margin:0;max-width:none;font-size:12.5pt}
  .paper .ws{padding-inline:3px} /* keeps every box's right border from being clipped at the page edge */
  .paper .ws h2{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .paper .ws .box{break-inside:avoid}
  .paper .ws h2.notes{break-before:page;page-break-before:always}
}

/* concern picker */
.concerns-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card.concern .body{padding:16px}
.card.concern h3{font-size:19px}
.card.concern p{font-size:14px}
.card.concern:hover{border-color:var(--accent)}

/* mobile menu */
.mnav{display:none;position:relative}
.mnav summary{list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;min-width:220px;display:grid;z-index:30}
.mnav nav a{min-height:52px;display:flex;align-items:center;padding:0 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600}
.mnav nav a:hover{background:var(--surface-2)}
@media (max-width:760px){ .mnav{display:block} .nav [data-mock="signin"]{display:none} }
@media (max-width:400px){ .nav .brand .wordmark{font-size:15px} .nav .brand{gap:5px} .nav .brand svg{width:28px;height:28px} .nav .lang-switch{padding:0 10px} .nav .lang-switch .globe{display:none} }
@media (max-width:350px){ .mnav-word{display:none} } /* the whole name fits beside the language and menu buttons */
@media (max-width:760px){
  .nav{flex-wrap:nowrap}
  .brand{min-width:0;font-size:16px}
  .brand .wordmark,.brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand{gap:7px} .brand svg{width:30px;height:30px} .wordmark{font-size:17px}
  .mnav{flex:none}
  .nav{gap:6px}
  .nav .lang-switch{flex:none;white-space:nowrap;padding:0 10px} /* never wrap the globe onto its own line */
  .mnav summary.btn{padding:0 14px;white-space:nowrap}
}
/* clinical review packet (internal) */
.review .rtool{border-top:3px solid var(--accent);margin-top:34px;padding-top:6px}
.review .rtool ul{margin:4px 0;padding-left:0;list-style:none}
.review .rtool li{padding:3px 0 3px 22px;position:relative;line-height:1.45;overflow-wrap:anywhere}
.review .rtool li::before{content:"☐";position:absolute;left:0;color:var(--ink-2)}
.review .rid{font:600 12px ui-monospace,Menlo,monospace;color:var(--ink-2);background:var(--surface-2);border-radius:6px;padding:1px 6px;margin-right:4px}
.review .rsub{margin:2px 0 2px 0}
.review .rsub .rsub{margin-left:14px}
.review .rk{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.review .rblock{border-left:3px solid var(--line);padding-left:10px;margin:8px 0}
.review .rkey{font:700 12px ui-monospace,Menlo,monospace;color:var(--ink-2)}
.review .rtoc{margin:18px 0;line-height:1.8}
.review .signoff{margin-top:14px;width:100%}
.review .signoff td{height:36px}
.review .rf{font-weight:800;color:var(--ink-2);font-size:14px}
@media print{ .review{font-size:9.5pt} .review .rtool{break-before:page;border-top:0} .review .rtool li{padding:1px 0 1px 16px;line-height:1.3}
  .review .rid{font-size:7.5pt;padding:0 3px} .review .rk{font-size:8pt} .review .rf{font-size:8pt} .review h2{font-size:15pt} .review h3{font-size:11.5pt;margin:10px 0 2px}
  .review .rtoc,.review .callout{break-after:avoid} }
/* game detail: the game's own start-screen scene as a preview */
.scene{--pip:#4cc1a6;--pip-2:#2f9e86;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:900/300;margin:6px 0 18px;box-shadow:var(--shadow)}
.scene > svg{width:100%;height:100%;display:block}
.scene .pip{display:none} /* Pip's moods are driven by game CSS; previews show the scene only */
@media (hover:hover) and (pointer:fine){ .scene{transition:transform .15s} .scene:hover{transform:translateY(-2px)} }
.review .rtool h2 .btn{min-height:44px;padding:0 14px;font-size:14px;vertical-align:middle;margin-left:6px}
@media print{ body.print-one .review > *:not(.rtool), body.print-one .review .rtool:not(.printing){display:none !important} body.print-one .review .rtool.printing{break-before:auto} }

/* each printable sheet exists in both languages: the page's language shows; printing shows the one picked */
.paper-alt{display:none}
@media print{
  body.print-en .paper[data-lang="es"],body.print-es .paper[data-lang="en"]{display:none !important}
  body.print-en .paper[data-lang="en"],body.print-es .paper[data-lang="es"]{display:block !important}
}
.lang-big{font-weight:800}
.nav .lang-switch,.nav [data-mock="signin"]{padding:0 12px}
html[lang="es"] .nav [data-mock="signin"]{display:none} /* longer Spanish labels: keep the bar on one line (sign-in is a mockup) */
@media (max-width:1060px){ .nav a.link{display:none} .mnav{display:block} .nav [data-mock="signin"]{display:none} } /* tablets: compact menu instead of a wrapped bar */

/* "Send as homework" box (free games and worksheets) */
.hw-box{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:16px 18px;margin:18px 0}
.hw-box h2{margin:0 0 4px;font-size:20px}
.hw-box p{margin:0 0 10px;color:var(--ink-2)}
.hw-box.locked{border-style:dashed} /* member game: looks locked (Members only), works for testers */
.hw-box.locked h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hw-box.locked h2 .ic{width:20px;height:20px}
.hw-box.locked h2 .tag{font-size:13px}
.hw-box [disabled]{opacity:.55;cursor:not-allowed}
.wel-tester{font-size:15px;background:var(--surface-2);border-radius:12px;padding:8px 12px}
.hw-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;margin:8px 0}
.hw-row label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:15px}
.hw-row select{min-height:48px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;padding:0 10px;max-width:100%}
.hw-out{width:100%;min-height:44px;border-radius:12px;border:2px solid var(--line);background:var(--surface-2,var(--surface));color:var(--ink);font:inherit;font-size:15px;padding:0 10px;margin-top:4px}
.hw-status{min-height:1.4em;margin:6px 0 0;font-weight:700;color:var(--accent)}

/* Contact page: two cards side by side on wide screens */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin:8px 0 18px}
.contact-card{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:16px 18px}
.contact-card h2{margin:0 0 6px;font-size:22px}

/* howpics:start (generated by tools/build.js from the .hp rules in src/game-shell.html; edit those, not this block) */
.hp{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px}
.hp-tile{flex:1 1 104px;max-width:160px;display:grid;gap:6px;justify-items:center;align-content:start}
.hp-art{width:100%;min-height:74px;display:flex;align-items:center;justify-content:center;gap:4px;background:var(--surface-2);border-radius:14px;padding:6px} /* grows with longer (Spanish) words instead of clipping them */
.hp-lbl{font-size:14px;font-weight:700;color:var(--ink-2);line-height:1.25}
.hp-bubble{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;padding:6px;font:600 11px/1.15 var(--display);color:var(--tp-ink,#0f2f45);background:var(--tp-bub,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2393cfe6'/%3E%3Ccircle cx='48.8' cy='48.8' r='46.4' fill='%23d6f0fa'/%3E%3Cpath d='M14.2 31.9A38.5 38.5 0 0 1 31.9 14.2' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E")) center/100% 100% no-repeat} /* Thought Pop's flat bubble: pale fill, darker rim, one white highlight (DESIGN.md drawing spec 8) */
.hp-jar{width:44px;height:52px}.hp-n{font-family:var(--display);font-size:22px}
.hp-combo{font-family:var(--display);font-weight:600;font-size:18px;padding:5px 11px;border-radius:12px;background:#ff9f43;color:#3b1d00;box-shadow:0 0 0 3px rgba(255,159,67,.4)}
.hp-score{font-family:var(--display);font-weight:600;font-size:24px;line-height:1;text-align:center}.hp-score small{display:block;font-family:var(--text);font-size:11px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.hp-timer{display:grid;gap:5px;width:80%;text-align:center;font-family:var(--display)}.hp-timer i{height:8px;border-radius:9px;background:var(--line);overflow:hidden}.hp-timer u{display:block;height:100%;width:65%;background:var(--accent)}
.hp-card{background:var(--surface);border-radius:10px;padding:6px 8px;font-size:12px;font-weight:700;line-height:1.2;box-shadow:var(--shadow);max-width:100%}
.hp-chips{display:flex;flex-direction:column;gap:4px;width:100%}.hp-chips span{background:var(--surface);border:2px solid var(--line);border-radius:9px;padding:2px 6px;font-size:11px;font-weight:800}.hp-chips span.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.hp-zones{display:flex;flex-wrap:wrap;gap:3px;width:100%}.hp-zones span{flex:1 1 auto;min-width:0;border-radius:8px;padding:12px 2px;font-size:10px;font-weight:800;color:#1d2a33}.hp-zones .z0{background:#ffb39a}.hp-zones .z1{background:#9fe0bf}.hp-zones .z2{background:#c6cfe0}.hp-zones span.on{box-shadow:0 0 0 3px var(--ink)}
.hp-chain{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;font-size:10px;font-weight:800}.hp-chain span{background:var(--surface);border-radius:8px;padding:6px 4px}.hp-chain b{color:var(--ink-2)}
.hp-vs{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:800}.hp-vs span{background:var(--surface);border-radius:8px;padding:12px 5px;box-shadow:var(--shadow)}.hp-vs b{background:var(--play);color:var(--play-ink);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:10px}
.hp-jars{display:flex;gap:4px;align-items:flex-end}.hp-jars span{width:40px;height:52px;border:2px solid #7fb2c9;border-radius:6px 6px 12px 12px;background:rgba(255,255,255,.6);font-size:9px;font-weight:800;display:grid;place-items:center;padding:2px;line-height:1.1}
.hp-sun{display:flex;align-items:center;gap:4px;font-family:var(--display);font-size:22px}.hp-sun svg{width:30px;height:30px}
.hp-meter{width:86%;height:14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);position:relative}.hp-meter i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#6fd3a0,#ffd166 55%,#ff6a45)}
.hp-tag{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:900}.hp-tag.up{background:#ffe2d6;color:#8a2a12}.hp-tag.down{background:#d9f3e4;color:#16613b}
.hp-art .crit-mini{width:72px;height:72px;overflow:hidden} /* the critter is shown from the shoulders up, on purpose */
.lib-hp{justify-content:flex-start;margin:6px 0 10px;line-height:1.25;--display:var(--head);--text:var(--font);--play-ink:#1f0f08} /* the games' font tokens, mapped to the site's */
/* howpics:end */