/* ==========================================================
   AI Talk — "Cherenkov Notebook" design system
   Fixed 1920×1080 stage, scaled to the viewport by deck.js
   ========================================================== */
@font-face{font-family:"NotoTC";src:url(../assets/fonts/NotoSansTC-Regular.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"NotoTC";src:url(../assets/fonts/NotoSansTC-Bold.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"SpaceG";src:url(../assets/fonts/SpaceGrotesk.woff2) format("woff2");font-weight:300 700;font-display:block}
@font-face{font-family:"JBMono";src:url(../assets/fonts/JetBrainsMono.woff2) format("woff2");font-weight:100 800;font-display:block}

:root{
  --ink:#0E1A2B; --ink2:#22324A; --ink3:#4A5568;
  --paper:#F4EFE6; --paper2:#EAE3D6; --paper3:#DDD4C3; --line:#CFC6B6;
  --blue:#2D6BFF; --cyan:#38D6F5; --amber:#FFB020; --amberD:#B86E00;
  --coral:#F2545B; --coralD:#C7323A; --mint:#22B07D; --mintD:#0F8A5F; --grey:#7C766A;
  --tint:#DCE7FF;
  --acc:var(--blue); --accD:#1E4FD6; --accT:#DCE7FF;
  --display:"SpaceG","NotoTC","Noto Sans CJK TC","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --body:"NotoTC","Noto Sans CJK TC","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:"JBMono","NotoTC",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
body.s2{--acc:#F29A0A;--accD:#A85F00;--accT:#FFE9C2}
body.s3{--acc:#1FA874;--accD:#0B7A52;--accT:#CDEFE0}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#070D17;overflow:hidden;font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center}

/* ---------- slide base ---------- */
.slide{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden;background:var(--paper);
  padding:120px 140px 130px;display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;}
.slide.active{opacity:1;visibility:visible;z-index:2}
.slide::before{ /* graph-paper texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(14,26,43,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(14,26,43,.045) 1px,transparent 1px);
  background-size:48px 48px;}
.slide > *{position:relative}
.slide.dark{background:radial-gradient(1200px 800px at 78% 30%,rgba(56,214,245,.16),transparent 60%),radial-gradient(900px 700px at 10% 100%,rgba(45,107,255,.18),transparent 60%),var(--ink);color:#EEF3FA}
.slide.dark::before{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}

/* chrome: kicker / footer */
.kicker{position:absolute;top:52px;left:140px;font:600 24px/1 var(--display);letter-spacing:.08em;color:var(--grey);display:flex;gap:18px;align-items:center;text-transform:uppercase}
.kicker b{color:var(--accD);font-weight:700}
.dark .kicker{color:#8EA3BF}.dark .kicker b{color:var(--cyan)}
.kicker .dot{width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.src{position:absolute;left:140px;right:300px;bottom:44px;font:400 19px/1.35 var(--body);color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src a{text-decoration:none;border-bottom:1px dotted currentColor}
.src::before{content:"來源 ";font-weight:700;color:var(--ink3)}
.dark .src{color:#7F93AE}.dark .src::before{color:#AFC0D6}
.est{display:inline-block;font:700 20px/1 var(--body);padding:8px 14px;border-radius:999px;background:var(--amber);color:var(--ink);letter-spacing:.05em;vertical-align:middle}
.est.lite{background:transparent;border:2px solid var(--amberD);color:var(--amberD)}
.tag{display:inline-block;font:700 22px/1 var(--body);padding:10px 18px;border-radius:999px;background:var(--accT);color:var(--accD)}
.tag.ink{background:var(--ink);color:#fff}.tag.coral{background:#FDE1E2;color:var(--coralD)}.tag.mint{background:#D3F2E5;color:var(--mintD)}.tag.amber{background:#FFEBC2;color:var(--amberD)}
.ia{position:absolute;top:44px;right:140px;font:700 24px/1 var(--body);padding:12px 22px;border-radius:999px;background:var(--coral);color:#fff;letter-spacing:.06em;box-shadow:0 6px 0 var(--coralD)}
.ia::before{content:"● ";animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- typography ---------- */
h1,h2,h3,p{margin:0}
.h1{font:700 80px/1.15 var(--display);letter-spacing:-.01em}
.h2{font:700 64px/1.2 var(--display);letter-spacing:-.005em}
.h3{font:700 44px/1.3 var(--display)}
.lead{font:400 40px/1.55 var(--body);color:var(--ink2)}
.dark .lead{color:#C9D6E8}
.body{font:400 34px/1.6 var(--body);color:var(--ink2)}
.small{font:400 26px/1.5 var(--body);color:var(--ink3)}
.dark .small{color:#9DB0C9}
.mono{font-family:var(--mono)}
.acc{color:var(--accD)}.dark .acc{color:var(--cyan)}
.hl{background:linear-gradient(transparent 58%,var(--accT) 58%);padding:0 .1em}
.dark .hl{background:linear-gradient(transparent 62%,rgba(56,214,245,.35) 62%)}
.num{font-family:var(--display);font-feature-settings:"tnum";letter-spacing:-.02em}
.title-block{margin-top:0;margin-bottom:56px;max-width:1500px}
.title-block .h1+.lead{margin-top:22px}
.mt-auto{margin-top:auto}
.center{align-items:center;justify-content:center;text-align:center}
.grow{flex:1;min-height:0}
.row{display:flex;gap:56px}.col{display:flex;flex-direction:column}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}

/* cards */
.card{background:#fff;border:2px solid var(--ink);border-radius:28px;padding:40px 40px;box-shadow:8px 8px 0 var(--ink)}
.card.soft{border-color:var(--line);box-shadow:0 18px 40px -22px rgba(14,26,43,.35)}
.card.acc{background:var(--accT);}
.card .ic{width:84px;height:84px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:var(--accT);margin-bottom:26px}
.card .ic svg{width:52px;height:52px}
.card h3{font:700 40px/1.25 var(--display);margin-bottom:14px}
.card p{font:400 30px/1.5 var(--body);color:var(--ink3)}
.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);box-shadow:none;color:#EEF3FA}
.dark .card p{color:#B5C4D8}

/* ---------- layouts ---------- */
/* cover */
.cover{padding:0}
.cover .art{position:absolute;right:-40px;bottom:-10px;width:1180px;opacity:.98}
.cover .inner{position:absolute;left:140px;top:170px;width:1000px}
.cover .eyebrow{font:600 28px/1 var(--display);letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;margin-bottom:40px}
.cover h1{font:700 112px/1.12 var(--display);letter-spacing:-.02em}
.cover .sub{font:400 40px/1.5 var(--body);color:#BFD0E6;margin-top:36px}
.cover .meta{position:absolute;left:140px;bottom:96px;font:400 28px/1.6 var(--body);color:#9DB0C9}
.cover .meta b{color:#fff;font-weight:700}
.pathline{display:flex;gap:18px;align-items:center;margin-top:56px;font:700 30px/1 var(--display)}
.pathline span{padding:16px 26px;border-radius:999px;border:2px solid rgba(255,255,255,.25)}
.pathline span.on{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.pathline i{width:36px;height:2px;background:rgba(255,255,255,.35)}

/* divider */
.divider{justify-content:center}
.divider .no{font:700 300px/0.8 var(--display);color:transparent;-webkit-text-stroke:3px rgba(56,214,245,.6);position:absolute;right:140px;top:150px;letter-spacing:-.04em}
.divider .h1{font-size:120px;line-height:1.1;max-width:1300px}
.divider .lead{margin-top:36px;max-width:1150px}
.divider .art{position:absolute;right:80px;bottom:60px;width:760px;opacity:.95}

/* statement */
.statement{justify-content:center}
.statement .big{font:700 120px/1.18 var(--display);letter-spacing:-.02em;max-width:1640px}
.statement .lead{margin-top:44px;max-width:1400px}

/* bignum */
.bignum .n{font:700 260px/0.9 var(--display);letter-spacing:-.04em;color:var(--accD)}
.dark .bignum .n,.bignum.dark .n{color:var(--cyan)}
.bignum .unit{font:700 64px/1 var(--display);margin-left:16px}

/* image split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center;flex:1;min-height:0}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split .art img,.split .art svg{width:100%;height:auto;display:block}
.art img{display:block;max-width:100%}

/* tables */
table.t{width:100%;border-collapse:separate;border-spacing:0;font:400 28px/1.35 var(--body)}
table.t th{font:700 24px/1.2 var(--display);text-align:left;color:var(--ink3);padding:16px 20px;border-bottom:3px solid var(--ink);letter-spacing:.02em}
table.t td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t td.n{font-family:var(--display);font-weight:700;font-feature-settings:"tnum";white-space:nowrap}
table.t tr.hi td{background:var(--accT)}
table.t tr.hi td:first-child{border-radius:14px 0 0 14px}table.t tr.hi td:last-child{border-radius:0 14px 14px 0}

/* code / file */
.file{background:var(--ink);color:#DDE6F3;border-radius:24px;padding:36px 44px;font:400 28px/1.6 var(--mono);box-shadow:0 30px 60px -30px rgba(14,26,43,.6)}
.file .k{color:var(--cyan)}.file .c{color:#7F93AE}.file .s{color:#FFD27A}.file .d{color:#9BE7C4}
.file .bar{display:flex;gap:10px;margin:-10px 0 22px}.file .bar i{width:16px;height:16px;border-radius:50%;background:#33445E}

/* quote */
.quote{font:700 64px/1.35 var(--display);letter-spacing:-.01em;max-width:1500px}
.quote::before{content:"“";display:block;font:700 200px/0.6 var(--display);color:var(--acc);height:90px}
.cite{margin-top:30px;font:400 28px/1.4 var(--body);color:var(--grey)}

/* steps / flow */
.flow{display:flex;align-items:stretch;gap:0}
.flow .stp{flex:1;background:#fff;border:2px solid var(--ink);border-radius:24px;padding:30px 28px;position:relative}
.flow .arrow{flex:none;width:64px;display:flex;align-items:center;justify-content:center;font:700 44px/1 var(--display);color:var(--acc)}
.flow .stp .k{font:700 22px/1 var(--display);color:var(--accD);letter-spacing:.1em;margin-bottom:14px}
.flow .stp h3{font:700 36px/1.25 var(--display)}
.flow .stp p{font:400 26px/1.45 var(--body);color:var(--ink3);margin-top:10px}

/* section-progress map (four-question method) */
.method{display:flex;gap:22px}
.method .m{flex:1;border-radius:22px;padding:22px 26px;border:2px solid var(--line);background:rgba(255,255,255,.6);font:700 30px/1.3 var(--display);color:var(--grey)}
.method .m small{display:block;font:700 20px/1 var(--display);letter-spacing:.12em;margin-bottom:10px}
.method .m.on{border-color:var(--ink);background:var(--acc);color:#fff;box-shadow:6px 6px 0 var(--ink)}
.method .m.done{color:var(--ink3);border-color:var(--ink3)}

/* refs slide */
.refs ol{columns:2;column-gap:64px;margin:0;padding-left:1.6em;font:400 21px/1.45 var(--body);color:var(--ink2)}
.refs li{break-inside:avoid;margin-bottom:12px}
.refs li a{color:var(--accD);word-break:break-all;text-decoration:none}

/* ---------- builds (fragments) ---------- */
.f{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.f.on{opacity:1;transform:none}
.f.fade{transform:none}
.slide.active .rise{animation:rise .8s var(--ease) both;animation-delay:calc(var(--d,0) * 110ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.slide.active .draw path,.slide.active .draw line,.slide.active .draw polyline{stroke-dasharray:var(--len,1600);stroke-dashoffset:var(--len,1600);animation:draw 1.6s var(--ease) forwards;animation-delay:calc(var(--d,0) * 150ms + 300ms)}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- interactive widgets ---------- */
.wbar{position:absolute;right:140px;bottom:36px;display:flex;gap:14px;z-index:5}
.btn{font:700 26px/1 var(--body);padding:18px 30px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;user-select:none}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.pri{background:var(--acc);color:#fff}
.btn.sm{font-size:22px;padding:12px 22px}
.btn.reset{background:var(--paper2);font-size:22px;padding:12px 22px}
.btn.reset::before{content:"↺ "}
.dark .btn{border-color:#fff;box-shadow:4px 4px 0 rgba(255,255,255,.6)}
.btn:focus-visible{outline:4px solid var(--cyan);outline-offset:4px}

/* flip card */
.flip{perspective:1600px;cursor:pointer;user-select:none}
.flip .fi{position:relative;width:100%;height:100%;transition:transform .8s var(--ease);transform-style:preserve-3d}
.flip.on .fi{transform:rotateY(180deg)}
.flip .fa,.flip .fb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;border:3px solid var(--ink)}
.flip .fa{background:#fff;box-shadow:10px 10px 0 var(--ink)}
.flip .fa::after{content:"點一下翻牌";position:absolute;bottom:26px;font:700 22px/1 var(--body);color:var(--grey);letter-spacing:.1em}
.flip .fb{transform:rotateY(180deg);background:var(--ink);color:#fff;box-shadow:10px 10px 0 var(--acc)}
.flip .q{font:700 150px/1 var(--display);color:var(--acc)}
.flip .lab{font:700 34px/1.3 var(--display);margin-top:18px}
.flip .fb .n{font:700 120px/1 var(--display);color:var(--cyan);letter-spacing:-.03em}
.flip .fb .lab{color:#DDE6F3}

/* match game */
.match{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:300px}
.match .colm{display:flex;flex-direction:column;gap:24px;justify-content:center}
.match .it{font:700 34px/1.25 var(--body);padding:24px 30px;border-radius:22px;background:#fff;border:3px solid var(--ink);cursor:pointer;user-select:none;transition:background .2s,transform .2s,border-color .2s;position:relative;z-index:2}
.match .it small{display:block;font:400 24px/1.35 var(--body);color:var(--ink3);margin-top:6px}
.match .it:hover{transform:translateY(-2px)}
.match .it.sel{background:var(--accT);border-color:var(--accD);box-shadow:0 0 0 6px rgba(56,214,245,.35)}
.match .it.ok{background:#D3F2E5;border-color:var(--mintD);cursor:default}
.match .it.bad{animation:shake .4s;background:#FDE1E2;border-color:var(--coralD)}
@keyframes shake{25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-6px)}}
.match svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.match svg.lines path{fill:none;stroke:var(--mintD);stroke-width:6;stroke-linecap:round}
.score{font:700 30px/1 var(--display);color:var(--ink3)}
.score b{color:var(--mintD)}

/* sort (two-bin quiz) */
.sort .row1{display:flex;align-items:center;gap:24px;padding:18px 26px;border-radius:20px;background:#fff;border:2px solid var(--line);font:700 32px/1.3 var(--body)}
.sort .row1 .txt{flex:1}
.sort .row1 .opt{font:700 26px/1 var(--body);padding:14px 22px;border-radius:999px;border:2px solid var(--ink);background:#fff;cursor:pointer}
.sort .row1.ok{border-color:var(--mintD);background:#E6F7EF}
.sort .row1.bad{border-color:var(--coralD);background:#FDECEC;animation:shake .4s}
.sort .row1 .opt.pick{background:var(--ink);color:#fff}
.sort .row1 .opt.ans:not(.pick){border-color:var(--mintD);color:var(--mintD);background:#E6F7EF;box-shadow:0 0 0 3px var(--mintD)}
.sort .row1.ok.retry{border-color:var(--amberD);background:#FFF6E5}
.sort .row1 .why{display:none;font:400 24px/1.35 var(--body);color:var(--ink3);flex-basis:100%}
.sort .row1.ok .why,.sort .row1.bad .why{display:block}
.sort .row1{flex-wrap:wrap}

/* vote counters */
.vote .v{display:grid;grid-template-columns:60px 1fr 120px;align-items:center;gap:22px;padding:14px 0;cursor:pointer;user-select:none}
.vote .v .k{font:700 34px/1 var(--display);width:60px;height:60px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
.vote .v .lab{font:700 32px/1.3 var(--body)}
.vote .v .lab small{display:block;font:400 22px/1.3 var(--body);color:var(--grey)}
.vote .v .barw{grid-column:2;height:22px;border-radius:11px;background:var(--paper2);overflow:hidden}
.vote .v .bar{height:100%;width:0;background:var(--acc);border-radius:11px;transition:width .4s var(--ease)}
.vote .v .c{grid-row:1/span 2;grid-column:3;font:700 64px/1 var(--display);text-align:right;color:var(--accD)}

/* slider */
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:16px;border-radius:8px;background:var(--paper3);outline:none}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:48px;border-radius:50%;background:var(--acc);border:4px solid var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.seg button{font:700 26px/1 var(--body);padding:16px 24px;border:0;background:#fff;color:var(--ink);cursor:pointer;border-right:2px solid var(--ink)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:#fff}
.ctl label{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font:700 24px/1 var(--body);color:var(--ink3);margin-bottom:26px;letter-spacing:.04em}
.ctl .val{font:700 40px/1 var(--display);color:var(--ink);pointer-events:none}

/* bars */
.bars .b{display:grid;grid-template-columns:260px 1fr 150px;align-items:center;gap:22px;margin:14px 0}
.bars .b .lab{font:700 34px/1 var(--body);text-align:right}
.bars .b .tr{height:54px;background:var(--paper2);border-radius:14px;overflow:hidden}
.bars .b .fl{height:100%;background:var(--acc);border-radius:14px;transition:width .5s var(--ease)}
.bars .b .pc{font:700 36px/1 var(--display)}

/* notes (hidden in slide) */
aside.notes{display:none}

/* ---------- chrome UI ---------- */
#hud{position:fixed;left:0;right:0;bottom:0;height:6px;z-index:50;display:flex;gap:4px;padding:0 0;pointer-events:none}
#hud .sg{flex:1;background:rgba(255,255,255,.12);position:relative}
#hud .sg i{position:absolute;inset:0;width:0;background:var(--cyan);transition:width .3s}
#pageno{position:fixed;right:22px;bottom:16px;z-index:51;font:600 18px/1 var(--display);color:rgba(140,155,175,.9);letter-spacing:.06em;pointer-events:none;mix-blend-mode:normal}
#pageno b{color:var(--cyan)}
#secname{position:fixed;left:22px;bottom:16px;z-index:51;font:600 16px/1 var(--body);color:rgba(140,155,175,.8);pointer-events:none}
#notesPanel{position:fixed;left:0;right:0;bottom:0;max-height:38vh;overflow:auto;z-index:60;background:rgba(10,18,30,.96);color:#E8EEF7;font:400 20px/1.6 var(--body);padding:22px 36px 30px;border-top:3px solid var(--cyan);display:none;white-space:pre-wrap}
body.show-notes #notesPanel{display:block}
#help{position:fixed;inset:0;z-index:70;background:rgba(7,13,23,.88);color:#fff;display:none;align-items:center;justify-content:center;font:400 24px/1.9 var(--body)}
#help.on{display:flex}
#help kbd{font:700 20px/1 var(--mono);background:#22324A;border-radius:8px;padding:6px 10px;margin-right:10px}
#gotoBox{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:70;background:var(--ink);color:#fff;font:700 28px/1 var(--display);padding:14px 26px;border-radius:14px;display:none;border:2px solid var(--cyan)}
#gotoBox.on{display:block}
#ctlbar{position:fixed;top:10px;left:10px;z-index:75;display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .25s}
#ctlbar.on,#ctlbar:hover,#ctlbar:focus-within{opacity:.85;pointer-events:auto}
#ctlbar button{font:600 14px/1 var(--body);color:#E8EEF7;background:rgba(10,18,30,.72);border:1px solid rgba(140,155,175,.5);border-radius:8px;padding:7px 10px;cursor:pointer}
#ctlbar button:hover{background:rgba(10,18,30,.92);border-color:var(--cyan)}
#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:90;max-width:80vw;background:rgba(10,18,30,.94);color:#fff;font:600 20px/1.45 var(--body);padding:14px 22px;border-radius:12px;border:2px solid var(--amber);opacity:0;pointer-events:none;transition:opacity .25s}
#toast.on{opacity:1}
body.presenter #ctlbar{display:none}

/* overview */
body.overview #viewport{overflow:auto;align-items:flex-start;display:block}
body.overview #stage{transform:none!important;width:auto;height:auto;display:grid;grid-template-columns:repeat(5,384px);gap:24px;padding:40px;justify-content:center}
body.overview .slide{position:relative;opacity:1;visibility:visible;width:1920px;height:1080px;transform:scale(.2);transform-origin:0 0;margin-right:-1536px;margin-bottom:-864px;cursor:pointer;outline:8px solid transparent;transition:none}
body.overview .slide.active{outline-color:var(--cyan)}
body.overview .slide .f{opacity:1;transform:none}
body.overview #hud,body.overview #pageno,body.overview #secname{display:none}

/* ---------- presenter view ---------- */
body.presenter{background:#0A111C;color:#E8EEF7;overflow:hidden}
body.presenter #viewport{display:none}
#pv{display:none}
body.presenter #pv{display:grid;position:fixed;inset:0;grid-template-columns:1.35fr 1fr;grid-template-rows:auto 1fr;gap:20px;padding:20px}
#pv .top{grid-column:1/span 2;display:flex;align-items:center;gap:30px;font:600 24px/1 var(--display)}
#pv .clock{font:700 44px/1 var(--display);color:var(--cyan)}
#pv .pace{font:600 22px/1 var(--body);color:#9DB0C9}
#pv .bar{flex:1;height:10px;background:#1C2A40;border-radius:5px;overflow:hidden}#pv .bar i{display:block;height:100%;background:var(--cyan);width:0}
#pv .cur,#pv .nxt{position:relative;background:#000;overflow:hidden;border-radius:10px}
#pv .cur .holder,#pv .nxt .holder{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
#pv .cur .holder .slide,#pv .nxt .holder .slide{opacity:1;visibility:visible;transition:none}
#pv .left{display:flex;flex-direction:column;gap:14px;min-height:0}
#pv .right{display:flex;flex-direction:column;gap:14px;min-height:0}
#pv .lbl{font:600 18px/1 var(--display);color:#7F93AE;letter-spacing:.12em}
#pv .notes{flex:1;overflow:auto;background:#111C2C;border-radius:10px;padding:22px 26px;font:400 26px/1.65 var(--body);white-space:pre-wrap}
#pv .ctrls{display:flex;gap:10px}#pv .ctrls button{font:700 20px/1 var(--body);padding:12px 20px;border-radius:10px;border:0;background:#22324A;color:#fff;cursor:pointer}

/* ---------- print / PDF ---------- */
@page{size:1920px 1080px;margin:0}
@media print{
  html,body{background:#fff;overflow:visible;height:auto}
  #viewport{position:static;display:block}
  #stage{transform:none!important;width:1920px;height:auto}
  .slide{position:relative;opacity:1!important;visibility:visible!important;page-break-after:always;break-after:page;transition:none}
  .slide .f{opacity:1!important;transform:none!important}
  .slide .rise{animation:none!important}
  .draw path,.draw line,.draw polyline{stroke-dashoffset:0!important;animation:none!important}
  #hud,#pageno,#secname,#notesPanel,#help,#gotoBox,.wbar,#ctlbar,#toast{display:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- widget extras ---------- */
/* click-to-reveal */
[data-w~="rv"]{cursor:pointer;position:relative}
[data-w~="rv"] .hide{visibility:hidden}
[data-w~="rv"].on .hide{visibility:visible;animation:rise .5s var(--ease)}
[data-w~="rv"] .cover-q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:repeating-linear-gradient(-45deg,var(--paper2) 0 14px,var(--paper3) 14px 28px);font:700 30px/1 var(--display);color:var(--ink3);border:2px dashed var(--ink3)}
[data-w~="rv"].on .cover-q{display:none}
/* checklist */
[data-w~="chk"]{cursor:pointer;display:flex;gap:22px;align-items:flex-start;user-select:none}
[data-w~="chk"] .box{flex:none;width:46px;height:46px;border-radius:12px;border:3px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;font:700 32px/1 var(--display);color:transparent;transition:.2s}
[data-w~="chk"].on .box{background:var(--mint);border-color:var(--mintD);color:#fff}
[data-w~="chk"].on .box::after{content:"✓"}
[data-w~="chk"].on .ct{color:var(--ink3)}
/* tabs */
[data-w~="tabs"] .pane{display:none}
[data-w~="tabs"] .pane.on{display:block;animation:rise .45s var(--ease)}
[data-w~="tabs"] [data-t]:not(.pane){cursor:pointer}
/* next-token stepper */
.nt .sent{font:700 64px/1.3 var(--display);min-height:100px;padding:28px 36px;background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink)}
.nt .sent .tk{color:var(--accD);background:var(--accT);border-radius:10px;padding:0 6px;margin:0 2px;animation:rise .4s var(--ease)}
.nt .caret{display:inline-block;width:6px;height:64px;background:var(--acc);vertical-align:-10px;margin-left:6px;animation:blink 1s infinite}
.nt .cands{margin-top:34px;min-height:330px}
.nt .cands .b.win .tr{box-shadow:0 0 0 4px var(--accD)}
.nt .cands .b.win .lab{color:var(--accD)}
.nt .donemsg{font:700 44px/1.4 var(--display);color:var(--accD);padding-top:80px;text-align:center}
.nt .bars .b .lab{font-family:var(--mono);font-size:34px}
/* temperature */
.tw .bars .b .lab{font-family:var(--mono)}
.tw .mode{font:700 34px/1 var(--display);color:var(--accD)}
/* memcalc */
.mcalc{display:grid;grid-template-columns:690px 1fr;gap:56px;flex:1;min-height:0}
.mcalc .ctl{margin-bottom:34px}
.mcalc .seg button{font-size:23px;padding:14px 18px}
.mcalc .mbtns{display:flex;flex-direction:column;gap:12px}
.mcalc .mbtns button{font:700 26px/1.2 var(--body);text-align:left;padding:16px 22px;border-radius:16px;border:2px solid var(--ink);background:#fff;cursor:pointer}
.mcalc .mbtns button.on{background:var(--ink);color:#fff}
.mcalc .res{display:flex;flex-direction:column;gap:14px;min-height:0}
.mcalc .tot{display:flex;align-items:baseline;gap:22px}
.mcalc .tot .n{font:700 120px/0.9 var(--display);color:var(--accD);letter-spacing:-.04em}
.mcalc .tot .u{font:700 52px/1 var(--display)}
.mcalc .parts{font:400 26px/1.5 var(--body);color:var(--ink3)}
.mcalc .parts b{font-family:var(--display);color:var(--ink)}
.mcalc .stackbar{display:flex;height:34px;border-radius:10px;overflow:hidden;border:2px solid var(--ink)}
.mcalc .stackbar i{display:block;height:100%;transition:width .4s var(--ease)}
.mcalc .stackbar .w{background:var(--acc)}.mcalc .stackbar .kv{background:var(--amber)}.mcalc .stackbar .ov{background:var(--paper3)}
.mcalc .legend{display:flex;gap:26px;font:400 22px/1 var(--body);color:var(--ink3)}
.mcalc .legend i{display:inline-block;width:18px;height:18px;border-radius:4px;vertical-align:-2px;margin-right:8px}
.mcalc .machines{display:grid;grid-template-columns:1fr;gap:8px}
.mcalc .mc{display:grid;grid-template-columns:1fr 150px 150px 170px;align-items:center;gap:12px;padding:7px 20px;border-radius:12px;background:#fff;border:2px solid var(--line);font:700 25px/1.2 var(--body);transition:.3s}
.mcalc .mc .mn small{display:none}
.mcalc .o-lim{font:400 20px/1.3 var(--body);color:var(--grey);min-height:26px;margin-top:14px}
.mcalc.tb .tot .n{color:var(--coralD)}
.mcalc .mnote{font:400 19px/1.35 var(--body);color:var(--grey)}
.mcalc .mc .mm{text-align:right}
.mcalc .mc .mt{text-align:right;color:var(--ink3)}
.mcalc .mc.ok{border-color:var(--mintD);background:#E6F7EF}.mcalc .mc.ok .mv{color:var(--mintD)}
.mcalc .mc.tight{border-color:var(--amberD);background:#FFF6E5}.mcalc .mc.tight .mv{color:var(--amberD)}
.mcalc .mc.no{opacity:.55}.mcalc .mc.no .mv{color:var(--coralD)}
/* race */
.race .lane{display:grid;grid-template-columns:330px 1fr 130px;gap:24px;align-items:center;margin-bottom:22px}
.race .lane .who{font:700 30px/1.2 var(--body)}
.race .lane .who small{display:block;font:400 22px/1.3 var(--body);color:var(--grey)}
.race .lane .out{height:96px;background:var(--ink);color:#BFF3FF;border-radius:16px;padding:14px 22px;font:400 26px/1.4 var(--mono);overflow:hidden;display:flex;align-items:flex-end;word-break:break-all}
.race .lane .cnt{font:700 44px/1 var(--display);color:var(--accD);text-align:right}
.race .lane .cnt::after{content:" tok";font-size:20px;color:var(--grey)}
/* loop */
.loopw .node{cursor:pointer;transition:.3s}
.loopw .node.on rect,.loopw .node.on circle{fill:var(--acc)!important}
.loopw .node.on text{fill:#fff!important}
/* board (whiteboard) */
.board{flex:1;min-height:0;background:#fff;border:3px dashed var(--ink3);border-radius:28px;padding:36px 44px;font:700 46px/1.6 var(--body);color:var(--ink);outline:none;overflow:auto}
.board:empty::before{content:attr(data-ph);color:var(--line)}
/* hint line */
.hint{font:400 24px/1.4 var(--body);color:var(--grey)}
.hint b{color:var(--coralD)}
#pv .holder{color:var(--ink)}#pv .holder .slide:not(.dark){color:var(--ink)}

/* =================== v2 components =================== */
/* robust SVG sizing: never wider than its box */
.slide svg:not(.lines){max-width:100%;height:auto}
/* presenter preview: letterbox inside box */
#pv .cur,#pv .nxt{flex:none;width:100%;aspect-ratio:16/9;max-height:58vh}
#pv .nxt{max-height:38vh}
/* task card */
.taskcard{background:#fff;border:3px solid var(--ink);border-radius:30px;padding:26px 30px 28px;box-shadow:10px 10px 0 var(--ink)}
.taskcard .tk-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.taskcard .tk-badge{font:700 24px/1 var(--body);background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px}
.taskcard .tk-ex{font:700 20px/1 var(--body);color:var(--amberD);border:2px solid var(--amberD);border-radius:999px;padding:6px 12px}
.taskcard .tk-task{flex-basis:100%;font:700 30px/1.45 var(--body);color:var(--ink);margin-top:6px}
.taskcard .tk-row{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.taskcard .tc{position:relative;height:250px;cursor:pointer}
.taskcard .tc .tci,.taskcard .tc.flip .fa,.taskcard .tc.flip .fb{border-radius:20px;padding:16px 16px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;justify-content:flex-start}
.taskcard .tc .tci{height:100%;border:3px dashed #B8AFA0;background:var(--paper);transition:background .35s,border-color .35s,box-shadow .35s,transform .35s}
.taskcard .tc.lit .tci,.taskcard .tc.st.on .tci{background:var(--ink);border:3px solid var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(56,214,245,.35),0 0 34px rgba(56,214,245,.35)}
.taskcard .tc.st.on .tci{animation:litup .6s var(--ease)}
@keyframes litup{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:none}}
.taskcard .tn{font:700 40px/1 var(--display);color:var(--grey)}
.taskcard .lit .tn,.taskcard .st.on .tn,.taskcard .fb .tn{color:var(--cyan)}
.taskcard .th{font:700 25px/1.3 var(--body);margin-top:10px}
.taskcard .tt{margin-top:auto;font:700 21px/1.2 var(--display);color:var(--accD)}
.taskcard .tt small{display:block;font:400 17px/1.2 var(--body);color:var(--grey);margin-top:4px}
.taskcard .lit .tt,.taskcard .st.on .tt,.taskcard .fb .tt{color:var(--cyan)}
.taskcard .lit .tt small,.taskcard .st.on .tt small{color:#9DB0C9}
.taskcard .tc .fix{display:none;font:700 20px/1.3 var(--body);color:var(--amber);margin-top:8px}
.taskcard .tc.st.on .fix{display:block}
.taskcard .tc.flip .fa{border:3px dashed #B8AFA0;background:var(--paper);box-shadow:none}
.taskcard .tc.flip .fa::after{content:"點我";bottom:14px;right:16px;left:auto;font-size:17px}
.taskcard .tc.flip .fb{background:var(--ink);box-shadow:none}
.taskcard .tc.flip .stuck{font:700 21px/1.35 var(--body);color:#FDB3B6;margin-top:10px}
.taskcard .tc.flip .fb .fix{display:block;font-size:22px;margin-top:10px}
.taskcard.sm{padding:20px 24px 22px}
.taskcard.sm .tk-task{font-size:24px}
.taskcard.sm .tc{height:190px}
.taskcard.sm .th{font-size:21px}
.taskcard.sm .tn{font-size:32px}
/* five stations */
svg.stations{display:block;overflow:visible}
svg.stations .sl{stroke:#B8AFA0;stroke-width:6;stroke-dasharray:2 14;stroke-linecap:round}
svg.stations circle{fill:#fff;stroke:var(--ink);stroke-width:4}
svg.stations .on circle{fill:var(--acc);stroke:var(--ink)}
svg.stations .past circle{fill:var(--ink)}
svg.stations .sx{font:700 34px var(--display);text-anchor:middle;fill:var(--ink)}
svg.stations .on .sx,svg.stations .past .sx{fill:#fff}
svg.stations .sa{font:700 38px var(--display);text-anchor:middle;fill:var(--ink)}
svg.stations .sb{font:400 28px var(--body);text-anchor:middle;fill:var(--ink3)}
svg.stations .off .sa,svg.stations .off .sb{opacity:.45}
svg.stations.dk .sl{stroke:#3B4C66}
svg.stations.dk circle{fill:#14233A;stroke:#5B6F8C}
svg.stations.dk .on circle{fill:var(--cyan);stroke:#fff}
svg.stations.dk .past circle{fill:#2B3E5A;stroke:#8EA3BF}
svg.stations.dk .sx{fill:#8EA3BF}
svg.stations.dk .on .sx{fill:var(--ink)}
svg.stations.dk .sa{fill:#EEF3FA}
svg.stations.dk .sb{fill:#9DB0C9}
/* glossary flips */
.gloss{display:grid;gap:18px}
.gl.flip .fa,.gl.flip .fb{border-radius:20px;padding:14px 18px}
.gl.flip .fa{box-shadow:5px 5px 0 var(--ink)}
.gl.flip .fa::after{content:"";}
.gl .gt{font:700 32px/1.15 var(--display);color:var(--ink)}
.gl .gd{font:700 23px/1.35 var(--body);color:#fff}
.gl.flip .fb{box-shadow:5px 5px 0 var(--acc)}
/* question-style divider */
.qdiv .qmark{font:700 34px/1 var(--display);color:var(--cyan);letter-spacing:.12em;margin-bottom:26px}
.qdiv .h1{font-size:96px;line-height:1.2;max-width:1500px}
.qdiv .ans{font:400 38px/1.5 var(--body);color:#C9D6E8;margin-top:30px}
.qdiv .stw{margin-top:auto}
/* WebKit/Safari: backface-visibility is ignored when an ancestor animation flattens 3D (.rise). Swap faces with visibility at the 90° point. */
.flip .fa{transform:rotateY(0deg)}
.flip .fa,.flip .fb{transition:visibility 0s linear .38s}
.flip:not(.on) .fb{visibility:hidden}
.flip.on .fa{visibility:hidden}
.gl .fb{padding:12px 16px!important;justify-content:center!important}
.gl .gk{font:700 17px/1.1 var(--mono);color:var(--cyan);letter-spacing:.04em;margin-bottom:6px}
.gl .gd{word-break:keep-all;overflow-wrap:anywhere;font-size:21px}
.taskcard .tc.flip.lit .fa{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(56,214,245,.35)}
.taskcard .tc.flip.lit .fa *{color:#fff}
.taskcard .tc.flip.lit .fa .tg,.taskcard .tc.flip.lit .fa b{color:var(--cyan)}
.btn.go:disabled,.btn:disabled{opacity:.4;cursor:default;filter:grayscale(.4)}