/* ============================================================
   DESIGN TOKENS V2 — system10h.com
   Sesja R1 / CP1 | 2026-04-18 | Editorial Craft
   DNA: Resend 45% + Raycast 25% + Linear 20% + Arc/Granola 10%
   ============================================================ */

:root {
  /* -----------------------------------------
     PALETTE — warm amber primary, restricted
     ----------------------------------------- */
  --color-bg:              #0A0908;  /* off-black, warm undertone */
  --color-bg-raised:       #131110;  /* cards, elevated surfaces */
  --color-text-primary:    #F7F3EC;  /* cream, paper-like */
  --color-text-secondary:  #A8A29E;  /* stone — metadata, muted */
  --color-text-tertiary:   #847F79;  /* stone-500 — captions, WCAG AA ≥4.5:1 (fix 07.09, było 2.61:1/2.47:1) */
  --color-border:          #1C1917;  /* stone-900 — dividers */
  --color-border-subtle:   #292524;  /* stone-800 — hover states */

  --color-accent:          #D4A574;  /* warm amber — CTA, keywords (fallback hex, patrz @supports niżej) */
  --color-accent-dim:      #A67F53;  /* amber-700 — hover */
  --color-accent-faint:    rgba(212, 165, 116, 0.08); /* amber tint bg */

  --color-signal:          #E85D4F;  /* warm red — RARE, max 1-2 places */
  --color-success:         #7FA074;  /* muted sage — sent/active status */

  /* -----------------------------------------
     TYPOGRAPHY — Fraunces + Inter + Geist Mono
     Variable fonts with opsz/wght/SOFT axes
     ----------------------------------------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Modular scale — Perfect Fourth (1.333) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   19px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;   /* H2 — Fraunces opsz=72 */
  --text-6xl:  96px;
  --text-display: clamp(4rem, 10vw, 9rem);  /* H1 — Fraunces opsz=144 responsive */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.03em;   /* display */
  --tracking-snug:  -0.015em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:  0.05em;    /* caps, chapter markers */

  /* -----------------------------------------
     SPACING — 4/8px base scale
     ----------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* -----------------------------------------
     RADII — 2 tiers only (flat premium)
     ----------------------------------------- */
  --radius-sm: 4px;   /* buttons, inputs, small cards */
  --radius-md: 8px;   /* cards, artifact blocks */

  /* -----------------------------------------
     SHADOWS — 2 tiers, subtle, NO glow
     B3 (DR-1, 09.08): pojedynczy box-shadow czyta się dziś jako szablon — warstwowe cienie
     (bliski + daleki) + włoskowaty inset-highlight na górnej krawędzi (klasyczny efekt
     "podniesionej karty" bez glow). Ta sama ciemna/stonowana paleta, brand-guideline bez zmian.
     ----------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;

  /* -----------------------------------------
     MOTION — cubic-bezier, reduced-motion safe
     ----------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* 150 ms, nie 180. Do 16.09 stało tu 180 ms, a `brand-2026.css` deklarowało
     TĘ SAMĄ zmienną na 150 ms — i ponieważ ładuje się później, na 5 stronach
     z odświeżeniem obowiązywało 150, a na 18 pozostałych 180. Ta sama witryna
     reagowała na dotknięcie w dwóch różnych tempach, zależnie od podstrony.
     150/320 ms to wartość z brandbooka §2 — wygrywa ona, nie kolejność linków. */
  --duration-fast: 150ms;
  --duration-med:  320ms;
  --duration-slow: 520ms;

  /* -----------------------------------------
     LAYOUT
     ----------------------------------------- */
  --container-narrow: 680px;
  --container-med:    960px;
  --container-wide:   1200px;
}

/* B5 (DR-1, 09.08): akcent bursztynowy w oklch()/P3, z zapasem hex nad linią (:root wyżej).
   Wartość = KONWERSJA WIERNA #D4A574 (round-trip OKLCH→hex daje identyczny #D4A574, zmierzone
   node — delta kontrastu WCAG 0.0000, oba użycia nadal 8,9:1 / 8,5:1, daleko nad progiem AA
   4,5:1) — to NIE jest szerszy/bardziej nasycony wariant P3, tylko ta sama barwa w nowoczesnym,
   percepcyjnie jednolitym zapisie. @supports = przeglądarka bez oklch() zostaje przy hex z :root,
   nigdy nie widzi przezroczystości ani niesparsowanej wartości. */
@supports (color: oklch(0% 0 0)) {
  :root {
    --color-accent: oklch(75.41% 0.0853 67.10);
  }
}

/* ============================================================
   GRAIN OVERLAY — subtle paper-noise texture (4% opacity)
   Applied to body::before for editorial craft feel
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ============================================================
   BASE
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* B2 (DR-1, 09.08): Fraunces ma oś optyczną (opsz), nieużywaną do dziś — jedna deklaracja,
     dziedziczona (font-optical-sizing jest odziedziczalną właściwością font-*), więc obejmuje
     WSZYSTKIE użycia Fraunces na stronie, także te w lokalnych <style> per-podstrona. Dla Inter/
     Geist Mono (bez osi opsz) to bezpieczny no-op — przeglądarka po prostu ignoruje. */
  font-optical-sizing: auto;
}

body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  /* B4 (DR-1, 09.08): 'ss01'/'cv11' zamienione na zestaw DR-1 — cv01 (jednopiętrowe 'a'),
     ss03 (alternatywny zestaw), zero (przekreślone zero) — tani sygnał "to nie domyślny Inter". */
  font-feature-settings: 'cv01', 'ss03', 'zero';
  overflow-x: hidden;
}

/* ============================================================
   B1 (DR-1, 09.08): koniec sierot w nagłówkach/akapitach bez ręcznych <br>.
   `balance` liczy się z ≤4 liniami (nagłówki) — degraduje do normal poza tym, bezpieczne.
   `pretty` wspiera ~90% (Chromium/Safari najnowsze) — w reszcie zwykłe łamanie, bez regresu.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.display-h1, .display-h2, .chapter-marker {
  text-wrap: balance;
}
p, .body-lead {
  text-wrap: pretty;
}

/* ============================================================
   TYPOGRAPHY CLASSES
   ============================================================ */

.display-h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.display-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 500;
  font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
}

.chapter-marker {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variation-settings: 'opsz' 24, 'SOFT' 0, 'wght' 600;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.meta-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

.body-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ============================================================
   BUTTONS — flat premium, no glow, no lift
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}

.btn-secondary:hover {
  border-color: var(--color-text-secondary);
  background: var(--color-bg-raised);
}

.link-inline {
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.link-inline:hover {
  border-color: var(--color-accent);
}

/* ============================================================
   ARTIFACT CARDS — monospace draft fragments
   Hero BOLD MOVE component
   ============================================================ */

.artifact-card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--duration-med) var(--ease-out);
}

.artifact-card:hover {
  border-color: var(--color-border-subtle);
}

.artifact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.artifact-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.artifact-body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-primary);
  white-space: pre-wrap;
}

.artifact-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.status-sent {
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.status-sent::before {
  content: '●';
  font-size: 8px;
  line-height: 1;
}

/* ============================================================
   KALIBRACJA 2026 — Editorial Craft 2026 (Ewolucja)
   Synteza 3+1+2: HERO konsola (Angle 3) + BENTO (Angle 1)
   + powściągliwy kinetic / scroll-reveal (Angle 2).
   Tokeny NIE zmienione — TYLKO nowe klasy używające istniejących
   zmiennych. Paleta/radii/shadow/fonty = invarianty brand-guideline.
   ============================================================ */

/* ------------------------------------------------------------
   D5 — SCROLL-REVEAL (fade + slide). Zero CLS: element rezerwuje
   miejsce od startu — animowane wyłącznie opacity + transform.
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
/* sekwencyjny stagger — --seq ustawiany w JS, max ~6 kroków */
[data-reveal][data-seq] { transition-delay: calc(var(--seq, 0) * 80ms); }

/* ------------------------------------------------------------
   D2 — KINETIC TYPOGRAPHY (powściągliwy). Nagłówek „dojeżdża"
   po osi variable-font (lżejszy → docelowy) + lekki slide gdy
   wchodzi w viewport. Zero CLS: rozmiar/box się NIE zmienia
   (animujemy font-variation-settings + transform — compositor-safe).
   ------------------------------------------------------------ */
.kinetic {
  transform: translateY(14px);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              font-variation-settings var(--duration-slow) var(--ease-out);
  will-change: transform, opacity, font-variation-settings;
}
.kinetic.display-h1 { font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 280; }
.kinetic.display-h2 { font-variation-settings: 'opsz' 48, 'SOFT' 30, 'wght' 340; }
.kinetic.is-in { opacity: 1; transform: translateY(0); }
.kinetic.display-h1.is-in { font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 400; }
.kinetic.display-h2.is-in { font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 500; }
.kinetic em, .kinetic.is-in em { font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 500; }

/* chapter-marker: subtelna kreska, która wyrasta przy wejściu */
.chapter-marker.kinetic-marker { display: inline-flex; align-items: center; gap: var(--space-3); }
.chapter-marker.kinetic-marker::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-out);
}
.chapter-marker.kinetic-marker.is-in::before,
[data-reveal].is-in .chapter-marker.kinetic-marker::before { width: 28px; }

/* ------------------------------------------------------------
   D5 — MICRO-MOTION CTA (strzałka „idzie naprzód" na hover).
   Komplementarne do flat-hover-ściemnienia z brand-guideline.
   ------------------------------------------------------------ */
.btn .arrow,
.btn [aria-hidden="true"] { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }
.btn:hover .arrow,
.btn:hover [aria-hidden="true"] { transform: translateX(3px); }

/* ------------------------------------------------------------
   D6 / D3 — AI-NATIVE KONSOLA „agent przy pracy"
   Estetyka command-palette / log. ZERO neonu/glow: rysowana
   borderem subtle + amber-faint tint + mono, na off-black raised.
   ------------------------------------------------------------ */
.console {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.console-titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-accent-faint);
}
.console-dots { display: flex; gap: 6px; }
.console-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-border-subtle);
}
.console-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.console-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-success);
}
.console-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success);
  animation: consolePulse 1.8s var(--ease-in-out) infinite;
}
@keyframes consolePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.console-body {
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.75;
}
.console-log {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  opacity: 0;
  transform: translateY(4px);
  animation: consoleLogIn var(--duration-med) var(--ease-out) forwards;
}
.console-log .ts { color: var(--color-text-tertiary); flex: 0 0 auto; }
.console-log .tag { flex: 0 0 auto; color: var(--color-accent); letter-spacing: 0.04em; }
.console-log .msg { color: var(--color-text-secondary); }
.console-log .msg strong { color: var(--color-text-primary); font-weight: 500; }
.console-log.ok .tag { color: var(--color-success); }
.console-log:nth-child(1) { animation-delay: 0.20s; }
.console-log:nth-child(2) { animation-delay: 0.70s; }
.console-log:nth-child(3) { animation-delay: 1.20s; }
.console-log:nth-child(4) { animation-delay: 2.10s; }
@keyframes consoleLogIn { to { opacity: 1; transform: translateY(0); } }

.console-draft {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-left: 2px solid var(--color-accent);
  background: var(--color-accent-faint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  white-space: pre-line;
}
.console-draft .stream-caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  vertical-align: -2px;
  margin-left: 2px;
  background: var(--color-accent);
  animation: consoleCaret 1s steps(1) infinite;
}
@keyframes consoleCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.console-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------
   D1 — BENTO GRID (asymetryczna siatka: duży feature + wspierające).
   Radii 8px, border subtle, czarny shadow. ZERO glow/pill.
   Karty współdzielą DNA .artifact-card.
   ------------------------------------------------------------ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.bento-item {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--duration-med) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out);
}
.bento-item:hover {
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-md);
}
/* faint amber wash na karcie wiodącej — używa accent-faint, bez glow */
.bento-item.bento-lead {
  background: linear-gradient(180deg, var(--color-accent-faint), transparent 60%), var(--color-bg-raised);
}
/* span helpers (siatka 6-kol) */
.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-span-4 { grid-column: span 4; }
.bento-span-6 { grid-column: span 6; }

@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-span-2, .bento-span-3, .bento-span-4, .bento-span-6 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-span-2, .bento-span-3, .bento-span-4, .bento-span-6 { grid-column: span 1; }
}

/* ------------------------------------------------------------
   HERO SPLIT (Angle 3) — copy + value-prop po lewej, konsola po prawej.
   B-034: copy/CTA/ceny pozostają wiodące — konsola = wsparcie.
   ------------------------------------------------------------ */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-12);
  align-items: start;
}
.hero-split-aside { align-self: start; position: sticky; top: var(--space-8); }
@media (max-width: 920px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero-split-aside { position: static; order: 2; }
}

/* ============================================================
   A11Y — reduced motion (rozszerzone o klasy 2026)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .kinetic { opacity: 1 !important; transform: none !important; }
  .kinetic.display-h1 { font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 400 !important; }
  .kinetic.display-h2 { font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 500 !important; }
  .kinetic em { font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 500 !important; }
  .chapter-marker.kinetic-marker::before { width: 28px !important; }
  .console-log { opacity: 1 !important; transform: none !important; animation: none !important; }
  .console-live .dot { animation: none !important; }
  .console-draft .stream-caret { animation: none !important; opacity: 1 !important; }
  .btn:hover .arrow, .btn:hover [aria-hidden="true"] { transform: none !important; }
}

/* kalibracja 2026 — responsywny pasek cen */
.pricing-grid{grid-template-columns:repeat(4,1fr);}
@media (max-width:640px){.pricing-grid{grid-template-columns:repeat(2,1fr);} .hero-pricing-strip{padding-left:var(--space-4)!important;padding-right:var(--space-4)!important;}}

/* ── Przejścia między stronami (DR 06.09 Ruch 10) ─────────────────────────────
   Źródło u źródła 07.09: MDN `@view-transition` — "Limited availability … does not
   work in some of the most widely-used browsers" oraz "the current and destination
   documents … need to be on the same origin". Cała witryna jest same-origin, a przy
   braku wsparcia at-reguła jest ignorowana i nawigacja działa dokładnie jak dziś
   (zero JS, zero zależności). Poza 7 anty-celami: to nie gradient, nie poświata,
   nie szkło, nie unoszenie na hover. Przy `prefers-reduced-motion` wyłączone —
   warunek z listy weryfikacji TASK1_index_plan. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}