/* ===== base: tokens, reset, canvas, and the fixed chrome
   (brand bar, footer, chapter dots, key hints) ===== */
:root{
  --bg:#04070c;
  --panel:rgba(10,17,32,.72);
  --line:rgba(120,160,220,.16);
  --cyan:#00e5ff;
  --green:#2dff9e;
  --purple:#b14cff;
  --amber:#ffb545;
  --text:#eaf1ff;
  --muted:#8a98ba;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
}
#pitch-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%,transparent 45%,rgba(4,7,12,.55) 100%)}

/* ===== brand bar ===== */
.brand-bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,44px);pointer-events:none}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.14em;font-size:15px}
.brand-mark{width:22px;height:22px;flex:none;position:relative;border-radius:50%;border:2px solid var(--cyan)}
.brand-mark::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent)}
.brand-mark::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--purple);box-shadow:0 0 12px var(--purple)}
.brand .dot{color:var(--cyan)}
.brand-co{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ===== footer ===== */
.foot-bar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;gap:14px;
  padding:14px clamp(20px,4vw,44px);font-size:11.5px;color:var(--muted);pointer-events:none}
.foot-bar a{color:var(--cyan);text-decoration:none;pointer-events:auto}

/* ===== chapter dots ===== */
.dots{position:fixed;right:clamp(14px,2.6vw,30px);top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;gap:12px}
.dots button{
  width:10px;height:10px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);
  cursor:pointer;position:relative;transition:background .3s,border-color .3s,transform .3s;
}
.dots button.on{background:var(--cyan);border-color:var(--cyan);transform:scale(1.25);box-shadow:0 0 10px rgba(0,229,255,.7)}
.dots button:hover::after{
  content:attr(data-t);position:absolute;right:20px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:11px;color:var(--text);background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:4px 10px;backdrop-filter:blur(8px);
}

/* ===== prev / next buttons ===== */
.nav-btns{position:fixed;left:50%;bottom:48px;transform:translateX(-50%);z-index:22;display:flex;gap:14px}
.nav-btns button{
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);
  color:var(--text);font-size:21px;line-height:1;
  transition:border-color .25s,background .25s,transform .25s,opacity .25s;
}
.nav-btns button:hover:not(:disabled){border-color:var(--cyan);background:rgba(0,229,255,.12);transform:translateY(-2px)}
.nav-btns button:disabled{opacity:.25;cursor:default}

@media(max-width:700px){
  .brand-co{display:none}
  .foot-bar span{font-size:9.5px}
}