:root { --bg: #fff; --fg: #111; --muted:#6a6a6a; --line:#eaeaea; --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.06); }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; }
body{ font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto; color:var(--fg); background:var(--bg); line-height:1.6; }
a{ color:inherit; text-decoration:none; }
.section{ padding:72px 20px; }
.section-header{ max-width:980px; margin:0 auto 24px; }
.section-header h2{ margin:0 0 8px; font-size:clamp(24px,3vw,36px); }
.lead{ color:var(--muted); max-width:800px }
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:12px 16px; }
.brand{ font-weight:800; display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; width:44px; height:36px; border:1px solid var(--line); border-radius:10px; background:#fff; align-items:center; justify-content:center; gap:4px; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--fg); }
.site-nav ul{ display:flex; gap:14px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.site-nav a{ padding:8px 10px; border-radius:8px; }
.site-nav a.active, .site-nav a:hover{ background:#f4f4f4; }
.hero{ padding:96px 20px 64px; border-bottom:1px solid var(--line); }
.hero-inner{ max-width:980px; margin:0 auto; }
.hero h1{ font-size:clamp(28px,5vw,48px); margin:0 0 8px; }
.hero-actions{ display:flex; gap:12px; margin-top:16px; }
.btn{ display:inline-block; padding:12px 18px; border-radius:12px; background:#111; color:#fff; transition:transform .15s ease, box-shadow .2s ease; box-shadow: var(--shadow); }
.btn:hover{ transform:translateY(-1px) }
.btn.ghost{ background:#fff; color:#111; border:1px solid var(--line); }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; max-width:1100px; margin:0 auto; }
.cards .card{ grid-column: span 12; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
@media (min-width:720px){ .cards .card{ grid-column: span 4; } }
.bullets{ margin:8px 0 0 18px }
.accordion{ max-width:1100px; margin:16px auto 0; border:1px solid var(--line); border-radius:12px; padding:10px 14px; background:#fff; }
.checklist,.steps{ margin:10px 0 0 18px }
.protocols .mono{ font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.glossary-search{ max-width:900px; margin:0 auto 12px; }
.glossary-search input{ width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; font-size:16px; }
.glossary-list{ max-width:900px; margin:0 auto; list-style:none; padding:0; }
.glossary-list li{ padding:14px 12px; border-bottom:1px dashed var(--line); }
.timeline{ max-width:900px; margin:0 auto; list-style:none; padding:0; position:relative; }
.timeline li{ padding:12px 0 12px 18px; border-left:2px solid var(--line); position:relative; }
.timeline li::before{ content:""; position:absolute; left:-6px; top:20px; width:10px; height:10px; border-radius:50%; background:#111; }
.quiz{ max-width:900px; margin:0 auto; border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff; box-shadow:var(--shadow); }
.quiz .q{ margin-bottom:14px; font-weight:600; }
.quiz .opts{ display:grid; gap:8px; }
.quiz button{ margin-top:12px; }
.resources{ max-width:900px; margin:0 auto; padding-left:16px; }
.site-footer{ padding:28px 16px; border-top:1px solid var(--line); color:var(--muted); text-align:center; }
.reveal{ opacity:0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (max-width:980px){
  .nav-toggle{ display:flex; }
  .site-nav{ position:fixed; top:60px; right:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:var(--shadow); display:none; }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; }
}
:focus-visible{ outline:2px solid #111; outline-offset:3px; border-radius:6px; }