:root { color-scheme: dark;
    --bg-deep: #070a12; --bg-mid: #0b1220; --bg-glow: #16324a;
    --fg: #e6edf6; --fg-strong: #eaf1ff; --fg-soft: #c3d0e2;
    --muted: #93a4bd; --muted-2: #8ea2bd; --muted-3: #a8b8cf;
    --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.16); --line-hover: rgba(255,255,255,.28);
    --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.035);
    --surface-3: rgba(255,255,255,.03); --field: rgba(255,255,255,.05); --field-2: rgba(255,255,255,.07);
    --code-bg: rgba(255,255,255,.07); --pre-bg: rgba(0,0,0,.35);
    --accent: #5a96ff; --accent-soft: rgba(90,150,255,.22); --accent-soft-hover: rgba(90,150,255,.32);
    --accent-line: rgba(90,150,255,.35); --link: #71a7ff; --link-soft: #9ec5ff; --focus: #6ea3f0;
    --danger-bg: rgba(255,90,90,.18); --danger-line: rgba(255,90,90,.35); --danger-bg-hover: rgba(255,90,90,.28);
    --turn-user: rgba(90,150,255,.14); --turn-failed: rgba(255,80,80,.07);
    --turn-failed-line: rgba(255,120,120,.35);
    --note-bg: rgba(255,196,0,.10); --note-line: rgba(255,196,0,.28); --note-fg: #ffe08a;
    --font-size: 16px;
  }
  /* The light surface, and only here. A person who chose it gets the same page in the same shapes. */
  [data-theme='light'] { color-scheme: light;
    --bg-deep: #f6f7fb; --bg-mid: #eef1f7; --bg-glow: #dfe8f6;
    --fg: #131a26; --fg-strong: #0b1119; --fg-soft: #2b3646;
    --muted: #55637a; --muted-2: #5c6a80; --muted-3: #46536a;
    --line: rgba(16,24,40,.14); --line-strong: rgba(16,24,40,.22); --line-hover: rgba(16,24,40,.32);
    --surface: rgba(16,24,40,.035); --surface-2: rgba(16,24,40,.03); --surface-3: rgba(16,24,40,.025);
    --field: #ffffff; --field-2: #ffffff;
    --code-bg: rgba(16,24,40,.06); --pre-bg: rgba(16,24,40,.05);
    --accent: #1f5fd0; --accent-soft: rgba(31,95,208,.14); --accent-soft-hover: rgba(31,95,208,.22);
    --accent-line: rgba(31,95,208,.32); --link: #1f5fd0; --link-soft: #1a4fb0; --focus: #1f5fd0;
    --danger-bg: rgba(190,30,30,.10); --danger-line: rgba(190,30,30,.35);
    --danger-bg-hover: rgba(190,30,30,.18);
    --turn-user: rgba(31,95,208,.10); --turn-failed: rgba(190,30,30,.06);
    --turn-failed-line: rgba(190,30,30,.32);
    --note-bg: rgba(180,120,0,.12); --note-line: rgba(180,120,0,.35); --note-fg: #6b4700;
  }
  /* 'Follow the system' is the operating system's own answer, unanswered questions and all: a client
     with no preference gets the dark surface above, which is this deployment's default. */
  @media (prefers-color-scheme: light) {
    [data-theme='system'] { color-scheme: light;
      --bg-deep: #f6f7fb; --bg-mid: #eef1f7; --bg-glow: #dfe8f6;
      --fg: #131a26; --fg-strong: #0b1119; --fg-soft: #2b3646;
      --muted: #55637a; --muted-2: #5c6a80; --muted-3: #46536a;
      --line: rgba(16,24,40,.14); --line-strong: rgba(16,24,40,.22); --line-hover: rgba(16,24,40,.32);
      --surface: rgba(16,24,40,.035); --surface-2: rgba(16,24,40,.03); --surface-3: rgba(16,24,40,.025);
      --field: #ffffff; --field-2: #ffffff;
      --code-bg: rgba(16,24,40,.06); --pre-bg: rgba(16,24,40,.05);
      --accent: #1f5fd0; --accent-soft: rgba(31,95,208,.14); --accent-soft-hover: rgba(31,95,208,.22);
      --accent-line: rgba(31,95,208,.32); --link: #1f5fd0; --link-soft: #1a4fb0; --focus: #1f5fd0;
      --danger-bg: rgba(190,30,30,.10); --danger-line: rgba(190,30,30,.35);
      --danger-bg-hover: rgba(190,30,30,.18);
      --turn-user: rgba(31,95,208,.10); --turn-failed: rgba(190,30,30,.06);
      --turn-failed-line: rgba(190,30,30,.32);
      --note-bg: rgba(180,120,0,.12); --note-line: rgba(180,120,0,.35); --note-fg: #6b4700;
    }
  }
  /* Larger type scales the root, not the browser's zoom: zoom is the person's own setting and this is
     not allowed to fight it. The two stylesheets use rem/em for the same reason. */
  [data-text-size='large'] { --font-size: 19px; }
  html { font-size: var(--font-size); }
  /* The skip link is a real link to the content, visible when it is focused and invisible otherwise:
     a page whose first tab stop is a wall of navigation is a page a keyboard user has to walk through
     on every visit. */
  .skip { position: absolute; left: -9999px; top: 0; padding: .6rem .9rem; background: var(--bg-mid);
    color: var(--fg); border: 1px solid var(--line-strong); border-radius: 0 0 10px 0; z-index: 10; }
  .skip:focus { left: 0; }

  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 4rem 1.5rem; min-height: 100vh;
    font: 1rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: radial-gradient(1200px 600px at 20% -10%, var(--bg-glow) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
    color: var(--fg);
  }
  main { max-width: 720px; margin: 0 auto; }
  h1 { margin: 0 0 .4rem; font-size: 1.9rem; letter-spacing: -.02em; }
  h2 { margin: 2.4rem 0 .8rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); }
  .sub { margin: 0 0 2.4rem; color: var(--muted); }
  .grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .card { padding: .9rem 1.1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
  .hero { margin: 0 0 2.6rem; }
  .lead { margin: .5rem 0 1.4rem; font-size: 1.06rem; color: var(--fg-soft); max-width: 46ch; }
  .cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1rem; }
  .button { display: inline-block; padding: .7rem 1.35rem; border-radius: 12px; font-weight: 600;
    text-decoration: none; color: var(--fg); background: var(--field-2);
    border: 1px solid var(--line-strong); }
  .button.primary { background: var(--accent); border-color: var(--accent-line); color: #fff; }
  .button:hover { border-color: var(--focus); }
  .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .version { margin: 0; font-size: .88rem; color: var(--muted); }
  .version strong { color: var(--fg); }
  .tiles { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .tiles li { padding: .95rem 1.1rem; border-radius: 12px; background: var(--surface);
    border: 1px solid var(--line); }
  .tiles a { font-weight: 600; }
  /* One `details.advanced`, because two arrived — the landing page's block and the signed-in pages' —
     and a union leaves one selector declared twice with two margins, which is a cascade nobody chose. */
  details.advanced { margin: 3rem 0 0; padding: .6rem 1rem; border-radius: 12px;
    background: var(--surface-3); border: 1px solid var(--line); }
  details.advanced > summary { cursor: pointer; font-weight: 600; color: var(--muted-3); font-size: .9rem; }
  details.advanced[open] > summary { margin-bottom: 1rem; }
  details.advanced > h2 { margin-top: 1.8rem; }
  /* The navigation bar's rules are in `nav.rs`, with the markup they style. */
  .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); }
  .v { margin-top: .2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--link-soft); }
  .live { color: var(--live, #6ee7b7); }
  .chan { font-size: .78em; color: var(--channel, #f0c674); }
  ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
  li { padding: .8rem 1rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
  .perm { margin-left: .6rem; font-size: .78rem; color: var(--muted-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .desc { margin-top: .25rem; color: var(--muted); font-size: .88rem; }
  .small { font-size: .9rem; }
  .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .5rem; }
  .up { background: #1f9d6b; }
  .down { background: #c2703a; }
  p.note { margin: 2.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
  a { color: var(--link); }
  code { background: var(--code-bg); padding: .1rem .35rem; border-radius: 5px; font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  /* The form controls, which no page in this shell had styled. `/interests` and `/preferences` were
     rendering inputs with the *browser's* idea of a light-mode widget on a dark page — a real defect a
     person sees on their first visit, and invisible in a test that asserts markup rather than looking
     at a screen. Stated once here, because both pages are forms. */
  label { display: block; margin: 1.2rem 0 .35rem; font-size: .86rem; color: var(--muted-3); }
  input[type=text], input[type=number], select, textarea {
    width: 100%; padding: .55rem .7rem; border-radius: 9px; border: 1px solid var(--line-strong);
    background: var(--field); color: inherit; font: inherit;
  }
  input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent-soft);
  }
  select option { background: var(--bg-mid); color: var(--fg); }
  button { padding: .55rem 1.1rem; margin-top: 1.2rem; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--accent-soft); color: inherit;
    font: inherit; }
  button:hover { background: var(--accent-soft-hover); }
  button.danger { background: var(--danger-bg); border-color: var(--danger-line); }
  button.danger:hover { background: var(--danger-bg-hover); }
  /* A disabled control says *why* it is disabled in the text beside it; making it look inert is the
     other half of that sentence. */
  button:disabled, input:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
  .hint { margin: .5rem 0 0; color: var(--muted-2); font-size: .84rem; }
  p.note.warn { border-top-color: var(--note-line); color: var(--note-fg); }
  li.empty { color: var(--muted-2); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* **A long technical value must wrap, not clip.** The owner's report was a long identity URL
     clipped horizontally at 390 px, and the cause is a flex/grid child with no `min-width: 0` and a
     monospace string that cannot break. `overflow-wrap: anywhere` is what makes a URL or a UUID wrap
     mid-token; `min-width: 0` is what stops the grid track from growing past its container to fit it.
     Both are needed — either alone leaves the clip in place, which is how a boolean overflow check
     missed it. (This comment deliberately does not name that value: the leak tests below assert that a
     public page's markup contains none of them, and a comment is markup.) */
  .break { overflow-wrap: anywhere; word-break: break-word; }
  /* **A table that is wider than a phone must scroll inside its own box, not widen the page.** The tier
     table on /interests has five columns and one of them is prose; at 390 px the columns cannot all fit,
     and without a scoped scroll container the whole document would grow and every other page element
     would be pushed off the viewport. `min-width: 0` is what lets the container be narrower than its
     content in a grid/flex parent; `overflow-x: auto` is what keeps the overflow inside it. */
  .table-scroll { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table { border-collapse: collapse; width: 100%; }
  .table-scroll th, .table-scroll td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
  .grid > * { min-width: 0; }
  .card { overflow: hidden; }
  details.advanced h3 { margin: 1.6rem 0 .5rem; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted-2); }
  /* The one action on the entry page, styled as what it is: a link that behaves like a button, because
     it is a navigation to another host and not a form post. */
  a.button-link { display: inline-block; margin-top: 1rem; padding: .6rem 1.2rem; border-radius: 9px;
    background: var(--accent-soft); border: 1px solid var(--line-strong); color: inherit;
    text-decoration: none; }
  /* A phone gets the column back the margins were spending: 4rem of top padding and 1.5rem of sides on a
     390 px screen is a third of the width, and the navigation wraps to two lines rather than scrolling
     sideways. Measured as a rule rather than asserted afterwards — a page that is only checked at
     1440 px is a page nobody has seen on the device it will be used on. */
  /* **The menu's entries are links a person taps with a thumb, and a line of text is not one.**
     Measured in the headless harness at 390x844 and 1280x900: `/media/import` on `/me/entrances` rendered
     19 px tall — a bare text run with no padding — while every button this platform draws is at least 30.
     The measurement is the reason this rule exists; a rule added because a guideline suggested it would
     have been a guess about which page needed it. `inline-flex` keeps the label and its hint on the
     baseline of one target, and `touch-action: manipulation` removes the double-tap delay a phone adds. */
  ul.entrances { list-style: none; margin: .5rem 0 0; padding: 0; }
  ul.entrances li { margin: .35rem 0; }
  ul.entrances li a { display: inline-flex; align-items: center; min-height: 2rem; padding: .35rem .6rem;
    border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--line-strong);
    color: inherit; text-decoration: none; touch-action: manipulation; }
  ul.entrances li .hint { margin: 0 0 0 .5rem; }
  /* **A face's avatar is sized by this page and not by the picture** (4D.1). The stored value is an
     address somebody else hosts, so the image behind it can be 16 px or 4000 px wide, and a rule that
     let it decide would be a layout the sender chooses for the reader. `object-fit: cover` keeps a
     non-square image square rather than stretching it, and the mark beside it (`.mark`) stays text. */
  img.avatar { width: 2.5em; height: 2.5em; border-radius: 50%; object-fit: cover;
    vertical-align: middle; margin-inline-end: .35em; }
  @media (max-width: 480px) {
    body { padding: 1.4rem .9rem 3rem; }
    h1 { font-size: 1.5rem; }
    .button { display: block; text-align: center; }
    .nav { gap: .35rem; }
    .nav-item { padding: .45rem .6rem; font-size: .84rem; }
    label { margin-top: 1rem; }
    button { width: 100%; }
  }

  /* **Every signed-in page carries these rules, and one did not.** `/me` has its own stylesheet — a
     viewport with a fixed composer is not a 720px reading column — and it had only the *phone* rules for
     the bar, with no base rule at all, so its four links ran together with no gap, no padding and no
     current-page mark. Measured by Root on the installed 1.3.38. The base rules live here, beside the
     markup they style, and both stylesheets include them. */
  .nav { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 1.6rem;
    padding: .3rem; border-radius: 12px; background: var(--surface);
    border: 1px solid var(--line); }
  .nav-item { padding: .35rem .7rem; border-radius: 9px; font-size: .86rem; text-decoration: none;
    color: var(--muted-3); border: 1px solid transparent; }
  .nav-item:hover { color: var(--fg); background: var(--field); }
  .nav-item.is-current { color: var(--fg-strong); background: var(--accent-soft);
    border-color: var(--accent-line); }
  .nav-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }