/* Sugama homepage, direction A "Sổ phép đêm sao" (night spellbook). Static, no build step.
   Palette (docs/05_frontend/homepage/proposals/A/concept.md): midnight, spell violet, dusk blue, gold ink, star cream, mint, coral.
   Midnight text on cream; glow stays around pictures and borders, never behind body copy. Coral and gold buttons carry
   midnight labels. Everything that moves stops under prefers-reduced-motion and with the "Tắt chuyển động" toggle (html.no-motion). */

@font-face {
  font-family: "Mali Sugama";
  src: url("../fonts/mali-bold.woff2") format("woff2");
  /* no digits: Mali's 3 and 7 read like 8 and ? on a maths page; they come from the next font of the stack */
  unicode-range: U+0020-002F, U+003A-007E, U+00A0-00FF, U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303, U+0309, U+0323, U+1EA0-1EF9, U+2010-2027, U+2030-203A, U+20AB, U+2190-2193, U+2212, U+2713;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MPlus Sugama";
  src: url("../fonts/mplus-rounded-bold-ja.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --midnight: #1D1A4E;
  --midnight-2: #252063;
  --midnight-3: #2F2878;
  --violet: #5A3FD6;
  --violet-ink: #4A31B8;
  --dusk: #3E6BE0;
  --gold: #FFC83D;
  --gold-deep: #C98F12;
  --gold-line: #E5B23A;
  --cream: #FFF4D6;
  --cream-2: #FBE9BD;
  --mint: #5FE3C8;
  --mint-deep: #0E7462;   /* 5.2:1 on cream (r06 QA: #138A73 was 3.9:1 for the demo's "+N" line) */
  --coral: #FF6B4A;
  --ink: #1D1A4E;
  --ink-soft: #3B3672;
  --on-night: #FFF4D6;
  --on-night-soft: #E6DDF7;
  --radius: 28px;
  --radius-s: 16px;
  --wrap: 1160px;
  --gutter: 20px;
  --head: "Mali Sugama", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --shadow: 0 18px 48px rgba(8, 6, 32, 0.45);
}
:lang(ja) {
  --head: "MPlus Sugama", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
/* smooth only for clicks on the page (site.js adds .smooth after load): a link from another page lands at once; never when
   the device asks for reduced motion (this rule outranks the plain "html" one in the reduced-motion block below) */
@media (prefers-reduced-motion: no-preference) {
  html.smooth:not(.no-motion) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-night);
  background-color: var(--midnight);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 244, 214, 0.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 8%, rgba(255, 244, 214, 0.6) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 38% 62%, rgba(255, 244, 214, 0.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 84% 44%, rgba(255, 244, 214, 0.65) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 24% 86%, rgba(255, 244, 214, 0.5) 50%, transparent 52%),
    radial-gradient(1px 1px at 92% 82%, rgba(255, 244, 214, 0.6) 50%, transparent 52%),
    linear-gradient(180deg, #1D1A4E 0%, #221d5c 40%, #1D1A4E 100%);
  background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 100% 100%;
  overflow-x: hidden;
}
:lang(ja) body, body:lang(ja) { line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #FFE08A; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.2; margin: 0 0 0.5em; letter-spacing: 0.005em; overflow-wrap: anywhere; text-wrap: balance; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { line-height: 1.35; overflow-wrap: normal; word-break: normal; word-break: auto-phrase; line-break: strict; }
p { margin: 0 0 1em; }
/* no one-word last lines ("tell.", "ます。") where the browser can avoid them */
p, li, figcaption, blockquote, summary { text-wrap: pretty; }
/* Japanese body text: strict kinsoku (no ー / small kana / 。at a line start) and breaks between phrases, not inside words
   ("ペッ|ト", "こたえか|た"); a phrase longer than the line still breaks */
:lang(ja) p, :lang(ja) li, :lang(ja) figcaption, :lang(ja) blockquote, :lang(ja) summary, :lang(ja) .btn, :lang(ja) .pill, :lang(ja) .tag {
  line-break: strict; word-break: normal; word-break: auto-phrase; overflow-wrap: break-word;
}
ul, ol { margin: 0; padding: 0; }
code { font-family: ui-monospace, "SF Mono", Consolas, "Cascadia Mono", monospace; font-size: 0.92em; background: rgba(90, 63, 214, 0.1); padding: 0.1em 0.35em; border-radius: 6px; white-space: normal; }
sup { font-size: 0.72em; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(820px, 100% - 2 * var(--gutter)); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 12px; }
.n, .q { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- top bar */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(23, 20, 64, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 200, 61, 0.22); }
.bar { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold); flex: none; }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 2px rgba(255, 200, 61, 0.5); }
.brand-name { font-family: "Mali Sugama", var(--head); font-size: 26px; font-weight: 700; color: var(--gold); text-shadow: 0 0 14px rgba(255, 200, 61, 0.35); line-height: 1; }
.nav { display: none; }
.nav a { color: var(--on-night); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 10px; border-radius: 10px; white-space: nowrap; }
.nav a:hover { background: rgba(255, 244, 214, 0.08); color: var(--gold); }
.nav .nav-cta { background: var(--coral); color: var(--ink); padding: 9px 16px; border-radius: 999px; font-family: var(--head); }
.nav .nav-cta:hover { background: #FF8466; color: var(--ink); }
.lang-switch { display: inline-flex; border: 1.5px solid rgba(255, 200, 61, 0.55); border-radius: 999px; padding: 2px; margin-left: auto; flex: none; }
.lang-switch a { color: var(--on-night); text-decoration: none; font-weight: 700; font-size: 13px; padding: 6px 10px; min-width: 44px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.lang-switch a[aria-current="page"] { background: var(--gold); color: var(--ink); }
.lang-switch a:not([aria-current]):hover { background: rgba(255, 244, 214, 0.12); }
.motion-toggle { font: 600 14px/1.2 var(--body); color: var(--on-night); background: transparent; border: 1.5px solid rgba(255, 244, 214, 0.35); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.motion-toggle:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.motion-toggle[aria-pressed="true"] { border-color: var(--mint); color: var(--mint); }
.motion-toggle:disabled { opacity: 0.75; cursor: default; }
.menu-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 48px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid rgba(255, 244, 214, 0.35); background: transparent; color: var(--on-night); font: 700 14px var(--body); cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.menu-text { display: none; }
@media (max-width: 419px) {
  .bar { gap: 8px; }
  .brand { gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 22px; }
  .lang-switch a { min-width: 38px; padding: 6px 7px; }
  .menu-btn { min-width: 44px; padding: 8px 10px; }
}
@media (max-width: 340px) { .brand-name { display: none; } }
@media (min-width: 420px) { .menu-text { display: inline; } }
/* phone / tablet drawer */
.nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: fixed; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; padding: 14px var(--gutter) 22px; background: rgba(23, 20, 64, 0.98); border-bottom: 1px solid rgba(255, 200, 61, 0.3); box-shadow: var(--shadow); }
.nav.open a { font-size: 17px; padding: 12px 14px; min-height: 48px; }
.nav.open .nav-cta { text-align: center; margin-top: 8px; }
.nav.open .motion-toggle { margin-top: 8px; align-self: flex-start; min-height: 44px; }
@media (min-width: 1180px) {
  .nav, .nav.open { display: flex; position: static; flex-direction: row; align-items: center; gap: 2px; margin-left: auto; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; }
  .nav.open a { font-size: 15px; padding: 8px 10px; min-height: 0; }
  .nav .nav-cta, .nav.open .nav-cta { margin: 0 6px 0 8px; padding: 9px 16px; }
  .nav .motion-toggle, .nav.open .motion-toggle { margin: 0 4px 0 2px; align-self: center; min-height: 40px; font-size: 13px; padding: 8px 12px; }
  .lang-switch { margin-left: 4px; }
  .menu-btn { display: none; }
}
:lang(ja) .nav a { font-size: 14px; padding: 8px 8px; }

/* ---------------------------------------------------------------- buttons, chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px; border-radius: 999px; font-family: var(--head); font-size: 17px; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.25; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-coral { background: var(--coral); color: var(--ink); box-shadow: 0 6px 0 #C2452A, 0 10px 24px rgba(255, 107, 74, 0.35); }
.btn-coral:hover { color: var(--ink); background: #FF8063; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 6px 0 var(--gold-deep), 0 10px 24px rgba(255, 200, 61, 0.3); }
.btn-gold:hover { color: var(--ink); background: #FFD567; }
.btn-mint { background: var(--mint); color: var(--ink); box-shadow: 0 5px 0 #2BAE93; }
.btn-mint:hover { color: var(--ink); }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 5px 0 #3A27A0; }
.btn-violet:hover { color: #fff; background: #6A50E6; }
.btn-line { background: transparent; color: var(--violet-ink); border-color: var(--violet); }
.btn-line:hover { color: var(--violet-ink); background: rgba(90, 63, 214, 0.08); }
.btn-line-dark { background: #fff; color: var(--ink); border-color: var(--ink-soft); }
.btn-line-dark:hover { color: var(--ink); background: #FFF9EA; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.parchment a.btn-violet, .parchment a.btn-violet:hover { color: #fff; }
.parchment a.btn-coral, .parchment a.btn-gold, .parchment a.btn-mint { color: var(--ink); }
.parchment a.btn-line { color: var(--violet-ink); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: 28px 0 0; isolation: isolate; display: flex; flex-direction: column; }
.hero-copy { order: 1; }
.hero-art { order: 2; }
.hero-sky { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 50% at 80% 30%, rgba(90, 63, 214, 0.55), transparent 70%),
  radial-gradient(40% 40% at 10% 10%, rgba(62, 107, 224, 0.35), transparent 70%); }
.hero-art { display: block; position: relative; z-index: -1; margin: -70px 0 0; }
.hero-art img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%); }
.hero-copy { position: relative; }
.hero h1 { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.logo { font-family: "Mali Sugama", var(--head); font-size: clamp(56px, 15vw, 104px); line-height: 1; color: transparent; background: linear-gradient(180deg, #FFF0B3 0%, #FFC83D 55%, #E89A12 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 18px rgba(255, 200, 61, 0.35)); padding-bottom: 6px; }
.tagline { font-size: clamp(25px, 6.4vw, 40px); color: var(--cream); line-height: 1.22; max-width: 15em; }
.swash { display: block; width: min(300px, 70%); height: 26px; margin: 6px 0 14px; overflow: visible; }
.swash path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(255, 200, 61, 0.7)); }
.hero-sub { font-size: 18px; color: var(--on-night-soft); max-width: 34em; }
.hero-btns { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 18px; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 7px 16px; border: 1.5px solid var(--gold-line); border-radius: 999px; color: var(--gold); font-weight: 700; font-size: 15px; background: rgba(29, 26, 78, 0.6); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); flex: none; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(95, 227, 200, 0.12); border: 1px solid rgba(95, 227, 200, 0.55); color: #DFFBF4; }
@media (min-width: 601px) {
  .hero-art { margin: -40px 0 0; }
  .hero-btns { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1000px) {
  .hero { min-height: 700px; padding: 56px 0 24px; flex-direction: row; align-items: center; }
  .hero-art { position: absolute; z-index: -1; right: -2%; top: 50%; transform: translateY(-50%); width: min(66%, 980px); margin: 0; }
  .hero-art img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); mask-composite: intersect; }
  .hero-copy > * { max-width: 560px; }
  .hero-btns { max-width: 640px; }
}

/* ---------------------------------------------------------------- sections */
.sec { padding: 72px 0; position: relative; }
.sec-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.eyebrow { font-family: var(--head); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--mint); margin-bottom: 8px; }
:lang(ja) .eyebrow { letter-spacing: 0.08em; text-transform: none; }
.sec-head h2 { font-size: clamp(30px, 6vw, 46px); color: var(--cream); text-shadow: 0 2px 20px rgba(90, 63, 214, 0.6); }
.sec-head h2::after { content: ""; display: block; width: 120px; height: 10px; margin: 14px auto 0; background:
  radial-gradient(circle at 50% 50%, var(--gold) 0 4px, transparent 5px),
  linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent) center / 100% 2px no-repeat; }
.lead { font-size: 18px; color: var(--on-night-soft); }
.parchment { position: relative; background: linear-gradient(180deg, #FFF8E4 0%, var(--cream) 60%, #FCEBC2 100%); color: var(--ink); border: 2px solid var(--gold-line); border-radius: var(--radius); box-shadow: 0 0 0 6px rgba(255, 200, 61, 0.1), var(--shadow); padding: 28px 22px; }
.parchment::before, .parchment::after { content: ""; position: absolute; width: 22px; height: 22px; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.parchment::before { top: 10px; left: 10px; }
.parchment::after { bottom: 10px; right: 10px; }
.parchment a { color: var(--violet-ink); }
.parchment h3 { color: var(--ink); }
.fineprint { font-size: 14px; color: var(--on-night-soft); opacity: 0.95; margin-top: 14px; }
.parchment .fineprint { color: var(--ink-soft); }
.card { list-style: none; background: rgba(47, 40, 120, 0.72); border: 1.5px solid rgba(255, 200, 61, 0.35); border-radius: var(--radius-s); padding: 22px; }
.card h3 { font-size: 21px; color: var(--gold); }
.card p { margin: 0; color: var(--on-night-soft); }
.cards3, .cards2 { display: grid; gap: 16px; list-style: none; }
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 16px; height: 16px; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.parchment .ticks li::before { background: var(--violet); }
.sub-h { font-size: 26px; text-align: center; color: var(--cream); margin: 48px 0 20px; }
.tag { display: inline-block; font: 700 12px/1 var(--body); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 10px; border-radius: 999px; background: var(--gold); color: var(--ink); margin: -4px 0 10px; }
:lang(ja) .tag { text-transform: none; letter-spacing: 0.02em; }

/* screenshots */
.shot { margin: 0; }
.shot-frame { border-radius: 22px; padding: 10px; background: linear-gradient(160deg, #3A3390, #1A1648); border: 1.5px solid rgba(255, 200, 61, 0.45); box-shadow: var(--shadow); }
.shot-frame img { border-radius: 13px; width: 100%; }
.shot figcaption { font-size: 15px; color: var(--on-night-soft); margin-top: 10px; text-align: center; }
.shot-phone .shot-frame { border-radius: 30px; padding: 12px 14px; }

/* about */
.about-grid { display: grid; gap: 24px; align-items: center; }
.scope { text-align: center; margin: 28px auto 0; max-width: 820px; color: var(--on-night-soft); font-size: 15px; }

/* steps */
.steps-panel { padding: 34px 22px 26px; }
.steps { list-style: none; counter-reset: step; display: grid; gap: 28px; position: relative; z-index: 1; }
.step { counter-increment: step; text-align: center; }
.step-art { position: relative; width: min(240px, 64%); margin: 0 auto 14px; container-type: inline-size; }
.step-art img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold-line), 0 12px 30px rgba(29, 26, 78, 0.25); }
.step-art::before { content: counter(step); position: absolute; z-index: 2; left: -4px; top: -4px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: var(--ink); font: 700 22px/1 var(--head); box-shadow: 0 0 0 3px #fff; }
.step h3 { font-size: 21px; margin-bottom: 6px; }
.step p { color: var(--ink-soft); margin: 0 auto; max-width: 30em; }
.bubble { position: absolute; left: 44%; top: 9%; width: 46%; height: 34%; border: 0; background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--ink); }
.bubble-q { font: 700 18px/1.1 var(--head); font-size: 8.6cqw; white-space: nowrap; }
.bubble.solved .bubble-q { color: var(--mint-deep); }
.bubble::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; pointer-events: none; }
.bubble.sparkle::after { animation: sparkle 0.9s ease-out; }
@keyframes sparkle { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.9); } 100% { box-shadow: 0 0 0 26px rgba(255, 200, 61, 0); } }
.trail { position: absolute; z-index: 0; pointer-events: none; display: none; }
.trail path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 14; opacity: 0.9; }
.no-over { text-align: center; font: 700 20px/1.3 var(--head); color: var(--violet-ink); margin: 28px 0 0; }
.fight-grid { display: grid; gap: 24px; margin-top: 28px; align-items: center; }
.fight-box h3 { font-size: 23px; }
.fight-box .ticks { gap: 12px; font-size: 16px; }

/* answer modes */
.modes { list-style: none; display: grid; gap: 18px; }
.mode { background: linear-gradient(180deg, #FFF8E4, var(--cream)); color: var(--ink); border: 2px solid var(--gold-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.mode-art { background: none; }
.mode-art img { width: 72%; margin: 0 auto; aspect-ratio: 1; object-fit: cover; }
/* cream-backed art on parchment: its cream is a shade off the card's gradient, so the edges fade instead of showing a box */
.mode-art img, .shield img, .tips-art {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
@media (max-width: 999px) {
  .mode { display: grid; grid-template-columns: 104px 1fr; align-items: start; }
  .mode-art { background: none; padding: 14px 0 0 10px; }
  .mode-art img { width: 100%; }
  .mode-body { padding: 16px 18px 20px 12px; }
}
.mode-body { padding: 4px 22px 24px; }
.mode h3 { font-size: 23px; margin-bottom: 8px; }
.mode p { color: var(--ink-soft); margin-bottom: 10px; }
.mode .note { font-size: 14.5px; background: rgba(90, 63, 214, 0.08); border-left: 3px solid var(--violet); padding: 10px 12px; border-radius: 0 12px 12px 0; margin: 0; }
.mode[data-mode="ink"] { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.35), var(--shadow); }
.shots2 { display: grid; gap: 22px; margin-top: 32px; }

/* lands */
.portals { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.portal { text-align: center; border-radius: 22px; padding: 6px 4px 8px; transition: transform 0.25s ease; outline-offset: 6px; }
.portal:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
.portal-art { width: 100%; max-width: 230px; margin: 0 auto 10px; border-radius: 50%; transition: filter 0.25s ease, transform 0.25s ease; }
/* the portal pictures sit on midnight: fade their square corners into the sky (no blend mode: it slows big pages) */
.portal-art img { -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent 100%); mask-image: radial-gradient(closest-side, #000 86%, transparent 100%); }
.portal:hover .portal-art, .portal:focus-visible .portal-art, .portal.lit .portal-art { filter: drop-shadow(0 0 16px rgba(255, 200, 61, 0.85)) brightness(1.06); transform: translateY(-4px); }
.portal h3 { font-size: 17px; color: var(--gold); margin-bottom: 6px; }
.portal p { font-size: 14.5px; color: var(--on-night-soft); margin: 0 0 8px; }
.portal .lesson span, .pet-chip span { font-weight: 700; color: var(--mint); }
.pet-chip { display: inline-block; font-size: 14px !important; padding: 5px 12px; border-radius: 999px; background: rgba(95, 227, 200, 0.12); border: 1px solid rgba(95, 227, 200, 0.5); color: #DFFBF4 !important; }
/* the pet's name moves to the next line as a whole ("ドラゴンのあかち|ゃん", "Rồng | Tuyết" were cut) */
.pet-chip .gn { display: inline-block; }
.thread { max-width: 820px; margin: 34px auto 0; text-align: center; font-family: var(--head); font-size: 19px; color: var(--cream); }
#vung-dat .fineprint { text-align: center; }

/* friends */
.friends-grid { display: grid; gap: 22px; }
.glass { background: rgba(47, 40, 120, 0.7); border: 1.5px solid rgba(255, 200, 61, 0.4); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.wide-art { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.glass-body { padding: 18px 22px 22px; }
.glass h3 { font-size: 23px; color: var(--gold); }
.glass p { color: var(--on-night-soft); margin: 0; }
.shop-grid { display: grid; gap: 22px; margin-top: 22px; align-items: center; }
.shop h3 { font-size: 23px; }
.promise { font-weight: 700; color: var(--violet-ink); margin: 0; }

/* points + demo */
.callout { max-width: 860px; margin: -6px auto 28px; padding: 16px 20px; border-radius: 18px; background: rgba(95, 227, 200, 0.12); border: 1.5px solid rgba(95, 227, 200, 0.6); color: #E6FFF8; }
.callout p { margin: 0; }
.callout strong { color: var(--mint); }
.demo { display: grid; gap: 22px; padding: 28px 20px; }
.potion { text-align: center; }
.potion svg { width: min(170px, 44%); height: auto; margin: 0 auto; overflow: visible; filter: drop-shadow(0 0 24px rgba(255, 200, 61, 0.35)); }
.potion .liquid { transform-box: view-box; transform-origin: 50% 100%; transform: scaleY(0.1); transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.flask-line { fill: none; stroke: var(--gold-deep); stroke-width: 5; }
.cork { fill: #B07A3A; stroke: var(--gold-deep); stroke-width: 3; }
.potion-val { font: 700 30px/1.1 var(--head); margin: 12px 0 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.potion-val small { font-size: 16px; color: var(--ink-soft); margin-left: 6px; }
.demo-main h3 { font-size: 25px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab { font: 700 15px var(--head); min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--violet); background: #fff; color: var(--violet-ink); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--violet); color: #fff; }
.slider-label { display: block; font-weight: 700; margin-bottom: 4px; }
input[type="range"] { width: 100%; height: 44px; margin: 0 0 8px; background: transparent; accent-color: var(--violet); -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--fill, 10%), #E5D8B0 var(--fill, 10%)); border: 1px solid var(--gold-deep); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: var(--violet); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(29, 26, 78, 0.4); }
input[type="range"]::-moz-range-track { height: 12px; border-radius: 999px; background: #E5D8B0; border: 1px solid var(--gold-deep); }
input[type="range"]::-moz-range-progress { height: 12px; border-radius: 999px; background: var(--gold); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--violet); border: 4px solid #fff; }
.ex-head { font-weight: 700; margin: 8px 0 8px; }
.examples { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
.examples li { display: grid; grid-template-columns: minmax(7.5em, auto) 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border-radius: 12px; border: 1px solid #EAD9A6; }
.ex-q { font: 700 19px/1.2 var(--head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex-meter { height: 10px; border-radius: 999px; background: #EFE4C4; overflow: hidden; }
.ex-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--mint), #34C3A6); transition: width 0.4s ease; }
.ex-p { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.demo-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.demo-btns .btn { min-height: 46px; font-size: 16px; padding: 10px 20px; }
.demo-out { min-height: 3.2em; margin: 14px 0 6px; font-weight: 600; color: var(--ink); }
.demo-out .up { color: var(--mint-deep); } .demo-out .down { color: #B23A1E; }
.bars { list-style: none; display: grid; gap: 10px; margin: 8px 0 10px; }
.bar-row { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: center; gap: 10px; font-size: 15px; }
:lang(ja) .bar-row { grid-template-columns: 5.5em 1fr auto; }
.bar-name { font-weight: 700; }
.bar-track { height: 14px; border-radius: 999px; background: #EFE4C4; border: 1px solid #DCC68D; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 10%; border-radius: 999px; background: linear-gradient(90deg, var(--dusk), var(--violet)); transition: width 0.5s ease; }
.bar-row[data-bar="add"] .bar-fill { background: linear-gradient(90deg, #FFB53D, var(--gold)); }
.bar-row[data-bar="sub"] .bar-fill { background: linear-gradient(90deg, #2BAE93, var(--mint)); }
.bar-row[data-bar="mul"] .bar-fill { background: linear-gradient(90deg, #E8553A, var(--coral)); }
.bar-val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.6em; text-align: right; }
.bar-lock { grid-column: 2 / -1; font-size: 13px; color: var(--ink-soft); margin-top: -6px; }
.bar-row.locked .bar-track { opacity: 0.45; }
.bar-row.locked .bar-lock::before { content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--ink-soft); clip-path: polygon(15% 45%, 15% 25%, 30% 8%, 70% 8%, 85% 25%, 85% 45%, 100% 45%, 100% 100%, 0 100%, 0 45%, 28% 45%, 28% 28%, 36% 20%, 64% 20%, 72% 28%, 72% 45%); }
.demo-toan { margin: 6px 0 0; }
.demo-toan strong { font: 700 20px var(--head); }
.ruler-wrap { margin-top: 40px; }
.ruler-wrap h3 { text-align: center; font-size: 24px; color: var(--cream); }
.ruler-bar { height: 16px; border-radius: 999px; margin: 18px 0 18px; border: 1.5px solid var(--gold-line); background:
  repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(29, 26, 78, 0.55) calc(10% - 2px) 10%),
  linear-gradient(90deg, var(--mint), var(--gold) 45%, var(--coral) 75%, var(--violet)); }
.ruler { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ruler li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(47, 40, 120, 0.75); border: 1px solid rgba(255, 200, 61, 0.35); }
.r-q { font: 700 18px var(--head); color: var(--cream); }
.r-v { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.ruler-wrap .fineprint { text-align: center; }
.rules .card h3 { font-size: 20px; }
.facts { max-width: 880px; margin: 32px auto 0; color: var(--on-night-soft); }
.facts strong { color: var(--gold); }

/* science */
.science-banner { position: relative; margin-bottom: 30px; }
.science-art { width: 100%; max-height: 520px; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); }
.sec-head.on-art { margin-top: 18px; }
.timeline-panel { padding: 28px 20px; max-width: 960px; margin-inline: auto; }
.timeline { list-style: none; position: relative; display: grid; gap: 20px; }
.timeline::before { content: ""; position: absolute; left: 31px; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(180deg, var(--gold), var(--gold-line)); border-radius: 3px; }
.timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; position: relative; }
.year { width: 64px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--midnight); color: var(--gold); font: 700 15px var(--head); border: 2px solid var(--gold); position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--cream); }
.timeline li.in .year { animation: node 1.2s ease-out 1; }
@keyframes node { 0% { box-shadow: 0 0 0 5px var(--cream), 0 0 0 5px rgba(255, 200, 61, 0.8); } 100% { box-shadow: 0 0 0 5px var(--cream), 0 0 0 20px rgba(255, 200, 61, 0); } }
.timeline h3 { font-size: 20px; margin-bottom: 4px; }
.timeline p { color: var(--ink-soft); margin-bottom: 4px; }
.timeline .cite { font-size: 14px; font-style: italic; color: var(--violet-ink); }
.formula { margin-top: 24px; border-top: 1.5px dashed var(--gold-line); padding-top: 16px; }
.refs summary::after, .formula summary::after { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font: 700 18px/1 var(--body); }
.refs[open] summary::after, .formula[open] summary::after { content: "\2212"; }
.formula summary, .refs summary { cursor: pointer; font: 700 19px var(--head); color: var(--violet-ink); min-height: 44px; display: flex; align-items: center; gap: 10px; }
.formula ul { list-style: none; display: grid; gap: 12px; margin-top: 12px; font-size: 16px; }
.formula li { color: var(--ink); }
.honesty { margin: 28px auto 0; max-width: 900px; padding: 24px 22px; border-radius: var(--radius); border: 2px dashed var(--coral); background: rgba(255, 107, 74, 0.1); }
.honesty h3 { color: #FFB4A2; font-size: 23px; }
.honesty ol { padding-left: 1.3em; display: grid; gap: 8px; color: var(--on-night); }
.refs { margin: 26px auto 0; max-width: 900px; }
.refs summary { color: var(--gold); }
.refs ul { list-style: none; display: grid; gap: 10px; margin-top: 10px; font-size: 14.5px; color: var(--on-night-soft); }
.refs li { padding-left: 1.6em; text-indent: -1.6em; overflow-wrap: anywhere; }

/* parents */
.parent-grid { display: grid; gap: 24px; align-items: start; }
.cards2 .card h3 { font-size: 20px; }
.parent-side { display: grid; gap: 18px; }
.parent-art { border-radius: var(--radius); }
.praise { margin: 0; padding: 18px 20px; border-radius: 18px; background: rgba(255, 200, 61, 0.1); border-left: 4px solid var(--gold); font-size: 16px; color: var(--cream); }
.praise p { margin: 0; }
.tips { margin-top: 28px; display: grid; gap: 18px; align-items: center; }
.tips-art { border-radius: 20px; width: 100%; max-width: 320px; margin: 0 auto; }
.tips h3 { font-size: 23px; }

/* safety */
.safety-panel { display: grid; gap: 18px; align-items: center; }
.shield img { width: 100%; max-width: 360px; margin: 0 auto; border-radius: 20px; }
.promises { font-size: 16.5px; }
.safety-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* faq */
.faq { padding: 12px 18px; }
.faq-item { border-bottom: 1.5px dashed rgba(201, 143, 18, 0.5); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 56px; padding: 12px 4px; font: 700 18px/1.35 var(--head); color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--violet) no-repeat center / 14px 14px; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 14px 2.5px, 2.5px 14px; transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a p { color: var(--ink-soft); padding: 0 4px 14px; margin: 0; }

/* cta */
.cta { position: relative; overflow: hidden; min-height: 520px; display: grid; align-items: center; text-align: center; padding: 60px 0; isolation: isolate; }
.cta-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%); }
.cta-copy { max-width: 620px; padding: 26px 22px; border-radius: var(--radius); background: rgba(23, 20, 64, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cta h2 { font-size: clamp(28px, 5.4vw, 42px); color: var(--cream); }
.swash-cta { margin: -4px auto 14px; }
.cta p { font-size: 18px; color: var(--on-night-soft); }
/* phones and tablets: the copy box would cover both children (the art keeps them at the far left and right), so the picture
   comes first, whole, and the box sits under it, over the grass */
@media (max-width: 999px) {
  .cta { display: block; min-height: 0; padding: 0 0 56px; }
  .cta-art { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 3 / 2; }
  .cta-copy { position: relative; z-index: 1; margin-top: -9%; }
}

/* footer */
.site-foot { border-top: 1px solid rgba(255, 200, 61, 0.25); background: #17143F; padding: 40px 0 28px; font-size: 15px; }
.foot-grid { display: grid; gap: 22px; }
.foot-brand p { color: var(--on-night-soft); margin: 6px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-links a { color: var(--on-night); min-height: 44px; display: inline-flex; align-items: center; }
.foot-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.foot-langs { margin-left: 0; }
.foot-legal { margin-top: 22px; color: var(--on-night-soft); font-size: 13.5px; }

/* text pages (privacy, support) */
.doc { padding: 48px 0 72px; }
.doc-wrap { max-width: 860px; }
.doc-head h1 { font-size: clamp(32px, 6vw, 48px); color: var(--cream); }
.doc-head .lead { margin-bottom: 6px; }
.updated { font-size: 14px; color: var(--on-night-soft); }
.doc-toc { margin: 26px 0; padding: 20px 22px; }
.doc-toc p { font: 700 17px var(--head); margin-bottom: 6px; }
.doc-toc ol { padding-left: 1.4em; display: grid; gap: 4px; }
.doc-toc a { min-height: 32px; display: inline-flex; align-items: center; }
.doc-body { padding: 30px 24px; }
.doc-sec + .doc-sec { margin-top: 30px; padding-top: 24px; border-top: 1.5px dashed rgba(201, 143, 18, 0.5); }
.doc-sec h2 { font-size: 25px; color: var(--ink); }
.doc-sec p, .doc-sec li { color: var(--ink-soft); }
.doc-sec ul { margin-bottom: 14px; }

/* ---------------------------------------------------------------- wider screens */
@media (min-width: 700px) {
  .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots2 { grid-template-columns: 1.25fr 1fr; align-items: center; }
  .portals { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .portal { grid-column: span 2; }
  .portal:nth-child(4) { grid-column: 2 / span 2; }
  .portal:last-child:nth-child(odd) { grid-column: 4 / span 2; max-width: none; }
  .friends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo { grid-template-columns: 220px 1fr; padding: 34px 32px; align-items: start; }
  .potion { position: sticky; top: 96px; }
  .potion svg { width: 100%; }
  .tips { grid-template-columns: 260px 1fr; }
  /* ja has no tips picture (it stands in for the parent-report shot): the tips take the whole panel, not a 260 px column */
  .tips:not(:has(.tips-art)) { grid-template-columns: 1fr; }
  .safety-panel { grid-template-columns: 300px 1fr; padding: 30px 34px; }
  .timeline-panel { padding: 34px 36px; }
  .foot-grid { grid-template-columns: 1.2fr 1fr; }
  .foot-tools { grid-column: 1 / -1; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .mode { grid-template-columns: 170px 1fr; }
  .mode-art { padding: 18px 0 18px 18px; }
  .mode-body { padding: 22px 26px 22px 18px; }
}
@media (min-width: 1000px) {
  .sec { padding: 96px 0; }
  .about-grid { grid-template-columns: 1.15fr 1fr; }
  .about-grid .cards3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .step-art { width: 88%; }
  .trail-h { display: block; left: 6%; right: 6%; top: 118px; width: 88%; height: 60px; }
  .steps-panel { padding: 44px 34px 34px; }
  .fight-grid { grid-template-columns: 1fr 1.1fr; }
  .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode-art img { width: 86%; }
  .portals { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  .portal, .portal:nth-child(4), .portal:last-child:nth-child(odd) { grid-column: auto; }
  .shop-grid { grid-template-columns: 1fr 1.1fr; }
  .shop-grid:not(:has(.shot)) { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
  .ruler { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .demo { grid-template-columns: 260px 1fr; gap: 40px; padding: 40px 44px; }
  .parent-grid { grid-template-columns: 1fr 1fr; }
  .safety-panel { grid-template-columns: 360px 1fr; }
  .foot-grid { grid-template-columns: 1fr 1.3fr auto; align-items: start; }
  .foot-tools { grid-column: auto; justify-content: flex-end; }
  .science-banner .sec-head.on-art { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: left; max-width: 400px; }
  .science-banner .science-art { width: 74%; margin-left: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%); mask-composite: intersect; }
  .science-banner .wrap { position: relative; }
  .science-banner { display: grid; }
  .science-banner > .wrap { position: absolute; inset: 0; margin: auto; }
  .science-banner .sec-head.on-art h2::after { margin-left: 0; }
  .science-art { max-height: 560px; }
}

/* ---------------------------------------------------------------- motion (scroll reveal, trail, swash) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .swash path { stroke-dashoffset: 420; animation: draw 1.6s 0.4s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.js .trail-h path { stroke-dasharray: 2 14; animation: march 2.6s linear infinite; animation-play-state: paused; }
.js .steps-panel.in .trail-h path { animation-play-state: running; }
@keyframes march { to { stroke-dashoffset: -64; } }
.js .hero-art img { animation: settle 1.4s ease-out both; }
@keyframes settle { from { transform: translateY(14px) scale(1.02); opacity: 0.4; } to { transform: none; opacity: 1; } }
.js .steps-panel { transition: none; }

html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }
html.no-motion .reveal { opacity: 1 !important; transform: none !important; }
html.no-motion .swash path { stroke-dashoffset: 0 !important; }
html.no-motion .btn:hover, html.no-motion .portal:hover .portal-art, html.no-motion .portal:focus-visible .portal-art, html.no-motion .portal.lit .portal-art { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .swash path { stroke-dashoffset: 0; }
  .btn:hover, .portal:hover .portal-art, .portal:focus-visible .portal-art, .portal.lit .portal-art { transform: none; }
}
@media print {
  .topbar, .motion-toggle, .menu-btn, .demo-btns { display: none !important; }
  body { background: #fff; color: #000; }
}