/* Nozu site styles. Source: mobile/tools/legal/src/site.css (copied by build_legal.py).
   The colours and the two fonts are the game's own ("Orchard Morning" by day, "Firefly Lab" by
   night; Fredoka for titles, Rubik for text). Nothing is loaded from other sites.
   The build checks the text colours of the two palettes below for contrast. */

@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02C6, U+02DA, U+02DC, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+25BE; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-hebrew.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0590-05FF, U+200E-200F, U+20AA, U+FB1D-FB4F; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02C6, U+02DA, U+02DC, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+25BE; }
@font-face { font-family: "Rubik"; src: url("fonts/rubik-hebrew.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0590-05FF, U+200E-200F, U+20AA, U+FB1D-FB4F; }

:root {
  color-scheme: only light;
  --bg: #FFF8EC;
  --surface: #FFFFFF;
  --ink: #2E2440;
  --muted: #5E5470;
  --line: #EFE3CE;
  --lip: #EADCC2;
  --link: #1E7B4F;
  --kid-bg: #FFF0C4;
  --kid-line: #C98712;
  --chip-bg: #FFFFFF;
  --chip-ink: #2E2440;
  --button-bg: #F2B33D;
  --button-ink: #2E2440;
  --button-lip: #C98712;
  --note-bg: #EEF7FD;
  --focus: #6A4BE8;
  --leaf: #3DAE6F;
  --leaf-deep: #1E7B4F;
  --sky: #86D0F5;
  --honey: #F2B33D;
  --honey-deep: #C98712;
  --ruby: #D93A55;
  --tangerine: #FF7A45;
  --grape: #6A4BE8;
  --blossom: #E9587E;
  --neuron: #36E0D4;
  --synapse: #FF5C9E;
  --spark: #FFE45E;
  --smell: #3DAE6F;
  --taste: #FF7A45;
  --vision: #86D0F5;
  --flight: #F2B33D;
  --compass: #6A4BE8;
  --learning: #D93A55;
  --shadow: 0 6px 0 var(--lip), 0 18px 40px rgba(46, 36, 64, .08);
  --radius: 24px;
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  --font-display: "Fredoka", "Rubik", ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
}

.night {
  --bg: #16163A;
  --surface: #25256A;
  --ink: #F3F0FF;
  --muted: #C9C4E8;
  --line: #3A3A8C;
  --lip: #0E0E2A;
  --link: #5CE8DE;
  --kid-bg: #2A2A6E;
  --kid-line: #FFE45E;
  --chip-bg: #25256A;
  --chip-ink: #F3F0FF;
  --button-bg: #F2B33D;
  --button-ink: #2E2440;
  --button-lip: #C98712;
  --note-bg: #1D1D52;
  --focus: #FFE45E;
  --shadow: 0 6px 0 var(--lip), 0 18px 40px rgba(0, 0, 0, .3);
}

/* The product page keeps its own day and night whatever the system's theme; the documents follow it. */
html:has(> body.calm) { color-scheme: light dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--font);
  overflow-wrap: break-word;
  overflow-x: hidden;
}
html[lang="he"] body { line-height: 1.8; }
img, svg { max-width: 100%; height: auto; }
.mimo-line { stroke: #2E2440; }
.mimo-tip { fill: #2E2440; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .16em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { line-height: 1.2; color: var(--ink); font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); letter-spacing: -.01em; margin: .4rem 0 .8rem; }
h2 { font-size: 1.45rem; margin: 2.4rem 0 .6rem; }
h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-inline-start: 1.4rem; margin: 0 0 1rem; }
li + li { margin-top: .4rem; }
[dir="ltr"] { unicode-bidi: isolate; }
[hidden] { display: none !important; }

.skip {
  position: absolute; inset-inline-start: 1rem; top: -5rem; z-index: 60;
  background: #FFFFFF; color: #2E2440; padding: .7rem 1rem; border-radius: 12px; border: 2px solid #6A4BE8;
}
.skip:focus { top: 1rem; }
.wrap { position: relative; z-index: 2; max-width: 70rem; margin-inline: auto; padding-inline: 1.25rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print-only { display: none; }

/* Nozu's two canvases: the world under the text, and Nozu himself over it. */
.nozu-sky, .nozu-stage { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.nozu-sky { z-index: 1; }
.nozu-stage { z-index: 45; }
.nozu-stage.nozu-stage { transition: opacity .32s ease-out !important; } /* with the motion off he fades in at a new place */
.has-3d .nozu-sky, .has-3d .nozu-stage { display: block; }
.perch { position: absolute; display: block; pointer-events: none; }
.fruit, .dots { display: none; }
.fruit { position: absolute; aspect-ratio: 1; pointer-events: none; }
.fruit-a { width: 2.6rem; top: 20%; inset-inline-start: 4%; }
.fruit-b { width: 2rem; bottom: 9%; inset-inline-start: 5%; }
.fruit-c { width: 2.3rem; top: 52%; inset-inline-end: 3%; }
.has-3d .fallback { visibility: hidden; }
/* With scripts on, the drawn Nozu waits out of sight for the 3D one, and shows only if 3D cannot start. */
@media (scripting: enabled) { html:not(.no-3d) .fallback { visibility: hidden; } }

/* Header: a floating bar */
.site-header { position: sticky; top: 0; z-index: 40; padding-block: .6rem; pointer-events: none; }
.site-header .bar {
  pointer-events: auto; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem 1.2rem; max-width: 70rem; margin-inline: auto; padding: .3rem .9rem; margin-inline: max(.75rem, calc((100% - 70rem) / 2));
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 2px solid #EFE3CE; border-radius: 22px; box-shadow: 0 5px 0 rgba(46, 36, 64, .1), 0 14px 30px rgba(46, 36, 64, .1);
  color: #2E2440;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; color: #2E2440; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.brand svg { width: 2.5rem; height: 2.5rem; flex: none; }
/* His leaf. Where the window has no margin for him to fly in, the live Nozu comes and sits here between
   his visits to the page, so the bar shows the leaf in place of his drawing (see nozu3d.js). */
.brand .logo { position: relative; display: inline-flex; flex: none; }
.brand .nest { inset-inline: 14% 14%; bottom: .12rem; height: 0; }
.nozu-nest .brand .logo svg { visibility: hidden; }
.nozu-nest .brand .logo::after { content: ""; position: absolute; inset-inline: -4% -4%; bottom: -.3rem; height: .62rem; border-radius: 50%; background: linear-gradient(180deg, #8ADBA6 0%, #3DAE6F 72%); box-shadow: 0 2px 0 #1E7B4F; }
.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; list-style: none; margin: 0; padding: 0; }
.site-nav li + li { margin-top: 0; }
.site-nav a, .langmenu summary { display: inline-flex; align-items: center; min-height: 48px; padding-inline: .15rem; font-weight: 500; color: #2E2440; text-decoration: none; }
.site-nav a:hover, .langmenu summary:hover { color: #1E7B4F; text-decoration: underline; }
.site-nav a[aria-current="page"] { color: #1E7B4F; font-weight: 700; }
.langmenu details { position: relative; }
.langmenu summary { cursor: pointer; }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary::after { content: "\25BE"; margin-inline-start: .35rem; font-size: .85em; }
.langmenu details[open] ul { position: absolute; inset-inline-end: 0; z-index: 5; display: grid; gap: 0; min-width: 10rem; margin-top: .3rem; padding: .35rem .9rem; background: #FFFFFF; border: 2px solid #EFE3CE; border-radius: 16px; box-shadow: 0 5px 0 #EADCC2, 0 18px 40px rgba(46, 36, 64, .14); }
.langmenu details[open] li + li { margin-top: 0; }
.motion { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid #EFE3CE; background: #FFFFFF; color: #2E2440; cursor: pointer; box-shadow: 0 3px 0 #EADCC2; }
.motion:hover { background: #FFF0C4; }
.motion svg { width: 18px; height: 18px; }
.motion .i-play, .motion[aria-pressed="true"] .i-pause { display: none; }
.motion[aria-pressed="true"] .i-play { display: block; }
.motion-float { position: fixed; top: .8rem; inset-inline-end: .8rem; z-index: 40; }
/* Why nothing moves, while the device's reduced-motion setting is the reason. Pressing it turns the motion
   on. It lies at the bottom of the window, over Nozu's canvas, and goes away once the reader scrolls on. */
.motion-hint { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); inset-inline: 0; z-index: 50; width: fit-content; max-width: min(25rem, calc(100vw - 2rem)); margin: 0 auto; padding: .7rem 1.1rem; border: 0; border-radius: 18px; background: #2E2440; color: #FFFFFF; font: 500 .95rem/1.5 var(--font); text-align: center; cursor: pointer; box-shadow: 0 5px 0 rgba(46, 36, 64, .25), 0 12px 26px rgba(46, 36, 64, .25); }
.motion-hint:hover { background: #3D3157; }

/* Scenes: every part of the page is a place in Nozu's day */
.scene { position: relative; padding-block: 4.5rem; background: var(--bg); color: var(--ink); }
.scene-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene-sky { padding-block: 2.5rem 8rem; margin-top: -4.6rem; padding-top: 7.6rem; background: linear-gradient(180deg, #BDE6FB 0%, #D9F1FF 34%, #FFF1D2 76%, #FFF8EC 100%); }
.scene-home { background: linear-gradient(180deg, #FFF8EC 0%, #FFEFD6 60%, #FFE6C4 100%); }
.scene-night { background: linear-gradient(180deg, #1C1A4E 0%, #16163A 100%); }
.scene-deep { background: #16163A; }
.scene-lab { background: linear-gradient(180deg, #16163A 0%, #100F2E 55%, #16163A 100%); }
.scene-dawn { background: linear-gradient(180deg, #FFF3DA 0%, #FFF8EC 100%); }
.scene-mint { background: linear-gradient(180deg, #FFF8EC 0%, #EAF7EF 100%); }
.scene-cream { background: linear-gradient(180deg, #EAF7EF 0%, #FFF8EC 60%); }
.bridge { position: relative; height: 11rem; z-index: 0; }
.bridge-dusk { background: linear-gradient(180deg, #FFE6C4 0%, #FFC48A 22%, #F88A72 46%, #B25BAA 66%, #4A3A9C 84%, #1C1A4E 100%); }
.bridge-dawn { background: linear-gradient(180deg, #16163A 0%, #4A3A9C 18%, #B25BAA 38%, #F88A72 58%, #FFC48A 78%, #FFF3DA 100%); }

/* The sun, clouds and hills of the first screen */
.sun { position: absolute; inset-inline-end: calc(max(0px, (100% - 70rem) / 2) + 15.2rem - min(23vw, 17rem)); top: 9%; width: min(46vw, 34rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFE9A8 0%, #FFD877 34%, rgba(255, 216, 119, .35) 55%, rgba(255, 216, 119, 0) 70%); }
.cloud { position: absolute; height: 2.6rem; border-radius: 999px; background: #FFFFFF; opacity: .9; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #FFFFFF; border-radius: 50%; }
.cloud::before { width: 46%; aspect-ratio: 1; inset-inline-start: 14%; bottom: 30%; }
.cloud::after { width: 34%; aspect-ratio: 1; inset-inline-end: 16%; bottom: 40%; }
.cloud-a { width: 9rem; top: 13%; inset-inline-end: 3%; }
.cloud-b { width: 6.5rem; top: 61%; inset-inline-end: -1.5rem; opacity: .75; }
.cloud-c { width: 7.5rem; top: 11%; inset-inline-end: 31%; opacity: .7; }
.hill { position: absolute; bottom: -9rem; height: 15rem; border-radius: 50%; }
.hill-a { inset-inline-start: -12%; width: 70%; background: linear-gradient(180deg, #7CD49C 0%, #3DAE6F 60%); }
.hill-b { inset-inline-end: -18%; width: 80%; bottom: -10.5rem; background: linear-gradient(180deg, #A5E6BC 0%, #57BF85 60%); }
.hill-c { inset-inline-start: 22%; width: 60%; bottom: -12rem; background: linear-gradient(180deg, #5AC486 0%, #2F9A5F 60%); }
.stars { position: absolute; inset: 0; background-image: radial-gradient(1.6px 1.6px at 12% 18%, #F3F0FF 50%, transparent 52%), radial-gradient(1.2px 1.2px at 27% 62%, #F3F0FF 50%, transparent 52%), radial-gradient(1.8px 1.8px at 44% 28%, #FFE45E 50%, transparent 52%), radial-gradient(1.2px 1.2px at 61% 74%, #F3F0FF 50%, transparent 52%), radial-gradient(1.5px 1.5px at 78% 22%, #F3F0FF 50%, transparent 52%), radial-gradient(1.2px 1.2px at 88% 58%, #5CE8DE 50%, transparent 52%), radial-gradient(1.3px 1.3px at 6% 84%, #F3F0FF 50%, transparent 52%), radial-gradient(1.4px 1.4px at 52% 92%, #F3F0FF 50%, transparent 52%), radial-gradient(1.2px 1.2px at 70% 44%, #FF5C9E 50%, transparent 52%), radial-gradient(1.2px 1.2px at 35% 8%, #F3F0FF 50%, transparent 52%); background-size: 46rem 34rem; opacity: .8; }

@keyframes drift { from { transform: translateX(-1.4rem); } to { transform: translateX(1.4rem); } }
@keyframes glow { from { transform: scale(1); } to { transform: scale(1.07); } }
.cloud { animation: drift 17s ease-in-out infinite alternate; }
.cloud-b { animation-duration: 23s; }
.cloud-c { animation-duration: 29s; animation-direction: alternate-reverse; }
.sun { animation: glow 5.5s ease-in-out infinite alternate; }
.nozu-paused .cloud, .nozu-paused .sun { animation-play-state: paused; }

/* First screen */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; min-height: min(34rem, 72vh); }
.hero h1 { font-size: clamp(2.7rem, 1.6rem + 5vw, 5rem); font-weight: 700; line-height: 1.05; margin: .7rem 0 1rem; }
.hero .lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); max-width: 34rem; }
.eyebrow { display: inline-block; margin: 0; padding: .3rem .9rem; border-radius: 1.3rem; background: rgba(255, 255, 255, .78); color: var(--ink); font-weight: 600; font-size: .95rem; box-shadow: 0 3px 0 rgba(46, 36, 64, .08); }
.hero-stage { position: relative; min-height: 22rem; }
.hero-stage .perch { inset: 0; }
.hero-stage .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-stage .fallback svg { width: min(100%, 20rem); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.3rem 0 1.5rem; }
.chips li { margin: 0; display: inline-flex; align-items: center; gap: .45rem; background: var(--chip-bg); color: var(--chip-ink); border-radius: 999px; padding: .35rem .9rem; font-weight: 500; font-size: .95rem; box-shadow: 0 3px 0 rgba(46, 36, 64, .08); }
.chips li::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--leaf); }
.chips li:nth-child(6n+2)::before { background: var(--honey); }
.chips li:nth-child(6n+3)::before { background: var(--sky); }
.chips li:nth-child(6n+4)::before { background: var(--grape); }
.chips li:nth-child(6n+5)::before { background: var(--ruby); }
.chips li:nth-child(6n+6)::before { background: var(--tangerine); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; padding: .8rem 1.7rem; border-radius: 18px; background: var(--button-bg); color: var(--button-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; text-decoration: none; box-shadow: 0 6px 0 var(--button-lip), 0 16px 26px rgba(201, 135, 18, .28); transition: transform .12s ease, box-shadow .12s ease; }
.button:hover { text-decoration: none; transform: translateY(2px); box-shadow: 0 4px 0 var(--button-lip), 0 10px 18px rgba(201, 135, 18, .28); }
.button:active { transform: translateY(6px); box-shadow: 0 0 0 var(--button-lip); }
.button .play { width: 1.25rem; height: 1.25rem; flex: none; }
.button.second { background: #FFFFFF; --button-lip: #EADCC2; box-shadow: 0 5px 0 var(--button-lip); font-size: 1.05rem; min-height: 48px; padding: .6rem 1.2rem; }
.soon { display: inline-block; font-weight: 600; color: var(--muted); border: 2px dashed var(--line); border-radius: 18px; padding: .65rem 1.1rem; }
.meta { color: var(--muted); font-size: .98rem; }
.hero .meta { margin-top: 1rem; max-width: 30rem; }

/* A part of the page: words on one side, the game on the other */
.duo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "head stage" "body stage"; gap: 0 3rem; align-items: start; }
.duo.flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "stage head" "stage body"; }
.duo-head { grid-area: head; }
.duo-body { grid-area: body; position: relative; }
.stage { grid-area: stage; position: relative; margin: 0; display: flex; justify-content: center; padding-block: 3.5rem 1rem; align-self: center; }
.scene h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); font-weight: 700; margin: 0 0 .8rem; }
.duo-head > p { font-size: 1.12rem; max-width: 40rem; }
.phone { --lean: -1; position: relative; width: min(100%, 16.5rem); aspect-ratio: 9 / 16; border-radius: 2.3rem; border: .6rem solid #2E2440; background: #2E2440; box-shadow: 0 .6rem 0 rgba(46, 36, 64, .3), 0 2.2rem 3.2rem rgba(46, 36, 64, .28); transform: perspective(60rem) rotateY(calc(var(--lean) * (13deg + var(--tilt, 0) * 5deg))) rotateX(calc(3deg - var(--tilt, 0) * 9deg)) rotate(calc(var(--lean) * -1.5deg)); }
.flip .phone { --lean: 1; }
.night .phone { border-color: #0E0E2A; background: #0E0E2A; box-shadow: 0 .6rem 0 rgba(0, 0, 0, .4), 0 0 0 2px rgba(92, 232, 222, .25), 0 2.2rem 4rem rgba(54, 224, 212, .16); }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1.75rem; }
.phone.second { position: absolute; width: min(60%, 11rem); inset-inline-end: 2%; bottom: -1rem; transform: perspective(60rem) rotateY(calc(var(--lean) * 8deg)) rotateX(calc(var(--tilt, 0) * -12deg)) rotate(calc(var(--lean) * -6deg)) translateY(calc(var(--tilt, 0) * -1.6rem)); }
.flip .phone.second { inset-inline-end: auto; inset-inline-start: 2%; }
.phone .perch { top: -.6rem; inset-inline: 22% 22%; height: 0; }
.stage-air { align-self: stretch; min-height: 15rem; padding: 0; }
.stage-air .perch { inset: 0; }

/* Cards */
[data-nozu-reveal] { transition: opacity .55s ease, transform .65s cubic-bezier(.2, .8, .2, 1); }
[data-nozu-reveal].wait { opacity: 0; transform: translateY(1.8rem) scale(.97); }
.grid > li:nth-child(2) { transition-delay: .07s; }
.grid > li:nth-child(3) { transition-delay: .14s; }
.grid > li:nth-child(4) { transition-delay: .21s; }
.grid > li:nth-child(5) { transition-delay: .28s; }
.grid > li:nth-child(6) { transition-delay: .35s; }
.split > .card:nth-child(2) { transition-delay: .1s; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem; margin: 1.4rem 0 1rem; padding: 0; list-style: none; }
.grid > li { margin: 0; }
.grid h3 { margin-top: 0; font-size: 1.2rem; }
.grid .card p { margin-bottom: 0; }
.orb { display: block; width: 2.6rem; height: 2.6rem; margin-bottom: .7rem; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 50% 55%, var(--orb, #36E0D4) 0%, var(--orb-deep, #1B9E96) 100%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 22px var(--orb, #36E0D4); }
.orb-1 { --orb: #A58BFF; --orb-deep: #6A4BE8; }
.orb-2 { --orb: #6CC3FF; --orb-deep: #2C8FC0; }
.orb-3 { --orb: #5FE0A0; --orb-deep: #1E9A5F; }
.orb-4 { --orb: #FFB25E; --orb-deep: #E0752A; }
.orb-5 { --orb: #FF86AE; --orb-deep: #D93A6E; }
.orb-6 { --orb: #FFE98A; --orb-deep: #F2B33D; }
.day .orb { box-shadow: 0 3px 0 rgba(46, 36, 64, .12); }
.day .orb-1 { --orb: #FF9AAE; --orb-deep: #D93A55; }
.day .orb-2 { --orb: #FFD98A; --orb-deep: #F2B33D; }
.day .orb-3 { --orb: #A58BFF; --orb-deep: #6A4BE8; }
.world { border-top: .55rem solid var(--honey); }
.world .region { color: var(--muted); font-weight: 500; margin-bottom: .4rem; }
.world-smell { border-top-color: var(--smell); }
.world-taste { border-top-color: var(--taste); }
.world-vision { border-top-color: var(--vision); }
.world-flight { border-top-color: var(--flight); }
.world-compass { border-top-color: #9A85FF; }
.world-learning { border-top-color: #FF6B88; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.split h3 { margin-top: 0; font-size: 1.35rem; }
.split .card:first-child { border-top: .55rem solid var(--leaf); }
.split .card:last-child { border-top: .55rem solid var(--honey); }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-inline-start: 2.1rem; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .28em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--leaf); }
.ticks li::after { content: ""; position: absolute; inset-inline-start: .42rem; top: .52em; width: .5rem; height: .28rem; border-inline-start: 2.5px solid #FFFFFF; border-bottom: 2.5px solid #FFFFFF; transform: rotate(-45deg); }
[dir="rtl"] .ticks li::after { transform: rotate(45deg); }
.note { background: var(--note-bg); border: 2px solid var(--line); border-inline-start: .45rem solid var(--link); border-radius: 18px; padding: 1rem 1.2rem; margin-top: 1.2rem; }
.links { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; margin-top: 1.4rem; }
.links li { margin: 0; }

/* Footer */
.site-footer { position: relative; padding-top: 4.5rem; color: #5E5470; font-size: .95rem; }
.site-footer::before { content: ""; display: block; height: 5rem; background: radial-gradient(58% 100% at 20% 100%, #1E7B4F 0 99.4%, transparent 100%), radial-gradient(64% 72% at 80% 100%, #2B9160 0 99.4%, transparent 100%); }
[dir="rtl"] .site-footer::before { background: radial-gradient(58% 100% at 80% 100%, #1E7B4F 0 99.4%, transparent 100%), radial-gradient(64% 72% at 20% 100%, #2B9160 0 99.4%, transparent 100%); }
.site-footer .foot { position: relative; background: #1E7B4F; background: linear-gradient(180deg, #1E7B4F 0, #17633F 100%); color: #FFFFFF; }
.site-footer .wrap { padding-block: 1.6rem 2.6rem; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.site-footer li + li { margin-top: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; font-weight: 500; }
.site-footer p { margin-bottom: .4rem; color: #F2FFF6; }
.site-footer .perch { top: -4.8rem; inset-inline-start: max(6%, calc((100% - 70rem) / 2 + 2rem)); width: 5rem; height: 0; }

/* Documents */
body.calm { background: #FFF8EC; }
.doc-top { position: relative; margin-top: -4.6rem; padding-top: 4.6rem; height: 19.5rem; background: linear-gradient(180deg, #BDE6FB 0%, #D9F1FF 45%, #FFF8EC 100%); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 56%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 56%, transparent 100%); }
.doc { position: relative; z-index: 2; max-width: 49rem; margin: -6rem auto 0; padding: 0 1rem 1.5rem; }
.doc-top .sun { top: -30%; }
.doc-top .cloud-a { top: 5.6rem; inset-inline-end: 4%; }
.doc-top .cloud-c { top: 5rem; inset-inline-start: 6%; inset-inline-end: auto; }
.doc-top .stars { display: none; }
.doc-head { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem 1.2rem; }
.doc-head .perch { top: 0; inset-inline-end: 9%; width: 5rem; height: 0; }
.doc-head .eyebrow { background: #E3F4EA; color: #1B5E3D; box-shadow: none; }
.doc-head h1 { margin-bottom: .3rem; }
.doc-head .meta { margin: 0; }
.doc > h1 { margin-top: 0; }
.kid { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start; background: var(--kid-bg); border: 2px dashed var(--kid-line); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.4rem 0; }
.kid svg { width: 4.5rem; height: 4.5rem; }
.kid h2 { margin: 0 0 .4rem; font-size: 1.35rem; }
.kid ul { margin: 0; }
.kid li { font-size: 1.08rem; }
.summary { margin: 1.4rem 0; }
.summary h2, .toc h2 { margin-top: 0; font-size: 1.2rem; }
.toc { margin: 1.4rem 0 0; }
.toc ol { columns: 2 17rem; column-gap: 2rem; margin: 0; }
.toc li { break-inside: avoid; }
.doc-section { scroll-margin-top: 5.5rem; }
.doc-section h2 { border-top: 2px solid var(--line); padding-block-start: 1.6rem; }
.langs { margin-top: 2rem; color: var(--muted); }
.langpick { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.5rem 0; }
.langpick .button { min-width: 11rem; font-size: 1.15rem; }
.landing { position: relative; z-index: 2; text-align: center; max-width: 42rem; margin-inline: auto; padding: 4.5rem 1rem 4rem; }
.landing .land-stage { position: relative; height: 16rem; }
.landing .land-stage .perch { inset: 0; }
.landing .land-stage .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.landing .land-stage svg { height: 100%; width: auto; }
.landing h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem); font-weight: 700; }
body.landing-page { background: linear-gradient(180deg, #BDE6FB 0%, #D9F1FF 30%, #FFF1D2 70%, #FFF8EC 100%) fixed; min-height: 100vh; }

/* Support */
.faq details { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 0 1.1rem; box-shadow: 0 4px 0 var(--lip); }
.faq details + details { margin-top: .8rem; }
.faq summary { cursor: pointer; font-weight: 600; padding-block: .85rem; min-height: 48px; }
.faq details[open] summary { border-bottom: 2px solid var(--line); margin-bottom: .8rem; }
.faq details > :last-child { margin-bottom: 1rem; }
.contact { margin-top: 1.4rem; }
.contact h2 { margin-top: 0; }
.contact dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0 0 1rem; }
.contact dt { font-weight: 600; }
.contact dd { margin: 0; }

@media (max-width: 860px) {
  .scene { padding-block: 3.2rem; }
  .scene-sky { padding-top: 6.6rem; padding-bottom: 6.5rem; }
  .cloud-a { top: 7.4rem; inset-inline-end: 2%; width: 6.5rem; }
  .cloud-b { top: 14rem; inset-inline-end: auto; inset-inline-start: 2%; width: 5.5rem; }
  .cloud-c { display: none; }
  .doc-top .cloud-a { inset-inline-end: auto; inset-inline-start: 7%; }
  .hero-grid { grid-template-columns: 1fr; gap: .5rem; min-height: 0; }
  .hero-stage { order: -1; min-height: 13.5rem; }
  .hero-stage .fallback svg { width: 11rem; }
  .sun { top: 3%; width: 21rem; inset-inline-end: calc(50% - 10.5rem); }
  .duo, .duo.flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; }
  .stage { padding-block: max(5.2rem, 14vw) 1.4rem; }
  .phone { width: min(62%, 13rem); }
  .phone.second { width: min(38%, 8rem); }
  .stage-air { min-height: 8.5rem; padding: 0; }
  .bridge { height: 8rem; }
  .site-header .bar { padding-inline: .7rem; }
  .brand span { font-size: 1.1rem; }
  .site-nav ul { gap: 0 .8rem; }
  .kid { grid-template-columns: 1fr; }
  .kid svg { width: 3.5rem; height: 3.5rem; }
  .contact dl { grid-template-columns: 1fr; }
  .contact dd { margin-bottom: .6rem; }
  .doc-top { height: 16.5rem; }
  .doc { margin-top: -5rem; }
}

@media (max-width: 640px) {
  /* The three links are in the footer too; the bar keeps the name, the pause button and the languages. */
  .site-nav .nav-link { display: none; }
  .site-header .bar { flex-wrap: nowrap; gap: .6rem; }
  .brand { min-width: 0; }
  .brand span { font-size: 1.02rem; line-height: 1.15; text-wrap: balance; }
  .site-nav { flex: none; }
  .site-nav ul { flex-wrap: nowrap; gap: 0 .6rem; }

  /* First screen: Nozu large in the middle, the words centred under him, the button in sight. */
  .scene-sky { padding-top: 5.4rem; padding-bottom: 6rem; }
  .hero-stage { min-height: min(15.5rem, 33vh); }
  .hero-stage .perch { inset: 16% 0 -16%; } /* he hangs lower, clear of the bar */
  .has-3d .hero-stage .fruit { display: block; }
  .sun { top: 2.9rem; width: 20rem; inset-inline-end: calc(50% - 10rem); }
  .cloud-a { top: 6.2rem; inset-inline-end: -1.2rem; }
  .cloud-b { top: 15rem; inset-inline-start: -1rem; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero h1 { margin: .7rem 0 .9rem; }
  .eyebrow { display: inline-flex; flex-direction: column; align-items: center; padding: .4rem 1.1rem; font-size: .9rem; line-height: 1.4; }
  .eyebrow span { text-wrap: balance; }
  .eyebrow .dot { display: none; }
  /* The button comes right under the name, in sight on the first screen in every language; the longer
     words follow it. (Only what is seen changes order: a screen reader still hears the words first.) */
  .hero .button, .hero .soon { order: 1; align-self: stretch; }
  .hero .meta { order: 2; margin: .9rem 0 0; }
  .hero .lead { order: 3; font-size: 1.06rem; margin: 1.3rem 0 0; }
  .hero .chips { order: 4; justify-content: center; margin: 1.2rem 0 0; }
  .chips li { font-size: .9rem; padding: .3rem .8rem; }

  /* The parts: a larger screen of the game, and the cards in a row to swipe through. */
  .scene { padding-block: 2.8rem; }
  .scene h2 { font-size: 1.9rem; }
  .duo-head > p { font-size: 1.05rem; }
  .stage { padding-block: 5.8rem 1.2rem; }
  .phone { width: min(68%, 15.5rem); }
  .phone.second { width: min(40%, 9rem); }
  /* In one column the screens all stand in the middle, so his seat on them changes sides from part to
     part, and so does his place in the air: he still crosses the page from side to side. */
  .phone .perch { inset-inline: 8% 50%; }
  .flip .phone .perch { inset-inline: 50% 8%; }
  .stage-air .perch { inset: 0 0 0 0; inset-inline: 0 46%; }
  .flip .stage-air .perch { inset-inline: 46% 0; }
  [data-nozu-row] { display: flex; gap: .8rem; margin: 1rem -1.25rem 0; padding: .3rem 1.25rem 1.7rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem; scrollbar-width: none; }
  [data-nozu-row]::-webkit-scrollbar { display: none; }
  [data-nozu-row] > * { flex: 0 0 78%; scroll-snap-align: start; margin: 0; }
  /* In a row the cards are simply there: one that rose into place while it was being swiped in looked late. */
  [data-nozu-row] > [data-nozu-reveal].wait { opacity: 1; transform: none; }
  .dots { display: flex; justify-content: center; gap: .5rem; margin: -.5rem 0 .4rem; }
  .dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink); opacity: .22; transition: opacity .2s ease, transform .2s ease; }
  .dots i.on { opacity: .85; transform: scale(1.35); }
  .links { justify-content: center; }
}

@media (max-width: 400px) {
  .brand { gap: .4rem; }
  .brand svg { width: 2.1rem; height: 2.1rem; }
  .brand span { font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing moves, unless the reader turned the motion on with the button in the bar (nozu3d.js). */
  html:not(.nozu-allowed) *, html:not(.nozu-allowed) *::before, html:not(.nozu-allowed) *::after { animation: none !important; transition: none !important; }
}

@media (prefers-color-scheme: dark) {
  /* The documents follow a dark system; the product page keeps its own day and night. */
  body.calm { background: #16163A; }
  body.calm main, body.calm .doc { --bg: #16163A; --surface: #25256A; --ink: #F3F0FF; --muted: #C9C4E8; --line: #3A3A8C; --lip: #0E0E2A; --link: #5CE8DE; --kid-bg: #2A2A6E; --kid-line: #FFE45E; --chip-bg: #25256A; --chip-ink: #F3F0FF; --note-bg: #1D1D52; --focus: #FFE45E; --shadow: 0 6px 0 var(--lip), 0 18px 40px rgba(0, 0, 0, .3); color: var(--ink); }
  body.calm .doc-top { background: linear-gradient(180deg, #2A2A6E 0%, #1C1A4E 50%, #16163A 100%); }
  body.calm .doc-top .sun, body.calm .doc-top .cloud { display: none; }
  body.calm .doc-top .stars { display: block; }
  body.calm .doc-head .eyebrow { background: #1D4A40; color: #BDF5EF; }
}

@media print {
  :root { --bg: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --muted: #333333; --link: #000000; --line: #999999; --lip: #FFFFFF; --kid-bg: #FFFFFF; --note-bg: #FFFFFF; --shadow: none; }
  body, body.calm { font-size: 11pt; line-height: 1.5; background: #FFFFFF; }
  .skip, .site-nav, .motion, .motion-hint, .toc, .langs, .no-print, .site-footer ul, .nozu-sky, .nozu-stage, .scene-bg, .bridge, .doc-top, .stage, .hero-stage, .site-footer::before { display: none !important; }
  .fallback, .brand .logo svg { visibility: visible !important; }
  .brand .logo::after, .dots { display: none !important; }
  [data-nozu-row] { display: block; overflow: visible; margin: 1rem 0; padding: 0; }
  [data-nozu-row] > * { margin-bottom: .8rem; }
  .hero-grid { display: block; min-height: 0; }
  .button, .button.second { display: inline; background: none; box-shadow: none; padding: 0; min-height: 0; font-size: 1rem; }
  .button .play { display: none; }
  details::details-content { content-visibility: visible; display: block; }
  .print-only { display: block; }
  .site-header { position: static; }
  .site-header .bar { border: 0; box-shadow: none; background: none; }
  .scene, .night { background: #FFFFFF !important; color: #000000; --ink: #000000; --muted: #333333; --surface: #FFFFFF; --line: #999999; --link: #000000; padding-block: 1rem; margin-top: 0; }
  .doc { margin-top: 0; }
  .site-footer { padding-top: 0; }
  .site-footer .foot { background: none; color: #000000; }
  .site-footer p, .site-footer a { color: #000000; }
  .card, .kid, .note, .faq details, .doc-head { box-shadow: none; break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { text-decoration: none; }
  a.ref[href^="http"]::after { content: " <" attr(href) ">"; font-size: .85em; }
  @page { margin: 18mm 16mm; }
}