/* ---------- STAGE (fixed 1280×720, scaled to fit) ---------- */
  #stage{position:fixed;left:50%;top:50%;width:1280px;height:720px;
    transform:translate(-50%,-50%);perspective:1600px}
  .slide{position:absolute;inset:0;padding:64px 84px;background:var(--paper);color:var(--ink);
    opacity:0;pointer-events:none;overflow:hidden;line-height:1.55;
    transform:translateX(100px) translateZ(-180px) rotateY(6deg);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .slide.past{transform:translateX(-100px) translateZ(-180px) rotateY(-6deg);
    transition-duration:.55s;transition-timing-function:cubic-bezier(.3,0,.8,.15)}
  .slide::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(ellipse 120% 90% at 50% 42%,transparent 55%,rgba(12,20,26,.28) 100%)}
  .slide.dark::after,.slide.divider::after{
    background:radial-gradient(ellipse 120% 90% at 50% 42%,transparent 50%,rgba(0,0,0,.5) 100%)}
  .slide.cur{opacity:1;pointer-events:auto;transform:none}
  .slide.dark{background:var(--ink);color:var(--paper)}
  .notes{display:none}

  

/* ---------- HUD ---------- */
  #bartrack{position:fixed;left:0;right:0;bottom:0;height:16px;z-index:45;cursor:pointer}
  #bartrack::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
    background:rgba(192,151,58,.22)}
  #bar{position:absolute;left:0;bottom:0;height:4px;background:var(--brass-lite);width:0;
    transition:width .3s ease,height .15s ease;pointer-events:none}
  #bartrack:hover::before{height:9px}
  #bartrack:hover #bar{height:9px}
  #counter{position:fixed;right:16px;bottom:16px;font-family:var(--mono);font-size:14px;
    color:rgba(192,151,58,.95);z-index:40}
  #hint{position:fixed;left:16px;bottom:16px;font-family:var(--mono);font-size:12.5px;
    color:rgba(143,160,164,.7);z-index:40}

  @media(max-width:640px){
    #hint{display:none}
    #counter{left:16px;right:16px;text-align:center}
  }



/* ---------- NOTES PANEL ---------- */
  #notespanel{position:fixed;left:0;right:0;bottom:0;max-height:34vh;overflow:auto;z-index:60;
    background:rgba(10,16,20,.94);color:#DCE3E1;font-size:16px;line-height:1.7;
    padding:16px 24px 20px;border-top:2px solid var(--brass);display:none}
  #notespanel .nlbl{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--brass-lite);
    margin-bottom:6px}
  body.notes-on #notespanel{display:block}

  

/* ---------- OVERVIEW ---------- */
  #ov{position:fixed;inset:0;background:rgba(10,16,20,.96);z-index:80;overflow:auto;
    padding:44px;display:none;grid-template-columns:repeat(auto-fill,304px);gap:20px;
    justify-content:center;align-content:start}
  body.ov-on #ov{display:grid}
  .thumb{width:304px;height:171px;position:relative;cursor:pointer;border-radius:4px;overflow:hidden;
    border:1px solid rgba(192,151,58,.35);background:var(--paper)}
  .thumb.cur{outline:3px solid var(--brass-lite)}
  .thumb .mini{width:1280px;height:720px;transform:scale(.2375);transform-origin:top left;
    position:absolute;top:0;left:0;pointer-events:none}
  .thumb .mini .slide{opacity:1!important;transform:none!important;position:absolute;inset:0}
  .thumb .mini .frag{opacity:1!important;transform:none!important}
  .thumb .mini *{animation:none!important}
  .thumb .num{position:absolute;right:6px;bottom:4px;font-family:var(--mono);font-size:12px;
    color:var(--brass-lite);background:rgba(0,0,0,.5);padding:1px 7px;border-radius:3px;z-index:2}