/* Built by design/tools/bundle.py from ../../core/core.css, theme.css, brand.css, auth.css. Do not edit. */
/* Core UI shared by every brand: base, components, sign-in and mailbox.
   Reads only tokens from brands/<site-id>/theme.css. Brand page layout belongs to @layer site.
   Logical properties only (inline/block), so RTL locales need no second stylesheet. */
@layer reset, tokens, core, site;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
  :where(ul, ol)[role="list"], :where(nav, .nav-group) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
  img, svg { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  }
}

@layer core {
  /* Label colors are user data, so the palette belongs to core, not to a brand. */
  :root {
    --label-blue: light-dark(oklch(52% 0.13 255), oklch(76% 0.1 255));
    --label-rose: light-dark(oklch(52% 0.15 0), oklch(76% 0.11 0));
    --label-teal: light-dark(oklch(52% 0.08 200), oklch(78% 0.08 200));
    --label-sand: light-dark(oklch(55% 0.09 75), oklch(80% 0.09 75));
  }
  @media (prefers-contrast: more) {
    :root { --color-rule: var(--color-rule-strong); --color-ink-3: var(--color-ink-2); }
  }

  body {
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
  }
  html.i18n-pending body { opacity: 0; }
  ::selection { background: var(--color-rubric-tint); color: var(--color-ink); }
  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--color-rule-strong);
  }
  a:hover { text-decoration-color: var(--color-rubric); }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  code { font-family: var(--font-mono); font-size: 0.92em; }
  /* A missing translation shows its key instead of silently disappearing. */
  [data-i18n]:empty::before { content: attr(data-i18n); color: var(--color-danger); font: 0.75rem var(--font-mono); }

  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .icon {
    inline-size: 1.125rem; block-size: 1.125rem; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  [dir="rtl"] .icon--flip { scale: -1 1; }

  .brand {
    display: inline-flex; align-items: center; gap: 0.625rem;
    color: var(--color-ink); text-decoration: none;
    font: 400 1.3125rem/1 var(--font-display); letter-spacing: -0.005em;
  }
  .brand img { inline-size: 1.75rem; block-size: 1.75rem; }

  /* Buttons. Primary actions are set in ink; the rubric is never a button fill. */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    min-block-size: 2.5rem; padding-inline: 1rem;
    border: 1px solid transparent; border-radius: var(--radius-s);
    font: 700 0.9375rem/1.2 var(--font-ui); text-align: center; text-decoration: none;
    cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  }
  .btn--primary { background: var(--color-ink); color: var(--color-on-ink); }
  .btn--primary:hover { background: color-mix(in oklch, var(--color-ink) 84%, var(--color-rubric)); color: var(--color-on-ink); }
  .btn--secondary { border-color: var(--color-rule-strong); background: transparent; color: var(--color-ink); }
  .btn--secondary:hover { border-color: var(--color-ink); }
  .btn--quiet { background: transparent; color: var(--color-ink-2); }
  .btn--quiet:hover { background: var(--color-paper-2); color: var(--color-ink); }
  .btn--sm { min-block-size: 2rem; padding-inline: 0.75rem; font-size: 0.875rem; }
  .btn--lg { min-block-size: 3rem; padding-inline: 1.5rem; font-size: 1rem; }
  .btn--block { inline-size: 100%; }
  .btn:disabled { cursor: not-allowed; opacity: 0.55; }
  .btn[aria-busy="true"] { cursor: progress; opacity: 0.75; }

  .icon-btn {
    display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem;
    border: 0; border-radius: var(--radius-s); background: transparent; color: var(--color-ink-2); cursor: pointer;
  }
  .icon-btn:hover { background: var(--color-paper-2); color: var(--color-ink); }

  /* Delivery marks, like a postmark: same words and glyphs on every brand. */
  .badge {
    display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem;
    border: 1px solid currentColor; border-radius: var(--radius-s);
    font: 700 0.8125rem/1.4 var(--font-ui);
  }
  .badge .icon { inline-size: 1rem; block-size: 1rem; }
  .badge--sealed { background: var(--color-sealed-tint); color: var(--color-sealed); }
  .badge--postcard { background: var(--color-postcard-tint); color: var(--color-postcard); }
  .badge--neutral { border-color: var(--color-rule-strong); color: var(--color-ink-2); }

  /* Language switcher: Popover API, language names in their own language. */
  .locale [popover] {
    position: fixed; inset: auto; inset-block-start: 3.75rem; inset-inline-end: 1rem; margin: 0;
    min-inline-size: 12rem; padding: 0.375rem;
    border: 1px solid var(--color-rule-strong); border-radius: var(--radius-m);
    background: var(--color-field); color: var(--color-ink);
    box-shadow: 0 1rem 2rem -1rem oklch(0% 0 0 / 0.35);
  }
  .locale [popover] a {
    display: block; padding: 0.5rem 0.75rem; border-inline-start: 2px solid transparent;
    color: var(--color-ink); text-decoration: none;
  }
  .locale [popover] a:hover { background: var(--color-paper-2); }
  .locale [popover] a[aria-current] { border-inline-start-color: var(--color-rubric); font-weight: 700; }

  /* Forms */
  .field { display: grid; gap: 0.375rem; }
  .label { font-size: 0.9375rem; font-weight: 700; }
  .hint { font-size: 0.875rem; color: var(--color-ink-2); }
  .control {
    display: flex; align-items: stretch; min-block-size: 2.875rem;
    border: 1px solid var(--color-rule-strong); border-radius: var(--radius-s); background: var(--color-field);
  }
  .control:focus-within { border-color: var(--color-ink); outline: 2px solid var(--color-focus); outline-offset: 1px; }
  .control[data-invalid="true"] { border-color: var(--color-danger); }
  .control input { flex: 1 1 0; min-inline-size: 0; padding-inline: 0.75rem; border: 0; background: transparent; outline: none; }
  .control input::placeholder { color: var(--color-ink-3); }
  .control .icon-btn { align-self: center; margin-inline-end: 0.25rem; }
  .control__at { display: grid; place-items: center; padding-inline: 0.125rem; color: var(--color-ink-3); font-family: var(--font-mono); }
  .control__select { position: relative; display: flex; flex: none; max-inline-size: 62%; border-inline-start: 1px solid var(--color-rule); }
  .control__select select {
    inline-size: 100%; min-inline-size: 0; padding-inline: 0.625rem 2rem;
    border: 0; background: var(--color-paper-2); appearance: none; outline: none;
    font: 0.875rem var(--font-mono);
  }
  .control__select .icon {
    position: absolute; inset-inline-end: 0.5rem; inset-block-start: 50%; translate: 0 -50%;
    inline-size: 1rem; block-size: 1rem; color: var(--color-ink-2); pointer-events: none;
  }
  .form-error {
    display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem;
    border-inline-start: 3px solid var(--color-danger); background: var(--color-danger-tint);
    color: var(--color-danger); font-size: 0.9375rem;
  }
  .form-error .icon { margin-block-start: 0.125rem; }

  /* Sign-in defaults: a sheet with a margin note. A brand restyles these classes in its own layer
     (parent16: brands/parent16/auth.css), the markup and behaviour stay core. */
  .auth__main { container-type: inline-size; padding: clamp(2rem, 9vh, 6rem) clamp(1rem, 4vw, 2.5rem); }
  .auth__sheet { display: grid; grid-template-columns: minmax(0, 26rem); gap: 2.5rem; justify-content: center; align-content: start; }
  @container (inline-size > 52rem) {
    .auth__sheet { grid-template-columns: minmax(0, 26rem) minmax(0, 15rem); column-gap: 4.5rem; }
    .margin-note { margin-block-start: 6.25rem; }
  }
  .auth__title { margin-block-end: 0.5rem; font: 400 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -0.012em; }
  .auth__lead { margin-block-end: 2rem; color: var(--color-ink-2); }
  .auth__form { display: grid; gap: 1.25rem; }
  .auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-block-start: 1.5rem; font-size: 0.9375rem; }
  .margin-note {
    display: grid; gap: 0.75rem; align-content: start; padding-block-start: 0.75rem;
    border-block-start: 2px solid var(--color-ink); color: var(--color-ink-2); font-size: 0.875rem;
  }
  .margin-note .icon { color: var(--color-ink-2); }

  /* Account (TASK-054): passkey sign-in, registration, recovery. One [data-panel] is visible at a time;
     every panel keeps the main column in the same place, so switching modes does not move the form. */
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  /* Headings take focus only so a screen reader announces the new panel; they are not controls. */
  .auth__title:focus { outline: none; }
  .auth__title + .auth__form { margin-block-start: 1.5rem; }
  .auth__status:empty, .auth__lead[data-status]:empty { display: none; }
  .auth__status { color: var(--color-ink-2); font-size: 0.9375rem; }
  .auth__subtitle { font: 400 1.375rem/1.25 var(--font-display); letter-spacing: -0.005em; }
  /* Only fields the page marked: inputs it empties after a failed attempt must not look wrong by themselves. */
  .control:has(input[aria-invalid="true"]) { border-color: var(--color-danger); }
  .control--code input { font-family: var(--font-mono); letter-spacing: 0.02em; }
  /* A reserved place for a human check (CAPTCHA): widgets are about 78px tall, so the form does not jump when one appears. */
  .captcha:not([hidden]) { display: grid; justify-items: center; min-block-size: 4.875rem; }
  [data-copy-missing]::before { content: attr(data-copy); color: var(--color-danger); font: 0.75rem var(--font-mono); }

  .account-id { margin-block: 0.25rem 1.25rem; font: 1.125rem/1.4 var(--font-mono); overflow-wrap: anywhere; }
  .auth__part, .auth__actions { margin-block-start: 2rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--color-rule); }
  .auth__part { display: grid; gap: 0.75rem; justify-items: start; }
  .auth__part > .form-error, .auth__part > .hint { justify-self: stretch; }
  .auth__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .auth__actions > .form-error { flex-basis: 100%; }
  .state { display: flex; align-items: flex-start; gap: 0.5rem; }
  .state .icon { margin-block-start: 0.1875rem; color: var(--color-ink-2); }
  .state[data-state="ready"] .state__missing, .state[data-state="missing"] .state__ready { display: none; }

  /* A tear-off slip: the code is shown once, so it is set apart like a counterfoil to keep. */
  .slip {
    display: grid; gap: 0.875rem; justify-self: stretch; justify-items: start; padding: 1.25rem;
    border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-s); background: var(--color-field);
  }
  .slip__warn { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 700; }
  .slip__warn .icon { margin-block-start: 0.1875rem; }
  .slip__warn:focus { outline: none; }
  .slip__code {
    display: block; justify-self: stretch; padding: 0.75rem 0.875rem; background: var(--color-paper-2);
    font: 1.125rem/1.5 var(--font-mono); letter-spacing: 0.02em; overflow-wrap: anywhere; user-select: all;
  }
  .slip__note { color: var(--color-ink-2); font-size: 0.875rem; }

  /* Mailbox */
  .app {
    block-size: 100vh; block-size: 100dvh;
    display: grid;
    grid-template-columns: 15rem minmax(20rem, 26rem) minmax(0, 1fr);
    grid-template-rows: 3.5rem minmax(0, 1fr);
    grid-template-areas: "top top top" "nav list reader";
  }
  .app__top {
    grid-area: top; display: flex; align-items: center; gap: 1rem; padding-inline: 1rem;
    background: var(--color-paper); border-block-end: 1px solid var(--color-rule);
  }
  .app__top .brand { inline-size: 13rem; flex: none; font-size: 1.1875rem; }
  .app__menu { display: none; }
  .search {
    display: flex; align-items: center; gap: 0.5rem; flex: 1; min-inline-size: 0; max-inline-size: 36rem; block-size: 2.375rem; padding-inline: 0.75rem;
    border: 1px solid var(--color-rule); border-radius: var(--radius-s); background: var(--color-field); color: var(--color-ink-3);
  }
  .search:focus-within { border-color: var(--color-ink); outline: 2px solid var(--color-focus); outline-offset: 1px; }
  .search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: none; color: var(--color-ink); }
  .search input::placeholder { color: var(--color-ink-3); }
  .account { display: flex; align-items: center; gap: 0.625rem; margin-inline-start: auto; }
  .account__addr { font: 0.8125rem var(--font-mono); color: var(--color-ink-2); }
  .avatar {
    display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 50%;
    border: 1px solid var(--color-rule-strong); background: var(--color-paper-2); font: 700 0.75rem var(--font-ui);
  }

  .app__nav { grid-area: nav; overflow: auto; padding: 1rem 0.75rem; background: var(--color-paper-2); border-inline-end: 1px solid var(--color-rule); }
  .compose-btn { inline-size: 100%; margin-block-end: 1.25rem; }
  .nav-group { margin-block-end: 1.5rem; }
  .nav-group__title { padding-inline: 0.625rem; margin-block-end: 0.25rem; color: var(--color-ink-3); font-size: 0.8125rem; font-weight: 700; }
  .nav-item {
    position: relative; display: flex; align-items: center; gap: 0.625rem;
    min-block-size: calc(2.125rem * var(--density)); padding-inline: 0.625rem;
    border-radius: var(--radius-s); color: var(--color-ink-2); font-size: 0.9375rem; text-decoration: none;
  }
  .nav-item:hover { background: var(--color-paper); color: var(--color-ink); }
  .nav-item[aria-current="page"] { background: var(--color-paper); color: var(--color-ink); font-weight: 700; }
  .nav-item[aria-current="page"]::before {
    content: ""; position: absolute; inset-block: 0.375rem; inset-inline-start: -0.75rem; inline-size: 3px; background: var(--color-rubric);
  }
  .nav-item__count { margin-inline-start: auto; color: var(--color-ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
  .dot { inline-size: 0.625rem; block-size: 0.625rem; margin-inline: 0.25rem; flex: none; border-radius: 2px; background: var(--dot); }
  .dot--blue { --dot: var(--label-blue); }
  .dot--rose { --dot: var(--label-rose); }
  .dot--teal { --dot: var(--label-teal); }
  .dot--sand { --dot: var(--label-sand); }

  .app__list { grid-area: list; overflow: auto; background: var(--color-paper); border-inline-end: 1px solid var(--color-rule); }
  .list-head {
    position: sticky; inset-block-start: 0; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem;
    padding: 1rem 1rem 0.75rem; background: var(--color-paper); border-block-end: 1px solid var(--color-ink);
  }
  .list-head h1 { font: 400 1.5rem/1.2 var(--font-display); }
  .list-head__meta { color: var(--color-ink-2); font-size: 0.8125rem; }
  .msg {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.125rem 0.625rem;
    padding: calc(0.75rem * var(--density)) 1rem calc(0.75rem * var(--density)) 1.25rem;
    border-block-end: 1px solid var(--color-rule); color: inherit; text-decoration: none;
  }
  .msg:hover { background: var(--color-paper-2); }
  .msg[aria-current="true"] { background: var(--color-paper-2); }
  .msg[aria-current="true"]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--color-rubric); }
  .msg--unread::after {
    content: ""; position: absolute; inset-inline-start: 0.5rem; inset-block-start: calc(1.25rem * var(--density));
    inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: var(--color-rubric);
  }
  .msg__glyph { inline-size: 1rem; block-size: 1rem; margin-block-start: 0.1875rem; }
  .msg__glyph--sealed { color: var(--color-sealed); }
  .msg__glyph--postcard { color: var(--color-postcard); }
  .msg__from, .msg__subject, .msg__snippet { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg__from { font-size: 0.9375rem; }
  .msg__time { color: var(--color-ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .msg__subject, .msg__snippet, .msg__meta { grid-column: 2 / -1; }
  .msg__subject { font-size: 0.9375rem; }
  .msg__snippet { color: var(--color-ink-2); font-size: 0.875rem; }
  .msg--unread .msg__from, .msg--unread .msg__subject { font-weight: 700; }
  .msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-block-start: 0.25rem; }
  .msg__meta > .icon { inline-size: 0.875rem; block-size: 0.875rem; color: var(--color-ink-3); }
  .tag { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-ink-2); font-size: 0.75rem; }
  .tag .dot { inline-size: 0.4375rem; block-size: 0.4375rem; margin: 0; }

  .app__reader { grid-area: reader; overflow: auto; background: var(--color-paper); container-type: inline-size; }
  .reader { max-inline-size: 46rem; margin-inline: auto; padding: 1rem 2rem 4rem; }
  .reader__toolbar { display: flex; align-items: center; gap: 0.125rem; margin-inline: -0.5rem; margin-block-end: 1.25rem; }
  .reader__toolbar .sep { inline-size: 1px; block-size: 1.25rem; margin-inline: 0.375rem; background: var(--color-rule); }
  .reader__back { display: none; }
  .reader__subject { margin-block-end: 1.25rem; font: 400 clamp(1.5rem, 1.1rem + 2cqi, 2.125rem)/1.2 var(--font-display); letter-spacing: -0.01em; }
  .reader__head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: start;
    padding-block-end: 1rem; border-block-end: 1px solid var(--color-rule);
  }
  .reader__name { font-weight: 700; }
  .reader__addr, .reader__to, .reader__date { color: var(--color-ink-2); font-size: 0.8125rem; }
  .reader__addr { font-family: var(--font-mono); }
  .reader__date { white-space: nowrap; }
  .reader__states { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; }
  .notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.75rem; margin-block-end: 1rem; padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-rule); border-inline-start: 3px solid var(--color-ink-3);
    background: var(--color-paper-2); color: var(--color-ink-2); font-size: 0.875rem;
  }
  .notice > span { flex: 1 1 14rem; }
  .notice .btn { margin-inline-start: auto; }
  .letter {
    padding: 1.75rem 2rem; border: 1px solid var(--color-rule); background: var(--color-field);
    font: 1.0625rem/1.65 var(--font-text); hyphens: auto;
  }
  .letter p + p, .letter p + .blocked-image, .letter .blocked-image + p { margin-block-start: 1em; }
  .blocked-image {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; block-size: 8rem;
    border: 1px dashed var(--color-rule-strong); background: var(--color-paper-2);
    color: var(--color-ink-3); font: 0.8125rem var(--font-ui);
  }
  .attachments { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-start: 1rem; }
  .attachment {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-rule-strong); border-radius: var(--radius-s); background: var(--color-field);
    font-size: 0.875rem; text-decoration: none;
  }
  .attachment > .icon { color: var(--color-ink-2); }
  .attachment small { display: block; color: var(--color-ink-2); font-size: 0.75rem; }
  .reply-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 1.5rem; padding-block-start: 1rem;
    border-block-start: 2px solid var(--color-ink);
  }
  .reply-bar .badge { margin-inline-start: auto; }
  @container (inline-size < 32rem) {
    .reader__head { grid-template-columns: auto minmax(0, 1fr); }
    .reader__date { grid-column: 2; }
    .letter { padding: 1.25rem; }
    .reply-bar .badge { margin-inline-start: 0; }
  }

  @media (width < 70rem) {
    .app { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); grid-template-areas: "top top" "list reader"; }
    .app__top .brand { inline-size: auto; }
    .app__menu { display: inline-grid; }
    .app__nav {
      position: fixed; inset-block: 3.5rem 0; inset-inline-start: 0; z-index: 5; inline-size: 17rem;
      box-shadow: 0 1rem 2rem -1rem oklch(0% 0 0 / 0.35);
      translate: -100% 0; visibility: hidden; transition: translate 0.2s ease, visibility 0.2s;
    }
    [dir="rtl"] .app__nav { translate: 100% 0; }
    .app--nav-open .app__nav { translate: 0 0; visibility: visible; }
    .account__addr { display: none; }
  }
  @media (width < 45rem) {
    .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "list"; }
    .app__top { gap: 0.5rem; padding-inline: 0.25rem 0.5rem; }
    .app__top .brand span, .app__top [data-locale-current] { display: none; }
    .app__reader { display: none; }
    .app--reading .app__list { display: none; }
    .app--reading .app__reader { display: block; grid-area: list; }
    .reader { padding-inline: 1rem; }
    .reader__back { display: inline-grid; }
  }

  @media (forced-colors: active) {
    .btn--primary, .control, .search { border-color: ButtonText; }
    .nav-item[aria-current="page"]::before, .msg[aria-current="true"]::before, .msg--unread::after { background: Highlight; }
  }
}


/* Generated by design/tools/tokens.py from parent16/tokens.json. Do not edit by hand. */
@layer tokens {
  :root {
    color-scheme: light dark;
    --color-paper: light-dark(oklch(97.5% 0.003 260), oklch(18.5% 0.006 260));
    --color-paper-2: light-dark(oklch(95.5% 0.004 260), oklch(22.5% 0.007 260));
    --color-field: light-dark(oklch(99.5% 0.001 260), oklch(15.5% 0.005 260));
    --color-ink: light-dark(oklch(23.5% 0.014 265), oklch(93.5% 0.004 260));
    --color-ink-2: light-dark(oklch(40% 0.014 265), oklch(79% 0.005 260));
    --color-ink-3: light-dark(oklch(47% 0.012 265), oklch(69% 0.005 260));
    --color-rule: light-dark(oklch(89% 0.005 260), oklch(31% 0.006 260));
    --color-rule-strong: light-dark(oklch(60% 0.006 260), oklch(53% 0.006 260));
    --color-on-ink: light-dark(oklch(97.5% 0.003 260), oklch(18.5% 0.006 260));
    --color-rubric: light-dark(oklch(54.5% 0.185 33), oklch(72% 0.15 38));
    --color-rubric-tint: light-dark(oklch(95% 0.024 40), oklch(28% 0.05 35));
    --color-sealed: light-dark(oklch(47% 0.085 165), oklch(79% 0.1 165));
    --color-sealed-tint: light-dark(oklch(94.5% 0.028 165), oklch(27% 0.035 165));
    --color-postcard: light-dark(oklch(50% 0.09 60), oklch(80% 0.09 65));
    --color-postcard-tint: light-dark(oklch(95.5% 0.018 65), oklch(27% 0.025 60));
    --color-danger: light-dark(oklch(48% 0.16 15), oklch(75% 0.13 18));
    --color-danger-tint: light-dark(oklch(94.5% 0.025 15), oklch(28% 0.05 18));
    --color-focus: var(--color-rubric);
    --font-display: "PT Serif", "Noto Serif", serif;
    --font-text: "PT Serif", "Noto Serif", serif;
    --font-ui: "PT Sans", "Noto Sans", sans-serif;
    --font-mono: "PT Mono", "Noto Sans Mono", monospace;
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 10px;
    --density: 1;
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

/* parent16 — the brand's visual language, shared by every page of the brand: landing, sign-in and account.
   Palette, type, pill buttons, the capsule header and the footer. Landing sections live in site.css, sign-in in auth.css.
   Interim: it redefines core tokens in CSS until tokens.json can describe system fonts, radii and shadows (design/README.md).
   Performance rule: continuous animations touch only transform and opacity; the header is the only element with backdrop-filter. */

@view-transition { navigation: auto; }

@layer site {
  :root {
    /* Palette: deep postal blue with a yellow accent on clean white (README.md#цвет). Yellow marks "protected" and the key;
       on white it is only a fill with --l-on-accent inside, as text it appears only on blue. Warnings keep their own red. */
    --l-ink: oklch(19% 0.02 262);
    --l-ink-2: oklch(40% 0.02 262);
    --l-ink-3: oklch(52% 0.018 262);
    --l-bg: oklch(99.2% 0.003 255);
    --l-bg-2: oklch(96.6% 0.012 255);
    --l-line: oklch(91% 0.012 255);
    --l-brand: oklch(38% 0.15 262);
    --l-brand-2: oklch(44% 0.17 262);
    --l-brand-ink: oklch(46% 0.17 262);
    --l-night: oklch(20% 0.06 265);
    --l-accent: oklch(91% 0.18 105);
    --l-accent-ink: oklch(91% 0.18 105);
    --l-tint: oklch(95.5% 0.03 255);
    --l-stage-edge: oklch(86% 0.08 255);
    --l-dark-glow: oklch(45% 0.15 262 / 0.5);
    --l-on-brand: oklch(97% 0.01 255);
    --l-on-accent: oklch(22% 0.05 262);
    --l-shadow: 0 1px 2px oklch(20% 0.03 262 / 0.06), 0 18px 40px -24px oklch(20% 0.04 262 / 0.3);
    --l-shadow-lg: 0 2px 6px oklch(20% 0.03 262 / 0.05), 0 40px 80px -36px oklch(20% 0.05 262 / 0.45);

    /* Core components read these names, so buttons and the language menu follow the page. */
    --color-paper: var(--l-bg);
    --color-paper-2: var(--l-bg-2);
    --color-field: oklch(100% 0 0);
    --color-ink: var(--l-ink);
    --color-ink-2: var(--l-ink-2);
    --color-ink-3: var(--l-ink-3);
    --color-rule: var(--l-line);
    --color-rule-strong: oklch(78% 0.012 262);
    --color-on-ink: oklch(100% 0 0);
    --color-focus: var(--l-brand-ink);
    --font-display: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
    --font-text: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
    --font-ui: var(--font-text);
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

    --page: 76rem;
    --gutter: 1.5rem;
    --head-h: 4.25rem;
  }

  html { scroll-padding-block-start: calc(var(--head-h) + 1.5rem); }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body { background: var(--l-bg); font-family: var(--font-text); text-rendering: optimizeLegibility; }
  :where(h1, h2, h3, h4) { hyphens: manual; }
  .sprite { position: absolute; }
  .wrap { inline-size: 100%; max-inline-size: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
  .addr { font-family: var(--font-mono); font-size: 0.875em; direction: ltr; }
  :focus-visible { outline-offset: 3px; }

  .skip {
    position: absolute; z-index: 40; inset-block-start: -3rem; inset-inline-start: 1rem;
    padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--l-brand); color: var(--color-on-ink); text-decoration: none;
  }
  .skip:focus { inset-block-start: 0.75rem; }

  /* Buttons: core classes, landing shape and colour. */
  .btn { gap: 0.5rem; border-radius: 999px; font-weight: 650; letter-spacing: -0.005em; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
  .btn--primary, .btn--ink { background: var(--l-brand); color: var(--color-on-ink); }
  .btn--primary:hover, .btn--ink:hover { background: var(--l-brand-2); color: var(--color-on-ink); }
  .btn--line { border: 1.5px solid currentColor; background: transparent; color: var(--l-brand); }
  .btn--line:hover { background: color-mix(in oklch, var(--l-brand) 8%, transparent); }
  .btn--lg { min-block-size: 3.375rem; padding-inline: 1.75rem; font-size: 1.0625rem; }
  .btn .icon { transition: translate 0.2s; }
  .btn:hover .icon--flip, .link-more:hover .icon--flip { translate: 3px 0; }
  [dir="rtl"] .btn:hover .icon--flip, [dir="rtl"] .link-more:hover .icon--flip { translate: -3px 0; }

  /* Header: a wide transparent bar that tightens into a floating capsule as soon as the page scrolls. */
  .site-head { position: sticky; inset-block-start: 0; z-index: 30; padding: 0.75rem var(--gutter) 0; }
  .site-head__bar {
    display: flex; align-items: center; gap: 1.25rem; max-inline-size: 60rem; min-block-size: 3.5rem; margin-inline: auto;
    padding-inline: 0.5rem; border-radius: 999px;
    background: oklch(100% 0 0 / 0.84); box-shadow: 0 0 0 1px var(--l-line), 0 12px 32px -18px oklch(20% 0.04 262 / 0.35);
    backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  }
  .brand { gap: 0.625rem; font: 720 1.0625rem/1 var(--font-display); letter-spacing: -0.025em; }
  .brand img { inline-size: 1.875rem; block-size: 1.875rem; }
  /* Brand mark: the chosen courier logo on transparency (logo.webp, cut from design_mascot/logo_new6.png). */
  .brand__mark { display: block; flex: none; inline-size: 1.875rem; block-size: 1.875rem; }
  .site-nav { position: relative; isolation: isolate; display: flex; gap: 0.125rem; margin-inline: auto; }
  .site-nav a { padding: 0.5rem 0.875rem; border-radius: 999px; color: var(--l-ink-2); font-size: 0.9375rem; font-weight: 550; text-decoration: none; transition: color 0.2s; }
  .site-nav a:hover, .site-nav a:focus-visible { color: var(--l-ink); }
  /* Current page: set by design/tools/blocks.py from the shared header's data-nav links. */
  .site-nav a[aria-current="page"] { color: var(--l-ink); text-decoration: underline 2px var(--color-rubric); text-underline-offset: 0.45em; }
  @supports (anchor-name: --a) {
    /* One highlight slides between links: CSS anchor positioning, no script. */
    .site-nav a:hover, .site-nav a:focus-visible { anchor-name: --l-nav; }
    .site-nav::before {
      content: ""; position: absolute; z-index: -1; position-anchor: --l-nav;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      border-radius: 999px; background: var(--l-tint); opacity: 0;
      transition: inset 0.25s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s;
    }
    .site-nav:has(a:hover, a:focus-visible)::before { opacity: 1; }
  }
  @supports not (anchor-name: --a) {
    .site-nav a:hover { background: var(--l-tint); }
  }
  .site-head__actions { display: flex; align-items: center; gap: 0.25rem; }
  .site-head__actions .btn { white-space: nowrap; }
  .site-head__lang [data-locale-current] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .site-head__bar { animation: l-head linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    }
  }
  @keyframes l-head {
    from {
      max-inline-size: var(--page); background: oklch(100% 0 0 / 0);
      box-shadow: 0 0 0 1px oklch(20% 0.03 262 / 0), 0 12px 32px -18px oklch(20% 0.04 262 / 0);
    }
  }

  /* Mascot: the illustrated pigeon-courier, one WebP per pose in mascot/ (design/landing/mascot.md).
     Shown as plain images: the poses are full-colour, so they are neither recoloured nor mirrored. */
  .mascot { display: block; block-size: auto; max-inline-size: 100%; }

  /* Footer: brand and social links on the left; link columns wrap by themselves, so new pages and sections fit without a redesign. */
  .site-foot { padding-block: 4rem 2.5rem; border-block-start: 1px solid var(--l-line); color: var(--l-ink-2); font-size: 0.9375rem; }
  .site-foot__grid { display: grid; grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 3fr); gap: 2.5rem 3rem; }
  .site-foot__about p { max-inline-size: 22em; margin-block-start: 1rem; line-height: 1.55; }
  .site-foot__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
  .site-foot__social a {
    display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
    background: var(--l-bg-2); box-shadow: inset 0 0 0 1px var(--l-line); transition: background-color 0.2s, color 0.2s;
  }
  .site-foot__social a:hover { background: var(--l-brand); color: var(--l-on-brand); }
  .site-foot__social .icon { inline-size: 1.125rem; block-size: 1.125rem; }
  .site-foot__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; }
  .site-foot h2 { margin-block-end: 0.875rem; color: var(--l-ink); font-size: 0.875rem; font-weight: 700; }
  .site-foot nav ul { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
  .site-foot a:not(.brand) { color: var(--l-ink-2); text-decoration: none; }
  .site-foot a:not(.brand):hover { color: var(--l-ink); }
  .site-foot__social a:not(.brand):hover { color: var(--l-on-brand); }
  .site-foot__bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-block-start: 3rem; padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--l-line); color: var(--l-ink-3); font-size: 0.875rem;
  }
  .site-foot__langs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: auto; }
  .site-foot__langs a { padding: 0.25rem 0.625rem; border-radius: 999px; }
  .site-foot__langs a[aria-current] { background: var(--l-bg-2); color: var(--l-ink); font-weight: 650; }

  @media (max-width: 68rem) {
    .site-nav { display: none; }
    .site-head__actions { margin-inline-start: auto; }
    .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 48rem) {
    :root { --gutter: 1rem; }
    .site-foot__langs { margin-inline-start: 0; }
    .site-foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
    .site-head__create { display: none; }
  }

  @media (forced-colors: active) {
    .site-head__bar { border: 1px solid CanvasText; }
  }
}

/* parent16 — account screens (sign-in, registration, password reset, account) in the landing's language.
   Built like Proton's account pages: a compact header, one card in the middle of a calm page, a quiet footer. The
   pieces come from the landing: registration is its closing block (blue panel, the "new address" card that shows
   the address as it is typed, the flying courier), the courier peeks over or stands on the other cards as he sits
   on our column in the comparison. Each card fits a laptop screen (1280 x 720 and up) without scrolling; long
   forms use two columns instead of growing taller.
   Markup and behaviour stay core (core/blocks/account.html, view.js); this file only restyles core classes and lays
   out the brand blocks auth-head, auth-art and auth-foot. */

@layer site {
  .auth-page {
    --card-pad: 2.25rem;
    display: flex; flex-direction: column; min-block-size: 100dvh;
    background: radial-gradient(56rem 34rem at 50% 42%, color-mix(in oklch, var(--l-tint), white 35%), transparent 70%), var(--l-bg-2);
  }

  /* Header: the mark home and one way back; nothing else competes with the form. */
  .auth-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem var(--gutter); }
  .auth-head__back {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 999px;
    color: var(--l-ink-2); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s, color 0.2s;
  }
  .auth-head__back:hover { background: var(--l-tint); color: var(--l-ink); }
  .auth-head__arrow { scale: -1 1; transition: translate 0.2s; }
  [dir="rtl"] .auth-head__arrow { scale: 1 1; }
  .auth-head__back:hover .auth-head__arrow { translate: -3px 0; }
  .auth-head__actions { display: flex; align-items: center; gap: 0.5rem; }
  .auth-head__signin { display: none; }
  .auth-page:has([data-panel="register"]:not([hidden])) .auth-head__signin { display: inline-flex; }
  .auth-head__signin.btn { border: 1.5px solid currentColor; background: transparent; color: var(--l-brand); }
  .auth-head__signin.btn:hover { background: color-mix(in oklch, var(--l-brand) 8%, transparent); }

  /* Stage: the card in the middle of what is left between header and footer. */
  .auth-stage {
    position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 26rem); justify-content: center; align-content: center;
    padding-block: 1rem 2rem;
  }
  .auth-stage .auth__main { position: relative; z-index: 1; grid-area: 1 / 1; container-type: normal; padding: 0; }

  /* The card */
  .auth-stage .auth__sheet {
    grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 1.5rem; padding: 1.75rem var(--card-pad) 1.75rem;
    border-radius: 1.5rem; background: var(--color-field); box-shadow: 0 0 0 1px var(--l-line), var(--l-shadow-lg);
  }
  .auth-stage .auth__title { margin-block-end: 0.375rem; font: 760 1.875rem/1.08 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
  .auth-stage .auth__lead { margin-block-end: 1.25rem; color: var(--l-ink-2); line-height: 1.5; text-wrap: pretty; }
  .auth-stage .auth__title + .auth__form { margin-block-start: 1.25rem; }
  .auth-stage .auth__subtitle { font: 720 1.1875rem/1.2 var(--font-display); letter-spacing: -0.02em; }
  .auth-stage .label { font-size: 0.9375rem; font-weight: 650; }
  .auth-stage .hint { color: var(--l-ink-3); font-size: 0.8125rem; line-height: 1.45; }

  /* Fields: the border keeps 3:1 against white (WCAG 1.4.11). */
  .auth-stage .control {
    min-block-size: 2.875rem; overflow: clip; border: 1px solid oklch(63% 0.02 262); border-radius: 0.75rem; background: var(--color-field);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .auth-stage .control:hover { border-color: oklch(50% 0.03 262); }
  .auth-stage .control:focus-within { border-color: var(--l-brand-ink); outline: none; box-shadow: 0 0 0 4px var(--l-tint); }
  .auth-stage .control:has(input[aria-invalid="true"]) { border-color: var(--color-danger); box-shadow: 0 0 0 4px var(--color-danger-tint); }
  .auth-stage .control input { padding-inline: 0.875rem; font-size: 1rem; }
  .auth-stage .control__at { color: var(--l-ink-3); }
  .auth-stage .control__select { border-inline-start-color: var(--l-line); }
  .auth-stage .control__select select { padding-inline: 0.875rem 2.25rem; background: var(--l-bg-2); font-size: 0.9375rem; }

  /* Forms */
  .auth-stage .auth__form { gap: 0.875rem; }
  .auth-stage .auth__form > .btn--primary { margin-block-start: 0.25rem; }
  .auth-stage .btn--lg { min-block-size: 2.875rem; }
  .auth-stage .field__aside { justify-self: start; color: var(--l-brand-ink); font-size: 0.875rem; font-weight: 650; text-decoration: none; }
  .auth-stage .field__aside:hover { color: var(--l-brand); text-decoration: underline; }
  .auth-stage .captcha:not([hidden]) { justify-items: stretch; }

  /* Actions: pill buttons from brand.css; secondary is the landing's outline button. */
  .auth-stage .btn--secondary { border: 1.5px solid currentColor; background: transparent; color: var(--l-brand); }
  .auth-stage .btn--secondary:hover { background: color-mix(in oklch, var(--l-brand) 8%, transparent); }
  .auth-stage .btn--quiet { color: var(--l-ink-2); }
  /* The second method (passkey) under a hairline: clearly an alternative, never competing with the main button. */
  .auth-stage .auth__alt { display: grid; gap: 0.5rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--l-line); }
  .auth-stage .auth__alt .btn { min-block-size: 2.75rem; padding-block: 0.5rem; line-height: 1.25; }
  .auth-stage .auth__alt .hint { text-align: center; }
  .auth-stage .auth__links { gap: 0.5rem 1.5rem; margin-block-start: 1.25rem; }
  .auth-stage .auth__links a { color: var(--l-brand-ink); font-weight: 650; text-decoration: none; }
  .auth-stage .auth__links a:hover { color: var(--l-brand); text-decoration: underline; }

  /* Messages */
  .auth-stage .form-error { border: 0; border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; line-height: 1.45; }
  .auth-stage .auth__status:not(:empty) {
    display: flex; inline-size: fit-content; padding: 0.3125rem 0.875rem; border-radius: 999px;
    background: var(--l-tint); color: var(--l-brand-ink); font-size: 0.875rem; font-weight: 650;
  }
  .auth-stage .auth__lead[data-status] { margin-block-end: 0; }
  .auth-stage .notice { border: 0; border-radius: 1rem; padding: 0.75rem 1rem; background: var(--l-bg-2); color: var(--l-ink-2); font-size: 0.9375rem; line-height: 1.45; }
  .auth-stage .notice .icon { color: var(--l-brand-ink); }

  /* The courier. auth-art shares the card's grid cell as a zero-height strip; a pose hangs off it. */
  .auth-art { position: relative; grid-area: 1 / 1; align-self: start; block-size: 0; pointer-events: none; }
  .auth-art__promo { display: none; }
  .auth-art__pose { display: none; position: absolute; inset-block-end: 0; inset-inline-end: 2rem; }
  @media (prefers-reduced-motion: no-preference) {
    /* Each screen brings its pose in, like the landing's reveal; display: none -> block restarts it. */
    .auth-art__pose { animation: auth-pose 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  }
  @keyframes auth-pose { from { opacity: 0; translate: 0 0.75rem; } }

  /* Sign-in: one card in two parts. Left, the form, quiet: address, password, one button; the passkey is a single
     text line whose note unfolds on hover or focus. Right, a night panel that shows the product's point at the
     moment it matters: "the password stays with you". While the password is typed, the dots run on the "you type"
     line and the "server gets" line scrambles into new cipher, as the landing's cipher band does. */
  .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) { grid-template-columns: minmax(0, 25rem) minmax(0, 27rem); }
  .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden]))::before {
    content: ""; grid-area: 1 / 1 / 2 / -1; border-radius: 1.75rem; box-shadow: 0 0 0 1px var(--l-line), var(--l-shadow-lg);
  }
  .auth-stage :is([data-panel="login"], [data-panel="loading"]).auth__sheet {
    block-size: 100%; align-content: center; padding: 2.75rem 2.5rem 2.25rem;
    border-radius: 1.75rem 0 0 1.75rem; box-shadow: none;
  }
  [dir="rtl"] .auth-stage :is([data-panel="login"], [data-panel="loading"]).auth__sheet { border-radius: 0 1.75rem 1.75rem 0; }
  .auth-stage [data-panel="login"] .auth__title { font-size: 2.25rem; letter-spacing: -0.04em; }
  .auth-stage [data-panel="login"] .auth__title + .auth__form { margin-block-start: 1.75rem; }
  .auth-stage [data-panel="login"] .auth__form { gap: 1rem; }
  .auth-stage [data-panel="login"] .field__aside { justify-self: end; margin-block-start: -0.125rem; }
  .auth-stage [data-panel="login"] .auth__form > .btn--primary { margin-block-start: 0.5rem; }
  .auth-stage [data-panel="login"] .auth__alt { justify-items: start; gap: 0; margin-block-start: 1.25rem; padding-block-start: 1rem; }
  .auth-stage [data-panel="login"] .auth__alt > .form-error { justify-self: stretch; margin-block-end: 0.5rem; }
  .auth-stage [data-panel="login"] .auth__alt .btn {
    inline-size: auto; min-block-size: 2.25rem; padding: 0.25rem 0; border: 0; background: none;
    color: var(--l-brand-ink); font-size: 0.9375rem; font-weight: 650;
  }
  .auth-stage [data-panel="login"] .auth__alt .btn:hover { background: none; color: var(--l-brand); text-decoration: underline; }
  .auth-stage [data-panel="login"] .auth__alt .hint {
    max-block-size: 0; overflow: clip; opacity: 0; text-align: start; transition: max-block-size 0.25s, opacity 0.25s;
  }
  .auth-stage [data-panel="login"] .auth__alt:is(:hover, :focus-within) .hint { max-block-size: 4.5em; opacity: 1; }
  .auth-stage [data-panel="login"] .auth__links { justify-content: start; margin-block-start: 0.5rem; font-size: 0.9375rem; }

  .auth-art__login { display: none; }
  .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) .auth-art {
    z-index: 1; grid-area: 1 / 2; align-self: stretch; display: grid; align-content: start; block-size: auto; overflow: clip;
    padding: 2.5rem 2.25rem 2.25rem; border-radius: 0 1.75rem 1.75rem 0;
    background: radial-gradient(30rem 22rem at 100% 100%, var(--l-dark-glow), transparent 70%), var(--l-night); color: oklch(100% 0 0);
  }
  [dir="rtl"] .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) .auth-art { border-radius: 1.75rem 0 0 1.75rem; }
  .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) .auth-art__login { display: grid; gap: 1.5rem; }
  .auth-art__badge {
    display: inline-flex; align-items: center; gap: 0.5rem; inline-size: fit-content; padding: 0.375rem 0.875rem 0.375rem 0.625rem; border-radius: 999px;
    background: oklch(100% 0 0 / 0.08); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.14); color: oklch(100% 0 0 / 0.85); font-size: 0.8125rem; font-weight: 650;
  }
  .auth-art__badge .icon { inline-size: 1rem; block-size: 1rem; color: var(--l-accent); stroke-width: 2; }
  .auth-art__login-title { font: 780 2.75rem/1 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
  /* The landing's marker: navy on a slanted yellow stroke. */
  .auth-art__mark { position: relative; z-index: 0; margin-inline-start: 0.1em; background: none; color: var(--l-on-accent); white-space: nowrap; }
  .auth-art__mark::before {
    content: ""; position: absolute; z-index: -1; inset: 0.14em -0.08em 0.02em -0.06em; border-radius: 0.18em 0.32em 0.22em 0.4em;
    background: var(--l-accent); rotate: -1.5deg; transform-origin: left center;
  }
  .auth-art__wire { position: relative; display: grid; border-radius: 1.25rem; background: oklch(100% 0 0 / 0.05); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.12); }
  .auth-art__row { display: grid; gap: 0.375rem; padding: 1rem 1.125rem; }
  .auth-art__row + .auth-art__row { border-block-start: 1px dashed oklch(100% 0 0 / 0.2); }
  .auth-art__label { color: oklch(100% 0 0 / 0.6); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .auth-art__dots { min-block-size: 1.5rem; font: 700 1.25rem/1.2 var(--font-mono); letter-spacing: 0.12em; overflow-wrap: anywhere; }
  .auth-art__empty { display: none; min-block-size: 1.5rem; color: oklch(100% 0 0 / 0.4); font: 1.0625rem/1.4 var(--font-mono); }
  .auth-art__wire.is-empty .auth-art__dots { display: none; }
  .auth-art__wire.is-empty .auth-art__empty { display: block; }
  .auth-art__cipher { color: var(--l-accent); font: 500 0.9375rem/1.45 var(--font-mono); word-break: break-all; transition: opacity 0.3s; }
  .auth-art__wire.is-empty .auth-art__cipher { opacity: 0.5; }
  /* The step from the device to the server, on the dashed seam between the two lines. */
  .auth-art__arrow {
    position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-end: 1.125rem; translate: 0 -50%;
    display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
    background: var(--l-accent); color: var(--l-on-accent);
  }
  .auth-art__arrow .icon { inline-size: 0.875rem; block-size: 0.875rem; rotate: 90deg; stroke-width: 2.4; }
  .auth-art__note { max-inline-size: 14rem; color: oklch(100% 0 0 / 0.72); font-size: 0.875rem; line-height: 1.5; }
  .auth-art__pose--login { inline-size: 8.5rem; inset-block-end: -1.75rem; inset-inline-end: 1.25rem; filter: drop-shadow(0 18px 24px oklch(0% 0 0 / 0.35)); }
  .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) .auth-art__pose--login { display: block; }

  /* Two-column forms (registration, reset): the password and its repeat side by side, their rule under both.
     The two fields give up their own boxes (display: contents) so labels, inputs and the rule line up in rows. */
  .auth-stage :is(#password-register-form, #password-recover-form) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.875rem 1rem; }
  .auth-stage :is(#password-register-form, #password-recover-form) > * { grid-column: 1 / -1; }
  .auth-stage :is(#password-register-form, #password-recover-form) > .field:has(input[autocomplete="new-password"]) { display: contents; }
  .auth-stage :is(#password-register-form, #password-recover-form) > .field:has(input[autocomplete="new-password"]) > * { grid-column: auto; }
  .auth-stage :is(#password-register-form, #password-recover-form) > .field:has(input[autocomplete="new-password"]) > .label { grid-row: var(--pw-row); }
  .auth-stage :is(#password-register-form, #password-recover-form) > .field:has(input[autocomplete="new-password"]) > .control { grid-row: calc(var(--pw-row) + 1); margin-block-start: -0.625rem; }
  .auth-stage :is(#password-register-form, #password-recover-form) > .field:has(input[autocomplete="new-password"]) > .hint { grid-column: 1 / -1; grid-row: calc(var(--pw-row) + 2); margin-block-start: -0.625rem; }
  .auth-stage :is(#password-register-form, #password-recover-form) > .field:first-child { grid-row: 1; }
  .auth-stage #password-register-form { --pw-row: 2; }
  .auth-stage #password-recover-form { --pw-row: 3; }
  .auth-stage #password-recover-form > .field:nth-child(2) { grid-row: 2; }

  /* Registration: one card in two parts, the form and the landing's closing block. The shared shadow and
     corners belong to the stage's ::before, so the two halves read as one card. */
  .auth-stage:has([data-panel="register"]:not([hidden])) { grid-template-columns: minmax(0, 34rem) minmax(0, 22rem); }
  /* As on Proton's sign-up, "sign in" moves to the header; the card keeps only the form. */
  .auth-stage [data-panel="register"] .auth__links { display: none; }
  .auth-stage:has([data-panel="register"]:not([hidden]))::before {
    content: ""; grid-area: 1 / 1 / 2 / -1; border-radius: 1.5rem; box-shadow: 0 0 0 1px var(--l-line), var(--l-shadow-lg);
  }
  .auth-stage:has([data-panel="register"]:not([hidden])) .auth__sheet { block-size: 100%; border-start-end-radius: 0; border-end-end-radius: 0; box-shadow: none; }
  .auth-stage:has([data-panel="register"]:not([hidden])) .auth-art {
    z-index: 1; grid-area: 1 / 2; align-self: stretch; display: grid; align-content: start; block-size: auto; overflow: clip;
    padding: 2.25rem 2rem 2rem; border-start-end-radius: 1.5rem; border-end-end-radius: 1.5rem;
    background: radial-gradient(26rem 20rem at 80% 0%, var(--l-dark-glow), transparent 70%), var(--l-brand); color: oklch(100% 0 0);
  }
  .auth-stage:has([data-panel="register"]:not([hidden])) .auth-art__promo { display: grid; gap: 1.5rem; }
  .auth-art__title { max-inline-size: 11ch; font: 760 1.75rem/1.05 var(--font-display); letter-spacing: -0.035em; }
  .auth-art__card {
    display: grid; gap: 0.875rem; padding: 1.25rem; border-radius: 1.25rem; background: oklch(100% 0 0); color: var(--l-ink);
    box-shadow: 0 32px 64px -28px oklch(0% 0 0 / 0.55); rotate: -2deg;
  }
  .auth-art__head { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; }
  .auth-art__addr { padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--l-bg-2); font: 600 1rem/1.3 var(--font-mono); overflow-wrap: anywhere; }
  .auth-art__addr.is-empty [data-echo-name] { color: var(--l-ink-3); }
  .auth-art__list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
  .auth-art__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.625rem; color: var(--l-ink-2); font-size: 0.875rem; line-height: 1.35; }
  .auth-art__list .icon {
    box-sizing: content-box; inline-size: 0.9375rem; block-size: 0.9375rem; padding: 0.375rem; border-radius: 50%;
    background: var(--l-accent); color: var(--l-on-accent); stroke-width: 2.2;
  }
  .auth-stage:has([data-panel="register"]:not([hidden])) .auth-art__pose--register {
    display: block; inset-block-end: 0.75rem; inset-inline-end: 0.75rem; inline-size: 8.5rem;
    filter: drop-shadow(0 20px 20px oklch(0% 0 0 / 0.3));
  }
  @media (prefers-reduced-motion: no-preference) {
    .auth-stage:has([data-panel="register"]:not([hidden])) .auth-art__pose--register { animation: auth-pose 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, auth-float 6s ease-in-out 0.5s infinite; }
  }
  @keyframes auth-float { 50% { translate: 0 -8px; } }

  /* Reset: a wide card; the heading, the warning and the thinking courier on a tinted side, the form beside them. */
  .auth-stage:has([data-panel="recover"]:not([hidden])) { grid-template-columns: minmax(0, 54rem); }
  .auth-stage [data-panel="recover"] { background: linear-gradient(to right, var(--l-bg-2) calc(var(--card-pad) * 2 + 17rem), var(--color-field) 0); }
  [dir="rtl"] .auth-stage [data-panel="recover"] { background: linear-gradient(to left, var(--l-bg-2) calc(var(--card-pad) * 2 + 17rem), var(--color-field) 0); }
  .auth-stage [data-panel="recover"] > section {
    display: grid; grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: calc(var(--card-pad) * 2);
    min-block-size: 33rem;
  }
  .auth-stage [data-panel="recover"] > section > * { grid-column: 2; }
  .auth-stage [data-panel="recover"] .auth__title { grid-column: 1; grid-row: 1; }
  .auth-stage [data-panel="recover"] .auth__lead { grid-column: 1; grid-row: 2; margin-block-end: 0; font-size: 0.9375rem; }
  /* The other way back in, a new passkey by the same code, sits on the tinted side under the warning. */
  .auth-stage [data-panel="recover"] .auth__alt { grid-column: 1; grid-row: 3; align-self: start; border-block-start-color: oklch(88% 0.02 255); }
  .auth-stage [data-panel="recover"] .auth__alt .hint { text-align: start; }
  .auth-stage [data-panel="recover"] .auth__form { grid-row: 1 / 4; align-content: start; }
  .auth-stage [data-panel="recover"] .auth__links { grid-row: 4; align-self: start; justify-content: start; }
  .auth-art__pose--recover { inline-size: 7rem; inset-inline: auto calc(100% - var(--card-pad) - 17rem); inset-block: -8.25rem auto; }
  .auth-stage:has([data-panel="recover"]:not([hidden])) .auth-art { z-index: 2; align-self: end; }
  .auth-stage:has([data-panel="recover"]:not([hidden])) .auth-art__pose--recover { display: block; }

  /* Account: a wide card, the address plate on top, password and recovery code side by side. */
  .auth-stage:has([data-panel="account"]:not([hidden])) { grid-template-columns: minmax(0, 54rem); padding-block-start: 4.5rem; }
  .auth-stage [data-panel="account"] > section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .auth-stage [data-panel="account"] > section > * { grid-column: 1 / -1; }
  .auth-stage [data-panel="account"] > section > .auth__part { grid-column: auto; }
  .auth-stage .account-id { margin-block: 0.25rem 0.75rem; padding: 0.75rem 1rem; border-radius: 1rem; background: var(--l-bg-2); font-weight: 600; font-size: 1.0625rem; }
  .auth-stage .account-id + .auth__status:not(:empty) { margin-block-end: 0.75rem; }
  .auth-stage .auth__part, .auth-stage .auth__actions { margin-block-start: 1.5rem; border-block-start-color: var(--l-line); }
  .auth-stage .state .icon { box-sizing: content-box; margin-block-start: 0; padding: 0.3125rem; border-radius: 50%; stroke-width: 2; }
  .auth-stage .state__ready { background: var(--l-accent); color: var(--l-on-accent); }
  .auth-stage .state__missing { background: var(--l-bg-2); color: var(--l-ink-2); }
  .auth-stage .slip { gap: 0.875rem; padding: 1.125rem; border: 1.5px dashed oklch(70% 0.02 262); border-radius: 1.25rem; }
  .auth-stage .slip__code { padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--l-bg-2); font-size: 1rem; font-weight: 600; }
  .auth-art__pose--account { inline-size: 6.5rem; inset-block-end: -0.5rem; }
  .auth-stage:has([data-panel="account"]:not([hidden])) .auth-art { z-index: 2; }
  .auth-stage:has([data-panel="account"]:not([hidden])) .auth-art__pose--account { display: block; }

  /* Footer: one quiet line. */
  .auth-foot {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.375rem 1.5rem;
    padding: 0.75rem var(--gutter) 1.25rem; color: var(--l-ink-3); font-size: 0.8125rem; text-align: center;
  }
  .auth-foot__trust { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--l-ink-2); }
  .auth-foot__trust .icon { inline-size: 1rem; block-size: 1rem; color: var(--l-brand-ink); }
  .auth-foot__row, .auth-foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem 1.25rem; }
  .auth-foot a { color: var(--l-ink-3); text-decoration: none; }
  .auth-foot a:hover { color: var(--l-ink); text-decoration: underline; }

  /* Narrow screens: one column everywhere; the registration panel and the reset pose drop away. */
  @media (max-width: 60rem) {
    .auth-stage:has([data-panel="register"]:not([hidden])), .auth-stage:has([data-panel="recover"]:not([hidden])),
    .auth-stage:has([data-panel="account"]:not([hidden])) { grid-template-columns: minmax(0, 31rem); }
    .auth-stage:has([data-panel="register"]:not([hidden]))::before { content: none; }
    .auth-stage:has([data-panel="register"]:not([hidden])) .auth__sheet { border-radius: 1.5rem; box-shadow: 0 0 0 1px var(--l-line), var(--l-shadow-lg); }
    /* Sign-in keeps its point on narrow screens: the night panel goes under the form, in the same card. */
    .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) { grid-template-columns: minmax(0, 27rem); }
    .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden]))::before { grid-area: 1 / 1 / 3 / 2; }
    .auth-stage :is([data-panel="login"], [data-panel="loading"]).auth__sheet,
    [dir="rtl"] .auth-stage :is([data-panel="login"], [data-panel="loading"]).auth__sheet { border-radius: 1.75rem 1.75rem 0 0; }
    .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) .auth-art,
    [dir="rtl"] .auth-stage:has(:is([data-panel="login"], [data-panel="loading"]):not([hidden])) .auth-art { grid-area: 2 / 1; border-radius: 0 0 1.75rem 1.75rem; padding-block-end: 2.75rem; }
    .auth-art__login-title { font-size: 2.25rem; }
    .auth-art__pose--login { inline-size: 7rem; }
    .auth-stage:has([data-panel="register"]:not([hidden])) .auth-art,
    .auth-stage:has([data-panel="recover"]:not([hidden])) .auth-art { display: none; }
    .auth-stage [data-panel="recover"] { background: var(--color-field); }
    .auth-stage [data-panel="recover"] > section, .auth-stage [data-panel="account"] > section { display: block; }
    .auth-stage [data-panel="recover"] .auth__lead { margin-block-end: 1.25rem; }
    .auth-stage [data-panel="recover"] > section { min-block-size: 0; }
  }
  @media (max-width: 36rem) {
    .auth-page { --card-pad: 1.25rem; }
    .auth-stage :is(#password-register-form, #password-recover-form) { grid-template-columns: minmax(0, 1fr); }
    .auth-stage :is(#password-register-form, #password-recover-form) > .field { display: grid !important; grid-row: auto !important; }
    .auth-stage :is(#password-register-form, #password-recover-form) > .field > * { grid-row: auto !important; margin-block: 0 !important; }
    .auth-stage .auth__sheet { border-radius: 1.25rem; }
    .auth-art__pose { inset-inline-end: 1.25rem; }
  }
  @media (forced-colors: active) {
    .auth-stage .auth__sheet, .auth-stage .control, .auth-art { border: 1px solid CanvasText; }
  }
}