@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0300-0301, U+0304, U+0306, U+0308, U+030F, U+0311, U+0400-045F, U+0490-0491, U+04B0-04B1, U+04C1-04C2, U+04D0-04D3, U+04D6-04D7, U+04DC-04DF, U+04E2-04E7, U+04EC-04F1, U+04F4-04F5, U+04F8-04F9, U+2116;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0300-0301, U+0304, U+0306, U+0308, U+030F, U+0311, U+0400-045F, U+0490-0491, U+04B0-04B1, U+04C1-04C2, U+04D0-04D3, U+04D6-04D7, U+04DC-04DF, U+04E2-04E7, U+04EC-04F1, U+04F4-04F5, U+04F8-04F9, U+2116;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-sans-3-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-sr-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0300-0301, U+0304, U+0306, U+0308, U+030F, U+0311, U+0400-045F, U+0490-0491, U+04B0-04B1, U+04C1-04C2, U+04D0-04D3, U+04D6-04D7, U+04DC-04DF, U+04E2-04E7, U+04EC-04F1, U+04F4-04F5, U+04F8-04F9, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-sr-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-sr-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-sr-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0300-0301, U+0304, U+0306, U+0308, U+030F, U+0311, U+0400-045F, U+0490-0491, U+04B0-04B1, U+04C1-04C2, U+04D0-04D3, U+04D6-04D7, U+04DC-04DF, U+04E2-04E7, U+04EC-04F1, U+04F4-04F5, U+04F8-04F9, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-sr-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-sr-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme:   light dark;

  --ground:         light-dark(#F2F1F6, #0F1014);
  --card:           light-dark(#FFFFFF, #1A1B21);
  --inner:          light-dark(#F7F6FA, #23242B);
  --inner-deep:     light-dark(#EEEDF3, #2B2C34);
  --ink:            light-dark(#1C1B22, #EEEDF3);
  --ink-soft:       light-dark(#3D3B47, #C9C7D3);
  --ink-muted:      light-dark(#62606E, #9E9CAA);
  --ink-faint:      light-dark(#6E6C78, #8E8C99);
  --hairline:       light-dark(#E6E4EC, #2C2D35);
  --hairline-strong: light-dark(#D5D3DD, #3A3B45);

  --accent:         light-dark(#D9541E, #F08A5D);
  --on-accent:      light-dark(#FFFFFF, #1A1B21);
  --scrim:          light-dark(rgb(28 27 34 / .22), rgb(0 0 0 / .5));
  --cover-glow:     light-dark(rgb(217 84 30 / .13), rgb(240 138 93 / .08));

  --ring:           light-dark(transparent, #2C2D35);
  --sh-near:        light-dark(rgb(0 0 0 / .04), transparent);
  --sh-far:         light-dark(rgb(0 0 0 / .05), transparent);
  --sh-float:       light-dark(rgb(24 22 40 / .16), rgb(0 0 0 / .55));
  --shadow-card:    0 0 0 1px var(--ring), 0 1px 2px var(--sh-near), 0 6px 20px var(--sh-far);
  --shadow-float:   0 0 0 1px var(--ring), 0 2px 6px var(--sh-near), 0 18px 44px var(--sh-float);

  --tone-red:       light-dark(#D22C42, #E46469);
  --tone-orange:    light-dark(#BD4B00, #D8722F);
  --tone-yellow:    light-dark(#8E6906, #AF8809);
  --tone-green:     light-dark(#1C8038, #429F55);
  --tone-cyan:      light-dark(#057B85, #139CA8);
  --tone-blue:      light-dark(#3169D8, #5E8EDD);
  --tone-purple:    light-dark(#8A53CB, #A27BD8);
  --tone-magenta:   light-dark(#BE3C85, #D669A1);

  --facet-m:        light-dark(#597760, #74947C);
  --facet-n:        light-dark(#6D6D8D, #8A8AAC);
  --facet-f:        light-dark(#886955, #A68671);

  --wash-peach:     light-dark(#FEEADD, #392516);
  --wash-peach-ink: light-dark(#964D09, #F4BD99);
  --wash-coral:     light-dark(#FEE9E5, #3C231D);
  --wash-coral-ink: light-dark(#9C4535, #FAB8AA);
  --wash-butter:    light-dark(#F8EED1, #312911);
  --wash-butter-ink: light-dark(#786101, #DDCA8E);
  --wash-mint:      light-dark(#D9F7E5, #173023);
  --wash-mint-ink:  light-dark(#04764C, #9DDBB9);
  --wash-sky:       light-dark(#E0F1FF, #162D3C);
  --wash-sky-ink:   light-dark(#026A9D, #9BD2FA);
  --wash-lilac:     light-dark(#EFEBFF, #2B263C);
  --wash-lilac-ink: light-dark(#6953A0, #CEC1FA);
  --wash-rose:      light-dark(#FEE8EF, #3A222B);
  --wash-rose-ink:  light-dark(#964267, #F6B5CD);
  --wash-aqua:      light-dark(#D1F7F7, #0D3030);
  --wash-aqua-ink:  light-dark(#067272, #8ADBDB);
  --wash-sand:      light-dark(#FFEBD2, #362712);
  --wash-sand-ink:  light-dark(#855904, #EAC490);

  --ff-display:   'Source Serif 4', Georgia, serif;
  --ff-body:      'Source Sans 3', system-ui, sans-serif;

  --fs-label:     .6875rem;
  --fs-caption:   .8125rem;
  --fs-small:     .9375rem;
  --fs-body:      1.0625rem;
  --fs-lead:      1.1875rem;
  --fs-title:     1.375rem;
  --fs-serif-title: 1.75rem;
  --fs-head:      2.25rem;

  --track-label:   .06em;
  --track-display: -.02em;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-prose: 1.5;

  --pad-x:        var(--sp-16);
  --max-w:        28rem;

  --sp-2:   .125rem;
  --sp-4:   .25rem;
  --sp-6:   .375rem;
  --sp-8:   .5rem;
  --sp-10:  .625rem;
  --sp-12:  .75rem;
  --sp-14:  .875rem;
  --sp-16:  1rem;
  --sp-20:  1.25rem;
  --sp-24:  1.5rem;
  --sp-32:  2rem;
  --sp-48:  3rem;
  --sp-64:  4rem;
  --gap:    var(--sp-12);
  --bleed:  calc(var(--sp-20) - var(--sp-8));

  --rad-card:   20px;
  --rad-inner:  14px;
  --rad-unit:   10px;
  --rad-pill:   999px;

  --ease:       cubic-bezier(.2, .8, .2, 1);
  --t-fast:     .1s;
  --t-med:      .18s;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background:
    radial-gradient(40rem 22rem at 50% -8rem, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%) no-repeat,
    var(--ground);
  font-size: clamp(1rem, .9rem + .33vw, 1.35rem);
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0 auto;
  max-width: var(--max-w);
  min-height: 100svh;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink);
  background: transparent;
  font-feature-settings: "kern", "liga";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

[lang="sr"],
.s {
  font-language-override: "SRB";
}

::selection { background: color-mix(in oklab, var(--accent) 28%, transparent); color: var(--ink); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5 {
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 1em; }

i { font-style: inherit; font-family: var(--ff-display); }

.s { display: contents; }
[data-s="cyr"] { display: none; }
[data-script="cyr"] [data-s="lat"] { display: none; }
[data-script="cyr"] [data-s="cyr"] { display: inline; }

.sr,
.tr,
.chart-form {
  overflow-wrap: anywhere;
}

:root:not([lang="ru"]) [data-lang-only="ru"] {
  display: none;
}

.shell {
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

section { position: relative; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tile,
.next-chart,
.dock-btn,
.seg-btn,
.settings-btn,
.cover-chips a,
.menu-list a,
.find-row,
.find-chip,
.find-orb,
.find-close,
.tip-chip,
.say-btn,
.prep-trigger,
.tip-pop-close {
  transition: transform var(--t-fast) ease-out, background-color var(--t-med) ease-out, color var(--t-med) ease-out, box-shadow var(--t-med) ease-out;
}
.tile:active,
.next-chart:active,
.dock-btn:active,
.seg-btn:active,
.settings-btn:active,
.cover-chips a:active,
.menu-list a:active,
.find-chip:active,
.find-orb:active,
.find-close:active,
.tip-chip:active,
.say-btn:active,
.prep-trigger:active,
.tip-pop-close:active {
  transform: scale(.97);
}

.nav {
  position: sticky; top: 0; z-index: 1100;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in oklab, var(--ground) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  view-transition-name: masthead;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--ground); }
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--hairline-strong) 12%, var(--hairline-strong) 88%, transparent);
  opacity: 0;
  transition: opacity var(--t-med) ease-out;
  pointer-events: none;
}
.nav.is-scrolled::after { opacity: 1; }

.nav-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
  min-height: 3.75rem;
  padding-block: var(--sp-8);
  position: relative;
}
.nav-actions {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  margin-left: auto;
}
.brand {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--ff-body);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--sp-8);
}
.brand-tld { color: var(--accent); }

.settings-btn {
  width: 2.75rem; height: 2.75rem;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
}
.settings-btn svg { width: 1.25rem; height: 1.25rem; }
.settings-btn svg circle { fill: var(--card); transition: fill var(--t-med) ease-out; }
.settings-btn[aria-expanded="true"] { background: var(--ink); color: var(--card); }
.settings-btn[aria-expanded="true"] svg circle { fill: var(--ink); }

.settings-menu {
  position: absolute;
  right: var(--pad-x);
  top: calc(100% + var(--sp-4));
  width: min(19rem, calc(100% - 2 * var(--pad-x)));
  z-index: 2;
  opacity: 0;
  transform: scale(.96) translateY(-4px);
  transform-origin: top right;
  transition: opacity var(--t-med) ease-out, transform var(--t-med) var(--ease);
  pointer-events: none;
}
.settings-menu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.settings-menu-card {
  width: 100%;
  background: var(--card);
  border-radius: var(--rad-card);
  box-shadow: var(--shadow-float);
  padding: var(--sp-8) var(--sp-16);
}
.settings-row {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-12) 0;
}
.settings-row + .settings-row { border-top: 1px solid var(--hairline); }
.settings-label,
.sheet-title,
.find-label,
.card-section-label,
.chart-label,
.tile-badge,
.next-label {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-muted);
}

.seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 3px;
  border-radius: var(--rad-pill);
  background: var(--inner-deep);
  isolation: isolate;
}
.seg-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.375rem;
  padding: 0 var(--sp-12);
  border-radius: var(--rad-pill);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.seg-btn::after {
  content: "";
  position: absolute;
  inset: -3px -1px;
}
.seg-btn[aria-pressed="true"],
.seg-btn[aria-current="true"] {
  background: var(--ink);
  color: var(--card);
  box-shadow: 0 1px 3px var(--sh-far);
}
.seg-btn:focus-visible { outline-offset: 0; }

.script-seg .seg-btn[aria-pressed] { background: transparent; box-shadow: none; }
.script-seg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--rad-pill);
  background: var(--ink);
  box-shadow: 0 1px 3px var(--sh-far);
  transition: transform var(--t-med) var(--ease);
}
[data-script="cyr"] .script-seg::before { transform: translateX(100%); }
.script-seg .seg-btn { color: var(--ink-soft); }
:root:not([data-script="cyr"]) .script-seg [data-script-chip="lat"],
[data-script="cyr"] .script-seg [data-script-chip="cyr"] { color: var(--card); }

:root {
  --dock-bottom: max(var(--sp-12), env(safe-area-inset-bottom));
  --dock-h: 3.25rem;
}
.dock {
  --dock-pad: clamp(.25rem, 12.5vw - 2.25rem, .75rem);
  position: fixed;
  z-index: 1200;
  left: 0; right: 0;
  bottom: var(--dock-bottom);
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: max(var(--pad-x), env(safe-area-inset-left)) max(var(--pad-x), env(safe-area-inset-right));
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.dock::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) ease-out;
}
.dock.has-open::before { opacity: 1; pointer-events: auto; }

.dock-bar,
.find-orb {
  background: color-mix(in oklab, var(--card) 76%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-float), inset 0 0 0 1px color-mix(in oklab, var(--card) 60%, transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dock-bar, .find-orb { background: var(--card); }
}
.dock-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  max-width: 100%;
  min-height: var(--dock-h);
  padding: var(--sp-4);
  border-radius: calc(var(--dock-h) / 2);
  view-transition-name: dock;
}
.find-orb {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--dock-h);
  height: var(--dock-h);
  margin-left: auto;
  border-radius: 50%;
  color: var(--ink);
  touch-action: manipulation;
  view-transition-name: dock-search;
}
.find-orb svg { width: 1.5rem; height: 1.5rem; }
.find-orb[aria-expanded="true"] { visibility: hidden; }
.dock-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: calc(2.25rem + 2 * var(--dock-pad));
  min-height: calc(var(--dock-h) - 2 * var(--sp-4));
  padding: var(--sp-4) var(--dock-pad);
  border-radius: var(--rad-pill);
  color: var(--ink-soft);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.1;
}
.dock-btn svg { width: 1.375rem; height: 1.375rem; }
.dock-btn[aria-expanded="true"] { background: var(--ink); color: var(--card); }
.dock-bar .seg {
  min-width: calc(4.25rem + 4 * var(--dock-pad));
}
.dock-bar .seg:not(:first-child) { margin-left: var(--sp-4); }
.dock-bar .seg-btn {
  min-height: calc(var(--dock-h) - 2 * var(--sp-4) - 6px);
  padding-inline: var(--dock-pad);
  font-size: var(--fs-small);
  font-weight: 650;
}

.sheet {
  position: absolute;
  left: max(var(--sp-12), env(safe-area-inset-left));
  right: max(var(--sp-12), env(safe-area-inset-right));
  bottom: calc(100% + var(--sp-10));
  opacity: 0;
  transform: translateY(1.25rem) scale(.98);
  transform-origin: 50% 100%;
  transition: opacity var(--t-med) ease-out, transform var(--t-med) var(--ease);
}
.sheet.is-open { opacity: 1; transform: none; }
.sheet-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--dock-bottom) - 5rem - var(--sticky-offset, 4rem));
  max-height: calc(100dvh - var(--dock-bottom) - 5rem - var(--sticky-offset, 4rem));
  overflow: hidden;
  background: var(--card);
  border-radius: var(--rad-card);
  box-shadow: var(--shadow-float);
}
.sheet-title {
  position: relative;
  margin: 0;
  padding: var(--sp-24) var(--sp-20) var(--sp-8);
}
.sheet-title::before {
  content: "";
  position: absolute;
  top: var(--sp-8); left: 50%;
  width: 2.25rem; height: 5px;
  margin-left: -1.125rem;
  border-radius: var(--rad-pill);
  background: var(--hairline-strong);
}
.menu-list {
  position: relative;
  list-style: none; margin: 0;
  padding: 0 var(--sp-6) var(--sp-6);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.menu-list a {
  display: flex; align-items: center; gap: var(--sp-12);
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-8) var(--sp-14);
  border-radius: var(--rad-inner);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.menu-list a:focus-visible { outline-offset: -2px; }
.menu-list a > span:not(.menu-glyph) { flex: 1; min-width: 0; }
.menu-check { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ink); }

.menu-glyph {
  flex: none;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 10px;
  background: var(--w, var(--inner-deep));
  color: var(--w-ink, var(--ink-soft));
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}
.menu-glyph .glyph-pair { display: flex; gap: 1px; font-size: .8125rem; }
.menu-glyph .glyph-pair > :last-child { display: none; }
.chart-menu-list a[aria-current="page"] {
  background: var(--inner);
  color: var(--ink);
  font-weight: 650;
}

.case-strip-cell a::before {
  content: "";
  width: .625rem;
  height: .625rem;
  flex: none;
  border-radius: 50%;
  background: var(--tone, var(--ink-muted));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone, var(--ink-muted)) 16%, transparent);
}
.section-menu-list .case-strip-cell.is-current a {
  background: var(--inner);
  color: var(--ink);
  font-weight: 650;
}
.section-menu-list .case-strip-cell.is-current a::after {
  content: "";
  width: .4rem;
  height: .75rem;
  margin-right: .25rem;
  flex: none;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.find {
  position: fixed;
  z-index: 1300;
  left: 0; right: 0;
  top: var(--vv-top, 0px);
  height: 100vh;
  height: var(--vvh, 100dvh);
  display: flex;
  justify-content: center;
  touch-action: none;
}
.find[hidden] { display: none; }
.find::before {
  content: '';
  position: absolute;
  inset: -100lvh 0;
  background: var(--ground);
}
.find-title:focus { outline: none; }
.find.is-closing { pointer-events: none; }
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
.find-ground {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 22rem at 50% -8rem, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%) no-repeat,
    var(--ground);
}
.find-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--max-w);
  height: 100%;
  padding-top: env(safe-area-inset-top);
}
.find-top,
.find-scroll,
.find-bar {
  padding-left: max(var(--pad-x), env(safe-area-inset-left));
  padding-right: max(var(--pad-x), env(safe-area-inset-right));
}
.find-top {
  flex: none;
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-4);
}
.find-title {
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.find.is-compact .find-top { padding-top: var(--sp-10); }
.find.is-compact .find-title {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.find-status { margin-top: var(--sp-6); }
.find.is-compact .find-status { margin-top: 0; }
.find-say {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  min-height: 1.75rem;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 650;
  line-height: var(--lh-snug);
  color: var(--ink-soft);
}
.find.has-recent[data-state="empty"] .say-recent,
.find:not(.has-recent)[data-state="empty"] .say-try,
.find[data-state="results"] .say-count,
.find[data-state="failed"] .say-failed { display: flex; }
.find[data-state="none"] .say-none { display: block; }
.find[data-state="wait"] .say-wait { display: flex; justify-content: flex-start; }
.find-none-q { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.find-none-hint {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.find-forget,
.find-retry {
  position: relative;
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--accent);
  touch-action: manipulation;
}
.find-spinner {
  flex: none;
  width: 1rem; height: 1rem;
  border: 2px solid var(--hairline-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: find-spin .8s linear infinite;
}
@keyframes find-spin { to { transform: rotate(360deg); } }

.find-scroll {
  flex: 1;
  min-height: 0;
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-16);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--sp-8), #000 calc(100% - var(--sp-16)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--sp-8), #000 calc(100% - var(--sp-16)), transparent);
}
.find-recent,
.find-try,
.find-results,
.find-label { display: none; }
.find.has-recent[data-state="empty"] .find-recent,
.find[data-state="empty"] .find-try,
.find[data-state="none"] .find-try,
.find[data-state="results"] .find-results,
.find.has-recent[data-state="empty"] .find-label,
.find[data-state="none"] .find-label { display: block; }
.find-recent,
.find-results {
  padding: var(--sp-6);
  border-radius: var(--rad-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.find-label { margin: var(--sp-20) 0 var(--sp-10); }

.find-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-12);
  min-height: 4rem;
  padding: var(--sp-10) var(--sp-14);
  border-radius: var(--rad-inner);
  color: var(--ink);
  text-decoration: none;
  touch-action: manipulation;
}
.find-row[aria-selected="true"],
.find-row:active { background: var(--inner); }
.find-list.is-navigating .find-row[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.find-list.is-navigating .find-chip[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.find-row:focus-visible { outline-offset: -2px; }
.find-l1,
.find-l2 {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  min-width: 0;
  white-space: nowrap;
}
.find-l1 {
  flex-wrap: wrap;
  column-gap: var(--sp-8);
  font-size: var(--fs-lead);
  line-height: 1.25;
  height: 1.5rem;
  height: 1lh;
  overflow: hidden;
}
.find-name {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.find-l2 {
  margin-top: var(--sp-4);
  font-size: var(--fs-caption);
  line-height: 1.35;
}
.find-row > .case-tag { grid-column: 2; grid-row: 1 / span 2; }
.find-l2:empty { display: none; }
.find-head,
.find-gloss,
.find-meta,
.find-where,
.find-crumb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.find-head {
  flex: 0 1 auto;
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.find-head.is-ui {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 650;
  letter-spacing: -.01em;
}
.find-gloss {
  flex: 1 1 0;
  min-width: min(5.5em, 100%);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
}
.find-via {
  flex: none;
  max-width: 10em;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-6);
  margin-right: calc(-1 * var(--sp-2));
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  color: var(--ink-muted);
}
.find-via > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.find-via > span:not([lang]) { font-family: var(--ff-body); font-size: var(--fs-small); font-weight: 500; }
.find-arrow::before { content: "→"; font-family: var(--ff-body); color: var(--ink-faint); }
.find-meta { flex: 0 1 auto; color: var(--ink-soft); }
.find-meta [lang="sr"] { font-size: 1.08em; }
.find-crumb { flex: none; max-width: 62%; color: var(--ink-faint); }
.find-meta + .find-crumb::before { content: "·"; margin: 0 var(--sp-6); }
.find-sep::before { content: "›"; margin: 0 .3em; }
.find-row mark {
  padding: 0 .04em;
  border-radius: 3px;
  background: color-mix(in oklab, var(--hl, var(--tone-orange)) 16%, transparent);
  color: color-mix(in oklab, var(--hl, var(--tone-orange)) 80%, var(--ink));
}

.find-row.is-recent {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 3.25rem;
}
.find-row.is-recent .find-l1 { grid-column: 2; }
.find-clock { width: 1.125rem; height: 1.125rem; color: var(--ink-faint); }
.find-where { font-size: var(--fs-caption); color: var(--ink-faint); white-space: nowrap; }

.find-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.find-chip {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--sp-16);
  border-radius: var(--rad-pill);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.find-chip [lang="sr"] { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.find-chip:active { background: var(--inner-deep); }
.find-chip[aria-selected="true"],
.find-chip[aria-selected="true"] [lang="sr"] { background: var(--ink); color: var(--card); }

.find-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  padding-bottom: var(--dock-bottom);
}
.find.has-kb .find-bar { padding-bottom: var(--sp-8); }
.find-field {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--dock-h);
  display: flex;
}
.find-field-bg,
.find-close {
  border-radius: var(--rad-pill);
  background: var(--card);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ring);
}
.find-field-bg {
  position: absolute;
  inset: 0;
  transform-origin: 100% 50%;
}
.find-field:has(.find-input:focus-visible) .find-field-bg {
  box-shadow: var(--shadow-float), inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent);
}
.find-field-in {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.find-icon {
  flex: 0 1 2.875rem;
  min-width: 1.25rem;
  display: grid; place-items: center;
  height: 100%;
  overflow: hidden;
  color: var(--ink-muted);
}
.find-icon svg { width: 1.375rem; height: 1.375rem; }
.find-input {
  flex: 1 0 0;
  min-width: min(3em, 100%);
  height: 100%;
  margin: 0;
  padding: 0 var(--sp-4) 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  caret-color: var(--accent);
}
.find-input::placeholder { color: var(--ink-faint); opacity: 1; }
.find-input:focus-visible { outline: none; }
.find-input::-webkit-search-cancel-button { display: none; }
.find-clear {
  flex: 0 1 2.75rem;
  min-width: 1.75rem;
  display: grid; place-items: center;
  height: 100%;
  color: var(--ink-faint);
  touch-action: manipulation;
}
.find-clear[hidden] { display: none; }
.find-clear svg { width: 1.25rem; height: 1.25rem; }
.find-clear-x { fill: none; stroke: var(--card); stroke-width: 1.8; stroke-linecap: round; }
.find-clear:focus-visible { outline-offset: -6px; border-radius: 50%; }
.find-close {
  flex: none;
  display: grid; place-items: center;
  width: var(--dock-h); height: var(--dock-h);
  border-radius: 50%;
  color: var(--ink);
  touch-action: manipulation;
}
.find-close svg { width: 1.375rem; height: 1.375rem; }
.find-close:active { background: var(--inner-deep); }

.arrive-mark {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in oklab, var(--accent) 13%, transparent);
  animation: arrive 1.8s var(--ease) both;
}
.is-arrived:focus { outline: none; }
@keyframes arrive {
  0% { opacity: 0; transform: scale(1.02); }
  10% { opacity: 1; transform: none; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

body { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }

.home {
  display: grid;
  gap: var(--gap);
  padding-block: var(--sp-4) var(--sp-24);
}

.hero {
  position: relative;
  padding: var(--sp-24) var(--sp-20) var(--sp-24);
  border-radius: var(--rad-card);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--wash-lilac) 90%, transparent), transparent 62%),
    radial-gradient(110% 100% at 0% 100%, color-mix(in oklab, var(--wash-peach) 95%, transparent), transparent 60%),
    var(--card);
  box-shadow: var(--shadow-card);
}
.hello {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12);
  margin: 0 0 var(--sp-20);
}
.hello-bubble {
  position: relative;
  display: inline-block;
  padding: var(--sp-8) var(--sp-16) var(--sp-10);
  border-radius: 18px 18px 18px 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--ff-display);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 28%, transparent);
}
.hello-gloss {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
}
.hello-gloss::before { content: "— "; }
.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}
.hero-tagline {
  margin: var(--sp-10) 0 0;
  max-width: 24ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  text-wrap: balance;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.chart-grid li { display: grid; min-width: 0; }
.chart-grid li.is-start,
.chart-grid li:nth-child(even):last-child { grid-column: 1 / -1; }

.tile {
  --w: var(--wash-sand);
  --w-ink: var(--wash-sand-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 10.5rem;
  padding: var(--sp-16) var(--sp-16) var(--sp-16);
  border-radius: var(--rad-card);
  background: var(--w);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
:is(.tile, .menu-glyph)[data-wash="peach"]  { --w: var(--wash-peach);  --w-ink: var(--wash-peach-ink); }
:is(.tile, .menu-glyph)[data-wash="coral"]  { --w: var(--wash-coral);  --w-ink: var(--wash-coral-ink); }
:is(.tile, .menu-glyph)[data-wash="butter"] { --w: var(--wash-butter); --w-ink: var(--wash-butter-ink); }
:is(.tile, .menu-glyph)[data-wash="mint"]   { --w: var(--wash-mint);   --w-ink: var(--wash-mint-ink); }
:is(.tile, .menu-glyph)[data-wash="sky"]    { --w: var(--wash-sky);    --w-ink: var(--wash-sky-ink); }
:is(.tile, .menu-glyph)[data-wash="lilac"]  { --w: var(--wash-lilac);  --w-ink: var(--wash-lilac-ink); }
:is(.tile, .menu-glyph)[data-wash="rose"]   { --w: var(--wash-rose);   --w-ink: var(--wash-rose-ink); }
:is(.tile, .menu-glyph)[data-wash="aqua"]   { --w: var(--wash-aqua);   --w-ink: var(--wash-aqua-ink); }
:is(.tile, .menu-glyph)[data-wash="sand"]   { --w: var(--wash-sand);   --w-ink: var(--wash-sand-ink); }

.tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
}
.tile-glyph {
  font-family: var(--ff-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--w-ink);
  white-space: nowrap;
}
.glyph-pair { display: inline-flex; gap: .3em; }
.glyph-pair > :last-child { opacity: .6; }
.tile-arrow {
  flex: none;
  width: 2rem; height: 2rem;
  padding: .4375rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  color: var(--w-ink);
}
.tile-badge {
  flex: none;
  padding: var(--sp-6) var(--sp-10);
  border-radius: var(--rad-pill);
  background: var(--ink);
  color: var(--card);
}
.tile-text { display: grid; gap: var(--sp-4); }
.tile-title {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: var(--lh-snug);
}
.tile-lede {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.chart-grid li:nth-child(even):last-child .tile { min-height: 0; }
.is-start .tile { min-height: 0; gap: var(--sp-20); padding: var(--sp-20); }
.is-start .tile-glyph { font-size: 3rem; }
.is-start .tile-title { font-size: var(--fs-title); }
.is-start .tile-lede { font-size: var(--fs-small); max-width: 30ch; }

.skip-link {
  position: absolute;
  left: var(--sp-12); top: -4rem;
  z-index: 1300;
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--rad-pill);
  background: var(--ink);
  color: var(--card);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: top var(--t-med) var(--ease);
}
.skip-link:focus-visible { top: calc(env(safe-area-inset-top) + var(--sp-12)); }

.noscript-note {
  margin: 0 var(--pad-x) var(--gap);
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--rad-inner);
  background: var(--inner-deep);
  font-size: var(--fs-caption);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
}
.home .noscript-note { margin-inline: 0; }

.foot {
  padding-block: var(--sp-16) var(--sp-16);
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}
.foot-meta {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  text-align: center;
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.foot a { text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }

@media (hover: hover) and (pointer: fine) {
  .tile:hover,
  .next-chart:hover { box-shadow: var(--shadow-float); }
  .next-chart:hover .next-arrow { transform: translateX(3px); }
  .settings-btn:not([aria-expanded="true"]):hover { color: var(--ink); }
  .dock-btn:not([aria-expanded="true"]):hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }
  .seg-btn:not([aria-pressed="true"]):not([aria-current="true"]):hover { color: var(--ink); }
  .menu-list a:hover { background: var(--inner); color: var(--ink); }
  .find-chip:not([aria-selected="true"]):hover { color: var(--ink); background: var(--inner); }
  .find-orb:hover { color: var(--accent); }
  .find-close:hover { background: var(--inner); }
  .find-clear:hover { color: var(--ink-muted); }
  .find-forget:hover,
  .find-retry:hover { color: color-mix(in oklab, var(--accent) 70%, var(--ink)); }
  .cover-chips a:hover { color: var(--ink); background: var(--card); }
  .foot a:hover { color: var(--ink); }
  .tip-chip:hover { color: var(--ink); background: var(--inner-deep); }
  .say-btn:not([data-playing]):hover { color: var(--ink); }
  .tip-pop-close:hover { color: var(--ink); background: var(--inner-deep); }
}

.chart-section { padding-block: var(--sp-4) var(--sp-24); }
.chart-layout {
  display: grid;
  align-items: start;
  gap: var(--gap);
}

.cover {
  position: relative;
  margin-bottom: var(--sp-20);
  padding: var(--sp-20) var(--sp-20) var(--sp-16);
  border-radius: var(--rad-card);
  background:
    radial-gradient(110% 80% at 100% 0%, var(--cover-glow), transparent 62%),
    radial-gradient(90% 90% at 0% 100%, color-mix(in oklab, var(--ink-muted) 7%, transparent), transparent 60%),
    var(--card);
  box-shadow: var(--shadow-card);
}
.cover-glyph,
.next-glyph {
  display: inline-grid; place-items: center;
  background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 18%, var(--card)), color-mix(in oklab, var(--accent) 30%, var(--card)));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
  color: color-mix(in oklab, var(--accent) 70%, var(--ink));
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.cover-glyph {
  min-width: 3.5rem; height: 3.5rem;
  padding-inline: var(--sp-8);
  margin-bottom: var(--sp-16);
  border-radius: 16px;
  font-size: 1.625rem;
}
.cover-glyph .glyph-pair { gap: .2em; }
.cover-title {
  font-size: var(--fs-head);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-wrap: balance;
}
.cover-lede {
  margin: var(--sp-10) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.cover-nav { margin: var(--sp-16) calc(-1 * var(--sp-20)) 0; }
.cover-chips {
  display: flex;
  gap: var(--sp-8);
  list-style: none;
  margin: 0;
  padding: var(--sp-4) var(--sp-20) var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sp-20);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sp-16), #000 calc(100% - var(--sp-24)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--sp-16), #000 calc(100% - var(--sp-24)), transparent);
}
.cover-chips::-webkit-scrollbar { display: none; }
.cover-chips li { flex: none; scroll-snap-align: start; }
.cover-chips a {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  min-height: 2.75rem;
  padding: 0 var(--sp-16) 0 var(--sp-14);
  border-radius: var(--rad-pill);
  background: color-mix(in oklab, var(--inner-deep) 80%, transparent);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.cover-chips a:focus-visible { outline-offset: -2px; }

.chart-credit {
  margin: var(--sp-16) 0 0;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
  text-align: center;
  text-wrap: balance;
}

.next-chart {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  margin-top: var(--sp-24);
  padding: var(--sp-14) var(--sp-16) var(--sp-14) var(--sp-14);
  border-radius: var(--rad-card);
  background:
    radial-gradient(60% 140% at 100% 50%, var(--cover-glow), transparent 70%),
    var(--card);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.next-glyph {
  flex: none;
  min-width: 3rem; height: 3rem;
  padding-inline: var(--sp-6);
  border-radius: var(--rad-inner);
  font-size: 1.375rem;
}
.next-text {
  display: grid;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}
.next-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.next-arrow {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  padding: .6875rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 30%, transparent);
  transition: transform var(--t-med) var(--ease);
}

.card-list {
  display: grid;
  gap: var(--gap);
}
.card {
  --wash: light-dark(
    color-mix(in oklab, var(--tint, var(--card)) 9%, var(--card)),
    color-mix(in oklab, var(--tone, var(--ink-soft)) 15%, var(--card)));
  scroll-margin-top: calc(var(--sticky-offset, 4rem) + var(--sp-12));
  position: relative;
  display: grid;
  background: var(--card);
  border-radius: var(--rad-card);
  box-shadow: var(--shadow-card);
}
.card > * { min-width: 0; }
.card-section[id],
.card-item[id],
.letter[id],
.false-table tr[id] { scroll-margin-top: calc(var(--sticky-offset, 4rem) + var(--sp-12)); }

.card-head {
  padding: var(--sp-16) var(--sp-20);
  border-radius: var(--rad-card) var(--rad-card) 0 0;
  background: var(--wash);
}
.card-head:last-child { border-radius: var(--rad-card); }
.card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-12);
}
.card-title h3 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  color: var(--ink);
}
.card-title h3 > [lang="sr"] {
  font-family: var(--ff-display);
  font-size: var(--fs-serif-title);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.card-title h3 em {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--ff-body);
  font-style: normal;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.card-title .case-tag,
.card-title .tip-chip { flex: 0 0 auto; margin-top: var(--sp-4); }
.card-head .tip-chip:not([aria-expanded="true"]) { background: light-dark(var(--inner-deep), var(--card)); }

.card-q {
  margin: var(--sp-10) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
}
.card-q strong {
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}

.card-section {
  padding: var(--sp-14) var(--sp-20) var(--sp-16);
  border-top: 1px solid var(--hairline);
}
.card-head + .card-section { border-top-color: light-dark(var(--hairline), transparent); }
.card-section-label {
  display: block;
  margin: 0 0 var(--sp-10);
}

.case-tag {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--card);
  background: var(--tone, var(--ink-soft));
  border-radius: var(--rad-pill);
  padding: .3125rem var(--sp-10) .25rem;
  line-height: 1;
}
.ending-unit {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--rad-unit);
  background: var(--card);
}
.ending-unit > * { display: inline-flex; align-items: center; line-height: 1; }
.ending-unit > :first-child {
  border-start-start-radius: calc(var(--rad-unit) - 1px);
  border-end-start-radius: calc(var(--rad-unit) - 1px);
}
.ending-unit > :last-child {
  border-start-end-radius: calc(var(--rad-unit) - 1px);
  border-end-end-radius: calc(var(--rad-unit) - 1px);
}
.eu-gender, .eu-source { flex: 0 0 auto; }
.eu-gender {
  justify-content: center;
  min-width: 1.5rem;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-6);
  color: var(--card);
  background: var(--facet, var(--ink-muted));
}
.eu-gender + .eu-gender {
  border-left: 1px solid color-mix(in oklab, var(--card) 55%, transparent);
}
.eu-form {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--ink);
  letter-spacing: -.005em;
  padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-8);
  white-space: nowrap;
  min-width: 0;
}
.eu-form.is-echo { color: var(--ink-faint); }
.eu-source {
  font-family: var(--ff-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-8);
  color: var(--ink-soft);
  background: var(--inner-deep);
  border-left: 1px solid var(--hairline);
  white-space: nowrap;
}

.gender-run {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-8);
  min-width: 0;
}
.gender-band {
  display: grid;
  gap: var(--sp-8);
}
.gender-band-note {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.eu-gender[data-gender="m"] { --facet: var(--facet-m); }
.eu-gender[data-gender="n"] { --facet: var(--facet-n); }
.eu-gender[data-gender="f"] { --facet: var(--facet-f); }

.cell-note { margin-left: var(--sp-6); }
.cell-sep {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--ink-faint);
  line-height: 1;
  margin: 0 .2em;
}
.eu-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
  min-width: 0;
}

.card-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.card-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--hairline);
}
.card-item:first-child { padding-top: 0; border-top: 0; }
.card-item:last-child { padding-bottom: 0; }
.card-item .sr {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.card-item .sr mark,
.chart-example .sr mark,
.lit,
.num-end {
  font-style: normal;
  font-weight: 600;
  color: color-mix(in oklab, var(--hl, var(--tone-orange)) 80%, var(--ink));
  background: color-mix(in oklab, var(--hl, var(--tone-orange)) 16%, transparent);
  padding: 0 .1em;
  border-radius: 3px;
}
.card-item .tr {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.card-item .tr em {
  font-style: normal;
  font-size: var(--fs-label);
  color: var(--ink-faint);
  letter-spacing: .04em;
  display: inline-block;
  margin-left: .35em;
}
.card-item .arrow,
.chart-sep {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-faint);
  margin-inline: .15em;
}

.prep-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lead);
  color: var(--tone, var(--ink-soft));
  line-height: 1.25;
  margin: 0;
}
.prep-sep {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.prep-trigger {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 .6em .1em;
  border-radius: var(--rad-pill);
  background: color-mix(in oklab, var(--tone, var(--accent)) 5%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone, var(--accent)) 16%, transparent);
  text-decoration: none;
  line-height: 1;
}
.prep-trigger { position: relative; }
.prep-trigger::after {
  content: "";
  position: absolute;
  inset: -4px -3px;
}
.prep-trigger[aria-expanded="true"] {
  background: var(--tone, var(--accent));
  color: var(--card);
}

.tip-chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem;
  padding: 0;
  background: var(--inner-deep);
  border: 0;
  border-radius: 50%;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.tip-chip::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
}
.tip-chip[aria-expanded="true"] {
  color: var(--card);
  background: var(--ink);
}
.card-section-label .tip-chip {
  margin-left: var(--sp-8);
  vertical-align: middle;
  margin-top: -2px;
}

.tip-pop {
  position: absolute;
  z-index: 1150;
  width: min(21rem, calc(100vw - 24px));
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transform-origin: 50% 0;
  transition: opacity var(--t-med) ease-out, transform var(--t-med) var(--ease);
  pointer-events: none;
}
.tip-pop[data-placement="above"] { transform-origin: 50% 100%; transform: translateY(-4px) scale(.98); }
.tip-pop.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tip-pop-card {
  position: relative;
  background: var(--card);
  border-radius: var(--rad-card);
  padding: var(--sp-16) var(--sp-48) var(--sp-16) var(--sp-20);
  box-shadow: var(--shadow-float);
}
.tip-pop-body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
}
.tip-pop-body strong { color: var(--ink); font-weight: 600; }
.tip-pop-body em { color: var(--ink); font-style: normal; font-family: var(--ff-display); font-weight: 500; }
.tip-pop-close {
  position: absolute;
  top: var(--sp-12); right: var(--sp-12);
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  background: var(--inner-deep);
  border: 0;
  color: var(--ink-soft);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.tip-pop-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

.chart-tip {
  display: grid;
  gap: var(--sp-10);
}
.chart-tip h4,
.note-title {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.chart-tip h4 *,
.note-title * {
  font-family: var(--ff-body);
}
.chart-tip p,
.note-body {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
  max-width: 56ch;
}
.note-pairs {
  list-style: none; padding: 0;
  margin: var(--sp-4) 0 0;
  display: flex; flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
}
.note-pairs li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-10);
  border-radius: var(--rad-pill);
  background: var(--inner);
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}
.note-pairs .from { color: var(--ink-soft); }
.note-pairs .arrow {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}
.note-pairs .to { color: var(--ink); }

.alph-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.letter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "glyphs glyphs"
    "ipa    tip"
    "ex     ex";
  align-content: start;
  row-gap: var(--sp-6);
  min-width: 0;
  padding: var(--sp-14) var(--sp-14) var(--sp-12);
  border-radius: var(--rad-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.letter .head,
.letter .ipa-row { display: contents; }

.letter .glyphs {
  grid-area: glyphs;
  display: flex; align-items: baseline; flex-wrap: wrap;
  column-gap: var(--sp-10);
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}
.letter .cyr { font-size: 1.875rem; color: var(--ink); }
.letter .sep { display: none; }
.letter .lat { font-size: 1.25rem; color: var(--ink-muted); font-weight: 400; }

.letter .ipa {
  grid-area: ipa;
  align-self: center;
  justify-self: start;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--rad-pill);
  background: var(--inner);
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-soft);
}
.letter .tip-chip { grid-area: tip; align-self: center; }

.letter .example {
  grid-area: ex;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "word say"
    "tr   say";
  column-gap: var(--sp-8);
  row-gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--hairline);
  min-width: 0;
}
.letter .example .word {
  grid-area: word;
  display: grid;
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.letter .example .word-cyr { color: var(--ink); }
.letter .example .word-sep { display: none; }
.letter .example .word-lat { color: var(--ink-muted); font-weight: 400; font-size: var(--fs-small); }
.letter .example .tr {
  grid-area: tr;
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.say-btn {
  grid-area: say;
  align-self: center;
  position: relative;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  padding: 0;
  background: var(--inner-deep);
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
}
.say-btn svg { width: 1rem; height: 1rem; }
.say-btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.say-btn[data-playing] {
  color: var(--card);
  background: var(--ink);
}

:where([data-tone]) { --tone: var(--ink-soft); }

[data-tone="nom"] { --tone: var(--ink-soft); }
[data-tone="gen"] { --tone: var(--tone-purple); --tint: var(--tone); }
[data-tone="dat"] { --tone: var(--tone-yellow); --tint: var(--tone); }
[data-tone="aku"] { --tone: var(--tone-cyan); --tint: var(--tone); }
[data-tone="vok"] { --tone: var(--tone-red); --tint: var(--tone); }
[data-tone="ins"] { --tone: var(--tone-blue); --tint: var(--tone); }
[data-tone="lok"] { --tone: var(--tone-green); --tint: var(--tone); }
:is([data-tone="nom"], [data-tone="gen"], [data-tone="dat"], [data-tone="aku"],
    [data-tone="vok"], [data-tone="ins"], [data-tone="lok"]) { --hl: var(--tone); }

.case-extra { padding-top: var(--gap); }

.case-matrix-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-4);
  margin-bottom: var(--sp-12);
  border-radius: var(--rad-pill);
  background: var(--inner);
}
.case-matrix-switch label {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--rad-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}
.case-matrix-switch label:has(:checked) {
  background: var(--ink);
  color: var(--card);
}
.case-matrix-switch label:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.case-matrix-card:has([value="sg"]:checked) [data-matrix-number="pl"],
.case-matrix-card:has([value="pl"]:checked) [data-matrix-number="sg"] { display: none; }

.case-matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--sp-4);
  margin: calc(-1 * var(--sp-4)) 0;
}
.case-matrix-case { width: 3.5rem; }
.case-matrix thead th { padding-bottom: var(--sp-4); }
.case-matrix-gender {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  background: var(--facet);
  color: var(--card);
  font-size: var(--fs-label);
  font-weight: 700;
}
.case-matrix-gender[data-gender="m"] { --facet: var(--facet-m); }
.case-matrix-gender[data-gender="n"] { --facet: var(--facet-n); }
.case-matrix-gender[data-gender="f"] { --facet: var(--facet-f); }
.case-matrix tbody th { padding: 0; text-align: left; }
.case-matrix tbody th a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  border-radius: 6px;
}
.case-matrix td {
  padding: var(--sp-6) var(--sp-2);
  border-radius: 8px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--tone) 8%, var(--card)),
    color-mix(in oklab, var(--tone) 16%, var(--card)));
  text-align: center;
}
.case-matrix-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.case-matrix-form > [lang="sr"] { white-space: nowrap; }
.case-matrix-form .cell-sep { color: var(--ink-muted); font-size: var(--fs-small); }

@media (forced-colors: active) {
  .case-matrix td { border: 1px solid CanvasText; }
}

.i-decl-wrap,
.verb-paradigm,
.num-table,
.card-items:has(> .pron-row),
.card-items:has(> .pitch-row) { margin-inline: calc(-1 * var(--bleed)); }
.verb-paradigm,
.num-table { width: calc(100% + 2 * var(--bleed)); }
:is(.i-decl-wrap, .verb-paradigm, .num-table, .card-items:has(> .pron-row, > .pitch-row), [role="table"]):last-child {
  margin-bottom: calc(var(--sp-8) - var(--sp-16));
}

.i-decl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rad-inner);
}
.i-decl-wrap:focus-visible { outline-offset: 2px; }

.i-decl,
.verb-paradigm,
.num-table {
  border-collapse: separate;
  border-spacing: 0;
}
.i-decl { width: 100%; }
.i-decl thead th,
.verb-paradigm thead th {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-muted);
  text-align: left;
  padding: 0 var(--bleed) var(--sp-8);
}
:is(.i-decl, .verb-paradigm, .num-table) tbody tr:nth-child(odd) > * { background: var(--inner); }
:is(.i-decl, .verb-paradigm, .num-table) tbody tr > :first-child { border-radius: var(--rad-inner) 0 0 var(--rad-inner); }
:is(.i-decl, .verb-paradigm, .num-table) tbody tr > :last-child { border-radius: 0 var(--rad-inner) var(--rad-inner) 0; }
.i-decl tbody th {
  text-align: left;
  width: 1%;
  white-space: nowrap;
  padding: var(--sp-12) var(--sp-4) var(--sp-12) var(--bleed);
}
.i-decl tbody td,
.verb-paradigm tbody td {
  padding: var(--sp-12) var(--bleed);
  vertical-align: top;
}
.i-decl tbody td .end {
  white-space: nowrap;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--ink);
}
.wrinkle-table tbody th,
.wrinkle-table tbody td { width: 50%; }
.wrinkle-table tbody th .end,
.wrinkle-table tbody td .end { display: block; }
.wrinkle-table tbody th .end {
  white-space: nowrap;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--ink);
}
.wrinkle-gloss {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}
.wrinkle-table .lit {
  font-style: normal;
  font-weight: 600;
}

.pron-row,
.pitch-row {
  align-items: baseline;
  column-gap: var(--sp-12);
  padding: var(--sp-12) var(--bleed);
  border-top: 0;
  border-radius: var(--rad-inner);
}
.pron-row:first-child, .pron-row:last-child,
.pitch-row:first-child, .pitch-row:last-child { padding-block: var(--sp-12); }
.pron-row:nth-child(odd),
.pitch-row:nth-child(even) { background: var(--inner); }
.pron-row { grid-template-columns: 6.25rem minmax(0, 1fr); }
.pron-row.is-pair { grid-template-columns: 6.25rem repeat(2, minmax(0, 1fr)); }
.pron-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.pron-form {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.pron-slash { color: var(--ink-faint); margin: 0 .15em; font-weight: 400; }
.card-section-label .pron-chips { vertical-align: middle; margin-left: var(--sp-4); margin-top: -2px; }

.pron-run-row { gap: var(--sp-6); }
.pron-run-row > .chart-label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.gender-run.is-abstract .eu-form { font-weight: 500; }

.pron-steps,
.pron-pads {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
}
.pron-steps { list-style: none; margin: 0; padding: 0; }
.pron-step {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-2) var(--sp-10);
  overflow: hidden;
  border-radius: 10px;
  background: var(--inner);
}
.pron-tones {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
}
.pron-tones > span {
  grid-area: 1 / 1;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--tone) 9%, var(--card)),
    color-mix(in oklab, var(--tone) 24%, var(--card)));
}
.pron-tones > span + span {
  background: color-mix(in oklab, var(--tone) 20%, var(--card));
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 80%);
  mask-image: linear-gradient(to bottom, transparent 30%, #000 80%);
}
.pron-tones:has(> span + span) > span:first-child { background: color-mix(in oklab, var(--tone) 20%, var(--card)); }
.pron-step-n {
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.pron-step.is-case .pron-step-n { color: var(--ink-muted); }
.pron-step-face {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  line-height: 1.05;
  color: var(--ink);
}
.pron-step-face:has(> span + span) { font-size: var(--fs-body); }
.pron-step-face.is-case { gap: var(--sp-4); }
.pron-step .case-tag {
  padding: 0;
  background: none;
  font-size: .75rem;
  letter-spacing: .04em;
  color: color-mix(in oklab, var(--tone) 80%, var(--ink));
}
.pron-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--sp-8) var(--sp-20);
  margin: var(--sp-12) 0 0;
  padding: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-muted);
}
.pron-legend li { display: inline-flex; align-items: center; gap: var(--sp-6); }
.pron-legend-n { display: inline-flex; gap: 2px; }
.pron-legend-n span {
  display: grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  border-radius: 5px;
  background: var(--inner-deep);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
}
.pron-clitic-item { padding-block: var(--sp-14); }
.pron-clitic-item mark:not([data-tone]) { --hl: var(--ink-soft); }
.pron-pads { margin-top: var(--sp-10); }
.pron-pad {
  display: grid;
  place-items: center;
  height: 1.75rem;
  border-radius: 8px;
  background: radial-gradient(circle, var(--hairline-strong) 2.5px, transparent 3px);
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
}
.pron-pad.is-on {
  --hl: var(--ink-soft);
  color: color-mix(in oklab, var(--hl) 80%, var(--ink));
  background: color-mix(in oklab, var(--hl) 16%, var(--card));
}
.pron-pad.is-on[data-tone] { --hl: var(--tone); }
.pron-pad.is-on:has(+ .pron-pad.is-on) { border-start-end-radius: 3px; border-end-end-radius: 3px; }
.pron-pad.is-on + .pron-pad.is-on { border-start-start-radius: 3px; border-end-start-radius: 3px; }

.verb-paradigm { table-layout: fixed; }
.verb-cell {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}
.verb-pron {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.verb-form {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.verb-paradigm.is-abstract .verb-form { font-weight: 600; }

.verb-cues,
.verb-formula,
.verb-list {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-prose);
  color: var(--ink);
}
.verb-formula {
  padding: var(--sp-8) var(--sp-14);
  border-radius: var(--rad-inner);
  background: var(--inner);
}
.verb-formula a {
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
  text-underline-offset: .22em;
}
.verb-formula .verb-term {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
}
.verb-prose {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
}
.verb-bands {
  display: grid;
  gap: var(--sp-14);
}
.gender-band > h5 {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.num-layout { gap: var(--gap); }
.num-cardinals { gap: var(--gap); }

.num-table th,
.num-table td {
  vertical-align: baseline;
  padding: var(--sp-12) var(--bleed);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.num-table th {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: var(--sp-16);
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.num-table abbr { text-decoration: none; }
.num-table td {
  text-align: left;
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.num-value {
  font-family: var(--ff-body);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
  color: var(--ink);
}

.num-dial-card {
  --floor-0: light-dark(color-mix(in oklab, var(--accent) 7%, var(--card)), color-mix(in oklab, var(--accent) 12%, var(--card)));
  --floor-1: light-dark(color-mix(in oklab, var(--accent) 14%, var(--card)), color-mix(in oklab, var(--accent) 19%, var(--card)));
  --floor-2: light-dark(color-mix(in oklab, var(--accent) 23%, var(--card)), color-mix(in oklab, var(--accent) 27%, var(--card)));
  --floor-3: light-dark(color-mix(in oklab, var(--accent) 34%, var(--card)), color-mix(in oklab, var(--accent) 37%, var(--card)));
}

.num-dial-plate {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: calc(var(--rad-inner) + 2px);
  background: var(--inner-deep);
  box-shadow: inset 0 1px 3px light-dark(rgb(0 0 0 / .07), rgb(0 0 0 / .4));
}
.num-dial-input {
  width: 100%;
  min-width: 0;
  padding: var(--sp-6) 0;
  border: 0;
  border-radius: var(--rad-unit);
  background: transparent;
  font: 700 2rem/1.15 var(--ff-body);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink);
}
.num-dial-input::placeholder { color: var(--ink-faint); }
.num-dial-input:focus-visible { outline-offset: 0; }
.num-step {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rad-unit);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  transition: transform var(--t-fast) ease-out;
}
.num-step:active { transform: scale(.94); }

.num-sum {
  display: grid;
  margin: var(--sp-16) 0 0;
  padding: 0;
  list-style: none;
}
.num-sum-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-12);
  padding: var(--sp-8) 0;
  border-top: 1px dashed var(--hairline-strong);
}
.num-sum-row:first-child { border-top: 0; padding-top: 0; }
.num-sum-row:last-child { padding-bottom: 0; }
.num-chip {
  display: inline-grid;
  gap: 1px;
  margin-block: 2px;
  padding: var(--sp-4) var(--sp-8);
  border-radius: 8px;
  background: var(--floor-0);
  vertical-align: bottom;
}
.num-chip[data-place="1"] { background: var(--floor-1); }
.num-chip[data-place="2"] { background: var(--floor-2); }
.num-chip[data-place="s"] {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--floor-3);
}
.num-chip-w {
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  line-height: 1.15;
  color: var(--ink);
}
.num-chip-v,
.num-sum-v {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--accent) 45%, var(--ink-soft));
}
.num-sum-v {
  padding-bottom: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.num-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-16);
}
.num-preset {
  min-height: 2.25rem;
  padding: 0 var(--sp-12);
  border-radius: var(--rad-pill);
  background: var(--inner);
  font-size: var(--fs-caption);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  transition: transform var(--t-fast) ease-out, background-color var(--t-med) ease-out, color var(--t-med) ease-out;
}
.num-preset:active { transform: scale(.97); }
.num-preset[aria-pressed="true"] { background: var(--ink); color: var(--card); }

.chart-table { display: grid; }
.chart-row {
  display: grid;
  gap: var(--sp-10);
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--hairline);
}
.chart-row:first-child { padding-top: 0; border-top: 0; }
.chart-row:last-child { padding-bottom: 0; }
.chart-row > * { min-width: 0; }
.chart-row :is(h4, h5) {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.num-band { gap: var(--sp-10); }
.num-band-head .num-value {
  font-size: var(--fs-title);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
}
.num-band-head .chart-sep { margin-inline: var(--sp-4); }

.num-count-run {
  display: grid;
  grid-template-columns: max-content;
  gap: var(--sp-6);
  max-width: 100%;
}
.num-count-run .eu-gender { min-width: 1.75rem; }

.chart-example {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}
.chart-example .sr {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.chart-example .tr {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.asp-key {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.75rem;
  height: .625rem;
}
.asp-key.is-big { width: 2.5rem; height: .875rem; }
.asp-key[data-a="ipf"],
.asp-tl-ev[data-a="ipf"] {
  color: var(--ink-muted);
  border-radius: 3px;
  background: linear-gradient(-45deg, transparent 0 25%, currentColor 25% 50%, transparent 50% 75%, currentColor 75%) 0 0 / 7px 7px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 24%, #000 76%, transparent);
}
.asp-key[data-a="pf"],
.asp-tl-ev[data-a="pf"] {
  --dot: .5rem;
  color: var(--ink);
  background:
    linear-gradient(currentColor, currentColor) left center / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) left center / calc(100% - var(--dot) / 2) 2px no-repeat;
}
.asp-key[data-a="pf"]::after,
.asp-tl-ev[data-a="pf"]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  border-radius: 50%;
  background: currentColor;
}
.asp-key.is-big[data-a="pf"] { --dot: .625rem; }

#aspectChart .sr mark,
#aspectChart .lit {
  --tint: color-mix(in oklab, var(--tone-orange) 18%, transparent);
  font-style: normal;
  font-weight: 600;
  color: color-mix(in oklab, var(--tone-orange) 80%, var(--ink));
  background: linear-gradient(transparent 34%, var(--tint) 34% 84%, transparent 84%);
  padding: 0;
  border-radius: 0;
}

.asp-keys { display: grid; gap: var(--sp-12); }
.asp-keyrow {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-14);
}
.asp-keyrow strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.asp-keyrow strong + span {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.asp-tl {
  position: relative;
  height: 5.25rem;
  margin: var(--sp-2) 0 var(--sp-14);
  border-radius: var(--rad-inner);
  background: var(--inner);
  overflow: hidden;
}
.asp-tl-axis {
  position: absolute;
  left: var(--sp-12);
  right: var(--sp-12);
  bottom: 1.75rem;
  height: 1px;
  background: var(--hairline-strong);
}
.asp-tl-axis::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--hairline-strong);
  border-right: 1px solid var(--hairline-strong);
  transform: rotate(45deg);
}
.asp-tl-now {
  position: absolute;
  left: 50%;
  top: var(--sp-8);
  bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 0;
}
.asp-tl-now::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1.125rem;
  left: -.75px;
  width: 1.5px;
  border-radius: 1px;
  background: var(--accent);
}
.asp-tl-now > span {
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-muted);
  white-space: nowrap;
}
.asp-tl-ev { position: absolute; height: .75rem; }
.asp-tl-ev[data-a="ipf"] {
  top: .875rem;
  background-size: 8px 8px;
}
.asp-tl-ev[data-a="pf"] { top: 2.25rem; --dot: .75rem; }
.asp-tl-ev[data-at="around"] { left: 12%; right: 12%; }
.asp-tl-ev[data-a="ipf"][data-at="before"] { left: 2%; right: 56%; }
.asp-tl-ev[data-a="ipf"][data-at="after"] { left: 56%; right: 2%; }
.asp-tl-ev[data-a="pf"][data-at="before"] { left: 14%; right: 60%; }
.asp-tl-ev[data-a="pf"][data-at="after"] { left: 60%; right: 14%; }

.asp-egs { display: grid; gap: var(--sp-12); }
.asp-eg {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-12);
}
.asp-eg > .asp-key { margin-top: calc(var(--fs-lead) * var(--lh-snug) / 2 - .3125rem); }

.asp-cols,
.asp-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: calc(-1 * var(--bleed));
}
.asp-cell {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  min-width: 0;
  padding-inline: var(--bleed) var(--sp-6);
}
.asp-cell ~ .asp-cell { padding-inline: var(--sp-6) var(--bleed); }

.asp-legend { margin-top: var(--sp-12); }
.asp-legend .asp-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-caption);
  font-weight: 650;
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}
.asp-legend .asp-cell > span:last-child { min-width: 0; }

.asp-table { display: grid; }
.asp-table:last-child { margin-bottom: calc(var(--sp-8) - var(--sp-16)); }
.asp-row {
  row-gap: var(--sp-4);
  padding-block: var(--sp-12);
  border-radius: var(--rad-inner);
}
.asp-row:nth-child(odd) { background: var(--inner); }
.asp-span {
  grid-column: 1 / -1;
  padding-inline: var(--bleed);
}
.asp-row .sr {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.asp-row .tr {
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.aspect-prefix-label {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.aspect-prefix-label .tip-chip { margin-left: 0; margin-top: 0; }
.aspect-prefix {
  font-family: var(--ff-display);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1;
}

.pitch-fact {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
}
.card-section > .pitch-fact { margin-bottom: var(--sp-12); }

.pitch-item { gap: var(--sp-8); }
.pitch-item > .chart-label {
  justify-self: start;
  margin-bottom: var(--sp-4);
  padding: .25rem var(--sp-8) .1875rem;
  border-radius: var(--rad-pill);
  background: var(--inner-deep);
  color: var(--ink-soft);
}

.pitch-diagram {
  --pitch-unit: 4rem;
  --pitch-stressed: var(--pitch-unit);
  display: grid;
  grid-template-columns: var(--pitch-stressed) var(--pitch-unit);
  justify-self: start;
  row-gap: var(--sp-6);
  padding: var(--sp-12) var(--sp-16) var(--sp-10);
  border-radius: var(--rad-inner);
  background: var(--inner);
}
.pitch-diagram[data-length="long"] { --pitch-stressed: calc(var(--pitch-unit) * 1.8); }
.pitch-curve {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 1.6rem;
  overflow: visible;
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.pitch-curve path,
.pitch-curve line { vector-effect: non-scaling-stroke; }
.pitch-curve line { color: var(--ink-faint); stroke: currentColor; stroke-width: 1.5px; }
.pitch-syl {
  font-family: var(--ff-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  text-align: center;
}
.pitch-syl:nth-child(2) { font-weight: 600; }

.pitch-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-20);
}
.pitch-dict {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-4);
}

.pitch-item + .pitch-item { padding-top: var(--sp-14); }
.pitch-row { grid-template-columns: 5.5rem repeat(2, minmax(0, 1fr)); }
.pitch-row .sr { font-size: var(--fs-lead); }
.pitch-row-head.pitch-row { align-items: end; padding-block: 0 var(--sp-8); }
.pitch-rowhead {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
}

.prep-row {
  display: grid;
  gap: var(--sp-10);
}
.prep-card-group .card-item { padding-block: var(--sp-14); }
.prep-card-group .card-item:first-child { padding-top: 0; }
.prep-card-group .card-item:last-child { padding-bottom: 0; }

.prep-icon-cell {
  --pi-plate: var(--inner-deep);
  --pi-tone: var(--tone, var(--ink-soft));
  display: block;
  border-radius: 12px;
  background: var(--pi-plate);
}

.prep-icon {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pi-t, .pi-l, .pi-r, .pi-n {
  stroke: light-dark(color-mix(in oklab, var(--ink) 34%, var(--card)), color-mix(in oklab, var(--ink) 6%, var(--card)));
  stroke-width: .75;
  stroke-linejoin: round;
}
.pi-t { fill: light-dark(var(--card), color-mix(in oklab, var(--ink) 40%, var(--pi-plate))); }
.pi-l { fill: light-dark(color-mix(in oklab, var(--ink) 12%, var(--card)), color-mix(in oklab, var(--ink) 25%, var(--pi-plate))); }
.pi-r { fill: light-dark(color-mix(in oklab, var(--ink) 26%, var(--card)), color-mix(in oklab, var(--ink) 13%, var(--pi-plate))); }
.pi-n { fill: light-dark(color-mix(in oklab, var(--ink) 40%, var(--card)), var(--card)); }

.pi-j, .pi-w, .pi-b { fill: none; stroke-linejoin: round; }
.pi-j { stroke: light-dark(color-mix(in oklab, var(--ink) 38%, var(--card)), color-mix(in oklab, var(--ink) 30%, var(--pi-plate))); stroke-width: 2.25; }
.pi-w { stroke: light-dark(color-mix(in oklab, var(--ink) 40%, var(--card)), color-mix(in oklab, var(--ink) 20%, var(--pi-plate))); stroke-width: 1.75; stroke-linecap: round; }
.pi-b { stroke: light-dark(color-mix(in oklab, var(--ink) 55%, var(--card)), color-mix(in oklab, var(--ink) 75%, var(--pi-plate))); stroke-width: 2; }

.pi-s { fill: light-dark(color-mix(in oklab, var(--ink) 15%, var(--pi-plate)), var(--card)); }
.pi-z { fill: light-dark(color-mix(in oklab, var(--ink) 15%, var(--card)), color-mix(in oklab, var(--ink) 18%, var(--pi-plate))); }

.pi-f { fill: var(--pi-tone); }
.pi-k { fill: light-dark(color-mix(in oklab, var(--pi-tone), var(--card) 55%), color-mix(in oklab, var(--pi-tone), var(--ink) 45%)); }
.pi-g { fill: color-mix(in oklab, var(--pi-tone) 32%, var(--pi-plate)); }

.pi-o { fill: light-dark(color-mix(in oklab, var(--ink) 30%, var(--card)), color-mix(in oklab, var(--ink) 34%, var(--pi-plate))); }
.pi-q { fill: light-dark(color-mix(in oklab, var(--ink) 8%, var(--card)), color-mix(in oklab, var(--ink) 60%, var(--pi-plate))); }

.pi-p {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0 4;
}
.pi-a { fill: var(--ink-muted); }

.prep-name {
  font-family: var(--ff-display);
  font-size: var(--fs-serif-title);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
}

.prep-uses { display: grid; gap: var(--sp-12); }

.prep-use {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: start;
  column-gap: var(--sp-10);
}
.prep-use-text {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}
.prep-use-head {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.prep-meaning {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.prep-pop { width: min(22.5rem, calc(100vw - 24px)); }
.prep-pop .tip-pop-card {
  max-height: min(70vh, 540px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.prep-card { display: grid; gap: var(--sp-14); }
.prep-card-name {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
}
.prep-card-name i { font-family: inherit; }
.prep-card-uses { display: grid; gap: var(--sp-14); }

.false-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  padding: var(--sp-8);
  border-radius: var(--rad-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.false-table tr:nth-child(odd) > * { background: var(--inner); }
.false-table tr > :first-child { border-radius: var(--rad-inner) 0 0 var(--rad-inner); }
.false-table tr > :last-child { border-radius: 0 var(--rad-inner) var(--rad-inner) 0; }
.false-table th,
.false-table td {
  vertical-align: baseline;
  text-align: left;
  padding: var(--sp-12) var(--sp-12);
}
.false-table th {
  width: 1%;
  padding-right: var(--sp-16);
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.false-table td {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: var(--t-med); animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: var(--t-fast) ease-out both vt-fade-out; }
::view-transition-new(root) { animation: var(--t-med) var(--ease) both vt-rise-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(10px); } }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="alphabet"]      { view-transition-name: glyph-alphabet; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="cases"]         { view-transition-name: glyph-cases; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="numbers"]       { view-transition-name: glyph-numbers; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="verbs"]         { view-transition-name: glyph-verbs; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="pronouns"]      { view-transition-name: glyph-pronouns; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="prepositions"]  { view-transition-name: glyph-prepositions; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="aspect"]        { view-transition-name: glyph-aspect; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="pitch-stress"]  { view-transition-name: glyph-pitch; }
:is(.tile-glyph, .cover-glyph, .next-glyph)[data-chart="false-friends"] { view-transition-name: glyph-false-friends; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  :is(.tile, .next-chart, .dock-btn, .seg-btn, .settings-btn, .cover-chips a, .menu-list a, .find-chip, .find-orb, .find-close, .tip-chip, .prep-trigger, .tip-pop-close):active { transform: none; }
  .sheet, .tip-pop, .settings-menu { transform: none; }
  .arrive-mark, .find-spinner { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .card, .cover, .hero, .tile, .next-chart, .letter, .false-table,
  .sheet-card, .settings-menu-card, .tip-pop-card, .dock-bar, .find-orb, .settings-btn,
  .find-field-bg, .find-close, .find-recent, .find-results, .find-chip {
    border: 1px solid CanvasText;
  }
  .arrive-mark { outline: 3px solid Highlight; }
  .card-head { border-bottom: 1px solid CanvasText; }
  .num-chip { border: 1px solid CanvasText; }
  .num-chip[data-place="s"] { border-style: dashed; }
  .seg-btn[aria-pressed="true"],
  .seg-btn[aria-current="true"],
  .dock-btn[aria-expanded="true"],
  .chart-menu-list a[aria-current="page"],
  .section-menu-list .case-strip-cell.is-current a,
  .find-row[aria-selected="true"],
  .find-chip[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .script-seg::before { display: none; }
  :root:not([data-script="cyr"]) .script-seg [data-script-chip="lat"],
  [data-script="cyr"] .script-seg [data-script-chip="cyr"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .case-strip-cell a::before {
    forced-color-adjust: none;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}