/* ============================================================
   Frontier AI 模型架構 — 簡報樣式
   手繪溫暖感 · 米色紙張 · Fraunces 襯線 · 手寫標籤
   ============================================================ */

:root{
  /* palette */
  --bg:#f4ead5; --bg-deep:#ecdcbb; --paper:#fbf6e9; --paper-2:#f6eed9;
  --ink:#3a342a; --ink-soft:#6b5d4a; --ink-faint:#9c8c72;
  --coral:#e07a5f; --mustard:#e3a857; --sage:#81a684; --blue:#6a8caf;
  --pink:#cf8f8f; --plum:#8a6a8a;
  --line:#4a3f30; --line-soft:#b9a888;
  --shadow:6px 6px 0 rgba(58,52,42,.13);
  --shadow-lg:9px 9px 0 rgba(58,52,42,.16);
  --radius:8px;

  /* type scale @1920×1080 */
  --type-hero:104px; --type-title:64px; --type-subtitle:42px;
  --type-body:32px; --type-small:26px; --type-micro:24px; --type-label:31px;
  --type-num:150px;

  /* spacing */
  --pad-x:112px; --pad-top:92px; --pad-bottom:80px;
  --gap-title:40px; --gap-item:24px;

  --serif:"Fraunces",serif;
  --han:"Noto Serif TC",serif;
  --hand:"Caveat",cursive;
  --hand2:"Kalam",cursive;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

deck-stage:not(:defined){visibility:hidden}
deck-stage{display:block;background:#2a251d}

section{
  font-family:var(--han);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 82% -8%, rgba(227,168,87,.14), transparent 60%),
    radial-gradient(1000px 640px at -6% 108%, rgba(129,166,132,.13), transparent 60%),
    var(--bg);
  overflow:hidden;
  line-height:1.6;
}
/* paper grain */
section::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");
}
.slide{position:absolute;inset:0;padding:var(--pad-top) var(--pad-x) var(--pad-bottom);display:flex;flex-direction:column;z-index:2}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:900;line-height:1.08;letter-spacing:-.5px}
.eyebrow{font-family:var(--hand);font-size:var(--type-label);color:var(--coral);font-weight:700;letter-spacing:.4px;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:42px;height:3px;background:var(--coral);border-radius:2px}
.kicker{font-family:var(--serif);font-weight:700;font-size:var(--type-small);color:var(--ink-faint);letter-spacing:3px;text-transform:uppercase}

.title{font-size:var(--type-title);color:var(--ink)}
.title .en{font-family:var(--serif)}
.subtitle{font-size:var(--type-subtitle);font-family:var(--serif);font-weight:700;color:var(--ink-soft)}
.lead{font-size:var(--type-body);color:var(--ink-soft);max-width:1180px;text-wrap:pretty}
.small{font-size:var(--type-small)}
.micro{font-size:var(--type-micro);color:var(--ink-faint)}
.hand{font-family:var(--hand2)}
strong{color:var(--ink);font-weight:700}
.c-coral{color:var(--coral)} .c-mustard{color:#c98a2e} .c-sage{color:#5f8463}
.c-blue{color:var(--blue)} .c-plum{color:var(--plum)} .c-pink{color:var(--pink)}

/* slide header (architecture pages) */
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:var(--gap-title)}
.head-l{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
.evo{display:flex;flex-direction:column;gap:9px;align-items:flex-end;flex-shrink:0;font-family:var(--hand2);font-size:var(--type-micro);color:var(--ink-soft);text-align:right}
.evo .chip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:2px solid var(--line-soft);border-radius:999px;padding:7px 17px;box-shadow:3px 3px 0 rgba(58,52,42,.08);white-space:nowrap}
.evo .chip b{color:var(--ink);font-family:var(--serif);font-weight:700}
.evo .from b{color:var(--blue)} .evo .to b{color:var(--coral)}

/* ---------- cards ---------- */
.card{background:var(--paper);border:2.5px solid var(--line);border-radius:var(--radius);padding:34px 38px;box-shadow:var(--shadow);position:relative}
.card.tilt-l{transform:rotate(-.5deg)} .card.tilt-r{transform:rotate(.5deg)}
.tag{position:absolute;top:-20px;left:30px;font-family:var(--hand);font-weight:700;font-size:26px;padding:3px 18px;border-radius:6px;border:2.5px solid var(--line);background:var(--mustard);color:#fff;transform:rotate(-2deg);white-space:nowrap}
.tag.coral{background:var(--coral)} .tag.sage{background:var(--sage)} .tag.blue{background:var(--blue)} .tag.plum{background:var(--plum)}
.intuition{font-family:var(--hand2);font-size:36px;line-height:1.55;color:var(--ink);font-weight:400}

/* quote / blockquote */
.quote{font-family:var(--hand2);font-size:38px;line-height:1.5;color:var(--ink-soft)}

/* ---------- flow diagram ---------- */
.flow{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.flow.col{flex-direction:column;align-items:stretch}
.node{
  background:var(--paper);border:2.5px solid var(--line);border-radius:10px;
  padding:18px 22px;text-align:center;box-shadow:4px 4px 0 rgba(58,52,42,.10);
  font-size:var(--type-small);line-height:1.32;position:relative;
}
.node .nh{font-family:var(--serif);font-weight:700;font-size:26px;display:block}
.node .ns{font-size:24px;color:var(--ink-soft);display:block;margin-top:3px}
.node.coral{border-color:var(--coral);background:#fbeee9}
.node.sage{border-color:var(--sage);background:#eef5ef}
.node.blue{border-color:var(--blue);background:#eaf1f7}
.node.mustard{border-color:var(--mustard);background:#fbf2df}
.node.plum{border-color:var(--plum);background:#f3edf3}
.node.ghost{border-style:dashed;opacity:.55;box-shadow:none}
.node.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.node.solid .ns{color:var(--bg-deep)}
.arrow{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:38px;padding:0 14px}
.arrow.v{padding:8px 0;transform:rotate(90deg)}
.arrow b{font-weight:400}

/* ---------- stat numbers ---------- */
.bignum{font-family:var(--serif);font-weight:900;font-size:var(--type-num);line-height:.9;color:var(--coral);letter-spacing:-3px}
.statgrid{display:grid;gap:26px}
.stat{background:var(--paper);border:2.5px solid var(--line);border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow)}
.stat .v{font-family:var(--serif);font-weight:900;font-size:60px;line-height:1;color:var(--coral)}
.stat .k{font-size:var(--type-small);color:var(--ink-soft);margin-top:10px}

/* ---------- table ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--type-small);background:var(--paper);border:2.5px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{padding:18px 24px;text-align:left;border-bottom:2px solid var(--line-soft);vertical-align:top}
th{font-family:var(--serif);font-weight:700;background:var(--bg-deep);font-size:var(--type-small)}
tr:last-child td{border-bottom:none}
td .em{font-family:var(--serif);font-weight:700}

/* ---------- bullets ---------- */
.blist{list-style:none;display:flex;flex-direction:column;gap:var(--gap-item)}
.blist li{position:relative;padding-left:46px;font-size:var(--type-body);color:var(--ink-soft);text-wrap:pretty}
.blist li::before{content:"";position:absolute;left:6px;top:14px;width:16px;height:16px;background:var(--coral);border:2.5px solid var(--line);border-radius:4px;transform:rotate(8deg)}
.blist li.sage::before{background:var(--sage)} .blist li.blue::before{background:var(--blue)}
.blist li.mustard::before{background:var(--mustard)} .blist li.plum::before{background:var(--plum)}
.blist li b{color:var(--ink)}

/* formula chip */
.formula{display:inline-block;background:var(--paper-2);border:2.5px dashed var(--line-soft);border-radius:10px;padding:18px 32px;font-size:34px}

/* pill / label */
.pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--hand2);font-size:var(--type-small);background:var(--paper);border:2px solid var(--line-soft);border-radius:999px;padding:8px 20px;color:var(--ink-soft);white-space:nowrap}

/* dotted divider */
.ddiv{height:0;border-top:3px dashed var(--line-soft)}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.section-slide{justify-content:center}
.section-slide .snum{font-family:var(--serif);font-weight:900;font-size:300px;line-height:.8;color:var(--coral);opacity:.92;letter-spacing:-10px}
.section-slide .sname{font-size:84px;color:var(--ink);margin-top:6px}
.section-slide .slist{display:flex;gap:18px;flex-wrap:wrap;margin-top:38px}
.section-slide .slist .pill{font-family:var(--serif);font-weight:700;font-size:28px;background:var(--paper);border:2.5px solid var(--line);box-shadow:4px 4px 0 rgba(58,52,42,.1);color:var(--ink-soft)}
.section-slide .slist .pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ============================================================
   COVER
   ============================================================ */
.cover{justify-content:center}
.cover .hero{font-size:var(--type-hero);color:var(--ink);line-height:1.0}
.cover .hero .grad{
  font-family:var(--serif);font-weight:900;
  background:linear-gradient(100deg,var(--coral),var(--mustard),var(--plum),var(--coral));
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.cover .subhero{font-family:var(--hand2);font-size:40px;color:var(--ink-soft);margin-top:28px}

/* ============================================================
   ANIMATION — build-in (gated on active slide)
   base style = visible (print / reduced-motion safe)
   ============================================================ */
/* print / paused-timeline safety: never leave build elements hidden */
@media print{
  .b,.bx,.expert,.mbar,.sam-mask,.sam-dot,.denoise .noise{opacity:1!important;transform:none!important;animation:none!important}
  .denoise .noise{opacity:0!important}
}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .b{animation:bIn .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*.11s)}
  @keyframes bIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

  [data-deck-active] .bx{animation:bxIn .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*.1s)}
  @keyframes bxIn{from{opacity:0;transform:translateX(-26px) scale(.96)}to{opacity:1;transform:none}}

  /* cover gradient drift */
  [data-deck-active] .cover .grad{animation:gradDrift 9s ease infinite}
  @keyframes gradDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

  /* arrow draw pulse */
  [data-deck-active] .arrow.pulse{animation:arPulse 1.4s ease-in-out .6s infinite}
  @keyframes arPulse{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(7px);opacity:1}}
  [data-deck-active] .arrow.v.pulse{animation:arPulseV 1.4s ease-in-out .6s infinite}
  @keyframes arPulseV{0%,100%{transform:rotate(90deg) translateX(0);opacity:.55}50%{transform:rotate(90deg) translateX(7px);opacity:1}}
}

/* ---- Diffusion denoise canvas ---- */
.denoise{position:relative;border:3px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#5a6b7a}
.denoise .img{position:absolute;inset:0;background:
  radial-gradient(circle at 35% 38%,#f7c8a0,transparent 42%),
  radial-gradient(circle at 64% 56%,#e89b6e,transparent 46%),
  linear-gradient(135deg,#8fb6c9,#c98b6a 60%,#7a9b6e)}
.denoise .noise{position:absolute;inset:0;opacity:1;mix-blend-mode:normal;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px}
.denoise .lbl{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--hand2);font-size:24px;color:#fff;background:rgba(40,36,29,.55);padding:6px 0;z-index:3}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .denoise .noise{animation:denoise 4.2s ease-in-out .4s forwards}
  @keyframes denoise{0%{opacity:1}100%{opacity:0}}
  [data-deck-active] .denoise .sweep{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--coral);box-shadow:0 0 18px 4px rgba(224,122,95,.7);z-index:4;animation:sweep 4.2s ease-in-out .4s forwards}
  @keyframes sweep{0%{left:0}100%{left:100%;opacity:0}}
}
.denoise .sweep{display:none}
@media (prefers-reduced-motion:no-preference){[data-deck-active] .denoise .sweep{display:block}}

/* ---- MoE experts ---- */
.experts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.expert{background:var(--paper);border:2.5px solid var(--line-soft);border-radius:10px;padding:16px 12px;text-align:center;font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ink-faint);box-shadow:3px 3px 0 rgba(58,52,42,.07);transition:none}
.expert.on{border-color:var(--sage);background:#e7f2e8;color:#4d7351}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .expert.on{animation:expOn .5s ease both;animation-delay:1s}
  @keyframes expOn{from{box-shadow:3px 3px 0 rgba(58,52,42,.07);transform:scale(1)}50%{box-shadow:0 0 0 6px rgba(129,166,132,.35);transform:scale(1.06)}to{box-shadow:0 0 0 4px rgba(129,166,132,.3);transform:scale(1)}}
}

/* ---- RoPE rotation ---- */
.rope-vec{transform-origin:120px 120px}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .rope-vec{animation:ropeSpin 2.4s cubic-bezier(.5,0,.2,1) .5s both}
  @keyframes ropeSpin{from{transform:rotate(0deg)}to{transform:rotate(220deg)}}
}

/* ---- Flash tiling sweep ---- */
.fa-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:340px}
.fa-cell{aspect-ratio:1;background:var(--bg-deep);border:1.5px solid var(--line-soft);border-radius:3px}
.fa-sweep{position:absolute;left:0;top:0;width:81px;height:81px;border:3px solid var(--coral);border-radius:5px;background:rgba(224,122,95,.16);box-shadow:0 0 16px rgba(224,122,95,.5)}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .fa-sweep{animation:faSweep 3.4s ease-in-out .6s infinite}
  @keyframes faSweep{
    0%{left:0;top:0}
    20%{left:86px;top:0}
    40%{left:172px;top:86px}
    60%{left:258px;top:172px}
    80%{left:86px;top:258px}
    100%{left:0;top:0}
  }
}

/* ---- Mamba state bars ---- */
.mbars{display:flex;gap:9px;align-items:flex-end;height:150px}
.mbar{width:34px;background:var(--blue);border:2px solid var(--line);border-radius:6px 6px 0 0;height:40%}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .mbar{animation:mbar .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.5s + var(--i,0)*.18s)}
  @keyframes mbar{from{height:6%}to{}}
}

/* ---- SAM mask draw ---- */
.sam-mask{stroke-dasharray:1200;stroke-dashoffset:1200}
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .sam-mask{animation:samDraw 1.6s ease .6s forwards}
  @keyframes samDraw{to{stroke-dashoffset:0}}
  [data-deck-active] .sam-dot{animation:samDot .4s ease .3s both}
  @keyframes samDot{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
}

/* utility grids */
.row{display:flex;gap:var(--gap-item)}
.col{display:flex;flex-direction:column}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.fill{flex:1}
.center{align-items:center;justify-content:center}
.mt-a{margin-top:auto}