/* Signaplex Academy — animated explainers. Same tokens as signaplex-shell.css */
:root{
  --bg:#07080F; --surface:#0F1120; --surface-2:#12152A; --line:#1F2340; --line-2:#2A2F52;
  --text:#EDEFF7; --text-2:#C9CDE0; --muted:#9AA1BD; --accent:#59EFF9; --ink:#061018;
  --up:#59EFF9; --down:#FF85A2; --down-cell:#E0435A; --topic:#59EFF9;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 48px}
.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--topic);font-weight:600}
h1{font-size:34px;line-height:1.15;margin:6px 0 8px;font-weight:600}
.lede{color:var(--text-2);font-size:16px;line-height:1.55;max-width:760px;margin:0 0 22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.stage{position:relative;padding:22px;min-height:520px;overflow:hidden}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)} .dn{color:var(--down)} .muted{color:var(--muted)}

/* player controls */
.player{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.pbtn{height:40px;min-width:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.pbtn:hover{border-color:var(--topic)} .pbtn.primary{background:var(--topic);border-color:var(--topic);color:var(--ink);font-weight:600}
.steps{display:flex;gap:6px;flex:1;min-width:200px}
.step{flex:1;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden;cursor:pointer;border:0;padding:0}
.step i{display:block;height:100%;width:0;background:var(--topic)}
.caption{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.caption .n{font-family:var(--mono);color:var(--topic);font-size:13px}
.caption h2{margin:0;font-size:20px;font-weight:600}
.caption p{grid-column:2;margin:0;color:var(--text-2);font-size:15px;line-height:1.55;max-width:820px}

/* PSI cells */
.cell{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:30px;padding:0 8px;border-radius:6px;font-family:var(--mono);font-weight:600;font-size:14px;transition:background .35s,color .35s,transform .35s}
.cell.up{background:var(--up);color:var(--ink)} .cell.dn{background:var(--down-cell);color:#fff} .cell.flat{background:var(--line-2);color:var(--muted)}
.cell.pop{transform:scale(1.15)}
.tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:10px;white-space:nowrap}
.tag.up{background:#0D3036;color:var(--up)} .tag.dn{background:#3A1520;color:var(--down)}

.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.note{padding:16px 18px} .note h3{margin:0 0 6px;font-size:15px} .note p{margin:0;color:var(--text-2);font-size:14px;line-height:1.5}
.disclaimer{margin-top:26px;color:var(--muted);font-size:12px;line-height:1.5}
.back{display:inline-block;margin-bottom:14px;font-size:14px}
@media (max-width:820px){ .notes{grid-template-columns:1fr} h1{font-size:26px} .stage{padding:14px;min-height:0} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }