/* Inter, self-hosted. SIL OFL: assets/Inter-OFL.txt. Source: Google Fonts. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./inter-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./inter-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./inter-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./inter-3.ttf) format('truetype');
}

/* Числовой источник токенов дизайн-системы.
 * Компоненты используют ссылки на токены; таблица контраста в docs/DESIGN_PROPOSAL.md
 * сверяется с этими значениями. Существующие guards описаны в docs/HARNESS.md.
 * Graphite включается явно через data-gr-appearance; базовые значения доступны светлым consumers. */

:root {
  /* ── §2.1 База (нейтральная шкала, холодный серый) ─────────────────────── */
  --gr-bg-app: #f6f7f9;
  --gr-bg-surface: #ffffff;
  --gr-bg-surface-2: #f1f3f5;
  --gr-bg-hover: #eceff3;
  --gr-bg-active: #e2e6eb;
  --gr-bg-sidebar: #16191d;
  --gr-bg-sidebar-hover: #22262c;
  --gr-bg-sidebar-active: #2c3138;
  --gr-bg-inverse: #16191d;

  /* ── §2.1 Границы ──────────────────────────────────────────────────────── */
  --gr-border: #dde1e6;
  /* §7 требует ≥3:1 к фону для границ контролов. Записанный в §2.1 #C3C9D0 давал 1.7:1 —
   * требование не выполнялось его же значением. Заменён на #878D94: 3.4:1 на белой карточке
   * и 3.1:1 на рабочей области #F6F7F9 (поля вне карточки), оттенок шкалы сохранён. */
  --gr-border-strong: #878d94;
  --gr-border-subtle: #eaedf0;
  --gr-border-sidebar: #2a2f35;

  /* ── §2.1 Текст ────────────────────────────────────────────────────────── */
  --gr-text-primary: #14181d;
  --gr-text-secondary: #4c555f;
  /* §7 требует ≥4.5:1. #697680 давал 4.7:1 на белом, но 4.3:1 на рабочей области #F6F7F9,
   * где лежат хлебные крошки §3.4. #65717B проходит на обоих: 5.0:1 и 4.7:1. */
  --gr-text-muted: #65717b;
  --gr-text-disabled: #a3acb5;
  --gr-text-on-dark: #f2f4f6;
  --gr-text-on-dark-muted: #9aa4ae;
  --gr-text-on-accent: #ffffff;

  /* ── §2.1 Акцент — индиго ──────────────────────────────────────────────── */
  --gr-accent: #4338ca;
  --gr-accent-hover: #3b31b4;
  --gr-accent-active: #332a9c;
  --gr-accent-subtle: #eef0fd;
  --gr-accent-border: #c7cbf6;
  --gr-accent-text: #3730a3;

  /* ── §2.1 Семантические ────────────────────────────────────────────────── */
  --gr-success-solid: #15803d;
  --gr-success-subtle: #e8f6ed;
  --gr-success-border: #a7ddbc;
  --gr-success-text: #136a35;

  --gr-warning-solid: #b45309;
  --gr-warning-subtle: #fdf2e3;
  --gr-warning-border: #f0ce9a;
  --gr-warning-text: #8a4008;

  --gr-danger-solid: #b91c1c;
  --gr-danger-subtle: #fcecec;
  --gr-danger-border: #f2bdbd;
  --gr-danger-text: #a31616;

  --gr-info-solid: #0e7490;
  --gr-info-subtle: #e5f5f9;
  --gr-info-border: #a5d9e6;
  --gr-info-text: #0b5c73;

  --gr-neutral-solid: #4c555f;
  --gr-neutral-subtle: #f1f3f5;
  --gr-neutral-border: #dde1e6;
  --gr-neutral-text: #414952;

  /* ── §2.1 Специальные ──────────────────────────────────────────────────── */
  --gr-focus-ring: #4338ca;
  --gr-focus-ring-offset: #ffffff;
  /* §7: на тёмном сайдбаре кольцо заменяется, иначе контраст к #16191D ниже 3:1. */
  --gr-focus-ring-on-dark: #a5b4fc;
  /* §2.1: ТОЛЬКО кнопка «Войти через Telegram» и иконка ссылки t.me. Нигде больше.
   * Фирменный #229ED9 под белым текстом 14px/550 давал 3.0:1 при требуемых §7 4.5:1.
   * Взят тот же цвет, затемнённый по светлоте: HSL 199°/73% сохранены (49% → 38%),
   * так что кнопка остаётся телеграмовской на глаз, а белый текст даёт 4.7:1. */
  --gr-telegram: #1a7caa;
  --gr-alias-bg: #f1f3f5;
  --gr-overlay: rgba(20, 24, 29, 0.45);

  /* Акцент панели платформы. */
  --gr-ops-accent: #b45309;

  /* Декоративные фоны аватаров; имя и роль остаются текстом. */
  --gr-avatar-1: #d8dcf6;
  --gr-avatar-2: #d3e7db;
  --gr-avatar-3: #f2dfc4;
  --gr-avatar-4: #f0d6d6;
  --gr-avatar-5: #cfe3ea;
  --gr-avatar-6: #e0dbef;
  --gr-avatar-7: #dfe3e7;
  --gr-avatar-8: #e6e2cf;

  /* ── §2.2 Типографика ──────────────────────────────────────────────────── */
  --gr-font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --gr-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  /* «Всегда включены»: табличные цифры и однoэтажная l — различимость l/I/1 в кодах приглашений. */
  --gr-font-features: "tnum" 1, "cv05" 1;

  /* Шкала §2.2. Токен документа `--gr-text-<роль>` разложен на четыре свойства: сокращение
   * `font` сбрасывает font-feature-settings, а «tnum» обязан быть включён всегда. Собранные
   * утилиты — классы `.gr-text-<роль>` в typography.css, имя роли то же, что в документе. */
  --gr-text-display-size: 28px;
  --gr-text-display-line: 34px;
  --gr-text-display-weight: 640;
  --gr-text-display-tracking: -0.02em;

  --gr-text-h1-size: 22px;
  --gr-text-h1-line: 28px;
  --gr-text-h1-weight: 620;
  --gr-text-h1-tracking: -0.015em;

  --gr-text-h2-size: 17px;
  --gr-text-h2-line: 24px;
  --gr-text-h2-weight: 600;
  --gr-text-h2-tracking: -0.01em;

  --gr-text-h3-size: 14px;
  --gr-text-h3-line: 20px;
  --gr-text-h3-weight: 600;
  --gr-text-h3-tracking: 0;

  --gr-text-body-size: 14px;
  --gr-text-body-line: 20px;
  --gr-text-body-weight: 400;
  --gr-text-body-tracking: 0;

  --gr-text-body-strong-size: 14px;
  --gr-text-body-strong-line: 20px;
  --gr-text-body-strong-weight: 550;
  --gr-text-body-strong-tracking: 0;

  --gr-text-sm-size: 13px;
  --gr-text-sm-line: 18px;
  --gr-text-sm-weight: 400;
  --gr-text-sm-tracking: 0;

  --gr-text-xs-size: 12px;
  --gr-text-xs-line: 16px;
  --gr-text-xs-weight: 500;
  --gr-text-xs-tracking: 0.01em;

  --gr-text-overline-size: 11px;
  --gr-text-overline-line: 14px;
  --gr-text-overline-weight: 600;
  --gr-text-overline-tracking: 0.06em;

  --gr-text-mono-size: 13px;
  --gr-text-mono-line: 18px;
  --gr-text-mono-weight: 450;
  --gr-text-mono-tracking: 0;

  /* Единственное место с увеличенным интерлиньяжем: тело сообщения в ленте (§2.2). */
  --gr-text-feed-size: 14.5px;
  --gr-text-feed-line: 22px;
  --gr-text-feed-weight: 400;
  --gr-text-feed-tracking: 0;

  /* §2.2: максимальная ширина читаемого текста. */
  --gr-measure: 68ch;

  /* ── §2.3 Сетка и отступы (база 4px, шкала закрыта) ────────────────────── */
  --gr-space-1: 4px;
  --gr-space-2: 8px;
  --gr-space-3: 12px;
  --gr-space-4: 16px;
  --gr-space-5: 20px;
  --gr-space-6: 24px;
  --gr-space-8: 32px;
  --gr-space-10: 40px;
  --gr-space-12: 48px;
  --gr-space-16: 64px;

  /* Каркас кабинета (§2.3), фиксированный. */
  --gr-sidebar-width: 248px;
  --gr-sidebar-width-collapsed: 64px;
  --gr-topbar-height: 56px;
  --gr-content-max-width: 1440px;
  --gr-content-padding-y: var(--gr-space-6);
  --gr-content-padding-x: var(--gr-space-8);
  --gr-grid-gutter: var(--gr-space-6);
  --gr-meta-panel-min-width: 320px;
  --gr-meta-panel-max-width: 380px;

  /* Плотность (§2.3, §2.5, §4): значения продукта, а не «удобные». */
  --gr-row-height: 44px;
  --gr-table-head-height: 36px;
  --gr-control-height-sm: 28px;
  --gr-control-height-md: 32px;
  --gr-control-height-lg: 40px;
  --gr-field-height: 36px;
  --gr-badge-height: 20px;
  --gr-menu-item-height: 32px;

  /* ── §2.4 Радиусы ──────────────────────────────────────────────────────── */
  --gr-radius-xs: 4px;
  --gr-radius-sm: 6px;
  --gr-radius-md: 8px;
  --gr-radius-lg: 10px;
  --gr-radius-full: 999px;

  /* ── §2.4 Тени. Карточки в потоке — БЕЗ тени, только 1px граница. ──────── */
  --gr-shadow-none: none;
  --gr-shadow-sm: 0 1px 2px rgba(20, 24, 29, 0.06);
  --gr-shadow-md:
    0 4px 12px rgba(20, 24, 29, 0.1), 0 0 0 1px rgba(20, 24, 29, 0.04);
  --gr-shadow-lg:
    0 16px 40px rgba(20, 24, 29, 0.16), 0 0 0 1px rgba(20, 24, 29, 0.06);

  /* Ширины диалогов §2.5. */
  --gr-dialog-sm: 420px;
  --gr-dialog-md: 560px;
  --gr-dialog-lg: 720px;
  --gr-dialog-xl: 920px;

  --gr-toast-width: 360px;
  /* Shared Metronic presentation palette. */
  --gr-metronic-canvas: #e9edf2;
  --gr-metronic-surface: #f7f9fb;
  --gr-metronic-surface-soft: #e4eaf1;
  --gr-metronic-hover: #eef3f9;
  --gr-metronic-ink: #1c2738;
  --gr-metronic-text: #29394d;
  --gr-metronic-secondary: #516075;
  --gr-metronic-muted: #5d6b7e;
  --gr-metronic-sidebar: #111e2e;
  --gr-metronic-sidebar-panel: #1b2b40;
  --gr-metronic-sidebar-hover: #1f3149;
  --gr-metronic-sidebar-active: #223a56;
  --gr-metronic-sidebar-border: #2e3d52;
  --gr-metronic-sidebar-count: #355071;
  --gr-metronic-on-dark: #b6c3d5;
  --gr-metronic-on-dark-muted: #abb8cc;
  --gr-metronic-on-dark-caption: #96a5bc;
  --gr-metronic-blue: #2864b4;
  --gr-metronic-blue-hover: #205394;
  --gr-metronic-blue-text: #245896;
  --gr-metronic-blue-light: #e1ecf9;
  --gr-metronic-blue-active: #d4e4f7;
  --gr-metronic-blue-border: #a7bfdd;
  --gr-metronic-blue-on-dark: #62acff;
  --gr-metronic-border: #b8c4d2;
  --gr-metronic-border-subtle: #cbd4df;
  --gr-metronic-control-border: #7c838c;
  --gr-metronic-success: #00834f;
  --gr-metronic-success-text: #146b43;
  --gr-metronic-success-light: #ddf5e8;
  --gr-metronic-success-quiet: #e7f4ed;
  --gr-metronic-warning: #885400;
  --gr-metronic-warning-light: #ffdf88;
  --gr-metronic-warning-quiet: #fff3d8;
  --gr-metronic-warning-border: #dfb95f;
  --gr-metronic-danger: #c5284b;
  --gr-metronic-danger-text: #ad1738;
  --gr-metronic-danger-light: #fff0f3;
  --gr-metronic-neutral: #e9edf3;
  --gr-metronic-violet: #7239ea;
  --gr-metronic-violet-light: #f1eaff;
  --gr-metronic-amber-light: #fff0d0;
  --gr-metronic-overlay: #07143766;
  --gr-metronic-shadow: #07143733;
  --gr-metronic-shadow-faint: #07143703;
  --gr-metronic-shadow-edge: #0714370a;
  --gr-metronic-divider-dark: #ffffff12;

}

/* Cabinet graphite appearance. The default light appearance remains available to ops. */
:root[data-gr-appearance="graphite"] {
    color-scheme: dark;
    --gr-bg-app: #202224;
    --gr-bg-surface: #26282b;
    --gr-bg-surface-2: #27292d;
    --gr-bg-hover: #303338;
    --gr-bg-active: #293f5f;
    --gr-bg-sidebar: #26282b;
    --gr-bg-sidebar-hover: #303338;
    --gr-bg-sidebar-active: #293f5f;
    --gr-border: #3b3e43;
    --gr-border-subtle: #34373c;
    --gr-border-strong: #818791;
    --gr-border-sidebar: #3b3e43;
    --gr-text-primary: #e9edf2;
    --gr-text-secondary: #bac0c9;
    --gr-text-muted: #a7adb6;
    --gr-text-disabled: #858b94;
    --gr-text-on-dark: #e9edf2;
    --gr-text-on-dark-muted: #a7adb6;
    --gr-text-on-accent: #162235;
    --gr-accent: #8ab4fa;
    --gr-accent-hover: #aacaff;
    --gr-accent-active: #73a4f2;
    --gr-accent-subtle: #293f5f;
    --gr-accent-border: #526c94;
    --gr-accent-text: #8ab4fa;
    --gr-success-solid: #94c9ad;
    --gr-success-subtle: #263b31;
    --gr-success-border: #52745e;
    --gr-success-text: #94c9ad;
    --gr-warning-solid: #e6b75b;
    --gr-warning-subtle: #3b3325;
    --gr-warning-border: #856d3d;
    --gr-warning-text: #e6b75b;
    --gr-danger-solid: #f09d94;
    --gr-danger-subtle: #3b2929;
    --gr-danger-border: #92615b;
    --gr-danger-text: #f09d94;
    --gr-info-solid: #8ab4fa;
    --gr-info-subtle: #293f5f;
    --gr-info-border: #526c94;
    --gr-info-text: #8ab4fa;
    --gr-neutral-solid: #a7adb6;
    --gr-neutral-subtle: #303338;
    --gr-neutral-border: #3b3e43;
    --gr-neutral-text: #bac0c9;
    --gr-focus-ring: #8ab4fa;
    --gr-focus-ring-offset: #202224;
    --gr-focus-ring-on-dark: #8ab4fa;
    --gr-overlay: #00000099;
}

:root { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-synthesis:none; color:var(--gr-metronic-text); background:var(--gr-metronic-canvas); }
* { box-sizing:border-box; }
body { margin:0; font-size:15px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
h1,h2,p { margin:0; }
svg { width:21px; height:21px; flex-shrink:0; }
main:focus { outline:none; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.9px; white-space:nowrap; }
.mark { display:grid; place-items:center; background:var(--gr-metronic-blue); color:var(--gr-metronic-surface); }
.brand>span:last-child { color:var(--gr-metronic-blue); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px; border-radius:8px; border:1px solid var(--gr-metronic-border); line-height:1.4; text-align:center; }
.btn.primary { background:var(--gr-metronic-blue); border-color:var(--gr-metronic-blue); color:var(--gr-metronic-surface); }
.btn.primary:hover { background:var(--gr-metronic-blue-hover); }
.skip { position:fixed; left:20px; top:-100px; z-index:10; background:var(--gr-metronic-surface); padding:12px; }
.skip:focus { top:10px; }
.faq-list { border-top:1px solid var(--gr-metronic-border-subtle); }
.faq-list details { border-bottom:1px solid var(--gr-metronic-border-subtle); }
.faq-list summary { padding:14px 0; cursor:pointer; min-height:48px; }
.faq-list p { color:var(--gr-metronic-secondary); line-height:1.7; padding-bottom:16px; }

/* Public guide: shared GhostRelay colors, actions belong to their step. */
.prototype-tools { color:var(--gr-metronic-muted); background:var(--gr-metronic-canvas); font-size:11px; }
.prototype-tools>summary { padding:3px 24px; min-height:26px; cursor:pointer; list-style:none; }
.prototype-tools>summary::after { content:' +'; }
.prototype-tools[open]>summary::after { content:' −'; }
.prototype-tools .demo { background:var(--gr-metronic-surface-soft); }
.minimal-home { --blue:var(--gr-metronic-blue); --muted:var(--gr-metronic-secondary); color:var(--gr-metronic-text); background:var(--gr-metronic-canvas); min-height:100vh; padding:0 28px; overflow:hidden; }
.minimal-home main,.minimal-header,.minimal-footer { max-width:1000px; margin:auto; }
.minimal-home h1,.minimal-home h2 { font-weight:500; }
.minimal-home :is(button,a,summary):focus-visible { outline:2px solid var(--gr-metronic-blue); outline-offset:3px; border-radius:8px; }
.minimal-header { display:flex; align-items:center; justify-content:space-between; min-height:68px; }
.minimal-header .brand { font-size:21px; color:var(--gr-metronic-text); }
.minimal-header .mark { width:30px; height:30px; border-radius:9px; }
.minimal-header .mark svg { width:21px; height:21px; }
.minimal-header .btn { background:transparent; border:1px solid var(--gr-metronic-border); color:var(--gr-metronic-secondary); font-size:13px; font-weight:500; padding:9px 14px; }
.minimal-header .btn svg { width:16px; height:16px; }
.minimal-header .btn:hover { background:var(--gr-metronic-blue-light); color:var(--gr-metronic-blue-text); }
.minimal-intro { text-align:center; padding:26px 0 28px; }
.minimal-intro h1 { font-size:32px; letter-spacing:-1px; line-height:1.3; }
.minimal-intro h1 span { color:var(--gr-metronic-secondary); }
.minimal-intro p { margin:10px auto 0; font-size:14px; line-height:1.65; color:var(--gr-metronic-secondary); max-width:680px; }
.gallery { scroll-margin-top:20px; }
.gallery-nav { display:grid; grid-template-columns:repeat(4,1fr); max-width:720px; margin:0 auto 22px; position:relative; }
.gallery-nav::before { content:''; position:absolute; height:1px; background:var(--gr-metronic-border); top:24px; left:12.5%; right:12.5%; }
.gallery-nav button { position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; min-height:82px; padding:0 6px; background:transparent; border:0; color:var(--gr-metronic-secondary); font-size:13px; font-weight:500; }
.step-symbol { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--gr-metronic-border); border-radius:14px; background:var(--gr-metronic-canvas); }
.step-symbol svg { width:22px; height:22px; stroke-width:1.5; }
.gallery-nav button[aria-current=step] { color:var(--gr-metronic-blue-text); }
.gallery-nav button[aria-current=step] .step-symbol { background:var(--gr-metronic-blue-light); border-color:var(--gr-metronic-blue-border); }
.gallery-nav button:hover .step-symbol { background:var(--gr-metronic-blue-light); }
.gallery-track { display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; border:1px solid var(--gr-metronic-border-subtle); border-radius:20px; background:var(--gr-metronic-surface); }
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-slide { flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; padding:32px 44px; min-height:324px; }
.step-eyebrow { display:block; font-size:10px; letter-spacing:.1em; color:var(--gr-metronic-muted); margin-bottom:12px; }
.gallery-copy h2 { font-size:27px; line-height:1.2; letter-spacing:-.6px; max-width:360px; }
.gallery-copy>p { color:var(--gr-metronic-secondary); font-size:14px; line-height:1.7; margin-top:13px; max-width:390px; }
.step-action { margin-top:22px; }
.step-action .btn { font-size:13px; min-height:46px; padding:11px 16px; font-weight:500; box-shadow:none; }
.step-action .btn svg { width:17px; height:17px; }
.step-action small { display:block; color:var(--gr-metronic-muted); font-size:11px; line-height:1.6; margin-top:9px; max-width:350px; }
.gallery-art { min-width:0; min-height:240px; display:flex; align-items:center; justify-content:center; color:var(--gr-metronic-secondary); }
.gallery-art svg { stroke-width:1.5; }
.gallery-bottom { display:flex; align-items:center; justify-content:space-between; padding:12px 2px; gap:16px; }
.gallery-counter { font-size:12px; color:var(--gr-metronic-muted); font-variant-numeric:tabular-nums; }
.gallery-arrows { display:flex; gap:12px; }
.gallery-arrows button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 12px; border:0; background:transparent; border-radius:8px; font-size:12px; font-weight:500; color:var(--gr-metronic-blue-text); }
.gallery-arrows button:hover { background:var(--gr-metronic-blue-light); }
.gallery-arrows button:disabled { color:var(--gr-metronic-control-border); background:transparent; cursor:default; }
.gallery-arrows svg { width:17px; height:17px; }
.g-token { width:290px; max-width:100%; }
.g-app-label { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:13px; }
.g-app-label svg { width:18px; color:var(--gr-metronic-blue-text); }
.g-command { display:flex; justify-content:space-between; align-items:center; width:128px; padding:10px 14px; margin:0 0 10px auto; border-radius:10px 3px 10px 10px; background:var(--gr-metronic-blue-light); color:var(--gr-metronic-blue-text); font-family:monospace; font-size:13px; }
.g-command svg { width:14px; height:14px; }
.g-token-result { position:relative; padding:15px 18px; background:var(--gr-metronic-surface-soft); border:1px solid var(--gr-metronic-border-subtle); border-radius:3px 10px 10px 10px; }
.g-token-result span { display:block; font-size:11px; margin-bottom:6px; color:var(--gr-metronic-muted); }
.g-token-result strong { font-size:17px; letter-spacing:2px; font-weight:400; color:var(--gr-metronic-secondary); }
.g-token-result>svg { position:absolute; width:15px; height:15px; right:16px; bottom:20px; color:var(--gr-metronic-muted); }
.g-room { width:280px; max-width:100%; padding:22px; background:var(--gr-metronic-surface-soft); border:1px solid var(--gr-metronic-border-subtle); border-radius:12px; display:flex; flex-direction:column; align-items:center; }
.g-room-symbol { width:40px; height:40px; display:grid; place-items:center; background:var(--gr-metronic-blue-light); color:var(--gr-metronic-blue-text); border-radius:10px; margin-bottom:10px; }
.g-room strong { font-size:15px; font-weight:500; color:var(--gr-metronic-text); }
.g-room>span { font-size:11px; color:var(--gr-metronic-muted); }
.g-connected { display:flex; align-items:center; gap:6px; font-size:11px; margin-top:14px; color:var(--gr-metronic-success-text); }
.g-connected svg { width:14px; height:14px; }
.g-invite { width:290px; max-width:100%; }
.g-invite-link { display:flex; justify-content:center; align-items:center; gap:8px; padding:13px; background:var(--gr-metronic-blue-light); color:var(--gr-metronic-blue-text); font-size:12px; border-radius:10px; }
.g-invite-link svg { width:17px; }
.g-branches { display:block; width:83%; height:44px; margin:auto; color:var(--gr-metronic-border); }
.g-people { display:flex; justify-content:space-between; padding:0 8px; }
.g-people>span { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--gr-metronic-blue-text); }
.g-people svg { width:25px; height:25px; }
.g-people small { font-size:10px; color:var(--gr-metronic-muted); }
.g-chat { width:310px; max-width:100%; }
.g-chat-label { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--gr-metronic-secondary); font-size:11px; }
.g-chat-label svg { width:17px; height:17px; color:var(--gr-metronic-blue-text); }
.g-message { width:90%; border-radius:3px 10px 10px 10px; padding:12px 15px; background:var(--gr-metronic-surface-soft); font-size:12px; color:var(--gr-metronic-text); }
.g-message strong { display:block; color:var(--gr-metronic-blue-text); font-size:11px; font-weight:500; margin-bottom:5px; }
.g-message.second { width:77%; margin:9px 0 0 auto; border-radius:10px 3px 10px 10px; background:var(--gr-metronic-blue-light); }
.g-private { display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; margin-top:12px; color:var(--gr-metronic-muted); }
.g-private svg { width:14px; height:14px; }
.minimal-after { display:flex; justify-content:space-between; align-items:start; gap:24px; padding:20px 0 22px; }
.minimal-after>p { display:flex; align-items:start; gap:8px; font-size:12px; line-height:1.7; color:var(--gr-metronic-secondary); }
.minimal-after>p svg { width:16px; height:16px; margin-top:2px; color:var(--gr-metronic-success-text); }
.minimal-after details { max-width:340px; }
.minimal-after summary { min-height:36px; cursor:pointer; font-size:12px; color:var(--gr-metronic-secondary); white-space:nowrap; }
.minimal-after details p { margin-top:8px; font-size:12px; line-height:1.7; color:var(--gr-metronic-secondary); }
.minimal-faq { border-top:1px solid var(--gr-metronic-border-subtle); }
.minimal-faq>summary { cursor:pointer; list-style:none; min-height:48px; padding:13px 0; font-size:13px; color:var(--gr-metronic-secondary); display:flex; justify-content:space-between; }
.minimal-faq>summary::after { content:'+'; }
.minimal-faq[open]>summary::after { content:'−'; }
.minimal-faq .faq-list summary { font-size:13px; }
.minimal-faq .faq-list p { font-size:13px; }
.minimal-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:16px 0 24px; border-top:1px solid var(--gr-metronic-border-subtle); }
.minimal-footer p, .minimal-footer a { font-size:11px; color:var(--gr-metronic-muted); }
.minimal-footer nav { display:flex; gap:18px; }
.minimal-footer a { display:flex; align-items:center; min-height:44px; }

.g-token { width:310px; border:1px solid var(--gr-metronic-border-subtle); border-radius:14px; padding:18px; background:var(--gr-metronic-surface-soft); }
.g-app-label { padding-bottom:12px; border-bottom:1px solid var(--gr-metronic-border-subtle); }
.g-app-label strong { font-size:12px; font-weight:500; color:var(--gr-metronic-text); }
.g-app-label small { display:block; color:var(--gr-metronic-muted); font-size:10px; }
.g-bot-avatar { display:grid; place-items:center; width:34px; height:34px; background:var(--gr-metronic-blue-light); border-radius:50%; }
.g-bot-reply { display:inline-block; padding:9px 12px; background:var(--gr-metronic-surface); font-size:11px; border-radius:3px 10px 10px 10px; margin-bottom:9px; }
.g-name { width:155px; font-family:inherit; font-size:11px; }
.g-token-result { background:var(--gr-metronic-surface); border:0; padding:12px; }
.g-token-result span { display:flex; align-items:center; gap:5px; font-size:10px; }
.g-token-result span svg { color:var(--gr-metronic-success-text); width:12px; height:12px; }
.g-token-result strong { font-size:15px; }
.g-token-result>svg { bottom:16px; right:12px; width:12px; height:12px; }
.minimal-after { padding-top:4px; }
@media(max-width:720px) {
 .minimal-home { padding:0 20px; }
 .minimal-header { min-height:60px; }
 .minimal-header .brand { font-size:18px; }
 .minimal-header .btn { min-height:40px; font-size:12px; }
 .minimal-intro { padding:18px 0 24px; }
 .minimal-intro h1 { font-size:28px; line-height:1.25; }
 .minimal-intro h1 span { display:block; font-size:24px; margin-top:4px; }
 .minimal-intro p { font-size:13px; max-width:390px; }
 .gallery-nav { margin-bottom:14px; }
 .gallery-nav button { font-size:11px; padding:0 2px; min-height:70px; gap:8px; }
 .step-symbol { width:40px; height:40px; border-radius:12px; }
 .step-symbol svg { width:20px; height:20px; }
 .gallery-nav::before { top:20px; }
 .gallery-slide { grid-template-columns:1fr; gap:24px; align-content:start; padding:24px; min-height:562px; }
 .gallery-copy h2 { font-size:24px; }
 .gallery-copy>p { font-size:13px; line-height:1.6; margin-top:10px; }
 .step-eyebrow { margin-bottom:9px; }
 .step-action { margin-top:16px; }
 .step-action .btn { width:100%; }
 .step-action small { font-size:10px; }
 .gallery-art { min-height:240px; }
 .g-token { width:100%; max-width:310px; padding:14px; }
 .gallery-bottom { gap:8px; }
 .gallery-counter { font-size:10px; }
 .gallery-arrows { gap:2px; }
 .gallery-arrows button { padding:8px; font-size:11px; }
 .gallery-arrows button[data-gallery-direction="-1"] span { display:none; }
 .minimal-after { display:block; padding:10px 0 14px; }
 .minimal-after>p { font-size:11px; }
 .minimal-after details { margin-top:6px; }
 .minimal-footer { display:block; padding:16px 0; }
 .minimal-footer nav { margin-top:8px; gap:16px; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .gallery-track { scroll-behavior:auto; } }
.minimal-home .gallery-nav button:focus-visible { outline:none; }
.gallery-nav button:focus-visible .step-symbol { outline:2px solid var(--gr-metronic-blue); outline-offset:3px; }

.step-skip { display:inline-flex; align-items:center; gap:7px; background:transparent; border:0; padding:8px 0; min-height:40px; font-size:12px; color:var(--gr-metronic-blue-text); }
.step-skip svg { width:15px; height:15px; }
/* Without JavaScript every instruction and real link remains available. */
.gallery:not(.gallery-enhanced) .gallery-nav,
.gallery:not(.gallery-enhanced) .gallery-bottom,
.gallery:not(.gallery-enhanced) button { display:none; }
.gallery:not(.gallery-enhanced) .gallery-track { display:block; overflow:visible; }
.gallery:not(.gallery-enhanced) .gallery-slide + .gallery-slide { border-top:1px solid var(--gr-metronic-border-subtle); }