@layer reset, base, layout, components;

@layer reset {

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

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  [role="list"] {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.5;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.2;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture,
  svg {
    max-inline-size: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  textarea:not([rows]) {
    min-height: 10em;
  }
}

@layer base {
  /* Colors are tokens so a theme can redefine them in one place. */
  :root {
    color-scheme: light;
    --bg: #fff;
    --bg-glass: rgb(255 255 255 / 0.82);
    --surface: #f4f5f7;
    --border: #e8e9ed;
    --border-strong: #d4d7dd;
    --text: #111318;
    --text-2: #5a616c;
    --text-3: #868d98;
    --accent: #2160e8;
    --brand: #f26b1d;
    --on-brand: #fff;
    --danger: #c0281e;
    --embed-bg: #111318;
    --on-embed: #fff;
    --embed-play: rgb(0 0 0 / 0.7);
    --danger-bg: #fdf1f0;
    --info-bg: #eef3fe;
    --tone-1: #9a4316;
    --tone-1-bg: #fde7d9;
    --tone-2: #2c6b3f;
    --tone-2-bg: #dff1e4;
    --tone-3: #2b55a5;
    --tone-3-bg: #e1ebfd;
    --tone-4: #6a3d97;
    --tone-4-bg: #efe3fa;
    --tone-5: #9b3049;
    --tone-5-bg: #fbe2e7;
    --tone-6: #22666a;
    --tone-6-bg: #def3f3;
    --avatar-icon-bg: #fff;
    --debug-bg: #fffbea;
    --debug-border: #c99a06;
    --radius: 16px;
    --radius-sm: 10px;
    --column: 40rem;
    --blur: saturate(180%) blur(14px);
  }

  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  a:hover {
    text-decoration-thickness: 2px;
  }

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

  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
  }

  .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;
  }

  /* Buttons are pills; .btn makes a link look like one. */
  button,
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1.0625rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
  }

  button:hover,
  .btn:hover {
    background: var(--surface);
  }

  label {
    display: block;
    margin-block-end: 0.375rem;
    font-size: 0.875rem;
    font-weight: 550;
  }

  input:not([type="hidden"]) {
    display: block;
    inline-size: 100%;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
  }

  input[readonly] {
    background: var(--surface);
    color: var(--text-2);
  }

  input:not([type="hidden"]):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }

  .icon {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* The app shell: a nav rail beside one centered column. Wide screens get a
   labelled rail, medium ones an icon rail, narrow ones a top bar and a tab
   bar. */
@layer layout {
  .shell {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--column)) 1fr;
    min-block-size: 100vh;
  }

  .rail {
    grid-column: 1;
    justify-self: end;
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    inline-size: 16rem;
    block-size: 100vh;
    padding: 0.75rem 0.75rem 1.25rem;
  }

  .column {
    grid-column: 2;
    min-inline-size: 0;
    border-inline: 1px solid var(--border);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-block-end: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--text);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-decoration: none;
  }

  .brand-mark {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 9px;
    background: var(--brand);
    color: var(--on-brand);
  }

  .brand-mark .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    stroke-width: 2.5;
  }

  .rail-links {
    display: grid;
    gap: 0.125rem;
  }

  .rail-links a,
  .rail-account {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    inline-size: 100%;
    padding: 0.75rem 0.875rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none;
  }

  .rail-links a:hover,
  .rail-account:hover {
    background: var(--surface);
  }

  .rail-links a[aria-current="page"],
  .rail-account[aria-current="page"] {
    font-weight: 700;
  }

  .rail-links a[aria-current="page"] .icon {
    stroke-width: 2.4;
  }

  /* The account entry: the user's avatar, labelled Settings, at the bottom
     of the rail. */
  .rail-account {
    margin-block-start: auto;
    padding-block: 0.625rem;
  }

  .rail-account .avatar {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-inline-start: -0.125rem;
    font-size: 0.875rem;
  }

  .rail-account[aria-current="page"] .avatar {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }

  .page-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 3.5rem;
    padding: 0.625rem 1rem;
    border-block-end: 1px solid var(--border);
    background: var(--bg-glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
  }

  .page-head h1 {
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.01em;
  }

  .page-head a {
    font-size: 0.875rem;
  }

  .page-head.stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-block-end: 0.875rem;
  }

  @media (max-width: 69.99rem) {
    .shell {
      grid-template-columns: 1fr auto minmax(0, var(--column)) 1fr;
    }

    .rail {
      grid-column: 2;
      align-items: center;
      inline-size: auto;
      padding-inline: 0.5rem;
    }

    .column {
      grid-column: 3;
    }

    .brand {
      padding: 0.5rem;
    }

    .rail-links a {
      padding: 0.75rem;
    }

    .rail-account {
      inline-size: auto;
      padding: 0.625rem;
    }

    .rail-account .avatar {
      margin: 0;
    }

    /* Icons only; the labels stay for screen readers. */
    .brand-name,
    .rail-links span,
    .rail-account > span:not(.avatar) {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (max-width: 42.99rem) {
    .shell {
      display: block;
    }

    .rail {
      position: sticky;
      inset-block-start: 0;
      z-index: 20;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      justify-self: stretch;
      inline-size: auto;
      block-size: auto;
      padding: 0.375rem 0.5rem 0.375rem 1rem;
      border-block-end: 1px solid var(--border);
    }

    /* The blur is on a pseudo-element: backdrop-filter on .rail itself would
       make it the containing block of the fixed tab bar. */
    .rail::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--bg-glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
    }

    .brand {
      margin: 0;
      padding: 0.25rem 0;
      font-size: 1.25rem;
    }

    .brand-mark {
      inline-size: 1.75rem;
      block-size: 1.75rem;
      border-radius: 8px;
    }

    .brand-name,
    .rail-links span {
      position: static;
      inline-size: auto;
      block-size: auto;
      overflow: visible;
      clip-path: none;
    }

    .rail-links {
      position: fixed;
      inset: auto 0 0 0;
      z-index: 20;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      padding-block-end: env(safe-area-inset-bottom);
      border-block-start: 1px solid var(--border);
      background: var(--bg-glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
    }

    .rail-links a {
      flex-direction: column;
      gap: 0.125rem;
      padding: 0.5rem 0 0.4375rem;
      border-radius: 0;
      color: var(--text-2);
      font-size: 0.6875rem;
    }

    .rail-links a:hover {
      background: none;
    }

    .rail-links a[aria-current="page"] {
      color: var(--text);
      font-weight: 650;
    }

    .rail-account {
      margin: 0;
      padding: 0.375rem;
    }

    .column {
      padding-block-end: calc(4.5rem + env(safe-area-inset-bottom));
      border: 0;
    }

    .page-head {
      position: static;
      min-block-size: 0;
      padding: 1rem 1rem 0.75rem;
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .page-head h1 {
      font-size: 1.625rem;
    }
  }
}

@layer components {
  .btn-primary {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);
  }

  .btn-primary:hover {
    background: var(--text);
    opacity: 0.86;
  }

  .btn-danger {
    border-color: var(--danger);
    background: var(--danger);
    color: var(--bg);
  }

  .btn-danger:hover {
    background: var(--danger);
    opacity: 0.86;
  }

  .btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
  }

  .btn-block {
    inline-size: 100%;
    padding-block: 0.75rem;
  }

  /* A button whose label can be long: the label is cut with "…". */
  .btn-truncate {
    max-inline-size: 100%;
  }

  .btn-truncate .btn-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn-sm .icon {
    inline-size: 1rem;
    block-size: 1rem;
    stroke-width: 2;
  }

  .chip,
  .subscribed {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Forms */
  .field + .field {
    margin-block-start: 1rem;
  }

  .error {
    color: var(--danger);
    font-size: 0.875rem;
  }

  .hint {
    margin-block-start: 0.375rem;
    color: var(--text-2);
    font-size: 0.8125rem;
  }

  p.error {
    margin-block-start: 0.375rem;
  }

  /* The search form's error, above its row. */
  span.error {
    display: block;
    margin-block-end: 0.375rem;
  }

  .password-input {
    position: relative;
  }

  .password-input input {
    padding-inline-end: 4.5rem;
  }

  .password-toggle {
    position: absolute;
    inset-block: 0.3125rem;
    inset-inline-end: 0.3125rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: calc(var(--radius-sm) - 0.25rem);
    background: none;
    color: var(--text-2);
    font-size: 0.8125rem;
  }

  .password-toggle:hover {
    background: var(--surface);
    color: var(--text);
  }

  div.error {
    margin-block-end: 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
  }

  .search-row {
    display: flex;
    gap: 0.5rem;
  }

  .search-field {
    position: relative;
    flex: 1;
  }

  .search-field .icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.875rem;
    translate: 0 -50%;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--text-3);
    pointer-events: none;
  }

  .search-field input:not([type="hidden"]) {
    padding-inline-start: 2.625rem;
    border-color: transparent;
    border-radius: 999px;
    background: var(--surface);
  }

  .search-field input:not([type="hidden"]):focus {
    border-color: var(--accent);
    background: var(--bg);
  }

  /* The Saved page's search, above its list; Clear sits under the row. */
  .saved-search {
    padding: 0 1rem 0.75rem;
  }

  .saved-search > a {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
  }

  /* Messages */
  .flash {
    margin: 0.75rem 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--info-bg);
  }

  /* A quiet request, like confirming your email address, with a small
     form beside it. */
  .notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.75rem 1rem 0;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--info-bg);
    color: var(--text-2);
    font-size: 0.875rem;
  }

  .notice p {
    flex: 1;
    min-inline-size: 12rem;
    overflow-wrap: anywhere;
  }

  .notice strong {
    color: var(--text);
  }

  .fetch-error {
    color: var(--danger);
  }

  .quiet {
    color: var(--text-3);
    font-size: 0.8125rem;
  }

  .empty {
    padding: 3rem 1.5rem;
    color: var(--text-2);
    text-align: center;
  }

  .empty > * + * {
    margin-block-start: 0.5rem;
  }

  .empty > .icon {
    margin-inline: auto;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--text-3);
    stroke-width: 1.5;
  }

  .pager {
    padding: 1.25rem 1rem;
    text-align: center;
  }

  /* Avatars: a feed's or site's icon, else its letter on a tint picked by
     site (see avatarTone), in a rounded square. People are circles. */
  .avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 700;
  }

  .avatar-person {
    border-radius: 50%;
  }

  .avatar-icon {
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--avatar-icon-bg);
  }

  .avatar-icon img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .tone-1 {
    background: var(--tone-1-bg);
    color: var(--tone-1);
  }

  .tone-2 {
    background: var(--tone-2-bg);
    color: var(--tone-2);
  }

  .tone-3 {
    background: var(--tone-3-bg);
    color: var(--tone-3);
  }

  .tone-4 {
    background: var(--tone-4-bg);
    color: var(--tone-4);
  }

  .tone-5 {
    background: var(--tone-5-bg);
    color: var(--tone-5);
  }

  .tone-6 {
    background: var(--tone-6-bg);
    color: var(--tone-6);
  }

  /* Article rows: a divided section per article, with a preview card
     inside. The avatar column is empty on a feed's own page. */
  .article-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.875rem 1rem 1rem;
    border-block-end: 1px solid var(--border);
  }

  .article-row > .avatar {
    margin-inline-end: 0.75rem;
  }

  .article-main {
    grid-column: 2;
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.375rem;
    color: var(--text-3);
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .avatar + .article-main .article-meta {
    align-content: center;
    min-block-size: 2.5rem;
  }

  .article-feed {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 650;
    text-decoration: none;
  }

  .article-feed:hover {
    text-decoration: underline;
  }

  .article-card {
    position: relative;
    margin-block-start: 0.375rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    transition: background-color 0.15s, border-color 0.15s;
  }

  .article-card:hover {
    border-color: var(--border-strong);
    background: var(--surface);
  }

  .article-card:has(.article-title a:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .article-image {
    inline-size: 100%;
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    border-block-end: 1px solid var(--border);
    background: var(--surface);
  }

  .article-text {
    padding: 0.75rem 0.875rem 0.8125rem;
  }

  .article-title {
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.005em;
  }

  .article-title a {
    color: var(--text);
    text-decoration: none;
  }

  /* The whole card opens the article; the source link sits above it. */
  .article-title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .article-title a:focus-visible {
    outline: none;
  }

  .article-excerpt {
    display: -webkit-box;
    margin-block-start: 0.3125rem;
    overflow: hidden;
    color: var(--text-2);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .article-source {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-block-start: 0.5rem;
    color: var(--text-3);
    font-size: 0.8125rem;
    text-decoration: none;
  }

  .article-source:hover {
    color: var(--text-2);
    text-decoration: underline;
  }

  /* "You were here": a quiet labelled rule between two rows, where the
     articles that arrived since the reader's last visit end. */
  .timeline-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-block-end: 1px solid var(--border);
    color: var(--text-3);
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .timeline-divider::before,
  .timeline-divider::after {
    content: "";
    flex: 1;
    border-block-start: 1px solid var(--border-strong);
  }

  /* Read rows: a tinted card, quieter text and image. Still a timeline, not an inbox. */
  .article-row.read .article-card {
    background: var(--surface);
  }

  .article-row.read .article-title a {
    color: var(--text-2);
    font-weight: 550;
  }

  .article-row.read .article-excerpt {
    color: var(--text-3);
  }

  .article-row.read .article-image {
    opacity: 0.65;
    filter: saturate(0.6);
  }

  .article-also-in {
    margin-block-start: 0.625rem;
    color: var(--text-3);
    font-size: 0.8125rem;
  }

  .article-also-in a {
    color: var(--text-2);
    text-decoration: none;
  }

  .article-also-in a:hover {
    text-decoration: underline;
  }

  /* Article actions: icon-only Star and Share and a labelled Save, in one
     row. Under the card on rows, under the title on the
     article page. */
  .article-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .save-button,
  .star-button,
  .share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-3);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 550;
    cursor: pointer;
  }

  .star-button,
  .share-button {
    padding: 0.375rem;
  }

  /* The button's display would override hidden; app.js unhides it. */
  .share-button[hidden] {
    display: none;
  }

  .save-button:hover,
  .star-button:hover,
  .share-button:hover {
    background: var(--surface);
    color: var(--text);
  }

  .save-button:focus-visible,
  .star-button:focus-visible,
  .share-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  .save-button .icon,
  .star-button .icon,
  .share-button .icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 2;
  }

  .save-button .icon-bookmark-fill,
  .star-button .icon-star-fill {
    fill: currentColor;
  }

  .save-button[aria-pressed="true"],
  .star-button[aria-pressed="true"] {
    color: var(--accent);
  }

  .save-button[aria-pressed="true"] .icon-bookmark,
  .save-button[aria-pressed="false"] .icon-bookmark-fill,
  .star-button[aria-pressed="true"] .icon-star,
  .star-button[aria-pressed="false"] .icon-star-fill,
  .share-button[data-copied] .icon-share,
  .share-button:not([data-copied]) .icon-check {
    display: none;
  }

  .share-button[data-copied] {
    color: var(--accent);
  }

  .save-button[disabled],
  .star-button[disabled] {
    opacity: 0.6;
    cursor: progress;
  }

  /* The row's foot, under the card: "Also in" on the left, the actions on
     the right. */
  .article-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.375rem;
  }

  .article-foot .article-also-in {
    flex: 1;
    min-inline-size: 0;
    margin-block-start: 0;
  }

  .article-foot .article-actions {
    margin-inline: auto -0.375rem;
  }

  /* Profile headers on feed and site pages. */
  .profile {
    padding: 1.25rem 1rem 1rem;
    border-block-end: 1px solid var(--border);
  }

  .profile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .profile-top form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .profile-top .avatar {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    font-size: 1.75rem;
  }

  .profile h1,
  .profile-name {
    margin-block-start: 0.875rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .profile-sub {
    margin-block-start: 0.25rem;
    color: var(--text-2);
  }

  .profile-sub a {
    color: var(--text-2);
  }

  .profile-desc {
    margin-block-start: 0.75rem;
    font-size: 1rem;
  }

  .facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    margin-block-start: 0.875rem;
    color: var(--text-2);
    font-size: 0.8125rem;
  }

  .facts span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-inline-size: 0;
  }

  .facts .icon {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--text-3);
    stroke-width: 2;
  }

  .facts code {
    overflow-wrap: anywhere;
  }

  .profile .fetch-error {
    margin-block-start: 0.875rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    font-size: 0.875rem;
  }

  .profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 1rem;
  }

  .list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.625rem;
    border-block-end: 1px solid var(--border);
  }

  .list-head h2 {
    color: var(--text-3);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .list-head h2 a {
    color: inherit;
    text-decoration: none;
  }

  .list-head h2 a:hover {
    color: var(--text);
  }

  .list-head > a {
    font-size: 0.8125rem;
  }

  /* Settings: rows of a label, a value and, on links, a chevron. */
  .settings-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-block-end: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
  }

  a.settings-row:hover {
    background: var(--surface);
  }

  .settings-label {
    font-weight: 600;
  }

  /* A label with a hint under it, on rows without a value. */
  .settings-stack {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
  }

  .settings-stack .hint {
    margin-block-start: 0.125rem;
  }

  .settings-value {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--text-2);
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-row .icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-inline-start: auto;
    color: var(--text-3);
  }

  /* A row that's one sentence, like Help's support address. */
  .settings-text {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  /* Rows without a chevron keep their values in line with those that have
     one. */
  div.settings-row .settings-value {
    margin-inline-end: 1.875rem;
  }

  /* A tag after a value, like "Not confirmed", takes the chevron's place. */
  .settings-row .chip {
    flex: none;
    margin-inline-end: 1.875rem;
  }

  div.settings-row .settings-value:has(+ .chip) {
    margin-inline-end: 0;
  }

  .settings-logout {
    padding: 1.5rem 1rem;
  }

  .settings-delete {
    padding: 0 1rem 1.5rem;
    font-size: 0.875rem;
  }

  .settings-delete a {
    color: var(--danger);
  }

  .settings-form .form-intro {
    margin-block-end: 1.25rem;
    color: var(--text-2);
  }

  .settings-form {
    padding: 1.25rem 1rem;
  }

  /* Edit subscription: the user's tags as checkboxes, then New tags. */
  .tag-checks {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .tag-checks legend {
    margin-block-end: 0.375rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 550;
  }

  .tag-check-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-block-end: 0.875rem;
  }

  .tag-check {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-weight: inherit;
    cursor: pointer;
  }

  .tag-check input:is([type="checkbox"], [type="radio"]) {
    display: inline-block;
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
  }

  /* The import's and export's options, one per line. */
  .settings-choices {
    display: grid;
    gap: 0.5rem;
    margin-block-end: 0.375rem;
  }

  .settings-devices {
    padding: 0.875rem 1rem 0;
  }

  .settings-devices p {
    margin-block-end: 0.75rem;
    color: var(--text-2);
  }

  .form-note {
    margin-block-start: 1.25rem;
    color: var(--text-2);
    font-size: 0.875rem;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1.25rem;
  }

  /* An import's progress or outcome, above its feeds. */
  .import-status {
    padding: 1.25rem 1rem;
    color: var(--text-2);
  }

  .import-status > * + * {
    margin-block-start: 0.5rem;
  }

  .import-status .spinner {
    margin-inline: 0;
  }

  /* One feed of an import's results. */
  .import-row {
    padding: 0.875rem 1rem;
    border-block-end: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.875rem;
  }

  .import-title {
    color: var(--text);
    font-weight: 650;
    font-size: 1rem;
  }

  .import-row .import-url {
    margin-block-start: 0.125rem;
    color: var(--text-3);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
  }

  .import-row .import-url + p {
    margin-block-start: 0.25rem;
  }

  .import-row .feed-row-title {
    font-size: 1rem;
  }

  /* Feed rows on My feeds and site pages, like a list of accounts. */
  .feed-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-block-end: 1px solid var(--border);
  }

  .feed-row-title {
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
  }

  .feed-row-title:hover {
    text-decoration: underline;
  }

  .feed-row p {
    color: var(--text-2);
    font-size: 0.8125rem;
  }

  .feed-row .feed-desc {
    margin-block-start: 0.125rem;
    font-size: 0.875rem;
  }

  .feed-row .feed-url {
    margin-block-start: 0.125rem;
    overflow: hidden;
    color: var(--text-3);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A subscription's tags under its title: small, quiet links. */
  .feed-row .feed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.625rem;
    margin-block-start: 0.125rem;
    font-size: 0.75rem;
  }

  .feed-tags a {
    color: var(--text-3);
    text-decoration: none;
  }

  .feed-tags a:hover {
    color: var(--text-2);
    text-decoration: underline;
  }

  .feed-row .fetch-error {
    color: var(--danger);
  }

  .feed-row form,
  .feed-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* A tag's page: a checklist of the user's subscriptions. */
  :is(.tag-feeds, .timeline-form) fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :is(.tag-feeds, .timeline-form) legend,
  .timeline-sharing h2 {
    inline-size: 100%;
    padding: 1rem 1rem 0.625rem;
    border-block-end: 1px solid var(--border);
    color: var(--text-3);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .tag-feeds .form-actions {
    margin: 0;
    padding: 0.875rem 1rem;
  }

  .check-row {
    display: grid;
    grid-template-columns: auto 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--border);
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
  }

  .check-row:hover {
    background: var(--surface);
  }

  .check-row input[type="checkbox"] {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
  }

  .check-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
  }

  .check-row-title,
  .check-row-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .check-row-title {
    font-weight: 650;
  }

  .check-row-sub {
    color: var(--text-2);
    font-size: 0.8125rem;
  }

  .tag-delete {
    padding: 0 1rem 1.5rem;
  }

  /* The timeline edit page's Sharing section, between the form and Delete. */
  .timeline-sharing h2 {
    margin: 0;
  }

  .timeline-sharing-body {
    padding: 0.875rem 1rem 1.5rem;
  }

  .timeline-sharing-body > p,
  .timeline-sharing-body > .field {
    margin-block-end: 1rem;
  }

  .timeline-sharing-body > .hint {
    margin-block: 0.5rem 0;
  }

  .timeline-sharing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .timeline-list-name + .chip {
    margin-inline-start: 0.5rem;
  }

  /* Timelines: the tab row on Home and custom timelines. */
  .timeline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .timeline-about {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--border);
    color: var(--text-2);
  }

  .timeline-about .timeline-links {
    margin-inline-start: auto;
    font-size: 0.875rem;
  }

  /* The tabs fill the page head in place of its heading, and scroll
     sideways when they don't fit. The scrollbar stays (thin) where a mouse
     may need it, and is hidden on touch screens, which swipe. */
  .page-head.tabs-head {
    padding-block: 0;
  }

  .timeline-tabs {
    flex: 1;
    min-inline-size: 0;
  }

  .timeline-tabs ul {
    position: relative; /* the offsetParent app.js measures tabs against */
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .timeline-tabs li {
    flex: none;
  }

  .timeline-tabs a {
    display: block;
    max-inline-size: 16rem;
    padding: 1rem 0 0.875rem;
    overflow: hidden;
    border-block-end: 2px solid transparent;
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timeline-tabs a:hover {
    color: var(--text);
  }

  .timeline-tabs a[aria-current="page"] {
    border-color: var(--accent);
    color: var(--text);
  }

  .timeline-tabs a:focus-visible {
    outline-offset: -2px;
  }

  .timeline-tabs .tab-manage a {
    color: var(--accent);
    font-weight: 550;
  }

  @media (pointer: coarse) {
    .timeline-tabs ul {
      scrollbar-width: none;
    }
  }

  @media (max-width: 42.99rem) {
    .page-head.tabs-head {
      padding: 0 1rem;
    }

    .timeline-tabs a {
      max-inline-size: 12rem;
    }
  }

  /* The Timelines page: each timeline's name, description and Edit link. */
  .timeline-list li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-block-end: 1px solid var(--border);
  }

  .timeline-list-text {
    flex: 1;
    min-inline-size: 0;
  }

  .timeline-list-name {
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
  }

  .timeline-list-name:hover {
    text-decoration: underline;
  }

  .timeline-list p {
    margin-block-start: 0.125rem;
    color: var(--text-2);
    font-size: 0.875rem;
  }

  .timeline-list li > a {
    font-size: 0.875rem;
  }

  .timeline-move {
    display: flex;
    gap: 0.5rem;
  }

  /* New timeline's presets: a row of links above the form. */
  .timeline-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.875rem;
  }

  .timeline-presets ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The timeline form: name and description, then Show, Leave out and Only show. */
  .timeline-form-fields {
    padding: 1.25rem 1rem;
  }

  .timeline-form .hint,
  .timeline-form fieldset > p.error,
  .timeline-form .form-note {
    margin: 0;
    padding: 0.75rem 1rem 0;
  }

  .timeline-form fieldset {
    margin-block-end: 1rem;
  }

  /* "Feeds that post at most [N] times a week", on one line. */
  .rate-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0;
    font-weight: 600;
  }

  .rate-field label {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }

  .rate-field input:not([type="hidden"]) {
    inline-size: 5rem;
  }

  /* "Articles that mention" and "Leave out articles that mention", which
     share the hint after them. */
  .words-field {
    padding: 0.75rem 1rem 0;
  }

  /* Only show's conditions, each with its hint, are separated by dividers. */
  .timeline-form fieldset > :is(.hint, p.error) + :is(.choice, .rate-field, .words-field) {
    margin-block-start: 0.75rem;
    border-block-start: 1px solid var(--border);
  }

  .timeline-form .form-actions {
    margin: 0;
    padding: 0.5rem 1rem 1.25rem;
  }

  textarea {
    display: block;
    inline-size: 100%;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    resize: vertical;
  }

  textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }

  .choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--border);
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .choice:hover {
    background: var(--surface);
  }

  .choice input:is([type="radio"], [type="checkbox"]) {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
  }

  /* Tags have no avatar. */
  .check-row-plain {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .timeline-form .check-list .check-row {
    padding-inline-start: 2.875rem;
  }

  .feed-picker summary {
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--border);
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* Search results: a site, with its feeds grouped in a box. */
  .lookup-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0.75rem 1rem 0;
    padding: 0.875rem 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
  }

  .lookup-cta p {
    color: var(--text-2);
    font-size: 0.875rem;
  }

  .result {
    padding: 1rem;
    border-block-end: 1px solid var(--border);
  }

  .result-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .result-head h2 {
    font-size: 1rem;
  }

  .result-head h2 a {
    color: var(--text);
    text-decoration: none;
  }

  .result-head h2 a:hover {
    text-decoration: underline;
  }

  .result-head p {
    color: var(--text-3);
    font-size: 0.8125rem;
  }

  .result ul {
    margin-block-start: 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  .result li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
  }

  .result li + li {
    border-block-start: 1px solid var(--border);
  }

  .result li a {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
  }

  .result li a:hover {
    text-decoration: underline;
  }

  /* Article page */
  .reader {
    padding: 1.25rem 1rem 2.5rem;
  }

  .reader-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    color: var(--text-3);
    font-size: 0.875rem;
  }

  .reader-meta .avatar {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: 0.6875rem;
    border-radius: 6px;
  }

  .reader-meta a {
    color: var(--text);
    font-weight: 650;
    text-decoration: none;
  }

  .reader-meta a:hover {
    text-decoration: underline;
  }

  .reader .article-actions {
    margin-block-start: 0.75rem;
    margin-inline-start: -0.375rem;
  }

  .reader h1 {
    margin-block-start: 0.875rem;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .reader > .empty {
    padding-inline: 0;
    text-align: start;
  }

  .reader-image {
    inline-size: 100%;
    block-size: auto;
    margin-block-start: 1.25rem;
    border-radius: var(--radius-sm);
  }

  .article-body {
    margin-block-start: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .article-body > * + * {
    margin-block-start: 1.1em;
  }

  .article-body h2,
  .article-body h3 {
    margin-block-start: 1.75em;
    font-size: 1.3rem;
  }

  .article-body h4,
  .article-body h5,
  .article-body h6 {
    margin-block: 1.5em 0;
    font-size: 1.125rem;
  }

  .article-body img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-sm);
  }

  .article-body figcaption {
    margin-block-start: 0.5rem;
    color: var(--text-3);
    font-size: 0.875rem;
    text-align: center;
  }

  .article-body blockquote {
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--border-strong);
    color: var(--text-2);
  }

  .article-body pre {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* Inline code; code blocks are styled by pre. */
  .article-body :not(pre) > code {
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
    background: var(--surface);
    font-size: 0.875em;
    overflow-wrap: anywhere;
  }

  .article-body :is(ul, ol) {
    padding-inline-start: 1.5rem;
  }

  .article-body li :is(ul, ol) {
    margin-block: 0;
  }

  .article-body hr {
    margin-block: 2em;
    border: 0;
    border-block-start: 1px solid var(--border);
  }

  /* Wide tables scroll inside the column instead of widening the page. */
  .article-body table {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .article-body :is(th, td) {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
  }

  .article-body th {
    background: var(--surface);
  }

  /* Video embeds: a click-to-play preview (sanitize's videoEmbed) that
     app.js swaps for the player. */
  .article-body .embed {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--embed-bg);
  }

  .article-body .embed a {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.75rem;
    position: absolute;
    inset: 0;
    color: var(--on-embed);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }

  .article-body .embed img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
    border-radius: 0;
  }

  /* The play button: a 4rem disc above the label (0.75rem gap), with a
     triangle drawn by the label's ::before at the disc's center. */
  .article-body .embed a::before {
    content: "";
    position: relative;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    background: var(--embed-play);
  }

  .article-body .embed span {
    position: relative;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--embed-play);
  }

  .article-body .embed span::before {
    content: "";
    position: absolute;
    inset-block-end: calc(100% + 2rem);
    inset-inline-start: 50%;
    inline-size: 1.4rem;
    block-size: 1.5rem;
    translate: -40% 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--on-embed);
  }

  .article-body .embed a:is(:hover, :focus-visible)::before {
    background-color: var(--brand);
  }

  .article-body .embed iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .reader-foot {
    margin-block-start: 2rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
  }

  /* Logged-out pages and errors: a centered panel, no nav. */
  .solo {
    display: grid;
    place-items: center;
    min-block-size: 100vh;
    padding: 2rem 1rem;
  }

  .solo-panel {
    inline-size: min(100%, 24rem);
  }

  .solo-panel .brand {
    justify-content: center;
    margin-block-end: 1.75rem;
    padding: 0;
    font-size: 1.5rem;
  }

  .solo-panel .brand-mark {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .solo-panel h1 {
    margin-block-end: 1.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
  }

  .solo-panel .flash {
    margin: 0 0 1.25rem;
  }

  .solo-panel form > div:last-child {
    margin-block-start: 1.25rem;
  }

  .solo-text {
    color: var(--text-2);
    text-align: center;
  }

  .solo-panel .alt {
    margin-block-start: 1.5rem;
    color: var(--text-2);
    font-size: 0.875rem;
    text-align: center;
  }

  .solo-note {
    margin-block-start: 0.75rem;
    color: var(--text-2);
    font-size: 0.8125rem;
    text-align: center;
  }

  /* A button in a sentence, styled as a link. */
  .link-button {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    white-space: normal;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    cursor: pointer;
  }

  .link-button:hover {
    background: none;
    text-decoration-thickness: 2px;
  }

  .solo-foot {
    margin-block-start: 2rem;
    color: var(--text-3);
    font-size: 0.8125rem;
    text-align: center;
  }

  .solo-foot a {
    color: inherit;
  }

  /* A shared timeline's public page: its name and how to follow it. */
  .shared-timeline-description {
    color: var(--text-2);
    text-align: center;
  }

  .shared-timeline-follow {
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--border);
  }

  .shared-timeline-follow > p,
  .shared-timeline-follow > .field {
    margin-block-end: 1rem;
  }

  /* The privacy policy and terms: a column of text in a solo page. */
  .solo-panel.prose {
    inline-size: min(100%, var(--column));
    line-height: 1.6;
  }

  .prose-date {
    margin-block: -1rem 2rem;
    color: var(--text-2);
    font-size: 0.875rem;
    text-align: center;
  }

  .prose h2 {
    margin-block: 2rem 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .prose p + p,
  .prose p + ul,
  .prose ul + p {
    margin-block-start: 0.75rem;
  }

  .prose ul {
    margin-block: 0;
    padding-inline-start: 1.25rem;
  }

  .prose li + li {
    margin-block-start: 0.375rem;
  }

  .prose-foot {
    margin-block-start: 2.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
    color: var(--text-3);
    font-size: 0.875rem;
  }

  .hero {
    text-align: center;
  }

  .hero .brand-mark {
    margin: 0 auto 1.25rem;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 18px;
  }

  .hero .brand-mark .icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .hero h1 {
    margin-block-end: 0.5rem;
  }

  .hero .brand-mark + h1 {
    font-size: 2.5rem;
    letter-spacing: -0.04em;
  }

  .hero p {
    color: var(--text-2);
    font-size: 1.0625rem;
  }

  .hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-block-start: 1.75rem;
  }

  .spinner {
    inline-size: 2rem;
    block-size: 2rem;
    margin-inline: auto;
    border: 3px solid var(--border);
    border-block-start-color: var(--text);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
  }

  @keyframes spin {
    to {
      rotate: 360deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .spinner {
      animation: none;
    }
  }

  @media (max-width: 42.99rem) {
    .feed-row button {
      padding: 0.3125rem 0.75rem;
      font-size: 0.8125rem;
    }
  }

  /* Debug mode (allowed accounts only). Panels read as tooling, not
     product, so they don't follow the dividers and cards rules. */
  .debug {
    margin: 0.75rem 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--debug-border);
    border-radius: var(--radius-sm);
    background: var(--debug-bg);
    font-size: 0.8125rem;
  }

  .debug summary {
    cursor: pointer;
    font-weight: 600;
  }

  .debug-sub {
    margin-block: 0.75rem 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .debug-fields {
    display: grid;
    gap: 0.25rem;
    margin-block-start: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
  }

  .debug-fields div {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .debug-fields dt,
  .debug-fields dd {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .debug-fields dt {
    color: var(--text-2);
  }

  .debug-note {
    color: var(--text-3);
  }

  .debug-badge {
    align-self: flex-start;
    margin-inline: 0.875rem;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--debug-border);
    border-radius: 999px;
    background: var(--debug-bg);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
  }

  .settings-debug {
    padding: 0.875rem 1rem 0;
  }

  .debug-inspect {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0 1rem 0.75rem;
    font-size: 0.8125rem;
  }

  .inspect-head {
    padding: 1rem 1rem 0.25rem;
  }

  .inspect-head p {
    margin-block-start: 0.25rem;
    color: var(--text-2);
  }

  .inspect .fetch-error {
    margin-inline: 1rem;
  }

  .inspect h2.debug-sub {
    margin-block-start: 0;
    font-size: 0.9375rem;
  }

  .debug-table {
    inline-size: 100%;
    margin-block: 0.5rem;
    border-collapse: collapse;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    table-layout: fixed;
  }

  .debug-table th,
  .debug-table td {
    padding: 0.125rem 0.5rem 0.125rem 0;
    overflow-wrap: anywhere;
    text-align: start;
    vertical-align: top;
  }

  .debug-table thead th:first-child {
    inline-size: 40%;
  }

  .debug-table thead th {
    border-block-end: 1px dashed var(--debug-border);
    color: var(--text-2);
  }

  .debug-table tbody th {
    font-weight: 400;
  }

  /* Fields Parse ignores are what the table is for. */
  .debug-ignored {
    color: var(--danger);
  }

  .debug-ignored th {
    font-weight: 600;
  }

  .debug-pre {
    max-block-size: 24rem;
    margin-block: 0.25rem 0.5rem;
    padding: 0.5rem;
    overflow: auto;
    border: 1px dashed var(--debug-border);
    background: var(--bg);
    font-size: 0.6875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .debug-copies {
    margin-block: 0.25rem 0.5rem;
    padding-inline-start: 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
  }

  .debug .debug-raw summary {
    font-weight: 400;
  }

  .debug .debug-inspect {
    margin: 0.75rem 0 0;
  }

  .debug-line {
    margin-block-start: 0.375rem;
    color: var(--text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    overflow-wrap: anywhere;
  }

  .inspect-item {
    padding-block: 0.375rem;
    border-block-start: 1px dashed var(--debug-border);
  }

  .inspect-item summary {
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .settings-debug p {
    margin-block-end: 0.75rem;
    color: var(--text-2);
  }

  @media (max-width: 69.99rem) {
    .debug-badge {
      align-self: center;
      margin-inline: 0;
    }
  }

  @media (max-width: 42.99rem) {
    .debug-fields div {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
  }
}