/* Hallmark · macrostructure: custom storybook (poster hero · live recorded answer · native screens · languages · finale)
 * tone: literary, warm, playful · anchor hue: terracotta (Piko) · genre: editorial
 * Shared by aigid.ai/ (Italian) and aigid.ai/ru (Russian). No inline style or script (CSP).
 * Display: Literata (atlas-fonts.css). Product text: the system face, as in the app. */

:root {
  color-scheme: light dark;
  --paper: #faf4e9;
  --paper-tex: url(atlas/tex/paper.webp);
  --paper-deep: #f1e7d4;
  --ink: #2b2723;
  --ink-soft: #5e564e;
  --rule: rgb(43 39 35 / 0.14);
  --sheet: #fff;
  --sheet-ink: #1c1c1e;
  --sheet-ink-2: #6c6c70;
  --sheet-rule: rgb(28 28 30 / 0.1);
  --piko: #f0512e;
  --action: #b8351a;
  --action-ink: #fff;
  --tint: rgb(184 53 26 / 0.1);
  --tint-ink: #a12e15;
  --bubble: #fce5dc;
  --bubble-ink: #4a1a0e;
  --water: #6e8c93;
  --park: rgb(122 150 92 / 0.12);
  --park-ink: rgb(104 140 74 / 0.3);
  --map-ink: 43 39 35;
  --teal: #1e4d4f;
  --gold: #e9a23b;
  --glass: rgb(250 244 233 / 0.72);
  --shadow: 0 1px 1px rgb(43 39 35 / 0.06), 0 12px 32px -12px rgb(91 52 27 / 0.28);

  --serif: var(--atlas-serif, 'Literata', Georgia, serif);
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;

  --text-hero: clamp(2.25rem, 12.4vw, 7rem);
  --text-h2: clamp(2.125rem, 1.45rem + 3.4vw, 4.75rem);
  --text-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
  --text-body: 1.0625rem;
  --text-small: 0.8125rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --gutter: clamp(16px, 4.6vw, 48px);
  --bar: 56px;
  --radius: 28px;
  --radius-s: 14px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper-tex: url(atlas/tex/paper-dark.webp);
    --paper: #10201f;
    --paper-deep: #0b1817;
    --ink: #ede3cf;
    --ink-soft: #b9b2a3;
    --rule: rgb(237 227 207 / 0.15);
    --sheet: #172624;
    --sheet-ink: #f2eee6;
    --sheet-ink-2: #a9b2ab;
    --sheet-rule: rgb(242 238 230 / 0.12);
    --action: #ff8a6e;
    --action-ink: #2a0e06;
    --tint: rgb(255 138 110 / 0.14);
    --tint-ink: #ffa48e;
    --bubble: #3b2721;
    --bubble-ink: #ffd8cb;
    --water: #5b8a91;
    --park: rgb(126 168 116 / 0.08);
    --park-ink: rgb(126 168 116 / 0.24);
    --map-ink: 237 227 207;
    --teal: #8fd0c9;
    --glass: rgb(16 32 31 / 0.7);
    --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
body {
  margin: 0; overflow-x: clip;
  background: var(--paper) var(--paper-tex) 0 0 / 512px 512px; color: var(--ink);
  font: 400 var(--text-body)/1.47 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }

/* ---------- Bar: brand and the one download pill ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20;
  padding-top: env(safe-area-inset-top);
}
.bar::before {
  content: ''; position: absolute; inset: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  mask-image: linear-gradient(#000 70%, transparent);
  opacity: 0; transition: opacity 240ms var(--ease-out);
}
.bar[data-scrolled]::before { opacity: 1; }
.bar .wrap { position: relative; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 650; font-size: 1.1875rem; letter-spacing: -0.02em; text-decoration: none;
}
.brand img { width: 26px; height: auto; }
.pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--action); color: var(--action-ink); text-decoration: none;
  font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: var(--shadow);
  transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.bar:not([data-cta]) .pill { opacity: 0; transform: translateY(-6px); visibility: hidden; }
.bar[data-cta] .pill { transition-delay: 0s; }
.pill:active, .press:active { transform: scale(0.97); transition-duration: 100ms; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-content: start; gap: var(--s6);
  padding-top: calc(env(safe-area-inset-top) + var(--bar) + clamp(20px, 5.5svh, 72px));
  padding-bottom: var(--s7);
}
.hero h1 {
  font-family: var(--serif); font-weight: 300; font-size: var(--text-hero);
  line-height: 1.02; letter-spacing: -0.024em; font-optical-sizing: auto;
  overflow-wrap: anywhere; min-width: 0; text-wrap: balance;
}
.hero h1 .line { display: block; }
.dot { position: relative; color: transparent; }
.dot::after {
  content: ''; position: absolute; left: 0.03em; bottom: 0.17em;
  width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--piko);
}
.lead { margin-top: var(--s5); max-width: 30ch; font-size: var(--text-lead); line-height: 1.36; color: var(--ink-soft); letter-spacing: -0.01em; text-wrap: pretty; }
.get-row { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.badge { display: inline-block; border-radius: 10px; line-height: 0; }
.badge img { height: 52px; width: auto; }
.get-note { font-size: var(--text-small); line-height: 1.4; color: var(--ink-soft); max-width: 22ch; }

.piko {
  justify-self: end; display: grid; justify-items: end; gap: var(--s3);
  /* The hop lifts Piko by 22% of his height: 16% up, then a 6% stretch from
     his feet. Room for that, plus 12px, keeps the text above him uncovered. */
  --piko-w: min(58vw, 300px);
  margin-top: calc(0.22 * var(--piko-w) * 428 / 420 + var(--s3) - var(--s6)); margin-right: calc(-0.5 * var(--gutter));
}
.piko-art {
  position: relative; width: var(--piko-w); aspect-ratio: 420 / 428;
  transform-origin: 50% 100%; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.piko-art::after {
  content: ''; position: absolute; left: 22%; right: 26%; bottom: -3%; height: 7%; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(91 52 27 / 0.22), transparent);
}
.piko-base { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.piko-eye, .piko-lidbox { position: absolute; left: 36.581%; top: 26.689%; width: 28%; height: 28.005%; pointer-events: none; }
.piko-eye { clip-path: polygon(94.3% 67.6%, 90.4% 75%, 85.5% 81.7%, 79.3% 87.3%, 72.3% 91.9%, 64.6% 95.1%, 56.4% 97.1%, 48.1% 97.6%, 40% 96.6%, 32% 94.3%, 24.5% 90.5%, 17.9% 85.6%, 12.3% 79.6%, 7.8% 72.7%, 4.7% 65.1%, 2.9% 57.1%, 2.4% 48.7%, 3.5% 40.5%, 6% 32.5%, 9.9% 25.1%, 14.9% 18.5%, 21% 12.8%, 28.1% 8.3%, 35.7% 5%, 43.9% 3%, 52.2% 2.5%, 60.4% 3.6%, 68.3% 5.9%, 75.8% 9.6%, 82.4% 14.5%, 88% 20.6%, 92.5% 27.4%, 95.7% 35.1%, 97.5% 43.1%, 97.9% 51.4%, 96.8% 59.7%); }
.piko-iris { position: absolute; left: 38.571%; top: 17.329%; width: 56.973%; height: 60.904%; max-width: none; will-change: transform; }
.piko-lidbox { clip-path: polygon(52.5% 1.1%, 43% 1.8%, 33.4% 4.3%, 24.1% 9%, 18.1% 13.4%, 11.1% 20.9%, 7.2% 26.8%, 3.4% 35.6%, 2.1% 40.3%, 1.2% 46.6%, 1.2% 54.7%, 3.1% 64.7%, 6.9% 73.8%, 9.8% 78.5%, 13.3% 82.9%, 21% 89.8%, 28.3% 94.2%, 35.3% 97%, 46.5% 98.8%, 52.9% 98.8%, 58% 98.2%, 66.3% 96%, 76.5% 91%, 83.2% 85.7%, 89.3% 79.1%, 91.8% 75.4%, 95.3% 68.8%, 98.2% 59.7%, 99.2% 52.8%, 98.8% 42.8%, 96.9% 34.3%, 93.4% 26.2%, 88.3% 18.7%, 83.2% 13.4%, 79.7% 10.5%, 71.1% 5.5%, 60.5% 2.1%); }
.piko-lid { position: absolute; inset: -2%; background: linear-gradient(180deg, #fc613b, #f74a27 58%, #d02d0f); transform: translateY(-104%); }
.piko figcaption {
  max-width: 17ch; margin-right: calc(0.5 * var(--gutter));
  font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--ink-soft); text-align: right;
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 10vw, 136px); }
.section h2 {
  font-family: var(--serif); font-weight: 300; font-size: var(--text-h2);
  line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; text-wrap: balance;
}
.section h2 .line { display: block; }
.section-lead { margin-top: var(--s5); max-width: 38ch; font-size: var(--text-lead); line-height: 1.38; color: var(--ink-soft); text-wrap: pretty; }
.quiet { font-size: var(--text-small); line-height: 1.45; color: var(--ink-soft); }

/* ---------- Ask: a recorded answer, replayed ---------- */
.ask { padding-top: var(--s9); }
.chips {
  margin-top: var(--s6); display: flex; gap: var(--s2); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px var(--gutter) 6px; margin-inline: calc(-1 * var(--gutter));
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.chip[aria-checked='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-checked='true']):hover { border-color: rgb(var(--map-ink) / 0.45); }
}
.chip:active { transform: scale(0.97); transition-duration: 100ms; }

.stage { margin-top: var(--s5); display: grid; gap: var(--s4); align-items: start; }
.plate {
  position: sticky; top: calc(env(safe-area-inset-top) + var(--bar) + 4px); z-index: 2;
  height: min(38svh, 360px); border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: var(--paper) var(--paper-tex) 0 0 / 512px 512px;
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow);
}
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate path { vector-effect: non-scaling-stroke; }
.plate .road.major { stroke-width: 2.2px; }
.plate .road.mid { stroke-width: 1.2px; }
.plate .road.minor { stroke-width: 0.9px; }
.plate .road.path { stroke-width: 0.8px; }
.plate .river { stroke-width: 1.6px; }
.plate .rail { stroke-width: 1px; }
.plate .water { fill: var(--water); fill-opacity: 0.22; stroke: none; }
.plate .green { fill: var(--park); stroke: none; }
.plate .buildings { fill: rgb(var(--map-ink) / 0.035); stroke: none; }
.plate .road, .plate .river, .plate .rail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plate .road { stroke: rgb(var(--map-ink) / 0.26); }
.plate .road.mid { stroke: rgb(var(--map-ink) / 0.2); }
.plate .road.minor { stroke: rgb(var(--map-ink) / 0.13); }
.plate .road.path { stroke: rgb(var(--map-ink) / 0.12); stroke-dasharray: 1 3; }
.plate .rail { stroke: rgb(var(--map-ink) / 0.2); stroke-dasharray: 4 3; }
.plate .river { stroke: var(--water); stroke-opacity: 0.45; }
/* Ink: the same city, darker, only where Piko's points have landed. */
.plate .ink .water { fill-opacity: 0.4; }
.plate .ink .green { fill: var(--park-ink); }
.plate .ink .buildings { fill: rgb(var(--map-ink) / 0.085); }
.plate .ink .road { stroke: rgb(var(--map-ink) / 0.82); }
.plate .ink .road.mid { stroke: rgb(var(--map-ink) / 0.62); }
.plate .ink .road.minor { stroke: rgb(var(--map-ink) / 0.42); }
.plate .ink .road.path { stroke: rgb(var(--map-ink) / 0.36); }
.plate .ink .river { stroke-opacity: 0.8; }
.plate .bloom { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.plate .bloom[data-open] { transform: none; }
.plate-veil { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); font-size: var(--text-small); }
.plate[data-ready] .plate-veil { display: none; }
.pins { position: absolute; inset: 0; z-index: 1; }
.pin {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: default; border-radius: 50%;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.pin::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  background: var(--piko); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgb(0 0 0 / 0.28);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.pin[hidden] { display: none; }
.pin[data-set] { cursor: pointer; }
.pin[aria-pressed='true']::before { transform: scale(1.5); box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgb(240 81 46 / 0.28), 0 3px 10px rgb(0 0 0 / 0.3); }
@media (hover: hover) and (pointer: fine) {
  .pin[data-set]:hover::before { transform: scale(1.25); }
}
.pin-label {
  position: absolute; left: 50%; top: calc(50% + 14px); transform: translateX(-50%);
  width: max-content; max-width: 17ch; padding: 2px 8px; border-radius: 8px;
  background: rgb(var(--map-ink) / 0); color: var(--ink);
  font-size: 0.75rem; font-weight: 600; line-height: 1.25; text-align: center; white-space: normal;
  text-shadow: 0 0 3px var(--paper-deep), 0 0 2px var(--paper-deep), 0 0 1px var(--paper-deep);
  opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
.plate[data-wide] .pin[data-set] .pin-label, .pin[aria-pressed='true'] .pin-label { opacity: 1; }

.sheet {
  scroll-margin-top: calc(env(safe-area-inset-top) + var(--bar) + min(38svh, 360px) + 16px);
  position: relative; border-radius: var(--radius); background: var(--sheet); color: var(--sheet-ink);
  padding: var(--s5) var(--s5) var(--s6); box-shadow: var(--shadow); min-height: 320px;
  font-size: var(--text-body); line-height: 1.47;
}
.sheet a { color: var(--tint-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.q {
  margin-left: auto; width: fit-content; max-width: 88%;
  padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--bubble); color: var(--bubble-ink);
  font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere;
}
.status { min-height: 1.5em; margin-top: var(--s4); color: var(--sheet-ink-2); font-size: 0.9375rem; }
.status:empty { min-height: 0; margin: 0; }
.answer { margin-top: var(--s3); overflow-wrap: anywhere; }
.answer p + p, .story-text p + p { margin-top: 0.9em; }
.answer .name { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: rgb(240 81 46 / 0.45); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.answer .name:disabled { cursor: default; text-decoration: none; }
.photo { display: block; margin: var(--s4) 0; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-s); overflow: hidden; }
.photo img { width: 100%; height: auto; }
.photo[data-small] { width: fit-content; }
.photo[data-small] img { width: auto; max-width: 100%; }
.answer .photo { animation: photo-in 420ms var(--ease-out) both; }
@keyframes photo-in { from { opacity: 0; } }
.caret::after { content: ''; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.15em; border-radius: 50%; background: var(--piko); vertical-align: 0.1em; animation: caret 900ms ease-in-out infinite; }
@keyframes caret { 50% { opacity: 0.25; } }
.replay-note { margin-top: var(--s4); max-width: 60ch; }
.again { margin-left: 0.35em; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.story[hidden], .answer-view[hidden] { display: none; }
.story-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.icon-btn, .act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; cursor: pointer;
  border-radius: 999px; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.icon-btn { width: 44px; background: rgb(127 127 127 / 0.14); color: var(--sheet-ink); }
.act { padding: 0 16px; }
@media (max-width: 420px) { .act { padding: 0 13px; font-size: 0.9375rem; } .voices { margin-left: 0; } }
.act.fill { background: var(--action); color: var(--action-ink); }
.act.tint { background: var(--tint); color: var(--tint-ink); }
.icon-btn:active, .act:active { transform: scale(0.97); transition-duration: 100ms; }
.icon-btn svg, .act svg { width: 18px; height: 18px; flex: none; }
.voices { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; background: rgb(127 127 127 / 0.12); }
.voices button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--sheet-ink-2); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.voices button[aria-checked='true'] { background: var(--sheet); color: var(--sheet-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.14); }
.route { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-s); background: rgb(127 127 127 / 0.08); }
.route[hidden] { display: none; }
.route ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.route a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.route p { color: var(--sheet-ink-2); font-size: var(--text-small); }
.story h3 { margin-top: var(--s5); font-size: 1.625rem; line-height: 1.18; font-weight: 700; letter-spacing: -0.018em; }
.story h3:focus { outline: none; }
.story-text { margin-top: var(--s3); overflow-wrap: anywhere; }
.sources { margin-top: var(--s5); border-top: 1px solid var(--sheet-rule); padding-top: var(--s3); }
.sources summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--sheet-ink-2); font-weight: 600; font-size: 0.9375rem; }
.sources li { margin-top: var(--s2); font-size: 0.9375rem; line-height: 1.4; }
.sources .credit { color: var(--sheet-ink-2); }

/* ---------- The app, natively ---------- */
.screens {
  margin-top: var(--s7); display: flex; gap: var(--s4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px var(--gutter) 24px; margin-inline: calc(-1 * var(--gutter)); scroll-padding-inline: var(--gutter);
}
.screens::-webkit-scrollbar { display: none; }
.screen { flex: none; width: min(70vw, 300px); scroll-snap-align: start; }
.screen img {
  width: 100%; aspect-ratio: 640 / 1391; border-radius: 13.6% / 6.26%;
  box-shadow: 0 0 0 1px rgb(var(--map-ink) / 0.1), var(--shadow); background: var(--paper-deep);
}
.screen figcaption { margin-top: var(--s4); padding-right: var(--s2); font-size: 1rem; line-height: 1.4; text-wrap: pretty; }
.screen figcaption b { display: block; font-weight: 650; letter-spacing: -0.01em; }
.screen figcaption span { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 0.9375rem; }
.app-facts { margin-top: var(--s6); display: grid; gap: var(--s5); max-width: 40ch; }
.app-facts b { display: block; font-size: 1.1875rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.012em; }
.app-facts span { display: block; margin-top: 4px; color: var(--ink-soft); }
.screen.solo { width: min(72vw, 300px); margin: var(--s7) auto 0; }
.screen.solo figcaption { text-align: center; }

/* ---------- Languages ---------- */
.tongues ul { margin-top: var(--s7); border-top: 1px solid var(--rule); }
.tongue {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s2) var(--s5);
  padding: var(--s4) 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer;
}
.tongue .says { font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2.375rem); line-height: 1.18; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.tongue .lang { color: var(--ink-soft); font-size: 0.9375rem; white-space: nowrap; }
.tongue .lang::after { content: ' ↑'; color: var(--piko); }
@media (hover: hover) and (pointer: fine) {
  .tongue:hover .says { text-decoration: underline; text-decoration-color: var(--piko); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
}
.tongues .facts { margin-top: var(--s6); display: grid; gap: var(--s3); max-width: 46ch; color: var(--ink-soft); font-size: 1.0625rem; }

/* ---------- Download ---------- */
.get { text-align: center; padding-bottom: var(--s9); }
.get .icon { width: clamp(132px, 30vw, 184px); aspect-ratio: 1; margin: 0 auto var(--s6); border-radius: 22.4%; box-shadow: var(--shadow); }
.get h2 { margin-inline: auto; max-width: 14ch; overflow-wrap: normal; }
.get .get-row { justify-content: center; margin-top: var(--s6); }
.get .get-note { max-width: 34ch; margin: var(--s4) auto 0; font-size: 0.9375rem; }
.qr { display: none; margin: var(--s6) auto 0; width: fit-content; }
.qr a { display: block; padding: 14px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.qr img { width: 168px; height: 168px; image-rendering: pixelated; }
.qr figcaption { margin-top: var(--s3); color: var(--ink-soft); font-size: var(--text-small); }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .qr { display: block; } }
html[data-device='ios'] .qr, html[data-device='android'] .qr { display: none; }
.android { margin-top: var(--s6); color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- Footer ---------- */
.foot { padding-block: var(--s6) calc(var(--s7) + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--text-small); line-height: 1.5; }
.foot .wrap { display: grid; gap: var(--s4); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.foot nav a:hover { text-decoration: underline; }
.foot p { max-width: 70ch; }
.foot a:not(nav a) { text-underline-offset: 2px; }

/* ---------- Photo viewer ---------- */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: #fff; overflow: hidden;
}
.viewer::backdrop { background: #000; }
.viewer[open] { animation: viewer-in 220ms var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; } }
.viewer-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track figure { flex: none; width: 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; padding: 64px 0 80px; }
.viewer-track img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.viewer-close, .viewer-info {
  position: absolute; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: rgb(255 255 255 / 0.14); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.viewer-close { top: calc(env(safe-area-inset-top) + 12px); right: 16px; }
.viewer-info { bottom: calc(env(safe-area-inset-bottom) + 16px); right: 16px; font-family: var(--serif); font-style: italic; font-size: 1.25rem; }
.viewer-close svg { width: 18px; height: 18px; }
.viewer-credit {
  position: absolute; z-index: 2; left: 16px; right: 72px; bottom: calc(env(safe-area-inset-bottom) + 16px);
  max-width: 520px; padding: 14px 16px; border-radius: 16px; background: rgb(28 28 30 / 0.86); color: rgb(255 255 255 / 0.82);
  font-size: 0.875rem; line-height: 1.45;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.viewer-credit[hidden] { display: none; }
.viewer-credit b { display: block; color: #fff; font-weight: 600; font-size: 0.9375rem; margin-bottom: 2px; }
.viewer-credit a { color: #fff; }

/* ---------- Wide layouts ---------- */
@media (min-width: 900px) {
  :root { --text-hero: clamp(3.5rem, 7.2vw, 6.5rem); }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; align-content: center; padding-bottom: var(--s8); }
  .hero-copy { padding-bottom: var(--s6); }
  .piko { margin: 0; justify-self: center; justify-items: center; }
  .piko-art { width: min(30vw, 420px); }
  .piko figcaption { margin-right: 0; text-align: center; }
  .stage { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5); }
  .plate { top: calc(var(--bar) + 24px); height: calc(100svh - var(--bar) - 64px); max-height: 760px; }
  .sheet { padding: var(--s6) var(--s6) var(--s7); min-height: 480px; scroll-margin-top: calc(var(--bar) + 24px); }
  .chips { flex-wrap: wrap; overflow: visible; mask-image: none; margin-inline: 0; padding-inline: 0; }
  .screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .screen { width: auto; }
  .screen:nth-child(even) { margin-top: var(--s8); }
  .app-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s8); align-items: center; }
  .screen.solo { margin: 0; justify-self: center; }
  .tongues .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s8); align-items: start; }
  .tongues ul { margin-top: 0; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
@media (min-width: 1280px) {
  .hero { gap: var(--s8); }
}

/* ---------- Motion (entrances) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero h1 .line { animation: rise 760ms var(--ease-out) both; }
  .hero h1 .line + .line { animation-delay: 70ms; }
  .hero .dot::after { animation: seal 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 360ms both; }
  .hero .lead, .hero .get-row { animation: rise 760ms var(--ease-out) 160ms both; }
  .hero .piko-art { animation: arrive 900ms var(--ease-out) 120ms both, breathe 3.6s ease-in-out 1.1s infinite; }
  .hero[data-still] .piko-art { animation-play-state: paused; }
  [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  [data-reveal][data-shown] { opacity: 1; transform: none; }
  .pin[data-drop]::before { animation: drop 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.35em); } }
@keyframes seal { from { opacity: 0; transform: scale(0.2); } }
@keyframes arrive { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes breathe { 50% { transform: scale(1.006, 1.014); } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(1.6); } }

@media (prefers-reduced-motion: reduce) {
  .caret::after { animation: none; }
  .answer .photo, .viewer[open] { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .viewer-credit, .viewer-close, .viewer-info { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1c1c1e; }
}
@media (prefers-contrast: more) {
  :root { --rule: rgb(var(--map-ink) / 0.4); --ink-soft: var(--ink); }
}
@media print {
  .bar, .stage, .chips, .viewer { display: none; }
}