:root { --ink:#ecf2ff; --muted:#b8c3dd; --space:#070b18; --space-2:#0f1730; --panel:rgba(17,25,52,.84); --line:rgba(187,207,255,.18); --sun:#ffbc4a; --sun-2:#ff6f3c; --aqua:#7cdde7; --danger:#ff7c7c; --good:#79ddb1; --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"Avenir Next", "Gill Sans", sans-serif; background:radial-gradient(circle at 72% -8%, #243b71 0, transparent 26%), linear-gradient(135deg,#060914,#111b38 54%,#0b1023); overflow-x:hidden; }
button, input, select { font:inherit; }
.starfield { position:fixed; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#fff 1px,transparent 1.5px); background-size:80px 80px,130px 130px; background-position:10px 20px,40px 60px; }
.site-shell { width:min(1180px,calc(100% - 2rem)); margin:auto; padding:1rem 0 4rem; position:relative; }
.top-nav { position:sticky; top:.65rem; z-index:10; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; padding:.7rem; border:1px solid var(--line); border-radius:18px; background:rgba(7,11,24,.78); backdrop-filter:blur(18px); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.nav-item,.choice { color:var(--muted); cursor:pointer; border:1px solid transparent; background:transparent; border-radius:999px; padding:.62rem .8rem; font-size:.82rem; font-weight:750; transition:.18s ease; }
.nav-item:hover,.choice:hover { color:#fff; border-color:var(--line); transform:translateY(-1px); }
.nav-item.active,.choice.active { color:#07101c; background:var(--aqua); }
.lesson-pane { display:none; }
.lesson-pane.active { display:block; animation:enter .45s ease both; }
.hero.lesson-pane.active { display:grid; }
.hero { min-height:640px; grid-template-columns:1fr 1.05fr; align-items:stretch; margin-top:1rem; overflow:hidden; position:relative; border-radius:32px; border:1px solid var(--line); background:#091124; box-shadow:0 26px 60px rgba(0,0,0,.32); }
.hero-copy { z-index:1; padding:clamp(2rem,6vw,5.5rem); display:flex; flex-direction:column; justify-content:center; background:linear-gradient(90deg,rgba(7,11,24,.98),rgba(7,11,24,.72),transparent); }
.hero-image { position:absolute; inset:0 0 0 32%; width:68%; height:100%; object-fit:cover; object-position:center; }
.kicker { margin:0 0 .8rem; color:var(--aqua); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:800; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; }
h1 { margin:0; font-size:clamp(3.5rem,7vw,6.5rem); line-height:.84; letter-spacing:-.06em; }
h1 em { color:var(--sun); font-weight:normal; }
.lead { max-width:47ch; line-height:1.7; color:var(--muted); font-size:1.05rem; }
.hero-actions,.button-group,.quiz-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.button { cursor:pointer; border:none; border-radius:999px; padding:.85rem 1.15rem; font-weight:800; transition:transform .18s ease,box-shadow .18s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.28); }
.primary { background:linear-gradient(135deg,var(--sun),var(--sun-2)); color:#241006; }.quiet { background:rgba(255,255,255,.08); color:var(--ink); border:1px solid var(--line); }
.fact-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:2rem; max-width:480px; }.fact-row div { padding:.65rem; border-left:1px solid rgba(255,255,255,.25); }.fact-row strong,.fact-row span { display:block; }.fact-row strong { color:var(--sun); font-size:1.1rem; }.fact-row span { color:var(--muted); font-size:.72rem; line-height:1.3; }
.topic-card,.summary,.quiz { margin-top:1rem; padding:clamp(1.2rem,3vw,2.5rem); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(21,32,65,.9),rgba(9,14,31,.94)); box-shadow:0 22px 45px rgba(0,0,0,.22); }
.topic-heading { display:flex; justify-content:space-between; gap:1rem; align-items:start; border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:1.5rem; }.topic-index { margin:0 0 .3rem; color:var(--sun); font-size:.8rem; font-weight:800; letter-spacing:.14em; }.topic-heading h2,.summary h2,.quiz h2 { margin:0; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.04em; }.topic-tag { margin:0; color:var(--aqua); font-size:.76rem; text-transform:uppercase; letter-spacing:.11em; }
.topic-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); gap:2rem; align-items:center; }.topic-layout.reverse { grid-template-columns:minmax(320px,.9fr) minmax(0,1fr); }.reverse .topic-copy { order:2; }.reverse .lesson-visual { order:1; }
.topic-copy > p,.summary-copy > p { color:var(--muted); line-height:1.75; }
.key-idea { margin:1.2rem 0; padding:1rem; border-left:4px solid var(--sun); border-radius:0 13px 13px 0; background:rgba(255,188,74,.09); line-height:1.6; }.key-idea strong { color:var(--sun); }.key-idea span { color:#fff; font-weight:700; }
.lesson-visual,.summary-visual { margin:0; padding:1rem; border-radius:20px; background:radial-gradient(circle at 50% 20%,rgba(111,155,255,.13),transparent 55%),rgba(3,7,19,.55); border:1px solid rgba(196,218,255,.14); }.lesson-visual img,.summary-visual img { width:100%; max-height:440px; object-fit:contain; }.lesson-visual figcaption { color:var(--muted); font-size:.8rem; line-height:1.4; text-align:center; margin-top:.8rem; }
.interaction { padding:1rem; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.17); }.interaction-title { color:var(--aqua); font-weight:800; margin:0 0 .7rem; }.output-box { min-height:65px; margin-top:.8rem; padding:.85rem; border-radius:12px; background:rgba(255,255,255,.06); color:var(--muted); line-height:1.5; }.output-box strong { color:#fff; }
input[type=range] { width:100%; accent-color:var(--sun); cursor:pointer; }.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; margin-top:.35rem; }.choice { border-color:var(--line); background:rgba(255,255,255,.05); }.safety-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }.safety-card { min-height:110px; padding:.75rem; cursor:pointer; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.05); }.safety-card:hover { border-color:var(--aqua); }.safety-card strong,.safety-card span { display:block; }.safety-card span { margin-top:.55rem; color:var(--aqua); font-size:.76rem; }.safety-card.correct { border-color:var(--good); background:rgba(121,221,177,.12); }.safety-card.incorrect { border-color:var(--danger); background:rgba(255,124,124,.12); }
.summary { display:grid; grid-template-columns:1.2fr .8fr; gap:1.5rem; align-items:center; background:linear-gradient(135deg,rgba(247,157,57,.22),rgba(15,28,63,.94) 56%); }.summary-copy { max-width:67ch; }
.quiz-intro { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; }.quiz-intro img { width:170px; max-height:120px; object-fit:contain; }.quiz-intro p { color:var(--muted); }
form { display:grid; gap:.8rem; } fieldset { margin:0; padding:1rem; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.15); } legend { padding:0 .3rem; font-weight:800; } label { display:block; margin-top:.65rem; color:var(--muted); } input[type=radio],input[type=checkbox] { accent-color:var(--sun); } select,input[type=text] { display:block; width:100%; margin-top:.35rem; padding:.7rem; color:var(--ink); background:#101a35; border:1px solid var(--line); border-radius:10px; }.quiz-actions { align-items:center; }.quiz-actions p { font-weight:800; color:var(--sun); }.quiz-feedback { margin-top:1rem; padding:1rem; border-radius:15px; background:rgba(124,221,231,.1); border:1px solid rgba(124,221,231,.25); }.quiz-breakdown { display:grid; gap:.65rem; margin-top:1rem; }.result { padding:.85rem; border-radius:13px; border:1px solid var(--line); background:rgba(255,255,255,.04); }.result.correct { border-color:rgba(121,221,177,.5); }.result.incorrect { border-color:rgba(255,124,124,.5); }.result p { margin:.35rem 0 0; color:var(--muted); }.result strong { color:var(--ink); }
@keyframes enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) { .site-shell { width:min(100% - 1rem,1180px); }.top-nav { top:0; border-radius:0 0 16px 16px; }.hero { min-height:640px; grid-template-columns:1fr; }.hero-copy { padding:2rem; background:linear-gradient(0deg,rgba(7,11,24,.98),rgba(7,11,24,.7),rgba(7,11,24,.35)); }.hero-image { inset:0; width:100%; height:100%; }.topic-layout,.topic-layout.reverse,.summary { grid-template-columns:1fr; }.reverse .topic-copy,.reverse .lesson-visual { order:initial; }.safety-grid { grid-template-columns:1fr; }.lesson-visual img { max-height:360px; }.quiz-intro img { width:110px; }.nav-item { font-size:.7rem; padding:.55rem .6rem; } }