/* ============================================================================
   Ebbio — site.css
   Tokens, then chrome, then one block per act, then the document pages.
   The engine's mechanism classes (.sc-stage, [data-sc-*]) are never restyled.

   Two grounds and one rule that follows from them: long-form copy never sits
   directly on the ambient film. It sits on a .sheet (paper) or a .plate
   (night), both of which are opaque enough to guarantee contrast whatever the
   film is doing underneath.
   ========================================================================== */

/* ------------------------------------------------------------- tokens ---- */
:root {
  --sc-canvas:      #F3F4F7;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #0B1220;
  --sc-ink-soft:    #4A5468;
  --accent-day:     #005DFF;
  --accent-night:   #58BDFF;
  --sc-accent:      var(--accent-day);
  --sc-accent-ink:  var(--accent-ink-day, #FFFFFF);
  --line:           color-mix(in oklab, var(--sc-ink) 15%, transparent);
  --line-strong:    color-mix(in oklab, var(--sc-ink) 32%, transparent);

  --sc-font-display: "EB Garamond", "Shippori Mincho B1", Georgia, serif;
  --sc-font-text:    "Geist", "Zen Kaku Gothic New", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;
  --font-formula:    "EB Garamond", Georgia, serif;

  --sc-shadow-color: 222 30% 12%;
  --sc-edge: inset 0 1px 0 rgba(255,255,255,.75);
  --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 22px; --sc-r-pill: 999px;

  --bar-h: 4.25rem;
  --focal-x: .62;
  --focal-y: .44;
  color-scheme: light;
}
/* Small accent-coloured type on the night: the accent alone is a mid-tone, and the
   curve passes under it, so lift it toward white. Large accent display type keeps
   the pure accent, because size carries it. */
html.dark :is(.link, .model__live .mono b, .term h3 .sym, .formula .var, .tree__k, .phone__label .glyph, .doc__list li::before) {
  color: var(--accent-lift, #A9D8FF);
}
html.dark {
  --sc-surface:     #0E1422;
  --sc-ink:         #EEF3FA;
  --sc-ink-soft:    #B6C4D8;
  --sc-accent:      var(--accent-night);
  --sc-accent-ink:  var(--accent-ink-night, #061120);
  --sc-shadow-color: 222 60% 2%;
  --sc-edge: inset 0 1px 0 rgba(255,255,255,.08);
  color-scheme: dark;
}
html[lang="ja"] {
  --sc-font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sc-font-text:    "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --focal-x: .40;
}
/* On a phone the copy fills the lower half, so the focal point, the curve tip and
   the review button that rides on it all move to the upper third. world.js reads
   these same two tokens, so this is the only place the phone value is written. */
@media (max-width: 860px) {
  :root, html[lang="ja"] { --focal-x: .5; --focal-y: .30; }
}
/* A short desktop window is the phone problem in a different shape: the type is
   sized from the width, so it stays large while the height that has to hold it
   shrinks. The focal point rises, and the peak's copy is capped against vh, so
   the review button keeps clear of the text. Measured with tools/peakfit.mjs. */
@media (min-width: 861px) and (max-height: 820px) {
  :root, html[lang="ja"] { --focal-x: .44; --focal-y: .32; }
  #recall .display--lg { font-size: min(clamp(2.1rem, 1.4rem + 3.4vw, 4.6rem), 7.2vh); }
  html[lang="ja"] #recall .display--lg { font-size: min(clamp(1.7rem, 1.15rem + 2.6vw, 3.5rem), 6vh); }
  #recall .lede { font-size: min(var(--sc-t-lg), 2.4vh); }
  html[lang="ja"] #recall .lede { font-size: min(var(--sc-t-lg), 2vh); }
  /* the same call as on a phone: the note explaining stability is the first thing
     to give up its height, and the reading it annotates is still right above it */
  .hud__note { display: none; }
}

body { color: var(--sc-ink); transition: color 160ms var(--sc-ease-out); }
html.dark body { color: var(--sc-ink); }
a { color: inherit; }
.sc-grain { opacity: .03; z-index: 3; }
html.dark .sc-grain { opacity: .055; }

/* -------------------------------------------------------------- world ---- */
.films { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #F3F4F7; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film--night { z-index: 1; }
.world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
main { position: relative; z-index: 2; }
[data-sc-act] { pointer-events: none; }
[data-sc-act] :is(a, button, input, summary, details, select, textarea, .phone, .wall, .sheet, .plate, .swatches) { pointer-events: auto; }
.sc-section { pointer-events: auto; }

/* the two grounds that copy is allowed to sit on */
.plate, .sheet--night { --sc-ink: #EEF3FA; --sc-ink-soft: #A7B6CD; --sc-accent: var(--accent-night); }

/* ---------------------------------------------------------- utilities ---- */
.wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.mono { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.label {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--sc-ink-soft); display: block;
}
html[lang="ja"] .label { font-family: var(--sc-font-text); letter-spacing: .12em; font-weight: 500; text-transform: none; }
.display {
  font-family: var(--sc-font-display); font-weight: 400; margin: 0;
  line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance;
}
html[lang="ja"] .display { font-weight: 600; letter-spacing: .02em; line-height: 1.34; }
.display--xl { font-size: clamp(3rem, 2rem + 6.4vw, 8rem); }
.display--lg { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4.6rem); }
.display--md { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.8rem); }
html[lang="ja"] .display--xl { font-size: clamp(2.6rem, 1.6rem + 5.6vw, 7rem); }
html[lang="ja"] .display--lg { font-size: clamp(1.7rem, 1.15rem + 2.6vw, 3.5rem); }
html[lang="ja"] .display--md { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem); }
.lede {
  font-size: var(--sc-t-lg); line-height: 1.55; letter-spacing: -0.01em;
  max-width: 36ch; text-wrap: pretty; margin: 0; color: var(--sc-ink);
}
html[lang="ja"] .lede { letter-spacing: .02em; line-height: 1.9; max-width: 30em; font-feature-settings: "palt"; }
.body { max-width: 62ch; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; line-height: 1.72; }
html[lang="ja"] .body { max-width: 40em; line-height: 1.95; letter-spacing: .02em; }
.nb { white-space: nowrap; display: inline-block; }
html[lang="ja"] :is(.lede, .body, p, li, summary, dd) { word-break: auto-phrase; overflow-wrap: anywhere; }
.link {
  color: var(--sc-accent); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 40%, transparent);
  padding-bottom: 1px; transition: border-color 140ms var(--sc-ease-out);
}
.link::after { content: " \2192"; }
.link:hover, .link:focus-visible { border-bottom-color: var(--sc-accent); }

/* buttons */
.btn {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: 0 1.45rem; border-radius: var(--sc-r-pill);
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-base);
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out),
              border-color 160ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
html[lang="ja"] .btn { letter-spacing: .04em; }
.btn::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(9rem 9rem at var(--mx) var(--my), rgba(255,255,255,.3), transparent 60%);
  opacity: 0; transition: opacity 180ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e2); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--line-strong); }
.btn--inert { color: var(--sc-ink); border-color: var(--line-strong); cursor: default; }
.btn--inert::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--inert):hover::after { opacity: 1; }
  .btn--ghost:hover { border-color: var(--sc-accent); }
  .btn--primary:hover { box-shadow: var(--sc-e3); }
}
.btn .store { font-size: var(--sc-t-xs); color: var(--sc-ink); opacity: .72; font-weight: 400; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* --------------------------------------------------------------- bar ----- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h); display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sc-gutter); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; height: 2rem; }
.brand img { height: 1.75rem; width: auto; display: block; }
.brand .logo--dark { display: none; }
html.dark .brand .logo--light { display: none; }
html.dark .brand .logo--dark { display: block; }
.bar__right { display: flex; align-items: center; gap: 1.1rem; }
.langsw {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .12em;
}
.langsw__on, .langsw__off { position: relative; padding: .35rem 0; text-decoration: none; }
.langsw__on { color: var(--sc-ink); }
.langsw__on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px;
  background: var(--sc-accent);
}
.langsw__off { color: var(--sc-ink); opacity: .42; transition: opacity 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.langsw__off:hover, .langsw__off:focus-visible { opacity: 1; color: var(--sc-accent); }
.langsw__off:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
.lang { text-decoration: none; color: inherit; }
.lang:hover, .lang:focus-visible { color: var(--sc-accent); }
.bar .btn { min-height: 2.5rem; padding: 0 1.1rem; font-size: var(--sc-t-sm); }
.bar .btn--primary { background: var(--sc-ink); color: var(--sc-canvas); box-shadow: none; }
@media (max-width: 600px) { .bar .btn--bar { min-height: 2.1rem; padding: 0 .8rem; font-size: var(--sc-t-xs); } }

/* ---------------------------------------------------------- route rail --- */
.route {
  position: fixed; right: clamp(.5rem, 1.2vw, 1.2rem); top: 50%; transform: translateY(-50%);
  z-index: var(--sc-z-chrome); width: 3rem; height: 10rem;
}
.route svg { width: 100%; height: 100%; overflow: visible; display: block; }
.route__path { fill: none; stroke: var(--line-strong); stroke-width: 1.1; stroke-linejoin: round; }
.route__done { fill: none; stroke: var(--sc-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route__pt {
  fill: var(--sc-canvas); stroke: var(--line-strong); stroke-width: 1; cursor: pointer;
  transition: fill 160ms var(--sc-ease-out), stroke 160ms var(--sc-ease-out);
}
.route__pt[aria-current="true"] { fill: var(--sc-accent); stroke: var(--sc-accent); }
.route__pt.is-done { fill: var(--sc-accent); stroke: var(--sc-accent); }
.route__hit { fill: transparent; cursor: pointer; }
.route__hit:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 50%; }
.route__label {
  position: absolute; right: calc(100% + .5rem); top: 50%; transform: translateY(-50%) translateX(4px);
  white-space: nowrap; font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  color: var(--sc-ink); letter-spacing: .04em; opacity: 0;
  background: var(--sc-canvas); padding: .25rem .5rem; border-radius: var(--sc-r-sm);
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.route:hover .route__label, .route:focus-within .route__label { opacity: 1; transform: translateY(-50%); }
@media (max-width: 860px) { .route { width: 1.9rem; height: 6.4rem; right: .3rem; } .route__label { display: none; } }

/* --------------------------------------------------------------- stage --- */
/* .sc-stage (the engine) owns position: sticky. Never set position here: doing it
   silently un-pins every act, and every symptom then looks like something else. */
.stage--center { display: grid; place-items: center; }
.copy { position: absolute; z-index: 2; max-width: min(44rem, 82vw); }
.copy--lead  { left: var(--sc-gutter); bottom: clamp(4rem, 14vh, 9rem); }
.copy--top   { left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.5rem, 6vh, 4rem)); }
.copy > * + * { margin-top: var(--sc-5); }
@media (max-width: 860px) { .copy { max-width: none; left: var(--sc-gutter); right: var(--sc-gutter); } }

/* readouts */
.hud {
  position: absolute; right: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1rem, 5vh, 3rem));
  display: grid; grid-auto-flow: row; gap: .55rem; text-align: right; z-index: 2;
  padding: .9rem 1.1rem 1rem; border-radius: var(--sc-r-lg);
}
.hud .label { color: rgba(238,243,250,.62); }
.hud div { display: grid; line-height: 1.15; }
.hud b { font-family: var(--sc-font-mono); font-weight: 400; font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hud b small { font-size: .62em; color: rgba(238,243,250,.62); margin-left: .15em; font-family: var(--sc-font-text); }
.hud .hud__s { opacity: .62; transition: opacity 320ms var(--sc-ease-out); }
.hud.has-s .hud__s { opacity: 1; }
.hud__note { font-size: var(--sc-t-xs); color: var(--sc-ink); max-width: 20ch; text-align: right; margin: .3rem 0 0; line-height: 1.5; opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
html[lang="ja"] .hud__note { max-width: 18em; }
.hud.has-s .hud__note { opacity: 1; }
@media (max-width: 860px) {
  /* the readouts move to the top on a phone: the bottom belongs to the copy, and the
     review button rides the curve through the middle */
  .hud { top: calc(var(--bar-h) + .4rem); bottom: auto; left: var(--sc-gutter); right: auto;
         grid-auto-flow: column; gap: 1rem; text-align: left; }
  .hud b { font-size: 1rem; }
  .hud__note { display: none; }
}

/* ---------------------------------------------------------------- hero --- */
#hero .copy--lead { max-width: min(56rem, 88vw); }
.tagline { position: relative; }
.tagline__l { display: block; }
.tagline__gap { display: block; height: .1em; }
#hero .hero__side { margin-top: var(--sc-6); }
#hero .hero__side .lede { margin: 0; }
/* JA: the tagline stands vertical, and the full-width space is the gap the light passes through */
html[lang="ja"] #hero .copy--lead {
  left: auto; right: clamp(1.25rem, 7vw, 8rem);
  top: calc(var(--bar-h) + 5vh); bottom: clamp(5.5rem, 17svh, 11rem);
  display: grid; grid-template-columns: auto auto; gap: clamp(1rem, 3vw, 3rem); align-items: start;
  max-width: none;
}
html[lang="ja"] #hero .tagline { align-self: start; }
html[lang="ja"] #hero .tagline {
  writing-mode: vertical-rl; text-orientation: upright; margin: 0; order: 2;
  line-height: 1; letter-spacing: .1em; white-space: nowrap;
  font-size: min(clamp(2.2rem, 1.4rem + 4.2vw, 5.2rem), 10vh);
}
html[lang="ja"] .tagline__l { display: inline; }
html[lang="ja"] .tagline__gap { display: inline-block; height: .85em; width: 1px; }
html[lang="ja"] #hero .hero__side { order: 1; align-self: end; margin-top: 0; }
/* the line breaks itself now, so the box only has to be wide enough for the longer half */
html[lang="ja"] #hero .lede { max-width: 28em; }
@media (max-width: 860px) {
  html[lang="ja"] #hero .copy--lead { right: var(--sc-gutter); left: var(--sc-gutter); grid-template-columns: 1fr auto; gap: 1rem; }
  html[lang="ja"] #hero .tagline { font-size: clamp(1.9rem, 7.6vw, 2.7rem); }
  html[lang="ja"] #hero .copy--lead { bottom: clamp(4.5rem, 13svh, 8rem); }
  html[lang="ja"] #hero .lede { font-size: var(--sc-t-base); }
}
/* the opening: the tagline rises, then the line */
.rise { animation: rise 1100ms var(--sc-ease-out) both; animation-delay: 250ms; }
.rise--2 { animation-delay: 520ms; }
.rise--3 { display: inline-block; animation-delay: 900ms; }
html[lang="ja"] #hero .tagline .rise { animation-name: rise-x; }
@keyframes rise   { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
@keyframes rise-x { from { opacity: 0; transform: translateX(.3em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
/* a quiet affordance that points the way the page actually moves */
.scrollcue {
  position: absolute; left: var(--sc-gutter); bottom: 1.6rem; z-index: 2;
  display: grid; justify-items: center; gap: .55rem;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
html[lang="ja"] .scrollcue { font-family: var(--sc-font-text); text-transform: none; letter-spacing: .2em; }
/* In English the tagline is anchored bottom-left, so the cue moves to the other
   corner rather than sitting on top of it. In Japanese the tagline is a vertical
   column on the right and the corner is free. */
html[lang="en"] .scrollcue { left: auto; right: var(--sc-gutter); }
.scrollcue__rail { display: block; width: 1px; height: 3.4rem; background: var(--line-strong); position: relative; overflow: hidden; }
.scrollcue__dot { position: absolute; left: -1px; width: 3px; height: 1.1rem; border-radius: 2px; background: var(--sc-accent); animation: cue-fall 2.2s var(--sc-ease-in-out) infinite; }
@keyframes cue-fall { 0% { transform: translateY(-1.2rem); opacity: 0; } 25% { opacity: 1; } 70%, 100% { transform: translateY(3.4rem); opacity: 0; } }
.scrollcue__word { writing-mode: horizontal-tb; }
@media (prefers-reduced-motion: reduce) { .scrollcue__dot { animation: none; opacity: .5; } }

/* -------------------------------------------------------------- forget --- */
#forget .copy--lead { max-width: min(60rem, 90vw); }
#forget .display--lg { position: absolute; left: 0; bottom: 0; width: max-content; max-width: min(60rem, 90vw); }

/* -------------------------------------------------------------- recall --- */
.recall__ask, .recall__again { max-width: min(38rem, 84vw); }
.recall__ask .lede, .recall__again .lede { margin-top: var(--sc-5); max-width: 30em; }
html.has-reviewed .recall__ask { display: none; }
html:not(.has-reviewed) .recall__again { display: none; }
.hint {
  position: absolute; z-index: 4;
  left: calc(var(--focal-x) * 100%); top: calc(var(--focal-y) * 100%);
  transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 2.6rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--sc-ink);
  font-family: var(--sc-font-text); transition: opacity 300ms var(--sc-ease-out);
}
.hint__ring { width: 2.6rem; height: 2.6rem; border-radius: 50%; position: relative; display: grid; place-items: center; }
.hint__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--sc-accent); opacity: .85;
  animation: hint-pulse 1.9s var(--sc-ease-out) infinite;
}
.hint__ring::after { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 3px color-mix(in oklab, var(--sc-accent) 70%, transparent); }
.hint__pill {
  display: grid; justify-items: center; gap: .1rem; padding: .7rem 1.3rem .65rem; border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-base); font-weight: 500; letter-spacing: .04em; white-space: nowrap;
  color: var(--sc-ink); border: 1px solid color-mix(in oklab, var(--sc-accent) 70%, transparent);
  transition: transform 140ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.hint__pill em { font-style: normal; font-size: .72em; font-weight: 400; color: var(--sc-ink-soft); letter-spacing: .06em; }
@media (hover: hover) and (pointer: fine) { .hint:hover .hint__pill { border-color: var(--sc-accent); color: var(--sc-accent); transform: translateY(-1px); } }
.hint:active .hint__pill { transform: scale(.97); }
.hint:focus-visible { outline: none; }
.hint:focus-visible .hint__pill { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
html.has-reviewed .hint__ring::before { animation-duration: 3.2s; opacity: .5; }
@keyframes hint-pulse { 0% { transform: scale(1); opacity: .85; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } }
.movecue {
  position: absolute; right: var(--sc-gutter); bottom: clamp(4.5rem, 13vh, 7rem); z-index: 4;
  display: grid; justify-items: center; gap: .55rem;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--sc-ink-soft);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out);
}
html[lang="ja"] .movecue { font-family: var(--sc-font-text); text-transform: none; letter-spacing: .2em; }
html.has-enough .movecue { opacity: 1; transform: none; }
.movecue__rail { display: block; width: 1px; height: 3rem; background: var(--line-strong); position: relative; overflow: hidden; }
.movecue__dot { position: absolute; left: -1px; width: 3px; height: 1rem; border-radius: 2px; background: var(--sc-accent); animation: cue-fall 2.2s var(--sc-ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .movecue__dot { animation: none; opacity: .5; } }

@media (max-width: 860px) {
  .movecue { bottom: 1.5rem; right: var(--sc-gutter); }
  .recall__ask, .recall__again { max-width: none; bottom: clamp(9rem, 26vh, 14rem); }
  .recall__ask .lede, .recall__again .lede { font-size: var(--sc-t-sm); }
}

/* --------------------------------------------------------------- model --- */
#model { padding-block: clamp(4rem, 9vh, 7rem) clamp(5rem, 14vh, 10rem); }
.model__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.formula {
  font-family: var(--font-formula); font-size: clamp(2rem, 1.1rem + 4vw, 4.6rem);
  line-height: 1; margin: var(--sc-7) 0 0; letter-spacing: -0.01em; white-space: nowrap;
  display: flex; align-items: center; gap: .18em; color: inherit;
}
.formula i { font-style: italic; }
.formula .frac { display: inline-grid; grid-template-rows: auto auto; text-align: center; font-size: .56em; line-height: 1.05; vertical-align: middle; }
.formula .frac > :first-child { border-bottom: 1px solid currentColor; padding: 0 .12em .06em; }
.formula .frac > :last-child { padding: .06em .12em 0; }
.formula .paren { font-size: 1.35em; font-weight: 300; line-height: .8; transform: translateY(-.04em); }
.formula sup { font-size: .5em; line-height: 0; vertical-align: .9em; margin-left: .06em; }
.formula .var { color: var(--sc-accent); }
.model__live { margin-top: var(--sc-7); display: grid; gap: var(--sc-4); max-width: 34rem; }
.model__live p { margin: 0; }
.model__live .mono { font-size: var(--sc-t-lg); }
.model__live .mono b { font-weight: 400; color: var(--sc-accent); }
.slider { display: grid; gap: .5rem; margin-top: var(--sc-3); }
.slider label { display: flex; justify-content: space-between; font-size: var(--sc-t-sm); color: inherit; opacity: .8; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; margin-top: -8.5px;
  background: var(--sc-canvas); border: 1px solid var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 18%, transparent);
  cursor: ew-resize; transition: box-shadow 140ms var(--sc-ease-out);
}
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sc-canvas); border: 1px solid var(--sc-accent); cursor: ew-resize; }
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 7px color-mix(in oklab, var(--sc-accent) 22%, transparent); }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.model__terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); margin-top: var(--sc-2); }
.term h3 { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-base); margin: 0 0 .5rem; letter-spacing: -0.005em; display: flex; gap: .5rem; align-items: baseline; }
html[lang="ja"] .term h3 { letter-spacing: .04em; }
.term h3 .sym { font-family: var(--font-formula); font-style: italic; font-size: 1.35em; color: var(--sc-accent); }
.term p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.65; }
html[lang="ja"] .term p { line-height: 1.9; }
@media (max-width: 960px) { .model__grid { grid-template-columns: 1fr; } .formula { font-size: clamp(1.8rem, 1rem + 6vw, 3.4rem); } }
@media (max-width: 600px) { .model__terms { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- swipe --- */
#swipe .copy--top { max-width: min(26rem, 88vw); z-index: 3; }
.phones {
  position: absolute; right: var(--sc-gutter); bottom: clamp(5rem, 14vh, 9rem);
  display: flex; gap: clamp(.75rem, 2vw, 1.75rem); align-items: flex-end; z-index: 2;
}
.phone { --w: clamp(8rem, 12.6vw, 11.5rem); margin: 0; width: var(--w); display: grid; gap: .8rem; justify-items: center;
  transform: translateY(calc((1 - var(--in, 0)) * 3vh)); opacity: calc(.06 + .94 * var(--in, 0));
  transition: transform 500ms var(--sc-ease-out), opacity 500ms var(--sc-ease-out); }
.phone__frame {
  position: relative; width: 100%; aspect-ratio: 1206 / 2622; border-radius: 15% / 7%;
  overflow: clip; background: #0B0F17; box-shadow: var(--sc-e3), var(--sc-edge);
  outline: 1px solid rgba(255,255,255,.08);
}
.phone__frame img, .phone__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__frame video { opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.phone__frame.sc-has-clip video { opacity: 1; }
.phone__label { text-align: center; line-height: 1.3; }
.phone__label b { display: block; font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: .02em; }
.phone__label span { display: block; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: .2rem; }
.phone__label .glyph { font-family: var(--sc-font-mono); color: var(--accent-glyph, #3E6FD0); margin-right: .35em; }
@media (max-width: 860px) {
  .phones { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; width: min(15rem, 60vw);
    right: auto; left: 50%; transform: translateX(-50%); bottom: clamp(4rem, 8vh, 6rem); align-items: end; }
  .phone { --w: 100%; }
  #swipe .copy--top { max-width: none; }
  #swipe .copy--top .lede { display: none; }
  .phone__label span { display: none; }
}

/* ------------------------------------------------------------ anything --- */
.any { width: min(78rem, 92vw); display: grid; gap: clamp(1rem, 3vh, 2.2rem); text-align: left; align-content: start; margin-bottom: clamp(0rem, 12svh - 4rem, 12svh); }
.any__title { position: relative; }
.wall {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .12em .5em;
  font-family: var(--sc-font-display); line-height: 1.05; margin: 0; letter-spacing: -0.02em;
}
html[lang="ja"] .wall { letter-spacing: .01em; line-height: 1.3; font-weight: 600; gap: .14em .45em; }
.wall span {
  display: inline-block; white-space: nowrap;
  /* the sweep travels between two BRIGHT tones — ink and a lifted accent — so a word
     is never a mid-tone on its way from one to the other */
  color: var(--sc-ink);   /* world.js paints the travelling light onto each word */
  opacity: calc(.64 + .36 * var(--lit, 0));
  transform: translateY(calc(var(--lit, 0) * -0.07em));
}
.wall .w1 { font-size: min(clamp(.95rem, .8rem + .9vw, 1.5rem), 2.1vh); font-family: var(--sc-font-text); font-weight: 500; letter-spacing: 0; opacity: 1; }
.wall .w2 { font-size: min(clamp(1.3rem, .95rem + 1.9vw, 2.5rem), 3.4vh); }
.wall .w3 { font-size: min(clamp(1.7rem, 1.1rem + 3vw, 3.6rem), 4.8vh); }
.wall .w4 { font-size: min(clamp(2.2rem, 1.3rem + 4.4vw, 5rem), 6.4vh); }
.any__close { max-width: 24em; color: var(--accent-close, #6EC6FF); }
@media (max-width: 860px) { .any { gap: 1.2rem; } }

/* --------------------------------------------------------------- label --- */
.lab {
  position: absolute; inset: calc(var(--bar-h) + clamp(2rem, 7vh, 5rem)) var(--sc-gutter) clamp(2.5rem, 7vh, 5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: auto 1fr auto; gap: clamp(1.5rem, 3vw, 3.5rem);
  align-content: start; z-index: 2;
}
.lab__copy { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: var(--sc-5); align-content: start; }
.lab__copy .lede { max-width: 30em; }
/* the lede and the closing line occupy the same cell: their cue windows do not
   overlap, so one replaces the other in place instead of stacking and pushing the
   four cards out of the act */
.lab__say { display: grid; min-height: min(clamp(7rem, 16vh, 11rem), 19vh); }
.lab__say > * { grid-area: 1 / 1; align-self: start; }
/* The act holds a two-line title, a paragraph and four cards inside one fixed
   height, and the type is sized from the width. On a wide but short window the
   width makes the type big while the height stays small, and the paragraph lands
   on the cards. Capping both against vh keeps the fit continuous instead of
   snapping at a breakpoint: at 1080px tall nothing changes, at 768px the title
   and the paragraph give way. Measured with tools/labfit.mjs. */
#label .display--lg { font-size: min(clamp(2.1rem, 1.4rem + 3.4vw, 4.6rem), 7.4vh); }
html[lang="ja"] #label .display--lg { font-size: min(clamp(1.7rem, 1.15rem + 2.6vw, 3.5rem), 6.2vh); }
#label .lede { font-size: min(var(--sc-t-lg), 2.5vh); }
html[lang="ja"] #label .lede { font-size: min(var(--sc-t-lg), 2.1vh); }
#label .lab__close { font-size: min(clamp(1.7rem, 1.25rem + 1.8vw, 2.8rem), 5vh); }
html[lang="ja"] #label .lab__close { font-size: min(clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem), 4.2vh); }
#label .lab__copy { gap: min(var(--sc-5), 3.4vh); }
.lab__close { color: var(--accent-close, #6EC6FF); }
.lab__stage { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding: 0 0 0 clamp(0rem, 2vw, 2rem); }
.tree { display: grid; gap: .55rem; font-family: var(--sc-font-text); }
.tree__row, .tree__item, .tree__tags {
  opacity: calc(var(--on, 0)); transform: translateY(calc((1 - var(--on, 0)) * 8px));
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.tree__row { display: flex; align-items: baseline; gap: .6rem; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.tree__row--i1 { padding-left: 1.1rem; } .tree__row--i2 { padding-left: 2.2rem; } .tree__row--i3 { padding-left: 3.3rem; }
.tree__k { font-family: var(--sc-font-mono); font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-accent); }
html[lang="ja"] .tree__k { font-family: var(--sc-font-text); text-transform: none; letter-spacing: .1em; }
.tree__v { color: var(--sc-ink); }
.tree__b { width: .9rem; height: 1px; background: var(--line-strong); display: inline-block; flex: none; transform: translateY(-.28em); }
.tree__item {
  margin-top: .7rem; padding: .9rem 0 .9rem 1rem; margin-left: 3.3rem;
  border-left: 2px solid var(--sc-accent); display: grid; gap: .3rem;
}
.tree__item .label { color: var(--sc-ink-soft); }
.tree__item b { font-weight: 500; color: var(--sc-ink); font-size: var(--sc-t-lg); }
.tree__path { font-size: var(--sc-t-base); color: var(--accent-lift, #A9D8FF); letter-spacing: .18em; }
.tree__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: 3.3rem; margin-top: .3rem; }
.tag {
  font-size: var(--sc-t-sm); padding: .3rem .8rem; border-radius: var(--sc-r-pill);
  border: 1px solid var(--line-strong); color: var(--sc-ink);
}
.lab__steps {
  grid-column: 1; grid-row: 3; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-5);
  align-self: end;
}
.lab__steps li {
  display: grid; gap: .25rem; padding-top: .7rem; border-top: 1px solid var(--line-strong);
  opacity: calc(.5 + .5 * var(--on, 0)); transition: opacity 420ms var(--sc-ease-out);
}
.lab__steps b { font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink); }
.lab__steps span { font-size: var(--sc-t-xs); line-height: 1.55; color: var(--sc-ink-soft); }
html[lang="ja"] .lab__steps span { line-height: 1.85; }
/* Below this the type has shrunk as far as it should, so the layout gives way
   instead: the four cards leave the left column and run as one row across the
   bottom, which halves the height they ask for and hands it to the paragraph.
   Every word stays on the page. */
@media (min-width: 1001px) and (max-height: 780px) {
  .lab { grid-template-rows: auto 1fr auto; }
  .lab__stage { grid-row: 1 / span 2; }
  .lab__steps { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-4); }
  .lab__steps span { font-size: var(--sc-t-xs); }
}
@media (max-width: 1000px) {
  .lab { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: start; gap: 1.25rem; overflow: hidden; }
  .lab__copy { grid-row: auto; }
  .lab__stage { grid-column: 1; grid-row: auto; padding: 0; }
  .lab__steps { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .lab__say { display: none; }
}
@media (max-width: 600px) { .lab__steps { grid-template-columns: 1fr; } .lab__steps li:nth-child(n+3) { display: none; } }

/* -------------------------------------------------------------- colour --- */
.colour__film {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; pointer-events: none; opacity: calc(.9 * var(--bed, 1));
  /* fade on both axes, so the film never meets the stage edge as a hard line and the
     bar at the top always has a dark ground under it */
  -webkit-mask-image: radial-gradient(78% 60% at 74% 66%, #000 22%, transparent 76%),
                      linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(78% 60% at 74% 66%, #000 22%, transparent 76%),
              linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 99%);
  mask-composite: intersect;
}
.col {
  position: absolute; inset: calc(var(--bar-h) + clamp(2rem, 7vh, 5rem)) var(--sc-gutter) clamp(2.5rem, 7vh, 5rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr; gap: clamp(1.25rem, 3vw, 3rem) clamp(2rem, 5vw, 5rem);
  align-content: start; z-index: 2;
}
.col__copy { grid-column: 1; grid-row: 1; display: grid; gap: var(--sc-5); align-content: start; }
.col__pick { grid-column: 1; grid-row: 2; display: grid; gap: var(--sc-4); align-content: start; }
.col__try { margin: 0; font-size: var(--sc-t-base); color: var(--sc-ink); font-weight: 500; }
.swatches { display: flex; flex-wrap: wrap; gap: .8rem; }
.sw {
  --sw: var(--sc-accent);
  width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--sw); position: relative; isolation: isolate;
  box-shadow: 0 4px 22px -4px var(--sw);
  transition: transform 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.sw--any { background: conic-gradient(#007AFF, #34C759, #FF9500, #FF2D55, #AF52DE, #5856D6, #007AFF); }
.sw::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--sw); opacity: 0; transition: opacity 200ms var(--sc-ease-out);
}
.sw[aria-pressed="true"]::after { opacity: 1; }
.sw[aria-pressed="true"] { transform: scale(1.1); box-shadow: 0 6px 34px -4px var(--sw); }
@media (hover: hover) and (pointer: fine) { .sw:hover { transform: scale(1.12); } }
.sw:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 5px; }
.sw__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the name and the hex say plainly what just changed */
.col__read { margin: .2rem 0 0; display: flex; align-items: baseline; gap: .9rem; }
.col__read b {
  font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1;
  color: var(--accent-name, #8FCBFF);
  transition: color 260ms var(--sc-ease-out);
}
html[lang="ja"] .col__read b { font-weight: 600; letter-spacing: .04em; }
.col__read span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); letter-spacing: .1em; }
.col__phones {
  grid-column: 2; grid-row: 1 / span 3; display: flex; gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center; justify-content: center; align-self: center;
}
.phone--theme { --w: clamp(7.5rem, 12vw, 11rem); }
/* no caption: a white phone beside a black one needs no label, and a small label
   over the colour film is a contrast liability. The names live on aria-label. */
.col__note { grid-column: 1; grid-row: 3; margin: 0; align-self: end; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.6; max-width: 38ch; }
html[lang="ja"] .col__note { max-width: 28em; }
@media (max-width: 1000px) {
  .col { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; align-content: start; gap: 1rem; overflow: hidden; }
  .col__copy, .col__pick, .col__note { grid-column: 1; grid-row: auto; }
  .col__phones { grid-column: 1; grid-row: auto; justify-content: flex-start; align-self: start; }
  .phone--theme { --w: clamp(5.5rem, 27vw, 8rem); }
  .col__note { display: none; }
  .sw { width: 2.5rem; height: 2.5rem; }
  .swatches { gap: .55rem; }
  .col__copy .lede { font-size: var(--sc-t-base); }
  .colour__film {
    opacity: calc(.42 * var(--bed, 1));
    -webkit-mask-image: radial-gradient(130% 26% at 50% 96%, #000 12%, transparent 72%),
                        linear-gradient(to bottom, transparent 0%, #000 52%, #000 88%, transparent 99%);
    mask-image: radial-gradient(130% 26% at 50% 96%, #000 12%, transparent 72%),
                linear-gradient(to bottom, transparent 0%, #000 52%, #000 88%, transparent 99%);
  }
}

/* ------------------------------------------------------------- privacy ---
   Five mechanisms, one picture each, built from real markup: a device with the
   wire to the server cut, the iteration count counting itself, bytes scrambling,
   a keypad that really shuffles, and a zero. */
.pv {
  /* The bottom inset reserves the band .pv__more sits in, which is why it is much
     larger than the top one: the closing line and the last beat are both lit at
     the end of the act and must not meet. */
  position: absolute; inset: calc(var(--bar-h) + clamp(2rem, 7vh, 5rem)) var(--sc-gutter) clamp(7rem, 17vh, 11rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem); align-content: center; z-index: 2;
}
.pv__copy { display: grid; gap: var(--sc-5); align-content: center; }
.pv__steps { display: grid; margin-top: var(--sc-4); }
.pvs {
  grid-area: 1 / 1; display: grid; gap: .5rem; align-content: start;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.pvs.is-on { opacity: 1; transform: none; }
.pvs b {
  font-family: var(--sc-font-display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); color: var(--sc-ink);
}
html[lang="ja"] .pvs b { font-family: var(--sc-font-text); font-weight: 500; letter-spacing: .02em; line-height: 1.35; font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem); }
.pvs__t { font-size: var(--sc-t-base); line-height: 1.7; color: var(--sc-ink-soft); max-width: 40ch; }
html[lang="ja"] .pvs__t { line-height: 1.95; max-width: 28em; }
.pv__more { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(1.5rem, 4vh, 3rem); margin: 0; z-index: 2; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 62ch; }
html[lang="ja"] .pv__more { max-width: 44em; }

.pv__vis { position: relative; display: grid; place-items: center; min-height: 18rem; }
.pvv {
  grid-area: 1 / 1; margin: 0; display: grid; place-items: center; gap: 1rem;
  opacity: 0; transform: scale(.96); transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out);
}
.pvv.is-on { opacity: 1; transform: none; }
/* 0 · on device */
.pvv__device {
  width: clamp(6rem, 9vw, 8.5rem); aspect-ratio: 1 / 2; border-radius: 14% / 7%;
  border: 1px solid var(--line-strong); display: grid; place-items: center; position: relative;
}
.pvv__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 30px 6px color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.pvv__ring { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--sc-accent) 40%, transparent); animation: pv-ring 3s var(--sc-ease-out) infinite; }
@keyframes pv-ring { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.pvv__cut { display: flex; align-items: center; gap: .8rem; }
.pvv__wire { width: clamp(3rem, 6vw, 5rem); height: 1px; background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 12px); }
.pvv__x { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); }
.pvv__cloud { width: 2.6rem; height: 1.6rem; border: 1px solid var(--line); border-radius: 999px; opacity: .5; }
/* 1 · key derivation */
.pvv--kdf { gap: .4rem; }
.pvv--kdf b { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 6rem); font-weight: 400; letter-spacing: -0.03em; color: var(--sc-accent); font-variant-numeric: tabular-nums; line-height: 1; }
.pvv__rounds { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
html[lang="ja"] .pvv__rounds { font-family: var(--sc-font-text); text-transform: none; }
/* 2 · the cipher */
.aes { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.aes span {
  display: grid; place-items: center; width: 2.4rem; height: 2rem; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  border: 1px solid var(--line);
}
/* 3 · the keypad */
/* the passcode: four dots filling above a pad that really does shuffle. Rings only,
   no fills, so it belongs to the same drawing as the tree and the byte grid. */
.pvv--pad { gap: 1.5rem; }
.pad__dots { display: flex; gap: .8rem; }
.pad__dots i {
  width: .6rem; height: .6rem; border-radius: 50%;
  border: 1px solid var(--sc-accent); background: transparent;
  animation: pad-dot 6s var(--sc-ease-in-out) infinite;
}
.pad__dots i:nth-child(2) { animation-delay: .3s; }
.pad__dots i:nth-child(3) { animation-delay: .6s; }
.pad__dots i:nth-child(4) { animation-delay: .9s; }
@keyframes pad-dot {
  0%, 4%   { background: transparent; }
  10%, 88% { background: var(--sc-accent); }
  96%, 100% { background: transparent; }
}
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.pad span {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-lg); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); color: var(--sc-ink);
  transition: border-color 300ms var(--sc-ease-out);
}
/* every reshuffle rolls across the keys in reading order, so the reader sees the
   positions change rather than just finding different numbers there */
.pad span.is-turn { animation: pad-turn 640ms var(--sc-ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes pad-turn {
  0%   { opacity: 0; transform: translateY(7px) scale(.93); border-color: var(--sc-accent); }
  45%  { opacity: 1; border-color: var(--sc-accent); }
  100% { opacity: 1; transform: none; border-color: var(--line); }
}
/* 4 · nothing leaves */
.pvv--none { gap: .3rem; }
.pvv__zero { font-size: clamp(5rem, 3rem + 9vw, 11rem); line-height: 1; color: var(--sc-accent); letter-spacing: -0.04em; }
.pvv__zerolabel { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
html[lang="ja"] .pvv__zerolabel { font-family: var(--sc-font-text); text-transform: none; }
@media (max-width: 1000px) {
  .pv { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 1.5rem; }
  .pv__vis { min-height: 11rem; order: -1; }
  .pv__copy .lede { display: none; }
  .pad { gap: .6rem; }
  .pad span { width: 2.7rem; height: 2.7rem; font-size: var(--sc-t-base); }
  .aes span { width: 1.9rem; height: 1.6rem; }
  .pv__more { display: none; }
}

/* --------------------------------------------------------------- trust --- */
#trust { padding-block: clamp(4rem, 10vh, 8rem); }
.trust__title { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.trust__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.facts { margin-top: var(--sc-4); display: grid; border-top: 1px solid var(--line); }
.fact { padding: var(--sc-5) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 6rem 1fr; gap: var(--sc-4); align-items: baseline; }
.fact .label { padding-top: .2em; }
.fact p { margin: 0; color: var(--sc-ink); text-wrap: pretty; line-height: 1.6; }
.fact p small { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: .35rem; line-height: 1.6; }
.fact .price { font-family: var(--sc-font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; display: block; margin-bottom: .4rem; }
html[lang="ja"] .fact .price { font-weight: 600; letter-spacing: .01em; }
.fact .price small { display: inline; font-size: .4em; color: var(--sc-ink-soft); margin-left: .3em; font-family: var(--sc-font-text); letter-spacing: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--sc-5); align-items: start;
  padding: var(--sc-5) 0; font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -0.01em; color: var(--sc-ink);
  transition: color 140ms var(--sc-ease-out);
}
html[lang="ja"] .faq summary { letter-spacing: .02em; line-height: 1.65; font-size: var(--sc-t-base); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 1.4rem; height: 1.4rem; flex: none; position: relative; margin-top: .35em; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 1rem; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform 220ms var(--sc-ease-out); }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover, .faq summary:focus-visible { color: var(--sc-accent); outline: none; }
.faq summary:focus-visible .plus { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
.faq .answer { padding: 0 3rem var(--sc-6) 0; color: var(--sc-ink-soft); line-height: 1.72; max-width: 64ch; text-wrap: pretty; }
html[lang="ja"] .faq .answer { line-height: 1.95; max-width: 42em; }
.faq .answer p { margin: 0; }
.faq__more { margin: var(--sc-6) 0 0; }
@media (max-width: 860px) {
  .trust__grid { grid-template-columns: 1fr; }
  .fact { grid-template-columns: 1fr; gap: .5rem; }
  .faq .answer { padding-right: 0; }
}

/* ---------------------------------------------------------------- get ---- */
#get .stage { display: grid; grid-template-rows: 1fr auto; }
.close { display: grid; place-items: center; text-align: center; padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 2rem; }
.close__inner { display: grid; justify-items: center; gap: var(--sc-6); max-width: 46rem; }
.close__logo { height: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); width: auto; clip-path: inset(0 clamp(0%, calc((0.62 - var(--sc-p, 0)) * 170%), 100%) 0 0); }
.close__logo img { height: 100%; width: auto; display: block; }
.close__logo .logo--dark { display: none; }
html.dark .close__logo .logo--light { display: none; }
html.dark .close__logo .logo--dark { display: block; }
.close__tag { margin-top: var(--sc-2); }
html[lang="ja"] .close__tag { letter-spacing: .14em; }
.close__ctas { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; margin-top: var(--sc-6); }
.close__note { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin: 0; }
.foot { padding: 0 var(--sc-gutter) 1.4rem; display: grid; gap: 1.2rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.6; }
.foot p { margin: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot a { text-decoration: none; color: var(--sc-ink); transition: color 140ms var(--sc-ease-out); }
.foot a:hover, .foot a:focus-visible { color: var(--sc-accent); }
.foot .foot__brand { color: var(--sc-ink); }
.foot__more { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.foot__more .label { display: inline; }
.foot__more a { color: var(--sc-ink); }
.foot__legal { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end; }
.foot__legal ul { justify-content: flex-end; }
@media (max-width: 860px) {
  .foot { padding-bottom: 4.4rem; }
  .foot__legal { grid-template-columns: 1fr; align-items: start; }
  .foot__legal ul { justify-content: flex-start; }
}

/* ------------------------------------------------------------ doc pages --
   The documents live in the same night as the second half of the home page, so
   they read as the same place. No panel: light ink on the ground, and the curve
   running quietly along the bottom. */
body.doc { background: #070A12; }
html.doc-dark { color-scheme: dark; }
.doc .world--doc { opacity: .85; }
.bar--doc { position: fixed; }
.doc__main { position: relative; z-index: 2; padding-top: calc(var(--bar-h) + clamp(2.5rem, 8vh, 6rem)); }
.crumbs { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); display: flex; gap: .5rem; margin-bottom: var(--sc-6); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--sc-accent); }
.doc__body { max-width: 60rem; margin-inline: auto; margin-bottom: clamp(3rem, 8vh, 6rem); }
.doc__head { margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.doc__head .lede { margin-top: var(--sc-6); max-width: 46ch; }
html[lang="ja"] .doc__head .lede { max-width: 34em; }
.doc__sec { margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.doc__sec h2 { margin-bottom: var(--sc-5); }
.doc__sec .body + .body { margin-top: var(--sc-4); }
.formula--doc { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem); margin: var(--sc-6) 0; }
.doc__list { margin: var(--sc-5) 0 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: var(--sc-6); }
.doc__list li { counter-increment: n; display: grid; gap: .4rem; padding-left: 2.8rem; position: relative; }
.doc__list li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .15em;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--sc-accent);
}
.doc__list b { font-weight: 500; font-size: var(--sc-t-lg); letter-spacing: -0.01em; color: var(--sc-ink); }
html[lang="ja"] .doc__list b { letter-spacing: .02em; font-size: var(--sc-t-base); }
.doc__list span { color: var(--sc-ink-soft); line-height: 1.72; }
html[lang="ja"] .doc__list span { line-height: 1.95; }
.doc__refs { margin: var(--sc-5) 0 0; display: grid; gap: var(--sc-5); }
.doc__refs > div { display: grid; gap: .3rem; padding-top: var(--sc-4); border-top: 1px solid var(--line); }
.doc__refs dt { font-weight: 500; color: var(--sc-ink); }
.doc__refs dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.7; }
.doc__refs a { color: var(--sc-accent); }
.faq--page { margin-top: var(--sc-6); border-top: 1px solid var(--line); }
.doc__nav { margin-top: clamp(3rem, 8vh, 5rem); padding-top: var(--sc-5); border-top: 1px solid var(--line); display: flex; gap: 1rem 1.5rem; align-items: baseline; flex-wrap: wrap; }
.doc__nav .label { display: inline; }
.doc__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.doc__nav a { text-decoration: none; color: var(--sc-ink); border-bottom: 1px solid var(--line-strong); }
.doc__nav a:hover { color: var(--sc-accent); border-color: var(--sc-accent); }
.doc__cta { margin: clamp(2.5rem, 7vh, 4rem) 0 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.foot--doc { max-width: 60rem; margin-inline: auto; padding-bottom: clamp(3rem, 8vh, 5rem); }

/* --------------------------------------------------- dissolve and motion -- */
.phone__label, .langsw { transition: opacity 160ms var(--sc-ease-out); }
html.dissolving .phone__label, html.dissolving .langsw { opacity: 0; transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) {
  .hint__ring::before { animation: none; }
  .phone { transition: none; transform: none; opacity: 1; }
  .tree__row, .tree__item, .tree__tags { opacity: 1; transform: none; }
  .wall span { opacity: 1; transform: none; }
  .pad__dots i { animation: none; background: var(--sc-accent); }
  .pad span.is-turn { animation: none; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }