/* app/how.css — the pipeline explainer's own layer. Loads AFTER app/pages.css,
   which carries the palette and the shared page chrome. Self-contained beyond
   that: the app's faces, a constellation rail down the left (the page is a
   drawn path through the pipeline — the path IS the explanation), and
   hand-authored SVG diagrams. */

/* the two palette tokens this page does not share with colophon.html */
:root{--panel:#15122c;--panel2:#1c1838}

body{line-height:1.5}
/* the seeded starfield behind everything (app/entries/how.js, mulberry32 — the
   same PRNG family the engine draws every note from) */
#sky{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none}
#sky circle{animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:var(--o,.5)}50%{opacity:calc(var(--o,.5)*.35)}}
@media(prefers-reduced-motion:reduce){
  #sky circle{animation:none}
}
.wrap{position:relative;z-index:1}
/* ---- hero ---- */
header{padding-bottom:3rem;text-align:left}
h1{margin:.6rem 0 .4rem}
.tag{max-width:52ch;margin:0}
/* ---- part titles ---- */
.part{font-family:Orbitron,sans-serif;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--amber);margin:4.2rem 0 .4rem;padding-top:1rem}
.part.cyan{color:var(--cyan)}
.part.mint{color:var(--mint)}
.partsub{color:var(--dim);margin:0 0 2.2rem;max-width:56ch}
/* ---- THE RAIL: stages are stars on a drawn constellation path ---- */
.rail{position:relative;padding-left:2.1rem}
.rail::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--pink),var(--purple) 45%,var(--cyan));
  box-shadow:0 0 9px rgba(255,110,199,.45);opacity:.55}
.stage{position:relative;margin:0 0 3.4rem;scroll-margin-top:2rem}
.stage::before{content:"";position:absolute;left:calc(-2.1rem + 3px);top:8px;width:12px;height:12px;
  border-radius:50%;background:var(--bg);border:2px solid var(--pink);
  box-shadow:0 0 10px var(--pink),0 0 22px rgba(255,110,199,.35)}
.stage:nth-child(even)::before{border-color:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 22px rgba(69,224,255,.35)}
.stage h2{font-family:Orbitron,sans-serif;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 .15rem}
.stage h2 .n{color:var(--pink);margin-right:.55rem}
.stage:nth-child(even) h2 .n{color:var(--cyan)}
.stage .fn{font:15px VT323,monospace;color:var(--mint);letter-spacing:.05em;margin:0 0 .8rem;opacity:.85}
.stage p{margin:.7rem 0;max-width:62ch;color:var(--ink)}
.stage p b{color:var(--amber);font-weight:400}
.stage p em{color:var(--cyan);font-style:normal}
/* diagrams: cards in the app's chrome */
figure{margin:1rem 0;background:rgba(18,15,38,.62);border:1px solid var(--line);border-radius:12px;
  padding:.7rem .8rem .4rem;overflow-x:auto}
figure svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
figcaption{font:14px VT323,monospace;color:var(--dim);letter-spacing:.05em;padding:.3rem .2rem .4rem;text-align:center}
/* ordered inner list for buildEvents */
ol.stages{list-style:none;counter-reset:st;margin:1rem 0;padding:0;max-width:62ch}
ol.stages li{counter-increment:st;position:relative;padding:.42rem 0 .42rem 2.4rem;border-top:1px solid var(--line)}
ol.stages li:last-child{border-bottom:1px solid var(--line)}
ol.stages li::before{content:counter(st);position:absolute;left:.2rem;top:.5rem;
  font-family:Orbitron,sans-serif;font-size:.7rem;color:var(--pink);letter-spacing:.05em}
ol.stages b{color:var(--amber);font-weight:400}
ol.stages .s{font-size:15px;color:var(--mint);opacity:.8}
/* laws card */
.laws{background:rgba(18,15,38,.62);border:1px solid var(--line2);border-radius:12px;
  padding:1rem 1.2rem;margin:2.2rem 0}
.laws h3{font-family:Orbitron,sans-serif;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber);margin:0 0 .5rem}
.laws p{margin:.35rem 0;max-width:60ch}
.laws b{color:var(--mint);font-weight:400}
/* footer */
footer{margin-top:5rem}
@media(max-width:560px){
  figure svg{min-width:520px}
  .rail{padding-left:1.6rem}
  .stage::before{left:calc(-1.6rem + 3px)}
}