/* 解說影片播放器與畫面樣式（網站章節與 explainers/index.html 共用） */
.explainer{margin:28px 0;border:1px solid #cbd3ce;border-radius:18px;overflow:hidden;background:#fbfcf8;color:#17211d}
.explainer-head{display:grid;gap:4px;padding:16px 20px 12px;font-size:.92rem;line-height:1.6}.explainer-head strong{font-size:1.05rem}.explainer-head span{color:#59645f}.explainer-head a{color:#116e5d}
.explainer-stage{background:#f4efe3}.explainer-stage svg{display:block;width:100%;height:auto;max-height:min(28vh,260px)}
@media(max-width:640px){.explainer-stage svg{max-height:200px}}
/* 錄影／全螢幕頁：不要套用章節內的縮小舞台，維持 960×540 滿版（舊 MP4 1280×832） */
.explainer.is-full .explainer-stage svg{max-height:none;width:100%;height:auto}
.explainer-caption{min-height:3.2em;margin:0;padding:8px 16px;background:#17211d;color:#fff;font-size:1rem;line-height:1.45}
.explainer-bar{height:5px;background:#dde4e0}.explainer-progress{height:100%}.explainer-progress span{display:block;width:0;height:100%;background:#e45f45}
.explainer-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px}
.explainer-controls button{min-height:40px;padding:6px 14px;border:1px solid #17211d;border-radius:999px;background:transparent;color:#17211d;font:inherit;font-weight:700;cursor:pointer}
.explainer-controls .is-main{background:#17211d;color:#fff;min-width:96px}
.explainer-dots{display:flex;gap:4px}.explainer-dots button{min-width:36px;min-height:36px;padding:0}.explainer-dots button[aria-current]{background:#e45f45;border-color:#e45f45;color:#fff}
.explainer-status{margin-left:auto;color:#59645f;font-size:.85rem}
@media(max-width:640px){.explainer-caption{font-size:.95rem}.explainer-status{width:100%;margin:0}}

/* 畫面元素 */
.ex-bg{fill:#f4efe3}
.ex-scene{display:none}.ex-scene.is-active{display:inline}
.ex-title{font:800 34px "Microsoft JhengHei","PingFang TC",sans-serif;fill:#17211d}
.ex-title-sm{font:800 28px "Microsoft JhengHei","PingFang TC",sans-serif;fill:#17211d}
.ex-sub{font:700 20px "Microsoft JhengHei","PingFang TC",sans-serif;fill:#3d4a44}
.ex-small{font:600 14px "Microsoft JhengHei","PingFang TC",sans-serif;fill:#59645f}.ex-small-light{font:600 14px sans-serif;fill:#aab4ae}
.ex-file-bg{fill:#fff;stroke:#cbd3ce;stroke-width:2}.ex-file-name{font:800 18px Consolas,"SFMono-Regular",monospace;fill:#fff}
.ex-code{font:600 17px Consolas,"SFMono-Regular",monospace;fill:#17211d;white-space:pre}
.ex-browser{fill:#fff;stroke:#9aa5a0;stroke-width:2}.ex-browser-bar{fill:#e8ece9}
.ex-h1-plain{font:700 30px "Times New Roman","PMingLiU",serif;fill:#000}
.ex-h1-green{font:800 30px "Microsoft JhengHei","PingFang TC",sans-serif;fill:#176b5b}
.ex-btn-plain{fill:#efefef;stroke:#767676}.ex-btn-text-plain{font:400 16px sans-serif;fill:#000}
.ex-hl{fill:#f2b134;opacity:.32}.ex-hl-on{fill:#7cc49f;opacity:.45}.ex-hl-err{fill:#e45f45;opacity:.3}
.ex-arrow,.ex-arrow-err{fill:none;stroke:#2f6fb0;stroke-width:4;stroke-dasharray:100;stroke-dashoffset:0}.ex-arrow-err{stroke:#e45f45}
.ex-arrow-dot{fill:#2f6fb0}.ex-arrow-err-dot{fill:#e45f45}
.ex-x{font:900 40px sans-serif;fill:#e45f45}
.ex-console{fill:#202124}.ex-console-err{font:600 16px Consolas,monospace;fill:#ff8a80}
.ex-wait{fill:#fff7d6;stroke:#f2b134}
.ex-pointer{fill:#17211d;stroke:#fff;stroke-width:1.5}
.ex-ripple{fill:none;stroke:#e45f45;stroke-width:3;opacity:0}
.ex-label-err{font:800 20px "Microsoft JhengHei",sans-serif;fill:#c0392b}.ex-label-ok,.ex-ok{font:800 22px "Microsoft JhengHei",sans-serif;fill:#116e5d}

/* 進場：每個 .ex-in 依 --d 秒依序出現；靜態（跳幕、減少動態）時直接顯示終點 */
.ex-scene .ex-in{opacity:0}.ex-scene .ex-out{opacity:1}
.ex-scene.is-final .ex-in{opacity:1}.ex-scene.is-final .ex-out{opacity:0}
.ex-scene.is-anim .ex-in{animation:ex-in .6s ease var(--d,0s) both}
.ex-scene.is-anim .ex-out{animation:ex-out .4s ease var(--d,0s) both}
.ex-scene.is-anim .ex-arrow,.ex-scene.is-anim .ex-arrow-err{animation:ex-draw .9s ease both}
.ex-scene.is-anim .ex-scan{animation:ex-scan 5s steps(1,end) .4s both}
.ex-scene.is-final .ex-scan{transform:translateY(112px)}
.ex-scene.is-anim .ex-cursor{animation:ex-cursor 2.6s ease both}
.ex-scene .ex-cursor{transform:translate(575px,220px)}
.ex-scene.is-anim .ex-ripple{animation:ex-ripple .8s ease var(--d,0s) both}
.explainer.is-paused .ex-scene *{animation-play-state:paused!important}
@keyframes ex-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ex-out{to{opacity:0}}
@keyframes ex-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ex-scan{0%{transform:translateY(0)}20%{transform:translateY(28px)}40%{transform:translateY(56px)}60%{transform:translateY(84px)}80%,100%{transform:translateY(112px)}}
@keyframes ex-cursor{from{transform:translate(760px,330px)}to{transform:translate(575px,220px)}}
@keyframes ex-ripple{0%{opacity:.9;r:8}100%{opacity:0;r:34}}
@media(prefers-reduced-motion:reduce){.ex-scene *{animation:none!important}.ex-scene .ex-in{opacity:1}.ex-scene .ex-out{opacity:0}.ex-scene .ex-scan{transform:translateY(112px)}}

/* 全螢幕／錄影版 */
.explainer.is-full{margin:0;border:0;border-radius:0}

/* 章節導讀影片（chapter-intros.js） */
.intro-dot{fill:#176b5b}.intro-dot-num{font:800 15px sans-serif;fill:#fff}
.intro-point{font-weight:700;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;fill:#17211d}
.intro-chip{fill:#fff;stroke:#9aa5a0;stroke-width:2}.intro-chip-text{font:700 20px "Microsoft JhengHei","PingFang TC",sans-serif;fill:#17211d}
.intro-check{font:900 22px sans-serif;fill:#116e5d}
.intro-frame{fill:#fff;stroke:#cbd3ce;stroke-width:2}
.chapter-intro{margin:0 0 24px;border:1px solid #cbd3ce;border-radius:18px;background:#fbfcf8;color:#17211d;scroll-margin-top:calc(var(--header,76px) + 16px)}
.explainer{scroll-margin-top:calc(var(--header,76px) + 16px)}
/* 手機／平板：放大看導讀（≤900px 顯示按鈕；直向滿版不旋轉，橫向維持滿寬） */
.explainer-zoom-btn{display:none}
@media(max-width:900px){.explainer-zoom-btn{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid #17211d;border-radius:999px;background:transparent;color:#17211d;font:inherit;font-weight:700;cursor:pointer}}
.explainer.is-zoomed{position:fixed;inset:0;z-index:80;margin:0;border:0;border-radius:0;background:#17211d;display:flex;flex-direction:column;justify-content:flex-start;overflow:auto;padding:12px 12px 16px}
.explainer.is-zoomed .explainer-zoom-hint{display:block;margin:0 0 8px;padding:8px 12px;border-radius:10px;background:rgb(255 255 255 / .12);color:#e7efe9;font-weight:700;text-align:center}
.explainer-zoom-hint{display:none}
/* 直向：不旋轉，舞台完整落在視窗內並放大；提示仍建議轉橫向更清楚 */
.explainer.is-zoomed .explainer-stage{transform:none;width:100%;max-width:100%;max-height:min(70dvh,720px);margin:8px auto;flex:0 1 auto;overflow:auto}
.explainer.is-zoomed .explainer-stage svg{max-height:min(60dvh,640px);width:100%;height:auto}
/* 橫向放大：舞台高度限制在視窗內（844×390 也不裁切） */
@media(orientation:landscape){.explainer.is-zoomed .explainer-stage{max-height:min(62dvh,calc(100dvh - 132px));margin:4px auto;overflow:auto}.explainer.is-zoomed .explainer-stage svg{max-height:min(52dvh,calc(100dvh - 150px));width:auto;margin:0 auto}.explainer.is-zoomed .explainer-zoom-hint{display:none}}
.explainer.is-zoomed .explainer-bar,.explainer.is-zoomed .explainer-code{display:none}
.explainer.is-zoomed .explainer-caption{display:block;min-height:0;padding:8px 12px;font-size:.95rem;background:transparent;color:#e7efe9}
/* 直向放大：字幕與提示再放大（畫面內 SVG 字維持，提示轉橫向看） */
@media(orientation:portrait){.explainer.is-zoomed .explainer-caption{font-size:clamp(1.05rem,4.2vw,1.25rem);line-height:1.45}.explainer.is-zoomed .explainer-zoom-hint{font-size:clamp(1rem,3.8vw,1.15rem);line-height:1.4}.explainer.is-zoomed .explainer-status{font-size:.95rem}}
.explainer.is-zoomed .explainer-controls{display:flex;flex-wrap:wrap;gap:8px;padding:8px 4px;justify-content:center}
.explainer.is-zoomed .explainer-controls button{color:#fff;border-color:rgb(255 255 255 / .7)}
.explainer.is-zoomed .explainer-controls .is-main{background:#fff;color:#17211d}
.explainer.is-zoomed .explainer-status{color:#c5d2cb}
.explainer.is-zoomed .explainer-zoom-btn{display:none}
.explainer-zoom-close{display:none;position:fixed;top:12px;right:12px;z-index:81;min-height:44px;padding:8px 16px;border:1px solid #fff;border-radius:999px;background:#17211d;color:#fff;font:inherit;font-weight:700}
.explainer.is-zoomed .explainer-zoom-close{display:inline-flex;align-items:center}
.chapter-intro>summary{display:grid;gap:2px;padding:14px 20px;cursor:pointer;line-height:1.6}
.chapter-intro>summary span{color:#59645f;font-size:.92rem}
.chapter-intro[open]>summary{border-bottom:1px solid #cbd3ce}
.chapter-intro .explainer{margin:0;border:0;border-radius:0 0 18px 18px}
.intro-flow-num{font:900 22px sans-serif;fill:#176b5b}.intro-flow-arrow{fill:none;stroke:#2f6fb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.explainer:fullscreen{display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;background:#17211d;overflow:auto}.explainer:fullscreen .explainer-stage svg{max-height:calc(100dvh - 150px);width:auto;margin:auto;max-width:100%}
/* 全螢幕底色是深綠：控制列的字和框線改成淺色，不然看不到 */
.explainer:fullscreen .explainer-controls button{color:#fff;border-color:rgb(255 255 255 / .7)}.explainer:fullscreen .explainer-controls button.is-main{background:#fff;color:#17211d}.explainer:fullscreen .explainer-status{color:#e7efe9}
/* 跟著打一次：瀏覽器裡的即時畫面（內容用內嵌 style，這裡只給白底與預設字） */
.intro-live-view{box-sizing:border-box;width:396px;height:350px;overflow:hidden;padding:14px 16px;background:#fff;color:#111;font:16px/1.5 "Microsoft JhengHei","PingFang TC",sans-serif}
.intro-live-view *{box-sizing:border-box;max-width:100%}
.intro-live-view .lv-h1{font-size:2em;font-weight:700;margin:.67em 0}.intro-live-view .lv-h2{font-size:1.5em;font-weight:700;margin:.83em 0}.intro-live-view .lv-h3{font-size:1.17em;font-weight:700;margin:1em 0}
.intro-live-view strong,.intro-live-view b{font-family:"PingFang TC","Microsoft JhengHei",sans-serif;font-weight:800}
/* 手機：畫面裡的程式碼縮得太小，字幕下面另外列出這一幕的程式碼（桌機不顯示） */
.explainer-code{display:none}
@media(max-width:640px){.explainer-code:not([hidden]){display:block;box-sizing:border-box;height:15rem;overflow:auto;padding:10px 16px 12px;background:#202824;color:#e8efe9}.explainer-code span{display:block;margin-bottom:4px;color:#a9c7b8;font-size:.82rem;font-weight:700}.explainer-code pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:600 .9rem/1.55 Consolas,"SFMono-Regular",monospace}}
/* 跳幕圓鈕：手機上觸控範圍加大到 44px */
.explainer-dots button{position:relative}.explainer-dots button::after{content:"";position:absolute;inset:-4px -2px}
@media(max-width:640px){.explainer-dots{flex-wrap:wrap;gap:6px}.explainer-controls .explainer-dots button{min-width:44px;min-height:44px}.explainer-dots button::after{inset:0}}
/* 全螢幕頁：手機橫放時畫面限制高度，控制列留在螢幕內；直放時整個播放器置中 */
@media(orientation:landscape) and (max-height:500px){.explainer.is-full .explainer-stage svg{max-height:calc(100dvh - 120px);width:auto;margin:auto}.explainer.is-full .explainer-caption{min-height:0;padding:6px 16px;font-size:.9rem}.explainer.is-full .explainer-controls{padding:6px 12px}}
@media(orientation:portrait) and (max-width:640px){.explainer.is-full{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}}