:root{
  --bg:#010603;
  --bg2:#02110a;
  --ink:#c9f7dc;          /* 綠調白 */
  --muted:#6fae8b;
  --dim:#3f7a5c;
  --green:#00ff6a;        /* 磷光綠 */
  --green-soft:#28e08a;
  --line:rgba(0,255,120,.14);
  --card:rgba(0,255,110,.045);
  --card-brd:rgba(0,255,120,.16);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Noto Sans TC",system-ui,-apple-system,"Microsoft JhengHei",sans-serif;
  /* 章節彩虹強調（彩虹小聚的彩虹保留在此） */
  --c1:#ff4d6d; --c2:#ff9f1c; --c3:#00ff9c; --c4:#a06bff;
  --accent:var(--green);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1100px 760px at 82% -12%, rgba(0,255,110,.10), transparent 60%),
    radial-gradient(900px 700px at 6% 112%, rgba(0,255,140,.08), transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- 動畫層 ---------- */
#rain{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none}
#floaters{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.floater{
  position:absolute;font-family:var(--mono);font-size:14px;white-space:nowrap;
  color:rgba(0,255,110,.22);text-shadow:0 0 8px currentColor;
  will-change:transform,opacity;letter-spacing:.5px;
}
.scanlines{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px);
  mix-blend-mode:multiply;
}
.crt-flicker{position:fixed;inset:0;z-index:2;pointer-events:none;background:rgba(0,255,120,.02);animation:flick 5s steps(2) infinite}
@keyframes flick{0%,97%,100%{opacity:0}98%{opacity:.5}99%{opacity:.1}}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%,transparent 52%,rgba(0,0,0,.62) 100%)}

/* ---------- 終端機標題列 ---------- */
.term-bar{
  position:fixed;top:0;left:0;right:0;z-index:6;height:38px;
  display:flex;align-items:center;gap:14px;padding:0 16px;
  background:rgba(2,14,9,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;
}
.tb-dots{display:flex;gap:7px;flex:none}
.tb-dots span{width:11px;height:11px;border-radius:50%;background:#1c3a2a;box-shadow:inset 0 0 0 1px rgba(0,255,120,.25)}
.tb-dots span:nth-child(1){background:#ff5f56}
.tb-dots span:nth-child(2){background:#ffbd2e}
.tb-dots span:nth-child(3){background:#27c93f}
.tb-cmd{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.tb-user{color:var(--green)}
.tb-path{color:#4fb3ff}
.tb-dollar{color:var(--ink);margin:0 .4em 0 .1em}
#tb-line{color:var(--ink)}
.tb-cursor{color:var(--green);animation:blink 1.05s steps(1) infinite}
.tb-count{flex:none;color:var(--dim);letter-spacing:.14em}
.tb-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:rgba(0,255,120,.08)}
#progressbar{height:100%;width:0;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);transition:width .5s ease}
@keyframes blink{50%{opacity:0}}

/* ---------- 舞台 / 投影片 ---------- */
#deck{position:fixed;inset:0;z-index:3;display:grid;place-items:center;padding:clamp(20px,4vw,64px)}
.slide{
  position:absolute;width:min(1180px,94vw);max-height:calc(92vh - 38px);
  overflow:auto;scrollbar-width:none;
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.slide::-webkit-scrollbar{display:none}
.slide.active{opacity:1;transform:none;pointer-events:auto}
.slide.leaving{opacity:0;transform:translateY(-22px) scale(.985)}

/* eyebrow = 終端機提示字元 */
.eyebrow{
  font-family:var(--mono);font-size:clamp(12px,1.5vw,16px);letter-spacing:.12em;
  color:var(--accent);display:inline-flex;align-items:center;gap:.55em;margin-bottom:1.1rem;
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent);
}
.eyebrow::before{content:"$";color:var(--green);font-weight:700;opacity:.9}
.eyebrow::after{content:"_";color:var(--accent);animation:blink 1.05s steps(1) infinite}

h1,h2,h3{margin:0;line-height:1.14;letter-spacing:-.01em}
.title{font-size:clamp(34px,6vw,74px);font-weight:900}
.subtitle{font-size:clamp(28px,4.7vw,54px);font-weight:800;text-shadow:0 0 22px rgba(0,255,120,.16)}
.lead{font-size:clamp(17px,2.15vw,24px);color:var(--muted);line-height:1.78;max-width:66ch;margin-top:1.15rem}
.lead.tight{margin-top:.7rem}
p{margin:.9rem 0}

/* 斷行優化：標題與段落都平衡各行、不留孤字尾 */
.subtitle,.title,.chapter .subtitle,.quote .qt,.closing .thanks,
.callout .big,.card h3,.agenda .item h3,
.lead,.card p,.callout .cap,.quote .by,.agenda .item p,.tag{text-wrap:balance}
.dc-lines{text-wrap:pretty}
/* 中文只在標點處斷行（不切詞），拉丁字不從中間斷開；過長才緊急斷行防溢出 */
.subtitle,.title,.chapter .subtitle,.lead,.card h3,.card p,.callout .big,.callout .cap,
.quote .qt,.quote .by,.agenda .item h3,.agenda .item p,.tag,.closing .thanks{
  word-break:keep-all;overflow-wrap:break-word;
}
/* 需保持整體不斷的片語 */
.nb{white-space:nowrap}

.gradient-text{
  background:linear-gradient(100deg,var(--c1),var(--c2) 30%,var(--c3) 62%,var(--c4));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(0,255,140,.25));
}
.warn-accent{color:var(--accent);font-weight:700}

/* reveal stagger */
.slide.active .r{animation:rise .65s both}
.slide.active .r:nth-child(1){animation-delay:.05s}
.slide.active .r:nth-child(2){animation-delay:.12s}
.slide.active .r:nth-child(3){animation-delay:.19s}
.slide.active .r:nth-child(4){animation-delay:.26s}
.slide.active .r:nth-child(5){animation-delay:.33s}
.slide.active .r:nth-child(6){animation-delay:.40s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- SVG icons ---------- */
.ico{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;
  margin-bottom:.7rem;border-radius:11px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 22%,transparent);}
.ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- cover ---------- */
.cover{text-align:left}
.brandline{font-family:var(--mono);letter-spacing:.3em;color:var(--dim);font-size:13px}
.cover .kicker{font-family:var(--mono);color:var(--accent);letter-spacing:.24em;margin:1.4rem 0 .6rem;font-size:clamp(12px,1.6vw,16px);
  text-shadow:0 0 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.reboot{font-size:clamp(50px,12vw,148px);font-weight:900;line-height:.95;letter-spacing:-.02em;
  color:var(--ink);animation:rebootGlitch 4.2s infinite}
.reboot .caret{color:var(--green);animation:blink 1s steps(1) infinite}
@keyframes rebootGlitch{
  0%,90%,100%{text-shadow:0 0 20px rgba(0,255,120,.5);transform:none}
  91%{text-shadow:3px 0 #ff003c,-3px 0 #00e5ff,0 0 20px rgba(0,255,120,.5);transform:translateX(2px)}
  93%{transform:translateX(-2px) skewX(-2deg)}
  95%{text-shadow:-3px 0 #ff003c,3px 0 #00e5ff;transform:none}
  96%{transform:skewX(2deg)}
  97%{transform:none}
}
.cover .tag{font-size:clamp(16px,2.4vw,25px);color:var(--ink);margin-top:1.3rem;font-weight:500}
.speaker{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;color:var(--muted);font-size:clamp(13px,1.6vw,17px)}
.speaker b{color:var(--ink);font-weight:700}
.speaker .pill{font-family:var(--mono);font-size:12px;border:1px solid var(--card-brd);padding:.3em .8em;border-radius:999px;color:var(--accent)}
.bootlog{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:1.8rem;min-height:1.4em;line-height:1.75}
.bootlog .ok{color:var(--green)}

/* ---------- chapter divider ---------- */
.chapter{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center}
.chapter .num{
  font-family:var(--mono);font-weight:800;font-size:clamp(76px,15vw,184px);line-height:1.18;padding-bottom:.04em;
  color:transparent;-webkit-text-stroke:2px var(--accent);
  text-shadow:0 0 60px color-mix(in srgb,var(--accent) 45%,transparent);
}
.chapter .subtitle{font-size:clamp(30px,6vw,64px)}
.chapter .lead{max-width:52ch}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:1.5rem}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card);border:1px solid var(--card-brd);border-radius:14px;
  padding:clamp(16px,1.8vw,24px);position:relative;overflow:hidden;backdrop-filter:blur(6px);
}
.card .idx{font-family:var(--mono);font-size:14px;color:var(--accent);font-weight:600}
.card h3{font-size:clamp(19px,2.25vw,26px);font-weight:700;margin:.5rem 0}
.card p{font-size:clamp(15px,1.7vw,18px);color:var(--muted);line-height:1.72;margin:0}
.card::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%)}

/* content + callout */
.two{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(20px,3vw,48px);align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.callout{
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 15%,transparent),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--card-brd));border-radius:16px;padding:clamp(18px,2.4vw,30px);
}
.callout .big{font-size:clamp(30px,4.9vw,54px);font-weight:900;line-height:1.06}
.callout .cap{color:var(--muted);font-size:clamp(14.5px,1.7vw,18px);margin-top:.7rem;line-height:1.72}
.callout.mono .big{font-family:var(--mono)}

/* agenda */
.agenda{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,22px);margin-top:1.5rem}
@media(max-width:820px){.agenda{grid-template-columns:1fr}}
.agenda .item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid var(--card-brd);border-radius:12px;background:var(--card)}
.agenda .item .no{font-family:var(--mono);font-weight:800;font-size:clamp(22px,3.2vw,36px);color:var(--accent);line-height:1;text-shadow:0 0 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.agenda .item h3{font-size:clamp(18px,2.2vw,24px)}
.agenda .item p{margin:.3rem 0 0;color:var(--muted);font-size:clamp(13.5px,1.6vw,17px)}

/* quote slide (獨立 — 不再套 chapter grid) */
.quote-slide{display:grid;place-items:center;min-height:60vh}
.quote{text-align:center;width:min(92%,900px);margin-inline:auto}
.quote .mark{font-family:var(--mono);font-size:clamp(48px,8vw,104px);color:var(--accent);line-height:.7;opacity:.55;margin-bottom:.2rem;text-shadow:0 0 24px color-mix(in srgb,var(--accent) 50%,transparent)}
.quote .qt{font-size:clamp(30px,5.6vw,64px);font-weight:900;line-height:1.18;letter-spacing:-.01em;text-shadow:0 0 26px rgba(0,255,120,.18)}
.quote .by{color:var(--muted);font-size:clamp(14px,1.75vw,18px);margin-top:1.4rem;max-width:48ch;margin-inline:auto;line-height:1.75}

/* closing */
.closing-slide{display:grid;place-items:center;min-height:56vh}
.closing{text-align:center}
.closing .thanks{font-size:clamp(26px,4.6vw,52px);font-weight:900;text-shadow:0 0 26px rgba(0,255,120,.2)}
.closing .make{font-family:var(--mono);color:var(--accent);font-size:clamp(16px,2.4vw,28px);margin-top:1rem;letter-spacing:.04em;text-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%,transparent)}
.closing .contact{color:var(--muted);margin-top:1.8rem;font-size:clamp(13px,1.7vw,17px);display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;align-items:center}
.closing .contact b{color:var(--ink)}

/* ---------- 收尾全螢幕修復：由上而下修復，文字在清出的乾淨區由左至右浮現 ---------- */
.repair-overlay{position:fixed;inset:0;z-index:9;display:none;background:#010603;transition:background .6s ease}
.repair-overlay.on{display:block}
.repair-overlay.done{background:transparent;pointer-events:none}
#repairCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.repair-scanline{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.32) 2px 3px);mix-blend-mode:multiply}
.repair-status{position:absolute;left:0;right:0;z-index:2;text-align:center;font-family:var(--mono);
  font-size:clamp(12px,1.5vw,15px);letter-spacing:.2em;color:var(--green);text-shadow:0 0 14px currentColor;transform:translateY(-50%)}

.repair-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 6vw;pointer-events:none}
.repair-content .thanks{font-size:clamp(26px,4.6vw,52px);font-weight:900;color:var(--ink);text-shadow:0 0 26px rgba(0,255,120,.28)}
.repair-content .make{font-family:var(--mono);color:var(--green);font-size:clamp(16px,2.4vw,28px);
  letter-spacing:.04em;margin-top:1rem;text-shadow:0 0 16px color-mix(in srgb,var(--green) 55%,transparent)}
.repair-content .contact{color:var(--muted);font-size:clamp(13px,1.7vw,17px);margin-top:1.7rem;
  display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;align-items:center}
.repair-content .contact b{color:var(--ink)}
/* 由左至右擦拭（clip 由右往左收合 + 一條亮邊跟著擦過去） */
.wipe{position:relative;clip-path:inset(0 100% 0 0);opacity:0}
.wipe.on{animation:wipeIn 1.25s ease forwards}
@keyframes wipeIn{
  0%{clip-path:inset(0 100% 0 0);opacity:.6;filter:brightness(1.9) drop-shadow(0 0 10px var(--green))}
  100%{clip-path:inset(0 0 0 0);opacity:1;filter:none}
}
.wipe.on::after{content:"";position:absolute;top:-4px;bottom:-4px;left:0;width:18px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--green) 70%,transparent),#eafff2);
  filter:blur(2px);animation:wipeBar 1.25s ease forwards}
@keyframes wipeBar{0%{left:-3%;opacity:1}88%{opacity:1}100%{left:101%;opacity:0}}
@media(prefers-reduced-motion:reduce){ .wipe{clip-path:none;opacity:1} .wipe.on{animation:none} .wipe.on::after{display:none} }

.dramatic .lead{max-width:60ch}

/* ---------- 章節轉場：解密動畫 ---------- */
.decrypt{
  position:fixed;inset:0;z-index:7;display:none;place-items:center;overflow:hidden;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.4) 2px 3px),
    radial-gradient(circle at 50% 42%, rgba(0,26,14,.97), rgba(0,4,2,.995));
  font-family:var(--mono);
}
.decrypt.on{display:grid;animation:dcFade .28s ease both}
.decrypt.out{animation:dcOut .42s ease forwards}
@keyframes dcFade{from{opacity:0}to{opacity:1}}
@keyframes dcOut{to{opacity:0;visibility:hidden}}
.dc-box{width:min(920px,92vw);max-width:920px}
.dc-lines{font-size:clamp(13px,1.6vw,16px);line-height:2;color:var(--muted);min-height:5.2em}
.dc-lines .ok{color:var(--green);font-weight:700;text-shadow:0 0 12px var(--green)}
.dc-bar{height:12px;border:1px solid var(--card-brd);border-radius:7px;overflow:hidden;margin:.7rem 0 1.5rem;background:rgba(0,255,120,.05)}
.dc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4));box-shadow:0 0 16px var(--green)}
.dc-tag{color:var(--dim);letter-spacing:.34em;font-size:clamp(12px,1.4vw,15px)}
.dc-title{font-size:clamp(30px,5.6vw,72px);font-weight:900;color:var(--ink);letter-spacing:-.02em;
  margin-top:.35rem;line-height:1.08;white-space:nowrap;text-shadow:0 0 30px rgba(0,255,120,.4)}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:6;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;align-items:center;gap:clamp(14px,3vw,30px)}
.nav-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--card-brd);
  background:rgba(2,14,9,.62);color:var(--ink);font-size:14px;cursor:pointer;
  backdrop-filter:blur(8px);transition:.2s;display:grid;place-items:center;
}
.nav-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.nav-btn:active{transform:translateY(0)}
.dots{display:flex;gap:7px;max-width:60vw;flex-wrap:wrap;justify-content:center}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(0,255,120,.2);cursor:pointer;transition:.25s}
.dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.35)}
.dot.chap{background:rgba(0,255,150,.45)}

.hint{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:74px;
  font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.1em;transition:opacity .6s;pointer-events:none}
.hint.gone{opacity:0}

@media(max-width:640px){
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .chapter{grid-template-columns:1fr;text-align:left}
  .chapter .num{font-size:clamp(72px,26vw,140px)}
  .slide{max-height:calc(88vh - 38px)}
  .hint{display:none}
  .tb-count{display:none}
}
@media(prefers-reduced-motion:reduce){
  .slide,.slide .r{transition:none;animation:none!important}
  .slide.active::before,.reboot,.crt-flicker{animation:none!important}
  #rain{display:none}
}