@layer skin {
  :root {
    color-scheme: light;
    --ink: #13243a;
    --ink-soft: #526174;
    --night: #071526;
    --night-soft: #102942;
    --paper: #f5f1e8;
    --paper-deep: #e9e2d5;
    --white: #fffdf8;
    --aqua: #86d8cd;
    --aqua-bright: #baf2e8;
    --brass: #cba85b;
    --brass-pale: #eadba8;
    --line: #c9c2b7;
    --alert: #8d3b2e;
    --alert-pale: #f4ded6;
  }

  body {
    color: var(--ink);
    background: var(--paper);
  }

  ::selection {
    color: var(--night);
    background: var(--aqua);
  }

  a {
    color: #174f5d;
  }

  a:hover,
  a:focus-visible {
    color: #0b313a;
  }

  a:focus-visible {
    outline: 0.18rem solid var(--brass);
    outline-offset: 0.18rem;
  }

  .site-header {
    color: var(--paper);
    background: var(--night);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .identity,
  .site-header a {
    color: var(--white);
  }

  .identity-mark {
    color: var(--night);
    background: var(--aqua-bright);
    border-radius: 50% 50% 42% 58% / 58% 44% 56% 42%;
  }

  .identity-subline,
  .header-note {
    color: #b8c4cf;
  }

  .topic-nav {
    background: #0c2035;
    box-shadow: 0 0.7rem 2rem rgba(3, 13, 25, 0.15);
  }

  .topic-nav a {
    color: #d9e5e6;
    border: 1px solid rgba(186, 242, 232, 0.16);
    border-radius: 999px;
  }

  .topic-nav a[aria-current="page"],
  .topic-nav a:hover,
  .topic-nav a:focus-visible {
    color: var(--night);
    background: var(--aqua-bright);
    border-color: var(--aqua-bright);
  }

  .hero,
  .page-hero-wrap {
    color: var(--white);
    background: var(--night);
  }

  .hero-copy {
    background:
      radial-gradient(circle at 6% 18%, rgba(134, 216, 205, 0.18), transparent 24rem),
      linear-gradient(135deg, var(--night) 0%, #0c2035 62%, #15334b 100%);
  }

  .hero-art,
  .page-hero-art {
    background:
      radial-gradient(circle at 58% 42%, rgba(186, 242, 232, 0.55) 0 8%, transparent 8.5%),
      repeating-radial-gradient(circle at 58% 42%, transparent 0 13%, rgba(203, 168, 91, 0.3) 13.5% 14%, transparent 14.5% 23%),
      linear-gradient(145deg, #173f54, #071526 74%);
  }

  .hero-art::after,
  .page-hero-art::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, 0.09));
    content: "";
  }

  .page-hero-art {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(186, 242, 232, 0.2);
    border-radius: 16rem 16rem 1.5rem 1.5rem;
  }

  .hero-art img,
  .page-hero-art img {
    position: relative;
    z-index: 1;
  }

  .hero-caption {
    z-index: 2;
    color: #d9e5e6;
    background: rgba(7, 21, 38, 0.84);
    border: 1px solid rgba(186, 242, 232, 0.2);
    backdrop-filter: blur(12px);
  }

  .eyebrow,
  .section-kicker,
  .card-label,
  .source-kind {
    color: #266575;
  }

  .hero .eyebrow,
  .page-hero .eyebrow {
    color: var(--aqua-bright);
  }

  .hero .lede,
  .page-hero .lede {
    color: #cbd5dc;
  }

  .mini-rule {
    background: linear-gradient(90deg, var(--aqua), var(--brass));
  }

  .hero-actions a:first-child {
    color: var(--night);
    background: var(--aqua-bright);
    border: 1px solid var(--aqua-bright);
  }

  .hero-actions a:last-child {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.42);
  }

  .hero-actions a,
  .question-band,
  .plain-card,
  .warning-card,
  .answer-card,
  .source-card,
  .price-card,
  .myth-card,
  .comparison-card,
  .art-break {
    border-radius: 0.9rem;
  }

  .signal-row {
    color: #dce6ea;
    background: #0c2035;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .signal + .signal {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .signal strong {
    color: var(--brass-pale);
  }

  .contents-rail {
    padding-top: 1rem;
    border-top: 0.18rem solid var(--brass);
  }

  .contents-rail a {
    color: var(--ink-soft);
  }

  .contents-rail a:hover,
  .contents-rail a:focus-visible {
    color: #174f5d;
  }

  .guide-section,
  .question-cluster {
    border-top: 1px solid var(--line);
  }

  .plain-card {
    background: var(--white);
    border-left: 0.35rem solid var(--aqua);
    box-shadow: 0 1rem 2.8rem rgba(45, 52, 55, 0.08);
  }

  .warning-card {
    color: #572118;
    background: var(--alert-pale);
    border-left: 0.35rem solid var(--alert);
  }

  .definition-pair article,
  .comparison-card,
  .answer-card,
  .price-card,
  .myth-card,
  .source-card {
    background: rgba(255, 253, 248, 0.7);
    border: 1px solid var(--line);
  }

  .definition-pair article {
    padding: 1.2rem;
    border-radius: 0.65rem;
  }

  .comparison-card:first-child {
    background: #e1f1ed;
    border-color: #8bbab3;
  }

  .comparison-card:nth-child(4) {
    background: #edf0e6;
  }

  .art-break {
    background: var(--night-soft);
    color: var(--white);
    box-shadow: 0 1rem 3rem rgba(7, 21, 38, 0.12);
  }

  .art-break img {
    background: linear-gradient(135deg, #17616d, #0c2035);
    border-radius: 0.55rem;
  }

  .art-break p {
    color: #cbd5dc;
  }

  .question-band {
    color: var(--night);
    background: var(--brass-pale);
  }

  .question-band a {
    color: var(--night);
  }

  .page-hero-wrap {
    background:
      radial-gradient(circle at 15% 80%, rgba(134, 216, 205, 0.12), transparent 24rem),
      var(--night);
  }

  .amount-questions li {
    color: #27515b;
    background: #dceeea;
    border-radius: 0.45rem;
  }

  .price-card strong {
    color: #174f5d;
  }

  .source-kind {
    color: #6e592c;
  }

  .quiet-note {
    color: var(--ink-soft);
  }

  .page-footer {
    color: #b8c4cf;
    background: var(--night);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .page-footer a {
    color: var(--aqua-bright);
  }

  @media (max-width: 620px) {
    .signal + .signal {
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-left: 0;
    }
  }
}