body{ font-family:'Inter', sans-serif; }

  /* ---------- background layer: drifts a fraction of the slide's travel, tinted per chapter ---------- */
  #bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
       --shift:0; --c1:#fb7185; --c2:#f59e0b; }
  body[data-theme=sky]     #bg{ --c1:#38bdf8; --c2:#0891b2; }
  body[data-theme=violet]  #bg{ --c1:#a78bfa; --c2:#c026d3; }
  body[data-theme=amber]   #bg{ --c1:#fbbf24; --c2:#f43f5e; }
  body[data-theme=emerald] #bg{ --c1:#34d399; --c2:#0d9488; }
  #bg .orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.16; will-change:transform;
            transition:transform 1.4s cubic-bezier(.22,1,.36,1), background 1.2s ease; }
  #bg .orb-a{ width:52vw; height:52vw; left:-14vw; top:-18vw; background:var(--c1);
              transform:translate3d(calc(var(--shift) * -9px), calc(var(--shift) * 3px), 0); }
  #bg .orb-b{ width:44vw; height:44vw; right:-16vw; bottom:-20vw; background:var(--c2);
              transform:translate3d(calc(var(--shift) * -16px), calc(var(--shift) * -5px), 0); }
  #bg .grain{ position:absolute; inset:0; opacity:.05;
              background-image:radial-gradient(rgba(255,255,255,.9) .6px, transparent .7px); background-size:26px 26px;
              transform:translate3d(calc(var(--shift) * -4px), 0, 0); transition:transform 1.4s cubic-bezier(.22,1,.36,1); }
  main{ position:relative; z-index:1; }

  /* ---------- 3D stage ---------- */
  main{ perspective:1600px; perspective-origin:50% 45%; }
  #slides-container{ transform-style:preserve-3d; }
  .slide-content-wrapper{ transform-style:preserve-3d; }

  /* whole-slide 3D transition, direction-aware */
  .enter-next{ animation: flyNext .6s cubic-bezier(.22,1,.36,1) both; }
  .enter-prev{ animation: flyPrev .6s cubic-bezier(.22,1,.36,1) both; }
  @keyframes flyNext{
    from{ opacity:0; transform:translate3d(140px,0,-460px) rotateY(26deg); }
    to  { opacity:1; transform:translate3d(0,0,0) rotateY(0deg); }
  }
  @keyframes flyPrev{
    from{ opacity:0; transform:translate3d(-140px,0,-460px) rotateY(-26deg); }
    to  { opacity:1; transform:translate3d(0,0,0) rotateY(0deg); }
  }

  /* ---------- builds: the deck's "scroll" ---------- */
  /* stepped elements keep whatever entrance they already have; it replays when the build reaches them */
  [data-step]{ animation: stepIn .55s cubic-bezier(.22,1,.36,1) both; }
  @keyframes stepIn{ from{ opacity:0; transform:translate3d(0,16px,0); } to{ opacity:1; transform:none; } }
  [data-step]:not(.is-on){ animation:none !important; opacity:0 !important; pointer-events:none; }
  [data-only]{ animation: stepIn .45s cubic-bezier(.22,1,.36,1) both; }
  [data-only]:not(.is-on){ display:none; }

  /* progressive highlighting inside a pinned visual */
  [data-hl]{ transition: opacity .4s ease, background-color .4s ease, box-shadow .4s ease; border-radius:6px; }
  .has-hl [data-hl]:not(.is-hl){ opacity:.32; }
  [data-hl].is-hl{ background:rgba(251,191,36,.13); box-shadow:0 0 0 6px rgba(251,191,36,.13); }

  /* inline knowledge check */
  .quiz-live [data-answer]{ cursor:pointer; }
  .quiz-live [data-answer]:hover{ background:rgba(255,255,255,.07); }
  [data-answer].is-correct{ background:rgba(52,211,153,.22) !important; box-shadow:0 0 0 6px rgba(52,211,153,.18) !important; opacity:1 !important; }
  [data-answer].is-wrong{ animation: shake .45s ease; background:rgba(244,63,94,.18) !important; }
  @keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
  .quiz-ask{ font-weight:700; color:#fde68a; font-size:1.1rem; }
  .quiz-fb{ min-height:1.4em; color:#6ee7b7; font-size:.9rem; margin-top:.5rem; }

  /* pinned visual + changing explanation */
  .story{ display:grid; gap:1.25rem; align-items:start; }
  @media (min-width:768px){ .story{ grid-template-columns: 1.15fr .85fr; gap:2.25rem; } }
  .story-side{ min-height:9rem; }
  .story-h{ font-weight:800; font-size:1.15rem; margin-bottom:.35rem; }
  .story-t{ color:#9ca3af; font-size:.9rem; line-height:1.55; }
  .story-kicker{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#fbbf24; font-weight:700; margin-bottom:.4rem; }

  /* editorial rows: the anti-card */
  .editorial{ border-top:1px solid rgba(255,255,255,.08); }
  .ed-row{ display:flex; gap:1.1rem; align-items:flex-start; padding:1.05rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .ed-num{ font-variant-numeric:tabular-nums; font-weight:900; font-size:.8rem; letter-spacing:.1em; color:#fbbf24; padding-top:.5rem; min-width:1.6rem; }
  .ed-num-warn{ color:#fb7185; }
  .ed-h{ font-weight:700; font-size:1.15rem; }
  .ed-t{ color:#9ca3af; font-size:.92rem; margin-top:.15rem; line-height:1.5; }

  /* large editorial statement */
  .statement{ font-size:clamp(1.9rem, 4.6vw, 3.6rem); font-weight:900; line-height:1.08; letter-spacing:-.01em; }
  .statement .accent{ background:linear-gradient(90deg,#fcd34d,#fb923c,#fb7185); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sub-statement{ font-size:clamp(1.05rem, 1.9vw, 1.35rem); color:#d1d5db; line-height:1.5; }

  /* chapter divider as a scene: ghost numeral behind, chapter colour rule */
  .divider{ position:relative; min-height:22rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .divider-ghost{ position:absolute; left:50%; top:50%; transform:translate(-50%,-56%); font-size:clamp(14rem, 34vw, 26rem); font-weight:900; line-height:1; letter-spacing:-.04em; opacity:.07; pointer-events:none; user-select:none; }
  .divider-rule{ width:56px; height:4px; border-radius:2px; margin:1.1rem auto 1.3rem; }

  /* two-column ledger: HR term -> app-brief term, no boxes */
  .ledger{ border-top:1px solid rgba(255,255,255,.1); }
  .ledger-row{ display:grid; grid-template-columns:1fr 2.5rem 1fr; align-items:center; gap:.5rem 1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
  @media (max-width:767px){ .ledger-row{ grid-template-columns:1fr; } .ledger-arrow{ display:none; } .ledger-l{ text-align:left !important; } }
  .ledger-l{ text-align:right; }
  .ledger-h{ font-weight:700; font-size:1.2rem; }
  .ledger-h.hi{ color:#fcd34d; }
  .ledger-t{ color:#9ca3af; font-size:.9rem; margin-top:.1rem; }
  .ledger-arrow{ color:#fbbf24; display:flex; justify-content:center; }

  /* typographic timeline: big durations, hairlines, no boxes */
  .timeline{ display:grid; gap:1.5rem; }
  @media (min-width:768px){ .timeline{ grid-template-columns:repeat(var(--n,3),1fr); gap:2rem; } }
  .tl-item{ border-top:2px solid rgba(255,255,255,.12); padding-top:1rem; }
  .tl-item.hi{ border-top-color:#fbbf24; }
  .tl-num{ font-size:clamp(2rem, 3.6vw, 3rem); font-weight:900; line-height:1; letter-spacing:-.02em; color:#fcd34d; }
  .tl-h{ font-weight:700; font-size:1.15rem; margin-top:.6rem; }
  .tl-t{ color:#9ca3af; font-size:.95rem; margin-top:.25rem; line-height:1.5; }

  /* illustrations */
  .art{ width:100%; height:auto; }
  .art-side{ display:none; }
  @media (min-width:768px){
    .statement-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; text-align:left; }
    .art-side{ display:block; }
  }
  .art-wm{ position:absolute; right:-1rem; top:-1rem; width:11rem; opacity:.07; pointer-events:none; }
  .art-bg{ position:absolute; left:50%; top:50%; width:min(46vw, 34rem); transform:translate(-50%,-52%); opacity:.09; pointer-events:none; }
  .exercise-frame{ position:relative; overflow:hidden; }
  /* small floating icon tiles that dress the hero slides */
  .deco{ position:absolute; width:2.75rem; height:2.75rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center;
         color:#fff; opacity:.55; animation: decoFloat 6s ease-in-out infinite; pointer-events:none; }
  .deco svg{ width:55%; height:55%; }
  @keyframes decoFloat{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-10px) rotate(6deg);} }
  .hero-stage{ position:relative; }
  @media (max-width:767px){ .deco{ display:none; } }
  .tl-icon{ width:2.25rem; height:2.25rem; border-radius:.6rem; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:.9rem; }
  .tl-icon svg{ width:55%; height:55%; }
  .ledger-ico{ display:inline-flex; width:1.9rem; height:1.9rem; border-radius:.5rem; align-items:center; justify-content:center; color:#fff; vertical-align:middle; margin-left:.6rem; }
  .ledger-ico svg{ width:60%; height:60%; }

  /* module recap */
  .recap{ display:grid; gap:1.5rem; }
  @media (min-width:768px){ .recap{ grid-template-columns:1fr 1fr; gap:3rem; } }
  .recap-col{ border-top:2px solid rgba(255,255,255,.12); padding-top:1.1rem; }
  .recap-label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; margin-bottom:.6rem; }
  .recap-t{ font-size:1.1rem; line-height:1.6; color:#e5e7eb; }

  /* the brief, annotated */
  .brief{ font-size:1.12rem; line-height:1.85; }
  .brief .part{ padding:.1em .3em; margin:0 -.05em; background:rgba(255,255,255,.035); }
  .quiz-live .brief .part{ text-decoration:underline dotted rgba(251,191,36,.7); text-underline-offset:5px; }
  .quiz-live .brief .part:hover{ background:rgba(251,191,36,.12); }
  .brief .before{ color:#9ca3af; font-style:italic; font-size:.9rem; }
  .brief-big{ font-size:clamp(1.5rem, 3.3vw, 2.4rem); font-weight:800; line-height:1.25; font-style:italic; color:#e5e7eb; }

  .pop-in{ opacity:0; animation: popIn3d .6s cubic-bezier(.34,1.25,.64,1) forwards; transform-style:preserve-3d; }
  @keyframes popIn3d{
    from{ opacity:0; transform:perspective(900px) rotateX(-42deg) translate3d(0,28px,-130px) scale(.92); }
    to  { opacity:1; transform:perspective(900px) rotateX(0deg) translate3d(0,0,0) scale(1); }
  }

  .rise-in{ opacity:0; animation: riseIn3d .6s cubic-bezier(.22,1,.36,1) forwards; transform-style:preserve-3d; }
  @keyframes riseIn3d{
    from{ opacity:0; transform:perspective(900px) rotateY(-38deg) translate3d(-44px,0,-100px); }
    to  { opacity:1; transform:perspective(900px) rotateY(0deg) translate3d(0,0,0); }
  }

  .float{ animation: floaty 3.5s ease-in-out infinite; }
  @keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

  /* hero tiles: continuous 3D tumble + drift, one keyframe so nothing fights */
  .hero3d{ animation: hero3d 7s ease-in-out infinite; transform-style:preserve-3d; }
  @keyframes hero3d{
    0%,100%{ transform:translateY(0) rotateY(-17deg) rotateX(10deg); }
    50%    { transform:translateY(-12px) rotateY(17deg) rotateX(-10deg); }
  }

  /* cards gain real depth on hover */
  .card3d{ transition:transform .35s cubic-bezier(.22,1,.36,1); transform-style:preserve-3d; }
  .card3d:hover{ transform:translateZ(34px) rotateX(5deg); }

  /* extruded 3D staircase (the automation ladder) */
  .stage3d{ perspective:1300px; perspective-origin:50% 25%; }
  .steps3d{ transform-style:preserve-3d; transform:rotateX(17deg); }
  .step3d{ position:relative; transform-style:preserve-3d; }
  .step3d::after{
    content:''; position:absolute; left:6px; right:6px; bottom:0; height:26px;
    transform-origin:bottom; transform:translateY(100%) rotateX(-76deg);
    background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,0));
    border-radius:0 0 14px 14px; pointer-events:none; transition:opacity .4s ease;
  }
  /* a level that hasn't been built yet has no riser either */
  .step3d:has(> [data-step]:not(.is-on))::after{ opacity:0; }

  /* ---------- chrome ---------- */
  .dot{ width:5px; height:5px; border-radius:999px; border:0; padding:0; cursor:pointer; opacity:.45;
        background:#6b7280; transition: width .3s, opacity .3s; }
  .dot[data-theme=sky]{ background:#38bdf8; } .dot[data-theme=violet]{ background:#a78bfa; }
  .dot[data-theme=amber]{ background:#fbbf24; } .dot[data-theme=rose]{ background:#fb7185; } .dot[data-theme=emerald]{ background:#34d399; }
  .dot:hover{ opacity:.9; }
  .dot.is-active{ width:22px; opacity:1; }
  #slide-jump{ display:flex; justify-content:flex-end; gap:4px; }
  #slide-jump i{ display:block; width:10px; height:3px; border-radius:2px; background:#374151; transition:background .3s; }
  #slide-jump i.on{ background:#fbbf24; }
  :focus-visible{ outline:2px solid #fbbf24; outline-offset:3px; border-radius:4px; }
  footer .tabular-nums{ white-space:nowrap; }
  @media (max-width:640px){
    #slide-tag{ display:none; }
    footer .justify-center{ width:auto; }
    #slide-jump{ width:auto; }
  }
  button:disabled{ cursor:not-allowed; }

  /* safety valves: OS reduced-motion, and press A to kill all motion live */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  }
  body.no-anim *, body.no-anim *::before, body.no-anim *::after{ animation:none !important; transition:none !important; }
  body.no-anim .pop-in, body.no-anim .rise-in, body.no-anim [data-step], body.no-anim .hero3d, body.no-anim .enter-next, body.no-anim .enter-prev{ opacity:1 !important; transform:none !important; }
  body.no-anim [data-step]:not(.is-on){ opacity:0 !important; }

  .glow-pulse{ animation: glowPulse 2.6s ease-in-out infinite; }
  @keyframes glowPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,168,45,.35);} 50%{ box-shadow:0 0 0 14px rgba(217,168,45,0);} }

  .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
  .d5{animation-delay:.45s}.d6{animation-delay:.55s}.d7{animation-delay:.65s}.d8{animation-delay:.75s}
  /* a build reveals on the click, not after a stagger delay */
  [data-step].d1,[data-step].d2,[data-step].d3,[data-step].d4,[data-step].d5,[data-step].d6,[data-step].d7,[data-step].d8{ animation-delay:0s; }

  .icon-badge{
    width:56px;height:56px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .icon-badge > div{display:flex;}
  .icon-badge svg{width:100%;height:100%;}

  .exercise-ribbon{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.35);
    color:#6ee7b7; font-weight:700; font-size:.75rem; letter-spacing:.06em;
    text-transform:uppercase; padding:6px 14px; border-radius:999px;
  }
  .exercise-frame{
    border:1.5px dashed rgba(52,211,153,.45);
    background:rgba(16,185,129,.06);
    border-radius:18px;
  }
  .chapter-num{
    font-size:5rem; line-height:1; font-weight:900; opacity:.18;
  }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background:#3a3f4b; border-radius:4px; }

/* game slide: Play / Leaderboard toggle */
.game-tab{background:rgba(31,41,55,.8);color:#d1d5db;border:1px solid #374151}
.game-tab.is-on{background:#38bdf8;color:#0f172a;border-color:#38bdf8}

/* Cikgu Zekriah — webinar avatar: tap or ArrowDown to narrate, Ctrl+Shift+Z to show/hide */
.cz{position:fixed;right:18px;bottom:78px;z-index:40}
html[data-cikgu="hide"] .cz{display:none}
.cz-fab{position:relative;width:96px;height:96px;padding:3px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#f59e0b,#f43f5e);box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.cz-fab:hover{transform:scale(1.06)}
.cz-img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 20%;display:block;border:2px solid #fff;box-sizing:border-box;transition:opacity .25s ease}
.cz-img.swap{opacity:.4}
.cz-fab::before,.cz-fab::after{content:'';position:absolute;inset:-3px;border-radius:50%;pointer-events:none;--v:var(--voice,0);transition:transform 80ms linear,opacity 120ms linear}
.cz-fab::before{border:3px solid #fbbf24;opacity:calc(var(--v)*1.1);transform:scale(calc(1 + var(--v)*.32))}
.cz-fab::after{border:3px solid #fb7185;opacity:calc(var(--v)*.85);transform:scale(calc(1 + var(--v)*.55))}

/* cover slide: can't move on without a name */
@keyframes whoNudge{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.who-nudge{animation:whoNudge .4s ease;border-color:#fb7185 !important;box-shadow:0 0 0 3px rgba(251,113,133,.35)}
body.on-cover footer{display:none}

/* live voice: blue pulsing rings while sparring, amber while connecting */
.cz-fab.sparring{background:linear-gradient(135deg,#38bdf8,#2563eb);animation:czSpar 1.6s ease-in-out infinite}
.cz-fab.sparring::before{border-color:#38bdf8;opacity:1;animation:czRing1 1.6s ease-in-out infinite}
.cz-fab.sparring::after{border-color:#2563eb;opacity:.8;animation:czRing2 1.6s ease-in-out infinite}
.cz-fab.sparring.connecting{background:linear-gradient(135deg,#fbbf24,#d97706)}
.cz-fab.sparring.connecting::before{border-color:#fbbf24}.cz-fab.sparring.connecting::after{border-color:#d97706}
@keyframes czSpar{0%,100%{box-shadow:0 8px 24px rgba(56,189,248,.4)}50%{box-shadow:0 8px 36px rgba(56,189,248,.85)}}
@keyframes czRing1{0%,100%{opacity:1;transform:scale(1.18)}50%{opacity:.35;transform:scale(1.45)}}
@keyframes czRing2{0%,100%{opacity:.8;transform:scale(1.35)}50%{opacity:.2;transform:scale(1.7)}}