@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(/specialists/assets/2d06f2c340ecb52c5515.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(/specialists/assets/b63651df977d08650ff2.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(/specialists/assets/20fc9b6fc618e7c3c68d.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}
/* Layout: a review notebook. A sticky contents rail on the left, one reading column, and device
   galleries that scroll sideways inside it. The page wears Bulbee's own day and night: light theme
   is the morning meadow's paper, dark theme is the night sky the app wakes from. */
:root {
  --paper: #f6f5fb;
  --surface: #ffffff;
  --sunk: #eceaf6;
  --ink: #1d1740;
  --ink-soft: #5b5680;
  --ink-neutral: #242424;
  --ink-neutral-soft: #59595f;
  --line: #dcd8ee;
  --violet: #4b33c9;
  --violet-soft: #ebe7ff;
  --yellow: #ffc928;
  --yellow-ink: #6a4300;
  --good: #1f8a4c;
  --warn: #b25e00;
  --bad: #c2362f;
  --stage: #e3e0f3;
  --shadow: 0 1px 2px #1d174014, 0 8px 28px #1d174012;
  --display: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151029; --surface: #1f183b; --sunk: #191331; --ink: #f1eeff; --ink-soft: #a9a3cc;
    --ink-neutral: #f2f2f4; --ink-neutral-soft: #b8b8c0;
    --line: #342b5c; --violet: #a99bff; --violet-soft: #2a2152; --yellow: #ffc928; --yellow-ink: #ffdc7a;
    --good: #5fd48f; --warn: #ffb35c; --bad: #ff8a80; --stage: #0f0b20;
    --shadow: 0 1px 2px #0006, 0 8px 28px #0005; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151029; --surface: #1f183b; --sunk: #191331; --ink: #f1eeff; --ink-soft: #a9a3cc;
  --ink-neutral: #f2f2f4; --ink-neutral-soft: #b8b8c0;
  --line: #342b5c; --violet: #a99bff; --violet-soft: #2a2152; --yellow: #ffc928; --yellow-ink: #ffdc7a;
  --good: #5fd48f; --warn: #ffb35c; --bad: #ff8a80; --stage: #0f0b20;
  --shadow: 0 1px 2px #0006, 0 8px 28px #0005; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
img { max-width: 100%; }
svg { fill: currentColor; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--violet); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--sunk); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- page frame ---------- */
.bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar .mark { display: flex; align-items: center; gap: 10px; font: 900 18px/1 var(--display); min-width: 0; }
.bar .mark img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.bar .mark span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .bar { gap: 8px; } .bar .btn span { display: none; } .bar .btn { padding: 4px 10px; } }
.bar .grow { flex: 1; }
.bar .count { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-weight: 650; font-size: 14px; white-space: nowrap; }
.btn:hover { border-color: var(--violet); }
.btn.primary { background: var(--yellow); border-color: #e5ae00; color: #3c2500; }
.btn.small { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.btn[aria-pressed="true"] { background: var(--violet-soft); border-color: var(--violet); color: var(--violet); }
.btn svg { width: 16px; height: 16px; flex: none; }

.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0; max-width: 1500px; margin: 0 auto; }
.toc { position: sticky; top: 61px; align-self: start; height: calc(100vh - 61px); overflow: auto; padding: 26px 8px 40px 20px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc ol a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-soft); font-size: 14px; line-height: 1.3; }
.toc ol a::before { counter-increment: toc; content: counter(toc); font: 800 12px var(--display); color: var(--ink-soft); min-width: 16px; text-align: right; opacity: .7; }
.toc ol a:hover { background: var(--sunk); color: var(--ink); }
.toc ol a.on { background: var(--violet-soft); color: var(--violet); font-weight: 650; }
.toc ol a.on::before { color: var(--violet); opacity: 1; }
.toc .tocnote { margin: 18px 10px 0; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.toc .tocnote a { color: var(--violet); }
main { min-width: 0; padding-inline: 28px; padding-block: 30px 120px; }
@media (max-width: 1040px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; height: auto; padding: 12px 16px 0; overflow: visible; }
  .toc ol { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 8px; scrollbar-width: thin; }
  .toc ol a { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); }
  .toc .tocnote { display: none; }
  main { padding-inline: 16px; }
  .bar { padding: 8px 16px; }
  .bar .count { display: none; }
}

section { margin-top: 84px; }
section:first-of-type { margin-top: 0; }
.eyebrow { font: 800 13px/1.35 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--violet); margin-bottom: 12px; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(27px, 3.3vw, 38px); }
h3 { font-size: 21px; margin-top: 44px; }
h4 { font-size: 16px; font-weight: 800; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink); max-width: 66ch; margin-top: 16px; }
.prose { max-width: 68ch; display: grid; gap: 14px; margin-top: 16px; }
p.prose { display: block; }   /* a paragraph with inline code or links must not turn each piece into a grid row */
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose li::marker { color: var(--violet); }
.muted { color: var(--ink-soft); }
.small { font-size: 13.5px; line-height: 1.5; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font: 800 12px/1.6 var(--display); letter-spacing: .02em; background: var(--sunk); color: var(--ink-soft); white-space: nowrap; }
.tag.rec { background: var(--yellow); color: #3c2500; }
.tag.open { background: var(--violet-soft); color: var(--violet); }
.tag.now { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.tag.risk { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.hero-art { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 11; background: #7cc3ff center / cover; box-shadow: var(--shadow); }
.hero-art .hb { position: absolute; left: 50%; bottom: 4%; width: 46%; transform: translateX(-50%); filter: drop-shadow(0 18px 18px #0003); animation: bob 3.2s ease-in-out infinite; }
.hero-art .hw { position: absolute; left: 6%; top: 7%; width: 40%; filter: drop-shadow(0 6px 8px #0003); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.callout { border-left: 4px solid var(--yellow); background: var(--surface); padding: 16px 20px; border-radius: 0 14px 14px 0; max-width: 72ch; margin-top: 20px; display: grid; gap: 8px; }
.callout.violet { border-color: var(--violet); }
.callout.red { border-color: var(--bad); }
.callout h4 { font-size: 15px; }
.howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 22px; padding: 0; list-style: none; counter-reset: how; }
.howto li { counter-increment: how; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font-size: 14.5px; line-height: 1.5; }
.howto li::before { content: counter(how); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #3c2500; font: 900 14px var(--display); margin-bottom: 10px; }

/* what is still open: each question with the names of its variants, to be said aloud (D115) */
.dlist { display: grid; gap: 10px; margin-top: 20px; max-width: 86ch; }
.dlist a { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.dlist a:hover { border-color: var(--violet); }
.dlist b { font: 900 14.5px/1.3 var(--display); color: var(--violet); }
.dlist span { font-size: 14px; line-height: 1.45; }
.dlist i { font-style: normal; font-weight: 700; color: var(--yellow-ink); }
/* the letter of a variant: what Vlad says when he names it */
.vl { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--yellow); color: #3c2500; font: 900 14px/1 var(--display); flex: none; }
figcaption .vl { margin: 0 auto 4px; display: grid; width: max-content; }
.btn svg.sun, .btn[aria-pressed="true"] svg.moon { display: block; }
.btn[aria-pressed="true"] svg.sun, .btn svg.moon { display: none; }

/* tables */
.tablewrap { overflow-x: auto; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.45; }
th { text-align: left; font: 800 12.5px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 14px; background: var(--sunk); white-space: nowrap; }
td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
td.k { font-weight: 650; white-space: nowrap; }
td .mono, td code { white-space: nowrap; }
table.wide { min-width: 880px; }
table.mid { min-width: 640px; }
table.fit { min-width: 0; }   /* a few short columns of figures: read on a phone without scrolling sideways */
table.fit th { white-space: normal; }
td.num { white-space: nowrap; }
table.fit td.k.wrap { min-width: 0; }
@media (max-width: 520px) { table.fit th, table.fit td { padding: 10px; } }

/* D152: відстані зі сторінки app-design; нові компоненти мають префікс bb-. */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 40px;
  --space-section: 84px; --radius-card: 16px; --radius-pill: 999px;
  --reading-width: 68ch;
}
.bb-skip { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--yellow); color: #3c2500; padding: 12px 18px; border-radius: 10px; }
.bb-skip:focus { top: 8px; }
.bb-page .bar .mark { text-decoration: none; color: var(--ink); }
.bb-brand { display: grid; place-items: center; width: 30px; height: 30px; background: var(--yellow); color: #3c2500; border-radius: 8px; }
.bb-document { overflow-wrap: anywhere; }
.bb-document > h1 { max-width: 22ch; }
.bb-document > p:first-of-type { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 66ch; }
.bb-document p, .bb-document ul, .bb-document ol { max-width: var(--reading-width); margin-top: var(--space-4); }
.bb-document section { margin-top: var(--space-section); }
.bb-document section:first-of-type { margin-top: var(--space-8); }
.bb-document h3 { margin-top: var(--space-8); }
.bb-document h4 { margin-top: var(--space-6); }
.bb-document ul, .bb-document ol { padding-left: var(--space-6); }
.bb-document li { margin-top: var(--space-2); padding-left: var(--space-1); }
.bb-document li::marker { color: var(--violet); font-weight: 800; }
.bb-document pre { padding: var(--space-4); border-radius: 12px; background: var(--sunk); overflow-x: auto; font-size: 14px; }
.bb-document pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.bb-document .tablewrap { max-width: 100%; }
.bb-document table { min-width: 580px; }
.bb-document th { white-space: normal; }
.bb-document th, .bb-document td { overflow-wrap: normal; }
.bb-document td code { white-space: normal; }
.bb-document .callout p { margin: 0; }
.bb-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.bb-details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); margin-top: var(--space-3); }
.bb-details > summary { cursor: pointer; font: 800 18px/1.4 var(--display); color: var(--ink); }
.bb-details > summary::marker { color: var(--violet); }
.bb-details[open] > summary { margin-bottom: var(--space-4); }
.bb-details > :last-child { margin-bottom: 0; }
.bb-details .bb-details { background: var(--paper); }
.bb-footer { margin-top: var(--space-section); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-soft); }
.bb-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.bb-swatch { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.bb-swatch i { height: 50px; border-radius: 8px; border: 1px solid var(--line); }
.bb-swatch span { color: var(--ink-soft); font-size: 13px; }
.bb-swatch code { width: fit-content; }
@media (max-width: 620px) {
  .bb-page .bar .btn { min-width: 40px; min-height: 40px; justify-content: center; }
  .bb-details { padding: var(--space-4); }
  .bb-document section { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .bb-page .bar, .bb-page .toc, .bb-tools, .bb-skip { display: none; }
  .bb-page { background: white; color: #1d1740; color-scheme: light; --paper: white; --surface: white; --sunk: #f6f5fb; --ink: #1d1740; --ink-soft: #5b5680; --violet: #4b33c9; --line: #dcd8ee; }
  .bb-page .layout { display: block; }
  .bb-document { padding: 0; }
  .bb-document section { margin-top: 32px; }
  .bb-document table { min-width: 0; }
  .bb-document .tablewrap { overflow: visible; }
  .bb-details { break-inside: auto; }
  .bb-details > summary { break-after: avoid; }
  .bb-document h2, .bb-document h3 { break-after: avoid; }
}

/* Локальний дизайн адмінки. Палітра й типографіка походять зі спільних токенів. */
.bb-admin { --ink: var(--ink-neutral); --ink-soft: var(--ink-neutral-soft); font-size: 14px; line-height: 1.5; }
.bb-admin a { text-decoration: none; }
.bb-admin button, .bb-admin a, .bb-admin input, .bb-admin select { -webkit-tap-highlight-color: transparent; }
.bb-admin-rail { width: 222px; position: fixed; inset: 0 auto 0 0; background: var(--surface); border-right: 1px solid var(--line); padding: 28px 16px 20px; display: flex; flex-direction: column; z-index: 30; overflow-y: auto; }
.bb-admin-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; color: var(--ink); font: 900 26px/1.1 var(--display); }
.bb-admin-brand img { width: 44px; height: 44px; border-radius: 14px; }
.bb-admin-brand small { display: block; font: 12px/1.6 var(--body); color: var(--ink-soft); margin-top: 3px; }
.bb-admin-nav-label { font: 800 10px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 20px 12px 8px; }
.bb-admin-nav-link { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; margin: 3px 0; color: var(--ink-soft); font-weight: 600; }
.bb-admin-nav-link:hover { background: var(--paper); color: var(--ink); }
.bb-admin-nav-link[aria-current="page"] { color: var(--ink); background: var(--violet-soft); font-weight: 750; }
.bb-admin svg.bb-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; width: 19px; height: 19px; flex: none; }
.bb-admin-rail-bottom { margin-top: auto; padding: 32px 10px 0; display: grid; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.bb-admin-rail-bottom span { display: flex; align-items: center; gap: 8px; }
.bb-admin-rail-bottom i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.bb-admin-workspace { margin-left: 222px; }
.bb-admin-top { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 32px; border-bottom: 1px solid var(--line); background: var(--surface); }
#breadcrumbs { font-size: 13px; color: var(--ink-soft); }
.bb-admin-top-actions { display: flex; align-items: center; gap: 14px; }
.bb-admin-user { border-radius: 50%; display: grid; place-items: center; width: 32px; height: 32px; background: var(--sunk); font-weight: 800; }
.bb-admin-draft { padding: 9px 32px; display: flex; gap: 16px; justify-content: space-between; background: var(--violet-soft); font-size: 11.5px; color: var(--ink-soft); }
.bb-admin-draft a { white-space: nowrap; font-weight: 700; }
.bb-admin main { max-width: 1660px; margin: auto; padding: 28px 32px 64px; }
.bb-admin main:focus { outline: none; }
.bb-admin h1 { font-size: 32px; }
.bb-admin h2 { font-size: 20px; }
.bb-admin h3 { font-size: 17px; margin: 0; }
.bb-admin h4 { font-size: 14px; }
.bb-admin section { margin: 0; }
.bb-admin .eyebrow { font-size: 10px; margin-bottom: 8px; color: var(--ink-soft); }
.bb-admin .tag.open { color: var(--ink-soft); }
.bb-admin .small { font-size: 12px; }
.bb-admin .btn { font-size: 12px; min-height: 36px; padding: 7px 14px; }
.bb-admin .btn:not(.primary) { color: var(--ink); }
.bb-admin .btn.small { min-height: 30px; padding: 4px 11px; font-size: 11.5px; }
.bb-admin button:disabled { opacity: .5; cursor: not-allowed; }
.bb-admin-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.bb-admin-head p { color: var(--ink-soft); margin-top: 8px; max-width: 76ch; font-size: 13px; }
.bb-admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bb-admin-stack { display: grid; gap: 20px; }
.bb-admin-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
.bb-admin-stat { padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bb-admin-stat b { font: 900 30px/1.3 var(--display); display: block; margin: 7px 0 3px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bb-admin-stat small { display: block; font-size: 11px; color: var(--ink-soft); }
.bb-admin-stat > span { font-size: 12px; color: var(--ink-soft); font-weight: 650; }
.bb-admin-stat.accent { background: var(--violet-soft); border-color: transparent; }
.bb-admin-stat.accent b { color: var(--ink); }
.bb-admin-panel { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); min-width: 0; overflow: clip; }
.bb-admin-panel-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bb-admin-panel-head p { margin-top: 5px; font-size: 12px; color: var(--ink-soft); }
.bb-admin-panel-body { padding: 20px; }
.bb-admin-panel-body > * + * { margin-top: 16px; }
.bb-admin-cols { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,1fr); gap: 20px; }
.bb-admin-cols.equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.bb-admin-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.bb-admin label { display: grid; gap: 6px; font-size: 11px; font-weight: 650; color: var(--ink-soft); }
.bb-admin input, .bb-admin select, .bb-admin textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 450; color: var(--ink); min-height: 38px; min-width: 0; max-width: 100%; }
.bb-admin textarea { resize: vertical; min-height: 88px; width: 100%; }
.bb-admin label.bb-admin-search { flex: 1; min-width: 180px; max-width: 450px; }
.bb-admin-toolbar .bb-admin-counter { margin-left: auto; padding-bottom: 10px; font-size: 12px; color: var(--ink-soft); }
.bb-admin-table-scroll { overflow-x: auto; }
.bb-admin table { font-size: 12px; }
.bb-admin th { background: var(--paper); font-size: 10px; letter-spacing: .04em; padding: 12px 18px; }
.bb-admin td { padding: 15px 18px; vertical-align: middle; }
.bb-admin tbody tr:hover { background: color-mix(in srgb,var(--paper) 65%,transparent); }
.bb-admin td small { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; }
.bb-admin td strong { font-weight: 650; }
.bb-admin-table-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink-soft); font-size: 11px; }
.bb-admin-person { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.bb-admin-person a { color: var(--ink); }
/* Одне справжнє посилання покриває рядок: клавіатура й нова вкладка працюють нативно. */
.bb-admin-child-row { position: relative; cursor: pointer; }
.bb-admin-child-row .bb-admin-person a::after { content: ''; position: absolute; inset: 0; }
.bb-admin-child-row:focus-within { outline: 2px solid var(--violet); outline-offset: -2px; }
.bb-admin-child-row .bb-admin-person a:focus-visible { outline: none; }
.bb-admin-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; font: 900 18px var(--display); background: var(--violet-soft); color: var(--ink); }
.bb-admin-avatar.honey { background: color-mix(in srgb,var(--yellow) 25%,var(--surface)); color: var(--yellow-ink); }
.bb-admin-avatar.meadow { background: color-mix(in srgb,var(--good) 12%,var(--surface)); color: var(--good); }
.bb-admin-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11px; font-weight: 600; }
.bb-admin-status::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.bb-admin .good { color: var(--good); }.bb-admin .warn { color: var(--warn); }.bb-admin .bad { color: var(--bad); }
.bb-admin-note { padding: 14px 18px; border-radius: 12px; background: var(--violet-soft); color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.bb-admin-note strong { color: var(--ink); }
.bb-admin-note.warm { background: color-mix(in srgb,var(--yellow) 13%,var(--surface)); }
.bb-admin-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 6px 0 24px; overflow-x: auto; }
.bb-admin-tabs a { padding: 12px 0; font-size: 12px; color: var(--ink-soft); white-space: nowrap; border-bottom: 3px solid transparent; }
.bb-admin-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--violet); font-weight: 750; }
.bb-admin-segments { display: inline-flex; padding: 4px; gap: 3px; background: var(--sunk); border-radius: 12px; }
.bb-admin-segments a { color: var(--ink-soft); padding: 8px 14px; border-radius: 9px; font-size: 12px; white-space: nowrap; }
.bb-admin-segments a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); font-weight: 750; }
.bb-admin-segments b { font: 900 12px var(--display); margin-right: 4px; }
.bb-admin-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bb-admin-row:last-child { border-bottom: 0; }
.bb-admin-row p, .bb-admin-row small { color: var(--ink-soft); font-size: 11px; display: block; margin-top: 3px; }
.bb-admin-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bb-admin .tag { font-size: 10px; padding: 3px 9px; letter-spacing: 0; }
.bb-admin-evidence { display: flex; flex-wrap: wrap; gap: 5px; }
.bb-admin-answer { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--good); background: color-mix(in srgb,var(--good) 11%,var(--surface)); border: 1px solid transparent; font: 800 13px var(--display); }
.bb-admin-answer.wrong { color: var(--bad); background: color-mix(in srgb,var(--bad) 10%,var(--surface)); }
.bb-admin-answer.waiting { color: var(--ink-soft); background: var(--sunk); }
.bb-admin-answer[aria-current="step"] { outline: 2px solid var(--violet); outline-offset: 2px; }
.bb-admin-answer:hover { border-color: var(--violet); }
.bb-admin-session-summary { margin-bottom: 20px; }
.bb-admin-session-summary .bb-admin-stats { margin-bottom: 12px; grid-template-columns: repeat(5,minmax(0,1fr)); }
.bb-admin-session-summary .bb-admin-stat { padding: 14px 16px; }
.bb-admin-session-summary .bb-admin-stat b { font-size: 27px; }
.bb-admin-session-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; }
.bb-admin-session-strip .bb-admin-evidence { flex: 1; }
.bb-admin-step { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(250px,1fr); }
.bb-admin-step-main { padding: 24px; }
.bb-admin-step-aside { padding: 20px; border-left: 1px solid var(--line); background: var(--paper); }
.bb-admin-step-aside h3 { margin: 2px 0 14px; }
.bb-admin-step-aside p { font-size: 12px; margin: 10px 0; color: var(--ink-soft); }
.bb-admin-prompt { font: 900 24px var(--display); text-align: center; margin: 16px 0 22px; }
.bb-admin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bb-admin-option { min-height: 154px; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.bb-admin-option b { font: 900 22px var(--display); margin: 12px 0; }
.bb-admin-option small { color: var(--ink-soft); font-size: 10px; }
.bb-admin-option.correct { border: 2px solid var(--good); }
.bb-admin-option.chosen-wrong { border: 2px solid var(--bad); background: color-mix(in srgb,var(--bad) 5%,var(--surface)); }
.bb-admin-deltas { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 20px; }
.bb-admin-deltas > div { background: var(--paper); padding: 12px; border-radius: 10px; }
.bb-admin-deltas small { display: block; color: var(--ink-soft); font-size: 10px; }
.bb-admin-deltas b { font: 800 17px var(--display); display: block; margin: 5px 0; }
.bb-admin details { border-top: 1px solid var(--line); }
.bb-admin summary { padding: 16px 20px; cursor: pointer; font-size: 12px; font-weight: 650; }
.bb-admin-empty { padding: 54px 24px; text-align: center; color: var(--ink-soft); }
.bb-admin-empty h2 { color: var(--ink); margin-bottom: 10px; }
.bb-admin-empty p { max-width: 58ch; margin: 0 auto 20px; }
.bb-admin-chart-label { font-size: 10px; fill: var(--ink-soft); }
.bb-admin-map-shell { display: grid; grid-template-columns: minmax(0,1fr) 254px; min-height: 460px; }
.bb-admin-map-canvas { padding: 12px; min-width: 0; background: radial-gradient(var(--line) 1px,transparent 1px); background-size: 20px 20px; position: relative; overflow-x: auto; }
.bb-admin-graph { width: 100%; min-width: 590px; display: block; }
.bb-admin-graph .edge { fill: none; stroke: var(--violet); stroke-width: 2; opacity: .5; }
.bb-admin-graph .edge.future { stroke: var(--ink-soft); stroke-dasharray: 6 5; }
.bb-admin-graph .node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.bb-admin-graph .node { cursor: pointer; }
.bb-admin-graph .node:hover rect, .bb-admin-graph .node:focus rect, .bb-admin-graph .node.selected rect { stroke: var(--violet); stroke-width: 2.5; }
.bb-admin-graph .node.group rect { fill: var(--violet-soft); }
.bb-admin-graph .node.future rect { stroke-dasharray: 5 4; }
.bb-admin-graph text { font-family: var(--body); fill: var(--ink); font-size: 13px; }
.bb-admin-graph .node-title { font-family: var(--display); font-weight: 850; font-size: 18px; }
.bb-admin-graph .node-sub { fill: var(--ink-soft); font-size: 11px; }
.bb-admin-map-info { padding: 20px; border-left: 1px solid var(--line); background: var(--surface); }
.bb-admin-map-info h3 { margin-bottom: 12px; }
.bb-admin-map-info p { font-size: 12px; color: var(--ink-soft); margin: 12px 0; }
.bb-admin-map-info ul { margin: 12px 0; padding-left: 18px; font-size: 12px; }
.bb-admin-map-info .btn { margin-top: 12px; white-space: normal; }
.bb-admin-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 20px; color: var(--ink-soft); font-size: 10px; border-top: 1px solid var(--line); }
.bb-admin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bb-admin-legend i { width: 16px; height: 3px; background: var(--violet); }
.bb-admin-legend i.dashed { background: none; border-top: 2px dashed var(--ink-soft); }
.bb-admin-track-scroll { overflow-x: auto; }
.bb-admin-tracks { min-width: 800px; padding: 24px; }
.bb-admin-axis, .bb-admin-track { display: grid; grid-template-columns: 150px repeat(6,minmax(0,1fr)); }
.bb-admin-axis { color: var(--ink-soft); font-size: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bb-admin-track { min-height: 92px; border-bottom: 1px solid var(--line); align-items: center; }
.bb-admin-track > strong { font: 800 13px var(--display); padding-right: 20px; }
.bb-admin-track > strong small { display: block; font: 10px var(--body); color: var(--ink-soft); margin-top: 6px; }
.bb-admin-age-block { margin: 12px 4px; border: 1px solid var(--line); background: var(--violet-soft); color: var(--ink); border-radius: 10px; padding: 12px; text-align: left; font-size: 11px; min-height: 62px; }
.bb-admin-age-block.neutral { background: var(--paper); color: var(--ink-soft); border-style: dashed; }
.bb-admin-age-block.honey { background: color-mix(in srgb,var(--yellow) 18%,var(--surface)); color: var(--yellow-ink); }
.bb-admin-age-marker { grid-column: 5; border-top: 3px solid var(--yellow); font-size: 10px; padding-top: 6px; color: var(--ink); }
.bb-admin-matrix button { width: 100%; min-width: 66px; border: 0; border-radius: 9px; padding: 10px; font: 850 17px var(--display); background: color-mix(in srgb,var(--violet) calc(var(--intensity, .1) * 100%),var(--surface)); color: var(--ink); }
.bb-admin-matrix button:hover { outline: 2px solid var(--violet); }
.bb-admin-matrix td { padding: 7px 12px; }
.bb-admin-progress { height: 7px; border-radius: 20px; display: flex; gap: 3px; overflow: hidden; margin: 14px 0; background: var(--sunk); }
.bb-admin-progress span { background: var(--violet); border-radius: 8px; }
.bb-admin-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.bb-admin-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--surface); }
.bb-admin-card p { color: var(--ink-soft); font-size: 12px; margin: 12px 0 16px; }
.bb-admin-card .vl { margin-bottom: 14px; }
.bb-admin-review-grid { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 20px; }
.bb-admin-queue { max-height: 620px; overflow-y: auto; }
.bb-admin-queue button { display: block; padding: 14px 16px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); text-align: left; font-size: 12px; }
.bb-admin-queue button[aria-pressed="true"] { background: var(--violet-soft); }
.bb-admin-queue small { display: block; margin-top: 5px; color: var(--ink-soft); }
.bb-admin-form { display: grid; gap: 16px; }
.bb-admin-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.bb-admin dialog { position: fixed; inset: 0 0 0 auto; margin: 0; max-height: 100dvh; height: 100dvh; width: min(600px,100vw); max-width: 100vw; border: 0; border-left: 1px solid var(--line); padding: 28px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.bb-admin dialog::backdrop { background: color-mix(in srgb,var(--ink) 35%,transparent); }
.bb-admin-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.bb-admin-dialog-head .eyebrow { margin: 0; }
#inspector-body > * + * { margin-top: 20px; }
#inspector-title { font-size: 29px; }
.bb-admin dl { display: grid; grid-template-columns: 130px 1fr; gap: 14px 16px; font-size: 12px; }
.bb-admin dt { color: var(--ink-soft); }.bb-admin dd { margin: 0; overflow-wrap: anywhere; }
.bb-admin-notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; width: max-content; max-width: calc(100vw - 32px); padding: 14px 20px; border: 1px solid var(--violet); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; }
.bb-admin-footnote { font-size: 11px; color: var(--ink-soft); margin-top: 16px; }
.bb-admin-form-error { color: var(--bad); font-size: 12px; }
.bb-admin-list-button { border: 0; background: none; padding: 0; color: var(--ink); font: inherit; text-align: left; }
.bb-admin-list-button:hover { text-decoration: underline; }
@media (min-width: 1680px) { .bb-admin main { padding: 36px 44px 80px; } }
@media (max-width: 1150px) {
  .bb-admin-rail { width: 190px; padding-inline: 10px; }.bb-admin-workspace { margin-left: 190px; }
  .bb-admin main { padding: 24px; }.bb-admin-top, .bb-admin-draft { padding-inline: 24px; }
  .bb-admin-cols { grid-template-columns: 1fr; }.bb-admin-map-shell { grid-template-columns: 1fr; }
  .bb-admin-map-info { border-left: 0; border-top: 1px solid var(--line); }.bb-admin-map-info p { max-width: 76ch; }
  .bb-admin-session-summary .bb-admin-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bb-admin-stat b { font-size: 26px; }
}
@media (max-width: 800px) {
  .bb-admin-rail { position: static; width: 100%; padding: 14px 16px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .bb-admin-brand { font-size: 23px; padding: 0 0 12px; }.bb-admin-brand img { width: 34px; height: 34px; border-radius: 10px; }.bb-admin-brand small { display: inline; margin-left: 10px; }
  .bb-admin-rail nav { display: flex; gap: 5px; overflow: auto; padding-bottom: 4px; }
  .bb-admin-nav-label, .bb-admin-rail-bottom { display: none; }.bb-admin-nav-link { white-space: nowrap; font-size: 12px; padding: 8px 10px; margin: 0; }
  .bb-admin-nav-link svg { display: none; }.bb-admin-workspace { margin-left: 0; }
  .bb-admin-top { min-height: 54px; padding: 10px 16px; }.bb-admin-top-actions { gap: 8px; }.bb-admin-top-actions .tag, .bb-admin-user { display: none; }
  .bb-admin-draft { padding: 10px 16px; font-size: 10.5px; }.bb-admin-draft a { display: none; }
  .bb-admin main { padding: 24px 16px 50px; }.bb-admin-head { align-items: start; flex-wrap: wrap; gap: 14px; }
  .bb-admin h1 { font-size: 29px; }.bb-admin h2 { font-size: 19px; }
  .bb-admin-stats, .bb-admin-session-summary .bb-admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .bb-admin-stat { padding: 14px; }.bb-admin-stat b { font-size: 27px; }
  .bb-admin-card-grid, .bb-admin-cols.equal, .bb-admin-review-grid, .bb-admin-step { grid-template-columns: 1fr; }
  .bb-admin-step-aside { border-left: 0; border-top: 1px solid var(--line); }.bb-admin-step-main { padding: 18px; }
  .bb-admin-queue { max-height: 200px; }.bb-admin-option { padding: 12px; min-height: 130px; }.bb-admin-option b { font-size: 18px; }
  .bb-admin-segments { width: 100%; overflow-x: auto; }.bb-admin-segments a { padding: 9px 10px; flex: 1; text-align: center; }
  .bb-admin-tabs { gap: 20px; }.bb-admin-toolbar { gap: 10px; }.bb-admin-toolbar label { flex: 1; }
  .bb-admin-toolbar .bb-admin-search { flex-basis: 100%; max-width: none; }.bb-admin-toolbar .bb-admin-counter { width: 100%; padding-bottom: 0; }
  .bb-admin th, .bb-admin td { padding: 12px; }.bb-admin-deltas { gap: 6px; }.bb-admin-deltas > div { padding: 10px; }
  .bb-admin-panel-head { flex-wrap: wrap; padding: 16px; }.bb-admin-panel-body { padding: 16px; }.bb-admin-form-row { grid-template-columns: 1fr; }
  .bb-admin-table-foot { flex-wrap: wrap; }.bb-admin-graph { min-width: 610px; }
}

/* Ітерація 2: сесія застосунку, повна карта й локальні медіа. */
.bb-admin-linked-row { position: relative; cursor: pointer; }
.bb-admin-row-link { color: var(--ink); }
.bb-admin-row-link::after { content: ''; position: absolute; inset: 0; }
.bb-admin-linked-row:focus-within { outline: 2px solid var(--violet); outline-offset: -2px; }
.bb-admin-row-link:focus-visible { outline: none; }
.bb-admin-linked-row.is-selected { background: var(--violet-soft); }
.bb-admin-graph-tools { padding: 16px; display: flex; flex-wrap: wrap; align-items: end; gap: 12px; border-bottom: 1px solid var(--line); }
.bb-admin-graph-tools output { min-width: 40px; font-size: 11px; text-align: center; }
.bb-admin-graph-results:empty { display: none; }
.bb-admin-graph-results { padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 11px; }
.bb-admin-graph-results > div { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; padding-top: 8px; }
.bb-admin-full-map { display: grid; grid-template-columns: minmax(0,1fr) 300px; }
.bb-admin-graph-viewport { position: relative; height: 580px; min-width: 0; overflow: hidden; touch-action: none; cursor: grab; background: radial-gradient(var(--line) 1px,transparent 1px); background-size: 20px 20px; }
.bb-admin-graph-viewport:active { cursor: grabbing; }
.bb-admin-graph-viewport:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.bb-admin-full-map .bb-admin-graph { width: 100%; height: 580px; min-width: 0; }
.bb-admin-full-map .bb-admin-map-info { max-height: 580px; overflow: auto; }
.bb-admin-map-info h4 { margin: 20px 0 8px; }
.bb-admin-full-map .bb-admin-graph .edge { stroke: var(--ink-soft); opacity: .2; stroke-width: .65; vector-effect: non-scaling-stroke; }
.bb-admin-full-map .bb-admin-graph .edge.unavailable { stroke-dasharray: 5 4; }
.bb-admin-full-map .bb-admin-graph.has-selection .edge { opacity: .07; }
.bb-admin-full-map .bb-admin-graph .edge.selected { opacity: 1; stroke: var(--violet); stroke-width: 2.2; }
.bb-admin-full-map .bb-admin-graph .node-title { font-size: 13px; }
.bb-admin-full-map .bb-admin-graph .node-sub { font-size: 9px; }
.bb-admin-full-map .bb-admin-graph .lane-title { font: 800 17px var(--display); }
.bb-admin-full-map .bb-admin-graph .node rect { stroke-width: 1; }
.bb-admin-full-map .bb-admin-graph .node.observed rect { stroke: var(--good); stroke-width: 2; }
.bb-admin-full-map .bb-admin-graph .node.unavailable rect { stroke-dasharray: 5 4; }
.bb-admin-full-map .bb-admin-graph.has-selection .node:not(.near) { opacity: .33; }
.bb-admin-full-map .bb-admin-graph.has-search .node:not(.search-match):not(.selected):not(.near) { opacity: .2; }
.bb-admin-full-map .bb-admin-graph .node.selected rect, .bb-admin-full-map .bb-admin-graph .node:focus rect { stroke: var(--violet); stroke-width: 3; }
.bb-admin-full-map .bb-admin-graph .node.selected { opacity: 1; }
.bb-admin-graph-hint { pointer-events: none; position: absolute; bottom: 12px; left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 8px; padding: 6px 10px; font-size: 10px; }
.bb-admin-relations { max-height: 230px; overflow: auto; }
.bb-admin-graph-relation { border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; width: 100%; text-align: left; background: transparent; color: var(--ink); font: 12px var(--body); cursor: pointer; }
.bb-admin-graph-relation small { display: block; color: var(--ink-soft); font-size: 10px; margin-top: 5px; }
.bb-admin-graph-relation:hover { background: var(--paper); }
.bb-admin-media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.bb-admin-media-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; align-self: start; }
.bb-admin-image-button { background: var(--paper); border: 0; border-bottom: 1px solid var(--line); width: 100%; padding: 0; display: block; position: relative; cursor: zoom-in; }
.bb-admin-image-button img { width: 100%; height: 220px; object-fit: contain; display: block; }
.bb-admin-image-button > span { position: absolute; bottom: 10px; right: 10px; font: 11px var(--body); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 5px 8px; }
.bb-admin-media-body { padding: 16px; display: grid; gap: 12px; }
.bb-admin-media-body h4 { margin: 8px 0 0; }
.bb-admin-media-body > small { font-size: 10px; }
.bb-admin-audio { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bb-admin-audio > div:first-child { padding: 12px; font-size: 12px; }
.bb-admin-audio small { font-size: 10px; display: block; color: var(--ink-soft); padding-top: 3px; }
.bb-admin audio { display: block; width: 100%; min-width: 0; height: 40px; }
.bb-admin-audio summary { font-size: 10px; padding: 8px 12px; }
.bb-admin-image-large { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 12px; background: var(--paper); margin: 20px 0; }
.bb-admin dd { overflow-wrap: anywhere; }
.bb-admin-media-card dl { display: block; }
.bb-admin-media-card dt { margin-top: 10px; font-size: 10px; }
.bb-admin-media-card dd { margin: 2px 0 8px; font-size: 11px; }
@media (max-width: 1200px) {
  .bb-admin-full-map { grid-template-columns: minmax(0,1fr) 260px; }
  .bb-admin-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 850px) {
  .bb-admin-full-map { grid-template-columns: minmax(0,1fr); }
  .bb-admin-full-map .bb-admin-map-info { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .bb-admin-graph-viewport, .bb-admin-full-map .bb-admin-graph { height: 580px; }
}
@media (max-width: 580px) {
  .bb-admin-media-grid { grid-template-columns: minmax(0,1fr); }
  .bb-admin-graph-tools > label { width: 100%; }
  .bb-admin-graph-tools .bb-admin-actions { gap: 5px; }
}
.bb-admin-games td { padding-top: 10px; padding-bottom: 10px; }
.bb-admin-session-strip { scroll-margin-top: 16px; }
.bb-admin-knowledge-media:has(> :only-child) { grid-template-columns: minmax(0,1000px); }
.bb-admin-knowledge-media > .bb-admin-media-card:only-child { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
.bb-admin-knowledge-media > .bb-admin-media-card:only-child .bb-admin-image-button { align-self: start; border-bottom: 0; }
.bb-admin-knowledge-media > .bb-admin-media-card:only-child .bb-admin-image-button img { height: auto; aspect-ratio: 1; }
@media (max-width: 680px) {
  .bb-admin-knowledge-media > .bb-admin-media-card:only-child { grid-template-columns: minmax(0,1fr); }
}
/* Композиція кабінету; спільні шрифти, палітра й тема — bulbee-pages.css. */
body { font-size:14px; line-height:1.45; }
section,section:first-of-type { margin-top:0; }
h3 { margin-top:0; }
button,input,textarea,select,a { -webkit-tap-highlight-color:transparent; }
button { touch-action:manipulation; }
.symbols { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex: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; }
.skip { position:fixed; top:-80px; left:16px; z-index:100; padding:12px; background:var(--surface); }
.skip:focus { top:8px; }
.demo-header { display:flex; align-items:center; gap:24px; min-height:68px; padding:12px max(24px,calc((100vw - 1504px)/2)); background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font:900 23px/1 var(--display); }
.brand img { border-radius:11px; width:36px; height:36px; }
.brand small { display:block; font:500 10px/1.4 var(--body); margin-top:4px; color:var(--ink-soft); }
.demo-label { display:flex; gap:6px; align-items:center; color:var(--ink-soft); font-size:11px; }
.demo-label>span { width:6px; height:6px; background:var(--violet); border-radius:50%; }
.demo-label em { font-style:normal; }
.header-actions { margin-left:auto; display:flex; gap:12px; align-items:center; }
.icon-btn { display:inline-grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); }
.icon-btn.small { width:30px; height:30px; }
.icon-btn.small .icon { width:16px; height:16px; }
.icon-btn:hover { border-color:var(--violet); background:var(--violet-soft); }
.btn { justify-content:center; min-height:40px; font-size:13px; white-space:normal; line-height:1.3; }
.btn .icon { width:17px; height:17px; }
.btn.wide { width:100%; }
.text-btn { display:inline-flex; gap:6px; align-items:center; padding:5px 0; background:none; border:0; color:var(--violet); font-weight:600; font-size:12px; text-align:left; }
.text-btn .icon { width:15px; height:15px; }
.text-btn:hover { text-decoration:underline; text-underline-offset:3px; }
.sales-intro { width:calc(100% - 48px); max-width:1504px; margin:auto; padding:21px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.intro-copy h1 { font-size:29px; letter-spacing:-.025em; }
.intro-copy p { font-size:13px; color:var(--ink-soft); margin-top:6px; }
.value-loop { display:flex; gap:8px; align-items:center; }
.value-loop>button { display:flex; align-items:center; gap:7px; border:0; padding:0; background:none; font-size:11px; }
.loop-symbol { display:grid; place-items:center; width:33px; height:33px; border-radius:12px; }
.loop-symbol .icon { width:18px; height:18px; }
.loop-symbol.violet { background:var(--violet-soft); color:var(--violet); }
.loop-symbol.yellow { background:#fff0b8; color:#6a4300; }
.loop-symbol.green { background:color-mix(in srgb,var(--good) 12%,var(--surface)); color:var(--good); }
.loop-arrow { width:15px; color:var(--ink-soft); }
.workspace { max-width:1504px; width:calc(100% - 48px); margin:0 auto; display:grid; grid-template-columns:160px minmax(0,1fr); border:1px solid var(--line); border-radius:20px; overflow:clip; background:var(--paper); }
.children-rail { padding:22px 9px; border-right:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; }
.rail-title { display:flex; align-items:center; justify-content:space-between; padding:0 6px; }
.rail-title h2 { font-size:17px; }
.quantity { border-radius:20px; min-width:21px; height:21px; display:inline-grid; place-items:center; color:var(--ink-soft); background:var(--sunk); font-size:11px; }
.search { display:flex; align-items:center; gap:5px; margin:15px 6px; padding:6px 0; border-bottom:1px solid var(--line); }
.search .icon { width:15px; height:15px; color:var(--ink-soft); }
.search input { background:none; width:100%; border:0; font-size:11px; min-width:0; }
.child { display:flex; align-items:center; gap:8px; padding:12px 7px; width:100%; border:1px solid transparent; border-radius:12px; background:none; text-align:left; }
.child:hover { background:var(--paper); }
.child[aria-current="true"] { background:var(--violet-soft); border-color:color-mix(in srgb,var(--violet) 23%,transparent); }
.child b { display:block; font-size:13px; }
.child small { display:block; margin-top:3px; font-size:10px; color:var(--ink-soft); }
.avatar { width:32px; height:32px; flex:none; display:inline-grid; place-items:center; border-radius:50%; font:800 16px var(--display); color:#463278; background:#e9deff; }
.avatar.peach { background:#ffe6d8; color:#875028; }
.avatar.sky { background:#ddecff; color:#315e8a; }
.avatar.mint { background:#ddf0e7; color:#326853; }
.avatar.large { width:44px; height:44px; font-size:22px; }
.rail-bottom { display:grid; gap:4px; margin-top:auto; padding:80px 5px 0; }
.rail-bottom .text-btn { font-size:11px; color:var(--ink-soft); }
.cabinet { min-width:0; padding:20px; }
.child-heading { display:flex; align-items:center; gap:10px; }
.child-heading h2 { font-size:27px; }
.child-heading p { margin-top:3px; font-size:11px; color:var(--ink-soft); }
.heading-tools { margin-left:auto; display:flex; align-items:center; gap:14px; }
.period { display:flex; padding:3px; border-radius:9px; border:1px solid var(--line); background:var(--surface); }
.period button { border:0; border-radius:6px; padding:5px 11px; background:transparent; font-size:12px; color:var(--ink-soft); min-height:28px; }
.period button[aria-pressed="true"] { color:var(--violet); background:var(--violet-soft); font-weight:700; }
.period-line { display:flex; gap:12px; align-items:center; margin:12px 0 10px; font-size:11px; color:var(--ink-soft); }
.period-line .text-btn { font-size:10px; color:var(--ink-soft); padding:0; }
.metrics { display:grid; grid-template-columns:1.1fr 1fr 1.08fr 1fr; gap:10px; margin-bottom:18px; }
.metric { padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--surface); min-width:0; text-align:left; }
.metric:hover { border-color:var(--violet); box-shadow:0 0 0 1px var(--violet-soft); }
.metric-label { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; }
.metric-label .icon { width:12px; height:12px; color:var(--ink-soft); }
.metric-main { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; }
.metric strong { font:900 34px/1.1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.metric strong span { font:500 12px var(--body); margin-left:5px; letter-spacing:0; }
.metric small { font-size:10px; color:var(--ink-soft); display:block; }
.metric small>span { margin-left:5px; }
.spark { width:95px; height:34px; color:var(--good); }
.spark-empty { font-size:9px; color:var(--ink-soft); max-width:78px; }
.metric-emblem { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--good) 9%,var(--surface)); }
.metric-emblem.warning { background:color-mix(in srgb,var(--warn) 9%,var(--surface)); }
.metric-emblem .icon { width:18px; height:18px; }
.positive { color:var(--good); }
.warning { color:var(--warn); }
.mini-days { max-width:69px; display:flex; flex-wrap:wrap; gap:3px; }
.mini-days i { display:block; width:7px; height:15px; border-radius:3px; background:var(--sunk); }
.mini-days i.played { background:var(--violet); opacity:.7; }
.mini-days:has(i:nth-child(8)) i { width:5px; height:7px; }
.board { display:grid; grid-template-columns:minmax(0,1fr) 334px; gap:16px; align-items:start; }
.surface { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.surface h3 { font-size:19px; margin:0; }
.surface h3 .icon { width:18px; height:18px; vertical-align:-2px; margin-right:4px; }
.overline { font-size:9px; letter-spacing:.075em; text-transform:uppercase; color:var(--ink-soft); font-weight:650; margin-bottom:4px; }
.knowledge-panel { padding:17px 16px 10px; scroll-margin-top:16px; }
.knowledge-tools { display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:space-between; margin-top:18px; }
.scope-tabs { display:flex; gap:3px; }
.scope-tabs button { display:flex; gap:5px; align-items:center; border:0; border-radius:7px; background:none; padding:7px 8px; font-size:11px; color:var(--ink-soft); }
.scope-tabs button[aria-pressed="true"] { color:var(--violet); background:var(--violet-soft); font-weight:700; }
.scope-tabs span { font-size:9px; opacity:.85; }
.knowledge-search { display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--ink-soft); }
.knowledge-search .icon { width:14px; height:14px; }
.knowledge-search input { width:116px; min-width:0; border:0; padding:0; background:none; font-size:11px; }
.filter-explanation { margin:9px 0; font-size:10px; line-height:1.5; color:var(--ink-soft); }
.strip-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:9px; color:var(--ink-soft); border-top:1px solid var(--line); padding:10px 0; }
.gradient-key { height:6px; width:70px; border-radius:9px; background:linear-gradient(90deg,#ee644e,#f8cf45,#68a93f); }
.recent-key { width:12px; height:10px; margin-left:auto; border-left:2px dashed var(--violet); background:var(--violet-soft); }
.history-columns,.knowledge-row { display:grid; grid-template-columns:119px minmax(80px,1fr) 103px; gap:9px; align-items:center; }
.history-columns { font-size:9px; color:var(--ink-soft); margin:0 0 8px; }
.history-columns>span:last-child { text-align:right; }
.knowledge-group { margin:0 0 10px; padding:0; border:0; border-radius:0; background:none; }
.knowledge-group>summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 8px; background:var(--paper); border:1px solid var(--line); border-radius:7px; cursor:pointer; }
.knowledge-group>summary::-webkit-details-marker { display:none; }
.group-title { display:flex; align-items:center; gap:7px; font:800 13px var(--display); }
.group-title .icon { width:13px; height:13px; transition:transform .15s; }
.knowledge-group[open] .group-title .icon { transform:rotate(90deg); }
.group-summary { display:flex; gap:5px; align-items:center; font-size:10px; color:var(--ink-soft); white-space:nowrap; }
.group-summary b { color:var(--good); font-size:12px; }
.knowledge-rows { padding-top:3px; }
.knowledge-row { width:100%; border:0; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); background:none; padding:7px 0; min-height:54px; text-align:left; }
.knowledge-row:hover { background:var(--paper); }
.knowledge-row:last-child { border-bottom:0; }
.word-name { display:flex; align-items:center; gap:6px; border-radius:7px; padding:5px 5px; min-height:38px; }
.word-name.known { background:color-mix(in srgb,#9ec342 18%,var(--surface)); }
.word-name.learning { background:color-mix(in srgb,#f3ca3f 16%,var(--surface)); }
.word-name.unknown { background:color-mix(in srgb,#e89470 18%,var(--surface)); }
.word-name.none { background:var(--paper); }
.word-name b { display:block; font-size:13px; line-height:1.2; overflow-wrap:anywhere; }
.word-name small { display:block; font-size:8px; margin-top:3px; color:var(--ink-soft); }
.word-glyph { width:28px; height:28px; flex:none; display:inline-grid; place-items:center; border-radius:6px; color:#6e8a9e; }
.word-glyph.swatch { border-radius:50%; width:22px; height:22px; background:var(--swatch); border:3px solid #ffffffb3; box-shadow:0 0 0 1px #00000010; margin:3px; }
.letter-glyph { width:24px; height:24px; font:800 12px var(--display); color:var(--ink-soft); background:var(--sunk); }
.row-history { display:block; min-width:0; }
.history-bar { display:block; width:100%; height:29px; overflow:visible; }
.period-shade { fill:var(--violet-soft); opacity:.65; }
.period-cut { stroke:var(--violet); stroke-width:1; stroke-dasharray:2 3; opacity:.45; }
.row-dates { display:flex; justify-content:space-between; gap:8px; margin-top:1px; font-size:8px; color:var(--ink-soft); opacity:.85; }
.row-state { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.state { display:inline-block; border-radius:5px; font-size:9px; font-weight:700; line-height:1.4; padding:3px 5px; color:var(--ink-soft); background:var(--sunk); }
.state.known { color:var(--good); background:color-mix(in srgb,var(--good) 10%,var(--surface)); }
.state.learning { color:var(--yellow-ink); background:color-mix(in srgb,#efc541 17%,var(--surface)); }
.state.unknown { color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,var(--surface)); }
.row-state small { color:var(--ink-soft); font-size:8px; line-height:1.3; }
.history-foot { font-size:9px; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:5px; padding:10px 0 0; line-height:1.6; }
.history-foot .text-btn { font-size:9px; padding:0; }
.history-foot .icon { width:12px; height:12px; }
.no-history { font-size:10px; color:var(--ink-soft); }
.group-focus { display:flex; gap:8px; align-items:center; background:var(--violet-soft); padding:8px 10px; border-radius:7px; margin-top:10px; color:var(--violet); font-size:12px; }
.group-focus button { background:none; border:0; margin-left:auto; padding:2px; }
.group-focus .icon { width:16px; height:16px; }
.empty-history { display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 20px; gap:13px; color:var(--ink-soft); }
.empty-history>.icon { width:36px; height:36px; color:var(--violet); }
.empty-history h4 { font-size:18px; color:var(--ink); }
.empty-history p { max-width:360px; font-size:12px; }
.context-column { display:flex; flex-direction:column; gap:14px; min-width:0; }
.context-column .surface { padding:16px; }
.context-column h3 { font-size:17px; }
.period-caption { font-size:10px; color:var(--ink-soft); }
.change-heading { display:flex; gap:5px; align-items:center; margin:12px 0 8px; font-size:11px; font-weight:650; }
.change-heading .icon { width:14px; height:14px; }
.change-heading b { margin-left:auto; }
.change-pills { display:flex; flex-wrap:wrap; gap:5px; }
.change-pills button { display:flex; gap:4px; align-items:center; padding:4px 7px 4px 4px; border:1px solid color-mix(in srgb,var(--good) 25%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--good) 4%,var(--surface)); font-size:11px; }
.change-pills .word-glyph { width:20px; height:20px; }
.change-pills .swatch { width:15px; height:15px; border-width:2px; margin:2px; }
.change-pills .icon { width:12px; height:12px; color:var(--good); }
.return-list { display:grid; gap:5px; }
.return-list button { display:flex; align-items:center; gap:7px; border:0; background:var(--paper); padding:7px 8px; text-align:left; border-radius:8px; }
.return-list button>span { flex:1; }
.return-list b { font-size:12px; display:block; }
.return-list small { display:block; font-size:9px; color:var(--ink-soft); margin-top:2px; }
.return-list .icon { width:13px; height:13px; color:var(--ink-soft); }
.return-list .word-glyph { width:24px; height:24px; }
.boundary-note { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--ink-soft); margin-top:12px; }
.boundary-note .icon { width:12px; height:12px; }
.empty-small { font-size:11px; color:var(--ink-soft); margin-top:14px; }
.map-panel .small-caption { margin:4px 0 9px; }
.mini-map { width:100%; overflow:hidden; }
.map-size { position:relative; }
.map-stage { position:relative; transform-origin:top left; }
.map-wires { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.map-edge { fill:none; stroke:color-mix(in srgb,var(--ink-soft) 50%,var(--surface)); stroke-width:2; }
.map-edge.linked { stroke:var(--violet); stroke-width:2.5; }
.map-level { position:absolute; top:5px; font:800 13px var(--display); color:var(--ink-soft); text-align:center; }
.map-node { position:absolute; border:1px solid var(--line); border-radius:9px; background:var(--sunk); padding:8px 24px 12px 10px; display:flex; align-items:center; gap:6px; text-align:left; transition:opacity .15s; }
.map-node-name { font-size:12px; line-height:1.15; font-weight:600; }
.map-fraction { font:800 15px var(--display); flex:none; margin-left:auto; color:var(--ink-soft); }
.map-fraction small { font-size:10px; font-weight:600; }
.map-stack { position:absolute; display:flex; bottom:6px; left:10px; right:10px; height:3px; border-radius:3px; overflow:hidden; background:color-mix(in srgb,var(--ink-soft) 15%,transparent); }
.map-stack i { height:100%; }
.map-stack .known,.map-legend i.known { background:#8eb837; }
.map-stack .learning,.map-legend i.learning { background:#ecc53e; }
.map-stack .unknown,.map-legend i.unknown { background:#e28f6e; }
.map-node.all-known { background:color-mix(in srgb,#9dc43f 75%,var(--surface)); color:#213219; border-color:color-mix(in srgb,#90b936 80%,var(--line)); }
.map-node.all-known .map-fraction { color:#304725; }
.map-node.has-learning { background:color-mix(in srgb,#f6d24e 36%,var(--surface)); }
.map-node.has-unknown { background:color-mix(in srgb,#efa782 27%,var(--surface)); }
.map-node.some-known { background:color-mix(in srgb,#9dc43f 13%,var(--surface)); border-color:color-mix(in srgb,#8eb837 70%,var(--line)); }
.map-node.selected { outline:2px solid var(--violet); outline-offset:2px; }
.map-node:hover { border-color:var(--violet); box-shadow:0 0 0 2px var(--violet-soft); }
.map-node.dimmed { opacity:.48; }
.map-node.search-dim { opacity:.18; }
.map-node.search-match { outline:2px solid var(--violet); opacity:1; }
.activity-dot { position:absolute; width:6px; height:6px; top:6px; right:7px; background:var(--violet); border-radius:50%; }
.activity-dot.inline { display:inline-block; position:static; margin-left:5px; width:5px; height:5px; }
.node-gain { position:absolute; top:-6px; right:12px; font-size:9px; font-weight:700; padding:0 4px; border:1px solid var(--surface); border-radius:7px; background:var(--good); color:var(--surface); }
.map-legend { display:flex; flex-wrap:wrap; gap:6px 9px; margin:9px 0; font-size:9px; color:var(--ink-soft); }
.map-legend span { display:inline-flex; align-items:center; gap:4px; }
.map-legend i { width:7px; height:7px; border-radius:2px; display:inline-block; }
.map-legend i.none { background:var(--sunk); border:1px solid var(--line); }
.map-legend i.active { background:var(--violet); border-radius:50%; width:5px; height:5px; }
.map-cta { margin-top:6px; font-size:11px; min-height:35px; }
.next-step { display:grid; grid-template-columns:32px 1fr; gap:9px; }
.next-step p { color:var(--ink-soft); font-size:11px; margin-top:4px; }
.next-step>.btn,.next-step>.text-btn { grid-column:1/-1; }
.step-symbol { width:32px; height:32px; background:var(--violet-soft); color:var(--violet); border-radius:10px; display:grid; place-items:center; }
.next-step .text-btn { justify-content:center; padding:2px 0; }
.cabinet-end { display:flex; justify-content:space-between; gap:16px; margin-top:14px; align-items:center; }
.cabinet-end>span { display:flex; gap:6px; align-items:center; font-size:10px; color:var(--ink-soft); }
.cabinet-end .icon { width:14px; height:14px; }
.cabinet-end .text-btn { font-size:10px; white-space:nowrap; }
.demo-footer { max-width:1504px; width:calc(100% - 48px); margin:18px auto 26px; display:flex; justify-content:space-between; align-items:center; gap:15px; color:var(--ink-soft); font-size:10px; }
.demo-footer>div { display:flex; align-items:center; gap:18px; }
.demo-footer .text-btn { font-size:10px; }
.mobile-actions { display:none; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:120; max-width:calc(100% - 32px); background:var(--ink); color:var(--surface); padding:13px 20px; border-radius:13px; box-shadow:var(--shadow); font-size:13px; }
.no-script { margin:30px; }
.detail-dialog { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); border:1px solid var(--line); border-radius:22px; padding:0; color:var(--ink); background:var(--surface); box-shadow:0 30px 100px #150e4055; }
.detail-dialog::backdrop { background:#17102c80; backdrop-filter:blur(4px); }
.detail-dialog.wide-dialog { width:min(920px,calc(100vw - 40px)); }
.dialog-top { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:14px 24px 8px; background:var(--surface); z-index:10; }
.dialog-label { color:var(--ink-soft); font-size:10px; }
#dialog-body { padding:8px 28px 28px; }
#dialog-title { font-size:28px; letter-spacing:-.025em; outline:none; }
.dialog-sub { color:var(--ink-soft); font-size:14px; margin:12px 0 22px; max-width:66ch; }
.dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:24px; }
.small-caption { font-size:11px; color:var(--ink-soft); line-height:1.5; margin-top:10px; }
.quiet { font-size:12px; color:var(--ink-soft); }
.micro-note { display:flex; gap:9px; align-items:flex-start; color:var(--ink-soft); font-size:12px; padding:14px; background:var(--paper); border-radius:10px; margin:18px 0; }
.micro-note .icon { width:17px; height:17px; margin-top:1px; }
.micro-note.warning { color:var(--warn); }
.about-list { display:grid; gap:22px; margin-top:24px; }
.about-list p { font-size:13px; color:var(--ink-soft); }
.about-list b { display:block; margin-bottom:5px; color:var(--ink); font-size:15px; }
.reading-example { padding:22px 0 0; }
.history-bar.large { height:58px; }
.word-dialog-heading { display:flex; align-items:center; gap:13px; }
.word-dialog-heading>.word-glyph { width:46px; height:46px; }
.word-dialog-heading>.swatch { width:37px; height:37px; }
.word-dialog-heading>.state { margin-left:auto; font-size:11px; }
.word-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:23px 0; }
.word-stats>div { padding:13px; border:1px solid var(--line); border-radius:10px; }
.word-stats strong { display:block; font:900 25px var(--display); }
.word-stats strong small { font-size:17px; font-weight:600; color:var(--ink-soft); }
.word-stats span { display:block; margin-top:4px; font-size:10px; color:var(--ink-soft); }
.detail-strip { padding:8px 0 15px; }
.word-curve { display:block; width:100%; height:auto; overflow:visible; margin:8px 0; }
.word-curve text { font:11px var(--body); fill:var(--ink-soft); }
.curve-grid { stroke:var(--line); stroke-width:1; }
.detail-subhead { margin:24px 0 12px; font-size:17px; }
.phrase-pills { display:flex; flex-wrap:wrap; gap:7px; }
.phrase-pills span { padding:6px 10px; background:var(--paper); border:1px solid var(--line); border-radius:8px; font-size:12px; }
.detail-dialog.map-dialog { width:min(1220px,calc(100vw - 32px)); }
.map-dialog #dialog-body { padding:8px 24px 20px; }
.map-dialog #dialog-title { font-size:26px; }
.map-dialog .dialog-sub { margin:8px 0 15px; font-size:12px; }
.map-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.map-toolbar .knowledge-search { margin-left:auto; }
.map-toolbar .knowledge-search input { width:150px; }
.zoom-tools { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--ink-soft); }
.zoom-tools>span { width:32px; text-align:center; }
.map-dialog .map-legend { font-size:10px; margin:12px 0; }
.map-search-status { margin:-4px 0 9px; font-size:10px; color:var(--ink-soft); }
.full-map-scroll { width:100%; overflow:auto; max-height:56vh; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px; overscroll-behavior:contain; }
.full-map-scroll .map-size { margin:0 auto; }
.full-map-scroll .map-node { font-size:12px; }
.map-selection { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0 0; }
.map-selection b { display:block; font-size:15px; }
.map-selection span { display:block; font-size:11px; color:var(--ink-soft); margin-top:3px; }
.map-caveat { font-size:10px; }
.activity-chart { display:flex; gap:4px; align-items:flex-end; height:175px; margin:30px 0 0; }
.activity-chart>div { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-width:0; font-size:10px; color:var(--ink-soft); }
.activity-chart b { font-size:10px; }
.activity-chart i { width:70%; max-width:34px; min-height:2px; background:var(--violet); opacity:.7; border-radius:4px; margin:8px 0; }
.activity-chart small { font-size:10px; }
.direction-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.direction-option { padding:15px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.direction-option:has(input:checked) { border-color:var(--violet); background:var(--violet-soft); }
.direction-option input { accent-color:var(--violet); margin-top:4px; }
.direction-option b { display:block; font-size:14px; }
.direction-option small { display:block; font-size:11px; color:var(--ink-soft); margin-top:6px; }
.direction-glyphs { display:flex; gap:7px; margin-top:12px; }
.parent-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; }
.parent-editor>label { display:block; font-size:13px; font-weight:600; margin-bottom:10px; }
.parent-editor textarea { resize:vertical; min-height:160px; width:100%; font-size:13px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); line-height:1.6; }
.parent-editor>.text-btn { margin-top:15px; }
.parent-preview { padding:16px; border-radius:20px; background:var(--paper); }
.phone-frame { max-width:330px; margin:auto; padding:22px 18px; border:6px solid var(--ink); background:var(--surface); border-radius:30px; min-height:460px; }
.phone-top { display:flex; gap:7px; align-items:center; font-size:13px; }
.phone-top img { border-radius:7px; }
.phone-top span { font-size:8px; color:var(--ink-soft); margin-left:auto; }
.phone-frame h3 { font-size:19px; margin:23px 0 7px; }
.parent-activity { color:var(--ink-soft); font-size:11px; }
.parent-fact,.parent-direction { display:flex; align-items:flex-start; gap:7px; margin-top:15px; font-size:12px; }
.parent-fact .icon { width:17px; height:17px; color:var(--good); }
.parent-direction { padding:12px; border-radius:10px; background:var(--violet-soft); color:var(--violet); }
.parent-direction .icon { width:17px; height:17px; }
.parent-note { margin-top:18px; padding-top:15px; border-top:1px solid var(--line); font-size:12px; white-space:pre-wrap; }
.phone-frame .small-caption { font-size:9px; margin-top:18px; }
.game-stage { padding:16px; background:var(--paper); border-radius:16px; text-align:center; }
.game-stage .bee { height:100px; }
.game-prompt { font:800 23px var(--display); margin:10px 0 18px; }
.game-options { display:flex; justify-content:center; gap:16px; }
.game-options button { border:2px solid var(--line); border-radius:20px; background:var(--surface); padding:20px; }
.game-options .word-glyph { width:100px; height:100px; }
.game-options button.selected { border-color:var(--violet); background:var(--violet-soft); }
#game-message { font-size:12px; margin:18px 0 4px; min-height:36px; }
.offer-top { display:flex; gap:20px; align-items:center; }
.offer-top>div { flex:1; }
.offer-top img { width:100px; }
.offer-top .overline { color:var(--violet); margin-bottom:7px; }
.offer-roles { display:flex; gap:10px; margin-bottom:24px; }
.offer-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.offer-benefits>div { border:1px solid var(--line); background:var(--paper); border-radius:13px; padding:18px; }
.offer-benefits .icon { width:26px; height:26px; color:var(--violet); margin-bottom:12px; }
.offer-benefits b { display:block; font-size:14px; }
.offer-benefits p { font-size:12px; color:var(--ink-soft); margin-top:8px; }
.field-label { font-weight:600; font-size:13px; display:block; }
.field-label select { display:block; width:100%; margin-top:8px; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:12px; font-size:12px; }
.pilot-preview { margin:22px 0; background:var(--paper); padding:20px; border:1px solid var(--line); border-radius:12px; }
.pilot-preview h3 { font-size:18px; }
.pilot-preview p { margin-top:10px; font-size:13px; }
@media (min-width:1550px) { .board { grid-template-columns:minmax(0,1fr) 370px; }.history-columns,.knowledge-row { grid-template-columns:132px minmax(80px,1fr) 112px; }.word-name b { font-size:13px; }.history-bar { height:31px; }.row-state small { font-size:9px; } }
@media (max-width:1250px) { .value-loop { display:none; }.workspace { grid-template-columns:143px minmax(0,1fr); }.cabinet { padding:16px; }.board { grid-template-columns:minmax(0,1fr) 280px; gap:12px; }.context-column .surface { padding:12px; }.knowledge-panel { padding:14px 12px 8px; }.history-columns,.knowledge-row { grid-template-columns:103px minmax(80px,1fr) 88px; gap:7px; }.word-name { gap:3px; }.word-name b { font-size:11px; }.word-glyph { width:23px; height:23px; }.word-glyph.swatch { width:18px; height:18px; margin:3px; }.row-state .state { font-size:8px; }.row-state small { font-size:7px; }.metric { padding:10px; }.metric-label { font-size:10px; }.metric small { font-size:9px; }.metric strong { font-size:29px; }.spark { width:70px; }.scope-tabs button { padding:6px; }.knowledge-search input { width:100px; } }
@media (max-width:1050px) { .workspace { grid-template-columns:1fr; }.children-rail { padding:10px 14px; border-right:0; border-bottom:1px solid var(--line); display:flex; flex-direction:row; align-items:center; gap:12px; }.rail-title { display:none; }.search { width:120px; margin:0; }.children-rail nav { display:flex; flex:1; gap:6px; }.child { padding:7px; justify-content:center; gap:7px; }.child small { display:none; }.rail-bottom { display:none; }.child b { font-size:12px; }.child .avatar { width:27px; height:27px; font-size:13px; }.board { grid-template-columns:minmax(0,1fr) 280px; }.metric-label { font-size:11px; }.metric small { font-size:10px; }.metric-main { min-height:46px; }.history-columns,.knowledge-row { grid-template-columns:105px minmax(80px,1fr) 90px; }.demo-header { gap:15px; }.demo-label em { display:none; } }
@media (max-width:800px) { .sales-intro { padding:17px 0; }.intro-copy h1 { font-size:26px; }.workspace,.sales-intro,.demo-footer { width:calc(100% - 28px); }.board { grid-template-columns:1fr; }.context-column { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.context-column .map-panel { grid-column:2; grid-row:1/3; }.context-column .change-panel { grid-column:1; }.context-column .next-step { grid-column:1; align-self:start; }.knowledge-tools { flex-wrap:nowrap; }.history-columns,.knowledge-row { grid-template-columns:130px minmax(80px,1fr) 110px; gap:12px; }.word-name b { font-size:13px; }.word-name small { font-size:9px; }.word-glyph { width:28px; height:28px; }.word-glyph.swatch { width:22px; height:22px; }.row-state .state { font-size:10px; }.row-state small { font-size:9px; }.history-bar { height:32px; }.row-dates { font-size:9px; }.metric-label { font-size:10px; }.metric small { font-size:9px; }.metric-main strong { font-size:30px; }.spark { width:64px; }.metric-emblem { width:23px; height:23px; }.metric-emblem .icon { width:15px; height:15px; }.cabinet-end { align-items:flex-start; }.demo-footer { font-size:9px; align-items:flex-start; }.demo-footer>div { flex-direction:column; gap:4px; align-items:flex-start; }.map-selection { align-items:flex-start; }.full-map-scroll { max-height:52vh; } }
@media (max-width:600px) { body { padding-bottom:60px; }.demo-header { padding:10px 14px; gap:8px; min-height:63px; }.brand { font-size:20px; gap:7px; }.brand img { width:31px; height:31px; }.brand small { font-size:9px; }.demo-label { display:none; }.header-actions { gap:8px; }.header-actions .icon-btn { width:30px; height:30px; }.header-actions .icon-btn .icon { width:15px; height:15px; }.header-actions .btn { font-size:10px; padding:8px 10px; min-height:35px; max-width:148px; }.header-actions .btn .icon { width:13px; height:13px; }.intro-copy h1 { font-size:25px; line-height:1.12; max-width:330px; }.intro-copy p { font-size:11px; margin-top:6px; }.sales-intro { padding:17px 0; }.workspace { border-radius:15px; }.children-rail { padding:9px 8px; }.children-rail .search { display:none; }.children-rail nav { gap:3px; }.child { padding:6px 3px; gap:4px; flex-direction:column; min-width:0; }.child b { font-size:10px; }.child .avatar { width:25px; height:25px; }.cabinet { padding:14px 10px; }.child-heading { gap:8px; }.child-heading h2 { font-size:24px; }.child-heading p { font-size:9px; }.avatar.large { width:37px; height:37px; font-size:19px; }.heading-tools { gap:0; }.parent-button { display:none; }.period { padding:2px; }.period button { padding:5px 8px; font-size:10px; min-height:28px; }.period-line { font-size:10px; margin:12px 0 9px; justify-content:space-between; gap:6px; }.period-line .text-btn { font-size:8px; }.period-line .icon { width:11px; height:11px; }.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:13px; }.metric { padding:9px 10px; border-radius:10px; }.metric-label { font-size:9px; }.metric-label .icon { width:10px; height:10px; }.metric-main { min-height:41px; }.metric-main strong { font-size:30px; }.metric strong span { font-size:10px; }.metric small { font-size:8px; }.spark { width:70px; height:28px; }.metric-emblem { width:25px; height:25px; }.mini-days { gap:3px; max-width:60px; }.mini-days i { width:6px; height:13px; }.knowledge-panel { padding:13px 10px 8px; border-radius:12px; }.surface h3 { font-size:18px; }.overline { font-size:8px; }.knowledge-tools { flex-wrap:wrap; margin-top:12px; gap:8px; }.scope-tabs { width:100%; gap:2px; justify-content:space-between; }.scope-tabs button { font-size:10px; padding:6px; gap:4px; }.knowledge-search { width:100%; padding:6px 8px; }.knowledge-search input { width:100%; font-size:10px; }.filter-explanation { font-size:9px; margin:8px 0; }.strip-legend { font-size:8px; gap:4px; padding:8px 0; }.gradient-key { width:45px; height:5px; }.recent-key { width:9px; height:9px; }.history-columns { grid-template-columns:88px 1fr; font-size:8px; gap:7px; margin-bottom:7px; }.history-columns>span:last-child { display:none; }.knowledge-group { margin-bottom:9px; }.knowledge-group>summary { padding:8px 6px; gap:5px; }.group-title { font-size:12px; gap:4px; }.group-summary { font-size:9px; gap:3px; }.group-summary b { font-size:11px; }.knowledge-row { grid-template-columns:88px minmax(0,1fr); grid-template-rows:auto auto; gap:1px 7px; padding:7px 0; min-height:64px; }.word-name { grid-column:1; grid-row:1; padding:4px; gap:2px; min-height:34px; }.word-name b { font-size:10px; }.word-name small { font-size:7px; }.word-name .word-glyph { width:21px; height:21px; }.word-name .swatch { width:16px; height:16px; border-width:2px; margin:2px; }.row-history { grid-column:2; grid-row:1; }.row-dates { font-size:7px; margin-top:0; }.history-bar { height:25px; }.row-state { grid-column:1/-1; grid-row:2; flex-direction:row; justify-content:space-between; align-items:center; padding-left:4px; gap:8px; }.row-state .state { font-size:7px; background:none; padding:0; }.row-state small { font-size:7px; }.history-foot { font-size:8px; padding-top:8px; }.context-column { display:flex; gap:12px; }.context-column .surface { padding:14px; }.context-column .map-panel { order:-1; }.context-column h3 { font-size:18px; }.mini-map { max-width:390px; margin:auto; }.map-legend { font-size:10px; }.change-pills button { font-size:12px; }.return-list small { font-size:10px; }.boundary-note { font-size:10px; }.next-step p { font-size:12px; }.cabinet-end { flex-direction:column; gap:8px; margin-top:13px; }.cabinet-end>span { font-size:9px; }.demo-footer { flex-direction:column; margin-bottom:20px; font-size:9px; }.demo-footer>div { flex-direction:row; gap:15px; }.mobile-actions { position:fixed; bottom:0; left:0; right:0; z-index:20; display:flex; justify-content:space-around; border-top:1px solid var(--line); background:var(--surface); padding:7px 12px max(7px,env(safe-area-inset-bottom)); box-shadow:0 -5px 25px #1d174008; }.mobile-actions button { display:flex; align-items:center; gap:7px; border:0; background:none; color:var(--violet); padding:6px 12px; font-size:11px; }.mobile-actions .icon { width:18px; height:18px; }.toast { bottom:70px; font-size:11px; width:calc(100% - 28px); text-align:center; }.detail-dialog,.detail-dialog.wide-dialog,.detail-dialog.map-dialog { width:calc(100vw - 16px); border-radius:17px; max-height:calc(100dvh - 22px); }.dialog-top { padding:10px 14px 5px; }.dialog-top .icon-btn { width:34px; height:34px; }.dialog-label { font-size:9px; }#dialog-body,.map-dialog #dialog-body { padding:9px 17px 23px; }#dialog-title,.map-dialog #dialog-title { font-size:24px; }.dialog-sub { font-size:12px; margin:10px 0 18px; }.dialog-actions { gap:10px; margin-top:20px; flex-wrap:wrap; }.dialog-actions .btn { font-size:11px; padding:9px 12px; }.dialog-actions .text-btn { font-size:11px; }.small-caption { font-size:10px; }.about-list { gap:17px; }.about-list p { font-size:12px; }.about-list b { font-size:14px; }.word-stats { gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0; }.word-stats>div { padding:10px; }.word-stats strong { font-size:23px; }.word-stats span { font-size:9px; }.word-dialog-heading { gap:9px; }.word-dialog-heading>.word-glyph { width:33px; height:33px; }.word-dialog-heading>.state { font-size:9px; }.word-curve text { font-size:12px; }.detail-subhead { font-size:16px; }.phrase-pills span { font-size:11px; }.map-toolbar { gap:9px; }.map-toolbar .knowledge-search { margin-left:0; width:100%; order:3; }.map-toolbar .knowledge-search input { width:100%; }.zoom-tools { margin-left:auto; gap:5px; }.map-dialog .map-legend { gap:6px 8px; font-size:9px; }.full-map-scroll { max-height:45vh; padding:8px; }.map-selection { flex-direction:column; gap:10px; }.map-selection .btn { width:100%; }.map-selection span { font-size:10px; }.map-caveat { font-size:9px; }.activity-chart { gap:2px; }.activity-chart b,.activity-chart small { font-size:8px; }.direction-options { grid-template-columns:1fr; }.direction-option { padding:13px; }.direction-option b { font-size:13px; }.parent-layout { grid-template-columns:1fr; gap:24px; }.parent-preview { padding:12px; }.parent-editor textarea { min-height:120px; }.game-options { gap:10px; }.game-options button { padding:15px; }.game-options .word-glyph { width:75px; height:75px; }.offer-top img { width:65px; }.offer-roles { gap:7px; }.offer-roles .btn { font-size:11px; padding:9px 12px; }.offer-benefits { grid-template-columns:1fr; gap:9px; }.offer-benefits>div { display:grid; grid-template-columns:26px 1fr; padding:14px; gap:4px 10px; }.offer-benefits .icon { grid-row:1/3; margin-bottom:0; }.offer-benefits p { margin-top:0; font-size:11px; }.offer-benefits b { font-size:13px; } }
@media (max-width:600px) {
  .knowledge-panel .section-heading .overline { display:none; }
  .metric { padding:8px 9px; }
  .metric-main { min-height:35px; }
  .metric-main strong { font-size:28px; }
  .filter-explanation { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Особиста карта — основний екран; історії відкриваються з її тем. */
.compact-activity { display:none; }
.map-view-controls { display:flex; align-items:center; gap:10px; }
.map-mode button { font-size:10px; padding:4px 9px; min-height:24px; }
#map-mode[hidden] { display:none; }
.map-search-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px; max-height:150px; overflow:auto; padding:2px; margin:-5px 0 14px; }
.map-search-results[hidden] { display:none; }
.map-search-results button { display:flex; align-items:center; gap:7px; padding:9px 10px; border:1px solid var(--line); background:var(--violet-soft); border-radius:7px; text-align:left; font-size:11px; }
.map-search-results b { margin-left:auto; color:var(--good); }
.map-search-results small { color:var(--ink-soft); font-size:9px; font-weight:400; }
.map-search-results .icon { width:13px; height:13px; color:var(--violet); }
.personal-map-legend i.active { width:6px; height:6px; border-radius:50%; background:var(--violet); }
.metric-context { font-size:9px; font-weight:400; color:var(--ink-soft); }
.metric-emblem.violet { color:var(--violet); background:var(--violet-soft); }
.metric-changes { justify-content:flex-start; gap:22px; padding:5px 0; }
.metric-changes strong { font-size:27px; }
.metric-changes small { font-size:9px; margin:0 0 2px; }
.personal-map { scroll-margin-top:12px; padding:18px 20px 13px; }
.personal-map-name { font-weight:500; color:var(--ink-soft); }
.personal-map .small-caption { font-size:10px; margin:4px 0 0; }
.map-heading-actions { display:flex; align-items:center; gap:9px; }
.compare-btn { font-size:11px; min-height:33px; padding:7px 10px; }
.compare-btn .icon { width:14px; height:14px; }
.personal-map-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:15px 0 7px; }
.map-filters { display:flex; gap:4px; }
.map-filters button { display:flex; gap:7px; align-items:center; border:0; background:none; border-radius:7px; padding:6px 10px; font-size:11px; color:var(--ink-soft); }
.map-filters button[aria-pressed="true"] { background:var(--violet-soft); color:var(--violet); font-weight:650; }
.map-filters button span { font-size:9px; font-weight:500; opacity:.8; }
.map-view-caption { font-size:10px; color:var(--ink-soft); min-height:15px; margin:0 0 15px; }
.personal-map-canvas { position:relative; padding:0 2px; }
.personal-domains { position:relative; display:grid; grid-template-columns:3fr 1fr 1fr; gap:27px; }
.map-domain { min-width:0; }
.map-domain h4 { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:650; color:var(--ink-soft); min-height:22px; margin:0 0 10px; }
.map-domain h4 .icon { width:15px; height:15px; }
.map-domain h4>span { margin-left:auto; font-weight:400; font-size:10px; }
.domain-columns { display:grid; grid-template-columns:repeat(var(--domain-columns),minmax(0,1fr)); gap:12px; }
.topic-column { display:flex; flex-direction:column; gap:18px; }
.personal-node,.future-topic { height:73px; flex:none; }
.personal-node { position:relative; width:100%; border:1px solid color-mix(in srgb,#9db85d 42%,var(--line)); border-radius:9px; background:color-mix(in srgb,#a6c962 14%,var(--surface)); padding:10px 10px 14px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; transition:opacity .15s,box-shadow .15s; }
.personal-node.learning { background:color-mix(in srgb,#f2ce54 21%,var(--surface)); border-color:color-mix(in srgb,#d7b542 45%,var(--line)); }
.personal-node.unknown { background:color-mix(in srgb,#e8a47e 18%,var(--surface)); border-color:color-mix(in srgb,#d89775 42%,var(--line)); }
.personal-node:hover,.personal-node:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.personal-node.selected { box-shadow:0 0 0 2px var(--violet); }
.personal-node.dimmed { opacity:.3; }
.topic-top { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.topic-top>b { font-size:12px; font-weight:600; line-height:1.2; }
.topic-count { flex:none; font:800 16px/1 var(--display); color:var(--good); font-variant-numeric:tabular-nums; }
.topic-count small { font-size:11px; font-weight:500; color:var(--ink-soft); }
.topic-bottom { display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:8px; color:var(--ink-soft); white-space:nowrap; }
.topic-bottom>span { display:inline-flex; gap:3px; align-items:center; }
.topic-bottom .icon { width:11px; height:11px; }
.topic-active { width:5px; height:5px; border-radius:50%; background:var(--violet); margin-right:2px; }
.in-work .topic-bottom>span:first-child { color:var(--violet); font-weight:600; }
.topic-change em { font-size:10px; font-weight:700; font-style:normal; }
.topic-change .gain { color:var(--good); }
.topic-change .loss { color:var(--warn); }
.topic-errors { font-size:8px; margin-left:3px; }
.topic-stack { position:absolute; bottom:6px; left:10px; right:10px; height:3px; display:flex; overflow:hidden; border-radius:4px; }
.topic-stack .known,.personal-map-legend i.known { background:#91b744; }
.topic-stack .learning,.personal-map-legend i.learning { background:#e9c33e; }
.topic-stack .unknown,.personal-map-legend i.unknown { background:#df9678; }
.personal-links { position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }
.personal-edge { fill:none; stroke:color-mix(in srgb,var(--good) 40%,var(--line)); stroke-width:1.4; }
.personal-edge.selected { stroke:var(--violet); stroke-width:2; }
.personal-map-legend { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:17px 0 12px; color:var(--ink-soft); font-size:9px; }
.personal-map-legend>span { display:flex; align-items:center; gap:5px; }
.personal-map-legend i { width:7px; height:7px; border-radius:2px; }
.personal-map-legend .count-key { margin-left:auto; }
.time-ribbon { display:grid; grid-template-columns:155px minmax(0,1fr) 115px; align-items:center; gap:14px; border-top:1px solid var(--line); padding:11px 0 2px; }
.time-ribbon-title b { display:block; font-size:11px; font-weight:650; }
.time-ribbon-title span { display:block; font-size:9px; color:var(--ink-soft); margin-top:4px; }
.time-ribbon-chart { position:relative; min-width:0; }
.time-ribbon-chart svg { display:block; width:100%; height:58px; }
.time-values { display:grid; position:absolute; inset:0 0 auto; height:58px; grid-template-columns:repeat(var(--steps),minmax(0,1fr)); }
.time-values>span { position:relative; }
.time-values b { position:absolute; top:var(--point-top); left:50%; transform:translateX(-50%); font-size:11px; color:var(--good); font-weight:600; line-height:1; }
.time-dates { display:grid; grid-template-columns:repeat(var(--steps),minmax(0,1fr)); gap:3px; }
.time-dates button { font-size:10px; font-variant-numeric:tabular-nums; padding:5px 2px; border:0; background:none; color:var(--ink-soft); border-radius:6px; min-height:29px; }
.time-dates button[aria-pressed="true"] { font-weight:700; background:var(--violet-soft); color:var(--violet); }
.time-dates button:hover { background:var(--paper); outline:1px solid var(--line); }
.time-ribbon-note { color:var(--ink-soft); font-size:9px; }
.map-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:7px; color:var(--ink-soft); font-size:10px; }
.map-bottom .text-btn { font-size:10px; }
.action-strip { display:flex; align-items:center; gap:12px; margin-top:14px; padding:13px 16px; border:1px solid var(--line); background:var(--surface); border-radius:12px; }
.action-strip>div { flex:1; }
.action-strip b { display:block; font-size:12px; }
.action-strip p { font-size:10px; margin:3px 0 0; color:var(--ink-soft); }
.action-strip .btn { min-height:34px; font-size:11px; }
.action-strip>.text-btn { margin-left:6px; font-size:11px; }
.empty-personal-map { display:flex; flex-direction:column; align-items:center; text-align:center; padding:55px 20px; }
.empty-personal-map p { max-width:330px; margin:12px 0 22px; font-size:12px; color:var(--ink-soft); }
.empty-map-art { display:flex; align-items:center; margin:0 0 28px; }
.empty-map-art span { display:block; width:62px; height:37px; border:1px dashed var(--ink-soft); background:var(--paper); border-radius:8px; }
.empty-map-art i { width:22px; border-bottom:1px dashed var(--ink-soft); }
.group-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.group-dialog-heading .period { flex:none; }
.dialog-breadcrumb { margin-bottom:17px; }
.group-sub { margin:12px 0 18px; }
.group-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 22px; }
.group-overview>div { padding:14px; border:1px solid var(--line); background:var(--paper); border-radius:10px; }
.group-overview strong { display:block; font:800 27px/1.2 var(--display); font-variant-numeric:tabular-nums; }
.group-overview strong small { font:500 15px var(--body); color:var(--ink-soft); }
.group-overview span { display:block; font-size:10px; color:var(--ink-soft); margin-top:5px; }
.group-dialog .knowledge-row,.history-dialog .knowledge-row,.group-dialog .history-columns,.history-dialog .history-columns { grid-template-columns:155px minmax(0,1fr) 125px; }
.group-dialog .word-name b,.history-dialog .word-name b { font-size:13px; }
.group-dialog .word-name small,.history-dialog .word-name small { font-size:9px; }
.group-dialog .time-ribbon { margin-top:20px; grid-template-columns:140px minmax(0,1fr); }
.group-dialog .time-ribbon-note { grid-column:2; text-align:center; }
.group-dialog .time-ribbon-note br { display:none; }
.history-tabs { margin:0 0 12px; }
@media (min-width:1001px) {
  .demo-header { min-height:58px; padding-top:9px; padding-bottom:9px; }
  .sales-intro { padding-top:14px; padding-bottom:14px; }
  .intro-copy h1 { font-size:26px; }
  .cabinet { padding:16px; }
  .child-heading h2 { font-size:25px; }
  .period-line { margin:8px 0; }
  .metrics { margin-bottom:14px; }
  .metric { padding:10px 12px; }
  .metric-main { min-height:42px; }
  .personal-map { padding-top:16px; }
  .personal-map-toolbar { margin-top:11px; margin-bottom:13px; }
  .personal-node,.future-topic { height:65px; }
  .topic-column { gap:14px; }
  .map-domain h4 { margin-bottom:8px; }
}
@media (max-width:1250px) and (min-width:1001px) {
  .personal-map { padding:16px 14px 12px; }
  .personal-domains { gap:20px; }
  .domain-columns { gap:10px; }
  .personal-node { padding:9px 8px 14px; }
  .topic-top>b { font-size:11px; }
  .topic-count { font-size:14px; }
  .topic-count small { font-size:10px; }
  .topic-errors { display:none; }
  .map-domain h4 { font-size:10px; }
}
@media (min-width:1251px) and (max-height:820px) {
  .sales-intro { padding-top:8px; padding-bottom:8px; }
  .intro-copy h1 { font-size:24px; }
  .cabinet { padding:12px 16px; }
  .period-line { margin:6px 0; }
  .metrics { margin-bottom:10px; }
  .metric { padding:8px 12px; }
  .metric-main { min-height:38px; }
  .personal-map { padding-top:14px; }
  .personal-map-toolbar { margin-top:9px; margin-bottom:10px; }
  .map-domain h4 { margin-bottom:6px; }
  .personal-node,.future-topic { height:62px; }
  .topic-column { gap:10px; }
}
@media (max-width:1000px) {
  .personal-domains { grid-template-columns:1fr 1fr; gap:23px 27px; padding-right:10px; }
  .map-domain.qualities { order:1; }
  .map-domain.relations { order:2; }
  .map-domain.world { order:3; grid-column:1/-1; }
  .map-domain.actions,.map-domain.other { order:4; }
  .personal-node { height:78px; }
  .map-domain h4 { font-size:12px; }
  .personal-map-toolbar { gap:7px; }
  .map-filters button { padding:6px 8px; }
  .time-ribbon { grid-template-columns:140px minmax(0,1fr); }
  .time-ribbon-note { grid-column:2; text-align:center; }
  .time-ribbon-note br { display:none; }
  .action-strip>.text-btn { display:none; }
}
@media (max-width:600px) {
  .personal-map { padding:14px 10px 11px; border-radius:12px; }
  .personal-map .section-heading { align-items:flex-start; flex-wrap:wrap; gap:11px; }
  .personal-map-name { font-size:14px; }
  .personal-map .small-caption { font-size:9px; line-height:1.6; }
  .map-heading-actions { width:100%; justify-content:space-between; }
  .compare-btn { min-height:30px; padding:6px 9px; font-size:10px; }
  .personal-map-toolbar { flex-wrap:wrap; margin:12px 0 7px; gap:10px; }
  .personal-map-toolbar .knowledge-search { display:none; }
  .map-filters { width:100%; justify-content:space-between; gap:1px; }
  .map-filters button { padding:6px 5px; font-size:10px; gap:4px; }
  .map-filters button span { font-size:9px; }
  .map-view-caption { font-size:9px; margin:10px 0 15px; }
  .personal-domains { grid-template-columns:1fr; gap:24px; padding-right:7px; }
  .map-domain.world { grid-column:auto; }
  .domain-columns { gap:14px; }
  .topic-column { gap:17px; }
  .personal-node { height:76px; padding:9px 8px 14px; }
  .topic-top>b { font-size:11px; }
  .topic-count { font-size:15px; }
  .topic-count small { font-size:10px; }
  .topic-bottom { font-size:8px; }
  .topic-errors { display:none; }
  .personal-map-legend { font-size:9px; gap:7px 12px; }
  .personal-map-legend .count-key { width:100%; margin-left:0; }
  .time-ribbon { grid-template-columns:1fr; gap:6px; padding-top:14px; }
  .time-ribbon-title { display:flex; justify-content:space-between; align-items:center; gap:6px; }
  .time-ribbon-title b { font-size:10px; }
  .time-ribbon-title span { font-size:8px; margin:0; }
  .time-ribbon-note { grid-column:1; font-size:9px; }
  .time-values b { font-size:10px; }
  .time-dates button { font-size:10px; min-height:32px; }
  .map-bottom { align-items:flex-start; font-size:9px; margin-top:13px; }
  .map-bottom>span { max-width:185px; }
  .map-bottom .text-btn { font-size:9px; white-space:nowrap; padding-top:0; }
  .action-strip { padding:12px 10px; flex-wrap:wrap; gap:8px; }
  .action-strip .btn { width:100%; }
  .action-strip p { font-size:10px; }
  .metric-context { display:none; }
  .metric-changes { gap:17px; padding:2px 0; }
  .metric-changes strong { font-size:23px; }
  .metric-changes small { font-size:8px; }
  .group-dialog-heading { flex-wrap:wrap; gap:12px; }
  .group-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
  .group-overview>div { padding:11px; }
  .group-overview strong { font-size:25px; }
  .group-overview span { font-size:9px; }
  .group-dialog .knowledge-row,.history-dialog .knowledge-row,.group-dialog .history-columns,.history-dialog .history-columns { grid-template-columns:88px minmax(0,1fr); }
  .group-dialog .word-name b,.history-dialog .word-name b { font-size:10px; }
  .group-dialog .word-name small,.history-dialog .word-name small { font-size:7px; }
  .group-dialog .time-ribbon { grid-template-columns:1fr; }
  .group-dialog .time-ribbon-note { grid-column:1; }
  .empty-personal-map { padding:30px 5px; }
  .empty-personal-map p { font-size:11px; }
}

/* У великій карті всі теми лишаються видимими; змінюється щільність подачі. */
.personal-domains.wide.has-actions .map-domain.world { grid-column:1; grid-row:1/3; }
.personal-domains.wide.has-actions .map-domain.qualities { grid-column:2; grid-row:1/3; }
.personal-domains.wide.has-actions .map-domain.relations { grid-column:3; grid-row:1; }
.personal-domains.wide.has-actions .map-domain.actions { grid-column:3; grid-row:2; }
.personal-domains.wide.has-actions { grid-template-rows:auto 1fr; row-gap:20px; }
.personal-domains.wide.compact { grid-template-columns:4fr 2fr 1.45fr; column-gap:24px; }
.compact .domain-columns { gap:12px; }
.compact .topic-column { gap:9px; }
.compact .personal-node,.compact .future-topic { height:auto; min-height:42px; }
.compact .personal-node,.compact .future-topic { display:block; padding:6px 7px 9px; border-radius:7px; }
.compact .topic-top { display:block; }
.compact .topic-top>b { display:block; padding-right:39px; font-size:11px; line-height:1.14; }
.compact .topic-count { position:absolute; top:6px; right:7px; font-size:13px; }
.compact .topic-count small { font-size:9px; }
.compact .topic-bottom>span:first-child,.compact .topic-errors { display:none; }
.compact .topic-change { position:absolute; right:7px; bottom:7px; }
.compact .topic-change em { font-size:9px; }
.compact .topic-stack { bottom:4px; height:2px; left:7px; right:7px; }
.compact .compact-activity { display:inline-block; vertical-align:2px; width:5px; height:5px; border-radius:50%; margin-right:4px; background:var(--violet); }
.compact .in-work { border-color:color-mix(in srgb,var(--violet) 55%,var(--line)); }
.compact .map-domain h4 { margin-bottom:9px; }
@media (max-width:1250px) and (min-width:1001px) {
  .personal-domains.wide.compact { grid-template-columns:3fr 2fr 1fr; column-gap:18px; }
  .compact .topic-top>b { font-size:10px; }
  .compact .domain-columns { gap:10px; }
  .map-view-controls { gap:7px; }
  .map-filters button { padding:6px 7px; }
}
@media (min-width:1251px) and (max-height:820px) {
  .compact .personal-node,.compact .future-topic { min-height:38px; }
  .compact .topic-column { gap:7px; }
  .personal-domains.wide.has-actions { row-gap:12px; }
  .compact .map-domain h4 { margin-bottom:6px; }
  body:has(.many-topics.is-overview) .intro-copy p { display:none; }
}
@media (max-width:1000px) and (min-width:601px) {
  .personal-domains.tablet.has-actions .map-domain.qualities { grid-column:1; grid-row:1/3; }
  .personal-domains.tablet.has-actions .map-domain.relations { grid-column:2; grid-row:1; }
  .personal-domains.tablet.has-actions .map-domain.actions { grid-column:2; grid-row:2; }
  .personal-domains.tablet.has-actions .map-domain.world { grid-column:1/-1; grid-row:3; }
  .personal-domains.tablet.has-actions { grid-template-rows:auto auto auto; }
  .personal-map-toolbar { flex-wrap:wrap; }
  .map-view-controls { margin-left:auto; }
}
@media (max-width:600px) {
  .map-domain.actions { order:3; }
  .map-domain.world { order:4; }
  .map-view-controls { width:100%; justify-content:space-between; gap:8px; }
  .map-mode { flex:none; }
  .many-topics .personal-map-toolbar .knowledge-search { display:flex; width:auto; min-width:0; flex:1; }
  .many-topics .knowledge-search input { width:100%; }
  .compact .personal-node,.compact .future-topic { min-height:46px; }
  .compact .topic-column { gap:9px; }
  .compact .topic-top>b { font-size:11px; }
  .compact .topic-count { font-size:14px; }
  .personal-domains.phone.compact .map-domain.actions .domain-columns { max-width:none; }
}

.future-topic { visibility:hidden; border:1px solid transparent; }
.compact .compact-activity.inactive { visibility:hidden; }
#personal-map[hidden]{display:none}
.profile-dimensions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.profile-dimensions>button{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);min-width:0}
.profile-dimensions>button[aria-pressed=true]{border-color:var(--violet);background:var(--violet-soft)}
.profile-dimensions>button>span:nth-child(2){flex:1;min-width:0}
.profile-dimensions b,.profile-dimensions small{display:block}.profile-dimensions b{font-size:14px}.profile-dimensions small{font-size:11px;color:var(--ink-soft);margin-top:3px}
.dimension-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sunk);color:var(--violet)}
.phrase-mini{display:flex;gap:3px;align-items:flex-end;height:27px}.phrase-mini i{height:calc(6px + var(--step)*3px);width:4px;border-radius:2px;background:var(--line)}.phrase-mini .filled{background:var(--violet)}
.map-breadcrumb{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:4px 0 14px;font-size:12px}
.map-breadcrumb>svg{width:12px;color:var(--ink-soft)}.map-breadcrumb button{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--ink-soft);padding:4px}
.map-breadcrumb button[aria-current=page]{font-weight:750;color:var(--ink)}
.knowledge-tree{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:18px;align-items:start}
.tree-domain{min-width:0}.tree-domain-head{width:100%;display:flex;align-items:center;gap:8px;text-align:left;padding:0 0 10px;border:0;background:none;color:var(--ink)}
.tree-domain-head>span:nth-child(2){flex:1}.tree-domain-head b{display:block;font-size:13px}.tree-domain-head small{display:block;color:var(--ink-soft);font-size:11px;margin-top:3px}
.tree-domain-icon{background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex-shrink:0}
.tree-domain-head>svg{width:13px}.tree-branches{display:grid;gap:8px;border-left:1px solid var(--line);margin-left:15px;padding-left:12px}
.branch-card,.nested-topic{position:relative;display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 10px 7px;width:100%;text-align:left;color:var(--ink);min-width:0;transition:border-color .15s}
.branch-card:hover,.nested-topic:hover{border-color:var(--violet);box-shadow:0 2px 10px #68609012}
.tree-branches>.branch-card:before{content:'';position:absolute;left:-14px;top:23px;width:13px;border-top:1px solid var(--line)}
.branch-name{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:750;line-height:1.25}.branch-name svg{width:12px;height:12px;flex-shrink:0;color:var(--ink-soft)}
.branch-count{display:flex;align-items:baseline;justify-content:space-between;gap:5px;margin:5px 0 4px}.branch-count b{font-size:18px;letter-spacing:-.4px;line-height:1}.branch-count b small{font-size:11px;font-weight:450;color:var(--ink-soft);letter-spacing:0}
.branch-count>span{font-size:10px;color:var(--ink-soft)}.branch-count em{font-style:normal;color:var(--violet)}
.branch-stack{display:flex;height:4px;gap:1px;border-radius:5px;overflow:hidden;background:var(--line);width:100%}.branch-stack .known{background:#8fb637}.branch-stack .learning{background:#efcd4c}.branch-stack .unknown{background:#ec9e73}
.branch-delta{display:flex;gap:7px;align-items:center;font-size:10px;min-height:12px;margin-top:3px;color:var(--ink-soft)}.branch-delta>b{font-weight:700}.branch-delta>span:last-child{margin-left:auto}
.tree-caption{font-size:11px;color:var(--ink-soft);margin:12px 0 0}.dimmed{opacity:.35}
.nested-clusters,.nested-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.nested-clusters .branch-card{padding:16px}.nested-topic{padding:15px}.nested-topic .branch-name{font-size:14px}.nested-topic .branch-count{margin:12px 0 8px}.nested-topic .branch-count b{font-size:25px}.nested-topic .branch-stack{height:6px}.topic-state-counts{display:block;font-size:10px;color:var(--ink-soft);margin:7px 0}
.branch-summary{display:flex;align-items:center;gap:20px;background:var(--sunk);border-radius:10px;padding:12px 15px;margin:0 0 15px;font-size:12px}.branch-summary>b{font-size:23px;white-space:nowrap}.branch-summary small{font-size:12px;font-weight:400;color:var(--ink-soft)}.branch-summary>.branch-stack{max-width:220px;height:7px}.branch-summary>span:last-child{margin-left:auto;white-space:nowrap}.branch-summary em{font-style:normal}
.search-path{display:block;font-size:9px!important;font-weight:400;color:var(--ink-soft);margin-top:3px}
.dimension-page{padding:20px}.dimension-page .section-heading{align-items:center}.dimension-page .section-heading h3{font-size:21px}.dimension-page .section-heading .period{flex-shrink:0}
.phrase-summary{display:flex;align-items:center;gap:26px;padding:13px 0 18px;color:var(--ink-soft);font-size:12px}.phrase-summary>span{display:flex;align-items:center;gap:8px}.phrase-summary b{font-size:20px;color:var(--ink)}
.phrase-table-heading{display:grid;grid-template-columns:1.65fr 1fr 1fr;padding:7px 35px 7px 12px;color:var(--ink-soft);font-size:10px;background:var(--sunk);border-radius:6px}
.phrase-rows{display:grid}.phrase-row{display:grid;grid-template-columns:1.65fr 1fr 1fr 15px;gap:20px;align-items:center;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left;padding:13px 12px}
.phrase-row:hover{background:var(--sunk)}.phrase-description>b{font-size:14px}.phrase-description>small{display:block;font-size:10px;color:var(--ink-soft);margin-top:5px}
.phrase-tokens{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px}.phrase-token{font-size:10px;padding:3px 5px;border-radius:4px;background:#dff0e9;color:#285942;white-space:nowrap}.phrase-token.attribute{background:#e9e3ff;color:#58458e}.phrase-token.relation{background:#fff0c0;color:#825b18}
.phrase-result{display:grid;gap:5px}.phrase-result>strong{font-size:18px}.phrase-result>small{font-size:10px;color:var(--ink-soft)}.accuracy-track{height:6px;background:var(--sunk);border-radius:4px;overflow:hidden;width:100%;max-width:220px}.accuracy-track i{display:block;background:var(--violet);height:100%;border-radius:4px}.phrase-result.previous .accuracy-track i{background:#b7addb}.phrase-result.previous strong{font-weight:450;color:var(--ink-soft)}.no-observation .phrase-result{color:var(--ink-soft)}
.dimension-note{font-size:11px;color:var(--ink-soft);line-height:1.7;margin:17px 0 0;max-width:850px}.phrase-evidence{padding:14px 0;border-top:1px solid var(--line)}.phrase-evidence h3{font-size:17px}.phrase-example{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 0}.phrase-example .phrase-token{font-size:13px;padding:5px 8px}.phrase-example>b{text-align:right;font-size:17px}.phrase-example small{display:block;font-size:10px;font-weight:400;color:var(--ink-soft)}
.measurement-label{font-size:10px;padding:6px 10px;background:var(--sunk);border-radius:20px;color:var(--ink-soft)}.ability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;margin-top:16px}
.ability-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}.ability-card h4{display:flex;align-items:center;gap:7px;font-size:13px;margin:0 0 9px}.ability-card h4>.icon{color:var(--violet)}
.game-measure{display:block;width:100%;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:left;padding:10px 0 7px}.game-measure:hover{background:var(--sunk)}.game-measure-name{display:flex;justify-content:space-between;align-items:center;font-size:12px}.game-measure-name>.icon{width:13px}.game-measure-value{display:flex;justify-content:space-between;align-items:center;margin:7px 0}.game-measure-value>b{font-size:25px;letter-spacing:-.6px}.game-measure-value>b>small{font-size:12px;font-weight:450;letter-spacing:0;margin-left:5px}.game-measure-label{display:block;font-size:11px;color:var(--ink-soft);line-height:1.4}.game-measure-meta{display:block;font-size:9px;color:var(--ink-soft);margin-top:6px}.game-mini-levels{display:flex;align-items:flex-end;gap:3px}.game-mini-levels>i{display:block;width:5px;background:#a195d9;border-radius:3px}.no-measure{display:block;font-size:12px;color:var(--ink-soft);padding:13px 0}
.measure-focus{display:grid;gap:8px;padding:17px;background:var(--sunk);border-radius:12px;font-size:12px}.measure-focus strong{font-size:36px}.measure-focus strong small{font-size:17px;font-weight:400}.measure-focus>span:last-child{color:var(--ink-soft)}
.measure-history{padding:22px 10px 5px;margin:20px 0;border:1px solid var(--line);border-radius:12px;overflow-x:auto}.measure-columns{display:grid;grid-template-columns:repeat(var(--plays),minmax(60px,1fr));align-items:end;gap:8px;min-width:min-content}.measure-columns>div{display:flex;align-items:center;flex-direction:column;gap:5px}.measure-columns i{display:block;width:20px;background:#a99cdf;border-radius:5px 5px 0 0}.measure-columns b{font-size:14px}.measure-columns small,.measure-columns span{font-size:10px;color:var(--ink-soft)}.measure-history>p{font-size:11px;color:var(--ink-soft);margin:15px 0}.measure-table{width:100%;border-collapse:collapse;font-size:12px}.measure-table th,.measure-table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line)}.measure-table th{font-weight:500;color:var(--ink-soft)}
@media(min-width:1251px) and (max-height:820px){
  body:has(.personal-map.is-tree) .intro-copy p{display:none}
  .is-tree .tree-branches{gap:6px}.is-tree .branch-card{padding:7px 8px 5px}.is-tree .branch-delta{min-height:10px;margin-top:2px}.is-tree .branch-count{margin:4px 0}.profile-dimensions>button{padding:9px 12px}
}
@media(max-width:1100px){.knowledge-tree{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.tree-domain:first-child{grid-row:span 2}.ability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-dimensions>button{padding:10px;gap:7px}.profile-dimensions b{font-size:12px}.profile-dimensions small{font-size:10px}.phrase-mini{display:none}.dimension-symbol{width:28px;height:28px}.nested-clusters,.nested-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .profile-dimensions{gap:5px}.profile-dimensions>button{display:block;padding:9px 7px}.profile-dimensions>button>.icon{display:none}.profile-dimensions .dimension-symbol{margin-bottom:6px}.profile-dimensions b{font-size:11px}.profile-dimensions small{font-size:9px;line-height:1.4}.profile-dimensions>button>span:nth-child(2){display:block}
 .knowledge-tree{gap:18px 9px}.tree-branches{margin-left:5px;padding-left:7px;gap:8px}.tree-branches>.branch-card:before{width:8px;left:-9px}.branch-card{padding:8px 7px}.tree-domain-icon{display:none}.tree-domain-head b{font-size:12px}.tree-domain-head small{font-size:10px}.branch-name{font-size:11px}.branch-count{display:block}.branch-count>span{display:block;margin-top:4px}.branch-count b{font-size:20px}.branch-delta{font-size:9px}.tree-domain:first-child{grid-row:span 2}.tree-caption{font-size:10px}
 .map-breadcrumb{font-size:10px;gap:2px}.map-breadcrumb button{padding:4px 1px}.branch-summary{flex-wrap:wrap;gap:10px}.branch-summary>.branch-stack{max-width:none}.branch-summary>span:last-child{margin-left:0}.nested-clusters,.nested-topic-grid{gap:8px}.nested-topic{padding:10px}.nested-topic .branch-name{font-size:12px}.topic-state-counts{line-height:1.6}.nested-topic .branch-delta{flex-wrap:wrap}.nested-topic .branch-delta>span:last-child{margin-left:0;width:100%}
 .dimension-page{padding:13px}.dimension-page .section-heading{display:block}.dimension-page .section-heading h3{font-size:18px}.dimension-page .section-heading>.period{margin-top:12px;width:max-content}.phrase-summary{display:grid;gap:10px;font-size:10px}.phrase-summary b{font-size:17px}.phrase-table-heading{grid-template-columns:1.5fr 1fr 1fr;font-size:9px;gap:8px;padding:7px 0}.phrase-row{grid-template-columns:1.5fr 1fr 1fr;gap:8px;padding:12px 0}.phrase-row>.icon{display:none}.phrase-description>b{font-size:12px}.phrase-token{font-size:9px;padding:2px 3px}.phrase-result>strong{font-size:17px}.phrase-result>small{font-size:9px}.phrase-description>small{display:none}.dimension-note{font-size:10px}.phrase-example .phrase-token{font-size:11px;padding:4px}.phrase-example>b{font-size:14px}
 .ability-grid{grid-template-columns:1fr}.measurement-label{display:inline-block;margin-top:10px}.ability-card{padding:12px 14px}.game-measure-meta{font-size:10px}.measure-table{font-size:10px}.measure-table th,.measure-table td{padding:10px 4px}
}

/* Ширша область побутових знань не робить огляд вищим за решту карти. */
@media(min-width:1101px){
 .knowledge-tree{grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
 .tree-domain:first-child .tree-branches{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tree-domain:first-child .branch-count{flex-wrap:wrap}
}
@media(min-width:1251px) and (max-height:820px){
 .is-tree .map-breadcrumb{margin-bottom:8px}.is-tree .tree-domain-head{padding-bottom:7px}
 .is-tree .branch-name{font-size:11px}.is-tree .branch-count b{font-size:16px}
 .is-tree .branch-count>span{font-size:9px}.is-tree .tree-caption{margin-top:8px}
}

.branch-foot{display:flex;align-items:center;gap:6px;min-height:15px}.branch-foot>.branch-stack{flex:1}.branch-foot>.branch-delta{flex:none;white-space:nowrap;margin:0;min-height:0;font-size:9px;gap:4px}
@media(min-width:1101px){.ability-card[data-ability=memory]{grid-row:span 3}.ability-card[data-ability=motor]{grid-row:span 2}}
@media(min-width:1251px) and (max-height:820px){
 body:has(.is-tree) .metric-main{min-height:32px}
 body:has(.is-tree) .profile-dimensions{margin:9px 0}
 .is-tree .map-breadcrumb{margin-top:0;margin-bottom:3px}
 .is-tree .personal-map-toolbar{margin-bottom:5px}
 .is-tree .branch-count{margin-top:3px;margin-bottom:1px}
}

@media(min-width:1251px) and (max-height:820px){
 .phrase-row{padding:7px 12px}.phrase-summary{padding:5px 0 9px}.phrase-token{padding:2px 4px}.phrase-tokens{margin-top:4px}
 .dimension-page .section-heading{margin-bottom:8px}.dimension-page .section-heading .small-caption{margin-bottom:0}
}

/* Один профіль: карта, конструкції й характеристики без перемикання сторінок. */
.profile-shortcuts{display:flex;align-items:center;gap:8px;margin:12px 0}
.profile-shortcuts>button{display:flex;align-items:center;gap:7px;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:9px 12px;text-align:left}
.profile-shortcuts>button:first-child{background:var(--violet-soft);color:var(--violet)}
.profile-shortcuts b{font-size:11px;font-weight:650}.profile-shortcuts span{font-size:10px;color:var(--ink-soft)}
.profile-shortcuts .icon{width:15px;height:15px;color:var(--violet);flex:none}.profile-shortcuts>button>.icon:last-child{width:12px;height:12px;margin-left:4px}
.profile-overview{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.profile-module{padding:17px;min-width:0;scroll-margin-top:20px}.profile-module:focus{outline:2px solid var(--violet);outline-offset:3px}
.module-heading{display:flex;align-items:center;gap:10px;margin-bottom:14px}.module-heading h3{font-size:17px;margin:0}.module-heading p{font-size:10px;color:var(--ink-soft);margin:4px 0 0}.module-heading>.icon-btn{margin-left:auto;flex:none}.module-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--violet-soft);color:var(--violet);flex:none}
.module-icon .icon{width:20px;height:20px}.construction-grid,.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.construction-tile,.stat-tile{border:1px solid var(--line);border-radius:9px;text-align:left;background:var(--surface);color:var(--ink);padding:9px;min-width:0}
.construction-tile{display:flex;flex-direction:column;gap:6px;min-height:106px}.construction-tile.confirmed{background:color-mix(in srgb,#a6c962 12%,var(--surface));border-color:color-mix(in srgb,#91b744 38%,var(--line))}.construction-tile.exploring{background:color-mix(in srgb,#f2ce54 12%,var(--surface))}.construction-tile.unseen{background:var(--sunk);border-style:dashed}
.construction-tile>b{font-size:11px;line-height:1.3;font-weight:600}.construction-top{display:flex;align-items:center;justify-content:space-between;gap:5px;white-space:nowrap}.construction-state{display:flex;align-items:center;gap:3px;font-size:8px;color:var(--ink-soft)}.confirmed .construction-state{color:var(--good)}.construction-state>.icon{width:11px;height:11px}.construction-state>i{width:6px;height:6px;border-radius:50%;background:#d3ad2e}.construction-state>i.empty{background:transparent;border:1px solid var(--ink-soft)}
.construction-length{font-size:8px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.construction-tile .phrase-tokens{margin:0;gap:2px}.construction-tile .phrase-token{font-size:9px;padding:2px 3px;white-space:normal}.phrase-token.action{background:#dfebfb;color:#345a8b}
.module-foot{display:flex;justify-content:space-between;gap:8px;font-size:9px;line-height:1.5;color:var(--ink-soft);margin-top:12px}.module-foot>span:first-child{display:flex;align-items:center;gap:5px}.proof-key{width:6px;height:6px;background:#91b744;border-radius:50%;flex:none}
.stat-tile{min-height:106px;display:flex;flex-direction:column;gap:7px}.stat-tile.unseen{background:var(--sunk);border-style:dashed}.stat-name{display:flex;gap:5px;align-items:center}.stat-name>b{font-size:11px;font-weight:600;line-height:1.25}.stat-name>.icon{width:15px;height:15px;color:var(--violet);flex:none}.stat-value{display:flex;align-items:center;gap:6px;justify-content:space-between}.stat-value strong{font-size:24px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.5px;font-weight:700}.stat-value small{font-size:10px;letter-spacing:0;font-weight:450;margin-left:4px}.stat-caption,.stat-stale{font-size:9px;color:var(--ink-soft);line-height:1.4}.stat-stale{font-size:8px;margin-top:auto}
.stat-history{height:23px;display:flex;align-items:end;gap:2px;flex:none;max-width:45px;overflow:hidden;color:var(--violet)}.stat-history>i{display:block;width:4px;height:calc(3px + var(--level)*2px);border-radius:2px;background:color-mix(in srgb,var(--violet) 55%,var(--surface))}.stat-history>i:last-child{background:var(--violet)}
.construction-tile:hover,.stat-tile:hover{border-color:var(--violet);box-shadow:0 2px 7px color-mix(in srgb,var(--violet) 8%,transparent)}
.construction-verdict{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--sunk);margin:16px 0}.construction-verdict.confirmed{background:color-mix(in srgb,#a6c962 14%,var(--surface))}.construction-verdict>b{display:flex;gap:7px;align-items:center;font-size:16px}.construction-verdict.confirmed>b{color:var(--good)}.construction-verdict p{font-size:12px;line-height:1.6;margin:8px 0 0;color:var(--ink-soft)}.phrase-examples{padding:6px 0}.phrase-example>small{font-size:11px;white-space:nowrap;color:var(--ink-soft)}
.ability-sources{display:grid;gap:10px;margin-top:22px}.ability-sources>button{display:flex;align-items:center;gap:15px;padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-align:left}.ability-sources>button>span{flex:1}.ability-sources b{display:block;font-size:14px}.ability-sources small{display:block;font-size:11px;color:var(--ink-soft);font-weight:450;margin-top:5px}.ability-sources strong{font-size:23px;text-align:right}.ability-sources strong small{display:inline}.ability-sources>.icon{width:15px}
/* Два накопичення та щоденні перші досягнення. */
.cumulative-progress{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}.growth-heading{display:flex;align-items:center;gap:12px}.growth-heading>div:first-child{flex:none}.growth-heading b{display:block;font-size:12px}.growth-heading>div>small{display:block;font-size:9px;color:var(--ink-soft);margin-top:4px}.growth-heading>.icon-btn{margin-left:auto;flex:none}.growth-totals{display:flex;align-items:center;gap:22px;margin-left:auto}.growth-totals>span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-soft);flex-wrap:wrap}.growth-totals strong{font-size:18px;color:var(--ink)}.growth-totals small{font-size:11px;color:var(--good)}.growth-totals i{width:7px;height:7px;border-radius:50%;background:var(--good)}.growth-totals .seen i{background:var(--violet)}
.growth-scroll{overflow-x:auto;overscroll-behavior-x:contain}.growth-plot{min-width:0;position:relative}.growth-plot:has(.growth-days>button:nth-child(10)){min-width:650px}.growth-plot>svg{display:block;width:100%;height:82px}.growth-axis{stroke:var(--line);stroke-dasharray:2 4;stroke-width:1;vector-effect:non-scaling-stroke}.growth-days{display:grid;grid-template-columns:repeat(var(--days),minmax(0,1fr));gap:1px}.growth-days>button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;border:0;border-radius:5px;background:none;color:var(--ink-soft);height:64px;padding:3px 1px}.growth-days>button:hover,.growth-days>button[aria-pressed=true]{background:var(--violet-soft);color:var(--violet)}.growth-daily-count{font-size:9px;color:var(--good);font-weight:600}.growth-daily-bar{width:8px;min-height:1px;height:var(--daily);border-radius:2px;background:color-mix(in srgb,#91b744 80%,var(--surface))}.growth-days small{font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap}.growth-foot{display:flex;justify-content:space-between;gap:10px;font-size:9px;line-height:1.5;color:var(--ink-soft);margin:9px 0 4px}
@media(max-width:1150px){.profile-overview{grid-template-columns:1fr}.construction-tile,.stat-tile{min-height:95px}.growth-totals{gap:12px}.profile-shortcuts span{display:none}}
@media(max-width:600px){.profile-shortcuts{gap:5px;align-items:stretch}.profile-shortcuts>button{flex:1;justify-content:center;flex-direction:column;padding:8px 4px;gap:4px}.profile-shortcuts b{font-size:10px;text-align:center}.profile-shortcuts>button>.icon:last-child{display:none}.profile-module{padding:12px}.module-heading h3{font-size:16px}.module-heading p{font-size:9px}.module-icon{width:30px;height:30px}.construction-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.construction-tile,.stat-tile{min-height:100px}.module-foot{flex-wrap:wrap;font-size:8px}.growth-heading{flex-wrap:wrap;gap:9px}.growth-totals{display:grid;grid-template-columns:1fr;order:3;width:100%;margin:0;gap:6px}.growth-totals>span{font-size:9px;gap:4px}.growth-totals strong{font-size:17px}.growth-plot>svg{height:82px}.growth-foot{font-size:8px;flex-wrap:wrap}.ability-sources>button{padding:12px;gap:9px}.ability-sources b{font-size:12px}.ability-sources strong{font-size:20px}.phrase-examples .phrase-example{align-items:flex-start}}

.growth-axis-label{position:absolute;left:0;font-size:9px;line-height:12px;color:var(--ink-soft);pointer-events:none}

.confirmed .construction-state,.construction-verdict.confirmed>b,.growth-totals small,.growth-daily-count{color:color-mix(in srgb,var(--good) 72%,var(--ink))}
.construction-state,.construction-length{font-size:9px}

/* Стоси, суцільний тон, нижня смуга 6 px. */
.card-variant-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 0}
.card-variant-picker{flex-wrap:wrap;gap:3px;border:0;padding:0;background:none}.card-variant-picker button{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-size:11px}.card-variant-picker button[aria-pressed=true]{border-color:var(--violet);background:var(--violet-soft);box-shadow:none}.card-variant-picker button>span{font-size:9px;opacity:.65;font-weight:750}
.card-variant-toolbar>.text-btn{font-size:10px;white-space:nowrap}.card-variant-toolbar .icon{width:14px;height:14px}.card-variant-note{font-size:10px;color:var(--ink-soft);margin:7px 0 0;line-height:1.5}.is-card-variant .personal-map-toolbar{margin-top:10px}
.card-columns{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;color:var(--ink-soft)}.card-columns[hidden]{display:none}.card-columns button{border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-soft);width:27px;height:27px}.card-columns button[aria-pressed=true]{border-color:var(--violet);color:var(--violet);background:var(--violet-soft)}
.card-marks{display:flex;flex-wrap:wrap;gap:3px;line-height:0;align-content:flex-start}.card-marks i{flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:var(--line)}.card-marks .known{background:#91b744}.card-marks .learning{background:#e9c33e}.card-marks .unknown{background:#df9678}.card-marks .new-known{box-shadow:0 0 0 1px var(--good)}
.packed-direction{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-soft);margin:10px 0 12px}.packed-direction .icon{width:15px;height:15px}.packed-direction>span{margin-left:auto;font-size:9px}
.packed-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:6px 5px 8px}.packed-map{position:relative;display:grid;grid-template-columns:repeat(var(--packed-columns),minmax(0,1fr));gap:18px;min-width:760px;isolation:isolate}.packed-column{min-width:0}.packed-column>h4{height:36px;display:flex;gap:7px;align-items:center;margin:0 0 10px;font-size:10px;color:var(--ink-soft);line-height:1.2;font-weight:550}.packed-column>h4>b{font-size:13px;font-weight:750;color:var(--ink);background:var(--sunk);padding:4px 6px;border-radius:6px}.packed-column h4 small{display:block;font-size:8px;font-weight:450;opacity:.75;margin-top:2px}
.packed-cards{display:flex;flex-direction:column;gap:15px}
.hierarchy-shell{position:relative;min-width:0;isolation:isolate;--structure:var(--ink-soft)}.hierarchy-shell.depth-2{--structure:color-mix(in srgb,var(--ink-soft) 74%,var(--violet))}.hierarchy-shell.depth-3,.hierarchy-shell.depth-4{--structure:var(--violet)}.hierarchy-shell.dimmed{opacity:.3}
.hierarchy-shell .hierarchy-card{position:relative;z-index:1;height:auto;min-height:96px;padding:8px 9px 9px;display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-width:0;margin:0;width:100%;text-align:left;border-radius:9px;overflow:visible;background:var(--knowledge-tone)}
.hierarchy-shell .topic-top{gap:5px;min-height:25px;align-items:flex-start}.hierarchy-shell .topic-top>b{font-size:11px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}.hierarchy-shell .topic-count{font-size:16px;line-height:1.1}.hierarchy-shell .topic-count small{font-size:10px}.hierarchy-shell .topic-bottom{min-height:14px;font-size:8px;gap:3px}.hierarchy-shell .branch-stack{width:100%;flex:none;height:6px}.hierarchy-shell .branch-delta{display:inline-flex;margin:0;min-height:0;gap:4px;font-size:9px;flex:none}.hierarchy-shell .in-work{border-color:color-mix(in srgb,var(--violet) 65%,var(--line))}
.hierarchy-meta{display:flex;align-items:center;gap:5px;color:var(--structure);font-size:8px;line-height:1.1;min-height:15px;font-weight:600}.hierarchy-meta>.icon{width:11px;height:11px;margin-left:auto}.is-topic .hierarchy-meta{font-weight:450}.completed-label,.completion-tick{color:var(--good);font-weight:650}.is-container.is-complete .hierarchy-card{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.structure-symbol{display:inline-block;position:relative;width:18px;height:16px;flex:none;color:inherit}.structure-symbol i{display:block;position:absolute;inset:4px 3px 2px 0;border:1.3px solid currentColor;border-radius:3px;background:var(--surface)}.structure-symbol i:nth-child(1){z-index:3}.structure-symbol i:nth-child(2){transform:translate(2px,-2px);z-index:2}.structure-symbol i:nth-child(3){transform:translate(4px,-4px);z-index:1}.structure-symbol i:nth-child(4){transform:translate(6px,-6px)}.structure-symbol.level-1 i:after{content:'';display:block;width:3px;height:3px;border-radius:1px;background:currentColor;margin:2px}
.hierarchy-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:9px;color:var(--ink-soft)}.hierarchy-key>span{display:flex;align-items:center;gap:5px}.hierarchy-key .hierarchy-key-arrow{opacity:.5}.hierarchy-key .completion-key{margin-left:auto}.completion-key b{color:var(--good);font-size:12px}.hierarchy-key .level-3{color:var(--violet)}
/* 1. Фізичні шари: кількість шарів відповідає структурній глибині, не частці опанування. */
.hierarchy-shell.stacks.is-container:before,.hierarchy-shell.stacks.depth-3:after,.hierarchy-shell.stacks.depth-4:after{content:'';position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--structure) 55%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--structure) 5%,var(--surface));transform:translate(3px,-3px);z-index:-1}.hierarchy-shell.stacks.depth-3:after,.hierarchy-shell.stacks.depth-4:after{transform:translate(6px,-6px);z-index:-2}.hierarchy-shell.stacks.depth-3 .hierarchy-card,.hierarchy-shell.stacks.depth-4 .hierarchy-card{border-left:3px solid var(--structure)}
.hierarchy-breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:22px}.hierarchy-breadcrumb>.icon{width:13px;height:13px;color:var(--ink-soft)}.hierarchy-breadcrumb .text-btn{font-size:11px}.hierarchy-breadcrumb [aria-current=page]{color:var(--ink-soft)}.hierarchy-detail-heading{display:flex;align-items:center;gap:14px;margin:0 0 20px}.hierarchy-detail-heading>.structure-symbol{transform:scale(1.5);margin:0 7px;color:var(--violet)}.hierarchy-detail-heading h2{margin:4px 0!important}.hierarchy-detail-heading p{font-size:11px;color:var(--ink-soft);margin:0}.detail-achievement{margin-left:auto;padding:7px 10px;font-size:11px;border:1px solid color-mix(in srgb,var(--good) 30%,var(--line));border-radius:8px;color:var(--good);background:color-mix(in srgb,var(--good) 6%,var(--surface))}.hierarchy-detail-grid{display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 5px}.hierarchy-detail-grid .hierarchy-card{height:auto;min-height:112px}.hierarchy-detail-grid .topic-top>b{font-size:13px}.hierarchy-detail-grid .topic-count{font-size:21px}.hierarchy-detail-grid .topic-bottom{font-size:10px}.hierarchy-detail-grid .hierarchy-meta{font-size:10px}.hierarchy-detail-grid .card-marks i{width:6px;height:6px}
.card-spec-list{padding-left:22px}.card-spec-list li{font-size:13px;line-height:1.6;margin:12px 0}
@media(min-width:1251px) and (max-height:820px){.card-variant-toolbar{margin-top:9px}.card-variant-note{margin-top:5px}.hierarchy-shell .hierarchy-card{min-height:96px}.packed-cards{gap:13px}.packed-direction{margin-bottom:8px}.packed-column>h4{height:30px;margin-bottom:8px}.hierarchy-key{margin-top:9px;padding-top:8px}}
@media(max-width:1100px){.packed-map{min-width:880px}.card-variant-toolbar{gap:7px;align-items:flex-start}.packed-direction>span{display:none}.hierarchy-key .completion-key{margin-left:0}}
@media(max-width:600px){.card-variant-picker{display:flex;flex:1}.card-variant-picker button{font-size:10px;padding:6px 7px}.card-variant-toolbar{align-items:flex-start}.card-variant-note{font-size:9px}.packed-direction{font-size:9px}.packed-scroll:after{content:'Гортайте колонки вбік →';display:block;font-size:9px;color:var(--ink-soft);padding-top:9px}.card-spec-list li{font-size:12px}.card-variant-toolbar>.text-btn{padding:6px 0}.card-variant-toolbar>.text-btn .icon{display:none}.hierarchy-key{gap:7px;font-size:8px}.hierarchy-key .completion-key{width:100%}.hierarchy-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.hierarchy-detail-grid .hierarchy-card{height:auto;min-height:112px}.hierarchy-detail-heading{flex-wrap:wrap}.detail-achievement{margin-left:0}.hierarchy-detail-grid .topic-top>b{font-size:11px}}



/* D348: єдиний масштаб знань і колір прогресу на кожному рівні вкладення. */
:root {
  --map-known:#8bb338; --map-learning:#efca43; --map-unknown:#e99063;
  --map-fill-known:color-mix(in srgb,var(--map-known) 45%,var(--surface));
  --map-fill-learning:color-mix(in srgb,var(--map-learning) 40%,var(--surface));
  --map-fill-unknown:color-mix(in srgb,var(--map-unknown) 36%,var(--surface));
  --map-fill-unseen:color-mix(in srgb,var(--ink-soft) 9%,var(--surface));
  --map-positive-ink:#245c31; --map-learning-ink:#776013; --map-unknown-ink:#8b4516;
}
:root[data-theme="dark"] {
  --map-fill-known:color-mix(in srgb,var(--map-known) 27%,var(--surface));
  --map-fill-learning:color-mix(in srgb,var(--map-learning) 26%,var(--surface));
  --map-fill-unknown:color-mix(in srgb,var(--map-unknown) 28%,var(--surface));
  --map-positive-ink:#a1edbb; --map-learning-ink:#ffe393; --map-unknown-ink:#ffd09c;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --map-fill-known:color-mix(in srgb,var(--map-known) 27%,var(--surface));
  --map-fill-learning:color-mix(in srgb,var(--map-learning) 26%,var(--surface));
  --map-fill-unknown:color-mix(in srgb,var(--map-unknown) 28%,var(--surface));
  --map-positive-ink:#a1edbb; --map-learning-ink:#ffe393; --map-unknown-ink:#ffd09c;
}}
.path-archive,.archive-unit,.archive-stage-list>button {
  --knowledge-fill:linear-gradient(90deg,
    var(--map-fill-known) 0 var(--known-end),
    var(--map-fill-learning) var(--known-end) var(--learning-end),
    var(--map-fill-unknown) var(--learning-end) var(--unknown-end),
    var(--map-fill-unseen) var(--unknown-end) 100%);
}
.packed-map{min-width:900px}
.hierarchy-shell .topic-count{color:var(--ink)}
.hierarchy-shell .topic-bottom{margin-top:auto}
.hierarchy-shell .positive,.hierarchy-shell .completed-label,.hierarchy-shell .completion-tick{color:var(--map-positive-ink)}
.hierarchy-shell .warning{color:var(--map-learning-ink)}
.hierarchy-shell .branch-stack{gap:0}
.branch-stack .unseen{background:repeating-linear-gradient(135deg,transparent 0 2px,color-mix(in srgb,var(--ink-soft) 30%,var(--surface)) 2px 3px)}
.knowledge-palette .branch-stack .known{background:var(--map-known)}
.knowledge-palette .branch-stack .learning{background:var(--map-learning)}
.knowledge-palette .branch-stack .unknown{background:var(--map-unknown)}
.knowledge-volume{display:grid;grid-template-columns:repeat(2,max-content);gap:3px 6px;align-content:start;align-self:flex-start;margin:3px 0;line-height:0}
.knowledge-bank{display:flex;gap:2px}
.knowledge-unit{position:relative;display:inline-block;flex:0 0 9px;width:9px;height:9px;border-radius:2px;border:1px solid transparent;box-sizing:border-box}
.knowledge-unit.known{background:var(--map-known);border-color:color-mix(in srgb,var(--map-known) 85%,var(--ink))}
.knowledge-unit.learning{background:var(--map-learning);border-color:color-mix(in srgb,var(--map-learning) 76%,var(--ink))}
.knowledge-unit.unknown{background:var(--map-unknown);border-color:color-mix(in srgb,var(--map-unknown) 80%,var(--ink))}
.knowledge-unit.unknown:after{content:'';position:absolute;inset:3px 1px auto;height:1px;background:var(--map-unknown-ink);transform:rotate(-45deg)}
.knowledge-unit.unseen{background:transparent;border:1px dashed var(--ink-soft)}

.colour-volume-key{display:flex;flex-wrap:wrap;align-items:center;gap:7px 13px;color:var(--ink-soft);font-size:9px;line-height:1.4;margin:10px 0 0}
.colour-volume-key>span{display:inline-flex;align-items:center;gap:5px}.colour-volume-key>span>i{display:inline-block;width:8px;height:8px;border-radius:2px}
.colour-volume-key .unit-key{font-weight:650;color:var(--ink)}
.colour-volume-key .known{background:var(--map-known)}.colour-volume-key .learning{background:var(--map-learning)}.colour-volume-key .unknown{background:var(--map-unknown)}.colour-volume-key .unseen{border:1px dashed var(--ink-soft);background:var(--map-fill-unseen)}
.colour-volume-key .count-key{margin-left:auto;font-size:8px}
@media(max-width:600px){.colour-volume-key{font-size:8px;gap:7px 10px}.colour-volume-key .unit-key{width:100%}.colour-volume-key .count-key{margin-left:0}}

/* Палітра локальна для карток, їхніх подробиць і легенди. Шлях не перебудовується. */
.knowledge-palette {
  --map-known:#91b744; --map-learning:#e9c33e; --map-unknown:#df9678;
  --palette-tint-known:#a6c962; --palette-tint-learning:#f2ce54; --palette-tint-unknown:#e8a47e;
  --palette-known-light:14%; --palette-learning-light:21%; --palette-unknown-light:18%;
  --palette-known-dark:22%; --palette-learning-dark:25%; --palette-unknown-dark:23%;
  --map-fill-known:color-mix(in srgb,var(--palette-tint-known) var(--palette-known-light),var(--surface));
  --map-fill-learning:color-mix(in srgb,var(--palette-tint-learning) var(--palette-learning-light),var(--surface));
  --map-fill-unknown:color-mix(in srgb,var(--palette-tint-unknown) var(--palette-unknown-light),var(--surface));
}
/* Прийнята «Виразніша», колишня 13Г. */
.palette-defined {
  --map-known:#8fb43f; --map-learning:#eaca35; --map-unknown:#dc9270;
  --palette-tint-learning:#f2d34a;
  --palette-known-light:18%; --palette-learning-light:25%; --palette-unknown-light:21%;
  --palette-known-dark:25%; --palette-learning-dark:28%; --palette-unknown-dark:26%;
}
.knowledge-palette{--map-positive-ink:#1c4628;--map-learning-ink:#776013;--map-unknown-ink:#77222b}
:root[data-theme="dark"] .knowledge-palette {
  --map-fill-known:color-mix(in srgb,var(--palette-tint-known,var(--map-known)) var(--palette-known-dark,27%),var(--surface));
  --map-fill-learning:color-mix(in srgb,var(--palette-tint-learning,var(--map-learning)) var(--palette-learning-dark,26%),var(--surface));
  --map-fill-unknown:color-mix(in srgb,var(--palette-tint-unknown,var(--map-unknown)) var(--palette-unknown-dark,28%),var(--surface));
}
:root[data-theme="dark"] .knowledge-palette{--map-positive-ink:#c0f6d1;--map-learning-ink:#ffe393;--map-unknown-ink:#ffd0d5}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .knowledge-palette {
  --map-fill-known:color-mix(in srgb,var(--palette-tint-known,var(--map-known)) var(--palette-known-dark,27%),var(--surface));
  --map-fill-learning:color-mix(in srgb,var(--palette-tint-learning,var(--map-learning)) var(--palette-learning-dark,26%),var(--surface));
  --map-fill-unknown:color-mix(in srgb,var(--palette-tint-unknown,var(--map-unknown)) var(--palette-unknown-dark,28%),var(--surface));
}:root:not([data-theme="light"]) .knowledge-palette{--map-positive-ink:#c0f6d1;--map-learning-ink:#ffe393;--map-unknown-ink:#ffd0d5}}
.hierarchy-shell.knowledge-palette{--map-detail-ink:color-mix(in srgb,var(--ink) 78%,var(--ink-soft));--map-active-ink:color-mix(in srgb,var(--violet) 50%,var(--ink))}
.hierarchy-card .hierarchy-meta>span:not(.structure-symbol),.hierarchy-card .topic-count small,.hierarchy-card .topic-bottom>span:first-child:not(.completed-label){color:var(--map-detail-ink)}
.hierarchy-card.in-work .topic-bottom>span:first-child:not(.completed-label){color:var(--map-active-ink)}
.palette-preview{display:inline-block;flex:none;width:27px;height:9px;border-radius:3px;background:linear-gradient(90deg,var(--map-known),var(--map-learning) 50%,var(--map-unknown));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.card-variant-note{min-height:30px}
@media(max-width:600px){.card-variant-note{min-height:45px}.card-variant-picker button{font-size:9px;padding:6px;gap:4px}.palette-preview{width:15px;height:8px}}

/* Рухоме вікно: абсолютні номери етапів, накопичення завжди ліворуч. */
.path-navigation{display:flex;align-items:center;gap:12px;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}
.path-caption{display:flex;flex-direction:column;gap:3px;flex:none}.path-caption>b{font-size:11px}.path-caption>span{font-size:8px;color:var(--ink-soft)}
.path-stages{display:flex;align-items:center;gap:3px;flex:1;overflow-x:auto;padding:3px 2px;min-width:0}
.path-stages>button{flex:none;position:relative;border:1px solid var(--line);border-radius:5px;width:25px;height:25px;background:var(--surface);color:var(--ink-soft);font-size:10px}
.path-stages>button.complete{background:var(--map-fill-known);border-color:var(--map-known);color:var(--map-positive-ink)}
.path-stages>button.archived{border-style:dashed}.path-stages>button[aria-pressed=true]{outline:2px solid var(--violet);outline-offset:0;color:var(--ink)}
.path-stages>button>i{position:absolute;right:1px;top:1px;width:4px;height:4px;border-radius:50%;background:var(--map-unknown)}
.path-controls{display:flex;align-items:center;gap:4px;flex:none}.path-controls>button{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;min-width:28px;height:28px;padding:3px 8px;background:var(--surface);color:var(--violet);font-size:9px}.path-controls .icon{width:13px;height:13px}.path-controls>button:disabled{opacity:.4;cursor:default}
.path-window-note{font-size:9px;color:var(--ink-soft);margin:8px 0 0}
.path-archive{position:relative;border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));border-left:4px solid var(--map-known);border-radius:10px;background:var(--knowledge-fill);color:var(--ink);overflow:hidden}
.archive-open{display:flex;flex-direction:column;gap:10px;width:100%;padding:12px 8px;border:0;background:none;color:inherit;text-align:left}
.archive-title{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:650}.archive-title>.icon{width:14px;height:14px;flex:none}
.archive-count{display:flex;flex-direction:column;gap:3px}.archive-count>strong{font:800 37px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-1px}.archive-count>span{font-size:11px}
.archive-topics{font-size:9px;color:var(--ink-soft)}.archive-scale{font-size:8px;line-height:1.4;color:var(--ink-soft)}.archive-volume{margin:0}.archive-unit{background:var(--knowledge-fill);border:1px solid color-mix(in srgb,var(--map-known) 70%,var(--ink));border-radius:2px}
.archive-open>.branch-stack{height:4px;gap:0}.archive-reveal{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:650}.archive-reveal>.icon{width:13px;height:13px}
.archive-attention{display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:100%;padding:9px 10px;text-align:left;border:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--map-unknown) 18%,var(--surface));color:var(--map-unknown-ink);font-size:10px}.archive-attention>small{font-size:8px;line-height:1.4}.archive-attention>.icon{margin-left:auto;width:13px;height:13px}
.archive-complete{display:block;font-size:8px;line-height:1.4;padding:0 10px 10px;color:var(--map-positive-ink)}
.archive-stage-list{display:grid;gap:10px;margin:20px 0}.archive-stage-list>button{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--knowledge-fill);color:var(--ink);text-align:left}.archive-stage-list>button>b{font-size:14px}.archive-stage-list>button>span{font-size:11px}.archive-stage-list>button>strong{font-size:21px;margin-left:auto}.archive-stage-list small{font-size:12px;font-weight:450}.archive-stage-list .icon{width:16px;height:16px;flex:none}
@media(max-width:1100px){.path-navigation{flex-wrap:wrap}.path-stages{min-width:160px}.path-caption{flex:1}.path-controls{margin-left:auto}}
@media(max-width:600px){.path-navigation{gap:7px}.path-caption{flex-basis:100%}.path-stages{order:2;flex-basis:100%}.path-controls{margin-left:0}.path-controls>button{font-size:9px}.path-window-note{font-size:8px}.archive-stage-list>button{flex-wrap:wrap;gap:8px}.archive-stage-list>button>span:last-of-type{width:100%}}

.archive-unit{--knowledge-fill:linear-gradient(90deg,var(--map-known) 0 var(--known-end),var(--map-learning) var(--known-end) var(--learning-end),var(--map-unknown) var(--learning-end) var(--unknown-end),var(--map-fill-unseen) var(--unknown-end) 100%)}

.archive-attention.learning{background:color-mix(in srgb,var(--map-learning) 18%,var(--surface));color:var(--map-learning-ink)}
.archive-attention.unseen{background:var(--map-fill-unseen);color:var(--ink-soft)}

/* Узгоджений читабельний масштаб; щільність не зменшує текст на нижчих екранах. */
body{font-size:16px;line-height:1.5}
.demo-header{min-height:78px}.demo-label,.brand small{font-size:13px}
.sales-intro{max-width:1680px;padding:28px 0}.intro-copy h1{font-size:36px}.intro-copy p{font-size:16px}
.value-loop>button{font-size:14px}.loop-symbol{width:46px;height:46px}.loop-symbol .icon{width:24px;height:24px}
.workspace{max-width:1680px;grid-template-columns:200px minmax(0,1fr)}.cabinet{padding:26px}.children-rail{padding:25px 12px}
.rail-title h2{font-size:22px}.search input{font-size:14px}.search{margin:20px 8px}.child{padding:16px 10px;gap:10px}.child b{font-size:17px}.child small{font-size:13px}.avatar{width:40px;height:40px;font-size:21px}.avatar.large{width:56px;height:56px;font-size:28px}.rail-bottom .text-btn{font-size:14px}
.child-heading h2{font-size:34px}.child-heading p{font-size:14px}.heading-tools{gap:12px}.period button{font-size:14px;min-height:36px;padding:6px 13px}.period-line,.period-line .text-btn{font-size:13px}.period-line{margin:17px 0}
.btn{font-size:15px;min-height:44px}.text-btn{font-size:14px}.icon-btn.small{width:36px;height:36px}.icon-btn.small .icon{width:18px;height:18px}
.metrics{gap:14px;margin-bottom:20px;grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding:16px}.metric-label{font-size:14px;line-height:1.3}.metric-label .icon{width:16px;height:16px}.metric-main{min-height:65px}.metric strong{font-size:42px}.metric strong span{font-size:15px}.metric small{font-size:13px;line-height:1.4}.metric-changes{gap:12px}.metric-changes>button{border:0;background:none;text-align:left;padding:8px 0;color:var(--ink)}.metric-changes strong{font-size:34px}.metric-changes small{display:flex;align-items:center;gap:2px}.metric-changes small .icon{width:12px;height:12px}.metric-changes>button:hover{text-decoration:underline}.mini-days{max-width:64px}.mini-days i{width:7px;height:19px}
.profile-shortcuts{gap:10px;margin:18px 0 22px;flex-wrap:wrap}.profile-shortcuts>button{padding:12px 14px;gap:8px}.profile-shortcuts b{font-size:15px}.profile-shortcuts span{font-size:13px}.profile-shortcuts .icon{width:19px;height:19px}
.personal-map{padding:22px}.section-heading h3{font-size:24px}.small-caption,.personal-map .small-caption{font-size:14px;line-height:1.5}.personal-map-toolbar{margin:20px 0 14px;gap:15px;flex-wrap:wrap}.map-filters{gap:6px}.map-filters button{font-size:14px;padding:8px 11px}.map-filters button span{font-size:13px}.knowledge-search input{font-size:14px;width:150px}.map-view-caption{font-size:14px}.map-bottom{font-size:13px;margin-top:20px}.map-bottom .text-btn{font-size:14px}
.path-navigation{gap:12px;margin:20px 0 14px;flex-wrap:wrap}.path-caption>b{font-size:16px}.path-caption>span,.path-window-note{font-size:13px}.path-stages button{min-width:34px;min-height:34px;font-size:14px}.path-controls button{font-size:13px;min-height:34px}.packed-direction{font-size:14px;line-height:1.5;margin:16px 0}.packed-direction>span{display:none}
.packed-map{min-width:1040px;gap:18px}.packed-column>h4{height:auto;min-height:48px;font-size:14px;line-height:1.3;margin-bottom:14px;align-items:flex-start}.packed-column h4>b{font-size:14px;padding:5px 7px}.packed-column h4 small{font-size:12px}.packed-cards{gap:20px}
.hierarchy-shell .hierarchy-card{padding:12px;min-height:146px;gap:10px;border-radius:12px}.hierarchy-shell .topic-top>b{font-size:16px;line-height:1.3;overflow-wrap:normal;hyphens:auto}.hierarchy-shell .topic-count{font-size:24px}.hierarchy-shell .topic-count small{font-size:14px}.hierarchy-meta{font-size:12px;min-height:18px;line-height:1.3}.hierarchy-shell .topic-bottom{font-size:12px;min-height:18px;gap:5px;line-height:1.4}.hierarchy-shell .branch-delta{font-size:13px}.hierarchy-shell .branch-stack{height:6px}.knowledge-volume{gap:4px 7px;margin:4px 0}
.hierarchy-key,.colour-volume-key{font-size:12px;gap:10px 16px;line-height:1.5;margin-top:18px}.hierarchy-key .completion-key{margin-left:0}.colour-volume-key .count-key{font-size:12px;margin-left:0}.hierarchy-key .structure-symbol{transform:scale(1.1)}
.archive-title{font-size:14px}.archive-count strong{font-size:42px}.archive-count>span,.archive-topics,.archive-reveal{font-size:14px}.archive-scale,.archive-complete,.archive-attention b,.archive-attention small{font-size:12px;line-height:1.5}.archive-open{padding:16px 12px}.archive-stage-list>button{font-size:15px}
.profile-overview{gap:24px;margin:26px 0}.profile-module{padding:22px}.module-heading{margin-bottom:20px}.module-heading h3{font-size:23px}.module-heading p{font-size:14px}.construction-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.construction-tile,.stat-tile{padding:14px;min-height:145px;gap:10px}.construction-tile>b,.stat-name>b{font-size:15px;line-height:1.4}.construction-state,.construction-length{font-size:12px}.construction-tile .phrase-token{font-size:13px;padding:3px 5px}.stat-value strong{font-size:32px}.stat-value strong small{font-size:14px}.stat-caption,.stat-stale{font-size:13px;line-height:1.4}.module-foot{font-size:12px;flex-wrap:wrap;line-height:1.5}.stat-name>.icon{width:19px;height:19px}
.daily-progress{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}.daily-progress .growth-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.growth-heading h4{font-size:22px;margin:0}.growth-heading p{font-size:16px;margin:8px 0 0;color:var(--ink-soft)}.growth-heading p strong{font-size:30px;color:var(--map-positive-ink);margin-right:5px}.growth-scroll{overflow:auto}.daily-plot{min-width:calc(var(--days)*40px)}.daily-progress .growth-days{display:grid;grid-template-columns:repeat(var(--days),minmax(0,1fr));align-items:end;gap:5px}.daily-progress .growth-days button{min-height:128px;padding:10px 5px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;border:1px solid transparent;border-radius:9px;background:none;color:var(--ink)}.daily-progress .growth-days button[aria-pressed=true]{background:var(--violet-soft);border-color:var(--violet)}.daily-progress .growth-days button:hover{border-color:var(--violet)}.daily-progress .growth-daily-count{font-size:16px;line-height:1.4}.daily-progress .growth-daily-bar{display:block;flex:none;width:32px;max-width:80%;height:var(--daily);min-height:3px;border-radius:6px 6px 2px 2px;background:var(--map-known)}.daily-progress .growth-days small{font-size:14px;line-height:1.4}.growth-words{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;font-size:14px;color:var(--ink-soft)}.growth-words button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--surface);color:var(--ink);font-size:14px}.growth-words .icon{width:14px;height:14px;color:var(--violet)}.daily-progress .growth-foot{font-size:13px;line-height:1.5;gap:12px;flex-wrap:wrap;margin-top:18px}
.action-strip b{font-size:19px}.action-strip p,.cabinet-end{font-size:14px}.detail-dialog{font-size:16px}.dialog-sub,.dimension-note,.history-foot,.strip-legend,.history-columns{font-size:14px;line-height:1.6}.about-list p{font-size:15px}.phrase-example .phrase-token{font-size:16px}.group-overview span{font-size:14px}.knowledge-label b{font-size:16px}.knowledge-row,.measure-table{font-size:14px}.knowledge-row small{font-size:12px}.scope-tabs button{font-size:14px}.measure-history{overflow:auto}.measure-columns{min-width:450px}.measure-columns small,.measure-columns span{font-size:13px}
@media(min-width:1800px){.construction-grid,.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1250px){.workspace{grid-template-columns:180px minmax(0,1fr)}.cabinet{padding:20px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-overview{grid-template-columns:1fr}.construction-grid,.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.value-loop{display:none}.profile-shortcuts span{display:none}}
@media(max-width:800px){.workspace{display:block}.children-rail{padding:18px;border-right:0;border-bottom:1px solid var(--line)}#children{display:flex;overflow:auto;gap:8px}.child{min-width:160px}.rail-title{margin-bottom:12px}.search{margin:10px 6px}.rail-bottom{display:none}.cabinet{padding:18px}.sales-intro{padding:24px 0}.intro-copy h1{font-size:29px}.child-heading{flex-wrap:wrap}.heading-tools{margin-top:10px}.profile-shortcuts>button{padding:10px}.profile-shortcuts b{font-size:14px}.personal-map{padding:17px}.section-heading{gap:12px;flex-wrap:wrap}.personal-map .map-heading-actions{margin-left:0}.profile-overview{grid-template-columns:1fr}.profile-module{padding:18px}.construction-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.workspace,.sales-intro{width:calc(100% - 24px)}.demo-label{font-size:12px}.demo-header{padding:12px}.brand{font-size:22px}.header-actions{gap:5px}.metric{padding:13px}.metric-label{font-size:14px}.metric strong{font-size:36px}.metric strong span{font-size:13px}.metric small{font-size:12px}.metric-changes strong{font-size:28px}.metric-main{min-height:61px}.metrics{gap:10px}.period-line{flex-wrap:wrap}.child-heading h2{font-size:30px}.child-heading p{font-size:14px}.heading-tools{width:100%;justify-content:space-between}.map-filters button{font-size:13px;padding:7px 9px}.map-filters{flex-wrap:wrap}.map-view-controls{width:100%}.knowledge-search{width:100%}.knowledge-search input{width:100%}.map-bottom{flex-wrap:wrap;gap:8px}.profile-shortcuts{gap:7px}.profile-shortcuts>button:first-child{display:none}.profile-shortcuts>button{flex:1}.profile-shortcuts>button>.icon:last-child{display:none}.construction-tile,.stat-tile{padding:11px}.construction-state,.construction-length{font-size:11px}.construction-tile>b,.stat-name>b{font-size:14px}.module-heading h3{font-size:21px}.module-heading p{font-size:13px}.hierarchy-key,.colour-volume-key{font-size:12px}.packed-scroll:after{font-size:13px}.path-caption>span{font-size:12px}.path-controls{flex-wrap:wrap}.daily-progress .growth-days small{font-size:13px}.growth-heading h4{font-size:21px}.growth-heading p{font-size:15px}.daily-progress .growth-foot{font-size:13px}.action-strip{flex-wrap:wrap}.dialog-sub,.dimension-note,.strip-legend,.history-foot{font-size:14px}.hierarchy-detail-grid{grid-template-columns:1fr}.hierarchy-detail-grid .topic-top>b{font-size:16px}}

.daily-progress .growth-daily-bar.is-empty{background:var(--line)}.growth-asof{font-size:14px}
@media(max-width:800px){#children .child{min-width:125px;flex:0 0 125px;padding:12px 8px;display:flex;flex-direction:column;gap:7px}#children .avatar{width:34px;height:34px;font-size:19px}#children .child b{font-size:16px}.children-rail{padding:12px}.growth-words button{font-size:14px}}

/* Повна ширина для назви: великі літери не розривають слова заради лічильника. */
.hierarchy-meta .topic-count{margin-left:auto;white-space:nowrap;font-size:22px;flex:none}.hierarchy-meta .topic-count small{font-size:13px}.hierarchy-meta>.icon{display:none}.hierarchy-meta>span:nth-child(2){min-width:0;flex:1}.hierarchy-shell .topic-top>b{hyphens:none;overflow-wrap:normal}.hierarchy-shell .topic-top{min-height:24px;width:100%}
.word-name b{font-size:16px;line-height:1.4}.word-name small,.row-state small,.group-summary,.strip-dates{font-size:12px;line-height:1.5}.group-title{font-size:15px}.row-state .state{font-size:12px}.knowledge-row{min-height:76px;padding:12px 0}.history-columns,.knowledge-row{grid-template-columns:165px minmax(100px,1fr) 125px;gap:12px}.history-bar{height:35px}.history-dialog .dialog-sub{font-size:15px}
@media(max-width:600px){.history-columns,.knowledge-row{grid-template-columns:minmax(0,1fr) 95px;gap:10px}.knowledge-row .row-history{grid-column:1/-1;grid-row:2}.knowledge-row .row-state{grid-column:2;grid-row:1}.word-name b{font-size:15px}.word-name small,.row-state small{font-size:12px}.group-title{font-size:14px}}

.history-dialog .word-name b,.group-dialog .word-name b{font-size:16px}.history-dialog .word-name small,.group-dialog .word-name small,.row-dates{font-size:12px;line-height:1.5}.history-dialog .history-columns,.history-dialog .knowledge-row{grid-template-columns:165px minmax(100px,1fr) 125px}
@media(max-width:600px){.history-dialog .history-columns,.history-dialog .knowledge-row{grid-template-columns:minmax(0,1fr) 95px}.history-columns{display:none}.knowledge-row .row-history{grid-column:1/-1;grid-row:2}.knowledge-row .row-state{grid-column:2;grid-row:1}.knowledge-row .row-state small{font-size:12px}}

/* Послідовність відповідей: спільний масштаб у темі, більше місця історії. */
.detail-dialog.group-dialog,.detail-dialog.history-dialog{width:min(1180px,calc(100vw - 40px))}
.group-dialog .history-columns,.group-dialog .knowledge-row,.history-dialog .history-columns,.history-dialog .knowledge-row{grid-template-columns:190px minmax(120px,1fr) 135px;gap:16px}
.group-dialog .knowledge-row,.history-dialog .knowledge-row{min-height:78px;padding:10px 0}
.knowledge-row .word-name{padding:10px 9px;border-radius:10px;min-height:57px}.history-bar{height:40px}.history-bar.large{height:58px}.row-dates{margin-top:3px;display:block;font-size:11px;color:var(--ink-soft)}
@media(max-width:600px){.detail-dialog.group-dialog,.detail-dialog.history-dialog{width:calc(100vw - 16px)}.group-dialog .knowledge-row,.history-dialog .knowledge-row{grid-template-columns:minmax(0,1fr) 100px;gap:8px}.knowledge-row .row-history,.detail-strip{overflow-x:auto}.knowledge-row .history-bar,.detail-strip .history-bar{min-width:560px}.row-history .row-dates{position:sticky;left:0}.group-dialog .group-overview{gap:7px}.group-dialog .group-overview>div{padding:10px}.group-dialog .group-overview strong{font-size:23px}.group-dialog .group-overview span{font-size:12px}}

/* Легенда історій читається разом із новими назвами станів. */
.strip-legend .state{font-size:12px;padding:4px 7px}.strip-legend{flex-wrap:wrap}

/* Дві окремі композиції. Карта й палітра спільні; дрібніші екрани не зменшують шрифт. */
.layout-bar{display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 24px;background:var(--violet-soft);border-bottom:1px solid var(--line)}
.layout-label{font-size:14px;color:var(--ink-soft)}
#layout-navigation{display:flex;gap:6px;min-width:0;overflow:auto}
#layout-navigation a{display:flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid transparent;border-radius:10px;text-decoration:none;color:var(--ink);font-size:15px;white-space:nowrap;font-weight:600}
#layout-navigation a>span{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
#layout-navigation a[aria-current=page]{background:var(--surface);border-color:var(--violet);color:var(--violet);box-shadow:0 2px 5px #291c6c0a}
#layout-navigation a:hover{background:var(--surface)}
.demo-header{min-height:66px;padding:10px max(24px,calc((100vw - 1760px)/2));gap:20px}
.demo-header .brand{font-size:22px}.brand small{font-size:12px}.brand img{width:34px;height:34px}
.demo-header .btn{min-height:40px}.demo-header .demo-label{font-size:13px}.header-actions{gap:20px}
.guide-link{text-decoration:none;white-space:nowrap}
.workspace{display:block;width:calc(100% - 48px);max-width:1760px;margin:22px auto 0;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
.children-rail{display:grid;grid-template-columns:auto minmax(0,1fr) 155px;align-items:center;gap:20px;padding:0 0 20px;border:0;background:transparent;position:static;min-height:0}
.rail-title{gap:7px;margin:0}.rail-title h2{font-size:17px;margin:0}.rail-title .quantity{display:none}
.children-rail .search{grid-column:3;grid-row:1;margin:0;padding:9px 0;width:155px;border-bottom:1px solid var(--line)}
.search input{width:100%;font-size:14px;min-width:0}
#children{grid-column:2;grid-row:1;display:flex;gap:6px;overflow-x:auto;padding:2px;scrollbar-width:thin}
#children .child{flex:1 0 115px;display:flex;flex-direction:row;align-items:center;gap:9px;min-width:115px;padding:11px 10px;margin:0;border-radius:13px;text-align:left}
#children .child b{font-size:17px;line-height:1.3}#children .child small{font-size:13px;line-height:1.5;white-space:nowrap}
#children .avatar{width:36px;height:36px;font-size:20px}
#no-search{grid-column:2;margin:0}
.cabinet{padding:0;background:transparent;min-width:0}
.cabinet-toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 20px;padding:0 2px;color:var(--ink-soft);font-size:14px}
.last-play{display:inline-flex;align-items:center;gap:8px;margin-right:auto}.last-play>.icon{width:18px;height:18px}
.cabinet-toolbar .period{padding:3px}.period-dates{font-size:14px}.parent-button{padding:7px 0}
.cabinet-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.personal-map{margin:0!important;min-width:0;padding:24px;border-radius:22px}
.personal-map .section-heading{align-items:center;margin-bottom:0;gap:20px}
.personal-map .section-heading h2{font-family:var(--display);font-size:28px;line-height:1.2;margin:0 0 8px;padding:0;border:0}
.personal-map .small-caption{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;font-size:14px;margin:0}
.map-total{color:var(--ink)}.map-total>b{font-size:21px;color:var(--map-positive-ink)}
.personal-map .map-heading-actions{margin-left:auto;gap:10px}.personal-map.is-card-variant .personal-map-toolbar{margin:22px 0 8px}
.map-filters button{padding:7px 12px}.path-navigation{margin:12px 0}.packed-direction{margin:12px 0}
.personal-map .map-bottom{margin-top:16px}
#dimension-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;min-width:0}
.compact-profile{margin:0!important;min-width:0;border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--surface)}
.compact-heading{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.compact-heading h3{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:22px;line-height:1.3;margin:0}
.compact-heading h3>.icon{color:var(--violet);width:22px;height:22px}
.compact-heading .small{flex:none}.compact-heading .text-btn{white-space:nowrap}
.compact-key{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:20px}
.compact-key>span{display:inline-flex;align-items:center;gap:6px}.compact-key .confirmed{color:var(--map-positive-ink)}
.phrase-ladder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:relative}
.phrase-step{min-width:0;position:relative}
.phrase-step-length{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;margin:0 auto 14px;border-radius:14px;font-size:24px;font-weight:650;line-height:1;background:var(--sunk);color:var(--ink)}
.phrase-step-length small{font-size:11px;font-weight:400;margin-top:3px;color:var(--ink-soft)}
.phrase-step:not(:last-child):after{content:'→';position:absolute;top:10px;right:-9px;font-size:17px;color:var(--ink-soft)}
.phrase-step>div{display:flex;flex-direction:column;gap:8px}
.phrase-chip{display:flex;gap:5px;align-items:flex-start;min-height:55px;width:100%;padding:9px 7px;text-align:left;font-size:14px;line-height:1.35;border:1px solid var(--line);border-radius:9px;background:var(--sunk);color:var(--ink-soft)}
.phrase-proof{flex:none;font-size:16px;line-height:1.2}
.phrase-chip.confirmed{color:var(--map-positive-ink);background:color-mix(in srgb,var(--map-known) 13%,var(--surface));border-color:color-mix(in srgb,var(--map-known) 50%,var(--line))}
.phrase-chip.exploring{color:var(--ink);background:color-mix(in srgb,var(--map-learning) 16%,var(--surface));border-color:color-mix(in srgb,var(--map-learning) 50%,var(--line))}
.phrase-chip:hover{border-color:var(--violet)}
.trait-axis{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-soft);margin:0 0 14px}
.trait-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px}
.trait-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:6px 8px;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;min-width:0}
.trait-name{display:flex;gap:7px;align-items:center;font-size:14px;line-height:1.4;min-height:20px}.trait-name .icon{width:17px;height:17px;color:var(--ink-soft)}
.trait-row strong{font-size:16px;font-weight:650;line-height:1.4}.trait-row:hover .trait-name{text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:3px}
.trait-change{font-size:12px;line-height:1.4;color:var(--ink-soft);grid-column:1/-1}
.trait-track{grid-column:1/-1;display:flex;position:relative;gap:3px;height:12px;margin:3px 0 2px;isolation:isolate}
.trait-track.segments>i{flex:1;height:100%;border-radius:3px;background:var(--line)}
.trait-track.segments>i.reached{--segment-colour:color-mix(in srgb,var(--map-unknown) calc(100% - var(--segment)*11.11%),var(--map-known));background:linear-gradient(90deg,var(--segment-colour) var(--fill),var(--line) var(--fill))}
.trait-track.segments>i:nth-child(4).reached,.trait-track.segments>i:nth-child(5).reached,.trait-track.segments>i:nth-child(6).reached{--segment-colour:var(--map-learning)}
.trait-before{position:absolute;left:clamp(2px,var(--before),calc(100% - 2px));top:-3px;height:18px;width:3px;border:1px solid var(--ink);background:var(--surface);border-radius:2px;transform:translateX(-50%);z-index:2}
.before-key{display:inline-block;width:3px;height:12px;border:1px solid var(--ink);border-radius:2px}
.trait-track.empty>i{background:var(--line)!important;opacity:.55}.trait-row.unseen strong{color:var(--ink-soft)}
.trait-detail-score{padding:20px 0}.trait-detail-score strong{font-size:48px}.trait-detail-score strong small{font-size:20px;color:var(--ink-soft)}.trait-detail-score p{margin:6px 0}
.week-summary{padding:22px 24px;margin:0!important;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.week-summary .compact-heading{margin-bottom:15px}.week-summary h3{font-size:20px}
.week-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.week-facts>button{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:0;border:0;background:none;color:var(--ink);font-size:16px;line-height:1.5}
.week-facts>button>.icon{margin-top:3px;color:var(--ink-soft)}.week-facts>button small{display:block;font-size:14px;color:var(--ink-soft);margin-top:4px;line-height:1.5}
.week-facts>button:hover b{text-decoration:underline;text-decoration-color:var(--violet)}.week-gain b,.week-gain>.icon{color:var(--map-positive-ink)!important}
.action-strip{margin:22px 0;padding:20px 24px;border-radius:18px}.action-strip b{font-size:18px}.action-strip p{margin:5px 0 0}.action-strip .step-symbol{width:40px;height:40px}.cabinet-end{padding:0 4px 6px;align-items:center}
.demo-footer{max-width:1760px;margin:26px auto;font-size:13px;padding:0 24px}
/* Б: одночасно карта та бічний профіль. На вузькому вікні повертаємо повну ширину карти. */
[data-layout=side] .cabinet-layout{grid-template-columns:minmax(0,1fr) 300px;gap:20px}
[data-layout=side] .personal-map{grid-column:1;grid-row:1/3}
[data-layout=side] #dimension-panel{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:18px}
[data-layout=side] #week-panel{grid-column:1/-1}
[data-layout=side] .compact-profile{padding:18px}
[data-layout=side] .compact-heading{margin-bottom:14px;gap:6px}
[data-layout=side] .compact-heading h3{font-size:20px;gap:7px}
[data-layout=side] .compact-heading h3>.icon{display:none}
[data-layout=side] .phrase-ladder{display:flex;flex-direction:column;gap:8px}
[data-layout=side] .phrase-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:center}
[data-layout=side] .phrase-step-length{width:30px;height:36px;font-size:19px;border-radius:9px;margin:0}
[data-layout=side] .phrase-step-length small{display:none}
[data-layout=side] .phrase-step:after{display:none}
[data-layout=side] .phrase-step>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
[data-layout=side] .phrase-step>div>.phrase-chip:only-child{grid-column:1/-1}
[data-layout=side] .phrase-chip{padding:7px;min-height:40px}
[data-layout=side] .trait-rows{grid-template-columns:minmax(0,1fr);gap:18px}
[data-layout=side] .packed-map{min-width:calc(var(--packed-columns)*136px + (var(--packed-columns) - 1)*18px)}
[data-layout=side] .trait-row{grid-template-columns:1fr auto}
[data-layout=side] .compact-key{font-size:12px;margin-top:14px}
/* Окремий маршрут пояснення продукту. */
[data-layout=guide] .children-rail,[data-layout=guide] .mobile-actions{display:none}
[data-layout=guide] .guide-link{display:none}
.guide-intro{max-width:770px;margin:36px auto 42px!important;text-align:center}
.guide-intro h1{font-size:48px;line-height:1.15;margin:14px 0 20px}.guide-intro>p:not(.overline){font-size:20px;line-height:1.6;color:var(--ink-soft);margin:0 0 24px}
.guide-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.guide-steps article{position:relative;border:1px solid var(--line);border-radius:22px;padding:28px;background:var(--surface)}
.guide-number{position:absolute;right:24px;top:21px;font:800 34px var(--display);color:var(--line)}
.guide-symbol{width:64px;height:64px;border-radius:20px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;margin-bottom:24px}.guide-symbol>.icon{width:32px;height:32px}
.guide-steps article:nth-child(2) .guide-symbol{background:color-mix(in srgb,var(--map-learning) 25%,var(--surface));color:var(--ink)}
.guide-steps article:nth-child(3) .guide-symbol{background:color-mix(in srgb,var(--map-known) 20%,var(--surface));color:var(--map-positive-ink)}
.guide-steps h2{font-size:24px;line-height:1.3;margin:0 0 14px;border:0;padding:0}.guide-steps p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 20px}
.guide-pilot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:30px 0!important;padding:30px;border-radius:22px;background:var(--violet-soft)}
.guide-pilot h2{border:0;padding:0;margin:0 0 8px;font-size:28px}.guide-pilot p{font-size:17px;margin:0}
@media(max-width:1100px){[data-layout=side] .cabinet-layout{grid-template-columns:1fr}[data-layout=side] .personal-map{grid-column:1;grid-row:1}[data-layout=side] #dimension-panel{grid-column:1;grid-row:2;grid-template-columns:1fr 1fr}[data-layout=side] .phrase-step>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1350px){.children-rail{grid-template-columns:minmax(0,1fr) 150px;gap:12px}.rail-title{display:none}#children{grid-column:1}.children-rail .search{grid-column:2;width:150px}#children .child{flex:1 0 112px}.layout-label{display:none}.trait-rows{grid-template-columns:repeat(2,minmax(0,1fr))}.phrase-ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}.phrase-step:nth-child(3):after{display:none}.guide-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.demo-header .demo-label{display:none}.header-actions{gap:12px}#dimension-panel,[data-layout=side] #dimension-panel{grid-template-columns:1fr}.trait-rows{grid-template-columns:repeat(3,minmax(0,1fr))}.phrase-ladder{grid-template-columns:repeat(6,minmax(0,1fr))}.phrase-step:nth-child(3):after{display:block}.children-rail{display:block}.children-rail .search{display:none}#children{margin:0;max-width:100%}.cabinet-toolbar{gap:12px}.cabinet-toolbar .period-dates{display:none}}
@media(max-width:700px){.layout-bar{justify-content:flex-start;gap:8px;padding:8px 12px}#layout-navigation a{padding:9px 10px;font-size:14px;gap:6px}.layout-bar>.icon-btn{display:none}.demo-header{padding:12px;gap:8px}.brand small{display:none}.demo-header .btn{font-size:13px;padding:9px 11px}.demo-header .btn>.icon{display:none}.header-actions{gap:8px}.guide-link{font-size:13px}.guide-link>.icon{display:none}.demo-header .icon-btn{width:32px;height:32px}.workspace{width:calc(100% - 24px);margin-top:15px}.children-rail{padding-bottom:15px}#children .child{flex:0 0 128px;flex-direction:row;min-width:128px;padding:10px;gap:8px}#children .child b{font-size:16px}.last-play{width:100%;font-size:14px}.cabinet-toolbar{margin-bottom:16px}.cabinet-toolbar .parent-button{margin-left:auto}.cabinet-layout{gap:16px}.personal-map{padding:17px;border-radius:18px}.personal-map .section-heading h2{font-size:25px}.personal-map .small-caption{gap:4px 12px}.map-total>b{font-size:20px}.personal-map .map-heading-actions{margin-left:0;gap:8px}.personal-map .section-heading{gap:14px}.personal-map.is-card-variant .personal-map-toolbar{margin-top:16px}.map-filters{gap:5px}.map-filters button{padding:7px 8px;font-size:14px}.personal-map-toolbar .map-view-controls{width:100%}.compact-profile{padding:18px;border-radius:18px}.compact-heading h3{font-size:21px}.phrase-ladder{grid-template-columns:repeat(3,minmax(0,1fr))}.phrase-step:nth-child(3):after{display:none}.trait-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.compact-key{font-size:12px}.week-summary{padding:18px}.week-facts{grid-template-columns:1fr;gap:18px}.guide-intro{margin:28px auto!important;text-align:left}.guide-intro h1{font-size:36px}.guide-intro>p:not(.overline){font-size:18px}.guide-steps{grid-template-columns:1fr;gap:16px}.guide-pilot{flex-direction:column;align-items:flex-start;padding:24px}.guide-pilot h2{font-size:25px}.guide-steps article{padding:24px}.demo-footer{padding:0 14px}.action-strip{padding:18px;gap:14px}.cabinet-end{font-size:14px;line-height:1.6;flex-wrap:wrap}.cabinet-end>a{display:none}}

.map-title-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-bottom:7px}.personal-map .map-title-line h2{margin:0}.map-week{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1.5;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--sunk);color:var(--ink-soft)}.map-week>.icon{width:16px;height:16px}.map-week.has-gain{color:var(--map-positive-ink);background:color-mix(in srgb,var(--map-known) 12%,var(--surface));border-color:color-mix(in srgb,var(--map-known) 35%,var(--line))}.map-week:hover{border-color:var(--violet)}
@media(min-width:1680px){[data-layout=side] .cabinet-layout{grid-template-columns:minmax(0,1fr) 320px}}

.map-week[hidden]{display:none}.historical-date{color:var(--violet);font-weight:600}
@media(max-width:450px){.demo-header .brand>span{display:none}.demo-header .brand{flex:none}.header-actions{gap:10px}}

/* Обидва вигляди зберігають звичний список дітей ліворуч. */
@media(min-width:901px){
  :is([data-layout=map],[data-layout=side]) .workspace{display:grid;grid-template-columns:208px minmax(0,1fr);align-items:start;gap:22px}
  :is([data-layout=map],[data-layout=side]) .children-rail{position:sticky;top:20px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:22px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface);max-height:calc(100dvh - 40px);overflow-y:auto}
  :is([data-layout=map],[data-layout=side]) .rail-title{display:flex;justify-content:space-between;align-items:center;padding:0 9px}
  :is([data-layout=map],[data-layout=side]) .rail-title h2{font-size:21px}
  :is([data-layout=map],[data-layout=side]) .rail-title .quantity{display:inline-grid;place-items:center;font-size:14px;min-width:27px;height:27px}
  :is([data-layout=map],[data-layout=side]) .children-rail .search{display:flex;grid-area:auto;width:auto;margin:20px 9px 18px;padding:9px 0}
  :is([data-layout=map],[data-layout=side]) #children{display:flex;flex-direction:column;grid-area:auto;gap:8px;margin:0;padding:0;overflow:visible;max-width:none}
  :is([data-layout=map],[data-layout=side]) #children .child{flex:0 0 auto;min-width:0;width:100%;padding:14px 10px;gap:11px}
  :is([data-layout=map],[data-layout=side]) #children .avatar{width:38px;height:38px;font-size:21px}
  :is([data-layout=map],[data-layout=side]) #no-search{padding:0 9px;font-size:14px}
  :is([data-layout=map],[data-layout=side]) .cabinet-toolbar{min-height:44px}
  :is([data-layout=map],[data-layout=side]) #dimension-panel{align-items:start}
}
@media(min-width:901px) and (max-width:1350px){
  :is([data-layout=map],[data-layout=side]) .workspace{grid-template-columns:190px minmax(0,1fr);gap:18px}
  :is([data-layout=map],[data-layout=side]) .children-rail{padding:18px 10px}
  :is([data-layout=map],[data-layout=side]) .cabinet-toolbar{gap:12px}
  :is([data-layout=map],[data-layout=side]) .period-dates{display:none}
}
@media(min-width:901px) and (max-width:1600px){
  [data-layout=map] .phrase-ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-layout=map] .phrase-step:nth-child(3):after{display:none}
}

/* Перемикач змінює тільки ширину вікна шляху в другому вигляді. */
.map-columns-control{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:14px;color:var(--ink-soft)}
.map-columns-control>div{display:flex;gap:3px;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:10px}
.map-columns-control button{min-width:36px;min-height:34px;padding:5px 10px;border:1px solid transparent;border-radius:7px;background:transparent;font-size:15px;font-weight:600;color:var(--ink-soft)}
.map-columns-control button[aria-pressed=true]{background:var(--violet-soft);border-color:var(--violet);color:var(--violet)}
[data-layout=side] .personal-map .section-heading{flex-wrap:wrap;align-items:flex-start}
[data-layout=side] .personal-map .map-view-controls{flex-wrap:wrap}
@media(max-width:700px){[data-layout=side] .map-view-controls{justify-content:flex-start}.map-columns-control{margin-right:auto}}

/* Покроковий шлях спеціаліста; прийнята карта зберігає власну композицію. */
.layout-bar{display:none}
[data-layout=guide] .demo-label{display:none}
[data-layout=guide] .demo-header{max-width:none;padding:15px max(28px,calc((100vw - 1320px)/2));background:var(--surface)}
[data-layout=guide] .workspace{max-width:1320px;width:calc(100% - 64px);margin:0 auto}
.onboarding{--onboard-green:#8fb43f;--onboard-known:color-mix(in srgb,#a6c962 18%,var(--surface));--onboard-learning:color-mix(in srgb,#f2d34a 25%,var(--surface));--onboard-unknown:color-mix(in srgb,#e8a47e 21%,var(--surface));font-size:17px}
.onboarding section{margin:0;border:0;box-shadow:none}
.onboarding h1,.onboarding h2,.onboarding h3{font-family:var(--display);border:0;padding:0;color:var(--ink)}
.onboarding .overline{font-size:13px;letter-spacing:.1em;line-height:1.5;color:var(--violet);font-weight:750;margin:0 0 16px}
.onboarding-hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:36px;padding:52px 0 56px;min-height:560px}
.onboarding-hero h1{font-size:clamp(42px,3.9vw,58px);line-height:1.12;letter-spacing:-.035em;margin:0 0 24px}
.onboarding-hero h1 em{font-style:normal;color:var(--violet)}
.onboarding-lead{font-size:21px;line-height:1.55;max-width:470px;color:var(--ink-soft);margin:0 0 26px}
.onboarding-start{display:flex;align-items:center;flex-wrap:wrap;gap:18px}.onboarding-start .primary{font-size:17px;min-height:52px}
.onboarding-meta{font-size:14px;color:var(--ink-soft);margin:14px 0 28px}
.onboarding-promise{display:flex;align-items:center;gap:14px;color:var(--ink-soft);font-size:15px}.onboarding-promise span{display:flex;align-items:center;gap:7px}.onboarding-promise>svg{width:18px}
.onboarding-collage{position:relative;height:440px;min-width:0}
.collage-halo{position:absolute;inset:15px 0 22px 30px;border-radius:50%;background:radial-gradient(ellipse,var(--violet-soft),transparent 72%)}
.glimpse-window{position:absolute;top:14px;right:0;width:74%;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 15px 45px #37247814;overflow:hidden;transform:rotate(2deg)}
.glimpse-chrome{display:flex;align-items:center;gap:5px;padding:10px 12px;background:var(--sunk);font-size:11px;color:var(--ink-soft)}.glimpse-chrome>i{width:6px;height:6px;border-radius:50%;background:var(--line)}.glimpse-chrome>span{margin-left:10px}
.glimpse-body{padding:18px}.glimpse-person{display:flex;align-items:center;gap:9px;margin-bottom:15px}.glimpse-person .avatar{width:31px;height:31px;font-size:18px}.glimpse-person b{font-size:15px}.glimpse-person small{display:block;color:var(--ink-soft);font-size:11px}.glimpse-gain{margin-left:auto;color:var(--map-positive-ink);font-size:11px;font-weight:600}
.glimpse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.glimpse-tile{position:relative;display:grid;grid-template-columns:1fr auto;gap:9px;padding:15px 13px 18px;text-align:left;border:1px solid color-mix(in srgb,var(--onboard-green) 35%,var(--line));border-radius:12px;background:var(--onboard-known);color:var(--ink);font-size:15px;min-width:0;overflow:hidden}
.glimpse-tile>span:first-child{font-weight:650}.glimpse-tile>b{color:var(--map-positive-ink);font-size:21px;white-space:nowrap}.glimpse-tile>b>small{font-size:13px;color:var(--ink-soft);font-weight:500}
.glimpse-tile>small{grid-column:1/-1;font-size:12px;color:var(--ink-soft)}.glimpse-tile.learning{background:var(--onboard-learning);border-color:color-mix(in srgb,var(--map-learning) 50%,var(--line))}.glimpse-tile.unknown{background:var(--onboard-unknown);border-color:color-mix(in srgb,var(--map-unknown) 50%,var(--line))}.glimpse-tile.unseen{background:var(--sunk)}
.glimpse-units{display:flex;gap:3px;flex-wrap:wrap;grid-column:1/-1}.glimpse-units>i{width:8px;height:8px;border-radius:2px;background:var(--line)}.glimpse-units>.known{background:#8fb43f}.glimpse-units>.learning{background:#eaca35}.glimpse-units>.unknown{background:#dc9270}.glimpse-units>.unseen{background:none;border:1px dashed var(--ink-soft)}
.glimpse-fill{position:absolute;left:13px;right:13px;bottom:8px;height:4px;border-radius:4px;background:linear-gradient(90deg,#8fb43f 0 var(--known),#eaca35 var(--known) var(--learning),#dc9270 var(--learning) var(--unknown),var(--line) var(--unknown) 100%)}
.glimpse-tile:hover{outline:2px solid var(--violet);outline-offset:2px}.glimpse-window .glimpse-tile{font-size:12px;padding:10px 10px 16px;gap:6px}.glimpse-window .glimpse-tile>b{font-size:17px}.glimpse-window .glimpse-tile>small{font-size:10px}.glimpse-window .glimpse-grid{gap:8px}
.collage-device{position:absolute;left:0;bottom:32px;transform:rotate(-7deg);width:210px;padding:12px 12px 17px;border:7px solid var(--ink);border-radius:29px;background:var(--surface);box-shadow:0 16px 24px #1d174018}
.device-camera{width:45px;height:5px;border-radius:8px;background:var(--ink);margin:0 auto 16px}.collage-listen{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--violet);margin-bottom:10px}.collage-listen .icon{width:14px;height:14px}
.collage-pictures{display:grid;grid-template-columns:1fr 1fr;gap:6px}.collage-pictures img{width:100%;border-radius:12px;border:1px solid var(--line)}.collage-pictures img:first-child{outline:2px solid var(--map-known)}
.collage-device-foot{display:flex;align-items:center;gap:5px;margin:14px 5px 0}.collage-device-foot i{width:7px;height:7px;background:var(--map-known);border-radius:50%}.collage-device-foot i:nth-child(3),.collage-device-foot i:nth-child(4){background:var(--line)}.collage-device-foot>span{margin-left:auto;color:var(--good)}.collage-device-foot .icon{width:19px}
.collage-sync{position:absolute;bottom:49px;right:15px;display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:13px 16px;background:var(--surface);font-size:14px;color:var(--violet);box-shadow:var(--shadow)}
.collage-bee{position:absolute;bottom:70px;left:36%;width:110px;filter:drop-shadow(0 8px 12px #1d174012)}.collage-caption{position:absolute;bottom:0;right:0;color:var(--ink-soft);font-size:12px}
.onboarding-tour{border:1px solid var(--line)!important;border-radius:26px;background:var(--surface);overflow:hidden;scroll-margin-top:24px}
.tour-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:12px;gap:8px;background:var(--sunk);border-bottom:1px solid var(--line)}
.tour-nav button{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:12px;padding:13px 10px;min-height:54px;background:transparent;color:var(--ink-soft);font-size:17px;font-weight:600}
.tour-nav button>span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--surface);font-size:14px;flex:none}.tour-nav button[aria-selected=true]{background:var(--surface);color:var(--violet);border-color:var(--line);box-shadow:0 2px 6px #291c6c0a}.tour-nav button[aria-selected=true]>span{color:#fff;background:var(--violet)}
.tour-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center;padding:42px;min-height:610px}
.tour-copy h2{font-size:38px;line-height:1.17;letter-spacing:-.025em;margin:0 0 22px}.tour-copy>p:not(.overline){font-size:18px;line-height:1.65;color:var(--ink-soft);margin:0 0 28px}
.tour-points{display:flex;flex-direction:column;gap:20px}.tour-points>div{display:flex;align-items:flex-start;gap:12px}.tour-points .icon{width:23px;height:23px;flex:none;color:var(--violet);margin-top:2px}.tour-points b{font-size:16px;font-weight:650}.tour-points small{display:block;font-size:15px;line-height:1.5;color:var(--ink-soft);margin-top:4px}
.tour-visual{min-width:0}.tour-caption{font-size:12px;color:var(--ink-soft);line-height:1.6;margin:15px 0 0;text-align:center;max-width:560px}
.tour-bottom{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 32px;border-top:1px solid var(--line)}.tour-bottom>span{color:var(--ink-soft);font-size:14px}.tour-bottom .primary{min-height:48px;font-size:16px}.tour-bottom>button:first-child{min-width:90px}.tour-bottom button:disabled{opacity:.4;cursor:default}
.tour-audio-label{display:flex;justify-content:center;align-items:center;gap:12px;margin:0 0 20px;font-size:18px}.tour-audio-label>span{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font-size:14px}.tour-audio-label .icon{width:19px}
.tour-tablet{padding:17px 20px 5px;border:9px solid #30264a;border-radius:32px;background:#faf5ee;box-shadow:0 14px 28px #1d174017;position:relative;color:#30264a}
.tablet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.tablet-top>img{border-radius:9px}.tablet-top>.icon-btn{width:35px;height:35px;border-color:#dcd8ee;background:#fff;color:#4b33c9}.tablet-dots{display:flex;gap:6px}.tablet-dots i{height:7px;width:7px;border-radius:50%;background:#ddd7c8}.tablet-dots i:first-child{background:#e5bd43}
.tablet-answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tablet-answers button{position:relative;padding:0;aspect-ratio:1;border:3px solid #e1d7c7;border-radius:18px;background:#fff;overflow:hidden;transition:transform .15s,border-color .15s}.tablet-answers button:hover{transform:translateY(-3px)}.tablet-answers button.chosen{border-color:#4b33c9}.tablet-answers img{width:100%;height:100%;object-fit:cover}.answer-dot{position:absolute;bottom:8px;right:8px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#4b33c9;color:#fff}.answer-dot .icon{width:19px}
.tablet-bottom{display:flex;align-items:center;justify-content:space-between;padding:2px 8px;height:62px}.tablet-bottom img{height:65px;width:68px;object-fit:contain}.tablet-bottom>span{font-size:10px;letter-spacing:4px;color:#d5cbb8}
.tour-answer-fact{min-height:58px;margin-top:20px;padding:12px 15px;display:flex;align-items:center;gap:9px;border:1px dashed var(--line);border-radius:13px;color:var(--ink-soft);font-size:14px;line-height:1.5}.tour-answer-fact.answered{background:var(--violet-soft);border-style:solid}.tour-answer-fact>.icon{flex:none;width:20px}.tour-answer-fact .text-btn{margin-left:auto;font-size:13px;white-space:nowrap}
.scene-switch{display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--sunk);margin-bottom:24px;flex-wrap:wrap}.scene-switch button{flex:1;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink-soft);padding:10px 11px;font-size:14px;font-weight:600;line-height:1.4}.scene-switch button[aria-pressed=true]{background:var(--surface);color:var(--violet);border-color:var(--line)}
.selection-inputs{display:flex;gap:12px;align-items:center}.selection-inputs>div{display:flex;align-items:center;gap:9px;flex:1;font-size:13px;line-height:1.4;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}.selection-inputs img{width:44px;height:44px;border-radius:8px}.selection-inputs b{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px}.selection-plus{color:var(--ink-soft);font-size:25px}.colour-sample{width:31px;height:31px;flex:none;border-radius:50%;background:#d44f3f;border:5px solid #fae3d9}.selection-arrow{text-align:center;padding:14px}.selection-arrow .icon{transform:rotate(90deg);color:var(--violet);width:26px}
.selection-result{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:20px;text-align:center}.scene-eyebrow{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--violet)}.selection-result h3{font-size:20px;line-height:1.3;margin:10px 0 16px}.selection-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:340px;margin:auto}.selection-pair img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);border-radius:16px}.selection-contrast{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin-top:18px;font-size:13px;color:var(--ink-soft)}.selection-contrast .icon{width:17px;color:var(--violet)}.selection-contrast b{color:var(--ink)}
.spacing-word{display:flex;align-items:center;gap:13px;padding:14px;border-radius:16px;background:var(--sunk);font-size:13px;color:var(--ink-soft)}.spacing-word>img{width:52px;height:52px;border-radius:12px}.spacing-word b{display:block;color:var(--ink);font-size:19px;margin-top:2px}.spacing-state{margin-left:auto;color:var(--violet);font-weight:600;font-size:13px;max-width:110px;text-align:right}
.spacing-scroll{overflow-x:auto}.spacing-scroll-hint{display:none}.glimpse-empty{grid-column:1/-1;padding:20px 8px;color:var(--ink-soft);font-size:15px;line-height:1.5}.spacing-road{width:100%;height:auto;overflow:visible;margin:26px 0 2px}.road-base{stroke:var(--line);stroke-width:5;fill:none}.road-fill{stroke:var(--map-known);stroke-width:5;fill:none}.road-stop>circle{fill:var(--onboard-known);stroke:var(--map-known);stroke-width:2}.road-stop>text{font-family:var(--body);font-size:21px;fill:var(--map-positive-ink);text-anchor:middle;font-weight:600}.road-stop>.road-label{font-size:16px;fill:var(--ink-soft);font-weight:450}.road-link{stroke:var(--line);stroke-width:2;fill:none;stroke-dasharray:4 5}.road-stop.difficulty>circle{fill:var(--onboard-unknown);stroke:var(--map-unknown)}.road-stop.difficulty>text{fill:var(--ink)}.road-future>circle{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:5 6}.road-future>text{fill:var(--ink-soft);font-size:14px}
.spacing-explanation{display:flex;align-items:flex-start;gap:13px;padding:20px;border-radius:17px;background:var(--violet-soft)}.spacing-explanation>.icon{flex:none;color:var(--violet)}.spacing-explanation b{font-size:17px;line-height:1.4}.spacing-explanation span{display:block;font-size:15px;color:var(--ink-soft);line-height:1.5;margin-top:6px}
.tour-cabinet-preview{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--surface);box-shadow:0 10px 26px #291c6c0a}.preview-child{display:flex;align-items:center;gap:10px;margin-bottom:22px}.preview-child .avatar{width:39px;height:39px;font-size:22px}.preview-child b{font-size:18px}.preview-child small{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px}.preview-total{margin-left:auto;color:var(--ink-soft);font-size:13px}.preview-total>b{font-size:24px;color:var(--map-positive-ink)}.preview-explain{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:18px 0 0}.preview-open{display:flex;justify-content:center;width:100%;margin-top:18px;background:var(--violet-soft);border-color:var(--line);color:var(--violet);min-height:48px}.preview-changes{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin:25px 0}.preview-changes b{display:block;font-size:48px;font-family:var(--display);color:var(--map-positive-ink);line-height:1.2}.preview-changes span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.4;margin-top:7px}.preview-new-words{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.preview-new-words>span{display:flex;align-items:center;gap:6px;font-size:14px;border-radius:8px;background:var(--onboard-known);padding:7px 10px}.preview-new-words .icon{width:16px;color:var(--map-positive-ink)}
.tour-profile-preview{max-height:390px;overflow-y:auto;padding:2px 8px 4px 2px;overscroll-behavior:contain}.tour-profile-preview .compact-profile{padding:15px;border-radius:13px}.tour-profile-preview .compact-traits{margin-top:14px!important}.tour-profile-preview .compact-heading h3{font-size:19px}.tour-profile-preview .phrase-ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.tour-profile-preview .phrase-step-length{width:32px;height:32px;font-size:17px;margin-bottom:8px}.tour-profile-preview .phrase-chip{font-size:12px;min-height:45px}.tour-profile-preview .trait-rows{grid-template-columns:1fr 1fr}.tour-profile-preview .trait-axis{font-size:11px}.tour-profile-preview .compact-key{font-size:11px}.tour-profile-preview .phrase-step:nth-child(3):after{display:none}
.onboarding-roles{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;padding:80px 32px}.onboarding-roles>div{position:relative}.onboarding-roles img{width:100%;max-height:410px;object-fit:cover;border-radius:28px;display:block}.onboarding-roles>div>span{position:absolute;bottom:17px;left:17px;right:17px;padding:13px 17px;color:#1d1740;background:#fffef6ed;border-radius:15px;font-size:15px;font-weight:650;line-height:1.5}.onboarding-roles h2{font-size:36px;line-height:1.2;margin:0 0 25px}.onboarding-roles dl{display:flex;flex-direction:column;gap:17px;margin:0}.onboarding-roles dl>div{display:grid;grid-template-columns:135px 1fr;gap:10px}.onboarding-roles dt{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650}.onboarding-roles dt>.icon{width:21px;color:var(--violet);flex:none}.onboarding-roles dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}.roles-boundary{margin:25px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.onboarding-contact{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;border-radius:26px;background:var(--violet-soft);padding:44px;scroll-margin-top:28px}.contact-copy h2{font-size:38px;line-height:1.16;letter-spacing:-.02em;margin:0 0 22px}.contact-copy>p:not(.overline){font-size:18px;line-height:1.6;color:var(--ink-soft);margin:0 0 28px}.contact-symbol{display:grid;place-items:center;width:49px;height:49px;background:var(--surface);color:var(--violet);border:1px solid var(--line);border-radius:15px;margin-bottom:20px}.contact-symbol .icon{width:26px;height:26px}.contact-next{display:flex;align-items:center;gap:13px;font-size:12px;color:var(--ink-soft)}.contact-next>span{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.contact-next b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);font-size:14px;color:var(--violet)}.contact-next>.icon{width:19px;color:var(--violet);margin-top:-20px}
.contact-form-card{padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}.contact-instruction{font-size:17px;font-weight:600;line-height:1.5;margin:0 0 22px}.interest-fields{display:grid;grid-template-columns:1fr;gap:19px;margin-bottom:23px}.interest-fields label{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}.interest-fields input{width:100%;min-width:0;min-height:49px;border:1px solid var(--line);border-radius:11px;font:400 17px var(--body);color:var(--ink);padding:12px 14px;background:var(--surface)}.interest-fields input:focus{outline:2px solid var(--violet);outline-offset:2px}.interest-fields input[aria-invalid=true]{border-color:var(--bad)}.interest-form>.primary{width:100%;justify-content:center;min-height:50px;font-size:17px}.contact-purpose{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:16px 0}.contact-demo-note{font-size:12px;color:var(--ink-soft);line-height:1.6;border-top:1px solid var(--line);margin:17px 0 0;padding-top:14px}.contact-error{font-size:14px;line-height:1.5;color:var(--bad);margin:0 0 17px}.interest-form[hidden],.interest-result[hidden],.contact-error[hidden]{display:none}.interest-result h3{font-size:25px;line-height:1.25;margin:0 0 20px}.interest-result dl{margin:20px 0}.interest-result dl>div{display:grid;grid-template-columns:75px minmax(0,1fr);gap:12px;margin:9px 0;font-size:16px}.interest-result dt{color:var(--ink-soft)}.interest-result dd{margin:0;overflow-wrap:anywhere}.interest-result>p{font-size:16px;line-height:1.6}.contact-dialog-heading .contact-symbol{background:var(--violet-soft)}.contact-dialog-heading .overline{color:var(--violet)}.contact-dialog-heading .dialog-sub{margin-bottom:25px}
.onboarding-status{max-width:740px;margin:24px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--ink-soft)}
@media(min-width:1600px){.onboarding-hero{padding-top:70px;padding-bottom:70px}}
@media(max-width:1100px){.onboarding-hero{gap:22px}.onboarding-hero h1{font-size:45px}.onboarding-lead{font-size:19px}.collage-device{width:175px}.collage-bee{width:90px;left:33%}.collage-sync{font-size:12px;right:0}.glimpse-window{width:79%}.glimpse-body{padding:12px}.glimpse-gain{font-size:10px}.tour-panel{padding:30px;gap:30px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.tour-copy h2{font-size:31px}.tour-nav button{font-size:15px;padding:11px 7px;gap:7px}.selection-inputs{gap:7px}.selection-inputs>div{padding:8px;gap:6px}.selection-inputs img{width:34px;height:34px}.selection-inputs .colour-sample{width:26px;height:26px}.tour-tablet{padding:12px 13px 3px;border-width:7px}.tablet-answers{gap:9px}.onboarding-roles{gap:40px;padding:60px 15px}.onboarding-contact{padding:32px;gap:30px}.contact-copy h2{font-size:32px}}
@media(max-width:850px){[data-layout=guide] .workspace{width:calc(100% - 40px)}.onboarding-hero{grid-template-columns:1fr;padding:38px 0 42px;gap:32px}.onboarding-pitch{max-width:620px}.onboarding-hero h1{font-size:49px}.onboarding-lead{max-width:550px}.onboarding-collage{max-width:610px;width:100%;margin:0 auto;height:400px}.glimpse-window{width:72%}.collage-device{width:210px}.collage-bee{width:110px;left:35%}.collage-sync{font-size:14px;bottom:30px}.onboarding-collage .collage-caption{bottom:-10px}.tour-panel{grid-template-columns:1fr;gap:30px;padding:30px;min-height:0}.tour-copy h2{font-size:35px}.tour-copy>p:not(.overline){font-size:18px}.tour-points{display:none}.tour-visual{max-width:620px;width:100%;margin:auto}.onboarding-roles{grid-template-columns:.8fr 1.2fr;gap:28px;padding:50px 0}.onboarding-roles h2{font-size:30px}.onboarding-roles dl>div{grid-template-columns:1fr;gap:4px}.onboarding-contact{grid-template-columns:1fr;gap:28px}.contact-copy h2 br{display:none}.contact-next{font-size:14px}.interest-fields{grid-template-columns:1fr 1fr}}
@media(max-width:600px){[data-layout=guide] .demo-header{padding:13px 16px}[data-layout=guide] .workspace{width:calc(100% - 28px)}[data-layout=guide] .cabinet-link{font-size:13px}.header-actions{gap:12px}.onboarding-hero{padding:34px 4px 35px;gap:34px}.onboarding-hero h1{font-size:42px}.onboarding .overline{font-size:11px}.onboarding-lead{font-size:19px;line-height:1.6}.onboarding-start{gap:16px}.onboarding-start .primary{font-size:15px;padding:13px 18px}.onboarding-meta{font-size:12px;margin-bottom:21px}.onboarding-promise{font-size:13px;gap:8px}.onboarding-promise .icon{width:18px;height:18px}.onboarding-collage{height:335px}.glimpse-window{width:83%;top:0}.glimpse-person small{display:none}.glimpse-person .avatar{width:25px;height:25px;font-size:15px}.glimpse-person b{font-size:12px}.glimpse-gain{font-size:9px}.glimpse-body{padding:10px}.glimpse-grid{gap:8px}.glimpse-window .glimpse-tile{font-size:10px;padding:8px 8px 15px;gap:4px}.glimpse-window .glimpse-tile>b{font-size:14px}.glimpse-window .glimpse-tile>b>small{font-size:10px}.glimpse-window .glimpse-tile>small{font-size:9px}.glimpse-units>i{width:6px;height:6px}.collage-device{width:158px;padding:9px 9px 12px;border-width:5px;border-radius:23px;bottom:27px}.device-camera{margin-bottom:9px;height:4px;width:34px}.collage-listen{font-size:9px;margin-bottom:7px}.collage-listen .icon{width:12px;height:12px}.collage-pictures{gap:4px}.collage-pictures img{border-radius:9px}.collage-device-foot{margin-top:8px;gap:3px}.collage-device-foot i{width:5px;height:5px}.collage-device-foot .icon{width:15px;height:15px}.collage-sync{font-size:11px;padding:9px;gap:5px;right:0;bottom:16px;max-width:180px;line-height:1.4}.collage-sync .icon{width:17px;flex:none}.collage-bee{width:79px;left:51%;bottom:51px}.collage-caption{font-size:9px}.tour-nav{padding:7px;gap:4px}.tour-nav button{flex-direction:column;font-size:11px;gap:6px;padding:9px 3px;border-radius:9px;line-height:1.35}.tour-nav button>span{width:25px;height:25px;font-size:13px}.onboarding-tour{border-radius:19px;scroll-margin-top:10px}.tour-panel{padding:24px 18px;gap:26px}.tour-copy h2{font-size:29px;margin-bottom:15px}.tour-copy>p:not(.overline){font-size:16px;line-height:1.6;margin-bottom:0}.tour-copy .overline{margin-bottom:11px}.tour-bottom{gap:10px;padding:16px;flex-wrap:wrap}.tour-bottom .primary{font-size:14px;flex:1 1 100%;justify-content:center;order:3}.tour-bottom>button:first-child{min-width:0}.tour-bottom>span{font-size:12px}.tour-audio-label{gap:8px;font-size:16px}.tour-audio-label>span{font-size:11px}.tour-audio-label .icon{width:15px}.tour-tablet{padding:10px 10px 2px;border-width:6px;border-radius:24px}.tablet-answers{gap:8px}.tablet-answers button{border-radius:13px;border-width:2px}.tablet-bottom{height:51px}.tablet-bottom img{height:53px;width:57px}.tour-answer-fact{font-size:12px;padding:10px;gap:7px;flex-wrap:wrap}.tour-caption{font-size:11px}.scene-switch{margin-bottom:18px}.scene-switch button{padding:8px 7px;font-size:12px}.selection-inputs{gap:6px}.selection-inputs>div{font-size:11px;padding:8px;flex-direction:column;align-items:flex-start}.selection-inputs b{font-size:10px}.selection-plus{font-size:20px}.selection-result{padding:15px}.selection-result h3{font-size:18px}.selection-pair{gap:9px}.selection-contrast{font-size:11px}.spacing-word{padding:10px;gap:8px;font-size:11px}.spacing-word img{width:42px;height:42px}.spacing-word b{font-size:17px}.spacing-state{font-size:11px;max-width:90px}.spacing-road{min-width:480px}.spacing-scroll-hint{display:block;text-align:center;font-size:11px;line-height:1.5;color:var(--ink-soft);margin:0 0 20px}.spacing-scroll .spacing-road{margin-bottom:0}.spacing-explanation{padding:15px;gap:10px}.spacing-explanation b{font-size:15px}.spacing-explanation span{font-size:13px}.tour-cabinet-preview{padding:15px}.preview-child{gap:8px;flex-wrap:wrap}.preview-child b{font-size:16px}.preview-child small{font-size:10px}.preview-total{font-size:11px}.preview-total>b{font-size:20px}.glimpse-tile{font-size:12px;padding:12px 10px 17px;gap:7px}.glimpse-tile>b{font-size:18px}.glimpse-tile>small{font-size:10px}.glimpse-tile>b>small{font-size:11px}.preview-changes b{font-size:39px}.preview-changes span{font-size:12px}.preview-open{font-size:14px}.preview-explain{font-size:11px}.tour-profile-preview .trait-rows{grid-template-columns:1fr}.tour-profile-preview .compact-heading h3{font-size:17px}.tour-profile-preview .compact-profile{padding:11px}.tour-profile-preview .phrase-chip{font-size:11px;padding:6px 4px}.onboarding-roles{grid-template-columns:1fr;gap:30px;padding:44px 5px}.onboarding-roles img{max-height:300px;object-position:50% 25%;border-radius:20px}.onboarding-roles>div>span{font-size:13px;padding:10px 13px;left:12px;right:12px;bottom:12px}.onboarding-roles h2{font-size:29px}.onboarding-roles dl>div{grid-template-columns:110px 1fr;gap:10px}.onboarding-roles dd{font-size:14px}.onboarding-roles dt{font-size:14px;gap:7px}.roles-boundary{font-size:12px}.onboarding-contact{padding:24px 18px;border-radius:20px}.contact-copy h2{font-size:30px}.contact-copy>p:not(.overline){font-size:16px;margin-bottom:22px}.contact-next{font-size:11px;gap:11px}.contact-form-card{padding:20px 16px}.interest-fields{grid-template-columns:1fr;gap:16px}.contact-instruction{font-size:16px}.interest-fields input{font-size:16px}.contact-purpose{font-size:12px}.contact-demo-note{font-size:11px}.onboarding-status{font-size:11px;margin:20px 8px 0}.interest-result dl>div{grid-template-columns:1fr;gap:3px}.interest-result h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.tablet-answers button{transition:none}}

/* Четвертий крок веде у справжній інтерактивний макет кабінету. */
.cabinet-entry{margin:0 0 28px;padding:22px;border-radius:18px;background:var(--violet-soft);border:1px solid var(--line)}
.cabinet-entry>.primary{display:flex;justify-content:center;gap:10px;min-height:58px;width:100%;font-size:17px;text-decoration:none;box-shadow:0 5px 16px #e5ad1624}
.cabinet-entry>p{font-size:14px;font-weight:650;color:var(--ink);margin:14px 0 6px}.cabinet-entry>span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.5}.preview-kicker{margin:0 0 14px;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}
#tour-next-slot a{text-decoration:none}.tour-panel:has(.cabinet-entry){align-items:start}.tour-panel:has(.cabinet-entry) .tour-points{gap:16px}.tour-panel:has(.cabinet-entry) .tour-points small{font-size:13px}
@media(max-width:600px){.cabinet-entry{padding:16px;margin:22px 0 0}.cabinet-entry>.primary{font-size:15px;padding:12px 10px;gap:7px}.cabinet-entry>.primary>.icon:first-child{display:none}.cabinet-entry>p,.cabinet-entry>span{font-size:13px}#tour-next-slot{flex:1 1 100%;order:3}#tour-next-slot .primary{width:100%}}

/* Дії спеціаліста на наявних даних; основний вхід у кабінет лишається помітним. */
.cabinet-tour-points{display:none}
.workday-route{display:grid;gap:10px;margin-top:24px}
.workday-route>p{font-size:15px;font-weight:700;margin:0 0 3px;color:var(--ink-soft)}
.workday-route>button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:15px;padding:15px;background:var(--surface);color:var(--ink)}
.workday-route>button:hover{border-color:var(--violet);background:var(--violet-soft)}
.route-number{width:31px;height:31px;flex:none;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);border-radius:50%;font-weight:800}
.workday-route>button>span:nth-child(2){display:grid;gap:5px;flex:1;font-size:15px;line-height:1.4}
.workday-route small{font-size:13px;color:var(--ink-soft)}
.workday-route>button>.icon{flex:none;color:var(--violet)}
.tour-family h3{font-size:23px;margin:0 0 12px}.tour-family .overline{font-size:11px;margin:0 0 13px}
.tour-family-activity{color:var(--ink-soft);font-size:14px;margin:0 0 18px}
.tour-family-fact{display:flex;gap:10px;align-items:start;padding:13px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55}
.tour-family-fact>.icon{flex:none;margin-top:3px;color:var(--violet)}.tour-family-fact>p{margin:0}
.tour-family-comment{display:flex;gap:10px;background:var(--violet-soft);border-radius:13px;padding:16px;margin:14px 0 20px;font-size:15px;line-height:1.5}
.tour-family-comment>.icon{flex:none;color:var(--violet)}.tour-family-comment p{margin:7px 0 0;color:var(--ink-soft)}
.tour-family>.primary{width:100%;justify-content:center;white-space:normal;font-size:15px;line-height:1.45}
.preview-changes span{max-width:185px;line-height:1.5}
.start-questions{margin-top:26px}.start-questions h3{font-size:22px;margin:0 0 12px}
.start-questions details{border-top:1px solid var(--line);padding:15px 0}
.start-questions summary{cursor:pointer;font-size:17px;font-weight:700;line-height:1.5}
.start-questions details>p{font-size:15px;line-height:1.65;margin:13px 0 0;color:var(--ink-soft)}
.contact-form-card>h3{font-size:27px;margin:0 0 22px}
.contact-context{margin:0 0 22px;border:1px solid var(--line);border-radius:12px;padding:13px}
.contact-context summary{cursor:pointer;font-size:14px;font-weight:650;line-height:1.5}
.contact-context summary>span{display:block;font-size:12px;font-weight:400;color:var(--ink-soft);margin:3px 0 0 17px}
.contact-context>.interest-fields{margin-top:16px}
.contact-context fieldset{border:0;padding:0;margin:15px 0 12px;display:grid;gap:10px}
.contact-context legend{font-weight:700;font-size:14px;padding:0;margin-bottom:10px}
.contact-context fieldset label{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.5;cursor:pointer}
.contact-context input[type=radio]{width:18px;height:18px;accent-color:var(--violet);flex:none}
.contact-context>p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0}
.parent-note-example{margin:12px 0;font-size:14px;line-height:1.5}
.parent-note-example summary{cursor:pointer;color:var(--violet);font-weight:650}
.parent-note-example p{background:var(--violet-soft);padding:14px;border-radius:12px;margin:10px 0}
.trait-definition{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:12px 0 0}
@media(max-width:600px){.workday-route>button{padding:13px;gap:9px}.workday-route>button>span:nth-child(2){font-size:14px}.workday-route small{font-size:12px}.route-number{width:27px;height:27px}.tour-family h3{font-size:20px}.tour-family-fact{font-size:14px}.tour-family-comment{padding:13px;font-size:14px}.start-questions summary{font-size:16px}.start-questions details>p{font-size:14px}.contact-form-card>h3{font-size:25px}.trait-definition{font-size:12px}}

/* Перегляд готового підсумку перед копіюванням, зокрема на телефоні. */
.parent-preview-label{font-size:17px;line-height:1.4;font-weight:650;margin:0 0 16px;text-align:center}
.parent-preview>.btn{margin-top:20px}
.contact-copy .contact-centre{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:18px}

/* Один маршрут знайомства; карти й прийнята палітра лишаються спільними. */
.journey-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:sticky;top:0;z-index:15;padding:10px;margin:0 0 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 7px 22px #291c6c09}
.journey-nav>a{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 9px;min-height:48px;font-size:16px;line-height:1.4;font-weight:650;border-radius:10px;text-decoration:none;color:var(--ink-soft)}
.journey-nav>a>span{width:28px;height:28px;display:grid;place-items:center;flex:none;background:var(--sunk);border-radius:50%;font-size:13px}
.journey-nav>a:hover,.journey-nav>a[aria-current]{background:var(--violet-soft);color:var(--violet)}
.journey-nav>a[aria-current]>span{background:var(--violet);color:var(--surface)}
.onboarding-tour{border:0!important;background:transparent;overflow:visible;border-radius:0}
.journey-section{border:1px solid var(--line);border-radius:26px;background:var(--surface);margin:0 0 28px;scroll-margin-top:94px;min-height:570px;padding:42px;gap:48px}
.journey-section:nth-child(2){background:color-mix(in srgb,var(--violet-soft) 24%,var(--surface))}
.journey-section:nth-child(3){background:color-mix(in srgb,var(--map-learning) 5%,var(--surface))}
.journey-section:last-child{background:var(--violet-soft)}
.journey-section .tour-copy>p{line-height:1.65}
.section-next{display:inline-flex;text-decoration:none;margin-top:25px;font-size:16px}
.journey-section .tour-points{gap:19px;margin-top:26px}
.cabinet-invitation-art{padding:16px 0}
.cabinet-invitation-art .glimpse-window{position:static;width:100%;transform:none;box-shadow:0 18px 36px #291c6c10;border-radius:20px}
.cabinet-invitation-art .glimpse-body{padding:24px}
.cabinet-invitation-art .glimpse-tile{font-size:16px;padding:16px 14px 23px}
.cabinet-invitation-art .glimpse-tile>b{font-size:25px}
.cabinet-invitation-art .glimpse-tile>small{font-size:13px}
.cabinet-art-note{display:flex;gap:10px;align-items:center;font-size:15px;line-height:1.5;margin:22px 8px 0;color:var(--ink-soft)}
.cabinet-art-note .icon{flex:none;color:var(--violet)}
.glimpse-tile{cursor:default}
.glimpse-tile:hover{transform:none;border-color:var(--line)}
.journey-section .cabinet-entry{background:var(--surface);padding:20px;margin-top:24px}
.onboarding-contact{scroll-margin-top:95px}
.road-stop.difficulty>circle{fill:var(--onboard-learning);stroke:var(--map-learning)}
.map-meaning{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:8px 0 0;max-width:580px}

/* Усі приклади добору й повторення видно одночасно. */
.selection-sequence{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:10px;align-items:stretch;list-style:none;padding:0;margin:0}
.selection-stage{padding:22px 16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);min-width:0}
.selection-stage.next{background:color-mix(in srgb,var(--violet-soft) 38%,var(--surface));border-color:color-mix(in srgb,var(--violet) 25%,var(--line))}
.selection-step{display:block;color:var(--violet);font-size:13px;letter-spacing:.04em;font-weight:700}
.selection-stage h3{font-size:24px;line-height:1.25;margin:13px 0 22px;min-height:60px}
.selection-stage .selection-pair{gap:8px;max-width:260px}.selection-stage .selection-pair img{border-radius:12px}
.selection-heard{display:flex;align-items:center;justify-content:center;gap:6px;min-height:49px;font-size:15px;font-weight:650;line-height:1.45;margin:15px 0 8px;text-align:center}
.selection-heard .icon{width:17px;height:17px;flex:none;color:var(--violet)}
.selection-difference{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0;text-align:center}
.selection-bridge{display:flex;align-items:center;justify-content:center;color:var(--violet)}.selection-bridge .icon{width:24px;height:24px}
.selection-readiness{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.6;color:var(--ink-soft);margin:22px 4px 0}.selection-readiness .icon{color:var(--violet);width:21px;height:21px;flex:none;margin-top:2px}
.repeat-comparison{display:grid;gap:17px;margin-top:18px}
.repeat-case{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:21px 23px 18px}
.repeat-case.steady{background:var(--onboard-known)}.repeat-case.difficulty{background:color-mix(in srgb,var(--onboard-learning) 65%,var(--surface))}
.repeat-case header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.repeat-case h3{display:flex;gap:8px;align-items:center;font-size:21px;line-height:1.4;margin:0}
.repeat-case h3 .icon{width:21px;height:21px;flex:none;color:var(--map-positive-ink)}.repeat-case.difficulty h3 .icon{color:var(--violet)}
.repeat-case header>span{color:var(--ink-soft);font-size:13px;font-weight:600}
.repeat-case>p{font-size:15px;line-height:1.6;margin:0;color:var(--ink-soft)}
.repeat-track{height:89px;margin:36px 0 4px;position:relative;list-style:none;padding:0}
.repeat-track::before{content:'';position:absolute;left:17px;right:17px;top:15px;border-top:3px solid var(--map-known)}
.repeat-track.difficulty::before{border-color:var(--line);border-top-style:dashed}
.repeat-track.difficulty::after{content:'';position:absolute;left:17px;top:15px;width:calc((100% - 34px)*.61);border-top:3px solid var(--map-learning)}
.repeat-stop{position:absolute;left:calc((100% - 34px)*var(--at));top:0;width:34px;z-index:1}
.repeat-dot{width:34px;height:34px;border:2px solid var(--map-known);background:var(--surface);border-radius:50%;display:grid;place-items:center;color:var(--map-positive-ink)}
.repeat-dot .icon{width:18px;height:18px}.repeat-label{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.repeat-stop.first .repeat-label{left:0;transform:none}.repeat-stop.last .repeat-label{left:auto;right:0;transform:none}
.repeat-stop.difficulty .repeat-dot,.repeat-stop.return .repeat-dot{border-color:var(--map-learning);color:var(--ink);background:var(--onboard-learning)}
.repeat-stop.difficulty .repeat-label{top:auto;bottom:calc(100% + 7px)}
.repeat-stop.return .repeat-label{font-weight:700;color:var(--ink)}.repeat-stop.future .repeat-dot{border-color:var(--line);border-style:dashed;color:var(--ink-soft)}
@media(max-width:1100px) and (min-width:851px){.selection-sequence{grid-template-columns:1fr}.selection-bridge{height:24px}.selection-bridge .icon{transform:rotate(90deg)}.selection-stage{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.selection-stage h3{grid-column:1;min-height:0;margin:0}.selection-stage .selection-pair{grid-column:2;grid-row:1/4}.selection-heard{grid-column:1;margin:4px 0;min-height:0;justify-content:flex-start;text-align:left}.selection-difference{grid-column:1/-1}}
@media(max-width:650px){
 .selection-sequence{grid-template-columns:1fr;gap:10px}.selection-bridge{height:24px}.selection-bridge .icon{transform:rotate(90deg)}.selection-stage{padding:20px}.selection-stage h3{font-size:25px;min-height:0;margin:10px 0 18px}.selection-stage h3 br{display:none}.selection-stage .selection-pair{max-width:270px}.selection-heard{font-size:17px;margin:13px 0 5px;min-height:30px}.selection-difference{font-size:15px}.selection-readiness{font-size:15px}
 .repeat-case{padding:19px 15px 17px}.repeat-case h3{font-size:20px}.repeat-case header>span{font-size:14px}.repeat-case>p{font-size:15px}.repeat-label{font-size:12px}.repeat-track{margin-top:40px}.repeat-dot .icon{width:16px;height:16px}
}
@media(max-width:400px){.repeat-stop.first .repeat-label,.repeat-stop.future .repeat-label,.repeat-track.steady .repeat-stop:nth-child(3) .repeat-label{top:auto;bottom:calc(100% + 8px)}}

/* Підсумки практики: новий матеріал, повторення й перші досягнення. */
.practice-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.practice-card{display:grid;grid-template-columns:auto 1fr;gap:6px 9px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:19px;background:var(--sunk);color:var(--ink);align-content:start}
.practice-card .practice-label{grid-column:1/-1;display:flex;align-items:center;gap:7px;font-size:15px;font-weight:650;line-height:1.4;margin-bottom:7px}
.practice-label>.icon{color:var(--violet);width:19px;height:19px;flex:none}.practice-label>.icon:last-child{margin-left:auto;width:15px}
.practice-card>b{font-family:var(--display);font-size:34px;line-height:1.2}
.practice-card>span:not(.practice-label){font-size:15px;align-self:end;padding-bottom:4px;color:var(--ink-soft)}
.practice-card>small{grid-column:1/-1;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:4px}
.practice-card:hover{border-color:var(--violet);box-shadow:0 2px 8px #291c6c08}
.practice-card.achieved{background:color-mix(in srgb,var(--map-known) 9%,var(--surface))}
.practice-card.achieved>b{color:var(--map-positive-ink)}
.practice-card.repeated{background:color-mix(in srgb,var(--map-learning) 9%,var(--surface))}
.practice-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--ink-soft);font-size:14px;line-height:1.5;margin-top:18px}
.practice-foot .text-btn{font-size:14px}.practice-empty{font-size:16px;line-height:1.6}
.practice-modal-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.practice-modal-heading .dialog-sub{margin:0}
.practice-detail>.small-caption{font-size:14px;line-height:1.6;margin:18px 0 24px}
.practice-scroll-hint{display:none}
.practice-table-wrap{position:relative;overflow-x:auto;max-width:100%;margin-top:18px}
.practice-table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:15px;line-height:1.5}
.practice-table caption{text-align:left;font-weight:700;font-size:19px;margin:0 0 12px;color:var(--ink)}
.practice-table th,.practice-table td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left}
.practice-table thead th{font-weight:600;color:var(--ink-soft);font-size:13px;background:var(--sunk)}
.practice-table tbody th{font-weight:550}.practice-table .no-practice{color:var(--ink-soft)}
.practice-table td>b{color:var(--map-positive-ink)}.practice-table .text-btn{font-size:13px}.practice-table .text-btn>.icon{width:16px}
.practice-word-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.practice-word-list>button{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;font-size:16px}
.practice-word-list>button>span:not(.state):not(.word-glyph){flex:1}
.practice-word-list .state{font-size:12px;white-space:nowrap}.practice-word-list .icon{width:17px;flex:none}
.practice-word-list>button:hover{border-color:var(--violet)}
.topic-practice,.word-dates{padding:18px 0;border-top:1px solid var(--line);margin-top:24px}
.topic-practice>summary,.word-dates>summary{font-size:17px;font-weight:650;cursor:pointer;color:var(--violet);line-height:1.5}
.topic-practice>.practice-detail{margin-top:22px}
.word-history-key>p{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.word-stats{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Одна картка пам’яті, два види спостереження без вигаданого спільного бала. */
.memory-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--sunk);margin:5px 0 22px}
.memory-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;padding:0;color:var(--ink);font-size:16px;font-weight:650;text-align:left;width:100%}
.memory-heading>span{display:flex;align-items:center;gap:8px}.memory-heading .icon{color:var(--violet);width:18px;height:18px}
.memory-card>p{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:8px 0 13px}
.memory-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;padding:12px 0;background:none;color:var(--ink);border:0;border-top:1px solid var(--line);text-align:left;font-size:14px}
.memory-result:last-child{padding-bottom:0}.memory-result>b{font-size:17px}.memory-result small{font-weight:400;font-size:12px}
.memory-context{grid-column:1/-1;color:var(--ink-soft);line-height:1.5}
.memory-result:hover>span:first-child{text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:3px}
.memory-span{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:2px 0;font-size:10px;color:var(--ink-soft)}
.memory-span>i{height:10px;background:var(--line);border-radius:3px}.memory-span>i.filled{background:var(--violet)}
.memory-span>span{grid-row:2}.memory-span>span:last-child{grid-column:7;text-align:right}
.compact-traits .trait-definition{margin-bottom:12px}.compact-traits .trait-track.segments>i.reached{--segment-colour:var(--violet)}
.memory-observations{display:grid;grid-template-columns:1fr;gap:14px;margin:25px 0}
.memory-observations>article{background:var(--sunk);padding:20px;border:1px solid var(--line);border-radius:15px}
.memory-observations h3{font-size:20px;margin:0 0 10px}.memory-observations p{font-size:16px;line-height:1.6;margin:8px 0 16px}
.memory-observations strong{font-size:26px}.memory-observations strong small{font-size:16px;font-weight:400}
.memory-observations article>span{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft);margin:8px 0}
.ability-meaning{font-size:19px;line-height:1.6}

/* Підсумок — редагований документ для родини, без рамки застосунку. */
.parent-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:28px}
.parent-draft-tag{display:flex;align-items:center;gap:8px;color:var(--violet);font-size:15px;line-height:1.5;margin:0 0 22px}
.parent-editor>label{display:block;font-size:17px;font-weight:650;margin:18px 0 9px;line-height:1.5}
.parent-editor>textarea{display:block;font:400 16px/1.65 var(--body);padding:14px;width:100%;min-height:145px;resize:vertical;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--surface)}
.parent-editor>textarea:focus{outline:2px solid var(--violet);outline-offset:2px}
.parent-editor .micro-note{font-size:14px;line-height:1.6;margin-top:18px}
.parent-preview{padding:0;background:transparent;border:0;border-radius:0}
.parent-preview-label{text-align:left;font-size:18px;margin:0 0 18px}
.parent-document{border:1px solid var(--line);border-radius:16px;padding:25px;background:var(--surface);box-shadow:0 5px 20px #291c6c08}
.parent-document-brand{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-soft);flex-wrap:wrap}
.parent-document-brand>span{flex:1 0 100%;font-size:13px;margin-top:8px}
.parent-document h3{font-size:22px;line-height:1.35;margin:20px 0}
.parent-document section{border-top:1px solid var(--line);padding:16px 0 0;margin-top:16px}
.parent-document h4{font-size:16px;line-height:1.5;margin:0 0 8px;color:var(--violet)}
.parent-document section>p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.65;margin:0}
.parent-document>.small-caption{font-size:13px;line-height:1.6;margin:22px 0 0}
.parent-preview>.btn{font-size:16px;min-height:48px;margin-top:20px;width:100%;justify-content:center}
@media(max-width:1100px){.journey-section{padding:30px;gap:30px;min-height:0}.practice-card{padding:15px}.practice-card .practice-label{font-size:14px}}
@media(max-width:850px){.journey-section{grid-template-columns:1fr}.journey-section .tour-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.journey-section .tour-points>div:last-child:nth-child(3){grid-column:1/-1}.journey-section .tour-points small{font-size:14px}.journey-nav>a{font-size:14px;gap:7px}.onboarding-roles{padding-top:28px}}
@media(max-width:650px){
 .journey-nav{gap:3px;padding:6px;border-radius:12px;margin-bottom:16px}.journey-nav>a{flex-direction:column;gap:5px;font-size:12px;text-align:center;padding:7px 2px;min-width:0}.journey-nav>a>span{width:23px;height:23px;font-size:12px}
 .journey-section{border-radius:20px;padding:26px 18px;gap:28px;margin-bottom:18px;scroll-margin-top:100px}.journey-section .tour-copy>p:not(.overline){font-size:17px}.journey-section .tour-copy h2{font-size:30px}
 .journey-section .tour-points{grid-template-columns:1fr}.journey-section .tour-points>div:last-child:nth-child(3){grid-column:auto}.journey-section .tour-points b{font-size:16px}.section-next{font-size:15px;line-height:1.5}
 .journey-section .tour-caption{font-size:13px;line-height:1.6}.journey-section .tour-answer-fact{font-size:14px;line-height:1.5}.journey-section .scene-switch button{font-size:14px;padding:10px 8px}.journey-section .tour-audio-label>span{font-size:13px}
 .cabinet-invitation-art .glimpse-body{padding:15px}.cabinet-invitation-art .glimpse-tile{font-size:13px;padding:12px 10px 20px}.cabinet-invitation-art .glimpse-person small{display:block;font-size:12px}.cabinet-invitation-art .glimpse-person b{font-size:16px}.cabinet-invitation-art .glimpse-tile>small{font-size:12px}.cabinet-art-note{font-size:14px;margin-top:16px}.cabinet-invitation-art .glimpse-gain{font-size:12px}
 .practice-scroll-hint{display:block;font-size:13px;line-height:1.5;color:var(--ink-soft)}
 .practice-cards{grid-template-columns:1fr;gap:10px}.practice-card{grid-template-columns:1fr auto auto;gap:5px 8px;padding:15px}.practice-card .practice-label{grid-column:1;align-self:center;grid-row:1;font-size:15px;margin:0}.practice-card>b{grid-column:2;grid-row:1;font-size:29px}.practice-card>span:not(.practice-label){grid-column:3;grid-row:1;font-size:13px;align-self:center;padding:0}.practice-card>small{font-size:14px}.practice-label>.icon:last-child{display:none}
 .practice-modal-heading{align-items:flex-start;flex-direction:column;gap:12px}.practice-word-list{grid-template-columns:1fr}.practice-table{font-size:14px}.practice-table td,.practice-table th{padding:12px 9px}.practice-detail>.small-caption{font-size:14px}
 .parent-layout{grid-template-columns:1fr;gap:28px}.parent-document{padding:20px}.parent-editor>textarea{min-height:150px}.map-meaning{font-size:13px}.word-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.word-stats span{font-size:12px}
 .memory-observations>article{padding:17px}.memory-observations p{font-size:15px}.memory-observations h3{font-size:19px}.ability-meaning{font-size:17px}
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}