/* tinyclient website. One stylesheet, no build step, no web fonts.
   Dark values are the app's own palette (crates/tinyclient/src/gui/theme.rs). */

:root {
  color-scheme: dark light;

  --bg: #121315;            /* theme::sidebar, theme::rail */
  --canvas: #18191c;        /* theme::canvas */
  --raised: #1f2023;        /* theme::raised */
  --overlay: #25262a;       /* theme::overlay */
  --line: rgba(255, 255, 255, 0.08);   /* theme::hairline */
  --border: rgba(255, 255, 255, 0.12); /* theme::border */
  --border-strong: rgba(255, 255, 255, 0.2);
  --hover: rgba(255, 255, 255, 0.06);

  --text: #edeef0;
  --soft: #a8abb3;
  --faint: #858993;

  --accent: #2f6feb;
  --accent-hover: #3a77ee;
  --accent-pressed: #2861d3;
  --link: #8ab4ff;          /* theme::accent_text */
  --on-accent: #ffffff;
  --accent-soft: rgba(47, 111, 235, 0.18);
  --focus: #8ab4ff;

  --positive: #3fbf7a;
  --positive-soft: rgba(63, 191, 122, 0.14);
  --warning: #e0a63a;
  --warning-soft: rgba(224, 166, 58, 0.14);
  --danger: #f0655d;
  --danger-soft: rgba(240, 101, 93, 0.14);

  --shadow-window: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.55);

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --r-chip: 4px;
  --r-control: 6px;
  --r-card: 8px;
  --r-float: 10px;
  --r-modal: 12px;

  --wide: 1120px;
  --measure: 70ch;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --canvas: #f7f8fa;
    --raised: #f1f2f5;
    --overlay: #ffffff;
    --line: rgba(15, 20, 30, 0.09);
    --border: rgba(15, 20, 30, 0.13);
    --border-strong: rgba(15, 20, 30, 0.24);
    --hover: rgba(15, 20, 30, 0.05);

    --text: #16181c;
    --soft: #474c55;
    --faint: #5d636e;

    --link: #1f56d6;
    --accent-soft: rgba(47, 111, 235, 0.1);
    --focus: #1f56d6;

    --positive: #17784a;
    --positive-soft: rgba(23, 120, 74, 0.1);
    --warning: #8a5800;
    --warning-soft: rgba(196, 128, 10, 0.12);
    --danger: #b8322a;
    --danger-soft: rgba(208, 63, 63, 0.1);

    --shadow-window: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.16);
  }
}

/* Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
/* Short lines break evenly; running text never ends a paragraph on one word. */
.lede, .pitch, figcaption, .car-caption, .fine-note, .trio li { text-wrap: balance; }
li, td, th, dd, blockquote { text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

code, kbd, pre, samp { font-family: var(--mono); font-size: 0.875em; }

code {
  padding: 0.1em 0.35em;
  border-radius: var(--r-chip);
  background: var(--raised);
  border: 1px solid var(--line);
  white-space: nowrap;
}

pre code { padding: 0; background: none; border: 0; white-space: pre; font-size: inherit; }

kbd {
  padding: 0.05em 0.4em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-chip);
  font-size: 0.8em;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: rgba(47, 111, 235, 0.45); }

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-control);
  font-weight: 600;
}
.skip:focus { top: 12px; text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header ---------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.site-nav a {
  color: var(--soft);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--r-control);
}
.site-nav a:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); }

.site-nav .gh,
.site-nav .dc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-nav .gh svg,
.site-nav .dc svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 640px) {
  .site-header .wrap { gap: 12px; padding: 0 16px; }
  .site-nav .hide-sm,
  .site-nav .dc .nav-label { display: none; }
  .site-nav a { padding: 6px 8px; }
}

/* Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--r-float);
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-primary svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary svg.fill { fill: currentColor; stroke: none; }

.btn-secondary { background: var(--raised); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-secondary svg { fill: currentColor; }

/* Hero ------------------------------------------------------------------ */

.hero { padding: 88px 0 0; }

.hero-icon { width: 76px; height: 76px; margin: 0 0 28px -6px; }

.hero h1 {
  font-size: clamp(40px, 6vw, 60px);
  letter-spacing: -0.035em;
  font-weight: 700;
  line-height: 1.05;
}

.pitch {
  margin-top: 18px;
  max-width: 34em;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--soft);
}
.pitch strong { color: var(--text); font-weight: 600; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.platforms {
  margin-top: 16px;
  font-size: 14px;
  color: var(--faint);
}
/* The Linux formats, shown under the first line to Linux visitors (site.js). */
.platforms + .platforms { margin-top: 4px; }

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 44em;
  margin-top: 28px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-card);
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.55;
  color: var(--soft);
}
.notice strong { color: var(--text); font-weight: 600; }

/* The illustrative window ------------------------------------------------ */

.shot { margin: 64px 0 0; }

.shot figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--faint);
}

/* Always the app's dark palette, whatever the page's scheme. */
.app {
  --a-rail: #121315;
  --a-canvas: #18191c;
  --a-raised: #1f2023;
  --a-line: rgba(255, 255, 255, 0.08);
  --a-field: rgba(255, 255, 255, 0.04);
  --a-selected: rgba(255, 255, 255, 0.12);
  --a-text: #edeef0;
  --a-soft: #a8abb3;
  --a-faint: #858993;
  --a-accent: #2f6feb;
  --a-accent-text: #8ab4ff;
  --a-wash: rgba(47, 111, 235, 0.1);

  display: grid;
  grid-template-columns: 72px 300px minmax(0, 1fr);
  height: 600px;
  overflow: hidden;
  border-radius: var(--r-modal);
  background: var(--a-canvas);
  box-shadow: var(--shadow-window);
  color: var(--a-text);
  font-size: 13px;
  line-height: 18px;
  user-select: none;
  -webkit-user-select: none;
}

.app-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 52px 0 14px;
  background: var(--a-rail);
  border-right: 1px solid var(--a-line);
  position: relative;
}

.lights { position: absolute; top: 20px; left: 14px; display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.rb {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--a-soft);
}
.rb.on { background: var(--a-selected); color: var(--a-text); }
.rb.on::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12px;
  width: 4px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--a-accent);
}
.rb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rb img { width: 26px; height: 26px; }
.rb .pill { position: absolute; top: -3px; right: -4px; }
.rb .dot { position: absolute; top: 2px; right: 2px; }
.rail-sep { width: 28px; height: 1px; background: var(--a-line); }
.rail-me { margin-top: auto; }

.pill {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--a-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--a-rail);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-text); }

.app-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--a-rail);
  border-right: 1px solid var(--a-line);
}

.strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 52px;
  padding: 0 16px;
}
.strip-title { font-size: 16px; line-height: 22px; font-weight: 600; }

.seg {
  display: flex;
  margin-left: auto;
  padding: 2px;
  border-radius: 7px;
  background: var(--a-field);
  border: 1px solid var(--a-line);
  font-size: 12px;
  color: var(--a-soft);
}
.seg span { padding: 2px 8px; border-radius: 5px; }
.seg span:first-child { background: rgba(255, 255, 255, 0.14); color: var(--a-text); }

.jump {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0 8px 8px;
  padding: 0 10px;
  border-radius: var(--r-control);
  background: var(--a-field);
  border: 1px solid var(--a-line);
  color: var(--a-faint);
}
.jump svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.jump kbd { margin-left: auto; border: 0; padding: 0; font-family: var(--sans); font-size: 11px; color: var(--a-faint); }

.day {
  padding: 10px 16px 4px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--a-faint);
}

.rows { list-style: none; margin: 0; padding: 0 8px; }

.row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  border-radius: var(--r-control);
}
.row.on { background: var(--a-selected); }
.row-main { min-width: 0; }
.row-top { display: flex; align-items: center; gap: 6px; }
.row-top img { width: 14px; height: 14px; flex: none; }
.row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-soft); }
.row.unread .row-title { color: var(--a-text); font-weight: 600; }
.row-prev { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--a-faint); }
.row-prev.typing { color: var(--a-accent-text); }
.row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; line-height: 14px; color: var(--a-faint); }
.row-end .pill { box-shadow: none; }

.av {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.av.sq { border-radius: 9px; }
.av.s36 { width: 36px; height: 36px; font-size: 13px; }
.av .pres {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--a-rail);
  background: #3fbf7a;
}
.av .pres.idle { background: #e0a63a; }
.c1 { background: #3d8b6a; }
.c2 { background: #6a5acd; }
.c3 { background: #b4566e; }
.c4 { background: #3f7fb5; }
.c5 { background: #9a6b2f; }
.c6 { background: #4b5563; }

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--a-canvas);
}
.app-main .strip { border-bottom: 1px solid var(--a-line); gap: 12px; }
.conv-title { min-width: 0; }
.conv-title b { display: block; font-size: 14px; line-height: 18px; font-weight: 600; }
.conv-title span { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--a-faint); white-space: nowrap; }
.conv-title img { width: 12px; height: 12px; }
.tools { display: flex; gap: 4px; margin-left: auto; color: var(--a-soft); }
.tools svg { width: 18px; height: 18px; margin: 5px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.msgs {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 20px 12px;
  overflow: hidden;
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--a-faint);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--a-line); }
.divider.new { color: var(--a-accent-text); }
.divider.new::before, .divider.new::after { background: rgba(47, 111, 235, 0.55); }

.msg {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--r-control);
  font-size: 14px;
  line-height: 20px;
}
.msg.me { background: var(--a-wash); }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-head b { font-weight: 600; }
.msg-head time { font-size: 11px; color: var(--a-faint); }
.msg p { color: var(--a-text); }
.msg .m { color: var(--a-accent-text); }
.msg code {
  background: var(--a-raised);
  border-color: var(--a-line);
  color: var(--a-text);
  font-size: 12.5px;
}
.reacts { display: flex; gap: 6px; margin-top: 6px; }
.reacts span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  font-size: 12px;
  color: var(--a-soft);
}
.reacts span.mine { border-color: rgba(47, 111, 235, 0.6); background: rgba(47, 111, 235, 0.16); color: var(--a-text); }

.typing-line { padding: 0 20px 6px; height: 22px; font-size: 12px; color: var(--a-faint); }

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 16px;
  padding: 0 12px;
  height: 44px;
  border-radius: var(--r-float);
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  color: var(--a-faint);
  font-size: 14px;
}
.composer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.composer .send { margin-left: auto; }

@media (max-width: 1000px) {
  .app { grid-template-columns: 72px 280px minmax(0, 1fr); }
}
/* Narrow, as the app does it: the sidebar leaves the row first. */
@media (max-width: 820px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); height: 540px; }
  .app-side { display: none; }
}
@media (max-width: 480px) {
  .app { grid-template-columns: minmax(0, 1fr); height: 520px; border-radius: var(--r-float); }
  .app-rail { display: none; }
  .tools svg:nth-child(n+2) { display: none; }
  .msgs { padding: 0 14px 10px; }
  .composer { margin: 0 10px 10px; }
}

/* Sections -------------------------------------------------------------- */

.section { padding: 112px 0 0; }
.section:last-of-type { padding-bottom: 112px; }

.eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--faint);
}

.section h2 {
  font-size: clamp(28px, 3.6vw, 36px);
  letter-spacing: -0.025em;
}

.lede {
  margin-top: 14px;
  max-width: 40em;
  font-size: 18px;
  line-height: 1.55;
  color: var(--soft);
}

.grid {
  display: grid;
  gap: 1px;
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-modal);
  overflow: hidden;
  background: var(--line);
}
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--bg);
}
.cell h3 { font-size: 17px; letter-spacing: -0.01em; }
.cell p { color: var(--soft); font-size: 15px; line-height: 1.6; }
.cell .src {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  color: var(--faint);
}
.cell .src code { font-size: 12px; }
@media (max-width: 620px) { .cell { padding: 22px 20px; } }

/* Networks */

.nets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
  list-style: none;
  padding: 0;
}
@media (max-width: 1000px) { .nets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .nets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .nets { grid-template-columns: minmax(0, 1fr); } }

.net {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-modal);
  background: var(--canvas);
}
.net-head { display: flex; align-items: center; gap: 10px; }
.net-head img { width: 24px; height: 24px; }
.net-head h3 { font-size: 16px; }
.net dl { margin: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.45; }
.net dt { color: var(--faint); font-size: 12px; margin-bottom: 2px; }
.net dd { margin: 0; color: var(--soft); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--soft);
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.tag.yes { color: var(--positive); }
.tag.yes::before { background: var(--positive); }
.tag.warn { color: var(--warning); }
.tag.warn::before { background: var(--warning); }
.tag.no { color: var(--danger); }
.tag.no::before { background: var(--danger); }

.after {
  margin-top: 20px;
  font-size: 14px;
  color: var(--faint);
}

/* Tables */

.table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-modal);
}
.table-wrap:focus-visible { outline-offset: 4px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
th, td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
  background: var(--canvas);
  white-space: nowrap;
}
tbody th { font-weight: 600; white-space: nowrap; }
td { color: var(--soft); }
td.num { font-family: var(--mono); font-size: 13px; color: var(--text); white-space: nowrap; }
.th-net { display: inline-flex; align-items: center; gap: 8px; }
.th-net img { width: 16px; height: 16px; }

caption {
  caption-side: bottom;
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  color: var(--faint);
  border-top: 1px solid var(--line);
}

/* Diagram */

.diagram {
  margin: 40px 0 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-modal);
  background: var(--canvas);
  overflow-x: auto;
}
.diagram svg { width: 100%; min-width: 760px; height: auto; }
.scroll-hint { display: none; margin-top: 10px; font-size: 13px; color: var(--faint); }
.diagram figcaption { margin-top: 16px; font-size: 13px; color: var(--faint); }
@media (max-width: 620px) { .diagram { padding: 16px; } }

.dg text { font-family: var(--sans); fill: var(--text); }
.dg .t { font-size: 15px; font-weight: 650; }
.dg .mono { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.dg .mono.sm { font-size: 12.5px; }
.dg .s { font-size: 12px; fill: var(--soft); }
.dg .f { font-size: 11px; fill: var(--faint); }
.dg .lbl { font-size: 11px; fill: var(--faint); font-family: var(--mono); }
.dg .zone { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.dg .zone-out { fill: var(--hover); stroke: none; }
.dg .box { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.dg .box.core { stroke: var(--accent); stroke-width: 1.5; }
.dg .box.temp { stroke-dasharray: 5 4; }
.dg .box.store { fill: var(--raised); stroke: var(--line); }
.dg .nbox { fill: var(--bg); stroke: var(--border); }
.dg .wire { fill: none; stroke: var(--soft); stroke-width: 1.25; }
.dg .wire.temp { stroke-dasharray: 4 4; }
.dg .wire.out { stroke: var(--accent); }
.dg .head { fill: var(--soft); }
.dg .head.out { fill: var(--accent); }
.dg .chip { fill: var(--accent-soft); }

/* Two-column lists */

.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 40px;
}
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.cols h3 { font-size: 15px; margin-bottom: 14px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li {
  position: relative;
  padding-left: 28px;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.55;
}
.checks li strong { color: var(--text); font-weight: 600; }
.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.checks.never li::before {
  border-radius: 3px;
  background: none;
  box-shadow: none;
  border: 0;
  width: 12px;
  height: 2px;
  top: 0.75em;
  left: 3px;
  background: var(--faint);
}

.gaps {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-modal);
  background: var(--canvas);
}
.gaps h3 { font-size: 15px; margin-bottom: 10px; }
.gaps ul { margin: 0; padding-left: 20px; color: var(--soft); font-size: 15px; display: grid; gap: 6px; }

.more { margin-top: 28px; font-size: 15px; }
.more a { font-weight: 500; }

/* Code blocks */

.code {
  position: relative;
  margin: 20px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--canvas);
}
.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}
.code .c { color: var(--faint); }
.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--raised);
  color: var(--soft);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
}
.code:hover .copy, .copy:focus-visible, .copy.done { opacity: 1; }
.copy:hover { color: var(--text); border-color: var(--border-strong); }
@media (hover: none) { .copy { opacity: 1; } }

/* Contribute */

.contrib .cell a.cta { font-weight: 500; font-size: 15px; margin-top: auto; padding-top: 6px; }

/* Footer ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 56px;
  font-size: 14px;
  color: var(--faint);
}
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 760px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot > :first-child { grid-column: 1 / -1; } }
.foot h2 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--soft); }
.foot a:hover { color: var(--text); }
.foot p { line-height: 1.6; }
.foot p + p { margin-top: 10px; }
.foot .brand { margin-bottom: 14px; }
.fine {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
}

/* Docs ------------------------------------------------------------------ */

.docs {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  padding-top: 48px;
  padding-bottom: 96px;
}

.docs-nav { font-size: 14px; }
.docs-nav-inner { position: sticky; top: 32px; }
.docs-nav h2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0;
  margin: 0 0 10px 10px;
}
.docs-nav ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 1px; }
.docs-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-control);
  color: var(--soft);
}
.docs-nav a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.docs-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--text); font-weight: 500; }

@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  .docs-nav-inner { position: static; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .docs-nav a { border: 1px solid var(--line); }
  .docs-nav h2 { margin-left: 0; }
  .docs-nav h2.ext, .docs-nav ul.ext { display: none; }
  .docs-nav { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 18px; }
.prose h1 { font-size: clamp(30px, 4vw, 38px); letter-spacing: -0.028em; }
.prose .lede { margin-top: 12px; font-size: 18px; }
.prose h2 {
  margin-top: 56px;
  padding-top: 8px;
  font-size: 23px;
  letter-spacing: -0.02em;
}
.prose h3 { margin-top: 36px; font-size: 17px; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose p, .prose li { color: var(--soft); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--faint); }
.prose .table-wrap { margin-top: 20px; }
.prose table { font-size: 14px; }
.prose .code { margin-top: 16px; }
.prose a.anchor { color: inherit; }
.prose hr { margin: 48px 0; }

.callout {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
  background: var(--canvas);
  font-size: 15px;
}
.callout p { color: var(--soft); }
.callout p + p { margin-top: 8px; }
.callout.warn { border-left-color: var(--warning); }
.callout.danger { border-left-color: var(--danger); }
.callout strong { color: var(--text); }

.prose .net-terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; list-style: none; }
.prose .net-terms > li + li { margin-top: 0; }
.net-terms > li { margin: 0; }
.term {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-modal);
  background: var(--canvas);
}
.term-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.term-head img { width: 22px; height: 22px; }
.term-head h2, .term-head h3 { margin: 0; padding: 0; font-size: 19px; }
.term-head .tag { margin-left: auto; }
.term > p, .term > ul, .term > dl { margin-top: 12px; }
.term p, .term li { font-size: 15px; }
@media (max-width: 520px) { .term-head .tag { margin-left: 0; flex-basis: 100%; } .term { padding: 18px; } }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.pager a { display: grid; gap: 2px; }
.pager span { font-size: 12px; color: var(--faint); }
.pager .next { text-align: right; margin-left: auto; }

.edit { margin-top: 24px; font-size: 13px; color: var(--faint); }

/* 404 */
.lost { padding: 120px 0; }
.lost h1 { font-size: 40px; letter-spacing: -0.03em; }
.lost p { margin-top: 14px; color: var(--soft); }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero { padding-top: 56px; }
  .hero-icon { width: 64px; height: 64px; margin-bottom: 22px; }
  .section { padding-top: 80px; }
  .section:last-of-type { padding-bottom: 80px; }
  .shot { margin-top: 48px; }
  .actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .site-nav a, .docs-nav a, .copy { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease; }
}

@media print {
  .site-header, .site-footer, .docs-nav, .copy, .shot { display: none; }
  body { background: #fff; color: #000; }
}

.term-head h2 { color: var(--text); }
.fine p + p { margin-top: 8px; }

/* Narrow screens: wide tables become one card per row. */
@media (max-width: 640px) {
  table.stack { display: flex; flex-direction: column; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; }
  table.stack caption { order: 2; }
  table.stack tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack th, table.stack td { padding: 0; border: 0; white-space: normal; }
  table.stack th { margin-bottom: 8px; }
  table.stack td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 3px 0; }
  table.stack td::before { content: attr(data-label); font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--faint); padding-top: 1px; }
  .prose table { min-width: 520px; }
  .prose .term table { min-width: 0; }
  .scroll-hint { display: block; }
}
@media (max-width: 640px) { .wrap.docs { padding-top: 24px; padding-bottom: 72px; } }

/* ---------- Landing, short form (main session) ---------- */
.center { text-align: center; }
.actions.center { justify-content: center; }
.hero .pitch { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; color: var(--text); max-width: none; letter-spacing: -0.01em; text-wrap: balance; }
.hero .platforms a { color: var(--muted, var(--faint)); }
.hero .platforms a:hover { color: var(--text); }
#hero-shots { margin-top: 56px; }

.section h2.center, .section .lede.center { margin-left: auto; margin-right: auto; }
.lede.center { max-width: 46ch; }

.net-row { list-style: none; padding: 0; margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.net-row li { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 112px; padding: 22px 8px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--raised); font-size: 14px; color: var(--muted, var(--faint)); transition: transform .2s ease, border-color .2s ease; }
.net-row li:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.net-row img { width: 44px; height: 44px; }
.net-row .net-more { border-style: dashed; background: transparent; padding: 0; }
.net-row .net-more a { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 22px 8px 18px; color: var(--faint); text-decoration: none; }
.net-row .net-more a:hover { color: var(--text); }
.net-row .plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--border-strong); font-size: 22px; line-height: 1; }

.points { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.points li { padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--raised); display: flex; flex-direction: column; gap: 6px; }
.points strong { font-size: 18px; letter-spacing: -0.01em; }
.points span { color: var(--muted, var(--faint)); font-size: 15px; line-height: 1.45; }
@media (max-width: 860px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .points { grid-template-columns: 1fr; } }

.vs { margin: 40px auto 0; max-width: 880px; display: grid; gap: 18px; }
.vs-row { display: grid; grid-template-columns: 130px 1fr 72px; align-items: center; gap: 16px; }
.vs-name { font-size: 15px; color: var(--muted, var(--faint)); }
.vs-row.us .vs-name, .vs-row.us .vs-val { color: var(--text); font-weight: 600; }
.vs-val { font-variant-numeric: tabular-nums; text-align: right; font-size: 15px; }
.vs-bar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; background: var(--hover, rgba(255,255,255,.04)); }
.vs-bar .vseg { display: flex; align-items: center; min-width: 0; overflow: hidden; border-right: 2px solid var(--bg); transform-origin: left; animation: grow 1.1s cubic-bezier(.2,.7,.2,1) both; }
.vs-bar .vseg:last-child { border-right: 0; }
.vseg-l { padding: 0 8px; font-size: 12px; color: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vseg.s0 { flex: 1100 1 0; background: #5b5fc7; animation-delay: .00s; }
.vseg.s1 { flex: 625 1 0;  background: #3a76f0; animation-delay: .08s; }
.vseg.s2 { flex: 554 1 0;  background: #4a154b; animation-delay: .16s; }
.vseg.s3 { flex: 481 1 0;  background: #5865f2; animation-delay: .24s; }
.vseg.s4 { flex: 346 1 0;  background: #229ed9; min-width: 74px; animation-delay: .32s; }
.vseg.mine { flex: 0 0 1.77%; min-width: 6px; background: var(--accent); box-shadow: 0 0 18px var(--accent); border-radius: 0 6px 6px 0; animation-delay: .6s; }
.mem .vseg { flex-grow: 0; flex-shrink: 0; border-right: 0; }
.mem .vseg.teams { flex-basis: 100%; background: #5b5fc7; }
.mem .vseg.slack { flex-basis: 98.9%; background: #4a154b; }
.mem .vseg.discord { flex-basis: 98.9%; background: #5865f2; }
.mem .vseg.signal { flex-basis: 60.2%; background: #3a76f0; }
.mem .vseg.telegram { flex-basis: 24.1%; background: #229ed9; }
.mem .vseg.mine { flex-basis: 15.2%; min-width: 8px; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fine-note { margin: 22px auto 0; font-size: 13px; color: var(--faint); }
@media (max-width: 600px) {
  .vs-row { grid-template-columns: 1fr auto; }
  .vs-bar { grid-column: 1 / -1; grid-row: 2; height: 34px; }
  .vseg-l { display: none; }
}

.trio { list-style: none; padding: 0; margin: 28px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 36px; font-size: 16px; }
.trio li { display: flex; align-items: center; gap: 10px; }
.ico { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); position: relative; flex: none; }
.ico::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent); animation: beat 2.4s ease-in-out infinite; }
.i-pulse::after { animation-delay: .8s; }
.i-key::after { animation-delay: 1.6s; }
@keyframes beat { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }

.join { padding-bottom: 120px; }
.join h2 { font-size: clamp(30px, 4vw, 44px); }

@media (prefers-reduced-motion: reduce) {
  .vs-bar .vseg, .ico::after { animation: none; }
  .net-row li { transition: none; }
}

/* ---------- Hero screenshot carousel ---------- */
/* Works without JS: a scroll-snap strip with links to each slide. site.js adds the controls,
   auto-advance and keyboard; .js marks that it did. */
.carousel { margin: 56px 0 0; }
.car-frame {
  position: relative;
  border-radius: var(--r-modal);
  overflow: hidden;
  background: #18191c;
  box-shadow: var(--shadow-window), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.car-frame::after { /* a hairline over the image edge, as a window has */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.car-lights { /* the window's own buttons, where macOS draws them: 12 pt, 20 pt apart */
  position: absolute; z-index: 2; top: 1.55%; left: 1.1%; width: 4.1%;
  display: flex; justify-content: space-between; pointer-events: none;
}
.car-lights i { width: 23%; aspect-ratio: 1; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3); }
.car-lights i:nth-child(2) { background: #febc2e; }
.car-lights i:nth-child(3) { background: #28c840; }
.car-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.car-track:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-modal); }
.carousel.js .car-track { scrollbar-width: none; }
.carousel.js .car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; width: 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
/* min-width and max-width: Safari otherwise sizes a slide to the picture's own 2000 px and crops it. */
.car-slide img { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
.car-cap { padding: 10px 16px; font-size: 13px; color: #a8abb3; background: #121315; }
.carousel.js .car-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }

.car-caption { display: none; margin: 22px 0 0; text-align: center; font-size: 15px; font-weight: 550; color: var(--text); letter-spacing: -0.005em; }
.carousel.js .car-caption { display: block; }
.car-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.car-tabs { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.car-tabs::-webkit-scrollbar { display: none; }
.car-tab {
  position: relative; display: block; padding: 8px 12px 10px; border-radius: var(--r-control);
  font-size: 13px; line-height: 1.2; white-space: nowrap; color: var(--faint);
}
.car-tab:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.car-tab[aria-current="true"] { color: var(--text); }
.car-prog { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; opacity: 0; }
.car-tab[aria-current="true"] .car-prog { opacity: 1; }
.car-prog::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(1); transform-origin: left; }
.carousel.js .car-tab:not([aria-current="true"]) .car-prog::after { transform: scaleX(0); }
.carousel.rolling .car-tab[aria-current="true"] .car-prog::after { animation: car-prog var(--car-ms, 5500ms) linear both; }
@keyframes car-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.car-btn, .car-play {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--raised); color: var(--soft); cursor: pointer;
}
.car-btn:hover, .car-play:hover { color: var(--text); border-color: var(--border-strong); }
.car-btn svg, .car-play svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.car-play .i-play { fill: currentColor; stroke-width: 1.5; }
.car-play .i-play, .carousel.stopped .car-play .i-pause { display: none; }
.carousel.stopped .car-play .i-play { display: block; }
.car-play { margin-left: 4px; width: 30px; height: 30px; border-color: transparent; background: transparent; }

@media (max-width: 640px) {
  .carousel { margin-top: 40px; }
  .car-frame { border-radius: var(--r-float); }
  .car-caption { font-size: 14px; margin-top: 16px; }
  .car-bar { gap: 4px; }
  .car-tabs { flex: 1 1 auto; mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); padding: 0 8px; }
  .car-tab { padding: 8px 10px 10px; }
  .car-prog { left: 10px; right: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .car-tab, .car-btn, .car-play { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
}
@media print { .carousel { display: none; } }

/* ---------- "Where your messages go": the animated flow ---------- */
/* Packets are zero-length dashes with round caps riding each path (pathLength 100), moved by
   stroke-dashoffset; mediad and tinyclient-login fade in only for their part of a 12 s loop.
   No script. Reduced motion shows everything still. */
.flow { margin: 40px 0 0; padding: 28px 28px 20px; border: 1px solid var(--line); border-radius: var(--r-modal); background: var(--canvas); }
.flow svg.fl { display: block; width: 100%; height: auto; overflow: visible; }
.fl-defs { position: absolute; }
.fl-narrow { display: none !important; }
@media (max-width: 600px) {
  .flow { padding: 16px 12px 14px; }
  .fl-wide { display: none !important; }
  .fl-narrow { display: block !important; max-width: 420px; margin: 0 auto; }
}
.fl text { font-family: var(--sans); fill: var(--text); }
.fl .fl-t { font-family: var(--mono); font-size: 16px; font-weight: 600; }
.fl .fl-t.sm { font-size: 14px; }
.fl .fl-t.xs { font-size: 12px; }
.fl .fl-s { font-size: 13px; fill: var(--soft); }
.fl .fl-f { font-size: 10.5px; letter-spacing: 0.08em; fill: var(--faint); font-family: var(--mono); }
.fl .fl-lbl { font-size: 11px; fill: var(--faint); font-family: var(--mono); }
.fl-zone { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.fl-zone-out { fill: var(--hover); stroke: var(--line); stroke-width: 1; }
.fl-node rect { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.fl-core rect { stroke: var(--accent); stroke-width: 1.5; }
.fl-store rect { fill: var(--raised); stroke: var(--line); }
.fl-temp-node rect { stroke-dasharray: 5 4; }
.fl-temp-node .fl-bar { fill: var(--positive); stroke: none; }
.fl-dot { stroke: none; }
.fl-dot.r { fill: #ff5f57; } .fl-dot.y { fill: #febc2e; } .fl-dot.g { fill: #28c840; }
.fl-live { fill: var(--positive); }
.fl-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.fl-net rect { fill: var(--bg); stroke: var(--border); stroke-width: 1; }
.fl-wire { fill: none; stroke: var(--border-strong); stroke-width: 1.25; }
.fl-wire.fl-tls { stroke: var(--accent); stroke-opacity: 0.45; }
.fl-wire.fl-temp { stroke-dasharray: 4 4; }
.fl-lock-shackle { fill: none; stroke: var(--soft); stroke-width: 1.6; }
.fl-lock-body { fill: var(--soft); }
.fl-lockat use { color: var(--soft); }
.fl-ghost rect { fill: none; stroke: var(--faint); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; }
.fl-ghost text { fill: var(--faint) !important; opacity: 0.8; }
.fl-strike { stroke: var(--danger); stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; }
.fl .fl-ghost-note { letter-spacing: 0.06em; }

.fl-pkt { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.01 400; stroke-dashoffset: 0; opacity: 0; }
.fl-pkt.back { stroke-width: 5.5; }
.fl-pkt.n-slack { stroke: #e01e5a; }
.fl-pkt.n-discord, .fl-pkt.fl-voice { stroke: #5865f2; }
.fl-pkt.n-telegram { stroke: #29a9eb; }
.fl-pkt.n-teams { stroke: #7b83eb; }
.fl-pkt.n-signal { stroke: #3a76f0; }
.fl-pkt.fl-login { stroke: var(--soft); }

.flow-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; font-size: 13px; color: var(--faint); }
.fl-key { display: inline-flex; align-items: center; gap: 8px; }
.fl-key i { width: 18px; height: 12px; border-radius: 4px; border: 1px solid var(--border-strong); }
.fl-key i.k-dash { border-style: dashed; }
.fl-key svg { width: 11px; height: 13px; color: var(--soft); }

@media (prefers-reduced-motion: no-preference) {
  .fl-pkt { animation: fl-go 4.8s cubic-bezier(.45,.05,.55,.95) infinite; }
  .fl-pkt.back { animation-name: fl-back; }
  .fl-pkt.fl-sock { animation-duration: 2.4s; }
  .fl-pkt.fl-sock.back { animation-delay: 1.2s; }
  .fl-pkt.d0 { animation-delay: .2s; }  .fl-pkt.b0 { animation-delay: 2.6s; }
  .fl-pkt.d1 { animation-delay: 1.1s; } .fl-pkt.b1 { animation-delay: 3.5s; }
  .fl-pkt.d2 { animation-delay: 2.0s; } .fl-pkt.b2 { animation-delay: 4.4s; }
  .fl-pkt.d3 { animation-delay: 2.9s; } .fl-pkt.b3 { animation-delay: .5s; }
  .fl-pkt.d4 { animation-delay: 3.8s; } .fl-pkt.b4 { animation-delay: 1.4s; }
  .fl-pkt.fl-voice { animation-duration: 1.2s; animation-timing-function: linear; }
  .fl-pkt.fl-voice.back { animation-delay: .6s; }
  .fl-pkt.fl-login { animation-duration: 2.4s; }
  .fl-pkt.fl-login.back { animation-delay: 1.2s; }
  .fl-eph { opacity: 0; animation: fl-call 12s ease-in-out infinite; }
  .fl-eph.fl-signin { animation-name: fl-signin; }
  .fl-eph .fl-temp-node { transform-box: fill-box; transform-origin: center; animation: fl-pop 12s ease-in-out infinite; }
  .fl-signin .fl-temp-node { animation-name: fl-pop2; }
  .fl-bar { transform-box: fill-box; transform-origin: center; animation: fl-wave .9s ease-in-out infinite alternate; }
  .fl-bar.w1 { animation-delay: -.3s; } .fl-bar.w2 { animation-delay: -.6s; } .fl-bar.w3 { animation-delay: -.15s; } .fl-bar.w4 { animation-delay: -.45s; }
  .fl-ring { animation: fl-breathe 3.2s ease-in-out infinite; }
  .fl-live { animation: fl-blink 3.2s ease-in-out infinite; }
  .fl-net-call rect, .fl-net-signin rect { animation: fl-call-net 12s ease-in-out infinite; }
  .fl-net-signin rect { animation-name: fl-signin-net; }
}
@keyframes fl-go {
  0% { stroke-dashoffset: 0; opacity: 0; }
  6% { opacity: 1; }
  44% { opacity: 1; }
  50%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes fl-back {
  0% { stroke-dashoffset: -100; opacity: 0; }
  6% { opacity: 1; }
  44% { opacity: 1; }
  50%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes fl-call { 0%, 6% { opacity: 0; } 11%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes fl-signin { 0%, 54% { opacity: 0; } 59%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes fl-pop { 0%, 6% { transform: scale(.92); } 11%, 40% { transform: scale(1); } 46%, 100% { transform: scale(.92); } }
@keyframes fl-pop2 { 0%, 54% { transform: scale(.92); } 59%, 86% { transform: scale(1); } 92%, 100% { transform: scale(.92); } }
@keyframes fl-wave { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes fl-breathe { 0%, 100% { opacity: 0; stroke-width: 1.5; } 50% { opacity: .35; stroke-width: 6; } }
@keyframes fl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fl-call-net { 0%, 6%, 46%, 100% { stroke: var(--border); } 11%, 40% { stroke: #5865f2; } }
@keyframes fl-signin-net { 0%, 54%, 92%, 100% { stroke: var(--border); } 59%, 86% { stroke: var(--soft); } }
@media (prefers-reduced-motion: reduce) {
  .fl-pkt { display: none; }
}
@media print { .fl-pkt { display: none; } }

/* A sentence that should wrap as a unit, never mid-phrase. */
.nowrap-s { display: inline-block; }
@media (max-width: 520px) {
  .trio { flex-direction: column; align-items: center; gap: 12px; }
}