@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/rubik-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/rubik-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rubik-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/rubik-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/rubik-hebrew-800-normal.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/rubik-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Assistant";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/assistant-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Assistant";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/assistant-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Assistant";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/assistant-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Assistant";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/assistant-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Marketing site: the base layer (tokens, type, header, footer, inner pages, forms).
   The home page's sky world is in world.css. Logical properties only (RTL first). Contrast checked for WCAG 2.2 AA:
   body text is --ink on cream/pale sky (> 10:1); --ink-soft on cream > 7:1; the plum button 7.6:1. */
@property --sky-top { syntax: "<color>"; inherits: true; initial-value: #f7d9ea; }
@property --sky-mid { syntax: "<color>"; inherits: true; initial-value: #e6d6f7; }
@property --sky-bot { syntax: "<color>"; inherits: true; initial-value: #cfe3fb; }

:root {
  --ink: #2b1d4e;
  --ink-soft: #4d3f72;
  --plum: #5b2bb0;
  --plum-deep: #3f1d82;
  --pink: #c2185b;
  --rose: #ff8fb8;
  --gold: #f4b740;
  --gold-soft: #ffe2a3;
  --gold-ink: #7a4a00;
  --cream: #fffaf3;
  --cream-glass: rgb(255 250 243 / 0.82);
  --line: rgb(91 43 176 / 0.16);
  --night: #17143f;
  --night-2: #2b2470;
  --mint: #127a5c;
  --amber: #8a5a00;
  --coral: #a3401f;
  --slate: #4f5970;
  --radius-s: 14px;
  --radius: 26px;
  --radius-l: 44px;
  --pad: clamp(16px, 4.2vw, 40px);
  --max: 1200px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
  --shadow-soft: 0 1px 2px rgb(43 29 78 / 0.06), 0 12px 32px -12px rgb(43 29 78 / 0.22);
  --shadow-float: 0 2px 6px rgb(43 29 78 / 0.08), 0 30px 60px -24px rgb(64 30 120 / 0.35);
  --display: "Rubik", "Assistant", system-ui, sans-serif;
  --text: "Assistant", "Rubik", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 96px; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
}
h1, h2, h3, .wordmark, .button, .eyebrow { font-family: var(--display); }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; line-height: 1.12; margin-block: 0.3em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.1; margin-block: 0 0.4em; text-wrap: balance; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin-block: 0.6em 0.25em; }
:lang(en) h1, :lang(en) h2 { letter-spacing: -0.02em; }
p { margin-block: 0.5em; text-wrap: pretty; }
a { color: var(--plum); text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: rgb(91 43 176 / 0.35); }
a:hover { color: var(--plum-deep); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }
img { max-inline-size: 100%; block-size: auto; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- chrome --- */
.skip { position: absolute; inset-inline-start: 8px; inset-block-start: -80px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { inset-block-start: 8px; color: #fff; }
.preview-banner { position: relative; z-index: 5; margin: 0; padding: 6px var(--pad); background: var(--gold-soft); color: var(--ink); font-size: 0.9rem; text-align: center; }

.top {
  position: sticky; inset-block-start: 10px; z-index: 50;
  max-inline-size: calc(var(--max) + 2 * var(--pad)); margin: 10px auto 0; padding: 6px 8px 6px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  inline-size: calc(100% - 2 * var(--pad));
  background: rgb(255 250 243 / 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.45rem; color: var(--ink); text-decoration: none; padding: 4px 10px; letter-spacing: -0.01em; }
.wm-star { inline-size: 26px; block-size: 26px; flex: none; background: conic-gradient(from 0deg, #ffd34d, #ff9ec4, #b49cff, #8fd3ff, #ffd34d); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.top nav { flex: 1 1 auto; }
.top ul, .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.top nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--ink); }
.top nav a:hover { background: rgb(91 43 176 / 0.08); }
.top nav a[aria-current="page"] { background: rgb(91 43 176 / 0.12); }
.top-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.lang { display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--ink); border: 2px solid var(--line); }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: transparent; color: var(--ink); font: 700 0.95rem/1 var(--text); cursor: pointer; }
.motion-toggle:hover { background: rgb(91 43 176 / 0.08); }
.motion-toggle .mt-icon { inline-size: 12px; block-size: 14px; border-inline: 4px solid currentColor; }
.motion-toggle[aria-pressed="true"] .mt-icon { border: 0; border-inline-start: 12px solid currentColor; border-block: 7px solid transparent; inline-size: 0; block-size: 0; }
:dir(rtl) .motion-toggle[aria-pressed="true"] .mt-icon { transform: scaleX(-1); }

/* ---------------------------------------------------------------- buttons --- */
.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 52px; padding: 12px 26px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #6a34c9, var(--plum)); color: #fff;
  font: 700 1.08rem/1.2 var(--display); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 10px 24px -10px rgb(63 29 130 / 0.7);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.2s;
}
.button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 16px 30px -12px rgb(63 29 130 / 0.8); }
.button:active { transform: translateY(0) scale(0.98); }
.button.ghost { background: var(--cream-glass); color: var(--plum-deep); box-shadow: inset 0 0 0 2px rgb(91 43 176 / 0.5); }
.button.ghost:hover { background: #fff; color: var(--plum-deep); }
.button.light { background: #fff6dc; color: var(--night); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5), 0 10px 30px -10px rgb(255 214 120 / 0.8); }
.button.light:hover { color: var(--night); }
.button.small { min-block-size: 44px; padding: 8px 18px; font-size: 1rem; }
.button.big { min-block-size: 58px; padding-inline: 34px; font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 1.2em 0.8em; }

/* ---------------------------------------------------------------- status & labels --- */
.pill-status { display: inline-flex; align-items: center; gap: 8px; margin-block: 0.6em; padding: 5px 14px 5px 12px; border-radius: 999px; background: rgb(18 122 92 / 0.1); color: #0d5c45; font-size: 0.95rem; font-weight: 700; line-height: 1.35; }
.pill-status .dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #1aa57c; flex: none; box-shadow: 0 0 0 4px rgb(26 165 124 / 0.18); }
.pill-status.on-dark { background: rgb(255 255 255 / 0.12); color: #e9fff6; }
.pill-status.on-dark .dot { background: #6ff0c4; }
.status, .rule, .note { font-size: 1rem; color: var(--ink-soft); }
.status-label { font-weight: 700; color: var(--ink); }
.rule { display: inline-block; white-space: nowrap; background: rgb(91 43 176 / 0.08); color: var(--plum-deep); border-radius: 8px; padding: 0 8px; font-size: 0.82rem; font-weight: 700; unicode-bidi: isolate; }
.tag { display: inline-block; font-size: 0.95rem; font-weight: 700; background: var(--gold-soft); color: var(--gold-ink); border-radius: 999px; padding: 2px 12px; vertical-align: middle; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--ink-soft); max-inline-size: 60ch; }

/* ---------------------------------------------------------------- inner pages --- */
.page-sub { background: linear-gradient(180deg, #f6dcec 0, #e9e0fb 240px, var(--cream) 520px) no-repeat, var(--cream); }
.page-sub main { max-inline-size: 880px; margin: 28px auto 64px; padding: clamp(20px, 4vw, 48px); background: rgb(255 255 255 / 0.86); border-radius: var(--radius-l); box-shadow: var(--shadow-float); }
main:focus { outline: none; }
.page-sub main h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.page-sub main h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-block-start: 1.4em; }
.cards, .never, .rejected, .plain, .ev { list-style: none; margin: 0; padding: 0; }
.card, .qa, .method, .notice, .band, .result { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.band { background: #f4edff; margin-block: 28px; }
.toc ol { columns: 2 240px; padding-inline-start: 1.4em; }
.method { margin-block: 22px; box-shadow: var(--shadow-soft); }
.method h2 { margin-block-start: 0.2em; }
.ev li { margin-block: 8px; }
.evidence { display: inline-block; font-weight: 700; background: #f0e8ff; border-radius: 8px; padding: 0 8px; margin-inline-end: 6px; }
.rejected li { border-block-end: 1px solid var(--line); padding-block: 8px; }
.claim { font-weight: 700; }
.plain li { margin-block: 8px; padding-inline-start: 1.2em; position: relative; }
.plain li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.65em; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--plum); }
.qa { margin-block: 14px; }
.qa h2 { font-size: 1.25rem; margin-block-start: 0.1em; }
.draft { background: var(--gold-soft); border-radius: 14px; padding: 10px 14px; font-weight: 700; }
.placeholder { font-style: italic; }
.result { margin-block: 24px; text-align: center; }
.result .lede { margin-inline: auto; }
.notice dl, .rows, .labels { margin: 0; }
.notice dt, .rows dt, .labels dt { font-weight: 700; margin-block-start: 10px; }
.notice dd, .rows dd, .labels dd { margin: 0; }
.preview { background: var(--gold-soft); border-radius: 10px; padding: 6px 10px; }
.legal table { border-collapse: collapse; }

/* ---------------------------------------------------------------- forms --- */
.form { margin-block-start: 8px; }
.field { margin-block-end: 18px; border: 0; padding: 0; min-inline-size: 0; }
.field > label, legend { display: block; font-weight: 700; margin-block-end: 6px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
input[type="email"], input[type="text"], textarea, select {
  inline-size: 100%; min-block-size: 52px; font: inherit; padding: 10px 14px;
  border: 2px solid #8e78ad; border-radius: 16px; background: #fff; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
textarea { min-block-size: 160px; resize: vertical; }
input[type="email"]:focus, input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--plum); box-shadow: 0 0 0 4px rgb(91 43 176 / 0.15); outline: none; }
input[type="email"]:focus-visible, input[type="text"]:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.choice { display: flex; align-items: flex-start; gap: 10px; min-block-size: 44px; padding-block: 6px; font-weight: 400; }
.choice input { inline-size: 24px; block-size: 24px; margin-block-start: 4px; accent-color: var(--plum); flex: none; }
.hint { font-size: 0.95rem; color: var(--ink-soft); margin-block: 6px 0; }
.trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- footer --- */
.foot::before { content: ""; position: absolute; inset: -54px 0 auto; block-size: 56px; pointer-events: none;
  background: radial-gradient(110px 46px at 0% 100%, var(--night) 99%, transparent 100%), radial-gradient(150px 58px at 6% 100%, var(--night) 99%, transparent 100%), radial-gradient(120px 44px at 12% 100%, var(--night) 99%, transparent 100%), radial-gradient(170px 62px at 18% 100%, var(--night) 99%, transparent 100%), radial-gradient(130px 50px at 24% 100%, var(--night) 99%, transparent 100%), radial-gradient(160px 56px at 30% 100%, var(--night) 99%, transparent 100%), radial-gradient(110px 46px at 36% 100%, var(--night) 99%, transparent 100%), radial-gradient(150px 58px at 42% 100%, var(--night) 99%, transparent 100%), radial-gradient(120px 44px at 48% 100%, var(--night) 99%, transparent 100%), radial-gradient(170px 62px at 54% 100%, var(--night) 99%, transparent 100%), radial-gradient(130px 50px at 60% 100%, var(--night) 99%, transparent 100%), radial-gradient(160px 56px at 66% 100%, var(--night) 99%, transparent 100%), radial-gradient(110px 46px at 72% 100%, var(--night) 99%, transparent 100%), radial-gradient(150px 58px at 78% 100%, var(--night) 99%, transparent 100%), radial-gradient(120px 44px at 84% 100%, var(--night) 99%, transparent 100%), radial-gradient(170px 62px at 90% 100%, var(--night) 99%, transparent 100%), radial-gradient(130px 50px at 96% 100%, var(--night) 99%, transparent 100%), radial-gradient(160px 56px at 102% 100%, var(--night) 99%, transparent 100%), linear-gradient(var(--night), var(--night)) 0 100% / 100% 12px no-repeat; }
.foot { position: relative; color: #e8e2ff; background: radial-gradient(1200px 400px at 50% -10%, #3a2f8f, transparent 70%), var(--night); font-size: 1rem; }
.foot-inner { max-inline-size: var(--max); margin-inline: auto; padding: 56px var(--pad) 48px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 800 1.6rem var(--display); color: #fff; margin: 0 0 12px; }
.foot a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 10px; color: #f3eeff; text-decoration-color: rgb(243 238 255 / 0.4); }
.foot a:hover { color: #fff; }
.foot a[aria-current="page"] { color: #ffd98a; }
.foot p { color: #d6cff5; }

@media (max-width: 860px) {
  .top { position: relative; inset-block-start: 0; border-radius: 26px; padding: 6px; gap: 2px 6px; }
  .top nav { order: 3; flex-basis: 100%; }
  .top nav ul { justify-content: center; }
  .top nav a { min-block-size: 44px; padding: 6px 10px; font-size: 0.98rem; }
  .wordmark { font-size: 1.25rem; }
  .top-tools { margin-inline-start: auto; }
  .motion-toggle .mt-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .top .cta-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Visit-counting notice (js/consent.js): calm, bottom corner, never covers the page; and the footer "settings" button. */
.consent { position: fixed; inset-inline: 16px; inset-block-end: 16px; z-index: 30; max-inline-size: 460px; padding: 18px 20px; border-radius: var(--radius); background: var(--cream); color: var(--ink); box-shadow: var(--shadow-float); border: 1px solid var(--line); font-size: 1rem; }
.consent[hidden] { display: none; }
.consent h2 { font-size: 1.15rem; margin: 0 0 4px; }
.consent p { margin: 0 0 12px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 640px) { .consent { inset-inline-end: auto; inset-inline-start: 24px; } }
.linklike { display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 10px; font: inherit; color: #f3eeff; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: rgb(243 238 255 / 0.4); }
.linklike:hover { color: #fff; text-decoration-color: currentColor; }

/* The home page: the sky world (site/design/CONCEPT.md). Motion: transform + opacity only; every ambient animation
   pauses with the header button (html.still) and disappears with prefers-reduced-motion. Without JavaScript every
   section is fully visible and readable; js/world.js adds html.js and the reveals. */

.page-home { background: #f3d9ec; }
.page-home .top { margin-block-start: 10px; }
.page-home main { max-inline-size: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- the sky behind everything --- */
.world { position: relative; isolation: isolate; overflow-x: clip;
  background: linear-gradient(180deg, #f2d4ea 0%, #e3dcfb 7%, #cfe4ff 15%, #dcebff 24%, #ecdcfa 33%, #fbdcea 41%, #ffe1d2 48%, #e7d2f3 52%, #f3e6f7 62%, #e6f0ff 72%, #fff0de 86%, #ffd9b8 100%);
  --sky-top: #f7d9ea; --sky-mid: #e6d6f7; --sky-bot: #cfe3fb;
  transition: --sky-top 1.4s var(--ease-soft), --sky-mid 1.4s var(--ease-soft), --sky-bot 1.4s var(--ease-soft); }
.world[data-chapter="day"] { --sky-top: #cfe6ff; --sky-mid: #e3efff; --sky-bot: #fbe9f3; }
.world[data-chapter="dusk"] { --sky-top: #d8c8f6; --sky-mid: #f2d0e6; --sky-bot: #ffd9c4; }
.world[data-chapter="night"] { --sky-top: #141139; --sky-mid: #221d5c; --sky-bot: #3b2f7d; }
.world[data-chapter="morning"] { --sky-top: #fbe6f0; --sky-mid: #fff1e3; --sky-bot: #e5f0ff; }
.world[data-chapter="gold"] { --sky-top: #ffe8c2; --sky-mid: #ffd6c9; --sky-bot: #f6c9e4; }
.sky-wash { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sky-wash .wash { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.sky-wash .night { background: radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 12%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 40% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 86% 46%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 78%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 58% 30%, #fff8d6 50%, transparent 51%); }
.world[data-chapter="night"] .sky-wash .night { opacity: 0.9; }
.sky-wash .gold { background: radial-gradient(70% 60% at 50% 110%, rgb(255 200 110 / 0.55), transparent 70%); }
.world[data-chapter="gold"] .sky-wash .gold { opacity: 1; }

/* ---------------------------------------------------------------- Lumi, the companion --- */
.companion { position: fixed; z-index: 40; inset-block-end: 22px; inset-inline-end: 22px; inline-size: clamp(64px, 7vw, 104px); pointer-events: none; will-change: transform; }
html.js .companion.follows { inset: 0 auto auto 0; }
.companion { transition: opacity 0.35s; }
.companion.ghost { opacity: 0.22; }
.companion-body { position: relative; animation: bob 4.6s var(--ease-soft) infinite; filter: drop-shadow(0 10px 18px rgb(120 80 10 / 0.25)); }
.companion-img { display: block; inline-size: 100%; }
.companion .gface, .hatched .gface { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.companion-say { position: absolute; inset-block-end: 92%; inset-inline-end: 60%; margin: 0; padding: 8px 14px; white-space: nowrap; background: #fff; color: var(--ink); font: 700 0.95rem var(--display); border-radius: 18px 18px 4px 18px; box-shadow: var(--shadow-soft); transform-origin: 100% 100%; transition: opacity 0.4s, transform 0.5s var(--ease-out); }
:dir(rtl) .companion-say { border-radius: 18px 18px 18px 4px; transform-origin: 0 100%; }
.companion.quiet .companion-say { opacity: 0; transform: scale(0.6); }
.gface-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.8s infinite; }
.gface-look { transition: transform 0.25s var(--ease-out); }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.08); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* ---------------------------------------------------------------- hero: dawn --- */
.hero { position: relative; min-block-size: calc(100svh - 40px); margin-block-start: -76px; padding-block: 120px 40px; display: grid; align-items: center; overflow: clip; }
.hero-sky { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.sky-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.08) translateY(calc(var(--sy, 0) * 0.15px)); transition: opacity 0.8s; }
.rays { position: absolute; inset: -40% -20% auto; block-size: 140%; background: repeating-conic-gradient(from 0deg at 70% 0%, rgb(255 255 255 / 0.22) 0deg 5deg, transparent 5deg 16deg); mask-image: radial-gradient(60% 60% at 70% 0%, #000, transparent 75%); opacity: 0.55; will-change: transform; animation: rays 90s linear infinite; transform-origin: 70% 0%; }
:dir(rtl) .rays { background: repeating-conic-gradient(from 0deg at 30% 0%, rgb(255 255 255 / 0.22) 0deg 5deg, transparent 5deg 16deg); mask-image: radial-gradient(60% 60% at 30% 0%, #000, transparent 75%); transform-origin: 30% 0%; }
@keyframes rays { from { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } to { transform: rotate(-6deg); } }
.sparkles { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.cloud-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; transform: translate3d(calc(var(--px, 0) * var(--d) * 1px), calc(var(--sy, 0) * var(--d) * -0.6px + var(--py, 0) * var(--d) * 1px), 0); }
.cloud-layer.far { --d: 0.15; z-index: 0; }
.cloud-layer.mid { --d: 0.35; z-index: 0; }
.cloud-layer.near { --d: 0.8; z-index: 1; }
.cloud { position: absolute; block-size: auto; opacity: 0.95; animation: drift 70s var(--ease-soft) infinite alternate; }
.c1 { inline-size: 22vw; inset-block-start: 14%; inset-inline-start: 6%; opacity: 0.7; animation-duration: 90s; }
.c2 { inline-size: 16vw; inset-block-start: 8%; inset-inline-end: 22%; opacity: 0.6; animation-duration: 110s; animation-delay: -30s; }
.c3 { inline-size: 18vw; inset-block-start: 46%; inset-inline-start: 38%; opacity: 0.55; animation-duration: 95s; animation-delay: -50s; }
.c4 { inline-size: 26vw; inset-block-start: 62%; inset-inline-end: -4%; animation-duration: 60s; }
.c5 { inline-size: 20vw; inset-block-start: 30%; inset-inline-end: 40%; opacity: 0.8; animation-duration: 75s; animation-delay: -20s; }
.c6 { inline-size: 36vw; inset-block-end: -20%; inset-inline-start: -12%; animation-duration: 50s; filter: blur(1px); }
.c7 { inline-size: 30vw; inset-block-end: -22%; inset-inline-end: -10%; animation-duration: 58s; animation-delay: -25s; filter: blur(1.5px); }
@keyframes drift { from { transform: translateX(-6vw); } to { transform: translateX(6vw); } }

.hero-inner { position: relative; z-index: 2; inline-size: 100%; max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--pad); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(16px, 4vw, 64px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 16px 6px 8px; border-radius: 999px; background: rgb(255 255 255 / 0.7); color: var(--plum-deep); font-size: 1rem; font-weight: 700; box-shadow: var(--shadow-soft); }
.eyebrow::before { content: ""; inline-size: 22px; block-size: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c9, #ffc94d 60%, #f29f05); box-shadow: 0 0 12px #ffd25a; }
.hero h1 { font-size: clamp(2.4rem, 4.7vw, 4.4rem); line-height: 1.02; margin-block: 0 0.3em; color: var(--ink); text-wrap: balance; }
:lang(he) .hero h1 { line-height: 1.08; }
.h1-line { display: block; }
.h1-line.accent { background: linear-gradient(100deg, #5b2bb0 10%, #b4237a 55%, #c2410c 95%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block-end: 0.08em; }
.hero .lede { color: var(--ink); font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.72); font-weight: 700; font-size: 1rem; color: var(--ink); box-shadow: var(--shadow-soft); }
.chips li::before { content: ""; inline-size: 18px; block-size: 18px; border-radius: 50%; background: linear-gradient(140deg, #ffd96b, #f2a51a); box-shadow: inset 0 0 0 5px rgb(255 255 255 / 0.55); }
.proto { font-size: 1rem; color: var(--ink-soft); max-inline-size: 46ch; }
.fly .arrow { inline-size: 10px; block-size: 10px; border-inline-end: 2.5px solid currentColor; border-block-end: 2.5px solid currentColor; transform: translateY(-2px) rotate(45deg); animation: nudge 2.2s var(--ease-soft) infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }

.hero-stage { position: relative; display: grid; justify-items: center; transform: translate3d(calc(var(--px, 0) * -0.4px), calc(var(--sy, 0) * -0.12px), 0); }
.isle-wrap { position: relative; inline-size: min(600px, 100%); animation: float 7.5s var(--ease-soft) infinite; will-change: transform; }
.hero-isle { display: block; inline-size: 100%; margin-block-start: 52%; transition: opacity 0.8s; }
/* a painted-style soft shadow under the island (cheaper than a drop-shadow filter on a floating layer) */
.isle-wrap::after { content: ""; position: absolute; inset-inline: 18%; inset-block-end: -9%; block-size: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(70 30 110 / 0.22), transparent); z-index: -1; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
/* the island art is not mirrored, so the kid stands on its grass at the same physical spot in both directions */
.kid { position: absolute; inset-block-start: 0; margin-block-start: 33%; inset-inline-start: 63%; translate: -50% 0; inline-size: 40%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 40px; -webkit-tap-highlight-color: transparent; }
:dir(rtl) .kid { inset-inline-start: 37%; translate: 50% 0; }
.kid-body { position: relative; display: block; transform-origin: 50% 96%; animation: breathe 4.4s var(--ease-soft) infinite; }
.kid-img { display: block; inline-size: 100%; transition: opacity 0.35s, transform 0.5s var(--ease-out); }
.kid-blink { position: absolute; inset-inline-start: 27.917%; inset-block-start: 6%; inline-size: 44.167%; opacity: 0; pointer-events: none; }
:dir(rtl) .kid-blink { inset-inline-start: auto; inset-inline-end: 27.917%; }
.kid.blinking .kid-blink { opacity: 1; }
.kid-shadow { position: absolute; inset-block-end: -2%; inset-inline: 22%; block-size: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgb(60 30 50 / 0.28), transparent); z-index: -1; }
.kid:hover .kid-img { transform: translateY(-6px); }
.kid.swap .kid-img { opacity: 0; transform: translateY(8px) scale(0.96); }
.kid:focus-visible { outline-offset: 6px; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(1.004, 1.012) rotate(0.4deg); } 70% { transform: scale(0.998, 0.996) rotate(-0.4deg); } }
.kid-hint { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.75); font-weight: 700; font-size: 1rem; color: var(--ink); box-shadow: var(--shadow-soft); }
.hand { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 rgb(194 24 91 / 0.5); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(194 24 91 / 0.45); } 100% { box-shadow: 0 0 0 14px rgb(194 24 91 / 0); } }
.burst { position: absolute; inline-size: 8px; block-size: 8px; border-radius: 50%; pointer-events: none; animation: burst 0.9s var(--ease-out) forwards; }
@keyframes burst { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.2); } }

/* ---------------------------------------------------------------- shared section rhythm --- */
.world > section:not(.hero), .cinema { position: relative; max-inline-size: var(--max); margin-inline: auto; padding: clamp(64px, 9vw, 120px) var(--pad); }
.section-head { max-inline-size: 760px; }
.section-head h2, .maker-copy h2, .guide-copy h2, .calm-copy h2, .parents-copy h2, .never h2, .open h2 { font-size: clamp(2.1rem, 5vw, 4rem); }
.pill-status.center { display: flex; inline-size: fit-content; margin-inline: auto; }
.section-head h2::after, .maker-copy h2::after, .guide-copy h2::after, .calm-copy h2::after, .parents-copy h2::after, .never > h2::after, .open > h2::after, .cinema .film-hero h2::after, .wait-card h2::after {
  content: ""; display: block; inline-size: min(180px, 40%); block-size: 16px; margin-block-start: 6px;
  border-block-end: 5px solid var(--gold); border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform-origin: 100% 50%; transition: transform 1.2s 0.3s var(--ease-out);
}
:dir(ltr) .section-head h2::after, :dir(ltr) .maker-copy h2::after, :dir(ltr) .guide-copy h2::after, :dir(ltr) .calm-copy h2::after, :dir(ltr) .parents-copy h2::after, :dir(ltr) .never > h2::after, :dir(ltr) .open > h2::after, :dir(ltr) .wait-card h2::after { transform-origin: 0 50%; }
.cinema .film-hero h2::after { margin-inline: auto; transform-origin: 50% 50%; }
html.js.motion [data-reveal]:not(.in) h2::after, html.js.motion h2[data-reveal]:not(.in)::after { transform: scaleX(0); }

/* reveal (only with JS and motion) */
html.js.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--rd, 0s); }
html.js.motion [data-reveal].in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- drifting clouds between chapters --- */
.decos { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.deco { position: absolute; transform: translate3d(0, calc(var(--isy, 0) * 1px), 0); }
.deco .cloud { position: static; display: block; inline-size: 100%; opacity: 0.85; }
.dk1 { inline-size: clamp(160px, 20vw, 300px); inset-block-start: 4%; inset-inline-end: -4%; }
.dk2 { inline-size: clamp(120px, 14vw, 220px); inset-block-start: 38%; inset-inline-start: -3%; opacity: 0.8; }
.dk3 { inline-size: clamp(180px, 22vw, 340px); inset-block-end: 2%; inset-inline-end: 8%; }
.dk4 { inline-size: clamp(140px, 16vw, 240px); inset-block-start: 4%; inset-inline-end: -1%; }
.dk5 { inline-size: clamp(120px, 12vw, 200px); inset-block-end: 6%; inset-inline-end: 4%; }
.dk6 { inline-size: clamp(150px, 18vw, 280px); inset-block-start: 1%; inset-inline-end: 4%; }
.dk7 { inline-size: clamp(120px, 13vw, 210px); inset-block-end: 12%; inset-inline-end: -2%; }
.dk8 { inline-size: clamp(160px, 18vw, 280px); inset-block-start: 6%; inset-inline-end: 30%; }
.dk9 { inline-size: clamp(120px, 12vw, 200px); inset-block-end: 4%; inset-inline-start: 2%; }
.dk2 .cloud, .dk5 .cloud, .dk7 .cloud, .dk9 .cloud { animation-duration: 55s; animation-delay: -20s; }

/* ---------------------------------------------------------------- islands --- */
.theme-switch { margin-block: 28px 8px; }
.theme-q { font: 700 1.15rem var(--display); margin: 0 0 10px; }
.themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.theme-btn { display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 8px 18px 8px 10px; border: 2px solid rgb(91 43 176 / 0.2); border-radius: 999px; background: rgb(255 255 255 / 0.8); color: var(--ink); font: 700 1rem var(--display); cursor: pointer; transition: transform 0.3s var(--ease-out), border-color 0.2s, background 0.2s; }
.theme-btn:hover { transform: translateY(-2px); background: #fff; }
.theme-btn[aria-pressed="true"] { border-color: var(--plum); background: #fff; box-shadow: 0 0 0 4px rgb(91 43 176 / 0.12); }
.orb { inline-size: 30px; block-size: 30px; border-radius: 50%; box-shadow: inset -4px -4px 8px rgb(0 0 0 / 0.18), inset 3px 3px 6px rgb(255 255 255 / 0.6); }
.orb-sky { background: linear-gradient(140deg, #ffd2ea, #c5b3ff 60%, #9fd2ff); }
.orb-city { background: linear-gradient(140deg, #9fd0ff, #ffe0a0); }
.orb-space { background: radial-gradient(circle at 30% 30%, #6f88d8, #20285e 70%); }
.orb-reef { background: linear-gradient(140deg, #7fe0dc, #2b9fb0 60%, #f3d29a); }

.archipelago { position: relative; margin-block: 40px 20px; padding-block: 56px 150px; }
/* the islands float in the chosen world's own sky: switching worlds repaints it */
.isles-sky { position: absolute; inset: 0 calc(var(--pad) * -1); z-index: 0; overflow: hidden; border-radius: 64px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), var(--shadow-float); -webkit-mask-image: radial-gradient(130% 100% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(130% 100% at 50% 50%, #000 62%, transparent 100%); }
.isles-sky-img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity 0.6s; }
.isles-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0.18), transparent 30%, transparent 70%, rgb(255 255 255 / 0.25)); }
.isles-count { margin-inline-start: 12px; }
.flight { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.flight-path { fill: none; stroke: #f0a92e; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; opacity: 0.9; }
.comet { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; inline-size: 26px; block-size: 26px; margin: -13px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #ffe08a 40%, rgb(255 190 60 / 0) 70%); box-shadow: 0 0 24px 10px rgb(255 205 90 / 0.55); pointer-events: none; opacity: 0; transition: opacity 0.4s; }
:dir(rtl) .comet { inset-inline-start: auto; inset-inline-end: 0; }
.flight-glow { fill: none; stroke: #ffd36b; stroke-width: 10; stroke-linecap: round; opacity: 0.35; filter: blur(4px); }
.isles { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 24px; }
.isle { grid-column: span 2; display: grid; justify-items: center; align-content: start; text-align: center; }
.isle-2, .isle-5 { translate: 0 120px; }
.isles-count { position: relative; z-index: 1; display: inline-block; margin: 0 0 18px; padding: 6px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.75); font: 700 1.05rem var(--display); box-shadow: var(--shadow-soft); }
.isle-art { position: relative; inline-size: min(320px, 100%); transform: translate3d(0, calc(var(--isy, 0) * 1px), 0); }
.isle-img { display: block; inline-size: 100%; filter: drop-shadow(0 26px 24px rgb(60 30 100 / 0.22)); animation: float 6.5s var(--ease-soft) infinite; transition: opacity 0.6s, transform 0.6s var(--ease-out), scale 0.5s var(--ease-out); }
.isle-2 .isle-img { animation-delay: -1.4s; animation-duration: 7.2s; }
.isle-3 .isle-img { animation-delay: -3s; animation-duration: 6s; }
.isle-4 .isle-img { animation-delay: -2.2s; animation-duration: 7.8s; }
.isle-5 .isle-img { animation-delay: -4.1s; animation-duration: 6.8s; }
.isle-6 .isle-img { animation-delay: -0.6s; animation-duration: 7.4s; }
.isle:hover .isle-img { scale: 1.06; }
.isle-card { margin-block-start: 8px; padding: 14px 18px; max-inline-size: 300px; background: rgb(255 250 243 / 0.94); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.isle-card h3 { margin: 0 0 4px; font-size: 1.3rem; }
.isle-card p { margin: 0; font-size: 1.02rem; color: var(--ink-soft); }
.world.swapping [data-swap] { opacity: 0.15; }

/* ---------------------------------------------------------------- the creator (world ring) --- */
.maker-grid, .guide-grid, .calm-grid, .parents-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.maker-stage { display: grid; place-items: center; }
.ring { --size: min(500px, 84vw); position: relative; inline-size: var(--size); block-size: var(--size); touch-action: none; }
.ring-track { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 72%, transparent 73%), conic-gradient(from 0deg, #ffd1e4, #ffe7a8, #c9f0d8, #bfe0ff, #d9c8ff, #ffd1e4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7), var(--shadow-float); cursor: grab; }
.ring-track::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgb(91 43 176 / 0.28); }
.ring-dot { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 14px; block-size: 14px; margin: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgb(91 43 176 / 0.35); transform: rotate(var(--a)) translateY(calc(var(--size) * -0.43)) rotate(calc(var(--a) * -1)); }
.d0 { --a: 0deg; } .d1 { --a: 32.73deg; } .d2 { --a: 65.45deg; } .d3 { --a: 98.18deg; } .d4 { --a: 130.91deg; } .d5 { --a: 163.64deg; }
.d6 { --a: 196.36deg; } .d7 { --a: 229.09deg; } .d8 { --a: 261.82deg; } .d9 { --a: 294.55deg; } .d10 { --a: 327.27deg; }
.portrait { position: absolute; inset: 16%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff7fb, #f7defb 60%, #e2d4ff); box-shadow: inset 0 0 0 6px #fff, 0 20px 50px -20px rgb(80 40 140 / 0.5); pointer-events: none; }
.portrait-img { position: absolute; inset-inline-start: 0; inset-block-start: 4%; inline-size: 100%; block-size: auto; }
.portrait-img.b { opacity: 0; }
.knob { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 56px; block-size: 56px; margin: -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffe08a 45%, #f2a51a); box-shadow: 0 0 0 4px #fff, 0 0 24px 6px rgb(255 200 80 / 0.7); transform: rotate(var(--ka, 0deg)) translateY(calc(var(--size) * -0.43)); cursor: grab; touch-action: none; transition: box-shadow 0.2s; }
.knob span { position: absolute; inset: 30%; border-radius: 50%; background: rgb(255 255 255 / 0.8); }
.knob:active, .ring.dragging .knob { cursor: grabbing; box-shadow: 0 0 0 4px #fff, 0 0 34px 12px rgb(255 200 80 / 0.85); }
.knob:focus-visible { outline: 4px solid var(--pink); outline-offset: 4px; }
.ring-hint { position: absolute; inset-block-start: -6%; inset-inline-end: -6%; margin: 0; padding: 8px 14px; border-radius: 16px; background: #fff; color: var(--ink); font: 700 0.98rem var(--display); box-shadow: var(--shadow-soft); pointer-events: none; animation: bob 4s var(--ease-soft) infinite; transition: opacity 0.4s; }
.ring.touched .ring-hint { opacity: 0; }

/* ---------------------------------------------------------------- the guide --- */
.chat-phone { margin: 0; padding: 22px 18px 18px; border-radius: 40px; background: linear-gradient(180deg, #2a2366, #4a2f87); box-shadow: 0 0 0 10px #1c1745, var(--shadow-float); color: #fff; max-inline-size: 420px; justify-self: center; }
.chat-cap { font: 700 1rem var(--display); color: #fff; text-align: center; margin-block-end: 14px; }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bubble { position: relative; max-inline-size: 88%; padding: 12px 16px; border-radius: 22px; font-size: 1.05rem; line-height: 1.45; }
.from-guide { justify-self: start; background: #ffd95a; color: #2b1d07; border-end-start-radius: 6px; padding-inline-start: 54px; }
.from-kid { justify-self: end; background: #fff; color: var(--ink); border-end-end-radius: 6px; }
.mini-lumi { position: absolute; inset-inline-start: 6px; inset-block-start: 6px; inline-size: 42px; block-size: 42px; }
.mini-lumi img, .mini-lumi .gface { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.ai-tag { display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: 8px; background: rgb(43 29 7 / 0.12); font-weight: 800; font-size: 0.85rem; }
.chat-phone .note { color: #ddd6ff; text-align: center; margin-block: 14px 0; font-size: 0.95rem; }
html.js.motion .chat.waiting .bubble { opacity: 0; transform: translateY(14px) scale(0.96); }
.bubble { transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.typing { justify-self: start; display: inline-flex; gap: 5px; padding: 14px 18px; border-radius: 20px; background: rgb(255 217 90 / 0.9); }
.typing i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #5a4410; animation: dots 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } }

.eggs-block { margin-block-start: clamp(56px, 8vw, 110px); text-align: center; }
.eggs-block h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0; }
.eggs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: clamp(10px, 3vw, 40px); }
.egg { position: relative; display: grid; justify-items: center; gap: 10px; inline-size: 100%; padding: 0 0 6px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: var(--radius); }
.egg-shell, .hatched { grid-area: 1 / 1; inline-size: 100%; aspect-ratio: 1; position: relative; }
.egg-img, .guide-img { display: block; inline-size: 100%; }
.egg-shell { animation: wobble 3.6s var(--ease-soft) infinite; transform-origin: 50% 90%; transition: opacity 0.4s, transform 0.5s var(--ease-out); }
.eggs li:nth-child(2) .egg-shell { animation-delay: -1.2s; }
.eggs li:nth-child(3) .egg-shell { animation-delay: -2.4s; }
.egg:hover .egg-shell { animation-duration: 0.9s; }
@keyframes wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-5deg); } 82% { transform: rotate(5deg); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(2deg); } }
.hatched { opacity: 0; transform: scale(0.4) translateY(30px); transition: opacity 0.5s 0.15s, transform 0.8s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.egg[aria-pressed="true"] .egg-shell { opacity: 0; transform: scale(1.3); animation: none; }
.egg[aria-pressed="true"] .hatched { opacity: 1; transform: none; }
.egg[aria-pressed="true"] .hatched .guide-img { animation: bob 4s var(--ease-soft) infinite; }
.egg-name { font: 700 1.15rem var(--display); padding: 6px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.8); box-shadow: var(--shadow-soft); }

/* ---------------------------------------------------------------- night: the quiet corner --- */
.world > section.calm { max-inline-size: none; overflow: clip; color: #f4f0ff; background: radial-gradient(900px 500px at 50% 0%, #3a2f8f 0%, transparent 70%), linear-gradient(180deg, transparent 0, #1b1748 14%, #17143f 86%, transparent 100%); }
.calm-grid { max-inline-size: var(--max); margin-inline: auto; }
.calm h2 { color: #fff; }
.calm .lede { color: #e2dcff; }
.calm .note.on-dark, .note.on-dark { color: #d9d2ff; }
.stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.6px 1.6px at 8% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 18% 64%, #fff, transparent), radial-gradient(2px 2px at 32% 12%, #fff7c9, transparent), radial-gradient(1.4px 1.4px at 46% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 62% 18%, #fff, transparent), radial-gradient(2px 2px at 74% 70%, #fff, transparent), radial-gradient(1.4px 1.4px at 88% 30%, #fff7c9, transparent), radial-gradient(1.2px 1.2px at 94% 84%, #fff, transparent), radial-gradient(1.6px 1.6px at 54% 86%, #fff, transparent), radial-gradient(1.2px 1.2px at 26% 90%, #fff, transparent); animation: twinkle 5s var(--ease-soft) infinite alternate; }
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 1; } }
.lighthouse { position: relative; display: grid; place-items: center; }
.lh-img { position: relative; z-index: 1; inline-size: min(280px, 60%); filter: drop-shadow(0 0 40px rgb(255 214 120 / 0.35)); animation: float 8s var(--ease-soft) infinite; }
.beam { position: absolute; z-index: 0; inset-block-start: 6%; inset-inline-start: 50%; inline-size: 200%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, rgb(255 228 150 / 0.55), rgb(255 228 150 / 0) 16deg, transparent 180deg, rgb(255 228 150 / 0.55) 180deg, rgb(255 228 150 / 0) 196deg, transparent 360deg); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); animation: sweep 16s linear infinite; }
:dir(rtl) .beam { translate: 50% -50%; }
@keyframes sweep { to { transform: rotate(360deg); } }
.breath { display: grid; justify-items: start; gap: 14px; margin-block-start: 22px; }
.breath-orb { position: relative; display: grid; place-items: center; inline-size: 150px; block-size: 150px; border-radius: 50%; background: radial-gradient(circle, rgb(255 236 170 / 0.95), rgb(255 200 90 / 0.4) 55%, transparent 72%); transform: scale(0.62); transition: transform 4.5s var(--ease-soft); }
.breath-orb.inhale { transform: scale(1); }
.breath-word { font: 700 1.1rem var(--display); color: #2b1d07; }

/* ---------------------------------------------------------------- parents --- */
.panel { padding: clamp(20px, 3vw, 34px); border-radius: var(--radius-l); background: rgb(255 250 243 / 0.92); box-shadow: var(--shadow-float); }
.panel-title { font: 700 1.15rem var(--display); margin: 0 0 12px; }
.switches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.switch { display: flex; align-items: center; gap: 14px; inline-size: 100%; min-block-size: 64px; padding: 10px 16px; border: 0; border-radius: 20px; background: #fff; color: var(--ink); font: 700 1.08rem var(--display); text-align: start; cursor: pointer; box-shadow: var(--shadow-soft); transition: transform 0.25s var(--ease-out); }
.switch:hover { transform: translateY(-2px); }
.sw-label { flex: 1; }
.sw-state { min-inline-size: 3.5em; font-size: 0.95rem; color: var(--ink-soft); }
.sw-track { position: relative; inline-size: 58px; block-size: 34px; border-radius: 999px; background: #c9bfdc; transition: background 0.3s; flex: none; }
.sw-thumb { position: absolute; inset-block-start: 4px; inset-inline-start: 4px; inline-size: 26px; block-size: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.25); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.switch[aria-checked="true"] .sw-track { background: #1f9e78; }
.switch[aria-checked="true"] .sw-thumb { transform: translateX(24px); }
:dir(rtl) .switch[aria-checked="true"] .sw-thumb { transform: translateX(-24px); }

/* ---------------------------------------------------------------- never, open --- */
.never-list { list-style: none; margin: 34px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.never-list li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 18px 62px; border-radius: 22px; background: var(--cream-glass); box-shadow: var(--shadow-soft); font-weight: 700; font-size: 1.08rem; line-height: 1.4; }
:dir(rtl) .never-list li { padding: 18px 62px 18px 20px; }
.never-list li { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.never-list li:hover, html.js.motion .never-list li.in:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: var(--shadow-float); }
html.js.motion .never-list li[data-reveal]:not(.in)::before, html.js.motion .never-list li[data-reveal]:not(.in)::after { transform: scale(0); }
.never-list li::before { transition: transform 0.6s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  content: ""; position: absolute; inset-inline-start: 18px; inset-block-start: 18px; inline-size: 30px; block-size: 30px; border-radius: 50%; background: linear-gradient(140deg, #ffd96b, #f2a51a); box-shadow: 0 4px 10px -2px rgb(200 120 0 / 0.5); }
.never-list li::after { content: ""; position: absolute; inset-inline-start: 27px; inset-block-start: 26px; inline-size: 12px; block-size: 7px; border-inline-start: 3px solid #fff; border-block-end: 3px solid #fff; transform: rotate(-45deg); }
:dir(rtl) .never-list li::after { transform: scaleX(-1) rotate(-45deg); }
.ev-legend { list-style: none; margin: 12px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ev-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; font-weight: 700; box-shadow: var(--shadow-soft); }
.ev-pill::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 50%; }
.ev-0::before { background: #1f9e78; } .ev-1::before { background: #e3a400; } .ev-2::before { background: #e8743b; } .ev-3::before { background: #8d93a8; }
.open { text-align: start; }

/* ---------------------------------------------------------------- films --- */
.cinema { padding-block-start: 40px; }
.cinema h2 { font-size: clamp(2.1rem, 5vw, 4rem); text-align: center; }
.cinema .film-frame { padding: 12px; border-radius: 34px; background: linear-gradient(140deg, #ffd1e6, #d9c8ff, #bfe3ff); box-shadow: var(--shadow-float); }
.cinema .film { border-radius: 24px; }
.cinema .film-card { background: var(--cream-glass); border: 0; border-radius: var(--radius-l); padding: 22px; box-shadow: var(--shadow-soft); }
.cinema #films { margin-block-start: 80px; }
.cinema #films > h2, .cinema #films > p { text-align: center; }
.cinema #films > p { max-inline-size: 60ch; margin-inline: auto; }

/* ---------------------------------------------------------------- price + waitlist: gold morning --- */
.world > section.price { padding-block-end: 0; text-align: center; }
.ticket { position: relative; max-inline-size: 760px; margin-inline: auto; padding: clamp(26px, 4vw, 44px); border-radius: var(--radius-l); background: linear-gradient(#fffaf0, #fffaf0) padding-box, linear-gradient(120deg, #ffd96b, #ff9ec4, #b49cff, #ffd96b) border-box; border: 3px solid transparent; box-shadow: var(--shadow-float); }
.ticket::before, .ticket::after { content: ""; position: absolute; inset-block-start: 50%; inline-size: 34px; block-size: 34px; margin-block-start: -17px; border-radius: 50%; background: #ffe7cf; }
.ticket::before { inset-inline-start: -19px; } .ticket::after { inset-inline-end: -19px; }
.ticket h2 { margin-block-end: 0.2em; }
.price h2 { font-size: clamp(2.1rem, 5vw, 4rem); }
.price-main { font: 800 clamp(1.4rem, 3vw, 2.2rem) var(--display); margin-block: 0.2em; }
.price > p:last-child { max-inline-size: 64ch; margin-inline: auto; }
.wait-card { max-inline-size: 860px; margin-inline: auto; padding: clamp(24px, 5vw, 56px); border-radius: var(--radius-l); background: rgb(255 252 246 / 0.9); box-shadow: var(--shadow-float), 0 0 0 1px rgb(255 255 255 / 0.9) inset; }
.wait-card h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.notice { margin-block-start: 26px; background: #fff; border: 0; box-shadow: var(--shadow-soft); }
.notice dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }

/* ---------------------------------------------------------------- phones --- */
@media (max-width: 900px) {
  .hero { margin-block-start: -132px; padding-block: 140px 24px; min-block-size: auto; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: start; gap: 4px; }
  .hero-stage { margin-block-start: -6px; }
  .isle-wrap { inline-size: min(300px, 78vw); }
  .hero h1 { font-size: clamp(2.1rem, 9.4vw, 3rem); }
  .eyebrow { font-size: 0.9rem; }
  .proto { font-size: 0.95rem; }
  .companion { inline-size: 58px; inset-block-end: 14px; inset-inline-end: 14px; }
  .companion-say { display: none; }
  .maker-grid, .guide-grid, .calm-grid, .parents-grid { grid-template-columns: minmax(0, 1fr); }
  .isles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .isle { grid-column: auto; }
  .isle-2, .isle-5 { translate: 0; }
  .isle:nth-child(even) { translate: 0 48px; }
  .isle-card { padding: 10px 12px; }
  .isle-card h3 { font-size: 1.1rem; }
  .isle-card p { font-size: 0.95rem; }
  .lighthouse { order: -1; }
  .notice dl { grid-template-columns: minmax(0, 1fr); }
  .eggs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .egg-name { font-size: 0.95rem; padding: 4px 10px; }
  .c1, .c2, .c3, .c5 { inline-size: 40vw; }
  .deco { inline-size: 120px !important; opacity: 0.75; }
  .dk1, .dk4, .dk6, .dk8 { inset-block-start: 0 !important; inset-inline-start: auto !important; inset-inline-end: -48px !important; }
  .dk2, .dk3, .dk5, .dk7, .dk9 { inset-block-start: auto !important; inset-block-end: 0 !important; inset-inline-end: auto !important; inset-inline-start: -52px !important; }
  html.js .companion.away { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s; }
  .c6, .c7 { inline-size: 70vw; }
}
@media (max-width: 520px) {
  .isles { gap: 28px 10px; }
  .eggs { gap: 6px; }
}

/* ---------------------------------------------------------------- stillness --- */
html.still *, html.still *::before, html.still *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .sky-art, .hero-stage, .cloud-layer, .isle-art { transform: none !important; }
  .cloud-layer.near { display: none; }
  .world, .sky-wash .wash { transition: none; }
  .breath-orb { transition: none; }
  .hatched { transition: none; }
}

/* Films (local demo). Phone breakpoint matches PHONE in content/films.mjs. Appended to site.css by build.mjs. */
.film-hero { margin-block-start: 8px; }
.film-frame { max-inline-size: 960px; margin-inline: auto; }
.film { display: block; inline-size: 100%; background: #1c1230; border-radius: var(--radius); object-fit: contain; }
.film-wide { aspect-ratio: 16 / 9; }
.film-tall { aspect-ratio: 9 / 16; }
.film-actions { text-align: center; margin-block: 10px 0; }
.film-blurb { font-size: 1.1rem; max-inline-size: 70ch; margin-inline: auto; text-align: center; }
.film-text { max-inline-size: 70ch; margin-inline: auto; }
.film-text summary { cursor: pointer; min-block-size: 44px; padding-block: 8px; font-weight: 700; color: var(--brand-dark); }
.film-hero .note { text-align: center; }
.films { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.film-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.film-card h3 { margin-block-start: 0; }
.phone-frame { max-inline-size: 280px; margin-inline: auto; padding: 12px 10px; background: #2b1f3a; border-radius: 36px; }
.phone-frame .film { border-radius: 24px; }
@media (max-width: 760px) {
  .film-hero .film-wide { aspect-ratio: 9 / 16; inline-size: min(100%, calc(75vh * 9 / 16)); margin-inline: auto; }
  .films { grid-template-columns: minmax(0, 1fr); }
  .film-card:not(.is-phone) .film-wide { aspect-ratio: 9 / 16; inline-size: min(100%, calc(75vh * 9 / 16)); margin-inline: auto; }
}