@layer tokens, reset, layout, components, utilities, themes;

@layer tokens {
  :root {
    --color-primary: #6750a4;
    --color-on-primary: #ffffff;
    --color-primary-container: #eaddff;
    --color-on-primary-container: #21005d;
    --color-accent: #007aff;
    --color-on-accent: #ffffff;
    --color-secondary: #625b71;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #e8def8;
    --color-tertiary: #7d5260;
    --color-error: #b3261e;
    --color-on-error: #ffffff;
    --color-error-container: #f9dedc;
    --color-success: #34c759;
    --color-on-success: #ffffff;
    --color-warning: #ff9500;
    --color-on-warning: #ffffff;
    --color-background: #ffffff;
    --color-on-background: #1d1b20;
    --color-surface: #ffffff;
    --color-on-surface: #1d1b20;
    --color-surface-secondary: #f2f2f7;
    --color-surface-tertiary: #f3edf7;
    --color-surface-elevated: #ffffff;
    --color-on-surface-secondary: #49454f;
    --color-outline: #79747e;
    --color-outline-variant: #cac4d0;
    --color-separator: rgba(60, 60, 67, 0.29);
    --color-fill: rgba(120, 120, 128, 0.2);
    --color-fill-secondary: rgba(120, 120, 128, 0.16);
    --color-label: #000000;
    --color-label-secondary: rgba(60, 60, 67, 0.6);
    --color-label-tertiary: rgba(60, 60, 67, 0.3);
    --color-label-quaternary: rgba(60, 60, 67, 0.18);
    --color-placeholder: rgba(60, 60, 67, 0.3);
    --color-scrim: rgba(0, 0, 0, 0.32);

    --dark-primary: #d0bcff;
    --dark-on-primary: #381e72;
    --dark-primary-container: #4f378b;
    --dark-on-primary-container: #eaddff;
    --dark-accent: #0a84ff;
    --dark-on-accent: #ffffff;
    --dark-secondary: #ccc2dc;
    --dark-on-secondary: #332d41;
    --dark-secondary-container: #4a4458;
    --dark-tertiary: #efb8c8;
    --dark-error: #f2b8b5;
    --dark-on-error: #601410;
    --dark-error-container: #8c1d18;
    --dark-success: #30d158;
    --dark-on-success: #ffffff;
    --dark-warning: #ff9f0a;
    --dark-on-warning: #ffffff;
    --dark-background: #000000;
    --dark-on-background: #e6e0e9;
    --dark-surface: #141218;
    --dark-on-surface: #e6e0e9;
    --dark-surface-secondary: #1c1c1e;
    --dark-surface-tertiary: #211f26;
    --dark-surface-elevated: #2c2c2e;
    --dark-on-surface-secondary: #cac4d0;
    --dark-outline: #938f99;
    --dark-outline-variant: #49454f;
    --dark-separator: rgba(84, 84, 88, 0.6);
    --dark-fill: rgba(120, 120, 128, 0.36);
    --dark-fill-secondary: rgba(120, 120, 128, 0.32);
    --dark-label: #ffffff;
    --dark-label-secondary: rgba(235, 235, 245, 0.6);
    --dark-label-tertiary: rgba(235, 235, 245, 0.3);
    --dark-label-quaternary: rgba(235, 235, 245, 0.16);
    --dark-placeholder: rgba(235, 235, 245, 0.3);
    --dark-scrim: rgba(0, 0, 0, 0.56);

    --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", SFMono-Regular, "Roboto Mono", Consolas, monospace;
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 28px;
    --radius-full: 9999px;
    --shadow-0: none;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-moderate: 300ms;
    --focus-ring: 4px solid rgba(0, 122, 255, 0.6);
    --focus-ring-offset: 1px;
    --page-width: 1240px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --color-primary: var(--dark-primary);
      --color-on-primary: var(--dark-on-primary);
      --color-primary-container: var(--dark-primary-container);
      --color-on-primary-container: var(--dark-on-primary-container);
      --color-accent: var(--dark-accent);
      --color-on-accent: var(--dark-on-accent);
      --color-secondary: var(--dark-secondary);
      --color-on-secondary: var(--dark-on-secondary);
      --color-secondary-container: var(--dark-secondary-container);
      --color-tertiary: var(--dark-tertiary);
      --color-error: var(--dark-error);
      --color-on-error: var(--dark-on-error);
      --color-error-container: var(--dark-error-container);
      --color-success: var(--dark-success);
      --color-on-success: var(--dark-on-success);
      --color-warning: var(--dark-warning);
      --color-on-warning: var(--dark-on-warning);
      --color-background: var(--dark-background);
      --color-on-background: var(--dark-on-background);
      --color-surface: var(--dark-surface);
      --color-on-surface: var(--dark-on-surface);
      --color-surface-secondary: var(--dark-surface-secondary);
      --color-surface-tertiary: var(--dark-surface-tertiary);
      --color-surface-elevated: var(--dark-surface-elevated);
      --color-on-surface-secondary: var(--dark-on-surface-secondary);
      --color-outline: var(--dark-outline);
      --color-outline-variant: var(--dark-outline-variant);
      --color-separator: var(--dark-separator);
      --color-fill: var(--dark-fill);
      --color-fill-secondary: var(--dark-fill-secondary);
      --color-label: var(--dark-label);
      --color-label-secondary: var(--dark-label-secondary);
      --color-label-tertiary: var(--dark-label-tertiary);
      --color-label-quaternary: var(--dark-label-quaternary);
      --color-placeholder: var(--dark-placeholder);
      --color-scrim: var(--dark-scrim);
    }
  }
}

@layer components {
  .hero-home {
    min-height: 360px;
    padding-top: var(--space-lg);
  }

  .hero-home > *,
  .hero-home .hero-copy,
  .hero-home .round-brief,
  .tips-first,
  .tip-fixture-card,
  .human-source-card {
    min-width: 0;
    max-width: 100%;
  }

  .hero-home h1,
  .hero-home .hero-lede {
    overflow-wrap: anywhere;
  }

  .tips-first {
    padding-top: var(--space-lg);
  }

  .kind-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-on-surface-secondary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .kind-human {
    border-color: color-mix(in srgb, var(--color-tertiary) 36%, var(--color-outline-variant));
    background: color-mix(in srgb, var(--color-tertiary) 12%, var(--color-surface));
    color: var(--color-tertiary);
  }

  .kind-ai {
    border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-outline-variant));
    background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
    color: var(--color-primary);
  }

  .today-tip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-base);
  }

  .tip-fixture-card {
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
  }

  .tip-fixture-card > header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-base);
    padding: var(--space-md) var(--space-base);
    border-bottom: 1px solid var(--color-separator);
    background: var(--color-surface-secondary);
  }

  .tip-fixture-card > header h3 {
    margin-top: 2px;
    color: var(--color-on-surface);
    font-size: 18px;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }

  .tip-fixture-card > header h3 i,
  .human-tip-record h3 i {
    color: var(--color-on-surface-secondary);
    font-style: normal;
    font-weight: 400;
  }

  .tip-fixture-card > header time {
    flex: 0 0 auto;
    color: var(--color-on-surface-secondary);
    font-size: 12px;
    font-weight: 650;
    text-align: right;
  }

  .tip-position-list {
    display: grid;
  }

  .tip-position {
    --tone: var(--color-primary);
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1.3fr) auto;
    align-items: center;
    gap: var(--space-base);
    padding: var(--space-base);
    border-bottom: 1px solid var(--color-separator);
    background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 4%, var(--color-surface)), var(--color-surface) 44%);
  }

  .tip-position:last-child {
    border-bottom: 0;
  }

  .tip-person {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
  }

  .tip-person > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .tip-person a {
    color: var(--color-on-surface);
    font-size: 12px;
    text-decoration: none;
  }

  .tip-person strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tip-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--tone) 16%, var(--color-surface));
    color: var(--tone) !important;
    font-size: 11px !important;
    font-weight: 750;
  }

  .tip-avatar:hover,
  .tip-person > div > a:hover,
  .human-source-card h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .tip-expert {
    overflow: hidden;
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tip-selection {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tip-selection span {
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .tip-selection strong {
    color: var(--color-on-surface);
    font-size: 14px;
    line-height: 1.3;
  }

  .tip-numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(54px, auto));
    gap: var(--space-xs);
  }

  .tip-numbers div {
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: end;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
  }

  .tip-numbers dt {
    color: var(--color-on-surface-secondary);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .tip-numbers dd {
    color: var(--color-on-surface);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 750;
  }

  .tip-proof {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-outline-variant);
    color: var(--color-on-surface-secondary);
    font-size: 10px;
  }

  .tip-proof > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tip-proof a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
  }

  .tip-proof time {
    flex: 0 0 auto;
  }

  .verified-mark {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    color: var(--color-success);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .verified-mark::before {
    content: "✓";
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
  }

  .human-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-base);
  }

  .human-source-card {
    --tone: var(--color-tertiary);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--color-outline-variant));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--tone) 4%, var(--color-surface));
    box-shadow: var(--shadow-1);
  }

  .human-source-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-base);
    border-bottom: 1px solid var(--color-separator);
  }

  .human-source-card h3 {
    margin-top: 3px;
    font-size: 18px;
    letter-spacing: -0.025em;
  }

  .human-source-card h3 a {
    color: var(--color-on-surface);
    text-decoration: none;
  }

  .human-source-card > p {
    padding: var(--space-base);
    color: var(--color-on-surface-secondary);
    font-size: 13px;
    line-height: 1.5;
  }

  .source-counts {
    display: flex;
    gap: var(--space-sm);
    padding: 0 var(--space-base) var(--space-base);
  }

  .source-counts span {
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    color: var(--color-on-surface-secondary);
    font-size: 10px;
  }

  .source-counts strong {
    color: var(--color-on-surface);
  }

  .source-tip-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-separator);
  }

  .source-tip-list li {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-base);
    padding: var(--space-md) var(--space-base);
    border-bottom: 1px solid var(--color-separator);
  }

  .source-tip-list li > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .source-tip-list li > div:first-child span,
  .source-tip-list small,
  .source-tip-list li > div:last-child span {
    color: var(--color-on-surface-secondary);
    font-size: 10px;
  }

  .source-tip-list strong {
    color: var(--color-on-surface);
    font-size: 13px;
    line-height: 1.35;
  }

  .source-tip-list li > div:last-child {
    align-items: end;
  }

  .source-tip-list b {
    font-family: var(--font-mono);
    font-size: 14px;
  }

  .source-tip-list em {
    margin-top: 4px;
    color: var(--color-tertiary);
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .human-source-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-base);
    margin-top: auto;
    padding: var(--space-md) var(--space-base);
    background: var(--color-surface-secondary);
    font-size: 11px;
  }

  .human-row > * {
    background: color-mix(in srgb, var(--color-tertiary) 7%, var(--color-surface));
  }

  .kind-line {
    display: block;
    margin-bottom: 3px;
    color: var(--color-primary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .status-grid-human,
  .status-grid-reference {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .button-link {
    width: fit-content;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-base);
    padding: 0 18px;
    border: 1px solid var(--color-outline);
    border-radius: 10px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  }

  .button-link:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  .button-link:active {
    transform: scale(0.98);
  }

  .human-record-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-base);
  }

  .human-tip-record {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
  }

  .human-tip-record > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-base);
    padding: var(--space-base);
    border-bottom: 1px solid var(--color-separator);
    background: var(--color-surface-secondary);
  }

  .human-tip-record h3 {
    margin-top: 2px;
    font-size: 17px;
    letter-spacing: -0.02em;
  }

  .human-tip-record > header time {
    color: var(--color-on-surface-secondary);
    font-size: 11px;
    text-align: right;
  }

  .human-record-pick {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-base);
  }

  .human-record-pick span,
  .human-record-pick small {
    color: var(--color-on-surface-secondary);
    font-size: 10px;
  }

  .human-record-pick strong {
    font-size: 17px;
    line-height: 1.35;
  }

  .human-tip-record > dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--color-separator);
  }

  .human-tip-record > dl div {
    padding: var(--space-md) var(--space-base);
    border-right: 1px solid var(--color-separator);
    border-bottom: 1px solid var(--color-separator);
  }

  .human-tip-record > dl div:nth-child(even) {
    border-right: 0;
  }

  .human-tip-record dt {
    color: var(--color-on-surface-secondary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .human-tip-record dd {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
  }

  .human-tip-record dd small {
    display: block;
    color: var(--color-on-surface-secondary);
    font-size: 9px;
    font-weight: 400;
  }

  .human-tip-record > footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-base);
    color: var(--color-on-surface-secondary);
    font-size: 10px;
  }

  .human-tip-record > footer > span:nth-child(2) {
    flex: 1;
  }

  .human-tip-record > p {
    margin-top: auto;
    padding: 0 var(--space-base) var(--space-base);
    color: var(--color-on-surface-secondary);
    font-size: 11px;
    line-height: 1.45;
  }

  .human-method {
    border-color: color-mix(in srgb, var(--color-tertiary) 36%, var(--color-outline-variant));
    background: color-mix(in srgb, var(--color-tertiary) 8%, var(--color-surface));
  }
}

@layer themes {
  @media (max-width: 980px) {
    .today-tip-grid,
    .human-source-grid,
    .human-record-list {
      grid-template-columns: 1fr;
    }

    .tip-position {
      grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1.1fr) auto;
    }
  }

  @media (max-width: 720px) {
    .hero-home {
      min-height: 0;
    }

    .tips-first {
      padding-top: var(--space-base);
    }

    .tip-fixture-card > header {
      min-height: 64px;
      align-items: start;
    }

    .tip-fixture-card > header h3 {
      font-size: 16px;
    }

    .tip-fixture-card > header time {
      max-width: 110px;
      white-space: normal;
    }

    .tip-position {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-md);
    }

    .tip-person {
      grid-column: 1 / -1;
    }

    .tip-selection {
      grid-column: 1;
    }

    .tip-numbers {
      grid-column: 2;
    }

    .tip-proof {
      flex-wrap: wrap;
    }

    .tip-proof > span:nth-child(2) {
      flex-basis: calc(100% - 110px);
    }

    .tip-proof time {
      width: 100%;
      padding-left: 24px;
    }

    .human-source-card > header {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .human-source-card > header .status-badge {
      grid-column: 1 / -1;
      margin-left: 52px;
    }

    .human-source-card > footer,
    .human-tip-record > footer {
      align-items: start;
      flex-direction: column;
    }

    .status-grid-human,
    .status-grid-reference {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .tip-position {
      grid-template-columns: 1fr;
    }

    .tip-person,
    .tip-selection,
    .tip-numbers,
    .tip-proof {
      grid-column: 1;
    }

    .tip-numbers {
      justify-self: stretch;
    }

    .tip-numbers div {
      align-items: start;
    }

    .source-tip-list li {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }

    .source-tip-list li > div:last-child {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: baseline;
      gap: var(--space-sm);
    }

    .source-tip-list em {
      margin-top: 0;
    }

    .human-tip-record > dl {
      grid-template-columns: 1fr;
    }

    .human-tip-record > dl div,
    .human-tip-record > dl div:nth-child(even) {
      border-right: 0;
    }
  }

  @media (hover: hover) {
    .tip-fixture-card,
    .human-source-card,
    .human-tip-record {
      transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal) var(--ease-emphasized);
    }

    .tip-fixture-card:hover,
    .human-source-card:hover,
    .human-tip-record:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-2);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tip-fixture-card,
    .human-source-card,
    .human-tip-record,
    .button-link {
      transition: none;
    }
  }

  @media print {
    .tip-fixture-card,
    .human-source-card,
    .human-tip-record {
      break-inside: avoid;
      box-shadow: none;
    }
  }
}

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

  html {
    min-width: 320px;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-on-background);
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  a {
    color: inherit;
  }

  button,
  input {
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
  }
}

@layer layout {
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    border-bottom: 1px solid var(--color-separator);
    background: color-mix(in srgb, var(--color-background) 76%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }

  .header-inner {
    width: min(calc(100% - 32px), var(--page-width));
    min-height: 64px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-lg);
  }

  .page-shell {
    width: min(calc(100% - 32px), var(--page-width));
    min-height: 72vh;
    margin: 0 auto;
    padding: var(--space-2xl) 0 var(--space-3xl);
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    align-items: end;
    gap: var(--space-2xl);
    min-height: 420px;
    padding: var(--space-xl) 0 var(--space-3xl);
  }

  .section {
    padding: var(--space-3xl) 0 0;
  }

  .compact-section {
    padding-top: var(--space-2xl);
  }

  .section-heading {
    margin-bottom: var(--space-lg);
  }

  .split-heading,
  .inline-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .split-heading > p {
    max-width: 460px;
    color: var(--color-on-surface-secondary);
  }

  .page-header {
    max-width: 850px;
    padding: var(--space-xl) 0 var(--space-3xl);
  }

  .page-header > p:last-child {
    max-width: 760px;
  }

  .method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-outline-variant);
  }

  .reference-grid,
  .metric-explainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-base);
    margin-top: var(--space-base);
  }

  .status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-base);
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  .fixture-list {
    display: grid;
    gap: var(--space-base);
  }

  .round-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-base);
  }

  .site-footer {
    width: min(calc(100% - 32px), var(--page-width));
    margin: 0 auto;
    padding: var(--space-xl) 0 var(--space-2xl);
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-xl);
    border-top: 1px solid var(--color-separator);
    color: var(--color-on-surface-secondary);
    font-size: 13px;
  }

  .site-footer div {
    display: flex;
    flex-direction: column;
  }

  .site-footer strong {
    color: var(--color-on-surface);
    font-size: 14px;
  }

  .site-footer p {
    max-width: 440px;
    text-align: right;
  }

  .mobile-nav {
    display: none;
  }
}

@layer components {
  .skip-link {
    position: fixed;
    inset: var(--space-sm) auto auto var(--space-sm);
    z-index: 100;
    padding: var(--space-sm) var(--space-base);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--duration-normal) var(--ease-emphasized);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--color-on-surface);
    text-decoration: none;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 3px;
    padding: 8px;
    border-radius: 10px;
    background: var(--color-primary);
    box-shadow: var(--shadow-1);
  }

  .brand-mark i {
    width: 3px;
    border-radius: var(--radius-full);
    background: var(--color-on-primary);
  }

  .brand-mark i:nth-child(1) {
    height: 9px;
  }

  .brand-mark i:nth-child(2) {
    height: 18px;
  }

  .brand-mark i:nth-child(3) {
    height: 13px;
  }

  .brand-name {
    letter-spacing: -0.02em;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
  }

  .nav-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-md);
    border-radius: var(--radius-sm);
    color: var(--color-on-surface-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
  }

  .nav-link:hover {
    background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
    color: var(--color-on-surface);
  }

  .nav-link.is-active {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
  }

  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
    border: 1px solid var(--color-outline-variant);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-on-surface);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
  }

  .theme-toggle:hover {
    background: var(--color-surface-secondary);
  }

  .theme-toggle:active {
    transform: scale(0.98);
  }

  .theme-glyph {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: var(--radius-full);
  }

  .theme-glyph::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: var(--radius-full);
    background: currentColor;
    clip-path: inset(0 50% 0 0);
  }

  .theme-text {
    font-size: 13px;
    font-weight: 600;
  }

  .sample-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 40px;
    padding: var(--space-sm) var(--space-base);
    background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
    color: var(--color-on-surface);
    font-size: 13px;
    text-align: center;
  }

  .sample-banner strong {
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .eyebrow {
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 16px;
    text-transform: uppercase;
  }

  .hero h1,
  .page-header h1 {
    max-width: 900px;
    color: var(--color-on-surface);
    font-size: clamp(44px, 7vw, 84px);
    font-weight: 700;
    letter-spacing: -0.065em;
    line-height: 0.94;
  }

  .hero h1 span {
    color: var(--color-primary);
  }

  .hero-lede,
  .page-header > p:last-child {
    max-width: 680px;
    margin-top: var(--space-lg);
    color: var(--color-on-surface-secondary);
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.55;
  }

  .round-brief {
    position: relative;
    overflow: hidden;
    padding: var(--space-lg);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-2);
  }

  .round-brief::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-primary);
  }

  .round-brief-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-on-surface-secondary);
    font-size: 12px;
  }

  .round-pulse {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-success);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-success) 16%, transparent);
  }

  .round-brief h2 {
    margin-top: var(--space-lg);
    font-size: 26px;
    letter-spacing: -0.035em;
    line-height: 1.15;
  }

  .brief-stats,
  .round-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
  }

  .brief-stats div,
  .round-meta div {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .brief-stats dt,
  .round-meta dt {
    color: var(--color-on-surface-secondary);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .brief-stats dd,
  .round-meta dd {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .text-link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
  }

  .text-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .arrow-link::after {
    content: " →";
    display: inline-block;
    transition: transform var(--duration-normal) var(--ease-emphasized);
  }

  .arrow-link:hover::after {
    transform: translateX(3px);
  }

  .section-heading h2,
  .integrity-panel h2 {
    color: var(--color-on-surface);
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.045em;
    line-height: 1.15;
  }

  .table-card {
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
  }

  .table-scroll {
    overflow-x: auto;
    scrollbar-color: var(--color-fill) transparent;
  }

  table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  th,
  td {
    height: 64px;
    padding: var(--space-md) var(--space-base);
    border-bottom: 1px solid var(--color-separator);
    text-align: left;
    white-space: nowrap;
  }

  thead th {
    height: 44px;
    background: var(--color-surface-secondary);
    color: var(--color-on-surface-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  tbody th {
    font-weight: 400;
  }

  tbody tr:last-child > * {
    border-bottom: 0;
  }

  tbody tr:hover > * {
    background: color-mix(in srgb, var(--color-on-surface) 4%, var(--color-surface));
  }

  .numeric {
    text-align: right;
  }

  .strong-number {
    color: var(--color-on-surface);
    font-weight: 750;
  }

  .positive {
    color: var(--color-success);
    font-weight: 700;
  }

  .negative {
    color: var(--color-error);
    font-weight: 700;
  }

  .reference-row > * {
    background: color-mix(in srgb, var(--color-primary-container) 34%, var(--color-surface));
  }

  .rank-cell span {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-surface-secondary);
    color: var(--color-on-surface-secondary);
    font-size: 12px;
    font-weight: 700;
  }

  .reference-row .rank-cell span {
    width: auto;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .bot-identity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    color: var(--color-on-surface);
    text-decoration: none;
  }

  .bot-identity > span:nth-child(2) {
    display: flex;
    flex-direction: column;
  }

  .bot-identity strong {
    font-size: 14px;
  }

  .bot-identity small {
    max-width: 220px;
    overflow: hidden;
    color: var(--color-on-surface-secondary);
    font-size: 11px;
    font-weight: 400;
    text-overflow: ellipsis;
  }

  .bot-dot {
    --tone: var(--color-primary);
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: var(--radius-full);
    background: var(--tone);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 16%, transparent);
  }

  .reference-tag,
  .out-mark {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: 9px;
    font-style: normal;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .out-mark {
    background: var(--color-error-container);
    color: var(--color-error);
  }

  .fixture-card {
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
  }

  .fixture-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-base);
    padding: var(--space-sm) var(--space-base);
    border-bottom: 1px solid var(--color-separator);
    color: var(--color-on-surface-secondary);
    font-size: 12px;
  }

  .fixture-header > div {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .competition-label {
    color: var(--color-primary);
    font-weight: 700;
  }

  .round-link {
    overflow: hidden;
    color: var(--color-accent);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl) clamp(16px, 5vw, 64px);
  }

  .team {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
  }

  .team strong {
    overflow-wrap: anywhere;
    color: var(--color-on-surface);
    font-size: clamp(18px, 3vw, 26px);
    letter-spacing: -0.035em;
    line-height: 1.1;
  }

  .team-away {
    align-items: end;
    text-align: right;
  }

  .home-away-label {
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .score {
    min-width: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--color-on-surface);
  }

  .score strong {
    font-size: 28px;
    line-height: 1;
  }

  .score i {
    color: var(--color-on-surface-secondary);
    font-style: normal;
  }

  .score-pending {
    width: 48px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-surface-secondary);
    color: var(--color-on-surface-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .odds-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(80px, 1fr));
    overflow-x: auto;
    border-top: 1px solid var(--color-separator);
    border-bottom: 1px solid var(--color-separator);
    background: var(--color-surface-secondary);
  }

  .odds-grid div {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 48px;
    padding: var(--space-sm);
    border-right: 1px solid var(--color-separator);
  }

  .odds-grid div:last-child {
    border-right: 0;
  }

  .odds-grid dt {
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
  }

  .odds-grid dd {
    color: var(--color-on-surface);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
  }

  .picks-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-base);
    padding: var(--space-base) var(--space-base) var(--space-sm);
    font-size: 12px;
  }

  .picks-heading span {
    color: var(--color-on-surface-secondary);
  }

  .pick-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    gap: var(--space-sm);
    overflow-x: auto;
    padding: 0 var(--space-base) var(--space-base);
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--color-fill) transparent;
  }

  .pick-card {
    --tone: var(--color-primary);
    min-height: 190px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--color-outline-variant));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--tone) 5%, var(--color-surface));
  }

  .pick-card > header {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--tone) 22%, var(--color-outline-variant));
  }

  .pick-card > header a {
    flex: 1;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pick-card .reference-tag {
    min-height: 18px;
    padding: 0 var(--space-xs);
    font-size: 7px;
  }

  .pick-call {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label prob" "call prob";
    gap: 0 var(--space-sm);
    padding: var(--space-md);
  }

  .pick-call span {
    grid-area: label;
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    text-transform: uppercase;
  }

  .pick-call strong {
    grid-area: call;
    overflow: hidden;
    font-size: 18px;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pick-call em {
    grid-area: prob;
    align-self: center;
    color: var(--tone);
    font-size: 18px;
    font-style: normal;
    font-weight: 750;
  }

  .probability-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 var(--space-md);
    overflow: hidden;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-sm);
  }

  .probability-row span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xs);
    border-right: 1px solid var(--color-outline-variant);
  }

  .probability-row span:last-child {
    border-right: 0;
  }

  .probability-row i {
    color: var(--color-on-surface-secondary);
    font-size: 9px;
    font-style: normal;
  }

  .probability-row b {
    font-family: var(--font-mono);
    font-size: 11px;
  }

  .goal-call {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    color: var(--color-on-surface-secondary);
    font-size: 11px;
  }

  .goal-call strong {
    color: var(--color-on-surface);
    font-family: var(--font-mono);
  }

  .missing-pick {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 130px;
    padding: var(--space-base);
    color: var(--color-on-surface-secondary);
    text-align: center;
  }

  .missing-pick::before {
    content: "";
    width: 24px;
    height: 2px;
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-full);
    background: var(--color-outline);
  }

  .missing-pick strong {
    color: var(--color-on-surface);
    font-size: 13px;
  }

  .missing-pick span {
    font-size: 11px;
  }

  .pick-bets {
    margin: auto 0 0;
    padding: var(--space-sm) var(--space-md);
    list-style: none;
    border-top: 1px solid var(--color-outline-variant);
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
  }

  .pick-bets li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 10px;
  }

  .pick-bets strong {
    color: var(--color-success);
  }

  .status-badge,
  .round-badge,
  .result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: var(--color-surface-secondary);
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .status-badge i {
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border: 1.5px solid currentColor;
    border-radius: var(--radius-full);
  }

  .status-live {
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    color: var(--color-success);
  }

  .status-live i {
    border: 0;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
  }

  .status-building {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    color: var(--color-warning);
  }

  .status-failed {
    background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
    color: var(--color-error);
  }

  .status-forecast-only {
    margin-left: 6px;
    background: color-mix(in srgb, var(--color-on-surface-secondary) 10%, var(--color-surface));
    color: var(--color-on-surface-secondary);
  }

  .status-failed i,
  .status-no-model i {
    border: 0;
    border-radius: 0;
  }

  .status-failed i::before,
  .status-failed i::after {
    content: "";
    position: absolute;
    inset: 3px -1px auto;
    height: 1.5px;
    border-radius: var(--radius-full);
    background: currentColor;
    transform: rotate(45deg);
  }

  .status-failed i::after {
    transform: rotate(-45deg);
  }

  .status-no-model {
    background: color-mix(in srgb, var(--color-tertiary) 12%, var(--color-surface));
    color: var(--color-tertiary);
  }

  .status-no-model i::before {
    content: "";
    position: absolute;
    inset: 3px -1px auto;
    height: 1.5px;
    border-radius: var(--radius-full);
    background: currentColor;
  }

  .status-badge-compact {
    min-height: 20px;
    padding: 0 6px;
    font-size: 7px;
  }

  .status-badge-compact i {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
  }

  .round-open,
  .result-won {
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    color: var(--color-success);
  }

  .round-sealed,
  .result-pending {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
  }

  .round-settling {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    color: var(--color-warning);
  }

  .round-scored,
  .round-void,
  .result-void {
    background: var(--color-surface-secondary);
    color: var(--color-on-surface-secondary);
  }

  .result-lost {
    background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
    color: var(--color-error);
  }

  .rule-callout,
  .integrity-panel {
    margin-top: var(--space-base);
    display: grid;
    grid-template-columns: minmax(220px, 0.45fr) 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
  }

  .rule-callout strong {
    font-size: 20px;
    letter-spacing: -0.025em;
  }

  .rule-callout span,
  .integrity-panel > p {
    max-width: 760px;
  }

  .method-step {
    min-height: 220px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-surface);
  }

  .method-step > span,
  .metric-number {
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
  }

  .method-step h2,
  .reference-grid h2,
  .metric-explainer h2 {
    margin-bottom: var(--space-sm);
    font-size: 20px;
    letter-spacing: -0.03em;
  }

  .method-step p,
  .reference-grid p,
  .metric-explainer p {
    color: var(--color-on-surface-secondary);
    font-size: 15px;
    line-height: 1.6;
  }

  code {
    padding: 2px 5px;
    border-radius: var(--radius-xs);
    background: var(--color-surface-tertiary);
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: 0.88em;
  }

  .integrity-panel {
    margin-top: var(--space-2xl);
    align-items: center;
  }

  .integrity-panel .eyebrow {
    color: var(--color-on-primary-container);
    opacity: 0.7;
  }

  .reference-grid article,
  .metric-explainer article {
    min-height: 180px;
    padding: var(--space-xl);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .reference-grid .reference-tag {
    margin-bottom: var(--space-lg);
  }

  .metric-explainer article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm) var(--space-lg);
  }

  .metric-explainer p {
    grid-column: 2;
  }

  .status-card,
  .round-card {
    --tone: var(--color-primary);
    min-height: 230px;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-on-surface);
    text-decoration: none;
    transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal) var(--ease-emphasized), border-color var(--duration-normal) var(--ease-emphasized);
  }

  .status-card:hover,
  .round-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tone) 50%, var(--color-outline-variant));
    box-shadow: var(--shadow-2);
  }

  .status-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-base);
  }

  .bot-avatar {
    --tone: var(--color-primary);
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--tone) 16%, var(--color-surface));
    color: var(--tone);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .bot-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 13px;
  }

  .status-card h2 {
    margin-top: var(--space-lg);
    font-size: 19px;
    letter-spacing: -0.03em;
  }

  .status-card > p {
    margin-top: var(--space-sm);
    color: var(--color-on-surface-secondary);
    font-size: 13px;
    line-height: 1.5;
  }

  .status-card-foot {
    margin-top: auto;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-top: var(--space-base);
    color: var(--color-on-surface-secondary);
    font-size: 10px;
  }

  .status-card-foot span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-card-foot strong {
    flex: 0 0 auto;
    color: var(--color-on-surface);
  }

  .round-card {
    min-height: 200px;
  }

  .round-card > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    color: var(--color-on-surface-secondary);
    font-size: 11px;
  }

  .round-card h3 {
    margin-top: var(--space-lg);
    font-size: 20px;
    letter-spacing: -0.03em;
  }

  .round-card dl {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-base);
  }

  .round-card dl div {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
  }

  .round-card dt {
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    text-transform: uppercase;
  }

  .round-card dd {
    font-weight: 700;
  }

  .round-card-link {
    margin-top: auto;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 650;
  }

  .round-card-link::after {
    content: " →";
  }

  .round-page-header > div:first-child {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .round-page-header .eyebrow {
    margin: 0;
  }

  .round-meta {
    max-width: 800px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--space-xl);
  }

  .round-meta div {
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-outline-variant);
  }

  .round-meta dd {
    font-size: 14px;
  }

  .bot-hero {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl) 0 var(--space-2xl);
  }

  .bot-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .bot-title-line h1 {
    font-size: clamp(38px, 6vw, 64px);
    letter-spacing: -0.055em;
    line-height: 1;
  }

  .bot-hero-copy > p {
    max-width: 680px;
    margin-top: var(--space-md);
    color: var(--color-on-surface-secondary);
  }

  .model-label {
    display: inline-block;
    margin-top: var(--space-sm);
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: 11px;
  }

  .stat-card {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-base);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .stat-card span {
    color: var(--color-on-surface-secondary);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .stat-card strong {
    font-size: 21px;
    letter-spacing: -0.03em;
  }

  .bot-bet-round + .bot-bet-round {
    margin-top: var(--space-xl);
  }

  .bot-bet-round h3 {
    margin-bottom: var(--space-sm);
    font-size: 15px;
  }

  .bot-bet-round h3 a {
    color: var(--color-accent);
    text-decoration: none;
  }

  .quiet-link {
    margin-top: var(--space-lg);
    color: var(--color-on-surface-secondary);
    font-size: 12px;
  }

  .empty-state {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    border: 1px dashed var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface-secondary);
    text-align: center;
  }

  .empty-mark {
    position: relative;
    width: 42px;
    height: 42px;
    margin-bottom: var(--space-base);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-full);
  }

  .empty-mark::after {
    content: "";
    position: absolute;
    inset: 19px 11px auto;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--color-outline);
  }

  .empty-state h3 {
    font-size: 17px;
  }

  .empty-state p {
    max-width: 440px;
    margin-top: var(--space-xs);
    color: var(--color-on-surface-secondary);
    font-size: 13px;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .tone-0 {
    --tone: var(--color-primary);
  }

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

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

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

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

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

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

  .tone-7 {
    --tone: var(--color-outline);
  }

  .reveal {
    animation: reveal-in 400ms var(--ease-emphasized-decelerate) both;
  }

  .page-shell > .reveal:nth-child(2) {
    animation-delay: 60ms;
  }

  .page-shell > .reveal:nth-child(3) {
    animation-delay: 120ms;
  }

  .page-shell > .reveal:nth-child(4) {
    animation-delay: 180ms;
  }

  @keyframes reveal-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@layer themes {
  :root.dark {
    --color-primary: var(--dark-primary);
    --color-on-primary: var(--dark-on-primary);
    --color-primary-container: var(--dark-primary-container);
    --color-on-primary-container: var(--dark-on-primary-container);
    --color-accent: var(--dark-accent);
    --color-on-accent: var(--dark-on-accent);
    --color-secondary: var(--dark-secondary);
    --color-on-secondary: var(--dark-on-secondary);
    --color-secondary-container: var(--dark-secondary-container);
    --color-tertiary: var(--dark-tertiary);
    --color-error: var(--dark-error);
    --color-on-error: var(--dark-on-error);
    --color-error-container: var(--dark-error-container);
    --color-success: var(--dark-success);
    --color-on-success: var(--dark-on-success);
    --color-warning: var(--dark-warning);
    --color-on-warning: var(--dark-on-warning);
    --color-background: var(--dark-background);
    --color-on-background: var(--dark-on-background);
    --color-surface: var(--dark-surface);
    --color-on-surface: var(--dark-on-surface);
    --color-surface-secondary: var(--dark-surface-secondary);
    --color-surface-tertiary: var(--dark-surface-tertiary);
    --color-surface-elevated: var(--dark-surface-elevated);
    --color-on-surface-secondary: var(--dark-on-surface-secondary);
    --color-outline: var(--dark-outline);
    --color-outline-variant: var(--dark-outline-variant);
    --color-separator: var(--dark-separator);
    --color-fill: var(--dark-fill);
    --color-fill-secondary: var(--dark-fill-secondary);
    --color-label: var(--dark-label);
    --color-label-secondary: var(--dark-label-secondary);
    --color-label-tertiary: var(--dark-label-tertiary);
    --color-label-quaternary: var(--dark-label-quaternary);
    --color-placeholder: var(--dark-placeholder);
    --color-scrim: var(--dark-scrim);
  }

  @media (max-width: 980px) {
    .desktop-nav {
      display: none;
    }

    .header-inner {
      grid-template-columns: 1fr auto;
    }

    .hero {
      grid-template-columns: 1fr;
      min-height: auto;
      padding-top: var(--space-lg);
    }

    .round-brief {
      max-width: 620px;
    }

    .status-grid,
    .round-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-nav {
      position: fixed;
      inset: auto 0 0;
      z-index: 60;
      height: calc(64px + env(safe-area-inset-bottom, 0px));
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      border-top: 1px solid var(--color-separator);
      background: color-mix(in srgb, var(--color-background) 82%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
    }

    .mobile-nav-link {
      position: relative;
      min-width: 0;
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-xs);
      color: var(--color-on-surface-secondary);
      font-size: 10px;
      font-weight: 600;
      text-align: center;
      text-decoration: none;
    }

    .mobile-nav-link::before {
      content: "";
      position: absolute;
      inset: 7px 22% auto;
      height: 3px;
      border-radius: var(--radius-full);
      background: transparent;
    }

    .mobile-nav-link.is-active {
      color: var(--color-primary);
    }

    .mobile-nav-link.is-active::before {
      background: var(--color-primary);
    }

    .site-footer {
      margin-bottom: 64px;
    }
  }

  @media (max-width: 720px) {
    .page-shell {
      width: min(calc(100% - 24px), var(--page-width));
      padding-top: var(--space-xl);
    }

    .header-inner {
      width: min(calc(100% - 24px), var(--page-width));
    }

    .brand-name {
      font-size: 14px;
    }

    .theme-text {
      display: none;
    }

    .hero {
      gap: var(--space-xl);
      padding: var(--space-base) 0 var(--space-xl);
    }

    .hero h1,
    .page-header h1 {
      font-size: clamp(42px, 14vw, 64px);
      line-height: 0.96;
    }

    .page-header {
      padding: var(--space-base) 0 var(--space-xl);
    }

    .section {
      padding-top: var(--space-2xl);
    }

    .split-heading,
    .inline-heading {
      align-items: start;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .inline-heading {
      flex-direction: row;
      align-items: end;
    }

    .method-grid,
    .reference-grid,
    .metric-explainer,
    .status-grid,
    .round-card-grid {
      grid-template-columns: 1fr;
    }

    .method-step {
      min-height: 0;
      padding: var(--space-lg);
    }

    .rule-callout,
    .integrity-panel {
      grid-template-columns: 1fr;
      gap: var(--space-md);
      padding: var(--space-lg);
    }

    .scoreboard {
      gap: var(--space-sm);
      padding: var(--space-lg) var(--space-base);
    }

    .score {
      min-width: 52px;
    }

    .score strong {
      font-size: 22px;
    }

    .team strong {
      font-size: 18px;
    }

    .fixture-header {
      align-items: start;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .fixture-header > div {
      width: 100%;
      justify-content: space-between;
    }

    .round-link {
      max-width: 100%;
    }

    .picks-heading span {
      display: none;
    }

    .pick-strip {
      grid-auto-columns: minmax(210px, 76vw);
    }

    .stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bot-hero {
      align-items: start;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .bot-title-line {
      align-items: start;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .bot-title-line h1 {
      font-size: 44px;
    }

    .site-footer {
      width: min(calc(100% - 24px), var(--page-width));
      flex-direction: column;
      gap: var(--space-base);
    }

    .site-footer p {
      text-align: left;
    }

    .sample-banner {
      align-items: start;
      flex-direction: column;
      gap: 0;
      text-align: left;
    }
  }

  @media (max-width: 480px) {
    .brief-stats {
      grid-template-columns: 1fr 1fr;
    }

    .brief-stats div:last-child {
      grid-column: 1 / -1;
    }

    .round-meta {
      grid-template-columns: 1fr;
    }

    .odds-grid {
      justify-content: start;
    }

    .odds-grid div {
      min-width: 88px;
      flex-direction: column;
      gap: 0;
    }

    th,
    td {
      padding-right: var(--space-md);
      padding-left: var(--space-md);
    }
  }

  @media (hover: none) {
    .status-card:hover,
    .round-card:hover {
      transform: none;
      box-shadow: var(--shadow-0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media print {
    .site-header,
    .mobile-nav,
    .theme-toggle,
    .sample-banner {
      display: none !important;
    }

    .page-shell {
      width: 100%;
      padding: 0;
    }

    .fixture-card,
    .table-card {
      break-inside: avoid;
      box-shadow: none;
    }
  }
}