/* The tokens copy the navy theme of the product (packages/ui/styles/themes). Two values move
   for contrast: muted text uses neutral-600 instead of neutral-500, and dark links use
   navy-300, because the product values fall below 4.5:1 on these surfaces. */

/* Each font comes in three subsets: Latin, Latin Extended (Polish, Czech, Slovak and others) and
   Cyrillic (Ukrainian and Russian). Each subset has a unicode-range, so a browser downloads only
   the subsets that a page uses. The ranges come from @fontsource-variable. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-wght.3100e775.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext-wght.34b9c504.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-cyrillic-wght.71d5ee93.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-wght.18be4527.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-ext-wght.79bfdab9.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-cyrillic-wght.d274604c.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  color-scheme: light;
  --white: #ffffff;
  --n-50: #f8f9fb;
  --n-100: #f1f3f6;
  --n-200: #e4e7ed;
  --n-300: #cfd4de;
  --n-400: #a5adc0;
  --n-500: #7b859e;
  --n-600: #5b647e;
  --n-700: #434c63;
  --n-800: #2e354a;
  --n-900: #1d2236;
  --n-950: #0f1220;
  --navy-50: #ecf0fe;
  --navy-100: #d9e2fd;
  --navy-300: #82a0f7;
  --navy-400: #527df4;
  --navy-500: #2259f0;
  --navy-600: #1c4ace;
  --navy-800: #13318c;
  --navy-950: #091843;

  --bg-main: var(--n-100);
  --bg-primary: var(--white);
  --bg-secondary: var(--n-100);
  --bg-secondary-hover: var(--n-200);
  --bg-tertiary: var(--n-50);
  --text-primary: var(--n-900);
  --text-secondary: var(--n-700);
  --text-tertiary: var(--n-600);
  --border-primary: var(--n-300);
  --border-secondary: var(--n-200);
  --brand-fill: var(--navy-500);
  --brand-fill-hover: var(--navy-600);
  --brand-ink: var(--white);
  --brand-text: var(--navy-500);
  --brand-text-hover: var(--navy-600);
  --brand-soft: var(--navy-50);
  --badge-bg: var(--navy-100);
  --badge-text: var(--navy-800);
  --focus: var(--navy-500);
  /* The printed paper colour of the illustrations, shown while an image loads. */
  --art-paper: #f6efe2;
  /* The illustration palette, reused by the diagrams. It is the same in both themes, and navy ink
     on each of these colors stays above 4.5:1. */
  --art-ink: #1d2236;
  --art-coral: #f2795c;
  --art-mustard: #f2b84b;
  --scrim: oklch(14% 0.02 270 / 0.7);
  --shadow: 0 1px 2px oklch(20% 0.03 270 / 0.06), 0 8px 24px oklch(20% 0.03 270 / 0.06);

  /* Names that tools/qa.mjs reads for the contrast check. */
  --paper: var(--bg-main);
  --soft: var(--bg-secondary);
  --ink: var(--text-primary);
  --muted: var(--text-tertiary);
  --accent: var(--brand-text);
  --on-accent: var(--white);
  --accent-soft: var(--brand-soft);

  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Product spacing, radius and size scales (tailwind.constants.ts). */
  --sp-xxxs: 4px;
  --sp-xxs: 8px;
  --sp-xs: 12px;
  --sp-s: 16px;
  --sp-m: 20px;
  --sp-l: 24px;
  --sp-xl: 32px;
  --sp-xxl: 40px;
  --sp-xxxl: 48px;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-m: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --rail: 64px;
  --panel: 256px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 140ms;
}

/* Inter has no Japanese, Korean or Chinese letters, and a web font for them is several
   megabytes. So these languages use the system fonts, and Latin letters still use Inter. */
:root:lang(ja) {
  --font: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', Meiryo, sans-serif;
}
:root:lang(ko) {
  --font: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}
:root:lang(zh) {
  --font: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
/* German and Finnish have long compound words that do not fit a narrow heading. The rule applies
   only to the translated pages, so the English layout stays as it is. */
:root:not(:lang(en)) :is(h1, h2, h3, strong, .menu-item span, .tab-item span) {
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Japanese has no spaces, so a browser may break a heading inside a phrase. auto-phrase makes it
   break between phrases where the browser supports it. */
:root:lang(ja) :is(h1, h2, h3) {
  word-break: auto-phrase;
}
/* A translated button label can be longer than a phone screen, so it may wrap there. */
:root:not(:lang(en)) .button {
  padding-block: 6px;
  text-align: center;
  white-space: normal;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg-main: var(--n-950);
    --bg-primary: var(--n-900);
    --bg-secondary: var(--n-800);
    --bg-secondary-hover: var(--n-700);
    --bg-tertiary: var(--n-800);
    --text-primary: var(--white);
    --text-secondary: var(--n-300);
    --text-tertiary: var(--n-400);
    --border-primary: var(--n-600);
    --border-secondary: var(--n-700);
    --brand-fill-hover: var(--navy-400);
    --brand-text: var(--navy-300);
    --brand-text-hover: var(--navy-100);
    --brand-soft: var(--navy-950);
    --badge-bg: var(--navy-950);
    --badge-text: var(--navy-300);
    --focus: var(--navy-300);
    --on-accent: var(--n-950);
    --shadow: none;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg-main: var(--n-950);
  --bg-primary: var(--n-900);
  --bg-secondary: var(--n-800);
  --bg-secondary-hover: var(--n-700);
  --bg-tertiary: var(--n-800);
  --text-primary: var(--white);
  --text-secondary: var(--n-300);
  --text-tertiary: var(--n-400);
  --border-primary: var(--n-600);
  --border-secondary: var(--n-700);
  --brand-fill-hover: var(--navy-400);
  --brand-text: var(--navy-300);
  --brand-text-hover: var(--navy-100);
  --brand-soft: var(--navy-950);
  --badge-bg: var(--navy-950);
  --badge-text: var(--navy-300);
  --focus: var(--navy-300);
  --on-accent: var(--n-950);
  --shadow: none;
}

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: 'calt' 0;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  text-wrap: balance;
  overflow-wrap: anywhere;
}

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

a {
  color: var(--brand-text);
  text-decoration: none;
}
a:hover {
  color: var(--brand-text-hover);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Headings receive focus from the router so screen readers announce the new page. */
[tabindex='-1']:focus {
  outline: none;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

code,
pre {
  font-family: var(--mono);
  font-size: 13px;
}

.skip-link {
  position: absolute;
  left: var(--sp-s);
  top: -10rem;
  z-index: 100;
  padding: var(--sp-xs) var(--sp-s);
  border-radius: var(--r-m);
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-weight: 600;
}
.skip-link:focus {
  top: var(--sp-s);
}

/* ---------- Buttons (product Button, sizes m and l) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xxs);
  min-width: 80px;
  min-height: 44px;
  padding: 0 var(--sp-s);
  border: 0;
  border-radius: var(--r-m);
  font: 600 14px/20px var(--font);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.button-l {
  min-height: 48px;
  padding: 0 var(--sp-l);
  border-radius: var(--r-lg);
  font-size: 15px;
}
.button-primary {
  background: var(--brand-fill);
  color: var(--brand-ink);
}
.button-primary:hover {
  background: var(--brand-fill-hover);
  color: var(--brand-ink);
}
.button-secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.button-secondary:hover {
  background: var(--bg-secondary-hover);
  color: var(--text-primary);
}
.button:active {
  transform: translateY(1px);
}
.button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.text-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-l);
}
.text-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 14px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxxs);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- App shell ---------- */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-s);
  min-height: 100vh;
  padding: 0 var(--sp-s) calc(88px + env(safe-area-inset-bottom));
}

/* Below 1024 px the rail becomes the top bar, as the product's own pages do on a phone. */
.rail {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin: 0 calc(-1 * var(--sp-s));
  padding: var(--sp-xxs) var(--sp-s);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-secondary);
}
.rail-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxs);
  min-height: 44px;
  margin-right: auto;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 17px;
}
.rail-logo:hover {
  color: var(--text-primary);
}
.mark {
  width: 32px;
  height: 32px;
  color: var(--navy-500);
}
.rail-nav {
  display: none;
}
.rail-end {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease-out);
}
.icon-button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.icon-sun {
  display: none;
}
:root[data-theme='dark'] .icon-sun {
  display: block;
}
:root[data-theme='dark'] .icon-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icon-sun {
    display: block;
  }
  :root:not([data-theme='light']) .icon-moon {
    display: none;
  }
}
.rail-try {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxs);
  min-height: 44px;
  padding: 0 var(--sp-s);
  border-radius: var(--r-m);
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 14px;
}
.rail-try:hover {
  background: var(--brand-fill-hover);
  color: var(--brand-ink);
}
/* The language menu is in the rail on wide screens only. On phones and tablets the rail is the top
   bar, which has no room for it, so the languages are in the Menu sheet there. */
.lang-menu {
  display: none;
}
.lang-menu > summary {
  list-style: none;
}
.lang-menu > summary::-webkit-details-marker {
  display: none;
}
.lang-list {
  position: absolute;
  bottom: 0;
  left: calc(100% + 10px);
  z-index: 70;
  display: grid;
  min-width: 200px;
  max-height: min(80vh, 680px);
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-xxs);
  list-style: none;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgb(15 18 32 / 0.18);
}
.lang-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-s);
  border-radius: var(--r-m);
  color: var(--text-primary);
}
.lang-list a:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.lang-list a[aria-current='true'],
.menu-item[aria-current='true'] {
  color: var(--brand-text);
  font-weight: 600;
}
@media (max-width: 359px) {
  .rail-wordmark {
    display: none;
  }
}

.panel {
  display: none;
}

main {
  display: grid;
  gap: var(--sp-s);
  align-content: start;
  min-width: 0;
  padding-top: var(--sp-s);
}
main:focus {
  outline: none;
}

/* The bottom tab bar is the product's MobileTabbar. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px var(--sp-xxs) calc(6px + env(safe-area-inset-bottom));
  background: var(--bg-primary);
  border-top: 1px solid var(--border-secondary);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text-tertiary);
  font: 500 11px/14px var(--font);
  cursor: pointer;
}
.tab-item .icon {
  width: 22px;
  height: 22px;
}
.tab-item[aria-current='page'],
.tab-item[aria-expanded='true'] {
  color: var(--brand-text);
}
.tab-item:hover {
  color: var(--text-primary);
}

.explore-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  background: var(--scrim);
}
.explore-menu[hidden] {
  display: none;
}
.sheet {
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: var(--sp-m) var(--sp-s) calc(var(--sp-xl) + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--bg-primary);
}
.sheet-head {
  margin-bottom: var(--sp-xxs);
}

/* Menu rows: the product's settings menu (SidebarMenuButton). */
.panel-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.panel-sub {
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 18px;
}
.menu-label {
  margin: var(--sp-s) 0 var(--sp-xxxs) var(--sp-xs);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.menu-list {
  padding: 0;
  list-style: none;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 44px;
  padding: 0 var(--sp-xs);
  border-radius: var(--r-m);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}
.menu-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.menu-item[aria-current='page'] {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
}
.menu-item .icon {
  color: var(--text-tertiary);
}
.menu-item[aria-current='page'] .icon {
  color: var(--brand-text);
}

@media (min-width: 1024px) {
  .shell {
    grid-template-columns: var(--rail) var(--panel) minmax(0, 1fr);
    padding: var(--sp-s);
  }
  .shell.no-panel {
    grid-template-columns: var(--rail) minmax(0, 1fr);
  }
  .shell.no-panel .panel {
    display: none;
  }
  .tabbar,
  .explore-menu {
    display: none !important;
  }
  .rail {
    position: sticky;
    top: var(--sp-s);
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sp-xxs);
    height: calc(100vh - 2 * var(--sp-s));
    margin: 0;
    padding: var(--sp-xs);
    border: 0;
    border-radius: var(--r-lg);
  }
  .rail-logo {
    justify-content: center;
    width: 40px;
    margin: 0 0 var(--sp-xxs);
  }
  .rail-wordmark,
  .rail-try span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .rail-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xxs);
    padding-top: var(--sp-xs);
    border-top: 1px solid var(--border-secondary);
  }
  .rail-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -2px;
    border-radius: var(--r-m);
    color: var(--text-secondary);
  }
  .rail-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }
  .rail-item[aria-current='page'] {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
  .rail-end {
    flex-direction: column;
    margin-top: auto;
  }
  .rail-try {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
  /* Labels appear beside rail icons on hover and keyboard focus, like the product tooltips. */
  [data-tip] {
    position: relative;
  }
  .rail [data-tip]:hover::after,
  .rail [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: var(--n-900);
    color: var(--white);
    font: 500 12px/16px var(--font);
    white-space: nowrap;
    pointer-events: none;
  }
  .lang-menu {
    position: relative;
    display: block;
  }
  /* The open menu sits where the tooltip would be. */
  .lang-menu[open] > summary::after {
    display: none;
  }
  .panel {
    position: sticky;
    top: var(--sp-s);
    display: block;
    align-self: start;
    max-height: calc(100vh - 2 * var(--sp-s));
    overflow-y: auto;
    padding: var(--sp-s) var(--sp-xs);
    border-radius: var(--r-lg);
    background: var(--bg-primary);
    scrollbar-width: thin;
  }
  .panel-head {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 0 var(--sp-xxs) var(--sp-xxs);
  }
  main {
    padding-top: 0;
  }
}
.panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

/* ---------- Page layout: main column and side cards ---------- */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-s);
  align-items: start;
  width: 100%;
  max-width: 920px;
}
.page-home {
  max-width: 1120px;
  margin-inline: auto;
}
.page-col {
  display: grid;
  gap: var(--sp-s);
  min-width: 0;
}
.side {
  display: grid;
  gap: var(--sp-s);
  min-width: 0;
}
@media (min-width: 1280px) {
  .page-home {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .page-home .side {
    position: sticky;
    top: var(--sp-s);
  }
}

/* ---------- Cards (the product's white panels) ---------- */

.card {
  min-width: 0;
  border-radius: var(--r-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow);
}
.card-pad {
  padding: var(--sp-l) var(--sp-m);
}
@media (min-width: 640px) {
  .card-pad {
    padding: var(--sp-xl);
  }
}
.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 64px;
  padding: var(--sp-xs) var(--sp-m);
  border-bottom: 1px solid var(--border-secondary);
}
.card-head h2,
.card-head p.card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border-radius: var(--r-m);
  color: var(--text-secondary);
}
.back:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.card-section {
  padding: var(--sp-l) var(--sp-m);
  border-top: 1px solid var(--border-secondary);
}
@media (min-width: 640px) {
  .card-section {
    padding: var(--sp-l) var(--sp-xl);
  }
}
.card-section:first-child {
  border-top: 0;
}
.side .card-head {
  min-height: 56px;
}
.side-body {
  padding: var(--sp-s) var(--sp-m) var(--sp-m);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xxxs) var(--sp-xxs);
  padding: 0;
  list-style: none;
  color: var(--text-tertiary);
  font-size: 13px;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}
.breadcrumbs li + li::before {
  content: '/';
  margin-right: var(--sp-xxs);
  color: var(--border-primary);
}
.breadcrumbs a {
  color: var(--text-tertiary);
  font-weight: 500;
}
.breadcrumbs a:hover {
  color: var(--text-primary);
}

.eyebrow {
  margin-top: var(--sp-s);
}
.page-title {
  margin-top: var(--sp-xs);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.page-intro {
  max-width: 62ch;
  margin-top: var(--sp-xs);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 24px;
}
.card .actions,
.card .text-links {
  margin-top: var(--sp-m);
}

/* Section links jump within the page. They wrap onto more lines instead of scrolling, so no
   link hides past the edge of the card, and the down arrow says that they move down the page. */
.jump {
  margin-top: var(--sp-l);
  padding: var(--sp-xs) var(--sp-s) var(--sp-xxxs);
  border-radius: var(--r-m);
  background: var(--bg-secondary);
}
.jump-title {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-l);
  margin: var(--sp-xxxs) 0 0;
  padding: 0;
  list-style: none;
}
.jump-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  min-height: 44px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.jump-list .icon {
  width: 16px;
  height: 16px;
  color: var(--brand-text);
}
.jump-list a:hover {
  color: var(--brand-text);
}
.jump-list a:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.release-note {
  display: flex;
  gap: var(--sp-xs);
  margin-top: var(--sp-m);
  padding: var(--sp-s);
  border-radius: var(--r-m);
  background: var(--brand-soft);
  color: var(--text-primary);
  font-size: 14px;
}
.release-note .icon {
  color: var(--brand-text);
}

/* ---------- Home ---------- */

.hero-cover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-xs);
  margin: var(--sp-xxs) var(--sp-xxs) 0;
  padding: var(--sp-l) var(--sp-l) 0;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--brand-soft);
  max-height: 300px;
}
.hero-cover figure {
  min-width: 0;
}
.hero-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--r-m) var(--r-m) 0 0;
  box-shadow: 0 8px 24px oklch(20% 0.05 265 / 0.16);
}
.hero-cover figure:last-child {
  margin-top: var(--sp-xl);
}
@media (max-width: 639px) {
  .hero-cover {
    grid-template-columns: minmax(0, 1fr);
    max-height: 220px;
    padding: var(--sp-s) var(--sp-s) 0;
  }
  .hero-cover figure:last-child {
    display: none;
  }
}
.hero {
  padding: var(--sp-l) var(--sp-m) var(--sp-xl);
}
@media (min-width: 640px) {
  .hero {
    padding: var(--sp-xl) var(--sp-xl) var(--sp-xxl);
  }
}
.hero-title {
  margin-top: var(--sp-s);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hero-title span {
  color: var(--brand-text);
}
.hero-intro {
  max-width: 58ch;
  margin-top: var(--sp-s);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 26px;
}
.hero .actions {
  margin-top: var(--sp-l);
}

.story-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-xs);
  margin-top: var(--sp-m);
}
.story-media.two {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 639px) {
  .story-media.two {
    grid-template-columns: minmax(0, 1fr);
  }
}
.story h2,
.section-title {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.story p.lead,
.section-lead {
  max-width: 62ch;
  margin-top: var(--sp-xxs);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 24px;
}
.story-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  margin-bottom: var(--sp-xs);
}
.story-kicker .avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-text);
}
.story-kicker .avatar .icon {
  width: 18px;
  height: 18px;
}
.story-kicker span {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xxs);
  margin-top: var(--sp-s);
  padding: 0;
  list-style: none;
}

/* Area rows: icon tiles like the product's settings menu, laid out as a grid. */
.area-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-xxs);
  margin-top: var(--sp-s);
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .area-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.area-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 64px;
  padding: var(--sp-xs);
  border-radius: var(--r-m);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.area-list a:hover {
  background: var(--bg-secondary);
}
.area-list .avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-m);
  background: var(--bg-primary);
  color: var(--brand-text);
  box-shadow: inset 0 0 0 1px var(--border-secondary);
}
.area-list strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.area-list small {
  display: block;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 18px;
}

.side .menu-item {
  min-height: 44px;
}
.side-actions {
  display: grid;
  gap: var(--sp-xxs);
}
.side-actions .button {
  width: 100%;
}
.side p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 21px;
}
.side p + p {
  margin-top: var(--sp-xxs);
}

/* ---------- Feature feed (rows like posts in the product feed) ---------- */

.feed {
  padding: 0;
  list-style: none;
}
.feed-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-xs);
  padding: var(--sp-l) var(--sp-m);
  border-top: 1px solid var(--border-secondary);
}
@media (min-width: 640px) {
  .feed-item {
    padding: var(--sp-l) var(--sp-xl);
  }
}
.feed-item .avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-m);
  background: var(--brand-soft);
  color: var(--brand-text);
  font: 600 12px/1 var(--mono);
}
.feed-body {
  display: grid;
  gap: var(--sp-xxs);
  min-width: 0;
}
.feed-body h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}
.feed-body h3 a {
  color: var(--text-primary);
}
.feed-body h3 a:hover {
  color: var(--brand-text);
}
.feed-summary {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 22px;
}

.details {
  display: grid;
  gap: var(--sp-xxxs);
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 21px;
}
.details li {
  position: relative;
  padding-left: var(--sp-s);
}
.details li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-primary);
}
.note {
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 19px;
}
.more-link {
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Screenshots (like media attached to a post) ---------- */

.shot {
  min-width: 0;
}
.shot-button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-secondary);
  border-radius: var(--r-m);
  background: var(--bg-tertiary);
  cursor: zoom-in;
  transition: border-color var(--fast) var(--ease-out);
}
.shot-button:hover {
  border-color: var(--border-primary);
}
.shot-button img {
  width: 100%;
  height: auto;
}
/* Inside a feature row the frame hugs the image, like media attached to a post. */
.feed .shot-button,
.guide .shot-button {
  width: fit-content;
  max-width: 100%;
}
.feed .shot-button img,
.guide .shot-button img {
  width: auto;
  max-height: 520px;
}
.shot figcaption {
  margin-top: var(--sp-xxs);
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 19px;
}
.shot figcaption a {
  color: inherit;
  text-decoration: underline;
}
.shot-fixed .shot-button {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}
.shot-fixed .shot-button img {
  width: auto;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- Lists, tables, code ---------- */

.compact-list {
  padding: 0;
  list-style: none;
}
.compact-list li + li {
  border-top: 1px solid var(--border-secondary);
}
.compact-list a {
  display: grid;
  gap: 2px;
  padding: var(--sp-xs) var(--sp-xs);
  margin: 0 calc(-1 * var(--sp-xs));
  border-radius: var(--r-m);
  color: var(--text-primary);
}
.compact-list a:hover {
  background: var(--bg-tertiary);
}
.compact-list strong {
  font-size: 15px;
  font-weight: 600;
}
.compact-list span {
  color: var(--text-tertiary);
  font-size: 14px;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-secondary);
  border-radius: var(--r-m);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th,
td {
  padding: var(--sp-xs) var(--sp-s);
  border-bottom: 1px solid var(--border-secondary);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
}
tr:last-child td {
  border-bottom: 0;
}
td.path code {
  white-space: nowrap;
}
.method {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-text);
}

pre {
  max-width: 100%;
  overflow-x: auto;
  padding: var(--sp-s);
  border-radius: var(--r-m);
  background: var(--bg-secondary);
  line-height: 1.6;
}
:not(pre) > code {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-secondary);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-m);
}
.guide > p {
  max-width: 64ch;
  color: var(--text-secondary);
}
.step {
  display: grid;
  gap: var(--sp-xxs);
  min-width: 0;
}
.step h3 {
  font-size: 15px;
  font-weight: 600;
}
.step p {
  color: var(--text-secondary);
  font-size: 14px;
}
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-xs);
}
@media (min-width: 720px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tile {
  display: grid;
  align-content: start;
  gap: var(--sp-xxs);
  min-width: 0;
  padding: var(--sp-s);
  border-radius: var(--r-m);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
}
.tile h3 {
  font-size: 15px;
  font-weight: 600;
}
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xxs);
}
/* A file name with its size can be wider than a phone, so these labels may wrap. */
.downloads .button {
  white-space: normal;
  text-align: center;
}

/* ---------- Embedded documents (the product's markdown body) ---------- */

.doc {
  min-width: 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 24px;
}
.doc > * + * {
  margin-top: var(--sp-s);
}
.doc h1 {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.doc h2 {
  margin-top: var(--sp-xxl);
  font-size: 20px;
  font-weight: 700;
}
.doc h3 {
  margin-top: var(--sp-l);
  font-size: 16px;
  font-weight: 600;
}
.doc ul,
.doc ol {
  padding-left: var(--sp-l);
}
.doc li + li {
  margin-top: var(--sp-xxxs);
}
.doc details {
  border: 1px solid var(--border-secondary);
  border-radius: var(--r-m);
  overflow: hidden;
}
.doc summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-s);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
}
.doc details pre {
  border-radius: 0;
}
.doc blockquote {
  margin-inline: 0;
  padding-left: var(--sp-s);
  border-left: 3px solid var(--border-secondary);
  color: var(--text-secondary);
}
.doc-toc {
  padding: 0;
  list-style: none;
}
.doc-toc a {
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: 14px;
}

/* ---------- Gallery, video, map ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-s);
}
@media (min-width: 560px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.video-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-l);
  align-items: start;
}
@media (min-width: 720px) {
  .video-block {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  }
}
.video-block video {
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  border: 1px solid var(--border-secondary);
  background: var(--bg-tertiary);
}
.video-block details {
  margin-top: var(--sp-s);
  border-top: 1px solid var(--border-secondary);
}
.video-block summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

/* The map is drawn inline, so the land and the highlight follow the theme. The borders take
   the card color, so they read as gaps between the states. */
.us-map {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-top: var(--sp-l);
}
.us-land {
  fill: var(--border-primary);
}
.us-borders {
  fill: none;
  stroke: var(--bg-primary);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.us-highlight {
  fill: var(--brand-fill);
}

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

.foot {
  display: grid;
  gap: var(--sp-l);
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.foot-brand strong {
  display: block;
  font-size: 16px;
}
.foot-brand span {
  color: var(--text-tertiary);
  font-size: 13px;
}
.foot-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-l);
  padding: var(--sp-s) 0 0;
  border-top: 1px solid var(--border-secondary);
  list-style: none;
}
@media (min-width: 720px) {
  .foot-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.foot-links a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-secondary);
  font-size: 14px;
}
.foot-links a:hover {
  color: var(--text-primary);
}
.foot-legal {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ---------- Screenshot dialog ---------- */

.viewer {
  width: min(100vw - 24px, 1200px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.viewer[open] {
  display: flex;
  flex-direction: column;
}
.viewer::backdrop {
  background: var(--scrim);
}
.viewer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xxs) var(--sp-s);
  padding: var(--sp-xs) var(--sp-s);
  border-bottom: 1px solid var(--border-secondary);
}
.viewer-count {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 600;
}
.viewer-controls {
  display: flex;
  gap: var(--sp-xxs);
}
.viewer-controls .button {
  min-width: 0;
}
/* The .button rule sets display, and an author display value beats the hidden attribute, so a
   dialog with one screenshot would still show Previous and Next without this rule. */
.viewer-controls [hidden] {
  display: none;
}
.viewer-figure {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
.viewer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-s);
  background: var(--bg-main);
}
.viewer-stage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 210px);
  border-radius: var(--r-sm);
}
.viewer figcaption {
  display: grid;
  gap: var(--sp-xxxs);
  padding: var(--sp-s);
}
.viewer-title {
  font-size: 16px;
  font-weight: 600;
}
.viewer-caption {
  color: var(--text-secondary);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* ---------- Illustrations ---------- */

.art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  background: var(--art-paper);
}
.hero-art {
  margin: var(--sp-xxs) var(--sp-xxs) 0;
}
.hero-art .art {
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
@media (max-width: 639px) {
  .hero-art .art {
    aspect-ratio: 4 / 3;
  }
}
.wide-art {
  margin-bottom: var(--sp-l);
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.story-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-m);
  align-items: center;
}
.story-art {
  max-height: 220px;
  object-fit: cover;
}
@media (min-width: 720px) {
  .story-top {
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: var(--sp-xl);
  }
  .story-art {
    max-height: none;
    aspect-ratio: 1;
    border-radius: var(--r-lg);
  }
}
.area-list .area-art {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-m);
  object-fit: cover;
}
.head-with-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--sp-xl);
}
.head-art {
  max-height: 200px;
  margin-top: var(--sp-m);
  object-fit: cover;
}
.head-extra {
  min-width: 0;
}
@media (min-width: 760px) {
  .head-with-art {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
  }
  .head-art {
    max-height: none;
    margin-top: 0;
    aspect-ratio: 1;
    border-radius: var(--r-lg);
  }
  .head-extra {
    grid-column: 1 / -1;
  }
}

/* A single story screenshot keeps a readable height, so one tall screen does not stretch the
   home page. The frame hugs the image. */
.story-media:not(.two) .shot-button {
  width: fit-content;
  max-width: 100%;
}
.story-media:not(.two) .shot-button img {
  width: auto;
  max-height: 440px;
}

/* ---------- Explainers ---------- */

/* The privacy promise lists what Welley never does, one line each, with a "ban" mark. */
.promise {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-s) var(--sp-l);
  margin: var(--sp-m) 0 0;
  padding: 0;
  list-style: none;
}
.promise li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
}
.promise .icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--brand-text);
}
.promise span {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}
.promise strong {
  display: block;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 22px;
}

/* Diagrams use plain boxes and labels instead of a drawing, so the text wraps and stays readable
   on a phone, where the boxes stack and the arrows turn to point up or down. */
.diagram {
  margin: var(--sp-l) 0 0;
  padding: var(--sp-m);
  border-radius: var(--r-lg);
  background: var(--bg-secondary);
}
.diagram figcaption {
  margin-top: var(--sp-s);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}
.dg-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-xs);
  align-items: center;
}
@media (min-width: 760px) {
  .dg-flow {
    grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr);
  }
  .dg-flow.dg-three {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }
  .dg-three .dg-arrow {
    align-self: center;
  }
}
.dg-stack {
  display: grid;
  gap: var(--sp-xs);
}
.dg-box {
  min-width: 0;
  padding: var(--sp-s);
  border: 1px solid var(--border-secondary);
  border-radius: var(--r-m);
  background: var(--bg-primary);
}
.dg-home {
  border: 2px dashed var(--brand-fill);
}
.dg-muted {
  border-style: dashed;
  background: transparent;
}
.dg-label {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dg-label .icon {
  width: 16px;
  height: 16px;
}
.dg-group {
  margin-top: var(--sp-xs);
  padding: var(--sp-s);
  border-radius: var(--r-m);
  background: var(--brand-soft);
}
.dg-name {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}
.dg-name .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-text);
}
.dg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--sp-xs) 0 0;
  padding: 0;
  list-style: none;
}
.dg-chips li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.dg-foot {
  margin-top: var(--sp-xs);
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 700;
}
.dg-person {
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  margin-top: var(--sp-xs);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}
.dg-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--art-ink);
  font-size: 13px;
  font-weight: 700;
}
.dg-coral {
  background: var(--art-coral);
}
.dg-mustard {
  background: var(--art-mustard);
}
.dg-text {
  margin-top: var(--sp-xxs);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
}
.dg-scrambled {
  margin-top: var(--sp-xs);
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.dg-arrow {
  display: grid;
  place-items: center;
  color: var(--brand-text);
}
.dg-arrow svg {
  display: block;
  width: 40px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dg-arrow-left svg {
  transform: rotate(180deg);
}
@media (max-width: 759px) {
  .dg-arrow {
    height: 40px;
  }
  .dg-arrow-right svg {
    transform: rotate(90deg);
  }
  .dg-arrow-left svg {
    transform: rotate(-90deg);
  }
}
.dg-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-xs);
}
.dg-channels {
  display: grid;
  gap: var(--sp-xxs);
  margin: var(--sp-xs) 0 0;
  padding: 0;
  list-style: none;
}
.dg-channels li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  padding: var(--sp-xs);
  border-radius: var(--r-sm);
  background: var(--bg-secondary);
}
.dg-channels .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--brand-text);
}
.dg-channels strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
}
.dg-channels small {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
}
.dg-shell {
  padding: var(--sp-s);
  border: 1px solid var(--border-secondary);
  border-radius: var(--r-m);
  background: var(--bg-primary);
}
.dg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr));
  gap: var(--sp-xs);
  margin: var(--sp-s) 0 0;
  padding: 0;
  list-style: none;
}
.dg-tiles li {
  display: grid;
  place-content: center;
  min-height: 56px;
  padding: var(--sp-xs);
  border-radius: var(--r-m);
  background: var(--brand-soft);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.dg-tiles .dg-new {
  border: 2px dashed var(--brand-fill);
  background: transparent;
  color: var(--brand-text);
}
.dg-tiles small {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
}