/* AETHERIX lessons site — generated by scripts/generate_lessons_site.py */
:root{
  --bg-primary:#050a14; --bg-secondary:#0d1525; --bg-card:rgba(13,21,37,.8);
  --bg-card-solid:#0c1530; --text-primary:#e4e8f0; --text-secondary:#8892a4;
  --text-muted:#5a6578; --border:rgba(255,255,255,.08);
  --border-bright:rgba(255,255,255,.15); --accent:#00d4ff; --cyan:#00e5ff;
  --mars:#ff6b35; --success:#3fb950; --danger:#f85149; --warning:#d29922;
  --purple:#a371f7; --quantum:#7c5cf7; --nebula:#c84cff; --teal:#2dd4bf;
  --radius:10px; --shadow:0 4px 24px rgba(0,0,0,.4);
  --phase:var(--accent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg-primary);color:var(--text-primary);
  font-family:Lato,system-ui,-apple-system,sans-serif;line-height:1.7;
  -webkit-font-smoothing:antialiased}
.starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 15% -5%,rgba(80,40,180,.10),transparent 60%),
    radial-gradient(900px 600px at 90% 8%,rgba(0,140,200,.08),transparent 60%),
    radial-gradient(700px 500px at 50% 100%,rgba(200,60,80,.05),transparent 60%)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.88em;
  background:rgba(0,0,0,.35);padding:.15em .4em;border-radius:4px;
  border:1px solid var(--border);color:var(--cyan)}
pre{background:rgba(0,0,0,.4);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem;overflow-x:auto}
pre code{background:none;border:none;padding:0;color:var(--text-primary)}

/* nav */
.lnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.7rem 1.5rem;
  background:rgba(5,10,20,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
.lnav-brand{display:flex;align-items:center;gap:.5rem;font-weight:900;
  letter-spacing:.05em;color:var(--text-primary)}
.lnav-brand:hover{text-decoration:none;color:var(--accent)}
.lnav-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.lnav-links a{color:var(--text-secondary);font-size:.9rem;font-weight:700}
.lnav-links a:hover,.lnav-links a.active{color:var(--accent);text-decoration:none}

.lwrap{max-width:1180px;margin:0 auto;padding:2rem 1.25rem 4rem}

/* hero */
.lhero{border:1px solid var(--border);border-left:4px solid var(--phase);
  border-radius:var(--radius);padding:1.5rem 1.75rem;margin-bottom:2rem;
  background:linear-gradient(135deg,rgba(13,21,37,.9),rgba(12,21,48,.6))}
.crumb{font-size:.85rem;color:var(--text-secondary)}
.lhero h1{margin:.6rem 0 1rem;font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.25}
.lhero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;
  border:1px solid var(--border-bright);color:var(--text-secondary)}
.badge-phase{border-color:var(--phase);color:var(--phase)}
.lhero-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn-complete,.btn-ghost{font-family:inherit;font-size:.85rem;font-weight:700;
  padding:.5rem 1rem;border-radius:8px;cursor:pointer;border:1px solid var(--border-bright);
  background:transparent;color:var(--text-primary);transition:.15s}
.btn-complete:hover,.btn-ghost:hover{border-color:var(--accent);color:var(--accent);
  text-decoration:none}
.btn-complete.done{background:rgba(63,185,80,.15);border-color:var(--success);
  color:var(--success)}

/* layout */
.lgrid{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:start}
.ltoc{position:sticky;top:80px;font-size:.85rem}
.ltoc-title{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;
  color:var(--text-muted);margin:0 0 .5rem}
.ltoc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.ltoc li a{display:block;padding:.35rem .75rem;color:var(--text-secondary);
  border-left:2px solid transparent;margin-left:-1px}
.ltoc li a:hover{color:var(--accent);border-left-color:var(--accent);text-decoration:none}

/* sections */
.lsec{margin-bottom:2rem;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-card);padding:1.25rem 1.5rem}
.lsec h2{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-size:1.15rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.lsec-icon{font-size:1.1rem}
.lsec-body>:first-child{margin-top:0}
.lsec-body>:last-child{margin-bottom:0}
.lsec h3{font-size:1rem;color:var(--cyan);margin:1.5rem 0 .5rem}
.lsec-objective{border-left:3px solid var(--accent)}
.lsec-concept{border-left:3px solid var(--purple)}
.lsec-aetherix{border-left:3px solid var(--teal)}
.lsec-numbers{border-left:3px solid var(--warning)}
.lsec-probe{border-left:3px solid var(--mars)}
.lsec-selfcheck{border-left:3px solid var(--success)}
.lsec-refs,.lsec-resources{border-left:3px solid var(--text-muted)}
.lsec-viz{border-left:3px solid var(--nebula)}

table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem;display:block;
  overflow-x:auto}
th,td{border:1px solid var(--border);padding:.5rem .7rem;text-align:left}
th{background:rgba(0,212,255,.07);color:var(--cyan);font-weight:700}
tr:nth-child(even) td{background:rgba(255,255,255,.02)}
blockquote{margin:1rem 0;padding:.75rem 1rem;border-left:3px solid var(--warning);
  background:rgba(210,153,34,.07);border-radius:0 6px 6px 0;color:var(--text-secondary)}
ul,ol{padding-left:1.4rem}
li{margin:.3rem 0}

/* Q&A */
.qa{border:1px solid var(--border);border-radius:8px;margin:.6rem 0;
  background:rgba(255,107,53,.05)}
.qa summary{cursor:pointer;padding:.7rem .9rem;font-weight:700;display:flex;
  gap:.6rem;align-items:flex-start;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';margin-left:auto;color:var(--mars);font-weight:900}
.qa[open] summary::after{content:'\2212'}
.qa-q{display:inline-flex;align-items:center;justify-content:center;min-width:1.4rem;
  height:1.4rem;border-radius:50%;background:var(--mars);color:#050a14;
  font-size:.75rem;font-weight:900;flex:none}
.qa-a{padding:0 .9rem .8rem 2.9rem;color:var(--text-secondary)}
.qa-a>:first-child{margin-top:0}

/* self-check */
.selfcheck-list{list-style:none;padding-left:0;counter-reset:sc}
.selfcheck-list li{counter-increment:sc;margin:.5rem 0}
.selfcheck-list label{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  padding:.6rem .8rem;border:1px solid var(--border);border-radius:8px;
  background:rgba(63,185,80,.04);transition:.15s}
.selfcheck-list label:hover{border-color:var(--success)}
.selfcheck-list input{margin-top:.35rem;accent-color:var(--success);flex:none}
.selfcheck-list input:checked+span{color:var(--text-muted);text-decoration:line-through}

/* visuals */
.viz{margin:0 0 1.75rem;padding:0}
.viz-title{font-weight:700;color:var(--cyan);margin-bottom:.6rem;font-size:.98rem}
.viz-cap{font-size:.83rem;color:var(--text-secondary);margin-top:.6rem;line-height:1.6}
.viz-thr{font-size:.78rem;color:var(--warning);margin:.4rem 0 0}
.mermaid{background:none!important;text-align:center}
/* mermaid viewer widget (shared with showcase docs/js/mermaid-viewer.js) */
.mmd-fig{border:1px solid var(--border);border-radius:var(--radius);margin:0 0 .2rem;
  overflow:hidden;background:var(--bg-secondary)}
.mmd-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.55rem .8rem;border-bottom:1px solid var(--border);font-size:.78rem}
.mmd-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-weight:700}
.mmd-ctrls{display:flex;align-items:center;gap:.35rem}
.mmd-zoom-level{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:.72rem;
  min-width:3.1em;text-align:right}
.mmd-ctrls button{background:rgba(0,212,255,.1);color:var(--cyan);border:1px solid rgba(0,212,255,.35);
  border-radius:6px;font-size:.74rem;padding:.22rem .6rem;cursor:pointer;font-family:inherit}
.mmd-ctrls button:hover{background:rgba(0,212,255,.2)}
.mmd-ctrls button:disabled{opacity:.4;cursor:default}
.mmd-stage{position:relative;overflow:hidden;max-height:540px;min-height:70px;cursor:grab;
  touch-action:none;display:flex;align-items:flex-start;justify-content:flex-start;
  color:var(--text-secondary);font-size:.82rem;
  background-color:#111e36;
  background-image:radial-gradient(rgba(148,170,205,.17) 1px,transparent 1px);
  background-size:22px 22px;
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.1)}
.mmd-stage.mmd-grabbing{cursor:grabbing}
.mmd-viewport{transform-origin:0 0}
.mmd-viewport svg{max-width:none;display:block}
.mmd-src{display:none;margin:0;padding:.8rem .9rem;overflow-x:auto;font-size:.76rem;
  line-height:1.5;border-top:1px solid var(--border);background:rgba(0,0,0,.25)}
.mmd-fig.show-src .mmd-stage{display:none}
.mmd-fig.show-src .mmd-src{display:block}
.mmd-fig .mmd-logo{pointer-events:none}
.chart-wrap{position:relative;height:320px;background:var(--bg-secondary);
  border:1px solid var(--border);border-radius:var(--radius);padding:1rem}

/* prev/next */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.pn{display:flex;flex-direction:column;gap:.2rem;padding:1rem;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg-card);transition:.15s}
.pn:hover{border-color:var(--accent);text-decoration:none}
.pn span{font-size:.78rem;color:var(--text-muted)}
.pn strong{font-size:.92rem;color:var(--text-primary)}
.pn.next{text-align:right}

/* hub */
.hub-hero{text-align:center;padding:2rem 1rem 2.5rem;border-bottom:1px solid var(--border);
  margin-bottom:2.5rem}
.hub-hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:1rem 0 .5rem;
  background:linear-gradient(135deg,#00d4ff,#a371f7 60%,#c84cff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hub-lede{max-width:640px;margin:0 auto 1.75rem;color:var(--text-secondary)}
.hub-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;margin-bottom:2rem}
.stat b{display:block;font-size:1.7rem;color:var(--accent);line-height:1.2}
.stat span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted)}
.hub-progress{max-width:460px;margin:0 auto}
.pbar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.pbar-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#00d4ff,#3fb950);transition:width .4s}
#pbar-label{font-size:.85rem;color:var(--text-secondary);margin:.6rem 0 .8rem}
.hub-countdown{margin-top:1.5rem;font-size:.85rem;color:var(--mars);font-weight:700}

.hub-filter{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.5rem}
#lesson-search{width:100%;padding:.75rem 1rem;border-radius:10px;
  border:1px solid var(--border-bright);background:rgba(4,10,24,.85);
  color:var(--text-primary);font-family:inherit;font-size:.95rem}
#lesson-search:focus{outline:none;border-color:var(--accent)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip-btn{font-family:inherit;font-size:.78rem;font-weight:700;padding:.35rem .8rem;
  border-radius:999px;cursor:pointer;background:transparent;color:var(--text-secondary);
  border:1px solid var(--border-bright);transition:.15s}
.chip-btn:hover{color:var(--accent);border-color:var(--accent)}
.chip-btn.active{background:rgba(0,212,255,.15);color:var(--accent);border-color:var(--accent)}

.phase{margin-bottom:3rem}
.phase-head{border-left:3px solid var(--phase);padding-left:1rem;margin-bottom:1.25rem}
.phase-head h2{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  margin:0 0 .4rem;font-size:1.3rem}
.phase-n{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--phase);border:1px solid var(--phase);border-radius:999px;
  padding:.15rem .55rem}
.phase-head p{margin:0;color:var(--text-secondary);font-size:.92rem}
.phase-days{font-size:.78rem!important;color:var(--text-muted)!important;margin-top:.3rem!important}
.lcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.85rem}
.lcard{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg-card);transition:.15s;position:relative}
.lcard:hover{border-color:var(--phase);transform:translateY(-2px);text-decoration:none;
  box-shadow:var(--shadow)}
.lcard-day{font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:600;
  color:var(--phase);opacity:.85;flex:none}
.lcard-main{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.lcard-main strong{color:var(--text-primary);font-size:.93rem;line-height:1.35}
.lcard-meta{font-size:.72rem;color:var(--text-muted);display:flex;gap:.4rem;
  flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--border);border-radius:999px;padding:.05rem .45rem;
  color:var(--text-secondary)}
.chip-alt{border-color:rgba(0,212,255,.3);color:var(--accent)}
.lcard-tick{margin-left:auto;color:var(--success);opacity:0;font-weight:900;flex:none;
  transition:.15s}
.lcard.done{border-color:rgba(63,185,80,.4);background:rgba(63,185,80,.06)}
.lcard.done .lcard-tick{opacity:1}


@media (max-width:900px){
  .lgrid{grid-template-columns:1fr}
  .ltoc{position:static;order:-1;border:1px solid var(--border);border-radius:var(--radius);
    padding:1rem;background:var(--bg-card)}
  .prevnext{grid-template-columns:1fr}
  .pn.next{text-align:left}
}
@media (max-width:560px){
  .lwrap{padding:1.25rem .85rem 3rem}
  .lsec{padding:1rem}
  .hub-stats{gap:1.25rem}
  .chart-wrap{height:260px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}