:root {
  color-scheme: light dark;
  --background: #F6F7FB;
  --surface: #FFFFFF;
  --surface-muted: #EEF0F7;
  --text: #111827;
  --muted: #4B5565;
  --border: #6B7280;
  --divider: #E3E6EE;
  --link: #4F46E5;
  --link-hover: #4338CA;
  --on-link: #FFFFFF;
  --error: #B91C1C;
  --error-hover: #991B1B;
  --on-error: #FFFFFF;
  --success: #166534;
  --focus: #4F46E5;
  --notice-surface: #EEF2FF;
  --alert-surface: #FEF2F2;
  --success-surface: #F0FDF4;
}
/* The two provider marks' own button colours (light styles). They sit before the dark block on purpose: the dark block
   repeats the same selectors, and a later rule of equal specificity wins, so the dark styles below really apply. */
.provider-button.provider-google { border-color: #747775; background: #FFFFFF; color: #1F1F1F; }
.provider-button.provider-google:hover { border-color: #747775; background: #F2F2F2; color: #1F1F1F; }
.provider-button.provider-github { border-color: #24292F; background: #24292F; color: #FFFFFF; }
.provider-button.provider-github:hover { border-color: #1B1F24; background: #1B1F24; color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0B0F1A;
    --surface: #131A2A;
    --surface-muted: #1B2335;
    --text: #F3F5FA;
    --muted: #B3BBCC;
    --border: #8B94A9;
    --divider: #283146;
    --link: #A5B4FC;
    --link-hover: #C7D2FE;
    --on-link: #0B0F1A;
    --error: #FCA5A5;
    --error-hover: #FECACA;
    --on-error: #0B0F1A;
    --success: #86EFAC;
    --focus: #C7D2FE;
    --notice-surface: #1E1F4A;
    --alert-surface: #3A1418;
    --success-surface: #07301A;
  }
  body { background: radial-gradient(70rem 32rem at 50% -14rem, color-mix(in srgb, var(--link) 11%, transparent), transparent 70%) no-repeat, var(--background); }
  .page-card, .card, button, .button, .action { box-shadow: none; }
  /* The Google button's dark style and the GitHub button's light-on-dark style, both from the providers' own guidance. */
  .provider-button.provider-google { border-color: #8E918F; background: #131314; color: #E3E3E3; }
  .provider-button.provider-google:hover { border-color: #8E918F; background: #1E1F20; color: #E3E3E3; }
  .provider-button.provider-github { border-color: #D0D7DE; background: #F6F8FA; color: #1F2328; }
  .provider-button.provider-github:hover { border-color: #D0D7DE; background: #EAEEF2; color: #1F2328; }
}
@media (prefers-contrast: more) {
  :root {
    --divider: var(--border);
    --muted: var(--text);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: radial-gradient(70rem 32rem at 50% -14rem, color-mix(in srgb, var(--link) 13%, transparent), transparent 70%) no-repeat, var(--background);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
:lang(ko) { word-break: keep-all; }
/* Full-width header and footer bars with a centred inner row; main is one of three page shapes. */
.bar { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: 1rem; }
.site-header { border-block-end: 1px solid var(--divider); background: color-mix(in srgb, var(--surface) 72%, transparent); }
.site-header .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 3.75rem;
  padding-block: 0.375rem;
}
main { width: 100%; margin-inline: auto; padding: 1rem; }
.page-home { max-width: 68rem; padding-block: 0.5rem 3rem; }
.page-card { max-width: 34rem; margin-block: auto; padding-block: 1.5rem 2.5rem; }
.page-card:has(.grid-2) { max-width: 44rem; }
.page-account { max-width: 64rem; padding-block: 1.5rem 3rem; }
.page-guide { max-width: 48rem; padding-block: 1.5rem 3rem; }
main:focus, main:focus-visible { outline: none; }
.site-footer {
  margin-block-start: auto;
  border-block-start: 1px solid var(--divider);
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 1rem;
}
.site-footer nav, .site-footer p, .site-footer ul { margin: 0; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--link-hover); text-decoration: underline; }
.wordmark { font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding: 0;
  list-style: none;
}
.inline-links > li { margin: 0; }
.inline-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Skip link: off screen until it receives keyboard focus. */
.skip-link, body > a:first-child {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 10;
  padding: 0.625rem 1rem;
  border: 2px solid var(--focus);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--link);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus, body > a:first-child:focus { transform: none; }

/* Header: wordmark on the left, the language button on the right. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--link); }
.language-form { margin-inline-start: auto; }
.language-form form {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}
/* The language button reads "English" or "한국어" and shows a globe drawn from its own pseudo-elements:
   a circle with its equator, and a meridian ellipse laid over it. Both follow the button's text colour. */
.language-form button::before {
  content: "";
  flex: none;
  width: 1.125rem;
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat;
}
.language-form button::after {
  content: "";
  position: absolute;
  inset-block: calc(50% - 0.5625rem);
  inset-inline-start: 1.0625rem;
  width: 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
/* Text that stays in the document for assistive technology only: the language description and a legend that repeats the h1. */
.language-description, .visually-hidden, .page-card fieldset.stack > legend {
  position: absolute;
  width: 1px;
  aspect-ratio: 1;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Text */
:where(h1, h2, h3) { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; line-height: 1.4; }
p, li, dd { text-wrap: pretty; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 0.0625em; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 0.125em; }
strong { font-weight: 700; }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
code, .code-input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
code { padding: 0.125rem 0.375rem; border-radius: 0.375rem; background: var(--surface-muted); font-size: 0.9375em; word-break: break-all; }
.reference { font-size: 0.875rem; color: var(--muted); }
.reference bdi { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; word-break: break-all; }
.reference code {
  display: block;
  margin-block-start: 0.375rem;
  padding: 0.75rem;
  border: 1px dashed var(--border);
  font-size: 1rem;
  color: var(--text);
  user-select: all;
}
/* Card pages centre their title and summary; the landing hero centres itself; the account column stays left aligned. */
.page-card > h1, .page-card > .lead { text-align: center; }
.page-card > .lead { margin-inline: auto; max-width: 30rem; }
.page-account > h1 { font-size: 2.25rem; }
.page-account > .lead { max-width: 44rem; }
.page-guide > .lead { max-width: 40rem; }

/* Vertical rhythm inside main. Zero specificity, so every class rule below can adjust it. */
:where(main) :where(h1, h2, h3, p, ul, ol, dl, dd, form, fieldset, section, div, figure, pre, blockquote) { margin-block: 0; }
:where(main, main section, main div, main form, main fieldset, main li, main dd) > :where(:not(input[type="hidden"]) ~ *) { margin-block-start: 1rem; }
:where(main) > :where(section, .section, .grid-2) { margin-block-start: 2rem; }
:where(main) > :where(h1 + *) { margin-block-start: 1rem; }
:where(main) :where(h2 + *) { margin-block-start: 0.75rem; }
:where(main) :where(h3 + *) { margin-block-start: 0.5rem; }
:where(main) :where(ul, ol) { padding-inline-start: 1.25rem; }
:where(main) :where(li + li) { margin-block-start: 0.375rem; }

/* Layout */
.stack > * { margin-block: 0; }
.stack > * + * { margin-block-start: 1rem; }
.section { margin-block-start: 2rem; }
.card {
  padding: 1.25rem;
  border: 1px solid var(--divider);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.card > h2 { font-size: 1.125rem; }
.card h3 { font-size: 1rem; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.grid-2 > * { margin: 0; }

/* Landing: hero, three feature cards, two cards, then the pilot band with the waitlist form. */
.hero {
  display: grid;
  justify-items: center;
  gap: 0;
  padding-block: 2rem 2.5rem;
  text-align: center;
}
.hero > * { margin: 0; }
.hero > .badge::before { content: ""; width: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--link); }
.hero > h1 {
  max-width: 24ch;
  margin-block-start: 1.25rem;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.hero > .lead { max-width: 40rem; margin-block-start: 1.25rem; }
.hero > .actions { justify-self: stretch; justify-content: center; margin-block-start: 2rem; }
.hero > .actions > li > a { padding: 0.75rem 1.5rem; }
.features { margin-block-start: 1rem; }
.features > h2 { font-size: 1.375rem; text-align: center; }
.feature-list { display: grid; gap: 1rem; margin-block-start: 1.25rem; padding: 0; list-style: none; }
.feature-list > li { margin: 0; padding: 1.5rem; }
.feature-list > li::before {
  content: "";
  display: block;
  width: 2.5rem;
  aspect-ratio: 10;
  margin-block-end: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--link), var(--link-hover));
}
.feature-list strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.feature-list p { margin-block-start: 0.375rem; color: var(--muted); }
.page-home > .grid-2 { margin-block-start: 1.25rem; }
.check-list { padding: 0; list-style: none; }
.check-list > li { position: relative; padding-inline-start: 1.625rem; }
.check-list > li + li { margin-block-start: 0.625rem; }
.check-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.3125rem;
  inset-block-start: 0.3125rem;
  width: 0.4375rem;
  aspect-ratio: 1 / 1.8;
  border: solid var(--success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* The per-app connection guide: a copyable address, one disclosure row per app with numbered steps, a snippet where a
   file or command is needed, example prompts and the checked date. Closed on the landing, open on the guide page. */
.connect-guide > .connect-url { font-size: 1.0625rem; }
.connect-url > code { user-select: all; }
.app-guide { border: 1px solid var(--divider); border-radius: 0.75rem; }
.app-guide[open] { padding-block-end: 1rem; }
.app-guide > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  min-height: 44px;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.app-guide > summary::-webkit-details-marker { display: none; }
.app-guide > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.125rem;
  inset-block-start: 50%;
  width: 0.5rem;
  aspect-ratio: 1;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  transform: translateY(-75%) rotate(45deg);
}
.app-guide[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; border-block-end: 1px solid var(--divider); }
.app-guide[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
.app-guide > summary > .muted { font-size: 0.875rem; font-weight: 400; }
.app-guide > :not(summary) { margin-inline: 1rem; }
.app-guide > summary + * { margin-block-start: 1rem; }
.app-guide > :not(summary) + :not(summary) { margin-block-start: 0.875rem; }
.snippet {
  margin-block-start: 0.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--divider);
  border-radius: 0.5rem;
  background: var(--surface-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.snippet > code { display: block; padding: 0; background: none; font-size: inherit; word-break: break-all; }
.prompt-setup { line-height: 1.6; }
.install > .button-secondary { padding-inline: 1.25rem; }
.prompt-label { font-weight: 600; }
.prompt-list { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.prompt-list > li { padding: 0.625rem 0.875rem; border-inline-start: 3px solid var(--link); border-radius: 0 0.5rem 0.5rem 0; background: var(--notice-surface); }
.pilot { display: grid; gap: 1.5rem; margin-block-start: 1.25rem; }
.pilot > * { margin: 0; }
.pilot-text > h2 { font-size: 1.375rem; }
.pilot > form { padding-block-start: 1.5rem; border-block-start: 1px solid var(--divider); }
legend > h2 { margin: 0; font-size: 1.125rem; }

/* Actions and buttons */
.actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0;
  list-style: none;
}
.actions > li { margin: 0; }
.button, .button-secondary, .button-danger, .provider-button, .actions > li > a, button, input, .action {
  min-height: 44px;
  max-width: 100%;
  font: inherit;
  overflow-wrap: anywhere;
}
/* Every button-like class is complete on its own, on a and on button. */
button, .button, .button-secondary, .button-danger, .action, .provider-button, .actions > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--link);
  border-radius: 0.625rem;
  background: var(--link);
  color: var(--on-link);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.actions > li > a { display: flex; }
.actions > button, .actions > a { width: 100%; }
button:hover, .button:hover, .action:hover {
  border-color: var(--link-hover);
  background: var(--link-hover);
  color: var(--on-link);
}
.button-secondary, .actions > li > a.button-secondary, .actions > li > a.provider-button, .language-form button,
button.provider-button, a.provider-button {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}
.button-secondary:hover, .actions > li > a.button-secondary:hover, .actions > li > a.provider-button:hover, .language-form button:hover,
button.provider-button:hover, a.provider-button:hover {
  border-color: var(--text);
  background: var(--surface-muted);
  color: var(--text);
}
.button-danger, .button-danger:hover { border-color: var(--error); background: var(--error); color: var(--on-error); }
.button-danger:hover { border-color: var(--error-hover); background: var(--error-hover); }
.actions > li > form > button { width: 100%; }
/* A plain link inside an action list is a secondary, link-styled action with the same 44px target. */
.actions > li > a:not(.action):not(.button):not(.button-secondary):not(.button-danger):not(.provider-button) {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.actions > li > a:not(.action):not(.button):not(.button-secondary):not(.button-danger):not(.provider-button):hover {
  border-color: transparent;
  background: var(--surface-muted);
  color: var(--link-hover);
}
.language-form button {
  position: relative;
  padding: 0.5rem 0.9375rem 0.5rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
}
/* Provider buttons: equal width, height and weight on the two forms' buttons and on the email link, which also matches
   the stronger ".actions > li > a" rules above. Google and GitHub colours are next to the palettes at the top. */
.providers { gap: 0.75rem; margin-block-start: 1.5rem; }
.provider-button { width: 100%; min-height: 44px; }
button.provider-button, a.provider-button { display: flex; }
button.provider-button, a.provider-button, .actions > li > a.provider-button {
  min-height: 48px; gap: 0.625rem; padding: 0.625rem 1rem; border-radius: 0.75rem; font-weight: 500;
}
.provider-logo { flex: none; width: 1.25rem; aspect-ratio: 1; }
.provider-button.provider-email { border-color: var(--border); background: var(--surface); color: var(--text); }
.fineprint { display: grid; gap: 0.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--divider); }
.fineprint > * { margin: 0; }
button:disabled, button:disabled:hover,
.action[aria-disabled="true"], .action[aria-disabled="true"]:hover,
.button[aria-disabled="true"], .button[aria-disabled="true"]:hover,
.button-secondary[aria-disabled="true"], .button-secondary[aria-disabled="true"]:hover,
.button-danger[aria-disabled="true"], .button-danger[aria-disabled="true"]:hover,
.provider-button[aria-disabled="true"], .provider-button[aria-disabled="true"]:hover {
  border-color: var(--divider);
  background: var(--surface-muted);
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

/* Forms */
:where(fieldset) { margin: 0; }
fieldset { min-width: 0px; padding: 0; border: 0; }
legend { padding: 0; font-weight: 700; }
label { display: block; font-weight: 600; }
main label + input { margin-block-start: 0.375rem; }
input:not([type="checkbox"], [type="radio"], [type="hidden"]) {
  display: block;
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--text);
  line-height: 1.5;
}
input:not([type="checkbox"], [type="radio"], [type="hidden"]):hover { border-color: var(--text); }
input::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid="true"] { border-width: 2px; border-color: var(--error); }
input[type="checkbox"], input[type="radio"] {
  flex: none;
  width: 1.25rem;
  min-height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--link);
}
.field { display: grid; gap: 0.375rem; }
.field > * { margin: 0; }
.field > label { font-weight: 600; }
.field-hint { font-size: 0.875rem; color: var(--muted); }
.field-error, .field > [role="alert"] { color: var(--error); font-weight: 600; }
.field > [role="alert"] { padding: 0; border: 0; background: none; }
.code-input { max-width: 11rem; font-size: 1.375rem; font-variant-numeric: tabular-nums; letter-spacing: 0.3em; }
fieldset.field > legend { margin-block-end: 0.375rem; padding: 0; font-weight: 600; }
/* A checkbox or radio row: either div.checkbox > input + label, or label.checkbox > input + text. */
.checkbox { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; }
.checkbox > * { margin: 0; }
.checkbox label, label.checkbox { font-weight: 400; cursor: pointer; }
.checkbox input[type="checkbox"], .checkbox input[type="radio"] { margin-block-start: 0.15rem; }
/* A segmented radio group (the display language): pills in a row; the chosen one is tinted. */
.segmented { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.375rem 1.125rem 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 400;
  cursor: pointer;
}
.choice > input { margin: 0; }
.choice:has(> input:checked) { border-color: var(--link); background: var(--notice-surface); color: var(--link); font-weight: 600; }

/* Messages */
.notice, .alert, .success, [role="status"], [role="alert"] {
  padding: 1rem 1.125rem;
  border: 1px solid color-mix(in srgb, var(--link) 28%, transparent);
  border-inline-start: 4px solid var(--link);
  border-radius: 0.75rem;
  background: var(--notice-surface);
  color: var(--text);
}
.alert, [role="alert"] { border-color: color-mix(in srgb, var(--error) 32%, transparent); border-inline-start-color: var(--error); background: var(--alert-surface); }
.success { border-color: color-mix(in srgb, var(--success) 32%, transparent); border-inline-start-color: var(--success); background: var(--success-surface); }
[role="status"] > h2, [role="alert"] > h2 { font-size: 1.125rem; }

/* Focus: always visible for keyboard use, and on the error summary the server focuses. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[role="alert"][tabindex="-1"]:focus, .alert[tabindex="-1"]:focus, [autofocus]:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
[role="alert"][tabindex="-1"], .alert[tabindex="-1"] { scroll-margin-block: 1rem; }

/* Data */
:where(dl, dd) { margin: 0; }
dt { font-weight: 600; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.125rem 1.5rem; }
.kv > * { margin: 0; }
.kv dt { color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.kv dd { min-width: 0px; margin-inline: 0; overflow-wrap: anywhere; }
.kv code { overflow-wrap: anywhere; word-break: break-all; user-select: all; }
ul.stack, ol.stack { padding-inline-start: 0; list-style: none; }
/* A QR code keeps a white quiet zone in every theme so scanners can read it. */
.qr {
  display: inline-block;
  max-width: 100%;
  block-size: auto;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #FFFFFF;
  forced-color-adjust: none;
}
.setup-key { user-select: all; overflow-wrap: anywhere; }
.setup-key > span + wbr + span { margin-inline-start: 0.5em; }
.recovery-codes > li { break-inside: avoid; overflow-wrap: anywhere; }
.kv dd + dt { margin-block-start: 0.75rem; }
.steps { counter-reset: step; padding-inline-start: 0; list-style: none; }
.steps > li { position: relative; counter-increment: step; padding-inline-start: 2.5rem; }
.steps > li + li { margin-block-start: 0.875rem; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--notice-surface);
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1875rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--link) 28%, transparent);
  border-radius: 999px;
  background: var(--notice-surface);
  color: var(--link);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Account: a grid of titled cards, session rows and a wide devices card. */
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-block-start: 1.5rem; }
.account-grid > * { margin: 0; }
.page-account .card > h2 { padding-block-end: 0.875rem; border-block-end: 1px solid var(--divider); }
.page-account .card > h2 + * { margin-block-start: 1rem; }
.session-list { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
.session-list > li { margin: 0; }
.session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  background: var(--surface-muted);
}
.session > * { margin: 0; }
.session > .kv { flex: 1 1 16rem; }
.session > form { flex: none; }

@media (min-width: 30rem) {
  .hero > .actions, .actions.row { flex-direction: row; flex-wrap: wrap; }
  .actions.row > li { flex: 1 1 12rem; }
  .kv { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 0.5rem 1.5rem; align-items: baseline; }
  .kv dd + dt { margin-block-start: 0; }
  .session > .kv { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); gap: 0.25rem 1rem; }
}
@media (min-width: 40rem) {
  .bar, main { padding-inline: 2rem; }
  h1 { font-size: 2rem; }
  .lead { font-size: 1.1875rem; }
  .page-card {
    max-width: min(34rem, calc(100% - 3rem));
    margin-block: 3rem auto;
    padding: 2.5rem 2.5rem 2.25rem;
    border: 1px solid var(--divider);
    border-radius: 1.25rem;
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 24px 48px -24px rgb(0 0 0 / 0.18);
  }
  .page-card:has(.grid-2) { max-width: min(44rem, calc(100% - 3rem)); }
  .page-account { padding-block: 2.5rem 4rem; }
  .page-account > h1 { font-size: 2.5rem; }
  .page-guide { padding-block: 2.5rem 4rem; }
  .hero { padding-block: 4rem 3.5rem; }
  .hero > .lead { font-size: 1.25rem; }
  .features { margin-block-start: 1.5rem; }
  .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .card { padding: 1.5rem; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .pilot { padding: 2rem; }
}
@media (min-width: 48rem) {
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .span-2 { grid-column: 1 / -1; }
  .pilot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 3rem; align-items: start; }
  .pilot > form { padding-block-start: 0; border-block-start: 0; }
  .pilot > .inline-links { grid-column: 2; }
}
/* A remembered theme (html[data-theme], written from the theme cookie) replaces the system setting on every page. Auto sets
 * no attribute. Screen only and never under forced colours or print, which keep their own complete token sets. The landing
 * sets its own tokens on its body (see below), so it has its own rules for the same attribute. */
@media screen and (forced-colors: none) {
  :root[data-theme="light"] {
    color-scheme: light;
    --background: #F6F7FB;
    --surface: #FFFFFF;
    --surface-muted: #EEF0F7;
    --text: #111827;
    --muted: #4B5565;
    --border: #6B7280;
    --divider: #E3E6EE;
    --link: #4F46E5;
    --link-hover: #4338CA;
    --on-link: #FFFFFF;
    --error: #B91C1C;
    --error-hover: #991B1B;
    --on-error: #FFFFFF;
    --success: #166534;
    --focus: #4F46E5;
    --notice-surface: #EEF2FF;
    --alert-surface: #FEF2F2;
    --success-surface: #F0FDF4;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --background: #0B0F1A;
    --surface: #131A2A;
    --surface-muted: #1B2335;
    --text: #F3F5FA;
    --muted: #B3BBCC;
    --border: #8B94A9;
    --divider: #283146;
    --link: #A5B4FC;
    --link-hover: #C7D2FE;
    --on-link: #0B0F1A;
    --error: #FCA5A5;
    --error-hover: #FECACA;
    --on-error: #0B0F1A;
    --success: #86EFAC;
    --focus: #C7D2FE;
    --notice-surface: #1E1F4A;
    --alert-surface: #3A1418;
    --success-surface: #07301A;
  }
  :root[data-theme="light"] body { background: radial-gradient(70rem 32rem at 50% -14rem, color-mix(in srgb, var(--link) 13%, transparent), transparent 70%) no-repeat, var(--background); }
  :root[data-theme="dark"] body { background: radial-gradient(70rem 32rem at 50% -14rem, color-mix(in srgb, var(--link) 11%, transparent), transparent 70%) no-repeat, var(--background); }
  :root[data-theme="dark"] .page-card, :root[data-theme="dark"] .card, :root[data-theme="dark"] button, :root[data-theme="dark"] .button, :root[data-theme="dark"] .action { box-shadow: none; }
  :root[data-theme="light"] .provider-button.provider-google { border-color: #747775; background: #FFFFFF; color: #1F1F1F; }
  :root[data-theme="light"] .provider-button.provider-google:hover { border-color: #747775; background: #F2F2F2; color: #1F1F1F; }
  :root[data-theme="light"] .provider-button.provider-github { border-color: #24292F; background: #24292F; color: #FFFFFF; }
  :root[data-theme="light"] .provider-button.provider-github:hover { border-color: #1B1F24; background: #1B1F24; color: #FFFFFF; }
  :root[data-theme="dark"] .provider-button.provider-google { border-color: #8E918F; background: #131314; color: #E3E3E3; }
  :root[data-theme="dark"] .provider-button.provider-google:hover { border-color: #8E918F; background: #1E1F20; color: #E3E3E3; }
  :root[data-theme="dark"] .provider-button.provider-github { border-color: #D0D7DE; background: #F6F8FA; color: #1F2328; }
  :root[data-theme="dark"] .provider-button.provider-github:hover { border-color: #D0D7DE; background: #EAEEF2; color: #1F2328; }
}
@media screen and (forced-colors: none) and (prefers-contrast: more) {
  :root[data-theme] {
    --divider: var(--border);
    --muted: var(--text);
  }
}
/* Beta landing: the home page in sign-up state approval only (main.page-landing). Every rule here names page-landing,
 * site-nav, a landing-* class, upcoming-list or a flow-* part, so no other page changes. The look follows the static draft of
 * 2026-11-04 (owner, 2026-11-06): a light page, one accent colour, large centred headings, white tiles and tinted bands.
 * The landing sets the shared colour tokens again on its own body: dark first, light when the system prefers light,
 * and the header's theme switch overrides either: three radios read with :has() (no script; this view only) or, when the page is
 * served with a theme form, three buttons that remember the choice in a cookie (html[data-theme]). Every landing colour, the layer diagram's included, comes from these tokens. */
body:has(> .page-landing), body:has(> .page-landing):has(.landing-theme input[value="dark"]:checked) {
  color-scheme: dark;
  --background: #0A0A0C;
  --surface: #1A1A1E;
  --surface-muted: #121215;
  --text: #F5F5F7;
  --muted: #A4A5AB;
  --border: #77787F;
  --divider: #2C2C32;
  --link: #E0AD62;
  --link-hover: #EBC283;
  --on-link: #0A0A0C;
  --error: #F2A49E;
  --error-hover: #F7C3BF;
  --on-error: #0A0A0C;
  --success: #93CFA8;
  --focus: #E0AD62;
  --notice-surface: #221C12;
  --alert-surface: #2A1616;
  --success-surface: #122018;
  background: var(--background);
}
@media (prefers-color-scheme: light) {
  body:has(> .page-landing) {
    color-scheme: light;
    --background: #FBFBFD;
    --surface: #FFFFFF;
    --surface-muted: #F2F2F5;
    --text: #1D1D1F;
    --muted: #5C5D64;
    --border: #86868B;
    --divider: #E3E3E8;
    --link: #8A5300;
    --link-hover: #6E4200;
    --on-link: #FFFFFF;
    --error: #B3261E;
    --error-hover: #8C1D18;
    --on-error: #FFFFFF;
    --success: #1E6B3A;
    --focus: #8A5300;
    --notice-surface: #F6ECDC;
    --alert-surface: #FCEEEE;
    --success-surface: #EAF5EE;
  }
}
body:has(> .page-landing):has(.landing-theme input[value="light"]:checked) {
  color-scheme: light;
  --background: #FBFBFD;
  --surface: #FFFFFF;
  --surface-muted: #F2F2F5;
  --text: #1D1D1F;
  --muted: #5C5D64;
  --border: #86868B;
  --divider: #E3E3E8;
  --link: #8A5300;
  --link-hover: #6E4200;
  --on-link: #FFFFFF;
  --error: #B3261E;
  --error-hover: #8C1D18;
  --on-error: #FFFFFF;
  --success: #1E6B3A;
  --focus: #8A5300;
  --notice-surface: #F6ECDC;
  --alert-surface: #FCEEEE;
  --success-surface: #EAF5EE;
}
/* A remembered theme (the cookie sets html[data-theme]) wins over the system setting here too, on the landing's own tokens. */
@media screen and (forced-colors: none) {
  html[data-theme="dark"] body:has(> .page-landing) {
    color-scheme: dark;
    --background: #0A0A0C;
    --surface: #1A1A1E;
    --surface-muted: #121215;
    --text: #F5F5F7;
    --muted: #A4A5AB;
    --border: #77787F;
    --divider: #2C2C32;
    --link: #E0AD62;
    --link-hover: #EBC283;
    --on-link: #0A0A0C;
    --error: #F2A49E;
    --error-hover: #F7C3BF;
    --on-error: #0A0A0C;
    --success: #93CFA8;
    --focus: #E0AD62;
    --notice-surface: #221C12;
    --alert-surface: #2A1616;
    --success-surface: #122018;
    background: var(--background);
  }
  html[data-theme="light"] body:has(> .page-landing) {
    color-scheme: light;
    --background: #FBFBFD;
    --surface: #FFFFFF;
    --surface-muted: #F2F2F5;
    --text: #1D1D1F;
    --muted: #5C5D64;
    --border: #86868B;
    --divider: #E3E3E8;
    --link: #8A5300;
    --link-hover: #6E4200;
    --on-link: #FFFFFF;
    --error: #B3261E;
    --error-hover: #8C1D18;
    --on-error: #FFFFFF;
    --success: #1E6B3A;
    --focus: #8A5300;
    --notice-surface: #F6ECDC;
    --alert-surface: #FCEEEE;
    --success-surface: #EAF5EE;
    background: var(--background);
  }
}
@media screen and (forced-colors: none) and (prefers-contrast: more) {
  html[data-theme] body:has(> .page-landing) {
    --divider: var(--border);
    --muted: var(--text);
  }
}
@media (prefers-contrast: more) {
  body:has(> .page-landing), body:has(> .page-landing):has(.landing-theme input[value="light"]:checked), body:has(> .page-landing):has(.landing-theme input[value="dark"]:checked) {
    --divider: var(--border);
    --muted: var(--text);
  }
}
/* Header: wordmark, the in-page links in the middle, the sign-up action, the theme switch and the language button. */
body:has(> .page-landing) .site-header { background: var(--background); }
body:has(> .page-landing) .bar { max-width: 67.5rem; padding-inline: 1.5rem; }
body:has(> .page-landing) .site-header .bar { min-height: 3.5rem; gap: 0.375rem 1rem; }
.site-nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; margin-inline-start: 0; font-size: 0.8125rem; }
.site-nav > a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.625rem; color: var(--muted); text-decoration: none; }
.site-nav > a:first-child { margin-inline-start: auto; }
.site-nav > a:hover { color: var(--text); text-decoration: underline; }
.site-nav > .action { min-height: 36px; margin-inline-start: auto; padding: 0.25rem 1rem; border-color: var(--text); border-radius: 999px; background: var(--text); color: var(--background); font-size: 0.8125rem; box-shadow: none; }
.site-nav > .action:hover { border-color: var(--text); background: var(--text); color: var(--background); text-decoration: none; }
/* The theme switch: one pill with three segments. The radios stay in the tab order and take the arrow keys; the chosen
 * segment carries a border and the focused one the shared focus ring. */
.landing-theme { display: inline-flex; align-items: center; gap: 0.125rem; margin: 0; padding: 0.1875rem; border: 1px solid var(--divider); border-radius: 999px; background: var(--surface-muted); }
.landing-theme > label { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding-inline: 0.6875rem; border: 1px solid transparent; border-radius: 999px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.landing-theme > label:hover { color: var(--text); }
.landing-theme > label:has(> input:checked) { border-color: var(--border); background: var(--surface); color: var(--text); }
.landing-theme > label:has(> input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.landing-theme input { position: absolute; inset: 0; width: 100%; min-height: 0px; margin: 0; opacity: 0; cursor: pointer; }
.landing-theme + .language-form, .landing-switch + .language-form { margin-inline-start: 0; }
/* With the theme form the same pill holds three buttons; the pressed one is marked like the chosen radio. */
.landing-switch { display: contents; }
.landing-theme > button { position: relative; display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding-block: 0; padding-inline: 0.6875rem; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: none; }
.landing-theme > button:hover { border-color: transparent; background: none; color: var(--text); }
.landing-theme > button[aria-pressed="true"] { border-color: var(--border); background: var(--surface); color: var(--text); }
.landing-theme > button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body:has(> .page-landing) .language-form button { font-size: 0.8125rem; }
/* Hero: the badge as an accent eyebrow, the headline, one line and the two actions; the diagram follows on a tinted band. */
.page-landing { max-width: none; padding: 0; }
.landing-hero { margin: 0; padding: 8.25rem 0 0; text-align: center; }
.landing-hero > :not(.flow) { margin-inline: auto; padding-inline: 1.5rem; }
.landing-hero > .badge { display: block; margin-block-start: 0; border: 0; background: none; color: var(--link); font-size: 1.1875rem; font-weight: 600; }
.landing-hero > h1 {
  max-width: 13.5em;
  margin-block-start: 0.875rem;
  font-size: clamp(2.625rem, 1rem + 5.6vw, 4.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.landing-hero > .lead { max-width: 30em; margin-block-start: 1.875rem; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem); line-height: 1.7; color: var(--muted); }
.landing-hero > .actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.75rem; margin-block-start: 2.5rem; }
.landing-hero .actions > li > a { min-height: 48px; padding: 0 1.625rem; border-radius: 999px; font-size: 1.0625rem; box-shadow: none; }
.landing-hero .actions > li > a.action, .landing-hero .actions > li > a.action:hover { border-color: var(--text); background: var(--text); color: var(--background); }
.landing-hero .actions > li > a.button-secondary { padding-inline: 0.5rem; border-color: transparent; background: none; color: var(--link); }
.landing-hero .actions > li > a.button-secondary:hover { border-color: transparent; background: none; color: var(--link-hover); text-decoration: underline; }
.landing-hero .actions > li > a.button-secondary::after { content: "›" / ""; margin-inline-start: 0.125rem; }
.flow { max-width: none; margin: 6.5rem 0 0; padding: 6rem max(1.5rem, calc((100% - 70rem) / 2)) 6.5rem; background: var(--surface-muted); }
.flow > svg { display: block; width: 100%; overflow: visible; }
.flow > .flow-tall { display: none; }
.flow text { font-family: inherit; }
.flow-layer-mem { fill: var(--surface); stroke: color-mix(in srgb, var(--text) 22%, var(--surface)); stroke-width: 1.5; }
.flow-layer-ag { fill: var(--surface-muted); stroke: color-mix(in srgb, var(--text) 14%, var(--surface-muted)); stroke-width: 1.5; }
.flow-layer-title { fill: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.flow-layer-title-s { font-size: 16px; }
.flow-layer-sub { fill: var(--muted); font-size: 13px; }
.flow-layer-proj { fill: var(--muted); font-size: 12px; }
.flow-band-title { fill: var(--text); font-size: 14px; font-weight: 700; }
.flow-row { fill: color-mix(in srgb, var(--text) 5%, var(--surface)); stroke: color-mix(in srgb, var(--text) 10%, var(--surface)); stroke-width: 1; }
.flow-row-hl { fill: none; stroke: var(--link); stroke-width: 1.5; }
.flow-row-bar { fill: var(--link); }
.flow-row-kind { fill: var(--muted); font-size: 12px; font-weight: 700; }
.flow-row-text { fill: var(--text); font-size: 14px; }
.flow-row-text-s { font-size: 13px; }
.flow-row-reason { fill: var(--muted); font-size: 13px; }
.flow-row-reason-s { font-size: 12px; }
.flow-row-ver { fill: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-tag-box { fill: var(--surface); stroke: var(--link); stroke-width: 1; }
.flow-tag-text { fill: var(--link); font-size: 11.5px; font-weight: 700; }
.flow-chip { fill: var(--surface); stroke: color-mix(in srgb, var(--text) 22%, var(--surface)); stroke-width: 1; }
.flow-chip-hl { fill: none; stroke: var(--link); stroke-width: 1.75; }
.flow-chip-name { fill: var(--text); font-size: 15px; font-weight: 700; }
.flow-chip-name-s { font-size: 13.5px; }
.flow-chip-desc { fill: var(--muted); font-size: 12px; }
.flow-ch-line { stroke: color-mix(in srgb, var(--text) 30%, var(--surface-muted)); stroke-width: 1; stroke-dasharray: 2 4; }
.flow-pk { fill: var(--link); opacity: 0; }
.flow-vb { fill: var(--link); font-size: 12px; font-weight: 700; opacity: 0; }
.flow-vb-still { fill: var(--link); font-size: 12px; font-weight: 700; }
.flow-vb-s { font-size: 11px; }
.flow-chev { fill: none; stroke: var(--link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-far { fill: var(--link); }
/* The still frame, also the drawing whenever nothing moves: AI app B has just revised the decision to v2 and every
 * other connected app reads the latest records. */
.flow-v1, .flow-tadd-dec, .flow-tadd-res, .flow-tadd-task, .flow-rhl-res, .flow-rhl-task, .flow-chip-hl { opacity: 0; }
.flow-chl-b { opacity: 1; }
/* Sections: centred headings over white tiles; the upcoming features sit on a tinted band. */
.page-landing > .landing-section { margin: 0; padding: 8rem max(1.5rem, calc((100% - 67.5rem) / 2)); }
.page-landing > .landing-section + .landing-section { background: var(--surface-muted); }
.landing-section > h2 { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.25rem); line-height: 1.2; letter-spacing: -0.022em; text-align: center; text-wrap: balance; }
.landing-section > h2 + p { max-width: 40em; margin: 1.375rem auto 0; font-size: 1.1875rem; line-height: 1.75; color: var(--muted); text-align: center; }
.landing-section > .small { max-width: 40rem; margin: 2.5rem auto 0; font-size: 0.9375rem; text-align: center; }
.landing-cards { display: grid; gap: 1.25rem; margin: 4rem 0 0; padding: 0; list-style: none; counter-reset: landing-card; }
.landing-cards > li { margin: 0; padding: 2.5rem 2.125rem 2.25rem; border: 1px solid transparent; border-radius: 1.5rem; background: var(--surface); box-shadow: 0 1px 0 var(--divider), 0 12px 40px rgb(0 0 0 / 0.04); counter-increment: landing-card; }
.landing-label { color: var(--link); font-size: 0.9375rem; font-weight: 700; }
.landing-label::before { content: counter(landing-card, decimal-leading-zero) " · " / ""; }
.landing-cards strong { display: block; margin-block-start: 1.125rem; font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.022em; text-wrap: balance; }
.landing-cards strong + p { margin-block-start: 1rem; color: var(--muted); line-height: 1.75; }
.upcoming-list { display: grid; gap: 1.25rem; margin: 4rem 0 0; padding: 0; list-style: none; }
.upcoming-list > li { display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 2.75rem 2.5rem; border: 1px solid transparent; border-radius: 1.5rem; background: var(--surface); }
.upcoming-list strong { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -0.022em; }
.upcoming-list p { margin-block-start: 0.875rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.75; }
.upcoming-list .badge { order: -1; margin: 0 0 1.125rem; border-color: transparent; background: var(--notice-surface); color: var(--link); }
/* The connection, privacy and guide cards and the beta band, in the same tiles and type. */
.page-landing > .grid-2, .page-landing > .card { margin: 8rem max(1.5rem, calc((100% - 67.5rem) / 2)) 0; }
.page-landing > .grid-2 { gap: 1.25rem; }
.page-landing > .grid-2 > .card, .page-landing > .connect-guide { padding: 2.5rem 2.25rem; border-color: transparent; border-radius: 1.5rem; background: var(--surface); box-shadow: 0 1px 0 var(--divider), 0 12px 40px rgb(0 0 0 / 0.04); }
.page-landing > .connect-guide { margin-block-start: 1.25rem; }
.page-landing .card > h2 { font-size: 1.5rem; letter-spacing: -0.022em; }
.page-landing > .pilot { display: block; margin: 8rem 0 0; padding: 8.5rem max(1.5rem, calc((100% - 67.5rem) / 2)) 7.5rem; border: 0; border-block-start: 1px solid var(--divider); border-radius: 0; background: none; box-shadow: none; text-align: center; }
.page-landing .pilot-text > h2 { font-size: clamp(2.125rem, 1.1rem + 3.8vw, 4rem); line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.page-landing .pilot-text > p { max-width: 40em; margin: 1.5rem auto 0; font-size: 1.1875rem; line-height: 1.75; color: var(--muted); }
.page-landing > .pilot > form { max-width: 30rem; margin: 3.5rem auto 0; padding: 2rem; border: 0; border-radius: 1.5rem; background: var(--surface); box-shadow: 0 1px 0 var(--divider), 0 20px 60px rgb(0 0 0 / 0.06); text-align: start; }
.page-landing > .pilot > .inline-links { justify-content: center; margin-block-start: 1.5rem; }
/* The Korean headline breaks after its first phrase, as in the draft; English keeps the balanced lines. */
@media (min-width: 40rem) {
  .landing-hero > h1:lang(ko) { max-width: 12em; text-wrap: wrap; }
}
@media (min-width: 56rem) {
  .landing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .upcoming-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upcoming-list > li:last-child { grid-column: 1 / -1; }
}
/* Narrower screens: the in-page links take their own row under the wordmark, the switch and the language button. */
@media (max-width: 60rem) {
  .site-nav { order: 3; flex-basis: 100%; }
  .site-nav > a:first-child { margin-inline-start: -0.625rem; }
  .landing-theme { margin-inline-start: auto; }
}
@media (max-width: 40rem) {
  body:has(> .page-landing) .bar { padding-inline: 1.25rem; }
  .site-nav { order: 0; flex-basis: auto; }
  .site-nav > a { display: none; }
  .site-nav > .action { display: inline-flex; }
  .landing-theme { margin-inline-start: 0; }
  .landing-theme + .language-form, .landing-switch + .language-form { margin-inline-start: auto; }
  .flow > .flow-wide { display: none; }
  .flow > .flow-tall { display: block; max-width: 24rem; margin-inline: auto; }
  .landing-hero { padding-block-start: 4.75rem; }
  .landing-hero > :not(.flow) { padding-inline: 1.25rem; }
  .landing-hero > h1 { font-size: clamp(2.25rem, 10.4vw, 3.25rem); line-height: 1.16; letter-spacing: -0.03em; }
  .landing-hero > .lead { margin-block-start: 1.375rem; font-size: 1.125rem; }
  .landing-hero > .actions { flex-direction: column; gap: 0.375rem; margin-block-start: 2rem; }
  .landing-hero > .actions > li { width: 100%; max-width: 21.25rem; }
  .flow { margin-block-start: 4.5rem; padding: 3.5rem 1.25rem 4rem; }
  .page-landing > .landing-section { padding: 5.25rem 1.25rem; }
  .landing-cards, .upcoming-list { margin-block-start: 2.75rem; }
  .landing-cards > li { padding: 1.875rem 1.5rem; }
  .upcoming-list > li { padding: 2.125rem 1.5rem; }
  .page-landing > .grid-2, .page-landing > .card { margin: 5.25rem 1.25rem 0; }
  .page-landing > .grid-2 > .card, .page-landing > .connect-guide { padding: 2rem 1.5rem; }
  .page-landing > .connect-guide { margin-block-start: 1.25rem; }
  .page-landing > .pilot { margin: 5.25rem 0 0; padding: 5.5rem 1.25rem 5rem; }
  .page-landing > .pilot > form { padding: 1.5rem 1.25rem; }
}
/* The only motion on the site: the 6 s loop of the layer diagram (design .task/diagram, 2026-11-05). Records move up
 * from the apps into the memory layer and back down; rows arrive, one row is marked as just changed, the decision is
 * revised from v1 to v2. Without it (reduced motion, or a browser that does not move) the still frame above is the whole story. */
@media (prefers-reduced-motion: no-preference) {
  .flow-still { display: none; }
  .flow-pk, .flow-vb, .flow-chip-hl, .flow-row-dec, .flow-row-res, .flow-row-task, .flow-rhl-dec, .flow-rhl-res, .flow-rhl-task, .flow-tadd-dec, .flow-tadd-res, .flow-tadd-task, .flow-trev-dec, .flow-v1, .flow-v2 { animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
  .flow-wide .flow-pk0 { animation-name: flow-pk0-wide; }
  .flow-tall .flow-pk0 { animation-name: flow-pk0-near; }
  .flow-wide .flow-pk1 { animation-name: flow-pk1-wide; }
  .flow-tall .flow-pk1 { animation-name: flow-pk1-near; }
  .flow-wide .flow-pk2 { animation-name: flow-pk2-wide; }
  .flow-tall .flow-pk2 { animation-name: flow-pk2-near; }
  .flow-wide .flow-pk3 { animation-name: flow-pk3-wide; }
  .flow-tall .flow-far.flow-pk3 { animation-name: flow-pk3-far; }
  .flow-wide .flow-pk4 { animation-name: flow-pk4-wide; }
  .flow-tall .flow-pk4 { animation-name: flow-pk4-near; }
  .flow-wide .flow-pk5 { animation-name: flow-pk5-wide; }
  .flow-tall .flow-pk5 { animation-name: flow-pk5-near; }
  .flow-tall .flow-far.flow-pk5 { animation-name: flow-pk5-far; }
  .flow-chl-a { animation-name: flow-hl-a; }
  .flow-vb-w-a { animation-name: flow-vb-w-a; }
  .flow-vb-r-a { animation-name: flow-vb-r-a; }
  .flow-chl-b { animation-name: flow-hl-b; }
  .flow-vb-w-b { animation-name: flow-vb-w-b; }
  .flow-vb-r-b { animation-name: flow-vb-r-b; }
  .flow-chl-c { animation-name: flow-hl-c; }
  .flow-vb-w-c { animation-name: flow-vb-w-c; }
  .flow-vb-r-c { animation-name: flow-vb-r-c; }
  .flow-chl-d { animation-name: flow-hl-d; }
  .flow-vb-w-d { animation-name: flow-vb-w-d; }
  .flow-vb-r-d { animation-name: flow-vb-r-d; }
  .flow-chl-e { animation-name: flow-hl-e; }
  .flow-vb-r-e { animation-name: flow-vb-r-e; }
  .flow-row-dec { animation-name: flow-row-dec; }
  .flow-row-res { animation-name: flow-row-res; }
  .flow-row-task { animation-name: flow-row-task; }
  .flow-rhl-dec { animation-name: flow-hl-dec; }
  .flow-tadd-dec { animation-name: flow-tadd-dec; }
  .flow-trev-dec { animation-name: flow-trev-dec; }
  .flow-rhl-res, .flow-tadd-res { animation-name: flow-hl-res; }
  .flow-rhl-task, .flow-tadd-task { animation-name: flow-hl-task; }
  .flow-v1 { animation-name: flow-v-out; }
  .flow-v2 { animation-name: flow-v-in; }
}
@keyframes flow-pk0-wide { 0% { opacity: 0; transform: translateY(0px); } 1.667% { opacity: 0; transform: translateY(0px); } 1.683% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 9.167% { opacity: 1; transform: translateY(-128px); } 9.183% { opacity: 0; transform: translateY(-128px); } 100% { opacity: 0; transform: translateY(-128px); } }
@keyframes flow-pk0-near { 0% { opacity: 0; transform: translateY(0px); } 1.667% { opacity: 0; transform: translateY(0px); } 1.683% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 9.167% { opacity: 1; transform: translateY(-90px); } 9.183% { opacity: 0; transform: translateY(-90px); } 100% { opacity: 0; transform: translateY(-90px); } }
@keyframes flow-pk1-wide { 0% { opacity: 0; transform: translateY(0px); } 14.167% { opacity: 0; transform: translateY(0px); } 14.183% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 21.667% { opacity: 1; transform: translateY(128px); } 21.683% { opacity: 0; transform: translateY(128px); } 100% { opacity: 0; transform: translateY(128px); } }
@keyframes flow-pk1-near { 0% { opacity: 0; transform: translateY(0px); } 14.167% { opacity: 0; transform: translateY(0px); } 14.183% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 21.667% { opacity: 1; transform: translateY(90px); } 21.683% { opacity: 0; transform: translateY(90px); } 100% { opacity: 0; transform: translateY(90px); } }
@keyframes flow-pk2-wide { 0% { opacity: 0; transform: translateY(0px); } 25.833% { opacity: 0; transform: translateY(0px); } 25.85% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 33.333% { opacity: 1; transform: translateY(-128px); } 33.35% { opacity: 0; transform: translateY(-128px); } 100% { opacity: 0; transform: translateY(-128px); } }
@keyframes flow-pk2-near { 0% { opacity: 0; transform: translateY(0px); } 25.833% { opacity: 0; transform: translateY(0px); } 25.85% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 33.333% { opacity: 1; transform: translateY(-90px); } 33.35% { opacity: 0; transform: translateY(-90px); } 100% { opacity: 0; transform: translateY(-90px); } }
@keyframes flow-pk3-wide { 0% { opacity: 0; transform: translateY(0px); } 37.5% { opacity: 0; transform: translateY(0px); } 37.517% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 45% { opacity: 1; transform: translateY(-128px); } 45.017% { opacity: 0; transform: translateY(-128px); } 100% { opacity: 0; transform: translateY(-128px); } }
@keyframes flow-pk3-far { 0% { opacity: 0; transform: translateY(0px); } 37.5% { opacity: 0; transform: translateY(0px); } 37.517% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 45% { opacity: 1; transform: translateY(-138px); } 45.017% { opacity: 0; transform: translateY(-138px); } 100% { opacity: 0; transform: translateY(-138px); } }
@keyframes flow-pk4-wide { 0% { opacity: 0; transform: translateY(0px); } 49.167% { opacity: 0; transform: translateY(0px); } 49.183% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 56.667% { opacity: 1; transform: translateY(-128px); } 56.683% { opacity: 0; transform: translateY(-128px); } 100% { opacity: 0; transform: translateY(-128px); } }
@keyframes flow-pk4-near { 0% { opacity: 0; transform: translateY(0px); } 49.167% { opacity: 0; transform: translateY(0px); } 49.183% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 56.667% { opacity: 1; transform: translateY(-90px); } 56.683% { opacity: 0; transform: translateY(-90px); } 100% { opacity: 0; transform: translateY(-90px); } }
@keyframes flow-pk5-wide { 0% { opacity: 0; transform: translateY(0px); } 60.833% { opacity: 0; transform: translateY(0px); } 60.85% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 68.333% { opacity: 1; transform: translateY(128px); } 68.35% { opacity: 0; transform: translateY(128px); } 100% { opacity: 0; transform: translateY(128px); } }
@keyframes flow-pk5-near { 0% { opacity: 0; transform: translateY(0px); } 60.833% { opacity: 0; transform: translateY(0px); } 60.85% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 68.333% { opacity: 1; transform: translateY(90px); } 68.35% { opacity: 0; transform: translateY(90px); } 100% { opacity: 0; transform: translateY(90px); } }
@keyframes flow-pk5-far { 0% { opacity: 0; transform: translateY(0px); } 60.833% { opacity: 0; transform: translateY(0px); } 60.85% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 68.333% { opacity: 1; transform: translateY(138px); } 68.35% { opacity: 0; transform: translateY(138px); } 100% { opacity: 0; transform: translateY(138px); } }
@keyframes flow-hl-a { 0% { opacity: 1; } 7.5% { opacity: 1; } 10.167% { opacity: 0; } 66.333% { opacity: 0; } 67.333% { opacity: 1; } 73.333% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-w-a { 0% { opacity: 0; } 1.667% { opacity: 0; } 3% { opacity: 1; } 12% { opacity: 1; } 15.333% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-r-a { 0% { opacity: 0; } 60.833% { opacity: 0; } 62.167% { opacity: 1; } 71.167% { opacity: 1; } 74.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-hl-b { 0% { opacity: 0; } 19.667% { opacity: 0; } 20.667% { opacity: 1; } 26.667% { opacity: 1; } 29.333% { opacity: 0; } 47.5% { opacity: 0; } 48.5% { opacity: 1; } 55% { opacity: 1; } 57.667% { opacity: 0; } 66.333% { opacity: 0; } 67.333% { opacity: 1; } 73.333% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-w-b { 0% { opacity: 0; } 49.167% { opacity: 0; } 50.5% { opacity: 1; } 59.5% { opacity: 1; } 62.833% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-r-b { 0% { opacity: 0; } 14.167% { opacity: 0; } 15.5% { opacity: 1; } 24.5% { opacity: 1; } 27.833% { opacity: 0; } 60.833% { opacity: 0; } 62.167% { opacity: 1; } 71.167% { opacity: 1; } 74.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-hl-c { 0% { opacity: 0; } 19.667% { opacity: 0; } 20.667% { opacity: 1; } 31.667% { opacity: 1; } 34.333% { opacity: 0; } 66.333% { opacity: 0; } 67.333% { opacity: 1; } 73.333% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-w-c { 0% { opacity: 0; } 25.833% { opacity: 0; } 27.167% { opacity: 1; } 36.167% { opacity: 1; } 39.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-r-c { 0% { opacity: 0; } 14.167% { opacity: 0; } 15.5% { opacity: 1; } 24.5% { opacity: 1; } 27.833% { opacity: 0; } 60.833% { opacity: 0; } 62.167% { opacity: 1; } 71.167% { opacity: 1; } 74.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-hl-d { 0% { opacity: 0; } 35.833% { opacity: 0; } 36.833% { opacity: 1; } 43.333% { opacity: 1; } 46% { opacity: 0; } 66.333% { opacity: 0; } 67.333% { opacity: 1; } 73.333% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-w-d { 0% { opacity: 0; } 37.5% { opacity: 0; } 38.833% { opacity: 1; } 47.833% { opacity: 1; } 51.167% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-r-d { 0% { opacity: 0; } 60.833% { opacity: 0; } 62.167% { opacity: 1; } 71.167% { opacity: 1; } 74.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-hl-e { 0% { opacity: 0; } 66.333% { opacity: 0; } 67.333% { opacity: 1; } 73.333% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-vb-r-e { 0% { opacity: 0; } 60.833% { opacity: 0; } 62.167% { opacity: 1; } 71.167% { opacity: 1; } 74.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-row-dec { 0% { opacity: 0; transform: translateY(8px); } 8% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 11.333% { opacity: 1; transform: translateY(0px); } 90% { opacity: 1; transform: translateY(0px); } 95.833% { opacity: 0; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(0px); } }
@keyframes flow-row-res { 0% { opacity: 0; transform: translateY(8px); } 32.167% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 35.5% { opacity: 1; transform: translateY(0px); } 90% { opacity: 1; transform: translateY(0px); } 95.833% { opacity: 0; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(0px); } }
@keyframes flow-row-task { 0% { opacity: 0; transform: translateY(8px); } 43.833% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 47.167% { opacity: 1; transform: translateY(0px); } 90% { opacity: 1; transform: translateY(0px); } 95.833% { opacity: 0; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(0px); } }
@keyframes flow-hl-dec { 0% { opacity: 0; } 8% { opacity: 0; } 9% { opacity: 1; } 32.167% { opacity: 1; } 34.833% { opacity: 0; } 55.5% { opacity: 0; } 56.5% { opacity: 1; } 100% { opacity: 1; } }
@keyframes flow-tadd-dec { 0% { opacity: 0; } 8% { opacity: 0; } 9% { opacity: 1; } 32.167% { opacity: 1; } 34.833% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-trev-dec { 0% { opacity: 0; } 55.5% { opacity: 0; } 56.5% { opacity: 1; } 100% { opacity: 1; } }
@keyframes flow-hl-res { 0% { opacity: 0; } 32.167% { opacity: 0; } 33.167% { opacity: 1; } 43.833% { opacity: 1; } 46.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-hl-task { 0% { opacity: 0; } 43.833% { opacity: 0; } 44.833% { opacity: 1; } 55.5% { opacity: 1; } 58.167% { opacity: 0; } 100% { opacity: 0; } }
@keyframes flow-v-out { 0% { opacity: 1; transform: translateY(0px); } 55.5% { opacity: 1; transform: translateY(0px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 57.5% { opacity: 0; transform: translateY(-7px); } 100% { opacity: 0; transform: translateY(-7px); } }
@keyframes flow-v-in { 0% { opacity: 0; transform: translateY(7px); } 57.5% { opacity: 0; transform: translateY(7px); animation-timing-function: cubic-bezier(.4,0,.2,1); } 60.5% { opacity: 1; transform: translateY(0px); } 100% { opacity: 1; transform: translateY(0px); } }
@media (forced-colors: active) {
  :root {
    --background: Canvas;
    --surface: Canvas;
    --surface-muted: Canvas;
    --text: CanvasText;
    --muted: CanvasText;
    --border: ButtonText;
    --divider: CanvasText;
    --link: LinkText;
    --link-hover: LinkText;
    --on-link: ButtonText;
    --error: CanvasText;
    --error-hover: CanvasText;
    --on-error: ButtonText;
    --success: CanvasText;
    --focus: Highlight;
    --notice-surface: Canvas;
    --alert-surface: Canvas;
    --success-surface: Canvas;
  }
  button, .button, .action, .button-secondary, .button-danger, .provider-button, .language-form button {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .provider-logo { forced-color-adjust: none; }
  button:disabled, [aria-disabled="true"] { border-color: GrayText; color: GrayText; }
  .notice, .alert, .success, [role="status"], [role="alert"], .badge, .card, .session, .choice, .app-guide, .snippet, .prompt-list > li { border: 1px solid CanvasText; }
  .feature-list > li::before, .steps > li::before { border: 1px solid CanvasText; }
  .choice:has(> input:checked) { border-color: Highlight; }
  /* The landing sets the tokens on its body; here they return to the system colours, and the chosen theme segment is marked. */
  body:has(> .page-landing), body:has(> .page-landing):has(.landing-theme input[value="light"]:checked), body:has(> .page-landing):has(.landing-theme input[value="dark"]:checked) {
    --background: Canvas;
    --surface: Canvas;
    --surface-muted: Canvas;
    --text: CanvasText;
    --muted: CanvasText;
    --border: ButtonText;
    --divider: CanvasText;
    --link: LinkText;
    --link-hover: LinkText;
    --on-link: ButtonText;
    --error: CanvasText;
    --error-hover: CanvasText;
    --on-error: ButtonText;
    --success: CanvasText;
    --focus: Highlight;
    --notice-surface: Canvas;
    --alert-surface: Canvas;
    --success-surface: Canvas;
  }
  .landing-theme > label:has(> input:checked) { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  .landing-theme > button[aria-pressed="true"] { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  :focus-visible, [role="alert"][tabindex="-1"]:focus, .alert[tabindex="-1"]:focus, [autofocus]:focus { outline: 3px solid Highlight; outline-offset: 2px; }
}
@media print {
  :root {
    --background: #FFFFFF;
    --surface: #FFFFFF;
    --surface-muted: #EEF0F7;
    --text: #111827;
    --muted: #4B5565;
    --border: #6B7280;
    --divider: #E3E6EE;
    --link: #4F46E5;
    --link-hover: #4338CA;
    --on-link: #FFFFFF;
    --error: #B91C1C;
    --error-hover: #991B1B;
    --on-error: #FFFFFF;
    --success: #166534;
    --focus: #4F46E5;
    --notice-surface: #EEF2FF;
    --alert-surface: #FEF2F2;
    --success-surface: #F0FDF4;
  }
  .skip-link, body > a:first-child, .language-form { display: none; }
  body { background: #FFFFFF; }
  /* The landing prints in its light palette whatever the screen showed, without the theme switch. */
  body:has(> .page-landing), body:has(> .page-landing):has(.landing-theme input[value="light"]:checked), body:has(> .page-landing):has(.landing-theme input[value="dark"]:checked) {
    color-scheme: light;
    --background: #FFFFFF;
    --surface: #FFFFFF;
    --surface-muted: #F2F2F5;
    --text: #1D1D1F;
    --muted: #5C5D64;
    --border: #86868B;
    --divider: #E3E3E8;
    --link: #8A5300;
    --link-hover: #6E4200;
    --on-link: #FFFFFF;
    --error: #B3261E;
    --error-hover: #8C1D18;
    --on-error: #FFFFFF;
    --success: #1E6B3A;
    --focus: #8A5300;
    --notice-surface: #F6ECDC;
    --alert-surface: #FCEEEE;
    --success-surface: #EAF5EE;
    background: #FFFFFF;
  }
  .landing-theme { display: none; }
  .page-card { padding: 0; border: 0; box-shadow: none; }
}