/* ReadyToSay · production „Klocki znaczą” (dawniej production-v9). Pisany od zera, bez klas z wersji w archiwum/.

   Skąd: baner „Klocki” (lawendowy papier, płaskie kształty zachodzą na siebie i wychodzą za kadr)
   + wynik-v4-kolory (tablica z werdyktem, zakreślona fraza, przechylona kartka Ty → Lepiej, ćwiartka koła).

   Idea „Klocki znaczą”: kształty z banera nie są dekoracją, tylko pojemnikami na treść. Każdy kształt ma jedno
   znaczenie na wszystkich ekranach, a ekran powstaje z ich nakładania.

   Słownik kształtów (jeden kształt = jedno znaczenie):
   - Tablica (.board, granat; w ciemnym jaśniejsza od tła): ocena. Świeci na niej ogromny, krzywy znak oceny (.mega).
   - Kartka (.sheet, biała, jedyny twardy cień w kolorze tonu): zdanie z rozmowy.
   - Pigułki (.pill): brzoskwiniowa = Ty, miętowa = Lepiej. Wystają poza kartkę.
   - Słup (.slab, fiolet marki): działanie. Niesie jasny przycisk pigułkę; .pillar wyrasta z dolnej krawędzi ekranu.
   - Koło (morski): kropka, cel osiągnięty. Nigdy przy błędzie.

   Błąd ostrzegawczy (Usuń konto): --danger z tokenów, tylko jako tekst albo przycisk, nigdy kolor znaku.
   Kolor: --tone (fiolet, róż, pomarańcz, morski) ustawia znak oceny albo rozmówcy. Pełne kolory znaków świecą tylko
   na tablicy; na papierze i fiolecie wyłącznie jako kształty (paski, kółka, cień, zakreślenie), nigdy jako tekst.

   Budowa pliku (wspólne najpierw, ekran dopisuje tylko to, co ma własne):
   base    tokeny, reset, typografia (.display, .title, .h1, .sub)
   shapes  komponenty wspólne: .screen .top .icon-btn .back · .slab .pillar · .btn (.brand .ink) .btn-sm .link
           · .tag · .bubble (.light .big .you .card) .typing .dots · .photo .sign-tile .coin .arrow .hdot
           · .field · dialog .drawer · .alert · logo · kształty wyniku · ekrany z zakładkami
   parts   ekrany: wynik, Start, Logowanie, Wybór rozmowy, Rozmowa, Czekanie, Awaria, Paywall, Onboarding, Ścieżki, Ścieżka, Wskazówki, Profil, Postępy (po kolei, każdy z układem desktopu)
   motion  ruch, tylko przy prefers-reduced-motion: no-preference

   Skala (z tokens-snapshot): 13 · 15 · 17 · 19 · 26 · 42 (werdykt, telefon) · 62 (werdykt, desktop) · 64 (ocena) · 200 (znak).
   Ruch: jedno wejście ≤ 1 s (znak wsuwa się i przechyla, kartka kładzie się, zakreślacz pociąga raz). */

@layer base, shapes, parts, motion;

/* ===== baza: tokeny, reset, typografia ===== */
@layer base {
  :root {
    color-scheme: light dark;
    /* paleta artefaktu logo */
    --l0: #9d8cff; --l1: #ff6fd8; --l2: #ff9f45; --l3: #4fe3c1;
    --ink: #14112b; --brand: #4b38b3; --on-board: #f3f1fc; --on-brand: #ffffff;
    --hl-you: #ffb699; --hl-better: #7ff0bd;
    --bg: light-dark(#f1effa, #14112b);
    --text: light-dark(#14112b, #f3f1fc);
    --muted: light-dark(#625d8a, #a9a5cb);
    --line: light-dark(#dcd8ee, #3d3670);
    --board: light-dark(#1a1638, #3d3670);
    --board-dim: light-dark(#a9a5cb, #dcd8ee); /* drugorzędny tekst na tablicy */
    --sheet: light-dark(#ffffff, #f3f1fc);
    --sunk: light-dark(#dcd8ee, #3d3670);
    --field: light-dark(#ffffff, #3d3670);
    --on-brand-dim: #d4ceff;
    --ink-muted: #625d8a;  /* drugorzędny tusz na kartce i jasnych polach, w obu motywach */
    --sheet-line: #dcd8ee; /* linia na kartce, w obu motywach */
    --accent: light-dark(var(--brand), var(--l0)); /* link i aktywny stan na papierze */
    --danger: light-dark(#b3261e, #ffb4ab); --on-danger: light-dark(#ffffff, #14112b); /* nieodwracalne działanie; AA w obu motywach */
    --scrim: color-mix(in oklab, var(--ink) 55%, transparent);

    --r-s: 16px; --r-m: 24px; --r-l: 28px; --r-tail: 7px;
    --bubble: var(--r-m) var(--r-m) var(--r-m) var(--r-tail); /* dymek: ogonek w lewym dolnym rogu */
    --duotone: grayscale(1) contrast(1.15); /* zdjęcie w kolorze tonu: z mix-blend-mode: screen na tle --tone */

    --sans: 'Bricolage Grotesque', system-ui, sans-serif;
    --serif: 'Source Serif 4', Georgia, serif;
    --pad: 16px; --tap: 44px; --col: 480px; --wide: 1180px; --gutter: 40px;
    /* odstępy: skala z tokens.json (6 · 10 · 14 · 22 · 28 · 34); 2 i 4 px to korekty optyczne, nie odstępy */
    --sp-1: 6px; --sp-2: 10px; --sp-3: 14px; --sp-4: 22px; --sp-5: 28px; --sp-6: 34px;
    --narrow: 88%; /* szerokość kroju nagłówków i znaków, jak w logo */
    --on-board-faint: color-mix(in oklab, var(--on-board) 16%, transparent); /* tor i szkielet na tablicy */
    --dim: var(--muted); /* tekst drugorzędny; tablica, słup i kartka ustawiają własny */
    --ease: cubic-bezier(.2, .8, .2, 1);
  }
  [data-os="android"] { --tap: 48px; }
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 17px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  ul, ol { padding: 0; list-style: none; }
  q { quotes: "„" "”"; }
  :focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 7px; }
  .board :focus-visible, .slab :focus-visible { outline-color: var(--on-board); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .i { width: 24px; height: 24px; flex: none; }
  [hidden] { display: none !important; }
  /* <main> jako punkt orientacyjny bez własnego pudełka: dzieci zostają elementami siatki ekranu */
  .result-main, .lg-main { display: contents; }

  /* typografia: nagłówki wąskie i grube jak w logo */
  .display { font-weight: 800; font-stretch: var(--narrow); letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
  .title { font-size: 26px; font-weight: 800; font-stretch: var(--narrow); letter-spacing: -.02em; line-height: 1.1; }
  .h1 { font-size: 42px; }
  .sub { margin-top: var(--sp-2); font-size: 17px; line-height: 1.4; color: var(--dim); max-width: 38ch; }
  .sub b { color: var(--text); }
  @media (min-width: 900px) { .h1 { font-size: 62px; } }
}

/* ===== komponenty wspólne i kształty ===== */
@layer shapes {
  /* ---------- układ: kolumna ekranu, górny pasek, powrót ---------- */
  .screen { min-height: 100dvh; max-width: var(--col); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-direction: column; }
  @media (min-width: 900px) { .screen { max-width: var(--wide); padding: 0 var(--gutter); } }
  .top { display: flex; align-items: center; gap: 4px; min-height: 56px; padding-top: env(safe-area-inset-top); }
  .top p { font-size: 15px; font-weight: 600; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* pierwszy cel dotyku w pasku stoi optycznie na krawędzi treści (ikona 24 px w polu 44 px) */
  :is(.top, .cv-bar) > :is(.icon-btn, .back):first-child { margin-left: -10px; }
  .icon-btn { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%;
    background: none; color: inherit; text-decoration: none; cursor: pointer; }
  .back { display: inline-flex; align-items: center; gap: 2px; min-width: var(--tap); min-height: var(--tap); padding: 0 var(--sp-3) 0 4px; border-radius: 999px;
    font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  .back:not(:has(span)) { justify-content: center; padding: 0; } /* Android: sama strzałka */

  /* ---------- słup: działanie (fiolet marki) ---------- */
  .slab { --dim: var(--on-brand-dim); display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-l); background: var(--brand); color: var(--on-brand); }
  .slab b { color: var(--on-brand); }
  .slab .next, .slab .hint { font-size: 15px; line-height: 1.4; color: var(--dim); }
  .slab .hint { text-align: center; }
  /* słup na dole ekranu: wyrasta z krawędzi, zostaje przy przewijaniu */
  .pillar { position: sticky; bottom: 0; z-index: 3; margin: 40px calc(-1 * var(--pad)) 0; padding: 18px var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
    border-radius: var(--r-l) var(--r-l) 0 0; }
  .main > .pillar:only-child { margin-top: auto; } /* stany bez treści: słup zostaje na dole */
  @media (min-width: 900px) { .pillar { position: relative; bottom: auto; margin: 40px 0; border-radius: var(--r-l); } }

  /* ---------- przyciski ---------- */
  /* .btn: jasna pigułka na słupie; .brand: fiolet na papierze; .ink: tusz na fiolecie */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 56px; padding: 0 var(--sp-4); border: 0; border-radius: 999px;
    background: var(--on-board); color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: translate .2s var(--ease), scale .12s; }
  .btn > span { white-space: nowrap; }
  .btn.brand { background: var(--brand); color: var(--on-brand); }
  .btn.ink { background: var(--ink); color: var(--on-board); }
  .btn.danger { background: var(--danger); color: var(--on-danger); }
  .btn.soft { background: var(--sunk); color: var(--text); } /* bezpieczne wyjście w arkuszu */
  @media (hover: hover) { .btn:hover { translate: 0 -2px; } }
  .btn:active { scale: .98; }
  /* zajęty: kropki zamiast napisu */
  .btn .dots { display: none; }
  .btn[aria-busy="true"] .dots { display: inline-flex; }
  .btn[aria-busy="true"] :is(.label, .tag) { display: none; }
  .btn[aria-busy="true"] { cursor: progress; }
  /* mały przycisk na papierze: seria, filtr, „Zakończ rozmowę” */
  .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: var(--tap); padding: 0 var(--sp-3); border: 0; border-radius: 999px;
    background: var(--sunk); color: var(--text); font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .btn-sm[aria-pressed="true"] { background: var(--text); color: var(--bg); }
  /* drugie działanie na słupie: link, nie obrys */
  .link { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0; border: 0; background: none;
    color: var(--dim); font: 400 15px var(--sans); text-decoration: none; cursor: pointer; }
  .link b { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .txt-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 15px; font-weight: 700; color: var(--accent); text-underline-offset: 3px; }

  /* ---------- tag: mała pigułka (za darmo, cena, miejsce, nastrój, stempel) ---------- */
  .tag { display: inline-block; padding: 4px var(--sp-2); border-radius: 999px; background: var(--hl-better); color: var(--ink);
    font: 700 13px/1.45 var(--sans); white-space: nowrap; }
  .tag.sm { padding-block: 2px; }
  .price { background: var(--ink); color: var(--on-board); font-size: 15px; }

  /* ---------- dymek: zdanie z rozmowy ---------- */
  /* rozmówca: szary na papierze (.light: jasny na fiolecie i tablicy); ty: biały (.you); wybrany = kartka (.card) */
  .bubble { width: fit-content; max-width: 100%; padding: var(--sp-3) var(--sp-3); border-radius: var(--bubble); background: var(--sunk); color: var(--text);
    font: 400 17px/1.4 var(--serif); overflow-wrap: anywhere; }
  .bubble.light { background: var(--on-board); color: var(--ink); }
  .bubble.big { font-size: 19px; line-height: 1.35; }
  .bubble.you { border-radius: var(--r-m) var(--r-m) var(--r-tail) var(--r-m); background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px light-dark(var(--line), transparent); }
  .bubble.card, .pk-opt:is(.on, .mine) .pk-line { background: var(--sheet); color: var(--ink); rotate: -1.5deg; box-shadow: 6px 7px 0 var(--tone); }
  .bubble .who { display: block; font: 700 13px var(--sans); color: var(--dim); }
  .bubble.you .who { color: var(--ink-muted); }
  /* „pisze…”: trzy kropki w tonie rozmówcy; bez ruchu napis */
  .typing { display: inline-flex; align-items: center; min-height: 46px; padding-block: 0; }
  .typing .dots { color: var(--tone); }
  .typing .t { display: none; font: 600 15px var(--sans); color: var(--dim); }
  @media (prefers-reduced-motion: reduce) { .typing .dots { display: none; } .typing .t { display: inline; } }
  .dots { display: inline-flex; gap: var(--sp-1); }
  .dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

  /* ---------- obrazy i znaki ---------- */
  /* zdjęcie w duotonie tonu rozmówcy, lekko krzywe (--tilt) */
  .photo { position: relative; display: block; overflow: hidden; border-radius: var(--r-m); background: var(--tone); rotate: var(--tilt, 0deg); }
  .photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: var(--duotone); mix-blend-mode: screen; }
  /* klocek-tablica ze znakiem tonu: znak cały i wyśrodkowany, lekko krzywy; rozmiar przez zmienne */
  .sign-tile { --w: 68px; --h: 76px; --r: 20px; --fs: 48px; --dot: 20px;
    position: absolute; z-index: 2; top: -40px; right: -10px; display: grid; place-items: center; width: var(--w); height: var(--h); border-radius: var(--r);
    background: var(--board); rotate: -7deg; }
  .sign-tile > b { font: 800 var(--fs)/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.04em; color: var(--tone); rotate: 8deg; padding-bottom: .04em; }
  .sign-tile > b.dotg { width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--tone); padding: 0; }
  .sign-tile.mini { --w: 34px; --h: 34px; --r: 10px; --fs: 22px; --dot: 10px; top: auto; bottom: 6px; right: 6px; }
  /* moneta: okrągły klocek z cyfrą albo inicjałem, w tonie, lekko krzywy */
  .coin { display: grid; place-items: center; flex: none; width: var(--s, 32px); height: var(--s, 32px); border-radius: 50%; background: var(--coin, var(--tone));
    color: var(--ink); font-size: 15px; font-style: normal; font-weight: 800; rotate: -6deg; }
  .ava { --s: 40px; font-size: 17px; }
  .ava.you { --coin: var(--hl-you); font-size: 15px; }
  /* kółko ze strzałką w tuszu */
  .arrow { display: grid; place-items: center; flex: none; width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; background: var(--ink); color: var(--on-board); }
  .arrow .i { width: 20px; height: 20px; }
  /* kropka na końcu nagłówka: kolor etapu, tonu albo celu */
  .hdot { display: inline-block; width: .19em; height: .19em; margin-left: .06em; border-radius: 50%; background: var(--etap, var(--brand)); transition: background .25s; }
  .hdot.tone { background: var(--tone); }
  .hdot.done { background: var(--l3); }
  .nw { white-space: nowrap; }

  /* ---------- pole tekstowe ---------- */
  .field { display: block; width: 100%; min-height: 52px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-s); background: var(--field); color: var(--text);
    font: 400 17px/1.4 var(--sans); }
  .field:focus-visible { outline-color: var(--accent); outline-offset: 2px; }
  .slab .field { background: var(--on-board); color: var(--ink); }
  .slab .field::placeholder { color: var(--ink-muted); }
  .slab .field:focus-visible { outline-color: var(--on-board); outline-offset: 3px; }
  [data-os="android"] .field { min-height: 56px; }

  /* ---------- okna: arkusz od dołu (.drawer) i okno na środku ---------- */
  dialog { padding: var(--sp-4); border: 0; background: light-dark(var(--bg), color-mix(in oklab, var(--bg) 78%, var(--board))); color: var(--text); } /* w ciemnym okno jest o ton jaśniejsze od przyciemnionej strony, inaczej nie ma krawędzi */
  dialog::backdrop { background: var(--scrim); }
  .drawer { margin: auto auto 0; width: 100%; max-width: var(--col); max-height: 92dvh; overflow: auto; padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
    border-radius: var(--r-l) var(--r-l) 0 0; }

  /* ---------- komunikat (błąd, brak sieci): tusz na papierze, ikona; bez koloru znaku ---------- */
  .alert { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-3); }
  .alert b { display: block; color: inherit; } /* także na fioletowym słupie (dock czatu) */

  /* ---------- logo: na jasnym słowa tuszem, drogę niesie grubość, kropka w fiolecie; na ciemnym kolory znaków, wszystko 800 ---------- */
  .logo { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
  .wm { display: inline-flex; align-items: baseline; font-size: 22px; font-weight: 800; font-stretch: var(--narrow); letter-spacing: -.045em; line-height: 1; }
  .wm .w1 { font-weight: 300; color: light-dark(var(--ink), var(--l0)); }
  .wm .w2 { font-weight: 500; color: light-dark(var(--ink), var(--l1)); }
  .wm .w3 { color: light-dark(var(--ink), var(--l2)); }
  .wm i { flex: none; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: light-dark(var(--brand), var(--l3)); }
  [data-scheme="dark"] .wm :is(.w1, .w2) { font-weight: 800; }
  /* logo zwinięte „RDY.”: zawsze w kolorach znaków (stoi na tablicy) */
  .rdy { display: inline-flex; align-items: baseline; font: 800 26px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.06em; }
  .rdy b:nth-child(1) { color: var(--l0); } .rdy b:nth-child(2) { color: var(--l1); } .rdy b:nth-child(3) { color: var(--l2); }
  .rdy i { width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--l3); }

  /* ---------- tablica: ocena; znak przycięty krawędzią opływa tekst (float), więc dłuższe języki się nie zderzają ---------- */
  .board { --dim: var(--board-dim); --tone: var(--l0); position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-l); background: var(--board); color: var(--on-board); padding: var(--sp-4) var(--sp-4) 58px; }
  .mega { float: right; position: relative; z-index: -1; shape-outside: margin-box;
    font: 800 200px/.74 var(--sans); font-stretch: var(--narrow); letter-spacing: -.06em; color: var(--tone);
    margin: -30px -8px 0 var(--sp-2); rotate: 9deg; user-select: none; }
  .mega.is-dot { width: 190px; height: 190px; border-radius: 50%; background: var(--tone); margin: -96px -96px 0 0; rotate: none; }
  .verdict { font-size: 42px; }
  .lead { margin-top: var(--sp-3); font-size: 19px; line-height: 1.35; max-width: 32ch; }
  .score { clear: both; padding-top: var(--sp-4); }
  .score p { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
  .num { font: 800 64px/.9 var(--sans); font-stretch: var(--narrow); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .num small { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--dim); margin-left: 2px; }
  .band { font-size: 17px; font-weight: 700; }

  /* pasek oceny: cztery odcinki znaków w stałej kolejności, szerokości = przedziały 0–49, 50–69, 70–84, 85–100 */
  .scale { --seg-h: 10px; position: relative; margin-top: var(--sp-3); padding-top: var(--sp-5); }
  .scale span { flex: var(--w) 0 0; position: relative; background: var(--c); opacity: .32; }
  .scale span.on { opacity: 1; }
  .scale b { position: absolute; left: 0; bottom: 14px; font: 800 19px/1 var(--sans); color: var(--c); rotate: -6deg; }
  .scale b.dotsign { width: 8px; height: 8px; border-radius: 50%; background: var(--c); bottom: 16px; left: 2px; }
  .scale .mark { position: absolute; left: var(--v); bottom: -6px; width: 6px; height: 22px; margin-left: -3px; border-radius: 999px;
    background: var(--on-board); box-shadow: 0 0 0 3px var(--board); }

  /* ---------- kartka: zdanie; jedyny kształt z cieniem, cień w kolorze tonu ---------- */
  .sheet { --dim: var(--ink-muted); position: relative; z-index: 2; margin: -34px var(--sp-1) 0 var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); border-radius: var(--r-m); background: var(--sheet); color: var(--ink); rotate: -1.5deg; box-shadow: 8px 9px 0 var(--tone); }
  .sheet h2 { font-size: 13px; font-weight: 700; color: var(--dim); }
  .sheet h3 { margin-top: 2px; font-size: 19px; font-weight: 700; line-height: 1.25; }
  .sheet :is(.when, .why, .heard) { margin-top: 2px; font-size: 15px; color: var(--dim); }
  .sheet .why { margin-top: var(--sp-3); }
  .sheet .heard { margin-top: var(--sp-3); }
  .sheet .heard q { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
  /* pigułki Ty / Lepiej wystają poza kartkę */
  .say { display: grid; grid-template-columns: 66px 1fr; gap: var(--sp-2); align-items: start; margin: var(--sp-3) 0 0 -46px; }
  .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 var(--sp-3); border-radius: 999px;
    font-size: 15px; font-weight: 700; color: var(--ink); background: var(--hl-you); rotate: -5deg; justify-self: start; }
  .say.better .pill { background: var(--hl-better); rotate: 4deg; }
  .say q { font-family: var(--serif); }
  .say.you q { font-size: 17px; line-height: 1.5; color: var(--dim); }
  .say.better q, .said-q q { font-size: 26px; line-height: 1.22; font-weight: 600; letter-spacing: -.01em; }

  /* zakreślacz: pełna wysokość liter, ciemny tusz; kolor z --hl */
  .hl { color: var(--ink); background: linear-gradient(var(--hl), var(--hl)) 0 0 / 100% 100% no-repeat; padding: 0 .1em; margin: 0 -.04em;
    border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .board .hl, .pk-eff .hl { --hl: var(--tone); }
  .say.you .hl { --hl: var(--hl-you); }
  :is(.say.better, .said-q, .cv-tip) .hl { --hl: var(--hl-better); }
  /* zakreślacz na kluczowej frazie Startu: kolor twojego etapu (--etap), tusz pogrubiony */
  .hl.pen { --hl: var(--etap, var(--l0)); font-weight: 700; padding: .02em .18em; margin: 0 -.06em; }

  /* ---------- ekrany z zakładkami (Start, Ścieżki) ---------- */
  .tabbed { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .appbar { justify-content: space-between; gap: var(--sp-3); }
  .appbar .end { display: flex; align-items: center; gap: var(--sp-2); }
  .me { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; }
  .tabs { --glass: light-dark(var(--field), color-mix(in oklab, var(--board) 72%, var(--text))); /* tło paska: białe na papierze, w ciemnym jaśniejsze od kart */
    position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line); }
  .tabs ul { display: flex; max-width: var(--col); margin: 0 auto; }
  .tabs li { flex: 1; }
  .tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--dim); text-decoration: none; }
  .tabs a[aria-current] { color: var(--text); font-weight: 700; }
  .tabs .ti { display: grid; place-items: center; width: 56px; height: 28px; border-radius: 999px; }
  [data-os="android"] .tabs a { min-height: 64px; }
  [data-os="android"] .tabs .ti { height: 32px; }
  [data-os="android"] .tabs a[aria-current] .ti { background: var(--sunk); }
  [data-os="ios"] .tabs a[aria-current] { color: var(--accent); }
  /* iOS 26 i WWW na telefonie: pływająca kapsuła nad treścią (Liquid Glass), aktywna zakładka w pigułce; Android zostaje paskiem Material 3 */
  @media (max-width: 899.98px) {
    :is([data-os="ios"], [data-os="web"]) .tabs { left: 50%; right: auto; bottom: calc(10px + env(safe-area-inset-bottom)); translate: -50% 0;
      width: min(100% - 2 * var(--pad), 320px); padding: 4px; border: 0; border-radius: 999px;
      background: color-mix(in oklab, var(--glass) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
    :is([data-os="ios"], [data-os="web"]) .tabs a { justify-content: center; min-height: 54px; padding: 0; border-radius: 999px; font-size: 13px; }
    :is([data-os="ios"], [data-os="web"]) .tabs .ti { height: 26px; }
    :is([data-os="ios"], [data-os="web"]) .tabs a[aria-current] { background: color-mix(in oklab, var(--text) 11%, transparent); color: var(--accent); }
  }
  /* Android: pasek Material 3 bez kreski, na własnym tle, 64 dp; w ciemnym pigułka w fiolecie marki */
  @media (max-width: 899.98px) {
    [data-os="android"] .tabs { padding: 0 var(--sp-2) env(safe-area-inset-bottom); border-top: 0; background: var(--glass); }
    [data-os="android"] .tabs a { justify-content: flex-start; gap: 4px; padding-top: 6px; }
    [data-os="android"] .tabs a[aria-current] .ti { background: light-dark(var(--sunk), var(--brand)); color: light-dark(var(--text), var(--on-brand)); }
  }
  @media (max-width: 899.98px) and (prefers-reduced-transparency: reduce) {
    :is([data-os="ios"], [data-os="web"]) .tabs { background: var(--glass); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  /* seria dni: kropka marki pełna, gdy dziś była rozmowa, pusta, gdy jeszcze nie */
  .streak { font-size: 17px; font-weight: 800; }
  .streak i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
  .streak.todo i { background: none; box-shadow: inset 0 0 0 2px var(--accent); }
  .streak small { font-size: 13px; font-weight: 600; color: var(--dim); }
  /* arkusz serii: tydzień jako 7 klocków */
  .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
  .drawer h2 { font-size: 26px; }
  .drawer h2 b { display: block; font-size: 64px; letter-spacing: -.04em; }
  .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); margin-top: var(--sp-4); }
  .week li { display: grid; justify-items: center; gap: var(--sp-1); font-size: 13px; font-weight: 600; color: var(--dim); }
  .week i { width: 100%; height: 44px; border-radius: var(--r-s); background: var(--sunk); }
  .week li.on i { background: var(--brand); }
  .week li.today { color: var(--text); font-weight: 800; }
  .week li.today:not(.on) i { background: none; box-shadow: inset 0 0 0 2px var(--brand); }
  .drawer-best { margin-top: var(--sp-3); font-size: 15px; color: var(--dim); }
  .drawer-best b { color: var(--text); }
  .drawer > .btn { margin-top: 18px; width: 100%; }
  @media (min-width: 900px) {
    .tabbed { display: block; padding-bottom: 64px; }
    .appbar { min-height: 76px; }
    .tabs { position: static; padding: 0; border: 0; background: none; }
    .tabbed .appbar .tabs { margin-right: auto; margin-left: var(--sp-6); }
    .tabs ul { gap: 4px; }
    .tabs a { flex-direction: row; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-3) 0 var(--sp-1); border-radius: 999px; font-size: 15px; }
    .tabs .ti { width: 28px; }
    .tabs a[aria-current] { background: var(--sunk); color: var(--text); }
  }

  /* nagłówek z powrotem (tabs(cur, back)): telefon „‹ Nazwa” zamiast logo; komputer: logo i zakładki, bez powrotu (zakładka prowadzi tam samo) */
  .appbar.has-back .logo { display: none; }
  @media (min-width: 900px) { .appbar.has-back .logo { display: inline-flex; } .appbar.has-back > .back { display: none; } }
  /* klocek ze znakiem w wierszu (wynik rozmowy), nie na rogu zdjęcia */
  .sign-tile.flat { --w: 40px; --h: 40px; --r: 12px; --fs: 22px; --dot: 12px; position: relative; top: auto; right: auto; z-index: auto; rotate: -6deg; }

  /* ładowanie */
}

/* ===== ekrany: wynik, Start, Logowanie, Wybór rozmowy, Rozmowa, Czekanie ===== */
@layer parts {
  /* ---------- rodziny: jedna reguła dla elementów, które na różnych ekranach są tym samym ----------
     :where() = zerowa specyficzność, więc reguła ekranu (kolor, rozmiar, położenie) zawsze ją nadpisuje. */
  /* kolumna treści pod paskiem górnym */
  :where(.main, .pk-main, .pw-main, .ob-main) { flex: 1; display: flex; flex-direction: column; }
  /* szare pudełko na papierze: komunikat, strony rozmowy, ostatnie powtórzenie */
  :where(.alert, .cv-party, .cv-last) { padding: var(--sp-3) var(--sp-3); border-radius: var(--r-s); background: var(--sunk); font-size: 15px; }
  .slab .alert { margin: 0; background: var(--on-board); color: var(--ink); } /* komunikat na słupie: jasna kartka */
  /* pasek z odcinkami (wysokość --seg-h): ocena, akty, części ścieżki, postęp rozmowy */
  :where(.seg, .scale, .acts-bar, .parts5 p, .bars15, .cv-prog ol, .pw-bars, .ph-line, .ph-seg, .tip-prog) { display: flex; gap: 4px; }
  :where(.seg, .scale, .acts-bar, .parts5 p, .bars15, .cv-prog ol, .pw-bars, .ph-line, .ph-seg, .tip-prog) > :where(i, span, li) { flex: 1; height: var(--seg-h, 8px); border-radius: 999px; background: var(--sunk); }
  /* skala oceny: odcinki w kolorze znaku i szerokości przedziałów 0–49, 50–69, 70–84, 85–100 (reguła wyżej daje wszystkim paskom flex: 1 i --sunk) */
  .scale > span { flex: var(--w) 0 0; background: var(--c); }
  /* licznik z wypełnieniem (--v) */
  :where(.track, .cat-bar) { height: var(--seg-h, 8px); border-radius: 999px; background: var(--sunk); overflow: hidden; }
  :where(.track, .cat-bar) > i { display: block; width: var(--v); height: 100%; border-radius: inherit; background: var(--c); }
  /* szkielet ładowania (na tablicy jaśniejszy) */
  :where(.sk, .skel i) { display: block; border-radius: var(--r-s); background: var(--sunk); }
  /* tag z twarzą: „Zadziałało”, „Cel osiągnięty” */
  :where(.said-tag, .goal-tag) { display: inline-flex; align-items: center; gap: var(--sp-1); width: fit-content; padding: 2px var(--sp-3) 2px 2px; border-radius: 999px;
    background: var(--hl-better); color: var(--ink); font-size: 15px; font-weight: 800; rotate: -2deg; }
  :where(.said-tag, .goal-tag) img { width: var(--face, 28px); height: var(--face, 28px); border-radius: 50%; }
  /* szary klocek: grupa na paywallu i w Ścieżkach, część ścieżki, odpowiedź we Wskazówkach */
  :where(.pw-tog, .cat-gh, .ph-part > summary, .tip-opt) { display: grid; gap: var(--sp-3); align-items: center; min-height: 76px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-m);
    background: var(--sunk); color: var(--text); list-style: none; cursor: pointer; }
  :where(.cat-gh, .ph-part > summary)::-webkit-details-marker { display: none; }
  /* lista z paskiem w kolorze grupy (--g) */
  :where(.pw-paths, .cat-rows, .ph-in) { margin: var(--sp-2) 0 var(--sp-1) var(--sp-4); padding-left: var(--sp-3); border-left: 6px solid var(--g); }
  :where(.pw-paths, .cat-rows) { display: grid; }
  /* wiersz rozmowy albo ścieżki: miniatura, tekst, ikona */
  :where(.cat-rows a, .ph-talk) { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 72px; padding: var(--sp-2) 0; text-decoration: none; }
  :where(.cat-rows a, .ph-talk) > .i { width: 20px; height: 20px; color: var(--dim); }
  :where(.cat-th, .ph-th) { width: 52px; height: 52px; border-radius: 14px; }
  :where(.cat-rows b, .ph-tt b) { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  /* ogromny znak w rogu tablicy (logowanie, czekanie, onboarding); położenie i rozmiar ustawia ekran */
  :where(.lg-clip, .ck-board, .ob-road) .mega { position: absolute; float: none; margin: 0; }
  /* klocek kroku (czekanie, onboarding): zrobiony i bieżący w kolorze znaku (--c), bieżący przechylony */
  :where(.ck-tile, .ob-tile) { display: grid; place-items: center; rotate: -3deg; font: 800 26px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.04em; }
  :is(.ck-road, .ob-steps) li:nth-child(even) :is(.ck-tile, .ob-tile) { rotate: 3deg; }
  :is(.ck-road, .ob-steps) :is(.done, .now) :is(.ck-tile, .ob-tile) { background: var(--c); color: var(--ink); }
  :is(.ck-road, .ob-steps) .now :is(.ck-tile, .ob-tile) { scale: 1.12; rotate: -7deg; }
  /* arkusz z formularzem: logowanie, konto */
  :where(.login, .acct) { padding-top: var(--sp-2); overflow-x: hidden; }
  :where(.login, .acct):focus { outline: none; }
  :where(.login h1, .acct h2) { font-size: 31px; padding-top: var(--sp-1); }
  :where(.login, .acct) .close { margin-right: -10px; }
  @media (min-width: 900px) {
    :where(.pk, .pw, .ob) > .top { min-height: 72px; }
    :where(.pw, .ob) > .top { grid-column: 1 / -1; }
  }

  /* ---------- Wynik ---------- */
  .result .pillar .of { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: center; }
  .result .pillar .of b { font: 800 26px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.02em; white-space: nowrap; }
  .result .pillar .of span { font-size: 15px; line-height: 1.3; color: var(--dim); }
  .intro { margin-top: 40px; max-width: 40ch; }
  .sec { margin-top: var(--sp-6); }
  .sec > h2 { font-size: 19px; font-weight: 700; margin-bottom: var(--sp-3); }
  .wins { display: grid; gap: var(--sp-3); }
  .wins li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); }
  .tick { --s: 28px; --coin: var(--l3); rotate: none; }
  .tick .i { width: 16px; height: 16px; }
  .wins q { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; }
  .wins div > span { display: block; font-size: 15px; color: var(--dim); }
  /* zwijane: kolejne momenty, oceny szczegółowe, przebieg */
  .more { border-top: 1px solid var(--line); }
  .sec + .more, .intro + .more { margin-top: var(--sp-5); }
  .more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 60px; cursor: pointer; font-size: 17px; font-weight: 700; }
  .more summary::-webkit-details-marker { display: none; }
  .more summary small { display: block; font-size: 15px; font-weight: 400; color: var(--dim); }
  .more summary .i { transition: rotate .2s var(--ease); }
  .more[open] > summary .i { rotate: 180deg; }
  .more .in { padding: 4px 0 var(--sp-4); }
  .more .sheet { margin: var(--sp-2) var(--sp-1) var(--sp-3) var(--sp-3); rotate: 1deg; }
  .meters { display: grid; gap: var(--sp-3); }
  .meter { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); font-size: 15px; }
  .meter b { font-variant-numeric: tabular-nums; }
  .track { grid-column: 1 / -1; }
  .meters-note { margin-top: var(--sp-3); font-size: 15px; color: var(--dim); }
  .talk { display: grid; gap: var(--sp-2); }
  .talk .bubble { max-width: 86%; }
  .talk .you { justify-self: end; }
  .st { margin-top: var(--sp-2); background: var(--c); }
  /* stany bez oceny: tablica neutralna, bez znaku i bez kropki */
  .problem .i { width: 40px; height: 40px; margin-bottom: var(--sp-3); color: var(--dim); }
  .skel { display: grid; gap: var(--sp-2); margin-top: 18px; }
  .skel i { height: 14px; border-radius: 999px; background: var(--on-board-faint); }
  .skel i:nth-child(2) { width: 70%; } .skel i:nth-child(3) { width: 84%; } .skel i:nth-child(4) { width: 52%; }
  .main > .skel { margin-top: var(--sp-6); }
  .main > .skel i { background: var(--sunk); height: 18px; }
  /* desktop: tablica jako lewa kolumna, kartka zachodzi na jej krawędź */
  @media (min-width: 900px) {
    .result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-areas: "top top" "board main"; column-gap: 0; align-items: start; }
    .result > .top { grid-area: top; }
    .result .board { grid-area: board; position: sticky; top: 16px; min-height: calc(100dvh - 88px); display: flex; flex-direction: column;
      padding: 40px 120px 56px 44px; }
    .result .board > .mega { position: absolute; top: 0; right: 0; float: none; margin: 0; font-size: 200px; scale: 2.1; transform-origin: 100% 0; translate: 8% -12%; }
    .result .board > .mega.is-dot { scale: 1.9; translate: 40% -40%; }
    .result .board-body { margin-top: auto; }
    .result .verdict { font-size: 62px; max-width: 9ch; }
    .result .lead { font-size: 22px; }
    .result .main { grid-area: main; padding: 40px 0 0 48px; }
    .result .main > .sheet:first-child { margin: 40px 0 0 -144px; }
  }

  /* ---------- Start ----------
     Karta następnej rozmowy = słup: okno ze zdjęciem, klocek-tablica ze znakiem tonu na jego rogu, dymek rozmówcy.
     Kartka = zdanie, które zadziałało. Tablica drogi = pierścień ze znakiem etapu, 5 grup po 3 rozmowy w kolorach znaków. */
  .hello { margin-top: 18px; }
  .scene { position: relative; display: block; margin-top: 68px; padding: 0 var(--sp-4) var(--sp-4); }
  .scene-media { position: relative; }
  .scene-body { padding-top: var(--sp-4); }
  .window { margin: -34px -6px 0 18px; aspect-ratio: 16 / 10; --tilt: 2deg; }
  /* tagi miejsca na dole zdjęcia, z dala od klocka ze znakiem */
  .chips { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: var(--sp-1); max-width: calc(100% - 24px); }
  .chips .tag { background: var(--on-board); rotate: -2deg; }
  .chips .tag:nth-child(2) { rotate: 2deg; }
  .scene .kick { display: flex; align-items: center; gap: var(--sp-1); font-size: 15px; font-weight: 600; color: var(--dim); }
  .scene .title { margin-top: 4px; font-size: 31px; }
  .scene .who { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); font-size: 15px; color: var(--dim); }
  .scene .who b { display: block; }
  .scene .ava { --s: 36px; }
  .mood { font-weight: 700; color: var(--on-brand); }
  /* „pisze…”, potem dymek rozmówcy (oba w tym samym miejscu) */
  .msg { display: grid; margin-top: var(--sp-3); }
  .msg > * { grid-area: 1 / 1; align-self: start; }
  .scene .typing { display: none; justify-self: start; }
  /* przycisk: jasna pigułka ze strzałką */
  .go-talk { display: flex; justify-content: flex-start; gap: var(--sp-2); margin-top: 18px; padding: 0 var(--sp-2) 0 var(--sp-4); }
  .go-talk .arrow { margin-left: auto; }
  .go-talk .arrow .i { transition: translate .2s var(--ease); }
  @media (hover: hover) { .go-talk:hover .arrow .i { translate: 3px 0; } }
  .scene .time { margin-top: var(--sp-2); font-size: 13px; color: var(--dim); text-align: center; }

  /* tablica drogi: 15 klocków w 5 grupach */
  .road { margin-top: 44px; padding-bottom: var(--sp-4); }
  .road-top { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-3); align-items: center; }
  .ring { position: relative; width: 80px; height: 80px; display: grid; place-items: center; }
  .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; } /* kreska wychodzi poza viewBox 36: bez tego okrąg jest ścięty */
  .ring circle { fill: none; stroke-width: 5.5; }
  .ring .bg { stroke: var(--on-board-faint); }
  .ring .fg { stroke: var(--rc); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
  .ring b { font: 800 36px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.04em; color: var(--rc); rotate: -6deg; }
  .ring b.dotg { width: 16px; height: 16px; border-radius: 50%; background: var(--rc); }
  .road h2 { font-size: 19px; font-weight: 800; line-height: 1.2; }
  .road .pname { margin-top: 2px; font-size: 15px; font-weight: 600; }
  .road .pname span { display: block; font-weight: 400; color: var(--dim); }
  /* pięć grup po trzy rozmowy; numer i kreski w kolorze znaku grupy */
  .parts5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }
  .parts5 > div { display: grid; gap: var(--sp-2); }
  .parts5 b { font-size: 19px; font-weight: 800; font-stretch: var(--narrow); line-height: 1; color: var(--g); rotate: -6deg; justify-self: start; }
  .parts5 p { --seg-h: 10px; }
  .parts5 i { background: color-mix(in oklab, var(--g) 32%, transparent); }
  .parts5 i.done { background: var(--g); }
  .next-up { margin-top: var(--sp-4); display: grid; }
  .next-up .lb { font-size: 13px; font-weight: 700; color: var(--dim); padding-bottom: 4px; }
  .next-up li:not(.lb) { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--sp-3); align-items: center; min-height: 48px; font-size: 15px; }
  .next-up .coin { --coin: var(--g); }
  .next-up li:not(.now) .coin { --coin: color-mix(in oklab, var(--g) 32%, transparent); color: var(--on-board); }
  .next-up li.now span { font-weight: 700; }
  .next-up .i { width: 18px; height: 18px; color: var(--dim); }

  /* kartka „Zadziałało”: nagłówek, zdanie, dlaczego, reakcja, link */
  .sheet.said { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-1); }
  .said-head { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 600; color: var(--dim); }
  .said-head > span:last-child { margin-left: auto; text-align: right; }
  .said-q q { font-family: var(--serif); color: var(--ink); }
  .sheet.said .why { margin-top: 0; }
  .said-heard { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-2); align-items: start; padding-top: var(--sp-3); border-top: 1px dashed var(--sheet-line); }
  .said-heard img { width: 32px; height: 32px; border-radius: 50%; }
  .said-heard p { font-size: 13px; font-weight: 600; color: var(--dim); }
  .said-heard q { display: block; margin-top: 2px; font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.4; color: var(--ink); }
  .said-more { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-top: 1px solid var(--sheet-line);
    font-size: 15px; font-weight: 700; color: var(--brand); text-decoration: none; }
  .said-more .i { width: 20px; height: 20px; }
  /* kartka kładzie się na dolnej krawędzi karty rozmowy */
  .scene + .start-grid > .col:first-child > .sheet:first-child { margin-top: -18px; rotate: 1.5deg; }

  /* oferta i „dodaj ścieżkę”: słupy w kolumnie, cena na przycisku */
  .offer-slab { margin-top: var(--sp-4); }
  .add-path { position: relative; margin-top: var(--sp-3); }
  :is(.offer-slab, .add-path) .btn { margin-top: var(--sp-1); }
  .assure { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); }
  .assure .i { width: 18px; height: 18px; color: var(--hl-better); }
  .scene .assure { justify-content: flex-start; } /* Start, darmowe wykorzystane: pod przyciskiem zakupu w słupie */
  .add-groups { display: grid; gap: var(--sp-2); margin-top: 4px; }
  .add-groups a { display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-3) 0 18px; border-radius: 999px;
    background: var(--on-board); color: var(--ink); text-decoration: none; transition: translate .2s var(--ease); }
  .add-groups b { font-size: 17px; color: var(--ink); }
  .add-groups small { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
  .add-groups .i { width: 20px; height: 20px; }
  .add-groups li:nth-child(odd) a { rotate: -1deg; } .add-groups li:nth-child(even) a { rotate: .8deg; }
  @media (hover: hover) { .add-groups a:hover { translate: 4px 0; } }

  /* ścieżki: wiersze z okładką (zdjęcie w duotonie tonu z klockiem ze znakiem), bez kart */
  .paths-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: 40px; }
  .paths-h h2 { font-size: 19px; font-weight: 700; }
  .paths-h a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 15px; font-weight: 700; color: var(--text); }
  .paths-sub { font-size: 15px; color: var(--dim); }
  .groups { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
  .rows { margin-top: var(--sp-2); display: grid; }
  .rows a { display: grid; grid-template-columns: 76px 1fr 24px; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; text-decoration: none; }
  .rows b { display: block; font-size: 17px; line-height: 1.25; }
  .rows small { display: block; margin-top: 2px; font-size: 15px; color: var(--dim); }
  .rows .i { margin-top: var(--sp-5); color: var(--dim); }
  .cover { width: 76px; height: 76px; border-radius: 20px; }
  .cv q { display: block; margin-top: 4px; font-family: var(--serif); font-size: 15px; line-height: 1.4; color: var(--dim); }
  .stamp { margin-bottom: 4px; rotate: -3deg; }
  .bars15 { --seg-h: 6px; margin-top: var(--sp-2); max-width: 220px; }
  .bars15 i.on { background: var(--brand); }

  .retry { margin-top: 18px; }
  .sk-h { height: 44px; width: 80%; margin-top: 18px; } .sk-l { height: 18px; width: 60%; margin-top: var(--sp-3); }
  .sk-scene { height: 420px; margin-top: 40px; border-radius: var(--r-l); } .sk-road { height: 220px; margin-top: var(--sp-4); border-radius: var(--r-l); }
  .sk-row { height: 76px; margin-top: var(--sp-3); }

  @media (min-width: 900px) {
    .start-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 48px; }
    .board.road { margin-top: 18px; padding: var(--sp-5); }
    .scene { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-top: 56px; padding: 0 48px 0 0; }
    .scene .window { margin: -28px 0 -28px var(--sp-5); aspect-ratio: 4 / 3; }
    .scene-body { padding: 40px 0; }
    .scene .title { font-size: 42px; }
    .scene .go-talk { width: fit-content; min-width: 320px; }
    .scene .time { text-align: left; }
    .scene + .start-grid > .col:first-child > .sheet:first-child { margin-top: 0; }
    .scene + .start-grid .road { margin-top: var(--sp-6); }
  }

  /* ---------- Logowanie ----------
     Tablica = scena w czterech aktach (znak aktu przycięty krawędzią, --tone zmienia się z aktem), kartka ze zdaniem z pigułkami
     Ty / Lepiej, słup marki z wejściem do demo nachodzi na tablicę. Logowanie: arkusz od dołu (telefon) albo kolumna obok (komputer).
     Pola i przyciski dostawców bez obwódek: kolor tła, nie linia; błąd = ikona + tekst + gruba ramka w kolorze tekstu (nie kolor znaku). */
  .lg { display: grid; align-content: start; padding-bottom: env(safe-area-inset-bottom); }
  .lg-top .wm { font-size: 26px; }
  .lg .board.lg-hero { padding: 18px var(--sp-4) 52px; }
  /* ogromny znak w osobnej warstwie przycinającej, żeby kartka mogła wyjść poza tablicę (komputer) */
  .lg-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
  .lg-clip > .mega { top: -34px; right: -4px; font-size: 200px; }
  .lg-clip > .mega.is-dot { width: 170px; height: 170px; top: -70px; right: -70px; }
  /* pasek aktów: cztery odcinki w kolorach znaków, w stałej kolejności (jak skala w wyniku) */
  .acts-bar { position: relative; z-index: 1; width: min(200px, 60%); }
  .acts-bar i { background: var(--g); opacity: .25; transition: opacity .3s, height .3s; }
  .acts-bar i.past { opacity: .6; }
  .acts-bar i.on { opacity: 1; height: 12px; }
  .goal-tag { --face: 36px; gap: var(--sp-2); padding: 4px var(--sp-3) 4px 4px; font-size: 19px; rotate: -3deg; }
  .goal-tag .dot { display: inline-block; width: 8px; height: 8px; margin-left: -6px; border-radius: 50%; background: var(--ink); align-self: flex-end; margin-bottom: 9px; }
  /* wysokość sceny = najwyższy akt (wszystkie leżą w jednej komórce); krótsze akty siadają na dole, tuż nad hasłem */
  .stage { position: relative; z-index: 1; display: grid; margin-top: 56px; align-items: end; }
  .act { grid-area: 1 / 1; display: grid; align-content: end; opacity: 0; visibility: hidden; transition: opacity .25s ease-out, visibility .25s; }
  .act.on { opacity: 1; visibility: visible; }
  .lg-bubble { max-width: 88%; }
  .lg .sheet.lg-card { margin: 0 4px 0 var(--sp-5); padding: var(--sp-3) 18px var(--sp-3) var(--sp-5); }
  .lg-card .say { margin-top: 0; }
  .lg-card .say + .say { margin-top: var(--sp-2); }
  .act-2 .say.you q { font-size: 15px; opacity: .75; }
  .act-2 .say.better q { font-size: 22px; }
  /* hasło i podtytuł trzymają miejsce na dwie linie, żeby tablica i słup nie skakały między aktami */
  .lg-claim { position: relative; z-index: 1; min-height: 1.96em; margin-top: var(--sp-3); font-size: 31px; padding-right: 44px; }
  .lg-sub { position: relative; z-index: 1; min-height: 2.8em; margin-top: var(--sp-1); font-size: 15px; line-height: 1.4; color: var(--dim); max-width: 34ch; padding-right: 44px; }
  .lg-pause { position: absolute; z-index: 2; right: 8px; bottom: 36px; color: var(--on-board); }
  .lg-pause .i { width: 20px; height: 20px; }
  .lg-slab { position: relative; z-index: 2; margin-top: -30px; }
  .lg-foot { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 18px 2px var(--sp-4); font-size: 13px; line-height: 1.45; color: var(--dim); }
  .lg-foot a { color: var(--text); }
  .lg-foot > a { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); margin-top: -12px; }

  /* arkusz logowania z klockiem-tablicą „RDY.” nad tytułem */
  .login { --etap: var(--accent); }
  .grab { width: 40px; height: 5px; margin: 0 auto var(--sp-3); border-radius: 999px; background: var(--line); }
  .login-tile { --w: 72px; --h: 64px; position: relative; inset: auto; margin: 4px 0 var(--sp-1); }
  .login-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
  .providers { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
  .prov { position: relative; display: flex; min-height: 52px; padding: 0 var(--sp-4); background: var(--sunk); color: var(--text); list-style: none; }
  .prov::-webkit-details-marker { display: none; }
  .prov .i { width: 20px; height: 20px; }
  .prov.apple { background: light-dark(var(--ink), var(--on-board)); color: light-dark(var(--on-board), var(--ink)); }
  .prov.google { rotate: -.8deg; } .mailbox > summary.prov { rotate: .6deg; } /* krzywe klocki jak pigułki grup */
  [data-os="android"] .prov { min-height: 56px; }
  [data-os="android"] .prov.apple { display: none; } /* Android: Google wystarczy */
  .mailbox summary .i:last-child { position: absolute; right: 18px; transition: rotate .2s var(--ease); }
  .mailbox[open] summary .i:last-child { rotate: 180deg; }
  .mailbox form { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); }
  .fld { display: grid; gap: var(--sp-1); }
  .fld label { font-size: 15px; font-weight: 700; }
  .fld-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .fld-head .txt-link { margin-block: -6px; } /* cel dotyku zostaje, wiersz zostaje niski */
  .inp { position: relative; }
  #p { padding-right: 56px; }
  .reveal { position: absolute; top: 4px; right: 4px; color: var(--dim); }
  .fmsg { display: none; gap: var(--sp-2); align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.4; }
  .fmsg .i { width: 18px; height: 18px; margin-top: 2px; }
  .fmsg a { color: inherit; }
  .fld.err .fmsg { display: flex; }
  .fld.err .field { box-shadow: inset 0 0 0 2px var(--text); }
  .go { width: 100%; margin-top: var(--sp-1); }
  .switch { margin-top: var(--sp-3); text-align: center; font-size: 15px; color: var(--dim); }

  /* komputer: tablica na lewej połowie (na całą wysokość okna) ze słupem w rogu, logowanie po prawej na tle strony, bez modalności.
     Układ trzyma wysokość okna; przy długim błędzie przewija się tylko kolumna logowania, słup zostaje na dole tablicy. */
  @media (min-width: 900px) {
    .lg { max-width: none; height: 100dvh; padding: 0; grid-template-columns: minmax(0, 1.12fr) minmax(460px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; }
    /* logo na tablicy: wersja z artefaktu (kolory znaków, wszystkie słowa 800), jak w ciemnym motywie */
    .lg-top { grid-area: 1 / 1; z-index: 3; padding: var(--sp-5) 64px 0; color-scheme: dark; }
    .lg-top .wm { font-size: 31px; }
    .lg-top .wm :is(.w1, .w2) { font-weight: 800; }
    .lg .board.lg-hero { grid-area: 1 / 1 / 4 / 2; z-index: 2; display: flex; flex-direction: column; justify-content: center; overflow: visible;
      border-radius: 0; padding: 140px 64px 250px; }
    .lg-hero > :not(.lg-clip, .lg-pause, .stage) { max-width: 54%; }
    .acts-bar { position: absolute; top: 96px; left: 64px; }
    .lg-pause { top: 22px; right: 22px; bottom: auto; }
    .lg-claim { margin-top: 0; padding-right: 0; font-size: 62px; }
    .lg-sub { padding-right: 0; font-size: 19px; }
    /* znak wychodzi za prawą krawędź tablicy na stronę formularza, ale tylko w pustym pasie przed przyciskami */
    .lg-clip { overflow: visible; clip-path: inset(0 -100vw 0 0); }
    /* znak stoi na środku krawędzi; kartka ze zdaniem kładzie się na nim */
    .lg-clip > .mega { top: 50%; bottom: auto; right: -20px; translate: 0 -50%; scale: 2; transform-origin: 100% 50%; }
    .lg-clip > .mega.is-dot { top: 50%; bottom: auto; right: -40px; translate: 0 -50%; scale: 1.8; transform-origin: 100% 50%; }
    /* scena leży na granicy tablicy i formularza: kartka zszywa obie połowy */
    .stage { position: absolute; top: 22%; right: -36px; width: min(400px, 46%); margin: 0; min-height: 0; align-items: start; }
    .stage .act { align-content: start; }
    .stage .lg-bubble, .stage .goal-tag { justify-self: end; margin-right: var(--sp-6); }
    .lg-bubble { font-size: 22px; }
    .act-2 .say.better q { font-size: 26px; }
    .lg-slab { grid-area: 1 / 1 / 4 / 2; align-self: end; justify-self: start; width: min(440px, calc(100% - 128px)); margin: 0 0 48px 64px; }
    #open { display: none; }
    /* formularz zawsze nad znakiem */
    .lg dialog.login { grid-area: 2 / 2; align-self: center; justify-self: center; position: static; z-index: 3; display: block; width: min(460px, calc(100% - 64px));
      max-width: none; max-height: 100%; overflow-x: visible; overflow-y: auto; margin: 0; padding: var(--sp-4) 0; border-radius: 0; background: none; }
    .login .grab, .login .close { display: none; }
    .login h1 { font-size: 42px; }
    .login-tile { margin: 0 0 var(--sp-3); }
    .lg-foot { position: relative; z-index: 3; grid-area: 3 / 2; justify-self: center; width: min(460px, calc(100% - 64px)); }
  }
  @media (min-width: 900px) and (max-height: 880px) {
    .lg .board.lg-hero { padding-block: 100px 200px; }
    .lg-claim { font-size: 48px; }
    .login h1 { font-size: 34px; }
    .providers { margin-top: var(--sp-3); gap: var(--sp-2); }
    .mailbox form { gap: var(--sp-2); padding-top: var(--sp-2); }
    .lg dialog.login { padding-block: var(--sp-2); }
    .login-tile { --w: 56px; --h: 50px; --r: 16px; margin-bottom: var(--sp-2); } .login-tile .rdy { font-size: 19px; }
    .login .sub { margin-top: 4px; font-size: 15px; }
    .login:has(.alert:not([hidden])) .sub { display: none; } /* alert zajmuje miejsce leadu, przycisk zostaje widoczny */
    .login .alert { margin-top: var(--sp-2); padding-block: var(--sp-2); }
  }

  /* ---------- Wybór rozmowy (gość) ----------
     Każda rozmowa = okno ze zdjęciem w duotonie tonu + klocek-tablica ze znakiem tonu na rogu + pierwsze zdanie rozmówcy
     jako dymek, który nachodzi na dolną krawędź okna. Efekt zakreślony w kolorze tonu.
     Wybór (komputer): zdanie wybranej rozmowy staje się kartką, pod rozmową pasek w tonie, kropka nagłówka bierze ton wybranej.
     Telefon: rozmowy są zwykłymi linkami do czatu (cały kafel to cel), bez słupa. #used: twoja rozmowa w kolorze kropki,
     pozostałe bez koloru tonu (szare zdjęcie, znak bez światła), tekst w pełnym kolorze. */
  .pk-head { margin-top: var(--sp-2); }
  .pk-head .alert { margin-top: var(--sp-3); }
  /* „tej rozmowy już nie ma”: informacja, nie błąd; kształt dymka */
  .pk-info { border-radius: var(--bubble); }
  .pk-list { display: grid; gap: var(--sp-6); margin: var(--sp-6) 0 0; padding: 0; border: 0; min-width: 0; }
  .pk-list > legend { padding: 0; }
  .pk-list > li { display: grid; min-width: 0; }
  .pk-opt { --tone: var(--l0); position: relative; display: grid; min-width: 0; color: var(--text); text-decoration: none; cursor: pointer; border-radius: var(--r-m); }
  .pk-opt:focus-visible, .pk-opt:has(input:focus-visible) { outline: 3px solid var(--text); outline-offset: 6px; border-radius: var(--r-m); }
  .pk-media { position: relative; display: block; }
  .pk-win { aspect-ratio: 21 / 10; }
  .pk-tile { --w: 60px; --h: 66px; --r: 18px; --fs: 42px; --dot: 18px; top: -16px; right: -6px; }
  .pk-badge { position: absolute; top: 12px; left: 12px; padding-inline: var(--sp-3); background: var(--on-board); rotate: -3deg; }
  .pk-badge.mine { background: var(--l3); }
  /* pierwsze zdanie rozmówcy: dymek na krawędzi okna; wybrane = kartka (.bubble.card) */
  .pk-line { position: relative; z-index: 1; max-width: calc(100% - 28px); margin: -38px 0 0 var(--sp-3); }
  .pk-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3); align-items: start; padding: var(--sp-3) 4px 0; }
  .pk-body > :not(.pk-end) { grid-column: 1; }
  .pk-title { text-wrap: balance; overflow-wrap: anywhere; }
  .pk-eff { margin-top: 4px; font-size: 17px; font-weight: 700; line-height: 1.5; }
  .pk-who { font-size: 15px; color: var(--dim); }
  .pk-goal { margin-top: var(--sp-1); font-size: 15px; line-height: 1.4; }
  .pk-end { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .pk .arrow { --s: 44px; background: var(--text); color: var(--bg); }
  .pk-opt .lock { color: var(--dim); }
  /* radio (komputer): pusty pierścień, wybrana = pełne kółko z ptaszkiem */
  .pk-radio { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); color: var(--bg); }
  .pk-radio .i { width: 16px; height: 16px; opacity: 0; }
  .pk-opt.on .pk-radio { background: var(--text); box-shadow: none; }
  .pk-opt.on .pk-radio .i { opacity: 1; }
  /* pasek w tonie pod wybraną rozmową */
  .pk-opt::after { content: ""; display: block; height: 8px; margin: var(--sp-3) 4px 0; border-radius: 999px; background: var(--tone); transform-origin: 0 50%; scale: 0 1; }
  .pk-opt.on::after { scale: 1 1; }
  /* gość z rozmową na próbę za sobą: pozostałe bez koloru tonu, tekst czytelny */
  .pk-opt.dim { --tone: var(--line); }
  .pk-opt.dim .photo img { mix-blend-mode: normal; opacity: .55; }
  .pk-opt.dim .sign-tile > b { color: var(--board-dim); }
  .pk-opt.dim .sign-tile > b.dotg { background: var(--board-dim); }
  .pk-opt.dim .pk-eff .hl { background: none; color: var(--text); padding: 0; margin: 0; }
  .pk-opt.dim::after, .pk-opt.mine::after { display: none; }
  /* słup: cel wybranej rozmowy i przycisk; na telefonie tylko podpowiedź (rozmowa = link) */
  .pk-bar { margin-top: var(--sp-6); }
  .pk-bar .hint { text-align: left; }
  .pk-lb { font-weight: 600; }
  .pk-goalt { margin-top: 4px; font-size: 26px; overflow-wrap: anywhere; }
  .pk-msg { font-size: 19px; font-weight: 700; line-height: 1.3; }
  .pk-act { display: grid; gap: var(--sp-2); }
  @media (width < 900px) {
    .pk-bar.choose { --dim: var(--muted); position: static; margin: var(--sp-4) 0 0; padding: 0 4px calc(var(--sp-4) + env(safe-area-inset-bottom)); background: none; color: var(--dim); }
    .pk-bar.choose .pk-goalbox, .pk-bar.choose .pk-go { display: none; }
    .pk-bar.choose .hint { text-align: center; }
  }
  @media (min-width: 900px) {
    .pk-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) 48px; align-items: end; margin-top: 4px; }
    .pk-head h1 { max-width: 12ch; }
    .pk-head > div { padding-bottom: var(--sp-1); }
    .pk-lead { margin-top: 0; font-size: 19px; }
    .pk-head .alert { margin-top: var(--sp-2); }
    .pk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-top: var(--sp-5); align-items: start; }
    .pk-win { aspect-ratio: 16 / 10; }
    .pk-opt .pk-goal { display: none; }
    .pk-bar { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5) 18px var(--sp-5); grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; }
    .pk-goalt { font-size: 31px; max-width: 26ch; }
    .pk-act .btn { min-width: 320px; }
    .pk-act .hint { max-width: 320px; text-align: center; }
    @media (hover: hover) { .pk-opt:not(.on, .mine):hover { translate: 0 -4px; } }
  }
  /* niskie okno: mniejsze okna i cel, wszystko mieści się bez przewijania */
  @media (min-width: 900px) and (max-height: 860px) {
    .pk .top { min-height: 60px; }
    .pk-head h1 { font-size: 48px; }
    .pk-list { margin-top: var(--sp-4); }
    .pk-win { aspect-ratio: 2 / 1; }
    .pk-line { font-size: 15px; padding: var(--sp-2) var(--sp-3); margin-top: -32px; }
    .pk-title { font-size: 22px; }
    .pk-bar { margin-block: var(--sp-4); padding-block: var(--sp-3) var(--sp-3); }
    .pk-goalt { font-size: 22px; }
    .pk-act .btn { min-height: 52px; }
  }

  /* ---------- Rozmowa (wejście w scenę + czat) ----------
     Kolor tonu rozmowy (--tone) tylko jako kształty: okno ze zdjęciem, klocek ze znakiem, moneta rozmówcy, nastrój, postęp,
     cień kartek. Zdania w serifie: rozmówca = dymek na papierze, ty = biały dymek z brzoskwiniową pigułką „Ty”.
     Podpowiedzi = kartki z miętowym zakreśleniem, wysuwają się z fioletowego słupa. Słup od dołu niesie pole i przycisk;
     na końcu ten sam słup niesie „Zobacz, jak ci poszło”. Narracja: krótka kursywa na środku. */
  .rozmowa { --tone: var(--l2); min-height: 100dvh; }
  .rozmowa[data-view="scene"] .cv-chat, .rozmowa[data-view="chat"] .cv-scene { display: none; }
  .cv-h { font-size: 15px; font-weight: 700; color: var(--dim); }

  /* wejście w scenę (telefon) */
  .cv-scene { view-transition-name: cv-page; }
  .cv-shot { position: relative; margin: var(--sp-5) var(--sp-1) 0 2px; }
  .cv-win { aspect-ratio: 16 / 10; --tilt: 1.5deg; }
  .cv-shot .sign-tile { top: -26px; right: -8px; }
  .cv-title { margin-top: var(--sp-4); }
  .cv-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); margin-top: 18px; }
  .cv-party { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-2); align-items: start; line-height: 1.3; }
  .cv-party b { display: block; font-size: 17px; }
  .cv-party small { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; }
  .cv-sec { margin-top: var(--sp-5); }
  .cv-happened { margin-top: var(--sp-1); font-size: 17px; }
  .cv-first { position: relative; max-width: 92%; margin: var(--sp-3) 0 0 var(--sp-2); padding: var(--sp-3) 18px; }
  .cv-goal { margin-top: var(--sp-1); font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
  .cv-sec h3 { margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--dim); }
  .cv-steps { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
  .cv-steps li { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-3); align-items: center; font-size: 17px; line-height: 1.3; }
  .cv-steps .coin { --s: 30px; }
  .cv-last { margin-top: var(--sp-4); font-weight: 700; }
  .cv-scene .pillar { margin-top: var(--sp-6); }

  /* czat: nagłówek (rozmówca, nastrój, postęp, zwijane „Sytuacja i cel”) */
  .cv-chat { view-transition-name: cv-page; }
  @media (width < 900px) { .cv-chat { padding-inline: 0; } }
  .cv-head { position: sticky; top: 0; z-index: 4; padding: env(safe-area-inset-top) var(--pad) 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .cv-head:has(.cv-brief:not(.shut)) { position: relative; } /* rozwinięta sytuacja nie zasłania rozmowy przy przewijaniu */
  .cv-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 52px; }
  .cv-bar .back { min-width: 0; } .cv-bar .back span { overflow: hidden; text-overflow: ellipsis; } /* długie wersje językowe: skraca się powrót, nie „Zakończ” */
  .cv-who { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
  .cv-who .cover { width: 52px; height: 52px; border-radius: var(--r-s); }
  .cv-who .sign-tile.mini { --w: 24px; --h: 24px; --r: 8px; --fs: 15px; --dot: 7px; right: 3px; bottom: 3px; }
  .cv-name { font-size: 19px; font-weight: 800; line-height: 1.15; }
  .cv-name small { font-size: 15px; font-weight: 400; color: var(--dim); }
  .cv-state { display: flex; align-items: center; gap: var(--sp-1); min-height: 26px; margin-top: 2px; font-size: 13px; }
  .cv-mlb { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; color: var(--dim); }
  .cv-mood { background: var(--tone); rotate: -2deg; }
  .cv-typing-h { font-weight: 700; color: var(--dim); }
  .cv-ttl { margin-top: var(--sp-2); font-size: 19px; line-height: 1.15; overflow-wrap: anywhere; }
  /* postęp: trzy odcinki na całą szerokość, licznik obok */
  .cv-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); font-size: 13px; font-weight: 700; }
  .cv-prog #count { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .cv-prog ol { grid-column: 1; grid-row: 1; }
  .cv-prog li.done { background: var(--tone); }
  .cv-prog li.now { background: var(--text); }
  .cv-brief-t { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--text);
    font-size: 15px; font-weight: 700; cursor: pointer; }
  .cv-brief-t .i { width: 20px; height: 20px; transition: rotate .2s var(--ease); }
  .cv-brief-t[aria-expanded="true"] .i { rotate: 180deg; }
  .cv-brief { display: grid; grid-template-rows: 1fr; }
  .cv-brief.shut { grid-template-rows: 0fr; }
  .cv-brief > div { overflow: hidden; display: grid; gap: var(--sp-2); }
  .cv-brief > div > :last-child { margin-bottom: var(--sp-2); }
  .cv-brief p { font-size: 15px; line-height: 1.4; color: var(--dim); }
  .cv-brief p b { color: var(--text); }
  /* plan: zrobione (szara moneta z ptaszkiem), bieżący (moneta w tonie, pogrubiony), kolejne (pierścień) */
  .cv-plan { display: grid; gap: var(--sp-2); }
  .cv-plan li { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-2); align-items: start; font-size: 15px; line-height: 1.35; color: var(--dim); }
  .cv-plan .coin { --s: 24px; --coin: transparent; box-shadow: inset 0 0 0 2px var(--line); color: var(--dim); font-size: 13px; rotate: none; }
  .cv-plan .coin .i { width: 14px; height: 14px; }
  .cv-plan li.now { color: var(--text); font-weight: 700; }
  .cv-plan li.now .coin { --coin: var(--tone); box-shadow: none; color: var(--ink); rotate: -6deg; }
  .cv-plan li.done { color: var(--text); }
  .cv-plan li.done .coin { --coin: var(--sunk); box-shadow: none; color: var(--text); }

  /* rozmowa */
  .cv-log { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); padding: 18px var(--pad) var(--sp-4); }
  .m { display: grid; justify-items: start; max-width: 88%; align-self: flex-start; }
  .m.self { align-self: flex-end; justify-items: end; }
  .m.first:not(:first-child) { margin-top: var(--sp-2); }
  .m .bubble { width: auto; white-space: pre-wrap; } /* fit-content w zwężającym się .m zwija tekst do jednej litery */
  .m-who { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1) 2px; font-size: 13px; font-weight: 700; color: var(--dim); }
  .m-who .ava { --s: 28px; font-size: 13px; }
  .m.self .pill { margin: 0 var(--sp-1) var(--sp-1) 0; justify-self: end; }
  .m.failed .bubble { opacity: .75; box-shadow: inset 0 0 0 2px var(--muted); }
  .m-fail { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px var(--sp-1); margin-top: 2px; font-size: 13px; font-weight: 700; }
  .m-fail .i { width: 16px; height: 16px; }
  .m-fail button { min-height: var(--tap); padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline;
    text-underline-offset: 3px; cursor: pointer; }
  .m-narr { align-self: center; max-width: 36ch; margin: var(--sp-3) 0; text-align: center; font-size: 15px; font-style: italic; line-height: 1.4; color: var(--dim); }
  .m-note { align-self: center; display: flex; align-items: center; gap: var(--sp-2); max-width: 100%; margin-bottom: 4px; padding: var(--sp-2) var(--sp-3); border-radius: 18px; background: var(--sunk);
    font-size: 13px; font-weight: 600; }
  .m-note .i { width: 18px; height: 18px; flex: none; color: light-dark(var(--brand), var(--l3)); }

  /* słup: pole, podpowiedzi, koniec */
  .cv-dock { z-index: 4; margin: 0; padding: var(--sp-3) var(--pad) calc(var(--sp-2) + env(safe-area-inset-bottom)); }
  .cv-form { display: grid; gap: var(--sp-2); }
  .cv-tipbtn { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; padding: 0 var(--sp-3) 0 var(--sp-2); border: 0; border-radius: 999px;
    background: var(--hl-better); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; rotate: -2deg; position: relative; }
  .cv-tipbtn::before { content: ""; position: absolute; inset: -4px 0; } /* cel dotyku 44 px przy niższej pigułce */
  .cv-tipbtn .i { width: 18px; height: 18px; }
  .cv-tipbtn[aria-expanded="true"] { background: var(--on-board); }
  .cv-field { position: relative; }
  .cv-field .field { max-height: 148px; padding: var(--sp-3) 58px var(--sp-3) 18px; border-radius: 26px; resize: none; field-sizing: content; }
  .cv-send { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
    background: var(--brand); color: var(--on-brand); cursor: pointer; }
  .cv-send .i { width: 22px; height: 22px; }
  .cv-send:disabled { background: var(--sunk); color: var(--ink-muted); cursor: not-allowed; }
  [data-os="android"] .cv-send { right: 2px; bottom: 2px; }
  .cv-tips { display: grid; gap: var(--sp-2); }
  .cv-tips-d { font-size: 13px; color: var(--dim); }
  #tips-phone .cv-tiplist { max-height: 46dvh; overflow: auto; padding: 4px var(--sp-2) var(--sp-2) 2px; margin: -4px -10px -10px -2px; }
  .cv-tiplist { display: grid; gap: var(--sp-3); }
  .cv-tip { display: grid; gap: var(--sp-1); width: 100%; padding: var(--sp-3) var(--sp-3) var(--sp-3); border: 0; border-radius: 18px; background: var(--sheet); color: var(--ink); text-align: left;
    font: inherit; cursor: pointer; rotate: var(--r, 0deg); box-shadow: 5px 6px 0 var(--tone); }
  .cv-tip q { font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--ink); }
  .cv-tip-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .cv-tip .arrow { --s: 30px; }
  .cv-tip .arrow .i { width: 16px; height: 16px; }
  @media (hover: hover) { .cv-tip { transition: translate .2s var(--ease); } .cv-tip:hover { translate: -2px -2px; } }
  .cv-tip-lb { justify-self: start; background: var(--sheet-line); }
  .cv-side-d { margin-top: 4px; color: var(--dim); }
  .cv-end { display: grid; gap: var(--sp-2); }

  /* okno zakończenia */
  .cv-ask { margin: auto; width: min(420px, calc(100% - 32px)); border-radius: var(--r-l); }
  .cv-ask h2 { font-size: 31px; }
  .cv-ask-b { display: grid; gap: var(--sp-1); margin-top: var(--sp-4); }
  .cv-ask-go { display: flex; align-items: center; justify-content: center; min-height: var(--tap); font-size: 15px; font-weight: 700; color: var(--text); text-underline-offset: 3px; }

  .cv-side { display: none; }
  @media (min-width: 900px) {
    .cv-chat { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr) auto;
      grid-template-areas: "head side" "log side" "dock side"; column-gap: 40px; }
    .cv-head { grid-area: head; position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px var(--sp-4); padding: var(--sp-2) 0 var(--sp-3); }
    .cv-bar { grid-column: 1 / -1; }
    .cv-ttl { grid-column: 2; grid-row: 2; margin: 0; max-width: 18ch; font-size: 31px; text-align: right; }
    .cv-prog { grid-column: 1 / -1; margin-top: var(--sp-2); }
    .cv-brief-t, .cv-brief, .cv-tipbtn, .cv-tips { display: none !important; }
    .cv-log { grid-area: log; overflow: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; }
    .m { max-width: min(78%, 560px); }
    .cv-dock { grid-area: dock; position: static; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-3); }
    .cv-side { grid-area: side; display: grid; align-content: start; gap: var(--sp-5); overflow: hidden auto; padding: var(--sp-5) var(--sp-1) var(--sp-5) 2px; }
    .cv-side .cv-shot { margin: 18px var(--sp-1) var(--sp-1) 2px; }
    .cv-side .cv-win { aspect-ratio: 2 / 1; }
    .cv-side .cv-plan { margin-top: var(--sp-3); }
    .cv-side p:not(.cv-goal) { font-size: 15px; line-height: 1.4; }
    .cv-role { margin-top: var(--sp-2); } .cv-role + p { margin-top: 4px; color: var(--dim); }
    .cv-side .cv-tiplist { margin-top: var(--sp-3); }
  }
  @media (min-width: 900px) and (max-height: 820px) {
    .cv-side { gap: var(--sp-4); padding-top: 18px; }
    .cv-side .cv-win { aspect-ratio: 5 / 2; }
  }

  /* ---------- Czekanie (most rozmowa → wynik, ok. 10 s) ----------
     Tablica niesie drogę do oceny, jeszcze bez oceny: ogromny znak przechodzi ? → ?! → ! → . razem z krokami, w kolorze kroku (--tone),
     kropka jak w wyniku: ćwiartka koła w rogu. Ten sam kolor ma cień kartki, więc cały ekran zmienia kolor z krokiem.
     Kartka = twoje zdania (dekoracja, padły w rozmowie): brzoskwiniowy zakreślacz czyta je po kolei i zostaje na „momencie”, reszta gaśnie.
     Pod nimi „Lepiej” z zasłoną, która pisze się miętą; twarz ożywa przy „Gotowe.”. Kroki = cztery klocki w kolorach znaków z tuszem
     (na papierze kolor tylko jako kształt), bieżący bije jak serce, jego podpis duży. Komputer: tablica z kartką po lewej, droga po prawej. */
  .ck { --tone: var(--l0); padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); padding-bottom: var(--sp-4); }
  .ck .board { --tone: inherit; padding: var(--sp-4) var(--sp-4) 64px; }
  #ck-sign { display: contents; }
  /* znak w prawym górnym rogu, przycięty krawędzią; tekst trzyma się z dala od niego */
  .ck-board .mega { top: -18px; right: 6px; font-size: 160px; }
  .ck-board .mega.is-dot { top: -96px; right: -96px; width: 200px; height: 200px; }
  .ck-board:has(.mega) .ck-h { max-width: calc(100% - 100px); }
  .ck-who { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: 15px; line-height: 1.3; }
  .ck-who b { display: block; font-size: 17px; }
  .ck-who small { display: block; font-size: 15px; color: var(--dim); }
  .ck-who .coin { --s: 44px; --coin: var(--on-board); font-size: 19px; }

  /* kartka: twoje zdania czytane zakreślaczem */
  .ck-sheet .say.you { margin-top: 0; }
  .ck-said { display: grid; gap: var(--sp-2); }
  .ck-said q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /* długa wypowiedź nie rozpycha ekranu */
  .ck-said .hl { color: inherit; background-size: 0 100%; }
  .ck-said .read .hl { color: var(--ink); background-size: 100% 100%; }
  .ck[data-step]:not([data-step="0"]) .ck-said li:not(.moment) { opacity: .4; }
  .ck[data-step]:not([data-step="0"]) .ck-said li:not(.moment) .hl { background-size: 0 100%; }
  /* „Lepiej”: zasłona (szare paski), miętowy tusz wypełnia je przy pisaniu */
  .ck-better { align-items: center; }
  .ck-veil { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; }
  .ck-face { flex: none; width: 32px; height: 32px; filter: grayscale(1); opacity: .6; }
  .ck-veil i { flex: 1; height: 14px; border-radius: 999px; background: linear-gradient(var(--hl-better), var(--hl-better)) 0 0 / 0 100% no-repeat, var(--sheet-line); }
  .ck-veil i + i { flex: .55; }
  .ck:not([data-step="2"], [data-step="3"]) .ck-better { opacity: .45; }
  .ck[data-step="2"] .ck-veil i { background-size: 55% 100%, auto; }
  .ck[data-step="3"] .ck-veil i { background-size: 100% 100%, auto; }
  .ck[data-step="3"] .ck-face { filter: none; opacity: 1; }

  /* kroki: rząd klocków, pod nim podpis bieżącego (wszystkie podpisy w jednej komórce, więc wysokość się nie zmienia) */
  .ck-steps { margin-top: var(--sp-5); }
  .ck-road { display: grid; grid-template-columns: repeat(4, 56px) 1fr; column-gap: var(--sp-3); row-gap: var(--sp-3); align-items: center; }
  .ck-road li { display: contents; }
  .ck-tile { grid-row: 1; height: 56px; border-radius: 16px; background: var(--sunk); color: var(--dim); }
  .ck-dot { width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
  .ck-lb { grid-row: 2; grid-column: 1 / -1; visibility: hidden; font-size: 42px; text-wrap: balance; } /* .title, na telefonie większy */
  .ck-road .now .ck-lb { visibility: visible; }
  .ck-note { margin-top: var(--sp-3); font-size: 15px; color: var(--dim); }
  /* błąd: słup z „Spróbuj jeszcze raz” na dole */
  .ck .pillar { margin-top: auto; }
  .ck:has(> .pillar) { padding-bottom: 0; }

  @media (min-width: 900px) {
    .ck { padding: var(--sp-4) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 88px; align-items: center; }
    .ck .board { grid-area: 1 / 1; align-self: stretch; min-height: calc(100dvh - 48px); padding: 44px; }
    .ck-board .mega { top: 0; right: 0; font-size: 200px; scale: 2.1; transform-origin: 100% 0; translate: 4% -8%; }
    .ck-board .mega.is-dot { top: -230px; right: -230px; width: 460px; height: 460px; scale: none; translate: none; }
    .ck-h { max-width: 12ch; }
    .ck-board:has(.mega) .ck-h { max-width: 7ch; }
    .ck-board .lead { font-size: 22px; max-width: 22ch; }
    .ck-sheet { grid-area: 1 / 1; align-self: end; margin: 0 -64px 64px 44px; }
    .ck-said q { font-size: 19px; }
    .ck-steps, .ck .pillar { grid-area: 1 / 2; }
    .ck .pillar { margin: 0; align-self: center; }
    /* pionowa droga: klocek obok podpisu, bieżący podpis największy */
    .ck-steps { margin: 0; }
    .ck-road { grid-template-columns: 64px 1fr; row-gap: var(--sp-4); column-gap: var(--sp-4); }
    .ck-tile { grid-row: auto; height: 64px; }
    .ck-lb { grid-row: auto; grid-column: 2; visibility: visible; font-size: 19px; font-weight: 700; color: var(--dim); }
    .ck-road .done .ck-lb { color: var(--text); }
    .ck-road .now .ck-lb { font-size: 26px; font-weight: 800; color: var(--text); }
  }

  /* ---------- Awaria (serwer nie odpowiada, przerwa techniczna, brak internetu) ----------
     Tablica niesie duże „RDY” bez kropki: w miejscu kropki puste, przerywane kółko (puls marki zniknął; nie morskie, bo to błąd).
     Przy łączeniu kółko pulsuje, po powrocie kropka wskakuje morska i nagłówek kończy się kropką w tonie.
     Kartka = ostatnio przećwiczone zdanie z urządzenia (Ty → Lepiej), dowód, że postępy są zapisane. Słup z jednym działaniem.
     Komputer: tablica po lewej na całą wysokość, kartka i słup po prawej. */
  .aw { --tone: var(--l2); padding-bottom: 0; }
  .aw[data-s="ok"] { --tone: var(--l3); }
  .aw-top { justify-content: flex-end; }
  .aw .board { --tone: inherit; padding: 0 var(--sp-4) 64px; }
  .aw-rdy { display: flex; margin: -.14em -.1em 0 auto; width: fit-content; font-size: 160px; rotate: -4deg; line-height: .9; }
  /* kropka marki: przy awarii pusta, przerywana obwódka; po powrocie pełna (morski) */
  .aw-rdy i { box-sizing: border-box; width: .2em; height: .2em; margin-left: .07em; background: none; border: .025em dashed var(--board-dim); }
  .aw[data-s="ok"] .aw-rdy i { background: var(--l3); border: 0; }
  .aw-board .problem .i { margin: var(--sp-2) 0 var(--sp-3); }
  .aw-h { margin-top: var(--sp-2); }
  .aw[data-s="ok"] .aw-h { margin-top: var(--sp-5); }
  .aw-sheet .say:first-of-type { margin-top: var(--sp-3); }
  .aw-sheet .say.better q { font-size: 19px; }
  .aw-sheet { margin-bottom: 40px; }
  .aw .pillar { margin-top: auto; }

  @media (min-width: 900px) {
    .aw { padding: var(--sp-4) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-rows: auto 1fr auto; column-gap: 88px; }
    .aw-top { grid-area: 1 / 2; }
    .aw .board { grid-area: 1 / 1 / 4 / 2; min-height: calc(100dvh - 48px); display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 44px 64px; }
    .aw-rdy { position: absolute; top: 0; right: 0; margin: 0; font-size: 200px; scale: 1.6; transform-origin: 100% 0; translate: -40px -12%; }
    .aw-h { max-width: 13ch; }
    .aw-board .lead { font-size: 22px; max-width: 30ch; }
    .aw-sheet { grid-area: 2 / 2; align-self: end; margin: 0 0 var(--sp-5) -64px; }
    .aw .pillar { grid-area: 3 / 2; margin: 0 0 var(--sp-6); }
  }

  /* ---------- Paywall ----------
     Gość: grupy jako przełączniki w kształcie klocków (wciśnięty = tusz, jak .btn-sm), kropki w kolorze grupy = liczba ścieżek
     (kolor tylko jako kształt), rozwinięta lista ścieżek z paskiem w kolorze grupy. Kartka = zdanie z rozmowy demo, słup = działanie.
     Darmowe konto: tablica drogi z 5 częściami po 3 rozmowy (jak Start), cena na przycisku i przy zakupie w toku.
     Komputer: dwie kolumny, treść po lewej, kartka i słup po prawej; nic nie rozciąga się na wysokość okna. */
  .pw-head { margin-top: var(--sp-2); }
  .pw .sheet.pw-sheet { margin: var(--sp-6) var(--sp-1) 0 var(--sp-3); }
  .pw-body { margin-top: 40px; }
  .pw-ch { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap; }
  .pw-count { font-size: 17px; font-weight: 700; color: var(--dim); white-space: nowrap; }
  .pw-groups { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
  .pw-g:nth-child(odd) .pw-tog { rotate: -.6deg; } .pw-g:nth-child(even) .pw-tog { rotate: .5deg; }
  .pw-tog { grid-template-columns: minmax(0, 1fr) 32px; gap: 2px var(--sp-3); width: 100%; border: 0; text-align: left; transition: background .2s, color .2s; }
  :is(.pw-tog[aria-pressed="true"], .pw-tog:has(> input:checked)) { background: var(--text); color: var(--bg); } /* przycisk (paywall) albo pole wyboru (onboarding) */
  .pw-tog:has(> input:focus-visible) { outline: 3px solid var(--text); outline-offset: 3px; }
  .pw-tog > :not(.pw-check) { grid-column: 1; }
  .pw-gname { font-size: 19px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
  .pw-gdesc { font-size: 15px; line-height: 1.35; opacity: .8; }
  .pw-dots { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
  .pw-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--g); }
  .pw-check { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    box-shadow: inset 0 0 0 2px currentColor; color: inherit; }
  .pw-check .i { width: 18px; height: 18px; opacity: 0; color: var(--ink); }
  :is(.pw-tog[aria-pressed="true"], .pw-tog:has(> input:checked)) .pw-check { background: var(--g); box-shadow: none; }
  :is(.pw-tog[aria-pressed="true"], .pw-tog:has(> input:checked)) .pw-check .i { opacity: 1; }
  .pw-paths { display: grid; }
  .pw-paths li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); min-height: 40px; padding: var(--sp-1) 0; font-size: 15px; line-height: 1.35; }
  .pw-mine { background: var(--g); rotate: -2deg; }
  .pw-bar { margin-top: 40px; }
  .pw-bar .next { font-size: 15px; }
  .pw-was s { color: var(--dim); }
  .pw-was b { font-weight: 700; }
  .pw-small { display: flex; justify-content: center; gap: var(--sp-4); }
  .btn[aria-busy="true"] .tag.keep { display: inline-block; } /* cena zostaje widoczna przy zakupie w toku */
  /* tablica drogi: części ścieżki, w każdej 3 rozmowy */
  .pw .board.road { margin-top: 0; }
  .pw-parts { display: grid; gap: 4px; margin-top: var(--sp-4); }
  .pw-parts li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 52px; font-size: 15px; }
  .pw-parts .coin { --coin: var(--g); }
  .pw-parts .locked .coin { --coin: color-mix(in oklab, var(--g) 32%, transparent); color: var(--on-board); }
  .pw-pn { display: block; line-height: 1.3; }
  .pw-parts .now .pw-pn { font-weight: 700; }
  .pw-bars { --seg-h: 6px; max-width: 120px; margin-top: var(--sp-1); }
  .pw-bars i { background: color-mix(in oklab, var(--g) 32%, transparent); }
  .pw-bars i.done { background: var(--g); }
  .pw-parts .i { width: 18px; height: 18px; color: var(--dim); }
  .pw-parts small { font-size: 13px; font-weight: 600; color: var(--dim); white-space: nowrap; }

  /* arkusz konta (język arkusza logowania); komputer: okno na środku, maks. 480 px */
  .acct-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
  .acct-tags .tag { background: var(--g); rotate: -2deg; }
  .acct-tags .tag:nth-child(even) { rotate: 2deg; }
  .acct .alert { margin-top: var(--sp-3); }
  .fmsg.hint { display: flex; color: var(--dim); font-weight: 400; }
  .fmsg.hint .i { display: none; }
  .fld.err .fmsg.hint { color: inherit; font-weight: 600; }
  .fld.err .fmsg.hint .i { display: block; }
  .acct-legal { margin-top: var(--sp-3); font-size: 13px; line-height: 1.45; color: var(--dim); text-align: center; }
  .acct-legal a { color: var(--text); }
  @media (min-width: 900px) {
    .acct { margin: auto; max-width: 480px; border-radius: var(--r-l); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
    .acct .grab { display: none; }
    .pw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto auto 1fr; column-gap: 72px; align-content: start; padding-bottom: 48px; }
    .pw-main { display: contents; }
    .pw-head { grid-area: 2 / 1; margin-top: var(--sp-2); }
    .pw-head h1 { max-width: 13ch; }
    .pw-body { grid-area: 3 / 1; align-self: start; }
    .pw .sheet.pw-sheet { grid-area: 2 / 2; align-self: end; margin: var(--sp-4) 0 0 var(--sp-6); }
    .pw-bar { grid-area: 3 / 2; align-self: start; }
    .pw-bar.pillar { margin: 40px 0 0; }
    .pw-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }

  /* ---------- Onboarding (po założeniu konta, przed pierwszą darmową rozmową) ----------
     Tablica = droga marki: cztery klocki w kolorach znaków (? ścieżki · ?! konto · ! o tobie · . gotowe), zrobione z ptaszkiem,
     bieżący pełny i przechylony, kolejne przygaszone; ogromny znak bieżącego kroku przycięty w rogu (jak Czekanie), kropka = ćwiartka koła.
     Wybór grup = klocki z paywalla jako pola wyboru; wiek = klocki z liczbami, branża = pigułki; zaznaczone = tusz.
     Słup na dole niesie przycisk (telefon: przyklejony, zajmuje własną wysokość w treści, rośnie o komunikat);
     na #start słup niesie ścieżkę startową. Komputer: treść po lewej, tablica drogi przyklejona po prawej, słup w treści. */
  /* ---------- Potwierdzenie e-maila: kod w jednym polu (autouzupełnianie z SMS/maila), linki pod spodem ---------- */
  @media (max-width: 899px) { [data-step="weryfikacja"] .ob-steps { display: none; } } /* telefon: tablica niska, żeby kod i linki mieściły się nad słupem */
  .vf { display: flex; flex: 1; flex-direction: column; margin-top: var(--sp-4); }
  .vf-mail { overflow-wrap: anywhere; }
  .vf-code { min-height: 72px; text-align: center; font: 800 42px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: .32em; text-indent: .32em; font-variant-numeric: tabular-nums; }
  .vf-code::placeholder { color: var(--muted); opacity: .45; }
  .vf-status { min-height: 1.4em; margin-top: var(--sp-2); font-size: 15px; font-weight: 600; }
  .vf-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); margin-top: var(--sp-2); }
  .vf-links .txt-link { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
  .vf-resend[aria-disabled="true"] { color: var(--muted); cursor: default; font-weight: 600; }
  .vf-hint { margin-top: var(--sp-2); font-size: 15px; color: var(--muted); }
  .vf > .alert { margin-top: var(--sp-3); }
  .ob-main > .ob-bar { margin-top: auto; }
  .ob-main > :nth-last-child(2) { margin-bottom: 40px; }
  .ob .board.ob-road { --tone: var(--l0); margin-top: 4px; padding: var(--sp-4) var(--sp-4) var(--sp-4); }
  .ob-road .mega { top: -24px; right: 16px; font-size: 160px; }
  .ob-road .mega.is-dot { top: -70px; right: -70px; width: 150px; height: 150px; }
  .ob-msg { max-width: calc(100% - 84px); min-height: 2.2em; font-size: 26px; }
  .ob-msg .hdot { background: var(--tone); }
  .ob-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-3); margin-top: 18px; }
  .ob-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  .ob-tile { position: relative; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--c) 24%, transparent); color: var(--c); font-size: 22px; }
  .ob-tile .ck-dot { width: 9px; height: 9px; }
  .ob-tick { position: absolute; top: -7px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--on-board); color: var(--ink); box-shadow: 0 0 0 3px var(--board); }
  .ob-tick .i { width: 12px; height: 12px; }
  .ob-txt { font-size: 13px; line-height: 1.3; color: var(--dim); overflow-wrap: anywhere; }
  .ob-txt b { display: block; font-size: 15px; color: var(--on-board); }
  .ob-steps .todo .ob-txt b { color: var(--dim); font-weight: 600; }
  .ob-head { margin-top: var(--sp-5); }
  .ob-head .hdot:not(.done) { background: var(--accent); } /* fiolet marki znika na ciemnym tle */
  /* pola: prawdziwe inputy (ukryte), cały klocek albo pigułka jest etykietą */
  .ob-set { min-width: 0; margin: var(--sp-5) 0 0; padding: 0; border: 0; }
  .ob-set:has(.pw-groups) { margin-top: var(--sp-4); }
  .ob-set .pw-groups { margin-top: 0; }
  .ob-lg { padding: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
  .ob-lg small { font-size: 15px; font-weight: 400; color: var(--dim); white-space: nowrap; }
  .ob-age { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
  .ob-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
  :is(.ob-opt, .ob-chip) { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-1); background: var(--sunk); color: var(--text);
    cursor: pointer; transition: background .2s, color .2s; overflow-wrap: anywhere; }
  .ob-opt { min-height: 64px; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-m); rotate: -.8deg; text-align: center;
    font: 800 26px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.02em; }
  .ob-opt:nth-child(even) { rotate: .7deg; }
  .ob-chip { min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border-radius: 22px; font-size: 15px; font-weight: 700; line-height: 1.3; }
  :is(.ob-opt, .ob-chip) .i { display: none; width: 16px; height: 16px; flex: none; }
  .ob-opt .i { position: absolute; top: 6px; right: 6px; }
  :is(.ob-opt, .ob-chip):has(:checked) { background: var(--text); color: var(--bg); }
  :is(.ob-opt, .ob-chip):has(:checked) .i { display: block; }
  :is(.ob-opt, .ob-chip):has(:focus-visible) { outline: 3px solid var(--text); outline-offset: 3px; }
  .ob-note { margin-top: var(--sp-3); border-radius: var(--bubble); }
  /* #start: ścieżki pogrupowane, pasek w kolorze grupy (jak lista na paywallu) */
  .ob-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
  .ob-gh { display: flex; align-items: center; gap: var(--sp-2); font-size: 19px; font-weight: 800; }
  .ob-gh i { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--g); }
  .ob-gh small { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--dim); white-space: nowrap; }
  .ob-list .pw-paths { margin: var(--sp-2) 0 0 4px; }
  .ob-pname { font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
  .ob-bar:has(.ob-pname) { gap: var(--sp-2); padding-top: var(--sp-3); }
  .ob-bar .next:first-child { font-weight: 600; }
  .ob-bar .next + .ob-pname { margin-top: -6px; }
  .ob-bar .btn .tag { flex: none; }
  @media (min-width: 900px) {
    .ob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-rows: auto 1fr; column-gap: 88px; align-content: start; padding-bottom: 48px; }
    .ob-main { grid-area: 2 / 1; display: block; max-width: 660px; }
    .ob .board.ob-road { grid-area: 2 / 2; position: sticky; top: 24px; align-self: start; margin-top: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-6); }
    .ob-road .mega { top: -10px; right: 10px; font-size: 200px; }
    .ob-road .mega.is-dot { top: -110px; right: -110px; width: 230px; height: 230px; }
    .ob-msg { max-width: calc(100% - 110px); font-size: 31px; }
    .ob-steps { grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
    .ob-steps li { grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
    .ob-tile { height: 56px; border-radius: 16px; font-size: 26px; }
    .ob-tile .ck-dot { width: 11px; height: 11px; }
    .ob-txt { font-size: 15px; } .ob-txt b { font-size: 17px; }
    .ob-head { margin-top: var(--sp-2); }
    .ob-main > .ob-bar, .ob-main > :nth-last-child(2) { margin: var(--sp-6) 0 0; }
    .ob-main > .ob-bar { max-width: 520px; }
    .ob-pname { font-size: 26px; }
    [data-step="start"] .ob-main { display: flex; flex-direction: column; }
    [data-step="start"] .ob-list { order: 2; margin-top: 40px; } /* komputer: przycisk w treści, nad listą */
    .ob-age { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }

  /* ---------- Ścieżki (katalog, zakładka) ----------
     Okładki „Twoje” / „Dla ciebie”: zdjęcie w duotonie koloru grupy, klocek-tablica z najlepszym znakiem (ukończona = kropka).
     Tablica grup: nazwy świecą w kolorze grupy (wolno, bo na ciemnym), kropka = ścieżka, pełna = zaczęta; klik przewija do grupy.
     Grupy: klocki jak na paywallu (nazwa, opis, „twoja”, stos zdjęć, licznik), ścieżki z paskiem w kolorze grupy (jak .pw-paths).
     Telefon: twoje grupy otwarte, reszta zwinięta. Komputer: tablica grup przyklejona po lewej, wszystkie grupy otwarte, ścieżki w dwóch kolumnach. */
  .cat-head { margin-top: 18px; }
  .cat-head .retry { margin-top: 18px; }
  .cat-sec { margin-top: var(--sp-6); }
  .main > .alert + .cat-sec { margin-top: var(--sp-4); }
  .cat-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-3); flex-wrap: wrap; }
  .cat-sh h2 { font-size: 19px; font-weight: 700; }
  .cat-sh p { font-size: 15px; color: var(--dim); }
  .cat-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); margin-top: var(--sp-3); }
  .cat-cover { display: grid; gap: 4px; align-content: start; text-decoration: none; }
  .cat-cover .photo { aspect-ratio: 4 / 3; margin-bottom: var(--sp-2); --tilt: -1.5deg; }
  .cat-covers li:nth-child(even) .photo { --tilt: 1.5deg; }
  .cat-cover > b { font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
  .cat-gn { font-size: 13px; font-weight: 600; color: var(--dim); }
  .cat-stamp { position: absolute; top: 8px; left: 8px; z-index: 2; }
  .cat-free { justify-self: start; margin-top: 4px; white-space: normal; }
  .cat-cover .bars15 { margin-top: var(--sp-1); }
  .cat-cover .bars15 i.on { background: var(--accent); } /* fiolet marki znika na ciemnym tle */
  .cat-st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--dim); }
  .cat-st .i { width: 14px; height: 14px; margin: 0 -4px 0 0; color: var(--text); }
  .cat-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--l3); }
  .cat-bar { --seg-h: 6px; width: 64px; flex: none; }
  .cat-bar i { background: var(--accent); }

  /* tablica grup */
  .board.cat-board { margin-top: 40px; padding: var(--sp-4); }
  .cat-board h2 { display: flex; align-items: center; gap: var(--sp-2); }
  .cat-n { padding: 2px var(--sp-2); border-radius: 999px; background: color-mix(in oklab, var(--on-board) 14%, transparent); font-size: 17px; letter-spacing: 0; }
  .cat-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); } /* przycisk rośnie do nazwy: dłuższe języki zawijają rząd, nie słowo */
  .cat-jump button { flex: 1 1 128px; display: grid; gap: var(--sp-1); align-content: start; justify-items: start; min-height: 92px; padding: var(--sp-3) var(--sp-3) var(--sp-3); border: 0; border-radius: var(--r-m);
    background: color-mix(in oklab, var(--on-board) 8%, transparent); color: var(--on-board); text-align: left; cursor: pointer; rotate: -.6deg; transition: translate .2s var(--ease); }
  .cat-jump button:nth-child(even) { rotate: .6deg; }
  @media (hover: hover) { .cat-jump button:hover { translate: 0 -2px; } }
  .cat-jump b { font: 800 19px/1.1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.02em; color: var(--g); }
  .cat-jump small { font-size: 13px; font-weight: 600; color: var(--dim); }
  .cat-dots { display: flex; flex-wrap: wrap; gap: 5px; }
  .cat-dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in oklab, var(--g) 34%, transparent); }
  .cat-dots i.on { background: var(--g); }

  /* grupy */
  .cat-groups { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
  .cat-g { scroll-margin-top: 16px; }
  .cat-gh { grid-template-columns: minmax(0, 1fr) auto 24px; rotate: -.4deg; }
  .cat-g:nth-child(even) .cat-gh { rotate: .4deg; }
  .cat-gh > .i { transition: rotate .2s var(--ease); }
  .cat-g[open] > .cat-gh > .i { rotate: 180deg; }
  .cat-gt { display: grid; gap: 2px; }
  .cat-gh h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); font-size: 19px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
  .cat-mine { background: var(--g); rotate: -2deg; }
  .cat-gd { font-size: 15px; line-height: 1.35; } /* --muted na --sunk ma 4,37:1, za mało na AA */
  .cat-gc { margin-top: 4px; font-size: 13px; font-weight: 700; }
  .cat-stack { display: flex; padding-right: 4px; }
  .cat-stack .photo { width: 38px; height: 46px; border-radius: 12px; box-shadow: 0 0 0 3px var(--sunk); --tilt: -6deg; }
  .cat-stack .photo + .photo { margin-left: -16px; --tilt: 4deg; }
  .cat-stack .photo:nth-child(3) { --tilt: 9deg; }
  .cat-rows { display: grid; }
  .cat-rows li:nth-child(odd) .cat-th { --tilt: -3deg; } .cat-rows li:nth-child(even) .cat-th { --tilt: 2deg; }

  /* ładowanie */
  .sk-cover { aspect-ratio: 4 / 3; border-radius: var(--r-m); }
  .sk-board { height: 230px; margin-top: 40px; border-radius: var(--r-l); }
  .sk-g { height: 96px; border-radius: var(--r-m); }

  @media (min-width: 900px) {
    .cat-main { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 56px; align-items: start; }
    .cat-main > * { grid-column: 1 / -1; }
    .cat-main > .cat-board { grid-column: 1; position: sticky; top: 24px; margin-top: 48px; }
    .cat-main > .cat-groups { grid-column: 2; margin-top: 48px; gap: var(--sp-5); }
    .cat-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
    .cat-jump { flex-direction: column; }
    .cat-jump button { min-height: 0; }
    .cat-jump b { font-size: 26px; }
    .cat-gh { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
    .cat-gh > .i { display: none; }
    .cat-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
  }

  /* ---------- Ścieżka (widok jednej ścieżki, 15 rozmów) ----------
     Zdjęcie ścieżki (path-hero) w duotonie twojego znaku, na rogu klocek-tablica, na którym znak rysuje się od ? do twojego.
     Słup = jedno działanie. Tablica = pierścień ze znakiem i 5 części × 3 rozmowy (jak Start), kartka „Zadziałało” kładzie się na jej krawędzi.
     Program na papierze: części jak klocki grup w Ścieżkach (numer = moneta w kolorze znaku części, linia 3 rozmów), rozmowy z paskiem
     w kolorze części; bieżąca rozmowa to mały słup, wynik = klocek-tablica ze znakiem (kolor znaku tylko na ciemnym).
     Komputer: zdjęcie i słup po lewej, tablica, kartka i program po prawej. */
  .crumbs { margin-top: 4px; }
  .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); font-size: 15px; font-weight: 600; color: var(--dim); }
  .crumbs li + li::before { content: "›"; margin-right: var(--sp-1); }
  .crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); text-underline-offset: 3px; }
  .ph-side > .alert { margin-top: var(--sp-2); }
  .ph-hero { margin-top: 48px; }
  .ph-media { position: relative; }
  .ph-photo { aspect-ratio: 16 / 10; --tilt: -1.5deg; view-transition-name: path-hero; }
  .ph-sign { --w: 84px; --h: 92px; --r: 24px; --fs: 60px; --dot: 24px; top: -40px; right: -6px; transition: background .3s; }
  .ph-title { margin-top: var(--sp-4); font-size: 42px; overflow-wrap: anywhere; hyphens: auto; }
  .ph-eff { margin-top: var(--sp-3); font-size: 19px; line-height: 1.4; max-width: 34ch; }
  .ph-eff small { display: block; margin-top: var(--sp-1); font-size: 15px; color: var(--dim); }
  .ph-act { margin-top: var(--sp-4); }
  .ph-act .btn { width: 100%; }
  .ph-act .go-talk > span:first-child { white-space: normal; text-align: left; line-height: 1.2; } /* dłuższe języki: napis się zawija, cena i strzałka zostają */
  .ph-act .next b { color: var(--on-brand); }
  .board.ph-road { margin-top: var(--sp-6); padding-bottom: var(--sp-5); }
  .ph-desc { margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--dim); }
  .ph-road + .sheet.said { margin-top: -18px; rotate: 1.5deg; }
  .ph-prog { margin-top: 44px; }
  .ph-h { font-size: 19px; font-weight: 700; }
  .ph-parts { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
  .ph-part { scroll-margin-top: 16px; }
  .ph-part > summary { grid-template-columns: 36px minmax(0, 1fr) auto 24px; rotate: -.4deg; }
  .ph-part:nth-child(even) > summary { rotate: .4deg; }
  .ph-part > summary > .i { transition: rotate .2s var(--ease); }
  .ph-part[open] > summary > .i { rotate: 180deg; }
  .ph-num { --s: 36px; --coin: var(--g); font-size: 17px; }
  .ph-pt b { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
  .ph-line { --seg-h: 6px; max-width: 96px; margin-top: var(--sp-2); }
  .ph-line i { background: color-mix(in oklab, var(--g) 34%, transparent); }
  .ph-line i.done { background: var(--g); }
  .ph-pt small { display: block; margin-top: var(--sp-1); font-size: 13px; font-weight: 700; } /* --muted na --sunk za słaby na AA */
  .ph-pst { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; white-space: nowrap; }
  .ph-pst .i { width: 18px; height: 18px; }
  .ph-tips { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; min-height: 64px; padding: var(--sp-2) 0; text-decoration: none; }
  .ph-tips .arrow { background: var(--text); color: var(--bg); } /* tusz znika na ciemnym tle */
  .ph-tips b { display: block; font-size: 15px; font-weight: 700; }
  .ph-tips > small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
  .ph-tips > small .i, .ph-tips > .i { width: 16px; height: 16px; }
  .ph-seg { --seg-h: 6px; max-width: 120px; margin-top: var(--sp-1); }
  .ph-seg i { background: var(--c); }
  .ph-talks { display: grid; gap: 2px; }
  .ph-th { --tilt: -3deg; }
  .ph-talks li:nth-child(even) .ph-th { --tilt: 2deg; }
  .ph-tt small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--dim); }
  .ph-again { margin-top: var(--sp-1); background: var(--text); color: var(--bg); white-space: normal; }
  /* bieżąca rozmowa: mały słup */
  .ph-talk.now { --dim: var(--on-brand-dim); margin: 4px -12px; padding: var(--sp-3); border-radius: var(--r-m); background: var(--brand); color: var(--on-brand); rotate: -.6deg; }
  .ph-talk.now .tag { background: var(--on-board); }
  .ph-talk.now:focus-visible { outline-color: var(--text); }
  .ph-more { margin: var(--sp-2) 0 var(--sp-2); padding: var(--sp-3); }
  .sk.ph-sk-photo { aspect-ratio: 16 / 10; margin-top: 48px; border-radius: var(--r-m); }
  .sk.ph-sk-act { height: 120px; margin-top: var(--sp-4); border-radius: var(--r-l); }
  .ph-body > .sk-g { margin-top: var(--sp-3); }
  @media (min-width: 900px) {
    .ph-main { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 64px; align-items: start; }
    .ph-main > .hello, .ph-main > .sr { grid-column: 1 / -1; }
    .ph-body { padding-top: 92px; }
    .board.ph-road { margin-top: 0; padding: var(--sp-5); }
    .ph-title { font-size: 42px; }
  }

  /* ---------- Wskazówki (talia kart przed rozmowami części) ----------
     Karta = wash w kolorze karty (od znaku części do kropki), na niej tablica z tytułem i ogromnym znakiem, pod nią kartka
     „Zamiast / Powiedz” (pigułki brzoskwinia / mięta nad zdaniem, wystają poza kartkę). Za kartą wystaje talia w kolorze następnej.
     Pytanie: odpowiedzi jak klocki (wybrana = tusz), po wyborze dobra z miętowym kółkiem; feedback na kartce z klockiem znaku.
     Koniec: kartka z trzema zdaniami i słup z następną rozmową; bramka: podgląd zasady za kłódką i słup z ceną.
     Telefon: talia wypełnia ekran (karta przewija się w sobie), przyciski na dole. Komputer: tablica części ze spisem kart po lewej. */
  .tip { height: 100dvh; }
  .tip-top { gap: var(--sp-2); }
  .tip-ttl { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
  .tip-ttl b { font-size: 17px; font-weight: 800; color: var(--text); }
  .tip-ttl span { overflow: hidden; text-overflow: ellipsis; }
  .tip-count { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tip-crumbs ol { flex-wrap: nowrap; }
  .tip-crumbs li { white-space: nowrap; }
  .tip-crumbs li { display: flex; align-items: center; }
  .tip-crumbs li:nth-child(2) { min-width: 0; }
  .tip-crumbs li:nth-child(2) a { display: block; min-width: 0; line-height: var(--tap); overflow: hidden; text-overflow: ellipsis; }
  .tip-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tip-side { display: none; }
  .tip-col { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .tip-col > .alert { margin: 0 0 var(--sp-2); }
  /* postęp: segment na kartę w jej kolorze; za bramką kłódka */
  .tip-prog { --seg-h: 12px; margin: var(--sp-1) 0 var(--sp-3); } /* rodzina: pasek segmentów */
  .tip-prog li { display: grid; place-items: center; background: color-mix(in oklab, var(--c) 30%, transparent); }
  .tip-prog li.on { background: var(--c); }
  .tip-prog li.now { background: var(--c); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
  .tip-prog li:has(.i) { background: var(--sunk); }
  .tip-prog .i { width: 12px; height: 12px; color: var(--dim); }
  /* talia */
  .tip-deck { --next: var(--l3); position: relative; flex: 1; min-height: 0; display: grid; isolation: isolate; }
  .tip-deck::before, .tip-deck::after { content: ""; position: absolute; z-index: -1; inset: 10px 4px -6px 10px; border-radius: var(--r-l);
    background: color-mix(in oklab, var(--next) 55%, var(--bg)); rotate: 2.5deg; transition: background .3s; }
  .tip-deck::after { inset: 18px 12px -10px 2px; background: color-mix(in oklab, var(--next) 28%, var(--bg)); rotate: -2deg; z-index: -2; }
  .tip-card { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-2) var(--sp-4); border-radius: var(--r-l);
    background: light-dark(color-mix(in oklab, var(--tone) 50%, var(--bg)), color-mix(in oklab, var(--tone) 30%, var(--bg))); display: flex; flex-direction: column; }
  .tip-card > * { flex: none; }
  .tip-card > .tip-b:only-child { flex: 1; padding-bottom: 76px; } /* okładka: tablica na całą kartę, metka przy dolnej krawędzi */
  .board.tip-b { padding: var(--sp-4) var(--sp-4) 58px; }
  .tip-b .mega { font-size: 160px; margin: -24px -10px 0 6px; }
  .tip-b .mega.is-dot { width: 150px; height: 150px; margin: -76px -76px 0 0; }
  .tip-kick { font-size: 15px; font-weight: 700; color: var(--dim); }
  .tip-h { margin-top: var(--sp-1); font-size: 26px; overflow-wrap: anywhere; }
  .tip-card.t-cover .tip-h { font-size: 42px; }
  .tip-sub { margin-top: var(--sp-2); font-size: 17px; line-height: 1.4; max-width: 34ch; }
  .tip-lead { max-width: 30ch; }
  .tip-meta { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); font-size: 15px; font-weight: 700; }
  .tip-said { clear: both; margin-top: var(--sp-3); }
  .t-quiz .board.tip-b { padding-bottom: var(--sp-4); }
  .t-quiz .tip-b .mega { margin-top: -16px; }
  /* Zamiast / Powiedz: pigułka nad zdaniem, wystaje poza kartkę (dłuższe języki nie ściskają kolumny) */
  .sheet.tip-sheet { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); }
  .say.tip-say { grid-template-columns: 1fr; gap: var(--sp-1); margin: var(--sp-4) 0 0 -40px; }
  .say.tip-say:first-child { margin-top: 0; }
  .tip-say q { margin-left: 40px; }
  .tip-say .pill { margin-left: 0; }
  /* pytanie */
  .tip-quiz fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
  .tip-ask { padding: 0; margin: var(--sp-4) 0 var(--sp-2); font-size: 19px; font-weight: 700; }
  .tip-quiz fieldset > .tip-opt + .tip-opt { margin-top: var(--sp-1); }
  .tip-opt { position: relative; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; min-height: 60px; /* rodzina: klocek na papierze */
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); font: 400 17px/1.4 var(--serif); transition: background .2s, color .2s; }
  .tip-opt:nth-of-type(odd) { rotate: -.5deg; } .tip-opt:nth-of-type(even) { rotate: .5deg; }
  .tip-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .tip-opt:has(:checked) { background: var(--text); color: var(--bg); }
  .tip-opt:has(:focus-visible) { outline: 3px solid var(--text); outline-offset: 3px; }
  .tip-ok { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
  .tip-ok .i { width: 16px; height: 16px; }
  .tip-opt.right .tip-ok { background: var(--hl-better); color: var(--ink); box-shadow: none; }
  .tip-opt.wrong .tip-ok { box-shadow: none; opacity: .7; }
  .tip-fb { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-3); font-size: 15px; line-height: 1.4; }
  .tip-fb:not(:empty) { padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); border-radius: var(--r-s); background: var(--sheet); color: var(--ink); }
  .tip-fb b { font-weight: 800; }
  .tip-fb .sign-tile { flex: none; }
  /* zapamiętaj: trzy zdania na kartce, następna rozmowa na słupie */
  .sheet.tip-keep { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); }
  .tip-keep li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); align-items: start; font: 600 19px/1.3 var(--serif); }
  .tip-next { margin-top: var(--sp-5); }
  .tip-nx { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
  .tip-nx .title { font-size: 19px; }
  .tip-th { width: 64px; height: 64px; border-radius: var(--r-s); --tilt: -3deg; }
  /* bramka: podgląd zasady za kłódką */
  .tip-peek [inert] { opacity: .4; filter: blur(1.5px); user-select: none; }
  .tip-pk { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: 15px; font-weight: 700; }
  .tip-pk .coin { --coin: var(--ink); color: var(--on-board); rotate: none; }
  .tip-pk .coin .i { width: 16px; height: 16px; }
  /* przyciski */
  .tip-nav { display: flex; gap: var(--sp-2); padding: var(--sp-4) 0 calc(var(--sp-2) + env(safe-area-inset-bottom)); }
  .tip-prev { width: 56px; height: 56px; background: var(--sunk); }
  .tip-prev:disabled { opacity: .4; cursor: default; }
  .tip-slot { flex: 1; display: flex; }
  .tip-go { flex: 1; justify-content: space-between; padding: 0 var(--sp-4) 0 var(--sp-5); }
  .tip-go > span:first-child { white-space: normal; text-align: left; line-height: 1.2; }
  .sk.tip-sk-prog { height: 12px; margin: var(--sp-1) 0 var(--sp-3); }
  .sk.tip-sk-card { height: 260px; border-radius: var(--r-l); } /* rodzina .sk: kolor, ruch */
  .sk.tip-sk-sheet { height: 200px; margin: -34px 6px 0 14px; border-radius: var(--r-m); }
  .tip .hello .txt-link { margin-left: var(--sp-3); }
  @media (min-width: 900px) {
    .tip { height: auto; padding-bottom: var(--sp-6); }
    .tip-main { display: grid; grid-template-columns: 340px minmax(0, 620px); column-gap: 64px; align-items: start; justify-content: center; }
    .tip-side { display: block; position: sticky; top: var(--sp-4); margin-top: var(--sp-3); padding: var(--sp-5) var(--sp-4); }
    .tip-path { font-size: 15px; font-weight: 600; color: var(--dim); }
    .tip-sh { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-1); font-size: 26px; font-weight: 800; font-stretch: var(--narrow); line-height: 1.15; }
    .tip-sh .coin { --coin: var(--g); --s: 36px; margin-top: -2px; }
    .tip-toc { display: grid; gap: 4px; margin-top: var(--sp-4); }
    .tip-toc button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-2); align-items: center; width: 100%; min-height: 48px; padding: var(--sp-1);
      border: 0; border-radius: var(--r-s); background: none; color: var(--on-board); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
    .tip-toc button[aria-current] { background: color-mix(in oklab, var(--on-board) 12%, transparent); font-weight: 800; }
    .tip-tn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--c) 26%, transparent);
      color: var(--c); font-weight: 800; rotate: -4deg; }
    .tip-toc button[aria-current] .tip-tn { background: var(--c); color: var(--ink); rotate: -8deg; scale: 1.08; }
    .tip-tn .i { width: 16px; height: 16px; }
    .tip-then { margin-top: var(--sp-5); font-size: 15px; font-weight: 700; color: var(--dim); }
    .tip-talks { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
    .tip-talks li { display: flex; align-items: center; gap: var(--sp-2); font-size: 15px; }
    .tip-mini { width: 36px; height: 36px; flex: none; border-radius: 10px; }
    .tip-talks li:nth-child(odd) .tip-mini { --tilt: -4deg; } .tip-talks li:nth-child(even) .tip-mini { --tilt: 3deg; }
    .tip-col { min-height: 0; }
    .tip-deck::before { inset: 14px -14px -14px 18px; rotate: 3deg; }
    .tip-deck::after { inset: 26px -26px -24px 30px; rotate: 5.5deg; }
    .tip-card { overflow: visible; min-height: 480px; padding: var(--sp-3) var(--sp-3) var(--sp-4); }
    .board.tip-b { padding: var(--sp-5) var(--sp-5) 64px; }
    .tip-b .mega { font-size: 200px; }
    .tip-h { font-size: 42px; }
    .tip-card.t-cover .tip-h { font-size: 62px; }
    .tip-card > .tip-b:only-child { min-height: 440px; }
    .sheet.tip-sheet, .sheet.tip-keep { margin: -34px var(--sp-4) 0 var(--sp-6); }
    .tip-nav { padding-top: var(--sp-4); }
    .tip-sub { font-size: 19px; }
    .say.tip-say.you q { font-size: 19px; }
    .sheet.tip-sheet { padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6); }
    .t-gate .tip-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-2); } /* okno 800 px: cena pod kciukiem bez przewijania */
    .tip-keep li { font-size: 26px; }
  }

  /* ---------- Profil (awatar w nagłówku) ----------
     Tożsamość: moneta z inicjałem, na rogu klocek-tablica z twoim znakiem; imię z kropką. Tablica = twój znak: ogromny znak przycięty
     krawędzią, droga ? ?! ! . jako cztery klocki (bieżący pełny i przechylony), liczby w kolorach znaków (rozmowy ?, dni !, cele .).
     Kartka = twoje dwa zdania, pigułki wystają poza kartkę (mięta = mocna strona, brzoskwinia = do przećwiczenia). Słup = odblokowanie.
     Ustawienia i konto: zwykłe wiersze na papierze, bez kart i obwódek, tylko linia między wierszami. Komputer: tożsamość i kartka po lewej, listy po prawej. */
  .pf-main > .alert { margin-top: var(--sp-2); }
  .pf-id { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); }
  .pf-id > div { flex: 1; min-width: 0; }
  .pf-id h1 { overflow-wrap: anywhere; hyphens: auto; }
  .pf-ava { position: relative; display: grid; place-items: center; flex: none; width: 88px; height: 88px; border-radius: 50%; background: var(--brand); color: var(--on-brand);
    font: 800 42px/1 var(--sans); font-stretch: var(--narrow); rotate: -6deg; }
  .pf-ava .sign-tile { --w: 40px; --h: 40px; --r: 12px; --fs: 22px; --dot: 12px; top: auto; right: -14px; bottom: -6px; rotate: 10deg; }
  .pf-mail { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); font-size: 15px; color: var(--dim); }
  .pf-mail .i { width: 18px; height: 18px; color: var(--text); }
  .pf-mail > span { min-width: 0; overflow-wrap: anywhere; }
  .board.pf-board { margin-top: 40px; }
  .pf-kick { font-size: 15px; font-weight: 700; color: var(--dim); }
  .pf-level { margin-top: 4px; overflow-wrap: anywhere; }
  .pf-desc { margin-top: var(--sp-2); font-size: 15px; line-height: 1.4; color: var(--dim); }
  .pf-road { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); padding-top: var(--sp-5); }
  .pf-road > span { display: grid; place-items: center; height: 56px; border-radius: var(--r-s); background: color-mix(in oklab, var(--c) 24%, transparent); color: var(--c);
    font: 800 26px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.04em; rotate: -2deg; }
  .pf-road > span:nth-child(even) { rotate: 2deg; }
  .pf-road > .now { background: var(--c); color: var(--ink); scale: 1.12; rotate: -7deg; }
  .pf-road .dotg { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
  .pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
  .pf-stats b { display: block; font: 800 42px/.9 var(--sans); font-stretch: var(--narrow); letter-spacing: -.04em; color: var(--c); font-variant-numeric: tabular-nums; }
  .pf-stats span { display: block; margin-top: var(--sp-1); font-size: 13px; line-height: 1.3; color: var(--dim); overflow-wrap: anywhere; hyphens: auto; }
  .pf-more { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 48px; margin-top: var(--sp-4); border-top: 1px solid var(--on-board-faint);
    font-size: 15px; font-weight: 700; color: var(--on-board); text-decoration: none; }
  .pf-more .i { width: 20px; height: 20px; }
  .sheet.pf-said { display: grid; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); }
  .pf-say { display: grid; gap: var(--sp-2); }
  .pf-say > .pill { margin: 0 0 0 -40px; font-size: 15px; line-height: 1.2; text-align: left; } /* wystaje poza kartkę */
  .pf-say.better > .pill { background: var(--hl-better); rotate: 3deg; }
  .pf-say q { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
  .pf-say.you q { font-size: 19px; font-weight: 400; }
  .hl.better { --hl: var(--hl-better); } .hl.you { --hl: var(--hl-you); }
  /* listy */
  .pf-sec { margin-top: 40px; }
  .pf-h { font-size: 19px; font-weight: 700; }
  .pf-sub { margin-top: 4px; font-size: 15px; color: var(--dim); max-width: 44ch; }
  .pf-rows { margin-top: var(--sp-1); }
  .pf-rows li + li { border-top: 1px solid var(--line); }
  .pf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: var(--sp-3); align-items: center; width: 100%; min-height: 56px; padding: var(--sp-2) 0;
    border: 0; background: none; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
  .pf-row > .i { width: 20px; height: 20px; color: var(--dim); }
  .pf-rt b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  .pf-rt small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--dim); overflow-wrap: anywhere; }
  .pf-rt small .i { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; color: var(--text); }
  .pf-val { max-width: 18ch; font-size: 15px; line-height: 1.35; color: var(--dim); text-align: right; overflow-wrap: anywhere; }
  .pf-row.path { grid-template-columns: 56px minmax(0, 1fr) 20px; }
  .pf-th { width: 56px; height: 56px; border-radius: var(--r-s); --tilt: -3deg; }
  .pf-buy { margin-top: var(--sp-2); padding: var(--sp-3); }
  .pf-buy .next { text-align: center; }
  .pf-buy .btn > span:first-child { white-space: normal; text-align: left; line-height: 1.2; } /* dłuższe języki: napis się zawija, cena zostaje */
  .pf-buy .tag { flex: none; }
  .pf-ios { display: none; }
  [data-os="ios"] .pf-ios { display: block; }
  /* przełącznik: tor i gałka; stan niesie położenie i wypełnienie, nie sam kolor */
  .pf-toggle { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-knob { position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--sunk); box-shadow: inset 0 0 0 2px var(--muted); }
  .pf-knob::after { content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); }
  [aria-checked="true"] > .pf-knob { background: var(--accent); box-shadow: none; }
  [aria-checked="true"] > .pf-knob::after { top: 4px; left: 24px; width: 24px; height: 24px; background: var(--bg); }
  .pf-end { display: grid; justify-items: start; gap: var(--sp-2); margin-top: 40px; }
  .pf-end .btn-sm { text-decoration: none; }
  .pf-del { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--danger); font-size: 15px; font-weight: 700; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; }
  .pf-ver { font-size: 13px; color: var(--dim); }
  /* arkusz „Usuń konto” (język arkusza konta: .acct) */
  .pf-sheet .alert { align-items: center; }
  .pf-acts { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
  .pf-acts .btn { width: 100%; }
  .sk.pf-sk-ava { width: 88px; height: 88px; flex: none; border-radius: 50%; }
  .sk.pf-sk-board { height: 360px; margin-top: 40px; }
  @media (min-width: 900px) {
    .pf-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 72px; align-items: start; }
    .pf-main > :is(.alert, .hello, .sr) { grid-column: 1 / -1; }
    .pf-lists > .pf-sec:first-child { margin-top: var(--sp-4); }
    .pf-ava { width: 112px; height: 112px; font-size: 62px; }
    .board.pf-board { padding: var(--sp-5) var(--sp-5) 64px; }
    .pf-stats b { font-size: 64px; }
    .pf-said { max-width: 560px; }
  }

  /* ---------- Postępy (zakładka) ----------
     Tablica znaku: ogromny twój znak przycięty krawędzią (od 3 rozmów), skala ? ?! ! . jako cztery klocki z krótką nazwą i liczbą „N×”
     (osiągnięte pełne, bieżący przechylony jak na Profilu), ostatnie 7 dni jako klocki w kolorze najlepszego wyniku dnia, seria i jasny przycisk.
     Ścieżki = małe tablice z pierścieniem i 5 częściami (jak Start). Historia = wiersze jak w programie ścieżki, dni jako nagłówki.
     Zdania, które zadziałały = kartki „Zadziałało”. Komputer: tablica na całą szerokość (dwie kolumny), sekcje w trzech kolumnach. */
  .pg-main > .alert { margin-top: var(--sp-2); }
  .board.pg-board { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .pg-board > .mega { margin-top: -40px; }
  .pg-kick { font-size: 15px; font-weight: 700; color: var(--dim); }
  .pg-title { margin-top: 4px; font-size: 31px; overflow-wrap: anywhere; hyphens: auto; }
  .pg-desc { margin-top: var(--sp-2); font-size: 15px; line-height: 1.4; color: var(--dim); max-width: 40ch; }
  /* skala: klocki jak droga na Profilu; osiągnięte (jest liczba > 0) pełne, bieżący większy i przechylony */
  .pg-scale { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); padding-top: var(--sp-5); }
  .pg-scale li { display: grid; align-content: start; gap: 4px; min-width: 0; }
  .pg-tile { display: grid; place-items: center; height: 56px; margin-bottom: 4px; border-radius: var(--r-s); background: color-mix(in oklab, var(--c) 24%, transparent); color: var(--c);
    font: 800 26px/1 var(--sans); font-stretch: var(--narrow); letter-spacing: -.04em; rotate: -2deg; }
  .pg-scale li:nth-child(even) .pg-tile { rotate: 2deg; }
  .pg-tile .dotg { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
  .pg-scale .on .pg-tile { background: var(--c); color: var(--ink); }
  .pg-scale [aria-current] .pg-tile { scale: 1.12; rotate: -7deg; }
  .pg-scale li > b { font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
  .pg-scale small { font: 800 19px/1 var(--sans); font-stretch: var(--narrow); color: var(--dim); font-variant-numeric: tabular-nums; }
  .pg-scale .on small { color: var(--on-board); }
  /* ostatnie 7 dni: klocki tygodnia z arkusza serii, na tablicy; dzień z rozmową w kolorze najlepszego wyniku, ze znakiem tuszem */
  .pg-days { margin-top: var(--sp-5); scroll-margin: 96px 0; border-radius: var(--r-s); }
  .pg-days h3 { font-size: 15px; font-weight: 700; }
  .pg-days .week { margin-top: var(--sp-2); }
  .pg-days .week i { display: grid; place-items: center; background: var(--on-board-faint); color: var(--ink); font: 800 19px/1 var(--sans); font-style: normal; font-stretch: var(--narrow); }
  .pg-days .week li.on i { background: var(--c); }
  .pg-days .week li.today { color: var(--on-board); }
  .pg-days .week li.today:not(.on) i { background: none; box-shadow: inset 0 0 0 2px var(--on-board); }
  .pg-days .week .dotg { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
  .pg-streak { margin-top: var(--sp-3); font-size: 15px; line-height: 1.4; color: var(--dim); }
  .pg-streak b { color: var(--on-board); }
  .pg-board .go-talk { width: 100%; margin-top: var(--sp-4); }
  .pg-board .go-talk > span:first-child { white-space: normal; text-align: left; line-height: 1.2; } /* dłuższe języki: napis się zawija, tag i strzałka zostają */
  .pg-board .time { margin-top: var(--sp-2); font-size: 13px; color: var(--dim); text-align: center; }
  /* sekcje */
  .pg-sec { margin-top: 40px; }
  .pg-sec > h2 { font-size: 19px; font-weight: 700; }
  /* ścieżka: mała tablica, cała jest linkiem */
  .pg-paths { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
  .board.pg-path { display: block; padding: var(--sp-4); text-decoration: none; transition: translate .2s var(--ease); }
  .pg-paths li:nth-child(even) .pg-path { rotate: .4deg; } .pg-paths li:nth-child(odd) .pg-path { rotate: -.4deg; }
  @media (hover: hover) { .pg-path:hover { translate: 0 -2px; } }
  .pg-path .road-top { align-items: start; }
  .pg-pg { font-size: 13px; font-weight: 800; color: var(--g); }
  .pg-pn { display: block; margin-top: 2px; font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
  .pg-ps { display: flex; align-items: center; gap: 4px; margin-top: var(--sp-1); font-size: 15px; line-height: 1.35; color: var(--dim); }
  .pg-ps .i { width: 16px; height: 16px; color: var(--on-board); }
  .pg-path .parts5 { margin-top: var(--sp-3); }
  /* historia: dzień = nagłówek, wiersze jak w programie ścieżki; grupa z kółkiem w jej kolorze (kształt, nie tekst) */
  .pg-day { margin-top: var(--sp-4); font-size: 15px; font-weight: 700; color: var(--dim); }
  .pg-sec > .pg-day:first-of-type { margin-top: var(--sp-2); }
  .pg-talks > li + li { border-top: 1px solid var(--line); }
  .pg-grp { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: 4px; font-size: 13px; font-weight: 700; }
  .pg-grp::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--g); }
  .pg-again { margin: -4px 0 var(--sp-2) 66px; text-decoration: none; }
  /* zdania, które zadziałały: kartki jedna pod drugą, na przemian krzywe */
  .pg-said { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
  .pg-said > .sheet { margin: 0 var(--sp-1) 0 var(--sp-3); }
  .pg-said > .sheet:nth-child(even) { rotate: 1.2deg; }
  /* ładowanie */
  .sk.pg-sk-board { height: 420px; margin-top: var(--sp-4); border-radius: var(--r-l); }
  .sk.pg-sk-path { height: 168px; margin-top: var(--sp-3); border-radius: var(--r-l); }
  @media (min-width: 900px) {
    .board.pg-board { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-5) var(--sp-5); }
    .pg-board > .mega { position: absolute; top: -30px; right: 28px; float: none; margin: 0; scale: 1.5; transform-origin: 100% 0; }
    .pg-board > .mega.is-dot { top: -96px; right: -96px; }
    .pg-board:has(> .mega) > .pg-b { padding-top: 200px; } /* tydzień pod znakiem w rogu */
    .pg-title { font-size: 42px; }
    .pg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 48px; align-items: start; }
  }

  /* pasek makiety (poza ekranem aplikacji) */
  .rts-bar { position: fixed; z-index: 50; right: 8px; top: 40%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 340px;
    padding: var(--sp-1); border-radius: var(--r-s); background: var(--text); color: var(--bg); font-size: 13px; opacity: .94; }
  .rts-bar button { min-height: 28px; padding: 2px var(--sp-2); border: 0; border-radius: 7px; background: none; color: inherit; cursor: pointer; }
  .rts-bar button[aria-pressed="true"] { background: var(--bg); color: var(--text); }
  .rts-bar:not(.open) { opacity: .5; } .rts-bar:not(.open):is(:hover, :focus-within) { opacity: .94; }
  .rts-bar:not(.open) > :not(.rts-tog) { display: none; }
  .rts-bar.open .rts-tog { flex-basis: 100%; text-align: right; font-weight: 700; }
}

/* ===== ruch (tylko przy prefers-reduced-motion: no-preference) ===== */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* wspólne */
    .dots i { animation: hop 1s ease-in-out infinite; }
    .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
    .drawer[open] { animation: rise .35s var(--ease) both; }
    :is(.sk, .skel i) { animation: pulse 1.2s ease-in-out infinite alternate; }
    /* jedno wejście: znak wsuwa się, kartka kładzie się, zakreślacz pociąga raz */
    .enter .mega { animation: mega-in .6s var(--ease) both; }
    .enter .board .hl { animation: sweep .45s .5s var(--ease) both; }
    .enter .main > .sheet:first-child { animation: lay .5s .3s var(--ease) both; }
    .enter :is(.said-q, .say.better) .hl { animation: sweep .55s .9s var(--ease) both; }
    .enter .hl.pen { animation: sweep .7s .35s var(--ease) both; }
    /* Wynik: znacznik skali jedzie razem z odliczaniem (count 700 ms), kropka celu na końcu; rozwinięte „więcej” kładzie kartkę i napełnia paski ocen */
    .enter .scale .mark { animation: mark-in .7s var(--ease) both; }
    .enter .verdict .hdot.done { animation: pop .45s var(--ease) .8s both; }
    .more[open] .in > .sheet { animation: lay .4s .1s var(--ease) both; }
    .more[open] .track > i { animation: grow .6s .1s var(--ease) both; }
    /* Start */
    .enter .window { animation: lay .5s var(--ease) both; }
    .enter .ring .fg { animation: ring-in .8s .2s var(--ease) both; }
    .enter .scene .typing { display: inline-flex; animation: gone .01s 1.1s forwards; }
    .enter .scene .bubble:not(.typing) { transform-origin: 0 100%; animation: pop .5s var(--ease) 1.1s both; }
    .enter .scene .sign-tile { animation: settle .7s var(--ease) .2s both; }
    .enter .scene + .start-grid .sheet:first-child { animation: lay .5s .25s var(--ease) both; }
    .enter .parts5 i.done { animation: fade .3s ease-out calc(.4s + var(--n) * 90ms) both; }
    .enter .hello .hdot { animation: pop .4s var(--ease) .6s both; }
    /* Logowanie */
    .lg-hero .mega.swap { animation: sign-in .45s var(--ease) both; } /* zmiana aktu: znak pojawia się w miejscu, bez wjazdu od dołu */
    .act-0.on .lg-bubble { transform-origin: 0 100%; animation: pop .5s var(--ease) both; }
    .act-1.on .lg-card, .act-2.on .lg-card { animation: lay .5s var(--ease) both; }
    .act-1.on .hl, .act-2.on .better .hl { animation: sweep .45s .45s var(--ease) both; }
    .act-3.on .dot { animation: pop .5s var(--ease) .3s both; }
    .lg-claim.pop { animation: fade .45s ease-out both; }
    .lg-sub.pop { animation: fade .45s ease-out .12s both; }
    /* pasek aktów odmierza czas bieżącego aktu (2,8 s, jak w skrypcie); po pauzie stoi pełny */
    .lg-hero.playing .acts-bar i.on { background: linear-gradient(var(--g) 0 0) 0 0 / 0 100% no-repeat color-mix(in srgb, var(--g) 35%, transparent); animation: fill 2.8s linear forwards; }
    /* arkusz: klocek RDY. siada, kropka tytułu pojawia się; formularz e-mail rozwija się płynnie, błąd pola wchodzi miękko */
    .enter .login-tile { animation: settle .6s var(--ease) .15s both; }
    .enter .login h1 .hdot { animation: pop .4s var(--ease) .55s both; }
    /* rozwijane: logowanie e-mailem, „więcej” w wyniku, grupy ścieżek */
    :is(.mailbox, .more, .cat-g, .ph-part) { interpolate-size: allow-keywords; }
    :is(.mailbox, .more, .cat-g, .ph-part)::details-content { height: 0; overflow: clip; overflow-clip-margin: 12px; transition: height .3s var(--ease), content-visibility .3s allow-discrete; }
    :is(.mailbox, .more, .cat-g, .ph-part)[open]::details-content { height: auto; }
    .fld.err .fmsg { animation: fade .3s ease-out both; }
    /* Wybór rozmowy */
    .pk-opt { transition: translate .2s var(--ease), scale .15s var(--ease); }
    a.pk-opt:active { scale: .98; } /* telefon: kafel to link, dotknięcie go wciska */
    .pk-line { transition: background .25s, color .25s, rotate .3s var(--ease), box-shadow .3s var(--ease); }
    .pk-opt::after { transition: scale .35s var(--ease); }
    .pk-radio, .pk-radio .i { transition: background .2s, opacity .2s; }
    .enter .pk-tile { animation: settle .7s var(--ease) var(--d, 0s) both; }
    .enter .pk-eff .hl { animation: sweep .55s calc(.5s + var(--d, 0s)) var(--ease) both; }
    /* rozmówca zaczyna: dymek z pierwszym zdaniem wyskakuje po klocku; kropka nagłówka na końcu */
    .enter .pk-line { transform-origin: 0 100%; animation: pop .45s var(--ease) calc(.35s + var(--d, 0s)) both; }
    .enter .pk-head .hdot { animation: pop .4s var(--ease) .6s both; }
    /* komputer: zmiana wyboru podmienia cel w słupie */
    .pk-goalt.pop { animation: fade .35s ease-out both; }
    /* Rozmowa */
    .m.them:not(#typing) { transform-origin: 0 100%; animation: pop .35s var(--ease) both; }
    .m.self { transform-origin: 100% 100%; animation: pop .3s var(--ease) both; }
    .m-narr, .m-note { animation: fade .4s ease-out both; }
    .cv-mood.swap { animation: settle .5s var(--ease) both; }
    .cv-brief { transition: grid-template-rows .3s var(--ease); }
    .cv-tips:not([hidden]) .cv-tip { animation: lay .35s var(--ease) both; }
    .cv-tips:not([hidden]) li:nth-child(2) .cv-tip { animation-delay: .05s; } .cv-tips:not([hidden]) li:nth-child(3) .cv-tip { animation-delay: .1s; }
    .cv-side .cv-tip { animation: lay .4s var(--ease) both; } /* komputer: nowe podpowiedzi po każdej turze kładą się jak na telefonie */
    .cv-side li:nth-child(2) .cv-tip { animation-delay: .08s; } .cv-side li:nth-child(3) .cv-tip { animation-delay: .16s; }
    .cv-tipbtn.nudge { animation: nudge .9s var(--ease) 2; }
    .enter .cv-shot .sign-tile { animation: settle .7s var(--ease) .15s both; }
    .enter .cv-first { animation: lay .5s .3s var(--ease) both; }
    /* scena: kropka celu i kroki „Jak to rozegrać” po kolei; czat: postęp i plan przechodzą płynnie z tury na turę,
       koniec rozmowy podaje przycisk wyniku jak kartkę, pytanie „Zakończyć?” i błąd wysyłki nie wyskakują skokiem */
    .enter .cv-scene .cv-goal .hdot { animation: pop .4s var(--ease) .7s both; }
    .enter .cv-steps li { animation: lay .4s var(--ease) calc(.45s + var(--i, 0) * .1s) both; }
    .cv-steps li:nth-child(2) { --i: 1; } .cv-steps li:nth-child(3) { --i: 2; } .cv-steps li:nth-child(4) { --i: 3; }
    .cv-prog li { transition: background .3s; }
    .cv-plan .coin { transition: background .3s, color .3s, rotate .35s var(--ease), box-shadow .3s; }
    .cv-end:not([hidden]) { animation: lay .45s .15s var(--ease) both; }
    .cv-ask[open] { animation: lay .3s var(--ease) both; }
    .cv-ask[open]::backdrop { animation: fade .25s ease-out both; }
    .m-fail { animation: fade .3s ease-out .2s both; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) { .login[open] { animation: none; } }
  /* Awaria: litery siadają, kartka się kładzie, zakreślacz pociąga; przy łączeniu puste kółko pulsuje, po powrocie kropka wskakuje */
  @media (prefers-reduced-motion: no-preference) {
    .enter .aw-rdy { animation: mega-in .6s var(--ease) both; }
    .enter .aw-sheet { animation: lay .5s .3s var(--ease) both; }
    .enter .aw-sheet .hl { animation: sweep .45s .8s var(--ease) both; }
    .aw[data-s="retry"] .aw-rdy i { animation: pulse .7s ease-in-out infinite alternate; }
    .aw[data-s="ok"] .aw-rdy i, .aw[data-s="ok"] .aw-h .hdot { animation: pop .6s var(--ease) .2s both; }
  }
  /* Czekanie */
  @media (prefers-reduced-motion: no-preference) {
    .ck-sheet { animation: lay .5s .1s var(--ease) both; transition: box-shadow .6s var(--ease); }
    .ck-board .mega.swap { animation: sign-in .45s var(--ease) both; }
    .ck-board .mega.is-dot.swap { animation: pop .6s var(--ease) both; }
    .ck-said .hl { transition: background-size .55s var(--ease); }
    .ck-said li, .ck-better { transition: opacity .5s ease-out; }
    .ck-veil i { transition: background-size .5s var(--ease); }
    :is(.ck-tile, .ob-tile) { transition: background .3s, color .3s, scale .4s var(--ease), rotate .4s var(--ease); }
    .ck:not(.paused) .ck-road .now .ck-tile { animation: ck-beat .92s ease-in-out infinite; }
    .ck[data-step="3"] .ck-road .now .ck-tile { animation-duration: 1.25s; } /* kropka bije spokojniej */
    .ck:not(.paused)[data-step="2"] .ck-veil i { animation: ck-write 1.1s ease-in-out infinite alternate; }
    .ck[data-step="3"] .ck-face { animation: pop .5s var(--ease) both; }
    /* nazwa kroku (na telefonie duży napis pod klockami) wchodzi zamiast przeskoczyć; dopisek „dłużej” i brak sieci pojawiają się miękko */
    .ck-road .now .ck-lb { animation: fade .4s ease-out both; }
    .ck-lb { transition: color .3s; }
    #ck-msg > * { animation: fade .35s ease-out both; }
    /* Paywall: kartka z twojej rozmowy kładzie się, „Ty” zakreśla się przed „Lepiej”; zakup: 5 części ścieżki wchodzi po kolei.
       Gość: zaznaczona grupa rozwija swoje ścieżki, znaczek ✓ wskakuje; w arkuszu konta wybrane grupy wskakują jak naklejki */
    .enter .pw-sheet { animation: lay .5s .25s var(--ease) both; }
    .enter .pw-sheet .say.you .hl { animation: sweep .45s .6s var(--ease) both; }
    .enter .pw-head .hdot { animation: pop .4s var(--ease) .55s both; }
    .enter .pw-parts li { animation: lay .4s var(--ease) calc(.35s + var(--i, 0) * 70ms) both; }
    .pw-paths:not([hidden]) li { animation: lay .3s var(--ease) calc(var(--i, 0) * 40ms) both; }
    .acct-tags .tag { animation: pop .35s var(--ease) calc(.2s + var(--i, 0) * 60ms) both; }
    :is(.pw-parts, .pw-paths, .acct-tags) > li:nth-child(2) { --i: 1; } :is(.pw-parts, .pw-paths, .acct-tags) > li:nth-child(3) { --i: 2; }
    :is(.pw-parts, .pw-paths, .acct-tags) > li:nth-child(4) { --i: 3; } :is(.pw-parts, .pw-paths, .acct-tags) > li:nth-child(5) { --i: 4; }
    .pw-check { transition: background .2s, box-shadow .2s; }
    .pw-check .i { transition: opacity .2s, scale .3s var(--ease); scale: .4; }
    :is(.pw-tog[aria-pressed="true"], .pw-tog:has(> input:checked)) .pw-check .i { scale: 1; }
    #buy-alert .alert, #pick-err .alert { animation: fade .3s ease-out both; }
    /* Onboarding: przy zmianie kroku znak w rogu pojawia się, bieżący klocek przechyla się */
    .ob-road .mega { animation: sign-in .45s var(--ease) both; }
    .ob-road .mega.is-dot { animation: pop .6s var(--ease) both; }
    .ob-steps .now .ob-tile { animation: settle .6s var(--ease) both; }
    /* kolejny krok wchodzi: nagłówek, pola i słup jeden po drugim, kropka nagłówka na końcu; wybrana odpowiedź podświetla się płynnie z ✓ */
    .ob-main > .ob-head { animation: fade .35s ease-out both; }
    .ob-main > :is(.ob-set, .ob-list) { animation: lay .4s var(--ease) .1s both; }
    .ob-main > .ob-set + .ob-set { animation-delay: .18s; }
    .ob-main > .ob-bar { animation: lay .45s var(--ease) .25s both; }
    .ob-head .hdot { animation: pop .4s var(--ease) .5s both; }
    :is(.ob-opt, .ob-chip) { transition: background .2s, color .2s; }
    :is(.ob-opt, .ob-chip):has(:checked) .i { animation: pop .3s var(--ease) both; }
    :is(#err, #minor) .alert { animation: fade .3s ease-out both; }
    /* Ścieżki: kropka nagłówka, na okładkach klocek ze znakiem siada, pieczątka wskakuje, postęp napełnia się po kolei;
       grupa na telefonie rozwija się płynnie (reguła ::details-content wyżej), okładka i wiersz wciskają się przy dotknięciu */
    .enter .cat-head .hdot { animation: pop .4s var(--ease) .6s both; }
    .enter .cat-cover .sign-tile { animation: settle .6s var(--ease) .25s both; }
    .enter .cat-stamp { animation: pop .4s var(--ease) .7s both; }
    .enter .cat-cover .bars15 i.on { animation: fade .25s ease-out calc(.4s + var(--n) * 60ms) both; }
    .enter .cat-bar > i { animation: grow .6s .3s var(--ease) both; }
    :is(.cat-cover, .cat-rows a, a.ph-talk) { transition: scale .15s var(--ease); }
    :is(.cat-cover, .cat-rows a, a.ph-talk):active { scale: .98; }
    /* Ścieżki: grupa wybrana z tablicy albo z ?g= raz rozbłyskuje obwódką w kolorze grupy */
    .cat-g.flash > .cat-gh { animation: cat-flash 1.2s ease-out both; }
    /* Wskazówki: karta wjeżdża z kierunkiem, zakreślacz pociąga raz, znak na zasadzie „Kropka, nie pytajnik” rysuje drogę */
    .tip-card.in-next, .tip-card.in-prev { animation: tip-in .45s var(--ease) both; }
    .tip-card.in-prev { --dx: -1; }
    /* karta (wejście ekranu albo przełożenie): kartka „Zamiast / Powiedz” kładzie się na tablicy, najpierw zakreśla się „Zamiast”, potem „Powiedz”;
       na „Zapamiętaj” trzy zdania wchodzą po kolei; odpowiedź w pytaniu: znaczek i feedback wskakują raz */
    :is(.enter .tip-card, .tip-card.in-next, .tip-card.in-prev) .hl { animation: sweep .45s .3s var(--ease) both; }
    :is(.enter .tip-card, .tip-card.in-next, .tip-card.in-prev) .tip-sheet { animation: lay .45s .15s var(--ease) both; }
    :is(.enter .tip-card, .tip-card.in-next, .tip-card.in-prev) .say.better .hl { animation-delay: .75s; }
    :is(.enter .tip-card, .tip-card.in-next, .tip-card.in-prev) .tip-peek .hl { animation: none; }
    :is(.enter .tip-card, .tip-card.in-next, .tip-card.in-prev) .hdot { animation: pop .4s var(--ease) .55s both; }
    :is(.enter .tip-card, .tip-card.in-next, .tip-card.in-prev) .tip-keep li { animation: lay .4s var(--ease) calc(.2s + var(--i, 0) * .12s) both; }
    .tip-keep li:nth-child(2) { --i: 1; } .tip-keep li:nth-child(3) { --i: 2; }
    .tip-opt:is(.right, .wrong) .tip-ok { animation: pop .35s var(--ease) both; }
    .tip-fb:not(:empty) { animation: fade .35s ease-out both; }
    .tip-fb .sign-tile { animation: settle .5s var(--ease) .1s both; }
    .tip-b .mega.swap { animation: sign-in .45s var(--ease) both; }
    .tip-b .mega.is-dot.swap { animation: pop .6s var(--ease) both; }
    .tip-prog li { transition: background .3s, box-shadow .3s; }
    /* Ścieżka: znak na klocku rysuje się (od lewej, jak pisany), kropka pojawia się; kartka kładzie się na tablicy */
    .ph-sign > b.draw { animation: draw .5s var(--ease) both; }
    .ph-sign > b.dotg.draw { animation: pop .5s var(--ease) both; }
    .enter .ph-road + .sheet { animation: lay .5s .35s var(--ease) both; }
    /* „Teraz” przy bieżącej rozmowie wskakuje po znaku; część otwarta przez „Powtórz rozmowę” raz rozbłyskuje jak grupa w Ścieżkach */
    .enter .ph-talk.now .tag { animation: pop .4s var(--ease) .9s both; }
    .ph-part.flash > summary { animation: cat-flash 1.2s ease-out both; }
    /* Profil: bieżący klocek drogi siada, kartka kładzie się na tablicy, zakreślacz pociąga raz, przełącznik przesuwa gałkę */
    .enter .pf-road > .now { animation: settle .6s var(--ease) .3s both; }
    .enter .pf-board + .sheet { animation: lay .5s .35s var(--ease) both; }
    .enter .pf-say .hl { animation: sweep .5s .7s var(--ease) both; }
    .enter .pf-say.you .hl { animation-delay: 1s; } /* najpierw mocna strona, potem do przećwiczenia */
    .enter .pf-ava .sign-tile { animation: settle .6s var(--ease) .15s both; }
    .enter .pf-id .hdot { animation: pop .4s var(--ease) .5s both; }
    .drawer[open]::backdrop { animation: fade .25s ease-out both; } /* arkusze (logowanie, usuń konto): tło ściemnia się płynnie */
    /* Postępy: bieżący klocek skali siada, kartki kładą się */
    .enter .pg-scale [aria-current] .pg-tile { animation: settle .6s var(--ease) .3s both; }
    .enter .pg-said > .sheet { animation: lay .5s .35s var(--ease) both; }
    /* tydzień zapala się dzień po dniu (od wtorku do dziś), dni z rozmową wskakują ze znakiem; ścieżka wciska się przy dotknięciu */
    .enter .pg-days .week li.on i { animation: pop .4s var(--ease) calc(.4s + var(--d) * 70ms) both; }
    a.pg-path { transition: scale .15s var(--ease); }
    a.pg-path:active { scale: .98; }
    .pf-knob, .pf-knob::after { transition: background .2s, box-shadow .2s, left .2s var(--ease), top .2s var(--ease), width .2s var(--ease), height .2s var(--ease); }
  }
  @keyframes mark-in { from { left: 0; } }
  @keyframes grow { from { width: 0; } }
  @keyframes fill { to { background-size: 100% 100%; } }
  @keyframes draw { from { clip-path: inset(0 100% 0 0); } }
  @keyframes tip-in { from { opacity: 0; translate: calc(var(--dx, 1) * 56px) 0; rotate: calc(var(--dx, 1) * 4deg); } }
  @keyframes cat-flash { from { box-shadow: 0 0 0 6px var(--g); } }
  @keyframes ck-beat { 50% { scale: 1.22; } }
  @keyframes ck-write { from { background-size: 8% 100%, auto; } to { background-size: 100% 100%, auto; } }
  @keyframes mega-in { from { opacity: 0; translate: 0 40%; rotate: 0deg; } }
  @keyframes ring-in { from { stroke-dasharray: 0 100; } }
  @keyframes sweep { from { background-size: 0 100%; } }
  @keyframes lay { from { opacity: 0; translate: 0 18px; rotate: 0deg; box-shadow: 0 0 0 var(--tone); } }
  @keyframes gone { to { display: none; } }
  @keyframes hop { 50% { translate: 0 -4px; } }
  @keyframes pop { from { opacity: 0; scale: .6; } }
  @keyframes settle { from { opacity: 0; translate: 0 -16px; rotate: 6deg; } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes rise { from { translate: 0 40%; } }
  @keyframes sign-in { from { opacity: 0; rotate: 0deg; } }
  @keyframes pulse { to { opacity: .55; } }
  @keyframes nudge { 30% { rotate: -8deg; scale: 1.08; } 60% { rotate: 4deg; } }
}

/* przejście katalog ↔ ścieżka: leci tylko zdjęcie (view-transition-name: path-hero, nadawane w JS), reszta strony bez przenikania.
   Włącza je każdy z tych dwóch ekranów sam (lokalny styl ekranu z @view-transition { navigation: auto; types: path-hero } przy reduced-motion: no-preference),
   a wyłączenie przenikania dotyczy tylko tego typu, więc inne przejścia (rozmowa) zostają bez zmian. */
html:active-view-transition-type(path-hero)::view-transition-group(root),
html:active-view-transition-type(path-hero)::view-transition-old(root),
html:active-view-transition-type(path-hero)::view-transition-new(root) { animation: none; }