/* 竹中演講 v2 — same fonts and palette as ../deck, designed on a 1920×1080 stage scaled to fit. */
@font-face { font-family: "Huninn"; src: url("fonts/huninn-subset.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "NotoBlack"; src: url("fonts/notoblack-subset.woff2") format("woff2"); font-display: block; }
:root {
  --bg: #f6f5f1; --panel: #fff; --ink: #1c1c1c; --muted: #555; --line: #d9d6cf;
  --hot: #ffcf33; --red: #c0392b; --orange: #e0662a; --blue: #1b8fc4;
  --dog: #fce48b; --capoo: #a9e7fb; --pink: #f9bfda; --mint: #c9f0d5;
  --sans: "Huninn", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
  --num: "NotoBlack", "Noto Sans TC", "PingFang TC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: var(--sans); color: var(--ink); font-synthesis: none; }
h1, h2, h3, p { margin: 0; font-weight: normal; }

/* ---------- stage ---------- */
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center; background: var(--bg); overflow: hidden; }
section.slide {
  position: absolute; inset: 0; padding: 60px 100px; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center;
}
section.slide.on { display: flex; animation: slide-in .35s ease-out; }
@keyframes slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- type (Huninn has one weight; a light stroke makes it read from the back row) ---------- */
.t1 { font-size: 120px; line-height: 1.15; letter-spacing: .02em; }
.t2 { font-size: 92px; line-height: 1.2; letter-spacing: .02em; }
.t3 { font-size: 68px; line-height: 1.28; }
.sub { font-size: 52px; color: var(--muted); line-height: 1.35; }
.t1, .t2, .t3, .chip, .raise, .tbl, .box, .lbl, .stamp, .case { -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; }
.sub { -webkit-text-stroke: .02em currentColor; }
.huge { font: 240px/1 var(--num); letter-spacing: -.02em; }
.big  { font: 150px/1 var(--num); letter-spacing: -.01em; }
.num  { font-family: var(--num); -webkit-text-stroke: 0; }
.unit { font-family: var(--sans); font-size: .5em; letter-spacing: .02em; -webkit-text-stroke: .03em currentColor; margin-left: .08em; }
mark { background: linear-gradient(transparent 52%, rgba(255,207,51,.85) 52%); color: inherit; padding: 0 .06em; }
.c-cha { color: #1e9e5a; } .c-kou { color: #7b3fe4; }
.c-red { color: var(--red); } .c-orange { color: var(--orange); } .c-blue { color: var(--blue); } .c-muted { color: var(--muted); }
.ming { color: var(--blue); } .hua { color: var(--orange); }
.src { position: absolute; right: 40px; bottom: 22px; font-size: 24px; color: #8f8a80; text-align: right; -webkit-text-stroke: 0; }

/* slide title pinned to the top so content can use the rest */
.slide.top { justify-content: center; padding-top: 190px; padding-bottom: 50px; }
.slide.top > h2.t2 { position: absolute; top: 50px; left: 0; right: 0; }

/* ---------- images: framed comic panels ---------- */
.art, .photo { display: block; border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 12px 0 var(--ink); background: #fff; object-fit: cover; max-width: 100%; flex: none; }

/* full-bleed photo with a card on top */
.slide.bleed { padding: 0; }
.bleed > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed > .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.05) 30%, rgba(20,20,20,.55) 100%); }
.bleed > :not(.bg):not(.shade) { position: relative; }
.slide.bleed > p.src { position: absolute; }

.row { display: flex; gap: 60px; align-items: center; justify-content: center; width: 100%; }
.col { display: flex; flex-direction: column; gap: 26px; align-items: center; }

/* ---------- cards / chips ---------- */
.card { background: var(--panel); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); padding: 36px 64px; }
.chip { white-space: nowrap; display: inline-block; border: 5px solid var(--ink); border-radius: 999px; padding: 12px 44px; font-size: 60px; background: var(--panel); box-shadow: 0 8px 0 var(--ink); }
.chip.dog { background: var(--dog); } .chip.capoo { background: var(--capoo); } .chip.pink { background: var(--pink); }
.chip.hot { background: var(--hot); } .chip.mint { background: var(--mint); }
.raise { font-size: 50px; background: var(--hot); border: 5px solid var(--ink); border-radius: 999px; padding: 10px 44px; box-shadow: 0 7px 0 var(--ink); }

/* ---------- tables ---------- */
.tbl { border-collapse: separate; border-spacing: 0; font-size: 64px; line-height: 1.25; background: var(--panel);
  border: 5px solid var(--ink); border-radius: 26px; box-shadow: 0 10px 0 var(--ink); overflow: hidden; }
.tbl th, .tbl td { padding: 18px 36px; border-bottom: 3px solid var(--line); text-align: center; white-space: nowrap; }
.tbl th { background: var(--dog); font-weight: normal; border-bottom: 5px solid var(--ink); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td + td, .tbl th + th { border-left: 3px solid var(--line); }
.tbl th + th { border-left-color: rgba(0,0,0,.18); }
.tbl .rowh { background: #faf7ef; text-align: left; }
.tbl.sm { font-size: 54px; } .tbl.sm th, .tbl.sm td { padding: 16px 30px; }
.tbl.xs { font-size: 50px; } .tbl.xs th, .tbl.xs td { padding: 14px 24px; }
.tbl td.ok { background: var(--mint); } .tbl td.bad { background: var(--pink); }
.tbl td.neg { background: var(--red); color: #fff; }
.tbl .n { font-family: var(--num); -webkit-text-stroke: 0; }
.tbl tr.f { transform: none; }
.tbl th.capoo { background: var(--capoo); } .tbl th.pink { background: var(--pink); } .tbl th.mint { background: var(--mint); }
.tcap { font-size: 54px; margin-bottom: 18px; }

/* ---------- phone mockup (ticket page) ---------- */
.phone { width: 420px; height: 720px; flex: none; border: 12px solid var(--ink); border-radius: 56px; background: #fff; box-shadow: 0 12px 0 rgba(0,0,0,.22);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 54px 26px 40px; position: relative; overflow: hidden; }
.phone::before { content: ""; position: absolute; top: 14px; left: 50%; width: 110px; height: 22px; margin-left: -55px; background: var(--ink); border-radius: 99px; }
.phone .ev { font-size: 40px; line-height: 1.3; -webkit-text-stroke: .02em currentColor; }
.phone .left { font-size: 40px; color: var(--muted); }
.phone .left b { display: block; font: 150px/1.05 var(--num); color: var(--red); }
.phone .buy { font-size: 46px; background: var(--hot); border: 5px solid var(--ink); border-radius: 999px; padding: 10px 40px; box-shadow: 0 6px 0 var(--ink); -webkit-text-stroke: .03em currentColor; }
.phone .spin { width: 150px; height: 150px; border-radius: 50%; border: 18px solid #e6e1d6; border-top-color: var(--blue); }
.who { font-size: 60px; -webkit-text-stroke: .03em currentColor; }

/* ---------- boxes and arrows ---------- */
.box { border: 5px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); background: var(--panel); padding: 24px 46px; font-size: 64px; white-space: nowrap; }
.box.capoo { background: var(--capoo); } .box.dog { background: var(--dog); } .box.pink { background: var(--pink); } .box.mint { background: var(--mint); } .box.hot { background: var(--hot); }
.box small { display: block; font-size: 38px; color: var(--muted); -webkit-text-stroke: .02em currentColor; }
.arrow { font: 80px/1 var(--sans); color: var(--muted); flex: none; }
.flow { display: flex; align-items: center; gap: 30px; justify-content: center; }

/* a dashed frame that groups two steps into one action */
.atom { position: relative; border: 7px dashed var(--red); border-radius: 40px; padding: 70px 46px 40px; display: flex; flex-direction: column; gap: 30px; align-items: center; }
.atom .lbl { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: var(--bg); color: var(--red); font-size: 54px; padding: 0 22px; white-space: nowrap; }

.stamp { display: inline-block; font-size: 64px; color: var(--red); border: 7px solid var(--red); border-radius: 18px; padding: 6px 30px; transform: rotate(-4deg); background: rgba(255,255,255,.9); }

/* image left, text right */
section.slide.split { flex-direction: row; gap: 70px; text-align: left; }
.split > .art { width: 1020px; height: auto; }
.split > .txt { flex: 1; display: flex; flex-direction: column; gap: 34px; align-items: flex-start; }
.case { display: flex; align-items: center; gap: 22px; font-size: 52px; }
.case .k { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 5px solid var(--ink); display: grid; place-items: center; font: 46px var(--num); -webkit-text-stroke: 0; background: var(--capoo); }
.case.worst .k { background: var(--pink); }

/* server ledger for the order-id slide */
.ledger { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.ledger .hd { font-size: 46px; color: var(--muted); }
.pkt { font: 64px var(--num); -webkit-text-stroke: 0; background: var(--hot); border: 5px solid var(--ink); border-radius: 18px; padding: 6px 26px; box-shadow: 0 6px 0 var(--ink); white-space: nowrap; }
.pkt.alt { background: var(--pink); }
.lane { display: flex; align-items: center; gap: 26px; font-size: 58px; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.lane .tag { width: 230px; text-align: right; color: var(--muted); flex: none; }

/* ---------- fragments ---------- */
.f { opacity: 0; transition: opacity .35s ease, transform .35s ease; transform: translateY(16px); }
.f.on { opacity: 1; transform: none; }
tr.f { transform: none; }

/* ---------- chrome ---------- */
#progress { position: absolute; left: 0; bottom: 0; height: 10px; background: var(--hot); transition: width .3s; }
#black { position: fixed; inset: 0; background: #000; display: none; z-index: 50; }
body.blackout #black { display: block; }
body.shot section.slide.on { animation: none; }
body.shot .f { transition: none !important; }

/* overview (press G) */
body.overview #stage { display: none; }
#ov { display: none; position: fixed; inset: 0; overflow: auto; padding: 30px; background: #e9e6df;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; z-index: 40; }
body.overview #ov { display: grid; }
#ov a { display: block; background: var(--bg); border: 3px solid var(--ink); border-radius: 12px; padding: 14px; font: 20px var(--sans); color: var(--ink); text-decoration: none; min-height: 90px; }
#ov a.cur { background: var(--hot); }
#ov a b { color: var(--muted); margin-right: 8px; }

/* ---------- chat window mockup (AI prompt slide) ---------- */
.chat { width: 1180px; flex: none; background: var(--panel); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 12px 0 var(--ink); overflow: hidden; text-align: left; }
.chat-bar { display: flex; align-items: center; gap: 12px; padding: 16px 26px; background: #ece8df; border-bottom: 4px solid var(--ink); }
.chat-bar .dot { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: var(--pink); }
.chat-bar .dot:nth-child(2) { background: var(--dog); } .chat-bar .dot:nth-child(3) { background: var(--mint); }
.chat-name { margin-left: 18px; font-size: 34px; color: var(--muted); -webkit-text-stroke: .02em currentColor; }
.chat-name { display: inline-flex; align-items: center; gap: 12px; }
.chat-ico { width: 40px; height: 40px; }
.chat-body { padding: 30px 36px 34px; display: flex; flex-direction: column; gap: 26px; }
.bubble { font-size: 40px; line-height: 1.4; -webkit-text-stroke: .02em currentColor; }
.bubble.me { align-self: flex-end; background: #e9e6df; border-radius: 30px; padding: 14px 34px; font-size: 46px; }
.bubble.ai { display: flex; flex-direction: column; gap: 16px; }
.code { margin: 0; background: #1f2430; color: #e6e1cf; border-radius: 20px; padding: 24px 30px; font: 36px/1.45 "DejaVu Sans Mono", Menlo, Consolas, monospace; white-space: pre; -webkit-text-stroke: 0; }
.code .kw { color: #ffa759; } .code .st { color: #bae67e; } .code .nm { color: #ffcc66; } .code .cm { color: #a9e7fb; font-family: var(--sans); }

/* both phones press 立即購買 at the same moment */
.clock { font: 120px/1 var(--num); letter-spacing: .02em; background: var(--panel); border: 5px solid var(--ink); border-radius: 24px; box-shadow: 0 10px 0 var(--ink); padding: 18px 34px; }
.phone .buy { position: relative; z-index: 1; transition: transform .2s, box-shadow .2s, background .2s; }
.phone .tap { position: absolute; left: 50%; bottom: -12px; width: 190px; height: 190px; margin-left: -95px; border-radius: 50%; background: rgba(224,102,42,.22); border: 6px solid var(--orange); opacity: 0; transform: scale(.5); z-index: 0; transition: opacity .3s, transform .45s; pointer-events: none; }
.phone.on .buy { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); background: var(--orange); color: #fff; }
.phone.on .tap { opacity: 1; transform: scale(1.25); }
body.shot .phone .buy, body.shot .phone .tap { transition: none; }

/* ---------- sequence diagram: phone ↔ server, time flows down ---------- */
.seq { --ph: 130px; --sv: 1010px; --w: 1140px; position: relative; width: 1700px; display: flex; flex-direction: column; gap: 14px; }
.seq::before, .seq::after { content: ""; position: absolute; top: 90px; bottom: -10px; border-left: 5px dashed #b9b3a6; }
.seq::before { left: var(--ph); } .seq::after { left: var(--sv); }
.seqhead { display: grid; grid-template-columns: var(--w) 1fr; position: relative; height: 96px; margin-bottom: 10px; }
.seqhead .actor { position: absolute; top: 0; transform: translateX(-50%); font-size: 54px; background: var(--capoo); border: 5px solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink); padding: 8px 30px; white-space: nowrap; -webkit-text-stroke: .03em currentColor; z-index: 1; }
.seqhead .actor:nth-child(1) { left: var(--ph); }
.seqhead .actor:nth-child(2) { left: var(--sv); background: var(--dog); }
.seqhead .ledh { position: absolute; left: calc(var(--w) + 30px); top: 14px; font-size: 46px; color: var(--muted); -webkit-text-stroke: .02em currentColor; }
.seqrow { display: grid; grid-template-columns: var(--w) 1fr; align-items: center; min-height: 112px; }
.seqrow.f { transform: none; }
.msg { position: relative; margin-left: var(--ph); width: calc(var(--sv) - var(--ph)); height: 100px; text-align: center; font-size: 50px; -webkit-text-stroke: .03em currentColor; }
.msg span { position: relative; top: 0; background: var(--bg); padding: 0 16px; }
.msg::before { content: ""; position: absolute; left: 0; right: 0; top: 78px; border-top: 7px solid var(--ink); }
.msg::after { content: ""; position: absolute; top: 66px; border: 15px solid transparent; }
.msg.r::after { right: -6px; border-left: 26px solid var(--ink); border-right: 0; }
.msg.l::after { left: -6px; border-right: 26px solid var(--ink); border-left: 0; }
.msg.lost::before { left: 50%; border-top: 7px dashed var(--red); }
.msg.lost::after { display: none; }
.msg.lost { color: var(--red); }
.msg .x { position: absolute; left: calc(50% - 50px); top: 44px; font: 72px/1 var(--sans); font-style: normal; color: var(--red); -webkit-text-stroke: .04em currentColor; }
.msg .pk, .led .pk, .pnote .pk { font: 48px var(--num); -webkit-text-stroke: 0; background: var(--hot); border: 4px solid var(--ink); border-radius: 12px; padding: 0 12px; }
.pnote { justify-self: start; margin-left: 30px; font-size: 48px; background: var(--panel); border: 4px solid var(--ink); border-radius: 18px; padding: 10px 26px; -webkit-text-stroke: .03em currentColor; white-space: nowrap; }
.led { padding-left: 30px; font-size: 48px; text-align: left; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.led:not(:empty) { background: var(--panel); border: 4px solid var(--ink); border-radius: 18px; padding: 10px 24px; margin-left: 30px; justify-self: start; }
.led.bad { background: var(--pink); color: var(--red); } .led.ok { background: var(--mint); }
.pnote, .seqhead .actor { position: relative; z-index: 1; }
.seqhead .actor { position: absolute; }
.msg.lost span { left: 25%; }
.msg.lost .x { left: calc(50% - 46px); }

/* ---------- servers, phones, database, locks ---------- */
.ocrow { display: flex; align-items: center; gap: 26px; height: 150px; }
.mphone { width: 64px; height: 112px; border: 7px solid var(--ink); border-radius: 16px; background: #fff; flex: none; position: relative; }
.mphone::before { content: ""; position: absolute; left: 50%; top: 6px; width: 22px; height: 6px; margin-left: -11px; border-radius: 9px; background: var(--ink); }
.who-s { width: 130px; font-size: 56px; -webkit-text-stroke: .03em currentColor; }
.mei { color: #b04aa8; } .jie { color: #2f8f4e; }
.srv { position: relative; width: 470px; height: 130px; flex: none; border: 6px solid var(--ink); border-radius: 22px; background: #3a3f4b; box-shadow: 0 8px 0 var(--ink);
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 70px; color: #fff; }
.srv::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 26px; background: repeating-linear-gradient(#7ee08a 0 10px, transparent 10px 22px); border-radius: 4px; }
.srv-n { font-size: 46px; -webkit-text-stroke: .02em currentColor; }
.badge-left { font-size: 40px; background: var(--hot); color: var(--ink); border: 4px solid var(--ink); border-radius: 14px; padding: 2px 16px; -webkit-text-stroke: .02em currentColor; }
.shared-db .srv, .slide[data-id="shared-db"] .srv { width: 330px; height: 110px; }
.ocres { display: flex; align-items: center; gap: 26px; }
.fan line { stroke-linecap: round; }
.db { position: relative; width: 340px; height: 330px; flex: none; background: var(--capoo); border: 6px solid var(--ink); border-radius: 50% / 46px; box-shadow: 0 10px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-top: 40px; }
.db::before { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; height: 92px; border: 6px solid var(--ink); border-radius: 50%; background: #c9f1fd; }
.db span { font-size: 52px; -webkit-text-stroke: .03em currentColor; }
.db b { font: 72px var(--num); color: var(--red); }
/* CSS padlock */
.lk { display: inline-block; position: relative; width: 44px; height: 36px; background: var(--hot); border: 5px solid var(--ink); border-radius: 8px; margin: 22px 14px 0 0; vertical-align: middle; flex: none; }
.lk::before { content: ""; position: absolute; left: 4px; right: 4px; top: -30px; height: 30px; border: 5px solid var(--ink); border-bottom: 0; border-radius: 18px 18px 0 0; }
.lk.big { width: 110px; height: 90px; border-width: 8px; border-radius: 16px; margin: 60px 0 0; }
.lk.big::before { left: 12px; right: 12px; top: -72px; height: 72px; border-width: 9px; border-radius: 40px 40px 0 0; }
.lk.s { width: 22px; height: 18px; border-width: 3px; border-radius: 4px; margin: 14px 0 0; }
.lk.s::before { left: 2px; right: 2px; top: -15px; height: 15px; border-width: 3px; border-radius: 9px 9px 0 0; }
.lkcell { white-space: nowrap; }
.queue { display: flex; align-items: center; gap: 22px; height: 260px; }
.qline { display: flex; gap: 10px; }
.qd { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); opacity: .75; }
.qd:nth-child(n+8) { opacity: .45; } .qd:nth-child(n+12) { opacity: .25; }
.qmore { font-size: 44px; color: var(--muted); white-space: nowrap; -webkit-text-stroke: .02em currentColor; }
.lkgrid { display: grid; grid-template-columns: repeat(20, 30px); gap: 6px 8px; height: 260px; align-content: center; }
.flow.sm .box { font-size: 46px; padding: 18px 30px; }
.flow.sm .box small { font-size: 34px; }
.flow.sm .arrow { font-size: 60px; }
.flow.sm { gap: 20px; }

.srv-n, .badge-left { white-space: nowrap; }
.slide[data-id="own-count"] .srv { width: 430px; }
.dbtag { position: absolute; top: calc(100% + 34px); left: 50%; transform: translateX(-50%); font-size: 50px; -webkit-text-stroke: .03em currentColor; }
.dbtag.f { transform: translateX(-50%); }

/* 附註: the formal term next to a plain-language analogy — small, grey, English */
.term { display: block; font: 34px/1.2 -apple-system, "Segoe UI", Helvetica, Arial, var(--sans); color: #8f8a80; letter-spacing: .02em; -webkit-text-stroke: 0; margin-top: 6px; }
.term.inline { display: inline; margin: 0 0 0 .4em; font-size: .45em; vertical-align: middle; }

/* ===== video section ===== */
.calc { font-size: 46px; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.calc .num { font-size: 1.15em; }
.logo { height: .8em; vertical-align: -.08em; margin-right: .15em; }
.feedin { display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto auto; align-items: center; gap: 34px 22px; }
.feedin .chip { text-align: center; }
.feedin .join { grid-column: 4; grid-row: 1 / span 2; display: flex; align-items: center; gap: 22px; }
/* video player mock with a quality menu */
.player { position: relative; width: 1000px; height: 600px; flex: none; border: 6px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 12px 0 var(--ink); background: #000; }
.player > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.player .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: flex; align-items: center; gap: 24px; padding: 0 26px; color: #fff; font-size: 44px; }
.player .prog { flex: 1; height: 8px; background: #e33; border-radius: 4px; box-shadow: inset -560px 0 0 rgba(255,255,255,.35); }
.player .menu { position: absolute; right: 20px; bottom: 92px; width: 300px; background: rgba(28,28,28,.92); border-radius: 18px; padding: 14px 0; color: #fff; text-align: left; }
.player .menu p { font: 36px/1.45 var(--sans); padding: 0 30px; -webkit-text-stroke: 0; }
.player .menu .mh { color: #aaa; font-size: 30px; }
.player .menu .on { color: var(--hot); }
/* 20 people, one spinning */
.ppl { display: grid; grid-template-columns: repeat(5, 90px); gap: 24px; }
.pp { width: 90px; height: 90px; border-radius: 50%; background: var(--capoo); border: 5px solid var(--ink); position: relative; }
.pp.spin { background: var(--pink); }
.pp.spin::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 9px solid rgba(0,0,0,.12); border-top-color: var(--red); }
/* two zones */
.zone { width: 720px; border: 6px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); padding: 30px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.zone.dog { background: var(--dog); } .zone.capoo { background: var(--capoo); }
.zone .zh { font-size: 72px; -webkit-text-stroke: .03em currentColor; }
.zone .zl { font-size: 60px; color: var(--red); -webkit-text-stroke: .03em currentColor; }
.zone .zs { font-size: 46px; -webkit-text-stroke: .02em currentColor; }
.srvs { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 12px; }
.srv.mini { width: 380px; height: 70px; padding: 0; }
.srv.mini::before { top: 14px; bottom: 14px; }
.srv.mini.busy::after { content: ""; position: absolute; left: 70px; right: 24px; top: 24px; bottom: 24px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--orange) 0 26px, transparent 26px 32px); }
/* MRTG panels */
.mrtgbox { background: #fff; border: 5px solid var(--ink); border-radius: 20px; box-shadow: 0 10px 0 var(--ink); padding: 10px; }
.mrtgbox svg { display: block; }
/* stacked bars */
.sbar { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 30px; }
.sbar .sl { font-size: 56px; text-align: right; -webkit-text-stroke: .03em currentColor; }
.sbar .st { display: flex; height: 130px; border: 5px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 0 var(--ink); }
.sbar .st > div { display: grid; place-items: center; font: 54px var(--num); }
.sbar .hot { background: var(--orange); color: #fff; } .sbar .cold { background: #e6e1d6; color: var(--muted); }
.sbar .hot + .cold { border-left: 5px solid var(--ink); }
/* machines as bars: blue = playback, orange = transcode, dashed = idle reserve */
.legend { display: flex; gap: 50px; font-size: 44px; -webkit-text-stroke: .02em currentColor; }
.legend span { display: flex; align-items: center; gap: 14px; }
.legend i { width: 44px; height: 44px; border-radius: 8px; border: 4px solid var(--ink); }
.pb { background: var(--blue); } .tc { background: var(--orange); }
.idle { background: repeating-linear-gradient(45deg, #fff 0 8px, #e6e1d6 8px 16px) !important; }
.rackp { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--panel); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); padding: 26px 36px; }
.rackp .rh { font-size: 56px; -webkit-text-stroke: .03em currentColor; }
.rackp .rc { font-size: 56px; -webkit-text-stroke: .03em currentColor; }
.rackp .rc .num { font-size: 1.5em; }
.rack { display: flex; gap: 12px; align-items: flex-end; }
.mbar { width: 62px; height: 250px; border: 5px solid var(--ink); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.mbar i { flex: 1; } .mbar i + i { border-top: 3px solid var(--ink); }
/* left-right contrast cards */
.vs { display: flex; align-items: center; gap: 50px; }
.vcard { width: 700px; border: 6px solid var(--ink); border-radius: 34px; box-shadow: 0 12px 0 var(--ink); padding: 36px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vcard.pink { background: var(--pink); } .vcard.capoo { background: var(--capoo); }
.vcard .vh { font-size: 80px; -webkit-text-stroke: .03em currentColor; }
.vcard .vn { font-size: 54px; background: var(--panel); border: 4px solid var(--ink); border-radius: 999px; padding: 4px 34px; -webkit-text-stroke: .03em currentColor; }
.vcard .vl { font-size: 54px; -webkit-text-stroke: .03em currentColor; }
.vcard .vv { font-size: 48px; line-height: 1.5; text-align: center; -webkit-text-stroke: .03em currentColor; }
.vcard .ok, .vcard .no { font-size: 1.3em; } .vcard .ok { color: #1e7e46; } .vcard .no { color: var(--red); }
.vsx { font: 90px var(--num); color: var(--muted); }
/* CDN map */
.mapbox { border: 5px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 10px 0 var(--ink); line-height: 0; }
.mapsvg { display: block; width: 1600px; height: auto; }
/* CDN diagram */
.cdn .box { font-size: 52px; }
.cdn .arrow { font-size: 90px; }
/* live segments */
.segs { display: flex; gap: 14px; }
.seg { width: 140px; height: 120px; border: 5px solid var(--ink); border-radius: 18px; background: var(--panel); display: grid; place-items: center; font: 52px var(--num); color: var(--muted); }
.seg.play { background: var(--capoo); color: var(--ink); box-shadow: 0 0 0 10px var(--hot); }
.seg.new { background: var(--pink); color: var(--ink); }
.seglab { position: relative; width: 1526px; height: 60px; font-size: 44px; -webkit-text-stroke: .03em currentColor; }
.seglab .pl { position: absolute; left: 924px; transform: translateX(-50%); color: var(--blue); white-space: nowrap; }
.seglab .nw { position: absolute; right: 0; color: var(--red); white-space: nowrap; transform: translateX(15%); }
/* short-video feed mock */
.feed { width: 420px; height: 720px; flex: none; border: 12px solid var(--ink); border-radius: 56px; background: #111; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 8px; box-shadow: 0 12px 0 rgba(0,0,0,.22); }
.clip { flex: 1; border-radius: 26px; position: relative; }
.clip.c1 { background: linear-gradient(135deg, #f9bfda, #a9e7fb); }
.clip.c2 { background: linear-gradient(135deg, #fce48b, #c9f0d5); }
.clip.c3 { background: linear-gradient(135deg, #a9e7fb, #c9a9fb); }
.clip .ai { position: absolute; left: 18px; bottom: 18px; font-size: 34px; background: rgba(0,0,0,.65); color: #fff; padding: 4px 18px; border-radius: 12px; -webkit-text-stroke: 0; }

/* ===== AI section ===== */
/* answer streaming in, one token at a time */
.stream .tk { opacity: 0; animation: tk-in .01s linear forwards; }
@keyframes tk-in { to { opacity: 1; } }
.stream .caret { display: inline-block; width: 18px; height: 40px; background: var(--ink); vertical-align: -6px; margin-left: 4px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.bubble.ai.stream { display: block; font-size: 46px; line-height: 1.55; min-height: 230px; }
.vcard.dog { background: var(--dog); }
/* time bars: read vs compute */
.tbar { display: grid; grid-template-columns: 170px 560px auto; align-items: center; gap: 22px; }
.tbar .tl { font-size: 48px; text-align: right; -webkit-text-stroke: .03em currentColor; }
.tbar .tt { height: 70px; border: 5px solid var(--ink); border-radius: 14px; background: #fff; overflow: hidden; }
.tbar .tt i { display: block; height: 100%; background: var(--orange); min-width: 4px; }
.tbar .tv { font-size: 48px; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.tbar.big { grid-template-columns: 190px 440px auto; }
.tbar.big .tt { height: 90px; }
.tbar.big .tv .num { font-size: 1.4em; }
/* logos row */
.logos { display: flex; gap: 70px; align-items: center; }
.logos img { height: 64px; }
/* horizontal money bars */
.hbar { display: grid; grid-template-columns: 330px 1fr; align-items: center; gap: 30px; }
.hbar .hl { font-size: 54px; text-align: right; -webkit-text-stroke: .03em currentColor; line-height: 1.2; }
.hbar .hl small { display: block; font-size: 36px; color: var(--muted); -webkit-text-stroke: .02em currentColor; }
.hbar .ht { height: 130px; }
.hbar .ht i { display: flex; align-items: center; justify-content: flex-end; padding-right: 30px; height: 100%; border: 5px solid var(--ink); border-radius: 20px; box-shadow: 0 8px 0 var(--ink); font: 60px var(--num); font-style: normal; white-space: nowrap; }
/* supply chain */
.reactors { position: relative; width: 1080px; flex: none; }
.reactors .art { width: 100%; height: auto; }
.applogos { position: absolute; right: 60px; bottom: 70px; display: flex; gap: 24px; background: rgba(255,255,255,.88); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 8px 0 var(--ink); padding: 18px 26px; }
.applogos img { width: 110px; height: 110px; object-fit: contain; }
.chain { display: flex; align-items: stretch; gap: 18px; }
.chain .arrow { align-self: center; font-size: 70px; }
.chain .link { width: 390px; background: var(--panel); border: 5px solid var(--ink); border-radius: 28px; box-shadow: 0 10px 0 var(--ink); padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.chain .lh { font-size: 52px; background: var(--hot); border: 4px solid var(--ink); border-radius: 999px; padding: 4px 30px; -webkit-text-stroke: .03em currentColor; white-space: nowrap; }
.chain .link img { height: 70px; margin: 10px 0; }
.chain .lt { font-size: 36px; white-space: nowrap; line-height: 1.4; text-align: center; -webkit-text-stroke: .02em currentColor; }
.chain .lt.big { font-size: 64px; -webkit-text-stroke: .03em currentColor; }

/* ===== LINE section ===== */
.vcard.mint { background: var(--mint); }
.vcard.sm3 { width: 500px; padding: 30px 26px; gap: 22px; justify-content: center; }
.vcard.sm3 .vn, .vcard.sm3 .vl { white-space: nowrap; }
.vcard.sm3 .vh { font-size: 60px; }
.vcard .vs2 { font-size: 34px; color: var(--muted); text-align: center; -webkit-text-stroke: .02em currentColor; }
.vcard .vh .term { font-size: 34px; }
.vlogo { width: 130px; height: 130px; }
.chat.sm { width: 560px; }
.chat.sm .chat-body { padding: 26px 28px; }
.chat.sm .bubble.me { font-size: 42px; padding: 12px 28px; white-space: nowrap; }
.chat.sm .bubble.ai { font-size: 38px; }
/* polling dialog */
.ask { display: flex; gap: 20px; align-items: center; font-size: 40px; -webkit-text-stroke: .02em currentColor; }
.ask .q { background: #fff; border: 4px solid var(--ink); border-radius: 18px; padding: 4px 20px; }
.ask .a { color: var(--muted); }
.pipe { display: flex; align-items: center; width: 520px; margin: 26px 0; }
.pipe i { flex: 1; height: 12px; background: var(--ink); border-radius: 6px; margin: 0 14px; }
.pipe .srvdot { width: 90px; height: 70px; background: #3a3f4b; border: 5px solid var(--ink); border-radius: 12px; }
/* one server vs 70 */
.srv1 { width: 380px; height: 300px; background: #3a3f4b; border: 6px solid var(--ink); border-radius: 26px; box-shadow: 0 10px 0 var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.srv1 b { font-size: 100px; line-height: 1; }
.srv1 span { font-size: 44px; -webkit-text-stroke: .02em currentColor; }
.rack70 { display: grid; grid-template-columns: repeat(10, 64px); gap: 14px; }
.rack70 i { height: 44px; background: #3a3f4b; border: 4px solid var(--ink); border-radius: 8px; position: relative; }
.rack70 i::before { content: ""; position: absolute; left: 8px; top: 9px; bottom: 9px; width: 8px; border-radius: 3px; background: #7ee08a; }
/* new-year timeline */
.tline { display: flex; gap: 0; width: 1500px; position: relative; }
.tline::before { content: ""; position: absolute; left: 120px; right: 120px; top: 34px; height: 10px; background: var(--ink); border-radius: 5px; }
.tline .tn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.tline .tn::before { content: ""; width: 60px; height: 60px; border-radius: 50%; border: 6px solid var(--ink); background: var(--capoo); margin-top: 6px; }
.tline .tn.hot::before { background: var(--hot); }
.tline .tn b { font: 64px var(--num); }
.tline .tn span { font-size: 44px; text-align: center; line-height: 1.35; -webkit-text-stroke: .02em currentColor; }
/* push incident lanes */
.plane { display: flex; align-items: center; gap: 30px; white-space: nowrap; }
.plane .pl { width: 330px; text-align: center; font-size: 46px; border: 5px solid var(--ink); border-radius: 20px; padding: 14px 0; box-shadow: 0 6px 0 var(--ink); -webkit-text-stroke: .03em currentColor; }
.plane .pl.mint { background: var(--mint); } .plane .pl.pink { background: var(--pink); }
.plane .pq.ok i { background: var(--mint); }
.plane .pq { width: 440px; display: flex; gap: 8px; align-items: center; }
.plane .pq i { width: 40px; height: 60px; background: var(--orange); border: 4px solid var(--ink); border-radius: 8px; flex: none; }
.plane .pq i.x { background: var(--red); transform: translateY(26px) rotate(25deg); opacity: .75; }
.plane .pres { font-size: 50px; -webkit-text-stroke: .03em currentColor; }
.plane .pres.ok { color: #1e7e46; } .plane .pres.no { color: var(--red); }
/* LINE-style chat */
.linechat { width: 720px; height: 460px; flex: none; border: 6px solid var(--ink); border-radius: 30px; overflow: hidden; box-shadow: 0 12px 0 var(--ink); background: #8cabd9; display: flex; flex-direction: column; text-align: left; }
.lhead { background: #fff; padding: 16px 28px; font-size: 40px; border-bottom: 4px solid var(--ink); -webkit-text-stroke: .02em currentColor; }
.lbody { flex: 1; padding: 30px 26px; display: flex; flex-direction: column; gap: 26px; }
.lmsg { display: flex; align-items: flex-end; gap: 12px; }
.lmsg.me { justify-content: flex-end; }
.lb { font-size: 44px; background: #fff; border-radius: 30px; padding: 14px 28px; -webkit-text-stroke: .02em currentColor; }
.lmsg.me .lb { background: #06c755; color: #fff; }
.lread { font-size: 26px; color: #f4f6fb; text-align: right; line-height: 1.3; -webkit-text-stroke: 0; }
.retry { width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font: 34px var(--num); }
.linechat.tall { width: 720px; height: 760px; }
.lmsg.them { align-items: flex-start; }
.lav { width: 64px; height: 64px; border-radius: 50%; background: var(--dog); border: 4px solid var(--ink); flex: none; }
.lname { font-size: 28px; color: #f4f6fb; margin: 0 0 6px 8px; -webkit-text-stroke: 0; }
.lmsg.them .lb { display: inline-block; line-height: 1.45; font-size: 40px; white-space: nowrap; }
.acard { width: 1000px; border: 6px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); padding: 26px 40px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.acard.pink { background: var(--pink); } .acard.mint { background: var(--mint); }
.acard .ah { font-size: 60px; -webkit-text-stroke: .03em currentColor; }
.acard .ah .term { font-size: 34px; }
.acard .ad { font-size: 44px; white-space: nowrap; -webkit-text-stroke: .02em currentColor; }
.acard .ok, .acard .no { font-size: 1.2em; } .acard .ok { color: #1e7e46; } .acard .no { color: var(--red); }
/* message numbers */
.msgline { display: flex; gap: 22px; }
.msgline span { font: 60px var(--num); padding: 14px 34px; border: 5px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 0 8px 0 var(--ink); }
.msgline .hot { background: var(--hot); }
.msgline .next { background: var(--mint); border-style: dashed; }

/* ---------- level badge (data-badge is added by tools/deckparts.py from order.txt) ---------- */
section.slide[data-badge]::before { content: attr(data-badge); position: absolute; top: 26px; left: 32px; z-index: 3;
  font-size: 36px; line-height: 1; padding: 12px 26px; border: 4px solid var(--ink); border-radius: 999px; background: var(--panel);
  box-shadow: 0 5px 0 var(--ink); -webkit-text-stroke: .02em currentColor; white-space: nowrap; }
section.slide[data-badge^="第 1"]::before { background: var(--pink); }
section.slide[data-badge^="第 2"]::before { background: var(--capoo); }
section.slide[data-badge^="第 3"]::before { background: var(--mint); }
section.slide[data-badge^="第 4"]::before { background: var(--dog); }

/* ---------- level cover / settlement ---------- */
.slide.lv1 { --lv: var(--pink); } .slide.lv2 { --lv: var(--capoo); } .slide.lv3 { --lv: var(--mint); } .slide.lv4 { --lv: var(--dog); }
.slide.lv-cover, .slide.lv-done { background: color-mix(in srgb, var(--lv) 38%, var(--bg)); }
/* 4:3 projector: tint the letterbox to match the level page */
body:has(.slide.lv1.on:is(.lv-cover, .lv-done)) { background: color-mix(in srgb, var(--pink) 38%, var(--bg)); }
body:has(.slide.lv2.on:is(.lv-cover, .lv-done)) { background: color-mix(in srgb, var(--capoo) 38%, var(--bg)); }
body:has(.slide.lv3.on:is(.lv-cover, .lv-done)) { background: color-mix(in srgb, var(--mint) 38%, var(--bg)); }
body:has(.slide.lv4.on:is(.lv-cover, .lv-done)) { background: color-mix(in srgb, var(--dog) 38%, var(--bg)); }
.slide.lv-cover[data-badge]::before, .slide.lv-done[data-badge]::before { display: none; }
.lv-n { font-size: 64px; line-height: 1; background: var(--lv); border: 6px solid var(--ink); border-radius: 999px; padding: 14px 52px; box-shadow: 0 8px 0 var(--ink); white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.lv-name { font-size: 180px; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
/* cover: this level's island, cropped from images/gen/levels-map.webp (1536×1024); --x/--y/--w = crop box in image px */
.lv-isle { position: relative; width: 440px; height: 330px; flex: none; border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 12px 0 var(--ink);
  background: #fffcf3 url("images/gen/levels-map.webp") no-repeat;
  --s: calc(430 / var(--w)); background-size: calc(1536px * var(--s)) auto; background-position: calc(-1px * var(--x) * var(--s)) calc(-1px * var(--y) * var(--s)); }
.lv1 .lv-isle { --x: 40; --y: 590; --w: 440; }
.lv2 .lv-isle { --x: 388; --y: 440; --w: 420; }
.lv3 .lv-isle { --x: 680; --y: 272; --w: 440; }
.lv4 .lv-isle { --x: 962; --y: 56; --w: 560; }
.lv-isle .lv-n { position: absolute; left: 50%; bottom: -64px; transform: translateX(-50%); }
.lv-cover .chat.sm { width: 760px; }
.lv-cover .chat.sm .bubble.me { font-size: 50px; }
.lv-cover .bubble.ai { align-items: flex-start; padding: 6px 0 10px; }
.stamp.ok { color: #1e7e46; border-color: #1e7e46; }
.lv-q { font-size: 96px; line-height: 1.2; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.lv-q .num { font-size: 1.25em; }
.lv-twist { font-size: 64px; background: var(--panel); border: 6px solid var(--ink); border-radius: 26px; box-shadow: 0 10px 0 var(--ink); padding: 18px 50px; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
/* CS map (images/gen/cs-islands.webp): opening cs-map, settlements l1-done…l4-done, closing cs-map-end share one framing.
   Each island key sets --x/--y/--rx/--ry (its lit area) and --cx/--cy (its chip), in % of the frame. */
.csmap { position: relative; width: 1230px; height: 820px; flex: none; border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 12px 0 var(--ink); background: #fff; overflow: hidden; }
.csmap > img { display: block; width: 100%; height: 100%; }
.csmap .k-os   { --x: 20%; --y: 19%; --rx: 14%; --ry: 17%; --cx: 21%; --cy: 30%; }
.csmap .k-db   { --x: 50%; --y: 14%; --rx: 14%; --ry: 14%; --cx: 50%; --cy: 25%; }
.csmap .k-net  { --x: 80%; --y: 17%; --rx: 17%; --ry: 17%; --cx: 80%; --cy: 30%; }
.csmap .k-arch { --x: 18%; --y: 45%; --rx: 15%; --ry: 13%; --cx: 18%; --cy: 58%; }
.csmap .k-algo { --x: 81%; --y: 46%; --rx: 16%; --ry: 13%; --cx: 82%; --cy: 58%; }
.csmap .k-sec  { --x: 23%; --y: 76%; --rx: 16%; --ry: 15%; --cx: 22%; --cy: 90%; }
.csmap .k-gfx  { --x: 73%; --y: 74%; --rx: 16%; --ry: 16%; --cx: 75%; --cy: 90%; }
.csmap .k-ai   { --x: 48%; --y: 46%; --rx: 16%; --ry: 16%; --cx: 47%; --cy: 55%; }
.csmap .chip { position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); font-size: 50px; line-height: 1.1; padding: 8px 30px; display: flex; align-items: center; gap: 8px; }
.csmap .chip.k-ai { font-size: 64px; }
.csmap .chip:has(i) { padding-right: 14px; }
.csmap .chip i { font: 30px/1 var(--num); font-style: normal; -webkit-text-stroke: 0; width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--ink); display: grid; place-items: center; }
.csmap .chip i:first-of-type { margin-left: 8px; }
.csmap .chip i.d1 { background: var(--pink); } .csmap .chip i.d2 { background: var(--capoo); } .csmap .chip i.d3 { background: var(--mint); } .csmap .chip i.d4 { background: var(--dog); }
/* settlement: whole map faded, this level's islands lit in full colour */
.csmap.dim > img { filter: grayscale(1); opacity: .32; }
.csmap .lit { position: absolute; inset: 0; background: url("images/gen/cs-islands.webp") 0 0 / 100% 100%;
  -webkit-mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 72%, transparent 100%);
  mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 72%, transparent 100%); }
.csmap.dim .chip { opacity: .35; box-shadow: none; }
.csmap.dim .chip.on { opacity: 1; background: var(--lv); box-shadow: 0 8px 0 var(--ink); }
.csmap.dim .chip.on::after { content: "✓"; color: #1e7e46; margin-left: .15em; }

/* breadth slides: matching example, GPU timeline */
.match-art { width: 430px; height: auto; }
.match .tbl td.res { min-width: 200px; }
.gpu-calc { display: flex; align-items: center; gap: 50px; }
.gpu-calc .art { height: 230px; width: auto; }
.gtl { display: flex; align-items: stretch; gap: 26px; }
.gtl .arrow { align-self: center; }
.gcard { width: 470px; background: var(--panel); border: 5px solid var(--ink); border-radius: 28px; box-shadow: 0 10px 0 var(--ink); padding: 18px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gcard img { width: 100%; height: 170px; object-fit: contain; }
.gcard .gy { font: 60px/1.1 var(--num); }
.gcard .gl { font-size: 44px; line-height: 1.3; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.gcard .gs { font-size: 36px; color: var(--muted); white-space: nowrap; -webkit-text-stroke: .02em currentColor; }

/* ---------- animated queues (level 2; moving items generated by tools/queue_anim.py) ----------
   Loops start whenever the slide is shown (display:none stops them). ?shot pauses each lane at its --snap. */
.anim { position: relative; flex: none; }
.anim .ql { position: absolute; inset: 0; pointer-events: none; }
.qi, .qi .pg, .qphone .spin { animation-duration: var(--T); animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: var(--d, 0s); }
.qi { position: absolute; left: 0; display: block; opacity: 0; will-change: transform, opacity; }
.qi.b { border-radius: 50%; background: var(--blue); border: 5px solid var(--ink); }
.qi.o { border-radius: 14px; background: var(--orange); border: 5px solid var(--ink); }
.qi .pg { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 22%; border-radius: 6px; background: var(--hot); transform-origin: left center; transform: scaleX(0); }
.qi.p::before { content: ""; position: absolute; left: 10px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); border: 4px solid var(--ink); box-sizing: border-box; }
.qi.p::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 32px; border-radius: 24px 24px 8px 8px; background: var(--blue); border: 4px solid var(--ink); box-sizing: border-box; }
.qi .you { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); font: 44px/1.15 var(--sans); background: var(--pink); border: 4px solid var(--ink); border-radius: 14px; padding: 0 12px; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.anim .track { position: absolute; background: #e9e5db; border-radius: 999px; }
.anim .qsrv { position: absolute; padding: 0; }
.anim .qlbl { position: absolute; font-size: 46px; text-align: center; white-space: nowrap; -webkit-text-stroke: .02em currentColor; }
.anim .qnote { position: absolute; transform: translateX(-50%); font-size: 42px; padding: 6px 30px; }
.anim .qpanel { position: absolute; top: 0; bottom: 0; background: var(--panel); border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--ink); }
.qphone { position: absolute; width: 190px; height: 320px; border: 10px solid var(--ink); border-radius: 34px; background: #fff; box-shadow: 0 8px 0 rgba(0,0,0,.22); padding: 32px 10px 28px; }
.qphone::before { content: ""; position: absolute; top: 9px; left: 50%; width: 54px; height: 11px; margin-left: -27px; background: var(--ink); border-radius: 99px; }
.qphone .scr { position: relative; height: 100%; border-radius: 12px; background: var(--capoo); display: grid; place-items: center; }
.qphone .play { font: 76px/1 var(--sans); color: var(--ink); }
.qphone .spin { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: #3a3f4b; opacity: 0; }
.qphone .spin::after { content: ""; width: 100px; height: 100px; border-radius: 50%; border: 14px solid rgba(255,255,255,.22); border-top-color: var(--hot); animation: qspin 1s linear infinite; }
@keyframes qspin { to { transform: rotate(360deg); } }
.qrow.far { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 220px); mask-image: linear-gradient(90deg, transparent 0, #000 220px); }
.qrow { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
.qbusy { position: absolute; left: 0; width: 220px; height: 190px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; }
.qbusy .qb { font-size: 64px; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.qbusy .qb .num { font-size: 1.1em; }
.qbusy .qc { font-size: 38px; color: var(--muted); white-space: nowrap; -webkit-text-stroke: .02em currentColor; }
.qtag { position: absolute; left: 1320px; width: 400px; height: 130px; border: 5px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.qtag.capoo { background: var(--capoo); } .qtag.pink { background: var(--pink); }
.qtag p { font-size: 44px; line-height: 1.15; white-space: nowrap; -webkit-text-stroke: .03em currentColor; }
.qtag .qv { font: 54px/1.1 var(--num); -webkit-text-stroke: 0; }
body.shot .anim *, body.shot .anim *::after { animation-play-state: paused !important; animation-delay: calc(var(--d, 0s) - var(--snap, 0s)) !important; }
.qphone.lg { width: 230px; height: 390px; border-radius: 40px; padding: 38px 12px 32px; }
.qphone.lg .play { font-size: 96px; }
.qphone.lg .spin::after { width: 124px; height: 124px; border-width: 17px; }
.qphone.sm { width: 112px; height: 200px; border-width: 7px; border-radius: 24px; padding: 22px 7px 18px; box-shadow: 0 6px 0 rgba(0,0,0,.22); }
.qphone.sm::before { top: 6px; width: 34px; height: 8px; margin-left: -17px; }
.qphone.sm .play { font-size: 48px; }
.qphone.sm .spin::after { width: 60px; height: 60px; border-width: 9px; }
.anim .qhead { position: absolute; top: 28px; transform: translateX(-50%); font-size: 64px; padding: 6px 48px; }

/* ---------- 🌟 工程技巧 badge, appended to slide titles ---------- */
.tech { display: inline-flex; align-items: center; gap: .3em; vertical-align: middle; position: relative; top: -.1em;
  margin-left: .45em; font-size: .42em; line-height: 1; padding: .34em .75em; white-space: nowrap;
  background: var(--hot); border: 4px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 var(--ink);
  -webkit-text-stroke: .02em currentColor; }
.tech svg { width: 1.05em; height: 1.05em; flex: none; }
.tech.again { background: #fff6cf; }
.tech.solo { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 44px; z-index: 2; }
.slide.top > h2.t2:has(.tech) { font-size: 80px; }
.slide.top > h2.t2 .tech { font-size: .4em; }

/* ---------- preloader (deck.js) ---------- */
#preload { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; transition: opacity .45s; font-family: var(--sans); }
#preload.done { opacity: 0; pointer-events: none; }
#preload .pl-box { width: min(560px, 80vw); text-align: center; }
#preload .pl-t { font-size: 28px; margin-bottom: 18px; color: var(--ink); }
#preload .pl-bar { height: 22px; border: 4px solid var(--ink); border-radius: 999px; background: var(--panel); overflow: hidden; }
#preload .pl-bar i { display: block; height: 100%; width: 0; background: var(--hot); transition: width .15s; }
#preload .pl-n { font: 44px var(--num); margin-top: 14px; color: var(--ink); }