@font-face{font-family:"NotoTC";src:url("assets/font/NotoSansTC-VF.ttf") format("truetype");font-weight:100 900;font-display:block}
:root{
  --bg:#060607;--ink:#F4F2EC;--dim:#A3A29C;--mute:#6E6D69;--line:rgba(255,255,255,.12);--hair:rgba(255,255,255,.07);
  --amber:#F2A93B;--blue:#68C6F2;--red:#F0625B;--gray:#8C919A;--slate:#59616C;--green:#7FD1A6;
  --f:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI","NotoTC","Microsoft JhengHei","PingFang TC",sans-serif;
  --ex:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;overflow:hidden;color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#canvas{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;
  background:radial-gradient(1400px 900px at 18% -10%,rgba(255,255,255,.055),transparent 60%),radial-gradient(1200px 800px at 110% 120%,rgba(104,198,242,.035),transparent 60%),var(--bg)}
#canvas:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);z-index:50}
.slide{text-wrap:pretty;position:absolute;inset:0;opacity:0;transition:opacity .55s ease;isolation:isolate}
.slide.in{opacity:1}
.slide.out{opacity:0;transition:opacity .35s ease}
/* header */
.topline{position:absolute;left:108px;top:78px;width:0;height:4px;background:var(--amber);transition:width 1s var(--ex)}
.slide.in .topline{width:92px}
.kicker{position:absolute;left:108px;top:104px;font-size:24px;letter-spacing:.2em;color:var(--dim);font-weight:500;text-transform:uppercase}
.title{position:absolute;left:104px;top:146px;right:108px;font-size:66px;line-height:1.18;font-weight:600;letter-spacing:-.01em}
.title.en{font-size:54px;font-weight:600;letter-spacing:-.005em}
.title.sm{font-size:46px}
.src{position:absolute;right:96px;bottom:40px;font-size:19px;color:var(--mute);letter-spacing:.02em;text-align:right;max-width:1200px;z-index:5}
.pgno{position:absolute;left:108px;bottom:40px;font-size:17px;color:var(--mute);letter-spacing:.12em;font-variant-numeric:tabular-nums;z-index:5}
.hdr{opacity:0;transform:translateY(18px);filter:blur(8px);transition:opacity .9s var(--ex),transform .9s var(--ex),filter .9s var(--ex)}
.slide.in .hdr{opacity:1;transform:none;filter:none}
.slide.in .hdr.d1{transition-delay:.08s}.slide.in .hdr.d2{transition-delay:.16s}
/* blocks */
.blk{position:absolute}
.fx{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity 1s var(--ex),transform 1s var(--ex),filter 1s var(--ex)}
.fx.on{opacity:1;transform:none;filter:none}
.fx.fade{transform:none}
.fx.zoom{transform:scale(1.035)}
.fx.zoom.on{transform:none}
.noanim,.noanim *{transition:none!important;animation:none!important}
.t{font-size:34px;line-height:1.5;color:var(--ink)}
.t.dim{color:var(--dim)}
.t.en{font-size:30px;line-height:1.45}
.t b,.t strong{font-weight:600}
.a{color:var(--amber)}.bl{color:var(--blue)}.r{color:var(--red)}.g{color:var(--gray)}.dm{color:var(--dim)}.gr{color:var(--green)}
/* stat */
.stat .num{font-size:150px;line-height:1;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .lbl{margin-top:22px;font-size:30px;color:var(--dim);line-height:1.4}
.stat .rule{height:2px;width:0;margin-top:26px;background:currentColor;opacity:.5;transition:width 1.2s var(--ex) .2s}
.stat.on .rule{width:120px}
/* note */
.note{border-left:4px solid var(--amber);padding:6px 0 6px 30px;font-size:32px;line-height:1.5;color:var(--ink)}
.note.blue{border-color:var(--blue)}.note.red{border-color:var(--red)}.note.gray{border-color:var(--gray)}
/* card */
.card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:34px 38px;backdrop-filter:blur(6px);box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.card .ct{font-size:24px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
.card .cb{font-size:30px;line-height:1.5;color:var(--ink)}
.card .cb.en{font-size:27px}
.card.topbar{border-top:3px solid var(--c,var(--amber))}
/* paper image */
.paper{background:#fff;border-radius:10px;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;display:flex;align-items:center;justify-content:center}
.paper img{width:100%;height:100%;object-fit:contain;display:block}
.paper.pad{padding:14px}
.bare img{width:100%;height:100%;object-fit:contain;display:block}
.photo{border-radius:12px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.65,0,.35,1)}
.wipe.on{clip-path:inset(0 0 0 0)}
.wipey{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s cubic-bezier(.65,0,.35,1)}
.wipey.on{clip-path:inset(0 0 0 0)}
/* table */
table.tb{width:100%;border-collapse:collapse;font-size:27px}
.tb th{font-weight:600;color:var(--dim);text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:22px;letter-spacing:.06em}
.tb td{padding:15px 18px;border-bottom:1px solid var(--hair);vertical-align:middle;line-height:1.3}
.tb td.n,.tb th.n{text-align:right;font-variant-numeric:tabular-nums}
.tb td.c,.tb th.c{text-align:center}
.tb tr{opacity:0;transform:translateX(-18px);transition:opacity .7s var(--ex),transform .7s var(--ex)}
.tb tr.on{opacity:1;transform:none}
.tb tr.hl td{background:rgba(242,169,59,.10)}
.tb tr.hlr td{background:rgba(240,98,91,.10)}
.tb tr.grp-w td{font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.tb tr.grp td{color:var(--dim);font-size:22px;letter-spacing:.06em;padding-top:20px;border-bottom:none}
/* flow */
.flow{display:flex;align-items:stretch;gap:0;height:100%}
.fbox{flex:1;position:relative;border-radius:16px;padding:28px 26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ex),transform .8s var(--ex)}
.fbox.on{opacity:1;transform:none}
.fbox .ft{font-size:31px;line-height:1.38;font-weight:600}
.fbox .fs{font-size:23px;line-height:1.45;color:var(--dim);margin-top:12px}
.fbox.solid{border:none}
.farr{width:74px;flex:0 0 74px;display:flex;align-items:center;justify-content:center}
.farr svg{width:52px;height:26px;overflow:visible}
.farr path{stroke:var(--dim);stroke-width:2.5;fill:none;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ex)}
.farr.on path{stroke-dashoffset:0}
/* list */
.lst .it{display:flex;gap:30px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateX(-20px);transition:opacity .8s var(--ex),transform .8s var(--ex)}
.lst .it.on{opacity:1;transform:none}
.lst .no{font-size:54px;font-weight:300;color:var(--amber);width:60px;font-variant-numeric:tabular-nums}
.lst .tx{font-size:38px;line-height:1.4}
/* svg chart text */
svg text{font-family:var(--f)}
.ax{fill:var(--mute);font-size:21px}
.axl{fill:var(--dim);font-size:22px;letter-spacing:.04em}
.grid{stroke:var(--hair);stroke-width:1}
.base{stroke:rgba(255,255,255,.35);stroke-width:1.5}
.glow{filter:drop-shadow(0 0 10px var(--gc,rgba(242,169,59,.55)))}
/* misc */
.pill{display:inline-block;padding:8px 18px;border-radius:999px;font-size:22px;letter-spacing:.1em;font-weight:600}
.hlbox{position:absolute;pointer-events:none}
.hlbox rect{fill:none;stroke:var(--red);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 12px rgba(240,98,91,.85))}
.hlbox.on rect{transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1);stroke-dashoffset:0}
.cover-h1{font-size:96px;line-height:1.1;font-weight:600;letter-spacing:-.02em}
/* overlays */
#prog{position:fixed;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--blue));width:0;transition:width .5s var(--ex);z-index:100;opacity:.75}
#notes{position:fixed;left:0;right:0;bottom:0;max-height:38vh;overflow:auto;background:rgba(10,10,12,.94);border-top:1px solid var(--line);padding:22px 36px;font-size:19px;line-height:1.7;color:#ddd;display:none;z-index:200;font-family:var(--f);white-space:pre-wrap}
#notes.show{display:block}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:300;display:none;overflow:auto;padding:40px}
#ov.show{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-content:start}
#ov .o{border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;font-size:14px;line-height:1.45;color:#ccc;min-height:86px;font-family:var(--f)}
#ov .o:hover,#ov .o.cur{border-color:var(--amber);color:#fff}
#ov .o b{display:block;color:var(--amber);font-size:13px;margin-bottom:6px;letter-spacing:.1em}
#help{position:fixed;right:18px;top:14px;font-size:12px;color:#555;z-index:120;font-family:var(--f);transition:opacity 1s;opacity:1}
/* theme C: monochrome editorial + single coral */
.thC{--bg:#0A0A0A;--amber:#F5F5F3;--blue:#A9A9A6;--red:#E5554F;--gray:#6B6B69;--slate:#3A3A3A;--ink:#F5F5F3;--dim:#9C9C99;--mute:#666664;--green:#C9C9C6}
.thC #canvas{background:#0A0A0A}
.thC .topline{background:var(--red)}
.thC svg *,.thC .fill{filter:none!important;box-shadow:none!important}
.thC .card{background:transparent;box-shadow:none;border:none;border-top:1px solid rgba(255,255,255,.22);border-radius:0;padding:28px 0 0}
.thC .card.topbar{border-top:2px solid var(--c)}
.thC .fbox{border-radius:4px}
.thC .stat .num{font-weight:200}
.thC .title{font-weight:500}
.thC #prog{background:var(--red)}
.thC .note{border-left-color:var(--red)}
.thC .note.blue,.thC .note.gray{border-left-color:#777}
#black{position:fixed;inset:0;background:#000;z-index:400;display:none}

/* count-up landing: soft glow pulse so the number is the focal point */
@keyframes numpop{0%{text-shadow:0 0 0 transparent;transform:scale(1)}35%{text-shadow:0 0 28px currentColor;transform:scale(1.045)}100%{text-shadow:0 0 0 transparent;transform:scale(1)}}
.numpop{animation:numpop .9s cubic-bezier(.16,1,.3,1);transform-origin:center}
span.numpop{display:inline-block}
@media (prefers-reduced-motion:reduce){.numpop{animation:none}}

/* cover, direction 3: the old hypothesis fades to cool grey; only "Died" lights up in amber */
.cv-past{color:#7E8693}
.cv-died{color:var(--amber)}
.on .cv-died{animation:cvDied 1.1s cubic-bezier(.16,1,.3,1) .7s both}
@keyframes cvDied{0%{color:var(--ink);text-shadow:none}55%{color:var(--amber);text-shadow:0 0 34px rgba(242,169,59,.45)}100%{color:var(--amber);text-shadow:0 0 0 transparent}}
.noanim .cv-died{animation:none}
@media (prefers-reduced-motion:reduce){.on .cv-died{animation:none}}