/* neurophonetics.com — one stylesheet for the whole site.
   Self-hosted fonts only (Fraunces and Figtree, the same faces the apps use; OFL, see
   assets/fonts), no imports, no third-party requests. Each app's color pair comes from its
   ic_launcher_background.xml and is set per page as --a1 / --a2. */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/Figtree-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/Figtree-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Warm white paper, deep sea-green ink, amber as the one warm signal. The app icons carry
     their own gradients; a green-leaning neutral lets teal, indigo, green, purple and rust
     all sit on it without one of them clashing. */
  --bg: #F8F7F2;
  --surface: #FFFFFF;
  --surface-alt: #ECEBE3;
  --text: #0F1F1E;
  --muted: #56655F;
  --accent: #0E7C73;
  --accent-ink: #FFFFFF;
  --signal: #E9A23B;
  --np: #8A5A00;
  --line: #DAD9CF;
  --shadow: 0 12px 32px rgb(15 31 30 / 0.10);
  --a1: #0E7C73;
  --a2: #2E3A8C;
  --radius: 18px;
  --measure: 66ch;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1514;
    --surface: #132120;
    --surface-alt: #1D2E2C;
    --text: #E8F0EC;
    --muted: #9BB0A8;
    --accent: #5CD3C4;
    --accent-ink: #0B1514;
    --signal: #F4B860;
    --np: #E9A23B;
    --line: #23403C;
    --shadow: 0 14px 36px rgb(0 0 0 / 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0B1514;
  --surface: #132120;
  --surface-alt: #1D2E2C;
  --text: #E8F0EC;
  --muted: #9BB0A8;
  --accent: #5CD3C4;
  --accent-ink: #0B1514;
  --signal: #F4B860;
  --np: #E9A23B;
  --line: #23403C;
  --shadow: 0 14px 36px rgb(0 0 0 / 0.5);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -0.012em; margin: 0 0 0.45em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-top: 2.2em; }
h3 { font-size: 1.3rem; margin-top: 1.5em; }
p, ul, ol, blockquote { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: 0.35em; }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--surface-alt); padding: 0.1em 0.35em; border-radius: 4px; }
blockquote {
  border-left: 3px solid var(--signal);
  margin-left: 0;
  padding: 0.6em 1.1em;
  background: var(--surface);
  border-radius: 0 12px 12px 0;
  color: var(--muted);
}
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Layout */
.wrap { width: min(100% - 2rem, 66rem); margin-left: auto; margin-right: auto; }
main { flex: 1; padding-top: 1.5rem; padding-bottom: 4rem; }
.prose { max-width: var(--measure); }
.prose h2 { font-size: 1.45rem; }

/* Skip link */
.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.5rem 1rem; border-radius: 8px; z-index: 10;
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 1rem; }

/* Header — a floating rounded bar (site 1.5.0). Sticky, never fixed: it keeps its place in the
   flow, so nothing hides behind it and nothing needs a script. It clears the notch and the
   rounded corners through the safe-area insets (the pages say viewport-fit=cover). */
.site-header {
  position: sticky; top: 0; z-index: 20;
  padding: max(0.6rem, env(safe-area-inset-top)) env(safe-area-inset-right, 0px) 0.4rem env(safe-area-inset-left, 0px);
  pointer-events: none;                       /* the gutter round the bar never swallows a click */
}
.site-header nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1rem;
  max-width: 1180px; margin: 0 auto; padding: 0.45rem 0.5rem 0.45rem 1.1rem;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow), 0 1px 3px rgb(15 31 30 / 0.06);
}
.brand {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  color: var(--text); font-size: 1.2rem; display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto;
}
.brand .mark {
  width: 1.7rem; height: 1.7rem; flex: none;
  background: url("assets/logo-np.svg") center / contain no-repeat;
}
.brand b { font-weight: inherit; color: var(--np); }
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; }
.nav-links > li { margin: 0; }
.nav-links a, .nav-links summary {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.15;
  padding: 0.3rem 0.8rem; border-radius: 999px; cursor: pointer; list-style: none;
  white-space: nowrap;
}
.nav-links .lbl { display: inline-flex; align-items: center; gap: 0.35rem; }
/* The IPA marker: small, in the house sea, set above its label. The site fonts have no IPA, so
   the marker is drawn in a system face that has it — the same rule as the linking mark below. */
.sym {
  font-family: "Noto Sans", "DejaVu Sans", "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", sans-serif;
  font-size: 0.92rem; font-weight: 600; line-height: 1; color: var(--accent-text); min-height: 0.92rem;
}
/* On an app's own pages the Apps marker is that app's symbol, in the app's accent (COLORS.md §3). */
.sym.app-redeem-time { color: #8A5A00; } .sym.app-mimesis { color: #0B6F94; } .sym.app-phonema { color: #2E3A8C; }
.sym.app-lectio { color: #3D7A35; } .sym.app-antiphon { color: #B0421C; } .sym.app-sentio { color: #0E7C73; }
.sym.app-semantica { color: #7A3FA6; } .sym.app-pragma { color: #A8336A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sym.app-redeem-time { color: #FFC857; } :root:not([data-theme="light"]) .sym.app-mimesis { color: #6CCFEA; } :root:not([data-theme="light"]) .sym.app-phonema { color: #A9B4F5; } :root:not([data-theme="light"]) .sym.app-lectio { color: #9BD08A; } :root:not([data-theme="light"]) .sym.app-antiphon { color: #F0956A; } :root:not([data-theme="light"]) .sym.app-sentio { color: #5CD3C4; } :root:not([data-theme="light"]) .sym.app-semantica { color: #C9A6F0; } :root:not([data-theme="light"]) .sym.app-pragma { color: #F09AC0; }
}
:root[data-theme="dark"] .sym.app-redeem-time { color: #FFC857; } :root[data-theme="dark"] .sym.app-mimesis { color: #6CCFEA; } :root[data-theme="dark"] .sym.app-phonema { color: #A9B4F5; } :root[data-theme="dark"] .sym.app-lectio { color: #9BD08A; } :root[data-theme="dark"] .sym.app-antiphon { color: #F0956A; } :root[data-theme="dark"] .sym.app-sentio { color: #5CD3C4; } :root[data-theme="dark"] .sym.app-semantica { color: #C9A6F0; } :root[data-theme="dark"] .sym.app-pragma { color: #F09AC0; }
.nav-links summary::-webkit-details-marker { display: none; }
.nav-links a:hover, .nav-links summary:hover, .nav-links details[open] > summary { background: var(--surface-alt); }
.nav-links a[aria-current="page"] { background: var(--surface-alt); }
.nav-links .cta { margin-left: 0.35rem; }
.nav-links .cta a { background: var(--accent); color: var(--accent-ink); padding: 0.55rem 1.15rem; flex-direction: row; }
.nav-links .cta a:hover { filter: brightness(1.08); background: var(--accent); }
.chev { width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform 160ms; }
details[open] > summary .chev { transform: translateY(0.1em) rotate(-135deg); }

/* The Apps menu: a panel with one row per app, icon and its one-line job. */
.apps-menu { position: relative; }
.apps-menu .panel {
  position: absolute; left: 0; top: calc(100% + 0.7rem); z-index: 30;
  width: min(92vw, 30rem); background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow); padding: 0.5rem; margin: 0; list-style: none;
  display: grid; gap: 0.15rem; max-height: calc(100vh - 7rem); overflow-y: auto;
}
.apps-menu .panel li { margin: 0; }
.apps-menu .panel a { display: grid; grid-template-columns: 40px 1fr; gap: 0.75rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: 12px; font-weight: 600; white-space: normal; }
.apps-menu .panel img { width: 40px; height: 40px; border-radius: 11px; }
.apps-menu .panel small { display: block; font-weight: 400; color: var(--muted); font-size: 0.86rem; line-height: 1.35; }

/* Small screens: a compact bar — the brand and one Menu button. Open, the bar becomes a rounded
   card with every link on its own row, the marker beside the label, the call to action last.
   The row of links needs about 900 px with the markers, so it folds below that. */
.burger { display: none; }
@media (max-width: 960px) {
  .site-header nav { flex-wrap: wrap; border-radius: 24px; padding: 0.35rem 0.4rem 0.35rem 0.9rem; gap: 0.5rem; }
  .brand { font-size: 1.1rem; }
  .brand .mark { width: 1.5rem; height: 1.5rem; }
  .burger { display: block; margin-left: auto; }
  .burger > summary {
    list-style: none; cursor: pointer; padding: 0.4rem 1rem; border-radius: 999px; display: flex; align-items: center;
    border: 1px solid var(--line); font-weight: 600; font-size: 0.95rem; color: var(--text); background: var(--surface);
  }
  .burger > summary::-webkit-details-marker { display: none; }
  .nav-links { display: none; }
  .burger[open] ~ .nav-links, .burger[open] + .nav-links { display: grid; width: 100%; gap: 0.1rem; padding: 0.3rem 0 0.4rem; }
  .nav-links a, .nav-links summary { width: 100%; flex-direction: row; justify-content: flex-start; gap: 0.7rem; padding: 0.45rem 0.8rem; }
  .nav-links .sym { width: 1.4rem; text-align: center; font-size: 0.9rem; }
  .apps-menu .panel { position: static; width: 100%; box-shadow: none; border: 0; padding: 0 0 0 0.5rem; background: transparent; max-height: none; }
  .nav-links .cta { margin: 0.4rem 0 0; }
  .nav-links .cta a { justify-content: center; }
}

/* Motion: whoever asked the system for less gets none — no smooth scroll, no hover lifts, no
   chevron turns, no reveals. Nothing on the site moves on its own, and nothing hijacks the scroll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Hero */
.hero { padding-top: 3.5rem; padding-bottom: 1.5rem; position: relative; }
.hero h1 { margin-bottom: 0.2em; }
.hero .motto {
  font-family: var(--display); font-size: clamp(1.5rem, 3.6vw, 2.25rem); font-weight: 700;
  margin: 0 0 0.6em; color: var(--accent); letter-spacing: -0.01em;
}
.hero .lede { font-size: clamp(1.1rem, 2vw, 1.25rem); color: var(--muted); max-width: var(--measure); }

/* The waveform: a voice, drawn. Bars rise from the baseline; on a page at rest they are
   already visible, and the small sway only runs for people who have not asked for calm. */
.wave { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin: 1.6rem 0 0.5rem; max-width: 22rem; }
.wave span {
  flex: 1; border-radius: 3px 3px 0 0; min-width: 3px;
  background: linear-gradient(180deg, var(--signal), var(--accent));
  height: calc(var(--h) * 1%);
  transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .wave span { animation: sway 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
  @keyframes sway { from { transform: scaleY(0.78); } to { transform: scaleY(1); } }
}

.app-hero { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.75rem; align-items: start; padding-top: 3rem; padding-bottom: 0.5rem; }
.app-hero .app-icon { width: 104px; height: 104px; border-radius: 26px; box-shadow: var(--shadow); grid-row: span 4; }
.app-hero h1 { margin-bottom: 0.1em; }
.app-hero .slogan { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; margin: 0 0 0.4em; color: var(--accent); }
.app-hero .lede { margin: 0; font-size: 1.15rem; color: var(--muted); max-width: var(--measure); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; color: var(--muted); margin: 0.2em 0 0.5em; }
.app-bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--a1), var(--a2)); margin: 1.75rem 0 0.5rem; }
@media (max-width: 480px) {
  .app-hero { grid-template-columns: 1fr; }
  .app-hero .app-icon { grid-row: auto; width: 80px; height: 80px; border-radius: 20px; }
}

/* Groups and cards */
.group { margin-top: 3rem; padding-left: 1.1rem; border-left: 3px solid var(--signal); }
.group > h2 { margin-top: 0; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.group .why { color: var(--muted); margin: -0.2rem 0 0; }
.cards { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: relative; display: flex; flex-direction: column;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  margin: 0;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card .body { padding: 1.25rem 1.35rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.card .head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.35rem; }
.card .head img {
  width: 60px; height: 60px; border-radius: 16px; flex: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--a1) 35%, transparent);
}
.card h3 { margin: 0; font-size: 1.45rem; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.card .slogan { margin: 0; font-weight: 600; color: var(--accent); }
.card .job { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.98rem; }
.card .more { margin-top: auto; padding-top: 0.8rem; font-weight: 600; color: var(--accent); font-size: 0.95rem; }
.card::after {
  content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 4px;
  background: linear-gradient(90deg, var(--a1), var(--a2)); opacity: 0; transition: opacity 160ms ease;
}
.card:hover::after { opacity: 1; }

/* The state of something that is not released. Said in words at the top of the page: a reader
   cannot be expected to work out "unreleased" from a greyed-out button further down. */
.status {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--signal);
  border-radius: 14px; padding: 1rem 1.15rem; margin: 1.6rem 0 0; max-width: var(--measure);
}
.status .mark {
  width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--signal);
  margin-top: 0.42rem; grid-row: span 2; flex: none;
}
.status strong { font-family: var(--display); font-size: 1.05rem; }
.status p { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.97rem; }
.state {
  display: inline-block; align-self: start; margin: 0.45rem 0 0; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--signal) 22%, transparent); color: var(--text);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
}


/* Phonema's answer, set as type rather than described: spelling over IPA, the stress in the
   family's amber, broad beside narrow. */
.interlinear {
  display: flex; flex-wrap: wrap; gap: 0.35em 0.25em; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.3rem; margin: 0.9rem 0 0;
}
.interlinear .w { display: grid; justify-items: center; gap: 0.1em; line-height: 1.25; }
.interlinear .sp { font-size: 1.05rem; color: var(--muted); }
.interlinear .ipa {
  font-family: var(--display); font-size: clamp(1.6rem, 4.4vw, 2.3rem); font-weight: 700;
  letter-spacing: 0.01em; white-space: nowrap;
}
.interlinear .ipa .s { color: var(--accent); }        /* the stressed syllable, said louder */
.compare { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 0.9rem 0 0; padding: 0; }
.compare h3 { margin: 0; font-size: 1.05rem; }
.compare .interlinear { margin-top: 0.4rem; }
figure.example { margin: 1.6rem 0 0; }
figure.example figcaption { color: var(--muted); font-size: 0.95rem; margin-top: 0.7rem; max-width: var(--measure); }

/* App pages */
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.features li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0.95rem 1.15rem;
  border-left: 4px solid var(--a2);
}
.features li strong { display: block; font-family: var(--display); font-size: 1.12rem; margin-bottom: 0.15rem; }
.get {
  background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 12%, var(--surface)), color-mix(in srgb, var(--a2) 12%, var(--surface)));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem; margin-top: 3rem;
}
.get h2 { margin-top: 0; }
.get .row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.get .row img { width: 52px; height: 52px; border-radius: 14px; }
.button {
  display: inline-block; padding: 0.65rem 1.25rem; border-radius: 999px; font-weight: 600;
  text-decoration: none; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent);
}
.button.soon { background: transparent; color: var(--muted); border-color: var(--line); cursor: default; }
.button:not(.soon):hover { filter: brightness(1.08); }
.note { color: var(--muted); font-size: 0.95rem; }
.family { margin-top: 3rem; }
.family ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.family li { display: flex; gap: 0.75rem; align-items: center; margin: 0; }
.family img { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.family .slog { display: block; color: var(--muted); font-size: 0.9rem; }

.legal-head { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1.5rem; color: var(--muted); font-size: 0.95rem; }
.legal-head img { width: 44px; height: 44px; border-radius: 12px; }
.legal-head p { margin: 0; }

/* Contact */
.addresses { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.addresses li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0.95rem 1.1rem; margin: 0; }
.addresses strong { display: block; margin-bottom: 0.15rem; font-family: var(--display); font-size: 1.05rem; }
.addresses a { font-family: var(--mono); font-size: 0.93em; word-break: break-all; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-top: 1.75rem; padding-bottom: 2.25rem; color: var(--muted); font-size: 0.95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--muted); }

/* What's new: one tile per change, the icon first and a few words after — people scan, they do
   not read. The icons are inline <symbol>s at the top of the section, stroked in currentColor. */
.ver {
  display: inline-block; vertical-align: 0.3em; margin-left: 0.5rem; padding: 0.12rem 0.65rem;
  border-radius: 999px; font-family: var(--font); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
}
.ver.soon { background: color-mix(in srgb, var(--signal) 24%, transparent); color: var(--text); }
.tiles { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tiles li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.1rem 0.8rem; align-items: start; align-content: start; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0.85rem 1rem;
}
.ic {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; grid-row: span 2;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent);
}
.ic svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tiles strong { font-family: var(--display); font-size: 1.02rem; line-height: 1.25; }
.tiles .t { color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.pro {
  display: inline-block; margin-left: 0.3rem; padding: 0.02rem 0.45rem; border-radius: 999px; vertical-align: 0.1em;
  font-family: var(--font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--signal) 30%, transparent); color: var(--text);
}
.shot {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin: 1.2rem 0 0; max-width: 40rem;
}
.shot figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 0.8rem; }

/* Redeem Time's floating timer, in the app's own colors (TimerColor.kt) — fixed, as on the phone. */
.bubbles { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; list-style: none; padding: 0; margin: 0; }
.bubbles li { display: grid; justify-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; color: var(--muted); text-align: center; width: 5.6rem; }
.bubble { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; font-weight: 700; font-size: 0.95rem; box-shadow: 0 4px 12px rgb(0 0 0 / 0.18); }
.bubble.wig { position: relative; }
.bubble.wig::before, .bubble.wig::after { content: ""; position: absolute; top: 30%; width: 0.35rem; height: 40%; border: 2px solid var(--muted); border-color: transparent var(--muted) transparent transparent; border-radius: 50%; }
.bubble.wig::before { left: -0.6rem; transform: scaleX(-1); }
.bubble.wig::after { right: -0.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .bubble.wig { animation: wiggle 3.2s ease-in-out infinite; }
  @keyframes wiggle { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-7deg); } 90% { transform: rotate(6deg); } 93% { transform: rotate(-4deg); } 96% { transform: rotate(2deg); } }
}
/* Today by app: rings with minutes under them, as under the dashboard's ring. */
.strip { display: flex; flex-wrap: wrap; gap: 0.8rem; list-style: none; padding: 0; margin: 0; }
.strip li { display: grid; justify-items: center; gap: 0.2rem; margin: 0; font-size: 0.82rem; color: var(--muted); }
.strip .app { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--text); background: var(--surface-alt); outline: 3px solid var(--line); outline-offset: 2px; }
.strip .rest { width: auto; padding: 0 0.8rem; border-radius: 999px; font-size: 0.82rem; }

/* A phone card drawn in type: Mimesis's NOW card, Lectio's chunks. */
.card-mock { border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; background: var(--bg); }
.card-mock .lbl { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin: 0 0 0.3rem; }
.card-mock .say { font-size: 1.2rem; font-weight: 600; margin: 0; }
.card-mock .ipa { font-size: 1.15rem; color: var(--muted); margin: 0.1rem 0 0.7rem; }
.card-mock .ipa .s, .chunk .ipa .s { color: var(--accent); font-weight: 600; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.controls span { border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.7rem; font-weight: 600; font-size: 0.9rem; background: var(--surface); }
.controls .go { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dots { display: inline-flex; gap: 0.3rem; margin-left: 0.4rem; vertical-align: middle; }
.dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--signal); }
.chunk { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 0.8rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.chunk:first-of-type { border-top: 0; }
.chunk .lvl { justify-self: start; font-size: 0.78rem; font-weight: 700; padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--surface-alt); }
.chunk .lvl.n1 { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chunk .lvl.n2 { background: color-mix(in srgb, var(--signal) 30%, transparent); }
.chunk p { margin: 0; }
.chunk b { font-weight: 700; background: color-mix(in srgb, var(--signal) 26%, transparent); border-radius: 4px; padding: 0 0.15em; }
.chunk .ipa { color: var(--muted); font-size: 0.95rem; }

/* Three PDF layouts as three little pages (Phonema and Lectio draw the same three). */
.pages { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.pages li { margin: 0; display: grid; justify-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; text-align: center; width: 8.5rem; }
.pages svg { width: 6.5rem; height: auto; }
.pages .pg { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.pages .tx { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.pages .ip { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }

/* ---------------------------------------------------------------- Diagrams that teach the senses
   Inline SVG drawn by tool/make_figures.py from the family's data. Every color is a token, so
   they read in light and dark; text sits at about 12–14 px on a 360 px phone. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.diagram { margin: 1.4rem 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.15rem 1rem; }
.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagram figcaption { color: var(--muted); font-size: 0.95rem; margin-top: 0.9rem; max-width: var(--measure); }
.diagram figcaption strong { color: var(--text); }
.diagram .w { margin: 0 0 0.35rem; }
.diagram .w strong { font-family: var(--display); font-size: 1.1rem; }
.diagram .ipa { color: var(--accent); font-weight: 600; }
.diagram .says { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--muted); }
.diagram .ax { fill: var(--muted); font: 12.5px var(--font); }
.vowel-space svg { max-width: 34rem; margin-left: auto; margin-right: auto; }
.vowel-space .grid { stroke: var(--line); stroke-width: 1; }
.vowel-space .ring { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 1.4; }
.vowel-space .ring.weak { fill: none; stroke: var(--signal); stroke-dasharray: 4 3; }
.vowel-space .dot { fill: var(--text); }
.vowel-space .v { fill: var(--text); font: 700 19px var(--display); }
.vowel-space .v.weak { fill: var(--muted); }
.vowel-space .kw { fill: var(--muted); font: 400 12.5px var(--font); }
.vowel-space .mouth { fill: var(--text); font: 600 13px var(--font); }
.vowel-space .arr { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 3; }
.spec-row { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.spec-row li { margin: 0; }
.spectro .band { stroke: var(--signal); stroke-width: 2; stroke-dasharray: 5 3; }
.spectro .bl { fill: #FFF6E0; font: 700 12.5px var(--font); paint-order: stroke; stroke: #0B1514; stroke-width: 3px; }
.feel .pair { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.feel .pair li { margin: 0; display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.8rem; align-items: center; }
.feel .wf { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; }
.feel .axis { stroke: var(--line); }
.feel .env { fill: color-mix(in srgb, var(--accent) 70%, transparent); }
.feel .gap { fill: color-mix(in srgb, var(--signal) 35%, transparent); }
.feel .gl { fill: var(--text); font: 700 16px var(--font); }
.throat, .candle { width: 4.2rem; height: auto; }
.throat .head { fill: var(--surface-alt); stroke: var(--muted); stroke-width: 1.5; }
.throat .finger { fill: var(--signal); }
.throat .buzz { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.throat .still { stroke: var(--line); stroke-width: 2.4; stroke-linecap: round; }
.candle .wax { fill: var(--surface-alt); stroke: var(--muted); stroke-width: 1.5; }
.candle .wick { stroke: var(--text); stroke-width: 2; }
.candle .flame { fill: var(--signal); }
.candle .air { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.rhythm svg { max-width: 30rem; }
.rhythm .bar { fill: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.rhythm .bar.strong { fill: var(--accent); }
.rhythm .syl { fill: var(--text); font: 700 17px var(--display); }
.rhythm .ms { fill: var(--muted); font: 13px var(--font); }
.phrase { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: flex-end; margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.phrase .pw { display: grid; justify-items: center; gap: 0.1rem; }
.phrase .beat { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); }
.phrase .strong .beat { width: 1rem; height: 1rem; background: var(--accent); }
.phrase .ipa { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--text); }
.phrase .strong .ipa { color: var(--accent); }
.phrase .sp { font-size: 0.85rem; color: var(--muted); }
/* The ladder: a staircase that climbs to the right on a wide screen and stacks on a phone. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.steps li {
  margin: 0; display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.2rem 0.8rem; align-items: center;
  background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 0.6rem 0.9rem;
}
.steps li.weak { border-left-color: var(--signal); background: color-mix(in srgb, var(--signal) 9%, var(--bg)); }
.steps .n { grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.steps .weak .n { background: var(--signal); color: #1A1300; }
.steps .t strong { display: block; font-family: var(--display); font-size: 1.05rem; line-height: 1.2; }
.steps .t span { color: var(--muted); font-size: 0.9rem; }
.steps .ex { grid-column: 2; font-size: 0.92rem; color: var(--muted); }
.steps .ex .ipa { font-family: var(--display); font-size: 1.15rem; margin-right: 0.25rem; }
.steps .c { grid-row: 1 / span 2; grid-column: 3; font-size: 0.8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.steps .c::after { content: "\a things to say"; white-space: pre; font-size: 0.72rem; }
@media (min-width: 760px) {
  .steps li { margin-left: calc((var(--r) - 1) * 2.8%); }
  .steps .r1 { --r: 1; } .steps .r2 { --r: 2; } .steps .r3 { --r: 3; } .steps .r4 { --r: 4; } .steps .r5 { --r: 5; } .steps .r6 { --r: 6; } .steps .r7 { --r: 7; }
}


/* The flagship's place on the front page. */
.flagship {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.5rem; align-items: center; margin: 1.5rem 0 0;
  padding: 1.5rem 1.6rem; border-radius: var(--radius); border: 1px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), color-mix(in srgb, var(--signal) 12%, var(--surface)));
}
.flagship > img { width: 96px; height: 96px; border-radius: 24px; grid-row: span 3; box-shadow: var(--shadow); }
.flagship h2 { margin: 0; }
.flagship .slogan { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--accent); }
.flagship p { margin: 0; max-width: 46rem; }
.verbs { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; padding: 0; margin: 0.4rem 0 0; }
.verbs li { margin: 0; padding: 0.25rem 0.8rem; border-radius: 999px; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.verbs li.step { background: var(--surface); color: var(--text); border: 1px solid var(--line); font-weight: 600; }
.verbs li.arrow { background: none; color: var(--muted); padding: 0.25rem 0; }
@media (max-width: 560px) {
  .flagship { grid-template-columns: 1fr; padding: 1.2rem; }
  .flagship > img { grid-row: auto; width: 72px; height: 72px; }
}

/* The book: one calm line and a way to hear when it is out. */
.book { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.2rem; align-items: center; margin-top: 3rem; padding: 1.3rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.book svg { width: 3.4rem; height: 3.4rem; grid-row: span 2; color: var(--accent); }
.book h2 { margin: 0; font-size: 1.5rem; }
.book p { margin: 0; color: var(--muted); }

/* Each beat of the house line as its own band, so the picture sits with its words. */
.beat-band { margin-top: 3rem; }
.beat-band > h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 0.3rem; }
.beat-band > h3 .k { color: var(--accent); }
.beat-band > p { max-width: var(--measure); color: var(--muted); margin: 0; }
.two-up { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }
.two-up .diagram { margin-top: 1rem; }
.lede-sm { color: var(--muted); max-width: var(--measure); margin: -0.2rem 0 0; font-size: 1.05rem; }
.flagship .more-link { grid-column: 2; margin: 0.3rem 0 0; }
@media (max-width: 560px) { .flagship .more-link { grid-column: 1; } }
.tiles.three { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* ---------------------------------------------------------------- Design pass, 2026-10-05
   Accent text on a tinted chip needs a deeper green to keep 4.5:1 in the light theme (4.2 → 5.6);
   in the dark theme the same mix moves toward the light text, which only raises it. */
:root { --accent-text: color-mix(in srgb, var(--accent) 78%, var(--text)); }
.ver, .flagship .slogan, .chunk .lvl, .card-mock .lbl { color: var(--accent-text); }

/* Tap targets: 44 px at least, wherever a finger has to land. */
.nav-links a, .nav-links summary, .burger > summary { min-height: 44px; }
.button { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer ul a { display: inline-block; padding: 0.6rem 0.2rem; }
.family li a { display: inline-block; padding: 0.35rem 0; }
.addresses a { display: inline-block; padding: 0.3rem 0; }
.apps-menu .panel a { min-height: 52px; }
.prose a, p a { padding-top: 0.12em; padding-bottom: 0.12em; }

/* Small phones: a little less display size, never a horizontal scroll. */
html, body { overflow-x: clip; }
@media (max-width: 400px) {
  body { font-size: 1rem; }
  h1 { font-size: 2.2rem; }
  .hero .motto { font-size: 1.4rem; }
  .diagram { padding: 0.9rem 0.8rem; }
}

/* Type rhythm: headings a touch tighter, section spacing even. */
main > section, main > div.status { scroll-margin-top: 5rem; }
h2 + .lede-sm { margin-top: 0; }

/* Print: the words and the pictures, without the chrome. */
@media print {
  :root { --bg: #FFFFFF; --surface: #FFFFFF; --text: #000000; --muted: #333333; --line: #BBBBBB; }
  .site-header, .skip, .burger, .wave, .site-footer ul, .button.soon { display: none !important; }
  body { font-size: 11pt; background: #FFFFFF; }
  a { color: inherit; text-decoration: underline; }
  .card, .diagram, .features li, .tiles li, .get, .status, .flagship { box-shadow: none; break-inside: avoid; }
  .card:hover { transform: none; }
  h2, h3 { break-after: avoid; }
}

/* ---------------------------------------------------------------- Older browsers
   color-mix() needs Chrome 111 / Safari 16.2 / Firefox 113. An Android phone that has not updated
   its browser (tested: Chrome 83 on Android 11) drops every declaration that uses it, which left
   the header see-through and the diagram rings black. These plain rgba() values stand in. */
:root { --bg-rgb: 248, 247, 242; --accent-rgb: 14, 124, 115; --signal-rgb: 233, 162, 59; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-rgb: 11, 21, 20; --accent-rgb: 92, 211, 196; --signal-rgb: 244, 184, 96; } }
:root[data-theme="dark"] { --bg-rgb: 11, 21, 20; --accent-rgb: 92, 211, 196; --signal-rgb: 244, 184, 96; }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --accent-text: var(--accent); }
  .site-header nav { background: rgba(var(--bg-rgb), 0.94); }
  .card .head img { box-shadow: none; }
  .state, .ver.soon, .pro, .chunk .lvl.n2, .chunk b { background: rgba(var(--signal-rgb), 0.26); }
  .ver, .chunk .lvl.n1, .ic { background: rgba(var(--accent-rgb), 0.15); }
  .get { background: var(--surface); }
  .flagship { background: rgba(var(--accent-rgb), 0.1); }
  .steps li.weak { background: rgba(var(--signal-rgb), 0.1); }
  .vowel-space .ring { fill: rgba(var(--accent-rgb), 0.12); }
  .vowel-space .ring.weak { fill: none; }
  .feel .env { fill: rgba(var(--accent-rgb), 0.7); }
  .feel .gap { fill: rgba(var(--signal-rgb), 0.35); }
  .rhythm .bar { fill: rgba(var(--accent-rgb), 0.35); }
  .rhythm .bar.strong { fill: var(--accent); }
}
/* Flex gap needs Chrome 84; give the few flex rows a margin instead where it is missing. */
@supports not (inset: 0) {
  .verbs li, .controls span, .phrase .pw, .strip li, .bubbles li, .pages li { margin: 0 0.4rem 0.4rem 0; }
  .card .head img { margin-right: 0.9rem; }
  .brand .mark { margin-right: 0.6rem; }
  .get .row img, .legal-head img, .family li img { margin-right: 0.8rem; }
  .site-footer ul li, .nav-links > li { margin-right: 0.6rem; }
  .wave span { margin-right: 4px; }
  .status .mark { margin-right: 0.9rem; }
}

/* The linking mark ‿ (U+203F) is in neither site font; draw it in a system face that has it, in amber. */
.lk { font-family: "Noto Sans", "DejaVu Sans", "Segoe UI Symbol", "Arial Unicode MS", sans-serif; color: var(--accent); font-weight: 700; }
.phrase .lk { font-size: 1.1em; }

/* A how-to: numbered steps, each with its icon, the commands set apart to copy. */
.howto { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.8rem; max-width: 46rem; }
.howto li { margin: 0; display: grid; grid-template-columns: 2.2rem 2.5rem 1fr; gap: 0.8rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; }
.howto .n { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.howto .ic { grid-row: auto; }
.howto strong { display: block; font-family: var(--display); font-size: 1.1rem; margin-bottom: 0.3rem; }
.howto p { margin: 0 0 0.5rem; }
.howto pre { margin: 0 0 0.6rem; padding: 0.7rem 0.9rem; background: var(--surface-alt); border-radius: 10px; overflow-x: auto; }
.howto pre code { background: none; padding: 0; font-size: 0.9rem; white-space: pre; }
@media (max-width: 480px) { .howto li { grid-template-columns: 2.2rem 1fr; } .howto .ic { display: none; } }
.site-ver { margin-left: 0.5rem; font-size: 0.78rem; opacity: 0.75; white-space: nowrap; }

/* The path through the family: four numbered steps, the apps of each as chips, Redeem Time beneath. */
.path { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: none; }
.path > li { margin: 0; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.7rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0.9rem 1rem; }
.path > li.lead { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.path .pn { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.path strong { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
.path p { margin: 0.15rem 0 0.5rem; color: var(--muted); font-size: 0.92rem; }
.path .apps { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pa { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.2rem 0.7rem 0.2rem 0.25rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.pa:hover { border-color: var(--accent); }
.pa img { width: 34px; height: 34px; border-radius: 10px; }
.pa small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; line-height: 1.1; }
.guard { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0.9rem 0 0; color: var(--muted); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .path > li.lead { background: rgba(var(--accent-rgb), 0.08); } }
@supports not (inset: 0) { .path .apps .pa, .guard .pa { margin: 0 0.4rem 0.4rem 0; } .pa img { margin-right: 0.5rem; } }

/* Licenses & data sources (site 1.2.0): a plain legal page. The sources at a glance as cards with
   license chips and the icons of the apps that carry them; the credits the apps show, quoted in
   boxes; the full license texts folded away in <details>. */
.src-grid { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.src-grid li { margin: 0; }
.src-grid a { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; }
.src-grid a:hover { border-color: var(--accent); }
.src-grid .what { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.src-grid strong { font-family: var(--display); font-size: 1.1rem; line-height: 1.25; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { font-size: 0.8rem; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.chip.open { border-color: var(--accent); color: var(--accent); }
.src-grid .used { display: flex; gap: 0.3rem; margin-top: auto; padding-top: 0.4rem; }
.src-grid .used img { width: 28px; height: 28px; border-radius: 8px; }
.licenses .src { max-width: 48rem; }
.credit { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 0 12px 12px 0; padding: 0.8rem 1.1rem; margin: 0 0 0.9rem; font-size: 0.97rem; }
.credit.open { border-left-color: var(--accent); }
.credit p { margin: 0; overflow-wrap: anywhere; }
.levels { margin: 1.2rem 0 1.4rem; }
.levels .bar { display: flex; gap: 4px; }
.levels .seg { display: flex; border-radius: 10px; overflow: hidden; }
.levels .seg.cefrj { flex: 4; background: var(--surface-alt); color: var(--text); }
.levels .seg.octa { flex: 2; background: var(--accent); color: var(--accent-ink); }
.levels .seg b { flex: 1; text-align: center; padding: 0.55rem 0; font-weight: 600; }
.levels .legend { display: grid; gap: 0.3rem; margin-top: 0.7rem; font-size: 0.95rem; }
.levels .legend p { margin: 0; padding-left: 1.1rem; position: relative; color: var(--muted); }
.levels .legend p::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--surface-alt); border: 1px solid var(--line); }
.levels .legend p.octa::before { background: var(--accent); border-color: var(--accent); }
.levels .legend strong { color: var(--text); margin-right: 0.35rem; }
.levels figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; }
.downloads { list-style: none; padding: 0; margin: 0.6rem 0 1rem; display: grid; gap: 0.6rem; }
.downloads li { margin: 0; }
.dl { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem; min-height: 44px; background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; text-decoration: none; color: var(--text); }
.dl:hover { background: var(--surface-alt); }
.dl .ext { flex: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.35rem 0.5rem; border-radius: 6px; background: var(--accent); color: var(--accent-ink); }
.dl strong { display: block; font-family: var(--mono); font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; color: var(--accent); }
.dl small { display: block; color: var(--muted); font-size: 0.88rem; }
.endorse { border-left: 3px solid var(--signal); padding: 0.6rem 1rem; background: var(--surface); border-radius: 0 12px 12px 0; }
.voices { list-style: none; padding: 0; margin: 0.8rem 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.voices li { margin: 0; display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem 0.3rem 0.35rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.88rem; color: var(--muted); }
.voices .who { font-family: var(--mono); font-weight: 600; font-size: 0.85rem; padding: 0.1rem 0.5rem; border-radius: 999px; color: var(--accent-ink); background: var(--accent); }
.voices .who.f { background: var(--signal); color: #0F1F1E; }
.voices .who.tts { background: var(--surface-alt); color: var(--text); }
details.license { margin: 0.4rem 0 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
details.license > summary { cursor: pointer; padding: 0.7rem 1rem; min-height: 44px; font-weight: 600; color: var(--accent); }
.license-text { margin: 0; padding: 0 1rem 1rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }

/* Lab & consulting (site 1.3.0): two doors with a schematic each, tiles per capability, chips per code. */
.lab .hero { padding-bottom: 1rem; }
.lab-doors { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.lab-doors li { margin: 0; }
.lab-doors a { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1rem 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: transform 160ms, box-shadow 160ms; }
.lab-doors a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.lab-doors .door-t { display: flex; align-items: center; gap: 0.7rem; }
.lab-doors .door-t .ic { grid-row: auto; flex: none; }
.lab-doors strong { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.lab-doors .t { color: var(--muted); font-size: 0.95rem; }
.lab-fig { margin: 0 0 0.3rem; border-radius: 12px; background: var(--bg); padding: 0.4rem; }
.lab-fig svg { display: block; width: 100%; height: auto; }
.lab-fig .ax { fill: none; stroke: var(--line); stroke-width: 1.5; }
.lab-fig .bd { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.lab-fig .bd.thin { stroke-width: 1.2; opacity: 0.6; }
.lab-fig .ef { fill: none; stroke: var(--signal); stroke-width: 2; stroke-dasharray: 6 4; }
.lab-fig .cl { stroke: var(--muted); stroke-width: 1.2; }
.lab-fig .pt { fill: var(--accent); }
.lab-fig .lb { fill: var(--muted); font: 600 11px var(--font); }
.lab-fig .ef-t { fill: var(--signal); }
.lab .note { margin-top: 0.6rem; }
.lab-sec { margin-top: 3.2rem; }
.lab-sec h2 { display: flex; align-items: center; gap: 0.8rem; margin-top: 0; }
.lab-sec h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.ic.big { width: 3rem; height: 3rem; flex: none; }
.ic.big svg { width: 1.6rem; height: 1.6rem; }
.lab-sec h2 .ic { grid-row: auto; }
.codes { margin: 0.6rem 0 0; display: grid; gap: 0.6rem; }
.codes > div { display: grid; grid-template-columns: 13rem 1fr; gap: 0.3rem 1rem; align-items: start; padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.codes dt { font-weight: 600; font-family: var(--display); font-size: 1rem; }
.codes dd { margin: 0; grid-column: 2; }
.codes dd.why { color: var(--muted); font-size: 0.88rem; }
.chip.code { font-family: var(--mono); font-size: 0.78rem; border-color: var(--signal); color: var(--text); }
.chips.mats { list-style: none; padding: 0; margin: 0.6rem 0 0; gap: 0.5rem; }
.chips.mats .chip { margin: 0; font-size: 0.92rem; padding: 0.3rem 0.8rem; border-radius: 12px; color: var(--text); background: var(--surface); }
.asks { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.asks li { margin: 0; padding: 0.9rem 1.1rem; border-left: 4px solid var(--signal); background: var(--surface); border-radius: 0 14px 14px 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.4; }
.creds { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cred { margin: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.cred strong { display: block; line-height: 1.2; }
.cred small { display: block; color: var(--muted); font-size: 0.85rem; }
.belt { width: 2.2rem; height: 0.7rem; border-radius: 3px; background: #15191A; outline: 1px solid var(--line); flex: none; box-shadow: inset 0.9rem 0 0 -0.6rem var(--signal); }
.cred.prep { border-style: dashed; }
.cred.prep .belt { background: transparent; border: 2px dashed var(--signal); outline: 0; box-shadow: none; }
.lab-start { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.2rem; align-items: center; margin-top: 3.2rem; padding: 1.3rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--surface); }
.lab-start .ic { grid-row: span 2; }
.lab-start h2 { margin: 0; font-size: 1.5rem; }
.lab-start p { margin: 0; color: var(--muted); }
.lab-start a { word-break: break-all; }
.lab-line { display: flex; align-items: center; gap: 0.9rem; margin: 2rem 0 0; padding: 0.9rem 1.1rem; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.lab-line .ic { grid-row: auto; flex: none; }
@media (max-width: 560px) {
  .codes > div { grid-template-columns: 1fr; }
  .codes dd { grid-column: 1; }
  .cred { border-radius: 14px; }
}
@supports not (inset: 0) {
  .lab-doors .door-t .ic, .lab-sec h2 .ic, .lab-line .ic, .cred .belt { margin-right: 0.8rem; }
  .chips.mats .chip, .creds .cred { margin: 0 0.5rem 0.5rem 0; }
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .lab .ic { background: rgba(var(--accent-rgb), 0.15); } }

/* ---------------------------------------------------------------- Site 1.4.0, 2026-10-12
   Two programs that are only begun (Semantica, Pragma) wear a "Coming soon" chip wherever their
   name is listed; a feature already built but not yet in a numbered version wears "next". */
.soon-chip, .next-chip {
  display: inline-block; margin-left: 0.35rem; padding: 0.02rem 0.5rem; border-radius: 999px; vertical-align: 0.1em;
  font-family: var(--font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5;
  border: 1px dashed var(--signal); color: var(--text); background: transparent; white-space: nowrap;
}
.next-chip { border-style: solid; border-color: var(--line); color: var(--muted); font-weight: 600; }
.apps-menu .panel .soon-chip { font-size: 0.66rem; }
.card .state.soon { background: transparent; border: 1px dashed var(--signal); }
.card.soon .head img { opacity: 0.92; }
.tiles .t .pro { margin-left: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; padding: 0; margin: 0.6rem 0 0; color: var(--muted); font-size: 0.88rem; }
.legend li { margin: 0; }
.legend .pro, .legend .next-chip { margin-left: 0; margin-right: 0.35rem; }

/* The ladder of the family: sound → syllable → word → sentence → meaning → use. Each step stands
   higher than the last; the two steps still being built are drawn dashed, in amber. On a phone the
   staircase turns on its side and climbs to the right. */
.climb { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; align-items: end; }
.climb > li { margin: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.35rem;
  min-height: calc(4.6rem + var(--n) * 1.6rem); padding: 0.7rem 0.6rem 0.6rem; border-radius: 14px 14px 6px 6px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.climb > li.next { background: var(--surface); border: 1px dashed var(--signal); border-top: 4px solid var(--signal); }
.climb .lv { font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.climb .lv small { display: block; font-family: var(--font); font-weight: 400; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.climb .who { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: auto; }
.climb .who a { display: inline-flex; padding: 3px; border-radius: 10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.climb .who a:hover { background: var(--surface-alt); }
.climb .who img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.climb .tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text); }
.climb-arrow { display: block; height: 6px; margin: 0.6rem 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 66%, var(--signal)); }
@media (max-width: 640px) {
  .climb { grid-template-columns: 1fr; gap: 0.4rem; }
  .climb > li { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; margin-left: calc((var(--n) - 1) * 0.55rem);
    border-radius: 6px 14px 14px 6px; border-top: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 0.45rem 0.6rem; }
  .climb > li.next { border-top: 1px dashed var(--signal); border-left: 4px solid var(--signal); }
  .climb .lv { min-width: 6.2rem; }
  .climb .who { margin-top: 0; margin-left: auto; }
  .climb-arrow { display: none; }
}

/* A folder an export writes, as a file list: the clips, their subtitles, the playlist, the reel. */
.folder { list-style: none; margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.7; overflow-wrap: anywhere; }
.folder li { margin: 0; display: flex; gap: 0.5rem; align-items: baseline; }
.folder li::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--line); transform: translateY(0.1rem); }
.folder li.a::before { background: var(--accent); }
.folder li.s::before { background: var(--signal); }
.folder li.v::before { background: var(--text); border-radius: 50%; }
.folder .dir { font-weight: 700; }
.folder .dir::before { background: none; border: 2px solid var(--muted); }

/* A phone bar for a player: buttons as pills (shared with .controls). */
.playbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.7rem 0 0; padding: 0.5rem 0.6rem; border-radius: 12px; background: var(--surface-alt); font-size: 0.88rem; }
.playbar span { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--surface); font-weight: 600; }
.playbar .now { background: none; font-weight: 400; color: var(--muted); flex: 1 1 10rem; }

/* Redeem Time's mocks: the redeem card, a day from first to last use, four seasons. */
.redeem { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; align-items: center; }
.redeem .big { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.redeem .ic { grid-row: span 2; }
.redeem .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.redeem .chips li { margin: 0; padding: 0.08rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); font-size: 0.85rem; background: var(--surface); }
.dayspan { margin: 0.4rem 0 0; }
.dayspan .track { position: relative; height: 0.9rem; border-radius: 999px; background: var(--surface-alt); }
.dayspan .use { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.dayspan .ends { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.seasons { display: flex; align-items: flex-end; gap: 0.7rem; height: 6.5rem; list-style: none; padding: 0; margin: 0.4rem 0 0; }
.seasons li { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.25rem; height: 100%; font-size: 0.8rem; color: var(--muted); }
.seasons i { display: block; width: 100%; max-width: 3rem; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.seasons li.now i { background: var(--signal); }
.shot .row2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.shot h3 { font-family: var(--font); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 0.3rem; }

/* The two new programs' pictures: a word's senses as a map, a line said and a line meant. */
.sense-map { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); list-style: none; padding: 0; margin: 0.8rem 0 0; }
.sense-map li { margin: 0; padding: 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.sense-map li strong { display: block; font-family: var(--display); }
.sense-map li span { color: var(--muted); font-size: 0.9rem; }
.sense-map li.opp { border-style: dashed; border-color: var(--signal); }
.word-hub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.word-hub strong { font-family: var(--display); font-size: 1.8rem; }
.word-hub .ipa { color: var(--muted); font-size: 1.15rem; }
.word-hub .ipa .s { color: var(--accent); font-weight: 600; }
.mix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.8rem 0 0; }
.mix p { margin: 0; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--surface-alt); font-size: 0.95rem; }
.mix b { color: var(--accent-text); }
.mix .no { text-decoration: line-through; text-decoration-color: var(--signal); color: var(--muted); }
.talk { display: grid; gap: 0.5rem; max-width: 30rem; }
.talk p { margin: 0; padding: 0.6rem 0.9rem; border-radius: 16px 16px 16px 4px; background: var(--surface-alt); justify-self: start; }
.talk p.meant { border-radius: 16px 16px 4px 16px; justify-self: end; background: transparent; border: 1px dashed var(--signal); color: var(--muted); }
.talk p.reply { border-radius: 16px 16px 4px 16px; justify-self: end; background: var(--accent); color: var(--accent-ink); }
.tunes { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0.9rem 0 0; }
.tunes figure { margin: 0; }
.tunes svg { width: 100%; height: auto; display: block; }
.tunes .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.tunes .base { stroke: var(--line); stroke-width: 1.5; }
.tunes text { fill: var(--text); font-family: var(--font); font-size: 15px; }
.tunes figcaption { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--muted); }
.local { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0.8rem 0 0; }
.local li { margin: 0; padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; }
.local li small { font-weight: 400; color: var(--muted); margin-left: 0.3rem; }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .climb > li { background: rgba(var(--accent-rgb), 0.1); }
  .climb > li.next { background: var(--surface); }
  .seasons i { background: rgba(var(--accent-rgb), 0.45); }
}
@supports not (inset: 0) {
  .climb > li, .folder li, .playbar span, .redeem .chips li, .local li { margin-right: 0.4rem; margin-bottom: 0.4rem; }
}
@media print { .climb > li { break-inside: avoid; } }
.climb > li[aria-current] { box-shadow: 0 0 0 3px var(--signal); }
.path > li.soon { border-style: dashed; border-color: var(--signal); }
.path > li.soon .pn { background: var(--signal); color: #1A1A1A; }
.tunes svg { max-width: 17rem; }

/* The idea (site 1.5.0): three old lines, the Greek ladder Α → Ω, and where the names come from. */
.sec-mark { display: block; font-family: "Noto Sans", "DejaVu Sans", "Segoe UI", "Lucida Sans Unicode", sans-serif;
  font-size: 1.05rem; font-weight: 600; line-height: 1; color: var(--accent-text); margin: 3.2rem 0 0.35rem; }
.sec-mark + h2 { margin-top: 0; }
.idea-hero .greek { font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 2rem); color: var(--muted); margin: 0 0 0.4em; letter-spacing: 0.02em; }
.idea-hero .greek b { color: var(--accent-text); } .idea-hero .greek i { font-style: normal; color: var(--signal); }
.lines { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
.lines > li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem; }
.lines .word { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--accent-text); }
.lines .word.vs { color: var(--muted); font-size: 1.05rem; } .lines .word.vs s { text-decoration-thickness: 2px; }
.lines blockquote { margin: 0; font-size: 1.02rem; line-height: 1.45; }
.lines cite { font-style: normal; color: var(--muted); font-size: 0.88rem; }
.lines .who { display: flex; gap: 0.35rem; margin-top: auto; padding-top: 0.3rem; }
.lines .who img, .roots img, .alpha .who img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.lines .who a, .alpha .who a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 10px; }
.lines .who a:hover, .alpha .who a:hover { background: var(--surface-alt); }

.alpha { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.55rem; align-items: end; }
.alpha > li { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; min-height: calc(8.6rem + var(--n) * 1.9rem);
  padding: 0.8rem 0.7rem 0.55rem; border-radius: 16px 16px 6px 6px; border: 1px solid var(--line); border-top: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) calc(4% + var(--n) * 2%), var(--surface)); }
.alpha > li.omega { border-top-color: var(--signal); background: color-mix(in srgb, var(--signal) 16%, var(--surface)); }
.alpha .gl { font-family: "Noto Serif", "DejaVu Serif", Georgia, var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--accent-text); }
.alpha .omega .gl { color: color-mix(in srgb, var(--signal) 70%, var(--text)); }
.alpha .gw { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.12rem; line-height: 1.1; }
.alpha .en { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.alpha .eg { color: var(--muted); font-size: 0.82rem; line-height: 1.3; }
.alpha .who { display: flex; flex-wrap: wrap; gap: 0.1rem 0.2rem; margin-top: auto; align-items: center; }
.alpha .deeper { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); width: 100%; margin-top: 0.15rem; }
.alpha-arrow { display: block; height: 6px; margin: 0.6rem 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 70%, var(--signal)); }
@media (max-width: 760px) {
  .alpha { grid-template-columns: 1fr; gap: 0.45rem; }
  .alpha > li { min-height: 0; display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.7rem; row-gap: 0.15rem; align-items: center;
    margin-left: calc((var(--n) - 1) * 0.45rem); border-radius: 6px 16px 16px 6px; border-top: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 0.6rem 0.7rem; }
  .alpha > li.omega { border-top-color: var(--line); border-left-color: var(--signal); }
  .alpha .gl { grid-row: span 4; font-size: 2.3rem; text-align: center; }
  .alpha .who { margin-top: 0.2rem; }
  .alpha-arrow { display: none; }
}

.roots { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem; }
.roots > li { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: 0.75rem; align-items: start; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 0.8rem 0.9rem; }
.roots img { width: 44px; height: 44px; border-radius: 12px; }
.roots .mk { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--a1), var(--a2)); position: relative; overflow: hidden; }
.roots .mk::after { content: ""; position: absolute; left: 12%; top: 12%; width: 50%; height: 50%; border-radius: 50%; background: var(--signal); }
.roots strong { display: block; } .roots strong a { color: inherit; }
.roots .rt { font-family: var(--display); font-style: italic; color: var(--accent-text); }
.roots .mn { color: var(--muted); font-size: 0.92rem; line-height: 1.4; display: block; margin-top: 0.1rem; }