/* ===== AXIOMA EM MOVIMENTO · palco escuro, tema único e deliberado ===== */
:root{
  --void:#06070E; --deep:#0B0E1A; --panel:#121729; --line:#1E2540;
  --paper:#EEF0FA; --dim:#7C86A8; --faint:#3D4665;
  --flux:#6C5CFF; --flux-d:#3B2FA8; --ember:#FF9351; --ember-d:#A9541F;
  --cyan:#45D6E8; --cyan-d:#1B7C8C; --ok:#5BE0A8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--paper);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

.wrap{max-width:1360px;margin:0 auto;padding:26px 22px 60px}

/* cabeçalho */
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.marca{display:flex;align-items:baseline;gap:11px}
.marca .sig{font:600 1.5rem/1 'Fraunces',Georgia,serif;color:var(--flux)}
.marca h1{margin:0;font:600 1.16rem/1.2 'Fraunces',Georgia,serif;letter-spacing:.005em}
.marca span{font:400 .74rem/1 'JetBrains Mono',monospace;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.filmes{display:flex;gap:6px;flex-wrap:wrap}
.fbtn{border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:999px;
  padding:8px 15px;font:500 .78rem/1 'Public Sans',sans-serif;cursor:pointer;transition:.2s}
.fbtn:hover{border-color:var(--flux-d);color:var(--paper)}
.fbtn.on{background:var(--flux);border-color:var(--flux);color:#fff}

/* palco */
.palco{position:relative;width:100%;aspect-ratio:16/9;background:var(--deep);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 90px -50px #000,0 0 0 1px rgba(108,92,255,.07) inset}
.palco canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;inset:0;pointer-events:none}
.hud .fx{position:absolute;top:0;left:0;transform-origin:0 0}

/* elementos do HUD, posicionados no espaço 1600x900 */
.et{position:absolute;font:400 .8rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.passo{position:absolute;left:44px;top:40px;display:flex;align-items:baseline;gap:12px}
.passo .num{font:600 2.9rem/1 'Fraunces',Georgia,serif;color:var(--paper);font-variant-numeric:tabular-nums}
.passo .de{font:400 .82rem/1 'JetBrains Mono',monospace;color:var(--faint)}
.passo .tit{font:500 1.02rem/1.25 'Public Sans',sans-serif;color:var(--dim);max-width:330px;letter-spacing:.01em}
.legenda{position:absolute;left:0;right:0;bottom:52px;text-align:center;padding:0 90px}
.legenda p{margin:0;font:400 1.42rem/1.5 'Public Sans',sans-serif;color:var(--paper);
  text-wrap:balance;text-shadow:0 2px 20px rgba(6,7,14,.9)}
.legenda w{opacity:.14;transition:opacity .16s linear}
.legenda w.on{opacity:1}
.formula-hud{position:absolute;left:1080px;top:430px;width:840px;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--paper);opacity:0;transition:opacity .3s}
.formula-hud .katex{color:var(--paper);font-size:2rem;white-space:nowrap}
.formula-hud .katex-display{margin:0}
.vinheta{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(6,7,14,.72) 100%)}

/* transporte */
.transp{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.play{width:52px;height:52px;flex:none;border:0;border-radius:50%;background:var(--flux);cursor:pointer;
  display:grid;place-items:center;transition:filter .2s,transform .2s}
.play:hover{filter:brightness(1.14);transform:scale(1.04)}
.play i{display:block;width:14px;height:16px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.play.tocando i{clip-path:polygon(0 0,36% 0,36% 100%,0 100%,0 0);width:14px}
.play.tocando i{background:#fff;clip-path:none;width:4px;height:15px;box-shadow:7px 0 0 #fff}
.tempo{font:500 .82rem/1 'JetBrains Mono',monospace;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.linha{flex:1;min-width:240px;position:relative;height:34px;cursor:pointer;display:flex;align-items:center}
.linha .trilho{position:absolute;left:0;right:0;height:5px;border-radius:3px;background:var(--line)}
.linha .prog{position:absolute;left:0;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--flux),var(--ember));pointer-events:none}
.linha .cap{position:absolute;width:2px;height:13px;background:var(--faint);border-radius:1px;
  transform:translateX(-1px);pointer-events:none}
.linha .cap.feito{background:var(--paper);opacity:.55}
.linha .cursor{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 4px rgba(108,92,255,.32);transform:translateX(-7px);pointer-events:none}
.ctrl{display:flex;gap:5px;align-items:center}
.ctrl button{border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:8px;
  padding:8px 11px;font:500 .74rem/1 'JetBrains Mono',monospace;cursor:pointer;transition:.18s}
.ctrl button:hover{border-color:var(--flux-d);color:var(--paper)}
.ctrl button.on{background:var(--panel);color:var(--paper);border-color:var(--flux-d)}

/* capítulos */
.capitulos{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px}
.capbtn{text-align:left;border:1px solid var(--line);background:var(--deep);border-radius:10px;
  padding:12px 13px;cursor:pointer;display:grid;gap:4px;transition:.2s}
.capbtn:hover{border-color:var(--flux-d);transform:translateY(-1px)}
.capbtn.ativo{border-color:var(--flux);background:var(--panel)}
.capbtn .n{font:400 .7rem/1 'JetBrains Mono',monospace;color:var(--faint);letter-spacing:.1em}
.capbtn .t{font:500 .92rem/1.3 'Public Sans',sans-serif;color:var(--paper)}
.capbtn .d{font:400 .7rem/1 'JetBrains Mono',monospace;color:var(--dim);font-variant-numeric:tabular-nums}

/* texto de apoio */
.nota{margin-top:30px;max-width:74ch;color:var(--dim);font:400 .98rem/1.72 'Public Sans',sans-serif}
.nota b{color:var(--paper);font-weight:600}
.nota a{color:var(--flux);text-decoration:none;border-bottom:1px solid var(--flux-d)}
.nota h2{font:600 1.18rem/1.3 'Fraunces',Georgia,serif;color:var(--paper);margin:26px 0 8px}

@media (max-width:720px){
  .wrap{padding:16px 13px 44px}
  .legenda{bottom:34px;padding:0 40px}
  .capitulos{grid-template-columns:1fr 1fr}
}