@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/baloo-2-500.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/baloo-2-600.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/baloo-2-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/nunito-800.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-800.woff2") format("woff2"); }

:root {
  --ds-primitive-mint: #67C7AD;
  --ds-primitive-yellow: #FEE452;
  --ds-primitive-gold: #FDCC1A;
  --ds-primitive-pink: #F99A78;
  --ds-primitive-strong-pink: #893517;
  --ds-primitive-warm-white: #FDFEFE;
  --ds-primitive-night: #170F3E;
  --ds-primitive-dark-mint: #105243;
  --ds-color-bg-day: #FDFEFE;
  --ds-color-bg-night: #170F3E;
  --ds-color-surface-mint: #67C7AD;
  --ds-color-surface-memory: #F99A78;
  --ds-color-action-primary: #FEE452;
  --ds-color-action-primary-dark: #FDCC1A;
  --ds-color-action-navigation-hover: var(--ds-color-surface-mint);
  --ds-color-text-primary: #170F3E;
  --ds-color-text-supporting: #105243;
  --ds-color-text-story-highlight: color-mix(in oklch, var(--ds-color-surface-mint) 45%, var(--ds-color-text-supporting));
  --ds-color-text-on-dark: #FDFEFE;
  --ds-color-border-soft: color-mix(in oklch, #67C7AD 32%, #FDFEFE);
  --ds-color-focus: #67C7AD;
  --ds-font-display: "Poppins", Arial, sans-serif;
  --ds-font-body: "Nunito", Arial, sans-serif;
  --ds-font-accent: "Baloo 2", cursive;
  --ds-font-wordmark: "Baloo 2", Arial, sans-serif;
  --ds-weight-wordmark: 700;
  --ds-leading-wordmark: 1;
  --ds-tracking-wordmark: 0;
  --ds-text-display: clamp(3.25em, 7vw, 7em);
  --ds-text-cinematic: clamp(3.25em, 12vw, 10em);
  --ds-text-hero-mobile: clamp(2.25em, 9vw, 3em);
  --ds-text-hero-desktop: clamp(4em, 7vw, 7em);
  --ds-text-h1: clamp(2.5em, 5vw, 5em);
  --ds-text-h2: clamp(2em, 3.5vw, 3.5em);
  --ds-text-h3: clamp(1.5em, 2.25vw, 2.25em);
  --ds-text-download-title: clamp(1.75em, 4vw, 3em);
  --ds-text-body: 1em;
  --ds-text-small: 0.875em;
  --ds-leading-display: 1.03;
  --ds-leading-cinematic: 0.88;
  --ds-leading-hero-mobile: 1.42;
  --ds-leading-body: 1.55;
  --ds-space-1: 0.5em;
  --ds-space-2: 0.75em;
  --ds-space-3: 1em;
  --ds-space-4: 1.5em;
  --ds-space-5: 2em;
  --ds-space-6: 3em;
  --ds-space-7: 5em;
  --ds-space-8: 8em;
  --ds-space-9: 12em;
  --ds-radius-soft: 0.75em;
  --ds-radius-round: 1.5em;
  --ds-radius-capsule: 999em;
  --ds-shadow-story: 0 1.25em 3.5em color-mix(in oklch, #170F3E 20%, transparent);
  --ds-container-text: 42em;
  --ds-container-default: 76em;
  --ds-container-wide: 100em;
  --ds-gutter: clamp(1.25em, 5vw, 4em);
  --ds-section-compact: 5em;
  --ds-section-default: 8em;
  --ds-section-hero: clamp(8em, 14vw, 14em);
  --ds-grid-gap: var(--ds-space-5);
  --ds-hero-mobile-screen: max(46em, calc(var(--app-vh) * 100));
  --ds-hero-mobile-action-clearance: clamp(var(--ds-space-5), 8svh, var(--ds-space-7));
  --ds-hero-stage-min: max(58em, calc(var(--app-vh) * 140));
  --ds-hero-copy-offset: clamp(28em, 63svh, 34em);
  --ds-hero-art-ratio-mobile: 402 / 874;
  --ds-hero-art-ratio-mobile-landscape: 16 / 9;
  --ds-hero-art-ratio-tablet: 4 / 5;
  --ds-hero-art-ratio-desktop: 16 / 9;
  --ds-hero-art-ratio: var(--ds-hero-art-ratio-mobile);
  --ds-stage-scroll-mobile: 135svh;
  --ds-stage-scroll-desktop: 180svh;
  --ds-story-viewport: 100vh;
  --ds-stage-copy-width: 28em;
  --ds-experience-glow: clamp(15em, 34vw, 32em);
  --ds-cursor-size: 2.75em;
  --ds-footer-screen: 100svh;
  --ds-footer-header-clearance: 4.5em;
  --ds-header-nav-gap: clamp(var(--ds-space-2), 1.4vw, var(--ds-space-4));
  --ds-language-trigger-width: 8.75em;
  --ds-language-menu-width: 10.5em;
  --ds-language-control-height: 2.75em;
  --ds-motion-fast: 180ms;
  --ds-motion-standard: 420ms;
  --ds-motion-scene: 900ms;
  --ds-motion-chapter: 1400ms;
  --ds-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --app-vh: 1vh;
}

:root:lang(ru) {
  --ds-font-display: "Nunito", Arial, sans-serif;
  --ds-font-accent: "Nunito", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { max-inline-size: 100%; overflow-x: hidden; overscroll-behavior-x: none; scroll-behavior: smooth; background: var(--ds-color-bg-night); }
body { margin: 0; color: var(--ds-color-text-primary); background: var(--ds-color-bg-day); font-family: var(--ds-font-body); font-size: clamp(1em, 1vw + 0.7em, 1.125em); line-height: var(--ds-leading-body); }
body[data-menu-open="true"] { overflow: hidden; }
button, a { font: inherit; }
button { border: 0; }
a { color: inherit; }
img { display: block; max-inline-size: 100%; }
:focus-visible { outline: 0.22em solid var(--ds-color-focus); outline-offset: 0.22em; }
.skip-link { position: fixed; z-index: 30; inset: var(--ds-space-2) auto auto var(--ds-space-2); transform: translateY(-180%); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-color-action-primary); border-radius: var(--ds-radius-soft); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.shell { max-inline-size: var(--ds-container-default); margin-inline: auto; padding-inline: var(--ds-gutter); }
.text-shell { max-inline-size: var(--ds-container-text); }
.eyebrow { display: inline-flex; gap: var(--ds-space-1); align-items: center; margin: 0 0 var(--ds-space-3); color: var(--ds-color-text-supporting); font-size: var(--ds-text-small); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.eyebrow::before { content: ""; inline-size: 0.75em; block-size: 0.75em; border-radius: 50%; background: var(--ds-color-action-primary-dark); box-shadow: 1.2em 0 var(--ds-color-surface-mint); }
.accent { display: block; color: var(--ds-primitive-pink); font-family: var(--ds-font-accent); font-size: 0.65em; font-weight: 600; line-height: 1; }
:lang(ru) .accent { font-family: var(--ds-font-display); font-weight: 700; }
.display, h1, h2, h3 { margin-block: 0; font-family: var(--ds-font-display); line-height: var(--ds-leading-display); letter-spacing: -0.045em; }
h1 { font-size: var(--ds-text-display); }
h2 { font-size: var(--ds-text-h2); }
h3 { font-size: var(--ds-text-h3); }
p { margin-block: 0; max-inline-size: 42ch; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-block-start: var(--ds-space-5); }
.button { display: inline-flex; min-block-size: 3.4em; align-items: center; justify-content: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-4); border-radius: var(--ds-radius-capsule); text-decoration: none; font-weight: 800; line-height: 1.1; transition: transform var(--ds-motion-fast) var(--ds-ease-enter), box-shadow var(--ds-motion-fast) var(--ds-ease-enter), background-color var(--ds-motion-fast) var(--ds-ease-enter); }
.button::after { content: "→"; font-size: 1.3em; transition: transform var(--ds-motion-fast) var(--ds-ease-enter); }
.button:hover { transform: translateY(-0.16em); box-shadow: var(--ds-shadow-story); }
.button:hover::after { transform: translateX(0.16em); }
.button--primary { background: var(--ds-color-action-primary); color: var(--ds-color-text-primary); }
.button--secondary { border: 0.12em solid var(--ds-color-surface-mint); color: var(--ds-color-text-supporting); background: color-mix(in oklch, var(--ds-color-bg-day) 90%, transparent); }
.button--night { background: var(--ds-color-action-primary-dark); color: var(--ds-color-text-primary); }
.button--ghost { color: var(--ds-color-text-on-dark); padding-inline: 0; }
.button--ghost::after { display: none; }

.site-header { position: absolute; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--ds-space-3) + env(safe-area-inset-top)) var(--ds-gutter) var(--ds-space-3); color: var(--ds-color-text-primary); }
.experience-shell { position: fixed; z-index: 3; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ds-motion-scene) var(--ds-ease-enter); }
.experience-shell.is-active { opacity: 0.84; }
.experience-shell canvas { inline-size: 100%; block-size: 100%; }
.wordmark { color: var(--ds-color-text-primary); font-family: var(--ds-font-wordmark); font-size: clamp(1.6em, 6vw, 2.2em); font-weight: var(--ds-weight-wordmark); letter-spacing: var(--ds-tracking-wordmark); line-height: var(--ds-leading-wordmark); text-decoration: none; }
.language-selector { --ds-language-surface: color-mix(in oklch, var(--ds-color-bg-day) 94%, transparent); --ds-language-menu-surface: var(--ds-color-bg-day); --ds-language-text: var(--ds-color-text-supporting); --ds-language-border: var(--ds-color-border-soft); position: relative; display: inline-flex; align-items: center; padding-inline: var(--ds-space-2); border: 0.12em solid var(--ds-language-border); border-radius: var(--ds-radius-capsule); background: var(--ds-language-surface); color: var(--ds-language-text); font-size: var(--ds-text-small); font-weight: 800; }
.language-selector select { min-block-size: 2.5em; padding-inline: var(--ds-space-1); border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.language-selector option { background: var(--ds-color-bg-day); color: var(--ds-color-text-primary); }
.language-selector--enhanced { padding: 0; border: 0; background: transparent; overflow: visible; }
.language-selector--enhanced select { display: none; }
.language-picker__trigger { min-inline-size: var(--ds-language-trigger-width); min-block-size: var(--ds-language-control-height); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); padding-inline: var(--ds-space-3); border: 0.12em solid var(--ds-language-border); border-radius: var(--ds-radius-capsule); background: var(--ds-language-surface); color: var(--ds-language-text); font: inherit; font-weight: inherit; box-shadow: 0 0.4em 1.4em color-mix(in oklch, var(--ds-color-bg-night) 8%, transparent); cursor: pointer; transition: border-color var(--ds-motion-fast) var(--ds-ease-enter), background-color var(--ds-motion-fast) var(--ds-ease-enter), color var(--ds-motion-fast) var(--ds-ease-enter), transform var(--ds-motion-fast) var(--ds-ease-enter), box-shadow var(--ds-motion-fast) var(--ds-ease-enter); }
.language-picker__trigger:hover, .language-selector[data-open="true"] .language-picker__trigger { border-color: var(--ds-color-surface-mint); background: color-mix(in oklch, var(--ds-color-surface-mint) 12%, var(--ds-language-menu-surface)); box-shadow: 0 0.55em 1.7em color-mix(in oklch, var(--ds-color-surface-mint) 18%, transparent); }
.language-picker__trigger:active { transform: scale(0.98); }
.language-picker__chevron { inline-size: 0.55em; block-size: 0.55em; flex: 0 0 auto; border-inline-end: 0.12em solid currentColor; border-block-end: 0.12em solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform var(--ds-motion-fast) var(--ds-ease-enter); }
.language-selector[data-open="true"] .language-picker__chevron { transform: translateY(0.12em) rotate(225deg); }
.language-picker__menu { position: absolute; z-index: 80; inset-block-start: calc(100% + var(--ds-space-1)); inset-inline-end: 0; min-inline-size: var(--ds-language-menu-width); display: grid; gap: 0.18em; padding: var(--ds-space-1); border: 0.12em solid var(--ds-language-border); border-radius: var(--ds-radius-soft); background: var(--ds-language-menu-surface); color: var(--ds-color-text-primary); box-shadow: var(--ds-shadow-story); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.35em) scale(0.98); transform-origin: top right; transition: opacity var(--ds-motion-fast) var(--ds-ease-enter), visibility var(--ds-motion-fast) step-end, transform var(--ds-motion-fast) var(--ds-ease-enter); }
.language-selector[data-open="true"] .language-picker__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity var(--ds-motion-fast) var(--ds-ease-enter), visibility 0s step-start, transform var(--ds-motion-fast) var(--ds-ease-enter); }
.language-picker__option { inline-size: 100%; min-block-size: var(--ds-language-control-height); display: grid; grid-template-columns: 0.8em 1fr; align-items: center; gap: var(--ds-space-2); padding-inline: var(--ds-space-2); border-radius: 0.58em; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: start; cursor: pointer; transition: background-color var(--ds-motion-fast) var(--ds-ease-enter), color var(--ds-motion-fast) var(--ds-ease-enter), transform var(--ds-motion-fast) var(--ds-ease-enter); }
.language-picker__option::before { content: ""; inline-size: 0.58em; block-size: 0.58em; border: 0.1em solid var(--ds-color-border-soft); border-radius: 50%; background: transparent; transition: border-color var(--ds-motion-fast) var(--ds-ease-enter), background-color var(--ds-motion-fast) var(--ds-ease-enter), box-shadow var(--ds-motion-fast) var(--ds-ease-enter); }
.language-picker__option:hover, .language-picker__option:focus-visible { background: color-mix(in oklch, var(--ds-color-surface-mint) 16%, var(--ds-language-menu-surface)); color: var(--ds-color-text-supporting); transform: translateX(0.12em); }
.language-picker__option[aria-selected="true"] { background: color-mix(in oklch, var(--ds-color-surface-mint) 12%, var(--ds-language-menu-surface)); color: var(--ds-color-text-supporting); }
.language-picker__option[aria-selected="true"]::before { border-color: var(--ds-color-action-primary-dark); background: var(--ds-color-action-primary); box-shadow: 0 0 0 0.22em color-mix(in oklch, var(--ds-color-action-primary) 22%, transparent); }
.nav-toggle { position: relative; z-index: 21; inline-size: 3.2em; block-size: 3.2em; display: inline-grid; place-items: center; border-radius: 50%; background: var(--ds-color-bg-day); color: var(--ds-color-text-primary); box-shadow: var(--ds-shadow-story); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { inline-size: 1.35em; block-size: 0.14em; display: block; border-radius: var(--ds-radius-capsule); background: currentColor; content: ""; transition: transform var(--ds-motion-standard) var(--ds-ease-enter); }
.nav-toggle__bars::before { transform: translateY(-0.42em); }
.nav-toggle__bars::after { transform: translateY(0.28em); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-0.14em) rotate(-45deg); }
.site-header:has(.site-nav[data-open="true"]) .wordmark { color: var(--ds-color-text-on-dark); }
.site-nav { position: fixed; z-index: 19; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: calc(var(--ds-space-7) + env(safe-area-inset-top)) var(--ds-gutter) calc(var(--ds-space-4) + env(safe-area-inset-bottom)); background: var(--ds-color-bg-night); color: var(--ds-color-text-on-dark); opacity: 0; pointer-events: none; transition: opacity var(--ds-motion-standard) var(--ds-ease-enter); }
.site-nav[data-open="true"] { opacity: 1; pointer-events: auto; }
.site-nav__panel { inline-size: min(100%, 22em); }
.site-nav__intro { margin-block-end: var(--ds-space-4); color: var(--ds-color-surface-mint); font-family: var(--ds-font-accent); font-size: 1.3em; font-weight: 600; }
:lang(ru) .site-nav__intro { font-family: var(--ds-font-display); font-weight: 700; }
.site-nav ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; text-align: start; }
.site-nav li + li { border-block-start: 0.08em solid color-mix(in oklch, var(--ds-color-text-on-dark) 15%, transparent); }
.site-nav a { display: flex; min-block-size: 2.25em; align-items: center; justify-content: space-between; gap: var(--ds-space-3); font-family: var(--ds-font-display); font-size: clamp(1.35em, 6vw, 1.9em); letter-spacing: -0.04em; text-decoration: none; transition: color var(--ds-motion-fast) var(--ds-ease-enter), transform var(--ds-motion-fast) var(--ds-ease-enter); }
:lang(ru) .site-nav a { font-weight: 700; letter-spacing: -0.025em; }
.site-nav a::after { content: "→"; color: var(--ds-color-surface-mint); font-family: var(--ds-font-body); font-size: 0.72em; transition: transform var(--ds-motion-fast) var(--ds-ease-enter); }
.site-nav a:hover { color: var(--ds-color-action-navigation-hover); transform: translateX(var(--ds-space-1)); }
.site-nav a:hover::after { transform: translateX(var(--ds-space-1)); }
.site-nav__language { margin-block-start: var(--ds-space-4); padding-block-start: var(--ds-space-3); border-block-start: 0.08em solid color-mix(in oklch, var(--ds-color-text-on-dark) 15%, transparent); }
.site-nav__language-label { margin-block-end: var(--ds-space-2); color: color-mix(in oklch, var(--ds-color-text-on-dark) 72%, transparent); font-size: var(--ds-text-small); font-weight: 800; }
.site-nav__legal { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-3); margin-block-start: var(--ds-space-4); padding-block-start: var(--ds-space-3); border-block-start: 0.08em solid color-mix(in oklch, var(--ds-color-text-on-dark) 15%, transparent); }
.site-nav__legal a, .site-nav__legal button { min-block-size: 2.5em; display: inline-flex; align-items: center; padding: 0; background: transparent; color: color-mix(in oklch, var(--ds-color-text-on-dark) 82%, transparent); font-family: var(--ds-font-body); font-size: var(--ds-text-small); font-weight: 800; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; cursor: pointer; }
.site-nav .site-nav__legal a::after { display: none; }
.site-nav .site-nav__legal a:hover, .site-nav__legal button:hover { color: var(--ds-color-action-navigation-hover); transform: none; }
.site-nav__legal--sample { display: flex !important; }
.nav-toggle--sample { margin-block: var(--ds-space-3); }
.language-selector--menu { display: grid; grid-template-columns: repeat(3, 1fr); inline-size: 100%; padding: 0.32em; border: 0.08em solid color-mix(in oklch, var(--ds-color-text-on-dark) 22%, transparent); border-radius: var(--ds-radius-capsule); background: color-mix(in oklch, var(--ds-color-text-on-dark) 8%, var(--ds-color-bg-night)); color: var(--ds-color-text-on-dark); }
.language-selector--menu button { min-inline-size: 0; min-block-size: 2.7em; padding-inline: var(--ds-space-1); border-radius: var(--ds-radius-capsule); background: transparent; color: inherit; font-size: var(--ds-text-small); font-weight: 800; cursor: pointer; transition: background-color var(--ds-motion-fast) var(--ds-ease-enter), color var(--ds-motion-fast) var(--ds-ease-enter), transform var(--ds-motion-fast) var(--ds-ease-enter); }
.language-selector--menu button:hover { color: var(--ds-color-action-navigation-hover); }
.language-selector--menu button[aria-pressed="true"] { background: var(--ds-color-action-primary); color: var(--ds-color-text-primary); box-shadow: 0 0.35em 1em color-mix(in oklch, var(--ds-color-bg-night) 28%, transparent); }
.language-selector--menu button:active { transform: scale(0.97); }
.site-header__controls { position: relative; z-index: 20; min-inline-size: 0; display: flex; align-items: center; gap: var(--ds-space-2); }
.site-header__controls > .language-selector { display: none; }
.header-contrast-frame { position: relative; min-block-size: 8em; overflow: clip; border-radius: var(--ds-radius-round); background: var(--ds-color-bg-night); box-shadow: var(--ds-shadow-story); }
.header-contrast-frame .site-header { position: absolute; }
.header-contrast-frame .site-header__controls > .language-selector { display: inline-flex; }
.header-contrast-frame .nav-toggle, .header-contrast-frame .site-nav { display: none; }

.story-scene { position: relative; isolation: isolate; overflow: clip; min-block-size: max(38em, calc(var(--app-vh) * 100)); padding-block: var(--ds-section-hero); }
.story-scene::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.scene-copy { position: relative; z-index: 4; }
.scene-copy p { margin-block-start: var(--ds-space-4); font-size: clamp(1.05em, 2vw, 1.25em); }
.scene-copy--light { color: var(--ds-color-text-on-dark); }
.scene-visual { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.scene-visual picture, .scene-visual img { display: block; inline-size: 100%; block-size: 100%; }
.scene-visual img { object-fit: cover; }
.scene-visual::after { content: ""; position: absolute; inset: 0; }
.memory-thread { position: absolute; z-index: 2; inline-size: 120%; block-size: 52%; inset: auto -10% 8%; border: 0.3em solid color-mix(in oklch, var(--ds-primitive-mint) 74%, transparent); border-radius: 50%; transform: rotate(-12deg); filter: drop-shadow(0 0 0.8em color-mix(in oklch, var(--ds-primitive-yellow) 80%, transparent)); opacity: 0.75; }
.memory-thread::after { content: ""; position: absolute; inline-size: 1em; block-size: 1em; inset: 4% 44% auto; border-radius: 50%; background: var(--ds-primitive-yellow); box-shadow: 0 0 0.8em var(--ds-primitive-yellow); }
.story-scene--dawn { min-block-size: var(--ds-hero-stage-min); background: var(--ds-color-bg-day); }
.story-scene--dawn .scene-visual img { object-position: center top; opacity: 1; }
.story-scene--dawn .scene-visual::after { background: none; }
.story-scene--dawn .memory-thread { display: none; }
.story-scene--dawn .scene-copy { padding-block-start: var(--ds-hero-copy-offset); }
.story-scene--memory { background: var(--ds-color-surface-mint); }
.story-scene--memory .scene-visual img { object-position: center bottom; opacity: 0.92; }
.story-scene--memory .scene-visual::after { background: linear-gradient(180deg, color-mix(in oklch, var(--ds-color-bg-day) 90%, transparent), transparent 68%); }
.story-scene--memory .memory-thread { border-color: color-mix(in oklch, var(--ds-primitive-yellow) 86%, transparent); transform: rotate(11deg); }
.story-scene--book { background: var(--ds-color-bg-night); }
.story-scene--book .scene-visual img { object-position: 66% center; opacity: 0.72; }
.story-scene--book .scene-visual::after { background: linear-gradient(90deg, var(--ds-color-bg-night) 16%, color-mix(in oklch, var(--ds-color-bg-night) 84%, transparent) 60%, transparent); }
.story-scene--book .memory-thread { border-color: color-mix(in oklch, var(--ds-primitive-gold) 75%, transparent); transform: rotate(18deg); }
.story-scene--library { min-block-size: 0; background: var(--ds-color-bg-day); }
.story-scene--library .scene-visual { position: relative; block-size: 28em; margin: var(--ds-space-6) calc(var(--ds-gutter) * -1) 0; }
.story-scene--library .scene-visual img { object-position: center; }
.story-scene--library .scene-visual::after { background: linear-gradient(180deg, var(--ds-color-bg-day), transparent 24%, transparent 78%, var(--ds-color-bg-day)); }
.story-scene--keepsake { background: var(--ds-color-bg-night); }
.story-scene--keepsake .scene-visual img { object-position: 62% center; opacity: 0.72; }
.story-scene--keepsake .scene-visual::after { background: linear-gradient(180deg, color-mix(in oklch, var(--ds-color-bg-night) 92%, transparent), transparent 62%, var(--ds-color-bg-night)); }
.story-scene--keepsake .scene-copy { display: flex; min-block-size: 30em; flex-direction: column; justify-content: end; }

.trust-strip { background: var(--ds-color-bg-day); padding-block: var(--ds-section-compact); text-align: center; }
.trust-strip p { margin-inline: auto; color: var(--ds-color-text-supporting); font-weight: 800; }
.trust-points { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ds-space-3); margin: var(--ds-space-4) 0 0; padding: 0; list-style: none; }
.trust-points li { display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.trust-points li::before { content: "✦"; color: var(--ds-primitive-gold); }
.process { padding-block: var(--ds-section-default); background: var(--ds-color-bg-day); }
.process-heading { margin-block-end: var(--ds-space-6); }
.process-list { display: grid; gap: var(--ds-grid-gap); margin: 0; padding: 0; list-style: none; counter-reset: process; }
.process-list li { counter-increment: process; position: relative; padding: var(--ds-space-5) var(--ds-space-4) 0; border-block-start: 0.16em solid var(--ds-color-border-soft); }
.process-list li::before { content: "0" counter(process); position: absolute; inset: calc(var(--ds-space-5) * -0.85) auto auto var(--ds-space-4); padding-inline: var(--ds-space-1); background: var(--ds-color-bg-day); color: var(--ds-primitive-pink); font-family: var(--ds-font-display); font-weight: 800; }
.process-list p { margin-block-start: var(--ds-space-2); }
.feature-band { padding-block: var(--ds-section-default); background: var(--ds-color-surface-memory); }
.feature-band__grid { display: grid; gap: var(--ds-space-6); align-items: center; }
.feature-band__art { overflow: clip; border-radius: var(--ds-radius-round); box-shadow: var(--ds-shadow-story); }
.feature-band__art img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.feature-band__list { display: grid; gap: var(--ds-space-3); margin: var(--ds-space-5) 0 0; padding: 0; list-style: none; font-weight: 800; }
.feature-band__list li { display: flex; gap: var(--ds-space-2); align-items: flex-start; }
.feature-band__list li::before { content: "✓"; display: inline-grid; flex: 0 0 auto; place-items: center; inline-size: 1.5em; block-size: 1.5em; border-radius: 50%; background: var(--ds-color-bg-day); color: var(--ds-color-text-supporting); }
.values { padding-block: var(--ds-section-default); background: var(--ds-color-bg-day); }
.value-line { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: var(--ds-space-5) 0 0; padding: 0; list-style: none; }
.value-line li { padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-capsule); background: color-mix(in oklch, var(--ds-color-surface-mint) 25%, var(--ds-color-bg-day)); color: var(--ds-color-text-supporting); font-weight: 800; }
.testimonial-note { margin-block-start: var(--ds-space-5); padding: var(--ds-space-4); border-inline-start: 0.3em solid var(--ds-primitive-pink); background: color-mix(in oklch, var(--ds-primitive-pink) 14%, var(--ds-color-bg-day)); border-radius: 0 var(--ds-radius-soft) var(--ds-radius-soft) 0; }
.testimonial-note strong { display: block; margin-block-end: var(--ds-space-1); font-family: var(--ds-font-display); }
.app-download { position: relative; z-index: 6; isolation: isolate; padding-block: var(--ds-section-compact); background: var(--ds-color-bg-night); }
.app-download__grid { display: grid; gap: var(--ds-space-5); align-items: center; }
.app-download__grid > * { min-inline-size: 0; }
.app-download__intro { min-inline-size: 0; display: grid; gap: var(--ds-space-4); padding: var(--ds-space-5); border-radius: var(--ds-radius-round); background: var(--ds-color-bg-day); color: var(--ds-color-text-primary); box-shadow: var(--ds-shadow-story); }
.app-download__intro > .eyebrow::before { display: none; }
.app-download__intro .button-row { margin-block-start: 0; }
.app-download__intro .button { min-inline-size: 0; max-inline-size: 100%; white-space: normal; text-align: center; }
.app-download__app { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--ds-space-3); align-items: flex-start; }
.app-download__app > div { min-inline-size: 0; inline-size: 100%; }
.app-download__app h2, .app-download__app h3 { max-inline-size: 100%; font-size: var(--ds-text-download-title); overflow-wrap: break-word; hyphens: none; }
.app-download__icon { inline-size: 4.5em; block-size: 4.5em; flex: 0 0 auto; border-radius: var(--ds-radius-soft); box-shadow: var(--ds-shadow-story); }
.app-download__app p { font-size: var(--ds-text-small); font-weight: 800; }
.app-download__card { display: grid; justify-items: center; gap: var(--ds-space-3); padding: var(--ds-space-5); border-radius: var(--ds-radius-round); background: var(--ds-color-bg-day); color: var(--ds-color-text-primary); box-shadow: var(--ds-shadow-story); text-align: center; }
.app-download__qr { inline-size: min(15em, 64vw); block-size: auto; padding: var(--ds-space-2); border-radius: var(--ds-radius-soft); background: var(--ds-color-bg-day); }
.app-download__note { margin: 0; color: var(--ds-color-text-supporting); font-size: var(--ds-text-small); }
.chapter-marker { position: fixed; z-index: 10; inset: auto var(--ds-space-2) calc(var(--ds-space-4) + env(safe-area-inset-bottom)) auto; display: none; gap: var(--ds-space-1); padding: var(--ds-space-1); border-radius: var(--ds-radius-capsule); background: color-mix(in oklch, var(--ds-color-bg-day) 78%, transparent); box-shadow: var(--ds-shadow-story); }
.chapter-marker a { inline-size: 0.7em; block-size: 0.7em; border: 0.12em solid var(--ds-color-surface-mint); border-radius: 50%; text-indent: -999em; overflow: hidden; }
.chapter-marker a[aria-current="step"] { background: var(--ds-color-surface-mint); }
.footer { padding: var(--ds-section-compact) var(--ds-gutter) calc(var(--ds-section-compact) + env(safe-area-inset-bottom)); background: var(--ds-color-bg-night); color: var(--ds-color-text-on-dark); }
.footer__inner { max-inline-size: var(--ds-container-default); display: grid; gap: var(--ds-space-4); margin-inline: auto; text-align: center; }
.footer__brand, .footer__legal-note { margin-inline: auto; font-size: var(--ds-text-small); }
.footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-4); }
.footer a, .footer button { color: inherit; text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; }
.footer button { padding: 0; background: transparent; cursor: pointer; }
.footer--story { position: relative; isolation: isolate; min-block-size: 100vh; min-block-size: var(--ds-footer-screen); display: grid; overflow: clip; padding-block: calc(var(--ds-space-3) + var(--ds-footer-header-clearance)) var(--ds-space-1); border-block-start: 0.12em solid color-mix(in oklch, var(--ds-color-surface-mint) 38%, transparent); }
.footer--story::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0.65; background: radial-gradient(circle at 8% 14%, var(--ds-color-action-primary) 0 0.09em, transparent 0.12em), radial-gradient(circle at 24% 82%, var(--ds-color-surface-mint) 0 0.08em, transparent 0.11em), radial-gradient(circle at 42% 18%, var(--ds-color-text-on-dark) 0 0.07em, transparent 0.1em), radial-gradient(circle at 61% 71%, var(--ds-color-surface-memory) 0 0.08em, transparent 0.11em), radial-gradient(circle at 78% 13%, var(--ds-color-action-primary) 0 0.1em, transparent 0.13em), radial-gradient(circle at 91% 56%, var(--ds-color-surface-mint) 0 0.07em, transparent 0.1em); }
.footer--story .footer__inner { inline-size: 100%; min-block-size: calc(var(--ds-footer-screen) - var(--ds-footer-header-clearance) - var(--ds-space-3) - var(--ds-space-1)); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: var(--ds-space-1); text-align: start; }
.footer__top { display: grid; align-content: center; gap: var(--ds-space-3) var(--ds-space-5); }
.footer__story { display: grid; justify-items: start; row-gap: var(--ds-space-2); max-inline-size: 42em; }
.footer__eyebrow { margin: 0; color: var(--ds-color-surface-mint); font-size: var(--ds-text-small); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.footer__wordmark { margin: 0; color: var(--ds-color-text-on-dark); font-family: var(--ds-font-wordmark); font-size: clamp(3em, 10vw, 4em); font-weight: var(--ds-weight-wordmark); letter-spacing: var(--ds-tracking-wordmark); line-height: var(--ds-leading-wordmark); text-decoration: none !important; }
.footer__title { max-inline-size: 13ch; color: var(--ds-color-text-on-dark); font-size: var(--ds-text-h2); }
.footer__copy { margin: 0; color: color-mix(in oklch, var(--ds-color-text-on-dark) 76%, transparent); }
.footer__cta { margin-block-start: var(--ds-space-2); color: var(--ds-color-text-primary) !important; text-decoration: none !important; }
.footer__navigation { display: grid; align-self: center; gap: var(--ds-space-4); }
.footer__group h3 { margin-block-end: var(--ds-space-2); color: var(--ds-color-surface-mint); font-size: var(--ds-text-small); letter-spacing: 0.06em; text-transform: uppercase; }
.footer__menu, .footer--story .footer__links { display: grid; justify-content: start; gap: var(--ds-space-1); }
.footer__menu a, .footer--story .footer__links a, .footer--story .footer__links button { display: inline-flex; inline-size: max-content; min-block-size: 2em; align-items: center; color: color-mix(in oklch, var(--ds-color-text-on-dark) 84%, transparent); text-decoration: none; font-weight: 700; transition: color var(--ds-motion-fast) var(--ds-ease-enter), transform var(--ds-motion-fast) var(--ds-ease-enter); }
.footer__menu a:hover, .footer--story .footer__links a:hover, .footer--story .footer__links button:hover { color: var(--ds-color-action-primary); transform: translateX(var(--ds-space-1)); }
.footer__bottom { display: grid; align-self: end; gap: var(--ds-space-2); padding-block-start: var(--ds-space-3); border-block-start: 0.12em solid color-mix(in oklch, var(--ds-color-text-on-dark) 16%, transparent); }
.footer--story .footer__brand { margin: 0; color: color-mix(in oklch, var(--ds-color-text-on-dark) 72%, transparent); }
.footer__status { display: flex; gap: var(--ds-space-2); align-items: center; color: color-mix(in oklch, var(--ds-color-text-on-dark) 72%, transparent); font-size: var(--ds-text-small); }
.footer__status i { inline-size: 0.65em; block-size: 0.65em; flex: 0 0 auto; border-radius: 50%; background: var(--ds-color-surface-mint); box-shadow: 0 0 0 0.3em color-mix(in oklch, var(--ds-color-surface-mint) 16%, transparent); }
.footer__language { --ds-language-surface: color-mix(in oklch, var(--ds-color-text-on-dark) 10%, transparent); --ds-language-menu-surface: var(--ds-color-bg-day); --ds-language-text: var(--ds-color-text-on-dark); --ds-language-border: color-mix(in oklch, var(--ds-color-text-on-dark) 32%, transparent); justify-self: start; border-color: var(--ds-language-border); background: var(--ds-language-surface); color: var(--ds-language-text); }
.footer__language select { color: inherit; }
.footer .language-picker__trigger { padding-inline: var(--ds-space-3); background: var(--ds-language-surface); text-decoration: none; }
.footer .language-picker__option { padding-inline: var(--ds-space-2); text-decoration: none; }
.footer .language-picker__option:hover, .footer .language-picker__option:focus-visible { background: color-mix(in oklch, var(--ds-color-surface-mint) 16%, var(--ds-language-menu-surface)); }
.footer .language-picker__option[aria-selected="true"] { background: color-mix(in oklch, var(--ds-color-surface-mint) 12%, var(--ds-language-menu-surface)); }
.footer__language .language-picker__menu { inset-block: auto calc(100% + var(--ds-space-1)); transform: translateY(0.35em) scale(0.98); transform-origin: bottom right; }
.footer__language[data-open="true"] .language-picker__menu { transform: translateY(0) scale(1); }

.consent-banner { position: fixed; z-index: 120; inset: auto var(--ds-gutter) calc(var(--ds-gutter) + env(safe-area-inset-bottom)); }
.consent-banner[hidden] { display: none; }
.consent-banner__panel { max-inline-size: var(--ds-container-text); margin-inline: auto; padding: var(--ds-space-5); border: 0.12em solid var(--ds-color-border-soft); border-radius: var(--ds-radius-round); background: var(--ds-color-bg-day); color: var(--ds-color-text-primary); box-shadow: var(--ds-shadow-story); }
.consent-banner__panel h2, .consent-banner__panel h3 { margin-block-end: var(--ds-space-3); }
.consent-banner__panel > p:not(.eyebrow) { margin-block-start: var(--ds-space-3); }
.consent-banner__actions { display: grid; gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }
.consent-banner__actions .button { inline-size: 100%; }
.consent-banner__links { font-size: var(--ds-text-small); text-align: center; }
.consent-banner--sample { position: static; inset: auto; margin-block-start: var(--ds-space-4); }
.consent-banner--sample .consent-banner__panel { margin: 0; }

.legal-page { background: var(--ds-color-bg-day); }
.legal-page .legal-header { position: static; background: var(--ds-color-bg-day); }
.legal-header .site-header__controls { margin-inline-start: auto; }
.legal-main { padding-block: var(--ds-section-default); }
.legal-hero { margin-block-end: var(--ds-space-7); }
.legal-hero h1 { max-inline-size: 12ch; }
.legal-card { max-inline-size: var(--ds-container-text); padding: var(--ds-space-5); border-radius: var(--ds-radius-round); background: color-mix(in oklch, var(--ds-color-surface-mint) 12%, var(--ds-color-bg-day)); }
.legal-content { max-inline-size: var(--ds-container-text); }
.legal-content section + section { margin-block-start: var(--ds-space-7); }
.legal-content h2 { margin-block-end: var(--ds-space-3); }
.legal-content h3 { margin-block: var(--ds-space-5) var(--ds-space-2); }
.legal-content p + p, .legal-content ul, .legal-content address { margin-block-start: var(--ds-space-3); }
.legal-content ul { padding-inline-start: var(--ds-space-5); }
.legal-content li + li { margin-block-start: var(--ds-space-1); }
.legal-content address { font-style: normal; }
.legal-notice { margin-block: var(--ds-space-5); padding: var(--ds-space-4); border-inline-start: 0.3em solid var(--ds-color-action-primary-dark); border-radius: 0 var(--ds-radius-soft) var(--ds-radius-soft) 0; background: color-mix(in oklch, var(--ds-color-action-primary) 24%, var(--ds-color-bg-day)); }
.legal-meta { color: var(--ds-color-text-supporting); font-size: var(--ds-text-small); font-weight: 800; }
.reveal { opacity: 0; transform: translateY(1.5em); transition: opacity var(--ds-motion-scene) var(--ds-ease-enter), transform var(--ds-motion-scene) var(--ds-ease-enter); }
.reveal[data-visible="true"] { opacity: 1; transform: translateY(0); }

.experience-page { max-inline-size: 100%; overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; background: var(--ds-color-bg-day); }
.experience-page[data-ready="false"] { overflow: hidden; }
.experience-page .site-header { position: fixed; color: var(--ds-color-text-primary); mix-blend-mode: normal; transition: color var(--ds-motion-standard) var(--ds-ease-enter), opacity var(--ds-motion-standard) var(--ds-ease-enter); }
.experience-page[data-scene="book"] .site-header, .experience-page[data-scene="keepsake"] .site-header { color: var(--ds-color-text-on-dark); }
.experience-page[data-scene="book"] .wordmark, .experience-page[data-scene="keepsake"] .wordmark { color: var(--ds-color-text-on-dark); }
.experience-page[data-scene="book"] .language-selector, .experience-page[data-scene="keepsake"] .language-selector { border-color: color-mix(in oklch, var(--ds-color-text-on-dark) 38%, transparent); color: var(--ds-color-text-on-dark); }

.page-loader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--ds-space-4); background: var(--ds-color-bg-night); color: var(--ds-color-text-on-dark); opacity: 1; visibility: visible; transition: opacity var(--ds-motion-scene) var(--ds-ease-enter), visibility var(--ds-motion-scene) step-end; }
.page-loader__mark { font-family: var(--ds-font-wordmark); font-size: var(--ds-text-h2); font-weight: var(--ds-weight-wordmark); letter-spacing: var(--ds-tracking-wordmark); line-height: var(--ds-leading-wordmark); }
.page-loader__line { inline-size: 6em; block-size: 0.16em; overflow: hidden; border-radius: var(--ds-radius-capsule); background: color-mix(in oklch, var(--ds-color-text-on-dark) 18%, transparent); }
.page-loader__line::after { content: ""; display: block; inline-size: 48%; block-size: 100%; border-radius: inherit; background: var(--ds-color-action-primary-dark); animation: dadu-loader var(--ds-motion-chapter) var(--ds-ease-enter) infinite; }
.experience-page[data-ready="true"] .page-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes dadu-loader { from { transform: translateX(-120%); } to { transform: translateX(230%); } }

.cinematic-hero { position: relative; isolation: isolate; overflow: clip; background: var(--ds-color-bg-day); }
.cinematic-hero__art { position: relative; z-index: 0; aspect-ratio: var(--ds-hero-art-ratio); overflow: hidden; transform-origin: center center; }
.cinematic-hero__art picture, .cinematic-hero__art img { display: block; inline-size: 100%; }
.cinematic-hero__art img { block-size: auto; object-position: center top; }
.cinematic-hero__veil { position: absolute; z-index: 1; inset: 0 0 auto; aspect-ratio: var(--ds-hero-art-ratio); pointer-events: none; background: linear-gradient(180deg, transparent 66%, color-mix(in oklch, var(--ds-color-bg-day) 72%, transparent) 84%, var(--ds-color-bg-day)); }
.cinematic-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; margin-block-start: calc(var(--ds-space-6) * -1); padding: 0 var(--ds-gutter) var(--ds-space-5); }
.cinematic-hero__eyebrow { margin: 0 0 var(--ds-space-3); color: var(--ds-color-text-supporting); font-weight: 800; }
.cinematic-hero h1 { max-inline-size: 10ch; font-size: var(--ds-text-hero-mobile); line-height: var(--ds-leading-cinematic); letter-spacing: -0.055em; text-wrap: balance; }
.cinematic-hero h1 .accent { margin-block-start: var(--ds-space-2); font-size: 0.48em; letter-spacing: -0.035em; }
.cinematic-hero__intro { margin-block-start: var(--ds-space-4); max-inline-size: 33em; font-size: clamp(1.05em, 2vw, 1.3em); }
.hero-actions { display: grid; gap: var(--ds-space-3); margin-block-start: var(--ds-space-5); }
.hero-actions .button { inline-size: 100%; }
.scroll-cue { z-index: 5; display: inline-flex; align-self: center; align-items: center; gap: var(--ds-space-2); margin-block-start: var(--ds-space-5); color: var(--ds-color-text-supporting); font-size: var(--ds-text-small); font-weight: 800; text-decoration: none; white-space: nowrap; }
.scroll-cue i { display: grid; place-items: center; inline-size: 2.5em; block-size: 2.5em; border: 0.12em solid var(--ds-color-border-soft); border-radius: 50%; font-style: normal; }

.story-experience { position: relative; background: var(--ds-color-bg-day); }
.story-stage { position: sticky; z-index: 0; inset-block-start: 0; block-size: var(--ds-story-viewport); margin-block-end: -100vh; overflow: clip; background: var(--ds-color-bg-day); transition: background-color var(--ds-motion-scene) var(--ds-ease-enter); }
.story-experience.is-enhanced .story-stage { position: relative; inset-block-start: auto; }
.story-stage[data-active-scene="book"], .story-stage[data-active-scene="keepsake"] { background: var(--ds-color-bg-night); }
.story-layer { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.07); transition: opacity var(--ds-motion-scene) var(--ds-ease-enter), transform var(--ds-motion-chapter) var(--ds-ease-enter); }
.story-layer.is-active { opacity: 1; transform: scale(1); }
.story-layer picture, .story-layer img { display: block; inline-size: 100%; block-size: 100%; }
.story-layer img { object-fit: cover; object-position: center; }
.story-stage__veil { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, color-mix(in oklch, var(--ds-color-bg-day) 16%, transparent), transparent 46%, color-mix(in oklch, var(--ds-color-bg-day) 10%, transparent)); transition: background var(--ds-motion-scene) var(--ds-ease-enter); }
.story-stage[data-active-scene="book"] .story-stage__veil, .story-stage[data-active-scene="keepsake"] .story-stage__veil { background: linear-gradient(180deg, color-mix(in oklch, var(--ds-color-bg-night) 18%, transparent), transparent 46%, color-mix(in oklch, var(--ds-color-bg-night) 12%, transparent)); }
.story-stage__glow { position: absolute; z-index: 2; inset: 50% auto auto 50%; inline-size: var(--ds-experience-glow); block-size: var(--ds-experience-glow); border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in oklch, var(--ds-color-action-primary) 72%, transparent), color-mix(in oklch, var(--ds-color-surface-mint) 20%, transparent) 42%, transparent 72%); filter: blur(1.2em); mix-blend-mode: screen; opacity: 0.5; }
.story-chapters { position: relative; z-index: 4; }
.story-chapter { position: relative; min-block-size: var(--ds-stage-scroll-mobile); overflow: clip; color: var(--ds-color-text-primary); pointer-events: none; }
.story-chapter__inner { min-block-size: inherit; display: flex; align-items: flex-start; padding-block: var(--ds-section-default); }
.story-chapter .scene-copy { max-inline-size: var(--ds-stage-copy-width); pointer-events: auto; text-shadow: 0 0.08em 1.2em color-mix(in oklch, var(--ds-color-bg-day) 88%, transparent); }
.story-chapter .scene-copy::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--ds-space-7) * -1); background: radial-gradient(circle, color-mix(in oklch, var(--ds-color-bg-day) 86%, transparent), transparent 72%); filter: blur(0.8em); pointer-events: none; }
.story-chapter--night { color: var(--ds-color-text-on-dark); }
.story-chapter--night .scene-copy { color: inherit; text-shadow: 0 0.08em 1.2em color-mix(in oklch, var(--ds-color-bg-night) 92%, transparent); }
.story-chapter--night .scene-copy::before { background: radial-gradient(circle, color-mix(in oklch, var(--ds-color-bg-night) 88%, transparent), transparent 72%); }
.chapter-number { display: block; margin-block-end: var(--ds-space-7); font-size: var(--ds-text-small); font-weight: 800; letter-spacing: 0.12em; }
.chapter-kicker { margin-block-end: var(--ds-space-3); font-family: var(--ds-font-accent); font-size: 1.2em; font-weight: 600; }
.chapter-highlight { color: var(--ds-color-text-story-highlight); }
.story-chapter .scene-copy > p:last-of-type { margin-block-start: var(--ds-space-4); font-size: clamp(1.05em, 2vw, 1.25em); }
.chapter-notes { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: var(--ds-space-5) 0 0; padding: 0; list-style: none; }
.chapter-notes li { padding: var(--ds-space-1) var(--ds-space-2); border: 0.12em solid currentColor; border-radius: var(--ds-radius-capsule); font-size: var(--ds-text-small); font-weight: 800; }

.experience-cursor { display: none; position: fixed; z-index: 80; inset: 0 auto auto 0; inline-size: var(--ds-cursor-size); block-size: var(--ds-cursor-size); place-items: center; border: 0.1em solid color-mix(in oklch, var(--ds-color-text-primary) 55%, transparent); border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: inline-size var(--ds-motion-fast) var(--ds-ease-enter), block-size var(--ds-motion-fast) var(--ds-ease-enter), opacity var(--ds-motion-fast) var(--ds-ease-enter), background-color var(--ds-motion-fast) var(--ds-ease-enter); }
.experience-cursor span { inline-size: 0.34em; block-size: 0.34em; border-radius: 50%; background: var(--ds-color-text-primary); }
.experience-cursor.is-visible { opacity: 1; }
.experience-cursor.is-interactive { inline-size: calc(var(--ds-cursor-size) * 1.5); block-size: calc(var(--ds-cursor-size) * 1.5); background: color-mix(in oklch, var(--ds-color-action-primary) 35%, transparent); }

.story-experience--guide { position: relative; min-block-size: 30em; overflow: clip; border-radius: var(--ds-radius-round); }
.story-experience--guide .story-stage { position: absolute; inset: 0; block-size: 100%; margin: 0; }
.story-experience--guide .story-chapter { min-block-size: 30em; }
.story-experience--guide .story-chapter__inner { padding: var(--ds-space-5); }
.story-experience--guide .story-layer { opacity: 0; }
.story-experience--guide .story-layer.is-active { opacity: 0.78; }
.page-loader--guide { position: relative; z-index: auto; min-block-size: 12em; margin-block-end: var(--ds-space-4); border-radius: var(--ds-radius-round); opacity: 1; visibility: visible; }
.experience-cursor--guide { position: relative; inset: auto; display: grid; margin-block: var(--ds-space-4); opacity: 1; transform: none; }
.component-sample--wide { grid-column: 1 / -1; }

.guide-page { background: var(--ds-color-bg-day); }
.guide-page .site-nav { position: static; display: block; padding: 0; background: none; color: var(--ds-color-text-primary); opacity: 1; pointer-events: auto; }
.guide-page .site-nav ul { display: flex; gap: var(--ds-space-4); align-items: center; }
.guide-page .site-nav a { font-family: var(--ds-font-body); font-size: var(--ds-text-small); font-weight: 800; }
.guide-page .site-nav a::after { display: none; }
.guide-page .site-nav li + li { border-block-start: 0; }
.guide-hero { padding: calc(var(--ds-section-hero) + env(safe-area-inset-top)) var(--ds-gutter) var(--ds-section-default); color: var(--ds-color-text-on-dark); background: var(--ds-color-bg-night); }
.guide-section { padding-block: var(--ds-section-default); border-block-end: 0.12em solid var(--ds-color-border-soft); }
.guide-section__heading { display: grid; gap: var(--ds-space-3); margin-block-end: var(--ds-space-6); }
.guide-grid { display: grid; gap: var(--ds-grid-gap); }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-3); }
.swatch { min-block-size: 7em; display: flex; align-items: end; padding: var(--ds-space-2); border-radius: var(--ds-radius-soft); color: var(--ds-color-text-on-dark); font-size: var(--ds-text-small); font-weight: 800; }
.swatch--mint { background: var(--ds-primitive-mint); }
.swatch--yellow { background: var(--ds-primitive-yellow); color: var(--ds-color-text-primary); }
.swatch--pink { background: var(--ds-primitive-pink); }
.swatch--white { background: var(--ds-primitive-warm-white); color: var(--ds-color-text-primary); border: 0.12em solid var(--ds-color-border-soft); }
.swatch--night { background: var(--ds-primitive-night); }
.swatch--forest { background: var(--ds-primitive-dark-mint); }
.type-specimen { display: grid; gap: var(--ds-space-4); }
.space-ruler { display: grid; gap: var(--ds-space-3); }
.space-ruler div { display: flex; align-items: center; gap: var(--ds-space-3); font-weight: 800; }
.space-ruler i { display: block; block-size: 1em; background: var(--ds-color-surface-mint); border-radius: var(--ds-radius-capsule); }
.component-sample { padding: var(--ds-space-5); border-radius: var(--ds-radius-round); background: var(--ds-color-bg-day); box-shadow: var(--ds-shadow-story); }
.component-sample--night { background: var(--ds-color-bg-night); color: var(--ds-color-text-on-dark); }
.experience-sample { position: relative; min-block-size: 20em; overflow: clip; border-radius: var(--ds-radius-round); background: var(--ds-color-bg-night); color: var(--ds-color-text-on-dark); }
.experience-sample img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.68; }
.experience-sample p { position: relative; z-index: 1; padding: var(--ds-space-5); }
.component-sample .story-scene { min-block-size: 28em; margin: calc(var(--ds-space-5) * -1); padding: var(--ds-space-5); border-radius: var(--ds-radius-round); }
.component-sample .scene-copy { padding-block-start: var(--ds-space-7); }
.media-rules { display: grid; gap: var(--ds-space-4); }
.media-rule { padding: var(--ds-space-4); border-radius: var(--ds-radius-soft); background: color-mix(in oklch, var(--ds-color-surface-mint) 18%, var(--ds-color-bg-day)); }
.media-rule strong { display: block; margin-block-end: var(--ds-space-1); font-family: var(--ds-font-display); }

@media (max-width: 47.99em) and (orientation: portrait) {
  .cinematic-hero { display: grid; align-items: end; min-block-size: var(--ds-hero-mobile-screen); }
  .cinematic-hero__art, .cinematic-hero__veil { position: absolute; inset: 0; aspect-ratio: auto; }
  .cinematic-hero__art picture, .cinematic-hero__art img { block-size: 100%; }
  .cinematic-hero__art img { object-fit: cover; object-position: center top; }
  .cinematic-hero__veil { background: linear-gradient(180deg, transparent 42%, color-mix(in oklch, var(--ds-color-bg-day) 18%, transparent) 50%, color-mix(in oklch, var(--ds-color-bg-day) 86%, transparent) 62%, var(--ds-color-bg-day) 74%); }
  .cinematic-hero__copy { min-block-size: inherit; justify-content: flex-end; margin-block-start: 0; padding: calc(var(--ds-space-8) + env(safe-area-inset-top)) var(--ds-gutter) calc(var(--ds-hero-mobile-action-clearance) + env(safe-area-inset-bottom)); }
  .cinematic-hero__eyebrow { margin-block-end: var(--ds-space-2); }
  .cinematic-hero__intro { margin-block-start: var(--ds-space-3); font-size: var(--ds-text-body); line-height: var(--ds-leading-hero-mobile); }
  .hero-actions { gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }
  .scroll-cue { display: none; }
}

@media (max-width: 63.99em) and (orientation: landscape) and (max-height: 40em) {
  :root { --ds-hero-art-ratio: var(--ds-hero-art-ratio-mobile-landscape); }
}

@media (min-width: 52em) {
  .site-header { position: fixed; background: color-mix(in oklch, var(--ds-color-bg-day) 68%, transparent); backdrop-filter: blur(1.2em); }
  .experience-page .site-header--story-glass, .header-contrast-frame .site-header--story-glass { border-block-end: 0.08em solid color-mix(in oklch, var(--ds-color-text-primary) 12%, transparent); background: color-mix(in oklch, var(--ds-color-bg-day) 86%, transparent); box-shadow: 0 0.65em 2em color-mix(in oklch, var(--ds-color-bg-night) 14%, transparent); -webkit-backdrop-filter: blur(1.2em) saturate(1.08); backdrop-filter: blur(1.2em) saturate(1.08); }
  .experience-page[data-scene="book"] .site-header--story-glass, .experience-page[data-scene="keepsake"] .site-header--story-glass { color: var(--ds-color-text-primary); }
  .experience-page[data-scene="book"] .site-header--story-glass .wordmark, .experience-page[data-scene="keepsake"] .site-header--story-glass .wordmark { color: var(--ds-color-text-primary); }
  .experience-page[data-scene="book"] .site-header--story-glass .language-selector, .experience-page[data-scene="keepsake"] .site-header--story-glass .language-selector { border-color: var(--ds-color-border-soft); color: var(--ds-color-text-supporting); }
  .header-contrast-frame .site-nav { display: block; }
  .nav-toggle { display: none; }
  .language-selector { order: 1; }
  .site-header__controls > .language-selector { display: inline-flex; }
  .site-nav__language { display: none; }
  .site-nav__legal:not(.site-nav__legal--sample) { display: none; }
  .site-nav { position: static; min-inline-size: 0; flex: 0 1 auto; display: block; overflow: visible; padding: 0; background: none; color: var(--ds-color-text-primary); opacity: 1; pointer-events: auto; }
  .site-nav__panel { min-inline-size: 0; inline-size: auto; }
  .site-nav__intro { display: none; }
  .site-nav ul { max-inline-size: 100%; display: flex; flex-wrap: nowrap; gap: var(--ds-header-nav-gap); align-items: center; }
  .site-nav li + li { border-block-start: 0; }
  .site-nav a { font-family: var(--ds-font-body); font-size: var(--ds-text-small); font-weight: 800; white-space: nowrap; }
  .site-nav a::after { display: none; }
  .story-scene { display: grid; align-items: center; min-block-size: max(42em, calc(var(--app-vh) * 100)); }
  .story-scene--dawn { min-block-size: max(42em, calc(var(--app-vh) * 100)); }
  .story-scene--dawn .scene-visual img { object-position: 68% center; opacity: 0.9; }
  .story-scene--dawn .scene-visual::after { background: linear-gradient(90deg, var(--ds-color-bg-day) 16%, color-mix(in oklch, var(--ds-color-bg-day) 74%, transparent) 58%, transparent); }
  .story-scene--dawn .scene-copy, .story-scene--memory .scene-copy, .story-scene--book .scene-copy, .story-scene--keepsake .scene-copy { inline-size: min(48%, var(--ds-container-text)); }
  .story-scene--dawn .scene-copy { padding-block-start: 0; }
  .story-scene--memory .scene-visual::after { background: linear-gradient(90deg, color-mix(in oklch, var(--ds-color-surface-mint) 96%, transparent) 18%, color-mix(in oklch, var(--ds-color-surface-mint) 42%, transparent) 54%, transparent); }
  .story-scene--library { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--ds-space-6); }
  .story-scene--library .scene-copy { grid-column: 1; }
  .story-scene--library .scene-visual { grid-column: 2; grid-row: 1; block-size: 40em; margin: 0 calc(var(--ds-gutter) * -1) 0 0; }
  .story-scene--keepsake .scene-copy { min-block-size: 0; }
  .feature-band__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .app-download__grid { grid-template-columns: minmax(0, 1fr) minmax(16em, 0.9fr); }
  .footer--story .footer__top { grid-template-columns: minmax(0, 1.1fr) minmax(22em, 0.9fr); align-items: center; }
  .footer__story { grid-row: 1; align-self: center; }
  .footer__navigation { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-4); }
  .footer__bottom { grid-template-columns: auto 1fr auto; align-items: center; }
  .footer__status { justify-self: center; }
  .footer__language { justify-self: end; }
  .process-list { grid-template-columns: repeat(3, 1fr); }
  .chapter-marker { display: flex; }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .cinematic-hero { min-block-size: max(42em, calc(var(--app-vh) * 100)); }
  .cinematic-hero__art, .cinematic-hero__veil { position: absolute; inset: 0; aspect-ratio: auto; }
  .cinematic-hero__art { z-index: -2; overflow: visible; }
  .cinematic-hero__art picture, .cinematic-hero__art img { block-size: 100%; }
  .cinematic-hero__art img { object-fit: cover; object-position: center; }
  .cinematic-hero__veil { z-index: -1; background: linear-gradient(90deg, color-mix(in oklch, var(--ds-color-bg-day) 88%, transparent) 0%, color-mix(in oklch, var(--ds-color-bg-day) 68%, transparent) 38%, color-mix(in oklch, var(--ds-color-bg-day) 24%, transparent) 52%, transparent 66%); }
  .cinematic-hero__copy { min-block-size: inherit; justify-content: end; margin-block-start: 0; padding: calc(var(--ds-space-8) + env(safe-area-inset-top)) var(--ds-gutter) var(--ds-section-compact); }
  .cinematic-hero h1 { max-inline-size: 10ch; font-size: var(--ds-text-hero-desktop); letter-spacing: -0.055em; }
  .cinematic-hero__intro { max-inline-size: 34em; }
  .hero-actions { display: flex; }
  .hero-actions .button { inline-size: auto; }
  .scroll-cue { position: absolute; inset: auto auto calc(var(--ds-space-3) + env(safe-area-inset-bottom)) 50%; margin-block-start: 0; transform: translateX(-50%); }
  .story-chapter { min-block-size: var(--ds-stage-scroll-desktop); }
  .story-chapter__inner { align-items: center; }
  .story-chapter--end .story-chapter__inner { justify-content: flex-end; }
  .story-stage[data-active-scene="memory"] .story-stage__veil { background: linear-gradient(90deg, color-mix(in oklch, var(--ds-color-bg-day) 84%, transparent) 0%, color-mix(in oklch, var(--ds-color-bg-day) 48%, transparent) 30%, transparent 58%); }
  .story-stage[data-active-scene="book"] .story-stage__veil, .story-stage[data-active-scene="keepsake"] .story-stage__veil { background: linear-gradient(90deg, color-mix(in oklch, var(--ds-color-bg-night) 84%, transparent) 0%, color-mix(in oklch, var(--ds-color-bg-night) 48%, transparent) 30%, transparent 58%); }
  .story-stage[data-active-scene="ritual"] .story-stage__veil, .story-stage[data-active-scene="library"] .story-stage__veil { background: linear-gradient(270deg, color-mix(in oklch, var(--ds-color-bg-day) 84%, transparent) 0%, color-mix(in oklch, var(--ds-color-bg-day) 48%, transparent) 30%, transparent 58%); }
  .experience-cursor { display: grid; }
  .consent-banner__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .experience-shell { display: none; }
  .page-loader { display: none; }
  .experience-page[data-ready="false"] { overflow: auto; }
  .story-layer, .story-layer.is-active { transform: none; transition: none; }
  .story-chapter { min-block-size: 100svh; background: color-mix(in oklch, var(--ds-color-bg-day) 82%, transparent); }
  .story-chapter--night { background: color-mix(in oklch, var(--ds-color-bg-night) 88%, transparent); }
  .experience-cursor { display: none; }
}