/* talk-deck：講者用網頁簡報（#1763）。畫布固定 1920×1080，等比縮放到任何螢幕（4K 投影 2 倍、筆電、手機都同一個構圖）。
   配色：ENSCON 品牌（官網 hs-next.css :root）。深底＝品牌字色 #0E141B；強調只給一處。
   字：Noto Sans TC（內文、標題）＋JetBrains Mono（只給真的程式碼與終端機輸出）。 */
@import url(fonts/fonts.css);

:root {
  --bg: #0E141B;        /* 品牌深色，當舞台底 */
  --panel: #151D27;     /* 終端機、編輯器的面（比底亮一階） */
  --panel2: #1B2531;
  --ink: #F2F6FA;       /* 品牌淺底色，當深底上的字 */
  --ink2: #9AA9B9;
  --dim: #5B6B7C;
  --blue: #B3CBE1;      /* 品牌淺藍：程式關鍵字、測試通過、次要強調 */
  --deep: #02539C;      /* 品牌主藍：大色塊 */
  --warm: #F6C77A;      /* 品牌橘 #E8A13A 在深底上的可讀版（4.92:1）：游標、人說的話，一頁最多一處 */
  --sans: "Noto Sans TC", sans-serif;
  --mono: "JetBrains Mono", "Noto Sans TC", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; }
/* 舞台固定 1920×1080，正中央、等比縮放（窄螢幕＝上下留黑邊）。用 fixed 置中：比 grid 置中可靠；而且 fixed 不撐開版面，手機瀏覽器不會因為舞台 1920 寬把整頁拉寬（11/12 第一輪踩到）。 */
#stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center; overflow: hidden; background: var(--bg); }
.slide { position: absolute; inset: 0; padding: 120px 140px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
#black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
body.blackout #black { opacity: 1; }

/* 進度：底部一條實色，不放頁碼 */
#bar { position: absolute; left: 0; bottom: 0; height: 6px; background: var(--deep); transition: width .35s ease; z-index: 40; }

/* ---------- 版型 ---------- */
h1, h2 { margin: 0; font-weight: 900; letter-spacing: 0; line-height: 1.12; }
.sub { margin-top: 40px; font-size: 44px; line-height: 1.5; color: var(--ink2); font-weight: 400; max-width: 1400px; }

/* statement：一句話就是主角 */
.t-statement { display: flex; flex-direction: column; justify-content: center; }
.t-statement h2 { font-size: 112px; max-width: 1560px; }

/* section：大段落開頭，一整片品牌藍 */
.t-section { background: var(--deep); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 160px; }
.t-section h2 { font-size: 150px; }
.t-section .sub { color: var(--blue); }

/* terminal：左邊一句話、右邊一台真的在跑的終端機（每一節的視覺主角） */
.t-terminal { display: grid; grid-template-columns: 640px 1fr; gap: 72px; align-items: center; padding: 100px 100px 100px 140px; }
.t-terminal h2 { font-size: 76px; }
.t-terminal .sub { font-size: 36px; margin-top: 32px; }
.term { background: var(--panel); border-radius: 18px; height: 820px; display: flex; flex-direction: column; overflow: hidden; }
.term .tab { background: var(--panel2); padding: 20px 32px; font: 400 24px/1 var(--mono); color: var(--ink2); }
.term pre { margin: 0; padding: 28px 36px; font: 400 27px/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.term pre .l { display: block; min-height: 1.6em; }
.term .c-ok { color: var(--blue); } .term .c-dim { color: var(--dim); } .term .c-ink2 { color: var(--ink2); }
.term .c-warm { color: var(--warm); } .term .c-b { font-weight: 700; }
.term .c-zh { font-family: var(--sans); }
.term .cur { display: inline-block; width: .55em; height: 1.05em; background: var(--warm); vertical-align: -0.15em; margin-left: 2px; }

/* compare：以前／現在 兩欄，右欄是主角（整片亮一階） */
.t-compare { display: grid; grid-template-rows: auto 1fr; gap: 64px; }
.t-compare h2 { font-size: 80px; }
.t-compare .cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0; }
.t-compare .col { padding: 56px 64px; }
.t-compare .col.now { background: var(--panel); border-radius: 18px; }
.t-compare .col h3 { margin: 0 0 32px; font-size: 40px; color: var(--ink2); font-weight: 700; }
.t-compare .col.now h3 { color: var(--blue); }
.t-compare .col p { margin: 0 0 24px; font-size: 40px; line-height: 1.5; }

/* list：一次出現一點（按 → 才出下一點） */
.t-list h2 { font-size: 84px; max-width: 1500px; }
.t-list ol { margin: 72px 0 0; padding: 0; list-style: none; display: grid; gap: 40px; max-width: 1500px; }
.t-list li { font-size: 48px; line-height: 1.45; opacity: .18; transition: opacity .3s; }
.t-list li.shown { opacity: 1; }
.t-list li b { color: var(--blue); font-weight: 700; }

/* end */
.t-end { display: flex; flex-direction: column; justify-content: center; }
.t-end h2 { font-size: 132px; }
.t-end .who { margin-top: 56px; font-size: 44px; }
.t-end .logo { position: absolute; left: 140px; bottom: 110px; height: 56px; }

/* opening：整頁一張 canvas */
.t-opening { padding: 0; }
.t-opening canvas { width: 1920px; height: 1080px; display: block; }
.t-opening .skip { position: absolute; right: 48px; bottom: 36px; font-size: 22px; color: var(--dim); }

/* 待補的內容：一眼看得出來還沒定稿 */
.todo { outline: 6px dashed var(--warm); outline-offset: 16px; }

body.still .slide, body.still #bar, body.still .t-list li { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .slide, .slide.on, #bar, .t-list li { transition: none; } }