@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/roboto-latin-wght-normal-5.3.0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Dictionary Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/noto-serif-regular-main-2.015.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0300-036F, U+2000-2064, U+2066-206F;
}
@font-face {
  font-family: 'Dictionary Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/noto-serif-regular-rest-2.015.woff2) format('woff2');
  unicode-range: U+0100-024F, U+02B0-036F, U+1E00-1EFF, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20C0;
}
@font-face {
  font-family: 'Dictionary Noto Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/noto-serif-italic-main-2.015.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0300-036F, U+2000-2064, U+2066-206F;
}
@font-face {
  font-family: 'Dictionary Noto Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/noto-serif-italic-rest-2.015.woff2) format('woff2');
  unicode-range: U+0100-024F, U+02B0-036F, U+1E00-1EFF, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20BF;
}
@font-face {
  font-family: 'Dictionary Noto Serif';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/noto-serif-medium-italic-main-2.015.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0300-036F, U+2000-2064, U+2066-206F;
}
@font-face {
  font-family: 'Dictionary Noto Serif';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/noto-serif-medium-italic-rest-2.015.woff2) format('woff2');
  unicode-range: U+0100-024F, U+02B0-036F, U+1E00-1EFF, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20BF;
}
/* From plans/design/v104_extension/tokens.css (generated from docs/design-system.md). */
:root {
  --u: 1rem;
  --surface: #FCFBF9;
  --surface-container: #F1EFEA;
  --surface-pressed: #E7E3DB;
  --surface-marked: #EEE2BC;
  --surface-highlight: #D3CCBE;
  --text-primary: #1B1A17;
  --text-secondary: #55524C;
  --text-tertiary: #6E6A63;
  --text-disabled: #8A857C;
  --accent: #1B1A17;
  --on-accent: #DCEE7E;
  --action: #CFE562;
  --on-action: #1B1A17;
  --action-pressed: #B9CD59;
  --divider: #DFDBD3;
  --error: #8C2F1E;
  --answer-right: #2B6B3D;
  --answer-right-container: #E3EFE1;
  --answer-wrong: #8C2F1E;
  --answer-wrong-container: #F7E2DB;
  --edge-on-page: #45423D;
  --sheet: #FCFBF9;
  --scrim: #000000;
  --inverse-surface: #1B1A17;
  --on-inverse-surface: #FCFBF9;
  --inverse-accent: #CFE562;
  --icon-ground: #DCEE7E;
  --icon-ground-deep: #CFE562;
  --icon-mark: #1D1D1B;
  --icon-accent: #A50F18;
  --chip-edge: #1D1D1B;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --target: 32px;
  --font-ui: 'Dictionary Roboto', 'Dictionary Noto Sans Math', 'Dictionary Noto Serif', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-read: 'Dictionary Noto Serif', 'Dictionary Noto Sans Math', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-ipa: var(--font-ui);
  --t-word-size: calc(var(--u) * 2.0000);
  --t-word-lh: 1.2500;
  --t-word-weight: 600;
  --t-word-style: normal;
  --t-word-ls: -0.0156em;
  --t-word-family: var(--font-ui);
  --t-word-phrase-size: calc(var(--u) * 1.7500);
  --t-word-phrase-lh: 1.2857;
  --t-word-phrase-weight: 600;
  --t-word-phrase-style: normal;
  --t-word-phrase-ls: -0.0089em;
  --t-word-phrase-family: var(--font-ui);
  --t-word-block-size: calc(var(--u) * 1.7500);
  --t-word-block-lh: 1.2857;
  --t-word-block-weight: 600;
  --t-word-block-style: normal;
  --t-word-block-ls: -0.0089em;
  --t-word-block-family: var(--font-ui);
  --t-pos-inline-size: calc(var(--u) * 1.1250);
  --t-pos-inline-lh: 1.4444;
  --t-pos-inline-weight: 400;
  --t-pos-inline-style: italic;
  --t-pos-inline-ls: 0.0000em;
  --t-pos-inline-family: var(--font-ui);
  --t-pronunciation-size: calc(var(--u) * 1.0000);
  --t-pronunciation-lh: 1.5000;
  --t-pronunciation-weight: 400;
  --t-pronunciation-style: normal;
  --t-pronunciation-ls: 0.0000em;
  --t-pronunciation-family: var(--font-ipa);
  --t-variety-label-size: calc(var(--u) * 1.0000);
  --t-variety-label-lh: 1.5000;
  --t-variety-label-weight: 400;
  --t-variety-label-style: normal;
  --t-variety-label-ls: 0.0000em;
  --t-variety-label-family: var(--font-ui);
  --t-wordforms-size: calc(var(--u) * 0.9375);
  --t-wordforms-lh: 1.6000;
  --t-wordforms-weight: 400;
  --t-wordforms-style: normal;
  --t-wordforms-ls: 0.0000em;
  --t-wordforms-family: var(--font-ui);
  --t-wordform-link-size: calc(var(--u) * 0.9375);
  --t-wordform-link-lh: 1.6000;
  --t-wordform-link-weight: 500;
  --t-wordform-link-style: normal;
  --t-wordform-link-ls: 0.0000em;
  --t-wordform-link-family: var(--font-ui);
  --t-form-label-size: calc(var(--u) * 0.9375);
  --t-form-label-lh: 1.6000;
  --t-form-label-weight: 400;
  --t-form-label-style: normal;
  --t-form-label-ls: 0.0000em;
  --t-form-label-family: var(--font-ui);
  --t-toc-item-size: calc(var(--u) * 0.9375);
  --t-toc-item-lh: 1.6000;
  --t-toc-item-weight: 500;
  --t-toc-item-style: normal;
  --t-toc-item-ls: 0.0000em;
  --t-toc-item-family: var(--font-ui);
  --t-toc-number-size: calc(var(--u) * 0.9375);
  --t-toc-number-lh: 1.6000;
  --t-toc-number-weight: 400;
  --t-toc-number-style: normal;
  --t-toc-number-ls: 0.0000em;
  --t-toc-number-family: var(--font-ui);
  --t-pos-group-size: calc(var(--u) * 1.2500);
  --t-pos-group-lh: 1.4000;
  --t-pos-group-weight: 600;
  --t-pos-group-style: normal;
  --t-pos-group-ls: 0.0150em;
  --t-pos-group-family: var(--font-ui);
  --t-pos-group-count-size: calc(var(--u) * 0.9375);
  --t-pos-group-count-lh: 1.8667;
  --t-pos-group-count-weight: 400;
  --t-pos-group-count-style: normal;
  --t-pos-group-count-ls: 0.0000em;
  --t-pos-group-count-family: var(--font-ui);
  --t-pos-group-label-size: calc(var(--u) * 0.9375);
  --t-pos-group-label-lh: 1.8667;
  --t-pos-group-label-weight: 500;
  --t-pos-group-label-style: normal;
  --t-pos-group-label-ls: 0.0133em;
  --t-pos-group-label-family: var(--font-ui);
  --t-sense-marker-size: calc(var(--u) * 1.0625);
  --t-sense-marker-lh: 1.5294;
  --t-sense-marker-weight: 700;
  --t-sense-marker-style: normal;
  --t-sense-marker-ls: 0.0000em;
  --t-sense-marker-family: var(--font-ui);
  --t-meta-register-size: calc(var(--u) * 0.9375);
  --t-meta-register-lh: 1.6000;
  --t-meta-register-weight: 400;
  --t-meta-register-style: italic;
  --t-meta-register-ls: 0.0000em;
  --t-meta-register-family: var(--font-ui);
  --t-sense-meta-grammar-size: calc(var(--u) * 1.0625);
  --t-sense-meta-grammar-lh: 1.5294;
  --t-sense-meta-grammar-weight: 500;
  --t-sense-meta-grammar-style: normal;
  --t-sense-meta-grammar-ls: 0.0141em;
  --t-sense-meta-grammar-family: var(--font-ui);
  --t-sense-meta-register-size: calc(var(--u) * 1.0625);
  --t-sense-meta-register-lh: 1.5294;
  --t-sense-meta-register-weight: 400;
  --t-sense-meta-register-style: italic;
  --t-sense-meta-register-ls: 0.0000em;
  --t-sense-meta-register-family: var(--font-ui);
  --t-sense-meta-register-strong-size: calc(var(--u) * 1.0625);
  --t-sense-meta-register-strong-lh: 1.5294;
  --t-sense-meta-register-strong-weight: 700;
  --t-sense-meta-register-strong-style: italic;
  --t-sense-meta-register-strong-ls: 0.0141em;
  --t-sense-meta-register-strong-family: var(--font-ui);
  --t-definition-size: calc(var(--u) * 1.0625);
  --t-definition-lh: 1.5294;
  --t-definition-weight: 400;
  --t-definition-style: normal;
  --t-definition-ls: 0.0000em;
  --t-definition-family: var(--font-read);
  --t-example-size: calc(var(--u) * 1.0000);
  --t-example-lh: 1.5625;
  --t-example-weight: 400;
  --t-example-style: italic;
  --t-example-ls: 0.0000em;
  --t-example-family: var(--font-read);
  --t-example-emphasis-size: calc(var(--u) * 1.0000);
  --t-example-emphasis-lh: 1.5625;
  --t-example-emphasis-weight: 500;
  --t-example-emphasis-style: italic;
  --t-example-emphasis-ls: 0.0000em;
  --t-example-emphasis-family: var(--font-read);
  --t-citation-year-size: calc(var(--u) * 1.0000);
  --t-citation-year-lh: 1.5625;
  --t-citation-year-weight: 400;
  --t-citation-year-style: normal;
  --t-citation-year-ls: 0.0000em;
  --t-citation-year-family: var(--font-ui);
  --t-sense-pattern-size: calc(var(--u) * 1.0000);
  --t-sense-pattern-lh: 1.5625;
  --t-sense-pattern-weight: 400;
  --t-sense-pattern-style: normal;
  --t-sense-pattern-ls: 0.0000em;
  --t-sense-pattern-family: var(--font-read);
  --t-phrase-size: calc(var(--u) * 1.0000);
  --t-phrase-lh: 1.5000;
  --t-phrase-weight: 600;
  --t-phrase-style: normal;
  --t-phrase-ls: 0.0000em;
  --t-phrase-family: var(--font-ui);
  --t-phrase-gloss-size: calc(var(--u) * 1.0000);
  --t-phrase-gloss-lh: 1.5000;
  --t-phrase-gloss-weight: 400;
  --t-phrase-gloss-style: normal;
  --t-phrase-gloss-ls: 0.0000em;
  --t-phrase-gloss-family: var(--font-ui);
  --t-input-size: calc(var(--u) * 1.1250);
  --t-input-lh: 1.4444;
  --t-input-weight: 400;
  --t-input-style: normal;
  --t-input-ls: 0.0000em;
  --t-input-family: var(--font-ui);
  --t-suggestion-word-size: calc(var(--u) * 1.0625);
  --t-suggestion-word-lh: 1.4118;
  --t-suggestion-word-weight: 500;
  --t-suggestion-word-style: normal;
  --t-suggestion-word-ls: 0.0000em;
  --t-suggestion-word-family: var(--font-ui);
  --t-suggestion-gloss-size: calc(var(--u) * 0.8750);
  --t-suggestion-gloss-lh: 1.4286;
  --t-suggestion-gloss-weight: 400;
  --t-suggestion-gloss-style: normal;
  --t-suggestion-gloss-ls: 0.0000em;
  --t-suggestion-gloss-family: var(--font-ui);
  --t-suggestion-note-size: calc(var(--u) * 0.8750);
  --t-suggestion-note-lh: 1.4286;
  --t-suggestion-note-weight: 400;
  --t-suggestion-note-style: italic;
  --t-suggestion-note-ls: 0.0000em;
  --t-suggestion-note-family: var(--font-ui);
  --t-suggestion-meta-size: calc(var(--u) * 1.0625);
  --t-suggestion-meta-lh: 1.4118;
  --t-suggestion-meta-weight: 400;
  --t-suggestion-meta-style: italic;
  --t-suggestion-meta-ls: 0.0000em;
  --t-suggestion-meta-family: var(--font-ui);
  --t-row-variety-label-size: calc(var(--u) * 0.9375);
  --t-row-variety-label-lh: 1.6000;
  --t-row-variety-label-weight: 400;
  --t-row-variety-label-style: normal;
  --t-row-variety-label-ls: 0.0000em;
  --t-row-variety-label-family: var(--font-ui);
  --t-section-title-size: calc(var(--u) * 0.9375);
  --t-section-title-lh: 1.4667;
  --t-section-title-weight: 600;
  --t-section-title-style: normal;
  --t-section-title-ls: 0.0400em;
  --t-section-title-family: var(--font-ui);
  --t-card-question-size: calc(var(--u) * 0.9375);
  --t-card-question-lh: 1.4667;
  --t-card-question-weight: 600;
  --t-card-question-style: normal;
  --t-card-question-ls: 0.0133em;
  --t-card-question-family: var(--font-ui);
  --t-message-size: calc(var(--u) * 1.0625);
  --t-message-lh: 1.5294;
  --t-message-weight: 400;
  --t-message-style: normal;
  --t-message-ls: 0.0000em;
  --t-message-family: var(--font-ui);
  --t-message-subdued-size: calc(var(--u) * 1.0625);
  --t-message-subdued-lh: 1.5294;
  --t-message-subdued-weight: 400;
  --t-message-subdued-style: normal;
  --t-message-subdued-ls: 0.0000em;
  --t-message-subdued-family: var(--font-ui);
  --t-answer-verdict-size: calc(var(--u) * 1.0625);
  --t-answer-verdict-lh: 1.5294;
  --t-answer-verdict-weight: 600;
  --t-answer-verdict-style: normal;
  --t-answer-verdict-ls: 0.0000em;
  --t-answer-verdict-family: var(--font-ui);
  --t-label-size: calc(var(--u) * 0.8125);
  --t-label-lh: 1.3846;
  --t-label-weight: 400;
  --t-label-style: normal;
  --t-label-ls: 0.0154em;
  --t-label-family: var(--font-ui);
  --t-attribution-size: calc(var(--u) * 0.8125);
  --t-attribution-lh: 1.5385;
  --t-attribution-weight: 400;
  --t-attribution-style: normal;
  --t-attribution-ls: 0.0000em;
  --t-attribution-family: var(--font-ui);
  --t-button-size: calc(var(--u) * 1.0000);
  --t-button-lh: 1.5000;
  --t-button-weight: 600;
  --t-button-style: normal;
  --t-button-ls: 0.0125em;
  --t-button-family: var(--font-ui);
  --t-tile-letter-size: calc(var(--u) * 1.2500);
  --t-tile-letter-lh: 1.4000;
  --t-tile-letter-weight: 500;
  --t-tile-letter-style: normal;
  --t-tile-letter-ls: 0.0000em;
  --t-tile-letter-family: var(--font-ui);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #14161A;
    --surface-container: #1E2127;
    --surface-pressed: #282C33;
    --surface-marked: #2E2D21;
    --surface-highlight: #3B424B;
    --text-primary: #E8E6E1;
    --text-secondary: #B3AFA8;
    --text-tertiary: #948F87;
    --text-disabled: #6B7178;
    --accent: #CFE562;
    --on-accent: #14161A;
    --action: #434A2C;
    --on-action: #CFE562;
    --action-pressed: #545D32;
    --divider: #333840;
    --error: #F0B4A4;
    --answer-right: #8FD3A0;
    --answer-right-container: #1B3124;
    --answer-wrong: #F0B4A4;
    --answer-wrong-container: #3C2421;
    --edge-on-page: #BFBCB5;
    --sheet: #1E2127;
    --scrim: #000000;
    --inverse-surface: #FCFBF9;
    --on-inverse-surface: #1B1A17;
    --inverse-accent: #1B1A17;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --surface: #14161A;
    --surface-container: #1E2127;
    --surface-pressed: #282C33;
    --surface-marked: #2E2D21;
    --surface-highlight: #3B424B;
    --text-primary: #E8E6E1;
    --text-secondary: #B3AFA8;
    --text-tertiary: #948F87;
    --text-disabled: #6B7178;
    --accent: #CFE562;
    --on-accent: #14161A;
    --action: #434A2C;
    --on-action: #CFE562;
    --action-pressed: #545D32;
    --divider: #333840;
    --error: #F0B4A4;
    --answer-right: #8FD3A0;
    --answer-right-container: #1B3124;
    --answer-wrong: #F0B4A4;
    --answer-wrong-container: #3C2421;
    --edge-on-page: #BFBCB5;
    --sheet: #1E2127;
    --scrim: #000000;
    --inverse-surface: #FCFBF9;
    --on-inverse-surface: #1B1A17;
    --inverse-accent: #1B1A17;
    color-scheme: dark;
}
@media (pointer: coarse) {
  :root { --target: 48px; }
}
/*
 * The article and the states around it, shared by the card at the selection
 * (closed shadow root, tokens on :host) and the side panel (tokens on :root).
 * Every number is a token of plans/design/v104_extension/tokens.css
 * (docs/design-system.md § 2, § 3.2, § 4.1, § 5.40, § 5.42-5.44); none is new.
 */

/* The font stacks (--font-ui, --font-read, --font-ipa) are tokens.css's alone (docs/design-system.md § 3.1,
   «Покрытие гарнитур расширения»): the packaged families first, registered under names of their own by
   ui/fonts.ts, so a page that uses "Roboto" or "Noto Serif" itself is not touched. */

.t-word { font: var(--t-word-style) var(--t-word-weight) var(--t-word-size) / var(--t-word-lh) var(--t-word-family); letter-spacing: var(--t-word-ls); }
.t-word-phrase { font: var(--t-word-phrase-style) var(--t-word-phrase-weight) var(--t-word-phrase-size) / var(--t-word-phrase-lh) var(--t-word-phrase-family); letter-spacing: var(--t-word-phrase-ls); }
.t-word-block { font: var(--t-word-block-style) var(--t-word-block-weight) var(--t-word-block-size) / var(--t-word-block-lh) var(--t-word-block-family); letter-spacing: var(--t-word-block-ls); }
.t-pronunciation { font: var(--t-pronunciation-style) var(--t-pronunciation-weight) var(--t-pronunciation-size) / var(--t-pronunciation-lh) var(--t-pronunciation-family); }
.t-variety { font: var(--t-variety-label-style) var(--t-variety-label-weight) var(--t-variety-label-size) / var(--t-variety-label-lh) var(--t-variety-label-family); color: var(--text-secondary); }
.t-toc { font: var(--t-toc-item-style) var(--t-toc-item-weight) var(--t-toc-item-size) / var(--t-toc-item-lh) var(--t-toc-item-family); }
.t-toc-number { font: var(--t-toc-number-style) var(--t-toc-number-weight) var(--t-toc-number-size) / var(--t-toc-number-lh) var(--t-toc-number-family); color: var(--text-secondary); }
.t-pos-group { font: var(--t-pos-group-style) var(--t-pos-group-weight) var(--t-pos-group-size) / var(--t-pos-group-lh) var(--t-pos-group-family); letter-spacing: var(--t-pos-group-ls); }
.t-pos-group-label { font: var(--t-pos-group-label-style) var(--t-pos-group-label-weight) var(--t-pos-group-label-size) / var(--t-pos-group-label-lh) var(--t-pos-group-label-family); letter-spacing: var(--t-pos-group-label-ls); color: var(--text-tertiary); }
.t-pos-group-count { font: var(--t-pos-group-count-style) var(--t-pos-group-count-weight) var(--t-pos-group-count-size) / var(--t-pos-group-count-lh) var(--t-pos-group-count-family); color: var(--text-secondary); }
.t-sense-marker { font: var(--t-sense-marker-style) var(--t-sense-marker-weight) var(--t-sense-marker-size) / var(--t-sense-marker-lh) var(--t-sense-marker-family); color: var(--text-secondary); }
.t-definition { font: var(--t-definition-style) var(--t-definition-weight) var(--t-definition-size) / var(--t-definition-lh) var(--t-definition-family); }
.t-meta-register { font: var(--t-sense-meta-register-style) var(--t-sense-meta-register-weight) var(--t-sense-meta-register-size) / var(--t-sense-meta-register-lh) var(--t-sense-meta-register-family); color: var(--text-secondary); }
.t-meta-grammar { font: var(--t-sense-meta-grammar-style) var(--t-sense-meta-grammar-weight) var(--t-sense-meta-grammar-size) / var(--t-sense-meta-grammar-lh) var(--t-sense-meta-grammar-family); letter-spacing: var(--t-sense-meta-grammar-ls); color: var(--text-secondary); }
.t-example { font: var(--t-example-style) var(--t-example-weight) var(--t-example-size) / var(--t-example-lh) var(--t-example-family); color: var(--text-secondary); }
.t-citation-year { font: var(--t-citation-year-style) var(--t-citation-year-weight) var(--t-citation-year-size) / var(--t-citation-year-lh) var(--t-citation-year-family); color: var(--text-tertiary); }
.t-example-emphasis { font-weight: var(--t-example-emphasis-weight); color: var(--text-primary); }
.t-wordforms { font: var(--t-wordforms-style) var(--t-wordforms-weight) var(--t-wordforms-size) / var(--t-wordforms-lh) var(--t-wordforms-family); }
.t-section-title { font: var(--t-section-title-style) var(--t-section-title-weight) var(--t-section-title-size) / var(--t-section-title-lh) var(--t-section-title-family); letter-spacing: var(--t-section-title-ls); color: var(--text-secondary); }
.t-message { font: var(--t-message-style) var(--t-message-weight) var(--t-message-size) / var(--t-message-lh) var(--t-message-family); }
.t-message-subdued { font: var(--t-message-subdued-style) var(--t-message-subdued-weight) var(--t-message-subdued-size) / var(--t-message-subdued-lh) var(--t-message-subdued-family); color: var(--text-tertiary); }
.t-attribution { font: var(--t-attribution-style) var(--t-attribution-weight) var(--t-attribution-size) / var(--t-attribution-lh) var(--t-attribution-family); color: var(--text-tertiary); }
.t-label { font: var(--t-label-style) var(--t-label-weight) var(--t-label-size) / var(--t-label-lh) var(--t-label-family); letter-spacing: var(--t-label-ls); color: var(--text-tertiary); }
.t-suggestion-word { font: var(--t-suggestion-word-style) var(--t-suggestion-word-weight) var(--t-suggestion-word-size) / var(--t-suggestion-word-lh) var(--t-suggestion-word-family); }
.t-suggestion-gloss { font: var(--t-suggestion-gloss-style) var(--t-suggestion-gloss-weight) var(--t-suggestion-gloss-size) / var(--t-suggestion-gloss-lh) var(--t-suggestion-gloss-family); color: var(--text-secondary); }
.t-suggestion-note { font: var(--t-suggestion-note-style) var(--t-suggestion-note-weight) var(--t-suggestion-note-size) / var(--t-suggestion-note-lh) var(--t-suggestion-note-family); color: var(--text-secondary); }
.t-button { font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--t-button-family); letter-spacing: var(--t-button-ls); }
.t-input { font: var(--t-input-style) var(--t-input-weight) var(--t-input-size) / var(--t-input-lh) var(--t-input-family); }

.article, .state { color: var(--text-primary); }

/* Readings row (replaces origin-line when there are two readings or more; § 5.43): one line that scrolls sideways
   without a scrollbar, as the contents line (§ 5.40), one target (32 px) high whatever the number of readings; a
   32 px fade in `surface` on the side where it goes on, out in 120 ms when it reaches that end (render.ts
   `rowFades`). The contents line below the word is the same row (§ 5.43): `.toc-row`, `.toc-fade`. */
/* A scrolling row clips at its padding box, and the focus ring of a reading or a contents item (2 px, 2 px off its
   target: 4 px out) would be cut on three sides. The row keeps 4 px of padding round its items for the ring and takes
   it back with negative margins, so the ring shows whole and the row stands where it stood (the head of `a` 136 px at
   16 px). */
.readings-row { position: relative; min-width: 0; margin: -4px -4px calc(var(--space-3) - 4px); }
.readings { display: flex; flex-wrap: nowrap; gap: 0 var(--space-4); overflow-x: auto; scrollbar-width: none; margin: 0; padding: 4px; list-style: none; white-space: nowrap; }
.readings::-webkit-scrollbar { display: none; }
.readings-fade, .toc-fade { position: absolute; top: 0; bottom: 0; width: 32px; pointer-events: none; opacity: 0; transition: opacity 120ms linear; }
.readings-fade.start, .toc-fade.start { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.readings-fade.end, .toc-fade.end { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.readings-row.fade-start .readings-fade.start, .readings-row.fade-end .readings-fade.end,
.toc-row.fade-start .toc-fade.start, .toc-row.fade-end .toc-fade.end { opacity: 1; }
/* The keyboard's focus on an item too wide for a fade and a ring on both sides: the fades step aside (§ 5.43). */
.readings-row.focus-wide .readings-fade.start, .readings-row.focus-wide .readings-fade.end,
.toc-row.focus-wide .toc-fade.start, .toc-row.focus-wide .toc-fade.end { opacity: 0; }
:where(.reading) { all: unset; }
/* A reading is never wider than its row (§ 5.43): at most the row's content box (the row less the 4 px for the ring on
   each side), its whole label cut by an ellipsis when that is too little (the whole line in its `title`, render.ts
   `cutTitles`). One line of the target's height, or of the type's own line where that is taller (32 px text); the
   2 px line of the current reading stands inside the target (136 px head at 16 px). */
.reading { display: block; flex: none; box-sizing: border-box; max-width: 100%; overflow: clip; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; min-height: var(--target); line-height: max(calc(var(--target) - 2px), calc(var(--t-toc-item-lh) * 1em)); }
.reading[aria-current="true"] { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.reading:focus-visible, .link:focus-visible, .word-link:focus-visible, .row:focus-visible, .icon-button:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.origin-line { margin: 0 0 var(--space-3); color: var(--text-secondary); }

/* Expression in this sentence (F5), above the word's article. */
.expression { margin: 0 0 var(--space-5); padding: 0 0 var(--space-3); }
.expression .row { width: 100%; }

.head { display: flex; flex-direction: column; gap: 0; }
/* The word's line carries its pronunciation (design spec «Раскладка»: `run /ɹʌn/ 🔈`; design-system § 5.6): the rows
   stand on the word's baseline, `header-inline-gap` 12 after it, when the word is one line and the rows fit beside it
   whole; else the rows go under the word as one piece, `own` 4 below it (a flex item breaks to the next line by its
   whole max-content width, then wraps its rows inside). The word line of a word after the first is laid out the same
   way (`.word-block-line`). */
.word-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.word-line .word { overflow-wrap: anywhere; min-width: 0; }
.word-line .pron { min-width: 0; }
.pron { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.pron-item { display: inline-flex; align-items: center; gap: 6px; }
:where(.speak) { all: unset; }
.speak { cursor: pointer; width: var(--target); height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); border-radius: 4px; }
.speak[hidden] { display: inline-flex; visibility: hidden; }
.speak:hover { background: var(--surface-pressed); }

/* The contents line is a row as the readings row is (§ 5.43, see `.readings-row`): room for the focus ring of its items
   in its padding, taken back by the wrapper's negative margins, and the fades at the wrapper's edges. */
.toc-row { position: relative; min-width: 0; margin: calc(var(--space-3) - 4px) -4px -4px; }
.toc { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 4px; list-style: none; white-space: nowrap; }
.toc::-webkit-scrollbar { display: none; }
.toc .link { color: var(--text-primary); }
/* The connector of the contents line (§ 5.10): `·` in text-tertiary between two items, never at an end. */
.toc-sep { white-space: pre; padding: 0 var(--space-1); color: var(--text-tertiary); }
/* A contents item is never wider than its row (§ 5.43, as a reading): at most the row's content box, its name cut by
   an ellipsis when that is too little, the separator and the count kept (the whole item in the name's `title`, render.ts
   `cutTitles`). The name is the box that cuts, so its focus ring stays outside the cut. */
.toc > li { display: flex; flex: none; align-items: baseline; max-width: 100%; }
.toc .link { display: block; min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.toc-sep, .toc > li > .t-toc-number { flex: none; white-space: pre; }

.part { margin-top: var(--space-5); }
.part:first-child { margin-top: 0; }
.part-title { margin: 0 0 var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); }
.senses { margin: 0; padding: 0; list-style: none; }
.sense { display: grid; grid-template-columns: 16px 1fr; column-gap: 0; margin-top: var(--space-3); }
.sense:first-child { margin-top: 0; }
.sense-body { min-width: 0; overflow-wrap: break-word; }
.examples { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.example { margin-top: var(--space-1); }
/* A use of a meaning (§ sense-use): its own paragraph after the meaning's examples, `own` 4 apart. */
.use { margin-top: var(--space-1); }

/* The word line over the groups of a word after the first (§ 5.39): `part` 20 above it, `heading` 12 below it. */
.word-block-line { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.word-block-line:first-child { margin-top: 0; }
.word-block-line + .part { margin-top: var(--space-3); }

/* A word of the text that leads to a page (as the app makes them links): the text's own face; the pointer and an
   underline under it say it opens. It is a link of the keyboard too (Tab, Enter), with the focus ring of every
   target. */
.word-link { cursor: pointer; }
.word-link:hover { text-decoration: underline; }

.forms, .phrases, .other-cards { margin-top: var(--space-5); }

/* The line in place of a part of an article drawn in parts that could not be drawn (plans/v104, «Дополнение 2»,
   раздел 1): `message-subdued` (.t-message-subdued), a meaning's step above it. */
.draw-failure { margin: var(--space-3) 0 0; }
.draw-failure:first-child { margin-top: 0; }
.forms .t-wordforms { color: var(--text-secondary); }

:where(.link) { all: unset; }
.link { cursor: pointer; color: var(--accent); font-weight: 500; }
.link:hover { text-decoration: underline; }

.rows { margin: 0; padding: 0; list-style: none; }
:where(.row) { all: unset; }
.row { box-sizing: border-box; cursor: pointer; display: block; width: 100%; padding: var(--space-2) 0; min-height: var(--target); }
.row:hover { background: var(--surface-pressed); transition: background 80ms; }
.row .t-suggestion-word { color: var(--text-primary); }
/* The definition of a line of a list (§ 5.3, line 2; v140 q2 «A»): one line, cut by an ellipsis at the row's edge. The
   engine gives the whole text and it stays whole in the DOM; the cut is only the drawing. The site's lines (src/lines.mjs,
   /lists) read this file too. A `.t-suggestion-gloss` outside a row (the account's captions) keeps wrapping. */
.row > .t-suggestion-gloss { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.state { display: flex; flex-direction: column; gap: var(--space-2); }
.state .error { color: var(--error); }
/* A refusal (§ 5.2a, § 5.43): the fact, then each further paragraph through 4, the button through 20. */
.state.failure { gap: 0; }
.state.failure > p { margin: 0; }
.state.failure > p + p { margin-top: var(--space-1); }
.state.failure > .button { margin-top: var(--space-5); }
/* plans/v134, § 5.43 «Нет связи»: `Try again` and, 8 after it, the text button `Settings`; a row that does not fit wraps. */
.state.failure > .state-actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.state-actions > .button { margin-top: 0; }
:where(.text-button) { all: unset; }
.text-button { box-sizing: border-box; cursor: pointer; color: var(--accent); min-height: 32px; padding: 0 var(--space-2); display: inline-flex; align-items: center; }
.text-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .text-button { min-height: 48px; } }
/* plans/v134, § 5.44d: the download hint, variant E -- a bar flush over the bottom of its surface, `surface-container`,
   a 1 px `edge-on-page` top edge, no shadow, no motion. The surface sets its position, corners and padding. */
.download-hint { box-sizing: border-box; background: var(--surface-container); border-top: 1px solid var(--edge-on-page); color: var(--text-primary); }
.download-hint .hint-text { margin: 0; color: var(--text-primary); }
.download-hint .hint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-3); }
.download-hint .button { margin-top: 0; white-space: normal; }
.download-hint .text-button { white-space: normal; }
.download-hint .hint-not-now { color: var(--text-secondary); }
.download-hint .hint-never { color: var(--text-tertiary); font-weight: 400; }
.download-hint .text-button:hover, .download-hint .text-button:active { background: var(--surface-pressed); }
.state .miss-title { margin-top: var(--space-4); }

.progress { height: 4px; border-radius: 2px; background: var(--surface-container); overflow: hidden; margin-top: var(--space-4); }
.progress > div { height: 100%; background: var(--accent); transition: width 120ms linear; }

:where(.button) { all: unset; }
/* The filled button grows with its label (§ 5.43): 40 (48 at pointer: coarse) at the reader's font size, taller when the
   label is (at 32 px its line is 48). */
.button { box-sizing: border-box; cursor: pointer; align-self: flex-start; height: auto; min-height: 40px; padding: var(--space-2) var(--space-5); border-radius: 20px; background: var(--action); color: var(--on-action); display: inline-flex; align-items: center; margin-top: var(--space-2); }
/* The main button is tonal (v108, design-system § 2.3): action / on-action; hover and pressed: action-pressed,
   80 ms in, 120 ms out (design spec, "Кнопка"; § 7). Links and focus rings stay on accent. */
.button { transition: background-color 120ms linear; }
.button:hover, .button:active { background: var(--action-pressed); transition-duration: 80ms; }
@media (pointer: coarse) { .button { min-height: 48px; } }

:where(.icon-button) { all: unset; }
.icon-button { cursor: pointer; width: var(--target); height: var(--target); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); border-radius: 50%; flex: none; }
.icon-button:hover { background: var(--surface-pressed); }
.icon-button svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
/* sekirov.com, stage A. Numbers are tokens of docs/design-system.md (tokens.css of v104, prepended by
 * the build) and the site values of § 5.45 / § 11: breakpoints 45em and 64em, page container 35rem.
 * Spacing is px (1 dp = 1 px), type is calc(var(--u) * sp / 16) with --u = 1rem (§ 11). */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--t-message-size);
  line-height: var(--t-message-lh);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Brand row W1: 56 px, the mark 32 px and the name in `button` 16/600. */
.brand {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--space-4);
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target);
  color: var(--text-primary);
  border-radius: 8px;
}
.brand-link:hover { text-decoration: none; }
.brand-mark { display: block; width: 32px; height: 32px; border-radius: 7px; }
.brand-name {
  margin: 0;
  font-family: var(--t-button-family);
  font-size: var(--t-button-size);
  line-height: var(--t-button-lh);
  font-weight: var(--t-button-weight);
  letter-spacing: var(--t-button-ls);
}

/* The page column: 16 px fields at 360, 20 px from 412 (UI, «Масштаб»); the text column is 35 x the
 * browser font (§ 11: `35em` of the document, 560 px at 16 px), so rem, not the em of a 17 px element,
 * plus the 20 px fields; centred. */
.page {
  max-width: calc(35rem + 2 * var(--space-5));
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) 0;
}
.site-footer {
  max-width: calc(35rem + 2 * var(--space-5));
  margin-inline: auto;
  padding: var(--space-10) var(--space-4) var(--space-6);
}
@media (min-width: 25em) {
  .brand { padding-inline: var(--space-5); }
  .page, .site-footer { padding-inline: var(--space-5); }
}
@media (min-width: 64em) {
  .brand { padding-inline: var(--space-8); }
}

/* Page heading `word` 32/40 600; section headings `pos-group` 20/600, 32 above and 12 to the text. */
.page-title {
  margin: 0 0 var(--space-3);
  font-size: var(--t-word-size);
  line-height: var(--t-word-lh);
  font-weight: var(--t-word-weight);
  letter-spacing: var(--t-word-ls);
}
.section-heading {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--t-pos-group-size);
  line-height: var(--t-pos-group-lh);
  font-weight: var(--t-pos-group-weight);
  letter-spacing: var(--t-pos-group-ls);
}
.section-title {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--t-section-title-size);
  line-height: var(--t-section-title-lh);
  font-weight: var(--t-section-title-weight);
  letter-spacing: var(--t-section-title-ls);
}
.page p { margin: 0 0 var(--space-3); }
.prose strong { font-weight: 600; }
.prose a { overflow-wrap: anywhere; }
/* A long token of the policy (RECEIVE_BOOT_COMPLETED) breaks inside rather than widen the page at 360 px
 * with a large browser font. */
.prose p { overflow-wrap: anywhere; }

.message, .lead, .subtitle { margin: 0 0 var(--space-3); }
.subtitle { color: var(--text-secondary); margin-bottom: var(--space-6); }

/* Home cards (W6): surface-container, radius 16, field 20, 16 between cards. */
.cards { display: flex; flex-direction: column; gap: var(--space-4); }
.card {
  background: var(--surface-container);
  border-radius: 16px;
  padding: var(--space-5);
}
.card-title {
  margin: 0;
  font-size: var(--t-pos-group-size);
  line-height: var(--t-pos-group-lh);
  font-weight: var(--t-pos-group-weight);
  letter-spacing: var(--t-pos-group-ls);
}
.card-text { margin: 0; }

/* `link-row` § 5.13: button 16/600 accent, arrow 16 after 8, field 12 at any scale, target >= 48. */
.link-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-block: var(--space-3);
  font-size: var(--t-button-size);
  line-height: var(--t-button-lh);
  font-weight: var(--t-button-weight);
  letter-spacing: var(--t-button-ls);
}
.link-row:hover { text-decoration: none; }
.link-row:hover > :first-child, .link-row:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.arrow { width: 16px; text-align: center; }
.card .link-row { margin-bottom: calc(-1 * var(--space-3)); }
.link-rows { margin-top: var(--space-10); }

/* The action of a home card (plans/v142 § 6, the owner's word 2026-10-26): the store buttons of /apps in place of the
 * badges, `group` 12 under the card's line, then the link row; the card's layout is as before, at the start of the
 * line at every width (the card has a second action, its link row, so § 5.45b's centring of a single action does not
 * apply). What stands by the device and the browser is the rules of /apps below, shared. */
.card-act { margin-top: var(--space-3); }

/* Play frames ribbon (UI, «/android»): 108 px wide on a phone, 180 px from 45em; it scrolls inside. */
.frames {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
.frame {
  flex: 0 0 auto;
  width: 108px;
  height: auto;
  border-radius: 8px;
  background: var(--surface-container);
}
@media (min-width: 45em) { .frame { width: 180px; } }

.bullets { margin: 0 0 var(--space-3); padding-left: 1.25em; }
.bullets li { margin-bottom: var(--space-1); }
.bullets li::marker { color: var(--text-secondary); }

/* About: `appearance-row` § 5.18. */
.appearance { margin-top: var(--space-6); }
.appearance [role="radiogroup"] { margin-top: var(--space-1); }
.appearance-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--t-suggestion-word-size);
  line-height: var(--t-suggestion-word-lh);
  font-weight: var(--t-suggestion-word-weight);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms linear;
}
.appearance-row:active { background: var(--surface-pressed); transition-duration: 80ms; }
.appearance-check { flex: 0 0 auto; display: none; }
.appearance-row[aria-checked="true"] { color: var(--accent); }
.appearance-row[aria-checked="true"] .appearance-check { display: block; }

/* Footer: links `wordforms` accent 500 on a 48 px line (target), trademark lines `attribution`. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 48px;
  font-size: var(--t-wordforms-size);
  line-height: var(--t-wordforms-lh);
  font-weight: 500;
}
.footer-links a { display: inline-flex; align-items: center; min-height: var(--target); }
.footer-links .dot { color: var(--text-tertiary); white-space: pre; }
.trademarks {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: var(--t-attribution-size);
  line-height: var(--t-attribution-lh);
}

/* ActionButton (§ 5.28): >= 48, radius `radius-m` 12, field 12 x 20, `button` 16/600 on-action on action,
 * action-pressed under the pointer 80 / 120 ms. After the press, until the page answers: text-disabled, no fill, a
 * 1 px divider line, the same size, 0 ms (§ 5.31 Restart). Here rather than in stage-b.css since v142: the store
 * buttons of /apps stand on every build. */
.action-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: 12px;
  background: var(--action);
  color: var(--on-action);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--t-button-family);
  letter-spacing: var(--t-button-ls);
  cursor: pointer;
  transition: background-color 120ms linear;
}
.action-button:hover, .action-button:active { background: var(--action-pressed); transition-duration: 80ms; }
/* A link drawn as the button (the stores of /apps, plans/v142 § 1) keeps no underline of `a:hover`. */
a.action-button:hover { text-decoration: none; }
.action-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.action-button[aria-disabled="true"], .action-button[aria-disabled="true"]:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--divider);
  color: var(--text-disabled);
  cursor: default;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .appearance-row, .action-button { transition: none; }
}

/* A heading for screen readers and search only (`.vh`, docs/design-system.md § 5.45b, «Видимый заголовок
 * страницы»): /apps has no visible title, the names of the products say what the page is. */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The bar's `Apps` (`bar-link`, § 5.47: 15/600 text-primary, target 40 with a mouse and 48 by touch, field 12;
 * the current page a 2 px accent line under the text -- a form, not a colour). From 64 em only: a phone's bar
 * carries no link, its footer does (v105 «`/apps`»). */
.bar-links { display: none; }
@media (min-width: 64em) {
  .bar-links { display: flex; gap: var(--space-1); margin-left: auto; }
}
.bar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: var(--t-section-title-size);
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.0125em;
  white-space: nowrap;
}
@media (pointer: coarse) { .bar-link { min-height: 48px; border-radius: 24px; } }
.bar-link:hover { text-decoration: none; background: var(--surface-pressed); }
.bar-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* /apps, v142 (plans/v142_apps_page_buttons.md; docs/design-system.md § 5.47 «/apps, v142», the site's radius ladder):
 * the first card 24 under the bar (the <h1> is hidden); each product its own card -- surface-container, `radius-l` 16,
 * the cards `block` 24 apart -- its name `heading` 20/28 600, its lines `body` 17/26 12 apart, its loop and its action.
 * A phone: one column, field 16, heading → lines → loop → 12 → action. A computer: field `block` 24, the loop beside
 * the text, the first card's on the left (`600px | 1fr`) and the second's on the right (`1fr | 600px`), 24 between. */
.apps-page { padding-top: var(--space-6); }
.apps-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); container: apps / inline-size; }
.apps-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "demo" "act";
  min-width: 0;
  background: var(--surface-container);
  border-radius: 16px;
  padding: var(--space-4);
  scroll-margin-top: var(--space-6);
}
.apps-head { grid-area: head; min-width: 0; }
.apps-demo { grid-area: demo; min-width: 0; }
.apps-act { grid-area: act; min-width: 0; }
.apps-name {
  margin: 0;
  font-size: var(--t-pos-group-size);
  line-height: var(--t-pos-group-lh);
  font-weight: var(--t-pos-group-weight);
  letter-spacing: var(--t-pos-group-ls);
}
.page .apps-line { margin: var(--space-3) 0 0; }
.page .apps-ios { color: var(--text-secondary); }

/* The loops in the page's frame (§§ 3, 5, `a1i` B): `radius-m` 12, a 1 px `divider` line, the `surface` behind,
 * no shadow (the site has no elevation token). The extension's window takes the card's width on a phone and the
 * column of 600 on a computer; the app's screen is 220 wide on a phone and 252 on a computer, centred. */
.apps-demo { margin: var(--space-3) 0 0; }
.apps-demo picture { display: block; }
.apps-demo-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--divider);
  background: var(--surface);
}
.apps-demo-app .apps-demo-img { width: 220px; margin-inline: auto; }

/* The actions (§ 1): the site's ActionButton (`radius-m` 12, >= 48, 12 × 20, `button` 16/600), `group` 12 under the
 * loop; on a phone centred (`single-action`, § 5.45b). */
.apps-act { margin-top: var(--space-3); }
.apps-act .action-button, .card-act .action-button { max-width: 100%; }

/* The app's QR code beside its caption, 12 under the button and 12 apart (§ 2, q3 B): 120, `radius-s` 8, dark modules
 * on a white square in both themes (its own fill), the quiet zone inside. A computer only. */
.apps-scan { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.apps-qr { flex: none; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.apps-qr svg { display: block; width: 120px; height: 120px; }
.page .apps-cap {
  margin: 0;
  max-width: 16rem;
  color: var(--text-secondary);
  font-size: var(--t-wordforms-size);
  line-height: var(--t-wordforms-lh);
}

/* The heading and the button of the extension's card by the reader's browser (§ 4): every text is in the HTML, the
 * one of <html data-browser> shows (src/site.js, set in <head>); `any` -- `Browser extension` and `Get it in the
 * Chrome Web Store` -- without the script, in a Chromium browser not verified and without Chromium. On a phone the
 * heading is `Chrome extension`. */
.by-browser { display: none; }
.by-browser[data-for="any"] { display: inline; }
:root[data-browser="chrome"] .by-browser[data-for="any"], :root[data-browser="edge"] .by-browser[data-for="any"],
:root[data-browser="opera"] .by-browser[data-for="any"], :root[data-browser="yandex"] .by-browser[data-for="any"],
:root[data-browser="brave"] .by-browser[data-for="any"] { display: none; }
:root[data-browser="chrome"] .by-browser[data-for="chrome"], :root[data-browser="edge"] .by-browser[data-for="edge"],
:root[data-browser="opera"] .by-browser[data-for="opera"], :root[data-browser="yandex"] .by-browser[data-for="yandex"],
:root[data-browser="brave"] .by-browser[data-for="brave"] { display: inline; }
:root[data-device="android"] .apps-name .by-browser, :root[data-device="ios"] .apps-name .by-browser { display: none; }
:root[data-device="android"] .apps-name .by-browser[data-for="chrome"], :root[data-device="ios"] .apps-name .by-browser[data-for="chrome"] { display: inline; }

/* The extension's button and `You have the extension in this browser.` share one place (§ 2): both are laid out in one
 * cell of a grid, so the place is as high as the taller of the two at any width and browser font -- 48, or 52 where
 * the line wraps to two (the 288 column at 1024), or the button's 72 at 200 % -- and nothing moves when the mark comes.
 * The line shows while <html> carries the extension's mark (v129 § 13), set by its content script; the button
 * otherwise; the hidden one keeps its room and leaves the tab order (visibility). */
.apps-add { display: grid; align-items: center; justify-items: start; min-height: 48px; }
.apps-add > .action-button, .apps-add > .apps-here { grid-area: 1 / 1; }
.page .apps-here { visibility: hidden; margin: 0; color: var(--text-secondary); }
:root[data-sekirov-extension] .apps-add .action-button { visibility: hidden; }
:root[data-sekirov-extension] .page .apps-here { visibility: visible; }

/* Where the extension cannot be added (a phone; a browser without Chromium on a computer): the line, then `Share the
 * link` (§ 2, q5 B) -- `button` 16/600 `accent`, underlined at rest (`inline-link-underline`), a target of 48 --,
 * whose place `Link copied.` (`message-subdued` `text-tertiary`) takes for 4 s, in the same 48. */
.page .apps-note {
  display: none;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--t-wordforms-size);
  line-height: var(--t-wordforms-lh);
}
.apps-share { display: none; align-items: center; justify-items: start; min-height: 48px; }
/* Two classes: `all: unset` of the button below would reset a one-class `grid-area`. */
.apps-share > .apps-share-button, .apps-share > .apps-copied { grid-area: 1 / 1; }
.apps-share-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--accent);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--t-button-family);
  letter-spacing: var(--t-button-ls);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: auto;
  cursor: pointer;
}
.apps-share-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page .apps-copied {
  margin: 0;
  color: var(--text-tertiary);
  font: var(--t-message-subdued-style) var(--t-message-subdued-weight) var(--t-message-subdued-size) / var(--t-message-subdued-lh) var(--t-message-subdued-family);
}
/* The live region stays in the tree, empty until the copy; the script writes its text and gives it the focus the
 * button had (src/site.js `shareLink`), and the button keeps its room while hidden. */
.page .apps-copied:focus { outline: none; }
.apps-share[data-copied] .apps-share-button { visibility: hidden; }

/* What a card shows by the device and the browser (<html data-device>, <html data-browser>, src/site.js). A computer
 * without Chromium (`other`): the line of Chromium browsers and `Share the link` in place of the button. A phone: the
 * QR code and its caption hidden (the QR code is for a computer), the Play button centred, `For Chrome on a computer.`
 * and `Share the link` in place of the extension's button; an iPhone also `The app is for Android phones.` Without the
 * script the width decides (below 64 em a phone), and there is no `Share the link` (it needs the script). */
.page .apps-ios { display: none; }
:root[data-device="ios"] .page .apps-ios { display: block; }
:root[data-browser="other"] .apps-add { display: none; }
:root[data-browser="other"] .page .apps-note-other { display: block; }
:root[data-browser="other"] .apps-share { display: grid; }
:root[data-device="android"] .apps-scan, :root[data-device="ios"] .apps-scan,
:root[data-device="android"] .apps-add, :root[data-device="ios"] .apps-add,
:root[data-device="android"] .page .apps-note-other, :root[data-device="ios"] .page .apps-note-other { display: none; }
:root[data-device="android"] .page .apps-note-phone, :root[data-device="ios"] .page .apps-note-phone { display: block; }
:root[data-device="android"] .apps-share, :root[data-device="ios"] .apps-share { display: grid; }
@media not all and (min-width: 64em) {
  :root:not([data-device]) .apps-scan, :root:not([data-device]) .apps-add { display: none; }
  :root:not([data-device]) .page .apps-note-phone { display: block; }
  :root:not([data-device]) .apps-name .by-browser { display: none; }
  :root:not([data-device]) .apps-name .by-browser[data-for="chrome"] { display: inline; }
  /* The one main action of a card on a phone is centred (§ 5.45b; § 2: `Share the link` and its line too). */
  .apps-act { text-align: center; }
  .apps-act .apps-share { justify-items: center; }
}

/* A computer (§ 2, `a3b` B, `a3c`): the cards one under the other, the field `block` 24, the app's screen 252. The loop
 * stands beside the text while the text column keeps 240 (the cards' content at least 600 + 24 + 240): the first
 * card's loop on the left, the second's on the right; the text at the top of the loop, the loop setting the card's
 * height. A narrower card (a large browser font) takes the phone's one column. */
@media (min-width: 64em) {
  .apps-block { padding: var(--space-6); }
  .apps-demo-app .apps-demo-img { width: 252px; }
  @container apps (min-width: 912px) {
    .apps-block {
      grid-template-columns: 600px minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      grid-template-areas: "demo head" "demo act";
      column-gap: var(--space-6);
      align-items: start;
    }
    .apps-block:nth-child(2) {
      grid-template-columns: minmax(0, 1fr) 600px;
      grid-template-areas: "head demo" "act demo";
    }
    .apps-demo { margin: 0; }
  }
}
/* Stage B, pages of words only (appended with dictionary_live). W3 (plans/design/v105_site/spec.md):
   a word of a definition, an example or a use that leads to its page reads as the text around it;
   on hover it takes a 1 px underline in text-tertiary. Focus: the site's ring (2 px accent) with offset 0
   and radius 2 -- an offset of 2 would lay the ring on the next letters across a 4.5 px space («Этап B»,
   decision 4). A click of the mouse waits 500 ms (the double-click window, as in the extension) on
   surface-highlight, 80 ms in (`word-link-open-delay`, § 7). */
.word-link { color: inherit; }
.word-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--text-tertiary); }
.word-link:focus-visible { outline-offset: 0; border-radius: 2px; }
.word-link.pending { background: var(--surface-highlight); border-radius: 2px; transition: background-color 80ms linear; }
/* sekirov.com stage B (appended with dictionary_live by scripts/build.mjs, after the article's styles and
 * site.css). Every number is a token of docs/design-system.md (tokens.css of v104) or a figure of
 * plans/design/v105_site/spec.md, «Этап B» (§ 3.1, § 5.45 and § 7 of the design system carry them):
 * the fallback faces of the reading text, the field and its slot, the word of the day, the version line,
 * the offline state, `Try again`, the page of a key; and the layout of round 4, Nav left (§ 5.45 «Раунд 4
 * раскладки — решено», § 5.45b, § 11; plans/v129_build_plan.md W8): the bar, the grid, the navigation column,
 * the footer after the content (owner 2026-10-23, q5), the one main action centred on a phone. */

/* ---- Reading text: Noto Serif (its @font-face rules come from the build, fonts.json), and until it
 * arrives a local face held to its metrics (decision 3): size-adjust = mean advance of Noto Serif over the
 * local face's on the corpus's text; ascent / descent = 1.069 / 0.293 em of Noto Serif over size-adjust. */
@font-face { font-family: 'Dictionary Serif Georgia'; font-style: normal; font-weight: 400; src: local('Georgia'); size-adjust: 108.3%; ascent-override: 98.7%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: 'Dictionary Serif Georgia'; font-style: italic; font-weight: 400; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 103.3%; ascent-override: 103.5%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: 'Dictionary Serif Times'; font-style: normal; font-weight: 400; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'); size-adjust: 118.6%; ascent-override: 90.2%; descent-override: 24.7%; line-gap-override: 0%; }
@font-face { font-family: 'Dictionary Serif Times'; font-style: italic; font-weight: 400; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'); size-adjust: 114.9%; ascent-override: 93.0%; descent-override: 25.5%; line-gap-override: 0%; }
/* The usage of an example (`example-emphasis`, italic 500) is drawn by Noto Serif Medium Italic, whose mean advance on
 * the corpus's examples is 2.87 % wider than the Italic's (0.4753 / 0.4620 em, corpus 1.30, fontTools 4.60.2 over the
 * APK's files). Without its own face a 500 request falls back to the 400 italic above, sized to the narrower face, and
 * the swap to Noto Serif widened the usage and broke the line again (/w/lightning at 1689: CLS 0.0743). The same local
 * italic, sized to Medium Italic by the same rule: size-adjust = Noto Serif Medium Italic's mean advance over the
 * local face's; ascent / descent = 1.069 / 0.293 em (its hhea = OS/2 typo, line gap 0) over size-adjust. */
@font-face { font-family: 'Dictionary Serif Georgia'; font-style: italic; font-weight: 500; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 106.2%; ascent-override: 100.6%; descent-override: 27.6%; line-gap-override: 0%; }
@font-face { font-family: 'Dictionary Serif Times'; font-style: italic; font-weight: 500; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'); size-adjust: 118.2%; ascent-override: 90.4%; descent-override: 24.8%; line-gap-override: 0%; }

:root {
  /* § 3.1: the site sets its own three stacks. The interface is the site's Roboto: the token's stack of
   * v104 opens with the extension's own faces ('Dictionary Roboto', 'Dictionary Noto Sans Math',
   * 'Dictionary Noto Serif'), and the site serves 'Dictionary Noto Serif' for the reading text, so with
   * that stack every interface line drew Noto Serif 400 with a synthetic bold (found 2026-10-18). */
  --font-ui: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* § 3.1, the site's stack of the reading text; on Android the system `serif` is Noto Serif itself. */
  --font-read: 'Dictionary Noto Serif', 'Noto Serif', 'Dictionary Serif Georgia', 'Dictionary Serif Times', serif;
  /* § 3.1: the site's @font-face 'Roboto' (a Latin cut without IPA) takes the name `Roboto`, so a
   * transcription drawn with the token's stack would use two faces; the system face has the IPA. */
  --font-ipa: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* The height of the bar (`site-bar` 72 = 8 + the field 56 + 8; it grows with the field at a large browser
   * font); the page script sets the measured one (ResizeObserver). */
  --site-bar: 72px;
}

/* ---- A link inside a line of text is underlined at rest, in both themes (`inline-link-underline`, § 2.3;
 * PM «Дизайн» Б6, K2.13): one colour does not hold a link in a line of text -- `accent` to the line about
 * the app is 2.24:1 in the light theme and 1.56:1 in the dark one, under 3:1. A paragraph of /privacy,
 * /about, /sources, the listing's lines, the line under the article and the offline sentence. A block
 * link (a row, a badge, a link row, the word of the day) and a word of the article's text (W3) keep
 * their own rules. Thickness and position from the font. Here, with stage B, and not in site.css: the
 * stage-A build stays byte for byte the one deployed until the deploy of stage B. */
.page p a:not(.word-link), .bullets a, .offline-text a { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: auto; }

/* ---- The bar `site-bar` 72 (§ 5.45, round 4 decided: Nav left; plans/v129_build_plan.md W8.3, W8.4): the field on
 * every page and at every width, pinned at the top (`sticky`, `surface`, no line, no shadow) from the first frame, so
 * nothing moves when the reader goes to the field: the page holds no `/#search` and no ⌕ any more (W8.1, W8.2).
 * Below 64 em, in the 35 em container: the mark (`bar-mark` 32, radius 7) in its own target of 48 that reaches 8 into
 * the bar's side field, 4, the field taking the rest (`flex: 1`); the name is visually hidden (the home page's <h1>).
 * The right group of the bar (`bar-links`, W3; the menu button, W2) stands after the field in `bar-row`. */
:root {
  /* `site-nav` 15 rem and `site-pane-gap` 48 (§ 5.45): the navigation column and the air between it and the text. */
  --site-nav: 15rem;
  --site-pane-gap: var(--space-12);
  /* `site-band` (§ 5.45, decisions of 2026-10-23, q7 «a′1»): the side field of the page from 80 em, 32 + the list 15 rem
   * + 48 = 320 at 16 px, left and right alike. */
  --site-band: calc(var(--space-8) + var(--site-nav) + var(--site-pane-gap));
  /* The text of 64-80 em (q6 «40 em»): 640 at 16 px, centred. */
  --site-text-mid: 40rem;
}
.brand.site-bar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 72px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
}
@media (min-width: 25em) {
  .brand.site-bar { padding-inline: var(--space-5); }
}
.bar { display: flex; align-items: center; gap: var(--space-1); max-width: 35rem; margin-inline: auto; }
.bar-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-1); }
.bar-search { flex: 1 1 auto; min-width: 0; }
/* The mark alone (32 in a target of 48), below 80 em: on a phone and at 64-80 em, where the list does not fit in the
 * side field and the bar carries no name (q9 «N3»); the name is the footer's first line there. */
@media not all and (min-width: 80em) {
  .site-bar .brand-link {
    flex: none;
    justify-content: center;
    gap: 0;
    width: 48px;
    height: 48px;
    min-height: 48px;
    margin-left: calc(-1 * var(--space-2));
    border-radius: 12px;
  }
  .site-bar .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
/* The footer's first line below 80 em (§ 5.45, round 4; q9 «N3»): the mark 24 (radius 5) and the name `button` 16/600
 * text-primary, 12 apart, one target of 48; not drawn from 80 em, where the bar carries the name. */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  color: var(--text-primary);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--t-button-family);
  letter-spacing: var(--t-button-ls);
}
.footer-brand:hover { text-decoration: none; }
.footer-mark { display: block; width: 24px; height: 24px; border-radius: 5px; }
@media (min-width: 80em) {
  .footer-brand { display: none; }
}
/* Every page carries the pinned bar: a jump to a fragment stops under it. */
html { scroll-padding-top: var(--site-bar); }

/* ---- The field (§ 5.1; UI «Части W4», 1): 56, radius 16, surface-container, `input` 18/26; the slot of
 * 48 at the end; focused: a 2 px accent ring inside, the caret accent. */
.search { margin: 0; }
.field {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-left: var(--space-4);
  border-radius: 16px;
  background: var(--surface-container);
}
.field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.field-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  caret-color: var(--accent);
  font: var(--t-input-style) var(--t-input-weight) var(--t-input-size) / var(--t-input-lh) var(--t-input-family);
  text-overflow: ellipsis;
}
.field-input::placeholder { color: var(--text-tertiary); opacity: 1; }
.field-slot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
.field-clear {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
}
.field-clear[hidden] { display: none; }
.field-clear:active { background: var(--surface-pressed); }
.field-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* `/` -- the key that focuses the field (W8): only with a mouse; `kbd` 13/500 in a 1 px text-tertiary line. */
.field-key { display: none; }
@media (pointer: fine) {
  .field-key:not([hidden]) {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--text-tertiary);
    border-radius: 4px;
    color: var(--text-tertiary);
    font: normal 500 var(--t-attribution-size) / 1 var(--font-ui);
  }
}

/* ---- The slot of the field (UI «Части W4», 2): the suggestions, or one sentence (`Searching…`, the limit, the
 * error with `Try again`, offline), or the miss of the text; 0 ms (§ 7). It covers the page and never moves it (CLS
 * 0, W8.1): below 64 em a sheet under the bar -- `position: fixed`, `top` = `--site-bar`, to the bottom of the window,
 * `surface`, its own scroll, the 35 em container --; from 64 em a list dropping from the field -- `surface`, a 1 px
 * divider line, radius 16, field 8. Empty, it is not drawn. */
.slot [hidden] { display: none; }
.bar-search .slot:not(:has(li, [data-slot-message]:not([hidden]))) { display: none; }
@media not all and (min-width: 64em) {
  .bar-search .slot {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--site-bar);
    bottom: 0;
    z-index: 6;
    overflow-y: auto;
    /* A swipe on the sheet stays in it, also when its rows do not fill it: the page under it never moves (W8.1). */
    overscroll-behavior: contain;
    padding: 0 var(--space-4) var(--space-6);
    background: var(--surface);
  }
  .bar-search .slot > * { max-width: 35rem; margin-inline: auto; }
}
@media (min-width: 25em) and (max-width: 63.99em) {
  .bar-search .slot { padding-inline: var(--space-5); }
}
@media (min-width: 64em) {
  .bar-search { position: relative; }
  .bar-search .slot {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 6;
    max-height: calc(100vh - var(--site-bar) - var(--space-8));
    overflow: auto;
    padding: var(--space-2);
    border: 1px solid var(--divider);
    border-radius: 16px;
    background: var(--surface);
  }
  .bar-search .suggestions { margin-top: 0; }
  .bar-search .slot-message { margin: var(--space-2); }
}
.slot-rest { margin-top: 0; }

/* ---- The body: the footer follows the content on every page, `section` 40 under its last block (the footer's own
 * padding-top, src/site.css), and on a page shorter than the window the free room stays below the footer (owner
 * 2026-10-23, choice q5 «Follow the content»; it replaces the footer at the window's bottom of § 5.45b, owner
 * 2026-10-21). While the cookie notice is on the screen the body carries its room as padding under the footer
 * (src/consent.css, `--consent-h`), so the card's coming moves nothing in view and a scroll of the room brings the
 * footer up above the card (plans/v130 part C, § 5.45a). */
body { display: flex; flex-direction: column; }
.site-body { display: flex; flex-direction: column; }
/* The page column is a block, so the page and the footer are siblings in one flow and their margins meet: the footer's
 * `section` 40 is its top margin, and the bottom margin a page's last text carries (12 of a `message` or of the last
 * paragraph of a block, at whatever depth, passed out through blocks without padding) collapses into it -- the gap
 * is 40, the larger of the two, on every page, with no rule per element (as flex items, the page held that margin
 * inside its box and the footer stood 52 under the 404, the home page, /privacy and /sources). */
.site-main { display: block; min-width: 0; }
.site-main > .page { width: 100%; }
.site-main > .site-footer { width: 100%; padding-top: 0; margin-top: var(--space-10); }
/* The landing room (plans/design/v105_site/spec.md, «Этап B», decision 6; at every width, orchestrator 2026-10-16):
 * empty surface under the footer, exactly what a landing on a fragment lacks to stand in its place (`#c<card>` under
 * the bar, a part or a meaning under the card's pinned head) when the page ends sooner: a visit of an address with a
 * fragment, a reading's link, Back and Forward. The page script sets it at such a landing and only then, counted from
 * the content's own height; nothing is drawn in it. A jump of the part-of-speech list or of a contents line takes no
 * room: it stops at the page's end, and the footer follows the last block (owner 2026-10-23, choice q4 «L1»). */
.site-main { padding-bottom: var(--landing-room, 0px); }
/* Field -> 24 (`block`) -> the first text of a page (the bar's 8 under the field and 16); a page of a key starts with
 * the pinned head of its first card. */
.site-main > .page { padding-top: var(--space-4); }
.site-main > .word-page { padding-top: 0; }
/* /apps has no visible title (§ 5.45b): its first block stands `block` 24 under the bar (W3). */
.site-main > .apps-page { padding-top: var(--space-6); }

/* ---- The desktop layout from 64 em, Nav left (§ 5.45, decided by the owner 2026-10-20; plans/v129_build_plan.md W8.4;
 * the widths of the owner's decisions of 2026-10-23, q6 «40 em», q7 «a′1», q8 «F40», q9 «N3»). The width of the layout
 * is the document's column (the boxes' `100%`), never `100vw`: a classic scroll bar takes 15-17 px of the window.
 *  - From 80 em (1280 at 16 px = 2 x 320 + 640): one grid for the bar and the body, `15rem minmax(0, 1fr)`, 48 between,
 *    32 at the sides; the body's right field is `site-band` 320, equal to its left one, so the text is the layout's
 *    width - 640 at every width, with no cap (640 at 1280, 800 at 1440, 1359 at 1999). The bar: the mark and the name
 *    over the navigation column, the field from the text's left edge, the right group at the window's right margin.
 *    The body: the part-of-speech list on the left (`site-nav`, sticky 32 under the bar, its own scroll), the text 48
 *    after it (`site-main`: the page and its footer). The card's head carries no contents line: the list is the
 *    contents.
 *  - 64-80 em (1024-1279): the list does not fit in the side field; it folds into the contents line of the card's
 *    pinned head (§ 5.40, the phone's component), the text is 40 em (640) in the middle of the window, its fields
 *    equal ((width - 640) / 2: 192 at 1024, 256 at 1152), and the bar shows the mark alone (above).
 *  - The field (F40), at both: its left edge is the text's, its width the text's, and it stops 24 (`space-6`, the gap
 *    of `bar-row`) before the bar's right group, narrowing under it: 417 at 1024, 545 at 1280, 705 at 1440, 1004 at
 *    1739, 1264 at 1999 (the right group 359 wide, signed out).
 * Below 64 em the layout of a phone, in the 35 em container. */
.site-nav { display: none; }
@media (min-width: 64em) {
  .brand.site-bar { padding-inline: var(--space-8); }
  .bar { display: grid; max-width: none; margin-inline: 0; }
  .site-bar .brand-link { grid-column: 1; justify-self: start; }
  .bar-row { gap: var(--space-6); }
  .bar-row > .bar-links { flex: none; margin-left: auto; margin-right: calc(-1 * var(--space-3)); }
  .site-main > .page, .site-main > .site-footer { max-width: none; margin-inline: 0; padding-inline: 0; }
  .site-main > .word-page { padding-top: var(--space-6); }
}
@media (64em <= width < 80em) {
  /* The bar's three columns: the mark's field, the text's 40 em, the other field; the field's row runs from the text's
   * left edge to the window's right margin. */
  .bar { grid-template-columns: minmax(0, 1fr) minmax(0, var(--site-text-mid)) minmax(0, 1fr); }
  .bar-row { grid-column: 2 / 4; }
  .bar-search { flex: 0 1 var(--site-text-mid); }
  .site-body { display: block; padding-inline: var(--space-8); }
  .site-main { max-width: var(--site-text-mid); margin-inline: auto; }
}
@media (min-width: 80em) {
  .bar, .site-body { grid-template-columns: var(--site-nav) minmax(0, 1fr); column-gap: var(--site-pane-gap); }
  .site-body { display: grid; padding-inline: var(--space-8) var(--site-band); }
  .bar-row { grid-column: 2; }
  /* The row runs from 320 to the window's right margin 32, so the text's width is the row's less 320 - 32. */
  .bar-search { flex: 0 1 calc(100% - var(--site-band) + var(--space-8)); }
  .site-nav {
    display: block;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: calc(var(--site-bar) + var(--space-8));
    margin-top: var(--space-8);
    min-width: 0;
  }
  .site-main { grid-column: 2; grid-row: 1; }
  .entry > .head > .toc-wrap { display: none; }
}

/* ---- /apps on a computer (§ 5.47 «/apps»; v142 § 2: the cards one under the other, each the pair's width): the cards
 * in the middle of the window, max(63 rem, layout - 640) wide but at most layout - 64, so its fields are equal at
 * every width: 32 at 1024, 136 at 1280, 216 at 1440, 320 from 1648 (63 rem: 1008 at 1280, the loop 600 + 24 + 336).
 * The pair is wider than the text column, the mark, the field and the footer stay where every page has them. From
 * 80 em the text column is itself centred (320 / 320) and `100%` is layout - 640, so layout - 64 is 100% + 2 x (320 -
 * 32); at 64-80 em the page takes the whole row inside the 32 fields (`100%` = layout - 64) and the footer keeps the
 * text's 40 em, and there layout - 640 is under 63 rem at any browser font. The look of the cards is site.css's. */
@media (64em <= width < 80em) {
  .page-apps .site-main { max-width: none; }
  .page-apps .site-main > .site-footer { max-width: var(--site-text-mid); margin-inline: auto; }
  .apps-grid { width: min(63rem, 100%); margin-inline: auto; }
}
@media (min-width: 80em) {
  .apps-grid {
    --apps-pair: min(max(63rem, 100%), 100% + 2 * (var(--site-band) - var(--space-8)));
    width: var(--apps-pair);
    margin-left: calc((100% - var(--apps-pair)) / 2);
  }
}
/* The list (§ 5.45 «Навигация»): only the parts of speech -- `toc-item` 15/24 500 `accent`, the count `text-tertiary`
 * after U+00A0 --, then `forms` and `Phrases with …`; on a page of several cards each card's word (15/24 600
 * `text-primary`) opens its parts, 20 above it. A row: target 32 (`fine`) / 48 (`coarse`), field 4 x 12, rows close
 * together; the list stands 12 into the bar's side field, so the text of a row starts at the window's margin. The
 * current part (under the card's pinned head, the page script): `surface-container`, radius 8, `text-primary`; under
 * the pointer `surface-pressed`, the count `text-secondary`. */
.side-parts {
  margin-left: calc(-1 * var(--space-3));
  max-height: calc(100vh - var(--site-bar) - var(--space-8) - var(--space-6));
  overflow-y: auto;
  scrollbar-width: thin;
}
.side-parts ol { list-style: none; margin: 0; padding: 0; }
.side-parts a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border-radius: 8px;
  color: var(--accent);
  font: var(--t-toc-item-style) 500 var(--t-toc-item-size) / var(--t-toc-item-lh) var(--font-ui);
  letter-spacing: var(--t-toc-item-ls);
}
.side-parts a:hover { background: var(--surface-pressed); text-decoration: none; }
.side-parts .n { color: var(--text-tertiary); font-weight: 400; white-space: pre; }
.side-parts a:hover .n { color: var(--text-secondary); }
.side-parts .c-card { color: var(--text-primary); font-weight: 600; }
.side-parts li + li > .c-card { margin-top: var(--space-5); }
.side-parts a[aria-current="true"] { background: var(--surface-container); color: var(--text-primary); }
@media (pointer: coarse) {
  .side-parts a { min-height: 48px; }
}

/* ---- The one main action of a block on a phone (§ 5.45b, «Единственное главное действие на телефоне — по центру»;
 * plans/v129_build_plan.md W8.7): a block whose one action stands under its sentence or its progress is centred in
 * the column below 64 em -- `Try again` of stage B (the error page and the slot); the blocks of other parts take the
 * class (the Play button of /apps, W3 and v142; `Practise`, W2 and W4). Pairs of actions, list rows, `×`, `Undo` and the text
 * of the article keep the start of the line; from 64 em the block keeps it too. */
@media not all and (min-width: 64em) {
  .single-action { text-align: center; }
}

.suggestions { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.suggestions > li + li { border-top: 1px solid var(--divider); }
.sug {
  display: block;
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-3) var(--space-2);
  border-radius: 8px;
  color: var(--text-primary);
  transition: background-color 120ms linear;
}
.sug:hover { text-decoration: none; }
@media (pointer: fine) { .sug:hover { background: var(--surface-pressed); transition-duration: 80ms; } }
.suggestions > li[aria-selected="true"] > .sug { background: var(--surface-pressed); }
.sug-word { font: var(--t-suggestion-word-style) var(--t-suggestion-word-weight) var(--t-suggestion-word-size) / var(--t-suggestion-word-lh) var(--t-suggestion-word-family); color: var(--text-primary); }
/* The list of parts goes to its own line whole (§ 4.4). */
.sug-parts { display: inline-block; font: var(--t-suggestion-meta-style) var(--t-suggestion-meta-weight) var(--t-suggestion-meta-size) / var(--t-suggestion-meta-lh) var(--t-suggestion-meta-family); color: var(--text-secondary); }
.sug-gloss {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--t-suggestion-gloss-style) var(--t-suggestion-gloss-weight) var(--t-suggestion-gloss-size) / var(--t-suggestion-gloss-lh) var(--t-suggestion-gloss-family);
  color: var(--text-tertiary);
}
.slot-message { margin-top: var(--space-6); }
.slot-message > p { margin: 0; }
.slot-message .subdued { color: var(--text-tertiary); font: var(--t-message-subdued-style) var(--t-message-subdued-weight) var(--t-message-subdued-size) / var(--t-message-subdued-lh) var(--t-message-subdued-family); }
.slot-message .action-button { margin-top: var(--space-5); }
.slot-message .miss-title { margin-top: var(--space-4); }

/* ---- Messages: an error of the site in `error`, the reader's network in text-primary (UI «Состояния»). */
.message.error, p.error { color: var(--error); }

/* ---- `Try again` (UI «Части W4», 8; § 5.28 ActionButton): >= 48, radius 12, field 12 x 20, `button`
 * 16/600 on-action on action, action-pressed under the pointer 80 / 120 ms. After the press, until the
 * page answers: text-disabled, no fill, a 1 px divider line, the same size, 0 ms (§ 5.31 Restart). */
.retry { margin: var(--space-5) 0 0; }
/* The ActionButton itself (§ 5.28) is site.css's: /apps carries it on every build (plans/v142 § 1). */
.error-page .message.error { margin-top: 0; }

/* ---- Word of the day (§ 5.45, «Главная»; plans/v129_build_plan.md W8.5): `section-title` 15/22 600 text-tertiary,
 * then 12 to the whole entry of the word, the cards of its page `/w/<word>` (the 4 here and the head's 8, or the
 * readings line's 8). Another date's entry, chosen in <head> (src/site.js), stands from the first frame: the default
 * is hidden while the root carries `data-day-pick`, and dropped once the page is parsed. */
.day-word { margin: 0; }
.day-word-title {
  margin: 0;
  padding-bottom: var(--space-1);
  color: var(--text-tertiary);
  font: var(--t-section-title-style) var(--t-section-title-weight) var(--t-section-title-size) / var(--t-section-title-lh) var(--t-section-title-family);
  letter-spacing: var(--t-section-title-ls);
}
:root[data-day-pick] [data-day-default] { display: none !important; }

/* ---- `Dictionary version:` on /about (UI «Части W4», 4; § 5.22): 12 under the paragraph, `message-subdued`
 * text-tertiary, 40 to Appearance. */
.version-line {
  color: var(--text-tertiary);
  font: var(--t-message-subdued-style) var(--t-message-subdued-weight) var(--t-message-subdued-size) / var(--t-message-subdued-lh) var(--t-message-subdued-family);
}
.version-line + .appearance { margin-top: var(--space-10); }

/* ---- Offline (UI «Части W4», 5): `message` text-primary, the names of the products links (underlined,
 * § 2.3). In the slot under the field, or on a page without it the bar of the undo-bar's surface (§ 5.20):
 * surface-container, a 1 px divider line, radius 12, 16 from the edges and the bottom, field 12 x 16; it
 * comes and goes in 120 ms (opacity). */
.offline-text { margin: 0; color: var(--text-primary); }
.offline-text a, .offline-bar a { text-decoration: underline; text-decoration-thickness: from-font; }
.offline-bar {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 4;
  max-width: 35rem;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  background: var(--surface-container);
  box-shadow: inset 0 0 0 1px var(--divider);
  color: var(--text-primary);
  opacity: 0;
  transition: opacity 120ms linear;
}
.offline-bar[data-shown] { opacity: 1; }

/* ---- The page of a key (decision 1): brand -> 8 -> substitution line -> 4 -> readings -> 12 -> the head
 * of the first card; between cards the card's last block -> 20 -> 1 px divider -> 20 -> the next head. */
.word-page { padding-top: 0; }
.word-page > .origin-line { margin: var(--space-2) 0 var(--space-1); color: var(--text-secondary); }
.word-page > .readings { margin: var(--space-2) 0 var(--space-1); column-gap: var(--space-4); row-gap: var(--space-1); }
.word-page > .origin-line + .readings { margin-top: 0; }
/* The readings line, by the input device (v140 q3, § 5.45): a mouse sees every reading -- the line wraps as a contents
 * list, 16 between readings and 4 between lines (above), with no sideways scroll, so there is no current reading to
 * scroll to and no fade at an edge; a touch screen keeps one line that scrolls sideways (§ 5.43, article.css). A
 * reading itself stays one line, cut by its ellipsis only when it is wider than the line. */
@media (pointer: fine) {
  .readings { flex-wrap: wrap; overflow: visible; white-space: normal; }
}
.reading { font-weight: 500; }
.reading-parts { font-weight: 400; font-style: italic; }
/* The head of each card is pinned inside its own <article> (§ 5.40, top = the brand row): at the card's end
 * it leaves with it and the next card's head takes its place; two heads never stand one over the other. */
.entry { scroll-margin-top: 0; }
.entry > .head {
  position: sticky;
  top: var(--site-bar);
  z-index: 2;
  padding: var(--space-2) 0 var(--space-3);
  background: var(--surface);
}
/* The head's lines (decision 1, «Высота шапки»; § 5.40, § 5.6): the word without the browser's h1 / h2 margins, the
 * pronunciation on the word's line by the baseline 8 after it (4 under it when it does not fit, the `own` step), the
 * contents line on its own line 12 under (4 + 8): 8 + 40 + 12 + 24 + 12 = 96 with a contents line, 60 without.
 * `min-width: 0` keeps a one-line contents line inside the column on a touch screen. The markup is the card's. */
.entry > .head { display: flex; flex-flow: row wrap; align-items: baseline; column-gap: var(--space-2); row-gap: var(--space-1); }
.entry > .head .word { margin: 0; }
.entry > .head > .word-line, .entry > .head > .pron { flex: 0 1 auto; min-width: 0; }
.entry > .head > .toc-wrap { flex: 1 0 100%; min-width: 0; margin-top: var(--space-2); }
/* A part's heading, a meaning a line or Enter lands on (`#s<sense>`, K2.16) and a focused word stop under the
 * card's head (WCAG 2.4.11); the script sets the measured --head-h on each card, 96 without it. The
 * document's own scroll padding is the bar. */
.entry .part, .entry .forms, .entry .phrases, .entry .sense, .entry .head ~ * a, .entry .part-title { scroll-margin-top: var(--head-h, 96px); }
/* The end of a card (decision 5, owner's decision C6): nothing stands under it -- the card ends with the last
 * block of its record (a meaning with its examples, `Forms` or `Phrases with …`), and every source is on
 * /sources. The steps after it are counted between text boxes (§ 4.2) from that block: the line between
 * cards 20 under it (its 12 below + the next head's 8 make the 20 over that head), the line about the app
 * 40 under the last card, and the footer's own 40 under that line. The text box of a meaning or of `Forms`
 * ends where the card's box does (the `Forms` line's 12 below collapses into the larger step); a last block
 * of rows keeps the 8 of a row's field under its text inside the step: the line 12 and the line about the
 * app 32 under the row's box. The line about the app: `wordforms` 15/24 text-secondary, its links accent and
 * underlined at rest (above). */
.card-rule { height: 1px; margin: var(--space-5) 0 var(--space-3); border: 0; background: var(--divider); }
.page .works-offline { margin: var(--space-10) 0 0; color: var(--text-secondary); }
.page .entry:has(> .article > .phrases:last-child) + .card-rule { margin-top: var(--space-3); }
.page .entry:has(> .article > .phrases:last-child) + .works-offline { margin-top: var(--space-8); }

/* The contents line (decision 2): the input device decides. A touch screen keeps § 5.40, one line that
 * scrolls sideways; a mouse gets lines that fill (§ 5.10), the connector `·` only between two items of a
 * line: each item leads with its connector, and the connector of a line's first item is cut by the edge. */
.toc-wrap { position: relative; margin: var(--space-3) 0 0; }
.toc-wrap > .toc { margin: 0; }
.toc-item { display: inline-flex; align-items: baseline; white-space: nowrap; }
.toc-item::before {
  content: '·';
  display: inline-block;
  width: calc(16px + 0.28em);
  text-align: center;
  font-weight: 400;
  color: var(--text-tertiary);
}
.toc-item:first-child::before { display: none; }
.toc-item > .link { color: var(--accent); }
.toc-wrap[data-fade-end] { -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); }
.toc-wrap[data-fade-start] { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.toc-wrap[data-fade-start][data-fade-end] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
@media (pointer: fine) {
  .toc-wrap { overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .toc-wrap > .toc { flex-wrap: wrap; overflow: visible; white-space: normal; margin-left: calc(-16px - 0.28em); }
  .toc-item:first-child::before { display: inline-block; }
}
/* The current part (§ 5.40): a 2 px text-primary line under its item. */
.toc-item[aria-current="true"] > .link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .sug, .action-button, .offline-bar { transition: none; }
}
/* sekirov.com stage C with the account of v129 (appended with site_sync_live by scripts/build.mjs, after stage-b.css).
 * Every number is a token of docs/design-system.md (tokens.css of v104) or a figure of § 5.45b (the site's scale:
 * type levels title 32/40, heading 20/28, body 17/26, label 15/22, action 16/24, small 15/24, fine 13/18; gaps own 4,
 * group 12, block 24, section 40; container padding 16) and § 5.47 (the account control, the panel and the sheet, the
 * callout, the card after the sign-in, the section of My words that folds). Desktop from 64 em, as § 5.45. */

/* ---- The bar (§ 11): the mark and the name, then the bar's links `Practise` · `My words` · `Apps` (W3's `bar-links`,
 * `bar-link` of site.css, from 64 em) and the account control at the end; on a phone ⌕ and the menu button. The
 * mark and the name take the free room, so the links, ⌕ and the control stand together at the end. */
.brand > .brand-link { margin-right: auto; }
.brand > .brand-search, .brand > .bar-links { margin-left: 0; }

/* ---- The place of the control (Ф4, Ф5): room only when the page runs scripts; on a computer it holds the width of
 * the widest form (the mark, 8, `Sign in`) with an invisible copy, and the control stands over it at its right edge,
 * so no item moves when the control comes or changes; on a phone the 48 of the menu button, overhanging the side
 * margin by 8 like the mark (§ 5.47, «Место»). */
.acct-slot { display: none; }
@media (scripting: enabled) {
  .acct-slot { position: relative; display: flex; flex: none; align-items: center; justify-content: flex-end; margin-left: var(--space-1); }
}
.acct-ghost { display: none; }
@media (min-width: 64em) {
  .acct-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--target);
    padding: 0 var(--space-3) 0 10px;
    visibility: hidden;
    font: 600 var(--t-section-title-size) / 20px var(--font-ui);
    letter-spacing: var(--t-section-title-ls);
    white-space: nowrap;
  }
}
@media not all and (min-width: 64em) {
  .acct-slot { width: 48px; height: 48px; margin-right: calc(-1 * var(--space-2)); }
}

.acct {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
}
.acct[hidden] { display: none; }
.acct:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct:hover, .acct.open { background: var(--surface-pressed); }
.acct svg { display: block; color: var(--text-secondary); }
@media (min-width: 64em) {
  .acct { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-radius: 24px; }
  .face-out {
    gap: var(--space-2);
    min-height: var(--target);
    padding: 0 var(--space-3) 0 10px;
    font: 600 var(--t-section-title-size) / 20px var(--font-ui);
    letter-spacing: var(--t-section-title-ls);
    white-space: nowrap;
  }
  .face-in, .face-help { width: var(--target); height: var(--target); }
}
.acct-menu { position: relative; width: 48px; height: 48px; border-radius: 12px; }

/* The circle (§ 5.47): 32 in the control, 40 in the head; the photo, or `action` with the letter `on-action`, or the
 * filled person; its size and letter do not grow with the font (a mark, like the bar's own). */
.av {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action);
  color: var(--on-action);
  font: 600 16px / 1 var(--font-ui);
  letter-spacing: 0.2px;
}
.av-32 { width: 32px; height: 32px; }
.av-40 { width: 40px; height: 40px; }
.av.ph { background: none; }
.av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av svg { color: var(--on-action); }
/* 409: a dot 10 of `error` at the top right, its ring 2 the colour of the page (§ 5.47; plans/v137, R14: a `401` is a
 * sign-out and draws no dot). */
.acct-dot {
  position: absolute;
  right: -2px;
  top: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 0 0 0 2px var(--surface);
}
.acct-menu .acct-dot { right: 8px; top: 8px; }

/* ---- The panel (computer) and the menu (phone), over the page, 0 ms (CLS 0, A9).
 * `--acct-pane` 20 rem: the width of the panel and of the callout, one width in every state -- signed in, with the
 * card of the apps, signed out with Google's button, the session ended (owner 2026-10-23, choice q2 «A · 320 for every
 * state»: 320 at the browser's font of 16; it was 360, § 5.47 «Панель сайта (десктоп)»). In rem, as the columns of
 * the desktop layout (`--site-nav` 15 rem, the field 35 rem): at 200 % of the browser's font the panel is 640 and its
 * lines keep the room they have at 16 -- at a fixed 360 `Delete synced words →` (344 px at 32) passed the 326 of the
 * content (qa F2 of gsi-render, 2026-10-23). Both read `--site-pane` of the two-pane layout of stage B until W8
 * (ce3e57e27) removed that property with the layout; an undefined custom property made `width` invalid, so the fixed
 * panel took the width of its content and grew with every line that came after it opened (Google's button,
 * `Syncing…` -> the card: 119 -> 290 -> 751 px, measured on sekirov.com 2026-10-23). The panel's width is its own and
 * holds whatever the section draws. */
:root { --acct-pane: 20rem; }
.acct-popup[hidden] { display: none; }
.acct-popup { position: fixed; z-index: 30; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text-primary); }
.acct-popup:focus { outline: none; }
.acct-panel {
  top: var(--site-bar);
  right: var(--space-8);
  width: var(--acct-pane);
  max-height: calc(100vh - var(--site-bar) - var(--space-4));
  padding: var(--space-4);
  border: 1px solid var(--divider);
  border-radius: 16px;
}
.menu-sheet { top: var(--site-bar); left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-4) var(--space-6); }
.menu-sheet > * { max-width: 35rem; margin-inline: auto; }
.menu-items { display: flex; flex-direction: column; margin-top: var(--space-6); border-top: 1px solid var(--divider); padding-top: var(--space-2); }
.menu-items[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--text-primary);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--font-ui);
  letter-spacing: var(--t-button-ls);
}
.menu-item:hover { text-decoration: none; }

/* The section of the account (§ 5.45b scale, § 5.47). */
.acct-in { display: flex; flex-direction: column; }
.acct-in > :first-child { margin-top: 0; }
.acct-in p { margin: 0; }
.acct-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.acct-head .who { flex: 1 1 auto; min-width: 0; }
.t-name, .t-mail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-name { font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); }
.acct-popup .t-mail, .acct-callout .t-mail { margin-top: var(--space-1); font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui); color: var(--text-secondary); }
.acct-popup .t-status, .acct-callout .t-status { margin-top: var(--space-3); font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-tertiary); }
.acct-popup .t-cap, .acct-popup .t-msg, .acct-callout .t-msg { margin-top: var(--space-3); font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); }
.acct-in > .t-cap:first-child { margin-top: 0; }
/* § 5.47: `Sign in to keep your words` heading 20/28 600 -> 8 -> the caption -> 12 -> the target. */
.acct-in .t-head { margin: 0; font: 600 var(--t-pos-group-size) / var(--t-pos-group-lh) var(--font-ui); letter-spacing: var(--t-pos-group-ls); color: var(--text-primary); }
.acct-popup .t-head + .t-cap { margin-top: var(--space-2); }
.acct-in .t-count + .acct-row, .acct-in .t-cap + .acct-row { margin-top: var(--space-3); }
.acct-popup .t-count, .acct-callout .t-count { margin-top: var(--space-1); font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui); color: var(--text-secondary); }
.acct-popup .t-err, .acct-callout .t-err { margin-top: var(--space-3); font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--error); }
/* The Sign in with Google button's place (src/signin.css; plans/v105_stage_c_plan.md, Дополнение 1): 12 under the
 * caption or the count line, the column's width, the button at most 400. */
.gbtn-slot { display: flex; margin-top: var(--space-3); }
/* The notice of `401` (§ 5.47, «Состояние, которому нужен читатель»): answer-wrong-container, radius 12, field 12 / 16;
 * its line, then the button 12 under it, then the failure or `Signing in…`. */
.acct-notice { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--answer-wrong-container); }
.acct-notice .t-line { margin: 0; font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); }
.acct-row {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  cursor: pointer;
  color: var(--text-primary);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--font-ui);
  letter-spacing: var(--t-button-ls);
}
.acct-row svg { color: var(--text-secondary); }
.acct-row:focus-visible, .tb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pair { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2); margin-top: var(--space-3); }
/* The actions of a signed-in reader (plans/v137, q4 «A», § 5.48): `Sign out`, 12 from its text to a 1 `divider` rule,
 * 12, `Delete account` in `error`, last. The 12 are between the texts: the targets of 48 reach into them with their
 * field of 12, so the rule touches them; a target of 40 (`pointer: fine`) leaves 4 of its own on each side. */
.acct-actions { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--space-3); }
.acct-rule { align-self: stretch; height: 1px; background: var(--divider); }
@media (pointer: fine) { .acct-rule { margin: var(--space-1) 0; } }
.tb.danger { color: var(--error); }
/* After a deleted account's wipe (plans/v137, R8): the line, a report in `text-primary`, 12 over the sign-in block
 * (the app's sheet of the choice page, `app_sheet_out`). */
.acct-in .acct-deleted + .t-head { margin-top: var(--space-3); }
.tb {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--accent);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--font-ui);
  letter-spacing: var(--t-button-ls);
}
@media (pointer: fine) { .tb { min-height: 40px; } }
a.tb:hover { text-decoration: none; }

/* The card after the first sign-in (§ 5.47, `account-card`): block 24 under the section. */
.acct-card { margin-top: var(--space-6); padding: var(--space-4); border-radius: 12px; background: var(--surface-container); }
/* While the first sync is out, the card holds its room unseen (account.ts `drawCard`). */
.acct-card.held { visibility: hidden; }
.acct-card p { margin: 0; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-title { font: 600 var(--t-section-title-size) / var(--t-section-title-lh) var(--font-ui); letter-spacing: var(--t-section-title-ls); color: var(--text-primary); }
.card-x { all: unset; flex: none; display: grid; place-items: center; width: var(--target); height: var(--target); margin-right: calc(-1 * var(--space-2)); border-radius: 8px; color: var(--text-tertiary); cursor: pointer; }
.card-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-card .card-line { margin-top: var(--space-3); font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui); color: var(--text-secondary); }
.card-link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--accent);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--font-ui);
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

/* ---- The callout of 5 words (§ 5.47 `account-callout`, § 12): under the control over the page, 0 ms, CLS 0. */
.acct-callout {
  position: fixed;
  z-index: 31;
  top: calc(var(--site-bar) + var(--space-2));
  left: var(--space-4);
  right: var(--space-4);
  max-width: 35rem;
  margin-inline: auto;
  box-sizing: border-box;
  padding: var(--space-4);
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text-primary);
}
@media (min-width: 64em) {
  .acct-callout { left: auto; right: var(--space-8); width: var(--acct-pane); margin: 0; }
}
.acct-callout .caret {
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-left: 1px solid var(--divider);
  border-top: 1px solid var(--divider);
  transform: rotate(45deg);
}
.acct-callout p { margin: 0; }
.acct-callout .t-msg { margin-top: 0; }
.acct-popup .t-sub, .acct-callout .t-sub { margin-top: var(--space-1); font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui); color: var(--text-secondary); }
@media (pointer: fine) { .acct-callout .action-button, .acct-in .action-button { min-height: 40px; padding: var(--space-2) var(--space-5); border-radius: 20px; } }

/* ---- /lists and /practice (§ 11, § 5.47): no visible page heading -- `<h1>` hidden from view (§ 5.45b `.vh`) -- and
 * the first block 24 under the bar. The place of the page is a screen high, so the footer starts under the first
 * screen and the list or the offer drawn after `load` moves nothing in view (CLS 0). */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pg-page { padding-top: var(--space-6); min-height: calc(100vh - var(--site-bar)); min-height: calc(100dvh - var(--site-bar)); box-sizing: border-box; }
@media (min-width: 64em) { .site-main > .pg-page { padding-top: var(--space-6); } }
.pg-in > :first-child { margin-top: 0; }
.pg-title { margin: 0; font: 600 var(--t-word-size) / var(--t-word-lh) var(--font-ui); letter-spacing: var(--t-word-ls); color: var(--text-primary); }
.pg-in .pg-p { margin: var(--space-3) 0 0; color: var(--text-primary); }
.pg-in .pg-p2 { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.pg-act { display: flex; margin-top: var(--space-6); }
.pg-google { flex: 1 1 auto; min-width: 0; max-width: 400px; margin-top: 0; }
.pg-in .pg-status { margin: var(--space-3) 0 0; color: var(--text-tertiary); }
.pg-in .t-err { margin: var(--space-3) 0 0; color: var(--error); }
.pg-line { margin: 0; }
/* A phone: the one main action of the page stands in the centre of its column (§ 5.45b); the text keeps its start. */
@media not all and (min-width: 64em) { .pg-act { justify-content: center; } }

/* The section of My words that folds (§ 5.47, «My words — раздел, который сворачивается»; Б1) with the head of v137
 * (§ 5.48, q1 «C»): the name 20/28 600, 8, the number `message` text-secondary -- the head, not a target --, and at the
 * end two icon buttons side by side, `⋯` and the chevron, a target of 48 each, glyphs 24 (24 between them), no disc,
 * both `text-secondary`; the pair overhangs the column by 12, so the chevron's glyph ends on its edge. Only the chevron
 * folds (the glyph turns in 200 ms), and the words fold up into the head in 200 ms, ease-out, at once under reduced
 * motion. */
.ls-head {
  display: flex;
  align-items: center;
  column-gap: var(--space-2);
  min-height: 48px;
  color: var(--text-primary);
  font: 600 var(--t-pos-group-size) / var(--t-pos-group-lh) var(--font-ui);
  letter-spacing: var(--t-pos-group-ls);
}
.ls-count { font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); letter-spacing: 0; color: var(--text-secondary); }
.ls-tools { display: flex; flex: none; margin-left: auto; margin-right: calc(-1 * var(--space-3)); }
.ls-icon { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--text-secondary); cursor: pointer; }
.ls-icon svg { display: block; width: 24px; height: 24px; }
.ls-icon:hover, .ls-icon.open { background: var(--surface-pressed); }
.ls-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ls-fold .chevron { flex: none; transform: rotate(180deg); transition: transform 200ms ease-out; }
.ls[data-open="false"] .ls-fold .chevron { transform: none; }
/* The menu of `⋯` (§ 5.48, `menu-row` § 5.43): `surface-container`, a 1 `divider` edge, radius 12, field 4, at least 220
 * wide, its right edge on the right edge of the target of `⋯`, under it; one item, `Clear my words`, `wordforms` 15/24
 * in `error`, field 12 x 16 (a target of 48; 8 x 16 = 40 under a mouse). */
.ls-more-slot { position: relative; flex: none; }
.ls-more-slot[hidden], .ls-menu[hidden] { display: none; }
.ls-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  box-sizing: border-box;
  min-width: 220px;
  padding: var(--space-1) 0;
  border-radius: 12px;
  background: var(--surface-container);
  box-shadow: inset 0 0 0 1px var(--divider), 0 2px 8px rgb(0 0 0 / 0.12);
}
.ls-menu-row {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  color: var(--error);
  font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}
@media (pointer: fine) { .ls-menu-row { min-height: 40px; padding: var(--space-2) var(--space-4); } }
.ls-menu-row:hover, .ls-menu-row:active { background: var(--surface-pressed); }
.ls-menu-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* `Restore cleared words` (plans/v137, R15.3; § 5.48): an item that brings words back, in `text-primary`, first. */
.ls-menu-row.plain { color: var(--text-primary); }
.ls-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 200ms ease-out, visibility 0s linear 0s; }
.ls-inner { min-height: 0; overflow: hidden; }
.ls[data-open="false"] .ls-body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 200ms ease-out, visibility 0s linear 200ms; }
@media (prefers-reduced-motion: reduce) { .ls-fold .chevron, .ls-body, .ls[data-open="false"] .ls-body { transition: none; } }
.ls-rows { padding-top: var(--space-3); }
.ls-empty { margin: 0; color: var(--text-secondary); }
/* After a deleted account's wipe (plans/v137, R8; choice page `s6_frames`, «Site phone · account deleted elsewhere»):
 * the line in `text-primary`, the sentence of an empty list 12 under it. */
.ls-deleted { margin: 0; color: var(--text-primary); }
.ls-deleted + .ls-empty { margin-top: var(--space-3); }
/* R15.3, § 5.48 (q2 «A»): the text button `Restore cleared words` under the sentence of an empty list, 12 between the
 * two text boxes: the target of 48 has 12 over its line of 24 (margin 0), the target of 40 under a mouse 8 (margin 4). */
.ls-empty + .ls-restore { display: flex; width: fit-content; margin-top: 0; }
@media (pointer: fine) { .ls-empty + .ls-restore { margin-top: var(--space-1); } }
/* The sentence keeps no margin under it before the button (`.page p` gives every paragraph 12 below). */
.ls-rows > .ls-empty:has(+ .ls-restore) { margin-bottom: 0; }

/* The question of Clear my words (plans/v137, q2 «A», § 5.48): a modal `<dialog>` under `scrim`, `sheet`, radius 16,
 * field 16, min(400, the window - 32) wide; the title 20/28 600, 4, the body `message`, 12 between paragraphs (the
 * quiet one `text-secondary`), 12, the pair. The text scrolls inside it and the pair stays; while it scrolls (200 %), a
 * 1 `divider` rule stands over the pair in the middle of the 12 (6 + 1 + 6). */
.clear-dialog {
  box-sizing: border-box;
  width: min(400px, calc(100vw - 2 * var(--space-4)));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: var(--space-4);
  border: 0;
  border-radius: 16px;
  background: var(--sheet);
  color: var(--text-primary);
  flex-direction: column;
}
.clear-dialog[open] { display: flex; }
/* `scrim` (#000000) at 32 % (§ 2.1): a literal, as `::backdrop` of an older browser inherits no custom property. */
.clear-dialog::backdrop { background: rgb(0 0 0 / 0.32); }
/* `anywhere`: the body names the account's address, one word of up to 64 characters (К10: at 200 % on 360 px it wraps). */
.clear-body { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-wrap: anywhere; }
.clear-title { margin: 0; font: 600 var(--t-pos-group-size) / var(--t-pos-group-lh) var(--font-ui); letter-spacing: var(--t-pos-group-ls); color: var(--text-primary); }
.clear-body p { margin: var(--space-3) 0 0; font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); }
.clear-body .clear-title + p { margin-top: var(--space-1); }
.clear-body p.quiet { color: var(--text-secondary); }
.clear-pair { flex: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); row-gap: var(--space-2); margin-top: var(--space-3); }
.clear-dialog.scrolls .clear-pair { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--divider); }
.clear-pair button:disabled { cursor: default; opacity: 0.6; }
/* The reading of the server's set in the restore question (§ 5.48, the bar of § 5.2): 4 high, radius 2, the
 * `surface-container` track and an `accent` segment, 12 under the title; drawn only once the read has taken 400 ms. */
.restore-reading { position: relative; height: 4px; margin-top: var(--space-3); border-radius: 2px; background: var(--surface-container); overflow: hidden; }
.restore-reading > div { position: absolute; top: 0; bottom: 0; width: 30%; border-radius: 2px; background: var(--accent); animation: restore-reading 1.2s ease-in-out infinite; }
@keyframes restore-reading { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .restore-reading > div { animation: none; left: 0; } }
/* The button of a step that removes (plans/v137, q3 «A», the role `danger` of § 2.1): `ActionButton` filled `danger`
 * (the value of `error`) under a label of `on-danger` (the value of `surface`); pressed `danger-pressed`, `danger` with
 * 12 % of `on-danger` (#994738 light, #D6A193 dark), the rule of `action-pressed`. */
.action-button.danger { background: var(--error); color: var(--surface); }
.action-button.danger:hover, .action-button.danger:active { background: color-mix(in srgb, var(--error) 88%, var(--surface)); }
.ls-list { margin: 0; padding: 0; list-style: none; }
.ls-item { display: flex; align-items: center; gap: var(--space-2); }
.ls-item + .ls-item { border-top: 1px solid var(--divider); }
.ls-item > .row { flex: 1 1 auto; min-width: 0; display: block; padding: var(--space-3) 0; color: var(--text-primary); }
.ls-item > .row:hover { text-decoration: none; }
.ls-remove { all: unset; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--text-tertiary); cursor: pointer; }
.ls-remove:hover { background: var(--surface-pressed); }
.ls-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The bar of `Undo` (§ 5.20 `undo-bar`): over the page at the bottom of the window, one at a time. */
.undo-bar {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 4;
  max-width: 35rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-1) 0 var(--space-4);
  border-radius: 12px;
  background: var(--surface-container);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.undo-bar[hidden] { display: none; }
.undo-text { flex: 1 1 auto; font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui); color: var(--text-primary); }
.undo-text.error { color: var(--error); }
.undo-action {
  all: unset;
  padding: var(--space-3);
  cursor: pointer;
  color: var(--accent);
  font: var(--t-button-style) var(--t-button-weight) var(--t-button-size) / var(--t-button-lh) var(--font-ui);
}
.undo-action:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- The group of /about (C10): the number of My words under `Your words: …` (`Clear my words` went to /lists, plans/v137
 * R5). The group comes after `load`: when the page runs scripts it has from the first frame the room of its one line of
 * `message`, so its coming moves nothing under it (CLS 0; orchestrator 2026-10-21). */
@media (scripting: enabled) {
  .about-words-group { display: block; min-height: calc(var(--t-message-size) * var(--t-message-lh)); margin-bottom: var(--space-3); }
  .about-words-group > :last-child { margin-bottom: 0; }
}

/* While the cookie notice of v130 stands at the bottom of the window, the bar of `Undo` stands above it (`--consent-h`,
 * set by the site script as W8 reserves the room of the notice), so `Undo` is never covered. */
.has-consent-bar .undo-bar { bottom: calc(var(--consent-h, 0px) + var(--space-4)); }
/* sekirov.com stage D (appended with practice_live by scripts/build.mjs, after stage-c.css): /practice of a reader with an
 * account -- the ring of the streak and `Practise N words` (§ 5.47 «Серия как достижение», «`/practice`»), the card of a
 * session (§ 5.21 `training-card` in the site's face, § 5.45b), the summary, the burst's canvas, the card's menu and the
 * offer of the extension (v129 § 13). Every number is a token of docs/design-system.md or a figure of § 5.45b / § 5.47.
 * Its own file, so the edits of the bar and the grid (W8) stay out of it. */

.pr-page { display: flex; flex-direction: column; }
.pr-page > .pg-prog:first-child, .pr-page > :first-child { margin-top: 0; }
.pr-message { margin: 0; font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); }

/* The ring (§ 5.47): 96 px, growing with the text up to 160; the track 8 `divider`, the arc `accent` with a round end;
 * the number 600 inside; under it `days in a row` (17/26 600), 4, `N more to reach M` and the best line (15/24). */
.pr-ring { display: flex; flex-direction: column; align-items: flex-start; }
.pr-ring-svg { width: clamp(96px, 6rem, 160px); height: auto; aspect-ratio: 1; display: block; }
.pr-ring-track { stroke: var(--divider); }
.pr-ring-arc { stroke: var(--accent); }
.pr-ring-number { font-family: var(--font-ui); font-weight: 600; fill: var(--text-primary); }
.pr-ring-unit { margin: var(--space-1) 0 0; font: 600 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); white-space: nowrap; }
.pr-ring-next, .pr-ring-best { margin: var(--space-1) 0 0; font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui); color: var(--text-secondary); }
@media not all and (min-width: 64em) { .pr-ring { align-items: center; text-align: center; } }

/* The column of a session: the head (counter, ⋯, ×), the card, Next under the tail. */
.pr-column { position: relative; max-width: 35em; }
.pr-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.pr-counter { margin: 0; font: var(--t-label-style) var(--t-label-weight) var(--t-label-size) / var(--t-label-lh) var(--font-ui); color: var(--text-tertiary); }
.pr-head-end { display: flex; gap: var(--space-1); }
.pr-icon { all: unset; display: grid; place-items: center; width: var(--target); height: var(--target); border-radius: 12px; color: var(--text-secondary); cursor: pointer; }
.pr-icon:hover { background: var(--surface-pressed); }
.pr-icon:focus-visible, .pr-option:focus-visible, .pr-tile:focus-visible, .pr-erase:focus-visible, .pr-speak:focus-visible, .pr-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-menu { position: absolute; right: 0; top: 48px; z-index: 5; display: flex; flex-direction: column; min-width: 14rem; padding: var(--space-2) 0; border: 1px solid var(--divider); border-radius: 12px; background: var(--surface); }
.pr-menu-item { all: unset; box-sizing: border-box; min-height: 48px; padding: 0 var(--space-4); display: flex; align-items: center; cursor: pointer; color: var(--text-primary); font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); }
.pr-menu-item:hover { background: var(--surface-pressed); }

.pr-card p { margin: 0; }
.pr-question { margin-top: var(--space-3) !important; font: var(--t-card-question-style) var(--t-card-question-weight) var(--t-card-question-size) / var(--t-card-question-lh) var(--font-ui); color: var(--text-secondary); }
.pr-material { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.pr-pos { font: italic 400 var(--t-suggestion-note-size) / var(--t-suggestion-note-lh) var(--font-ui); color: var(--text-secondary); }
.pr-word { font: 600 var(--t-word-size) / var(--t-word-lh) var(--font-read); color: var(--text-primary); overflow-wrap: anywhere; }
.pr-word.phrase { font-size: var(--t-word-phrase-size); line-height: var(--t-word-phrase-lh); }
.pr-pos-inline { margin-left: 10px; font: italic 400 var(--t-pos-inline-size) / var(--t-pos-inline-lh) var(--font-read); color: var(--text-secondary); }
.pr-ipa { font: 400 var(--t-pronunciation-size) / var(--t-pronunciation-lh) var(--font-ipa); color: var(--text-secondary); }
.pr-definition { font: 400 var(--t-definition-size) / var(--t-definition-lh) var(--font-read); color: var(--text-primary); }
.pr-example { font: italic 400 var(--t-example-size) / var(--t-example-lh) var(--font-read); color: var(--text-secondary); }
.pr-em { font-weight: 600; color: var(--text-primary); }
.pr-blank { display: inline-block; width: 3.2em; height: max(1.5px, 0.1em); margin: 0 0.14em; vertical-align: 0.2em; background: var(--accent); }
.pr-hint { align-self: flex-start; color: var(--text-secondary); margin-top: var(--space-3); }
.pr-hint:disabled { color: var(--text-disabled); cursor: default; }
.pr-hear { display: flex; align-items: center; gap: var(--space-3); }
.pr-speak { all: unset; display: grid; place-items: center; width: var(--target); height: var(--target); border-radius: 50%; color: var(--accent); cursor: pointer; }

/* The answer zone, 32 under the material: options, a field, or cells and tiles; `I don't remember` 16 under it. */
.pr-zone { margin-top: var(--space-8); }
.pr-options { display: flex; flex-direction: column; gap: var(--space-2); }
.pr-option {
  all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: 14px var(--space-4); border-radius: 12px; background: var(--surface-container);
  box-shadow: inset 0 0 0 1px var(--chip-edge); color: var(--text-primary); cursor: pointer;
  font: 400 var(--t-definition-size) / var(--t-definition-lh) var(--font-read);
}
.pr-option:hover { background: var(--surface-pressed); }
.pr-digit { display: none; font: var(--t-label-style) var(--t-label-weight) var(--t-label-size) / var(--t-label-lh) var(--font-ui); color: var(--text-tertiary); }
.pr-card.digits .pr-digit { display: inline; }
.pr-option.paint-right { background: var(--answer-right-container); box-shadow: inset 0 0 0 2px var(--answer-right); }
.pr-option.paint-wrong { background: var(--answer-wrong-container); box-shadow: inset 0 0 0 2px var(--answer-wrong); }
.pr-option.paint-muted { color: var(--text-tertiary); }
.pr-card.answered .pr-option { cursor: default; }
.pr-right-row { margin-top: var(--space-2); }
.pr-disc { position: absolute; right: -10px; top: 18px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--surface); }
.pr-disc.right { background: var(--answer-right); }
.pr-disc.wrong { background: var(--answer-wrong); }
.pr-field { position: relative; display: flex; min-height: 56px; border-radius: 12px; background: var(--surface-container); box-shadow: inset 0 0 0 1px var(--chip-edge); }
.pr-field.paint-right { background: var(--answer-right-container); box-shadow: inset 0 0 0 2px var(--answer-right); }
.pr-field.paint-wrong { background: var(--answer-wrong-container); box-shadow: inset 0 0 0 2px var(--answer-wrong); }
.pr-input { all: unset; box-sizing: border-box; flex: 1; min-width: 0; padding: 0 var(--space-4); font: var(--t-input-style) var(--t-input-weight) var(--t-input-size) / var(--t-input-lh) var(--font-ui); color: var(--text-primary); }
.pr-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.pr-build { display: flex; flex-direction: column; gap: var(--space-4); }
.pr-cells { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pr-cell { display: grid; place-items: center; width: 1.6em; height: 2em; border-bottom: 2px solid var(--text-tertiary); font: var(--t-tile-letter-style) var(--t-tile-letter-weight) var(--t-tile-letter-size) / 1 var(--font-ui); color: var(--text-primary); }
.pr-cell.mark { border-bottom-color: transparent; }
.pr-cells.paint-right .pr-cell:not(.mark) { border-bottom-color: var(--answer-right); }
.pr-cells.paint-wrong .pr-cell:not(.mark) { border-bottom-color: var(--answer-wrong); }
.pr-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pr-tile { all: unset; display: grid; place-items: center; min-width: var(--target); height: var(--target); border-radius: 12px; background: var(--surface-container); box-shadow: inset 0 0 0 1px var(--chip-edge); cursor: pointer; font: var(--t-tile-letter-style) var(--t-tile-letter-weight) var(--t-tile-letter-size) / 1 var(--font-ui); color: var(--text-primary); }
.pr-tile.used { visibility: hidden; }
.pr-erase { all: unset; display: grid; place-items: center; width: var(--target); height: var(--target); border-radius: 12px; color: var(--text-secondary); cursor: pointer; }
.pr-erase:disabled { color: var(--text-disabled); cursor: default; }
.pr-exit-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); }
.pr-exit { color: var(--text-secondary); }
.pr-tail { display: flex; flex-direction: column; gap: var(--space-2); }
.pr-tail:not(:empty) { margin-top: var(--space-6); }
.pr-phrase { font: 600 var(--t-answer-verdict-size) / var(--t-answer-verdict-lh) var(--font-ui); color: var(--text-primary); }
.pr-line { font: 400 var(--t-wordforms-size) / var(--t-wordforms-lh) var(--font-ui); color: var(--text-secondary); }
.pr-next { display: flex; margin-top: var(--space-6); }
@media not all and (min-width: 64em) { .pr-next { justify-content: center; } }

/* The summary (§ 5.21 «Итог»): Done. 4 · the phrase 16 · the numbers, a list of 4 · 40 · the actions. */
.pr-summary { position: relative; display: flex; flex-direction: column; }
.pr-summary p { margin: 0; }
.pr-done { font: 600 var(--t-word-size) / var(--t-word-lh) var(--font-ui); color: var(--text-primary); }
.pr-summary .pr-phrase { margin-top: var(--space-1); }
.pr-sum-line { margin-top: var(--space-1) !important; font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); }
.pr-sum-line.first { margin-top: var(--space-4) !important; }
.pr-sum-line.subdued { color: var(--text-tertiary); }
.pr-summary .t-err { margin-top: var(--space-3); color: var(--error); font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); }
.pr-sum-act { flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-10); }
.pr-offer { margin-top: var(--space-6); }
.pr-confetti { position: absolute; inset: 0; pointer-events: none; }
/* ---- The cookie notice `consent-bar` and `Cookie settings` (plans/v130_search_engines_and_analytics.md, part C;
 * docs/design-system.md § 5.45a; plans/design/v130_search_engines/spec.md, variant A «dark card», owner 2026-10-20).
 * Added to the stylesheet only while the analytics IDs are configured (scripts/build.mjs); the card is made by the
 * site script (src/consent.mjs), last in <body>.
 *
 * Colours are the `inverse-*` tokens of § 2, aliases of existing values: in the light theme the ink of the page
 * (`text-primary`), the paper (`surface`) and the lime (`action`); in the dark theme the card is a piece of the LIGHT
 * page -- its paper, ink and lime button -- so the dark values and the card's own `action`, `on-action` and
 * `action-pressed` are written by the build from the light block of tokens.css (in the dark theme of the site
 * `action` is olive). No shadow, no line: lightness holds the edge. */
:root {
  --inverse-surface: var(--text-primary);
  --on-inverse-surface: var(--surface);
  --inverse-accent: var(--action);
}

/* Floating card: 8 from the left, right and bottom edges (+ the safe area), at most 35rem + 40 wide, centred;
 * field 12 at the top, right and bottom, 16 at the left; radius 16; the line and the button 16 apart on one
 * axis, the button under the line, at the right, 12 below it when the line has less than 14 em. */
.consent-bar {
  position: fixed;
  z-index: 5;
  left: var(--space-2);
  right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  box-sizing: border-box;
  max-width: calc(35rem + 2 * var(--space-5));
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  background: var(--inverse-surface);
  color: var(--on-inverse-surface);
}
.consent-bar[hidden] { display: none; }
.consent-text {
  flex: 1 1 14em;
  min-width: 0;
  margin: 0;
  font-family: var(--t-wordforms-family);
  font-size: var(--t-wordforms-size);
  line-height: var(--t-wordforms-lh);
  font-weight: 400;
}
.consent-text a {
  color: var(--inverse-accent);
  text-decoration: underline;
  text-decoration-thickness: from-font;
}
.consent-bar .action-button { flex: none; margin-left: auto; }
/* Motion: none -- the card comes and goes at once, a press changes the fill at once (§ 5.45a). */
.consent-bar .action-button,
.consent-bar .action-button:hover,
.consent-bar .action-button:active { transition: none; }
.consent-bar :focus-visible { outline-color: var(--inverse-accent); }

/* Room at the bottom while the card is on the screen: exactly what it takes from the top of the card to the bottom
 * of the window (`--consent-h`, the site script by ResizeObserver), so a scroll to the end shows everything the card
 * covers, the footer and `Cookie settings` included (the room stands under the footer, which follows the content,
 * src/stage-b.css); on the desktop the part-of-speech list, sticky with its
 * own scroll, ends the same room higher (Nav left, src/stage-b.css `.side-parts`); the offline bar stands 16 above
 * the card. */
body.has-consent-bar { padding-bottom: var(--consent-h, 0px); }
.has-consent-bar .offline-bar { bottom: calc(var(--consent-h, 0px) + var(--space-4)); }
@media (min-width: 64em) {
  .has-consent-bar .side-parts { max-height: calc(100vh - var(--site-bar) - var(--space-8) - var(--space-6) - var(--consent-h, 0px)); }
}

/* `Cookie settings`: the last item of the footer's links, a button that looks like them (`wordforms` 500 accent,
 * target 32 / 48 on a touch screen). */
.footer-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.footer-button:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --inverse-surface: #FCFBF9; --on-inverse-surface: #1B1A17; --inverse-accent: #1B1A17; }
  :root:not([data-theme="light"]) .consent-bar { --action: #CFE562; --on-action: #1B1A17; --action-pressed: #B9CD59; }
}
:root[data-theme="dark"] { --inverse-surface: #FCFBF9; --on-inverse-surface: #1B1A17; --inverse-accent: #1B1A17; }
:root[data-theme="dark"] .consent-bar { --action: #CFE562; --on-action: #1B1A17; --action-pressed: #B9CD59; }
/* The Sign in with Google button (plans/v105_stage_c_plan.md, Дополнение 1, Д1.1; the look approved by the owner
 * 2026-10-23, ui-designer's spec): Google's Light theme on a light page and its Dark theme on a dark one, the colours
 * Google's, not the site's palette (docs/design-system.md § 5.47 «Кнопка Google»). The G and the label are Google's
 * own drawing (site/assets/google/, the pill of the file left to this stylesheet), so no font is loaded for it.
 * One stylesheet for the site (appended to site.css) and the deletion page (inlined by server/src/pages/deletePage.ts).
 *   - 40 high on a pointer, 48 on touch, radius half the height (a pill); the column's width, at most 400; the drawing
 *     156 x 20 (187.2 x 24 on touch) in the centre, in rem so it grows with the text, never wider than the button
 *     less its 12 + 12;
 *   - hover and press: a layer of the label's colour at 8 % and 12 % over the fill, the G untouched;
 *   - `Signing in…`: the 12 % layer held (`aria-busy`); no disabled state (fading would fade the G);
 *   - focus: the site's 2 px accent ring, offset 2. */
.gsi-btn {
  all: unset;
  --gsi-fill: #FFFFFF;
  --gsi-stroke: #747775;
  --gsi-label: #1F1F1F;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  /* A flex item of every slot it stands in: without this its least width is the drawing and the 12 + 12, which at 200 %
   * text (312 + 24) overflows a phone's column and scrolls the page sideways; with it the drawing shrinks instead. */
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 12px;
  border-radius: 9999px;
  background: var(--gsi-fill);
  box-shadow: inset 0 0 0 1px var(--gsi-stroke);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.gsi-btn .gsi-mark { display: block; position: relative; z-index: 1; flex: none; width: 9.75rem; max-width: 100%; height: auto; pointer-events: none; user-select: none; }
.gsi-btn .gsi-dark { display: none; }
.gsi-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--gsi-label); opacity: 0; pointer-events: none; }
@media (hover: hover) { .gsi-btn:hover::after { opacity: 0.08; } }
.gsi-btn:active::after, .gsi-btn[aria-busy="true"]::after { opacity: 0.12; }
.gsi-btn[aria-busy="true"] { cursor: progress; }
.gsi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  .gsi-btn { min-height: 3rem; }
  .gsi-btn .gsi-mark { width: 11.7rem; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gsi-btn { --gsi-fill: #131314; --gsi-stroke: #8E918F; --gsi-label: #E3E3E3; }
  :root:not([data-theme="light"]) .gsi-btn .gsi-light { display: none; }
  :root:not([data-theme="light"]) .gsi-btn .gsi-dark { display: block; }
}
:root[data-theme="dark"] .gsi-btn { --gsi-fill: #131314; --gsi-stroke: #8E918F; --gsi-label: #E3E3E3; }
:root[data-theme="dark"] .gsi-btn .gsi-light { display: none; }
:root[data-theme="dark"] .gsi-btn .gsi-dark { display: block; }
/* The return page /signin/return (Д1.6): its one line, or the way back, in the site's column. */
.signin-return { box-sizing: border-box; max-width: calc(35rem + 32px); margin: 0 auto; padding: var(--space-6, 24px) 16px; }
.signin-return-line { margin: 0 0 var(--space-3, 12px); font: 400 var(--t-message-size) / var(--t-message-lh) var(--font-ui); color: var(--text-primary); }
.signin-return-line[hidden], [data-return-lost][hidden] { display: none; }