:root{--bg:#060914;--bg-raise:#0a0e1a;--surface:#11162a;--line:rgba(148,163,184,.14);--line-bright:rgba(212,165,116,.4);
--ink:#f5f5f7;--ink2:#9aa7bd;--muted:#5d6a82;--gold:#d4a574;--gold-bright:#e9b988;--gold-soft:rgba(212,165,116,.14);
--serif:'Instrument Serif',Georgia,serif;--sans:'Inter',-apple-system,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold-bright)}
.bar{position:sticky;top:0;z-index:10;background:rgba(6,9,20,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:10px 0}
.bar .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between}
.bar a.home{color:var(--gold);font-weight:700;text-decoration:none}
.bar .right a{color:var(--ink2);font-size:.9rem;margin-left:16px}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
.prose{padding:40px 0 24px}
.prose h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.5vw,3rem);line-height:1.08;margin:.2em 0 .5em;letter-spacing:-.01em}
.prose h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:1.6em 0 .5em;border-bottom:1px solid var(--line);padding-bottom:.25em}
.prose h3{font-weight:600;font-size:1.2rem;margin:1.5em 0 .4em;color:var(--gold-bright)}
.prose h4{font-weight:600;font-size:1rem;margin:1.3em 0 .3em;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.prose p,.prose li{color:var(--ink2)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose blockquote{border-left:3px solid var(--gold);margin:1em 0;padding:.4em 1em;background:var(--surface);border-radius:0 8px 8px 0;color:var(--ink2)}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--gold-soft);color:var(--gold-bright);padding:.12em .4em;border-radius:4px}
.prose pre{background:var(--bg-raise);border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow-x:auto;margin:1em 0}
.prose pre code{background:none;color:var(--ink);padding:0;font-size:.82rem;line-height:1.5}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem;margin:1em 0;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500}
.prose td{color:var(--ink2)}
.pager{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:24px 0 60px;margin-top:24px}
.pager a{display:block;max-width:48%;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.pager a:hover{border-color:var(--gold)}
.pager .lbl{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pager .nx{margin-left:auto;text-align:right}
/* index */
.idx-hero{padding:56px 0 8px}
.idx-hero .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.idx-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);margin:.2em 0}
.idx-hero p{color:var(--ink2);max-width:60ch}
.phase{margin:32px 0}
.phase h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--ink);border-bottom:1px solid var(--line-bright);padding-bottom:.3em}
.mod{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--surface);text-decoration:none}
.mod:hover{border-color:var(--gold)}
.mod .t{color:var(--ink);font-weight:500;flex:1}
.mod .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;border:1px solid var(--line);color:var(--muted)}
.mod .tag.free{color:var(--gold-bright);border-color:var(--line-bright)}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;padding:24px 0 60px}

/* ---------- lesson figures ---------- */
.prose img{max-width:100%;height:auto;display:block;margin:1.4rem auto;border:1px solid var(--line);border-radius:10px;background:#0a0e1a}
.prose figure{margin:1.6rem 0}
.prose figcaption{color:var(--muted);font-size:.82rem;text-align:center;margin-top:.5rem;font-style:italic}

/* justified body text for lessons */
.prose p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.prose li{text-align:justify;hyphens:auto}