/* Source Sans 3 — самохостим рядом (fonts/): один вид на всех платформах, свободная лицензия.
     Вариативный, кириллица и латиница раздельными сабсетами по unicode-range */
  @font-face {
    font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal;
    font-display: swap; src: url("../fonts/source-sans-3-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal;
    font-display: swap; src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* JetBrains Mono — открытый (SIL OFL), самохостим; таймкод, подписи, цифры */
  @font-face {
    font-family: "JetBrains Mono"; font-weight: 200 800; font-style: normal;
    font-display: swap; src: url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: "JetBrains Mono"; font-weight: 200 800; font-style: normal;
    font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  :root {
    --bg: #FFFFFF;
    --bg-2: #F5F6F8;
    --ink: #17191C;
    --ink-2: #6C7278;
    --line: #E4E7EA;
    --accent: #007AB8;          /* акцент для текста */
    --accent-raw: #00AAFF;      /* заливки и подсветка */
    --accent-contrast: #FFFFFF; /* текст поверх акцентной заливки */
    --ok: #007AB8;
    --warn: #9A6B00;
    --over: #D6362B;
    --meter-bg: #E9ECEF;
    --focus: #007AB8;
    --hl-bg: rgba(0, 170, 255, .13);
    --cur-bg: rgba(0, 170, 255, .30);
    --comm-bg: rgba(214, 54, 43, .13);
    --sel-bg: #17191C;      /* выбранный контрол */
    --sel-ink: #FFFFFF;
    --radius: 12px;
    --radius-s: 7px;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #1A1E23;
      --bg-2: #22262C;
      --ink: #E8EBED;
      --ink-2: #9AA1A8;
      --line: #31373D;
      --accent: #33B6FF;
      --accent-contrast: #17191C; /* на светлом акценте тёмной темы белый не читается (2.3:1) */
      --ok: #33B6FF;
      --warn: #E2A83D;
      --over: #F2604F;
      --meter-bg: #2E343A;
      --focus: #33B6FF;
      --hl-bg: rgba(0, 170, 255, .17);
      --cur-bg: rgba(0, 170, 255, .35);
      --comm-bg: rgba(242, 96, 79, .18);
      --sel-bg: #E8EBED;
      --sel-ink: #1A1E23;
    }
  }
  :root[data-theme="light"] {
    --bg: #FFFFFF; --bg-2: #F5F6F8;
    --ink: #17191C; --ink-2: #6C7278; --line: #E4E7EA;
    --accent: #007AB8; --accent-contrast: #FFFFFF;
    --ok: #007AB8; --warn: #9A6B00; --over: #D6362B;
    --meter-bg: #E9ECEF; --focus: #007AB8;
    --hl-bg: rgba(0, 170, 255, .13);
    --cur-bg: rgba(0, 170, 255, .30);
    --comm-bg: rgba(214, 54, 43, .13);
    --sel-bg: #17191C; --sel-ink: #FFFFFF;
  }
  :root[data-theme="dark"] {
    --bg: #1A1E23; --bg-2: #22262C;
    --ink: #E8EBED; --ink-2: #9AA1A8; --line: #31373D;
    --accent: #33B6FF; --accent-contrast: #17191C;
    --ok: #33B6FF; --warn: #E2A83D; --over: #F2604F;
    --meter-bg: #2E343A; --focus: #33B6FF;
    --hl-bg: rgba(0, 170, 255, .17);
    --cur-bg: rgba(0, 170, 255, .35);
    --comm-bg: rgba(242, 96, 79, .18);
    --sel-bg: #E8EBED; --sel-ink: #1A1E23;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* hidden важнее display из классов */
  [hidden] { display: none !important; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  ::selection { background: var(--cur-bg); }
  /* только для скринридеров */
  .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

  /* ярлыки панелей */
  .label {
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2);
  }

  /* ---------- Header ---------- */
  header.site {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px 20px; padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }
  .brand { display: flex; align-items: baseline; gap: 12px; }
  .brand .logo {
    font-weight: 700; font-size: 18px; letter-spacing: .01em;
    text-decoration: none;
  }
  .brand .logo b { color: inherit; font-weight: 700; }
  .brand .tool-name {
    margin: 0;
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
    border-left: 1px solid var(--line); padding-left: 12px;
  }
  /* пояснение своей строкой */
  .tagline {
    order: 3; flex-basis: 100%; margin: 0;
    font-size: 13.5px; font-weight: 400; color: var(--ink-2);
  }
  .header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .theme-btn {
    width: 34px; height: 34px; display: grid; place-items: center;
    background: none; border: 1px solid var(--line); border-radius: var(--radius-s);
    color: var(--ink-2); cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .theme-btn:hover { color: var(--ink); border-color: var(--ink-2); }
  .theme-btn svg { width: 17px; height: 17px; }
  /* иконка целевой темы */
  .t-sun { display: none; }
  .t-moon { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .t-moon { display: none; }
    :root:not([data-theme="light"]) .t-sun { display: block; }
  }
  :root[data-theme="dark"] .t-moon { display: none; }
  :root[data-theme="dark"] .t-sun { display: block; }
  :root[data-theme="light"] .t-moon { display: block; }
  :root[data-theme="light"] .t-sun { display: none; }
  .header-cta {
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--ink); border: 1px solid var(--line);
    padding: 8px 14px; border-radius: var(--radius-s);
    transition: color .15s, border-color .15s;
  }
  .header-cta:hover { color: var(--accent); border-color: var(--accent); }
  .header-cta svg { display: none; }

  /* ---------- Workbench: общий каркас ---------- */
  .bench {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    align-items: stretch;
    border: 1px solid var(--line); border-radius: var(--radius);
    margin: 8px 0 40px;
  }

  .script { display: flex; flex-direction: column; min-width: 0; }
  .script-head {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 6px; padding: 10px 20px 8px;
  }
  .script:focus-within .script-head .label { color: var(--accent); }
  .script-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .btn-ghost {
    font: 500 12px var(--sans); color: var(--ink-2);
    background: none; border: 1px solid var(--line);
    padding: 3px 9px; border-radius: var(--radius-s);
    cursor: pointer; transition: color .15s, background .15s, border-color .15s;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .btn-ghost:hover { color: var(--ink); background: var(--bg-2); }
  .btn-ghost:active { color: var(--ink); background: var(--line); }
  .btn-ghost svg { width: 14px; height: 14px; flex: none; }
  /* play/stop по .running */
  .btn-ghost .ic-stop { display: none; }
  .btn-ghost.running .ic-play { display: none; }
  .btn-ghost.running .ic-stop { display: block; }

  /* таймлайн суфлёра */
  .prompter-line {
    height: 2px; margin: 0 20px; border-radius: 1px;
    background: var(--meter-bg); overflow: hidden;
  }
  .prompter-line .pl-fill {
    height: 100%; width: 0%;
    background: var(--accent-raw);
  }

  /* Зеркало подсветки за прозрачным textarea */
  .editor { position: relative; flex: 1; }
  .mirror {
    position: absolute; top: 0; left: 0; overflow: hidden;
    white-space: pre-wrap; overflow-wrap: break-word;
    font: 400 17.5px/1.7 var(--sans);
    padding: 8px 20px 16px;
    box-sizing: border-box;
    color: transparent; pointer-events: none; user-select: none;
  }
  .mirror mark.hl {
    color: transparent; background: var(--hl-bg);
    border-bottom: 2px solid var(--accent-raw); border-radius: 3px;
  }
  /* комментарий копирайтера — исключён из расчёта */
  .mirror mark.comm {
    color: transparent; background: var(--comm-bg);
    border-bottom: 2px dotted var(--over); border-radius: 3px;
  }
  /* текущая синтагма */
  .mirror mark.cur {
    color: transparent; background: var(--cur-bg); border-radius: 3px;
  }
  .mirror mark.cur mark.hl, .mirror mark.cur mark.comm { background: none; }
  .tip {
    position: absolute; z-index: 3; max-width: 320px;
    background: var(--ink); color: var(--bg);
    border-radius: 8px; padding: 10px 14px;
    font-size: 13px; line-height: 1.5;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  }
  .tip-syl { opacity: .65; }
  .tip-word {
    margin-top: 8px; display: flex; gap: 6px;
    align-items: center; flex-wrap: wrap;
  }
  .tip-word .w { font-weight: 700; margin-right: 2px; }
  .tip-word button {
    font: 600 12px var(--sans); color: inherit; background: none;
    border: 1px solid currentColor; border-radius: 6px;
    padding: 3px 10px; cursor: pointer; opacity: .6;
  }
  .tip-word button.on {
    background: var(--accent); border-color: var(--accent);
    color: var(--accent-contrast); opacity: 1;
  }

  textarea#text {
    /* поле по каркасу, без resize */
    width: 100%; min-height: 240px; height: 100%; resize: none;
    border: none; background: transparent; color: var(--ink);
    font: 400 17.5px/1.7 var(--sans);
    padding: 8px 20px 16px; display: block;
    position: relative; z-index: 1;
    caret-color: var(--accent-raw);
  }
  textarea#text:focus { outline: none; }
  textarea#text::placeholder { color: var(--ink-2); opacity: .6; }

  .script-foot {
    display: flex; flex-wrap: wrap; gap: 4px 20px;
    padding: 8px 20px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .script-foot b { color: var(--ink); font-weight: 600; }

  /* ---------- Console (правая стойка) ---------- */
  .rack { border-left: 1px solid var(--line); }
  .console { position: sticky; top: 12px; }
  .console > * + * { border-top: 1px solid var(--line); }

  .clock { padding: 10px 20px 12px; }
  .clock-top {
    display: flex; align-items: center; justify-content: space-between;
  }
  /* точка: цвет вердикта, пульс при переборе */
  .onair {
    display: inline-flex; align-items: center; gap: 7px;
    font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .12em;
    opacity: 0; transition: opacity .2s;
  }
  .onair .dot {
    width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  }
  .onair.live { opacity: 1; }
  .onair.state-ok { color: var(--ok); }
  .onair.state-warn { color: var(--warn); }
  .onair.state-over { color: var(--over); }
  @media (prefers-reduced-motion: no-preference) {
    .onair.state-over .dot { animation: blink 1.1s steps(2, start) infinite; }
  }
  @keyframes blink { to { visibility: hidden; } }

  .timecode {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 36px; font-weight: 400; letter-spacing: -.03em;
    line-height: 1.02; margin-top: 4px; color: var(--accent);
  }
  .timecode .unit { color: var(--ink-2); }
  .clock-sub {
    font-family: var(--mono); font-size: 11px; color: var(--ink-2);
    margin-top: 4px; font-variant-numeric: tabular-nums;
  }

  /* шкала-уровень, 10 сегментов */
  .meter {
    position: relative; height: 8px; border-radius: 3px;
    background: var(--meter-bg); overflow: hidden; margin-top: 9px;
  }
  .meter .fill {
    height: 100%; width: 0%;
    background: var(--ok);
    transition: width .25s ease, background-color .25s ease;
  }
  .meter::after, .mini-meter::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(90deg,
      transparent 0 calc(100% - 1.5px), var(--bg) calc(100% - 1.5px) 100%);
    background-size: 10% 100%;
  }
  .verdict {
    margin-top: 7px; font-size: 13px; font-weight: 600;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  }
  .verdict .state-ok { color: var(--ok); }
  .verdict .state-warn { color: var(--warn); }
  .verdict .state-over { color: var(--over); }
  /* подсказка своей строкой */
  .verdict .hint {
    font-weight: 400; color: var(--ink-2); font-size: 12.5px;
    flex-basis: 100%; line-height: 1.35;
  }

  .panel { padding: 10px 20px 12px; }
  .panel > .label { display: block; margin-bottom: 8px; }
  .label-row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px;
  }
  .label-row .label { margin: 0; }
  .tempo-wpm {
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }

  .seg {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line); border-radius: var(--radius-s);
    overflow: hidden;
  }
  .seg button {
    font: 500 12.5px var(--sans); color: var(--ink-2);
    background: none; border: none;
    padding: 4px 4px; cursor: pointer;
    transition: color .15s, background .15s;
  }
  .seg button + button { border-left: 1px solid var(--line); }
  .seg button:hover { color: var(--ink); }
  .seg button[aria-pressed="true"] {
    background: var(--sel-bg); color: var(--sel-ink); font-weight: 600;
  }
  .tempo-detail { display: flex; align-items: center; margin-top: 4px; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none;
    flex: 1; min-width: 0; height: 20px;
    background: none; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 2px; background: var(--line); border-radius: 1px;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--ink); margin-top: -6px;
    border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line);
  }
  input[type="range"]::-moz-range-track {
    height: 2px; background: var(--line);
  }
  input[type="range"]::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--ink); border: none;
  }
  .tempo-note {
    margin-top: 4px; font-size: 11.5px; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: 5px;
  }
  .help {
    position: relative;
    display: inline-flex; align-items: center;
    color: var(--ink-2); cursor: help;
  }
  /* убрать базовую линию svg */
  .help svg { display: block; width: 13px; height: 13px; transform: translateY(-1px); }
  .help:hover { color: var(--ink); }
  /* мгновенный тултип вместо title */
  .help::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 7px);
    left: 50%; transform: translateX(-50%);
    width: max-content; max-width: min(240px, calc(100vw - 32px));
    background: var(--ink); color: var(--bg);
    font: 400 12px/1.45 var(--sans);
    padding: 7px 11px; border-radius: 7px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    visibility: hidden; z-index: 5;
  }
  .help:hover::after, .help:focus-visible::after { visibility: visible; }

  .chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .chips button {
    font: 500 13px var(--mono); font-variant-numeric: tabular-nums;
    color: var(--ink); background: none;
    border: 1px solid var(--line); border-radius: var(--radius-s);
    padding: 5px 10px; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
  }
  .chips button:hover { border-color: var(--ink-2); }
  .chips button[aria-pressed="true"] {
    background: var(--sel-bg); border-color: var(--sel-bg);
    color: var(--sel-ink); font-weight: 600;
  }
  /* «свой»: рамка на обёртке, чтобы «с» стояло внутри поля — как у чипсов «15 с» */
  .chip-custom {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--line); border-radius: var(--radius-s);
    padding: 5px 8px; font: 500 13px var(--mono); color: var(--ink);
  }
  .chip-custom input {
    width: 40px; font: inherit; color: inherit;
    background: none; border: 0; padding: 0;
  }
  .chip-custom input:focus { outline: none; }
  .chip-custom:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* при пустом поле виден только плейсхолдер «свой» — без «с» */
  .chip-custom input:placeholder-shown + .unit { display: none; }
  .chips input::placeholder { color: var(--ink-2); font-family: var(--sans); }
  .budget {
    margin-top: 8px; font-size: 11.5px; color: var(--ink-2);
    font-variant-numeric: tabular-nums; line-height: 1.45;
  }
  .budget b { color: var(--ink); font-weight: 600; }

  /* ---------- Опции ролика: свитчи ---------- */
  .opt { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.4; cursor: pointer; }
  .opt + .opt, .opt-detail + .opt { margin-top: 7px; }
  .opt input {
    appearance: none; -webkit-appearance: none;
    width: 32px; height: 19px; border-radius: 100px;
    background: var(--meter-bg); position: relative;
    margin: 1px 0 0; flex: none; cursor: pointer;
    transition: background .18s;
  }
  .opt input::after {
    content: ""; position: absolute; top: 2.5px; left: 2.5px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .18s;
  }
  .opt input:checked { background: var(--accent); }
  .opt input:checked::after { transform: translateX(13px); }
  .opt small { display: block; color: var(--ink-2); font-size: 11.5px; }
  .opt-detail {
    margin: 5px 0 0 41px; font-size: 12px; color: var(--ink-2);
    display: flex; align-items: center; gap: 7px;
  }
  .opt-detail input {
    width: 68px; font: 500 12.5px var(--mono); color: var(--ink);
    background: none; border: 1px solid var(--line);
    border-radius: 6px; padding: 3px 7px;
  }
  /* тач: поля ≥16px, иначе iOS зумит при фокусе; держать ниже базовых правил input */
  @media (pointer: coarse) {
    .chip-custom { font-size: 16px; }
    .chip-custom input { width: 52px; }
    .opt-detail input { font-size: 16px; width: 78px; }
  }

  .cta {
    padding: 11px 20px 12px;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6px 12px; flex-wrap: wrap;
  }
  .cta h3 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
  .cta p { display: none; margin: 0 0 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
  .cta a {
    font-size: 13px; font-weight: 600; color: var(--accent);
    text-decoration: none;
  }
  .cta a:hover { text-decoration: underline; }

  /* ---------- «Как прозвучит» ---------- */
  .speak {
    padding: 10px 20px 12px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--ink-2);
  }
  .speak .label { display: block; margin-bottom: 6px; }
  .speak-row { margin: 3px 0; }
  .speak-raw { color: var(--ink); font-weight: 600; }
  .speak-syl { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .speak-more { margin-top: 4px; font-size: 12px; }

  /* ---------- Explainer ---------- */
  .explain {
    background: var(--bg-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 52px 0 48px;
  }
  .explain-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
  }
  @media (max-width: 800px) { .explain-grid { grid-template-columns: 1fr; gap: 24px; } }
  .explain h2 {
    font-size: clamp(18px, 2vw, 20px); font-weight: 700; letter-spacing: -.015em;
    margin: 0 0 28px; text-wrap: balance;
  }
  .explain h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
  .explain p { font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: 46ch; }

  .tempo-table { margin-top: 44px; overflow-x: auto; }
  table {
    border-collapse: collapse; width: 100%; max-width: 680px;
    font-size: 14px;
  }
  th, td {
    text-align: left; padding: 10px 16px 10px 0;
    border-bottom: 1px solid var(--line);
  }
  th {
    font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .14em; color: var(--ink-2); font-weight: 600;
  }
  td.num { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
  /* пояснение семантики пресетов под таблицей темпов */
  .tempo-table p {
    margin: 12px 0 0; max-width: 680px;
    font-size: 13px; line-height: 1.55; color: var(--ink-2);
  }

  /* ---------- FAQ ---------- */
  .faq { padding: 48px 0 40px; }
  .faq h2 {
    font-size: clamp(18px, 2vw, 20px); font-weight: 700; letter-spacing: -.015em;
    margin: 0 0 16px; text-wrap: balance;
  }
  .faq details { max-width: 680px; border-bottom: 1px solid var(--line); }
  .faq summary {
    cursor: pointer; padding: 13px 0;
    font-size: 15px; font-weight: 600;
    list-style: none; display: flex; justify-content: space-between; gap: 16px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; font-family: var(--mono); color: var(--ink-2); flex-shrink: 0; }
  .faq details[open] summary::after { content: '–'; }
  .faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .faq details p {
    margin: 0 0 16px; max-width: 60ch;
    font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
  }

  footer.site {
    padding: 24px 0 36px;
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    justify-content: space-between;
    font-size: 12.5px; color: var(--ink-2);
  }
  footer.site a { color: var(--accent); text-decoration: none; }
  footer.site a:hover { text-decoration: underline; }

  /* ---------- Мобильная версия: липкий результат + таббар ---------- */
  .minibar { display: none; }
  .tabbar {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    /* полоса таббара — bg-2 */
    background: var(--bg-2); border-top: 1px solid var(--line);
    padding: 0 calc(8px + env(safe-area-inset-right))
             env(safe-area-inset-bottom)
             calc(8px + env(safe-area-inset-left));
  }
  /* иконка слева, подпись в 2 строки */
  .tabbar button {
    font: 600 9.5px var(--mono); text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-2); text-align: left; line-height: 1.3;
    background: none; border: none; border-radius: 0;
    padding: 9px 4px; cursor: pointer;
    display: flex; flex-direction: row; align-items: center;
    justify-content: center; gap: 8px;
  }
  .tabbar button svg { width: 20px; height: 20px; flex: none; }
  .tabbar button + button { border-left: 1px solid var(--line); }
  .tabbar button.on { color: var(--accent); background: var(--bg); }

  @media (max-width: 900px) {
    /* боковые отступы под вырез */
    .wrap {
      padding: 0 calc(16px + env(safe-area-inset-right))
               0 calc(16px + env(safe-area-inset-left));
    }
    body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
    header.site { padding: 10px 0 12px; gap: 2px 12px; }
    .tagline { font-size: 12.5px; }
    /* CTA — кнопка-иконка */
    .header-cta {
      display: grid; place-items: center;
      width: 32px; height: 32px; padding: 0;
      color: var(--ink-2); /* как у кнопки темы */
    }
    .header-cta svg { display: block; width: 17px; height: 17px; }
    .header-cta span { display: none; }
    .theme-btn { width: 32px; height: 32px; }

    /* липкий мини-бар; top под safe-area (чёлка) */
    .minibar {
      display: block; position: sticky; top: env(safe-area-inset-top); z-index: 20;
      margin: calc(-1 * env(safe-area-inset-top))
              calc(-16px - env(safe-area-inset-right))
              0 calc(-16px - env(safe-area-inset-left));
      padding: calc(10px + env(safe-area-inset-top))
               calc(16px + env(safe-area-inset-right))
               10px calc(16px + env(safe-area-inset-left));
      background: var(--bg); border-bottom: 1px solid var(--line);
      cursor: pointer;
    }
    .minibar-row { display: flex; align-items: center; gap: 12px; }
    .mini-time {
      font-family: var(--mono); font-variant-numeric: tabular-nums;
      font-size: 26px; font-weight: 400; color: var(--accent);
      line-height: 1;
    }
    .mini-meter {
      flex: 1; height: 8px; border-radius: 2px;
      background: var(--meter-bg); overflow: hidden; position: relative;
    }
    .mini-fill {
      height: 100%; width: 0%; background: var(--ok);
      transition: width .25s ease, background-color .25s ease;
    }
    .mini-verdict { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
    .mini-verdict.state-ok { color: var(--ok); }
    .mini-verdict.state-warn { color: var(--warn); }
    .mini-verdict.state-over { color: var(--over); }
    .mini-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-2); }

    .bench { grid-template-columns: 1fr; margin: 14px 0 32px; }
    /* поле растёт под текст (autoGrow) */
    textarea#text { min-height: 280px; overflow: hidden; }
    /* паддинги зеркала и textarea — только парой */
    textarea#text, .mirror { padding: 8px 16px 16px; }
    .script-head { padding: 12px 16px 8px; flex-wrap: wrap; gap: 6px; }
    .script-actions { flex-wrap: wrap; }
    .btn-ghost { padding: 7px 10px; }
    .prompter-line { margin: 0 16px; }
    .speak { padding: 10px 16px 12px; }
    .script-foot { padding: 10px 16px; gap: 4px 14px; }
    .tip { max-width: calc(100vw - 48px); }

    /* часы скрыты, панели = шторки */
    .rack { border-left: none; border-top: 1px solid var(--line); }
    .console { position: static; }
    .console > * + * { border-top: none; }
    .clock { display: none; }
    .panel {
      display: none;
      position: fixed; left: 0; right: 0;
      bottom: calc(57px + env(safe-area-inset-bottom)); z-index: 29;
      background: var(--bg); border-top: 1px solid var(--line);
      box-shadow: 0 -14px 40px rgba(0, 0, 0, .14);
      max-height: 55vh; overflow: auto;
      padding: 18px calc(16px + env(safe-area-inset-right))
               20px calc(16px + env(safe-area-inset-left));
    }
    .panel.sheet-open { display: block; }
    .cta { padding: 14px 16px 16px; display: block; }
    .cta p { display: block; }

    .tabbar { display: grid; }

    .explain { padding: 36px 0 32px; }
    .tempo-table { margin-top: 28px; }
    footer.site { padding: 18px 0 26px; }
  }