/* THE LITTLES (/littles), Oct 17: Nan's Rainbow Garden. First the kept blocks (the free First Book pop-up, the price card,
   the one-night strip and the game pop-up), then the garden itself (tokens, bands, map, Hello Gate, pebbles, pond,
   tree, video, Grown-up Gate, Goodnight), which comes last so it wins. */
/* ---------- tokens shared with the free book reader (kept from the Oct 10 to Oct 17 page) ---------- */
/* width/height attributes stay on every image (no layout shift); CSS sets the real height */
img{height:auto}
body.lit{
  --lit-gold:#F2B544; --lit-bg:#FFF6E6; --lit-card:#FFFDF8; --lit-ink:#1F2A44;
  --lit-orange:#FF9F43; --lit-pink:#FFB3C1; --lit-mint:#8FD9B6; --lit-sky:#8EC9F5; --lit-wood:#C98B5A;
  --lit-wood-deep:#A8703F; --lit-wood-lite:#DDA676;
  --lit-radius:24px; --lit-tap:56px;
  --lit-font:'Baloo 2','Lexend',system-ui,sans-serif;
  --lit-ease:cubic-bezier(.22,1,.36,1);
  /* tire-kick Oct 15: the v3 approved text pairs (css/anp-tokens.css) replace Lamplight's brown inks on this page */
  --ink:var(--anp-text,#1F2E55); --ink-soft:var(--anp-text-muted,#4B5674); --gold-ink:var(--anp-ink,#1F2E55);
}
/* ---------- the free First Book pop-up (/littles?book=<id>, js/anp-littles-page.js): kept as is ---------- */
/* the peek: cover, the funniest real page, one way in */
dialog.lit-peek{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:var(--lit-radius);padding:0;background:var(--lit-card);color:var(--lit-ink);box-shadow:0 30px 80px -20px rgba(19,28,52,.55)}
dialog.lit-peek::backdrop{background:rgba(19,28,52,.55)}
.lit-peek .in{padding:20px 20px 24px}
.lit-peek .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lit-peek h3{font:500 1.5rem/1.2 var(--font-serif,'Fraunces',Georgia,serif);color:var(--lit-ink);margin:0}
.lit-peek .x{flex:none;width:var(--lit-tap);height:var(--lit-tap);border-radius:50%;border:1.5px solid var(--line-strong);background:var(--lit-card);color:var(--lit-ink);font:700 1.5rem/1 var(--font-ui);cursor:pointer}
.lit-peek-page{background:var(--lit-card);border-radius:16px}
.lit-peek .lb-stage{margin-top:14px}
/* P1-13 (tire-kick Oct 15): only the page art on a reading page; the cover belongs on the cover */
.lit-peek .art{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1/1;max-height:min(46vh,440px);border-radius:16px;overflow:hidden;background:rgba(31,42,68,.05)}
.lit-peek .art picture,.lit-peek .art img{display:block;width:100%;height:100%}
.lit-peek .art img{object-fit:cover;object-position:50% 30%}
/* P1-14: the words sit close (.35em apart), so a short line stays on one line and a long one on two at 390 */
.lit-peek .line{font:600 clamp(30px,8vw,40px)/1.25 var(--font-ui);word-spacing:.35em;min-height:136px;margin:14px 0 4px;color:var(--lit-ink);
  display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;column-gap:.35em;row-gap:0}
/* Oct 11: finger-point reading in the free book, a 250ms gold twinkle per tap, nothing scored */
.lit-peek .line .lit-w{font:inherit;color:inherit;background:none;border:0;padding:8px 0;margin:0;min-height:60px;min-width:44px;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.lit-peek .line .lit-w:focus-visible{outline:3px solid var(--lit-ink);outline-offset:2px}
.lit-peek .line .lit-w.spark{animation:lit-spark .25s ease-out}
@keyframes lit-spark{0%{transform:scale(1)}50%{transform:scale(1.08);background:rgba(244,183,63,.32);text-shadow:0 0 12px rgba(244,183,63,.9)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.lit-peek .line .lit-w.spark{animation:none;background:rgba(244,183,63,.32)}}
.lit-peek .tapnote{text-align:center;margin:10px 0 0;font-size:.9375rem;color:var(--lit-ink);opacity:.8}
.lit-peek .note{font-size:var(--anp-fs-sm);color:var(--ink-soft);text-align:center;background:none;padding:0;max-width:none;margin:12px auto 0}
.lit-peek .go{display:flex;justify-content:center;margin-top:16px}
.lit-peek .go .anp-home-btn1{min-height:var(--lit-tap)}
/* final fix 10/10: page through the whole book in the peek */
.lit-peek .pager{display:flex;justify-content:center;gap:12px;margin-top:14px}
.lit-peek .pg{min-height:var(--lit-tap);padding:0 22px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--lit-card);color:var(--lit-ink);font:600 var(--anp-fs-base)/1 var(--font-ui);cursor:pointer}
.lit-peek .pg:hover{border-color:var(--brand)}
.lit-peek .pg:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lit-peek .pg[hidden],.lit-peek .go[hidden],.lit-peek .quiet[hidden]{display:none}
.lit-peek .go{flex-direction:column;align-items:center;gap:10px}
.lit-peek .end{margin:0;text-align:center;color:var(--ink-soft);max-width:34ch}
.lit-peek .quiet{margin:12px 0 0;text-align:center;font-size:var(--anp-fs-sm);color:var(--ink-soft)}
/* the end sheet: cream, rises from the bottom (320ms), the book's art, one parent email ask */
dialog.lit-peek{overflow-x:hidden}
dialog.lit-peek.is-end .in,dialog.lit-peek.is-exit .in{display:none}
.lit-end{position:relative;padding:20px 22px 24px;background:var(--lit-bg);border-radius:var(--lit-radius);text-align:center;overflow:hidden}
.lit-end[hidden]{display:none}
.lit-end.rise{animation:lit-rise 320ms var(--lit-ease) both}
@keyframes lit-rise{from{transform:translateY(64px);opacity:0}to{transform:none;opacity:1}}
.lit-end h3{position:relative;z-index:1;margin:18px 0 0;font:600 1.875rem/1.15 var(--font-display);color:var(--lit-ink);letter-spacing:-.01em;outline:none}
.lit-end .sub{position:relative;z-index:1;margin:8px auto 0;max-width:34ch;font-size:1.1875rem;line-height:1.45;color:var(--ink-soft)}
.lit-end .end-form{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:400px;margin:18px auto 0;text-align:left}
.lit-end .end-form label{font:600 1.0625rem/1.3 var(--font-ui);color:var(--lit-ink)}
.lit-end .end-form input{min-height:var(--lit-tap);padding:0 18px;border-radius:var(--lit-radius);border:1.5px solid var(--line-strong);background:#fff;font:400 1.125rem/1.2 var(--font-ui);color:var(--ink)}
.lit-end .end-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 50%,transparent)}
.lit-end .end-form input[aria-invalid="true"]{border-color:var(--danger)}
.lit-end .end-form .err{margin:0;font-size:.9375rem;color:var(--danger)}
.lit-end .end-form .err:empty{display:none}
.lit-end .end-form .lit-gold{width:100%;min-height:var(--lit-tap);border-radius:999px;font-size:1.25rem}
.lit-end .end-form .consent{margin:0;text-align:center;font-size:.875rem;color:var(--ink-soft)}
.lit-end .end-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;margin-top:12px}
.lit-end .end-foot span:empty{display:none}
.lit-end .later-link.maybe{opacity:.85;font-size:1rem}
/* a soft confetti of 7 gold dots, once */
.lit-end .dots{position:absolute;inset:0;pointer-events:none;z-index:2}
.lit-end .dots i{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px 1px color-mix(in srgb,var(--gold) 60%,transparent);opacity:0;animation:lit-dot 1100ms var(--lit-ease) var(--d,0ms) both}
@keyframes lit-dot{0%{opacity:0;transform:translateY(14px) scale(.4)}35%{opacity:1;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(22px) scale(.8)}}
@media (max-width:420px){.lit-end{padding:16px 14px 20px}.lit-end h3{font-size:1.75rem}}
@media (prefers-reduced-motion:reduce){
  .lit-end.rise{animation:lit-fade 150ms linear both}
  .lit-end .dots{display:none}
}
@keyframes lit-fade{from{opacity:0}to{opacity:1}}
/* ---------- P1-12: the end card, then the ask ----------
   "You read the whole book!" with Nan peeking from behind the cover: a 400ms rise, one blink, one tail wave, done
   inside 1.2s (still under reduced motion). The ask (email, share, "Email me this book", "Maybe later") comes in
   below it 1.2s later. No Nan anywhere else in the book. */
.lit-end{padding-top:24px}
.lit-end-x{position:absolute;top:14px;right:14px;z-index:3}
.lit-endcard{position:relative;z-index:1}
.endart{position:relative;width:200px;height:270px;margin:0 auto}
.endart .cov{position:absolute;left:0;right:0;bottom:0;height:200px;z-index:2;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-2,0 10px 30px rgba(29,43,79,.18));background:var(--lit-card);border:4px solid var(--lit-card)}
.endart .cov picture,.endart .cov img{display:block;width:100%;height:100%}
.endart .cov img{object-fit:cover;object-position:50% 30%}
.endart .nanwrap{position:absolute;left:50%;top:0;width:96px;height:112px;margin-left:-48px;z-index:1}
.endart .nanwrap img{display:block;width:100%;height:auto}
.endart .lid{position:absolute;width:11%;height:8.5%;top:22.6%;background:#ED9936;border-radius:50% 50% 45% 45%;border-bottom:1.5px solid #7A3E10;transform:scaleY(0);transform-origin:50% 0;pointer-events:none}
.endart .lid.l{left:29.8%}.endart .lid.r{left:56.4%}
.endart .tail{position:absolute;right:-26px;top:96px;width:40px;height:64px;z-index:1;fill:none;stroke:#ED9936;stroke-width:8;stroke-linecap:round;transform-origin:4px 60px}
.lit-end.play .nanwrap{animation:lit-nan-rise 400ms cubic-bezier(.22,1,.36,1) both}
.lit-end.play .lid{animation:lit-nan-blink 240ms ease-in-out 560ms 1 both}
.lit-end.play .tail{animation:lit-nan-tail 420ms ease-in-out 760ms 1 both}
@keyframes lit-nan-rise{from{transform:translateY(72px)}to{transform:none}}
@keyframes lit-nan-blink{0%,100%{transform:scaleY(0)}45%,55%{transform:scaleY(1)}}
@keyframes lit-nan-tail{0%,100%{transform:rotate(0)}35%{transform:rotate(-16deg)}70%{transform:rotate(10deg)}}
.lit-end .lit-endcard h3{margin:16px 0 0}
.lit-ask{position:relative;z-index:1;margin-top:18px;padding-top:18px;border-top:1.5px dashed color-mix(in srgb,var(--lit-gold) 70%,transparent)}
.lit-ask[hidden]{display:none}
.lit-peek.end-live .lit-ask{animation:lit-ask-in 280ms var(--lit-ease) both}
@keyframes lit-ask-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lit-ask h4{margin:0;font:500 1.4rem/1.2 var(--font-serif,'Fraunces',Georgia,serif);color:var(--lit-ink)}
.lit-ask .end-foot .later-link{font-size:1rem}
.lit-ask .end-more{display:flex;justify-content:center;margin-top:16px}
.lit-ask .end-more[hidden],.lit-ask .end-form[hidden]{display:none}
.lit-ask .end-more .lit-gold{min-height:56px;width:100%;max-width:360px}
/* P1-3 (fresh eyes): short screens keep Back / Next on the first screen of the reader */
@media (max-height:760px){.lit-peek .art{max-height:34vh}.lit-peek .line{min-height:112px;margin-top:10px}.lit-peek .in{padding-top:14px}.lit-peek .tapnote{margin-top:6px}}
@media (max-height:600px){.lit-peek .art{max-height:28vh}.lit-peek .line{min-height:96px}.lit-peek .tools{margin-top:4px}.lit-peek .lb-stage{margin-top:8px}.lit-peek .pager{margin-top:8px}}
@media (max-width:359px){.endart{width:170px;height:240px}.endart .cov{height:170px}}
@media (prefers-reduced-motion:reduce){
  .lit-end.play .nanwrap,.lit-end.play .lid,.lit-end.play .tail{animation:none}
  .lit-peek.end-live .lit-ask{animation:none}
}

/* ---------- the price card (the shared homepage card, inside the Grown-up Gate) and the green chair ---------- */
/* ---------- pricing band: the homepage card, unchanged ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pricecard{padding:48px 32px 32px;position:relative;box-shadow:var(--shadow-2)}
.pricecard .ribbon{position:absolute;top:-6px;right:28px;width:26px;height:58px;background:linear-gradient(180deg,var(--gold),var(--gold-deep));clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.pricecard .amt{margin-top:12px;color:var(--ink-soft)}
.pricecard .amt b{font:600 4.2rem/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.pricecard .amt .mo{margin-left:6px}
.pricecard .amt .yr{display:block;margin-top:6px}
.pricecard .anp-home-btn1{width:100%;margin-top:32px}
.pricecard .lit-price-go{display:flex;width:100%;min-height:56px;margin-top:32px;justify-content:center}
.pricecard .fine{font-size:var(--anp-fs-sm);color:var(--ink-soft);margin-top:16px;text-align:center}
.pricecard .esa{font-size:var(--anp-fs-sm);color:var(--ink);margin-top:16px;background:var(--cream);border-radius:var(--radius-sm);padding:12px 16px}
.pricecard .trust{margin-top:18px;color:var(--ink-soft);max-width:none;display:flex;gap:10px;align-items:flex-start;background:none;border:0;border-radius:0;padding:0}
.pricecard .trust .tico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold-tint);color:var(--ember)}
.pricecard .trust .tico .ico{width:20px;height:20px}
.pricecard .ticks{max-width:none;grid-template-columns:minmax(0,1fr)}
.pricecard .ticks li>span{min-width:0;overflow-wrap:anywhere}
.advisor{display:flex;gap:16px;align-items:center;margin-top:24px;padding:16px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
.advisor picture{flex:none;width:72px;height:72px}
.advisor img{width:72px;height:72px;border-radius:14px;object-fit:cover;object-position:50% 25%;flex:none}
.advisor p{font-size:var(--anp-fs-sm);color:var(--ink)}
/* nothing under 14px on this page (the shared footer's fine print is 13px elsewhere) */
.anp-home-footer .discl{font-size:14px}
/* the one gold button inside the free book's end card and the warm note (each dialog is its own screen; the page
   itself keeps one gold button, in the hero). Same look as the page's gold button. */
.lit-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border:0;border-radius:999px;white-space:nowrap;
  background:var(--anp-gold,#F2B544);color:var(--anp-ink,#1F2E55);font:700 1.15rem/1.2 var(--font-ui);text-decoration:none;cursor:pointer;text-align:center;
  box-shadow:inset 0 -3px 0 rgba(31,46,85,.14);transition:transform .16s cubic-bezier(.22,1,.36,1),background .16s}
.lit-gold:hover{background:var(--gold-deep,#E2A12F);transform:translateY(-1px)}
.lit-gold:active{transform:translateY(1px);box-shadow:none}
.lit-gold:focus-visible{outline:3px solid var(--anp-ink,#1F2E55);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lit-gold,.lit-gold:hover{transition:none;transform:none}}
/* ---------- the one-night strip (Oct 16, simplified Oct 17): kept, now inside the Sound Garden ---------- */
/* ===== Littles: HOW A NIGHT WORKS (redesign Oct 16, scoped .lh-*) ===== */
/* Littles "how a night works" (Oct 16, simplified Oct 17). Scoped to .lh-*, .ln-* (the night strip) and .lp-* (the skills path). */
.lh{--lh-ink:var(--anp-text,#1F2E55);--lh-soft:var(--anp-text-muted,#4B5674);--lh-accent:var(--anp-text-accent,#7A4E00);
  --lh-card:#FFFDF8;--lh-peach:#FFE6D9;--lh-mint:#DDF4E8;--lh-sky:#DDEEFB;--lh-butter:#FFF0C7;--lh-pink:#FFE3E9;
  --lh-r:24px;--lh-shadow:0 1px 2px rgba(31,46,85,.06),0 8px 24px rgba(31,46,85,.08);color:var(--lh-ink)}
.lh *{box-sizing:border-box}
.lh-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.lh-head{text-align:center;max-width:640px;margin:0 auto}
.lh-kick{font:600 14px/1.3 var(--font-ui,'Lexend',system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--lh-accent);margin:0}
.lh-h2{font:500 clamp(28px,2.2vw + 18px,40px)/1.18 var(--font-serif,'Fraunces',Georgia,serif);margin:8px 0 0;color:var(--lh-ink)}
.lh-lede{font:400 18px/1.55 var(--font-ui,'Lexend',system-ui,sans-serif);color:var(--lh-soft);margin:12px auto 0}

/* ---- 1. One night (simplified Oct 17): one illustrated strip of four cards, picture first, then one line from Nan.
   Four in a row on a computer and a tablet, 2 by 2 on a phone. The heading, the strip and Nan's line fit one screen
   at 1280x800 and at 390x844. Nothing moves here. ---- */
.lh-night{background:radial-gradient(50% 40% at 50% 40%,rgba(255,200,120,.25),transparent 70%),linear-gradient(180deg,#FFF6E6 0%,#FFE6D9 100%);padding:44px 0 40px}   /* its own light, never identical to the next band */
.lh-night .lh-lede{color:var(--lh-ink);font-size:19px;margin-top:8px}
.ln-strip{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}   /* Oct 24: Julie's seven parts, four across then three */
.ln-strip:not(:has(.ln-say[open])){align-items:stretch}   /* even cards at a glance; an open "See what you'll say" grows card 2 only */
/* a jump to #night or #skills lands below the sticky header (and the sticky age bar under 861px) */
.lh-night,.lh-skills{scroll-margin-top:76px}
@media (max-width:860px){.lh-night,.lh-skills{scroll-margin-top:118px}}
.ln-card{background:var(--lh-card);border-radius:20px;box-shadow:var(--lh-shadow);padding:0 0 14px;min-width:0}
.ln-pic{position:relative;aspect-ratio:3/2;border-radius:20px 20px 0 0;overflow:hidden;background:#F4ECDC}
.ln-pic picture,.ln-pic img{display:block;width:100%;height:100%}
.ln-pic img{object-fit:cover;object-position:center 35%}
/* card 4: Nan with a little gold check, on a warm lantern glow */
.ln-nan{background:radial-gradient(60% 70% at 50% 60%,#FFE3A6 0%,#FFF0C7 45%,#FFE6D9 100%)}
.ln-nan img{position:absolute;left:50%;bottom:0;width:auto;height:88%;transform:translateX(-50%)}
.ln-check{position:absolute;width:30%;max-width:56px;aspect-ratio:1/1;left:62%;top:12%}
.ln-check circle{fill:#F2B544;stroke:#FFFDF8;stroke-width:3}
.ln-check path{fill:none;stroke:#1F2E55;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ln-card h3{font:500 20px/1.2 var(--font-serif,'Fraunces',Georgia,serif);margin:12px 16px 2px;color:var(--lh-ink)}
.ln-card>p{margin:0 16px;font:400 16px/1.4 var(--font-ui,'Lexend',system-ui,sans-serif);color:var(--lh-soft)}
/* card 2: "See what you'll say" opens the three steps of the sound game, word for word */
.ln-say{margin:6px 8px 0}
.ln-say summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;border-radius:12px;font:600 15px/1.25 var(--font-ui,'Lexend',sans-serif);color:var(--lh-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.ln-say summary::-webkit-details-marker{display:none}
.ln-say summary .ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ln-say[open] summary .ico{transform:rotate(180deg)}
.ln-say summary:focus-visible{outline:3px solid #1F2E55;outline-offset:2px}
.ln-game{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.ln-game li{background:#FFF6E6;border-radius:14px;padding:10px 12px}
.ln-game b{display:block;font:600 14px/1.2 var(--font-ui,'Lexend',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--lh-accent)}
.ln-game .who{display:block;font:500 14px/1.3 var(--font-ui,'Lexend',sans-serif);color:var(--lh-soft);margin:2px 0 4px}
.ln-game q{display:block;font:400 15px/1.45 var(--font-ui,'Lexend',sans-serif);color:var(--lh-ink);quotes:"\201C" "\201D"}
/* Nan's one warm line */
.ln-nanline{display:flex;align-items:center;justify-content:center;gap:12px;max-width:620px;margin:22px auto 0;font:500 18px/1.35 var(--font-serif,'Fraunces',Georgia,serif);color:var(--lh-ink)}
.ln-nanline img{flex:none;width:52px;height:auto}
.ln-nanline>span{background:var(--lh-card);border-radius:18px 18px 18px 6px;padding:10px 16px;box-shadow:var(--lh-shadow)}

@media (max-width:960px){.ln-strip{gap:14px}.ln-card h3{font-size:18px;margin:10px 12px 2px}.ln-card>p{margin:0 12px;font-size:15px}}
/* phone: the strip goes 2 by 2, and the path winds down the page, stone by stone */
@media (max-width:760px){
  .lh-night{padding:28px 0 28px}
  .lh-night .lh-h2{font-size:28px}
  .lh-night .lh-lede{font-size:17px;margin-top:6px}
  .ln-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
  .ln-card{border-radius:16px;padding-bottom:10px}
  .ln-pic{border-radius:16px 16px 0 0}
  .ln-card h3{font-size:17px;margin:8px 10px 0}
  .ln-card>p{margin:0 10px;font-size:15px;line-height:1.35}
  .ln-say{margin:2px 2px 0}
  .ln-say summary{padding:0 8px;font-size:14px}
  .ln-say[open]{margin:2px 6px 0}
  .ln-game li{padding:8px 10px}
  .ln-nanline{margin-top:16px;font-size:17px}
  .ln-nanline img{width:44px}
}
/* screen-reader-only text (the how-a-night section uses it) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the free sample on /littles?book=<id> (Oct 17, /js/anp-littles-page.js): the reader above, plus the short note for a
   book that opens in the free week. Full-strength text links (no faded opacity), 44px tap height on every link. */
.lit-sample .later-link{opacity:1}
.lit-lock .endart{height:200px}
.lit-lock h3{margin-top:16px}
.lit-lock .end-more{display:flex;justify-content:center;margin-top:16px}
.lit-lock .end-more .lit-gold{min-height:56px;width:100%;max-width:360px}
.lit-lock-fine{margin:8px 0 0;font-size:14px;color:var(--ink-soft)}
.lit-lock-samples{margin:16px auto 0;max-width:40ch;font-size:15px;line-height:1.6;color:var(--lit-ink)}
.lit-lock-samples a{display:inline-block;padding:11px 0;margin:-11px 0;color:var(--lit-ink);text-underline-offset:3px}
.lit-lock-samples a:focus-visible{outline:3px solid var(--lit-ink);outline-offset:2px;border-radius:6px}

.lit-sample .art img,.lit-sample .endart .cov img{object-fit:contain}       /* the free book: the whole page, always */
.advisor img{height:auto;object-fit:contain;align-self:flex-start}          /* the green chair, whole (72px wide) */
/* ===== Item 65 (2026-10-17, Joel): card 2's "See what you'll say" opens the game as a pop-up (#game-dialog,
   /css/anp-sample-popup.css), never a drop-down. The button keeps the old summary's look; the whole card is a tap target. ===== */
.ln-say-btn{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:6px 8px 0;padding:0 8px;border:0;border-radius:12px;background:none;cursor:pointer;font:600 15px/1.25 var(--font-ui,'Lexend',sans-serif);color:var(--lh-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-align:left}
.ln-say-btn .ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ln-say-btn:focus-visible{outline:3px solid #1F2E55;outline-offset:2px}
.ln-card.ln-tap{cursor:pointer}
@media (hover:hover){.ln-card.ln-tap:hover{box-shadow:0 1px 2px rgba(31,46,85,.08),0 14px 30px rgba(31,46,85,.14)}}
@media (max-width:760px){.ln-say-btn{margin:2px 2px 0;font-size:14px}}
/* the game card's step labels: accent #7A4E00 on white is 7.9:1 (AA); the script lines are 21px navy */
.gc-step b{color:var(--anp-text-accent,#7A4E00)}

/* ===== Items 66 + 119 (2026-10-17, Joel): the reassurance line under the night strip's title. Nan's small round avatar
   (48px) beside a cream speech bubble (#FFF8EC, 1px #E8DCC4 border, 16px radius) holding the line at 18px, navy #1B2440
   (about 14:1). 8px above, 16px below; one or two lines, never a lone last word. ===== */
.ln-reassure{display:flex;align-items:center;justify-content:center;gap:10px;max-width:36rem;margin:8px auto 16px}
.ln-ava{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#FFE9C7;box-shadow:0 0 0 2px #FFF8EC,0 2px 6px rgba(31,46,85,.12)}
.ln-ava img{display:block;width:100%;height:auto;margin-top:2px}
.ln-bubble{position:relative;display:block;padding:10px 16px;background:#FFF8EC;border:1px solid #E8DCC4;border-radius:16px;font:400 18px/1.45 var(--font-ui,'Lexend',system-ui,sans-serif);color:#1B2440;text-align:left;text-wrap:balance}
.ln-bubble::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:#FFF8EC;border-left:1px solid #E8DCC4;border-bottom:1px solid #E8DCC4;transform:rotate(45deg)}
.lh-night .ln-reassure + .lh-lede{margin-top:0}
/* item 118: card 4, "Sweet dreams": a calm moon and stars in the picture slot (no text in it); card titles 22px serif navy */
.ln-moon{background:radial-gradient(70% 80% at 50% 40%,#3A4A7E 0%,#24315C 70%,#1D2A57 100%)}
.ln-moon svg{position:absolute;top:0;left:0;width:100%;height:100%}
/* Oct 23 (Julie's order): card 3, "This week's two letters": two drawn letter tiles (the first week's m and a) in the picture slot, no motion */
.ln-letters{background:radial-gradient(70% 80% at 50% 45%,#FFF1C9 0%,#FFE3A6 55%,#FFD59A 100%)}
.ln-letters svg{position:absolute;top:0;left:0;width:100%;height:100%}
.ln-card h3{font-size:22px;color:#1B2440}
@media (max-width:960px){.ln-card h3{font-size:19px}}
@media (max-width:760px){.ln-card h3{font-size:17px}}
/* item 80: the shared footer lists, with a gap and no separators; every link 16px */
body.lit .anp-home-footer .fmore .abroad,body.lit .anp-home-footer .legal .links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
body.lit .anp-home-footer .fmore .abroad a,body.lit .anp-home-footer .legal .links a{font-size:16px}
/* item 73: the Littles end card shows ONE Nan, whole and smiling, beside the small cover (side by side, never stacked) */
.lit-peek.sp-panel .endart{display:flex;align-items:flex-end;justify-content:center;gap:16px;width:auto;height:auto;margin:8px auto 0}
.lit-peek.sp-panel .endart .cov{position:relative;left:auto;right:auto;bottom:auto;width:132px;height:132px;flex:none}
.lit-peek.sp-panel .endart .nanwrap{position:relative;left:auto;top:auto;margin:0;width:104px;height:auto;flex:none}
.lit-peek.sp-panel .endart .nanwrap .lid{display:none}
.lit-peek.sp-panel .endart .tail{display:none}
.lit-peek.sp-panel .endart.lock .cov{width:160px;height:160px}
.lit-peek.sp-panel .lit-end h3{font-size:28px}

/* ==================================================================
   THE LITTLES (/littles): NAN'S RAINBOW GARDEN (Oct 17, Part 2 "Littles magic", L1 to L5).
   One sunny garden you walk down. All text is navy on a solid card or band (ratios beside each pair); nothing sits on
   a picture or on the rainbow. Pictures are shown whole: each box takes the picture's own shape (width:100%,
   height:auto), only the five small map circles crop. Baloo 2 (self-hosted, /fonts/fonts-app.css) is for headings
   and buttons only; body text is Lexend. Nothing moves on its own; the surprise spots answer a tap, once, and stay
   still under prefers-reduced-motion. No gold text anywhere.
   ================================================================== */
img{height:auto}
html[data-lane="littles"],body.lit{
  --lt-ink:#1F2E55;        /* all text: navy */
  --lt-ink-2:#4B5674;      /* muted: 7.6:1 on white, 6.9 on the light bands */
  --lt-sky-top:#BDE6FF;    /* ink 10.08 */
  --lt-sky-low:#DFF3FF;    /* ink 11.64 */
  --lt-sun:#FFF6D6;        /* ink 12.28: bubble ground */
  --lt-card:#FFFFFF;       /* ink 13.29 */
  --lt-grass:#7BD389;      /* decorative hills only */
  --lt-grass-lt:#D8F5D0;   /* ink 11.32: Sound Garden band */
  --lt-pond:#DFF3FF;       /* ink 11.64: Letter Pond band */
  --lt-blossom:#FFE3EE;    /* ink 11.06: Story Tree band */
  --lt-lilac:#E7DBFF;      /* ink 10.11: Rainbow Path band */
  --lt-butter:#FFF0B3;     /* ink 11.62 */
  --lt-wood:#7A3E14;       /* signpost; #FFF on it 8.31 */
  --r1:#FF8A5B; --r2:#FFB347; --r3:#FFD84D; --r4:#7BD389; --r5:#8FD3FF; --r6:#C3A6FF;   /* decorative only */
  --btn-sun:#FFD84D;   /* ink 9.61 */
  --btn-coral:#FF8A5B; /* ink 5.72 */
  --btn-leaf:#A8E6A1;  /* ink 9.17 */
  --btn-sky:#8FD3FF;   /* ink 8.18 */
  --btn-berry:#FF9EC4; /* ink 6.92 */
  --btn-grape:#C3A6FF; /* ink 6.47 */
  --lt-round:"Baloo 2","Fredoka",system-ui,sans-serif;
  --lt-body:"Lexend",system-ui,sans-serif;
}
body.lit{background:#fff}
body.lit main{overflow-x:clip}
.lt-wrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.lt-head{text-align:center;max-width:46rem;margin:0 auto}
.lt-eyebrow{margin:0;font:600 14px/1.3 var(--lt-body);letter-spacing:.08em;text-transform:uppercase;color:var(--lt-ink)}
.lt-h2{margin:6px 0 0;font:700 clamp(1.875rem,1.3rem + 2.2vw,3rem)/1.08 var(--lt-round);color:var(--lt-ink);letter-spacing:-.005em}
.lt-lede{margin:12px auto 0;max-width:40rem;font:400 18px/1.55 var(--lt-body);color:var(--lt-ink)}
.lt-band{position:relative;padding:64px 0;color:var(--lt-ink);scroll-margin-top:76px}
.lt-grass{background:radial-gradient(60% 45% at 50% 0%,#ECFBE7 0%,transparent 70%),linear-gradient(180deg,#D8F5D0 0%,#CDEFC4 100%)}   /* ink 11.32 / 10.7 */
.lt-lilac{background:var(--lt-lilac)}
.lt-pond{background:var(--lt-pond)}
.lt-blossom{background:var(--lt-blossom)}
.lt-skylow{background:var(--lt-sky-low)}
#top,#letter-pond,#story-tree,#grown-up-gate,#how-littles{scroll-margin-top:76px}
@media (max-width:860px){#top,#letter-pond,#story-tree,#grown-up-gate,#how-littles,.lt-band{scroll-margin-top:118px}}

/* ---------- the chunky buttons (tactile press, no bounce; navy on every fill) ---------- */
.lt-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:0 30px;border-radius:999px;border:0;box-sizing:border-box;
  font:700 1.25rem/1.15 var(--lt-round);color:var(--lt-ink);background:var(--btn-sun);text-decoration:none;text-align:center;
  box-shadow:0 6px 0 rgba(31,46,85,.35);transition:transform .08s,box-shadow .08s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lt-btn:hover{color:var(--lt-ink);text-decoration:none;filter:saturate(1.08)}
.lt-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(31,46,85,.35)}
.lt-btn:focus-visible{outline:4px solid var(--lt-ink);outline-offset:4px}
.lt-btn-sky{background:var(--btn-sky)}
.lt-btn-leaf{background:var(--btn-leaf)}
.lt-btn-gold{background:#F2B544}   /* ink 7.5 */
@media (prefers-reduced-motion:reduce){.lt-btn{transition:none}.lt-btn:active{transform:none}}

/* ---------- 0. the garden map: five round picture buttons (anchors), labels navy on white 13.29 ---------- */
.lt-map{background:#fff;border-bottom:1px solid rgba(31,46,85,.08)}
.lt-map ul{list-style:none;margin:0 auto;padding:12px 16px 10px;display:flex;justify-content:center;gap:26px;max-width:760px;box-sizing:border-box}
.lt-map li{flex:0 0 auto;min-width:0}
.lt-map a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px;border-radius:24px;color:var(--lt-ink);text-decoration:none}
.lt-map-pic{display:block;width:88px;height:88px;border-radius:50%;overflow:hidden;box-sizing:border-box;border:4px solid var(--btn-sun);background:#fff;box-shadow:0 4px 0 rgba(31,46,85,.16)}
.lt-map-pic img{display:block;width:100%;height:100%;object-fit:cover}   /* a small decorative thumbnail: the one place art crops */
.lt-map-pic.m2{border-color:var(--btn-leaf)}.lt-map-pic.m3{border-color:var(--btn-sky)}.lt-map-pic.m4{border-color:var(--btn-berry)}.lt-map-pic.m5{border-color:var(--btn-grape)}
.lt-map-l{font:700 16px/1.1 var(--lt-round);white-space:nowrap}
.lt-map a:focus-visible{outline:4px solid var(--lt-ink);outline-offset:2px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.lt-map-pic{transition:transform .15s}.lt-map a:hover .lt-map-pic{transform:translateY(-3px)}}
@media (max-width:600px){
  .lt-map ul{justify-content:space-between;gap:0;padding:10px 8px 8px}
  .lt-map li{flex:1 1 0}
  .lt-map a{padding:2px 0}
  .lt-map-pic{width:64px;height:64px;border-width:3px}
  .lt-map-l{font-size:16px;letter-spacing:-.02em}
}
/* the smallest phones: the five circles keep 64px and the strip scrolls sideways inside itself (the page never does) */
@media (max-width:359px){.lt-map ul{justify-content:flex-start;gap:14px;overflow-x:auto;padding:10px 12px 8px;scrollbar-width:none}.lt-map li{flex:0 0 auto}}

/* ---------- 1. the Hello Gate: painted sky + rainbow (decoration only, behind the solid card) ---------- */
.lt-sky{position:relative;overflow:hidden;color:var(--lt-ink);
  background:
    radial-gradient(120% 70% at 50% 120%, var(--lt-grass) 0 34%, transparent 34.2%),
    radial-gradient(90% 55% at 15% 118%, #9BDDA0 0 40%, transparent 40.2%),
    linear-gradient(180deg,var(--lt-sky-top) 0%,var(--lt-sky-low) 62%,#F2FBFF 100%);
  padding:48px 0 120px}
.lt-rainbow{position:absolute;left:50%;top:40px;width:min(1100px,140vw);aspect-ratio:2/1;transform:translateX(-50%);
  border-radius:1100px 1100px 0 0;pointer-events:none;opacity:.9;
  background:radial-gradient(circle at 50% 100%,
    transparent 0 48%, var(--r6) 48% 52%, var(--r5) 52% 56%, var(--r4) 56% 60%,
    var(--r3) 60% 64%, var(--r2) 64% 68%, var(--r1) 68% 72%, transparent 72%)}
.lt-cloud{position:absolute;width:160px;height:56px;background:#fff;border-radius:56px;pointer-events:none;
  box-shadow:40px -18px 0 4px #fff, 84px 2px 0 -6px #fff;opacity:.95}   /* static clouds; no drift */
.lt-cloud.c1{left:4%;top:34px}.lt-cloud.c2{right:9%;top:96px;transform:scale(.8)}.lt-cloud.c3{left:52%;bottom:150px;transform:scale(.7)}
.lt-hello-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.lt-card{background:var(--lt-card);border-radius:32px;padding:28px 28px 24px;box-sizing:border-box;
  box-shadow:0 10px 0 rgba(31,46,85,.08),0 18px 40px rgba(31,46,85,.12);color:var(--lt-ink)}
.lt-card h1,.lt-card h2{font:700 clamp(2rem,1.4rem + 2.4vw,3.25rem)/1.05 var(--lt-round);color:var(--lt-ink);margin:8px 0 0;letter-spacing:-.005em}
.lt-parent{margin:14px 0 0;font:400 18px/1.55 var(--lt-body);color:var(--lt-ink)}
.lt-btns{display:flex;flex-wrap:wrap;gap:16px 14px;margin-top:22px}
.lt-fine{margin:16px 0 0;font:400 15px/1.5 var(--lt-body);color:var(--lt-ink-2)}   /* 7.6:1 on white */
.lt-fine a{display:inline-block;padding:12px 0;margin:-12px 0 -12px 6px;color:var(--lt-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lt-fine a:focus-visible,.lt-band a:focus-visible,.lt-gate a:focus-visible{outline:3px solid var(--lt-ink);outline-offset:3px;border-radius:8px}
.lt-frame{margin:0;padding:8px;border-radius:30px;background:#fff;box-shadow:0 10px 0 rgba(31,46,85,.08),0 18px 40px rgba(31,46,85,.12)}
.lt-frame picture{display:block}
.lt-frame img{display:block;width:100%;height:auto;border-radius:22px}
/* Nan sits in front, at the left, outside the picture frame; her bubble points up at the friends in the picture */
.lt-nan-row{display:flex;align-items:flex-end;gap:12px;margin:14px 0 0 4px}
.lt-nan-spot{flex:none;width:132px}
.nan-bubble{position:relative;flex:0 1 auto;margin:0 0 18px;background:var(--lt-sun);border:3px solid var(--lt-ink);border-radius:28px;
  padding:14px 20px;font:700 1.375rem/1.25 var(--lt-round);color:var(--lt-ink)}   /* 12.28 */
.nan-bubble::after{content:"";position:absolute;left:30px;top:-17px;width:26px;height:26px;background:var(--lt-sun);
  border-left:3px solid var(--lt-ink);border-top:3px solid var(--lt-ink);transform:rotate(45deg) skew(8deg,8deg)}
@media (min-width:1024px){
  .lt-sky{padding:56px 0 150px}
  .lt-hello-grid{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:48px}
  .lt-nan-spot{width:150px}
}
@media (min-width:761px) and (max-width:1023px){.lt-hello-card{max-width:660px;margin:0 auto;width:100%}.lt-hello-art{max-width:720px;margin:0 auto;width:100%}}
@media (max-width:760px){
  .lt-wrap{padding:0 16px}
  .lt-sky{padding:20px 0 56px}
  .lt-hello-grid{gap:20px}
  .lt-card{padding:22px 20px 20px;border-radius:28px}
  .lt-parent{font-size:17px}
  .lt-btns{flex-direction:column;align-items:stretch;gap:14px}
  .lt-btn{width:100%;padding:0 20px}
  .lt-frame{padding:6px;border-radius:24px}.lt-frame img{border-radius:18px}
  .lt-nan-spot{width:104px}
  .nan-bubble{font-size:1.2rem;padding:12px 16px;margin-bottom:12px}
}

/* ---------- the surprise spots: a real button over a decorative garden picture (never story art, never text) ---------- */
.spot{position:relative;display:block;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;min-width:64px;min-height:64px;
  border-radius:24px;-webkit-tap-highlight-color:transparent}
.spot picture,.spot img{display:block;width:100%;height:auto}
.spot [hidden]{display:none!important}
.spot:focus-visible{outline:4px solid var(--lt-ink);outline-offset:4px}
.lt-pic-spot{width:100%;padding:6px;background:#fff;box-sizing:border-box;box-shadow:0 8px 0 rgba(31,46,85,.08),0 14px 30px rgba(31,46,85,.12)}
.lt-pic-spot img{border-radius:18px}
.lt-spot-wrap{margin:0 auto}
.lt-cap{margin:12px auto 0;max-width:30ch;text-align:center;font:700 1.25rem/1.3 var(--lt-round);color:var(--lt-ink)}
.lt-sun-wrap{max-width:340px;margin-top:32px}
/* three small glints, once, when the sunflower opens */
.glint{position:absolute;width:18px;height:18px;pointer-events:none;
  background:conic-gradient(from 45deg,#fff 0 25%,transparent 0 50%,#fff 0 75%,transparent 0);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 2px #E2A12F);opacity:0;transform:scale(.4)}
.glint.g1{left:34%;top:16%}.glint.g2{left:62%;top:12%}.glint.g3{left:56%;top:44%}
.spot.is-tapped .glint{animation:glint .6s ease-out 1}
.spot.is-tapped .glint.g2{animation-delay:.08s}.spot.is-tapped .glint.g3{animation-delay:.16s}
@keyframes glint{40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.spot.is-tapped .glint{animation:none;opacity:0}}
/* the frog's blank sign gets its letter here, in HTML (navy on cream 12.28), never baked into the art */
.lt-frog-spot{container-type:inline-size}
.lt-frog-spot .fb{display:block;position:relative}
.lt-sign-letter{position:absolute;left:50%;top:30.3%;width:10.5%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--lt-sun);box-shadow:0 0 0 2px rgba(31,46,85,.3);display:grid;place-items:center;
  font:600 clamp(24px,7cqw,84px)/1 var(--lt-body);color:var(--lt-ink)}

/* ---------- 2. the Sound Garden: the kept night strip on the grass band ---------- */
.lh-night.lt-grass{padding:56px 0 56px}
.lh-night .lt-h2{margin-top:6px}
.ln-card h3{display:flex;align-items:center;gap:8px;font:700 21px/1.15 var(--lt-round);color:var(--lt-ink)}
.ln-petal{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lt-butter)}
.ln-petal img{display:block;width:34px;height:34px}
.ln-petal.p2{background:var(--lt-grass-lt)}.ln-petal.p3{background:var(--lt-sky-low)}.ln-petal.p4{background:var(--lt-blossom)}
@media (max-width:960px){.ln-card h3{font-size:19px}}
@media (max-width:760px){
  .lh-night.lt-grass{padding:28px 0 32px}
  .lh-night .lt-h2{font-size:28px}
  .ln-card h3{font-size:17px;gap:6px}
  .ln-petal{width:30px;height:30px}.ln-petal img{width:26px;height:26px}
  .lt-sun-wrap{max-width:240px;margin-top:20px}
  .lt-cap{font-size:1.125rem;margin-top:8px}
}

/* ---------- 3. the Rainbow Path: seven rainbow pebbles; the opened example shows under the path ---------- */
.lh-skills.lt-lilac{padding:64px 0}
.lh-skills .lh-hint{margin:10px 0 0;font:600 15px/1.4 var(--lt-body);color:var(--lt-ink)}
.lp-path.stones{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 14px;max-width:1080px;margin:26px auto 0;padding:0}
.stone{width:132px;min-height:112px;margin:0;border:0;border-radius:50% 50% 46% 54% / 60% 60% 40% 40%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:10px;box-sizing:border-box;
  font:700 1.0625rem/1.15 var(--lt-round);color:var(--lt-ink);box-shadow:0 6px 0 rgba(31,46,85,.18);cursor:pointer;-webkit-tap-highlight-color:transparent}
.stone:nth-of-type(1){background:var(--btn-coral)}   /* 5.72 */
.stone:nth-of-type(2){background:#FFB347}            /* 7.46 */
.stone:nth-of-type(3){background:var(--btn-sun)}     /* 9.61 */
.stone:nth-of-type(4){background:var(--btn-leaf)}    /* 9.17 */
.stone:nth-of-type(5){background:var(--btn-sky)}     /* 8.18 */
.stone:nth-of-type(6){background:var(--btn-grape)}   /* 6.47 */
.stone:nth-of-type(7){background:var(--btn-berry)}   /* 6.92 */
.stone .lp-rock{display:block;font:800 1.75rem/1 var(--lt-round);color:var(--lt-ink)}
.stone .lp-name{display:block;font:inherit;color:var(--lt-ink);overflow-wrap:anywhere}
.stone[aria-expanded="true"]{box-shadow:0 2px 0 rgba(31,46,85,.25),0 0 0 4px var(--lt-ink);transform:translateY(4px)}
.stone:focus-visible{outline:4px solid var(--lt-ink);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.stone[aria-expanded="true"]{transform:none}}
.lp-ex{order:2;flex:0 0 100%;max-width:640px;box-sizing:border-box;margin:10px 0 0;padding:16px 20px;border-radius:24px;background:#fff;
  box-shadow:0 6px 0 rgba(31,46,85,.08);font:400 17px/1.5 var(--lt-body);color:var(--lt-ink);text-align:left}
.lp-ex b{display:block;font:700 1.25rem/1.25 var(--lt-round);margin-bottom:2px}
.lp-ex[hidden]{display:none}
.lt-path-end{text-align:center;margin:28px 0 0}
.lt-signpost{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:14px;background:var(--lt-wood);
  color:#fff;font:700 1.125rem/1.2 var(--lt-round);text-decoration:none;box-shadow:0 5px 0 #5C2E0E}   /* #FFF on wood 8.31 */
.lt-signpost::after{content:"";width:10px;height:10px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg);margin-left:2px}
.lt-signpost:hover{color:#fff;text-decoration:underline}
.lt-band .lt-signpost:focus-visible{outline:3px solid var(--lt-ink);outline-offset:3px}
.lh-skills .lh-print{text-align:center;margin:8px 0 0}
.lh-skills .lh-print a{display:inline-block;min-height:44px;padding-top:10px;font:600 16px/1.5 var(--lt-body);color:var(--lt-ink);text-underline-offset:3px}
/* the grown-up details behind a tap (white cards on the band) */
.lt-more{max-width:720px;margin:20px auto 0;background:#fff;border-radius:22px;box-shadow:0 6px 0 rgba(31,46,85,.08);color:var(--lt-ink);text-align:left}
.lt-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 20px;cursor:pointer;list-style:none;
  font:700 1.125rem/1.25 var(--lt-round);color:var(--lt-ink);border-radius:22px}
.lt-more summary::-webkit-details-marker{display:none}
.lt-more summary::after{content:"";flex:none;width:10px;height:10px;border-right:3px solid var(--lt-ink);border-bottom:3px solid var(--lt-ink);transform:rotate(45deg);margin:-4px 4px 0 0}
.lt-more[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.lt-more summary:focus-visible{outline:3px solid var(--lt-ink);outline-offset:2px}
.lt-more > :not(summary){margin-left:20px;margin-right:20px}
.lt-more > :last-child{margin-bottom:18px}
.lt-more p{font:400 16px/1.55 var(--lt-body);color:var(--lt-ink)}
.lt-more a{color:var(--lt-ink);font-weight:600;text-underline-offset:3px;display:inline-block;padding:11px 0;margin:-11px 0}
.lt-road{list-style:none;padding:0;margin:4px 20px 0;display:grid;gap:12px}
.lt-road li{font:400 16px/1.5 var(--lt-body);padding:12px 14px;border-radius:16px;background:var(--lt-lilac)}   /* ink 10.11 */
.lt-road b{display:block;font:700 1.125rem/1.2 var(--lt-round)}
.lt-road-when{display:block;font:600 14px/1.4 var(--lt-body);margin:2px 0 4px}
.lt-road-check{margin-top:14px}
@media (max-width:760px){
  .lh-skills.lt-lilac,.lt-band{padding:40px 0}
  .lp-path.stones{gap:12px 10px;margin-top:20px}
  .stone{width:104px;min-height:96px;font-size:1rem;padding:8px}
  .stone .lp-rock{font-size:1.5rem}
  .lp-ex{font-size:16px;padding:14px 16px}
}

/* ---------- 4. the Letter Pond ---------- */
.lt-pond-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px;align-items:center}
.lt-pond-grid .lt-spot-wrap{width:100%;max-width:640px}
.lt-pads{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:520px;width:100%;justify-self:center}
.lt-pad{display:flex;align-items:center;gap:16px}
.lt-pad-l{flex:none;display:grid;place-items:center;width:100px;height:100px;border-radius:50%;
  background:conic-gradient(from 20deg,var(--lt-pond) 0 18deg,#fff 18deg 360deg);
  box-shadow:0 0 0 6px #A8E6A1,0 8px 0 6px rgba(31,46,85,.10);font:600 64px/1 var(--lt-body);color:var(--lt-ink)}   /* 13.29 */
.lt-pad-ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff}
.lt-pad-ico svg{width:34px;height:34px;fill:none;stroke:var(--lt-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lt-pad-t{font:700 1.25rem/1.25 var(--lt-round);color:var(--lt-ink)}   /* 11.64 on the pond */
@media (min-width:1024px){.lt-pond-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px}.lt-pond-grid .lt-spot-wrap{max-width:none}}
@media (max-width:760px){.lt-pond-grid{gap:22px;margin-top:22px}.lt-pads{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:none}.lt-pad{flex-direction:column;gap:12px;text-align:center}.lt-pad-l{width:80px;height:80px;font-size:52px}.lt-pad-ico{display:none}.lt-pad-t{font-size:1rem;line-height:1.25}}

/* ---------- 5. the Story Tree ---------- */
.lt-tree-wrap{max-width:760px;margin-top:28px}
.lt-prompt-list{margin:4px 20px 0 40px;padding:0;display:grid;gap:10px;font:400 16px/1.5 var(--lt-body)}
.lt-prompt-list b{font:700 1.0625rem/1.3 var(--lt-round);margin-right:4px}
.lt-more-note{margin-top:12px!important;color:var(--lt-ink-2)!important;font-size:15px!important}
.lt-peek-night{text-align:center;margin:28px 0 0}
@media (max-width:760px){.lt-peek-night .lt-btn{width:100%;max-width:360px}}

/* ---------- 7. the video: a 16:9 player with a 6px white mat, the play button bottom-left (64px sun disc) ---------- */
.lit-vid .lt-head{margin-bottom:0}
.lit-vid-card{position:relative;max-width:720px;margin:24px auto 0;padding:6px;border-radius:24px;background:#fff;box-shadow:0 10px 0 rgba(31,46,85,.08),0 18px 40px rgba(31,46,85,.12);box-sizing:border-box}
.lit-vid-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--lt-ink)}
.lit-vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lit-vid-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.lit-vid-poster img{display:block;width:100%;height:100%;object-fit:contain}   /* the poster is 16:9 in a 16:9 frame: whole */
.lit-vid-btn{position:absolute;left:20px;bottom:20px;width:64px;height:64px;border-radius:50%;background:var(--btn-sun);display:grid;place-items:center;box-shadow:0 4px 0 rgba(31,46,85,.35)}
.lit-vid-btn svg{width:28px;height:28px;fill:var(--lt-ink);margin-left:4px}
.lit-vid-poster:focus-visible{outline:4px solid var(--lt-ink);outline-offset:4px;border-radius:18px}
.lit-vid-len{margin:12px 0 0;text-align:center;font:400 15px/1.45 var(--lt-body);color:var(--lt-ink-2)}
.lit-vid-cta{margin:8px 0 0;text-align:center}
.lit-vid-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--lt-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* ---------- 8. the Grown-up Gate: white, a little gate drawn at the top, three cards ---------- */
.lt-gate{background:#fff;padding:64px 0 72px;color:var(--lt-ink)}
.lt-gate-art{display:block;width:150px;height:60px;margin:0 auto 6px}
.lt-gate-art .post{fill:none;stroke:var(--lt-wood);stroke-width:5;stroke-linecap:round}
.lt-gate-art .rail{fill:none;stroke:#C98B5A;stroke-width:4;stroke-linecap:round}
.lt-gate-art .flower{fill:var(--r1)}.lt-gate-art .f2{fill:var(--r3)}.lt-gate-art .f3{fill:var(--btn-berry)}
.lt-gate-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px;align-items:start}
.lt-gate-card{border:2px solid #E6EEF8}
.lt-gate-card h3{margin:0;font:700 1.625rem/1.15 var(--lt-round);color:var(--lt-ink)}
.lt-science .lt-big{margin:10px 0 0;font:700 1.25rem/1.35 var(--lt-round);color:var(--lt-ink)}
.lt-gate-card .lt-more{margin:16px 0 0;box-shadow:none;border:2px solid #E6EEF8}
.lt-gate .advisor{margin-top:12px}
.lt-gate .new{font-size:15px}
.lt-gate-price .pricecard{border-radius:32px;margin:0}
.lt-gate-price .pricecard .kicker{font:700 1.625rem/1.15 var(--lt-round);color:var(--lt-ink);text-transform:none;letter-spacing:0}
.lt-questions .anp-home-faq{margin-top:12px}
@media (min-width:700px) and (max-width:1099px){.lt-gate-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lt-questions{grid-column:1/-1}}
@media (min-width:1100px){.lt-gate-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:760px){.lt-gate{padding:40px 0 48px}.lt-gate-grid{margin-top:24px;gap:18px}.lt-gate-price .pricecard{padding:40px 20px 24px}}

/* ---------- 9. Goodnight: a bright dusk band (#FFF on #5B2A86 9.90, on #3B2A86 12.4), static stars and moon ---------- */
.lt-goodnight{position:relative;overflow:hidden;background:linear-gradient(180deg,#5B2A86 0%,#3B2A86 100%);color:#fff;text-align:center;padding:64px 0 72px}
.lt-stars{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 6% 12%,#fff 50%,transparent 52%),radial-gradient(2px 2px at 12% 38%,#fff 50%,transparent 52%),
    radial-gradient(3px 3px at 4% 64%,#FFF1C9 50%,transparent 52%),radial-gradient(2px 2px at 9% 86%,#fff 50%,transparent 52%),
    radial-gradient(2px 2px at 94% 18%,#fff 50%,transparent 52%),radial-gradient(3px 3px at 90% 46%,#FFF1C9 50%,transparent 52%),
    radial-gradient(2px 2px at 96% 72%,#fff 50%,transparent 52%),radial-gradient(2px 2px at 88% 90%,#fff 50%,transparent 52%)}
.lt-moon{position:absolute;top:26px;right:6%;width:48px;height:48px;border-radius:50%;box-shadow:-12px 8px 0 0 #FFE9A8;pointer-events:none}
.lt-frame-night{max-width:640px;margin:0 auto}
.lt-goodnight h2{margin:28px auto 0;max-width:20ch;font:700 clamp(1.875rem,1.3rem + 2.2vw,2.75rem)/1.1 var(--lt-round);color:#fff}
.lt-ask{max-width:460px;margin:24px auto 0;padding:22px 24px 20px;border-radius:28px;background:#FFF6E6;color:var(--lt-ink);box-sizing:border-box}
.lt-ask-q{margin:0 0 14px;font:700 1.25rem/1.3 var(--lt-round);color:var(--lt-ink)}   /* 12.6 on cream */
.lt-ask-fine{margin:12px 0 0;font:400 15px/1.45 var(--lt-body);color:#5E5A54}   /* 6.4 on cream */
@media (max-width:760px){.lt-goodnight{padding:40px 0 48px}.lt-goodnight h2{margin-top:20px}.lt-moon{width:36px;height:36px;top:16px}.lt-ask .lt-btn{width:100%}}

/* Littles open door (Oct 17, Joel and Julie): the free book's one gentle ask, after the last page. Gold button with navy
   text; the "7 days free. No card." line #5E5A54 on the cream end card (6.4:1). */
.lit-ask-q{margin:0;font:700 1.25rem/1.3 var(--lt-round);color:var(--lt-ink)}
.lit-ask-q[hidden]{display:none}
.lit-peek.sp-panel .lit-end .lit-ask .sp-end-fine{color:#5E5A54}
/* the price card's "What it compares to, and paying with state funds" (js/anp-littles-page.js priceTap) */
.lt-gate .lt-price-more{margin:18px 0 0;box-shadow:none;border:2px solid #E6EEF8;max-width:none}
.lt-gate .lt-price-more summary{font-size:1rem;min-height:52px;padding:0 16px}
.lt-gate .lt-price-more > :not(summary){margin-left:16px;margin-right:16px;text-align:left}
/* Oct 24: seven parts in two columns on a phone: the last card (Story Time!) takes the whole row */
@media (max-width:760px){.ln-strip>.ln-card:last-child:nth-child(odd){grid-column:1/-1}}