:root {
    --accent: #E0A94E;         /* amber — tweakable */
    --hl: color-mix(in srgb, var(--accent) 15%, transparent);
    --de-size: 102px;          /* base word size; JS scales to fit both senses */
    --ease: cubic-bezier(.2, .68, .2, 1);
  }

  html[data-theme="ink"] {
    --bg-lift: #221C14; --bg: #17130D; --bg-edge: #0D0A06;
    --ink: #F1EBDC; --ink-soft: #A79E8C; --ink-faint: #6E6757; --ghost: #514B3C;
  }
  html[data-theme="paper"] {
    --bg-lift: #FBFAF5; --bg: #F7F5EF; --bg-edge: #E9E4D7;
    --ink: #1E1C18; --ink-soft: #79756B; --ink-faint: #B4AFA3; --ghost: #C8C3B6;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Instrument Sans", "Onest", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
  }

  .stage {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% 42%, var(--bg-lift) 0%, var(--bg) 46%, var(--bg-edge) 100%);
    overflow: hidden;
  }

  /* film grain */
  .grain {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 40;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.16;
    mix-blend-mode: overlay;
  }
  html[data-theme="ink"] .grain { opacity: 0.10; mix-blend-mode: soft-light; }
  body.no-grain .grain { display: none; }

  /* editorial corner label */
  .tag {
    position: fixed; top: 30px; right: 38px; z-index: 4;
    height: 52px; line-height: 52px;   /* center on the brand's 52px band -> aligns with "Langust." */
    font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-faint);
  }
  .tag b { color: var(--accent); font-weight: 400; }

  .brand {
    position: fixed;
    top: 30px;
    left: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .brand .mark {
    height: 52px;
    width: auto;
    display: block;
    flex: none;
  }
  .brand-txt { display: flex; flex-direction: column; gap: 2px; }
  .brand-name {
    font-family: "Newsreader", "Lora", Georgia, serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--ink);
  }
  .brand-name .dot { color: var(--accent); }
  .brand-sub {
    font-family: "Instrument Sans", "Onest", system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .brand-sub b { color: var(--accent); font-weight: 500; }

  .composition {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-3vh);
    transition: opacity .8s var(--ease);
  }
  .composition.gone { opacity: 0; }

  /* ---- the word line ---- */
  .line {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;       /* word sits at viewport center */
    transform-origin: 50% 50%;      /* scale about the word */
    will-change: transform;
    transition: transform .55s var(--ease);  /* mobile: glide when re-centering per sense */
  }

  .word {
    position: relative;
    font-family: "Newsreader", "Lora", Georgia, serif;
    font-weight: 400;
    font-size: var(--de-size);
    line-height: 1.04;
    letter-spacing: -0.012em;
    white-space: nowrap;
  }

  /* the target word: ghost (no meaning) -> alive (meaning) */
  .target {
    position: relative;
    display: inline-block;
    color: var(--ghost);
    opacity: 0;
    z-index: 1;
    transition: color .9s var(--ease), opacity .9s var(--ease), letter-spacing .9s var(--ease);
    letter-spacing: 0.01em;
  }
  .target.shown { opacity: 1; }
  .target.alive { color: var(--ink); letter-spacing: -0.012em; }

  .target::after {              /* the tracking underline */
    content: "";
    position: absolute;
    left: -0.06em; right: -0.06em;
    bottom: 0.06em;
    height: 0.082em;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0.82);
    transform-origin: 50% 50%;
    transition: opacity .8s var(--ease), transform .9s var(--ease);
  }
  .target.alive::after { opacity: 0.92; transform: scaleX(1); }
  html[data-theme="ink"] .target.alive::after {
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
  }

  .target::before {             /* faint marker wash */
    content: "";
    position: absolute;
    left: -0.12em; right: -0.12em;
    top: 0.05em; bottom: 0.06em;
    background: var(--hl);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 1s var(--ease);
    z-index: -1;
  }
  .target.alive::before { opacity: 1; }

  .sup {                        /* dictionary sense marker ¹ ² */
    position: absolute;
    top: 0.02em; right: -0.56em;
    font-family: "Instrument Sans", "Onest", sans-serif;
    font-size: 0.26em;
    font-weight: 500;
    color: var(--accent);
    opacity: 0;
    transition: opacity .6s var(--ease);
  }
  .target.alive .sup { opacity: 0.85; }

  /* context spans hang off the word's edges, out of flow */
  .ctx-left, .ctx-right {
    position: absolute;
    top: 0;
    white-space: nowrap;
    color: var(--ink);
    font-weight: 400;
  }
  .ctx-left  { right: 100%; padding-right: 0.30em; text-align: right; }
  .ctx-right { left: 100%;  padding-left: 0.30em;  text-align: left; }

  .tok {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    filter: blur(9px);
    transition:
      opacity .8s var(--ease),
      transform .85s var(--ease),
      filter .8s ease;
  }
  .tok.in { opacity: 1; transform: translateY(0); filter: blur(0); }

  /* ---- sub line: babble (no meaning) / gloss (meaning) / thesis ---- */
  .sub {
    margin-top: 2.5em;
    min-height: 1.5em;
    font-family: "Instrument Sans", "Onest", system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.55vw, 23px);
    letter-spacing: 0.012em;
    color: var(--ink-soft);
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    filter: blur(4px);
    transition: opacity .5s var(--ease), transform .55s var(--ease), filter .5s ease;
  }
  .sub.vis { opacity: 1; transform: none; filter: none; }
  .sub.phonetic {
    font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
    font-size: clamp(14px, 1.4vw, 20px);
    letter-spacing: 0.05em;
    color: var(--ink-faint);
  }
  .sub.babble {
    font-family: "Newsreader", "Lora", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--ghost);
    letter-spacing: 0.03em;
  }
  .sub.gloss i {
    font-family: "Newsreader", "Lora", Georgia, serif;
    font-style: italic;
    color: var(--accent);
    margin-right: 0.4em;
  }
  .finale {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-3vh);
    padding: 0 7vw;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s var(--ease);
  }
  .finale.show { opacity: 1; }
  .slogan-line {
    font-family: "Newsreader", "Lora", Georgia, serif;
    font-weight: 500;
    font-size: clamp(27px, 3.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.016em;
    color: var(--ink);
    text-wrap: balance;
  }
  .descriptor-line {
    margin-top: 1.25em;
    max-width: 30em;
    font-family: "Instrument Sans", "Onest", system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.45vw, 20px);
    line-height: 1.5;
    letter-spacing: 0.004em;
    color: var(--ink-soft);
    text-wrap: balance;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .8s var(--ease) .5s, transform .85s var(--ease) .5s;
  }
  .descriptor-line b { color: var(--ink); font-weight: 500; }
  .finale.show .descriptor-line { opacity: 1; transform: none; }
  .quip-line {
    margin-top: 1.5em;
    font-family: "Newsreader", "Lora", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(17px, 1.9vw, 24px);
    letter-spacing: 0.005em;
    color: var(--ink);
  }
  /* two-beat reveal: first sentence with the finale, second after a pause */
  .quip-a, .quip-b {
    display: inline-block;
    opacity: 0;
    transform: translateY(5px);
  }
  .quip-a { transition: opacity .8s var(--ease) 1s, transform .85s var(--ease) 1s; }
  .quip-b { transition: opacity .8s var(--ease), transform .85s var(--ease); }
  .finale.show .quip-a { opacity: 1; transform: none; }
  .quip-b.show { opacity: 1; transform: none; }

  /* ---- persistent download CTA ---- */
  .cta {
    position: fixed;
    left: 50%; bottom: 38px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 1s var(--ease);
  }
  .cta.show { opacity: 1; }
  .cta-tagline {
    font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .cta-tagline b { color: var(--accent); font-weight: 400; }
  .cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 22px 12px 18px;
    text-decoration: none;
    border-radius: 13px;
    flex: none;   /* keep natural size; wrap (stack) instead of squeezing on narrow screens */
    transition: transform .3s var(--ease), border-color .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .cta-btn:hover { transform: translateY(-2px); }

  /* primary — TestFlight carries the amber, clearly the destination */
  .cta-btn.primary {
    background: var(--accent);
    color: #1A1407;
    border: 1px solid var(--accent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 26%, transparent);
  }
  .cta-btn.primary:hover {
    background: color-mix(in srgb, var(--accent) 88%, #fff);
    border-color: color-mix(in srgb, var(--accent) 88%, #fff);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 38%, transparent);
  }
  .cta-btn.primary .cta-glyph { color: #1A1407; }
  .cta-btn.primary .cta-btn-sub { color: color-mix(in srgb, #1A1407 65%, transparent); }

  /* secondary — Android stays a quiet ghost */
  .cta-btn.ghost {
    color: var(--ink);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  }
  .cta-btn.ghost:hover {
    border-color: color-mix(in srgb, var(--ink) 42%, transparent);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
  .cta-btn.ghost .cta-glyph { color: var(--ink-soft); }

  .cta-glyph { width: 22px; height: 22px; flex: none; }
  .cta-btn-txt {
    display: flex; flex-direction: column; align-items: flex-start;
    line-height: 1.12;
    white-space: nowrap;   /* labels stay one line (e.g. "APK HERUNTERLADEN") */
    font-family: "Instrument Sans", "Onest", system-ui, sans-serif;
  }
  .cta-btn-sub { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
  .cta-btn-main { font-size: 17px; font-weight: 500; letter-spacing: 0.005em; }
  .cta-note {
    font-family: "Instrument Sans", "Onest", system-ui, sans-serif;
    font-size: 12px; letter-spacing: 0.01em;
    color: var(--ink-faint);
  }

  /* ---- "coming soon" hold ----
     Downloads are paused while the app is re-published. Everything keys off the
     `soon` class on #cta, so the whole state flips from one class in index.html
     (the anchors' data-href swap is the other half — see the comment there).
     The buttons keep their shape and stay legible: this reads as "not yet",
     not as "broken". */
  .cta-soon { display: none; }

  .cta.soon .cta-btn {
    cursor: default;
    /* muted, not greyed to death — the amber still hints at what it becomes */
    filter: saturate(0.4);
    opacity: 0.62;
    box-shadow: none;
  }
  .cta.soon .cta-btn:hover { transform: none; }   /* no lift: nothing to press */
  .cta.soon .cta-btn.primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: none;
  }
  .cta.soon .cta-btn.ghost:hover {
    border-color: color-mix(in srgb, var(--ink) 22%, transparent);
    background: transparent;
  }
  .cta.soon .cta-soon {
    display: inline-block;
    font-family: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: 0.7;
    flex: none;
    animation: soon-pulse 2.6s var(--ease) infinite;
  }

  @keyframes soon-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.85; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta.soon .cta-soon { animation: none; opacity: 0.7; }
  }

  /* ---- replay (demoted to a quiet corner icon) ---- */
  .replay {
    position: fixed;
    right: 24px; bottom: 22px;
    z-index: 6;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    font-size: 17px;
    color: var(--ink-faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 1s var(--ease), color .25s ease, border-color .25s ease, background .25s ease, transform .5s var(--ease);
  }
  .replay.show { opacity: 1; }
  .replay:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 20%, transparent);
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    transform: rotate(-150deg);
  }

  /* ---- mobile: larger secondary text to match the bigger sentence ---- */
  @media (max-width: 640px) {
    .sub { margin-top: 1.8em; font-size: clamp(16px, 4.3vw, 22px); }
    .sub.phonetic { font-size: clamp(15px, 4vw, 20px); }
    .tag { top: 22px; right: 22px; }   /* same top as brand -> stays aligned (height/line-height carry over) */
    .brand { top: 22px; left: 22px; }
    .cta { bottom: 22px; gap: 11px; }
    .cta-buttons { gap: 10px; }
    .cta-btn { padding: 10px 16px; }
    .replay { right: 16px; bottom: 16px; }
    /* reserve room for the fixed CTA so neither the animation nor the finale
       text can overlap it — both center in the space *above* the CTA */
    .stage { padding-bottom: 120px; }
    .finale { padding-bottom: 120px; }
  }