/* Landing page (docs/ui/lp.md). The layout is plan A of docs/ui/lp-redesign (the picture leads; the demo comes right after). */
@font-face { font-family: "LP Fredoka"; font-weight: 500; font-display: swap; src: url("/fonts/Fredoka-Medium.woff2") format("woff2"); }
@font-face { font-family: "LP Fredoka"; font-weight: 700; font-display: swap; src: url("/fonts/Fredoka-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "LP M PLUS"; font-weight: 500; font-display: swap; src: url("/fonts/MPlusRounded-Medium.woff2") format("woff2"); }
@font-face { font-family: "LP M PLUS"; font-weight: 800; font-display: swap; src: url("/fonts/MPlusRounded-ExtraBold.woff2") format("woff2"); }
/* Korean, Chinese and Thai: the app's faces for those languages (docs/ui/typography.md). Jua and ZCOOL KuaiLe have one weight, so it covers every weight (no faux bold). */
@font-face { font-family: "LP Jua"; font-weight: 100 900; font-display: swap; src: url("/fonts/Jua.woff2") format("woff2"); }
@font-face { font-family: "LP ZCOOL"; font-weight: 100 900; font-display: swap; src: url("/fonts/ZCOOLKuaiLe.woff2") format("woff2"); }
@font-face { font-family: "LP Mali"; font-weight: 500; font-display: swap; src: url("/fonts/Mali-Medium.woff2") format("woff2"); }
@font-face { font-family: "LP Mali"; font-weight: 800; font-display: swap; src: url("/fonts/Mali-SemiBold.woff2") format("woff2"); }

:root {
  /* colours: the bands alternate cream / white / mint / sky, the way picture-book pages change colour */
  --ink: #3b2f2f; --soft: #6b5b52; --bg: #fff4d2; --white: #fffdf8; --mint: #e6f4ea; --sky: #e5f1fb;
  --accent: #ffc93c; --accent-strong: #8a5200; --marker: #ffe08a; --marker-soft: #fff0c2;
  --turn: #b8ebc8; --turn-text: #1b6e34; --shadow: rgba(59, 47, 47, .18); --line: rgba(59, 47, 47, .12);
  --font-body: "LP M PLUS", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-en: "LP Fredoka", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  /* three radii only (docs/ui/lp.md) */
  --r-s: 12px; --r-m: 18px; --r-pill: 999px;
  --maxw: 1080px;
  /* spacing scale; every gap and margin below is one of these, by role */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --section-y: var(--s8); --head-gap: var(--s7); --card-pad: var(--s5);
  --fs-body: 17px; --fs-lead: 18px; --fs-small: 15px; --fs-label: 14px;
}
/* Malay and Indonesian are written in Latin letters, so they look like the English page */
body.lang-en, body.lang-ms, body.lang-id { --font-body: "LP Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif; }
body.lang-ko { --font-body: "LP Jua", "LP M PLUS", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; }
body.lang-zh-Hans { --font-body: "LP ZCOOL", "LP M PLUS", "PingFang SC", "Noto Sans SC", system-ui, sans-serif; }
body.lang-th { --font-body: "LP Mali", "LP M PLUS", "Thonburi", "Noto Sans Thai", system-ui, sans-serif; }
/* the language switcher names each language in its own letters */
.langs a[lang="ja"] { font-family: "LP M PLUS", sans-serif; }
.langs a[lang="en"], .langs a[lang="ms"], .langs a[lang="id"] { font-family: "LP Fredoka", sans-serif; }
.langs a[lang="ko"] { font-family: "LP Jua", sans-serif; }
.langs a[lang="zh-Hans"] { font-family: "LP ZCOOL", sans-serif; }
.langs a[lang="th"] { font-family: "LP Mali", sans-serif; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 var(--fs-body)/1.8 var(--font-body); letter-spacing: .01em; -webkit-text-size-adjust: 100%; }
body.lang-en, body.lang-ms, body.lang-id, body.lang-th { letter-spacing: 0; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-body); font-weight: 800; line-height: 1.35; margin: 0; text-wrap: balance; }
body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-ms h1, body.lang-ms h2, body.lang-ms h3, body.lang-id h1, body.lang-id h2, body.lang-id h3 { font-weight: 700; }
p { margin: 0; }
a { color: var(--accent-strong); }
:lang(ja) p, :lang(ja) li, :lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) blockquote { word-break: auto-phrase; }
/* Korean breaks only between words (the app does the same, docs/ui/typography.md) */
:lang(ko) p, :lang(ko) li, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) blockquote { word-break: keep-all; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
/* a text with a phone version (`<key>.sp`): the long one on a tablet or PC, the short one on a phone */
.narrow { display: none; }
@media (max-width: 760px) { .wide { display: none; } .narrow { display: inline; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--white); border: 3px solid var(--ink); border-radius: var(--r-s); padding: 8px 14px; z-index: 10; }
.skip:focus { top: 8px; }

.wrap, .top, .hero, .foot { width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
.band { padding-block: var(--section-y); }
.band.white { background: var(--white); } .band.mint { background: var(--mint); } .band.sky { background: var(--sky); }

/* header */
.top { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s3); margin-right: auto; font: 700 22px/1 var(--font-en); color: var(--ink); text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.toc, .langs { display: flex; gap: var(--s1); }
.toc a, .langs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font: 800 var(--fs-label)/1 var(--font-body); }
.toc a:hover, .langs a:hover { background: var(--white); }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font: 800 var(--fs-label)/1 var(--font-body); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 0; height: 0; border: 5px solid transparent; border-top-color: currentColor; margin-top: 5px; }
.lang-menu[open] summary::after { border-top-color: transparent; border-bottom-color: currentColor; margin-top: -5px; }
.lang-menu summary svg { width: 18px; height: 18px; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--white); border-radius: var(--r-m); box-shadow: 0 8px 24px var(--shadow); }
.lang-menu li a { display: flex; width: 100%; border-radius: var(--r-s); }
.langs .lang-menu li a:hover { background: var(--bg); }
.langs a[aria-current="page"] { background: var(--marker-soft); }

/* section head: label (typewriter) -> heading (marker) -> lead, centred */
.sec-head { text-align: center; display: grid; gap: var(--s3); margin-bottom: var(--head-gap); }
.sec-label { font: 800 var(--fs-label)/1 var(--font-body); color: var(--accent-strong); letter-spacing: .08em; }
.sec-head h2 { font-size: clamp(26px, 4vw, 38px); }
.section-lead { max-width: 40em; margin-inline: auto; font-size: var(--fs-lead); color: var(--soft); text-wrap: balance; }
mark { background: linear-gradient(transparent 60%, var(--marker) 60%) no-repeat 0 0 / 100% 100%; color: inherit; padding: 0 2px; }

/* gentle motion: the marker is drawn, the label types itself, blocks fade in. None of it with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease-out, transform .7s ease-out; }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js h1 mark, html.js .reveal mark { background-size: 0% 100%; transition: background-size 1s .35s ease-out; }
  html.js h1.in mark, html.js .reveal.in mark { background-size: 100% 100%; }
  html.js .tw { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; transition: max-width 1.2s steps(16); }
  html.js .reveal.in .tw { max-width: 20em; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 56px; padding: 0 28px; border: 3px solid var(--ink); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font: 800 18px/1 var(--font-body); text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 rgba(59, 47, 47, .25); }
body.lang-en .btn, body.lang-ms .btn, body.lang-id .btn { font-weight: 700; }
.btn.primary { background: var(--accent); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(59, 47, 47, .25); }
.tri { width: 0; height: 0; border-left: 14px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.soon-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font: 700 var(--fs-label)/1.5 var(--font-body); color: var(--soft); }
.soon-line b { padding: 4px 10px; border-radius: var(--r-pill); background: var(--white); color: var(--accent-strong); }
.store-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.store-list img { height: 48px; width: auto; max-width: none; }
.store-list img.googlePlay { height: 60px; margin: -6px; }
.store { display: inline-flex; align-items: center; min-height: 48px; }
.store-name { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 3px solid var(--ink); border-radius: var(--r-s); background: var(--white); font: 800 16px/1 var(--font-body); }
.store.off { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.store.off > img, .store.off > .store-name { opacity: .45; filter: grayscale(1); }
.soon { font-size: 13px; font-weight: 800; color: var(--accent-strong); }

/* hero: the copy beside the picture (the picture on top on a phone) */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: center; padding-block: var(--s6) var(--s8); }
.hero-copy { display: grid; gap: var(--s5); justify-items: start; }
.who { font: 800 15px/1.4 var(--font-body); color: var(--accent-strong); }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); }
.hero .lead { font-size: var(--fs-lead); color: var(--soft); }
.hero-art { position: relative; border-radius: var(--r-m); overflow: hidden; box-shadow: 0 6px 0 var(--shadow); }
/* Over the picture, shown only once it is actually playing (lp.js); it ends on the same picture. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.hero-video.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
/* On a phone the tall video is cut like the tall picture */
@media (max-width: 760px) { .hero-video { object-position: center 75%; } }
.hero-art img { width: 100%; aspect-ratio: 1672 / 941; object-fit: cover; object-position: right center; }

/* demo: one player card (picture, story, text, controls) */
.player-wrap { display: grid; gap: var(--s3); }
.player { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: var(--white); border-radius: var(--r-m); box-shadow: 0 6px 0 var(--shadow), 0 0 0 2px var(--line); overflow: hidden; }
.player-pic { position: relative; }
.player-pic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg); }
.player-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); height: 0; min-height: 100%; }
/* The picture sets the card's height (its own 4:3, never cropped); the text fits in what is left and scrolls,
   following the chunk or word being read. A thin scrollbar, and soft fades top and bottom. */
.player-text { flex: 1 1 0; min-height: 0; overflow-y: auto; display: grid; gap: var(--s2); align-content: start; padding-block: var(--s2); scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
/* the fade only when the text scrolls (lp.js sets .scrolls) */
.player-text.scrolls { -webkit-mask-image: linear-gradient(transparent, #000 1em, #000 calc(100% - 1em), transparent); mask-image: linear-gradient(transparent, #000 1em, #000 calc(100% - 1em), transparent); }
.player-body .controls { margin-top: auto; }
.demo-pick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pick { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 4px 14px 4px 4px; border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font: 700 14px/1.2 var(--font-en); text-align: left; cursor: pointer; }
.pick[aria-pressed="true"] { background: var(--accent); }
.pick img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pick .pick-name { display: flex; flex-direction: column; gap: 2px; }
.pick small { color: var(--soft); font: 700 12px/1.2 var(--font-body); }
.pick[aria-pressed="true"] small { color: var(--ink); }
.demo-en { font: 700 clamp(20px, 2.2vw, 24px)/1.8 var(--font-en); }
/* linking (‿) and sound hints, as in the app */
.demo-en .lg { white-space: nowrap; }
.demo-en .lk { font-family: "LP M PLUS", sans-serif; color: var(--accent-strong); }
.demo-en .hw { position: relative; display: inline-block; line-height: 1.2; }
.demo-en .hint { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; font: 700 .5em/1 var(--font-en); color: var(--accent-strong); }
.demo-en .chunk { padding: 0 2px; margin: 0 -2px; border-radius: 6px; transition: background .15s; }
.demo-en .chunk.on { background: var(--marker); }
.demo-en .chunk.pre { background: var(--marker-soft); }
.demo-en .chunk.said { color: var(--soft); }
/* "Just listen": the word being read (#455). A colour change only, so it shows with reduced motion too. */
.demo-en .w { border-radius: 6px; transition: background .1s, color .1s; }
.demo-en .w.w-on { background: var(--marker); }
.demo-en .w.w-said { color: var(--soft); }
.demo-tr { color: var(--soft); font-size: var(--fs-small); line-height: 1.7; min-height: 1.7em; word-break: keep-all; overflow-wrap: anywhere; }
/* the translations are written with spaces between words (for young readers), so lines break only there */
.player-pic .turn { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); box-shadow: 0 2px 8px rgba(59, 47, 47, .2); }
.turn { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--turn); color: var(--turn-text); font-weight: 800; visibility: hidden; }
.turn.show { visibility: visible; }
.turn-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--white); overflow: hidden; }
.turn-bar > span { display: block; height: 100%; width: 100%; background: var(--turn-text); transform-origin: left; }
.controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--bg); }
.seg-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; font: 800 var(--fs-label)/1 var(--font-body); color: var(--ink); cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.transport { display: flex; align-items: center; gap: var(--s3); }
.round { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; }
.round svg { width: 20px; height: 20px; }
.round.big { width: 72px; height: 72px; border: 3px solid var(--ink); background: var(--accent); box-shadow: 0 4px 0 rgba(59, 47, 47, .25); }
.round.big svg { width: 32px; height: 32px; }
.round:active { transform: translateY(2px); }
.round[disabled] { opacity: .35; cursor: default; }
.round .i-stop { display: none; }
.round[aria-pressed="true"] .i-stop { display: block; }
.round[aria-pressed="true"] .i-play { display: none; }
.voice { display: flex; align-items: center; gap: var(--s1); }
.voice-name { margin-right: 2px; color: var(--soft); font: 800 13px/1 var(--font-body); }
.voice-btn { position: relative; width: 44px; height: 44px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.voice-btn img { width: 100%; height: 100%; border-radius: 50%; opacity: .5; }
.voice-btn[aria-pressed="true"] { border-color: var(--accent); }
.voice-btn[aria-pressed="true"] img { opacity: 1; }
/* Above the face, so the card's bottom edge never cuts it off */
.voice-btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 3; padding: 7px 12px; border-radius: var(--r-s); background: var(--ink); color: var(--white); font: 700 13px/1.2 var(--font-body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.voice-btn:hover::after, .voice-btn:focus-visible::after { opacity: 1; }
@media (hover: none) { .voice-btn[data-tip]::after { display: none; } }
.sub-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.sub-row .page-count { margin-left: auto; }
@media (min-width: 761px) and (hover: hover) { .sub-row .voice-name { display: none; } }
.tabs { display: flex; gap: var(--s1); }
.tab { min-height: 44px; padding: 0 var(--s2); border: 0; background: transparent; color: var(--soft); font: 700 13px/1 var(--font-body); cursor: pointer; text-decoration: none; }
.tab[aria-pressed="true"] { color: var(--ink); text-decoration: underline 3px var(--accent); text-underline-offset: 6px; }
.page-count { color: var(--soft); font-size: 13px; }
.demo-error { padding: 8px 12px; border-radius: var(--r-s); background: #ffe3dc; color: #8a2a1b; font: 700 14px/1.5 var(--font-body); text-align: center; }
.note { color: var(--soft); text-align: center; }

/* word cards in the demo (#476), like the app's WordCard */
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.wordbook-count { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; padding: 6px 14px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--white); font: 800 var(--fs-label)/1 var(--font-body); }
.wordbook-count b { min-width: 1.6em; padding: 3px 6px; border-radius: var(--r-pill); background: var(--accent); text-align: center; }
.wordbook-count .wb-ic { width: 14px; height: 18px; border: 2px solid var(--ink); border-radius: 3px; background: linear-gradient(90deg, var(--ink) 3px, transparent 3px); }
.wordbook-count.bump { animation: bump .5s ease-out; }
@keyframes bump { 40% { transform: scale(1.18); } }
.demo-en .card-word { cursor: pointer; text-decoration: underline dotted var(--soft); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.demo-en .card-word:hover, .demo-en .card-word:focus-visible { background: var(--marker-soft); border-radius: 6px; }
.wordcard-wrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--s4); }
.wordcard-wrap[hidden] { display: none; }
/* the page behind is dimmed and blurred, so no half-covered line reads as broken text */
.wordcard-scrim { position: absolute; inset: 0; background: rgba(59, 47, 47, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wordcard { position: relative; width: min(100%, 460px); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s5); border: 3px solid var(--ink); border-radius: var(--r-m); background: var(--white); box-shadow: 0 4px 0 rgba(59, 47, 47, .25); animation: pop .22s ease-out; }
@keyframes pop { from { transform: translateY(12px) scale(.96); opacity: 0; } }
.wordcard-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font: 700 28px/1 var(--font-en); color: var(--soft); cursor: pointer; }
.wordcard-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding-right: 36px; }
.wordcard-pic { display: grid; place-items: center; width: 84px; height: 84px; border: 3px solid var(--ink); border-radius: 50%; background: var(--marker); }
.wordcard-pic[hidden] { display: none; }
.wordcard-pic img { width: 52px; height: 52px; }
.wordcard-head > div { min-width: 0; }
/* a long word gets smaller to fit (lp.js), and never pushes the card wider */
.wordcard-word { margin: 0; font: 700 40px/1.1 var(--font-en); overflow-wrap: anywhere; }
.wordcard-tr { margin: 0; font-size: 20px; color: var(--soft); }
.wordcard-sound { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--ink); border-radius: 50%; background: var(--marker-soft); color: var(--accent-strong); cursor: pointer; }
.wordcard-sound[hidden] { display: none; }
.wordcard-sound svg { width: 26px; height: 26px; }
.wordcard-sentence { margin: 0; overflow-wrap: anywhere; padding: var(--s3); border: 2px solid var(--line); border-radius: var(--r-s); font: 500 18px/1.5 var(--font-en); }
.wordcard-sentence mark { background: none; padding: 0; color: var(--accent-strong); text-decoration: underline; font-weight: 700; }
.wordcard-add { justify-self: center; }
.wordcard-add.done { background: var(--turn); }
@media (max-width: 760px) { .wordcard-wrap { place-items: end center; padding: 0; } .wordcard { width: 100%; border-bottom: 0; border-radius: var(--r-m) var(--r-m) 0 0; } .wordcard-head { grid-template-columns: auto minmax(0, 1fr); } .wordcard-sound { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .wordcard, .wordbook-count.bump { animation: none; } }

/* the demo's end screen (#478), like the app's StoryEnd */
.player { position: relative; }
.storyend { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--s4); background: rgba(59, 47, 47, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; }
.storyend[hidden] { display: none; }
.storyend-card { position: relative; max-height: calc(100vh - 32px); overflow-y: auto; width: min(100%, 520px); display: grid; justify-items: center; gap: var(--s4); padding: var(--s6) var(--s5); border: 3px solid var(--ink); border-radius: var(--r-m); background: var(--white); box-shadow: 0 4px 0 rgba(59, 47, 47, .25); animation: pop .3s ease-out; }
.storyend-medal { display: grid; place-items: center; width: 132px; height: 132px; border: 3px solid var(--ink); border-radius: 50%; background: #fff4c2; box-shadow: inset 0 0 0 8px #f2c94c; }
.storyend-medal[hidden] { display: none; }
.storyend-medal img { width: 76px; height: 76px; }
.storyend-title { margin: 0; font: 800 26px/1.3 var(--font-body); text-align: center; }
.storyend-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.end-btn { position: relative; display: grid; justify-items: center; gap: var(--s2); min-height: 76px; padding: var(--s2); border: 3px solid var(--ink); border-radius: var(--r-m); background: var(--white); color: var(--ink); font: 800 16px/1.2 var(--font-body); cursor: pointer; box-shadow: 0 3px 0 rgba(59, 47, 47, .25); }
.end-btn[aria-disabled="true"] { cursor: help; background: var(--bg); border-style: dashed; color: var(--soft); box-shadow: none; }
.end-ic { width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-review { --m: url("/assets/lp/icons/review.svg"); }
.ic-words { --m: url("/assets/lp/icons/words.svg"); }
.ic-again { --m: url("/assets/lp/icons/again.svg"); }
.ic-other { --m: url("/assets/lp/icons/other.svg"); }
.end-tip { position: absolute; left: -3px; bottom: calc(100% + 8px); width: max-content; max-width: min(300px, calc(100vw - 64px)); padding: 8px 12px; border-radius: var(--r-s); background: var(--ink); color: var(--white); font: 700 13px/1.5 var(--font-body); text-align: left; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 2; }
.end-btn:hover .end-tip, .end-btn:focus-visible .end-tip, .end-tip.show { opacity: 1; }
.end-app { margin: 0; }
.end-words { width: 100%; display: grid; gap: var(--s2); padding: var(--s3); border: 2px solid var(--line); border-radius: var(--r-s); }
.end-words[hidden] { display: none; }
.end-words-title { margin: 0; font: 800 var(--fs-label)/1.4 var(--font-body); }
.end-words ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.end-words li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--white); font: 700 16px/1.2 var(--font-en); }
.end-words li small { font: 700 12px/1.2 var(--font-body); color: var(--soft); }
.end-words-empty { margin: 0; color: var(--soft); font-size: var(--fs-small); }
.end-words-empty[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .storyend-card { animation: none; } .end-tip { transition: none; } }

/* how it works: three steps without frames, then linking */
/* the three steps: one card each, the same size, with an arrow between them (1 → 2 → 3) */
.steps { list-style: none; padding: 0; margin: 0 auto; max-width: 920px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.steps li { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: var(--s2); justify-items: center; text-align: center; padding: var(--s5) var(--s4); border-radius: var(--r-m); background: var(--white); }
.steps li + li::before { content: ""; position: absolute; left: calc(var(--s5) / -2 - 7px); top: calc(var(--s5) + 86px - 9px); border: 9px solid transparent; border-left: 14px solid var(--accent); border-right: 0; }
/* the same crop for all three (the union of where the children are), so they keep one scale without the empty margins */
.steps img { width: 200px; aspect-ratio: 1212 / 1038; object-fit: cover; object-position: 76% 68.5%; margin-bottom: var(--s1); }
.steps h3 { font-size: 20px; }
.steps p { color: var(--soft); font-size: var(--fs-small); }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; border-radius: 50%; background: var(--accent); font: 700 15px/1 var(--font-en); vertical-align: 2px; }
.linkrow { margin-top: var(--s7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.linkrow > div { display: grid; gap: var(--s3); }
.linkrow-pic { border-radius: var(--r-m); overflow: hidden; }
.linkrow-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sub-label { font: 800 var(--fs-label)/1.4 var(--font-body); color: var(--accent-strong); letter-spacing: .08em; }
.big-ex { font: 700 min(7vw, 40px)/1.3 var(--font-en); white-space: nowrap; }
.big-ex .link, .link-list .link, .hint-list .link { font-family: "LP M PLUS", sans-serif; color: var(--accent-strong); }
.big-ex .kana { color: var(--accent-strong); font-family: var(--font-body); }
.link-list { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.link-list li { display: flex; }
.link-list button { width: 100%; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: var(--s2) var(--s4); border: 2px solid var(--line); border-radius: var(--r-m); background: var(--white); font: 700 20px/1.2 var(--font-en); color: var(--ink); cursor: pointer; }
.link-list button[aria-pressed="true"] { background: var(--accent); border-color: var(--ink); }
.link-list .ex-kana { font: 800 13px/1.2 var(--font-body); color: var(--accent-strong); }

/* sound hints (hidden until config pronunciationHints) */
/* the sound hints: the linking row's build, mirrored (picture on the right on a PC) */
.linkrow.mirror .linkrow-pic { order: 2; }
.hints .note { text-align: left; font-size: var(--fs-small); }
.hint-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); text-align: center; }
.hint-list li { display: grid; gap: 2px; padding: var(--s3); border-radius: var(--r-m); background: var(--white); border: 2px solid var(--line); font: 700 20px/1.2 var(--font-en); }
/* with the demo's data each example is a button that plays its sound (the same look as the linking chips) */
.hint-list li:has(> button) { padding: 0; border: 0; background: none; }
.hint-list button { display: grid; gap: 2px; width: 100%; min-height: 64px; padding: var(--s3); border: 2px solid var(--line); border-radius: var(--r-m); background: var(--white); font: inherit; color: var(--ink); cursor: pointer; }
.hint-list button[aria-pressed="true"] { background: var(--accent); border-color: var(--ink); }
.hint-list small { font: 700 14px/1.2 var(--font-en); color: var(--accent-strong); }


/* bookshelf: two rows that scroll sideways (scroll-snap); the arrows on a PC */
.rack + .rack { margin-top: var(--s6); }
.rack-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-bottom: var(--s3); }
.rack-title h3 { font-size: 20px; }
.rack-title p { color: var(--soft); font-size: var(--fs-label); }
.rack-view { position: relative; }
.shelf .books { list-style: none; margin: 0; padding: 0 0 var(--s2); display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.shelf .books::-webkit-scrollbar { display: none; }
.shelf .books li { flex: 0 0 calc((100% - 4 * var(--s4)) / 4.4); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s2); }
.books .frame { border-radius: var(--r-s); overflow: hidden; }
.books .frame img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.books span { font: 700 var(--fs-label)/1.3 var(--font-en); }
/* a book announced before its release (SHELVES `upcoming`): the label goes when it is released */
.books .frame { position: relative; }
.books .soon-badge { position: absolute; left: 8px; top: 8px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); font: 800 12px/1.4 var(--font-body); }
/* where a folk tale is told (#560): flags in the cover's bottom-left corner, each slightly over the next, as in the app */
.books .flags { position: absolute; left: 8px; bottom: 8px; display: flex; }
.books .flags img { width: 28px; height: 22px; aspect-ratio: auto; object-fit: cover; border: 2px solid var(--white); border-radius: 5px; background: var(--white); box-shadow: 0 1px 3px rgba(59, 47, 47, .5); }
.books .flags img + img { margin-left: -6px; }
.books small { margin-top: calc(-1 * var(--s1)); color: var(--soft); font: 700 12px/1.3 var(--font-body); }
.rack-btn { position: absolute; top: calc(50% - 44px); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--shadow); }
.rack-btn svg { width: 22px; height: 22px; }
.rack-btn.prev { left: -20px; } .rack-btn.next { right: -20px; }
.rack-btn[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none) { .rack-btn { display: none; } }
.note.some { margin-top: var(--s5); font-size: var(--fs-small); }

/* keeps kids going: three groups with pictures */
.groups { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.group { display: grid; gap: var(--s3); align-content: start; padding: var(--card-pad); border-radius: var(--r-m); background: var(--white); }
.group-art { border-radius: var(--r-s); overflow: hidden; }
.group-art img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.group h3 { font-size: 20px; }
.group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-small); line-height: 1.7; }
.group li { position: relative; padding-left: 16px; }
.group > ul > li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* art styles: four covers staggered and overlapping, in a box as tall as the other cards' pictures (aspect 5:2) */
.styles { position: relative; list-style: none; margin: 0; padding: 0; aspect-ratio: 5 / 2; border-radius: var(--r-s); background: var(--bg); overflow: hidden; }
.group .styles li { position: absolute; width: 34%; padding: 0; top: 8%; }
.group .styles li:nth-child(2), .group .styles li:nth-child(4) { top: 34%; }
.group .styles li:nth-child(1) { left: 3%; } .group .styles li:nth-child(2) { left: 24%; } .group .styles li:nth-child(3) { left: 44%; } .group .styles li:nth-child(4) { left: 63%; }
.group .styles li::before { content: none; }
.styles img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 3px solid var(--white); box-shadow: 0 3px 8px rgba(59, 47, 47, .25); }
.styles span { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(255, 253, 248, .92); color: var(--ink); font: 800 11px/1.4 var(--font-body); }

/* for parents: two columns of short, iconed facts */
.trust { list-style: none; padding: 0; margin: 0 auto; max-width: 880px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s6); }
.trust li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: start; }
.trust .ic { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); }
.trust .ic::after { content: ""; position: absolute; left: 14px; top: 13px; width: 14px; height: 8px; border-left: 4px solid var(--turn-text); border-bottom: 4px solid var(--turn-text); transform: rotate(-45deg); }
.trust b { display: block; font-size: 16px; line-height: 1.5; }
.trust span { color: var(--soft); font-size: var(--fs-label); line-height: 1.7; }

/* why we made it: a short quote */
.quote { display: grid; grid-template-columns: 240px 1fr; gap: var(--s6); align-items: center; max-width: 880px; }
.quote > div { display: grid; gap: var(--s3); }
.quote-pic { border-radius: var(--r-m); overflow: hidden; }
.quote-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.quote blockquote { margin: 0; font-size: 20px; line-height: 1.9; }
.quote a { font-weight: 800; }

/* the closing call */
.final { text-align: center; display: grid; gap: var(--s5); justify-items: center; }
.final img { width: 96px; height: 96px; border-radius: 22px; }
.final h2 { font-size: clamp(26px, 4vw, 38px); }
.final .soon-line { justify-content: center; }

.foot { padding-block: var(--s6) var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; color: var(--soft); font-size: var(--fs-small); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.foot a { color: var(--ink); }

/* tablet: the copy stacks over the wide picture; the player stacks */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .player { grid-template-columns: 1fr; }
  .player-body { height: auto; min-height: 0; }
  .player-text { flex: none; height: 11.5em; }
  .groups { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .toc { display: none; }
  /* the linking block stacks too: "pick‿it‿up → …" stays on one line and needs the width */
  .linkrow { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .linkrow.mirror .linkrow-pic { order: 0; }
}
/* phone */
@media (max-width: 760px) {
  :root { --section-y: var(--s7); --head-gap: var(--s6); --card-pad: var(--s4); --fs-body: 16px; }
  .hero-art img { object-position: center 75%; }
  .steps, .groups, .trust, .linkrow, .quote { grid-template-columns: 1fr; }
  .steps { gap: var(--s3); max-width: 560px; }
  .steps li { padding: var(--s3) var(--s4); }
  .steps li { grid-template-columns: 96px 1fr; grid-template-rows: 1fr auto auto 1fr; justify-items: start; text-align: left; align-items: center; column-gap: var(--s3); row-gap: var(--s1); }
  .steps li + li::before { content: none; }
  .steps img { width: 96px; grid-row: 1 / 5; }
  .steps h3 { grid-row: 2; } .steps p { grid-row: 3; }
  .shelf .books li { flex-basis: 42%; }
  .quote-pic { max-width: 200px; }
  .controls { justify-content: center; }
  .seg { width: 100%; } .seg-btn { flex: 1; }
  .demo-en { font-size: 20px; }
  .demo-pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .demo-pick::-webkit-scrollbar { display: none; }
  .pick { flex: none; }
  /* phone design pass (docs/ui/lp.md): one left edge for everything (the closing call stays centred), steadier spacing */
  .sec-head { text-align: left; }
  .sec-head .section-lead, .note.some { margin-inline: 0; text-align: left; }
  .hero { gap: var(--s5); padding-block: var(--s4) var(--s6); }
  .hero-art img { aspect-ratio: 1122 / 900; }
  .quote { gap: var(--s4); }
  .quote-pic { max-width: none; }
  .quote-pic img { aspect-ratio: 3 / 2; }
  .quote blockquote { font-size: 17px; line-height: 1.8; }
  /* the story picker scrolls sideways: the fade at the right edge says there is more */
  .demo-pick { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: var(--s6); }
  /* the controls under the player: the practice tabs across, then the page on the left and the voices on the right */
  .sub-row { justify-content: space-between; row-gap: var(--s3); }
  .tabs { width: 100%; justify-content: space-around; }
  .sub-row .page-count { margin-left: 0; }
  .foot nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
}