:root {
  color-scheme: light dark;
  --bg: #f6f3ee;
  --surface: #fffaf2;
  --surface-strong: #ffffff;
  --text: #181713;
  --muted: #69645b;
  --line: #ded7ca;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --shadow: 0 18px 60px rgba(24, 23, 19, .11);
}
[data-theme="dark"] {
  --bg: #111211;
  --surface: #191b1a;
  --surface-strong: #202321;
  --text: #f3efe7;
  --muted: #b8b0a4;
  --line: #343732;
  --accent: #5eead4;
  --accent-strong: #99f6e4;
  --shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #111211;
    --surface: #191b1a;
    --surface-strong: #202321;
    --text: #f3efe7;
    --muted: #b8b0a4;
    --line: #343732;
    --accent: #5eead4;
    --accent-strong: #99f6e4;
    --shadow: 0 18px 60px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
a { color: inherit; }
button, input, select { font: inherit; }
button, .actions a, .card-actions a, .source-actions a {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  border-radius: 8px;
  padding: .65rem .9rem;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .actions a:hover, .card-actions a:hover, .source-actions a:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}
.brand { font-weight: 800; text-decoration: none; letter-spacing: 0; }
.topbar, .site-hero nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px);
}
.theme-toggle {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  padding: 0;
}
.site-hero {
  min-height: 42vh;
  display: grid;
  align-content: space-between;
  gap: clamp(2rem, 6vw, 5rem);
  padding: 1.2rem clamp(1rem, 5vw, 5rem) 3rem;
  border-bottom: 1px solid var(--line);
}
.site-hero h1 {
  max-width: 840px;
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 5.8rem);
  line-height: .98;
}
.site-hero p:not(.eyebrow) {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
}
.eyebrow {
  margin: 0 0 .55rem;
  color: var(--accent-strong);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.index-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 4rem;
}
.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.toolbar label {
  display: grid;
  gap: .35rem;
  color: var(--muted);
  font-weight: 700;
}
.toolbar input, .toolbar select {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  padding: .65rem .85rem;
}
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.analysis-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-strong);
  overflow: hidden;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  font-size: 3rem;
  font-weight: 900;
}
.card-body { padding: 1.15rem; }
.card-body h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}
.card-body h2 a { text-decoration: none; }
.card-body p { color: var(--muted); }
.card-actions, .actions, .source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.analysis-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 820px);
  gap: clamp(1rem, 4vw, 4rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 5rem;
}
.toc-panel {
  position: sticky;
  top: 5rem;
  align-self: start;
  max-height: calc(100vh - 6rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 1rem;
}
.toc-mobile-toggle { display: none; }
.panel-title { margin-bottom: .75rem; font-weight: 850; }
.toc-panel nav { display: grid; gap: .5rem; }
.toc-panel a { color: var(--muted); text-decoration: none; }
.toc-panel a:hover { color: var(--accent-strong); }
.toc-panel a.is-active {
  color: var(--accent-strong);
  font-weight: 800;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.toc-l2 { padding-left: .75rem; }
.toc-l3 { padding-left: 1.5rem; font-size: .92rem; }
.reader { min-width: 0; }
.reader-head {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.reader-head h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.05;
}
.summary {
  max-width: 70ch;
  color: var(--muted);
  font-size: 1.1rem;
}
.content {
  padding: 2rem 0;
  font-size: 1.05rem;
}
.tlnr-callout {
  margin: 0 0 2rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-left: .45rem solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong));
  box-shadow: var(--shadow);
}
.tlnr-callout h2 {
  margin-top: 0;
  display: grid;
  gap: .2rem;
  color: var(--accent-strong);
}
.tlnr-callout h2 span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tlnr-callout p,
.tlnr-callout li {
  max-width: 76ch;
  font-size: 1.08rem;
}
.tlnr-callout ul {
  margin-bottom: 0;
  padding-left: 1.3rem;
}
.content h1, .content h2, .content h3 {
  margin-top: 2rem;
  line-height: 1.2;
  scroll-margin-top: 6rem;
}
.content p, .content li { max-width: 72ch; }
.content img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.content blockquote {
  margin: 1.5rem 0;
  padding: .1rem 1.2rem;
  border-left: 4px solid var(--accent);
  color: var(--muted);
}
.content hr {
  max-width: 72ch;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.content pre {
  overflow: auto;
  padding: 1rem;
  border-radius: 8px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}
.content code {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .12rem .3rem;
}
.sources-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.sources-section h2 { margin: 0 0 1rem; }
.sources-grid { display: grid; gap: .85rem; }
.source-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: .75rem;
}
.source-thumb, .source-icon {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}
.source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.source-icon {
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  font-weight: 900;
  text-decoration: none;
}
.source-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
}
.source-card p, .muted { color: var(--muted); }
.empty { color: var(--muted); }
@media (max-width: 800px) {
  .toolbar, .analysis-layout { grid-template-columns: 1fr; }
  .analysis-grid { grid-template-columns: 1fr; }
  .toc-mobile-toggle {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 30;
    display: block;
    transform: translateX(-50%);
    box-shadow: var(--shadow);
  }
  .toc-panel {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 4.6rem;
    top: auto;
    z-index: 29;
    max-height: min(60vh, 28rem);
    transform: translateY(1rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: var(--shadow);
  }
  .toc-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .source-card { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (min-width: 801px) and (max-width: 1080px) {
  .analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}