:root {
  color-scheme: light;
  --warm-white: #f6f3ea;
  --paper: #fffefa;
  --ink: #17362d;
  --muted: #718279;
  --green: #196747;
  --green-dark: #104530;
  --mint: #e7f2e7;
  --line: #dce6db;
  --content-max: 750px;
  --page-gutter: clamp(18px, 6.13vw, 46px);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--warm-white); }

body {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 12px;
  left: 12px;
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--green-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-180%);
}

.skip-link:focus-visible { transform: translateY(0); outline: 4px solid #9bc9a6; outline-offset: 3px; }

.fit-shell { width: 100%; min-height: 100vh; overflow-x: clip; }

.artboard {
  width: 100%;
  max-width: var(--content-max);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(48px, 13.33vw, 100px) var(--page-gutter) clamp(52px, 12.27vw, 92px);
  background: var(--warm-white);
}

.page-header { position: relative; }
.eyebrow { margin: 0 0 clamp(10px, 2vw, 15px); color: var(--green); font-size: clamp(16px, 3.6vw, 27px); font-weight: 760; letter-spacing: .08em; }
h1 { margin: 0; font-family: Georgia, "Songti SC", "STSong", serif; font-size: clamp(42px, 11.2vw, 84px); font-weight: 600; letter-spacing: -.065em; line-height: 1.05; text-wrap: balance; }
h1, h2, h3 { scroll-margin-top: 16px; }

.date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; margin-top: clamp(23px, 4.93vw, 37px); color: var(--muted); font-size: clamp(15px, 3.73vw, 28px); font-weight: 600; }
.ai-pill { margin-left: auto; padding: clamp(7px, 1.47vw, 11px) clamp(12px, 2.53vw, 19px); border-radius: 999px; background: #d9eddb; color: var(--green); font-size: clamp(14px, 3.07vw, 23px); font-weight: 780; letter-spacing: .02em; }

.recommendation-card { margin-top: clamp(38px, 8.27vw, 62px); padding: clamp(25px, 6vw, 45px) clamp(22px, 6.13vw, 46px) clamp(28px, 6.67vw, 50px); border-radius: clamp(28px, 6.4vw, 48px); background: var(--paper); box-shadow: 0 18px 45px rgba(28, 67, 49, .08); }
.card-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: clamp(20px, 4.27vw, 32px); border-bottom: 2px solid var(--line); }
.card-heading h2 { margin: 0; overflow-wrap: anywhere; font-family: Georgia, "Songti SC", "STSong", serif; font-size: clamp(19px, 4.13vw, 31px); font-weight: 600; text-wrap: balance; }
.card-heading span { color: var(--muted); font-size: clamp(14px, 3.07vw, 23px); font-variant-numeric: tabular-nums; }
.recommendation-content { min-height: 200px; }
.loading { margin: clamp(42px, 8.53vw, 64px) 0; color: var(--muted); font-size: clamp(18px, 3.87vw, 29px); text-align: center; }

.item { min-width: 0; padding: clamp(27px, 5.07vw, 38px) 0 clamp(30px, 5.87vw, 44px); }
.item + .item { border-top: 2px solid var(--line); }
.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; min-width: 0; color: var(--muted); font-size: clamp(13px, 2.93vw, 22px); font-weight: 670; font-variant-numeric: tabular-nums; line-height: 1.3; }
.item-meta .dimension { color: var(--green); }
.item-meta .sequence { margin-left: auto; color: var(--green); font-weight: 800; }
.item h3 { margin: clamp(16px, 2.93vw, 22px) 0 clamp(18px, 3.33vw, 25px); overflow-wrap: anywhere; font-family: Georgia, "Songti SC", "STSong", serif; font-size: clamp(28px, 6.13vw, 46px); font-weight: 600; letter-spacing: -.045em; line-height: 1.16; text-wrap: balance; }
.learning { padding: clamp(18px, 3.33vw, 25px) clamp(18px, 3.6vw, 27px); border-radius: clamp(18px, 3.33vw, 25px); background: var(--mint); }
.learning p { margin: 0; overflow-wrap: anywhere; font-size: clamp(16px, 3.2vw, 24px); line-height: 1.58; }
.learning p + p { margin-top: 13px; }
.learning strong { color: var(--green-dark); }
.verification { display: flex; min-width: 0; align-items: center; gap: 10px; margin: clamp(18px, 3.33vw, 25px) 0; overflow-wrap: anywhere; color: var(--muted); font-size: clamp(14px, 2.93vw, 22px); font-weight: 650; }
.verification::before { width: 13px; height: 13px; border-radius: 50%; background: var(--green); content: ""; }
.watch-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: clamp(52px, 10.4vw, 78px); padding: 0 clamp(18px, 3.47vw, 26px) 0 clamp(20px, 4vw, 30px); border-radius: clamp(16px, 2.93vw, 22px); background: var(--green-dark); color: white; font-size: clamp(17px, 3.6vw, 27px); font-weight: 780; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: rgba(155, 201, 166, .35); }
.watch-link:focus-visible { outline: 5px solid #9bc9a6; outline-offset: 5px; }
.watch-link:hover { background: #0b3828; }
.watch-link:active { background: #082d21; }
.watch-link svg { width: clamp(20px, 3.73vw, 28px); height: clamp(20px, 3.73vw, 28px); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }

.empty { padding: clamp(35px, 6.4vw, 48px) 5px 20px; text-align: center; }
.empty h3 { margin: 0; overflow-wrap: anywhere; font-family: Georgia, "Songti SC", "STSong", serif; font-size: clamp(26px, 5.73vw, 43px); line-height: 1.2; text-wrap: balance; }
.empty p { margin: clamp(16px, 2.93vw, 22px) auto 0; max-width: 500px; overflow-wrap: anywhere; color: var(--muted); font-size: clamp(16px, 3.33vw, 25px); line-height: 1.6; }
.empty .status-date { color: var(--green); font-weight: 760; }
.gap-note { margin: 18px auto 0; max-width: 560px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f6f2e8; text-align: left; }
.gap-note h3 { margin: 0 0 8px; font-size: 0.95rem; }
.gap-note ul { margin: 0; padding-left: 1.2em; }
.gap-note li + li { margin-top: 6px; }

@supports (padding: max(0px, env(safe-area-inset-top))) {
  .artboard {
    padding-top: max(clamp(48px, 13.33vw, 100px), env(safe-area-inset-top));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right));
    padding-bottom: max(clamp(52px, 12.27vw, 92px), env(safe-area-inset-bottom));
    padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }