:root { --ink:#1d2433; --muted:#5b6478; --line:#e3e6ee; --accent:#2f5bd3; --bg:#f7f8fb; --navy:#0b1f4b; --gold:#ffd166; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }

.nav { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 20px; background:var(--navy); }
.nav .brand { color:#fff; font-weight:700; text-decoration:none; }
.nav nav { display:flex; gap:4px; flex-wrap:wrap; }
.nav nav a { color:#cbd5f5; text-decoration:none; padding:6px 12px; border-radius:6px; font-size:.95rem; }
.nav nav a:hover { background:rgba(255,255,255,.12); color:#fff; }

.hero { height:25vh; min-height:150px; background:linear-gradient(rgba(11,31,75,.35),rgba(11,31,75,.55)),var(--navy) url(images/hero.jpg) center 55%/cover; display:flex; align-items:center; justify-content:center; padding:0 16px; }
.hero h1 { margin:0; color:#fff; font-size:clamp(1.6rem,5vw,3rem); text-align:center; text-shadow:0 2px 12px rgba(0,0,0,.4); }

.tabs { display:flex; justify-content:center; gap:8px; padding:20px 16px 0; }
.tabs button { font:inherit; font-weight:600; padding:10px 22px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; color:var(--muted); }
.tabs button[aria-selected="true"] { background:var(--navy); color:#fff; border-color:var(--navy); }
.panel { max-width:1100px; margin:0 auto; padding:24px 16px 64px; }
.panel[hidden] { display:none; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.tile { position:relative; display:block; aspect-ratio:3/2; border-radius:14px; overflow:hidden; text-decoration:none; box-shadow:0 2px 8px rgba(11,31,75,.15); transition:transform .15s, box-shadow .15s; }
.tile:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(11,31,75,.25); }
.tile img { width:100%; height:100%; object-fit:cover; display:block; }
.tile span { position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; color:#fff; font-weight:600; line-height:1.25; background:linear-gradient(transparent,rgba(0,0,0,.7)); }

#cover { position:fixed; inset:0; z-index:100; background:#07122e url(images/cover.svg) center/cover; display:flex; align-items:center; justify-content:center; transition:opacity 3s ease, filter 3s ease; }
#cover.dissolve { opacity:0; filter:blur(14px); pointer-events:none; }
#cover button { font:inherit; font-size:1.3rem; font-weight:700; padding:16px 44px; border:2px solid #fff; background:rgba(11,31,75,.55); color:#fff; border-radius:999px; cursor:pointer; backdrop-filter:blur(4px); transition:background .2s, transform .2s; }
#cover button:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); transform:scale(1.05); }

.lesson { max-width:820px; margin:0 auto; padding:24px 16px 64px; }
.lesson h1 { margin:8px 0 16px; }
.back { text-decoration:none; font-size:.95rem; }
.tools { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tools button { font:inherit; font-size:.9rem; padding:6px 14px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; }
.tools button:hover { border-color:var(--accent); color:var(--accent); }
.lesson details { background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.lesson summary { padding:14px 16px; cursor:pointer; font-weight:600; }
.lesson .content { padding:0 16px 16px; }
.soon { color:var(--muted); font-style:italic; margin:0; }
.dl-link { margin-top:32px; }

@media print {
  .nav, .tools, .back, .dl-link, #cover { display:none; }
  body { background:#fff; }
  .lesson details { border:none; }
  .lesson details > .content { display:block; }
  .lesson summary { padding-left:0; font-size:1.15rem; }
}

/* Lesson components */
.lesson h3 { margin:20px 0 6px; font-size:1.05rem; }
.lesson p, .lesson li { max-width:68ch; }
.lesson table { border-collapse:collapse; margin:12px 0; font-size:.95rem; }
.lesson th, .lesson td { border:1px solid var(--line); padding:6px 12px; text-align:left; vertical-align:top; }
.lesson th { background:#eef1f8; }
.formula { background:#eef1f8; border-left:4px solid var(--accent); padding:8px 14px; margin:10px 0; border-radius:0 8px 8px 0; font-family:ui-monospace,Menlo,monospace; font-size:.95rem; }
.tip { background:#fff8e1; border-left:4px solid var(--gold); padding:10px 14px; margin:14px 0; border-radius:0 8px 8px 0; }
.tip b:first-child { display:block; margin-bottom:2px; }
.stepper, .widget { background:#fafbfe; border:1px solid var(--line); border-radius:12px; padding:12px; margin:16px 0; }
.chart { width:100%; height:auto; display:block; }
.chart .axis { stroke:#333; stroke-width:2; fill:none; }
.chart .axlab, .chart .lab { font:12px system-ui,sans-serif; fill:#333; }
.chart .line { fill:none; stroke-width:3; stroke-linecap:round; }
.chart .mc { stroke:#d9480f; } .chart .ac { stroke:#2f5bd3; } .chart .avc { stroke:#7c3aed; } .chart .mr { stroke:#0f766e; } .chart .ar { stroke:#c2255c; } .chart .tr { stroke:#2f5bd3; } .chart .sr { stroke:#94a3b8; stroke-width:2; } .chart .lr { stroke:#d9480f; }
.chart text.mc { fill:#d9480f; } .chart text.ac { fill:#2f5bd3; } .chart text.avc { fill:#7c3aed; } .chart text.mr { fill:#0f766e; } .chart text.ar { fill:#c2255c; } .chart text.tr { fill:#2f5bd3; } .chart text.lr { fill:#d9480f; }
.chart .guide { stroke:#666; stroke-width:1.5; stroke-dasharray:5 4; fill:none; }
.chart .dot { fill:#111; }
.chart .profit { fill:#2f9e44; fill-opacity:.35; } .chart .loss { fill:#e03131; fill-opacity:.35; }
.cap { min-height:3.2em; margin:8px 4px; }
.ctl { display:flex; align-items:center; gap:10px; }
.ctl button, .reveal-ctl button { font:inherit; padding:6px 16px; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:8px; cursor:pointer; }
.ctl button:disabled, .reveal-ctl button:disabled { opacity:.35; cursor:default; }
.ctl .count { color:var(--muted); font-size:.9rem; }
.allcaps { display:none; }
.slider-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0; }
.slider-row input[type=range] { flex:1; min-width:160px; }
.readout { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin:8px 0; }
.readout div { background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:.9rem; }
.readout b { display:block; font-size:1.1rem; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:700px) { .two { grid-template-columns:1fr; } }
.reveal { list-style:none; padding:0; margin:8px 0; }
.reveal li { background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:8px 12px; margin-bottom:6px; }
.reveal li b { color:var(--accent); }
.reveal-ctl { display:flex; gap:8px; margin-bottom:8px; }
.reveal-ctl [data-reset] { background:#fff; color:var(--ink); border-color:var(--line); }
.q { margin:14px 0; }
.opt { display:block; width:100%; text-align:left; font:inherit; padding:8px 12px; margin:4px 0; background:#fff; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.opt:hover { border-color:var(--accent); }
.opt.right { background:#d3f9d8; border-color:#2f9e44; } .opt.wrong { background:#ffe3e3; border-color:#e03131; }
.fb { font-size:.95rem; color:var(--muted); margin:4px 0; }
.score { font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:12px 0; }
.card { font:inherit; min-height:110px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; text-align:left; }
.card .back { display:none; font-size:.9rem; } .card.flipped .front { display:none; } .card.flipped .back { display:block; }
.card .front { font-weight:600; color:var(--accent); } .card.flipped { background:#eef1f8; }
@media print {
  .stepper .ctl, .cap, .reveal-ctl, .card .front { display:none; }
  .chart [data-step] { display:inline !important; }
  .allcaps { display:block; font-size:.9rem; }
  .reveal li[hidden] { display:block !important; }
  .card .back { display:block; }
  .widget .slider-row { display:none; }
  .stepper, .widget { break-inside:avoid-page; }
}

.chart text.srlab { fill:#475569; font-weight:600; }

/* Chain of reasoning */
.chain { display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; margin:10px 0; }
.chain .link { background:#fff; border:1px solid var(--accent); color:var(--ink); border-radius:8px; padding:6px 10px; font-size:.92rem; }
.chain .arrow { color:var(--accent); font-weight:700; font-size:.85rem; }
.chain .link.start { background:var(--accent); color:#fff; } .chain .link.end { background:#d3f9d8; border-color:#2f9e44; }
.chain .link.gap { background:#ffe3e3; border-color:#e03131; border-style:dashed; }
.order .pool { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.order .chip { font:inherit; font-size:.92rem; padding:7px 12px; background:#fff; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.order .chip:hover { border-color:var(--accent); }
.order .chip:disabled { opacity:.3; }
.order .msg { min-height:1.6em; font-size:.92rem; color:var(--muted); }
.order button.reset { font:inherit; padding:5px 12px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; }
.bad, .good { border-radius:8px; padding:10px 14px; margin:8px 0; }
.bad { background:#fff0f0; border-left:4px solid #e03131; } .good { background:#ebfbee; border-left:4px solid #2f9e44; }
.bad b:first-child, .good b:first-child { display:block; }
@media print { .order .pool { display:none; } }

.qline { background:#eef1f8; border-radius:8px; padding:8px 12px; margin:6px 0; }

.nocover #cover { display:none; }

/* Calculation practice */
.calc input[type=number] { font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:8px; width:9em; }
.calc .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.calc button { font:inherit; padding:6px 14px; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:8px; cursor:pointer; }
.calc button.alt { background:#fff; color:var(--ink); border-color:var(--line); }
.calc .work { background:#eef1f8; border-radius:8px; padding:8px 12px; margin-top:8px; }
.calc .work[hidden] { display:none; }

@media print {
  .screen-only, .order, .calc, details:has(.order), details:has(#ord1) { display:none !important; }
  .lesson h1 { font-size:20pt; margin-top:0; }
  .lesson { max-width:none; padding:0; }
  .lesson details > summary { list-style:none; font-weight:700; font-size:13pt; border-bottom:2px solid #0b1f4b; margin-top:12pt; padding:0 0 2pt; }
  .lesson details > summary::-webkit-details-marker { display:none; }
  .qline { break-inside:avoid; }
  @page { size:A4; margin:16mm 15mm; }
}

.section-head { font-size:1.2rem; margin:24px 0 10px; padding-bottom:4px; border-bottom:2px solid var(--navy); }
.section-head.gap-top { margin-top:48px; }
.dl-list { list-style:none; padding:0; margin:0; }
.dl-list li { padding:8px 0; border-top:1px solid var(--line); } .dl-list li:first-child { border-top:0; }
.dl-list a { font-weight:500; text-decoration:none; }
@media print { .section-head.gap-top { margin-top:18pt; } .dl-list { display:none; } details:has(.dl-list) { display:none; } }
@media print { .section-head.gap-top, .section-head.gap-top ~ details { display:none !important; } .section-head { margin-top:14pt; } }