@layer base, components, modules, utilities;

/* Instanced at 94% width and one optical size, Regular to ExtraBold, Latin only. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/bricolage-grotesque-7cdd31d9.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-light-df5aa08d.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-regular-6af53c74.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-medium-5e1b27e8.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-semibold-4f666fb2.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-bold-8e5326da.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-regular-d13bb5b4.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-semibold-0fdd541f.woff2") format("woff2"); font-weight: 600; font-display: swap; }

@layer base {
  :root {
    /* Breeze: warm paper, soft lines, small radii. */
    --bg: #f3f2ee;
    --surface: #ffffff;
    --surface-2: #f1efea;
    --surface-hover: #f1f0ec;
    --surface-selected: #e9e7e2;
    /* field-02 is for a field inside a layer; forms.css switches the pair. */
    --field: #ffffff;
    --field-hover: #f7f6f3;
    --field-2: #faf9f7;
    --field-2-hover: #f3f2ee;
    --line: #dfdcd5;
    --line-strong: #8f8b82;
    --ink: #1b1b1f;
    --ink-2: #35353d;
    --ink-3: #55555f;
    --placeholder: #71717b;
    --primary: #4b4ef0;
    --link: #4b4ef0;
    --primary-hover: #3a3dd6;
    --focus: #4b4ef0;
    --live: #d02670;
    --live-glow: rgba(208, 38, 112, .24);
    --live-soft: #ffd7e8;
    /* The staff console's header stays dark in every theme. */
    --staff-band: #161616;
    --staff-band-hover: #393939;
    --staff-band-ink: #f4f4f4;
    --staff-band-ink-2: #c6c6c6;
    --staff-tag: #d02670;
    --staff-tag-ink: #ffffff;

    --menu: #ff832b;
    --menu-soft: #fff2e8;
    --input: #8a3ffc;
    --input-soft: #f6f2ff;
    --input-ink: #6929c4;
    --router: #1192e8;
    --router-soft: #e5f6ff;
    --end: #24a148;
    --end-soft: #defbe6;
    --message: #009d9a;
    --message-soft: #d9fbfb;
    --form: #ee5396;
    --form-soft: #ffd7e8;
    --wait: #ba4e00;
    --wait-soft: #ffd9be;
    --ussd: #1192e8;
    --ussd-soft: #e5f6ff;
    --ussd-ink: #0043ce;
    --whatsapp: #24a148;
    --whatsapp-soft: #defbe6;
    --whatsapp-ink: #0e6027;
    --whatsapp-brand: #1da851;
    --workflow: #8a3ffc;
    --workflow-soft: #f6f2ff;
    --workflow-ink: #6929c4;
    --error: #da1e28;
    --error-soft: #fff1f1;
    --warning: #7a5b00;
    --warning-soft: #fcf4d6;
    --ok: #24a148;
    --ok-soft: #defbe6;
    --ok-ink: #0e6027;
    --island: color-mix(in srgb, var(--surface) 92%, transparent);
    --spectrum: linear-gradient(90deg, var(--menu) 0 20%, var(--input) 20% 40%, var(--router) 40% 60%, var(--end) 60% 80%, var(--live) 80% 100%);

    --shadow-float: 0 6px 20px rgb(var(--shade) / .1), 0 0 0 1px rgb(var(--shade) / .06);
    --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Bricolage Grotesque", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --field-line: #cfcbc2;
    --shadow-card: 0 1px 2px rgb(var(--shade) / .04), 0 4px 14px rgb(var(--shade) / .04);
    --shadow-lift: 0 1px 2px rgb(var(--shade) / .06), 0 10px 28px rgb(var(--shade) / .08);
    --ease: cubic-bezier(.2, 0, 0, 1);
    --quick: .15s;
    --r-control: 6px;
    --filter-height: 3.6rem;
    --r-card: 8px;
    --r-section: 8px;

    --on-primary: #ffffff;
    --inverse: #393939;
    --on-inverse: #ffffff;
    --on-accent: #ffffff;
    --viz-1: var(--end);
    --viz-2: var(--menu);
    --viz-grid: #ebe9e4;
    --viz-axis: #8d8d8d;
    --table-head: #f1efea;
    --shade: 24 22 40;
    --ink-rgb: 27 27 31;
    --focus-rgb: 75 78 240;
    --menu-ink: #8a3800;
    --router-ink: #00539a;
    --router-line: #a6d8f7;
    --live-ink: #9b1c5b;
    --live-line: #f5aacd;
    --ok-line: #a7f0ba;
    --error-line: #ffb3b8;
    --error-surface: #fff1f1;
    --error-ink: #a2191f;
    --danger: #da1e28;
    --danger-hover: #ba1b23;
    --danger-soft: #fff1f1;
    --danger-ink: #a2191f;
    --on-danger: #ffffff;
    --warning-line: #f1d98a;
    --warning-surface: #fdf6dd;
    --screen-bg: #eef0fe;
    --screen-soft: #f5f6ff;
    --screen-hover: #e4e6fd;
    --screen-line: #cfd2fa;
    --screen-rule: #bcbff6;
    --screen-ink: #1b1d78;
    --screen-muted: #5a5d96;
    --keycap: #ffffff;
    --keycap-line: #dcd9d2;
    --action-line: #e0d4ff;
    --action-bg: #f6f2ff;
    --trigger-icon: #42be65;
    --trigger-bg: #161616;
    --trigger-ink: #ffffff;
    --code-bg: #f1efea;
    --code-muted: #a8a8a8;
    --code-ink: #161616;
    --tok-key: #0043ce;
    --tok-punct: #8d8d8d;
    --tok-str: #0e6027;
    --tok-num: #a2191f;
    --tok-ref: #00539a;
    --tok-expr: #8a3800;
    --phone-shade: 13 18 16;
    --phone-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --phone-app-bg: #ffffff;
    --phone-ink: #000000;
    --phone-muted: #8e8e93;
    --phone-dial-key: #e5e5ea;
    --phone-dial-key-press: #bcbcc2;
    --phone-dim: rgb(0 0 0 / .2);
    --phone-alert: rgb(242 242 242 / .9);
    --phone-alert-line: rgb(60 60 67 / .29);
    --phone-alert-press: rgb(209 209 214 / .9);
    --phone-field: #ffffff;
    --phone-field-line: #c7c7cc;
    --phone-link: #007aff;
    --phone-bubble-in: #e9e9eb;
    --phone-veil: rgb(242 242 242 / .96);
    --phone-spinner-track: #d1d1d6;
    --phone-keypad: #d1d3d9;
    --phone-key: #ffffff;
    --phone-key-press: #b4b8c0;
    --phone-key-ink: #000000;
    --phone-key-shadow: #898a8d;
    --chat-bg: #efeae2;
    --chat-head: #f0f2f5;
    --chat-bar: #f0f2f5;
    --chat-doodle: .085;
    --chat-in: #ffffff;
    --chat-out: #d9fdd3;
    --chat-ink: #111b21;
    --chat-muted: #667781;
    --chat-action: #027eb5;
    --chat-accent: #00a884;
    --chat-tick: #53bdeb;
    --chat-note: #ffffff;
    --chat-field: #ffffff;
    --chat-sheet: #ffffff;
    --chat-line: rgb(0 0 0 / .08);
    --chat-refused: #fa4d56;
    color-scheme: light;
  }

  /* System preference applies unless the viewer chose a theme. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /* Breeze dark: warm graphite. */
      --bg: #131315;
      --staff-band: #000000;
      --staff-band-hover: #262626;
      --surface: #1c1c20;
      --surface-2: #26262b;
      --surface-hover: #2a2a30;
      --surface-selected: #303036;
      --field: #1c1c20;
      --field-hover: #24242a;
      --field-2: #26262b;
      --field-2-hover: #303036;
      --line: #2c2c32;
      --line-strong: #5c5c66;
      --ink: #f2f1ee;
      --ink-2: #c4c3cc;
      --ink-3: #8f8e99;
      --placeholder: #7d7c87;
      --primary: #5a5df3;
      --link: #a3a5ff;
      --primary-hover: #4b4ef0;
      --on-primary: #ffffff;
      --inverse: #f4f4f4;
      --on-inverse: #161616;
      --on-accent: #ffffff;
      --viz-1: var(--end);
      --viz-2: var(--menu);
      --viz-grid: #3a3a42;
      --viz-axis: #6f6f6f;
      --table-head: #222227;
      --focus: #ffffff;
      --focus-rgb: 255 255 255;
      --shade: 0 0 0;
      --ink-rgb: 242 241 238;
      --field-line: #3a3a42;
      --shadow-card: 0 1px 2px rgb(0 0 0 / .3);
      --shadow-lift: 0 10px 28px rgb(0 0 0 / .45);
      --shadow-float: 0 6px 20px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .06);
      --live: #ff7eb6;
      --live-glow: rgb(255 126 182 / .32);
      --live-soft: #510224;
      --live-ink: #ffafd2;
      --live-line: #9b1c5b;
      --menu: #ff832b;
      --menu-soft: #3e1f00;
      --menu-ink: #ffb784;
      --input: #a56eff;
      --input-soft: #31135e;
      --input-ink: #d4bbff;
      --router: #33b1ff;
      --router-soft: #001d6c;
      --router-ink: #a6c8ff;
      --router-line: #0043ce;
      --end: #42be65;
      --message: #08bdba;
      --message-soft: #022b30;
      --form: #ff7eb6;
      --form-soft: #2a0a18;
      --wait: #ff832b;
      --wait-soft: #3d1400;
      --ussd: #33b1ff;
      --ussd-soft: #001d6c;
      --ussd-ink: #a6c8ff;
      --whatsapp: #42be65;
      --whatsapp-soft: #022d0d;
      --whatsapp-ink: #a7f0ba;
      --whatsapp-brand: #25d366;
      --workflow: #a56eff;
      --workflow-soft: #31135e;
      --workflow-ink: #d4bbff;
      --end-soft: #022d0d;
      --error: #ff8389;
      --error-soft: #520408;
      --error-line: #a2191f;
      --error-surface: #2d0709;
      --error-ink: #ffb3b8;
      --danger: #fa4d56;
      --danger-hover: #ff8389;
      --danger-soft: #520408;
      --danger-ink: #ffb3b8;
      --on-danger: #ffffff;
      --warning: #f1c21b;
      --warning-soft: #302400;
      --warning-line: #684e00;
      --warning-surface: #211a00;
      --ok: #42be65;
      --ok-soft: #022d0d;
      --ok-ink: #a7f0ba;
      --ok-line: #0e6027;
      --screen-bg: #1b1d78;
      --screen-soft: #111255;
      --screen-hover: #262aa0;
      --screen-line: #3a3fd6;
      --screen-rule: #4b4ef0;
      --screen-ink: #dedeff;
      --screen-muted: #b0b2f2;
      --keycap: #26262b;
      --keycap-line: #6f6f6f;
      --action-line: #491d8b;
      --action-bg: #1c0f30;
      --trigger-icon: #42be65;
    --trigger-bg: #393939;
    --trigger-ink: #f4f4f4;
      --code-bg: #1c1c20;
      --code-muted: #6f6f6f;
      --code-ink: #f4f4f4;
      --tok-key: #78a9ff;
      --tok-punct: #8d8d8d;
      --tok-str: #42be65;
      --tok-num: #ff8389;
      --tok-ref: #33b1ff;
      --tok-expr: #ffb784;
      --phone-shade: 0 0 0;
      --phone-app-bg: #000000;
      --phone-ink: #ffffff;
      --phone-muted: #8e8e93;
      --phone-dial-key: #333336;
      --phone-dial-key-press: #636366;
      --phone-dim: rgb(0 0 0 / .45);
      --phone-alert: rgb(37 37 37 / .92);
      --phone-alert-line: rgb(84 84 88 / .65);
      --phone-alert-press: rgb(58 58 60 / .92);
      --phone-field: #1c1c1e;
      --phone-field-line: #3a3a3c;
      --phone-link: #0a84ff;
      --phone-bubble-in: #262629;
      --phone-veil: rgb(37 37 37 / .96);
      --phone-spinner-track: #3a3a3c;
      --phone-keypad: #2b2b2d;
      --phone-key: #58585b;
      --phone-key-press: #38383a;
      --phone-key-ink: #ffffff;
      --phone-key-shadow: #000000;
      --chat-bg: #0b141a;
      --chat-head: #202c33;
      --chat-bar: #111b21;
      --chat-doodle: .055;
      --chat-in: #202c33;
      --chat-out: #005c4b;
      --chat-ink: #e9edef;
      --chat-muted: #8696a0;
      --chat-action: #53bdeb;
      --chat-accent: #00a884;
      --chat-tick: #53bdeb;
      --chat-note: #182229;
      --chat-field: #2a3942;
      --chat-sheet: #1f2c33;
      --chat-line: rgb(255 255 255 / .08);
      --chat-refused: #fa4d56;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    /* Breeze dark: warm graphite. */
    --bg: #131315;
    --staff-band: #000000;
    --staff-band-hover: #262626;
    --surface: #1c1c20;
    --surface-2: #26262b;
    --surface-hover: #2a2a30;
    --surface-selected: #303036;
    --field: #1c1c20;
    --field-hover: #24242a;
    --field-2: #26262b;
    --field-2-hover: #303036;
    --line: #2c2c32;
    --line-strong: #5c5c66;
    --ink: #f2f1ee;
    --ink-2: #c4c3cc;
    --ink-3: #8f8e99;
    --placeholder: #7d7c87;
    --primary: #5a5df3;
    --link: #a3a5ff;
    --primary-hover: #4b4ef0;
    --on-primary: #ffffff;
    --inverse: #f4f4f4;
    --on-inverse: #161616;
    --on-accent: #ffffff;
    --viz-1: var(--end);
    --viz-2: var(--menu);
    --viz-grid: #3a3a42;
    --viz-axis: #6f6f6f;
    --table-head: #222227;
    --focus: #ffffff;
    --focus-rgb: 255 255 255;
    --shade: 0 0 0;
    --ink-rgb: 242 241 238;
    --field-line: #3a3a42;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .3);
    --shadow-lift: 0 10px 28px rgb(0 0 0 / .45);
    --shadow-float: 0 6px 20px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .06);
    --live: #ff7eb6;
    --live-glow: rgb(255 126 182 / .32);
    --live-soft: #510224;
    --live-ink: #ffafd2;
    --live-line: #9b1c5b;
    --menu: #ff832b;
    --menu-soft: #3e1f00;
    --menu-ink: #ffb784;
    --input: #a56eff;
    --input-soft: #31135e;
    --input-ink: #d4bbff;
    --router: #33b1ff;
    --router-soft: #001d6c;
    --router-ink: #a6c8ff;
    --router-line: #0043ce;
    --end: #42be65;
    --message: #08bdba;
    --message-soft: #022b30;
    --form: #ff7eb6;
    --form-soft: #2a0a18;
    --wait: #ff832b;
    --wait-soft: #3d1400;
    --ussd: #33b1ff;
    --ussd-soft: #001d6c;
    --ussd-ink: #a6c8ff;
    --whatsapp: #42be65;
    --whatsapp-soft: #022d0d;
    --whatsapp-ink: #a7f0ba;
    --whatsapp-brand: #25d366;
    --workflow: #a56eff;
    --workflow-soft: #31135e;
    --workflow-ink: #d4bbff;
    --end-soft: #022d0d;
    --error: #ff8389;
    --error-soft: #520408;
    --error-line: #a2191f;
    --error-surface: #2d0709;
    --error-ink: #ffb3b8;
    --danger: #fa4d56;
    --danger-hover: #ff8389;
    --danger-soft: #520408;
    --danger-ink: #ffb3b8;
    --on-danger: #ffffff;
    --warning: #f1c21b;
    --warning-soft: #302400;
    --warning-line: #684e00;
    --warning-surface: #211a00;
    --ok: #42be65;
    --ok-soft: #022d0d;
    --ok-ink: #a7f0ba;
    --ok-line: #0e6027;
    --screen-bg: #1b1d78;
    --screen-soft: #111255;
    --screen-hover: #262aa0;
    --screen-line: #3a3fd6;
    --screen-rule: #4b4ef0;
    --screen-ink: #dedeff;
    --screen-muted: #b0b2f2;
    --keycap: #26262b;
    --keycap-line: #6f6f6f;
    --action-line: #491d8b;
    --action-bg: #1c0f30;
    --trigger-icon: #42be65;
    --trigger-bg: #393939;
    --trigger-ink: #f4f4f4;
    --code-bg: #1c1c20;
    --code-muted: #6f6f6f;
    --code-ink: #f4f4f4;
    --tok-key: #78a9ff;
    --tok-punct: #8d8d8d;
    --tok-str: #42be65;
    --tok-num: #ff8389;
    --tok-ref: #33b1ff;
    --tok-expr: #ffb784;
    --phone-shade: 0 0 0;
    --phone-app-bg: #000000;
    --phone-ink: #ffffff;
    --phone-muted: #8e8e93;
    --phone-dial-key: #333336;
    --phone-dial-key-press: #636366;
    --phone-dim: rgb(0 0 0 / .45);
    --phone-alert: rgb(37 37 37 / .92);
    --phone-alert-line: rgb(84 84 88 / .65);
    --phone-alert-press: rgb(58 58 60 / .92);
    --phone-field: #1c1c1e;
    --phone-field-line: #3a3a3c;
    --phone-link: #0a84ff;
    --phone-bubble-in: #262629;
    --phone-veil: rgb(37 37 37 / .96);
    --phone-spinner-track: #3a3a3c;
    --phone-keypad: #2b2b2d;
    --phone-key: #58585b;
    --phone-key-press: #38383a;
    --phone-key-ink: #ffffff;
    --phone-key-shadow: #000000;
    --chat-bg: #0b141a;
    --chat-head: #202c33;
    --chat-bar: #111b21;
    --chat-doodle: .055;
    --chat-in: #202c33;
    --chat-out: #005c4b;
    --chat-ink: #e9edef;
    --chat-muted: #8696a0;
    --chat-action: #53bdeb;
    --chat-accent: #00a884;
    --chat-tick: #53bdeb;
    --chat-note: #182229;
    --chat-field: #2a3942;
    --chat-sheet: #1f2c33;
    --chat-line: rgb(255 255 255 / .08);
    --chat-refused: #fa4d56;
    color-scheme: dark;
  }
}

@layer base {
  /* 62.5% root: every rem below reads as px / 10. */
  html { font-size: 62.5%; }
  @media (min-width: 880px) { html { font-size: 65%; } }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.5rem; line-height: 1.5; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
  a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
  a:hover { text-decoration-color: var(--ink); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  ::selection { background: rgb(var(--focus-rgb) / .18); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
}

@layer components {
  .wrap { max-width: 144rem; margin: 0 auto; padding: 1.2rem 2.4rem 8rem; }
  .stack > * + * { margin-top: 1.6rem; }
  .stack > .section-title { margin-top: 4.4rem; }
  /* Cards sit on the paper by a soft shadow as well as their line. */
  :is(.admin-panel, .group:not(.subgroup), .auth-card, .connector-card, .sends-section, .getting-started, .first-run, .member-list, .start-card, .channel-card, .number-card, .allowance) { box-shadow: var(--shadow-card); }
  .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin: -1.2rem -2.4rem 4rem; padding: .8rem 2.4rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
  .site-header::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--spectrum); }
  @media (max-width: 600px) { .site-header { margin-inline: -1.6rem; padding-inline: 1.6rem; } }
  .site-header nav { display: flex; gap: .4rem; align-items: center; }
  .site-places { margin-left: auto; }
  .site-tools { display: flex; align-items: center; gap: .8rem; }
  .site-inbox { position: relative; width: 3.6rem; height: 3.6rem; }
  .site-inbox.is-current { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
  .site-inbox .nav-count { position: absolute; top: -.2rem; right: -.4rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem; font-size: 1.05rem; box-shadow: 0 0 0 2px var(--bg); }
  .new-menu > summary { gap: .5rem; }
  .new-menu[open] > summary.btn { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
  .new-menu .menu-items { min-width: 26rem; }
  .new-menu .menu-item { align-items: flex-start; }
  .new-menu .menu-item .icon { margin-top: .2rem; }
  .new-menu .menu-item span { display: grid; gap: .1rem; }
  .new-menu .menu-item small { color: var(--ink-3); font-size: 1.25rem; }
  @media (max-width: 720px) {
    .site-places { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: .4rem .8rem calc(.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); }
    .site-places .nav-link { flex-direction: column; gap: .2rem; padding: .6rem .4rem; font-size: 1.15rem; box-shadow: none; background: none; }
    .site-places .nav-link .icon { width: 2rem; height: 2rem; }
    .site-places .nav-link[aria-current="page"] { background: none; box-shadow: none; color: var(--primary); }
    .site-places .nav-link[aria-current="page"] .icon { color: var(--primary); }
    body:has(.site-places) .wrap { padding-bottom: 12rem; }
    .site-tools { margin-left: auto; }
    .site-header:has(.site-places) { backdrop-filter: none; background: var(--bg); }
  }
  .nav-link { padding: .6rem 1.1rem; border-radius: var(--r-control); color: var(--ink-2); font-weight: 500; text-decoration: none; transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease); }
  .nav-link:hover { background: var(--surface-hover); color: var(--ink); }
  .nav-count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .6rem; border-radius: 999px; background: var(--danger); color: var(--on-danger); font-size: 1.2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
  .wordmark { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1; text-decoration: none; }
  .wordmark .mark { width: 2.6rem; height: 2.6rem; margin: -.2rem 0; }
  .site-header .avatar-button .avatar { width: 3rem; height: 3rem; }
  .mark { display: block; flex: none; width: 22px; height: 22px; }
  .mark-arms { transform-box: view-box; transform-origin: center; }
  /* The delay keeps a quick Turbo visit from twitching the mark. */
  .is-spinning > .mark .mark-arms, html[aria-busy="true"] :is(.wordmark, .island-home) .mark-arms { animation: mark-spin 1.2s cubic-bezier(.45, .05, .55, .95) infinite; }
  html[aria-busy="true"] :is(.wordmark, .island-home) .mark-arms { animation-delay: .4s; }
  @keyframes mark-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .mark-arms { animation: none !important; } }
}

@layer components {
  .display, .flows-title, .page-title { margin: 0 0 1rem; font-size: 3.2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; }
  .lede { max-width: 60ch; margin: 0; font-size: 1.8rem; line-height: 1.5; color: var(--ink-2); }
  .section-title { margin: 0 0 1rem; font-size: 1.7rem; font-weight: 500; letter-spacing: 0; line-height: 1.29; }
  .label, .eyebrow { display: block; margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 400; line-height: 1.34; letter-spacing: .02em; color: var(--ink-2); }
  .sub { color: var(--ink-2); margin: 0 0 1.6rem; }
  .hint { margin: .5rem 0 0; font-size: 1.3rem; color: var(--ink-3); }
  .hint.is-inline { display: inline; margin: 0 0 0 .4rem; }
  .hint.is-error { color: var(--error); }
  .hint.is-warning { color: var(--warning); }
  .mono, code { font-family: var(--mono); }
  code { padding: .05em .35em; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line); font-size: .88em; }
  kbd { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-control); background: var(--surface); font-family: var(--mono); font-size: 1.05rem; line-height: 1; color: var(--ink-3); }
}

@layer components {
  .icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .nav-link, .tool, .phone-hangup, .dock-tab, .toggle, .issue.is-clean { display: inline-flex; align-items: center; gap: .5rem; }
  .nav-link .icon, .tool .icon { color: var(--ink-3); }
  .nav-link:hover .icon, .tool:hover .icon { color: currentColor; }
  .btn .icon { width: 1.1em; height: 1.1em; }
  .group > legend .icon { margin-right: .6rem; color: var(--ink-3); }
}

@layer components {
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 4rem; padding: .8rem 1.6rem; border: 1px solid var(--primary); border-radius: var(--r-control); background: var(--primary); color: var(--on-primary); font: inherit; font-size: 1.4rem; font-weight: 500; line-height: 1.28; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgb(var(--shade) / .08); transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
  .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  .btn--ghost { background: var(--surface); border-color: var(--field-line); color: var(--ink); }
  .btn--ghost:hover { background: var(--surface-hover); border-color: var(--line-strong); color: var(--ink); }
  .btn--small { min-height: 3.2rem; padding: .4rem 1.1rem; font-size: 1.35rem; }
  .btn.is-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
  .btn.is-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
  .btn.is-live { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
  .btn.is-live:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
  .btn.is-live:disabled { background: var(--danger); }
  .icon-action { position: relative; display: inline-grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; padding: 0; border: 1px solid transparent; border-radius: var(--r-control); background: none; color: var(--ink-2); cursor: pointer; }
  .icon-action .icon { width: 1.8rem; height: 1.8rem; }
  .icon-action:hover, .icon-action:focus-visible { background: var(--surface-2); color: var(--ink); }
  .icon-action.is-primary { background: var(--primary); color: var(--on-primary); }
  .icon-action.is-primary:hover, .icon-action.is-primary:focus-visible { background: var(--primary-hover); color: var(--on-primary); }
  .icon-action.is-danger:hover, .icon-action.is-danger:focus-visible { background: var(--danger); color: var(--on-danger); }
  .icon-action::after { content: attr(aria-label); position: absolute; right: 0; bottom: calc(100% + .6rem); z-index: 3; display: none; padding: .4rem .8rem; border-radius: var(--r-control); background: var(--inverse); color: var(--on-inverse); font-size: 1.2rem; font-weight: 400; line-height: 1.6rem; white-space: nowrap; pointer-events: none; }
  .icon-action:hover::after, .icon-action:focus-visible::after { display: block; }
  .icon-action.is-beside::after { right: calc(100% + .6rem); bottom: auto; top: 50%; transform: translateY(-50%); }
  .linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); font-size: 1.35rem; cursor: pointer; text-decoration: underline; }
  .tool { background: none; border: 0; padding: .3rem .7rem; border-radius: var(--r-control); font: inherit; font-size: 1.3rem; font-weight: 500; color: var(--ink-2); text-decoration: none; cursor: pointer; }
  .tool:hover { background: var(--surface-2); color: var(--ink); }
  .tool.is-danger:hover { background: var(--error-soft); color: var(--error); }
  .actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1.6rem 0 0; }
  .actions form, .adders form { display: inline; }
  .adders { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
}

@layer components {
  .field { width: 100%; min-height: 4rem; padding: .8rem 1.2rem; border: 1px solid var(--field-line); border-radius: var(--r-control); background: var(--field); color: var(--ink); font: inherit; font-size: 1.4rem; transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
  .field::placeholder { color: var(--placeholder); }
  .field:hover { background: var(--field-hover); border-color: var(--line-strong); }
  /* Inside a layer drawn on the surface colour, a field takes field-02 so it still stands off its ground. */
  .admin-panel, .group, .auth-card, .flow-card, .connector-card, .scenario, .screen, .node, .sends-section, .tester, .companion, .setting-row, .account-rows, .command-menu, .getting-started, .first-run, .new-flow-bar, .flows-search, .journey-search, .member-list, .import-rows, .start-card, .channel-card, .issue, .call-step, .choice-list, .allowance, .sec, .cat, .number-card { --field: var(--field-2); --field-hover: var(--field-2-hover); }
  .field:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(var(--focus-rgb) / .18); }
  select.field { appearance: none; padding-right: 3.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c8580' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
  .field.mono { font-family: var(--mono); font-size: 1.35rem; }
  .field--short { max-width: 44rem; }
  textarea.field { resize: vertical; line-height: 1.5; }
  .field-error { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: 1.3rem; color: var(--error); }
  .field-error[hidden] { display: none; }
  .field-error .icon { flex: none; width: 1.6rem; height: 1.6rem; }
  .field[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
  .phone-field { display: flex; gap: .6rem; }
  .phone-field .field_with_errors { display: contents; }
  .phone-field .phone-country { flex: 0 1 auto; width: auto; max-width: 26rem; }
  .phone-field .phone-number { flex: 1; min-width: 12rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .phone-field.is-invalid .phone-number { outline: 2px solid var(--error); outline-offset: -2px; }
  input[type="file"].field { max-width: 64rem; min-height: 7.2rem; padding: 1.4rem 1.6rem; border-style: dashed; background: var(--field); color: var(--ink-2); cursor: pointer; }
  input[type="file"].field::file-selector-button { margin-right: 1.2rem; padding: .6rem 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: 1.35rem; font-weight: 600; cursor: pointer; }
  input[type="file"].field:hover::file-selector-button { border-color: var(--ink-3); }
  .field.copy { font-family: var(--mono); font-size: 1.4rem; white-space: pre-wrap; background: var(--screen-soft); }
  .copy-wrap { position: relative; display: block; }
  .copy-wrap > .field { display: block; }
  .copy-wrap.is-painted > .field { color: transparent; caret-color: var(--ink); }
  .copy-backdrop { position: absolute; z-index: 1; inset: 0; overflow: hidden; padding: .8rem 1.2rem; border: 1px solid transparent; font-size: 1.4rem; color: var(--ink); pointer-events: none; }
  .copy-wrap:has(> .field.mono) > .copy-backdrop { font-family: var(--mono); font-size: 1.35rem; }
  .copy-wrap:has(> .field.copy) > .copy-backdrop { font-family: var(--mono); font-size: 1.4rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
  .copy-wrap.is-line > .copy-backdrop { display: flex; align-items: center; white-space: pre; }
  .copy-wrap.is-line > .copy-backdrop > span { flex: none; }
  .copy-backdrop mark { border-radius: 3px; background: var(--input-soft); color: var(--input-ink); box-shadow: 0 0 0 1px var(--input-soft); }
  .copy-menu { position: absolute; z-index: 5; top: calc(100% + .3rem); left: 0; min-width: min(26rem, 100%); max-width: 100%; margin: 0; padding: .4rem; list-style: none; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); }
  .copy-menu li { display: flex; border-radius: 4px; align-items: baseline; justify-content: space-between; gap: 1.2rem; padding: .4rem .8rem; font-family: var(--mono); font-size: 1.25rem; color: var(--ink); cursor: pointer; }
  .copy-menu li[aria-selected="true"] { background: var(--input-soft); color: var(--input-ink); }
  .copy-menu small { overflow: hidden; font-family: var(--sans); font-size: 1.2rem; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
  .copy-insert > .list-available { margin-top: .6rem; }
  .copy-insert > .copy-find { margin-top: .8rem; max-width: 32rem; }
  .copy-new { display: none; border-style: dashed; cursor: pointer; }
  form[data-copy-field-creates-value="true"] .copy-new { display: inline-flex; }
  form:not([data-copy-field-creates-value="true"]) .copy-insert > .list-available:not(:has(.pill:not(.copy-new))) { display: none; }
  .copy-compose { margin-top: 1rem; padding: 1.2rem; border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
  .copy-compose > * + * { margin-top: 1rem; }
  .menu-preview { margin-top: 1.4rem; }
  .menu-preview-screen { min-height: 5rem; padding: 1rem 1.2rem; border: 1px solid var(--screen-line); border-radius: var(--r-control); background: var(--screen-bg); color: var(--screen-ink); font-family: var(--mono); font-size: 1.35rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
  .menu-preview-screen:empty::before { content: "…"; color: var(--ink-3); }
  .list-step { margin: 1.4rem 0 .2rem; font-size: 1.3rem; font-weight: 600; color: var(--ink); }
  .list-method { flex: 0 0 11rem; }
  .list-sample { display: grid; gap: .6rem; justify-items: start; margin: .4rem 0 1.2rem; padding: 1rem 1.2rem; border: 1px dashed var(--line); border-radius: var(--r-card); }
  .list-sample .stacked { width: 100%; }
  .answer-rule .pair-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .answer-rule-written { display: grid; gap: .8rem; }
  .answer-rule-suggest { justify-self: start; margin-top: .4rem; }
  .answer-rule-try { display: grid; gap: .4rem; margin-top: .4rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
  .answer-rule-verdict { margin: 0; font-size: 1.3rem; font-weight: 550; }
  .answer-rule-verdict[data-state="pass"] { color: var(--ok); }
  .answer-rule-verdict[data-state="fail"] { color: var(--warning); }
  .answer-rule-verdict[data-state="error"] { color: var(--danger); }
  .menu-preview-key { padding: 0 .5rem; border-radius: var(--r-control); background: var(--warning-soft); color: var(--warning); font-size: 1.15rem; }
  .source { font-family: var(--mono); font-size: 1.3rem; line-height: 1.65; tab-size: 2; white-space: pre; overflow: auto; min-height: 24rem; }
  .stacked { display: block; min-width: 0; }
  .check { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; font-size: 1.4rem; cursor: pointer; }
  .check input { width: 1.7rem; height: 1.7rem; margin: 0; accent-color: var(--focus); }
  .fields { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
  .continue-offer { display: none; grid-column: 1 / -1; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
  .fields:has(option[value="continue"]:checked) .continue-offer { display: grid; }
  .continue-offer .hint { grid-column: 1 / -1; margin: 0; }
  .tip { display: inline-flex; align-items: center; height: 1.2rem; margin-left: .2rem; vertical-align: -.1rem; }
  .tip-open { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
  .tip-open:hover, .tip-open[aria-expanded="true"] { color: var(--ink); }
  .tip-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .tip-open .icon { width: 1.6rem; height: 1.6rem; }
  .tip-body { position: fixed; z-index: 40; width: max-content; max-width: min(32rem, calc(100vw - 1.6rem)); padding: 1rem 1.4rem; border-radius: var(--r-card); background: var(--inverse); color: var(--on-inverse); font-size: 1.3rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; box-shadow: var(--shadow-float); }
  .tip-body::before { content: ""; position: absolute; left: calc(var(--tip-caret, 50%) - .6rem); width: 1.2rem; height: 1.2rem; background: inherit; rotate: 45deg; }
  .tip-body[data-side="below"]::before { top: -.5rem; }
  .tip-body[data-side="above"]::before { bottom: -.5rem; }
  .check-line { display: flex; align-items: center; gap: .2rem; }
  .check-line .check { margin-top: 0; }
  .check-line { margin-top: 1.2rem; }
  .request-business { display: grid; gap: 1.2rem; min-width: 0; margin: 0; padding: 1.6rem 0 0; border: 0; border-top: 1px solid var(--line); }
  .request-business legend { float: left; width: 100%; margin: 0 0 .2rem; padding: 0; font-size: 1.4rem; font-weight: 600; color: var(--ink); }
  .request-business > .hint { clear: both; margin: 0; }
  .request-business .stacked .hint { display: block; }
  .new-target { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem; align-items: center; }
  .new-target .field { min-width: 0; }
  .new-target select.field { width: auto; }
}

@layer components {
  .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .15rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 1.25rem; font-weight: 550; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
  button.pill { font-family: inherit; cursor: pointer; }
  button.pill:hover { border-color: var(--line-strong); }
  .pill.is-off { border-color: var(--warning-line); background: var(--warning-soft); color: var(--ink); }
  .pill.is-off .icon { width: 1.3rem; height: 1.3rem; color: var(--warning); }
  .pill.is-menu, .pill.is-input, .pill.is-router, .pill.is-end, .pill.is-message, .pill.is-form, .pill.is-wait, .pill.is-ok, .pill.is-warned, .pill.is-warning, .pill.is-broken, .pill.is-error, .pill.is-unknown { border-color: transparent; color: var(--ink); }
  .pill.is-menu { background: var(--menu-soft); }
  .pill.is-input { background: var(--input-soft); }
  .pill.is-router { background: var(--router-soft); }
  .pill.is-end { background: var(--end-soft); }
  .pill.is-message { background: var(--message-soft); }
  .pill.is-form { background: var(--form-soft); }
  .pill.is-wait { background: var(--wait-soft); }
  .pill.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
  .pill.is-warned, .pill.is-warning { background: var(--warning-soft); color: var(--warning); }
  .pill.is-broken, .pill.is-error, .pill.is-unknown { background: var(--error-soft); color: var(--error); }
  .pill.is-going { border-color: transparent; background: var(--router-soft); color: var(--router-ink); }
  .pill.is-quiet { border-color: transparent; background: var(--surface-2); color: var(--ink-2); }
  .pill.is-unchecked { border-style: dashed; }
  .pill.is-suggestion { font-family: var(--mono); font-size: 1.15rem; }
  .pill.is-ok::before, .pill.is-warned::before, .pill.is-warning::before, .pill.is-broken::before, .pill.is-error::before, .pill.is-going::before, .pill.is-quiet::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; }
  .channel { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .8rem .2rem .6rem; border-radius: var(--r-control); font-size: 1.2rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
  .channel .icon { width: 1.4rem; height: 1.4rem; }
  .channel.is-ussd { background: var(--ussd-soft); color: var(--ussd-ink); }
  .channel.is-whatsapp { background: var(--whatsapp-soft); color: var(--whatsapp-ink); }
  .channel.is-sms { background: var(--menu-soft); color: var(--ink); }
  .channel.is-workflow { background: var(--workflow-soft); color: var(--ink); }
  .channel.is-workflow .icon { color: var(--workflow); }
  .channel.is-sms .icon { color: var(--menu); }
  .channel.is-whatsapp .icon { color: var(--whatsapp-brand); }

  .serving-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 2.4rem 0 1.6rem; }
  .filter-set { display: inline-flex; gap: .6rem; }
  .filter-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 1.3rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
  .filter-chip:hover { border-color: var(--line-strong); color: var(--ink); }
  .filter-chip .icon { width: 1.5rem; height: 1.5rem; }
  .filter-dot { width: .8rem; height: .8rem; border-radius: 999px; background: var(--router); opacity: .55; }
  .filter-chip.is-live .filter-dot { background: var(--danger); }
  .screen-filter .filter-dot { flex: none; opacity: 1; }
  .filter-dot.is-ussd { background: var(--ussd); }
  .filter-dot.is-whatsapp { background: var(--whatsapp-brand); }
  .filter-dot.is-sms { background: var(--menu); }
  .filter-dot.is-workflow { background: var(--workflow); }
  .filter-dot.is-live { background: var(--live); }
  .filter-dot.is-errors { background: var(--error); }
  .filter-dot.is-unpublished { background: var(--line-strong); }
  .filter-dot.is-delivered { background: var(--ok); }
  .filter-dot.is-going { background: var(--router); }
  .filter-dot.is-failed { background: var(--error); }
  .filter-chip.is-on { border-color: transparent; background: var(--ink); color: var(--surface); }
  .filter-chip.is-on .filter-dot { opacity: 1; }
  .filter-chip.is-whatsapp.is-on { background: var(--whatsapp); color: #fff; }
  .filter-clear { margin-left: .4rem; color: var(--ink-3); font-size: 1.3rem; }
  .filter-menu .toggle { gap: .5rem; }
  .filter-menu-name { color: var(--ink-3); font-weight: 450; }
  .filter-menu .toggle .filter-dot { opacity: 1; }
  .filter-menu .toggle .filter-dot.is-live { background: var(--danger); }
  .filter-menu.is-set .toggle { border-color: var(--ink-3); background: var(--surface-2); }
  .filter-menu .toggle > .icon { width: 1.3rem; height: 1.3rem; color: var(--ink-3); }
  .filter-menu .toggle > .icon:last-child { transition: rotate .11s ease; }
  .filter-menu[open] .toggle > .icon:last-child { rotate: 180deg; }
  .filter-menu .menu-items { left: 0; right: auto; display: flex; flex-direction: column; min-width: 22rem; gap: .2rem; }
  .filter-menu .menu-items > a { padding: .6rem .9rem; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font-size: 1.35rem; font-weight: 500; }
  .filter-menu .menu-items > a:hover { background: var(--surface-2); color: var(--ink); }
  .filter-menu .menu-items > :is(a.is-active, a.is-on) { background: var(--surface-2); color: var(--ink); font-weight: 600; }
  .filter-menu .menu-items > a.is-whatsapp.is-on { background: var(--surface-2); color: var(--ink); }
  .filter-across { margin-left: auto; }
  .filter-count { opacity: .6; font-variant-numeric: tabular-nums; }

  .status { flex: 0 0 auto; font-size: 1.25rem; font-weight: 550; color: var(--ink-3); }
  .count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 1.15rem; font-weight: 600; line-height: 1; color: var(--ink-2); }
  .count.is-error { background: var(--error-soft); border-color: transparent; color: var(--error); }
  .count.is-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
  .count.is-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }
  .ok-mark { flex: none; width: 1.8rem; height: 1.8rem; color: var(--ok); vertical-align: -.35rem; }
}

@layer components {
  .toasts { position: fixed; top: 8rem; right: 1.6rem; z-index: 30; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .8rem; width: min(40rem, calc(100vw - 3.2rem)); pointer-events: none; }
  .toasts:empty { display: none; }
  .workspace > .toasts { position: absolute; top: calc(var(--gap) + 5.6rem); right: var(--gap); transition: right .2s ease; }
  .workspace.has-phone > .toasts { right: calc(var(--phone-width) + 2 * var(--gap)); }
  .workspace.has-inspector > .toasts { right: calc(var(--inspector-width) + 2 * var(--gap)); }
  .workspace.has-inspector.has-phone > .toasts { right: calc(var(--inspector-width) + var(--phone-width) + 3 * var(--gap)); }
  @media (max-width: 979px) { .workspace > .toasts, .workspace.has-phone > .toasts, .workspace.has-inspector > .toasts, .workspace.has-inspector.has-phone > .toasts { right: var(--gap); } }
  @media (max-width: 600px) { .toasts, .workspace > .toasts { top: auto; bottom: 1.6rem; right: 1.6rem; left: 1.6rem; width: auto; flex-direction: column; align-items: stretch; } }
  .flash { position: fixed; top: 8rem; right: 1.6rem; z-index: 30; display: flex; align-items: center; gap: .9rem; max-width: min(40rem, calc(100vw - 3.2rem)); padding: .9rem .6rem .9rem 1.3rem; border-radius: var(--r-card); background: var(--inverse); color: var(--on-inverse); font-size: 1.4rem; font-weight: 500; box-shadow: var(--shadow-float); }
  .toasts > .flash { position: static; max-width: 100%; pointer-events: auto; animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
  .toasts > .flash.is-leaving { animation: toast-out .16s ease-in forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translateX(1.6rem); } }
  @keyframes toast-out { to { opacity: 0; transform: translateX(1.6rem); } }
  @media (max-width: 600px) {
    @keyframes toast-in { from { opacity: 0; transform: translateY(1.2rem); } }
    @keyframes toast-out { to { opacity: 0; transform: translateY(1.2rem); } }
  }
  .flash-close { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-left: auto; padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: inherit; font: inherit; font-size: 1.8rem; line-height: 1; opacity: .6; cursor: pointer; }
  .flash-close:hover, .flash-close:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
  .flash::before { content: ""; flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%; background: #6fd49a; }
  .flash.is-error::before { background: #ff8a7a; }
  .flash.is-warning::before { background: var(--warning); }
  .flash.is-inline { inset: auto; transform: none; display: block; z-index: auto; max-width: none; margin: 0 0 1.6rem; padding: .9rem 1.2rem; padding-left: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: none; background: var(--surface); color: var(--ink); --accent: var(--line-strong); position: relative; overflow: clip; }
  .flash.is-inline::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); pointer-events: none; }
  .flash.is-inline::before { display: none; }
  .flash.is-inline.is-warning { background: var(--warning-soft); border-color: var(--warning-line); --accent: var(--warning); }
  .flash.is-inline.is-error { background: var(--error-soft); border-color: var(--error-line); --accent: var(--error); }
  .flash.is-inline.is-success { background: var(--ok-soft); border-color: var(--ok-line); --accent: var(--ok); }
  .flash code { font-size: 1.25rem; }
  .flash ul { margin: .4rem 0 0; padding-left: 2rem; }
  .flash-title { margin: 0; font-weight: 650; }
  .flash.has-action .flash-action { margin-left: auto; }
  .flash.has-action .flash-close { margin-left: 0; }
  .flash-text { min-width: 0; overflow-wrap: anywhere; }
  .flash-action { flex: none; padding: .4rem 1.1rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--r-control); background: transparent; color: inherit; font: inherit; font-size: 1.35rem; font-weight: 650; cursor: pointer; }
  .flash-action:hover { background: color-mix(in srgb, currentColor 14%, transparent); border-color: color-mix(in srgb, currentColor 50%, transparent); }
}

@layer components {
  /* Card internals use px so saved positions survive root font changes. */
  .journey { position: absolute; inset: 0; overflow: hidden; background: var(--surface-2); }
  .journey-float { position: absolute; left: var(--gap, 1.2rem); right: var(--gap, 1.2rem); z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; pointer-events: none; }
  .journey-float > * { pointer-events: auto; }
  .journey-float.is-bottom { bottom: var(--gap, 1.2rem); justify-content: flex-end; }
  .journey-search { position: absolute; left: calc(100% + .6rem); top: auto; bottom: .2rem; display: flex; align-items: center; gap: .6rem; height: 4rem; padding: 0 .6rem 0 1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); }
  .journey-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(var(--focus-rgb) / .15), var(--shadow-float); }
  .journey-search > .icon { width: 1.5rem; height: 1.5rem; color: var(--ink-3); }
  .search-field { width: 18rem; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.35rem; color: var(--ink); }
  .search-field::-webkit-search-cancel-button { display: none; }
  .journey-search kbd { margin-left: auto; }
  .search-results { left: 0; right: auto;  position: absolute; top: calc(100% + .4rem); width: min(36rem, 80vw); margin: 0; padding: .4rem; list-style: none; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); }
  .search-result { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .7rem; width: 100%; padding: .6rem .8rem; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .search-result .kind-icon { width: 15px; height: 15px; }
  .search-result:hover, .search-result.is-active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .search-id { font-family: var(--mono); font-size: 1.25rem; font-weight: 600; }
  .search-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.25rem; color: var(--ink-3); }
  .search-empty { padding: .6rem .8rem; font-size: 1.3rem; color: var(--ink-3); }
  .journey.is-searching .node:not(.is-match), .journey.is-searching .journey-edges { opacity: .25; }
  .node.is-found { animation: node-found 1.6s ease-out; }
  @keyframes node-found { 0%, 30% { box-shadow: 0 0 0 6px rgb(var(--focus-rgb) / .35), var(--shadow-float); border-color: var(--focus); } 100% { box-shadow: 0 1px 2px rgb(var(--shade) / .05); } }
  @media (prefers-reduced-motion: reduce) { .node.is-found { animation: none; outline: 2px solid var(--focus); outline-offset: 3px; } }
  .palette { display: grid; gap: .2rem; }
  .zoom { display: flex; align-items: center; gap: .1rem; height: var(--float-control, 3.8rem); padding: 0 .4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--island); box-shadow: var(--shadow-float); backdrop-filter: blur(10px); }
  .zoom form { display: inline; }
  .zoom .tool, .zoom .journey-help > .tool { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem; }
  .zoom-level { min-width: 4.8rem; text-align: center; font-family: var(--mono); font-size: 1.2rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .journey-help { position: relative; }
  .journey-help > summary .icon { width: 18px; height: 18px; }
  .journey-help > summary { display: grid; place-items: center; list-style: none; cursor: pointer; }
  .journey-help > summary::-webkit-details-marker { display: none; }
  .journey-help[open] > summary { color: var(--ink); border-color: var(--line-strong); }
  .journey-help > p { bottom: 4.4rem; top: auto;  position: absolute; right: 0; width: min(34rem, 70vw); margin: 0; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink-2); font-size: 1.35rem; box-shadow: var(--shadow-float); }
  .chip { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); text-decoration: none; cursor: grab; user-select: none; }
  .chip-label { position: absolute; left: calc(100% + 1.2rem); top: 50%; z-index: 20; display: grid; gap: .1rem; padding: .6rem 1rem; border-radius: var(--r-control); background: var(--inverse); color: var(--on-inverse); font-size: 1.2rem; font-weight: 450; white-space: nowrap; box-shadow: var(--shadow-float); pointer-events: none; opacity: 0; transform: translate(-.4rem, -50%); transition: opacity .12s ease, transform .12s ease; }
  .chip-label strong { font-size: 1.35rem; font-weight: 650; }
  .chip:hover .chip-label, .chip:focus-visible .chip-label { opacity: 1; transform: translate(0, -50%); transition-delay: .15s; }
  @media (max-width: 879px) { .chip-label { display: none; } }
  .context-menu { position: fixed; inset: auto; margin: 0; z-index: 30; min-width: 22rem; color: var(--ink); }
  .context-menu:not([open]) { display: none; }
  .context-group { display: grid; }
  .context-group[hidden], .context-menu .menu-item[hidden] { display: none; }
  .context-menu .menu-item kbd { margin-left: auto; }
  .chip .kind-icon { width: 3rem; height: 3rem; padding: .6rem; border-radius: var(--r-control); }
  .chip .kind-icon.is-menu { background: var(--menu-soft); }
  .chip .kind-icon.is-input { background: var(--input-soft); }
  .chip .kind-icon.is-router { background: var(--router-soft); }
  .chip .kind-icon.is-end { background: var(--end-soft); }
  .chip .kind-icon.is-message { background: var(--message-soft); }
  .chip .kind-icon.is-form { background: var(--form-soft); }
  .chip .kind-icon.is-wait { background: var(--wait-soft); }
  .chip:hover { background: var(--surface-2); }
  .chip:active { cursor: grabbing; }
  .journey-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background-color: var(--surface-2); background-image: radial-gradient(rgb(var(--ink-rgb) / .13) 1px, transparent 1.2px); background-size: 20px 20px; }
  .journey-viewport.is-panning { cursor: grabbing; }
  .journey-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .journey-canvas.is-zooming { will-change: transform; }
  .journey-canvas.is-unplaced { opacity: 0; pointer-events: none; }
  .journey-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
  .journey-edges:not(.is-lit-layer) { will-change: opacity; }
  /* Culled: keeps its place and size, and is not painted. */
  .node.is-culled, .cord.is-culled { visibility: hidden; }
  .node.is-culled:is(.is-selected, .is-dragging, .is-drop-target, .is-current, .is-found) { visibility: visible; }

  .cord-sheath { display: none; }
  .cord-core { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
  .plug { fill: var(--ink-3); }
  .plug.is-faded { fill-opacity: .5; }
  .plug.is-menu { fill: var(--menu); }
  .plug.is-input { fill: var(--input); }
  .plug.is-router { fill: var(--router); }
  .plug.is-end { fill: var(--end); }
  .plug.is-message { fill: var(--message); }
  .plug.is-form { fill: var(--form); }
  .plug.is-wait { fill: var(--wait); }
  .cord.is-menu .cord-core { stroke: var(--menu); }
  .cord.is-input .cord-core { stroke: var(--input); }
  .cord.is-router .cord-core { stroke: var(--router); }
  .cord.is-end .cord-core { stroke: var(--end); }
  .cord.is-message .cord-core { stroke: var(--message); }
  .cord.is-form .cord-core { stroke: var(--form); }
  .cord.is-wait .cord-core { stroke: var(--wait); }
  /* Faded by the stroke rather than by the group: a group's half-opacity costs an offscreen layer for every link. */
  .cord.is-back .cord-core { stroke-opacity: .5; stroke-dasharray: 4 4; }
  .journey-canvas.is-moving .cord.is-back .cord-core { stroke-dasharray: none; }
  .is-focusing .journey-edges:not(.is-lit-layer) { opacity: .15; }
  .cord.is-lit .cord-core { stroke-width: 2.4; stroke-opacity: 1; stroke-dasharray: none; }
  .cord-core.is-wire { stroke: var(--focus); stroke-width: 2; stroke-dasharray: 6 4; }

  .node { position: absolute; left: 0; top: 0; contain: layout style; width: 232px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); font-size: 12.5px; line-height: 1.4; box-shadow: 0 1px 2px rgb(var(--shade) / .05); cursor: grab; user-select: none; transition: box-shadow .12s ease, border-color .12s ease; }
  .node:hover { border-color: var(--ink-3); box-shadow: var(--shadow-float); }
  .node:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .node.is-dragging { z-index: 3; cursor: grabbing; box-shadow: 0 14px 34px rgb(var(--shade) / .2); transition: none; }
  .node.is-drop-target { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(var(--focus-rgb) / .25); }
  .node.has-warning { border-color: var(--warning-line); }
  .node.has-error { border-color: var(--error-line); }
  .node-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 10px 10px 7px; border-radius: 0; background: var(--kind-soft, var(--surface-2)); box-shadow: inset 0 3px 0 var(--kind, var(--line-strong)); }
  .node:empty { background: var(--kind-soft, var(--surface-2)); box-shadow: inset 0 3px 0 var(--kind, var(--line-strong)); }
  .node.is-menu { --kind: var(--menu); --kind-soft: var(--menu-soft); }
  .node.is-input { --kind: var(--input); --kind-soft: var(--input-soft); }
  .node.is-router { --kind: var(--router); --kind-soft: var(--router-soft); }
  .node.is-end { --kind: var(--end); --kind-soft: var(--end-soft); }
  .node.is-message { --kind: var(--message); --kind-soft: var(--message-soft); }
  .node.is-form { --kind: var(--form); --kind-soft: var(--form-soft); }
  .node.is-wait { --kind: var(--wait); --kind-soft: var(--wait-soft); }
  .node.is-unknown { --kind: var(--error); --kind-soft: var(--error-soft); }
  .node-head .kind-icon { width: 15px; height: 15px; }
  .kind-icon { flex: 0 0 auto; }
  .kind-icon.is-menu { color: var(--menu); }
  .kind-icon.is-input { color: var(--input); }
  .kind-icon.is-router { color: var(--router); }
  .kind-icon.is-end { color: var(--end); }
  .kind-icon.is-message { color: var(--message); }
  .kind-icon.is-form { color: var(--form); }
  .kind-icon.is-wait { color: var(--wait); }
  .kind-icon.is-unknown { color: var(--error); }
  .node-id { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; font-weight: 600; }
  .node-flag { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--warning); color: var(--on-accent); font-size: 11px; font-weight: 700; }
  .node-flag.is-error { background: var(--error); }

  .node-screen { margin: 0 7px 7px; padding: 8px 10px 9px; border: 1px solid var(--screen-line); border-radius: var(--r-control); background: var(--screen-bg); color: var(--screen-ink); font-family: var(--mono); font-size: 11.5px; line-height: 1.45; transition: background-color .15s ease, border-color .15s ease; }
  .node-media { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: 11px; color: var(--screen-ink); opacity: .8; }
  .node-media .icon { width: 12px; height: 12px; }
  .node-sends { margin: .5rem 0 0; font-size: 11px; opacity: .65; }
  .node-copy { margin: 0; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .copy-var { padding: 0 3px; border-radius: 3px; background: var(--input-soft); color: var(--input-ink); }
  .copy-var.is-sample { border-bottom: 1px dashed currentColor; cursor: help; }
  .node-options { list-style: none; margin: 7px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--screen-rule); }
  .node-copy:empty + .node-options, .node-options:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .port { position: relative; }
  .port.is-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; padding: 2px 0; }
  .node-key { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border: 1px solid var(--keycap-line); border-bottom-width: 2px; border-radius: var(--r-control); background: var(--keycap); font-size: 10.5px; font-weight: 600; line-height: 1; }
  .node-key.is-reply { border-bottom-width: 1px; border-radius: 999px; }
  .port.is-option:not(:has(.node-key)) { grid-template-columns: minmax(0, 1fr); }
  .node-key.is-reply .icon { width: 10px; height: 10px; }
  .port.is-option .port-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .node-answer { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; padding-top: 6px; border-top: 1px dashed var(--screen-rule); color: var(--screen-muted); }
  .node-answer code { padding: 0 3px; border: 0; background: var(--input-soft); color: var(--input-ink); font-size: 11px; }
  .node-caret { width: 8px; height: 14px; border-radius: 1px; background: var(--input); opacity: .75; }

  .node-routes { margin: 0; padding: 0 0 6px; list-style: none; }
  .node.is-router .node-routes { padding-bottom: 5px; }
  .port.is-route { display: flex; justify-content: flex-end; align-items: center; min-height: 22px; padding: 1px 16px 1px 12px; color: var(--ink-2); font-family: var(--mono); font-size: 11px; line-height: 1.4; text-align: right; }
  .port.is-route .port-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .node-end { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px 9px; font-size: 11.5px; color: var(--ink-3); }
  .node-end::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--end); }
  .node-label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px 9px; font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
  .node-label .icon { flex: none; width: 12px; height: 12px; }
  .node-done { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px 9px; font-size: 11.5px; color: var(--ok-ink); }
  .node-done .icon { flex: none; width: 12px; height: 12px; }

  .port-dot { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 1px var(--ink-3); cursor: crosshair; touch-action: none; transition: transform .1s ease; }
  .port.is-option .port-dot { right: -24px; }
  .port.is-route .port-dot { right: -6.5px; }
  .node.is-menu .port-dot { background: var(--menu); box-shadow: 0 0 0 1px var(--menu); }
  .node.is-input .port-dot { background: var(--input); box-shadow: 0 0 0 1px var(--input); }
  .node.is-router .port-dot { background: var(--router); box-shadow: 0 0 0 1px var(--router); }
  .port-dot:hover, .port.is-wiring .port-dot { transform: scale(1.4); }
  .port.is-unlinked .port-label { color: var(--ink-3); font-style: italic; }
  .node .port.is-unlinked .port-dot { background: var(--surface); box-shadow: 0 0 0 1px var(--ink-3); }
  .port.is-missing .port-label { color: var(--error); }
  .node .port.is-missing .port-dot { background: var(--error); box-shadow: 0 0 0 1px var(--error); }

  .node.is-router { width: auto; min-width: 150px; max-width: 250px; border-style: dashed; background: color-mix(in srgb, var(--surface) 70%, transparent); }
  .node.is-current { border-color: var(--live); box-shadow: 0 0 0 3px var(--live-glow), var(--shadow-float); }
  .node.is-current .node-screen { background: var(--live-soft); border-color: var(--live-line); }
  .journey-trigger { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--trigger-bg); color: var(--trigger-ink); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-float); font-size: 12px; font-weight: 550; white-space: nowrap; box-shadow: var(--shadow-float); pointer-events: none; }
  .trigger-icon { width: 14px; height: 14px; color: var(--trigger-icon); }
  .trigger-line { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 3 4; }
  @media (max-width: 879px) {
    .journey-search { position: fixed; left: var(--gap); right: var(--gap); bottom: auto; top: 7.2rem; }
  }
}

@layer components {
  .modal { padding: 0; border: 0; background: var(--bg); color: var(--ink); }
  .modal::backdrop { background: rgb(var(--shade) / .32); }
  .modal.panel { position: fixed; inset: 0 0 0 auto; width: min(72rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; overflow: auto; overscroll-behavior: contain; border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgb(var(--shade) / .14); transition: transform .22s ease, opacity .2s ease; }
  @starting-style { .modal.panel[open] { transform: translateX(40px); opacity: 0; } }
  .modal-close { position: sticky; top: 1.2rem; float: right; z-index: 3; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 1.2rem 1.2rem 0 0; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 2rem; line-height: 1; cursor: pointer; }
  .modal-close:hover { color: var(--ink); border-color: var(--line-strong); }
  @media (max-width: 879px) {
    .modal.panel { inset: auto 0 0 0; width: 100%; height: 92dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; }
    @starting-style { .modal.panel[open] { transform: translateY(40px); } }
  }
  .panel-head { padding: 2.4rem 2.8rem 1.8rem; border-top: 3px solid var(--line-strong); border-bottom: 1px solid var(--line); background: var(--surface); }
  .panel-head.is-menu { border-top-color: var(--menu); }
  .panel-head.is-input { border-top-color: var(--input); }
  .panel-head.is-router { border-top-color: var(--router); }
  .panel-head.is-end { border-top-color: var(--end); }
  .panel-head.is-message { border-top-color: var(--message); }
  .panel-head.is-form { border-top-color: var(--form); }
  .panel-head.is-wait { border-top-color: var(--wait); }
  .panel-head.is-unknown { border-top-color: var(--error); }
  .panel-context { display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 550; color: var(--ink-3); }
  .panel-context .kind-icon { width: 1.8rem; height: 1.8rem; }
  .panel-title { margin: 0; font-size: 2.3rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
  .panel-body { container: panel / inline-size; padding: 0 2.8rem; }
  .panel-form { padding-top: 1.6rem; }
  .panel-body:not(:has(.panel-form, .panel-actions)) { padding-block: 1.6rem 2.4rem; }
  .panel-actions { position: sticky; bottom: 0; z-index: 2; display: flex; gap: .8rem; margin: 2.4rem -2.8rem 0; padding: 1.2rem 2.8rem 1.6rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); }
  .danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; padding: 1.8rem 0 3rem; }
  .danger-zone .hint { margin: 0; }
}

@layer components {
  .group { min-width: 0; margin: 1.2rem 0 0; padding: 1.6rem 1.8rem 1.8rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .group > legend { float: left; width: 100%; margin: 0 0 1.1rem; padding: 0; font-size: 1.5rem; font-weight: 650; }
  .group > legend + * { clear: both; }
  .group > * + * { margin-top: 1.1rem; }
  .group.subgroup { min-width: 0; margin: 1rem 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .group.subgroup > * + * { margin-top: 1rem; }
  .rows { list-style: none; margin: 0; padding: 0; counter-reset: row; }
  .row { position: relative; padding: 1.1rem 0 .3rem; border-top: 1px solid var(--line); }
  .rows > .row:first-child { border-top: 0; padding-top: .3rem; }
  .rows.is-numbered > .row { counter-increment: row; padding-left: 3.8rem; }
  .rows.is-numbered > .row::before { content: counter(row); position: absolute; left: 0; top: 3rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface-2); font-family: var(--mono); font-size: 1.3rem; font-weight: 600; color: var(--ink-2); }
  .rows.is-numbered > .row:first-child::before { top: 2.2rem; }
  .row-grid { display: grid; gap: .8rem; }
  .row-grid .label { font-size: 1.25rem; font-weight: 550; color: var(--ink-2); margin-bottom: .3rem; }
  .row-grid .field { min-height: 3.6rem; padding: .45rem .9rem; font-size: 1.4rem; }
  .row-grid .field.mono { font-size: 1.3rem; }
  .row-tools { display: flex; justify-content: flex-end; gap: .1rem; margin-top: .3rem; }
  .row-handle { cursor: grab; touch-action: none; font-size: 1.4rem; line-height: 1; }
  .row.is-dragging { z-index: 2; border-radius: var(--r-control); background: var(--surface); box-shadow: var(--shadow-float); }
  .option-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 7.2rem; }
  .option-texts { display: grid; gap: .4rem; }
  .option-language { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: center; gap: .6rem; }
  .language-tag { display: inline-grid; place-items: center; height: 2.2rem; padding: 0 .5rem; border-radius: var(--r-control); background: var(--router-soft); color: var(--router-ink); font-family: var(--mono); font-size: 1.1rem; font-weight: 600; }
  .option-grid:has(.option-texts) { align-items: start; }
  .option-grid.is-whatsapp { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .option-grid.is-whatsapp .label, .list-button > .label { display: flex; justify-content: space-between; gap: 1rem; }
  .option-language:has(.count) { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }
  .count { font-family: var(--mono); font-size: 1.1rem; font-weight: 400; color: var(--ink-3); }
  .count.is-over { color: var(--error); }
  .option-description, .list-button { display: grid; gap: .4rem; margin-top: .8rem; }
  .option-description[hidden], .list-button[hidden] { display: none; }
  .label-aside { font-weight: 400; color: var(--ink-3); }
  .pair-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .request-grid { grid-template-columns: 11rem minmax(0, 1fr); }
  .triple-grid { grid-template-columns: minmax(0, 1fr) 9.6rem minmax(0, 1.2fr); }
  .phrase-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .more { margin-top: 1.1rem; }
  .more > summary { cursor: pointer; font-size: 1.35rem; font-weight: 550; color: var(--ink-2); }
  .more > summary:hover { color: var(--ink); }
  .more[open] > summary { margin-bottom: .9rem; }
  .more > * + * { margin-top: 1rem; }
  .more > summary[hidden] + * { margin-top: 0; }
  .pairs { margin-top: 1.1rem; }
  .call > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); cursor: pointer; font-size: 1.3rem; }
  .call > summary:hover { border-color: var(--ink-3); }
  .call > summary { list-style: none; }
  .call > summary::-webkit-details-marker { display: none; }
  .call > summary::before { content: ""; flex: none; align-self: center; width: .6rem; height: .6rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); rotate: -45deg; transition: rotate .12s ease; }
  .call[open] > summary::before { rotate: 45deg; }
  .call[open] > summary { margin-bottom: 1.2rem; }
  .call-method { font-weight: 700; color: var(--router-ink); }
  .call-method:empty, .call-saved:empty { display: none; }
  .call-summary code { min-width: 0; padding: 0; border: 0; background: none; overflow-wrap: anywhere; }
  .call-saved { color: var(--ink-2); }
  .call-saved::before { content: "→ "; }
  .call > * + * { margin-top: 1rem; }
  .action-part-title { margin: 1.6rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 1.2rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .action-part-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .request-body { margin-top: 1.1rem; }
  .request-body-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .request-body-head .label { margin: 0; }
  .request-body-mode.field { width: auto; min-height: 3rem; padding-block: .2rem; font-size: 1.3rem; }
  .request-body-part { min-width: 0; margin: .6rem 0 0; padding: 0; border: 0; }
  .request-body-part > .pairs { margin-top: 0; }
  .request-body-part > .pairs > .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .request-body > .hint { margin: .6rem 0 0; }
  .action-answers { margin-top: 1.2rem; }
  .link-button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .25rem; cursor: pointer; }
  .link-button:hover { color: var(--focus); }

  .route { margin-top: 1rem; padding: 1.2rem 1.4rem .4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
  .rows > .route:first-child { border-top: 1px solid var(--line); padding-top: 1.2rem; }
  .route-step + .route-step { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
  .route-step > .label { font-size: 1.35rem; }
  .action { margin-top: .6rem; padding: 1rem 1rem .3rem; border: 1px solid var(--action-line); border-radius: var(--r-control); background: var(--action-bg); }
  .rows > .action:first-child { border-top: 1px solid var(--action-line); padding-top: 1rem; }
  .action-type { max-width: 24rem; }
  .guard-grid { display: grid; grid-template-columns: auto minmax(0, 2fr) 10rem minmax(0, 1.3fr) auto minmax(0, 2fr); align-items: center; gap: .6rem; }
  .guard-grid .field { min-height: 3.6rem; padding: .45rem .9rem; font-size: 1.35rem; }
  .guard-word { font-size: 1.3rem; font-weight: 550; color: var(--ink-3); }
  .guard-custom { margin-top: .5rem; }
  .guard-custom > summary { width: fit-content; cursor: pointer; font-size: 1.3rem; font-weight: 550; color: var(--ink-3); }
  .guard-custom > summary:hover, .guard-custom[open] > summary { color: var(--ink-2); }
  .guard-custom > .field { width: 100%; margin-top: .5rem; min-height: 3.6rem; font-size: 1.35rem; }
  .list-available { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0 0; font-size: 1.3rem; color: var(--ink-3); }
  @container panel (max-width: 60rem) {
    .guard-grid { grid-template-columns: auto minmax(0, 1fr) 9.5rem minmax(0, 8rem); row-gap: .5rem; }
    .guard-grid > :last-child { grid-column: 2 / -1; }
    .request-grid { grid-template-columns: minmax(0, 1fr); }
    .request-grid > :first-child { max-width: 14rem; }
  }
  @container panel (max-width: 34rem) {
    .option-grid, .triple-grid, .request-grid, .pair-grid { grid-template-columns: minmax(0, 1fr); }
    .guard-grid { grid-template-columns: auto minmax(0, 1fr); }
  }
  @media (max-width: 879px) {
    .panel-head { padding: 2rem 1.8rem 1.4rem; }
    .panel-body { padding: 0 1.6rem; }
    .panel-actions { margin: 2.4rem -1.6rem 0; padding: 1.2rem 1.6rem 1.6rem; }
    .wrap { padding: 1.2rem 1.6rem 6rem; }
  }
}

  .step { margin-top: .6rem; padding: 1rem 1rem .3rem; border: 1px solid var(--action-line); border-radius: var(--r-control); background: var(--action-bg); }
  .rows > .step:first-child { border-top: 1px solid var(--action-line); padding-top: 1rem; }
  .step-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
  .step-head .connector-mark { width: 3.2rem; height: 3.2rem; font-size: 1.2rem; }
  .step-name { display: flex; flex-direction: column; gap: .1rem; }
  .step-outcomes { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
  .step-outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .6rem; }
  .step-outcome-label { font-size: 1.35rem; color: var(--ink-2); }
  .step-began { margin: 0 0 .6rem; }

@layer components {
  .phone { max-width: 32rem; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .device { position: relative; margin: 0 auto; max-width: 30rem; padding: 9px; border-radius: 44px; background: #1b2320; box-shadow: inset 0 0 0 1.5px #3a4641, inset 0 0 0 4px #141a18, 0 1px 2px rgb(var(--shade) / .1), 0 18px 40px rgb(var(--shade) / .16); }
  .device::before, .device::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c3632; }
  .device::before { left: -3px; top: 96px; height: 52px; box-shadow: 0 64px 0 #2c3632; }
  .device::after { right: -3px; top: 132px; height: 72px; }
  .device-screen { position: relative; display: flex; flex-direction: column; height: clamp(50rem, 62vh, 60rem); overflow: hidden; border-radius: 36px; background: var(--phone-app-bg); color: var(--phone-ink); font-family: var(--phone-font); -webkit-font-smoothing: antialiased; }
  .device-status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 20px 0 26px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .device-island { position: absolute; left: 50%; top: 9px; width: 74px; height: 21px; margin-left: -37px; border-radius: 999px; background: #000; }
  .device-signal { display: flex; align-items: center; gap: 5px; }
  .device-signal .status-cellular { width: 17px; height: 17px; }
  .device-signal .status-battery { width: 25px; height: 25px; margin-right: -2px; }
  .device-body { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .device-home { position: absolute; left: 50%; bottom: 7px; z-index: 4; width: 108px; height: 4px; margin-left: -54px; border-radius: 999px; background: var(--phone-ink); }

  .dialer { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; padding: 0 0 34px; }
  .dialer.is-behind { pointer-events: none; }
  .dialer.is-behind .phone-note { visibility: hidden; }
  .dialer-display { flex: 1; display: grid; align-content: center; justify-items: center; gap: 6px; min-height: 0; padding: 0 20px; text-align: center; }
  .dialer-number { min-height: 38px; max-width: 100%; overflow: hidden; font-size: 32px; font-weight: 400; letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; }
  .phone-note { max-width: 24ch; margin: 0; font-size: 13px; line-height: 1.35; color: var(--phone-muted); }
  .phone-note.is-error { color: #ff3b30; }
  .dialer > .phone-note { margin: auto; }
  .dial-pad { display: grid; grid-template-columns: repeat(3, 62px); grid-auto-rows: 62px; justify-content: center; gap: 12px 20px; }
  .dial-key { display: grid; place-content: center; justify-items: center; border: 0; border-radius: 50%; background: var(--phone-dial-key); color: var(--phone-ink); font: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
  .dial-key:active { background: var(--phone-dial-key-press); transition: none; }
  .dial-key:disabled { cursor: default; }
  .dial-digit { font-size: 28px; font-weight: 400; font-variant-numeric: tabular-nums; }
  .dial-letters { margin-top: 1px; font-size: 8px; font-weight: 700; letter-spacing: .2em; padding-left: .2em; }
  .dial-key.is-symbol .dial-digit { font-size: 32px; font-weight: 300; }
  .dial-key[aria-label="*"] .dial-digit { transform: translateY(9px); font-size: 52px; font-weight: 300; }
  .call-key { display: grid; place-items: center; border: 0; border-radius: 50%; background: #34c759; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .call-key .icon { width: 28px; height: 28px; }
  .call-key:active { filter: brightness(.9); }
  .call-key:disabled { cursor: default; }
  .dial-delete { display: grid; place-items: center; border: 0; background: transparent; color: var(--phone-dial-key-press); cursor: pointer; }
  .dial-delete .icon { width: 26px; height: 26px; color: var(--phone-muted); }
  .dial-delete[hidden] { display: grid !important; visibility: hidden; }

  .ussd-stage { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 12px 12px 0; background: var(--phone-dim); }
  .device-screen:has(.keypad) .ussd-stage { bottom: var(--keyboard-height); }
  .ussd-dialog { position: relative; width: min(100%, 222px); overflow: hidden; border-radius: 13px; background: var(--phone-alert); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
  .ussd-message { padding: 16px 14px 14px; text-align: center; }
  .phone-text { max-height: 15rem; margin: 0; overflow: auto; font-size: 13px; line-height: 1.33; color: var(--phone-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
  .ussd-detail { max-height: 8rem; margin: 8px 0 0; padding: 6px 8px; overflow: auto; border-radius: 6px; background: var(--error-soft); color: var(--error-ink); font-family: var(--mono); font-size: 10px; line-height: 1.4; text-align: left; white-space: pre-wrap; }
  .ussd-reply { margin-top: 12px; }
  .ussd-input { box-sizing: border-box; width: 100%; height: 26px; padding: 0 6px; border: .5px solid var(--phone-field-line); border-radius: 6px; background: var(--phone-field); color: var(--phone-ink); font: inherit; font-size: 13px; caret-color: var(--phone-link); }
  .ussd-input:focus { outline: none; }
  .ussd-input::placeholder { color: var(--phone-muted); }
  .ussd-buttons { display: grid; grid-template-columns: 1fr 1fr; border-top: .5px solid var(--phone-alert-line); }
  .ussd-buttons.is-single { grid-template-columns: 1fr; }
  .ussd-buttons > * + * { border-left: .5px solid var(--phone-alert-line); }
  .ussd-buttons .button_to { display: block; }
  .ussd-button { width: 100%; height: 42px; border: 0; background: transparent; color: var(--phone-link); font: inherit; font-size: 16px; font-weight: 400; cursor: pointer; }
  .ussd-button.is-primary { font-weight: 600; }
  .ussd-button:active { background: var(--phone-alert-press); }
  .ussd-progress { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 8px; margin: 0; background: var(--phone-veil); font-size: 13px; color: var(--phone-muted); }
  turbo-frame#simulator[busy] .ussd-progress { display: flex; }
  .ussd-spinner { width: 16px; height: 16px; border: 2px solid var(--phone-spinner-track); border-top-color: var(--phone-muted); border-radius: 50%; animation: ussd-spin .8s linear infinite; }
  @keyframes ussd-spin { to { transform: rotate(360deg); } }

  .device-screen { --keyboard-height: 222px; }
  .keypad { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--keyboard-height); padding: 6px 6px 30px; background: var(--phone-keypad); }
  .keypad-layer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, 1fr); gap: 6px; height: 100%; }
  .phone-key { display: grid; place-content: center; justify-items: center; border: 0; border-radius: 5px; background: var(--phone-key); color: var(--phone-key-ink); font: inherit; line-height: 1; cursor: pointer; box-shadow: 0 1px 0 var(--phone-key-shadow); -webkit-tap-highlight-color: transparent; }
  .key-digit { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
  .key-digit.is-small { font-size: 16px; letter-spacing: .04em; }
  .key-letters { min-height: 9px; font-size: 8px; font-weight: 600; letter-spacing: .18em; padding-left: .18em; }
  .phone-key.is-symbol .key-digit { font-size: 26px; }
  .phone-key:active { background: var(--phone-key-press); }
  .phone-key.is-function { background: transparent; box-shadow: none; }
  .phone-key.is-function:active { background: var(--phone-key); }
  .phone-key .icon { width: 24px; height: 24px; }
  .phone-key:focus-visible, .dial-key:focus-visible, .call-key:focus-visible, .ussd-button:focus-visible { outline: 2px solid var(--phone-link); outline-offset: 1px; }
  .keypad-gap { display: block; }

  .phone-status { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1.2rem 0 0; font-size: 1.25rem; color: var(--ink-2); }
  .phone-state { display: inline-flex; align-items: center; gap: .5rem; }
  .phone-state::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: #2fb567; box-shadow: 0 0 0 3px rgba(47, 181, 103, .18); }
  .phone-state.is-ended::before { background: var(--ink-3); box-shadow: none; }
  .phone-status code { font-size: 1.15rem; }
  @media (prefers-reduced-motion: reduce) { .ussd-spinner { animation: none; } }

  .receipt { margin-top: 1.6rem; padding: 1.2rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .receipt-title { margin: 0 0 .6rem; font-size: 1.35rem; font-weight: 650; }
  .trace { position: relative; list-style: none; margin: 0; padding: 0; font-size: 1.3rem; }
  .trace li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .5rem 0 .5rem 2rem; }
  .trace li::before { content: ""; position: absolute; left: .4rem; top: 1.25rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink-3); }
  .trace li:not(:last-child)::after { content: ""; position: absolute; left: .75rem; top: 2rem; bottom: -.5rem; width: 1px; background: var(--line-strong); }
  .trace li:last-child::before { background: #2fb567; box-shadow: 0 0 0 1.5px #2fb567; }
  .trace-input { min-width: 3.2rem; padding: 0 .6rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-control); background: var(--surface); font-family: var(--mono); font-size: 1.2rem; font-weight: 600; text-align: center; }
  .trace-screen { font-family: var(--mono); font-size: 1.2rem; }
  .trace-call { flex-basis: 100%; font-family: var(--mono); font-size: 1.1rem; color: var(--ink-3); overflow-wrap: anywhere; }
  .trace-sms { flex-basis: 100%; font-size: 1.15rem; color: var(--ink-3); overflow-wrap: anywhere; }

  .sms-arrived { position: absolute; left: 8px; right: 8px; top: 40px; z-index: 5; display: grid; gap: 6px; }
  .sms-note { padding: 9px 12px 10px; border-radius: 16px; background: var(--phone-alert); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 4px 14px rgb(0 0 0 / .14); font-size: 12px; line-height: 1.35; }
  .sms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 2px; }
  .sms-from { font-weight: 600; }
  .sms-to, .sms-cost { color: var(--phone-muted); font-size: 11px; }
  .sms-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sms-cost { margin: 3px 0 0; }

  .device-screen.is-chat { background: var(--chat-bg); color: var(--chat-ink); font-size: 13.2px; line-height: 17.6px; }
  .is-chat .device-status { background: var(--chat-head); }
  .chat-head { display: flex; align-items: center; gap: 7px; padding: 7px 8px; background: var(--chat-head); }
  .chat-head .icon { width: 20px; height: 20px; color: var(--chat-ink); }
  .chat-leave { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--chat-ink); cursor: pointer; }
  .chat-leave .icon { width: 22px; height: 22px; }
  .chat-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--input); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
  .chat-who { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
  .chat-name { overflow: hidden; font-size: 15px; font-weight: 500; letter-spacing: .1px; white-space: nowrap; text-overflow: ellipsis; }
  .chat-sub { font-size: 11.5px; color: var(--chat-muted); }
  .chat-tools { display: flex; gap: 13px; margin-left: 2px; color: var(--chat-ink); opacity: .45; }
  .chat-tools .icon { width: 19px; height: 19px; }
  .chat-log { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 12px 6% 8px; overflow-y: auto; overscroll-behavior: contain; }
  /* Drawn on the body so the wallpaper neither scrolls nor anchors a sheet. */
  .is-chat .device-body::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/assets/chat-doodles-39697f05.svg"); background-size: 420px; opacity: var(--chat-doodle); pointer-events: none; }
  :root:not([data-theme="dark"]) .is-chat .device-body::before { filter: invert(1); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .is-chat .device-body::before { filter: none; } }
  :root[data-theme="dark"] .is-chat .device-body::before { filter: none; }
  .chat-day { align-self: center; margin: 4px 0 10px; padding: 4px 11px; border-radius: 8px; background: var(--chat-note); color: var(--chat-muted); font-size: 11.5px; box-shadow: 0 1px .5px rgb(var(--phone-shade) / .13); }
  .chat-note { align-self: center; max-width: 76%; margin: 0 0 10px; padding: 5px 11px; border-radius: 8px; background: var(--chat-note); color: var(--chat-muted); font-size: 11.5px; line-height: 1.4; text-align: center; box-shadow: 0 1px .5px rgb(var(--phone-shade) / .13); }
  .chat-error { align-self: stretch; margin: 0; padding: 8px; border-radius: 7px; background: var(--chat-in); font-family: var(--mono); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }

  .bubble { position: relative; max-width: 80%; margin: 0; padding: 6px 7px 8px 9px; border-radius: 7.5px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px .5px rgb(var(--phone-shade) / .13); }
  .bubble.is-in { align-self: flex-start; background: var(--chat-in); }
  .bubble.is-out { align-self: flex-end; background: var(--chat-out); }
  .bubble.is-first { margin-top: 8px; }
  .bubble.is-first.is-in { border-top-left-radius: 0; }
  .bubble.is-first.is-out { border-top-right-radius: 0; }
  .bubble.is-first::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
  .bubble.is-first.is-in::before { left: -8px; background: var(--chat-in); clip-path: path("M8 0L0 0C4 0 8 4 8 13Z"); }
  .bubble.is-first.is-out::before { right: -8px; background: var(--chat-out); clip-path: path("M0 0L8 0C4 0 0 4 0 13Z"); }
  .bubble.is-refused { box-shadow: inset 3px 0 0 var(--chat-refused), 0 1px .5px rgb(var(--phone-shade) / .13); }
  .bubble-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 5px 0 -3px 8px; font-size: 10.5px; color: var(--chat-muted); white-space: nowrap; }
  .bubble-ticks { display: inline-grid; color: var(--chat-tick); }
  .bubble-ticks .icon { width: 14px; height: 14px; }
  .bubble.has-actions { padding-bottom: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .bubble-actions { display: grid; align-self: flex-start; width: 80%; }
  .bubble-action { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 0; border-top: 1px solid var(--chat-line); background: var(--chat-in); color: var(--chat-action); font: inherit; font-size: 13.2px; text-align: center; box-shadow: 0 1px .5px rgb(var(--phone-shade) / .13); cursor: pointer; }
  .bubble-action:last-child { border-radius: 0 0 7.5px 7.5px; }
  .bubble-action:disabled { color: var(--chat-muted); cursor: default; }
  .bubble-action .icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }

  .chat-list, .chat-form { align-self: flex-start; width: 80%; }
  .chat-list > summary, .chat-form > summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-top: 1px solid var(--chat-line); border-radius: 0 0 7.5px 7.5px; background: var(--chat-in); color: var(--chat-action); font-weight: 400; white-space: normal; list-style: none; cursor: pointer; box-shadow: 0 1px .5px rgb(var(--phone-shade) / .13); }
  .chat-list > summary::-webkit-details-marker, .chat-form > summary::-webkit-details-marker { display: none; }
  .chat-list > summary .icon, .chat-form > summary .icon { width: 16px; height: 16px; }
  .chat-list:not(.is-live) > summary, .chat-form:not(.is-live) > summary { color: var(--chat-muted); cursor: default; pointer-events: none; }
  /* Open, the summary is the dim behind the sheet, which covers the screen rather than the bubble it came from. */
  .chat-list[open] > summary, .chat-form[open] > summary { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgb(0 0 0 / .35); color: transparent; box-shadow: none; }
  .chat-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 80%; overflow-y: auto; padding: 6px 0 26px; border-radius: 12px 12px 0 0; background: var(--chat-sheet); color: var(--chat-ink); white-space: normal; }
  .chat-sheet-head { margin: 0; padding: 8px 14px 10px; border-bottom: .5px solid var(--chat-line); font-size: 15px; font-weight: 600; text-align: center; }
  .chat-sheet-rows { margin: 0; padding: 0 0 0 16px; list-style: none; }
  .chat-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px 9px 0; border: 0; border-bottom: .5px solid var(--chat-line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .chat-row-text { flex: 1; display: grid; gap: 1px; }
  .chat-row-title { font-size: 13.4px; }
  .chat-row-description { font-size: 12.5px; line-height: 1.3; color: var(--chat-muted); }
  .chat-row::after { content: ""; flex: none; width: 19px; height: 19px; border: 1.5px solid var(--chat-muted); border-radius: 50%; box-sizing: border-box; }
  .chat-row:hover::after, .chat-row:focus-visible::after { border: 5.5px solid var(--chat-accent); }
  .chat-row.is-page .chat-row-title { color: var(--chat-action); font-weight: 500; }

  .bubble-media { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 10px 12px; background: rgb(var(--phone-shade) / .08); font-size: 12.5px; }
  .bubble-media .icon { flex: none; width: 20px; height: 20px; }
  .bubble-media-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .bubble-answers { display: block; margin-top: 6px; padding-top: 6px; border-top: .5px solid rgb(var(--phone-shade) / .18); font-size: 12.5px; line-height: 1.5; opacity: .85; }
  .bubble-answer { display: block; }
  .form-sheet { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; overflow-y: auto; border-radius: 12px 12px 0 0; background: var(--chat-sheet); color: var(--chat-ink); white-space: normal; }
  .form-head { margin: 0; padding: 12px 14px; border-bottom: .5px solid var(--chat-line); font-size: 15px; font-weight: 600; text-align: center; }
  .form-lock { display: block; font-size: 11px; font-weight: 400; color: var(--chat-muted); }
  .form-body { flex: 1; display: grid; align-content: start; gap: 14px; padding: 14px 16px; }
  .form-field { display: grid; gap: 5px; }
  .form-label { font-size: 12.5px; color: var(--chat-muted); }
  .form-required { color: var(--chat-refused); }
  .form-input { min-height: 34px; padding: 7px 10px; border: .5px solid var(--chat-line); border-radius: 6px; background: var(--chat-field); color: var(--chat-ink); font: inherit; font-size: 14.5px; }
  .form-choices { display: grid; gap: 8px; }
  .form-choice { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
  .form-choice input { accent-color: var(--chat-accent); width: 17px; height: 17px; }
  .form-submit { margin: 0 16px; padding: 11px; border: 0; border-radius: 22px; background: var(--chat-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .form-note { margin: 8px 16px 26px; font-size: 11px; color: var(--chat-muted); text-align: center; }

  .chat-composer { display: flex; align-items: center; gap: 8px; padding: 6px 8px 26px; background: var(--chat-bar); }
  .chat-write { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; border-radius: 21px; background: var(--chat-field); }
  .chat-write .icon { flex: none; width: 20px; height: 20px; color: var(--chat-muted); opacity: .8; }
  .chat-field { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; color: var(--chat-ink); font: inherit; font-size: 13.2px; }
  .chat-field:focus { outline: none; }
  .chat-field::placeholder { color: var(--chat-muted); }
  .chat-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--chat-accent); color: #fff; cursor: pointer; }
  .chat-send .icon { width: 21px; height: 21px; }
  .bubble-action:focus-visible, .chat-send:focus-visible, .chat-row:focus-visible, .chat-list > summary:focus-visible, .chat-form > summary:focus-visible, .form-submit:focus-visible { outline: 2px solid var(--chat-action); outline-offset: -2px; }
}

@layer components {
  .menu { position: relative; }
  .menu > summary { list-style: none; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { background: var(--surface-2); border-color: var(--ink-3); }
  .menu-items { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; display: grid; min-width: 20rem; max-width: calc(100vw - 3.2rem); padding: .4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); }
  .menu-items .button_to { display: block; }
  .menu-item { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem .9rem; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; font-size: 1.4rem; text-align: left; text-decoration: none; cursor: pointer; }
  .menu-item .icon { width: 1.5rem; height: 1.5rem; }
  .menu-item .icon:not(.kind-icon) { color: var(--ink-3); }
  .menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
  .menu-item.is-danger, .menu-item.is-danger .icon { color: var(--error); }

  .hovercard { display: inline-flex; }
  .hovercard-body { position: fixed; z-index: 40; display: none; width: 32rem; padding: 1.2rem 1.4rem; border-radius: var(--r-card); background: var(--inverse); color: var(--on-inverse); font-size: 1.3rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; box-shadow: var(--shadow-float); }
  .hovercard-body.is-open { display: block; }
  .hovercard-head { display: block; font-weight: 600; }
  .hovercard-list { display: grid; gap: .6rem; margin: .6rem 0 0; padding-left: 1.8rem; }
  .hovercard-list:first-child { margin-top: 0; }
  .hovercard-list li::marker { color: var(--ink-3); }
  .hovercard-foot { display: block; margin-top: .8rem; opacity: .7; }
  .hovercard-when { display: block; opacity: .7; }
  .theme-toggle > span { display: contents; }
  button.nav-link, button.mk-nav-link { border: 0; background: none; font: inherit; font-weight: 550; line-height: inherit; cursor: pointer; }
  .theme-toggle.is-bare { display: inline-flex; align-items: center; }
  .theme-toggle.is-bare .theme-toggle-name { display: none; }
  .theme-toggle.is-bare .icon { display: block; width: 1.8rem; height: 1.8rem; }
  .toggle { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.2rem; padding: .3rem .6rem .3rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: 1.35rem; font-weight: 550; cursor: pointer; }
  .toggle:hover { background: var(--surface-2); }
  .toggle[aria-pressed="true"] { background: var(--bg); border-color: var(--ink-3); box-shadow: inset 0 1px 2px rgb(var(--shade) / .1); }
  .toggle.is-icon { width: 3.2rem; justify-content: center; padding: 0; }
}

@layer modules {
  .deploys-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem; }
  .deploys-bar .display, .deploys-bar .sub { margin: 0; }
  .deploys-bar .sub { margin-top: .6rem; }

  .deploy-flow { display: flex; align-items: center; gap: 1rem; font-weight: 600; white-space: nowrap; }
  .deploy-flow a { color: var(--ink); text-decoration: none; }
  .deploy-flow a:hover { text-decoration: underline; }
  .deploy-where { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; white-space: nowrap; }
  .deploy-where::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; }
  .deploy-where.is-live { color: var(--ok-ink); }
  .deploy-where.is-live::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
  .deploy-where.is-staging::before { background: var(--router); }
  .deploy-version { font-family: var(--mono); font-size: 1.3rem; }
  .deploy-version.is-pickable { display: inline-flex; align-items: center; gap: .6rem; padding: .2rem .6rem; border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer; }
  .deploy-version.is-pickable:hover { border-color: var(--line-strong); }
  .deploy-version .icon { width: 1.3rem; height: 1.3rem; color: var(--ink-3); }
  .deploy-versions-menu .menu-items { left: 0; right: auto; min-width: 26rem; }
  .deploy-versions-menu .menu-item { white-space: nowrap; }
  /* The table scrolls sideways when it must, which would cut an open menu off. */
  .table-scroll:has(.deploy-versions-menu[open]) { overflow: visible; }
  .deploy-when { color: var(--ink-2); white-space: nowrap; }
  .deploy-when span { color: var(--ink-3); }
  .deploy-when span::before { content: " · "; }
  .deploy-speed { display: inline-flex; align-items: center; gap: 1rem; color: var(--ink-2); font-size: 1.3rem; }
  .deploy-speed.is-quiet { color: var(--ink-3); }
  .deploy-speed-now { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .spark { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 1px; width: 8.4rem; height: 2.2rem; color: var(--router); }
  .spark-bar { height: var(--height); min-height: 1px; background: currentColor; }
  .spark-bar.is-quiet { background: var(--line); }
  .deploy-state { display: inline-flex; align-items: center; gap: .6rem; font-weight: 550; white-space: nowrap; }
  .deploy-state .icon { width: 1.6rem; height: 1.6rem; }
  .deploy-state.is-ok { color: var(--ok-ink); }
  .deploy-state.is-warned { color: var(--warning); }
  .deploy-state.is-waiting { color: var(--ink-3); }
  .deploy-warning { display: inline-flex; align-items: center; gap: .4rem; margin-right: .6rem; color: var(--warning); font-weight: 550; text-decoration: none; }
  .deploy-tools .deploy-warning { border-color: transparent; }
  .deploy-tools .deploy-warning:hover { border-color: var(--warning); color: var(--warning); }
  .deploy-tools { display: flex; align-items: center; gap: .2rem; justify-content: flex-end; }
  .deploy-tools .button_to { display: block; }
  .deploy-more .menu-items { min-width: 22rem; }
  .table-scroll:has(.deploy-more[open]) { overflow: visible; }
  .deploy-tools > a.deploy-warning { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--r-control); color: var(--ink-2); font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
  .deploy-tools > a.deploy-warning:hover { border-color: var(--line-strong); color: var(--ink); }
  .deploy-tools > .icon-action .icon { width: 1.7rem; height: 1.7rem; }
  .deploy-tools a[target] .icon { color: var(--whatsapp-brand); }
  .deploy-connect { padding: .5rem .9rem; color: var(--link); font-size: 1.25rem; white-space: nowrap; }
  .deploy-tool-none { padding: .5rem .9rem; color: var(--ink-3); font-size: 1.25rem; white-space: nowrap; }
  .deploy-number { color: var(--ink); font-family: var(--mono); font-size: 1.3rem; }
  .deploys-none { padding: 4rem; border: 1px dashed var(--line-strong); border-radius: var(--r-section); color: var(--ink-2); text-align: center; }

  .gates { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
  .gate { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; }
  .gate p { margin: 0; }
  .gate .hint { margin-top: .2rem; }
  .gate-title { font-weight: 600; }
  .gate-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.25rem; font-weight: 700; color: var(--on-accent); }
  .gate-mark::before { content: ""; width: 100%; height: 100%; background: currentColor; mask: center / contain no-repeat; }
  .gate.is-passed .gate-mark { color: var(--ok); }
  .gate.is-passed .gate-mark::before { mask-image: url("/assets/icons/carbon-checkmark-filled-f135ea7e.svg"); }
  .gate.is-warned .gate-mark { color: var(--warning); }
  .gate.is-warned .gate-mark::before { mask-image: url("/assets/icons/carbon-warning-filled-0b8716c7.svg"); }
  .gate.is-blocked .gate-mark { color: var(--error); }
  .gate.is-blocked .gate-mark::before { mask-image: url("/assets/icons/carbon-error-filled-a2efb46b.svg"); }
  .gate.is-blocked .gate-title { color: var(--error); }
  .changes { display: grid; gap: .8rem; margin: 0; }
  .change { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
  .change dt { font-size: 1.3rem; font-weight: 600; }
  .change dd { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: 0; }
  .change.is-added dt { color: var(--ok-ink); }
  .change.is-removed dt { color: var(--error); }
  .change.is-removed code { text-decoration: line-through; }
  .change-screen { display: inline-flex; align-items: baseline; gap: .4rem; }
  .change-screen .hint { margin: 0; font-size: 1.15rem; }
  .version-label.is-deployed { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
  .pill.is-env { display: inline-flex; align-items: center; gap: .5rem; border-color: var(--line); background: var(--surface-2); color: var(--ink); font-weight: 600; }
  .pill.is-env::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--line-strong); }
  .pill.is-env.is-staging::before { background: var(--router); }
  .pill.is-env.is-live::before { background: var(--ok); }
  .version-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--live); }
  .version-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .version-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; padding: 1rem 1.2rem 1rem 1.4rem; }
  .version-row + .version-row { border-top: 1px solid var(--line); }
  .version-label { justify-self: start; padding: .2rem .8rem; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 1.3rem; font-weight: 600; }
  .version-row.is-latest .version-label { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); }
  .version-note { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .version-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: .2rem 0 0; font-size: 1.25rem; color: var(--ink-3); }
  .version-actions { display: flex; gap: .5rem; }
  .version-actions .button_to { display: inline; }
  .deploy-hint { display: grid; gap: .4rem; }
  .deploy-hint .hint { margin: 0; }
  .code-snippet { margin: 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); font-family: var(--mono); font-size: 1.25rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
  .code-snippet code { padding: 0; border: 0; background: none; font-size: inherit; user-select: all; }
  .version-scenarios { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
  .version-scenarios li { padding: .1rem .8rem; border-radius: 999px; font-size: 1.2rem; }
  .version-scenarios .is-passed { background: var(--ok-soft); color: var(--ok-ink); }
  .version-scenarios .is-failed { background: var(--error-soft); color: var(--error); }
  .version-source .code.is-compact { height: 36rem; }
  .panel-head.is-version { border-top-color: var(--ink); }
  @media (max-width: 879px) { .version-row { grid-template-columns: auto minmax(0, 1fr); } .version-actions { grid-column: 1 / -1; } .change { grid-template-columns: minmax(0, 1fr); } }

  .deploy { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 1.6rem 3.2rem; align-items: start; }
  .deploy-main { display: grid; gap: 1.6rem; min-width: 0; }
  @media (max-width: 760px) { .deploy { grid-template-columns: minmax(0, 1fr); } .deploy-rail { position: static; } }

  .deploy-rail { position: sticky; top: 0; margin: 0; padding: 0; list-style: none; }
  .deploy-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; min-height: 6.4rem; padding: 0 0 1.6rem 1.2rem; border-left: 2px solid var(--line-strong); }
  .deploy-stage:last-child { min-height: 0; padding-bottom: 0; }
  .deploy-stage.is-done, .deploy-stage.is-current { border-left-color: var(--focus); }
  .deploy-stage.is-blocked { border-left-color: var(--error); }
  .deploy-stage-mark { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-top: .1rem; border: 1.5px solid var(--ink-3); border-radius: 50%; color: var(--focus); }
  .deploy-stage-mark .icon { width: 1.8rem; height: 1.8rem; }
  .deploy-stage.is-done .deploy-stage-mark, .deploy-stage.is-blocked .deploy-stage-mark { border: 0; }
  .deploy-stage.is-done .deploy-stage-mark { color: var(--ok); }
  .deploy-stage.is-current .deploy-stage-mark { border-color: var(--focus); background: linear-gradient(90deg, var(--focus) 50%, transparent 50%); }
  .deploy-stage.is-blocked .deploy-stage-mark { background: none; color: var(--error); }
  .deploy-stage-text { display: grid; align-content: start; gap: .2rem; }
  .deploy-stage-name { font-size: 1.4rem; line-height: 2rem; color: var(--ink-2); }
  .deploy-stage.is-done .deploy-stage-name { color: var(--ink); }
  .deploy-stage.is-current .deploy-stage-name { color: var(--ink); font-weight: 600; }
  .deploy-stage-note { font-family: var(--mono); font-size: 1.2rem; color: var(--ink-3); overflow-wrap: anywhere; }
  .deploy-stage-note.is-error, .deploy-stage-note.is-warning { display: flex; align-items: baseline; gap: .5rem; font-family: inherit; }
  .deploy-stage-note.is-error::before, .deploy-stage-note.is-warning::before { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 1rem; font-weight: 700; line-height: 1.4rem; text-align: center; }
  .deploy-stage-note.is-error { color: var(--error); }
  .deploy-stage-note.is-error::before { content: "!"; background: var(--error); color: var(--on-danger); }
  .deploy-stage-note.is-warning { color: var(--warning); }
  .deploy-stage-note.is-warning::before { content: "!"; background: var(--warning); color: var(--warning-on, #161616); }
  .deploy-stage.is-attention { border-left-color: var(--warning); }
  .deploy-stage.is-attention .deploy-stage-mark { border: 0; color: var(--warning); }
  .deploy-stage.is-attention .deploy-stage-name { color: var(--ink); }

  .deploy-focus { --accent: var(--focus); position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2rem 2.4rem; padding: 1.8rem 1.8rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .deploy-focus::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); pointer-events: none; }
  .deploy-focus-text { display: grid; gap: .6rem; }
  .deploy-focus-text .hint { margin: 0; }
  .deploy-focus.is-live { --accent: var(--ok); background: var(--ok-soft); }
  .deploy-focus-title { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: 1.7rem; font-weight: 650; letter-spacing: -.01em; }
  .deploy-focus-title .icon { width: 2rem; height: 2rem; color: var(--focus); }
  .deploy-focus.is-live .deploy-focus-title .icon { color: var(--ok-ink); }
  .deploy-focus-body { margin: 0; color: var(--ink-2); font-size: 1.4rem; line-height: 1.5; }
  .deploy-focus > .deploy-action, .deploy-focus > .button_to { justify-self: start; }
  .deploy-action .button_to, .deploy .button_to { display: inline; }
  .deploy-check { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.35rem; color: var(--ink-2); }
  .deploy-check .icon { width: 1.7rem; height: 1.7rem; }
  .deploy-check.is-done { color: var(--ok-ink); }
  .deploy-check.is-done .deploy-check-mark { color: var(--ok); }
  .deploy-check.is-todo .deploy-check-mark { color: var(--warning); }
  .deploy-second { margin: 0; }

  .deploy-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: .8rem; }
  .deploy-place { position: relative; display: grid; align-content: start; gap: .8rem; padding: 1.2rem 1.4rem 1.3rem 1.8rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .deploy-place::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--r-card) 0 0 var(--r-card); background: var(--router); }
  .deploy-place.is-live::before { background: var(--ok); }
  .deploy-place.is-empty { border-style: dashed; }
  .deploy-place.is-empty::before { opacity: .35; }
  .deploy-ready { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: 1.35rem; }
  .deploy-ready.is-ok { display: flex; align-items: center; gap: .5rem; color: var(--ok-ink); }
  .deploy-ready-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; color: var(--ink-2); }
  .deploy-ready-item .icon { width: 1.6rem; height: 1.6rem; flex: none; align-self: center; color: var(--warning); }
  .deploy-ready.is-ok .icon { width: 1.6rem; height: 1.6rem; color: var(--ok); }
  .deploy-ready-item.is-never_dialled .icon { color: var(--ink-3); }
  .deploy-ready.is-off { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); }
  .deploy-ready.is-off .icon, .deploy-ready-item.is-off .icon { width: 1.6rem; height: 1.6rem; color: var(--warning); }
  .deploy-place-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
  .deploy-place-name { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.45rem; font-weight: 650; }
  .deploy-place-name .icon { width: 1.7rem; height: 1.7rem; color: var(--ink-3); }
  .deploy-place-head .hint { margin: 0; }
  .deploy-place-url { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0; font-size: 1.25rem; }
  .deploy-place-url code { overflow-wrap: anywhere; user-select: all; }
  .deploy-boxes { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
  .deploy-box { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: baseline; gap: .4rem .8rem; font-size: 1.25rem; }
  .deploy-box-name { display: inline-flex; align-items: center; gap: .4rem; font-weight: 550; white-space: nowrap; }
  .deploy-box-name .icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--ink-3); }
  .deploy-box-urls { display: grid; gap: .2rem; min-width: 0; }
  .deploy-box-url { overflow-wrap: anywhere; user-select: all; }
  .deploy-box-served { color: var(--ink-3); white-space: nowrap; }
  .deploy-box-served.is-warning { color: var(--warning); }
  .deploy-box-served a { color: var(--link); }
  .deploy-row-boxes { display: inline-flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0 0 0 1rem; vertical-align: middle; padding: 0; list-style: none; font-size: 1.2rem; }
  .deploy-row-box a { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
  .deploy-row-box a:hover { color: var(--ink); text-decoration: underline; }
  .deploy-row-box a::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); }
  .deploy-row-box.is-waiting a::before { background: var(--warning); }
  @media (max-width: 40rem) { .deploy-box { grid-template-columns: minmax(0, 1fr); } }
  .deploy-place-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
  .place-tool { display: inline-flex; align-items: center; gap: .5rem; height: 3.2rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--ink-2); font-size: 1.3rem; font-weight: 550; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .11s ease, color .11s ease; }
  .place-tool:hover { border-color: var(--line-strong); color: var(--ink); }
  .place-tool.is-warning { border-color: var(--warning-line); background: var(--warning-surface); color: var(--warning); }
  .place-tool.is-back { margin-left: .8rem; }
  .place-tool.is-danger { border-color: var(--error-line); color: var(--error); }
  .place-tool.is-danger:hover { border-color: var(--error); background: var(--error-soft); }
  .deploy-place-links .button_to { display: inline-flex; }
  .version-menu > summary .icon { display: block; width: 1.6rem; height: 1.6rem; }
  .deploy-versions { margin-top: 1.6rem; }
  .place-tool.is-warning::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--warning); }
  .place-tool .icon { display: block; flex: none; width: 1.6rem; height: 1.6rem; }
  .deploy-place-links .button_to { display: inline; }

  .deploy-advanced > summary { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.35rem; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
  .deploy-advanced > summary::-webkit-details-marker { display: none; }
  .deploy-advanced > summary .icon { width: 1.5rem; height: 1.5rem; transition: transform .12s ease; }
  .deploy-advanced[open] > summary .icon { transform: rotate(90deg); }
  .deploy-advanced-body { margin-top: 1.2rem; display: grid; gap: 1.2rem; }
  .deploy-first-hint { margin: 0; }
  @media (max-width: 879px) { .deploy-focus { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 600px) {
    .deploys thead { display: none; }
    .deploys tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1.2rem; padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--line); }
    .deploys.data-table td { display: block; height: auto; padding: 0; border: 0; }
    .deploys td:nth-child(2) { text-align: right; }
    .deploys td:nth-child(2) .deploy-row-boxes { justify-content: flex-end; }
    .deploys td:nth-child(5) { display: none; }
    .deploys td:nth-child(6) { grid-column: 1 / -1; margin-top: .6rem; }
    .deploy-tools { justify-content: flex-start; }
  }
}

@layer modules {
  .segmented { display: inline-flex; padding: .2rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); }
  .segment { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1.1rem; border-radius: var(--r-control); color: var(--ink-2); font-size: 1.3rem; font-weight: 550; text-decoration: none; }
  .segment-dot { width: .8rem; height: .8rem; border-radius: 999px; background: currentColor; opacity: .5; }
  .segment.is-staging { --segment-tone: var(--router); }
  .segment.is-live { --segment-tone: var(--danger); }
  .segment.is-active { background: var(--surface); color: var(--segment-tone, var(--ink)); box-shadow: 0 1px 2px rgb(var(--shade) / .12); }
  .segment.is-active .segment-dot { opacity: 1; background: var(--segment-tone); }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin: 0 0 1.6rem; }
  .stat { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .stat dt { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; color: var(--ink-3); }
  .stat dd { margin: .2rem 0 0; font-size: 2.2rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .stats.is-strip { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin-bottom: 1.2rem; }
  .stats.is-strip .stat { padding: .7rem 1.1rem; }
  .stats.is-strip .stat dd { font-size: 1.8rem; }
  .stat.is-bad { border-color: var(--error-line); background: var(--error-surface); }
  .stat.is-bad dd { color: var(--error); }
  .stat dd.stat-fix { margin: .6rem 0 0; font-size: 1.3rem; font-weight: 500; letter-spacing: 0; }
  .stat dd.stat-fix a { color: inherit; }
  .endpoint-screen { display: inline-block; margin-right: .8rem; }
  .traffic-section { margin-top: 1.6rem; }
  .traffic-section + .traffic-section { margin-top: 4rem; }
  .traffic-section > .hint { margin-top: 1rem; }
  .traffic-heading { margin: 0 0 1.2rem; font-size: 1.6rem; font-weight: 600; }
  .pane-bar .segmented + .segmented { margin-left: auto; }
  .funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
  .funnel-step { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) 15rem; align-items: center; gap: 1rem; }
  .funnel-label { min-width: 0; display: grid; gap: .1rem; }
  .funnel-name { font-size: 1.35rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .funnel-id { font-family: var(--mono); font-size: 1.1rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .funnel-ends { display: grid; gap: .2rem; }
  .funnel-done { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.25rem; color: var(--ok-ink); }
  .funnel-done .icon { flex: none; width: 1.2rem; height: 1.2rem; }
  .traffic-counted { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(36rem, 100%), 1fr)); gap: 0 3.2rem; }
  .traffic-counted-empty .hint { max-width: 64rem; }
  .traffic-counted-head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
  .traffic-heading .icon { width: 1.6rem; height: 1.6rem; margin-right: .6rem; vertical-align: -.2rem; }
  .funnel.is-counted .funnel-step { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) 4.5rem; }
  .funnel.is-counted .funnel-drop { text-align: right; }
  .funnel.is-counted .is-rest { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-2); }
  .funnel.is-counted .is-rest .funnel-name { font-weight: 400; }
  .session-labels { white-space: normal; }
  .session-labels .pill, .trail-about .pill { margin: 0 .4rem .2rem 0; }
  .trail-about { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; margin: 0 0 1.2rem; }
  .trail-about .icon, .trail-label .icon { width: 1.4rem; height: 1.4rem; }
  .trace-ref { color: inherit; text-decoration: none; }
  .trace-ref code { font-family: var(--mono); }
  .trace-ref .icon { width: 1.2rem; height: 1.2rem; margin-left: .2rem; color: var(--ink-3); transition: transform .12s, color .12s; }
  .trace-ref:hover, .trace-ref:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); }
  .trace-ref:hover code { text-decoration: underline; }
  .trace-ref:hover .icon, .trace-ref:focus-visible .icon { color: var(--primary); transform: translateX(2px); }
  .trail-label { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1rem; color: var(--ink-2); font-size: 1.2rem; }
  .funnel-bar { height: 2.2rem; border-radius: var(--r-control); background: var(--surface-2); overflow: hidden; }
  .funnel-bar span { display: flex; align-items: center; height: 100%; min-width: fit-content; padding: 0 .8rem; border-radius: var(--r-control); background: var(--viz-1); color: var(--on-accent); font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .funnel-drop { font-size: 1.25rem; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
  .funnel-drop.is-high { color: var(--error); font-weight: 650; }
  .funnel-step.is-worst .funnel-bar span { background: var(--warning); }
  .funnel-step.is-worst .funnel-name { color: var(--error); }
  .sessions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .sessions > li + li { border-top: 1px solid var(--line); }
  .traffic-session > summary { list-style: none; cursor: pointer; }
  .traffic-session > summary::-webkit-details-marker { display: none; }
  .traffic-session-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding: .8rem 1.2rem; }
  .traffic-session[open] > .traffic-session-row { background: var(--surface-2); }
  .session-phone { min-width: 12rem; font-family: var(--mono); font-size: 1.25rem; }
  .session-keys { display: inline-flex; gap: .3rem; vertical-align: middle; }
  .scenario-key.is-more { color: var(--ink-3); border-style: dashed; }
  .trail { list-style: none; margin: 0; padding: .4rem 0 0; font-size: 1.3rem; --bar: var(--focus); }
  .trail-step { padding: .6rem 0; border-top: 1px solid var(--line); }
  .trail-dropped { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-top: 1px solid var(--line); background: var(--warning-soft); color: var(--warning); font-size: 1.3rem; }
  .trail-dropped .icon { width: 1.6rem; height: 1.6rem; }
  .session-continued { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; padding: .1rem .6rem; border: 1px solid var(--router-line); border-radius: 999px; background: var(--router-soft); color: var(--router-ink); font-size: 1.2rem; font-weight: 550; white-space: nowrap; vertical-align: middle; }
  .session-continued .icon { width: 1.3rem; height: 1.3rem; }
  .trail-step:first-child { border-top: 0; }
  .trail-row { display: grid; grid-template-columns: 6.6rem 7rem 3.4rem minmax(0, 1fr) 9rem minmax(14rem, 26rem); align-items: center; gap: 0 1rem; min-height: 2.8rem; }
  .trail-row.is-call { min-height: 2.6rem; }
  .trail-row.is-call .trail-rail { grid-column: 3; }
  .trail-row.is-call .trail-what { grid-column: 4; }
  .trail-row.is-call .trail-status { grid-column: 5; }
  .trail-row.is-call .trail-bar { grid-column: 6; }
  .trail-status { min-width: 0; }
  .trail-status .call-status { display: block; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trail-when { font-family: var(--mono); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
  .trail-gap { font-family: var(--mono); font-size: 1.1rem; color: var(--ink-3); white-space: nowrap; }
  .trail-what { display: flex; align-items: center; gap: .8rem; min-width: 0; }
  .trail-what .call-url { min-width: 0; padding: 0; border: 0; background: none; color: var(--ink-2); }
  .trail .call-status { border-radius: 0; }
  .trail .call-status.is-info { background: var(--router-soft); color: var(--router-ink); }
  .trail-method { flex: none; font-family: var(--mono); font-size: 1.1rem; font-weight: 600; color: var(--ink-3); }
  .trail-method.is-get { color: var(--router); }
  .trail-method.is-post { color: var(--input); }
  .trail-method.is-put, .trail-method.is-patch { color: var(--message); }
  .trail-method.is-delete { color: var(--form); }
  .trail-rail { align-self: stretch; justify-self: center; width: 2px; margin: -.3rem 0; background: var(--line-strong); }
  .trail-bar { display: grid; grid-template-columns: minmax(0, 1fr) 6.4rem; align-items: center; gap: .8rem; }
  .trail-track { position: relative; height: .8rem; background: var(--line); }
  .trail-track i { position: absolute; top: 0; left: var(--x); width: var(--w); max-width: calc(100% - var(--x)); min-width: .4rem; height: 100%; background: var(--bar); }
  .trail-bar.is-step i + i { box-shadow: -2px 0 0 var(--surface-2); }
  .trail-bar.is-step i.is-engine { background: repeating-linear-gradient(135deg, var(--bar) 0 2px, transparent 2px 5px); }
  .trail-bar em { font-family: var(--mono); font-size: 1.1rem; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; text-align: right; }
  .trail-bar.is-warning { --bar: var(--warning); }
  .trail-bar.is-error, .trail-bar.is-failed { --bar: var(--error); }
  .trail-step.is-failed .trail-bar.is-step { --bar: var(--error); }
  @container panel (max-width: 34rem) { .funnel-step { grid-template-columns: minmax(0, 1fr) auto; } .funnel-bar { grid-column: 1 / -1; order: 3; } }

  .traffic-page { padding: 0 0 4.8rem; }
  .traffic-page .analytics-bar { margin-bottom: 2.4rem; }
  .traffic-page .flash.is-inline { margin-bottom: 1.2rem; }
  .traffic-page .viz-plot { height: 14rem; }
  .traffic-page .viz + details, .traffic-page .traffic-section:has(.viz) { margin-top: 0; }
  .traffic-page .stats { margin-bottom: 3.2rem; }
  .traffic-crumbs { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font-size: 1.3rem; }
  .traffic-crumbs span { color: var(--ink-3); }
  .traffic-back { color: var(--ink-2); text-decoration: none; }
  .traffic-back:hover { color: var(--ink); text-decoration: underline; }
  .traffic-page .tabs.traffic-sections { max-width: none; margin: 3.2rem 0 2rem; }
  .tab-count { margin-left: .2rem; padding: 0 .6rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-family: var(--mono); font-size: 1.1rem; font-weight: 500; }
  .tab.is-active .tab-count { background: var(--inverse); color: var(--on-inverse); }
  .traffic-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
  .filter-menu .traffic-chip { justify-content: space-between; }
  .filter-menu .traffic-chip-count { color: var(--ink-3); }
  .traffic-filters .segmented { margin-left: auto; }
  .traffic-clear { color: var(--ink-3); }
  .traffic-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
  .traffic-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 1.25rem; text-decoration: none; }
  .traffic-chip:hover { border-color: var(--line-strong, var(--ink-3)); color: var(--ink); }
  .traffic-chip.is-active { border-color: var(--ink); background: var(--inverse); color: var(--on-inverse); font-weight: 600; }
  .traffic-chip-count { font-family: var(--mono); font-size: 1.15rem; }
  .traffic-find { display: flex; align-items: center; gap: .8rem; }
  .traffic-find .label { margin: 0; }
  .traffic-narrowed { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; color: var(--ink-2); font-size: 1.3rem; }
  .traffic-count { margin: 0 0 1rem; }
  .session-screen { font-family: var(--mono); font-size: 1.15rem; color: var(--ink-2); }
  .session-screen:hover { color: var(--ink); }
  .session-time { font-family: var(--mono); font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
  .traffic-zone { display: inline-flex; align-items: center; gap: .8rem; padding-left: .8rem; border-left: 1px solid var(--line); white-space: nowrap; }
  .traffic-zone .label, .traffic-zone .hint { margin: 0; white-space: nowrap; }
  .traffic-zone .field--small { max-width: 24rem; }
  .sessions-table th.is-expander, .sessions-table td.is-expander { width: 3.2rem; padding-right: 0; }
  .expander { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); cursor: pointer; }
  .expander:hover { background: var(--surface-hover); color: var(--ink); }
  .mirror { display: inline-grid; transform: scaleX(-1); }
  .expander .mirror { transition: transform .12s ease; }
  .expander .icon { width: 1.6rem; height: 1.6rem; }
  .session.is-expanded .expander .mirror { transform: scaleX(-1) rotate(-90deg); }
  .session-expansion > td { padding: 0 1.2rem 1.2rem 4.4rem; background: var(--surface-2); }
  .sessions-table .session-box { white-space: nowrap; }
  .pagination { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: .6rem 1.2rem; border: 1px solid var(--line); border-top: 0; background: var(--surface); }
  .pagination-per { display: flex; align-items: center; gap: .8rem; }
  /* The select is a field, so it would otherwise take the whole row. */
  .pagination-per .field { width: auto; }
  .pagination-per .hint { margin: 0; white-space: nowrap; }
  .pagination-left { display: flex; align-items: center; gap: .8rem; }
  .pagination-range { padding-left: .8rem; border-left: 1px solid var(--line); }
  .pagination-pages { display: flex; align-items: center; gap: .4rem; }
  .pagination-pages .hint { margin-right: .8rem; }
  .pagination .tool.is-disabled { opacity: .35; pointer-events: none; }
  .traffic-alert { display: flex; align-items: flex-start; gap: 1.2rem; }
  .traffic-alert > .icon { flex: none; width: 2rem; height: 2rem; margin-top: .1rem; }
  .traffic-alert .flash-body { display: flex; flex-direction: column; gap: .2rem; flex-grow: 1; }
  .traffic-alert .flash-title { font-weight: 600; }
  .traffic-alert .btn { flex: none; align-self: center; }
  @media (max-width: 600px) { .traffic-alert { flex-wrap: wrap; } .traffic-alert .btn { margin-left: 3.2rem; } }
  .insights-head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1.6rem; flex-wrap: wrap; }
  .insights-head .hint { margin: 0 0 .8rem; }
  .insight-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
  .insight { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; padding: 1.6rem 2rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .insight-count { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
  .insight-count strong { font-size: 2.8rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .insight-count span:not(.pill) { font-size: 1.25rem; color: var(--ink-2); }
  .insight-body { min-width: 0; display: grid; gap: .6rem; align-content: start; }
  .insight-title { margin: 0; font-size: 1.55rem; font-weight: 650; overflow-wrap: anywhere; }
  .insight-screen { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: -.2rem 0 0; font-size: 1.25rem; color: var(--ink-3); }
  .insight-screen code { font-family: var(--mono); font-size: 1.15rem; background: none; border: 0; padding: 0; }
  .insight-screen span { min-width: 0; overflow-wrap: anywhere; }
  .insight-detail { margin: 0; max-width: 72rem; color: var(--ink-2); line-height: 1.55; }
  .insight-fix { display: flex; align-items: flex-start; gap: .6rem; margin: 0; max-width: 72rem; font-weight: 500; }
  .insight-fix .icon { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .15rem; color: var(--ink-3); }
  .insight-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
  .insight-actions:empty { display: none; }
  .insights-assistant { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; }
  .insights-assistant .icon { flex: none; width: 1.5rem; height: 1.5rem; }
  @media (max-width: 600px) {
    .insight { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.4rem 1.6rem; }
    .insight-count { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; }
    .sessions-table .is-keys, .sessions-table .session-steps, .sessions-table .is-calls, .sessions-table .session-calls { display: none; }
    .sessions-table .session-time { display: grid; }
    .sessions-table .session-date { font-size: 1.15rem; color: var(--ink-3); }
    .sessions-table .pill-where { display: none; }
    .session-expansion > td { padding-left: 1.6rem; }
    .trail-row { grid-template-columns: 3.4rem minmax(0, 1fr) auto; row-gap: .4rem; }
    .trail-when { grid-column: 1 / -1; }
    .trail-gap { display: none; }
    .trail-row.is-call .trail-rail { grid-column: 1; grid-row: 1 / 3; }
    .trail-row.is-call .trail-what { grid-column: 2; }
    .trail-row.is-call .trail-status { grid-column: 3; }
    .trail-status:empty { display: none; }
    .trail-bar { grid-column: 1 / -1; }
    .trail-row.is-call .trail-bar { grid-column: 2 / -1; }
    .pagination { flex-wrap: wrap; row-gap: .8rem; }
    .pagination-per > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pagination-per .field { width: auto; }
    .pagination-pages { margin-left: auto; }
    .traffic-find { width: 100%; }
    .traffic-zone { display: none; }
    .traffic-sections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .traffic-sections .tab { flex: none; }
    .traffic-find .field { flex: 1; min-width: 0; }
    .traffic-filters .segmented { display: flex; width: 100%; }
    .traffic-filters .segment { flex: 1; justify-content: center; }
  }

  /* Trace: spans on one time axis, as a tracing tool draws them. */
  .tracing { display: flex; flex-direction: column; gap: 1.6rem; font-size: 1.3rem; }
  .tracing-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; margin-bottom: .8rem; }
  .tracing-top .display { margin: 0; }
  .tracing-search { display: flex; align-items: center; gap: .8rem; width: min(52rem, 100%); padding-left: 1rem; background: var(--field); border-bottom: 1px solid var(--line-strong); color: var(--ink-3); }
  .tracing-search:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
  .tracing-search input[type="search"] { flex: 1; min-width: 0; height: 3.2rem; border: 0; background: transparent; font: 1.3rem var(--mono); color: var(--ink); outline: none; }
  .tracing-search .btn { flex: none; margin: .2rem; }
  .tracing-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; padding: .8rem 1.2rem; background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); font-size: 1.25rem; }
  .tracing-summary b { color: var(--ink); font: 600 1.25rem var(--mono); }
  .tracing-ref span { color: var(--ink-3); } .tracing-ref code { font: 600 1.4rem var(--mono); color: var(--ink); }
  .tracing-ref.is-matched code { box-shadow: inset 0 -2px 0 var(--primary); }
  .tracing-errors { padding: .1rem .8rem; background: var(--error-soft); color: var(--error); font-weight: 600; }
  .tracing-legend { margin-left: auto; display: flex; gap: 1.2rem; }
  .tracing-legend span { display: flex; align-items: center; gap: .5rem; }
  .tracing-legend i { width: 1rem; height: 1rem; }
  .tracing { --span-session: var(--ussd); --span-http: var(--wait); --span-run: var(--workflow); --span-message: var(--message); --span-error: var(--error); }
  .tracing-legend .is-session { background: var(--span-session); } .tracing-legend .is-http { background: var(--span-http); }
  .tracing-legend .is-run { background: var(--span-run); } .tracing-legend .is-message { background: var(--span-message); }

  .tracing-body { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; background: var(--surface); border: 1px solid var(--line); align-items: start; }
  .tracing-fall { min-width: 0; font: 1.2rem/1 var(--mono); overflow-x: auto; }
  .tracing-axis, .tracing-span { display: grid; grid-template-columns: minmax(28rem, 42%) minmax(16rem, 1fr) 8.4rem; align-items: center; height: 2.6rem; border-bottom: 1px solid var(--line); }
  .tracing-axis { background: var(--surface-2); color: var(--ink-3); font: 1.15rem var(--sans); }
  .tracing-axis > span:first-child { padding-left: 1.2rem; } .tracing-axis > span:last-child, .tracing-took { text-align: right; padding-right: 1.2rem; }
  .tracing-track { position: relative; height: 100%; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 25% 100%; }
  .tracing-axis .tracing-track small { position: absolute; left: var(--x); top: .8rem; padding-left: .4rem; }
  .tracing-span { cursor: pointer; }
  .tracing-span:hover { background: var(--surface-hover); }
  .tracing-span[aria-selected="true"] { background: var(--surface-selected); box-shadow: inset 2px 0 0 var(--primary); }
  .tracing-span:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .tracing-name { display: flex; align-items: center; gap: .6rem; padding-left: calc(.6rem + var(--depth) * 1.8rem); white-space: nowrap; overflow: hidden; min-width: 0; }
  .tracing-name b { font-weight: 600; }
  .tracing-name > span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
  .tracing-name em { font-style: normal; color: var(--ink-3); }
  .tracing-span.is-error .tracing-name em, .tracing-span.is-error .tracing-took { color: var(--error); font-weight: 600; }
  .tracing-fold { flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none; color: var(--ink-3); display: grid; place-items: center; }
  .tracing-fold .icon { width: 1.2rem; height: 1.2rem; transition: transform .1s; }
  [aria-expanded="false"] .tracing-fold .icon { transform: rotate(-90deg); }
  .tracing-mark { flex: none; width: .8rem; height: .8rem; background: var(--span); }
  .tracing-span, .tracing-detail-head .tracing-mark { --span: var(--span-session); }
  .is-http { --span: var(--span-http); } .is-run, .is-wait, .is-retry { --span: var(--span-run); }
  .is-callback { --span: var(--span-http); } .is-sms, .is-whatsapp { --span: var(--span-message); } .is-end { --span: var(--ink-3); }
  .tracing-span.is-error, .tracing-mark.is-error { --span: var(--span-error); }
  .is-callback .tracing-mark, .tracing-mark.is-callback { transform: rotate(45deg); }
  .is-end .tracing-mark, .is-retry .tracing-mark { background: none; box-shadow: inset 0 0 0 1px var(--span); }
  .tracing-track i { position: absolute; top: .9rem; height: .8rem; left: var(--x); width: max(var(--w), 3px); background: var(--span); }
  .tracing-span[data-depth="0"] .tracing-track i { top: .8rem; height: 1rem; opacity: .85; }
  .tracing-track i.is-instant { width: 2px; top: .6rem; height: 1.4rem; }
  .is-callback .tracing-track i.is-instant { width: .9rem; height: .9rem; top: .85rem; margin-left: -.45rem; transform: rotate(45deg); }
  .is-retry .tracing-track i { background: none; border: 1px dashed var(--span); }
  .tracing-took { color: var(--ink-2); }

  .tracing-detail { border-left: 1px solid var(--line); font-size: 1.25rem; min-width: 0; }
  .tracing-detail-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
  .tracing-detail-head b { font: 600 1.25rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
  .tracing-detail dl { margin: 0; padding: .4rem 1.4rem 1.2rem; display: grid; grid-template-columns: 10rem minmax(0, 1fr); font: 1.2rem var(--mono); }
  .tracing-detail dt, .tracing-detail dd { margin: 0; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .tracing-detail dt { color: var(--ink-3); } .tracing-detail dd { overflow-wrap: anywhere; }

  .tracing-note { margin: 0; color: var(--ink-2); }
  .tracing-candidates { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); font-size: 1.3rem; }
  .tracing-candidates a { display: grid; grid-template-columns: 16rem minmax(0, 1fr) auto; gap: 1.2rem; padding: .7rem 1.2rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .tracing-candidates a:hover { background: var(--surface-hover); }
  .tracing-candidates code { font-family: var(--mono); color: var(--ink-2); }

  @media (max-width: 900px) {
    .tracing-body { grid-template-columns: minmax(0, 1fr); }
    .tracing-detail { border-left: 0; border-top: 1px solid var(--line); }
    .tracing-legend { margin-left: 0; }
  }
}

@layer modules {
  .sends-back { margin: 0 0 .8rem; font-size: 1.35rem; }
  .sends-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; }
  .sends-head .display { margin: 0; }
  .sends-head + .flash.is-inline { margin: 2rem 0 0; }
  .sends-head .sub { margin: .6rem 0 0; }
  .sends-standing { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; margin: 1.2rem 0 0; font-size: 1.35rem; color: var(--ink-2); }
  .sends-standing strong { color: var(--ink); font-weight: 600; }
  .sends-table { margin-top: 2.4rem; }
  .messaging-tabs { max-width: none; margin-top: 2rem; }
  .messaging-tabs + .pane-empty { margin-top: 1rem; }
  .place-name { display: flex; align-items: center; gap: 1rem; }
  .messaging-count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 1.15rem; font-weight: 600; }
  .lang { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .4rem .4rem 0; padding: .15rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: 1.2rem; font-weight: 550; }
  .lang b { font-weight: 600; letter-spacing: .02em; }
  .lang.is-approved { border-color: transparent; background: var(--ok-soft); color: var(--ok-ink); }
  .lang.is-pending, .lang.is-in_review, .lang.is-appeal_requested { border-color: transparent; background: var(--router-soft); color: var(--ink); }
  .lang.is-rejected, .lang.is-disabled { border-color: transparent; background: var(--error-soft); color: var(--error); }
  .lang.is-paused { border-color: transparent; background: var(--warning-soft); color: var(--warning); }
  .why { display: block; margin-top: .2rem; font-size: 1.25rem; color: var(--ink-2); }
  .why strong { font-weight: 600; color: var(--ink-2); }
  .numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44rem, 100%), 1fr)); gap: 1.6rem; margin-top: 2.4rem; }
  .number-card { display: grid; gap: 1.4rem; align-content: start; padding: 2rem 2.2rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .number-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .number-card h2 { margin: 0; font-size: 2rem; font-weight: 400; }
  .number-card h2 small { display: block; margin-top: .2rem; font-size: 1.3rem; color: var(--ink-3); }
  .number-card header .scribble { flex: none; width: auto; height: 8rem; margin: -.8rem -.6rem -.4rem 0; }
  .checklist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .checklist li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid var(--line); font-size: 1.4rem; }
  .checklist .tick { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.2rem; font-weight: 700; }
  .checklist .is-done .tick { color: var(--ok); }
  .checklist .tick .icon { width: 100%; height: 100%; }
  .checklist .is-next .tick { background: var(--primary); color: var(--on-accent); }
  .checklist .is-later .tick { border: 1px solid var(--line-strong); color: var(--ink-2); }
  .checklist li > span { display: grid; gap: .2rem; min-width: 0; }
  .checklist small { font-size: 1.25rem; color: var(--ink-3); overflow-wrap: anywhere; }
  .checklist .is-later strong { color: var(--ink-2); font-weight: 500; }
  .checklist a:not(.btn) { font-size: 1.3rem; white-space: nowrap; }
  .number-card a.go { display: inline-flex; align-items: center; gap: .4rem; color: var(--link); font-weight: 500; text-decoration: none; }
  .number-card a.go:hover { text-decoration: underline; text-decoration-color: currentColor; }
  .number-card a.go .icon { width: 1.4rem; height: 1.4rem; transition: translate .12s; }
  .number-card a.go:hover .icon { translate: .2rem 0; }
  .checklist-links { display: grid; gap: .4rem; justify-items: end; }
  .number-foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .number-foot:empty { display: none; }
  .sender-todo { grid-column: 1 / -1; border-top-style: dashed; }
  .sender-todo li:last-child { border-bottom: 0; padding-bottom: 0; }
  .sender-todo a.go { display: inline-flex; align-items: center; gap: .4rem; color: var(--link); font-weight: 500; text-decoration: none; }
  .sender-todo .is-next .tick { background: var(--warning-soft); color: var(--warning); }
  .sender-none { margin: 1.6rem 0 0; }
  .sender-add .menu-items { right: 0; left: auto; min-width: 26rem; }
  .send-from { display: grid; gap: 2rem; }
  .send-from-none { margin: 0; font-size: 1.35rem; color: var(--ink-2); }

  .tpl-back { margin-top: 1.6rem; }
  .tpl-change { max-width: 72rem; margin-top: 1.2rem; }
  .tpl { display: grid; grid-template-columns: minmax(0, 1fr) 36rem; gap: 3.2rem; align-items: start; margin-top: 1.2rem; padding-bottom: 9rem; }
  .tpl-form { display: grid; gap: 2.2rem; min-width: 0; }
  .tpl-field { display: grid; gap: .8rem; min-width: 0; margin: 0; padding: 0; border: 0; }
  .tpl-field > .label { margin: 0; padding: 0; }
  .tpl-short { max-width: 44rem; }
  .tpl-body { min-height: 11rem; font-size: 1.45rem; line-height: 1.6; resize: vertical; }
  .cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1rem; }
  .cat { display: grid; align-content: start; gap: .4rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 1.35rem; cursor: pointer; }
  .cat:has(:checked) { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
  .cat:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .cat .scribble { width: calc(100% + 3.2rem); height: 9rem; margin: -1.4rem -1.6rem .6rem; background: color-mix(in srgb, var(--spot) 8%, transparent); }
  .cat strong { font-size: 1.5rem; }
  .cat span { color: var(--ink-2); }
  .cat small { font-size: 1.2rem; color: var(--ink-3); }
  .seg { display: inline-flex; flex-wrap: wrap; justify-self: start; border: 1px solid var(--line-strong); }
  .seg label { cursor: pointer; }
  .seg span { display: block; padding: .7rem 1.4rem; border-right: 1px solid var(--line); background: var(--surface); font-size: 1.35rem; }
  .seg label:last-child span { border-right: 0; }
  .seg label:has(:checked) span { background: var(--ink); color: var(--surface); font-weight: 600; }
  .seg label:has(:focus-visible) span { outline: 2px solid var(--focus); outline-offset: -2px; }
  .tpl-languages { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
  .tpl-language-tabs { margin: 0; }
  .samples { width: 100%; border-collapse: collapse; font-size: 1.35rem; }
  .samples:has(tbody:empty) { display: none; }
  .samples td { padding: .6rem 1rem .6rem 0; border-top: 1px solid var(--line); }
  .samples td:first-child { width: 30%; font-family: var(--mono); }
  .tpl-buttons { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
  .tpl-button { display: grid; grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
  .checks { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: 1.3rem; }
  .checks li { display: flex; gap: .8rem; align-items: flex-start; }
  .checks .icon { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
  .checks .is-ok .icon { color: var(--ok); }
  .checks .is-bad .icon { color: var(--error); }
  .lang.is-draft { border-style: dashed; color: var(--ink-2); text-decoration: none; }
  .tpl-actions { width: 1%; white-space: nowrap; }
  .tpl-actions-row { display: flex; gap: .4rem; justify-content: flex-end; }
  @media (max-width: 1000px) { .tpl { grid-template-columns: minmax(0, 1fr); } .tpl-button { grid-template-columns: minmax(0, 1fr); } }

  .sends-places { display: grid; gap: 3.2rem; margin-top: 2.4rem; }
  .sends-places > .hint { margin: -2rem 0 0; }
  .sends-place h2 { margin: 0 0 .4rem; font-size: 2rem; font-weight: 400; }
  .sends-place .sends-table { margin-top: 1.6rem; }
  .sends-more { margin: .8rem 0 0; font-size: 1.35rem; }
  .sends-state-line { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

  .send-bar { display: flex; height: .8rem; width: 100%; min-width: 16rem; margin-top: 1.2rem; overflow: hidden; background: var(--line); }
  .send-progress .send-bar { margin-top: 0; }
  .send-bar span { display: block; height: 100%; }
  .send-bar .is-read, .send-key.is-read::before { background: var(--ok); }
  .send-bar .is-delivered, .send-key.is-delivered::before { background: color-mix(in oklab, var(--ok) 45%, var(--surface)); }
  .send-bar .is-going, .send-key.is-going::before { background: var(--router); }
  .send-bar .is-failed, .send-key.is-failed::before { background: var(--error); }
  .send-progress { display: grid; gap: .5rem; min-width: 22rem; }
  .send-counts { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: 1.2rem; color: var(--ink-3); }
  .send-counts b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
  .send-key { display: inline-flex; align-items: center; gap: .5rem; }
  .send-key::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; }
  .send-name { display: grid; gap: .2rem; }
  .send-name.has-channel { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; }
  .send-name.has-channel > :not(.send-channel-mark) { grid-column: 2; }
  .send-channel-mark { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
  .send-channel-mark.is-whatsapp { background: var(--whatsapp-soft); color: var(--whatsapp-ink); }
  .send-channel-mark.is-sms { background: var(--menu-soft); color: var(--menu); }
  .send-channel-mark .icon { width: 1.4rem; height: 1.4rem; }
  .sends-list-bar { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.4rem; }
  .sends-list-bar .sends-filters b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .sends-filters .filter-dot { flex: none; opacity: 1; }
  .sends-list-bar + .sends-table { margin-top: 1.2rem; }
  .sends-from .field { min-width: 22rem; }
  .sends-none { margin: 1.6rem 0 0; color: var(--ink-3); }
  .send-name a { font-weight: 600; }
  .send-name code, .send-name small { font-size: 1.2rem; color: var(--ink-3); }
  .send-when { display: grid; gap: .2rem; font-size: 1.3rem; color: var(--ink-2); white-space: nowrap; }
  .send-when span { color: var(--ink-3); font-size: 1.2rem; }
  .sends-table .send-channel-mark { flex: none; width: 2.2rem; height: 2.2rem; border-radius: var(--r-control); }
  .sends-table .send-when { display: flex; align-items: baseline; gap: .6rem; }
  .sends-table .send-when span::before { content: "· "; }
  .sends-table .send-sender { white-space: nowrap; }
  .sends-table .send-progress { display: flex; align-items: center; gap: 1rem; min-width: 0; }
  .sends-table .send-progress .send-bar { flex: none; width: 10rem; min-width: 10rem; height: .6rem; border-radius: 999px; }
  .sends-table .send-counts { flex-wrap: nowrap; white-space: nowrap; }
  .sends-table .lang { margin-bottom: 0; }
  .mono-num { font-variant-numeric: tabular-nums; }

  .sends-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; }
  .sends-stat { --accent: var(--line-strong); position: relative; overflow: clip; display: grid; gap: .3rem; padding: 1.6rem 1.6rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .sends-stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); pointer-events: none; }
  .sends-stat b { font-size: 2.6rem; font-weight: 400; line-height: 1.1; }
  .sends-stat span { font-size: 1.3rem; color: var(--ink-2); }
  .sends-stat small { font-size: 1.2rem; color: var(--ink-3); }
  .sends-stat.is-read { --accent: var(--ok); }
  .sends-stat.is-delivered { --accent: color-mix(in oklab, var(--ok) 45%, var(--surface)); }
  .sends-stat.is-going { --accent: var(--router); }
  .sends-stat.is-failed { --accent: var(--error); }
  .sends-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.4rem; align-items: start; margin-top: 2.4rem; }
  .sends-detail.is-single { grid-template-columns: minmax(0, 1fr); }
  .sends-section { display: grid; gap: 1.4rem; padding: 2rem 2.2rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .sends-section h2 { margin: 0; font-size: 1.6rem; font-weight: 600; }
  .sends-reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
  .sends-reasons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.6rem; font-size: 1.35rem; }
  .sends-reasons li span { grid-column: 1; color: var(--ink-3); font-size: 1.25rem; }
  .sends-reasons li b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 600; }
  .sends-filters { display: flex; gap: .6rem; flex-wrap: wrap; }
  /* A filter is a control, so it stands as tall as the fields beside it and fills when chosen, as on Flows. */
  .sends-filters .pill { gap: .6rem; height: var(--filter-height); padding: 0 1.2rem; border-color: var(--line); background: var(--surface); color: var(--ink-2); font-size: 1.35rem; text-decoration: none; }
  .sends-filters .pill:hover:not(.is-on) { border-color: var(--line-strong); color: var(--ink); }
  .sends-filters .pill.is-on { border-color: var(--inverse); background: var(--inverse); color: var(--on-inverse); }
  .sends-pages { display: flex; gap: 1.6rem; font-size: 1.35rem; }
  .sends-confirm { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

  .draft { display: grid; grid-template-columns: minmax(0, 1fr) 36rem; gap: 3.2rem; align-items: start; margin-top: 2.4rem; padding-bottom: 9rem; }
  .draft-preview { position: sticky; top: 1.6rem; display: grid; gap: 1.2rem; }
  .pv { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--chat-bg); }
  .pv-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; background: var(--chat-head); color: var(--chat-ink); font-size: 1.3rem; }
  .pv-head strong { font-weight: 600; }
  .pv-nav { display: flex; gap: .6rem; align-items: center; color: var(--chat-muted); }
  .pv-nav a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--chat-in); color: var(--chat-ink); text-decoration: none; }
  .pv-body { display: grid; gap: .8rem; align-content: start; min-height: 26rem; padding: 1.8rem 1.6rem 2.4rem; }
  .pv-day { justify-self: center; padding: .3rem 1rem; border-radius: 6px; background: var(--chat-note); color: var(--chat-muted); font-size: 1.15rem; }
  .pv .sends-bubble { max-width: 100%; }
  .sends-bubble .blank { padding: 0 .3rem; border-radius: 3px; background: color-mix(in oklab, var(--chat-muted) 22%, transparent); color: var(--chat-muted); }
  .pv-note { margin: 0; font-size: 1.25rem; color: var(--ink-3); }
  .tester { display: grid; gap: .8rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .tester strong { font-size: 1.4rem; }
  .tester .row { display: flex; gap: .8rem; }
  .tester .row .field { flex: 1; min-width: 0; }
  .sendbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; padding: 1.4rem max(2.4rem, calc((100vw - 144rem) / 2 + 2.4rem)) calc(1.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); }
  .sendbar-state { display: grid; gap: .2rem; font-size: 1.4rem; }
  .sendbar-state strong { font-weight: 600; }
  .sendbar-state span { font-size: 1.3rem; color: var(--ink-3); }
  .sendbar .btn[disabled] { opacity: .45; cursor: not-allowed; }
  .drop-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); font-size: 1.35rem; }
  .drop-line span { color: var(--ink-3); font-size: 1.25rem; }
  .inline-warn { padding: 1rem 1.2rem; border-left: 3px solid var(--warning); background: var(--warning-soft); font-size: 1.35rem; color: var(--ink); }
  .pick { display: grid; gap: .4rem; min-width: 0; }
  .choice-head { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; font-size: 1.45rem; font-weight: 600; }
  .choice-head .pill { font-weight: 550; }
  .pick-text { font-size: 1.35rem; color: var(--ink-2); line-height: 1.5; }
  .tslot { padding: 0 .4rem; border-radius: 3px; background: var(--message-soft); color: var(--ink); }

  .sends-file { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 1.35rem; }
  .sends-file span { color: var(--ink-3); font-size: 1.25rem; }

  .sends-chat { display: grid; gap: 1rem; padding: 1.6rem; border-radius: var(--r-card); background: var(--chat-bg); }
  .sends-bubble { justify-self: start; max-width: 34rem; padding: .8rem 1rem 1rem; border-radius: 0 8px 8px 8px; background: var(--chat-in); color: var(--chat-ink); font-size: 1.35rem; line-height: 1.4; box-shadow: 0 1px .5px rgb(11 20 26 / .13); }
  .sends-bubble p { margin: 0 0 .4rem; }
  .sends-bubble .bubble-header { font-weight: 600; }
  .sends-bubble .bubble-footer { color: var(--chat-muted); font-size: 1.2rem; }
  .sends-bubble:has(.wa-media, .wa-doc) { width: 30rem; max-width: 100%; }
  .sends-bubble p:empty { display: none; }
  .sends-bubble :is(.wa-media, .wa-doc):not(:has(~ :not(:empty))) { margin-bottom: -.6rem; }
  .sends-bubble .wa-media { position: relative; display: grid; place-items: center; margin: -.4rem -.6rem .6rem; border-radius: 6px; overflow: hidden; background: color-mix(in oklab, var(--chat-muted) 18%, var(--chat-in)); }
  .sends-bubble .wa-media.is-image { aspect-ratio: 1.91 / 1; }
  .sends-bubble .wa-media.is-video { aspect-ratio: 16 / 9; }
  .sends-bubble .wa-media-glyph { width: 4.4rem; height: 4.4rem; fill: color-mix(in oklab, var(--chat-muted) 60%, transparent); }
  .sends-bubble .wa-media-file { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .sends-bubble .wa-play { position: relative; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: rgb(11 20 26 / .55); }
  .sends-bubble .wa-play svg { width: 2.8rem; height: 2.8rem; margin-left: .3rem; fill: #fff; }
  .sends-bubble .wa-videocam { position: absolute; left: .8rem; bottom: .6rem; width: 1.8rem; height: 1.8rem; fill: #fff; filter: drop-shadow(0 0 2px rgb(0 0 0 / .5)); }
  .sends-bubble .wa-doc { --band: #8696a0; display: flex; align-items: center; gap: 1rem; margin: -.2rem -.4rem .6rem; padding: 1rem; border-radius: 6px; background: color-mix(in oklab, var(--chat-bg) 60%, var(--chat-in)); }
  .sends-bubble .wa-doc[data-ext="pdf"] { --band: #e5252a; }
  .sends-bubble .wa-doc:is([data-ext="doc"], [data-ext="docx"], [data-ext="rtf"], [data-ext="odt"]) { --band: #2b579a; }
  .sends-bubble .wa-doc:is([data-ext="xls"], [data-ext="xlsx"], [data-ext="csv"], [data-ext="ods"]) { --band: #217346; }
  .sends-bubble .wa-doc:is([data-ext="ppt"], [data-ext="pptx"], [data-ext="odp"]) { --band: #d24726; }
  .sends-bubble .wa-doc-icon { flex: none; width: 2.6rem; height: 3.2rem; }
  .sends-bubble .wa-doc-page { fill: #fff; stroke: #d1d7db; }
  .sends-bubble .wa-doc-fold { fill: #e9edef; stroke: #d1d7db; }
  .sends-bubble .wa-doc-band { fill: var(--band); }
  .sends-bubble .wa-doc-lines { fill: none; stroke: #c4ccd1; stroke-width: 1.4; stroke-linecap: round; }
  .sends-bubble .wa-doc[data-ext=""] :is(.wa-doc-band, text) { display: none; }
  .sends-bubble .wa-doc:not([data-ext=""]) .wa-doc-lines { display: none; }
  .sends-bubble .wa-doc-name.blank { padding: 0; background: none; font-family: inherit; color: var(--chat-muted); }
  .sends-bubble .wa-doc-icon text { fill: #fff; font: 700 6.4px/1 system-ui, sans-serif; letter-spacing: .1px; }
  .sends-bubble .wa-doc-words { display: grid; min-width: 0; gap: .1rem; }
  .sends-bubble .wa-doc-name { overflow: hidden; font-size: 1.3rem; white-space: nowrap; text-overflow: ellipsis; }
  .sends-bubble .wa-doc-type { font-size: 1.15rem; color: var(--chat-muted); }
  .sends-bubble .wa-doc-type:empty { display: none; }
  .sends-bubble .to { display: block; margin-bottom: .4rem; font-size: 1.15rem; color: var(--chat-muted); }
  .sends-bubble mark, .sends-bubble p [data-fill]:not(.blank) { padding: 0 .2rem; border-radius: 3px; background: color-mix(in oklab, var(--chat-accent) 22%, transparent); color: inherit; }
  .sends-bubble .btn-row { display: block; margin: .6rem -1rem -1rem; padding: .8rem; border-top: 1px solid rgb(11 20 26 / .08); text-align: center; color: var(--chat-action); font-weight: 500; }

  .test-status { margin-top: .6rem; font-weight: 600; color: var(--ink-2); }
  .test-status.is-delivered, .test-status.is-read { color: var(--ok-ink); }
  .test-status.is-failed { color: var(--error); }
  .sends-workflow { margin-top: 1.6rem; }

  .numbers-group { display: flex; align-items: center; gap: 1rem; margin: 3.2rem 0 0; font-size: 1.6rem; font-weight: 600; }
  .numbers-group + .numbers { margin-top: 1.2rem; }
  .checklist .is-waiting .tick { border: 1px solid var(--router); color: var(--router); }
  .checklist .is-refused .tick { color: var(--error); }
  .checklist .is-refused small { color: var(--error); }
  .field.sms-text { min-height: 12rem; font-size: 1.45rem; line-height: 1.55; resize: vertical; }
  .device-screen.is-sms { background: var(--phone-app-bg); }
  .is-sms .sms-head { position: relative; display: grid; justify-content: stretch; justify-items: center; gap: 4px; padding: 4px 12px 10px; border-bottom: .5px solid var(--phone-field-line); background: var(--phone-veil); }
  .sms-back { position: absolute; left: 8px; top: 14px; color: var(--phone-link); }
  .sms-back .icon { width: 22px; height: 22px; }
  .sms-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(#a5abb8, #858994); color: #fff; font-size: 19px; font-weight: 500; }
  .is-sms .sms-from { font-size: 11px; line-height: 1.2; color: var(--phone-ink); }
  .sms-log { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 12px 12px 8px; overflow-y: auto; }
  .sms-day { align-self: center; margin-bottom: 6px; font-size: 11px; color: var(--phone-muted); }
  .sms-bubble { align-self: flex-start; max-width: 78%; margin: 0; padding: 7px 12px 8px; border-radius: 18px; background: var(--phone-bubble-in); color: var(--phone-ink); font-size: 15px; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sms-bubble mark { padding: 0 2px; border-radius: 3px; background: color-mix(in oklab, var(--phone-link) 22%, transparent); color: inherit; }
  .sms-bubble .blank { color: var(--phone-link); }
  .sms-bubble .is-subtle { color: var(--phone-muted); }
  .sms-composer { display: grid; padding: 8px 12px 26px; }
  .sms-no-reply { font-size: 11.5px; text-align: center; color: var(--phone-muted); }
  .sms-field { padding: 5px 12px; border: .5px solid var(--phone-field-line); border-radius: 18px; font-size: 14px; color: var(--phone-muted); }
  .sms-sent-text { max-width: 72ch; margin: 1.6rem 0 0; padding: 1rem 1.4rem; border-left: 3px solid var(--line-strong); background: var(--surface); font-size: 1.4rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sends-stats.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sms-sends .send-bar .is-delivered, .sms-sends .send-key.is-delivered::before { background: var(--ok); }
  .sms-sends .sends-stat.is-delivered { --accent: var(--ok); }
  .sms-totals { margin: .8rem 0 0; }
  .send-live { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
  .send-live-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
  .send-live-top h2 { margin: 0; font-size: 1.8rem; font-weight: 400; }
  .send-live-top h2 b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .send-live-pace { display: flex; align-items: baseline; gap: 1.2rem; color: var(--ink-3); font-size: 1.35rem; }
  .send-live-pace b { color: var(--ink); font-size: 2rem; font-weight: 500; }
  .send-live .send-bar { height: 1.2rem; margin: 0; border-radius: 999px; }
  .send-live .send-bar span { transition: width .6s var(--ease); }
  .send-live .sends-stats { margin: 0; }
  .send-live .sms-totals { margin: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .send-live.is-live .send-bar .is-going { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%); background-size: 200% 100%; animation: send-moving 1.6s linear infinite; }
  }
  @keyframes send-moving { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  .optouts { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 3.2rem; align-items: start; margin-top: 2.4rem; }
  .optouts.is-reading { grid-template-columns: minmax(0, 1fr); }
  .optouts-list { display: grid; gap: 1.2rem; min-width: 0; }
  .optouts-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; }
  .optouts-top h2 { margin: 0; font-size: 2rem; font-weight: 400; }
  .optouts-top h2 small { display: block; margin-top: .2rem; font-size: 1.3rem; color: var(--ink-3); }
  .optouts-find { display: flex; gap: .8rem; }
  .optouts-find .field { width: 24rem; }
  .optouts-remove { width: 1%; text-align: right; }
  .optouts-side { display: grid; gap: 1.6rem; }
  .api-key-ready { margin-top: 2.4rem; }
  .api-page { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 3.2rem; align-items: start; margin-top: 2.4rem; }
  .api-main { display: grid; gap: 4rem; min-width: 0; }
  .api-section { display: grid; gap: 1.2rem; min-width: 0; }
  .api-section > h2 { margin: 0; font-size: 2rem; font-weight: 400; }
  .api-section .hint { margin: 0; }
  .api-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin: 0; }
  .api-figures div { padding: 1.2rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .api-figures dt { color: var(--ink-3); font-size: 1.25rem; }
  .api-figures dd { margin: .2rem 0 0; font-size: 2.4rem; }
  .api-side { display: grid; gap: 1.6rem; }
  .api-card { display: grid; gap: 1rem; padding: 1.6rem 2rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .api-card h2 { margin: 0; font-size: 1.5rem; font-weight: 600; }
  .api-card p { margin: 0; color: var(--ink-2); font-size: 1.35rem; }
  .api-card .api-credit-left { color: var(--ink); font-size: 2.8rem; }
  .api-top-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .api-top-up form { margin: 0; }
  .api-top-up .btn { width: 100%; }
  .api-top-up-other { display: flex; gap: .6rem; }
  .api-top-up-other .field { flex: 1; min-width: 0; }
  .api-receipts { display: grid; gap: .4rem; margin: 0; padding: .8rem 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 1.3rem; }
  .api-receipts li { display: flex; justify-content: space-between; gap: 1rem; }
  .api-receipts span { color: var(--ink-3); }
  .api-credit-alert { display: grid; gap: .4rem; padding-top: .8rem; border-top: 1px solid var(--line); }
  .api-senders { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; font-size: 1.35rem; }
  .api-senders li { display: flex; justify-content: space-between; gap: 1.2rem; }
  .api-senders b { font-weight: 600; }
  .api-senders span { color: var(--ink-3); text-align: right; }
  .api-section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; }
  .api-section-top h2 { margin: 0; font-size: 2rem; font-weight: 400; }
  .api-section-top .hint { max-width: 60ch; margin: .4rem 0 0; }
  .api-key-new { display: flex; gap: .8rem; }
  .api-key-new .field { width: 26rem; }
  .api-key-end { margin-left: .4rem; color: var(--ink-3); font-weight: 400; }
  .api-none { margin: 0; }
  .panel-head.is-sms { border-top-color: var(--menu); }
  .panel-head.is-whatsapp { border-top-color: var(--whatsapp-brand); }
  .message-panel { display: grid; gap: 2.4rem; padding-bottom: 2.8rem; }
  .message-state { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0; color: var(--ink-3); font-size: 1.35rem; }
  .message-text { padding: 1.2rem 1.6rem; border-radius: var(--r-card); background: var(--surface-2); }
  .message-text p { margin: 0; font-size: 1.45rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .message-text small { display: block; margin-top: .8rem; color: var(--ink-3); font-size: 1.2rem; }
  .message-heading { margin: 0 0 1rem; color: var(--ink-2); font-size: 1.3rem; font-weight: 600; }
  .message-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .message-steps li { position: relative; display: flex; justify-content: space-between; gap: 1.2rem; padding: 0 0 1.4rem 2.4rem; }
  .message-steps li::before { content: ""; position: absolute; top: .45rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ok); }
  .message-steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.6rem; bottom: .2rem; left: .65rem; width: 1px; background: var(--line); }
  .message-steps li.is-failed::before { background: var(--error); }
  .message-steps b { font-weight: 500; }
  .message-steps small { display: block; color: var(--ink-3); font-size: 1.25rem; }
  .message-steps time { flex: none; color: var(--ink-3); font-size: 1.2rem; }
  .message-details { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: .8rem 1.2rem; margin: 0; font-size: 1.35rem; }
  .message-details dt { color: var(--ink-3); }
  .message-details dd { margin: 0; overflow-wrap: anywhere; }


  .compose { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 5.6rem; align-items: start; padding-bottom: 6rem; }
  .compose-main { display: grid; gap: 2rem; min-width: 0; }
  .compose-top { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; min-height: 4rem; }
  .compose-crumbs { display: flex; flex: 1; align-items: center; gap: 1rem; min-width: 0; color: var(--ink-3); font-size: 1.4rem; }
  .compose-crumbs a { color: var(--ink-3); text-decoration: none; }
  .compose-crumbs a:hover { color: var(--ink); }
  .compose-name { flex: 1; min-width: 0; }
  .sends-crumbs { margin: 0 0 1.2rem; }
  .sender-asked { display: flex; align-items: flex-start; gap: 1rem; margin: 2rem 0 0; padding: 1.2rem 1.6rem; border: 1px dashed var(--field-line); border-radius: var(--r-card); color: var(--ink-2); font-size: 1.4rem; }
  .sender-asked .icon { flex: none; width: 1.8rem; height: 1.8rem; color: var(--whatsapp-brand); }
  .sender-asked b { color: var(--ink); font-weight: 600; }
  .sender-asked-body { display: grid; gap: .8rem; min-width: 0; }
  .sender-asked-body p { margin: 0; }
  .sender-asked-state { display: inline-flex; align-items: center; gap: .5rem; }
  .sender-asked-state.is-ok { color: var(--ok-ink); }
  .sender-asked-state .icon { width: 1.6rem; height: 1.6rem; }
  .sender-asked-row { display: flex; gap: .6rem; }
  .sender-asked-row .field { width: 14rem; letter-spacing: .2em; }
  .send-choices { display: grid; gap: 3.2rem; max-width: 76rem; margin-top: 2.4rem; }
  .send-choice-group { display: grid; gap: .8rem; }
  .send-choice-channel { display: flex; align-items: center; gap: 1rem; margin: 0 0 .4rem; font-size: 1.35rem; font-weight: 400; color: var(--ink-2); }
  .send-choice-group .button_to { display: block; }
  .send-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.6rem; width: 100%; padding: 1.4rem 1.8rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
  .send-choice:hover, .send-choice:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-lift); }
  .send-choice strong { font-size: 1.6rem; font-weight: 600; }
  .send-choice span { grid-column: 1; color: var(--ink-3); font-size: 1.3rem; }
  .send-choice .icon { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 1.8rem; height: 1.8rem; color: var(--ink-3); }
  .send-choice:hover .icon { color: var(--primary); }
  .compose-name input { field-sizing: content; min-width: 12ch; max-width: 100%; padding: .2rem .6rem; margin-left: -.6rem; border: 1px solid transparent; border-radius: var(--r-control); background: transparent; color: var(--ink); font: 500 1.4rem var(--sans); }
  .compose-name input:hover { border-color: var(--line); }
  .compose-name input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgb(var(--focus-rgb) / .18); }
  .compose-discard { padding: .4rem .8rem; border: 0; border-radius: var(--r-control); background: none; color: var(--ink-3); font: inherit; font-size: 1.3rem; cursor: pointer; }
  .compose-discard:hover { background: var(--danger-soft); color: var(--danger); }

  .sheet { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-lift); }
  .sheet-problem { display: flex; gap: .8rem; align-items: center; margin: 0; padding: 1.2rem 2.8rem; border-bottom: 1px solid var(--line); border-radius: var(--r-card) var(--r-card) 0 0; background: var(--danger-soft); color: var(--danger-ink); font-size: 1.35rem; }
  .sheet-problem .icon { flex: none; width: 1.6rem; height: 1.6rem; }
  .sheet-row { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 1.2rem; align-items: start; margin: 0 2.8rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
  .sheet-label { padding-top: .3rem; color: var(--ink-3); font-size: 1.4rem; }
  .sheet-value { display: grid; gap: 1rem; justify-items: start; min-width: 0; }
  .sheet-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
  .sheet-from b { font-weight: 600; }
  .sheet-aside { margin: 0; color: var(--ink-3); font-size: 1.3rem; }
  .sheet-change > summary { display: inline; color: var(--link); font-size: 1.3rem; cursor: pointer; list-style: none; }
  .sheet-change > summary::-webkit-details-marker { display: none; }
  .sheet-change[open] > summary { display: none; }
  .sheet-value:has(.sheet-change) { grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 1.2rem; }

  .sheet-drop { width: 100%; }
  .sheet-drop label { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border: 1px dashed var(--field-line); border-radius: var(--r-card); color: var(--ink-2); cursor: pointer; transition: border-color var(--quick) var(--ease), background-color var(--quick) var(--ease); }
  .sheet-drop label:hover, .sheet-drop.is-over label { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
  .sheet-drop label:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(var(--focus-rgb) / .18); }
  .sheet-drop .icon { flex: none; width: 2rem; height: 2rem; color: var(--ink-3); }
  .sheet-drop u { color: var(--link); text-decoration: none; }
  .sheet-file { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
  .file-chip { display: inline-flex; align-items: center; gap: .8rem; padding: .4rem .4rem .4rem 1rem; border-radius: var(--r-card); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); font-size: 1.35rem; }
  .file-chip .icon { width: 1.6rem; height: 1.6rem; color: var(--primary); }
  .file-chip b { font-weight: 600; }
  .file-chip > span { color: var(--ink-2); }
  .file-chip-form { display: inline; }
  .file-chip-remove { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: var(--r-control); background: none; color: var(--ink-3); font-size: 1.8rem; line-height: 1; cursor: pointer; }
  .file-chip-remove:hover { background: var(--surface-hover); color: var(--ink); }
  .sheet-replace label { color: var(--link); font-size: 1.3rem; cursor: pointer; }
  .sheet-replace label:focus-within { text-decoration: underline; }

  .sheet-columns { display: grid; gap: .6rem; width: 100%; }
  .sheet-templates { display: grid; gap: .6rem; width: 100%; }
  .sheet-template { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-card); cursor: pointer; transition: border-color var(--quick) var(--ease); }
  .sheet-template:hover { border-color: var(--field-line); }
  .sheet-template:has(:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
  .sheet-template input { grid-row: 1 / span 2; margin: .3rem 0 0; accent-color: var(--primary); }
  .sheet-template-name { font-weight: 600; }
  .sheet-template-text { color: var(--ink-2); font-size: 1.35rem; }
  .sheet-templates:has(.sheet-template:only-of-type) .sheet-template input { display: none; }
  .sheet-blanks { padding-top: .4rem; }
  .sheet-blanks .sheet-line b { color: var(--ink); font-weight: 500; }
  .sheet-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0; color: var(--ink-2); font-size: 1.35rem; }
  .sheet-line.is-missing > span:first-child { color: var(--warning); }
  .field.is-inline { width: auto; min-height: 3.2rem; padding: .3rem 2.8rem .3rem .8rem; background-position: right .8rem center; font-size: 1.35rem; }
  .sheet-more > summary { width: fit-content; color: var(--ink-3); font-size: 1.3rem; cursor: pointer; }
  .sheet-more > summary:hover { color: var(--ink); }
  .sheet-more[open] > summary { margin-bottom: .6rem; }
  .sheet-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: 0; font-size: 1.35rem; }
  .sheet-verdict .is-ok { display: inline-flex; align-items: center; gap: .5rem; color: var(--ok-ink); font-weight: 500; }
  .sheet-verdict .is-ok .icon { width: 1.6rem; height: 1.6rem; color: var(--ok); }
  .sheet-verdict .is-warning, .sheet-verdict.is-warning { color: var(--warning); }
  .sheet-verdict.is-checking { gap: .8rem; color: var(--ink-2); }
  .sheet-note { display: flex; gap: .6rem; align-items: baseline; margin: 0; color: var(--warning); font-size: 1.3rem; }
  .sheet-note .icon, .sheet-quiet .icon { flex: none; width: 1.4rem; height: 1.4rem; align-self: center; }
  .spinner { width: 1.4rem; height: 1.4rem; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .sheet-message { display: grid; gap: 1.2rem; flex: 1; padding: 2.4rem 2.8rem 1.6rem calc(2.8rem + 8.4rem); }
  .sheet-text textarea { display: block; width: 100%; min-height: 18rem; padding: 0; border: 0; resize: vertical; background: transparent; color: var(--ink); font: inherit; font-size: 1.8rem; line-height: 1.6; }
  .sheet-text textarea:focus { outline: none; }
  .sheet-text textarea::placeholder { color: var(--placeholder); }
  .sheet-tools { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
  .sheet-chips { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; }
  .sheet-chip { padding: .4rem 1.1rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); color: var(--ink); font: inherit; font-size: 1.3rem; font-weight: 500; cursor: pointer; transition: background-color var(--quick) var(--ease); }
  .sheet-chip:nth-child(3n+2) { background: var(--menu-soft); }
  .sheet-chip:nth-child(3n+3) { background: var(--message-soft); }
  .sheet-chip:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
  .sheet-count { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink-3); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
  .sheet-count.is-warning { color: var(--warning); }
  .ring { width: 1.8rem; height: 1.8rem; rotate: -90deg; }
  .ring circle { fill: none; stroke-width: 4; }
  .ring-track { stroke: var(--line); }
  .ring-fill { stroke: var(--primary); stroke-linecap: round; transition: stroke-dasharray var(--quick) var(--ease); }
  .sheet-count.is-warning .ring-fill { stroke: var(--warning); }
  .sheet-count:has([data-sms-preview-target=count]:empty) { visibility: hidden; }

  .sheet-foot { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; padding: 1.6rem 2rem 1.6rem 2.8rem; border-top: 1px solid var(--line); }
  .sheet-when { display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; flex: 1; min-width: 0; color: var(--ink-3); font-size: 1.35rem; }
  .sheet-schedule { position: relative; }
  .sheet-schedule > summary { color: var(--link); cursor: pointer; list-style: none; }
  .sheet-schedule > summary::-webkit-details-marker { display: none; }
  .sheet-schedule-form { position: absolute; bottom: calc(100% + 1rem); left: 0; z-index: 6; display: grid; gap: 1.2rem; width: 32rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); color: var(--ink); }
  .sheet-schedule-actions { display: flex; gap: .8rem; }
  .sheet-quiet { display: inline-flex; align-items: center; gap: .4rem; color: var(--warning); }
  .sheet-need { color: var(--ink-3); font-size: 1.35rem; }
  .sheet-send { gap: .8rem; min-height: 4.4rem; padding-inline: 2rem; box-shadow: 0 1px 2px rgb(var(--focus-rgb) / .25), 0 6px 16px rgb(var(--focus-rgb) / .2); }
  .sheet-send:disabled { box-shadow: none; }
  .sheet-send .icon { width: 1.6rem; height: 1.6rem; }

  .compose-preview { position: sticky; top: 9rem; display: grid; justify-items: center; gap: 1.4rem; }
  .compose-device { width: 30rem; max-width: 100%; }
  .compose-device .device-screen { height: auto; aspect-ratio: 9 / 19.5; }
  .compose-person { display: grid; justify-items: center; gap: 1rem; width: 100%; }
  .person-nav { display: flex; align-items: center; gap: 1rem; color: var(--ink-2); font-size: 1.35rem; }
  .person-nav b { color: var(--ink); font-weight: 600; }
  .person-step { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); color: var(--ink); }
  span.person-step { visibility: hidden; }
  .person-step .icon { width: 1.4rem; height: 1.4rem; }
  .person-step .is-flipped { scale: -1 1; }
  .compose-person .tester { width: 100%; padding: 0; border: 0; background: none; }
  .compose-person .tester > summary { color: var(--link); font-size: 1.3rem; text-align: center; cursor: pointer; list-style: none; }
  .compose-person .tester > summary::-webkit-details-marker { display: none; }
  .compose-person .tester[open] > summary { margin-bottom: .8rem; color: var(--ink-2); }
  .tester-form { display: grid; gap: .6rem; }
  .compose-note { margin: 0; color: var(--ink-3); font-size: 1.25rem; text-align: center; }

  @media (max-width: 1000px) {
    .optouts { grid-template-columns: minmax(0, 1fr); }
    .api-page { grid-template-columns: minmax(0, 1fr); }
    .draft, .sends-detail { grid-template-columns: minmax(0, 1fr); }
    .draft-preview { position: static; }
    .compose { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
    .compose-preview { position: static; }
  }
  @media (max-width: 700px) {
    .sends-stats { grid-template-columns: minmax(0, 1fr); }
    .api-key-new { width: 100%; }
    .api-figures { grid-template-columns: minmax(0, 1fr); }
    .message-details { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .message-details dd { margin-bottom: .8rem; }
    .api-key-new .field { flex: 1; width: auto; min-width: 0; }
    .sheet-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; margin: 0 1.6rem; }
    .sheet-message { padding: 1.6rem; }
    .sheet-foot { padding: 1.4rem 1.6rem; }
    .sheet-send { width: 100%; }
  }
}

@layer modules {
  .webhook-wants { margin: 1.2rem 0 0; padding-left: 1.8rem; display: grid; gap: .6rem; }
  .webhook-wants code { padding: 0 .4rem; border-radius: var(--r-control); background: var(--surface-2); font-size: 1.2rem; }

  .callback { display: flex; align-items: center; gap: .6rem; }
  .callback-url { flex: 1; min-width: 0; padding: .7rem .9rem; overflow-wrap: anywhere; font-size: 1.3rem; user-select: all; }
  .check-result { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--r-control); border: 1px solid var(--ok-line); background: var(--ok-soft); }
  .check-result.is-failed { border-color: var(--error-line); background: var(--error-surface); }
  .check-title { margin: 0 0 .6rem; font-weight: 600; }
  .check-result.is-ok .check-title { color: var(--ok-ink); }
  .check-result.is-failed .check-title { color: var(--error); }
  .connect-lede { margin: 0; color: var(--ink-2); font-size: 1.4rem; line-height: 1.5; }
  .runtime-picker { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--line); }
  .runtime-tab { padding: .8rem 1.2rem; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: 1.35rem; font-weight: 550; text-decoration: none; }
  .runtime-tab:hover { color: var(--ink); }
  .runtime-tab.is-current { border-bottom-color: var(--primary); color: var(--ink); }
  .callback + .callback { margin-top: .6rem; }
  .connect .group > legend { display: flex; align-items: center; }
  .connect .group > .hint { margin-bottom: 0; }
  .connect .slow-calls { --accent: var(--warning); position: relative; overflow: clip; display: grid; gap: .8rem; margin-top: 1.8rem; padding: 1.4rem 1.6rem 1.4rem 1.8rem; border: 1px solid var(--warning-line); border-radius: var(--r-control); background: var(--warning-soft); }
  .connect .slow-calls::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); pointer-events: none; }
  .slow-calls p { margin: 0; }
  .slow-calls-title { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.4rem; font-weight: 650; }
  .slow-calls-title .icon { width: 1.8rem; height: 1.8rem; color: var(--warning); flex: none; }
  .slow-calls-body { color: var(--ink-2); line-height: 1.5; }
  .slow-calls-list { list-style: none; margin: .2rem 0; padding: 0; border: 1px solid var(--warning-line); border-radius: var(--r-control); background: var(--surface); }
  .slow-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .4rem 1.2rem; padding: .8rem 1rem; }
  .slow-call + .slow-call { border-top: 1px solid var(--line); }
  .slow-call-screen { font-weight: 600; }
  .slow-call-url { overflow: hidden; font-family: var(--mono); font-size: 1.2rem; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
  .slow-call-wait { padding: .1rem .8rem; border-radius: 999px; background: var(--warning-soft); border: 1px solid var(--warning-line); font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
  .slow-call-fix { font-size: 1.3rem; white-space: nowrap; }
  @media (max-width: 879px) { .slow-call { grid-template-columns: minmax(0, 1fr) auto; } }
  .provider-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .connect .providers > .provider-picker { margin-top: 1.6rem; }
  /* Logos keep their own colours, so a tile stays white in the dark theme too. */
  .provider-option { --tile-accent: var(--primary); position: relative; display: grid; place-items: center; height: 7.2rem; padding: 1.2rem 1.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: #fff; cursor: pointer; transition: border-color .11s ease, box-shadow .11s ease; }
  .provider-option:hover { border-color: var(--tile-accent); }
  .provider-option input { position: absolute; opacity: 0; pointer-events: none; }
  .provider-option:has(input:checked) { border-color: var(--tile-accent); box-shadow: inset 0 0 0 1px var(--tile-accent); }
  .provider-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .provider-logo { display: block; width: auto; max-width: 100%; height: 3.2rem; }
  .provider-check { position: absolute; top: .6rem; right: .6rem; display: none; color: var(--tile-accent); }
  .provider-check .icon { display: block; width: 1.8rem; height: 1.8rem; }
  .provider-option:has(input:checked) .provider-check { display: block; }
  .provider { display: none; }
  .providers:has(input[value="at"]:checked) .provider.is-at, .providers:has(input[value="mtn"]:checked) .provider.is-mtn { display: block; }
  .connect .providers > .provider { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
  .connect .guide-steps { gap: 1.8rem; }
  .connect-details { margin-top: 2.2rem; }
  .connect-details > summary { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.3rem; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
  .connect-details > summary::-webkit-details-marker { display: none; }
  .connect-details > summary .icon { width: 1.5rem; height: 1.5rem; transition: transform .12s ease; }
  .connect-details[open] > summary .icon { transform: rotate(90deg); }
  .exchange { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1rem; margin-top: 1.4rem; }
  .exchange .label { margin-bottom: .4rem; }
  .exchange .call-json { white-space: pre-wrap; overflow-wrap: anywhere; }

  .dial-call { display: grid; justify-items: center; }
  .dial-call .phone-banner { width: min(46rem, 100%); }

  .phone-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; margin: 0 0 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--error); border-radius: var(--r-card); background: var(--error-soft, var(--surface)); font-size: 1.35rem; line-height: 1.45; color: var(--ink); }
  .phone-banner .icon { margin-top: .2rem; color: var(--error); }
}

@layer modules {
  .pane-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.2rem; }
  .pane-summary { display: flex; align-items: center; gap: .7rem; margin: 0; color: var(--ink-2); }
  .pane-empty { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.6rem; border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
  .pane-empty > .icon { width: 2.4rem; height: 2.4rem; color: var(--ink-3); flex: none; }
  .pane-empty p { margin: 0 0 .3rem; }
  .pane-empty-action { flex: none; align-self: center; margin-left: auto; }
  .scenario-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
  .scenario { position: relative; padding: 1.1rem 1.4rem 1.2rem 1.8rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .scenario::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--r-card) 0 0 var(--r-card); background: var(--line-strong); }
  .scenario.is-passing::before { background: var(--ok); }
  .scenario.is-failing::before { background: var(--error); }
  .scenario.is-playing { border-color: var(--live); box-shadow: 0 0 0 3px var(--live-glow); }
  .scenario.is-playing::before { background: var(--live); }
  .scenario.is-just-played { animation: scenario-settle .9s ease-out; }
  @keyframes scenario-settle { from { box-shadow: 0 0 0 5px var(--live-glow); } to { box-shadow: 0 0 0 0 rgba(232, 35, 124, 0); } }
  .scenario-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .scenario-name { flex: 1; min-width: 12rem; margin: 0; font-size: 1.5rem; font-weight: 650; }
  .scenario-result { padding: .1rem .8rem; border-radius: 999px; font-size: 1.15rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
  .scenario-result.is-passing { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }
  .scenario-result.is-failing { background: var(--error-soft); border-color: transparent; color: var(--error); }
  .scenario-actions { display: flex; gap: .6rem; }
  .scenario-play .icon { width: 1.2rem; height: 1.2rem; }
  .scenario-play .when-playing, .scenario.is-playing .scenario-play .when-idle { display: none; }
  .scenario.is-playing .scenario-play .when-playing { display: inline; }
  .scenario.is-playing .scenario-play svg.when-playing { display: inline-block; }
  .scenario-path { display: grid; margin: 0 0 0 .6rem; padding: 0; list-style: none; border-left: 2px solid var(--line); }
  .scenario-path li { position: relative; padding: .3rem 0 .3rem 1.8rem; font-size: 1.3rem; color: var(--ink-2); }
  .scenario-path li::before { content: ""; position: absolute; left: -.6rem; top: .9rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
  .scenario-path li.is-end::before { border-color: var(--ok); background: var(--ok); }
  .scenario-path li.is-missed { color: var(--error); }
  .scenario-path li.is-missed::before { border-color: var(--error); background: var(--error); }
  .scenario-path li.is-passed::before { border-color: var(--live); background: var(--live); }
  .scenario-path li.is-now { color: var(--ink); font-weight: 600; }
  .scenario-path li.is-now::before { border-color: var(--live); background: var(--surface); box-shadow: 0 0 0 3px var(--live-glow); }
  .scenario-said { color: var(--ink-3); font-weight: 400; }
  .scenario-watch { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem 1rem; border: 1px solid var(--line); background: var(--surface-2); font-size: 1.3rem; }
  .scenario-watch-where { flex: 1 1 20rem; min-width: 0; }
  .is-watching .steps-list .step-card:not(.is-watched), .is-watching .journey .node:not(.is-watched) { opacity: .4; }
  .is-watching .is-watch-now { border-color: var(--live); box-shadow: 0 0 0 3px var(--live-glow); opacity: 1; }
  .scenario-steps { list-style: none; display: flex; flex-wrap: wrap; row-gap: 1rem; margin: 1.1rem 0 .2rem; padding: 0; }
  .scenario-step { position: relative; display: grid; justify-items: start; gap: .35rem; min-width: 7.2rem; padding-right: 2.2rem; }
  .scenario-step:not(:last-child)::after { content: ""; position: absolute; left: calc(100% - 1.6rem); top: 1.2rem; width: 1rem; border-top: 1px solid var(--line-strong); }
  .scenario-key { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.4rem; padding: 0 .7rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-control); background: var(--surface); font-family: var(--mono); font-size: 1.25rem; font-weight: 600; transition: background-color .15s ease, border-color .15s ease; }
  .scenario-key.is-dial .icon { width: 1.3rem; height: 1.3rem; }
  .scenario-screen { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 1.1rem; color: var(--ink-3); }
  .scenario-step.is-missed .scenario-key { border-style: dashed; color: var(--ink-3); }
  .scenario-step.is-missed .scenario-screen { color: var(--error); }
  .scenario-step.is-done .scenario-key { background: var(--surface-2); color: var(--ink-2); }
  .scenario-step.is-current .scenario-key { border-color: var(--live); background: var(--live-soft); color: var(--ink); }
  .scenario-step.is-current .scenario-screen { color: var(--ink); font-weight: 600; }
  .scenario-expect { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: .8rem 0 0; font-size: 1.25rem; color: var(--ink-2); }
  .scenario-expect code { font-size: 1.15rem; }
  .scenario-problems { margin: .8rem 0 0; padding: .7rem 1rem .7rem 2.6rem; border-radius: var(--r-control); background: var(--error-soft); color: var(--error); font-size: 1.3rem; }
  .scenario-problems li + li { margin-top: .2rem; }
  .panel-head.is-scenario { border-top-color: var(--live); }
  .pane-summary.is-failing { color: var(--error); font-weight: 600; }
  .scenario-key.is-masked { color: var(--ink-3); }
  .phone-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
  .phone-head .section-title { margin: 0; }
  .phone-language { display: flex; align-items: center; gap: .5rem; }
  .phone-language .icon { width: 1.5rem; height: 1.5rem; color: var(--ink-3); }
  .phone-language .field { min-height: 3rem; padding-block: .2rem; font-size: 1.3rem; }
  .phone-scenario { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; padding: .5rem .9rem; border-radius: var(--r-control); background: var(--live-soft); color: var(--ink); font-size: 1.25rem; }
  .phone-scenario .icon { width: 1.4rem; height: 1.4rem; color: var(--live); flex: none; }
  .phone-capture { display: flex; margin: .8rem auto 0; }
  .phone-capture .icon { width: 1.3rem; height: 1.3rem; }
  .phone-key.is-pressed { background: var(--phone-key-press); box-shadow: none; }
  .ussd-button.is-pressed { background: var(--phone-alert-press); }
  @media (prefers-reduced-motion: reduce) { .scenario.is-just-played { animation: none; } }
  .scenario-start { display: grid; gap: .8rem; }
  .scenario-start-row { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.2rem; align-items: center; font-size: 1.35rem; }
  .scenario-start-row span { font-family: var(--mono); font-size: 1.25rem; color: var(--ink-2); overflow-wrap: anywhere; }
  .scenario-waits { display: grid; gap: .8rem; margin: 0; padding-left: 2.4rem; }
  .scenario-advanced > summary { cursor: pointer; }
}

@layer modules {
  /* Open Doodles by Pablo Stanley, CC0. */
  .spot { --spot: var(--router); display: block; width: 100%; height: auto; background: color-mix(in srgb, var(--spot) 7%, transparent); }
  .spot.is-menu { --spot: var(--menu); }
  .spot.is-input { --spot: var(--input); }
  .spot.is-router { --spot: var(--router); }
  .spot.is-end { --spot: var(--end); }
  .spot.is-message { --spot: var(--message); }
  .spot.is-form { --spot: var(--form); }
  .spot.is-wait { --spot: var(--wait); }
  .spot-ink { fill: var(--ink); }
  .spot-accent { fill: var(--spot); }
  .spot-deep { fill: color-mix(in srgb, var(--spot) 78%, #000); }

  /* Scribbles: doodle pack by @bxcmuse. */
  .scribble { --spot: var(--router); display: block; width: 100%; height: auto; }
  .scribble.is-menu { --spot: var(--menu); }
  .scribble.is-input { --spot: var(--input); }
  .scribble.is-router { --spot: var(--router); }
  .scribble.is-end { --spot: var(--end); }
  .scribble.is-message { --spot: var(--message); }
  .scribble.is-form { --spot: var(--form); }
  .scribble.is-wait { --spot: var(--wait); }
  .scribble-ink { fill: var(--ink); }
  .scribble-paper { fill: var(--scribble-paper, var(--surface)); }
  .scribble-accent { fill: var(--spot); }

  .empty-state { --scribble-paper: var(--surface); display: grid; justify-items: center; gap: .4rem; padding: 2.4rem 1.6rem 2.8rem; border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: var(--surface); text-align: center; }
  .empty-state .scribble { width: auto; height: 9rem; margin-bottom: .8rem; }
  .empty-state p { max-width: 52ch; margin: 0; }
  .empty-state-action { margin-top: 1.2rem; }

  .pictogram { display: block; width: 4.8rem; height: 4.8rem; flex: none; }

  .spot-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1.2rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
  .spot-sheet.is-small { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .spot-sheet li { border: 1px solid var(--line); background: var(--surface); }
  .spot-sheet span { display: block; padding: .8rem 1rem; font-size: 1.2rem; color: var(--ink-2); }
  .pictogram-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
  .pictogram-sheet li { display: grid; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 1.2rem; color: var(--ink-2); }
  .pictogram-sheet .pictogram { color: var(--ink); }
}

/* App classes the public site restyles everywhere, so they stay in the components layer. */
@layer components {
  .is-menu { --kind: var(--menu); --kind-soft: var(--menu-soft); --kind-ink: var(--menu-ink); }
  .is-input { --kind: var(--input); --kind-soft: var(--input-soft); --kind-ink: var(--input-ink); }
  .is-router { --kind: var(--router); --kind-soft: var(--router-soft); --kind-ink: var(--router-ink); }
  .is-end { --kind: var(--end); --kind-soft: var(--end-soft); --kind-ink: var(--ok-ink); }
}

@layer modules {
  :root { --mk-amber: #f5a000; --mk-ink-band: #1c2420; --mk-forest: #0e3b29; --mk-violet: #5b34e6; --mk-on-band: #f4f7f4; --mk-on-band-2: rgb(244 247 244 / .78); --mk-on-band-3: rgb(244 247 244 / .6); --mk-r: 1.2rem; --mk-r-card: .8rem; --mk-r-photo: 1.6rem; --mk-r-block: 2rem; --mk-lift: 0 30px 60px -30px rgb(var(--shade) / .45); --mk-raise: 0 1px 2px rgb(var(--shade) / .08), 0 16px 30px -12px rgb(var(--shade) / .4); --mk-lock: linear-gradient(160deg, #525252, #161616 70%); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mk-amber: #e99b12; --mk-ink-band: #222b26; --mk-forest: #0c3021; --mk-violet: #4a2cc4; } }
  :root[data-theme="dark"] { --mk-amber: #e99b12; --mk-ink-band: #222b26; --mk-forest: #0c3021; --mk-violet: #4a2cc4; }
  .is-marketing { background: var(--bg); }
  :root[data-theme="light"] .is-marketing { --bg: #ffffff; --surface: #f4f4f4; --surface-2: #e8e8e8; --surface-hover: #e0e0e0; --ink-2: #393939; --ink-3: #525252; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .is-marketing { --bg: #ffffff; --surface: #f4f4f4; --surface-2: #e8e8e8; --surface-hover: #e0e0e0; --ink-2: #393939; --ink-3: #525252; } }
  :root[data-theme="light"] .is-marketing :is(.ill:not(.ill-residency), .mk-stage .node, .mk-pair .node) { --surface: #ffffff; --surface-2: #f4f4f4; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .is-marketing :is(.ill:not(.ill-residency), .mk-stage .node, .mk-pair .node) { --surface: #ffffff; --surface-2: #f4f4f4; } }
  :root[data-theme="light"] .is-marketing .mk-shot { --bg: #f4f4f4; --surface: #ffffff; --surface-2: #f4f4f4; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .is-marketing .mk-shot { --bg: #f4f4f4; --surface: #ffffff; --surface-2: #f4f4f4; } }
  /* Lenis needs these (from lenis/dist/lenis.css). */
  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  /* Lenis honours scroll-padding-top as the browser does. */
  html:has(body.is-marketing) { scroll-padding-top: 12rem; }
  .is-marketing main { overflow-x: clip; }
  .mk-skip { position: absolute; left: 1.6rem; top: -10rem; z-index: 60; padding: .8rem 1.2rem; border-radius: var(--r-control); background: var(--primary); color: var(--on-primary); }
  .mk-skip:focus { top: 1.2rem; }

  .mk-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
  .mk-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--spectrum); }
  .mk-bar { display: flex; align-items: center; gap: 2.4rem; max-width: 124rem; height: 6.4rem; margin: 0 auto; padding: 0 2.4rem; }
  .mk-wordmark { font-size: 2.1rem; }
  .mk-nav { display: flex; align-items: center; gap: .2rem; margin-left: 1.2rem; }
  .mk-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
  .mk-nav-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 4rem; padding: 0 1.2rem; border-radius: var(--r-control); color: var(--ink-2); font-size: 1.4rem; font-weight: 400; white-space: nowrap; text-decoration: none; cursor: pointer; }
  .mk-nav-link:hover { background: var(--surface-hover); color: var(--ink); }
  .mk-nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .mk-nav-link .icon { width: 1.4rem; height: 1.4rem; }
  .mk-nav-menu { position: relative; }
  .mk-nav-menu > summary { list-style: none; }
  .mk-nav-menu > summary::-webkit-details-marker { display: none; }
  .mk-nav-menu > summary .icon { transition: rotate .11s ease; }
  .mk-nav-menu[open] > summary { background: var(--surface); color: var(--ink); }
  .mk-nav-menu[open] > summary .icon { rotate: 180deg; }
  .mk-nav-items { position: absolute; left: 0; top: calc(100% + .4rem); z-index: 50; display: grid; min-width: 22rem; margin: 0; padding: .6rem; list-style: none; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-float); }
  .mk-nav-item { display: block; padding: 1rem 1.2rem; border-radius: var(--r-control); color: var(--ink); font-size: 1.4rem; text-decoration: none; }
  .mk-nav-item:hover, .mk-nav-item:focus-visible { background: var(--surface-2); }
  .mk-nav-item[aria-current="page"] { background: var(--surface-2); }
  .mk-mobile-nav { display: none; }
  .mk-mobile-nav .mk-nav-items { left: auto; right: 0; }

  .mk-display { max-width: 16ch; margin: 0; font-family: var(--display); font-size: clamp(3.8rem, 5.4vw, 7.2rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
  .mk-h1 { max-width: 20ch; margin: 0; font-family: var(--display); font-size: clamp(3.2rem, 4.2vw, 5.4rem); font-weight: 400; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
  .mk-h2 { max-width: 22ch; margin: 0; font-family: var(--display); font-size: clamp(2.8rem, 3.2vw, 4.2rem); font-weight: 500; line-height: 1.16; letter-spacing: -.01em; text-wrap: balance; }
  .mk-h3 { margin: 0; font-size: 2rem; font-weight: 400; line-height: 1.35; }
  .mk-h4 { margin: 3.2rem 0 0; font-size: 1.6rem; font-weight: 600; line-height: 1.4; }
  .mk-kicker, .mk-plan-name, .mk-partner-title, .mk-footer-heading, .mk-swap-title { margin: 0; color: var(--ink-2); font-size: 1.2rem; font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
  .mk-kicker { margin-bottom: 1.6rem; }
  .mk-lede { max-width: 50ch; margin: 2.4rem 0 0; font-size: clamp(1.7rem, 1.5vw, 2rem); line-height: 1.5; color: var(--ink-2); }
  .mk-section-lede { max-width: 58ch; margin: 1.6rem 0 0; font-size: 1.8rem; line-height: 1.5; color: var(--ink-2); }
  .mk-note { margin: 2.4rem 0 0; max-width: 90ch; font-size: 1.3rem; line-height: 1.5; color: var(--ink-3); }
  .is-marketing .btn { border-radius: 999px; }
  .is-marketing .btn--small { padding-inline: 1.4rem; }
  :is(.mk-shot, .mk-frame, .ill, .callback) .btn { border-radius: var(--r-control); }
  .mk-btn-large { min-height: 5rem; padding: .8rem 2.8rem; font-size: 1.6rem; }
  .mk-cta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 3.2rem; }
  .mk-points { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
  .mk-points li { position: relative; padding-left: 2.4rem; color: var(--ink-2); line-height: 1.5; }
  .mk-points li::before { content: ""; position: absolute; left: .2rem; top: .75em; width: 1.2rem; height: 1px; background: currentColor; }
  .mk-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--primary); font-size: 1.5rem; text-decoration: none; }
  .mk-link:hover { text-decoration: underline; }
  .mk-link .icon { width: 1.6rem; height: 1.6rem; }
  .mk-tag { display: inline-block; padding: .1rem 1rem; border-radius: 999px; background: var(--kind-soft, var(--surface-2)); color: var(--kind-ink, var(--ink)); font-size: 1.1rem; font-weight: 600; line-height: 1.8rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: .2em; }
  .mk-tag.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
  .mk-tag.is-ok::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .6rem; border-radius: 50%; background: var(--ok); vertical-align: .1em; }
  .is-message { --kind: var(--message); --kind-soft: var(--message-soft); --kind-ink: var(--ink); }
  .is-live { --kind: var(--live); --kind-soft: var(--live-soft); --kind-ink: var(--live-ink); }

  .mk-section { max-width: 124rem; margin: 0 auto; padding: 9.6rem 2.4rem; }
  .mk-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.2rem 6.4rem; align-items: end; margin-bottom: 4.8rem; }
  .mk-head .mk-section-lede { margin: 0; }
  /* Spreads to the viewport edges without a wrapper. */
  .mk-band { position: relative; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
  .mk-tone:is(.is-ink, .is-forest, .is-violet) > :not(.mk-art, .mk-form), .mk-plan:last-child, .mk-footer { --bg: var(--band); --surface: color-mix(in srgb, #ffffff 9%, var(--band)); --surface-2: color-mix(in srgb, #ffffff 14%, var(--band)); --ink: var(--mk-on-band); --ink-2: var(--mk-on-band-2); --ink-3: var(--mk-on-band-3); --line: rgb(255 255 255 / .16); --line-strong: rgb(255 255 255 / .3); --focus: #ffffff; color: var(--ink); }
  .mk-tone:is(.is-ink, .is-forest, .is-violet) .btn:not(.btn--ghost) { border-color: #ffffff; background: #ffffff; color: #161616; }
  .mk-tone:is(.is-ink, .is-forest, .is-violet) .btn:not(.btn--ghost):hover { border-color: #e0e0e0; background: #e0e0e0; }
  .mk-tone:is(.is-ink, .is-forest, .is-violet) .btn--ghost { border-color: var(--ink); color: var(--ink); }
  .mk-tone:is(.is-ink, .is-forest, .is-violet) .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #161616; }

  .mk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4.8rem; align-items: center; max-width: 124rem; margin: 0 auto; padding: 5.6rem 2.4rem 7.2rem; }
  .mk-hero-stage { position: relative; height: 66rem; }
  .mk-hero .mk-display { max-width: 14ch; font-size: clamp(4.2rem, 5.6vw, 7.4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; }
  .mk-hero-block { position: absolute; inset: 4.8rem 0 5.6rem 9.6rem; border-radius: var(--mk-r-block); background: var(--mk-amber); }
  .mk-hero-block::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(rgb(28 36 32 / .16) 1.2px, transparent 1.4px); background-size: 16px 16px; mask-image: linear-gradient(135deg, transparent 35%, #000); }
  .mk-hero-photo { position: absolute; right: 2.4rem; top: 0; width: 58%; margin: 0; overflow: hidden; border-radius: var(--mk-r-photo); box-shadow: var(--mk-lift); }
  .mk-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
  .mk-hero-phone { position: absolute; left: 0; bottom: 0; z-index: 3; width: 28rem; filter: drop-shadow(0 30px 40px rgb(var(--shade) / .35)); }
  :is(.mk-hero-phone, .mk-channel-art, .mk-story-phone, .mk-stage-art) .device { width: 30rem; max-width: none; }
  :is(.mk-hero-phone, .mk-channel-art, .mk-story-phone, .mk-stage) .device-screen { height: 60rem; }
  .mk-hero-phone .device { zoom: .9; }
  .mk-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 1rem; padding: .7rem 1.8rem .7rem .7rem; border-radius: var(--mk-r-card); background: var(--surface); box-shadow: var(--mk-raise); white-space: nowrap; }
  .mk-chip .kind-icon { width: 3.4rem; height: 3.4rem; padding: .8rem; border-radius: .6rem; background: var(--kind-soft); color: var(--kind-ink); }
  .mk-chip > span { display: grid; gap: .1rem; }
  .mk-chip strong { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
  .mk-chip small { font-size: 1.15rem; line-height: 1.3; color: var(--ink-3); }
  .mk-chip.is-menu { left: 12rem; top: 2rem; rotate: -3deg; }
  .mk-chip.is-input { right: 0; top: 7.2rem; rotate: 2.5deg; }
  .mk-chip.is-router { left: 30.4rem; bottom: 3.2rem; rotate: -2deg; }
  .mk-chip.is-end { right: 1.2rem; bottom: 13.6rem; rotate: 3deg; }
  :root[data-theme="light"] .is-marketing .mk-chip { --surface: #ffffff; }
  
  .mk-frame { width: 100%; overflow: hidden; border-radius: var(--mk-r-card); background: var(--surface); box-shadow: var(--mk-lift), 0 0 0 1px rgb(var(--shade) / .06); }
  .mk-frame-bar { display: flex; align-items: center; gap: 1.6rem; height: 4.8rem; padding: 0 1.2rem 0 1.8rem; border-bottom: 1px solid var(--line); font-size: 1.35rem; color: var(--ink-2); white-space: nowrap; }
  .mk-frame-bar strong { color: var(--ink); font-weight: 600; }
  .mk-frame-tabs { display: flex; align-self: stretch; margin-left: auto; }
  .mk-frame-tabs span { display: grid; place-items: center; padding: 0 1.2rem; border-bottom: 2px solid transparent; }
  .mk-frame-tabs .is-on { border-color: var(--primary); color: var(--ink); }
  .mk-frame-canvas { padding: 3.2rem 2.4rem; overflow: hidden; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 16px 16px; }

  .mk-proof { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3.2rem; max-width: 124rem; margin: 0 auto; padding: 0 2.4rem; }
  .mk-proof-logo { display: block; width: auto; height: 4rem; }
  .mk-proof-line { margin: 0; color: var(--ink-2); font-size: 1.4rem; line-height: 1.6; }
  .mk-proof-line strong { display: block; color: var(--ink); font-size: 1.6rem; font-weight: 600; }
  .mk-dial-code { padding: .1rem .8rem; border-radius: var(--r-control); background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: 1.6rem; font-weight: 600; }
  .mk-status-list { display: flex; gap: .8rem; margin: 0; padding: 0; list-style: none; }
  .mk-status-item { display: grid; gap: .2rem; padding: 1rem 1.8rem; border-radius: var(--mk-r-card); background: var(--surface); }
  .mk-status-item span { color: var(--ink-2); font-size: 1.2rem; }
  .mk-status-item b { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.3rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .mk-status-item b::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: var(--kind); }

  .mk-channel-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
  .mk-channel { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 2.4rem; }
  .mk-channel-list { grid-template-rows: auto 1fr; row-gap: 0; }
  .mk-channel-art { position: relative; height: 40rem; overflow: hidden; padding: 3.6rem 2.4rem 0; border-radius: var(--mk-r); background: var(--kind-soft); }
  .mk-channel-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--kind) 30%, transparent) 1.1px, transparent 1.3px); background-size: 18px 18px; pointer-events: none; }
  .mk-channel-art .device { position: relative; margin: 0 auto; }
  .mk-channel-art .device { zoom: .84; }
  .mk-channel-art .chat-log { overflow: hidden; }
  .mk-channel-copy { display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: 0 .8rem; }
  .mk-channel-copy p { margin: 0; color: var(--ink-2); line-height: 1.5; }
  .mk-channel-copy .mk-channel-name { display: flex; align-items: center; gap: .8rem; font-size: 2rem; color: var(--ink); }
  .mk-channel-name .icon { width: 2.4rem; height: 2.4rem; color: var(--kind); }
  .mk-channel-name .mk-tag { margin-left: .4rem; }
  .mk-channel-link { margin-top: .8rem !important; }

  .mk-teams { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
  .mk-team { display: grid; align-content: start; gap: .6rem; }
  .mk-team img { display: block; width: 100%; height: auto; margin-bottom: 1.2rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: var(--mk-r); }
  .mk-team h3 { margin: 0; font-size: 1.7rem; font-weight: 400; line-height: 1.3; }
  .mk-team p { margin: 0; color: var(--ink-2); font-size: 1.4rem; line-height: 1.5; }
  .mk-team .mk-team-tag { justify-self: start; margin-bottom: .2rem; padding: .2rem .9rem; border-radius: 999px; background: var(--kind); color: var(--on-accent); font-size: 1.2rem; font-weight: 600; }
  .mk-team.is-menu .mk-team-tag { color: #1c2420; }
  .is-marketing .ussd-buttons .ussd-button { display: grid; place-items: center; }
  .mk-phone-input { display: block; line-height: 26px; text-align: left; letter-spacing: .12em; }
  .mk-lock { background: var(--mk-lock); color: #fff; }
  .mk-lock-date { margin: 2.4rem 0 0; font-size: 15px; font-weight: 600; text-align: center; opacity: .9; }
  .mk-lock-time { margin: 0; font-size: 72px; font-weight: 300; line-height: 1; letter-spacing: -.02em; text-align: center; }
  .mk-lock-notes { display: grid; gap: 6px; margin: 3.2rem 8px 0; color: var(--phone-ink); }

  .mk-tab-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .mk-tab { display: grid; gap: .4rem; padding: 1.4rem 1.8rem; border: 0; border-bottom: 3px solid var(--line-strong); border-radius: var(--r-card) var(--r-card) 0 0; background: var(--surface); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
  .mk-tab b, .mk-chapter-number { display: inline-flex; align-items: center; gap: .8rem; margin: 0; color: var(--ink-2); font-family: var(--mono); font-size: 1.2rem; font-weight: 400; }
  :is(.mk-tab b, .mk-chapter-number)::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: var(--kind); }
  .mk-tab span { font-size: 1.6rem; }
  .mk-tab:hover { background: var(--surface-hover); border-bottom-color: var(--kind); color: var(--ink); }
  .mk-tab[aria-selected="true"] { background: var(--kind-soft); border-bottom-color: var(--kind); color: var(--ink); }
  .mk-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .mk-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6.4rem; align-items: center; padding-top: 4rem; }
  .mk-panel[hidden] { display: none; }
  .mk-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
  .mk-panel-link { margin: 3.2rem 0 0; }
  .mk-panel-next { display: inline-flex; align-items: center; gap: .8rem; margin-top: 2.4rem; }
  .mk-panel-next[hidden] { display: none; }
  .mk-art { position: relative; display: grid; place-items: center; min-height: 44rem; padding: 4rem; border-radius: var(--mk-r); background: var(--kind-soft, var(--surface)); }
  .mk-art::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(color-mix(in srgb, var(--kind, var(--ink-3)) 30%, transparent) 1.1px, transparent 1.3px); background-size: 18px 18px; pointer-events: none; }
  .mk-art > * { position: relative; width: 100%; }
  .mk-art .ill-build { width: 78.6rem; max-width: none; zoom: .78; }
  :is(.mk-grid, .mk-controls-row, .mk-control-grid) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4.8rem 3.2rem; margin: 0; padding: 0; list-style: none; }
  .mk-grid { margin-top: 8.8rem; }
  .mk-controls-row { margin-top: 5.6rem; }
  .mk-control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(.mk-grid, .mk-controls-row, .mk-control-grid) > * { display: grid; align-content: start; gap: 1.2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
  .mk-cell h3 .mk-tag { margin-left: .6rem; }
  :is(.mk-grid, .mk-controls-row, .mk-control-grid) dt { display: grid; gap: 1.2rem; }
  :is(.mk-grid, .mk-controls-row, .mk-control-grid) .pictogram { margin-bottom: 1.2rem; color: var(--ink); }
  :is(.mk-grid, .mk-controls-row, .mk-control-grid) :is(h3, dt) { margin: 0; font-size: 1.8rem; font-weight: 400; line-height: 1.35; }
  :is(.mk-grid, .mk-controls-row, .mk-control-grid) :is(p, dd) { margin: 0; color: var(--ink-2); line-height: 1.5; }

  /* --p, when a scene sets it, is scroll progress. */
  .ill { position: relative; --t: clamp(0, calc((var(--p, 1) - .06) * 1.8), 1); font-size: 1.35rem; }
  .ill-caption, .mk-callback-title, .mk-pair-cell > p, .mk-works-with p { margin: 0; color: var(--ink-3); font-size: 1.25rem; font-weight: 400; line-height: 1.4; }
  .ill-caption { margin-bottom: 1rem; }

  .ill-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem 3.6rem; align-items: start; padding: 0 2.4rem 0 0; }
  .ill-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .ill-wire { --w: clamp(0, calc((var(--p, 1) - .38) * 2.6), 1); fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--w)); }
  .ill-wire.is-menu { stroke: var(--menu); }
  .ill-wire.is-input { stroke: var(--input); }
  .ill-wire.is-router { stroke: var(--router); }
  .ill-wire.is-muted { stroke-dasharray: 1; opacity: .45; }
  .ill-build .node.ill-node { position: relative; grid-column: var(--col); grid-row: var(--row); width: auto; min-width: 0; max-width: none; box-shadow: var(--shadow-float); opacity: calc(.1 + .9 * var(--t)); transform: translate(calc(var(--dx) * (1 - var(--t))), calc(var(--dy) * (1 - var(--t)))) rotate(calc(var(--r) * (1 - var(--t)))); }
  .ill-build .node.is-router { align-self: center; background: var(--surface); }
  .ill-build .node[data-wire="enter_pin"] { margin-top: 5.6rem; }

  .ill-dialog { position: relative; max-width: 52rem; margin: 0 auto; padding: 2.4rem; border-radius: var(--mk-r-card); background: var(--surface); box-shadow: var(--mk-lift); }
  .ill-dialog-context { margin: 0; font-size: 1.3rem; color: var(--ink-3); }
  .ill-dialog-title { margin: .2rem 0 1.8rem; font-size: 2rem; font-weight: 400; }
  .ill-gate-row { --on: clamp(0, calc((var(--p, 1) - .18 - var(--i) * .1) * 8), 1); }
  .ill-gate-row .gate-mark { color: color-mix(in srgb, var(--ok) calc(var(--on) * 100%), var(--line-strong)); }
  .ill-gate-row .gate-mark::before { content: ""; width: 100%; height: 100%; background: currentColor; mask: url("/assets/icons/carbon-checkmark-filled-f135ea7e.svg") center / contain no-repeat; }
  .ill-gate-row .gate-title { opacity: calc(.45 + .55 * var(--on)); }
  .ill-scenarios { display: grid; gap: .6rem; margin: 1.8rem 0 2rem; padding: 1.2rem; border-radius: var(--mk-r-card); background: var(--surface-2); }
  .ill-scenario { --on: clamp(0, calc((var(--p, 1) - .5 - var(--i) * .08) * 8), 1); display: flex; align-items: center; gap: .8rem; margin: 0; font-size: 1.35rem; }
  .ill-scenario .icon { width: 1.6rem; height: 1.6rem; color: var(--ink-3); }
  .ill-scenario code { margin-left: auto; font-size: 1.2rem; color: var(--ink-3); }
  .ill-pass { padding: .1rem .8rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); font-size: 1.15rem; opacity: var(--on); }
  .ill-publish { --done: clamp(0, calc((var(--p, 1) - .78) * 8), 1); width: 100%; opacity: calc(.35 + .65 * var(--done)); }
  .ill-publish .icon { width: 1.8rem; height: 1.8rem; }

  .ill-pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2.4rem; align-items: center; }
  .ill-pin-phone { display: grid; gap: 1rem; padding: 2rem; border-radius: var(--mk-r-card); background: var(--phone-keypad); color: var(--phone-ink); box-shadow: var(--mk-lift); }
  .ill-pin-phone .ill-caption { color: var(--phone-muted); }
  .ill-pin-field { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .ill-pin-field span { --m: clamp(0, calc((var(--p, 1) - .28 - var(--i) * .07) * 7), 1); position: relative; display: grid; place-items: center; height: 5.2rem; border-radius: .6rem; background: var(--phone-key); font-family: var(--phone-font); font-size: 2.4rem; }
  .ill-pin-field b { font-weight: 400; opacity: calc(1 - var(--m)); }
  .ill-pin-field i { position: absolute; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--phone-ink); opacity: var(--m); transform: scale(var(--m)); }
  .ill-pin-note { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 0; font-size: 1.3rem; font-weight: 600; color: var(--error); opacity: clamp(0, calc((var(--p, 1) - .55) * 6), 1); }
  .ill-lock .icon { width: 1.6rem; height: 1.6rem; }
  .ill-terminal { overflow: hidden; border-radius: var(--mk-r-card); background: #161616; color: #e0e0e0; box-shadow: var(--mk-lift); }
  .ill-terminal-bar { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 1rem 1.4rem; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: 1.2rem; }
  .ill-terminal-bar span { width: 1rem; height: 1rem; border-radius: 50%; background: #393939; }
  .ill-terminal-bar em { font-family: var(--mono); font-style: normal; color: #a8a8a8; }
  .ill-terminal-bar span + em { margin-left: .8rem; }
  .ill-json { margin: 0; padding: 1.6rem 1.8rem 2rem; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 1.3rem; line-height: 1.75; }
  .ill-json code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
  .j-k { color: #82cfff; }
  .j-s { color: #f1c21b; }
  .j-n { color: #be95ff; }
  .j-p { color: #a8a8a8; }
  .ill-hl { --h: clamp(0, calc((var(--p, 1) - .5) * 6), 1); margin: 0 -.6rem; padding: .2rem .6rem; background: rgb(255 126 182 / calc(var(--h) * .2)); box-shadow: inset 2px 0 0 rgb(255 126 182 / var(--h)); }

  .ill-version { display: grid; gap: 2rem; }
  .ill-environments { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ill-environments .deploy-place { border-radius: var(--mk-r-card); box-shadow: var(--shadow-float); }
  .ill-live-label { position: relative; display: inline-grid; }
  .ill-live-label span { grid-area: 1 / 1; }
  .ill-live-label .is-old { opacity: calc(1 - clamp(0, calc((var(--p, 1) - .55) * 10), 1)); }
  .ill-live-label .is-new { opacity: clamp(0, calc((var(--p, 1) - .55) * 10), 1); }
  .ill-approvers { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; color: var(--ink-2); }
  .ill-approvers span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-right: -1rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--input-soft); color: var(--input-ink); font-size: 1rem; font-weight: 600; }
  .ill-approvers span:first-child { background: var(--menu-soft); color: var(--menu-ink); }
  .ill-approvers span:nth-child(2) { margin-right: .4rem; }
  .ill-lanes { position: relative; padding: 4.8rem 2rem 1.2rem; overflow: hidden; border-radius: var(--mk-r-card); background: var(--surface); }
  .ill-lane { position: relative; height: 7.2rem; border-top: 1px solid var(--line); }
  .ill-lane-label { position: absolute; left: 0; top: .8rem; font-family: var(--mono); font-size: 1.2rem; color: var(--ink-3); }
  .ill-session { position: absolute; top: 3.2rem; left: var(--from); width: calc(var(--to) - var(--from)); height: 1.2rem; border-radius: 999px; background: var(--line-strong); }
  .ill-session.is-new { background: var(--router); }
  .ill-session.is-caller { background: var(--live-soft); box-shadow: inset 0 0 0 2px var(--live); }
  .ill-session em { position: absolute; left: 0; top: calc(100% + .4rem); color: var(--live-ink); font-size: 1.2rem; font-style: normal; white-space: nowrap; }
  .ill-deploy { --d: clamp(0, calc((var(--t) - .48) * 12), 1); position: absolute; left: 49%; top: 1.2rem; bottom: 0; z-index: 2; width: 2px; background: var(--danger); opacity: var(--d); }
  .ill-deploy em { position: absolute; left: 50%; top: 0; padding: .2rem .8rem; border-radius: 999px; background: var(--danger); color: var(--on-danger); font-size: 1.15rem; font-style: normal; transform: translateX(-50%); }
  .ill-sweep { position: absolute; top: 4.4rem; bottom: 0; left: calc(var(--t) * 100%); right: -3rem; z-index: 1; background: linear-gradient(90deg, transparent, var(--surface) 3rem); }

  .ill-watch { display: grid; gap: 1.6rem; }
  .ill-traffic { padding: 1.8rem 2rem; border-radius: var(--mk-r-card); background: var(--surface); box-shadow: var(--mk-lift); }
  .ill-traffic .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ill-traffic .stat dd { font-size: 2rem; }
  .ill-rate { position: relative; display: inline-grid; }
  .ill-rate span { grid-area: 1 / 1; }
  .ill-rate .is-bad-value { color: var(--error); opacity: calc(1 - clamp(0, calc((var(--p, 1) - .78) * 10), 1)); }
  .ill-rate .is-good-value { color: var(--ok); opacity: clamp(0, calc((var(--p, 1) - .78) * 10), 1); }
  .ill-traffic-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; margin-top: 2rem; }
  .ill-traffic .traffic-heading { margin-bottom: 1rem; font-size: 1.3rem; }
  .ill-traffic .funnel-step { grid-template-columns: 9rem minmax(0, 1fr) 2rem; }
  .ill-traffic .funnel.is-counted .funnel-step { grid-template-columns: 9rem minmax(0, 1fr) 3.4rem; }
  .ill-traffic .funnel-name { font-size: 1.25rem; }
  .ill-traffic .funnel-bar span { width: calc(var(--w) * 1% * clamp(0, calc((var(--p, 1) - .1 - var(--i) * .06) * 2.2), 1)); }
  .ill-slack { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.2rem; padding: 1.6rem 1.8rem; border-radius: var(--mk-r-card); background: var(--surface); }
  .ill-slack-avatar { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--mk-r-card); background: var(--inverse); }
  .ill-slack-avatar .mark { width: 2.6rem; height: 2.6rem; }
  .ill-slack-name { margin: 0; font-weight: 600; }
  .ill-slack-name span { margin-left: .4rem; padding: 0 .4rem; background: var(--surface-2); color: var(--ink-3); font-size: 1rem; font-weight: 600; }
  .ill-slack-text { margin: .6rem 0 0; padding-left: 1rem; border-left: 3px solid; line-height: 1.45; }
  .ill-slack-text.is-alert { border-color: var(--error); opacity: clamp(0, calc((var(--p, 1) - .4) * 8), 1); }
  .ill-slack-text.is-resolved { border-color: var(--ok); opacity: clamp(0, calc((var(--p, 1) - .78) * 8), 1); }

  .mk-story { max-width: 124rem; margin: 0 auto; padding: 9.6rem 2.4rem 4.8rem; }
  .mk-story-head { padding-bottom: 2.4rem; }
  .mk-story-body { display: grid; grid-template-columns: minmax(0, 1fr) 29rem; gap: 7.2rem; }
  .mk-story-sticky { position: sticky; top: max(14rem, calc(50svh - 30rem)); display: grid; justify-items: center; gap: 1.6rem; padding-bottom: 2.4rem; }
  .mk-story-phone .device { zoom: .92; filter: drop-shadow(0 30px 40px rgb(var(--shade) / .3)); }
  @media (max-height: 820px) { .mk-story-phone .device { zoom: .82; } }
  @media (max-height: 720px) { .mk-story-phone .device { zoom: .74; } }
  .mk-story-caption { min-height: 2.8em; max-width: 26rem; margin: 0; color: var(--ink-2); font-size: 1.4rem; line-height: 1.4; text-align: center; text-wrap: balance; }
  .mk-story-progress { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
  .mk-story-progress li { width: 1.6rem; height: .3rem; background: var(--line-strong); transition: width .2s ease, background-color .2s ease; }
  .mk-story-progress li.is-current { width: 3.2rem; background: var(--kind); }
  .mk-chapter { display: grid; align-content: center; gap: 3.2rem; min-height: calc(100svh - 12rem); padding: 4rem 0; transition: opacity .25s ease; }
  .mk-story[data-chapter] .mk-chapter:not(.is-current) { opacity: .6; }
  .mk-story .is-warning { --kind: var(--warning); --kind-soft: var(--warning-soft); --kind-ink: var(--ink); }
  .mk-chapter-copy { display: grid; gap: 1.2rem; }
  .mk-chapter-title { max-width: 24ch; margin: 0; font-size: clamp(2.6rem, 2.6vw, 3.4rem); font-weight: 300; line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
  .mk-chapter-body { max-width: 52ch; margin: 0; color: var(--ink-2); font-size: 1.7rem; line-height: 1.5; }
  .mk-chapter-art { position: relative; margin: 0; padding: 4rem; overflow: hidden; border-radius: var(--mk-r); background: var(--kind-soft); }
  .mk-chapter-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--kind) 30%, transparent) 1.1px, transparent 1.3px); background-size: 18px 18px; opacity: .7; pointer-events: none; }
  .mk-chapter-art > * { position: relative; }
  .mk-chapter-art .ill-build { width: 78.6rem; max-width: none; zoom: .78; }
  .mk-chapter-screen { display: none; }
  .mk-story-phone :is(.dial-key, .call-key, .phone-key) { cursor: default; }
  .mk-story-phone .dial-key.is-pressed { background: var(--phone-dial-key-press); }
  .mk-story-phone .call-key.is-pressed { filter: brightness(.85); }
  .mk-story-phone .phone-key.is-pressed { background: var(--phone-key-press); }
  .mk-story-phone .mk-phone-dismiss { display: none !important; }
  .mk-story-phone .ussd-buttons.is-ended { grid-template-columns: 1fr; }
  .mk-story-phone .ussd-buttons.is-ended > .ussd-button { display: none; }
  .mk-story-phone .ussd-buttons.is-ended > .mk-phone-dismiss { display: grid !important; place-items: center; border-left: 0; }
  .mk-story-phone .device-screen:has(.keypad[hidden]) .ussd-stage { bottom: 0; }
  .mk-story-phone .ussd-stage { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .mk-phone-running { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; transform: translate(-50%, -50%); border-radius: 13px; background: var(--phone-alert); color: var(--phone-ink); font-family: var(--phone-font); font-size: 13px; white-space: nowrap; }
  .ussd-stage:has(.mk-phone-running:not([hidden])) .ussd-dialog { visibility: hidden; }

  .ill-retry { display: grid; gap: 1.6rem; }
  .ill-waterfall { padding: 1.6rem 1.8rem; border-radius: var(--mk-r-card); background: var(--surface); box-shadow: var(--mk-lift); }
  .ill-wf-head, .ill-wf-row { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 1.2rem; }
  .ill-wf-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); margin: 0; padding: 0 0 1rem 6.8rem; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 1.2rem; }
  .ill-wf-row { --on: clamp(0, calc((var(--p, 1) - .15 - var(--i) * .15) * 5), 1); padding: 1.1rem 0; border-bottom: 1px solid var(--line); opacity: calc(.25 + .75 * var(--on)); }
  .ill-wf-row:last-child { border-bottom: 0; }
  .ill-wf-row.is-child code { padding-left: 1.4rem; color: var(--ink-2); }
  .ill-wf-row code { padding: 0; border: 0; background: none; overflow: hidden; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
  .ill-method { justify-self: start; padding: .15rem .6rem; background: var(--input-soft); color: var(--input-ink); font-family: var(--mono); font-size: 1.1rem; font-weight: 600; }
  .ill-method.is-out { background: var(--router-soft); color: var(--router-ink); }
  .ill-method.is-retry { background: var(--live-soft); color: var(--live-ink); }
  .ill-method.is-log { background: var(--ok-soft); color: var(--ok-ink); }
  .ill-wf-bar { position: relative; height: 2.2rem; }
  .ill-wf-bar::before { content: ""; position: absolute; left: var(--start); top: .6rem; width: calc(var(--width) * var(--on)); min-width: .6rem; height: 1rem; border-radius: 999px; background: var(--bar); }
  .ill-wf-bar em { position: absolute; left: var(--start); top: -1.2rem; color: var(--ink-3); font-family: var(--mono); font-size: 1.1rem; font-style: normal; white-space: nowrap; opacity: var(--on); }
  .ill-wf-row.is-replayed .ill-wf-bar em { left: auto; right: 0; }
  .ill-wf-bar.is-input { --bar: var(--input); }
  .ill-wf-bar.is-bank { --bar: var(--router); }
  .ill-wf-bar.is-live { --bar: var(--live); }
  .ill-wf-bar.is-log { --bar: var(--ok); }
  .ill-tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .ill-tally p { display: flex; align-items: center; gap: 1.4rem; margin: 0; padding: 1.4rem 1.8rem; border-radius: var(--mk-r-card); background: var(--surface); color: var(--ink-2); line-height: 1.35; }
  .ill-tally-number { color: var(--live); font-size: 4.8rem; font-weight: 300; line-height: 1.04; }
  .ill-tally .is-good .ill-tally-number { color: var(--ok); }

  .mk-data { --ok-soft: #1f6b4c; --ok-ink: #c3f0d6; }
  .mk-tone.is-ink { --band: var(--mk-ink-band); }
  .mk-tone.is-forest { --band: var(--mk-forest); }
  .mk-tone.is-violet { --band: var(--mk-violet); }
  .mk-tone.is-amber { --band: var(--mk-amber); }
  .mk-tone.is-grey { --band: #f4f4f4; }
  :root[data-theme="dark"] .mk-tone.is-ink { --band: #212b26; }
  :root[data-theme="dark"] .mk-tone.is-grey { --band: #202020; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-tone.is-ink { --band: #212b26; } :root:not([data-theme="light"]) .mk-tone.is-grey { --band: #202020; } }
  .mk-tone.is-amber > :not(.mk-art) { --bg: var(--band); --surface: #fff7e6; --ink: #1c2420; --ink-2: rgb(28 36 32 / .82); --ink-3: rgb(28 36 32 / .66); --line: rgb(28 36 32 / .18); --line-strong: rgb(28 36 32 / .32); color: var(--ink); }
  .mk-tone.is-grey > * { --surface: var(--bg); }
  :root[data-theme="dark"] .mk-tone.is-amber { --band: #2e2410; }
  :root[data-theme="dark"] .mk-tone.is-amber > :not(.mk-art) { --surface: color-mix(in srgb, #ffffff 9%, var(--band)); --ink: #f4f7f4; --ink-2: rgb(244 247 244 / .8); --ink-3: rgb(244 247 244 / .62); --line: rgb(255 255 255 / .16); --line-strong: rgb(255 255 255 / .3); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-tone.is-amber { --band: #2e2410; } :root:not([data-theme="light"]) .mk-tone.is-amber > :not(.mk-art) { --surface: color-mix(in srgb, #ffffff 9%, var(--band)); --ink: #f4f7f4; --ink-2: rgb(244 247 244 / .8); --ink-3: rgb(244 247 244 / .62); --line: rgb(255 255 255 / .16); --line-strong: rgb(255 255 255 / .3); } }
  .mk-tone:is(.is-ink, .is-forest, .is-amber) .mk-art { box-shadow: var(--mk-lift); }
  .mk-tone a:not(.btn) { color: inherit; }
  .ill-residency { display: grid; grid-template-columns: minmax(0, .9fr) 17rem minmax(0, 2.4fr); align-items: stretch; --t: clamp(0, calc((var(--p, 1) - .1) * 2), 1); }
  .res-zone { position: relative; display: grid; align-content: center; padding: 5.6rem 2.4rem 2.4rem; border-radius: var(--mk-r); }
  .res-zone.is-outside { border: 1px dashed var(--line-strong); }
  .res-zone.is-inside { border: 2px solid var(--end); background: rgb(255 255 255 / .04); }
  .res-zone-label { position: absolute; left: 2rem; top: 1.6rem; margin: 0; padding: .3rem 1rem; border-radius: 999px; font-size: 1.2rem; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .res-zone.is-inside .res-zone-label { background: var(--end); color: #161616; box-shadow: none; }
  .res-node { display: grid; align-content: start; gap: .4rem; padding: 1.6rem 1.8rem 1.8rem; border-radius: 1.6rem; background: var(--surface); }
  .res-node p { margin: 0; }
  .res-icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: .6rem; border-radius: var(--mk-r-card); background: rgb(255 255 255 / .1); color: var(--ink); }
  .res-icon .icon { width: 2.2rem; height: 2.2rem; }
  .res-icon .mark { width: 2.4rem; height: 2.4rem; }
  .res-name { font-size: 1.6rem; font-weight: 600; line-height: 1.25; }
  .res-does { font-size: 1.35rem; line-height: 1.45; color: var(--ink-2); }
  .res-node.is-runtime { --ink: #0b2e20; --ink-2: #33574a; border: 0; background: var(--mk-on-band); color: var(--ink); box-shadow: var(--mk-lift); }
  .res-node.is-runtime .res-icon { background: var(--mk-forest); }
  .res-chip { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; margin-top: .8rem !important; padding: .3rem .9rem; border-radius: 999px; background: #dff3e7; color: #0b2e20; font-size: 1.2rem; }
  .res-chip .icon { width: 1.4rem; height: 1.4rem; }
  .res-map { display: grid; grid-template-columns: minmax(0, 1fr) 16rem minmax(0, 1fr); grid-template-rows: auto 8.8rem auto; grid-template-areas: "runtime api-link api" "callbacks . ." "aggregator ussd callers"; }
  .res-node.is-runtime { grid-area: runtime; }
  .res-node.is-api { grid-area: api; }
  .res-node.is-aggregator { grid-area: aggregator; }
  .res-node.is-callers { grid-area: callers; }
  .res-link { position: relative; display: grid; place-items: center; margin: 0; }
  .res-link.is-api { grid-area: api-link; --line: var(--router); }
  .res-link.is-callbacks { grid-area: callbacks; --line: var(--message); }
  .res-link.is-ussd { grid-area: ussd; --line: var(--menu); }
  .res-line { position: absolute; background: var(--line); }
  .res-link.is-api .res-line, .res-link.is-ussd .res-line { left: .4rem; right: .4rem; top: 50%; height: 2px; transform: scaleX(var(--t)); }
  .res-link.is-callbacks .res-line { top: .4rem; bottom: .4rem; left: 50%; width: 2px; transform: scaleY(var(--t)); transform-origin: bottom; }
  .res-link.is-api .res-line { transform-origin: left; }
  .res-link.is-ussd .res-line { transform-origin: right; }
  .res-line::before, .res-line::after { content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; }
  .res-link.is-api .res-line::before { left: -2px; top: -5px; border-right: 9px solid var(--line); border-left: 0; }
  .res-link.is-api .res-line::after { right: -2px; top: -5px; border-left: 9px solid var(--line); border-right: 0; }
  .res-link.is-ussd .res-line::before { left: -2px; top: -5px; border-right: 9px solid var(--line); border-left: 0; }
  .res-link.is-callbacks .res-line::before { top: -2px; left: -5px; border-bottom: 9px solid var(--line); border-top: 0; }
  .res-link-label { position: relative; z-index: 1; padding: .3rem .8rem; border-radius: 999px; background: var(--band); box-shadow: inset 0 0 0 1px var(--line); color: var(--line); font-size: 1.15rem; text-align: center; white-space: nowrap; opacity: var(--t); }
  .res-border { position: relative; display: grid; align-content: center; gap: 2.4rem; padding: 0 1rem; }
  .res-border-line { position: absolute; left: 50%; top: -1.6rem; bottom: -1.6rem; border-left: 2px dashed rgb(255 255 255 / .4); }
  .res-flow { --flow: #ffc861; position: relative; z-index: 1; display: grid; gap: .3rem; margin: 0; padding: 1.2rem 1.2rem 1.3rem; border-radius: var(--mk-r-card); background: var(--band); box-shadow: inset 0 0 0 1px var(--line-strong); text-align: center; }
  .res-flow.is-out { --flow: var(--live); }
  .res-flow b { font-size: 1.35rem; font-weight: 600; color: var(--flow); }
  .res-flow > span:last-child { font-size: 1.15rem; line-height: 1.4; color: var(--ink-2); }
  .res-arrow { position: relative; height: 2px; margin: .2rem .6rem .6rem; background: var(--flow); transform: scaleX(var(--t)); }
  .res-flow.is-in .res-arrow { transform-origin: left; }
  .res-flow.is-out .res-arrow { transform-origin: right; }
  .res-arrow::after { content: ""; position: absolute; top: -5px; border: 6px solid transparent; }
  .res-flow.is-in .res-arrow::after { right: -2px; border-left: 9px solid var(--flow); border-right: 0; }
  .res-flow.is-out .res-arrow::after { left: -2px; border-right: 9px solid var(--flow); border-left: 0; }
  .res-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin-top: 1.6rem; }
  .res-summary > div { padding: 2rem 2.4rem; border-radius: var(--mk-r-card); background: rgb(255 255 255 / .06); }
  .res-summary .is-stays { --summary: var(--end); }
  .res-summary .is-crosses { --summary: var(--menu); }
  .res-summary-title { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 600; }
  .res-summary ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
  .res-summary li { position: relative; padding-left: 2.4rem; color: var(--ink-2); }
  .res-summary .is-stays li::before { content: ""; position: absolute; top: .2em; left: 0; width: 1.6rem; height: 1.6rem; background: var(--end); mask: url("/assets/icons/carbon-checkmark-filled-f135ea7e.svg") center / contain no-repeat; }
  .res-summary .is-crosses li::before { content: "⇄"; position: absolute; left: 0; color: var(--menu); }
  .mk-data-foot { display: flex; flex-wrap: wrap; gap: 1.6rem 4rem; align-items: center; margin-top: 4.8rem; }
  .mk-data-foot .hint, .mk-data-rules { max-width: 80ch; margin: 0; color: var(--ink-3); }
  .mk-data-rules { margin-top: 3.2rem; }

  .mk-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
  .mk-plan { display: grid; align-content: start; gap: 1.2rem; padding: 3.2rem 3.2rem 3.6rem; border-radius: var(--mk-r); background: var(--surface); }
  .mk-plan:first-child { --ink: #1c2420; --ink-2: #3a3320; background: var(--mk-amber); color: var(--ink); }
  .mk-plan:last-child { background: var(--band); }
  .mk-plan:is(:first-child, :last-child) .btn--ghost { border-color: var(--ink); color: var(--ink); }
  .mk-plan:last-child .btn--ghost:hover { background: var(--ink); color: #161616; }
  .mk-plan:first-child .btn--ghost:hover { background: var(--ink); color: var(--mk-amber); }
  .mk-plan.is-featured { box-shadow: inset 0 0 0 2px var(--primary); }
  .mk-plan:last-child { --band: var(--mk-ink-band); }
  .mk-plan-price { margin: 0; font-size: 3.2rem; font-weight: 300; line-height: 1.15; }
  .mk-plan > p { margin: 0; color: var(--ink-2); }
  .mk-plan .mk-points { margin-top: 1.2rem; }
  .mk-plan .btn { justify-self: start; margin-top: 1.6rem; }

  .mk-close { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6.4rem; align-items: start; }
  .mk-close .mk-form { border: 0; background: var(--bg); box-shadow: var(--mk-lift); }
  .mk-close .mk-faq { margin-top: 4rem; }
  .mk-faq { border-top: 1px solid var(--line-strong); }
  .mk-question { border-bottom: 1px solid var(--line); }
  .mk-question summary { position: relative; padding: 2rem 4rem 2rem 0; font-size: 1.6rem; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
  .mk-question summary::-webkit-details-marker { display: none; }
  .mk-question summary::after { content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; font-weight: 300; color: var(--ink-3); }
  .mk-question[open] summary::after { content: "−"; }
  .mk-question summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .mk-question p { max-width: 64ch; margin: -.4rem 0 2.4rem; line-height: 1.6; color: var(--ink-2); }

  .mk-sub-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 6.4rem; align-items: start; max-width: 124rem; margin: 0 auto; padding: 4.8rem 2.4rem 0; }
  .mk-crumb { margin: 0 0 2.4rem; font-size: 1.4rem; color: var(--ink-2); }
  .mk-crumb a { color: var(--primary); text-decoration: none; }
  .mk-crumb a:hover { text-decoration: underline; }
  .mk-tag-line { margin: 0 0 1.6rem; }
  .mk-sub-hero .mk-lede { margin-top: 2.4rem; }
  .mk-sub-hero.is-plain { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .mk-works-with { display: grid; gap: 1.2rem; margin-top: 4rem; }
  .mk-logos { display: flex; flex-wrap: wrap; gap: 1.2rem; }
  .mk-logo { display: inline-grid; place-items: center; height: 5.6rem; padding: 0 1.8rem; border-radius: .4rem; background: #ffffff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
  .mk-logo img { display: block; width: auto; height: 3.2rem; }
  .mk-logo.is-africas-talking img { height: 3.4rem; }
  .mk-logo.is-mtn { background: #ffcb05; }
  .mk-logo.is-zamtel { padding: 0 .8rem; }
  .mk-logo.is-zamtel img { height: 4.4rem; }
  .mk-stage { position: relative; height: 52rem; }
  .mk-stage.on-amber { --stage-band: var(--mk-amber); }
  .mk-stage.on-forest { --stage-band: var(--mk-forest); }
  .mk-stage.on-violet { --stage-band: var(--mk-violet); }
  .mk-stage-block { position: absolute; inset: 4rem 0 3.2rem 8rem; border-radius: var(--mk-r-block); background: var(--stage-band); }
  .mk-stage-block::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(rgb(255 255 255 / .18) 1.2px, transparent 1.4px); background-size: 16px 16px; mask-image: linear-gradient(135deg, transparent 35%, #000); }
  .mk-stage-photo { position: absolute; right: 3.2rem; top: 0; width: 48%; margin: 0; overflow: hidden; border-radius: var(--mk-r-photo); box-shadow: var(--mk-lift); }
  .mk-stage-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .mk-stage-art { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .mk-stage-art > .device { position: absolute; left: 0; bottom: 0; zoom: .74; filter: drop-shadow(0 30px 40px rgb(var(--shade) / .35)); }
  .mk-stage-art > .mk-callback { position: absolute; left: 0; bottom: 0; width: 38rem; }
  .mk-stage-art > .node { top: auto; bottom: 6.4rem; width: 24rem; zoom: 1.2; }
  .mk-stage-art > .mk-callback code { font-size: 1.2rem; white-space: nowrap; }
  .mk-stage-art > .mk-callback, .mk-stage-art .ill-terminal { border: 1px solid var(--line); }
  :root[data-theme="dark"] .mk-stage-art > .mk-callback { background: var(--surface); }
  :root[data-theme="dark"] .mk-stage-art > .mk-callback .mk-callback-row.is-old { background: var(--surface-2); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-stage-art > .mk-callback { background: var(--surface); } :root:not([data-theme="light"]) .mk-stage-art > .mk-callback .mk-callback-row.is-old { background: var(--surface-2); } }
  :root[data-theme="dark"] .mk-stage-art .ill-terminal { background: #262626; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-stage-art .ill-terminal { background: #262626; } }
  .mk-stage-art .ill-json { font-size: 1.2rem; line-height: 1.6; }
  .mk-stage-art > .ill-pin { position: absolute; inset: 0; display: block; }
  .mk-stage-art > .ill-pin .ill-terminal { position: absolute; left: 0; bottom: 0; width: 27rem; }
  .mk-stage-art > .ill-pin .ill-pin-phone { display: none; }
  .mk-stage .node { flex: none; box-shadow: var(--mk-raise); cursor: default; }
  .mk-subnav { position: sticky; top: calc(6.4rem + 2px); z-index: 30; margin-top: 4.8rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
  .mk-subnav-inner { display: flex; align-items: center; max-width: 124rem; margin: 0 auto; padding: 0 2.4rem; }
  .mk-subnav-link { padding: 1.4rem 1.6rem 1.2rem; border-bottom: 2px solid transparent; color: var(--ink-2); font-size: 1.4rem; text-decoration: none; white-space: nowrap; }
  .mk-subnav-link:first-child { padding-left: 0; }
  .mk-subnav-link:hover { color: var(--ink); }
  .mk-subnav-link.is-on { border-color: var(--primary); color: var(--ink); }
  .mk-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6.4rem; align-items: center; }
  .mk-feature.is-flipped { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mk-feature.is-flipped > :first-child { order: 2; }
  .mk-feature.is-wide { grid-template-columns: minmax(0, 1fr); gap: 4.8rem; }
  .mk-feature.is-wide .mk-art { display: block; min-height: 0; padding: 0; background: none; }
  .mk-feature.is-wide .mk-art::before { content: none; }
  .mk-feature-body { max-width: 58ch; margin: 2.4rem 0 0; color: var(--ink-2); line-height: 1.6; }
  .mk-spot { width: min(30rem, 100%); margin: 0 0 2.4rem -1.2rem; }
  .mk-spot .spot { background: none; }
  .mk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.2rem; margin: 3.2rem 0 0; }
  .mk-list div { padding: 1.6rem 0; border-top: 1px solid var(--line); }
  .mk-list dt { font-size: 1.5rem; font-weight: 600; }
  .mk-list dd { margin: .4rem 0 0; color: var(--ink-2); font-size: 1.4rem; line-height: 1.5; }
  .mk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
  .mk-pair-cell { display: grid; gap: 1.2rem; align-content: start; }
  .mk-pair .node { position: relative; width: auto; box-shadow: var(--shadow-float); cursor: default; }
  .mk-render { overflow: hidden; border-radius: var(--mk-r-card); background: var(--bg); }
  .mk-render .ussd-dialog { margin: 1.2rem auto; }
  .mk-render.device-screen { height: auto; padding: 1.2rem; border-radius: var(--mk-r-card); }
  .mk-render.is-lock { padding: 1.2rem; background: var(--mk-lock); color: var(--phone-ink); }
  .mk-shot { display: grid; gap: 1.6rem; max-width: 64rem; padding: 2.4rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--mk-r-card); background: var(--bg); box-shadow: var(--mk-lift); zoom: .8; }
  .mk-shot > *, .mk-shot .send-bar { margin: 0; }
  .mk-shot .display { margin: 0; font-size: 3.6rem; }
  .mk-shot .sends-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-shot .sends-stats.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-shot-heading { margin: 0; font-size: 1.6rem; font-weight: 600; }
  .mk-shot.is-panel { gap: 0; padding: 0; }
  .mk-shot.is-panel .panel-body { padding-bottom: 2.4rem; }
  .mk-callback { display: grid; gap: 1.2rem; width: 100%; max-width: 48rem; padding: 2.4rem; border-radius: var(--mk-r-card); background: var(--bg); box-shadow: var(--mk-lift); }
  .mk-callback-row { display: grid; gap: .6rem; padding: 1.2rem 1.4rem; border-radius: var(--r-control); background: var(--surface); }
  .mk-callback-row span { font-size: 1.2rem; color: var(--ink-3); }
  .mk-callback-row code { padding: 0; border: 0; background: none; overflow-wrap: anywhere; font-size: 1.3rem; }
  .mk-callback-row.is-old code { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
  .mk-callback-row.is-new { background: var(--kind-soft, var(--surface)); box-shadow: inset 3px 0 0 var(--kind, var(--router)); }
  .mk-callback-arrow { justify-self: center; color: var(--ink-3); }
  .mk-callback-arrow .icon.is-down { width: 1.8rem; height: 1.8rem; rotate: 180deg; }
  .mk-callback-note { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 0; font-size: 1.3rem; color: var(--ink-2); }
  .mk-callback-note .icon { width: 1.6rem; height: 1.6rem; color: var(--ok); }
  .mk-swap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.6rem; }
  .mk-swap-side { padding: 2.8rem 3.2rem; border-radius: var(--mk-r-card); background: var(--surface); }
  .mk-swap-side.is-change { background: var(--router-soft); box-shadow: inset 0 3px 0 var(--router); }
  .mk-swap-title { display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem; }
  .mk-swap-title .icon { width: 1.8rem; height: 1.8rem; color: var(--ok); }
  .mk-swap-side.is-change .mk-swap-title .icon { color: var(--router); }
  .mk-swap ul { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
  .mk-swap li { display: grid; gap: .4rem; }
  .mk-swap strong { font-size: 1.7rem; font-weight: 600; }
  .mk-swap span { color: var(--ink-2); line-height: 1.5; }
  .mk-shadow { max-width: 56rem; }
  #weeks .mk-art { min-height: 0; padding: 4.8rem 4rem 6.4rem; background: var(--surface); }
  #weeks .mk-art::before { display: none; }
  .mk-gantt { position: relative; display: grid; grid-template-columns: 18rem repeat(8, minmax(0, 1fr)); grid-template-rows: 4.8rem 4.4rem repeat(5, 3.2rem); row-gap: .8rem; width: 100%; font-size: 1.3rem; line-height: 1.3; }
  .mk-gantt::before { content: ""; grid-row: 2 / -1; grid-column: 2 / -1; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%); pointer-events: none; }
  .mk-gantt-week { grid-row: 1; grid-column: calc(var(--from) + 1) / span 2; align-self: end; padding: 0 0 .8rem .8rem; border-bottom: 1px solid var(--line-strong); color: var(--ink-2); font-size: 1.1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .mk-gantt-row { grid-row: var(--row); grid-column: 1; display: flex; align-items: center; gap: .8rem; padding-right: 1.2rem; color: var(--ink-2); white-space: nowrap; }
  .mk-gantt-row.is-old { color: var(--ink); font-weight: 600; }
  .mk-gantt-row .icon { width: 1.8rem; height: 1.8rem; flex: none; color: var(--lane, var(--ink-3)); }
  .mk-gantt-bar { position: relative; z-index: 1; grid-row: var(--row); grid-column: calc(var(--from) + 1) / calc(var(--to) + 1); display: flex; align-items: center; min-width: 0; margin: 0 .3rem; padding: 0 1.2rem; border-radius: .4rem; background: var(--lane); color: #ffffff; font-size: 1.2rem; font-weight: 600; }
  .mk-gantt-bar > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  :is(.mk-gantt-row, .mk-gantt-bar).is-build { --lane: var(--input); }
  :is(.mk-gantt-row, .mk-gantt-bar).is-staging { --lane: var(--menu); }
  :is(.mk-gantt-row, .mk-gantt-bar).is-shadow { --lane: var(--router); }
  :is(.mk-gantt-row, .mk-gantt-bar).is-drill { --lane: var(--form); }
  :is(.mk-gantt-row, .mk-gantt-bar).is-live { --lane: var(--end); }
  .mk-gantt-bar.is-old { background: color-mix(in srgb, var(--ink) 14%, var(--surface)); color: var(--ink); font-weight: 500; }
  .mk-gantt-bar.is-standby { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--ink) 9%, transparent) 6px 8px); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-3); font-weight: 400; }
  .mk-gantt-switch { position: relative; z-index: 2; grid-row: 1 / -1; grid-column: calc(var(--at) + 1); margin-left: -1px; border-left: 2px dashed var(--ink); pointer-events: none; }
  .mk-gantt-switch > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem .4rem .8rem; background: var(--ink); color: var(--bg); font-size: 1.1rem; font-weight: 600; white-space: nowrap; translate: -50% 0; }
  .mk-gantt-switch .icon { width: 1.4rem; height: 1.4rem; }
  .mk-shadow .shadow-agreement { color: var(--ok-ink); }
  .mk-table-wrap { overflow-x: auto; border-radius: var(--mk-r-card); background: var(--surface); }
  .mk-table { width: 100%; min-width: 64rem; border-collapse: collapse; font-size: 1.5rem; line-height: 1.5; }
  .mk-table th, .mk-table td { padding: 1.4rem 1.8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .mk-table tbody tr:last-child > * { border-bottom: 0; }
  .mk-table thead th { color: var(--ink); font-size: 1.4rem; font-weight: 600; background: var(--surface-2); }
  .mk-table tbody th { width: 22%; color: var(--ink); font-weight: 600; }
  .mk-table td { color: var(--ink-2); }
  .mk-table-wrap + .hint { margin-top: 1.6rem; }
  .mk-report { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6.4rem; align-items: end; }
  .mk-report .mk-section-lede { margin: 0; }
  .mk-cta-band { background: var(--band); }
  .mk-cta-band-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: center; max-width: 124rem; margin: 0 auto; padding: 7.2rem 2.4rem; }
  .mk-cta-band .mk-section-lede { margin: 0 0 2.4rem; }
  .mk-review p { margin: 0 0 1.6rem; color: var(--ink-2); }
  .mk-review .hint { margin: 2.4rem 0 0; }
  .mk-guarded .scribble { width: auto; height: 10rem; margin: 0 0 1.6rem -1.6rem; }
  .mk-cta-band .mk-guarded .scribble { --spot: var(--mk-amber); --scribble-paper: color-mix(in srgb, #ffffff 16%, var(--mk-violet)); }

  .mk-join { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5.6rem; align-items: start; }
  .mk-join.is-page { padding-top: 6.4rem; }
  .mk-join-copy { position: sticky; top: 10.4rem; }
  .mk-join-copy .hint { margin-top: 2.4rem; }
  .mk-spot-panel { border-radius: var(--mk-r); background: var(--kind-soft); overflow: hidden; }
  .mk-spot-panel .spot { background: none; }
  .mk-join-copy .mk-spot-panel { max-width: 36rem; margin-bottom: 3.2rem; }
  .mk-partner { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 2.4rem; margin-top: 3.2rem; }
  .mk-partner .mk-points { margin-top: 1.2rem; }
  .mk-form { display: grid; gap: 2.2rem; padding: 3.2rem; border-radius: var(--mk-r); background: var(--surface); color: var(--ink); }
  .mk-form .label { display: block; margin-bottom: .5rem; }
  .mk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.6rem; }
  .mk-form-wide { grid-column: 1 / -1; }
  .mk-needs { margin: 0; padding: 0; border: 0; }
  .mk-more { padding: 1.2rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); }
  .mk-more[open] { padding-bottom: 2rem; }
  .mk-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; font-weight: 600; cursor: pointer; }
  .mk-more > summary .hint { font-weight: 400; }
  .mk-more > :not(summary) { margin-top: 1.6rem; }
  .mk-wait { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 1.6rem; margin-top: 4rem; }
  .mk-wait-card { display: grid; align-content: start; justify-items: start; gap: 1rem; padding: 2.4rem; border-radius: var(--mk-r-card); background: var(--surface); }
  .mk-wait-card p { margin: 0; color: var(--ink-2); line-height: 1.55; }
  .mk-needs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .6rem; }
  .mk-check { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-card); cursor: pointer; }
  .mk-check:has(input:checked) { border-color: var(--ink-3); background: var(--surface-2); }
  .mk-check input { flex: none; width: 1.7rem; height: 1.7rem; margin: .25rem 0 0; accent-color: var(--primary); }
  .mk-check strong { display: block; font-weight: 600; }
  .mk-check .hint { display: block; margin: .1rem 0 0; }
  .mk-consent { border: 0; padding: 0; color: var(--ink-2); }
  .mk-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
  .mk-form-actions .hint { margin: 0; }
  .mk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .mk-status { max-width: 76rem; padding-top: 7.2rem; }
  .mk-status-mark .mark { width: 5.6rem; height: 5.6rem; }
  .mk-status .mk-h1 { margin-top: 2rem; }
  .mk-status-back { margin: 4rem 0 0; }
  .mk-status-head { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 3.2rem; align-items: end; }
  .mk-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 4rem 0 0; padding: 0; list-style: none; }
  .mk-timeline-step { display: grid; gap: .4rem; padding: 1.6rem 0 0; border-top: 2px solid var(--line); color: var(--ink-3); }
  .mk-timeline-step strong { color: var(--ink-2); font-weight: 600; }
  .mk-timeline-step.is-reached { border-top-color: var(--primary); }
  .mk-timeline-step.is-current strong { color: var(--ink); }
  .mk-share { margin-top: 4.8rem; padding: 2.4rem; border-radius: var(--mk-r-card); background: var(--surface); }
  .mk-share > p { margin: .8rem 0 1.6rem; color: var(--ink-2); }
  .mk-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.4rem; margin: 4rem 0 2rem; }
  .mk-summary dt { font-size: 1.3rem; color: var(--ink-3); }
  .mk-summary dd { margin: .2rem 0 0; font-weight: 600; }

  .mk-prose { max-width: 76rem; padding-top: 7.2rem; }
  .mk-prose .mk-h3 { margin-top: 4rem; }
  .mk-prose p { max-width: 66ch; line-height: 1.65; color: var(--ink-2); }

  .mk-footer { --band: #161616; background: var(--band); }
  :root:not([data-theme="light"]) .mk-footer { --band: #0b0b0b; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .mk-footer { --band: #161616; } }
  .mk-footer a { color: var(--ink-2); text-decoration: none; }
  .mk-footer a:hover { color: var(--ink); text-decoration: underline; }
  .mk-footer-inner { max-width: 124rem; margin: 0 auto; padding: 7.2rem 2.4rem 0; }
  .mk-footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.8rem; padding-bottom: 5.6rem; }
  .mk-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .mk-footer-line { max-width: 22ch; margin: 0; font-size: clamp(2.2rem, 2.2vw, 2.8rem); font-weight: 300; line-height: 1.25; text-wrap: balance; }
  .mk-footer-end { display: inline-flex; align-items: center; gap: 1rem; margin: 0; font-family: var(--mono); font-size: 1.3rem; color: var(--ink-2); }
  .mk-footer-end-code { padding: .1rem .6rem; border-radius: .4rem; background: #044317; color: #a7f0ba; font-size: 1.15rem; font-weight: 600; }
  .mk-footer .mk-footer-cta { margin-top: .8rem; color: var(--on-primary); }
  .mk-footer .mk-footer-cta:hover { color: var(--on-primary); text-decoration: none; }
  .mk-footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem; }
  .mk-footer-heading { margin-bottom: 1.4rem; }
  .mk-footer-group ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 1.4rem; }
  .mk-footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2.4rem; padding: 2rem 0; border-top: 1px solid var(--line); }
  .mk-footer-note { margin: 0; font-size: 1.3rem; color: var(--ink-3); }
  .mk-footer-tools { display: flex; flex-wrap: wrap; gap: .8rem; }
  .mk-footer-tool { display: inline-flex; align-items: center; gap: .7rem; min-height: 3.6rem; padding: 0 1.4rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 1.3rem; cursor: pointer; }
  .mk-footer a.mk-footer-tool:hover, .mk-footer-tool:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
  .mk-footer-tool:focus-visible, .mk-footer a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
  .mk-footer-tool .icon { width: 1.6rem; height: 1.6rem; }

  .shadow-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.2rem; margin: 0 0 1rem; }
  .shadow-agreement { font-size: 2rem; font-weight: 650; color: var(--warning); }
  .shadow-agreement.is-ok { color: var(--ok-ink); }
  .shadow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
  .shadow-step { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .shadow-step.is-differing { border-left: 3px solid var(--warning); }
  .shadow-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: 1.3rem; }
  .shadow-step-head .hint { margin: 0; }
  .shadow-mark .icon { width: 1.6rem; height: 1.6rem; color: var(--ok); }
  .shadow-step.is-differing .shadow-mark .icon { color: var(--warning); }
  .shadow-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; margin-top: .8rem; }
  .shadow-pair .label { margin-bottom: .3rem; }
  .shadow-reply { margin: .6rem 0 0; padding: .8rem 1rem; border-radius: var(--r-control); background: var(--surface-2); font-family: var(--mono); font-size: 1.25rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .shadow-reply.is-ours { background: var(--warning-soft); }
  .shadow-writes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
  .shadow-write { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .4rem 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); font-size: 1.3rem; }
  .shadow-write.is-allowed { border-color: var(--ok-line); background: var(--ok-soft); }
  .shadow-write-mark .icon { width: 1.5rem; height: 1.5rem; color: var(--warning); }
  .shadow-write.is-allowed .shadow-write-mark .icon { color: var(--ok-ink); }
  .shadow-write-call { overflow-wrap: anywhere; font-size: 1.2rem; }
  .shadow-write-state { color: var(--ink-3); white-space: nowrap; }
  @media (max-width: 52rem) { .shadow-write { grid-template-columns: auto minmax(0, 1fr); } }

  @media (prefers-reduced-motion: reduce) { .mk-nav-menu > summary .icon, .mk-chapter, .mk-story-progress li { transition: none; } }

  @media (max-width: 1080px) {
    .mk-hero-stage { height: 60rem; }
    .mk-teams { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3.2rem; }
    .mk-proof { grid-template-columns: auto minmax(0, 1fr); }
    .mk-status-list { grid-column: 1 / -1; }
    .mk-channel-art { padding-inline: 1.6rem; }
    .mk-stage-art > .node { bottom: 2.4rem; zoom: 1; }
    .mk-story-body { grid-template-columns: minmax(0, 1fr); }
    .mk-story-phone { display: none; }
    .mk-chapter { min-height: 0; padding: 4.8rem 0 0; }
    .mk-story[data-chapter] .mk-chapter:not(.is-current) { opacity: 1; }
    .mk-chapter-screen { display: flex; align-items: center; gap: 1rem; width: fit-content; max-width: 100%; margin: 0 0 2.4rem; padding: .8rem 1.4rem; background: var(--phone-alert); color: var(--phone-ink); font-family: var(--phone-font); font-size: 1.35rem; line-height: 1.35; box-shadow: 0 12px 30px -18px rgb(var(--shade) / .5); }
    .mk-chapter-screen::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--kind); }
    :is(.mk-grid, .mk-control-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 879px) {
    .mk-nav, .mk-sign-in { display: none; }
    .mk-mobile-nav { display: block; }
    .mk-bar { gap: 1.2rem; padding: 0 1.6rem; }
    .mk-actions .mk-nav-link { padding-inline: .8rem; }
    .mk-section { padding: 6.4rem 1.6rem; }
    .mk-hero { gap: 4rem; padding: 4rem 1.6rem 4.8rem; }
    .mk-hero, .mk-head, .mk-panel, .mk-close, .mk-sub-hero, .mk-feature, .mk-feature.is-flipped, .mk-join, .mk-report, .mk-cta-band-inner, .mk-footer-top { grid-template-columns: minmax(0, 1fr); }
    .mk-head { gap: 1.6rem; margin-bottom: 3.2rem; }
    .mk-feature, .mk-panel, .mk-close, .mk-sub-hero { gap: 4rem; }
    .mk-feature.is-flipped > :first-child { order: 0; }
    .mk-hero-stage, .mk-stage { height: 48rem; max-width: 44rem; width: 100%; justify-self: center; }
    .mk-hero-block, .mk-stage-block { inset: 3.2rem 0 3.2rem 4rem; }
    .mk-hero-photo, .mk-stage-photo { right: 1.2rem; width: 58%; }
    .mk-hero-phone { width: 20rem; }
    .mk-hero-phone .device, .mk-stage-art > .device { zoom: .66; }
    .mk-chip { padding: .5rem 1.2rem .5rem .5rem; gap: .8rem; }
    .mk-chip .kind-icon { width: 2.8rem; height: 2.8rem; padding: .6rem; }
    .mk-chip small { display: none; }
    .mk-chip.is-menu { left: 5.6rem; top: .8rem; }
    .mk-chip.is-input { right: -.4rem; top: 4.8rem; }
    .mk-chip.is-router { left: 20.8rem; bottom: 1.6rem; }
    .mk-chip.is-end { right: 0; bottom: 10.4rem; }
    .mk-stage-art > .mk-callback { right: 0; bottom: 1.6rem; width: auto; padding: 1.6rem; }
    .mk-stage-art > .mk-callback code { font-size: 1.1rem; white-space: normal; }
    .mk-stage-art > .ill-pin { left: 0; right: 0; bottom: 1.6rem; grid-template-columns: minmax(0, 1fr); }
    .mk-stage-art > .ill-pin .ill-terminal { display: none; }
    .mk-stage-art > .ill-pin .ill-pin-phone { right: 1.2rem; bottom: 1.6rem; width: 20rem; }
    .mk-frame-line, .mk-frame-bar .btn, .mk-frame-tabs span:not(.is-on) { display: none; }
    .mk-frame-canvas { padding: 1.6rem; }
    .mk-proof { gap: 2rem; padding: 0 1.6rem; }
    .mk-status-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-status-item { padding: 1rem 1.2rem; }
    .mk-status-item b { white-space: normal; font-size: 1.2rem; }
    .mk-channel-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .mk-channel { grid-template-rows: auto auto; grid-row: auto; }
    .mk-channel-list { gap: 4rem; }
    .mk-teams { display: flex; gap: 1.2rem; margin-inline: -1.6rem; padding: 0 1.6rem 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.6rem; scrollbar-width: none; }
    .mk-team { flex: none; width: 70%; scroll-snap-align: start; }
    .mk-tab-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
    .mk-tab { padding: 1.2rem 1.4rem; }
    .mk-tab span { font-size: 1.4rem; }
    .mk-panel { padding-top: 3.2rem; }
    .mk-art { min-height: 0; padding: 2.4rem 1.6rem; overflow: hidden; }
    .mk-art .ill-build { width: auto; zoom: 1; }
    .mk-shot { padding: 1.6rem; }
    .mk-shot .sends-stat { padding: 1rem 1.2rem; }
    :is(.mk-grid, .mk-controls-row, .mk-control-grid) { gap: 3.2rem; }
    :is(.mk-grid, .mk-controls-row) { margin-top: 4.8rem; }
    :is(.mk-grid, .mk-controls-row, .mk-control-grid) .pictogram { width: 3.2rem; height: 3.2rem; margin-bottom: 0; }
    .mk-grid, .mk-controls-row, .mk-control-grid, .mk-plans, .mk-list, .mk-pair, .mk-form-grid, .mk-needs-grid, .mk-timeline, .mk-summary { grid-template-columns: minmax(0, 1fr); }
    .mk-plan { padding: 2.4rem; }
    .mk-sub-hero { padding: 4rem 1.6rem 0; }
    .mk-sub-hero.is-plain { grid-template-columns: minmax(0, 1fr); }
    .mk-subnav { margin-top: 4.8rem; }
    .mk-subnav-inner { padding: 0 1.6rem; overflow-x: auto; scrollbar-width: none; }
    .mk-cta-band-inner { padding: 5.6rem 1.6rem; gap: 2.4rem; }
    .mk-swap { grid-template-columns: minmax(0, 1fr); }
    .mk-gantt { grid-template-columns: 9.6rem repeat(8, minmax(0, 1fr)); grid-template-rows: 4.8rem 3.6rem repeat(5, 2.8rem); font-size: 1.1rem; }
    .mk-gantt-row { white-space: normal; line-height: 1.15; gap: .4rem; padding-right: .6rem; }
    .mk-gantt-row .icon { display: none; }
    .mk-gantt-bar { padding: 0 .4rem; font-size: 0; }
    .mk-gantt-week { padding-left: .2rem; font-size: .9rem; letter-spacing: 0; }
    .mk-gantt-switch > span { translate: -78% 0; }
    .mk-swap-side { padding: 2rem; }
    .mk-join-copy { position: static; }
    .mk-status-head { grid-template-columns: minmax(0, 1fr); }
    .mk-status-head .mk-spot-panel { max-width: 28rem; grid-row: 1; }
    .mk-join-copy .mk-spot-panel { max-width: 24rem; margin-bottom: 2.4rem; }
    .mk-form { padding: 2.4rem 1.6rem; }
    .mk-footer-inner { padding: 5.6rem 1.6rem 0; }
    .mk-footer-top { gap: 4rem; padding-bottom: 4rem; }
    .mk-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
    .ill-build { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; padding: 0; }
    .ill-build .node.ill-node { grid-column: auto; grid-row: auto; margin: 0 !important; }
    .ill-build .node[data-wire="auth_failed"], .ill-wires { display: none; }
    .ill-pin { grid-template-columns: minmax(0, 1fr); }
    .mk-story { padding: 6.4rem 1.6rem 1.6rem; }
    .mk-chapter { gap: 2.4rem; padding-top: 4rem; }
    .mk-chapter-art { padding: 1.6rem; }
    .mk-chapter-art .ill-build { width: auto; zoom: 1; }
    .ill-wf-head { display: none; }
    .ill-wf-row { grid-template-columns: 4.8rem minmax(0, 1fr); }
    .ill-wf-bar { grid-column: 1 / -1; }
    .ill-tally p { gap: 1rem; padding: 1.2rem; font-size: 1.3rem; }
    .ill-tally-number { font-size: 3.6rem; }
    .ill-json { font-size: 1.15rem; }
    .ill-environments { grid-template-columns: minmax(0, 1fr); }
    .ill-traffic .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ill-traffic .funnel-step { grid-template-columns: 8rem minmax(0, 1fr) 2rem; }
    .ill-traffic-split { grid-template-columns: minmax(0, 1fr); }
    .ill-residency { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .res-zone { padding: 5.2rem 1.6rem 1.6rem; }
    .res-border { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .8rem; padding: 2.4rem 0; }
    .res-border-line { left: -1.6rem; right: -1.6rem; top: 50%; bottom: auto; border-left: 0; border-top: 2px dashed rgb(255 255 255 / .4); }
    .res-arrow { display: none; }
    .res-flow.is-in b::before { content: "↓ "; }
    .res-flow.is-out b::before { content: "↑ "; }
    .res-map { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "callers" "ussd" "aggregator" "callbacks" "runtime" "api-link" "api"; }
    .res-link { min-height: 6.4rem; }
    .res-link.is-api .res-line, .res-link.is-ussd .res-line { left: 50%; right: auto; top: .4rem; bottom: .4rem; width: 2px; height: auto; transform: scaleY(var(--t)); transform-origin: top; }
    .res-link.is-api .res-line::before { left: -5px; top: -2px; border: 6px solid transparent; border-bottom: 9px solid var(--line); border-top: 0; }
    .res-link.is-api .res-line::after { left: -5px; right: auto; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--line); border-bottom: 0; }
    .res-link.is-ussd .res-line::before { left: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--line); border-bottom: 0; }
    .res-summary { grid-template-columns: minmax(0, 1fr); }
    .res-link.is-callbacks .res-line { transform-origin: top; }
    .res-link.is-callbacks .res-line::before { top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--line); border-bottom: 0; }
  }
  @media (max-width: 399px) { .mk-actions .theme-toggle { display: none; } }
}

@layer components {
  .doc-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); gap: 1.2rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
  .doc-card { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; height: 100%; padding: 1.8rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink-2); text-decoration: none; }
  .doc-card:hover { border-color: var(--line-strong); }
  .doc-card-step { grid-row: span 2; font-family: var(--mono); font-size: 1.3rem; color: var(--ink-3); }
  .doc-card strong { color: var(--ink); font-size: 1.6rem; font-weight: 600; }
  .doc-card span:last-child { grid-column: 2; font-size: 1.4rem; }

  .doc-layout { display: grid; grid-template-columns: 24rem minmax(0, 76rem); gap: 4.8rem; margin-top: 2.4rem; }
  .doc-nav { position: sticky; top: 2.4rem; align-self: start; font-size: 1.4rem; }
  .doc-nav ol { margin: 1.2rem 0 0; padding: 0; list-style: none; }
  .doc-nav-home { font-weight: 600; color: var(--ink); text-decoration: none; }
  .doc-nav-link { display: block; padding: .6rem 1.2rem; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; }
  .doc-nav-link:hover { color: var(--ink); }
  .doc-nav-link[aria-current="page"] { border-left-color: var(--focus); color: var(--ink); font-weight: 600; }

  .doc-title { margin: 0 0 .8rem; font-size: 3.6rem; font-weight: 300; line-height: 1.15; }
  .doc-body { font-size: 1.6rem; line-height: 1.65; color: var(--ink); }
  .doc-body > * + * { margin-top: 1.6rem; }
  .doc-body h2 { margin-top: 4rem; font-size: 2.2rem; font-weight: 600; line-height: 1.25; }
  .doc-body h3 { margin-top: 2.8rem; font-size: 1.7rem; font-weight: 600; }
  .doc-body :is(h2, h3) .anchor { margin-left: .6rem; color: var(--ink-3); text-decoration: none; opacity: 0; }
  .doc-body :is(h2, h3) .anchor::after { content: "#"; }
  .doc-body :is(h2, h3):hover .anchor, .doc-body .anchor:focus-visible { opacity: 1; }
  .doc-body :is(ul, ol) { padding-left: 2.4rem; }
  .doc-body li + li { margin-top: .6rem; }
  .doc-body a { color: var(--focus); }
  .doc-body pre { overflow-x: auto; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--code-bg); color: var(--code-ink); font-size: 1.35rem; line-height: 1.55; }
  .doc-body pre code { padding: 0; border: 0; background: none; font-size: inherit; }
  .doc-body blockquote { margin-left: 0; padding: 1.2rem 1.6rem; border-left: 3px solid var(--focus); background: var(--surface); color: var(--ink-2); }
  .doc-body table { width: 100%; border-collapse: collapse; font-size: 1.45rem; }
  .doc-body :is(th, td) { padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .doc-body th { font-weight: 600; color: var(--ink-2); }

  .doc-illustration { margin: 3.2rem 0; padding: 2.8rem 2rem 2.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--canvas, var(--surface-2)); overflow-x: auto; }
  .doc-illustration figcaption { margin-top: 2rem; font-size: 1.35rem; line-height: 1.5; color: var(--ink-3); text-align: center; }
  .doc-journey { min-width: 66rem; gap: 2rem 2.8rem; padding: 0; font-size: 1.25rem; line-height: 1.4; --dx: 0px; --dy: 0px; --r: 0deg; }
  .doc-journey .is-col-1 { --col: 1; } .doc-journey .is-col-2 { --col: 2; } .doc-journey .is-col-3 { --col: 3; } .doc-journey .is-col-4 { --col: 4; }
  .doc-journey .is-row-1 { --row: 1; } .doc-journey .is-row-2 { --row: 2; }
  .doc-journey .node[data-wire="enter_pin"] { margin-top: 0; }
  .doc-journey { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .doc-journey :is(ul, ol) { padding-left: 0; }
  .doc-journey li + li { margin-top: 0; }
  .doc-journey .port .port-label { overflow: visible; white-space: normal; text-overflow: clip; }

  .doc-illustration p { margin: 0; }
  .doc-phone { display: grid; grid-template-columns: 24rem minmax(0, 1fr); gap: 3.6rem; align-items: center; }
  .doc-phone-device { zoom: .8; }
  .doc-phone-device .device-screen { height: 58rem; }
  .doc-phone-entry { display: block; text-align: left; }
  .doc-phone .ussd-button { text-align: center; }
  .doc-notes { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; counter-reset: note; font-size: 1.45rem; line-height: 1.5; color: var(--ink-2); }
  .doc-notes li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; counter-increment: note; }
  .doc-notes li::before { content: counter(note); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); font-size: 1.2rem; font-weight: 650; color: var(--ink); }
  .doc-notes li + li { margin-top: 0; }
  .doc-notes strong { display: block; color: var(--ink); }
  .doc-steps .deploy-focus { text-align: left; }
  .doc-steps li + li { margin-top: 0; }
  .doc-names { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 2rem; align-items: start; font-size: 1.4rem; }
  .doc-names-side { display: grid; gap: .8rem; }
  .doc-names-field { min-height: 7rem; font-family: var(--mono); line-height: 1.5; }
  .doc-names .list-available { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .doc-names-arrow { align-self: center; color: var(--ink-3); }
  .doc-names-arrow .icon { width: 2.4rem; height: 2.4rem; }
  .doc-answers { display: grid; gap: 1.2rem; font-size: 1.4rem; }
  .doc-answers :is(ul, ol) { margin: 0; padding-left: 0; }
  .doc-answers .call-json { max-width: 32rem; }
  @media (max-width: 860px) {
    .doc-phone, .doc-names { grid-template-columns: minmax(0, 1fr); }
    .doc-names-arrow { justify-self: center; transform: rotate(90deg); }
  }

  /* Rouge's token classes. */
  .highlight :is(.na, .nt, .nl, .py) { color: var(--tok-key); }
  .highlight :is(.s, .s1, .s2, .sb, .sh) { color: var(--tok-str); }
  .highlight :is(.m, .mi, .mf, .kc, .no) { color: var(--tok-num); }
  .highlight :is(.p, .pi, .o) { color: var(--tok-punct); }
  .highlight :is(.c, .c1, .cm) { color: var(--ink-3); font-style: italic; }
  .highlight :is(.k, .kd, .nb) { color: var(--tok-expr); }

  .doc-turn { display: flex; justify-content: space-between; gap: 1.2rem; margin-top: 5.6rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
  .doc-turn-link { display: grid; gap: .2rem; color: var(--ink); text-decoration: none; }
  .doc-turn-link span { font-size: 1.3rem; color: var(--ink-3); }
  .doc-turn-link.is-next { margin-left: auto; text-align: right; }
  .doc-turn-link:hover strong { text-decoration: underline; }

  .ill-trip { display: grid; gap: 1.6rem; justify-items: center; }
  .trip-chain { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .8rem; margin: 0; padding: 0; list-style: none; }
  .trip-stop { display: grid; align-content: center; justify-items: center; gap: .6rem; width: 11rem; padding: 1.2rem .8rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); text-align: center; }
  .trip-stop.is-flow { border-color: var(--focus); }
  .trip-icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--surface-2); }
  .trip-name { margin: 0; font-size: 1.3rem; line-height: 1.3; }
  .trip-hop { align-self: center; width: 2.4rem; height: 1px; background: var(--line-strong); }
  .trip-budget { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--ink-3); font-size: 1.35rem; }

  .ill-dropped { display: grid; gap: 2rem; }
  .dropped-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
  .dropped-moment { padding-top: 1.2rem; border-top: 2px solid var(--line); }
  .dropped-moment.is-slow { border-top-color: var(--warn, var(--line-strong)); }
  .dropped-moment.is-gone { border-top-color: var(--error, var(--ink)); }
  .dropped-mark { display: block; width: .8rem; height: .8rem; margin-bottom: .8rem; border-radius: 50%; background: var(--line-strong); }
  .dropped-moment.is-gone .dropped-mark { background: var(--error, var(--ink)); }
  .dropped-when { margin: 0; font-family: var(--mono); font-size: 1.25rem; color: var(--ink-3); }
  .dropped-what { margin: .4rem 0 0; font-size: 1.35rem; line-height: 1.45; }
  .dropped-after { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .dropped-redial { margin: 0 0 1.2rem; font-size: 1.4rem; font-weight: 600; }
  .dropped-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.2rem; margin: 0; }
  .dropped-keys dt { color: var(--ink-3); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; }
  .dropped-keys dd { margin: .3rem 0 0; font-size: 1.35rem; }
  .dropped-keys .is-was { text-decoration: line-through; color: var(--ink-3); }

  .ill-retries { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.6rem; }
  .retry-case { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  .retry-kind { margin: 0; font-size: 1.45rem; font-weight: 600; }
  .retry-what { margin: .4rem 0 1.2rem; color: var(--ink-2); font-size: 1.35rem; }
  .retry-arrives { margin: 0 0 1.2rem; font-size: 1.3rem; }
  .retry-answer { display: flex; gap: .6rem; margin: 0; font-size: 1.35rem; line-height: 1.45; }
  .retry-tick { color: var(--focus); flex: none; }

  .writing-list { max-width: 76rem; margin: 3.2rem 0 0; padding: 0; list-style: none; }
  .writing-list li + li { margin-top: 3.2rem; padding-top: 3.2rem; border-top: 1px solid var(--line); }
  .writing-when { margin: 0; color: var(--ink-3); font-family: var(--mono); font-size: 1.3rem; }
  .writing-title { margin: .4rem 0 .6rem; font-size: 2.2rem; font-weight: 600; line-height: 1.25; }
  .writing-title a { color: var(--ink); text-decoration: none; }
  .writing-title a:hover { text-decoration: underline; }
  .writing-end { margin-top: 4.8rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }

  /* The public site has no .wrap to hold the guide, so it takes the marketing container. */
  .is-marketing .doc-wrap { max-width: 124rem; margin: 0 auto; padding: 4rem 2.4rem 8rem; }

  @media (max-width: 860px) {
    .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
    .doc-nav { position: static; }
  }
}

@layer utilities {
  [hidden] { display: none !important; }
}