/* 每一下，都算數 — 伴伴辦學理念頁 (v3: light editorial page with dark "rooms")
   Colour tokens: accents from @edubaania/design-system (brand / warn / danger families); paper, ink and muted from the
   official site (www.edubaania.com DESIGN.md) so the page sits inside it. The night scenes (21:30, the gym, the star map,
   21:30 again) are dark bands (.pz-band); ?theme=dark turns the whole page back into the chalkboard version. */
:root {
  --pz-brand: #1F8E86; --pz-brand-border: #81D6D0; --pz-brand-surface: #EEF9F7; --pz-brand-strong: #1F6F68;
  --pz-warn: #FFD166; --pz-warn-border: #FFE1A3; --pz-warn-strong: #8A6A14;
  --pz-danger: #C0432F; --pz-danger-border: #FF8A7A;
  --pz-canvas: #fbfdfd; --pz-ink: #262b35; --pz-muted: #69717d; --pz-line: #e8eef0; --pz-site-teal: #58c5bd; --pz-site-teal-strong: #31aaa1;
  --pz-night: #0e0e0d;
  --pz-tiffany: oklch(0.70 0.15 180); --pz-tiffany-2: oklch(0.95 0.02 180);
  /* ink on paper: text, lines and strokes are --pz-fg at some alpha */
  --pz-fg: 38 43 53;
  --pz-chalk: rgb(38 43 53 / .94); --pz-chalk-2: rgb(38 43 53 / .76); --pz-chalk-3: rgb(38 43 53 / .7); --pz-chalk-4: rgb(38 43 53 / .16);
  --pz-solid: #262b35; --pz-panel: #e6ecec; --pz-dot-on: #1F8E86; --pz-dot-glow: rgba(31, 142, 134, .25);
  --pz-accent-text: var(--pz-brand-strong); --pz-accent-line: var(--pz-brand); --pz-warm-text: var(--pz-warn-strong);
  --pz-lift-shadow: 0 0 0 1px rgba(38, 43, 53, .06), 0 50px 100px -34px rgba(20, 60, 58, .45);
  --pz-bg: #fbfdfd;
  --pz-f-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --pz-f-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --pz-f-hand: "LXGW WenKai TC", "Kaiti TC", "BiauKai", serif;
  --pz-gutter: clamp(20px, 5.5vw, 96px);
  --pz-max: 1280px;
  --pz-ease: cubic-bezier(.16, 1, .3, 1);
  --pz-vh: 1vh;
}
@supports (height: 1svh) { :root { --pz-vh: 1svh; } }
/* the chalkboard */
:root.pz-theme-dark, .pz-band, .pz-gate {
  --pz-fg: 255 255 255;
  --pz-chalk: rgba(255, 255, 255, .94); --pz-chalk-2: rgba(255, 255, 255, .74); --pz-chalk-3: rgba(255, 255, 255, .5); --pz-chalk-4: rgba(255, 255, 255, .16);
  --pz-solid: #fff; --pz-panel: #000; --pz-dot-on: rgba(255, 255, 255, .85); --pz-dot-glow: rgba(255, 255, 255, .45);
  --pz-accent-text: var(--pz-brand-border); --pz-accent-line: var(--pz-brand-border); --pz-warm-text: var(--pz-warn-border);
  --pz-lift-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 120px -30px rgba(0, 0, 0, .95);
}
:root.pz-theme-dark { --pz-bg: #0e0e0d; }
.pz-band { position: relative; color: var(--pz-chalk); --pz-here: var(--pz-night); }
/* a dark room runs the full width of the window, whatever box it sits in */
.pz-band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; pointer-events: none; background: var(--pz-night); }
:root.pz-theme-dark .pz-band::before { display: none; }
/* a dark chapter holds its own margins (or the last statement's margin leaks out as a strip of paper), and runs
   straight into the dawn */
.pz-ch.pz-band:not(.pz-hero):not(.pz-titleblock) { display: flow-root; }
:root:not(.pz-theme-dark) #s6 { padding-bottom: clamp(60px, 10vh, 120px); }
:root:not(.pz-theme-dark) .pz-dawn { margin-top: 0; }

/* ---------- base ---------- */
.pz { --pz-here: var(--pz-bg); margin: 0; background: var(--pz-bg); color: var(--pz-chalk); font-family: var(--pz-f-sans); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color .9s linear; }
.pz::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, .03), rgba(0, 0, 0, .35)); }
:root.pz-theme-dark .pz::before { opacity: .5; }
:root.pz-theme-dark .pz.pz-light::before { opacity: 0; }
.pz *, .pz *::before, .pz *::after { box-sizing: border-box; }
.pz img, .pz video, .pz canvas { display: block; max-width: 100%; }
:where(.pz) button { font: inherit; color: inherit; cursor: pointer; }
.pz a { color: inherit; }
.pz .w { white-space: nowrap; display: inline-block; }
/* .wm: phrases wrapped by script; a unit only on narrow screens, where a group may also wrap inside itself rather than overflow */
@media (min-width: 901px) { .pz .w.wm { display: inline; white-space: normal; } }
@media (max-width: 900px) { .pz .w { white-space: normal; max-width: 100%; text-wrap: balance; } .pz-big, .pz-statement, .pz-end__title { text-wrap: balance; } }
.pz-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px; }
.pz-skip:focus { top: 12px; }
.pz :focus-visible { outline: 2px solid var(--pz-brand-border); outline-offset: 4px; border-radius: 6px; }
.pz-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pz-only-coarse { display: none; }
@media (pointer: coarse) { .pz-only-coarse { display: inline; } .pz-only-fine { display: none; } }

/* ---------- gate ---------- */
/* the cover: a child writing on a little hill of books under the night sky, the mascot beside her holding up a lantern
   (she does the work; she is not alone). The words sit in the empty sky; on an upright screen the picture is a band
   at the top and the words come below it. */
.pz-gate { --gate-bg: 13 33 52; position: fixed; inset: 0; z-index: 60; background: rgb(var(--gate-bg)); color: var(--pz-chalk); overflow: hidden auto; overscroll-behavior: contain; transition: opacity 1.1s var(--pz-ease), visibility 1.1s; }
.pz-gate.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.pz-gate.is-gone, .pz-gate.is-gone *, .pz-gate.is-gone::before, .pz-gate.is-gone::after { animation: none !important; }
.pz-asleep, .pz-asleep *, .pz-asleep *::before, .pz-asleep *::after { animation-play-state: paused !important; }
.pz-gate__art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* the picture keeps its 16:9 and covers the window from the right, so the two of them stay in view; the lantern's
   glow is placed in the picture's own coordinates, so it sits on the lantern at every window size */
.pz-gate__scene { --sw: max(100vw, calc(100 * var(--pz-vh) * 16 / 9)); position: absolute; right: 0; top: calc(50% - var(--sw) * 9 / 32); width: var(--sw); height: calc(var(--sw) * 9 / 16); }
.pz-gate__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transform: scale(1.05); transition: opacity 1.4s var(--pz-ease), transform 7s var(--pz-ease); }
.pz-gate__img.is-loaded { opacity: 1; transform: none; }
/* night over the left half, where the words are, and a little along the floor */
.pz-gate__art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--gate-bg) / .96), rgb(var(--gate-bg) / .88) 30%, rgb(var(--gate-bg) / .4) 50%, rgb(var(--gate-bg) / 0) 64%),
    linear-gradient(0deg, rgb(var(--gate-bg) / .55), rgb(var(--gate-bg) / 0) 24%); }
/* the lantern breathes, slowly */
.pz-gate__glow { position: absolute; z-index: 2; left: 62.2%; top: 55%; width: 16%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .42), rgba(255, 190, 110, .14) 55%, transparent); mix-blend-mode: screen; animation: pz-glow 3.6s ease-in-out infinite alternate; }
@keyframes pz-glow { from { opacity: .55; scale: .92; } to { opacity: 1; scale: 1.06; } }
.pz-gate__inner { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  width: min(540px, 46vw); min-height: 100%; margin-left: var(--pz-gutter); padding: 28px 0; text-align: left; }
.pz-gate__inner > * { animation: pz-gatein 1.1s var(--pz-ease) both; animation-delay: var(--d, 0s); }
.pz-gate__intro { --d: .15s; } .pz-gate__belief { --d: .45s; } .pz-gate__lede { --d: .85s; } .pz-gate__load { --d: 1.1s; } .pz-gate__title { --d: 1.25s; } .pz-gate__actions, .pz-gate__hint { --d: 1.5s; }
@keyframes pz-gatein { from { opacity: 0; transform: translate3d(0, .5em, 0); filter: blur(6px); } }
.pz-gate.is-ready .pz-btn--chalk::after { animation: pz-ping 2.2s ease-out infinite; }
.pz-gate__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 3.4vh, 32px); font-size: 13px; letter-spacing: .32em; color: var(--pz-chalk-3); }
.pz-gate__eyebrow::before { content: ""; width: 28px; height: 1.5px; background: var(--pz-brand-border); }
.pz-gate__intro { margin: 0; font: 400 clamp(15px, 1.25vw, 18px)/1.7 var(--pz-f-sans); color: var(--pz-chalk-2); letter-spacing: .06em; }
/* what we believe, in a hand, in the colour of the lantern */
.pz-gate__belief { margin: .1em 0 .3em; font: 400 clamp(32px, 3.7vw, 56px)/1.3 var(--pz-f-hand); color: var(--pz-warn-border); letter-spacing: .03em; }
.pz-gate__lede { margin: 0; max-width: 24em; font: 400 clamp(15px, 1.25vw, 18px)/1.85 var(--pz-f-sans); color: var(--pz-chalk); letter-spacing: .04em; }
.pz-gate__title { margin: 0; font: 900 clamp(32px, 4.3vw, 60px)/1.18 var(--pz-f-serif); letter-spacing: .02em; }
.pz-gate__load { margin: clamp(20px, 4.2vh, 40px) 0 clamp(16px, 3vh, 28px); width: min(220px, 60%); height: 12px; }
.pz-gate__load svg { width: 100%; height: 100%; overflow: visible; }
.pz-gate__line { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 400;
  stroke-dashoffset: calc(400 - 400 * var(--pz-load, 0)); transition: stroke-dashoffset .6s var(--pz-ease); }
.pz-gate__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(20px, 4vh, 36px); opacity: .35; pointer-events: none; transition: opacity .8s var(--pz-ease); }
.pz-gate.is-ready .pz-gate__actions { opacity: 1; pointer-events: auto; }
.pz-gate__hint { margin: 16px 0 0; font-size: 13px; color: var(--pz-chalk-3); letter-spacing: .06em; }
/* while the page loads behind the cover: how far along, in place of the headphones hint */
.pz-gate__progress { margin: 16px 0 0; font-size: 13px; color: var(--pz-chalk-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.pz-gate.is-ready .pz-gate__progress, .pz-gate:not(.is-ready) .pz-gate__hint { display: none; }
/* squarer landscape windows (4:3, 3:2): the picture slides right a little (the bench gives way, the rack stays) and the
   words take a narrower column, so they never sit on the plates */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) { .pz-gate__scene { right: calc(var(--sw) * -.05); } .pz-gate__inner { width: min(540px, 40vw); } }
@media (max-height: 460px) and (min-aspect-ratio: 1/1) { .pz-gate__hint { display: none; } .pz-gate__belief { font-size: 32px; } }
/* upright screens: the picture is a band across the top (as tall as the words leave room for), centred on the rack */
@media (max-aspect-ratio: 1/1) {
  .pz-gate { --band: clamp(180px, calc(100 * var(--pz-vh) - var(--gate-text, 420px)), calc(58 * var(--pz-vh))); }  /* --gate-text: main.js measures the words */
  .pz-gate__art { bottom: auto; height: var(--band); }
  /* the picture is at least as wide as the window; when the band is shallower than 16:9 it keeps its lower part (the two of them) */
  .pz-gate__scene { --sw: max(100vw, calc(var(--band) * 16 / 9)); top: calc(var(--band) - var(--sw) * 9 / 16); right: auto; left: max(calc(50% - var(--sw) * .78), calc(100% - var(--sw))); height: calc(var(--sw) * 9 / 16); }
  .pz-gate__art::after { background: linear-gradient(180deg, rgb(var(--gate-bg) / .35), rgb(var(--gate-bg) / 0) 22%, rgb(var(--gate-bg) / 0) 62%, rgb(var(--gate-bg)) 100%); }
  .pz-gate__inner { justify-content: flex-start; width: auto; margin: 0; padding: calc(var(--band) - 34px) var(--pz-gutter) calc(24px + env(safe-area-inset-bottom)); }
  .pz-gate__eyebrow { margin-bottom: 14px; }
  .pz-gate__belief { font-size: clamp(28px, 8vw, 48px); }
  .pz-gate__belief:lang(ja) { font-size: clamp(24px, 6.8vw, 44px); }
  .pz-gate__title { font-size: clamp(30px, 8.6vw, 44px); }
}
.pz-btn { border: 0; border-radius: 999px; padding: 15px 28px; font-size: 16px; font-weight: 700; letter-spacing: .08em; transition: transform .4s var(--pz-ease), box-shadow .4s; }
.pz .pz-btn--chalk { position: relative; background: #fff; color: #000; }
.pz-btn--chalk:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -8px rgba(255, 255, 255, .45); }
.pz-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pz-chalk-4); }
.pz-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pz-chalk-2); }

/* ---------- dust overlay ---------- */
.pz-dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; mix-blend-mode: screen; transition: opacity .8s; }
.pz-light .pz-dust, .pz-nodust .pz-dust { opacity: 0; }

/* ---------- HUD ---------- */
.pz-hud { position: fixed; z-index: 30; inset: 0 0 auto; display: flex; align-items: center; gap: 24px; padding: max(14px, env(safe-area-inset-top)) var(--pz-gutter) 12px;
  pointer-events: none; transition: color .8s; }
/* once the hero is behind us the bar gets a scrim in the page's own colour, so text scrolling under it doesn't collide with the logo */
.pz-hud::before { content: ""; position: absolute; inset: 0 0 -34px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: linear-gradient(rgb(251 253 253) 0%, rgb(251 253 253 / .82) 52%, rgb(251 253 253 / 0)); }
.pz-hud-dark .pz-hud::before { background: linear-gradient(rgb(14 14 13) 0%, rgb(14 14 13 / .8) 52%, rgb(14 14 13 / 0)); }
.pz-scrolled .pz-hud::before { opacity: 1; }
.pz-over-dawn .pz-hud::before { background: linear-gradient(rgb(255 248 236 / .92) 0%, rgb(255 248 236 / .7) 52%, rgb(255 248 236 / 0)); } /* over the dawn: warm, not white */
.pz-hud > * { pointer-events: auto; }
.pz-hud__brand img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .92; transition: filter .8s; }
:root:not(.pz-hud-dark) .pz-hud__brand img { filter: none; opacity: 1; }
.pz-path { margin-right: auto; }
.pz-path ol { display: flex; margin: 0; padding: 0; list-style: none; align-items: center; }
.pz-path li { display: flex; align-items: center; }
.pz-path li + li::before { content: ""; width: clamp(10px, 2.2vw, 30px); height: 1.5px; background: var(--pz-chalk-4); transition: background .6s; }
.pz-path li.is-done + li::before { background: var(--pz-chalk-2); }
.pz-path a { position: relative; display: grid; place-items: center; width: 22px; height: 22px; text-decoration: none; }
.pz-path__dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--pz-chalk-3); transition: all .5s var(--pz-ease); }
.pz-path li.is-done .pz-path__dot { background: var(--pz-chalk-2); box-shadow: none; }
.pz-path li.is-now .pz-path__dot { width: 12px; height: 12px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 0 18px rgba(255, 255, 255, .5); }
.pz-path__label { position: absolute; top: 26px; left: 50%; transform: translate(-50%, -4px); white-space: nowrap; font-size: 12px; letter-spacing: .12em;
  color: var(--pz-chalk-2); opacity: 0; transition: all .35s var(--pz-ease); pointer-events: none; }
.pz-path a:hover .pz-path__label, .pz-path a:focus-visible .pz-path__label, .pz-path li.is-now .pz-path__label { opacity: 1; transform: translate(-50%, 0); }
.pz-hud__right { display: flex; align-items: center; gap: 16px; }
.pz-tally { display: flex; align-items: center; gap: 8px; height: 40px; }
.pz-tally__marks { width: 92px; height: 32px; overflow: visible; }
.pz-tally__marks path { fill: none; stroke: var(--pz-solid); stroke-width: 3.2; stroke-linecap: round; }
.pz-tally__num { font-size: 13px; letter-spacing: .08em; color: var(--pz-chalk-2); white-space: nowrap; }
.pz-tally__num b { font: 700 18px/1 var(--pz-f-sans); color: var(--pz-solid); font-variant-numeric: tabular-nums; display: inline-block; }
.pz-tally.is-bump .pz-tally__num b { animation: pz-bump .6s var(--pz-ease); }
@keyframes pz-bump { 30% { transform: scale(1.5); color: var(--pz-warn); } }
.pz-sound { display: flex; align-items: center; gap: 2.5px; height: 28px; padding: 0 6px; border: 0; background: none; }
.pz-sound span { width: 2.5px; height: 4px; background: var(--pz-chalk-2); border-radius: 2px; }
.pz-sound[aria-pressed="true"] span { animation: pz-eq 1.1s ease-in-out infinite; background: #fff; }
.pz-sound[aria-pressed="true"] span:nth-child(2) { animation-delay: -.3s; } .pz-sound[aria-pressed="true"] span:nth-child(3) { animation-delay: -.6s; }
.pz-sound[aria-pressed="true"] span:nth-child(4) { animation-delay: -.85s; }
@keyframes pz-eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
/* language switch (same five languages and the same remembered choice as the official site) */
.pz-lang__select { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--pz-chalk-4); border-radius: 0; background: none; padding: 8px 2px; font: 500 13px/1 var(--pz-f-sans);
  letter-spacing: .06em; color: var(--pz-chalk-2); cursor: pointer; max-width: 9.5em; }
.pz-lang__select:hover { color: #fff; border-color: #fff; }
.pz-lang__select:focus-visible { outline: 2px solid var(--pz-site-teal); outline-offset: 3px; }
.pz-lang__select option { color: #262b35; background: #fff; }
:root:not(.pz-hud-dark) .pz-lang__select { color: var(--pz-muted); }
:root:not(.pz-hud-dark) .pz-lang__select:hover { color: var(--pz-ink); border-color: var(--pz-ink); }
.pz-i18n-wait .pz > * { visibility: hidden; }
.pz-locked, .pz-locked body { overflow: hidden; }
.pz-split-word { display: inline-block; white-space: nowrap; }
/* shown only to readers of other languages */
.pz-only-intl { display: none; }
html[data-lang]:not([data-lang="zh-TW"]) .pz-only-intl { display: block; }
.pz-pad__intl { position: absolute; left: 4px; right: 4px; bottom: calc(100% + 8px); margin: 0; font: 400 12px/1.4 var(--pz-f-sans); color: var(--pz-chalk-3); text-align: center; }
/* languages written with spaces (en, ko, vi): the hand-marked phrase groups are a Chinese line-breaking aid and the wide
   tracking is a CJK habit; both are switched off, and words break where the browser would break them */
:is([data-lang="en"], [data-lang="ko"], [data-lang="vi"]) .pz .w { display: inline; white-space: normal; }
:is([data-lang="en"], [data-lang="ko"], [data-lang="vi"]) .pz :is(p, h1, h2, h3, li, figcaption, small, b, span, a, button, q, em, summary) { letter-spacing: normal; }
:is([data-lang="en"], [data-lang="vi"]) .pz { hyphens: manual; overflow-wrap: break-word; }
:is([data-lang="en"], [data-lang="ko"], [data-lang="vi"]) :is(.pz-cite, .pz-facts small, .pz-habits__list small) a::before { content: " ("; }
:is([data-lang="en"], [data-lang="ko"], [data-lang="vi"]) :is(.pz-cite, .pz-facts small, .pz-habits__list small) a::after { content: ")"; }
[data-lang="ko"] .pz { word-break: keep-all; overflow-wrap: break-word; }
[data-lang="ja"] .pz { word-break: auto-phrase; line-break: strict; }   /* break between phrases where the browser can tell them */
.pz-hud__read { font-size: 13px; letter-spacing: .12em; text-decoration: none; color: var(--pz-chalk-2); padding: 8px 2px; border-bottom: 1px solid var(--pz-chalk-4); }
.pz-hud__read:hover { color: #fff; border-color: #fff; }
:root:not(.pz-hud-dark) .pz-hud { color: var(--pz-ink); }
:root:not(.pz-hud-dark) .pz-path__dot { box-shadow: inset 0 0 0 1.5px rgba(38, 43, 53, .35); }
:root:not(.pz-hud-dark) .pz-path li.is-done .pz-path__dot, :root:not(.pz-hud-dark) .pz-path li.is-now .pz-path__dot { background: var(--pz-site-teal-strong); box-shadow: none; }
:root:not(.pz-hud-dark) .pz-path li + li::before { background: rgba(38, 43, 53, .14); }
:root:not(.pz-hud-dark) .pz-path__label, :root:not(.pz-hud-dark) .pz-tally__num, :root:not(.pz-hud-dark) .pz-hud__read { color: var(--pz-muted); }
:root:not(.pz-hud-dark) .pz-tally__num b { color: var(--pz-ink); }
:root:not(.pz-hud-dark) .pz-tally__marks path { stroke: var(--pz-ink); }
:root:not(.pz-hud-dark) .pz-sound span { background: var(--pz-muted); }

/* ---------- typography ---------- */
.pz-main { position: relative; z-index: 2; }
.pz-ch { position: relative; padding: clamp(96px, 15vh, 190px) var(--pz-gutter) 0; }
.pz-ch > * { max-width: var(--pz-max); margin-left: auto; margin-right: auto; }
.pz-chap { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(36px, 7vh, 80px); }
.pz-chap span { font: 400 clamp(16px, 1.4vw, 20px)/1 var(--pz-f-hand); color: var(--pz-chalk-3); letter-spacing: .12em; }
.pz-chap b { position: relative; font: 900 clamp(30px, 3.4vw, 50px)/1 var(--pz-f-serif); letter-spacing: .06em; }
.pz-chap b::after { content: ""; position: absolute; left: -4px; right: -10px; bottom: -14px; height: 10px; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C 40 3, 90 8, 140 5 S 190 4, 198 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C 40 3, 90 8, 140 5 S 190 4, 198 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--pz-ease) .2s; }
.pz-chap.is-in b::after { transform: scaleX(1); }
.pz-line { margin: 0 0 .9em; font: 500 clamp(19px, 1.7vw, 25px)/1.72 var(--pz-f-sans); letter-spacing: .03em; color: var(--pz-chalk-2); }
.pz-line--strong { font: 700 clamp(23px, 2.3vw, 34px)/1.5 var(--pz-f-serif); color: var(--pz-chalk); }
.pz-line--wide { max-width: 900px !important; }
.pz-big { margin: .3em 0; font: 900 clamp(30px, 3.9vw, 58px)/1.3 var(--pz-f-serif); letter-spacing: .02em; }
.pz-big--warm { color: var(--pz-warm-text); }
.pz-statement { margin: clamp(80px, 13vh, 170px) auto; font: 900 clamp(34px, 5.4vw, 86px)/1.22 var(--pz-f-serif); letter-spacing: .02em; }
.pz-statement--xl { font-size: clamp(54px, 10vw, 160px); text-align: center; }
.pz-note { margin: 1.4em 0 0; font: 400 clamp(15px, 1.2vw, 17px)/1.6 var(--pz-f-hand); color: var(--pz-accent-text); letter-spacing: .06em; }
.pz-q { margin: 0 0 .7em; font: 700 clamp(25px, 3.1vw, 46px)/1.4 var(--pz-f-serif); }
.pz-qs { margin-top: clamp(80px, 12vh, 150px); }
.pz-split-char { display: inline-block; }

/* reveal */
.js [data-reveal] { opacity: 0; transform: translate(0, 26px); transition: opacity 1s var(--pz-ease), transform 1.2s var(--pz-ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="art"] { opacity: 1; transform: none; }
.js [data-reveal="art"] > picture, .js [data-reveal="art"] > video { opacity: 0; transition: opacity 1.1s var(--pz-ease); }
.js [data-reveal="art"] > picture img, .js [data-reveal="art"] > video { transform: scale(1.06); transition: transform 2.2s var(--pz-ease), opacity .9s var(--pz-ease); }
.js [data-reveal="art"].is-in > picture, .js [data-reveal="art"].is-in > video { opacity: 1; }
.js [data-reveal="art"].is-in > picture img, .js [data-reveal="art"].is-in > video { transform: none; }
.js [data-reveal="art"]::after, .js [data-reveal="art"] > :not(picture):not(video) { opacity: 0; transition: opacity 1s var(--pz-ease) .7s; }
.js [data-reveal="art"].is-in::after, .js [data-reveal="art"].is-in > :not(picture):not(video) { opacity: 1; }
.js .pz-loop.is-playing > video { opacity: 1; }
.js [data-split] .pz-split-char { opacity: 0; transform: translate3d(0, .4em, 0); filter: blur(6px);
  transition: opacity .8s var(--pz-ease), transform 1s var(--pz-ease), filter .8s var(--pz-ease); transition-delay: calc(var(--i) * 34ms); }
.js [data-split].is-in .pz-split-char { opacity: 1; transform: none; filter: none; }

/* ---------- pictures: never a hard pop-in ---------- */
/* (not the mascot: its still has to be hidden while a recorded motion plays over it, and this rule would outrank that) */
.js .pz-main img:not(.pz-yaya__img) { opacity: 0; transition: opacity .9s var(--pz-ease); }
.js .pz-main img.is-loaded:not(.pz-yaya__img) { opacity: 1; }
figure.is-loading { position: relative; }
figure.is-loading::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 70%) 0 0 / 220% 100%; animation: pz-shimmer 1.6s linear infinite; }
@keyframes pz-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pz-reduced figure.is-loading::before { animation: none; }

/* ---------- panels ---------- */
.pz-panel { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--pz-panel) var(--lq, none) center / cover no-repeat; box-shadow: var(--pz-lift-shadow); }
.pz-hero__art, .pz-dawn__art, .pz-compare figure { background-image: var(--lq, none); background-size: cover; background-position: center; }
.pz-panel > picture, .pz-panel > picture img, .pz-panel > video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; }
.pz-panel img, .pz-panel video { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.pz-panel::after { content: none; }
.pz-panel figcaption { position: absolute; left: 0; right: 0; top: calc(100% + 22px); font: 700 clamp(22px, 2.3vw, 34px)/1.4 var(--pz-f-serif); }
.pz-panel--tall { aspect-ratio: 16 / 10; }
.pz-loop > video { opacity: 0; transition: opacity .8s; }
.pz-loop.is-playing > video { opacity: 1; }

/* ---------- layouts ---------- */
.pz-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 90px); align-items: center; margin-top: clamp(60px, 9vh, 120px); }
.pz-split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pz-diptych { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 56px); margin-bottom: 170px !important; }
.pz-diptych .pz-panel { aspect-ratio: 4 / 3; }
.pz-notes { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.pz-notes li { position: relative; margin: 0 0 .75em; padding-left: 2.2em; font: 400 clamp(21px, 1.9vw, 30px)/1.5 var(--pz-f-hand); color: var(--pz-chalk); }
.pz-notes li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: .1em; width: 1.5em; height: 1.5em; display: grid; place-items: center;
  font: 700 .62em/1 var(--pz-f-sans); color: var(--pz-chalk-2); border: 1.5px solid var(--pz-chalk-4); border-radius: 50%; }
.pz-talk .pz-line { margin-bottom: 1.1em; }
.pz-human { max-width: 900px !important; margin-top: clamp(70px, 10vh, 130px) !important; }

/* ---------- hero ---------- */
.pz-hero { height: calc(100 * var(--pz-vh)); min-height: 520px; padding: 0; overflow: hidden; }
.pz-hero > * { max-width: none; }
.pz-hero__art { position: absolute; inset: 0; margin: 0; background: var(--pz-night); }
.pz-hero__art picture, .pz-hero__art img, .pz-hero__art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pz-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 14, 13, 1) 0%, rgba(14, 14, 13, .78) 22%, rgba(14, 14, 13, 0) 52%); }
.pz-hero__copy { position: absolute; left: var(--pz-gutter); right: var(--pz-gutter); bottom: clamp(74px, 9vh, 104px); }
.pz-time { margin: 0 0 18px; font: 500 15px/1 var(--pz-f-sans); letter-spacing: .5em; color: var(--pz-warn-border); }
.pz-time::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 14px; border-radius: 50%; background: var(--pz-warn); box-shadow: 0 0 14px var(--pz-warn); vertical-align: 2px; animation: pz-breathe 2.4s ease-in-out infinite; }
@keyframes pz-breathe { 50% { transform: scale(.55); opacity: .55; } }
.pz-lede { margin: 0 0 .1em; font: 700 clamp(22px, 2.7vw, 42px)/1.4 var(--pz-f-serif); letter-spacing: .02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.pz-lede--punch { margin-top: .3em; font-weight: 900; font-size: clamp(34px, 4.6vw, 70px); line-height: 1.2; color: var(--pz-warn); }
.pz-cue { position: absolute; left: 50%; bottom: 26px; margin: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 12px; letter-spacing: .4em; color: var(--pz-chalk-3); }
.pz-cue i { width: 1.5px; height: 40px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); animation: pz-cue 2s var(--pz-ease) infinite; transform-origin: top; }
@keyframes pz-cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.pz-titleblock { min-height: calc(86 * var(--pz-vh)); display: grid; place-content: center; text-align: center; padding-top: 0; }
.pz-title { margin: 0; font: 900 clamp(48px, 9.4vw, 150px)/1.08 var(--pz-f-serif); letter-spacing: .04em; }
.pz-subtitle { margin: clamp(18px, 3vh, 34px) 0 0; font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .34em; color: var(--pz-chalk-2); }

/* ---------- 一天: horizontal on wide screens, vertical on phones ---------- */
.pz-day { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vh, 48px); }
.pz-day__copy { columns: 2; column-gap: clamp(32px, 5vw, 90px); max-width: 980px; }
.pz-day__copy .pz-line { break-inside: avoid; }
.pz-daybar { position: relative; height: 430px; }
.pz-daybar__track { position: absolute; left: 0; right: 0; top: 262px; height: 92px; }
.pz-daybar__track::before { content: ""; position: absolute; left: 0; right: 0; top: 45px; height: 2px; background: var(--pz-chalk-4); }
.pz-daybar__block { position: absolute; top: 0; height: 92px; border-radius: 6px;
  background: repeating-linear-gradient(115deg, rgb(var(--pz-fg) / .2) 0 2px, rgb(var(--pz-fg) / 0) 2px 9px); box-shadow: inset 0 0 0 1.5px rgb(var(--pz-fg) / .5); }
.pz-daybar__fill { position: absolute; inset: 0; border-radius: 6px; transform-origin: left center; transform: scaleX(var(--fill, 0)); background: inherit; box-shadow: inherit; }
.pz-daybar__block { background: none; box-shadow: none; }
.pz-daybar__block .pz-daybar__fill { background: repeating-linear-gradient(115deg, rgb(var(--pz-fg) / .2) 0 2px, rgb(var(--pz-fg) / 0) 2px 9px); box-shadow: inset 0 0 0 1.5px rgb(var(--pz-fg) / .5); }
.pz-daybar__block--self .pz-daybar__fill { background: rgba(255, 209, 102, .22); box-shadow: inset 0 0 0 1.5px var(--pz-warn), 0 0 34px rgba(255, 209, 102, .5); }
.pz-daybar__name { position: absolute; left: 10px; bottom: -32px; font: 400 18px/1 var(--pz-f-hand); letter-spacing: .14em; color: var(--pz-chalk-2); white-space: nowrap; opacity: var(--fill, 0); }
.pz-daybar__block--self .pz-daybar__name { color: var(--pz-warm-text); }
.pz-daybar__thumb { position: absolute; left: 4%; bottom: calc(100% + 20px); width: min(320px, 58%); aspect-ratio: 16 / 10; margin: 0; border: 4px solid rgba(255, 255, 255, .9);
  transform: rotate(-3deg) translateY(calc((1 - var(--fill, 0)) * 16px)); opacity: var(--fill, 0); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
.pz-daybar__block + .pz-daybar__block .pz-daybar__thumb { transform: rotate(2.5deg) translateY(calc((1 - var(--fill, 0)) * 16px)); }
.pz-daybar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pz-daybar__listen { position: absolute; top: 34px; font: 400 18px/1 var(--pz-f-hand); color: rgb(var(--pz-fg) / .78); transform: translateX(-50%); opacity: var(--fill, 0); }
.pz-daybar__hours { position: absolute; left: 0; right: 0; top: 392px; height: 20px; }
.pz-daybar__hours span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--pz-chalk-3); font-variant-numeric: tabular-nums; }

/* ---------- 健身房 ---------- */
.pz-tallyboard, .pz-dinner .pz-bubble { --pz-fg: 255 255 255; --pz-chalk: rgba(255, 255, 255, .94); --pz-chalk-2: rgba(255, 255, 255, .74); color: var(--pz-chalk); }
.pz-tallyboard { position: absolute; right: 3%; top: 5%; display: grid; gap: 4px; padding: 10px 14px; border-radius: 6px; background: rgba(0, 0, 0, .5); font: 400 18px/1 var(--pz-f-hand); color: var(--pz-chalk-2); }
.pz-tallyboard p { margin: 0; display: grid; grid-template-columns: 46px 230px; align-items: center; }
.pz-tallyboard b { font-weight: 400; }
.pz-tallyboard svg { width: 230px; height: 40px; overflow: visible; }
.pz-tallyboard path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }

/* lift: the module pins while you lift */
.pz-liftmod { position: relative; height: 240vh; margin-top: clamp(40px, 8vh, 100px); max-width: none !important; }
.pz-liftmod__pin { position: sticky; top: 0; height: calc(100 * var(--pz-vh)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px;
  padding: max(78px, 11vh) 0 max(22px, 3vh); max-width: var(--pz-max); margin: 0 auto; }
.pz-liftmod__head { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.pz-liftmod__call { margin: 0; font: 900 clamp(42px, 6vw, 92px)/1 var(--pz-f-serif); }
.pz-liftmod__how { margin: 0; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .08em; color: var(--pz-chalk-2); }
.pz-liftmod__stage { position: relative; min-height: 0; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; justify-self: center; border-radius: 18px; overflow: hidden; background: #f4f1ea; box-shadow: var(--pz-lift-shadow); }
.pz-liftmod__stage::after { content: none; }
.pz-liftmod__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pz-liftmod__ui { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.pz-liftmod__btn { grid-column: 2; position: relative; width: 116px; height: 116px; border: 0; border-radius: 50%; background: rgb(var(--pz-fg) / .06);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .3s var(--pz-ease); }
.pz-liftmod__btn svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pz-liftmod__track { fill: none; stroke: rgb(var(--pz-fg) / .22); stroke-width: 3; }
.pz-liftmod__ring { fill: none; stroke: var(--pz-solid); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 * (1 - var(--pz-effort, 0))); }
.pz-liftmod__label { position: relative; font: 700 18px/1 var(--pz-f-sans); letter-spacing: .3em; padding-left: .3em; }
.pz-liftmod.is-holding .pz-liftmod__btn { transform: scale(.94); }
.pz-liftmod.is-strain .pz-liftmod__ring { stroke: var(--pz-warn); }
.pz-liftmod__status { grid-column: 1; grid-row: 1; margin: 0; font-size: 14px; letter-spacing: .2em; color: var(--pz-chalk-2); }
.pz-liftmod__skip { grid-column: 3; justify-self: end; border: 0; background: none; font-size: 13px; letter-spacing: .12em; color: var(--pz-chalk-3); padding: 10px 0;
  border-bottom: 1px solid var(--pz-chalk-4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s, visibility 0s .6s; }
.pz-liftmod__skip.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.pz-liftmod__back { color: var(--pz-solid); font-weight: 700; font-size: 15px; }
.pz-liftmod__skip { grid-row: 1; }
.pz-liftmod.is-done .pz-liftmod__btn { opacity: .3; pointer-events: none; }
.pz-liftmod__toast { position: absolute; left: 50%; top: 16%; margin: 0; padding: .28em .7em .34em; border-radius: 999px; transform: translate(-50%, -50%); font: 900 clamp(24px, 3vw, 44px)/1 var(--pz-f-serif); white-space: nowrap;
  color: #262b35; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px -12px rgba(38, 43, 53, .45); opacity: 0; pointer-events: none; }
.pz-liftmod__toast.is-on { animation: pz-toast 1.4s var(--pz-ease) forwards; }
@keyframes pz-toast { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.9); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -64%); } }
.pz-liftmod.is-shake .pz-liftmod__stage { animation: pz-shake .09s linear infinite; }
@keyframes pz-shake { 25% { transform: translate(calc(var(--pz-amp, 1) * 1.5px), calc(var(--pz-amp, 1) * -1px)); } 50% { transform: translate(calc(var(--pz-amp, 1) * -1px), calc(var(--pz-amp, 1) * 1.5px)); } 75% { transform: translate(calc(var(--pz-amp, 1) * 1px), calc(var(--pz-amp, 1) * 1px)); } }
.pz-after { margin-top: clamp(40px, 7vh, 90px); max-width: 900px !important; }

/* ---------- 每天 ---------- */
.pz-split--year { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.pz-year { position: relative; padding-top: 44px; }
.pz-year__cap { position: absolute; left: 0; top: 0; margin: 0; font-size: 13px; letter-spacing: .24em; color: var(--pz-chalk-2); }
.pz-year__cap b { font: 900 24px/1 var(--pz-f-serif); color: var(--pz-solid); letter-spacing: .04em; margin: 0 .25em; font-variant-numeric: tabular-nums; }
.pz-year__grid { display: grid; grid-template-columns: repeat(53, 1fr); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: clamp(2px, .3vw, 4px); }
.pz-year__grid { contain: layout paint; }
.pz-year__grid i { aspect-ratio: 1; border-radius: 22%; background: rgb(var(--pz-fg) / .07); }
.pz-year__grid i.is-on { background: var(--pz-dot-on); }
.pz-year__grid i.is-gold { background: var(--pz-warn); }

.pz-tabmod { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 90px); margin-top: clamp(50px, 9vh, 110px); }
.pz-tabmod__sticky { position: sticky; top: 0; height: calc(100 * var(--pz-vh)); display: grid; place-items: center; }
.pz-tabmod__art { position: absolute; left: -8%; top: 12%; width: 44%; aspect-ratio: 16 / 10; margin: 0; opacity: .45; border-radius: 4px; overflow: hidden; transform: rotate(-4deg); }
.pz-tabmod__art img { width: 100%; height: 100%; object-fit: cover; }
.pz-tabmod__steps { margin: 0; padding: 0; list-style: none; }
.pz-tabmod__steps li { min-height: calc(78 * var(--pz-vh)); display: grid; align-content: center; opacity: .28; transition: opacity .6s var(--pz-ease); }
.pz-tabmod__steps li.is-now { opacity: 1; }
.pz-tabmod__steps p { margin: 0; font: 700 clamp(23px, 2.3vw, 34px)/1.55 var(--pz-f-serif); }
.pz-tabmod__steps small { margin-top: 14px; font: 400 15px/1.6 var(--pz-f-hand); color: var(--pz-accent-text); letter-spacing: .06em; }
/* the tablet: an iPad-landscape screen (1180 × 820) showing the student app's own markup; a camera moves over it */
.pz-pad { position: relative; width: min(880px, 100%); border-radius: 34px; padding: 16px; background: #0d1416;
  box-shadow: var(--pz-lift-shadow); }
.pz-pad__screen { position: relative; aspect-ratio: 1180 / 820; border-radius: 18px; overflow: hidden;
  background: #f7f7f2 url(https://www.edubaania.com/philosophy-assets/m-33bc470a86/assets/img/app-home.webp) center / cover no-repeat; }
.pz-pad__cam { position: absolute; left: 0; top: 0; width: 1180px; height: 820px; transform-origin: 0 0; will-change: transform; }
.pz-pad__app { display: block; width: 1180px; height: 820px; border: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.pz-pad.is-live .pz-pad__app { opacity: 1; }
.pz-pad.is-ready { cursor: pointer; }
.pz-pad__press { border: 0; font-family: inherit; position: absolute; left: 50%; bottom: -18px; transform: translate(-50%, 6px); padding: 7px 16px; border-radius: 999px; background: #ffd166; color: #3a2a00;
  font: 700 14px/1 var(--pz-f-sans); letter-spacing: .12em; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
.pz-pad:not(.is-ready) .pz-pad__press { visibility: hidden; }   /* not focusable until there is something to stamp */
.pz-pad.is-ready .pz-pad__press { opacity: 1; transform: translate(-50%, 0); animation: pz-press 1.3s ease-in-out infinite; }
@keyframes pz-press { 50% { transform: translate(-50%, -3px); } }
.pz-pad__yaya { position: absolute; right: -44px; bottom: -34px; width: 118px; height: 150px; pointer-events: none; opacity: 0; translate: 0 24px;
  transition: opacity .5s, translate .6s cubic-bezier(.3, 1.5, .5, 1); }
.pz-pad.is-ready .pz-pad__yaya, .pz-pad.is-stamped .pz-pad__yaya { opacity: 1; translate: 0 0; }
/* the screen keeps its own layers to itself, so 芽芽 at the corner stays in front of whatever the screen shows */
.pz-pad__screen { isolation: isolate; }
.pz-pad__yaya { z-index: 4; }
/* while the mastery path is on the tablet, the home screen's stamp hint and coins stay out of it */
.pz-pad.is-path .pz-pad__press, .pz-pad.is-path .pz-pad__fx { opacity: 0 !important; animation: none; transition: opacity .3s; }
/* coins that fly out of the tablet */
.pz-pad__fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }
.pz-coinfx { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 35% 30%, #fff6c9 0 18%, #ffd166 19% 62%, #e9a92c 63% 100%); box-shadow: inset 0 0 0 2px rgba(180, 120, 10, .35), 0 4px 10px -4px rgba(120, 80, 0, .5); }
.pz-coinlabel { position: absolute; left: 50%; top: 38%; padding: 10px 22px; border-radius: 999px; background: #ffd166; color: #3a2a00; white-space: nowrap;
  font: 900 clamp(18px, 2vw, 26px)/1 var(--pz-f-sans); letter-spacing: .04em; box-shadow: 0 14px 30px -12px rgba(120, 80, 0, .6); animation: pz-coinlabel 2.1s var(--pz-ease) both; }
@keyframes pz-coinlabel { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.7); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 22% { transform: translate(-50%, 0) scale(1); } 78% { opacity: 1; transform: translate(-50%, -8px); } 100% { opacity: 0; transform: translate(-50%, -40px); } }

/* games: recordings of the real reward games, each on its own little tablet */
.pz-games { margin-top: clamp(90px, 14vh, 170px); }
.pz-games__head { max-width: 900px; }
.pz-games__list { margin: clamp(32px, 5vh, 56px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); max-width: 860px; }
.pz-game { display: grid; gap: 6px; align-content: start; }
.pz-game:nth-child(2) { margin-top: clamp(0px, 4vw, 48px); }
.pz-game__screen { position: relative; margin: 0 0 14px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0d1416; border: 8px solid #0d1416;
  box-shadow: var(--pz-lift-shadow); transform: rotate(var(--tilt, -1.2deg)); transition: transform .6s var(--pz-ease); }
.pz-game:nth-child(2) .pz-game__screen { --tilt: 1deg; }
.pz-game:nth-child(3) .pz-game__screen { --tilt: -.6deg; }
.pz-game__screen:hover { transform: rotate(0deg) scale(1.02); }
.pz-game__screen img, .pz-game__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.pz-game__screen video { opacity: 0; transition: opacity .5s; }
.pz-game__screen video.is-playing { opacity: 1; }
.pz-game__tag { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--pz-brand-surface); color: var(--pz-brand-strong); font: 700 12px/1.4 var(--pz-f-sans); letter-spacing: .14em; }
.pz-game b { font: 900 clamp(20px, 1.9vw, 26px)/1.3 var(--pz-f-serif); }
.pz-game__line { margin: 0; font-size: 15px; line-height: 1.7; color: var(--pz-chalk-2); }
.pz-games__note { margin-top: 26px; }
.pz-split--aha { margin-top: clamp(80px, 12vh, 150px); }

/* ---------- 剛剛好 ---------- */
.pz-gauge { position: relative; }
.pz-gauge__art { margin: 0 0 -26%; width: 72%; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; opacity: .55; }
.pz-gauge__art img { width: 100%; height: 100%; object-fit: cover; }
.pz-gauge__dial { position: relative; width: min(460px, 100%); margin-left: auto; touch-action: none; cursor: grab; user-select: none; }
.pz-gauge__dial:active { cursor: grabbing; }
.pz-gauge__dial svg { width: 100%; overflow: visible; }
.pz-gauge__arc { fill: none; stroke: rgb(var(--pz-fg) / .2); stroke-width: 18; stroke-linecap: round; }
.pz-gauge__zone { fill: none; stroke: var(--pz-accent-line); stroke-width: 18; stroke-linecap: round; opacity: var(--pz-zone, .35); filter: drop-shadow(0 0 calc(var(--pz-zone, 0) * 18px) var(--pz-accent-line)); }
.pz-gauge__needle { transform-origin: 200px 200px; transform: rotate(var(--pz-needle, -64deg)); }
.pz-gauge__needle line { stroke: var(--pz-solid); stroke-width: 6; stroke-linecap: round; }
.pz-gauge__needle circle { fill: var(--pz-solid); }
.pz-gauge__dial span { position: absolute; font-size: 15px; letter-spacing: .2em; color: var(--pz-chalk-2); }
.pz-gauge__l { left: 0; bottom: -10px; } .pz-gauge__r { right: 0; bottom: -10px; } .pz-gauge__m { left: 50%; top: -30px; transform: translateX(-50%); color: var(--pz-accent-text) !important; }
.pz-gauge__hint { margin: 22px 0 0; text-align: right; font: 400 15px/1.5 var(--pz-f-hand); color: var(--pz-chalk-3); }
.pz-gauge.is-right .pz-gauge__hint { color: var(--pz-accent-text); }

.pz-mapmod { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 70px); margin-top: clamp(40px, 7vh, 90px); }
.pz-mapmod__sticky { position: sticky; top: 0; height: calc(100 * var(--pz-vh)); display: grid; align-items: center; }
.pz-map { position: relative; width: 100%; aspect-ratio: 4 / 3.2; max-height: 82vh; border-radius: 18px; overflow: hidden; background: #070909; }
.pz-map::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; pointer-events: none; }
.pz-map__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.pz-map__labels { position: absolute; inset: 0; pointer-events: none; }
.pz-map__label { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 14px; background: rgba(0, 0, 0, .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(129, 214, 208, .45); opacity: 0; transition: opacity .5s; }
.pz-map__label b { font-weight: 700; margin-right: 8px; color: var(--pz-brand-border); }
.pz-map__label.is-on { opacity: 1; }
.pz-map__label.is-dim { opacity: .5; font-size: 12px; padding: 4px 10px; }
.pz-map__label.is-gap { box-shadow: inset 0 0 0 1.5px var(--pz-warn); } .pz-map__label.is-gap b { color: var(--pz-warn); }
.pz-map__label.is-red { box-shadow: inset 0 0 0 1.5px var(--pz-danger-border); } .pz-map__label.is-red b { color: var(--pz-danger-border); }
.pz-map__tip { position: absolute; left: 0; top: 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; background: rgba(0, 0, 0, .8); pointer-events: none; opacity: 0; white-space: nowrap; }
.pz-map__tip.is-on { opacity: 1; }
.pz-map__yaya { position: absolute; left: 0; top: 0; width: 54px; aspect-ratio: 200 / 220; pointer-events: none; opacity: 0; transition: opacity .6s; }
.pz-map__yaya.is-on { opacity: 1; }
.pz-map__legend { position: absolute; left: 18px; top: 16px; margin: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; color: var(--pz-chalk-3); }
.pz-map__legend i { width: 80px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(129, 214, 208, .9)); }
.pz-map__btn { position: absolute; right: 18px; bottom: 18px; border: 0; border-radius: 999px; padding: 14px 28px; font-weight: 700; letter-spacing: .2em; background: var(--pz-brand-border); color: #00302c;
  transition: opacity .5s, transform .3s var(--pz-ease); }
.pz-map__btn::after, .pz-btn--chalk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px rgba(129, 214, 208, .55); opacity: 0; pointer-events: none; }
.pz-map__btn::after { animation: pz-ping 2s ease-out infinite; }
.pz-map__btn:hover { transform: translateY(-2px); }
.pz-map__btn[disabled] { opacity: 0; pointer-events: none; }
.pz-map__btn[disabled]::after { animation: none; }
@keyframes pz-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22, 1.6); } }
.pz-mapmod__steps { margin: 0; padding: 0; list-style: none; }
.pz-mapmod__steps li { min-height: calc(70 * var(--pz-vh)); display: grid; align-content: center; opacity: .28; transition: opacity .6s; }
.pz-mapmod__steps li.is-now { opacity: 1; }
.pz-mapmod__steps p { margin: 0; font: 700 clamp(22px, 2.1vw, 32px)/1.55 var(--pz-f-serif); }
.pz-data { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 22px 40px; margin-bottom: clamp(40px, 6vh, 80px) !important; }
.pz-data p { margin: 0; display: grid; gap: 6px; font-size: 14px; color: var(--pz-chalk-2); }
.pz-data b { font: 900 clamp(28px, 3vw, 46px)/1 var(--pz-f-serif); color: var(--pz-solid); font-variant-numeric: tabular-nums; }
.pz-data small { font-size: 12px; color: var(--pz-chalk-3); }

/* ---------- 接住 ---------- */
.pz-split--lens { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pz-lens { touch-action: pan-y; }
@media (pointer: fine) { .pz-lens { cursor: none; } }
.pz-lens__ai { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; clip-path: circle(var(--lr, 0px) at var(--lx, 50%) var(--ly, 50%)); }
.pz-lens__ai picture, .pz-lens__ai img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.pz-lens__ring { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: calc(var(--lr, 0px) * 2); height: calc(var(--lr, 0px) * 2); transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--pz-brand-border), 0 0 30px rgba(129, 214, 208, .45); pointer-events: none; }
.pz-lens__tags { position: absolute; inset: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.pz-lens__tags span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.92); padding: 7px 12px; border-radius: 6px; font: 500 14px/1.2 var(--pz-f-sans); white-space: nowrap; color: #e9fffd;
  background: rgba(0, 40, 37, .78); box-shadow: inset 0 0 0 1px rgba(129, 214, 208, .7); opacity: 0; transition: opacity .25s, transform .35s var(--pz-ease); pointer-events: none; }
.pz-lens__tags span.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pz-lens__tags span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--pz-brand-border); vertical-align: 2px; }
/* what it tells the teacher (how to teach this) reads differently from what it sees in the child */
.pz-lens__tags span.is-coach { color: #fff6e3; background: rgba(58, 38, 4, .82); box-shadow: inset 0 0 0 1px rgba(240, 190, 110, .8); }
.pz-lens__tags span.is-coach::before { background: #f0be6e; }
.pz-lens__yaya { position: absolute; right: -18px; bottom: -22px; width: 74px; aspect-ratio: 200 / 220; z-index: 2; }
.pz-dinner .pz-bubble { position: absolute; left: 4%; bottom: 6%; max-width: 60%; padding: 18px 24px; border-radius: 24px 24px 24px 6px; background: rgba(12, 10, 8, .66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pz-bubble p { margin: 0; font: 700 clamp(19px, 2.2vw, 32px)/1.35 var(--pz-f-serif); }
.pz-bubble__old { position: relative; display: inline-block; color: var(--pz-chalk-2); }
.pz-bubble__old::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 4px; border-radius: 2px; background: var(--pz-warn); transform-origin: left; transform: scaleX(var(--pz-strike, 0)); }
.pz-bubble__new { color: var(--pz-warn-border); clip-path: inset(-10% calc(100% - var(--pz-write, 0) * 100%) -10% 0); }

/* ---------- 自己來 ---------- */
.pz-compare { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; user-select: none; touch-action: pan-y; }
.pz-compare figure { position: absolute; inset: 0; margin: 0; }
.pz-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pz-compare__b { clip-path: inset(0 0 0 var(--pos)); }
.pz-compare figcaption { position: absolute; bottom: 18px; padding: 6px 12px; border-radius: 999px; font: 400 15px/1 var(--pz-f-hand); background: rgba(0, 0, 0, .55); letter-spacing: .1em; }
.pz-compare__a figcaption { left: 18px; } .pz-compare__b figcaption { right: 18px; color: var(--pz-warn-border); }
.pz-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; }
.pz-compare__handle::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .6); }
.pz-compare__handle span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.pz-compare__handle span::before, .pz-compare__handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.pz-compare__handle span::before { left: 7px; border-right-color: #222; } .pz-compare__handle span::after { right: 7px; border-left-color: #222; }
.pz-compare::after { content: none; }
.pz-split--end6 { align-items: start; }
.pz-notebook { position: relative; padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 48px); border-radius: 6px; transform: rotate(-1.2deg);
  background: linear-gradient(rgba(64, 120, 170, .14) 1px, transparent 1px) 0 0 / 100% 2.2em, linear-gradient(90deg, rgba(64, 120, 170, .1) 1px, transparent 1px) 0 0 / 2.2em 100%, #f4efe3;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); font-size: clamp(16px, 1.25vw, 19px); }
.pz-hand { margin: 0; font: 400 clamp(20px, 1.9vw, 29px)/2.2em var(--pz-f-hand); color: #3a3a3a; clip-path: inset(-10% 100% -10% 0); transition: clip-path 1.7s cubic-bezier(.55, .1, .35, 1); }
.pz-hand.is-on { clip-path: inset(-10% -2% -10% 0); }
.pz-hand--last { color: #b0442f; font-weight: 700; }

/* ---------- dawn + closing (light, hands off to www) ---------- */
.pz-dawn { position: relative; height: calc(110 * var(--pz-vh)); min-height: 600px; overflow: hidden; margin-top: clamp(60px, 10vh, 120px); }
.pz-dawn__art { position: absolute; inset: 0; margin: 0; }
.pz-dawn__art picture, .pz-dawn__art img, .pz-dawn__art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.pz-dawn__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 248, 236, .86) 0%, rgba(255, 248, 236, .4) 42%, rgba(255, 248, 236, 0) 68%),
  linear-gradient(0deg, rgba(251, 253, 253, 1) 0%, rgba(251, 253, 253, 0) 22%), linear-gradient(180deg, var(--pz-night) 0%, rgba(14, 14, 13, 0) 16%); }
.pz-dawn__copy { position: absolute; left: var(--pz-gutter); right: var(--pz-gutter); top: 52%; transform: translateY(-50%); max-width: 820px; color: #2a2015; }
.pz-dawn__copy .pz-line--strong { color: #2a2015; }
.pz-dawn__copy .pz-statement { margin-bottom: .5em; }
.pz-stages { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 34em; }
.pz-stages li { display: grid; grid-template-columns: 5.2em 1fr; gap: 14px; align-items: baseline; padding: 12px 18px; border-radius: 16px; background: rgba(255, 252, 244, .82); box-shadow: 0 10px 30px -18px rgba(90, 60, 10, .5); }
.pz-stages b { font: 900 clamp(17px, 1.4vw, 21px)/1.5 var(--pz-f-serif); color: #8A6A14; letter-spacing: .06em; }
.pz-stages span { font: 500 clamp(16px, 1.3vw, 19px)/1.7 var(--pz-f-sans); color: #2a2015; }
.pz-dawn__copy .pz-statement { margin: .3em 0 0; color: #2a2015; }
.pz-end { position: relative; z-index: 2; min-height: 100vh; background: var(--pz-canvas); color: var(--pz-ink); padding: clamp(90px, 14vh, 160px) var(--pz-gutter) clamp(70px, 12vh, 140px); }
.pz-end__inner { max-width: 1120px; margin: 0 auto; }
.pz-end { overflow-x: clip; }
.pz-formula { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 18px; margin: 0 0 clamp(60px, 10vh, 110px); font: 700 clamp(20px, 2.4vw, 34px)/1.4 var(--pz-f-serif); }
.pz-formula i { font-style: normal; color: var(--pz-brand); font-family: var(--pz-f-sans); font-weight: 400; }
.js .pz-formula span, .js .pz-formula i { opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .9s var(--pz-ease); }
.pz-formula.is-in span, .pz-formula.is-in i { opacity: 1; transform: none; }
.pz-result { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.pz-result__card { position: relative; padding: 34px 32px 30px; border-radius: 30px; background: #fff; box-shadow: 0 30px 70px -30px rgba(31, 111, 104, .35), 0 0 0 1px var(--pz-line); }
.pz-result__eyebrow { margin: 0 0 24px; max-width: calc(100% - 84px); font: 700 15px/1.45 var(--pz-f-sans); letter-spacing: .3em; color: var(--pz-brand-strong); }
.pz-result__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pz-result__stats p { margin: 0; display: grid; gap: 6px; }
.pz-result__stats b { font: 900 clamp(34px, 4vw, 52px)/1 var(--pz-f-serif); font-variant-numeric: tabular-nums; }
.pz-result__stats small { color: var(--pz-muted); font-size: 14px; letter-spacing: .2em; }
.pz-result__stamp { position: absolute; right: -24px; top: -34px; width: 124px; height: 124px; display: grid; place-items: center; color: #d9534f; transform: scale(1.6) rotate(-20deg); opacity: 0; }
.pz-result__stamp svg { position: absolute; inset: 0; }
.pz-result__stamp circle { fill: rgba(217, 83, 79, .05); stroke: currentColor; stroke-width: 3.5; }
.pz-result__stamp circle + circle { fill: none; stroke-width: 1.6; stroke-dasharray: 3 3; }
.pz-result__stamp path { fill: rgba(217, 83, 79, .12); stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pz-result__stamp b { position: relative; top: 18px; font: 900 18px/1 var(--pz-f-serif); letter-spacing: .08em; }
.pz-result.is-stamped .pz-result__stamp { animation: pz-stampin .55s cubic-bezier(.3, 1.6, .5, 1) .5s forwards; }
/* not lifted yet: the place where the stamp will land stays empty, and the reader is sent back to the bar */
.pz-result__slot { position: absolute; right: -24px; top: -34px; width: 124px; height: 124px; display: none; place-items: center; text-align: center; border-radius: 50%;
  border: 2px dashed rgba(217, 83, 79, .5); background: #fff; color: rgba(217, 83, 79, .8); font: 700 14px/1.5 var(--pz-f-sans); letter-spacing: .12em; transform: rotate(-12deg); }
.pz-result.is-todo .pz-result__slot { display: grid; }
.pz-result.is-todo [data-r="sets"] { color: #d9534f; }
.pz-end__back { margin: 22px 0 0; }
.pz-end__back button { border: 0; border-radius: 999px; padding: 15px 28px; background: #1A7D76; color: #fff; font: 700 17px/1 var(--pz-f-sans); letter-spacing: .1em; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(31, 111, 104, .7); transition: transform .25s var(--pz-ease); }
.pz-end__back button:hover { transform: translateY(-2px); }
.pz-end__back button:focus-visible { outline: 3px solid var(--pz-site-teal); outline-offset: 3px; }
[hidden] { display: none !important; }
@keyframes pz-stampin { to { opacity: 1; transform: scale(1) rotate(-12deg); } }
.pz-result__yaya { position: absolute; left: -58px; bottom: -64px; width: 92px; aspect-ratio: 200 / 220; }
.pz-end__title { margin: 0 0 18px; font: 900 clamp(30px, 4vw, 58px)/1.25 var(--pz-f-serif); }
.pz-end__title b { color: var(--pz-site-teal-strong); font-variant-numeric: tabular-nums; }
.pz-end__lead { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.8; color: var(--pz-muted); }
.pz-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(48px, 8vh, 84px) 0 0; justify-content: center; }
.pz-cta a { display: inline-flex; align-items: center; min-height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: transform .35s var(--pz-ease), box-shadow .35s; }
.pz-cta__primary { color: #fff !important; background: linear-gradient(135deg, #1F8E86, #1A7D76); box-shadow: 0 14px 30px -12px rgba(49, 170, 161, .7); }
.pz-cta__secondary { color: var(--pz-ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--pz-line); }
.pz-cta a:hover { transform: translateY(-2px); }
.pz-end__more { margin: 34px 0 0; text-align: center; }
.pz-end__more a { color: var(--pz-brand-strong); font-weight: 700; text-decoration: none; letter-spacing: .06em; }
.pz-end__note { margin: 50px auto 0; max-width: 640px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--pz-muted); }
.pz-footer { position: relative; z-index: 2; background: #f3f7f7; color: var(--pz-muted); padding: 40px var(--pz-gutter) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pz-line); }
.pz-footer__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 10px; font-size: 13px; line-height: 1.7; }
.pz-footer img { height: 30px; width: auto; margin-bottom: 6px; }
.pz-footer p { margin: 0; }

/* ---------- round 5: two desks, the evidence, the AI that asks back, the self-regulated learner ---------- */
.pz-line--gap { margin-top: clamp(50px, 8vh, 100px) !important; }
.pz-cite { position: relative; max-width: 760px !important; margin-top: clamp(26px, 4vh, 44px) !important; margin-bottom: 0; padding: 2px 0 2px 18px; font: 400 clamp(14px, 1.05vw, 16px)/1.8 var(--pz-f-sans); letter-spacing: .02em; color: var(--pz-chalk-2);
  border-left: 3px solid var(--pz-accent-line); }
.pz-cite:empty { display: none; }
.pz-cite b { display: block; margin-bottom: 2px; font: 700 12px/1.6 var(--pz-f-sans); letter-spacing: .24em; color: var(--pz-accent-text); }
.pz-cite a, .pz-bars figcaption a { color: var(--pz-accent-text); text-underline-offset: 3px; white-space: nowrap; }
.pz-cite a::before, .pz-facts small a::before, .pz-habits__list small a::before { content: "（"; }
.pz-cite a::after, .pz-facts small a::after, .pz-habits__list small a::after { content: "）"; }
.pz-statement + .pz-cite { margin-top: calc(clamp(80px, 13vh, 170px) * -.62) !important; margin-bottom: clamp(60px, 9vh, 120px); }

.pz-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 56px); margin-bottom: clamp(70px, 11vh, 140px) !important; }
.pz-kid .pz-panel { aspect-ratio: 4 / 3; margin-bottom: clamp(20px, 3vh, 34px); }
.pz-kid:nth-child(2) { margin-top: clamp(0px, 7vw, 110px); }
.pz-kid .pz-line { margin-bottom: .4em; }

.pz-proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 90px); align-items: center; margin-bottom: clamp(50px, 8vh, 100px) !important; }
/* white cards keep ink-on-paper colours wherever they sit (dark rooms, ?theme=dark) */
.pz-bars, .pz-facts li, .pz-chat { --pz-accent-text: var(--pz-brand-strong); color: var(--pz-ink); }
.pz-bars { margin: 0; padding: clamp(22px, 2.6vw, 36px); border-radius: 24px; background: #fff; box-shadow: var(--pz-lift-shadow); container-type: inline-size; }
/* four equal columns that never grow past the card; the figures and labels scale with the card itself (cqi), not the window */
.pz-bars__plot { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(6px, 3cqi, 18px); }
.pz-bars__above { height: 176px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; border-bottom: 2px solid var(--pz-ink); }
.pz-bars__below { height: 196px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pz-bars__plot span { display: block; width: min(120px, 70%); border-radius: 12px 12px 0 0; background: var(--pz-site-teal-strong); height: calc(var(--h) * var(--u, 5px)); transform-origin: bottom; }
.pz-bars__below span { border-radius: 0 0 12px 12px; background: var(--pz-danger-border); transform-origin: top; }
.pz-bars__plot b { font: 900 clamp(18px, 7.2cqi, 38px)/1 var(--pz-f-serif); white-space: nowrap; color: var(--pz-brand-strong); font-variant-numeric: tabular-nums; }
.pz-bars__below b { color: var(--pz-danger); }
.pz-bars__plot em { font: 700 clamp(12px, 3.5cqi, 18px)/1.4 var(--pz-f-sans); font-style: normal; text-align: center; color: var(--pz-ink); padding: 8px 0; }
.pz-bars__plot small { display: block; text-wrap: balance; font-weight: 400; font-size: clamp(11px, 2.6cqi, 13px); color: var(--pz-muted); letter-spacing: .06em; }
.pz-bars figcaption { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--pz-muted); }
.js .pz-bars span { transform: scaleY(0); transition: transform 1.3s var(--pz-ease) .3s; }
.js .pz-bars__below span { transition-delay: 1.5s; }
.js .pz-bars__col:nth-child(3) span { transition-delay: 2.3s; }
.js .pz-bars__col:nth-child(4) span { transition-delay: 2.8s; }
.js .pz-bars b { opacity: 0; transition: opacity .6s 1.1s; }
.js .pz-bars__below b { transition-delay: 2.4s; }
.js .pz-bars__col:nth-child(3) b { transition-delay: 3.2s; }
.js .pz-bars__col:nth-child(4) b { transition-delay: 3.7s; }
.js .pz-bars.is-in span { transform: none; }
.js .pz-bars.is-in b { opacity: 1; }
.pz-asks { display: grid; gap: clamp(50px, 8vh, 96px); margin-top: clamp(80px, 12vh, 150px) !important; }
.pz-ask { max-width: 980px; margin: 0; padding: 0; }
.pz-ask--parent { justify-self: end; text-align: right; }
.pz-ask--parent p { color: var(--pz-brand-strong); }
.pz-asks + .pz-cite { margin-top: clamp(40px, 6vh, 70px) !important; }
.pz-ask p { margin: 0; font: 900 clamp(28px, 4vw, 60px)/1.35 var(--pz-f-serif); letter-spacing: .02em; color: var(--pz-danger); }
.pz-ask footer { margin-top: 18px; font: 400 clamp(15px, 1.2vw, 18px)/1.6 var(--pz-f-hand); letter-spacing: .08em; color: var(--pz-chalk-3); }

.pz-cite--center { margin-left: auto !important; margin-right: auto !important; border-left: 0; padding-left: 0; text-align: center; }
.pz-statement--xl + .pz-cite { margin-top: calc(clamp(80px, 13vh, 170px) * -.6) !important; }
.pz-facts { margin: 0 auto clamp(30px, 5vh, 60px); padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 36px); }
.pz-facts li { padding: clamp(22px, 2.6vw, 38px); border-radius: 24px; background: #fff; box-shadow: var(--pz-lift-shadow); }
.pz-facts b { display: block; font: 900 clamp(40px, 5vw, 76px)/1 var(--pz-f-serif); color: var(--pz-danger); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pz-facts b i { margin: 0 .3em; font: 700 .32em/1 var(--pz-f-sans); font-style: normal; color: var(--pz-muted); vertical-align: .5em; }
.pz-facts p { margin: 16px 0 12px; font: 500 clamp(17px, 1.45vw, 21px)/1.7 var(--pz-f-sans); color: var(--pz-ink); }
.pz-facts small, .pz-habits__list small, .pz-voice footer span { display: block; font: 400 13px/1.6 var(--pz-f-sans); color: var(--pz-muted); }
.pz-facts a, .pz-habits__list a, .pz-voice a, .pz-voices a { color: var(--pz-accent-text); text-underline-offset: 3px; }
.pz-voice { max-width: 980px !important; margin: calc(clamp(80px, 13vh, 170px) * -.45) auto clamp(70px, 11vh, 140px); padding: 0 0 0 clamp(20px, 2.4vw, 34px); border-left: 4px solid var(--pz-site-teal-strong); }
.pz-voice p { margin: 0; font: 700 clamp(22px, 2.5vw, 38px)/1.5 var(--pz-f-serif); }
.pz-voice footer { margin-top: 14px; font: 500 15px/1.6 var(--pz-f-sans); color: var(--pz-chalk-2); }
.pz-habits__list small { margin-top: 16px; font-family: var(--pz-f-sans); font-weight: 400; letter-spacing: 0; }

/* the AI that asks back: a plain chat next to the student app's own 問伴伴 dialog */
.pz-aimii { margin-top: clamp(90px, 14vh, 170px); }
.pz-aimii__head { margin-top: 0; }
.pz-duel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 2.6vw, 40px); align-items: stretch; margin-top: clamp(30px, 5vh, 56px); }
.pz-chat { --pz-fg: 38 43 53; position: relative; margin: 0; display: grid; grid-template-rows: auto 1fr auto; border-radius: 24px; background: #fff; color: #111827; box-shadow: var(--pz-lift-shadow); overflow: hidden;
  font-family: var(--pz-f-sans); }
.pz-chat__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.pz-chat__bar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.pz-chat__bar i { width: 28px; height: 28px; border-radius: 50%; background: #d1d5db; }
.pz-chat__bar b { font-weight: 700; }
.pz-chat--aimii .pz-chat__bar b { color: var(--pz-tiffany); }
.pz-chat__bar b span { margin-left: 4px; font-weight: 400; color: #6b7280; }
.pz-chat__log { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 18px; }
.pz-chat__ctx { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 12px; color: #4b5563; background: color-mix(in oklab, var(--pz-tiffany-2) 50%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pz-tiffany) 20%, transparent); }
.pz-msg { margin: 0; max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; }
.pz-msg--me { align-self: flex-end; background: #1A7D76; color: #fff; }   /* the product's bubble is lighter; here white text has to be readable */
.pz-msg--ai { align-self: flex-start; background: var(--pz-tiffany-2); color: #111827; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.pz-msg small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: #0d9488; }
.pz-chat--plain .pz-msg--me { background: #374151; }
.pz-chat--plain .pz-msg--ai { background: #f3f4f6; font-variant-numeric: tabular-nums; }
.pz-msg--dots { position: absolute; left: 16px; display: flex; gap: 6px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--pz-tiffany-2); opacity: 0; pointer-events: none; }
.pz-chat--plain .pz-msg--dots { background: #f3f4f6; }
.pz-msg--dots.is-on { opacity: 1; }
.pz-msg--dots i { width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; animation: pz-dot 1s ease-in-out infinite; }
.pz-chat--plain .pz-msg--dots i { background: #9ca3af; }
.pz-msg--dots i:nth-child(2) { animation-delay: .15s; } .pz-msg--dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pz-dot { 50% { transform: translateY(-5px); } }
.pz-chat figcaption { padding: 14px 18px 16px; border-top: 1px solid #f3f4f6; font: 500 clamp(15px, 1.2vw, 17px)/1.6 var(--pz-f-sans); color: #4b5563; }
.pz-chat figcaption b { font: 900 clamp(18px, 1.6vw, 23px)/1.4 var(--pz-f-serif); margin-right: .4em; color: var(--pz-danger); }
.pz-chat--aimii figcaption b { color: var(--pz-brand-strong); }
.js .pz-duel.is-armed .pz-msg:not(.pz-msg--dots), .js .pz-duel.is-armed .pz-chat figcaption { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--pz-ease), transform .6s var(--pz-ease); }
.js .pz-duel.is-armed .pz-msg.is-on, .js .pz-duel.is-armed .pz-chat figcaption.is-on { opacity: 1; transform: none; }
.pz-aimii__note { margin-bottom: clamp(40px, 6vh, 70px); }
/* tutor / after-school care vs. the learning coach: same "someone beside the child", different things in hand */
.pz-vs { margin-top: clamp(60px, 10vh, 120px); }
.pz-vs__table { margin: clamp(24px, 4vh, 44px) 0 clamp(28px, 4vh, 48px); display: grid; gap: 10px; }
.pz-vs__row { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; align-items: stretch; }
.pz-vs__row > * { margin: 0; padding: clamp(14px, 1.5vw, 22px) clamp(16px, 1.8vw, 26px); border-radius: 16px; font: 500 clamp(15px, 1.2vw, 18px)/1.7 var(--pz-f-sans); }
.pz-vs__row > b { display: flex; align-items: center; padding-left: 0; font: 900 clamp(17px, 1.5vw, 22px)/1.4 var(--pz-f-serif); color: var(--pz-ink); }
.pz-vs__row > span:nth-child(2) { color: var(--pz-muted); background: rgb(var(--pz-fg) / .045); }
.pz-vs__row > span:nth-child(3) { color: var(--pz-ink); background: #fff; box-shadow: inset 3px 0 0 var(--pz-site-teal-strong), 0 0 0 1px var(--pz-line), 0 16px 30px -22px rgba(20, 60, 58, .4); }
.pz-vs__row--head > span { padding-top: 0; padding-bottom: 4px; background: none !important; box-shadow: none !important; font: 700 13px/1.4 var(--pz-f-sans); letter-spacing: .18em; color: var(--pz-muted); }
.pz-vs__row--head > span:nth-child(3) { color: var(--pz-brand-strong); }
.pz-diff { margin-top: clamp(50px, 8vh, 96px); }
.pz-diff__list { margin: clamp(20px, 3vh, 34px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.pz-diff__list li { padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; background: #fff; box-shadow: var(--pz-lift-shadow); }
.pz-diff__list b { display: block; margin-bottom: 10px; font: 900 clamp(21px, 2vw, 28px)/1.35 var(--pz-f-serif); color: var(--pz-brand-strong); }
.pz-diff__list span { font: 500 clamp(16px, 1.25vw, 18px)/1.75 var(--pz-f-sans); color: var(--pz-ink); }
.pz-habits { margin-top: clamp(70px, 11vh, 140px); }
.pz-habits__list { margin: clamp(24px, 4vh, 44px) 0 0; padding: 0; list-style: none; counter-reset: h; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.pz-habits__list li { counter-increment: h; position: relative; padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; background: var(--pz-brand-surface); font: 900 clamp(22px, 2.3vw, 34px)/1.4 var(--pz-f-serif); color: var(--pz-brand-strong); }
.pz-habits__list li::before { content: counter(h); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%; background: var(--pz-site-teal-strong); color: #fff; font: 700 16px/1 var(--pz-f-sans); }
.pz-habits__list b, .pz-habits__list span { display: block; font-weight: 900; }
.pz-habits__list span { color: var(--pz-ink); }

/* the self-regulated learner */
.pz-srl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 90px); align-items: center; margin-top: clamp(90px, 14vh, 170px); }
.pz-cycle { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin: 0 auto; }
.pz-cycle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pz-cycle__track { fill: none; stroke: rgb(var(--pz-fg) / .2); stroke-width: 2; }
.pz-cycle__run { fill: none; stroke: var(--pz-brand-border); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 150 792.5; transform-origin: 200px 200px; animation: pz-run 7s linear infinite; filter: drop-shadow(0 0 8px rgba(129, 214, 208, .7)); }
@keyframes pz-run { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.pz-cycle ol { margin: 0; padding: 0; list-style: none; }
.pz-cycle li { position: absolute; width: 9.5em; transform: translate(-50%, -50%); padding: 12px 10px; border-radius: 16px; text-align: center; background: var(--pz-here); box-shadow: inset 0 0 0 1.5px rgb(var(--pz-fg) / .3); }
.pz-cycle li:nth-child(1) { left: 50%; top: 12.5%; } .pz-cycle li:nth-child(2) { left: 82.5%; top: 68.75%; } .pz-cycle li:nth-child(3) { left: 17.5%; top: 68.75%; }
.pz-cycle li b { display: block; font: 900 clamp(20px, 2vw, 28px)/1.2 var(--pz-f-serif); letter-spacing: .12em; color: var(--pz-accent-text); }
.pz-cycle li span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--pz-chalk-2); }
.pz-cycle__hub { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); text-align: center; font: 900 clamp(22px, 2.4vw, 34px)/1.3 var(--pz-f-serif); letter-spacing: .08em; }
.pz-native { max-width: 900px !important; margin-top: clamp(90px, 14vh, 170px) !important; }
.pz-traits { margin: clamp(18px, 3vh, 30px) 0 clamp(26px, 4vh, 44px); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.pz-traits li { padding: clamp(18px, 2vw, 26px); border-radius: 20px; box-shadow: inset 0 0 0 1px rgb(var(--pz-fg) / .22); }
.pz-traits b { display: block; margin-bottom: 8px; font: 900 clamp(24px, 2.4vw, 36px)/1.2 var(--pz-f-serif); letter-spacing: .1em; color: var(--pz-accent-text); }
.pz-traits span { font: 500 clamp(16px, 1.3vw, 19px)/1.7 var(--pz-f-sans); color: var(--pz-chalk-2); }
.pz-voices { margin: clamp(60px, 9vh, 110px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.pz-voices:empty { display: none; }
.pz-voices li { display: grid; align-content: start; gap: 14px; padding: clamp(20px, 2.2vw, 30px); border-radius: 22px; box-shadow: inset 0 0 0 1px rgb(var(--pz-fg) / .2); }
.pz-voices q { quotes: none; font: 700 clamp(17px, 1.5vw, 21px)/1.65 var(--pz-f-serif); color: var(--pz-chalk); }
.pz-voices small { font-size: 13px; line-height: 1.6; color: var(--pz-chalk-3); }
.pz-voices small b { display: block; font-size: 14px; color: var(--pz-accent-text); letter-spacing: .06em; }
.pz-voices + .pz-line { margin-top: clamp(80px, 12vh, 150px) !important; text-align: center; }
.pz-refs { max-width: 760px; margin: 28px auto 0; font-size: 13px; line-height: 1.75; color: var(--pz-muted); }
.pz-refs summary { cursor: pointer; text-align: center; font-weight: 700; letter-spacing: .08em; color: var(--pz-brand-strong); padding: 10px 0; }
/* reference list: APA style — unnumbered, hanging indent, alphabetical */
.pz-refs ul { margin: 16px 0 0; padding: 0; list-style: none; }
.pz-refs li { margin-bottom: 10px; padding: 2px 6px 2px 2.4em; text-indent: -2em; border-radius: 8px; transition: background .6s; }
.pz-refs i { font-style: italic; }
.pz-refs a { color: var(--pz-brand-strong); word-break: break-all; }

/* 芽芽 as the spotter: a small figure with a speech bubble, placed inside the block it is coaching */
.pz-coach { display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.pz-coach__say { position: relative; margin: 0 0 18px; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: #fff; color: var(--pz-ink); font: 700 clamp(14px, 1.15vw, 17px)/1.5 var(--pz-f-sans); letter-spacing: .04em;
  box-shadow: 0 12px 30px -14px rgba(20, 60, 58, .55), 0 0 0 1px rgba(38, 43, 53, .06); transform-origin: 100% 100%; }
.pz-coach__say.is-pop { animation: pz-saypop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pz-saypop { from { transform: scale(.7); opacity: 0; } }
.pz-coach__yaya { flex: none; width: 84px; aspect-ratio: 433 / 400; }
.pz-coach--lift { position: absolute; right: clamp(10px, 2vw, 28px); bottom: 0; z-index: 2; }
.pz-coach--lift .pz-coach__yaya { margin-bottom: -12px; --live-scale: 1.5; --live-drop: 2; }
.pz-coach--lift .pz-coach__yaya { width: clamp(84px, 9vw, 128px); }
.pz-liftmod.is-done .pz-coach--lift .pz-coach__yaya .pz-yaya__img { animation-duration: 1.2s; }
.pz-coach--gauge { justify-content: flex-end; margin-top: 18px; }
.pz-coach--gauge .pz-coach__yaya { width: 62px; aspect-ratio: 358 / 400; }
.pz-coach--gauge .pz-gauge__hint { margin: 0 0 22px; text-align: left; font: 700 15px/1.5 var(--pz-f-sans); color: var(--pz-ink); }
.pz-gauge.is-right .pz-coach--gauge .pz-gauge__hint { color: var(--pz-brand-strong); }
.pz-compare__yaya { position: absolute; right: clamp(150px, 16vw, 230px); bottom: -12px; width: clamp(64px, 7vw, 104px); aspect-ratio: 433 / 400; }
.pz-cycle__hub { display: grid; justify-items: center; gap: 8px; }
.pz-cycle__hub p { margin: 0; font: 900 clamp(16px, 1.5vw, 21px)/1.4 var(--pz-f-serif); letter-spacing: .08em; }
.pz-cycle__yaya { width: clamp(64px, 6.5vw, 96px); aspect-ratio: 390 / 400; }
.pz-dawn__yaya { width: clamp(64px, 6vw, 92px); aspect-ratio: 358 / 400; margin-top: clamp(18px, 3vh, 34px); }

/* ---------- 芽芽 ---------- */
.pz-yaya { display: block; }
.pz-coach__yaya, .pz-cycle__yaya, .pz-dawn__yaya { position: relative; }
/* the Live2D figure: its frame leaves room around the body for effects, so it is drawn larger than the still and bottom-aligned */
.pz-yaya__live { position: absolute; left: 50%; bottom: calc(var(--live-drop, 9) * -1%); width: calc(var(--live-scale, 1.7) * 100%); height: calc(var(--live-scale, 1.7) * 100% * var(--live-ratio, 1.12));
  transform: translateX(-50%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.pz-yaya[data-tap="1"] .pz-yaya__live { pointer-events: auto; }
.pz-yaya.is-live .pz-yaya__live { opacity: 1; }
.pz-yaya.is-live .pz-yaya__img { opacity: 0; animation: none; }
.pz-yaya__img { transition: opacity .4s; }
/* a recorded motion plays on a canvas over the resting figure (yaya.js) */
.pz-yaya__anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 10px 14px rgba(20, 90, 84, .22)); }
.pz-yaya.is-playing .pz-yaya__anim { opacity: 1; }
.pz-yaya.is-playing .pz-yaya__img { opacity: 0; animation: none; transition: none; }
.pz-yaya[data-tap="1"] { cursor: pointer; pointer-events: auto; }
.pz-reduced .pz-gate__inner > *, .pz-reduced .pz-gate .pz-btn--chalk { animation: none !important; }
.pz-reduced .pz-gate__img { transform: none; transition: opacity .4s; }
.pz-reduced .pz-gate__glow { animation: none; }
.pz-yaya__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%;
  rotate: var(--yy-tilt, 0deg); transition: rotate .5s cubic-bezier(.3, 1.4, .5, 1); animation: yy-float 3.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(20, 90, 84, .22)); }
.pz-yaya.is-cheer .pz-yaya__img { animation-duration: 1.4s; }
.pz-yaya.is-pop .pz-yaya__img { animation: yy-pop .6s cubic-bezier(.3, 1.6, .5, 1), yy-float 3.6s ease-in-out .6s infinite; }
@keyframes yy-float { 50% { translate: 0 -5px; } }
/* the peeking pose is cut off at the bottom: it must stay tucked behind the edge it peeks over, so it only dips, never lifts */
.pz-yaya.is-peek .pz-yaya__img { animation-name: yy-peek; filter: none; }
.pz-yaya.is-peek.is-pop .pz-yaya__img { animation: yy-peekpop .5s cubic-bezier(.3, 1.5, .5, 1), yy-peek 3.6s ease-in-out .5s infinite; }
@keyframes yy-peek { 50% { translate: 0 5px; } }
@keyframes yy-peekpop { 0% { translate: 0 40%; } 100% { translate: 0 0; } }
@keyframes yy-pop { 0% { scale: .4; translate: 0 20px; opacity: 0; } 100% { scale: 1; translate: 0 0; opacity: 1; } }

/* ---------- tablet & phone ---------- */
@media (max-width: 1024px) {
  .pz-tabmod { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pz-mapmod { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 900px) {
  :root { --pz-gutter: 20px; }
  .pz-hud { gap: 10px; padding-top: max(10px, env(safe-area-inset-top)); }
  .pz-hud__brand img { height: 22px; }
  .pz-hud__read { display: none; }
  .pz-path { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .85); box-shadow: 0 6px 20px -10px rgba(20, 60, 58, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .5s, transform .5s var(--pz-ease), background .5s; }
  .pz-hud-dark .pz-path { background: rgba(0, 0, 0, .55); box-shadow: none; }
  .pz-light .pz-path { opacity: 0; pointer-events: none; transform: translate(-50%, 16px); }
  .pz-path li + li::before { width: 12px; }
  .pz-path__label { top: -28px; }
  .pz-tally__marks { width: 60px; }
  .pz-ch { padding-top: 84px; }
  .pz-split, .pz-split--rev, .pz-split--year, .pz-split--lens, .pz-day { grid-template-columns: 1fr; gap: 34px; }
  .pz-day__copy { columns: 1; }
  .pz-daybar__listen { font-size: 14px; }
  .pz-panel, .pz-panel--tall { aspect-ratio: 4 / 5; }
  .pz-diptych { grid-template-columns: 1fr; gap: 120px; margin-bottom: 120px !important; }
  .pz-diptych .pz-panel { aspect-ratio: 4 / 3; }
  .pz-hero__art { bottom: auto; height: 70%; }
  .pz-hero__art img, .pz-hero__art video { object-position: 50% 0%; }
  .pz-hero__art img, .pz-hero__art video { animation: pz-push 22s ease-out both; }
  @keyframes pz-push { from { transform: scale(1.12); } to { transform: scale(1); } }
  .pz-hero__art::after { background: linear-gradient(0deg, rgba(14, 14, 13, 1) 0%, rgba(14, 14, 13, 0) 26%); }
  .pz-hero__copy { bottom: 92px; }
  .pz-lede { font-size: 23px; }
  .pz-lede--punch { font-size: 36px; }
  .pz-statement { margin: 90px auto; }
  /* the day turns vertical: hours run down the left edge */
  .pz-daybar { height: 600px; }
  .pz-daybar__track { left: 46px; right: auto; top: 0; bottom: 0; width: 60px; height: auto; }
  .pz-daybar__track::before { left: 29px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pz-daybar__block { left: 0; width: 60px; height: auto; }
  .pz-daybar__fill { transform-origin: center top; transform: scaleY(var(--fill, 0)); }
  .pz-daybar__name { left: 74px; bottom: auto; top: 6px; }
  .pz-daybar__thumb { left: 74px; bottom: auto; top: 34px; width: min(190px, 50vw); transform: rotate(-2deg) translateY(calc((1 - var(--fill, 0)) * 16px)); }
  .pz-daybar__block + .pz-daybar__block .pz-daybar__thumb { transform: rotate(2deg) translateY(calc((1 - var(--fill, 0)) * 16px)); }
  .pz-daybar__listen { left: 50% !important; top: auto; transform: translate(-50%, -50%); }
  .pz-daybar__hours { left: 0; right: auto; top: 0; bottom: 0; width: 34px; height: auto; }
  .pz-daybar__hours span { left: 0; transform: translateY(-50%); }
  .pz-tallyboard { right: 8px; top: 8px; padding: 6px 8px; font-size: 14px; }
  .pz-tallyboard p { grid-template-columns: 34px 150px; }
  .pz-tallyboard svg { width: 150px; height: 28px; }
  .pz-liftmod { height: 230vh; }
  .pz-liftmod__pin { padding-top: 64px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); gap: 10px; }
  .pz-liftmod__call { font-size: 40px; }
  .pz-liftmod__stage { aspect-ratio: 4 / 5; justify-self: center; height: 100%; max-width: 100%; }
  .pz-liftmod__btn { width: 96px; height: 96px; }
  .pz-liftmod__status { font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
  .pz-coach--lift .pz-coach__say { white-space: nowrap; }
  .pz-year__grid { grid-template-columns: repeat(21, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 2px; }
  .pz-tabmod { grid-template-columns: 1fr; gap: 0; }
  .pz-tabmod__sticky { height: auto; top: 50px; z-index: 3; padding: 8px 0 16px; background: linear-gradient(var(--pz-here) 86%, transparent); }
  .pz-tabmod__art { display: none; }
  .pz-pad { border-radius: 18px; padding: 8px; }
  .pz-pad__screen { aspect-ratio: 4 / 3.3; border-radius: 12px; }
  .pz-pad__press { font-size: 13px; bottom: -14px; }
  .pz-pad__yaya { right: -4px; bottom: -30px; width: 58px; height: 76px; }
  .pz-tabmod__steps li { min-height: 60vh; align-content: end; padding-bottom: 10vh; }
  .pz-tabmod__steps p { font-size: 22px; }
  .pz-games__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pz-game__screen { border-width: 4px; border-radius: 10px; }
  .pz-ask--parent { justify-self: start; text-align: left; }
  .pz-game:nth-child(2) { margin-top: 0; }
  .pz-coinfx { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .pz-gauge__art { width: 100%; margin-bottom: -16%; }
  .pz-gauge__dial { margin: 0 auto; width: 92%; }
  .pz-gauge__hint { text-align: center; }
  .pz-mapmod { grid-template-columns: 1fr; gap: 0; }
  .pz-mapmod__sticky { height: auto; top: 50px; z-index: 3; padding: 6px 0 10px; background: linear-gradient(var(--pz-here) 88%, transparent); }
  .pz-map { aspect-ratio: 4 / 4.4; max-height: 56svh; }
  .pz-map__label { font-size: 12px; padding: 4px 9px; }
  .pz-mapmod__steps li { min-height: 52vh; align-content: end; padding-bottom: 10vh; }
  .pz-mapmod__steps p { font-size: 21px; }
  .pz-data { grid-template-columns: repeat(2, auto); gap: 18px 24px; }
  .pz-lens__yaya { width: 58px; right: -6px; bottom: -26px; }
  .pz-dinner .pz-bubble { left: 4%; right: 4%; bottom: 4%; max-width: none; padding: 14px 16px; }
  .pz-compare { aspect-ratio: 4 / 5; }
  .pz-notebook { transform: none; }
  .pz-dawn { height: calc(132 * var(--pz-vh)); }
  .pz-dawn__art::after { background: linear-gradient(0deg, rgba(251, 253, 253, 1) 0%, rgba(255, 248, 236, .9) 40%, rgba(255, 248, 236, 0) 58%), linear-gradient(180deg, var(--pz-night) 0%, rgba(14, 14, 13, 0) 12%) !important; }
  .pz-dawn__art img, .pz-dawn__art video { object-position: 50% 50%; }
  .pz-dawn__art::after { background: linear-gradient(0deg, rgba(251, 253, 253, 1) 0%, rgba(255, 248, 236, .85) 34%, rgba(255, 248, 236, 0) 62%), linear-gradient(180deg, var(--pz-night) 0%, rgba(14, 14, 13, 0) 12%); }
  .pz-dawn__copy { top: auto; bottom: 40px; transform: none; }
  /* longer languages climb onto the picture: a pale halo keeps the words readable there */
  .pz-dawn__copy .pz-line, .pz-dawn__copy .pz-statement { text-shadow: 0 0 14px rgb(255 248 236), 0 0 6px rgb(255 248 236), 0 0 2px rgb(255 248 236); }
  :is([data-lang="en"], [data-lang="vi"], [data-lang="ko"], [data-lang="ja"]) .pz-dawn { height: calc(150 * var(--pz-vh)); }
  .pz-coach--lift { right: 6px; }
  .pz-coach--lift .pz-coach__say { font-size: 13px; padding: 8px 12px; }
  .pz-compare__yaya { right: 14px; width: 60px; }
  .pz-compare figcaption { top: 14px; bottom: auto; }
  .pz-cycle__hub p { display: none; }
  .pz-cycle__yaya { width: 74px; }
  .pz-coach--gauge { justify-content: center; }
  .pz-facts { grid-template-columns: 1fr; }
  .pz-traits, .pz-diff__list { grid-template-columns: 1fr; }
  .pz-bars { padding: 18px 10px 16px; }
  .pz-bars__plot small { letter-spacing: 0; }
  .pz-bars figcaption { padding: 0 6px; }
  .pz-vs__row--head { display: none; }
  .pz-vs__row { grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
  .pz-vs__row > b { padding: 0 2px; }
  .pz-vs__row > span::before { display: block; margin-bottom: 4px; font: 700 12px/1.4 var(--pz-f-sans); letter-spacing: .16em; }
  .pz-vs__row > span:nth-child(2)::before { content: attr(data-h); color: var(--pz-muted); }
  .pz-vs__row > span:nth-child(3)::before { content: attr(data-h); color: var(--pz-brand-strong); }
  .pz-stages li { grid-template-columns: 1fr; gap: 2px; padding: 10px 14px; }
  .pz-two, .pz-proof, .pz-duel, .pz-srl, .pz-voices, .pz-habits__list { grid-template-columns: 1fr; }
  .pz-two { gap: 56px; }
  .pz-kid:nth-child(2) { margin-top: 0; }
  .pz-kid .pz-panel { aspect-ratio: 4 / 5; }
  .pz-msg { max-width: 88%; }
  .pz-cycle li { width: 8.4em; padding: 9px 6px; }
  .pz-cycle li:nth-child(2) { left: 80%; } .pz-cycle li:nth-child(3) { left: 20%; }
  .pz-cycle li span { font-size: 12px; }
  .pz-statement + .pz-cite { margin-top: -54px !important; }
  .pz-result { grid-template-columns: 1fr; }
  .pz-result__stamp { right: -6px; top: -40px; width: 104px; height: 104px; }
  .pz-result__slot { right: -6px; top: -40px; width: 104px; height: 104px; font-size: 13px; }
  .pz-result__yaya { left: auto; right: 10px; bottom: -52px; width: 62px; }
  .pz-end__title { margin-top: 30px; }
}

/* ---------- reduced motion / no js ---------- */
.pz-reduced .pz-time::before, .pz-reduced .pz-cue i, .pz-reduced .pz-map__btn, .pz-reduced .pz-yaya * { animation: none !important; transition: none !important; }
.pz-reduced [data-reveal], .pz-reduced [data-split] .pz-split-char { transition-duration: .01s !important; }
html.no-js .pz-gate, html.no-js .pz-dust, html.no-js .pz-tally, html.no-js .pz-sound, html.no-js .pz-liftmod, html.no-js .pz-map__btn,
html.no-js .pz-daybar, html.no-js .pz-year, html.no-js .pz-after, html.no-js .pz-result, html.no-js .pz-lang { display: none; }
html.no-js .pz-map { background: #070909 url(https://www.edubaania.com/philosophy-assets/m-33bc470a86/assets/img/map-still.webp) center / cover no-repeat; }
html.no-js .pz-tabmod__steps li, html.no-js .pz-mapmod__steps li { opacity: 1; min-height: 0; padding: 24px 0; }
html.no-js .pz-hand { clip-path: none; }
.pz-reduced .pz-cycle__run, .pz-reduced .pz-msg--dots i { animation: none; }
html.no-js .pz-bubble__new { clip-path: none; }
.pz-nogl .pz-map { background: #070909 url(https://www.edubaania.com/philosophy-assets/m-33bc470a86/assets/img/map-still.webp) center / cover no-repeat; }
.pz-nogl .pz-map__btn, .pz-nogl .pz-map__labels, .pz-nogl .pz-map__yaya { display: none; }

/* a phone held sideways: the stage beside the controls instead of above them */
@media (max-height: 520px) and (orientation: landscape) {
  .pz-liftmod__pin { grid-template-columns: minmax(0, 1fr) 132px; grid-template-rows: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; padding-top: 54px; padding-bottom: calc(58px + env(safe-area-inset-bottom)); }   /* clear of the chapter bar at the bottom */
  .pz-liftmod__head { grid-column: 1 / -1; }
  .pz-liftmod__call { font-size: 28px; }
  .pz-liftmod__stage { aspect-ratio: 16 / 9; height: 100%; justify-self: end; }
  .pz-liftmod__ui { grid-template-columns: 1fr; grid-auto-rows: auto; align-content: center; justify-items: center; gap: 10px; }
  .pz-liftmod__status, .pz-liftmod__btn, .pz-liftmod__skip { grid-column: 1; grid-row: auto; justify-self: center; text-align: center; }
  .pz-liftmod__btn { width: 88px; height: 88px; }
}
/* small targets on phones */
@media (max-width: 900px) {
  .pz-hud__brand { padding: 9px 0; }
  .pz-sound { min-width: 40px; height: 40px; justify-content: center; }
}