:root {
  --bg: #0d0c0c;
  --bg-elevated: #141312;
  --bg-card: #1b1816;
  --parchment: #e8dccc;
  --parchment-muted: #a89f94;
  --oxblood: #7a1f2a;
  --oxblood-bright: #a32d3a;
  --accent: #c9a86c;
  --accent-dim: #8c7b5f;
  --border: #2d2826;
  --radius: 0.25rem;
  --max-width: 80ch;
  --font-body: "Georgia", "Times New Roman", serif;
  --font-display: "Georgia", "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--parchment);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a:hover,
a:focus {
  color: var(--accent);
  text-decoration-color: var(--oxblood-bright);
}

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

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  background: var(--bg);
  color: var(--accent);
  padding: 0.5rem 1rem;
  z-index: 100;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 12, 12, 0.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(4px);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  color: var(--accent);
}

.brand-title {
  line-height: 1.2;
}

.brand-sub {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: var(--parchment-muted);
  text-transform: uppercase;
}

.menu-toggle {
  min-height:44px;
  min-width:44px;
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--parchment);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.main-nav a {
  color: var(--parchment-muted);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.main-nav a[aria-current="page"],
.main-nav a:hover,
.main-nav a:focus {
  color: var(--accent);
  border-bottom-color: var(--oxblood-bright);
}

@media (max-width: 700px) {
  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
  }

  .main-nav.open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
}

main {
  min-height: 60vh;
}

.hero {
  padding: 3rem 1rem 2.5rem;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(20, 19, 18, 0) 0%, var(--bg) 100%),
    radial-gradient(circle at 70% 20%, rgba(122, 31, 42, 0.18) 0%, transparent 45%);
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero-kicker {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood-bright);
  margin: 0 0 0.75rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--parchment);
  font-weight: 400;
}

.hero h1 em {
  color: var(--accent);
  font-style: normal;
}

.hero p {
  max-width: 55ch;
  margin: 0 0 1.5rem;
  color: var(--parchment-muted);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.btn:focus {
  background: var(--oxblood);
  border-color: var(--oxblood-bright);
  color: var(--parchment);
}

.btn-primary {
  background: var(--oxblood);
  border-color: var(--oxblood-bright);
}

.breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--parchment-muted);
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--accent-dim);
}

.breadcrumb a {
  color: var(--parchment-muted);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: var(--accent);
  text-decoration: underline;
}

.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
}

.content h2,
.content h3,
.content h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--parchment);
}

.content h2 {
  font-size: 1.65rem;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.content h3 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--accent);
}

.content p,
.content ul,
.content ol {
  margin: 0 0 1rem;
}

.content ul,
.content ol {
  padding-left: 1.5rem;
}

.content li {
  margin-bottom: 0.35rem;
}

.lead {
  font-size: 1.1rem;
  color: var(--parchment-muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.card p {
  margin: 0;
  color: var(--parchment-muted);
  font-size: 0.95rem;
}

.card .meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.card-link {
  margin-top: auto;
  padding-top: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--accent);
}

.card-link:hover,
.card-link:focus {
  text-decoration: underline;
}

.puzzle-entry {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.puzzle-entry h3 {
  margin: 0 0 0.5rem;
}

.puzzle-entry .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment-muted);
}

.spoiler-tier {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
}

.spoiler-tier summary {
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.spoiler-tier summary::before {
  content: "▸";
  color: var(--oxblood-bright);
}

.spoiler-tier[open] summary::before {
  content: "▾";
}

.spoiler-tier summary:hover {
  background: var(--bg-card);
}

.spoiler-tier .tier-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--border);
}

.checklist-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.checklist li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.checklist input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--oxblood-bright);
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

.checklist label {
  cursor: pointer;
  font-size: 0.95rem;
}

.checklist .count {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--parchment-muted);
  margin-top: 0.15rem;
}

.search-box {
  width: 100%;
  max-width: 28rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 1rem;
}

.search-box:focus {
  outline: 2px solid var(--oxblood-bright);
  outline-offset: 2px;
}

.disclaimer {
  border-left: 3px solid var(--oxblood-bright);
  background: var(--bg-card);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.disclaimer p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--parchment-muted);
}

.sources-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.sources-list li {
  margin-bottom: 0.6rem;
}

.sources-list a {
  font-family: var(--font-ui);
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1rem;
  margin-top: 3rem;
  background: var(--bg-elevated);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
  color: var(--accent);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.35rem;
}

.footer-col a {
  color: var(--parchment-muted);
  text-decoration: none;
}

.footer-col a:hover,
.footer-col a:focus {
  color: var(--accent);
  text-decoration: underline;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--parchment-muted);
  font-size: 0.8rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Editorial refinements over the initial Claude visual direction. */
[hidden] { display:none !important; }
:root { --parchment-muted:#b8ada0; }
.header-inner,.footer-inner,.footer-bottom,.hero-inner,.content.wide {max-width:1120px;}
.header-inner{justify-content:space-between;gap:2rem;min-height:84px;}
.brand{flex-shrink:0;}
.brand-sub{white-space:nowrap;}
.main-nav a{display:inline-block;padding:0.55rem 0;}
.hero{padding:4.5rem 1.5rem 4rem;}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;}
.hero h1{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.06;}
.hero .hero-kicker,.eyebrow{color:var(--accent);font-family:var(--font-ui);font-size:.72rem;letter-spacing:.15em;}
.hero .hero-note{font-family:var(--font-ui);font-size:.75rem;margin:1.4rem 0 0;}
.box-art{color:var(--accent);display:grid;place-items:center;opacity:.8;}
.box-art svg{width:100%;max-width:360px;filter:drop-shadow(0 0 24px #7a1f2a);stroke-width:1;}
.box-art span{font: .65rem var(--font-ui);letter-spacing:.24em;margin-top:1rem;}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.5rem;}
.section-heading h2{border:0;margin:0 0 1rem;}
.guide-rows{border-top:1px solid var(--border);margin-bottom:2.5rem;}
.guide-row{display:grid;grid-template-columns:2.5rem 1fr 1.5rem;gap:1rem;align-items:center;border-bottom:1px solid var(--border);padding:1.25rem 0;text-decoration:none;}
.guide-row:hover{background:var(--bg-elevated);}
.guide-row strong{font-size:1.15rem;font-weight:400;}
.guide-row small{display:block;color:var(--parchment-muted);font-size:.9rem;margin-top:.3rem;}
.row-number{font: .75rem var(--font-ui);color:var(--accent);}
.page-meta{font: .75rem/1.6 var(--font-ui);color:var(--parchment-muted);}
.source-badge{font:.75rem var(--font-ui);color:var(--accent);border-left:2px solid var(--oxblood-bright);padding-left:.75rem;}
.source-panel{border-top:1px solid var(--border);margin-top:3rem;padding-top:1rem;color:var(--parchment-muted);font-size:.87rem;}
.source-panel h2{font-size:1rem;border:0;}
.source-panel li{margin-bottom:.5rem;}
.facts-strip{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--border);font:.8rem/1.8 var(--font-ui);color:var(--parchment-muted);}
.facts-strip strong{display:block;color:var(--parchment);font-weight:500;}
.footer-col h2{font-size:.95rem;color:var(--accent);margin:0 0 .6rem;}
.checklist-controls{display:flex;flex-wrap:wrap;gap:.65rem;}
.checklist-controls p{flex-basis:100%;font-size:.8rem;color:var(--parchment-muted);}
.import-label{position:relative;overflow:hidden;}
.import-label input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;}
.import-label:focus-within{outline:2px solid var(--accent);outline-offset:3px;}
.table-wrap{overflow-x:auto;margin:2rem 0;}
.crafting-table{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:.85rem;}
.crafting-table caption{text-align:left;margin-bottom:1rem;color:var(--accent);}
.crafting-table th,.crafting-table td{padding:1rem .5rem;border-bottom:1px solid var(--border);text-align:left;}
.crafting-table input,.checklist input{width:20px;height:20px;accent-color:var(--oxblood-bright);cursor:pointer;}
.fact-list{display:grid;grid-template-columns:8rem 1fr;gap:.7rem;}
.fact-list dt{color:var(--accent);}
.fact-list dd{margin:0;}
.answer{font-size:1.15rem;}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
@media(max-width:900px){.header-inner{gap:1rem;}.main-nav ul{font-size:.73rem;gap:.5rem .9rem;}.hero-grid{gap:1rem;}.box-art svg{max-width:270px;}}
@media(max-width:700px){
 .header-inner{flex-wrap:wrap;min-height:72px;}
 .main-nav{display:block;position:static;flex-basis:100%;padding:.5rem 0;border:0;}
 .js .main-nav{display:none;position:absolute;top:100%;padding:1rem 1.5rem;background:var(--bg);border-bottom:1px solid var(--border);}
 .js .main-nav.open{display:block;}
 .main-nav ul{font-size:.85rem;}
 .main-nav a{padding:.65rem 0;}
 .hero{padding:2.5rem 1.25rem;}.hero-grid{grid-template-columns:1fr;}
 .box-art{display:none;}.section-heading{display:block;}.section-heading .eyebrow{display:block;margin-bottom:1rem;}
 .facts-strip{grid-template-columns:1fr;gap:1rem;}
 .fact-list{grid-template-columns:1fr;gap:.25rem;}.fact-list dd{margin-bottom:.75rem;}
 .content h1{font-size:2.2rem;overflow-wrap:anywhere;}
 .crafting-table th,.crafting-table td{padding:.8rem .3rem;}
 .guide-row{grid-template-columns:1.6rem 1fr 1rem;gap:.5rem;}
}
@media print{.site-header,.site-footer,.hero-actions,.js-control{display:none!important;}body{background:white;color:black;}a{color:black;}details>*{display:block;}.content{max-width:none;}}

.breadcrumb{max-width:1120px;}

/* A field guide first: visible journeys, image provenance and readable sections. */
.header-inner{flex-wrap:wrap;gap:.6rem 1.5rem;padding-top:1rem;padding-bottom:.7rem;}
.main-nav{order:3;flex-basis:100%;}
.main-nav ul{justify-content:flex-start;gap:1.7rem;}
.language-switch{margin-left:auto;display:flex;gap:.8rem;font:.72rem var(--font-ui);}
.language-switch a{padding:.6rem .1rem;text-decoration:none;}
.language-switch [aria-current]{color:var(--accent);text-decoration:underline;text-underline-offset:.35rem;}
.hero{padding-top:3rem;}
.hero-grid{grid-template-columns:1.1fr 1.1fr;gap:2.8rem;}
.hero-game-name{display:block;font:.8rem/1.8 var(--font-ui);letter-spacing:.09em;color:var(--accent);margin-bottom:1rem;}
.hero-art{margin:0;}
.hero-art img{width:100%;height:auto;display:block;border:1px solid var(--border);}
figcaption{font:.7rem/1.6 var(--font-ui);color:var(--parchment-muted);margin-top:.55rem;}
.journey-links{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--border);font:.85rem/1.7 var(--font-ui);}
.journey-links span{color:var(--accent);flex-basis:100%;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;}
.page-toc{margin:1.6rem 0 2.4rem;padding:1rem 0;border-block:1px solid var(--border);font:.82rem/1.8 var(--font-ui);}
.page-toc strong{font-weight:500;color:var(--accent);}
.page-toc ul{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;list-style:none;margin:.5rem 0 0;padding:0;}
.content h2{scroll-margin-top:8rem;}
.next-step{margin:2rem 0;padding:1.25rem;background:var(--bg-elevated);border:1px solid var(--border);}
.next-step h2{margin-top:0;font-size:1.2rem;border:0;}
.next-step p:last-child{margin-bottom:0;}
.game-media{margin:2rem 0;}
.game-media img{width:100%;height:auto;display:block;background:var(--bg-elevated);border:1px solid var(--border);}
@media(max-width:900px){.hero-grid{gap:1.5rem;}.main-nav ul{gap:.45rem 1.3rem;}}
@media(max-width:700px){.header-inner{padding-block:.6rem;}.language-switch{margin-left:auto;}.hero-grid{grid-template-columns:1fr;}.hero-art{max-width:560px;}.hero-art img{aspect-ratio:3/2;object-fit:cover;}.hero h1{font-size:2.6rem;}.hero-game-name{font-size:.7rem;}.js .main-nav{left:0;width:100%;box-sizing:border-box;}.main-nav ul{gap:.35rem;}.page-toc ul{display:block;}.page-toc li{padding:.2rem 0;}.content h2{scroll-margin-top:6rem;}.journey-links{gap:.7rem 1rem;}.hero-actions .btn{flex:1 1 10rem;}}

.hero h1{font-size:clamp(2.6rem,4.2vw,3.65rem);}

@media(max-width:700px){.language-switch{order:4;flex-basis:100%;margin:0;gap:1.1rem;}.menu-toggle{margin-left:auto;}.language-switch a{min-height:44px;display:flex;align-items:center;padding:.4rem .1rem;}.header-inner{gap:.3rem 1rem;}.content h2{scroll-margin-top:9rem;}}

/* Player tasks and real media form the landing page's main rhythm. */
.landing-content { max-width:1160px; }
.landing-content>section { margin-block:3.5rem; }
.landing-content .return-section { margin-top:2rem; }
.landing-intro { max-width:72ch; color:var(--parchment-muted); }
.scope-note { color:var(--parchment-muted); font-size:.9rem; }
.video-teasers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.7rem; border-top:1px solid var(--border); padding-top:1.5rem; }
.video-teasers>a { display:flex; flex-direction:column; gap:.75rem; text-decoration:none; }
.video-teasers strong { font-family:var(--font-display); font-size:1.4rem; line-height:1.25; }
.video-teasers small { color:var(--parchment-muted); }
.video-teasers .card-link { margin-top:auto; }
.completion-feature { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:2.5rem; }
.completion-feature .game-media { margin:0; }
.completion-feature h2 { font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.2; margin:.75rem 0; }
.answer-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.answer-columns h3 { line-height:1.3; }
.guide-toolbar { padding-block:0; margin-bottom:1rem; }
.video-guide { padding-block:2rem; border-top:1px solid var(--border); scroll-margin-top:10rem; }
.video-guide h2 { margin-top:.5rem; }
.video-disclosure summary { cursor:pointer; padding:1rem; border:1px solid var(--border); }
.video-frame { position:relative; aspect-ratio:16/9; background:var(--bg-elevated); margin-top:1rem; }
.video-frame img { width:100%; height:100%; object-fit:contain; }
.video-frame button { position:absolute; inset:auto 1rem 1rem; }
.video-frame iframe { width:100%; height:100%; border:0; }
.upload-title { color:var(--parchment-muted); font: .8rem/1.5 var(--font-ui); }
.analytics-consent { position:fixed; z-index:80; bottom:1rem; right:1rem; max-width:32rem; padding:1.25rem; border:1px solid var(--accent-dim); background:var(--bg-elevated); font:.85rem/1.55 var(--font-ui); box-shadow:0 8px 32px #0008; }
.analytics-consent p { margin:.75rem 0; }
.analytics-consent-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.analytics-status:not([hidden]) { font:.8rem var(--font-ui); padding:.75rem 1rem; border-top:1px solid var(--border); }
@media(max-width:760px) { .video-teasers,.completion-feature,.answer-columns { grid-template-columns:1fr; gap:1.5rem; } .video-teasers>a { padding-bottom:1.2rem; border-bottom:1px solid var(--border); } .landing-content>section { margin-block:2.5rem; } .analytics-consent { inset:auto .75rem .75rem; max-width:none; } }

.video-teasers img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--border); }