/* YZU 教師研習｜Gemini Notebook 工作坊 平面版講義
   條漫紙本風格：紙色面板、3px 墨線框、右下實心陰影；小標籤黑底白字、略為傾斜。 */
:root{
  --ink:#141414; --paper:#fbf8f1; --tone:#ece5d6; --white:#fff;
  --red:#e5484d; --teal:#3A9E9A; --yel:#F2B544;
  --tone-2:#f4efe3; --yel-soft:#fdf0cf; --teal-soft:#dcefed; --muted:#5d564a;
  --bgpage:#d9d5cc; --pagefg:#1d1d1d; --pagemuted:#4b463d; --shadow:#141414;
  --acc:var(--red);
  --font:'Noto Sans TC','Noto Sans CJK TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Noto Sans TC','Noto Sans CJK TC',monospace;
  --col:760px; --wide:1040px; --bar-h:58px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bgpage:#1b1b1d; --pagefg:#ece8e0; --pagemuted:#bdb6a8; --shadow:#45454b; }
}
:root[data-theme="dark"]{ --bgpage:#1b1b1d; --pagefg:#ece8e0; --pagemuted:#bdb6a8; --shadow:#45454b; }
.c-basic{--acc:var(--teal)}
.c-advanced{--acc:var(--yel)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 16px)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--bgpage);color:var(--pagefg);font-family:var(--font);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word}
img{max-width:100%}
a{color:inherit}
button{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ic{flex:none;display:inline-block;vertical-align:middle}
[hidden]{display:none!important}

/* 焦點：內圈黃、外圈墨，在深色頂端列與紙色面板上都看得見 */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--yel)}
.bar :focus-visible,.take :focus-visible{outline-color:var(--yel);box-shadow:0 0 0 3px var(--ink)}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--yel);color:var(--ink);padding:10px 14px;
  border:3px solid var(--ink);font-weight:900;text-decoration:none}
.skip:focus{top:10px}

/* ── 頂端列 ── */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;min-height:var(--bar-h);
  padding:9px max(16px,env(safe-area-inset-right)) 9px max(16px,env(safe-area-inset-left));
  background:var(--ink);color:var(--paper);border-bottom:4px solid var(--acc)}
.bb{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:2px solid #3d3d42;border-radius:6px;
  background:#232327;color:var(--paper);font-weight:700;font-size:14.5px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  list-style:none;user-select:none}
.bb::-webkit-details-marker{display:none}
.bb:hover{border-color:var(--acc)}
.bb.is-off{opacity:.55;cursor:not-allowed;border-style:dashed}
.bb.is-off:hover{border-color:#3d3d42}
.bb .chev{margin-left:-2px;opacity:.8}
.ttl{flex:1 1 auto;min-width:0;margin:0;display:flex;align-items:center;gap:10px;font-weight:900;font-size:15.5px;line-height:1.3}
.ttl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv{flex:none;display:inline-block;background:var(--acc);color:var(--ink);font-weight:900;font-size:13px;line-height:1.5;padding:.05em .55em;
  border:2px solid var(--ink);transform:rotate(-2deg)}
.bar .lv{border-color:var(--acc)}
.lv.big{font-size:15px;padding:.1em .7em;box-shadow:.14em .14em 0 var(--ink)}

/* 下拉選單（details） */
.dd{position:relative}
.dd:not([open])>.dd-panel{display:none}
.dd[open]>.bb{border-color:var(--acc);background:#2e2e33}
.dd-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:50;background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  box-shadow:.3em .3em 0 var(--acc);font-size:15px;line-height:1.5}
.jm{width:min(420px,calc(100vw - 32px));max-height:min(72vh,640px);overflow:auto;overscroll-behavior:contain;padding:10px 0 12px}
.jm-top{display:flex;align-items:center;gap:8px;margin:2px 12px 4px;padding:6px 10px;font-weight:900;text-decoration:none;border:2px solid var(--ink);background:var(--white)}
.jm-top:hover{background:var(--tone)}
.jm-print{margin-top:12px}
.jm-part{margin:12px 14px 2px;font-weight:900;font-size:14px;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.jm-part span{flex:none;background:var(--ink);color:var(--paper);padding:0 .45em;font-size:12.5px}
.jm-list{list-style:none;margin:0;padding:0 6px}
.jm-list a{display:flex;gap:10px;padding:5px 8px;text-decoration:none;border-radius:4px}
.jm-list a:hover{background:var(--tone)}
.jm a[aria-current="page"]{background:var(--acc);font-weight:700}
.jm-n{flex:none;min-width:1.7em;text-align:right;font-weight:900;font-variant-numeric:tabular-nums;color:var(--muted)}
.jm a[aria-current="page"] .jm-n{color:var(--ink)}
.pm{min-width:260px;padding:8px}
.pm-i{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;background:none;color:var(--ink);text-align:left;font-weight:700;
  text-decoration:none;cursor:pointer;border-radius:4px;font-size:15px;line-height:1.4}
.pm-i:hover{background:var(--tone)}

@media screen and (max-width:760px){
  .ttl{display:none}
  .jump{flex:1 1 auto}
  .jump>.bb{width:100%;justify-content:flex-start}
  .jump>.bb .chev{margin-left:auto}
  .home .bb-t,.anim .bb-t,.prt .bb-t,.prt .chev{display:none}
  .home,.anim,.prt>.bb{padding:0 9px}
  .dd-panel{position:fixed;left:16px;right:16px;top:calc(var(--bar-h) + 8px);width:auto}
  .jm{max-height:calc(100vh - var(--bar-h) - 40px)}
  .p-entry .ttl,.p-kit .ttl{display:flex}
}
@media screen and (max-width:360px){ .bar{gap:6px;padding-left:12px;padding-right:12px} .bb{padding:0 8px} }

/* ── 版面 ── */
.wrap{max-width:calc(var(--col) + 32px);margin:0 auto;padding:14px 16px 56px}
.wrap.wide{max-width:calc(var(--wide) + 32px)}
.crumbs ol{list-style:none;margin:6px 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:14px;line-height:1.6;color:var(--pagemuted)}
.crumbs li+li::before{content:"›";margin:0 .55em;opacity:.7}
.crumbs a{text-decoration:none;font-weight:700;color:var(--pagefg)}
.crumbs a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.ph-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 4px}
.tag{display:inline-block;background:var(--ink);color:var(--paper);font-weight:900;font-size:14px;line-height:1.5;padding:.18em .7em;
  transform:rotate(-1.5deg);box-shadow:.18em .18em 0 var(--acc)}
.meta{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:14.5px;color:var(--pagemuted)}
.meta.pg{font-variant-numeric:tabular-nums;padding:.05em .55em;border:2px solid currentColor;border-radius:999px;font-size:13.5px}
.ph-t{margin:.35em 0 .6em;font-size:clamp(26px,4.6vw,38px);line-height:1.32;font-weight:900;letter-spacing:.01em;color:var(--pagefg);text-wrap:balance}

.sheet{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:.4em .4em 0 var(--shadow);margin:0 0 28px}
.prose{padding:clamp(20px,4.2vw,38px) clamp(16px,4.6vw,44px) clamp(8px,2.4vw,20px)}

/* 情境圖 */
.scene{margin:0 0 30px}
.sc-frame{position:relative;border:3px solid var(--ink);box-shadow:.4em .4em 0 var(--shadow);background:var(--tone);overflow:hidden}
.sc-frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--tone)}
.sc-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;margin-top:12px;padding:0 2px}
.sc-link{font-weight:900;font-size:16px;color:var(--pagefg);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:3px;text-underline-offset:5px}
.sc-link:hover{background:var(--acc);color:var(--ink);text-decoration-color:var(--ink)}
.sc-src{font-size:13.5px;font-weight:700;color:var(--pagemuted)}
.sc-wait{display:grid;place-items:center;width:100%;min-height:clamp(170px,26vw,250px);
  background-color:var(--tone);background-image:radial-gradient(rgba(20,20,20,.13) 1.3px,transparent 1.5px);background-size:11px 11px}
.sc-wait.sm{min-height:clamp(150px,22vw,210px)}
.sc-wait-in{text-align:center;background:var(--paper);border:2.5px dashed var(--ink);padding:12px 20px 10px;margin:14px;max-width:440px;transform:rotate(-.6deg)}
.sc-wait-in .ic{color:var(--ink);opacity:.75}
.sc-wait-t{margin:.15em 0 0;font-weight:900;font-size:18px;color:var(--ink)}
.sc-wait-s{margin:.2em 0 .1em;font-size:14px;line-height:1.55;color:var(--muted)}

/* ── 正文 ── */
/* :where() 讓基本樣式的權重為 0，區塊自己的清單樣式（步驟、流程、檢查清單…）才不會被蓋掉 */
:where(.prose)>:first-child{margin-top:0}
:where(.prose) p{margin:0 0 1.05em;text-wrap:pretty}
:where(.prose) ul,:where(.prose) ol{margin:0 0 1.1em;padding-left:1.45em}
:where(.prose) li{margin:.35em 0;text-wrap:pretty}
:where(.prose) li::marker{font-weight:700}
:where(.prose) strong{font-weight:700;background:linear-gradient(transparent 62%,rgba(242,181,68,.5) 62%)}
.prose code,.kit code{font-family:var(--mono);font-size:.88em;background:var(--tone);padding:.08em .38em;border-radius:3px;overflow-wrap:anywhere}
:where(.prose) a{text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--teal);font-weight:700}
:where(.prose) a:hover{background:var(--tone)}
:where(.prose) blockquote{margin:0 0 1.1em;padding:.75em 1em;background:var(--white);border:2.5px solid var(--ink);border-radius:14px;font-size:16px}
:where(.prose) blockquote p:last-child{margin-bottom:0}

/* 區塊共用：標籤掛在框線上 */
.blk{position:relative;margin:2.1em 0 1.9em;padding:1.35em clamp(14px,2.6vw,22px) .55em;border:2.5px solid var(--ink);background:var(--white)}
.blk-k{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0;position:relative;margin:calc(-1.35em - 15px) 0 .75em -4px;
  background:var(--ink);color:var(--paper);font-size:14.5px;font-weight:900;line-height:1.5;padding:.18em .75em;transform:rotate(-1.2deg);
  max-width:calc(100% + 4px)}
.blk>.blk-k+*{margin-top:0}
.blk p:last-child,.blk ul:last-child,.blk ol:last-child{margin-bottom:.6em}

/* 表格 */
.tbl{padding:0;border:0;background:none;margin-top:2.2em}
.tbl>.blk-k{margin:0 0 -3px 6px;z-index:1}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2.5px solid var(--ink);background:var(--white);margin:0 0 1.2em;position:relative}
.tbl .tw{margin:0}
.tw-hint{margin:.45em 0 1em;font-size:13px;font-weight:700;color:var(--muted)}
.tw-hint::before{content:"⇆ ";font-weight:900}
.t{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.62}
.t th,.t td{padding:.6em .75em;text-align:left;vertical-align:top;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.t th:last-child,.t td:last-child{border-right:0}
.t tbody tr:last-child td{border-bottom:0}
.t th{background:var(--ink);color:var(--paper);font-weight:700;font-size:14.5px;vertical-align:bottom;border-right-color:#46464b;white-space:nowrap}
.t.c6 td,.t.c7 td,.t.c8 td{min-width:4.2em}
.t td:first-child{background:var(--tone-2);font-weight:700}
.t strong{background:none;font-weight:900}
.t code{font-size:.86em}
.t.c2 td:first-child{width:26%}
.t:not(.c2) td:first-child{min-width:5.8em}
@media screen and (max-width:760px){
  .t.c3{min-width:500px} .t.c4{min-width:620px} .t.c5{min-width:720px}
  .t.c6,.t.c7,.t.c8{min-width:820px}
  .t{font-size:14.5px}
  .tw[data-cols="3"] td:first-child,.tw[data-cols="4"] td:first-child,.tw[data-cols="5"] td:first-child{position:sticky;left:0;z-index:1;min-width:6.5em;max-width:9.5em;box-shadow:2px 0 0 var(--ink)}
  .tw[data-cols="3"] th:first-child,.tw[data-cols="4"] th:first-child,.tw[data-cols="5"] th:first-child{position:sticky;left:0;z-index:2}
}
@media screen and (min-width:761px){
  .t.c6,.t.c7,.t.c8{font-size:14px}
  .t.c6 th,.t.c7 th,.t.c8 th{white-space:normal;font-size:13.5px}
  .t.c7 th,.t.c7 td,.t.c8 th,.t.c8 td{padding:.5em .5em}
  .t.c7 td:first-child,.t.c8 td:first-child{min-width:4.2em}
}

/* box：開始前請準備 */
.box{background:var(--yel-soft)}
.box .blk-k{box-shadow:.16em .16em 0 var(--yel)}

/* example：示範 */
.ex{background:var(--white);border-left:9px solid var(--teal)}
.ex .blk-k{padding:0;background:none;margin-left:-13px}
.ex-tag{background:var(--teal);color:var(--ink);padding:.18em .65em;border:2px solid var(--ink)}
.ex-t{background:var(--ink);color:var(--paper);padding:.18em .75em;border:2px solid var(--ink)}
.ex p{font-size:16.5px}

/* prompt：可複製的原文 */
.prompt{padding:0;border-width:3px;box-shadow:.25em .25em 0 var(--shadow)}
.pr-head{display:flex;align-items:stretch;gap:0;background:var(--ink);color:var(--paper)}
.pr-t{flex:1 1 auto;min-width:0;margin:0;padding:.5em .9em;font-size:14.5px;font-weight:900;line-height:1.45}
.copy{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;border-left:3px solid var(--ink);background:var(--yel);color:var(--ink);
  font-weight:900;font-size:14px;padding:0 14px;cursor:pointer;min-height:40px}
.copy:hover{background:#f7c766}
.copy.ok{background:#bfe5c9}
.copy.ng{background:#f7c3c4}
.pr-body{margin:0;padding:.95em 1.1em 1em;font-family:var(--mono);font-size:14.5px;line-height:1.72;white-space:pre-wrap;overflow-wrap:anywhere;
  word-break:normal;background:var(--white);color:var(--ink);tab-size:2}
.pr-msg{margin:0;padding:0 1.1em;font-size:13.5px;font-weight:700;color:var(--ink)}
.pr-msg:not(:empty){padding:.45em 1.1em;background:var(--yel-soft);border-top:2px dashed var(--ink)}

/* check：檢查清單 */
.check{background:var(--white)}
.chk{list-style:none;padding-left:0}
.chk li{position:relative;padding-left:2.05em;margin:.55em 0}
.chk li::before{content:"";position:absolute;left:0;top:.28em;width:1.25em;height:1.25em;border:2.5px solid var(--ink);background:var(--teal-soft);border-radius:3px}
.chk li::after{content:"";position:absolute;left:.4em;top:.42em;width:.42em;height:.75em;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(42deg)}

/* reflect：想一想（不做輸入框） */
.reflect{border:3px dashed var(--ink);border-radius:22px;background:var(--white)}
.reflect .blk-k{background:var(--yel);color:var(--ink);border:2.5px solid var(--ink);transform:rotate(-2deg)}
.rf-t{font-weight:900;margin:-.2em 0 .5em!important}
.rf{list-style:none;padding-left:0}
.rf li{position:relative;padding-left:1.7em;margin:.6em 0}
.rf li::before{content:"?";position:absolute;left:0;top:.18em;width:1.25em;height:1.25em;display:grid;place-items:center;font-weight:900;font-size:.85em;
  background:var(--ink);color:var(--yel);border-radius:50%;line-height:1}

/* takeaway：本頁收穫 */
.take{background:var(--red);color:var(--white);border:3px solid var(--ink);box-shadow:.28em .28em 0 var(--ink);margin-bottom:1.4em}
.take .blk-k{box-shadow:.16em .16em 0 var(--paper)}
.take ul{padding-left:1.25em}
.take li{font-size:19px;font-weight:700;line-height:1.6;margin:.45em 0}
.take li::marker{color:var(--ink)}
.take strong{background:none;text-decoration:underline;text-decoration-thickness:2px}
.take code{background:rgba(255,255,255,.22);color:var(--white)}

/* note：附註 */
.note{background:var(--tone);border:0;border-left:6px solid var(--ink);padding:.9em 1.1em .35em;font-size:15.5px;line-height:1.7}
.note-k{display:inline-block;font-weight:900;font-size:13.5px;margin-bottom:.35em;padding:0 .5em;border:2px solid var(--ink);background:var(--paper)}
.note p{margin-bottom:.6em}

/* steps：有序步驟 */
.stp{border:0;background:none;padding:0}
.stp>.blk-k{margin:0 0 .8em}
.steps{list-style:none;counter-reset:st;padding-left:0;margin:0 0 1.2em}
.steps>li{counter-increment:st;position:relative;padding-left:3.1em;margin:0;padding-bottom:1em;min-height:2.6em}
.steps>li::before{content:counter(st);position:absolute;left:0;top:-.05em;width:2.15em;height:2.15em;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:var(--paper);font-weight:900;font-size:.95em;box-shadow:.12em .12em 0 var(--acc);font-variant-numeric:tabular-nums}
.steps>li:not(:last-child)::after{content:"";position:absolute;left:1.02em;top:2.15em;bottom:-.05em;border-left:2.5px dotted var(--ink)}
.steps>li:last-child{padding-bottom:.2em}
.steps strong{background:none;font-weight:900}

/* flow：橫向五站 */
.flow{border:0;background:none;padding:0}
.flow-l{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:20px;margin:0 0 1.4em;padding:0}
@media screen and (min-width:761px){ .prose .flow{margin-left:calc(12px - clamp(16px,4.6vw,44px));margin-right:calc(12px - clamp(16px,4.6vw,44px))} }
.flow-l li{position:relative;display:flex;flex-direction:column;gap:6px;margin:0;padding:12px 11px 12px;background:var(--white);border:2.5px solid var(--ink);
  box-shadow:.2em .2em 0 var(--shadow)}
.flow-l li:nth-child(odd){background:var(--tone-2)}
.flow-l li:not(:last-child)::after{content:"";position:absolute;right:-18px;top:26px;width:0;height:0;border-style:solid;border-width:9px 0 9px 13px;
  border-color:transparent transparent transparent var(--ink)}
.fl-n{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--acc);color:var(--ink);border:2.5px solid var(--ink);font-weight:900;font-size:15px}
.fl-name{font-weight:900;font-size:16px;line-height:1.4;background:none!important}
.fl-d{font-size:14.5px;line-height:1.6}
@media screen and (max-width:760px){
  .flow-l{grid-template-columns:1fr;gap:20px}
  .flow-l li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:start}
  .fl-n{grid-row:span 2}
  .flow-l li:not(:last-child)::after{right:auto;left:22px;top:auto;bottom:-17px;border-width:12px 9px 0 9px;border-color:var(--ink) transparent transparent transparent}
}

/* compare：兩欄對照 */
.compare{border:0;background:none;padding:0}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp-col{border:2.5px solid var(--ink);background:var(--white);box-shadow:.2em .2em 0 var(--shadow);min-width:0}
.cmp-h{margin:0;padding:.55em .9em;font-size:16.5px;font-weight:900;line-height:1.45;border-bottom:2.5px solid var(--ink);background:var(--teal-soft)}
.cmp-2 .cmp-h{background:var(--yel-soft)}
.cmp-b{padding:.8em .95em .2em;font-size:16px}
.cmp-b ol,.cmp-b ul{padding-left:1.3em}
@media screen and (max-width:760px){ .cmp{grid-template-columns:1fr} }

/* download */
.dl{border:0;background:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.dl-btn{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:.7em 1.15em;background:var(--yel);color:var(--ink);text-decoration:none;
  border:3px solid var(--ink);box-shadow:.22em .22em 0 var(--ink);line-height:1.35}
.dl-btn b{display:block;font-size:17px;font-weight:900}
.dl-btn small{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.dl-btn:hover{background:#f7c766}
.dl-btn:active{transform:translate(2px,2px);box-shadow:.1em .1em 0 var(--ink)}
.dl-btn.sm b{font-size:15.5px}
.dl-more{font-weight:700;font-size:15px}

/* links */
.ln{list-style:none;padding:0}
.ln li{padding:.6em 0;border-bottom:1.5px dashed rgba(20,20,20,.35);margin:0}
.ln li:last-child{border-bottom:0}
.ln a{font-weight:900}
.ln-host{display:inline-flex;align-items:center;gap:4px;margin-left:.6em;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.ln-d{display:block;font-size:15.5px;color:var(--muted)}

/* Explorer */
.xp{margin:0 0 28px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.xp-btn{display:inline-flex;align-items:center;gap:12px;padding:.65em 1.1em;background:var(--teal);color:var(--ink);text-decoration:none;
  border:3px solid var(--ink);box-shadow:.22em .22em 0 var(--shadow);line-height:1.35;max-width:100%}
.xp-btn b{display:block;font-size:17px;font-weight:900}
.xp-btn small{display:block;font-size:13.5px;font-weight:700}
.xp-btn:hover{background:#56b3af}
.xp-note{flex:1 1 260px;margin:0;font-size:14px;line-height:1.6;color:var(--pagemuted)}
.xp-dlg{width:min(1120px,calc(100vw - 32px));height:min(88vh,920px);max-width:none;max-height:none;padding:0;border:3px solid var(--ink);
  box-shadow:.4em .4em 0 var(--acc);background:var(--paper);color:var(--ink)}
.xp-dlg[open]{display:flex;flex-direction:column}
.xp-dlg::backdrop{background:rgba(20,20,20,.62)}
.xp-head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 16px;background:var(--ink);color:var(--paper)}
.xp-head h2{flex:1 1 auto;min-width:0;margin:0;font-size:15.5px;font-weight:900;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-name::before{content:"｜"}
.xp-new,.xp-close{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 12px;border:2px solid #4a4a50;border-radius:6px;
  background:#26262a;color:var(--paper);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.xp-new:hover,.xp-close:hover{border-color:var(--teal)}
.xp-dlg iframe{flex:1 1 auto;width:100%;border:0;background:var(--paper)}
@media screen and (max-width:760px){
  .xp-dlg{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;box-shadow:none}
  .xp-head h2{font-size:14px}
  .xp-new{padding:0 9px}
}

/* 頁尾導覽 */
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:6px 0 0}
.pg{display:flex;flex-direction:column;gap:2px;padding:.75em 1em;background:var(--paper);color:var(--ink);text-decoration:none;border:3px solid var(--ink);
  box-shadow:.25em .25em 0 var(--shadow);min-width:0}
.pg:hover{background:var(--white)}
.pg-k{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--muted)}
.pg-t{font-weight:900;font-size:16px;line-height:1.45}
.pg-next{text-align:right;align-items:flex-end}
.pg-toc{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:.55em .9em;font-weight:900;font-size:15px;color:var(--pagefg);
  text-decoration:none;border:2.5px solid currentColor;border-radius:999px;white-space:nowrap}
.pg-toc:hover{background:var(--pagefg);color:var(--bgpage)}
@media screen and (max-width:760px){
  .pager{grid-template-columns:1fr 1fr}
  .pg-toc{grid-column:1 / -1;grid-row:2;justify-self:center}
  .pg-empty{display:none}
  .pg-empty+.pg-toc+.pg,.pg+.pg-toc+.pg-empty{grid-column:1 / -1}
}
@media screen and (max-width:400px){ .pager{grid-template-columns:1fr} .pg-next{text-align:left;align-items:flex-start} .pg-toc{grid-row:auto} }

/* 網站頁尾 */
.site-foot{max-width:calc(var(--wide) + 32px);margin:0 auto;padding:22px 16px 48px;border-top:3px solid var(--pagefg);font-size:14px;line-height:1.7;color:var(--pagemuted)}
.site-foot p{margin:0 0 .6em}
.site-foot b{color:var(--pagefg)}
.sf-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.sf-links a{font-weight:700;color:var(--pagefg)}

/* 按鈕 */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 4px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:.55em 1.05em;font-weight:900;font-size:15.5px;line-height:1.35;text-decoration:none;color:var(--ink);
  background:var(--white);border:3px solid var(--ink);box-shadow:.2em .2em 0 var(--ink);cursor:pointer}
.btn:hover{background:var(--tone)}
.btn.pri{background:var(--acc)}
.btn.pri:hover{filter:brightness(1.07)}
.btn:active{transform:translate(2px,2px);box-shadow:.08em .08em 0 var(--ink)}
.btn.is-off{border-style:dashed;box-shadow:none;color:var(--muted);background:var(--tone-2);cursor:not-allowed;font-weight:700}
.btn.is-off:active{transform:none}

/* ── 總覽 ── */
.cover{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;padding:clamp(20px,3.6vw,36px)}
.cv-t{margin:.45em 0 .35em;font-size:clamp(25px,3.4vw,34px);line-height:1.35;font-weight:900;text-wrap:balance}
.cv-sub{margin:0 0 .7em}
.cv-sub span{display:inline-block;background:var(--acc);color:var(--ink);font-weight:900;font-size:clamp(20px,2.6vw,25px);padding:.1em .6em;
  border:3px solid var(--ink);transform:rotate(-1deg);box-shadow:.16em .16em 0 var(--ink)}
.cv-q{margin:0 0 .6em;font-size:17.5px;font-weight:500;line-height:1.7}
.cv-by{margin:0;font-weight:700;font-size:15px}
.cv-facts{margin:.2em 0 0;font-size:14px;font-weight:700;color:var(--muted)}
.cv-fig{margin:0}
@media screen and (max-width:860px){ .cover{grid-template-columns:1fr} .cv-fig{order:-1} }
.ov-sec{padding-top:clamp(18px,3vw,28px)}
.ov-h{margin:0 0 .3em;font-size:22px;font-weight:900}
.ov-sec .blk{margin-bottom:1em}
.sec-h{margin:38px 0 16px;font-size:clamp(22px,3vw,27px);font-weight:900;color:var(--pagefg);display:flex;align-items:center;gap:12px}
.sec-h::after{content:"";flex:1 1 auto;border-top:3px solid var(--pagefg);opacity:.85}
.parts{counter-reset:none}
.part{padding:18px clamp(16px,3vw,26px) 12px}
.pt-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-bottom:12px;border-bottom:2.5px solid var(--ink)}
.pt-no{flex:none;margin:0;display:flex;align-items:baseline;gap:2px;background:var(--ink);color:var(--paper);font-weight:900;font-size:30px;line-height:1.1;
  padding:.12em .4em .16em;transform:rotate(-2deg);box-shadow:.12em .12em 0 var(--acc)}
.pt-no span{font-size:14px;font-weight:700}
.pt-info{flex:1 1 220px;min-width:0}
.pt-t{margin:0;font-size:21px;font-weight:900;line-height:1.4}
.pt-m{margin:.1em 0 0;display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--muted)}
.anim-b{font-size:14.5px;padding:.45em .9em}
.pl{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.pl li{margin:0;border-bottom:1.5px dashed rgba(20,20,20,.3)}
.pl a{display:flex;align-items:baseline;gap:10px;padding:.6em .3em;text-decoration:none;line-height:1.5}
.pl a:hover{background:var(--tone)}
.pl-n{flex:none;min-width:1.6em;text-align:right;font-weight:900;font-variant-numeric:tabular-nums;color:var(--muted)}
.pl-t{flex:1 1 auto;font-weight:700}
.pl-m{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;color:var(--muted);white-space:nowrap}
.pl-x{font-size:11.5px;font-weight:700;padding:0 .4em;border:1.5px solid var(--teal);color:var(--ink);background:var(--teal-soft)}
.pl li.seen .pl-n::after{content:"✓";margin-left:2px;color:var(--teal)}
@media screen and (max-width:760px){ .pl{grid-template-columns:1fr} }
.res-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.res-i{padding:16px 18px 18px;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.res-i h3{margin:0;font-size:18px;font-weight:900}
.res-i p{margin:0 0 4px;font-size:15px;line-height:1.65}
.res-more{font-size:14px!important;font-weight:700}
@media screen and (max-width:860px){ .res-g{grid-template-columns:1fr} }
.ov-other{margin:30px 0 0;font-weight:700}

/* 入口 */
.hero{padding:18px 0 6px}
.nb{white-space:nowrap}
.cv-t,.hero-t{word-break:keep-all}
.hero-t{margin:.4em 0 .3em;font-size:clamp(27px,4.4vw,44px);line-height:1.28;font-weight:900;text-wrap:balance;color:var(--pagefg)}
.hero-l{margin:0 0 .5em;max-width:46em;text-wrap:pretty;font-size:17.5px;color:var(--pagefg)}
.hero .cv-by{color:var(--pagefg)}
.courses{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.course{padding:16px 20px 22px;display:flex;flex-direction:column;margin:0}
.crs-fig{display:block;margin:0 0 14px}
.crs-fig .sc-frame{box-shadow:none}
.crs-t{margin:.35em 0 .3em;font-size:clamp(23px,2.8vw,28px);font-weight:900;line-height:1.35}
.crs-q{margin:0 0 .8em;font-size:16.5px;line-height:1.7}
.crs-dl{margin:0 0 18px;display:grid;gap:8px}
.crs-dl div{display:grid;grid-template-columns:3.2em 1fr;gap:8px;font-size:15px;line-height:1.6}
.crs-dl dt{font-weight:900}
.crs-dl dt::after{content:""}
.crs-dl dd{margin:0}
.crs-go{margin-top:auto;align-self:flex-start;font-size:17px}
@media screen and (max-width:860px){ .courses{grid-template-columns:1fr} }

/* 素材包 */
.kits{display:grid;gap:28px}
.kit{padding:18px clamp(16px,3vw,30px) 14px;margin:0}
@media screen and (min-width:900px){
  .kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:40px;align-items:start;padding-bottom:22px}
  .kit-a{position:sticky;top:calc(var(--bar-h) + 20px)}
  .kit-tree .kit-h{margin-top:8px}
}
.kit-t{margin:.35em 0 .2em;font-size:clamp(22px,3vw,28px);font-weight:900}
.kit-l{margin:0 0 14px}
.kit-l a{font-weight:700}
.kit-meta{margin:16px 0 8px;display:grid;gap:6px;font-size:14.5px}
.kit-meta div{display:grid;grid-template-columns:5.2em 1fr;gap:10px}
.kit-meta dt{font-weight:900}
.kit-meta dd{margin:0;min-width:0}
.sha{word-break:break-all;font-size:13px!important}
.kit-h{margin:20px 0 8px;font-size:18px;font-weight:900}
.kt,.kt ul{list-style:none;margin:0;padding:0}
.kt ul{padding-left:1.3em;border-left:2px dotted rgba(20,20,20,.45);margin-left:.5em}
.kt li{margin:0;padding:.3em 0}
.kt-n{display:inline-flex;align-items:center;gap:6px;font-size:15px;overflow-wrap:anywhere;font-family:var(--font)}
.kt-dir>.kt-n b{font-weight:900}
.kt-s{font-size:12.5px;color:var(--muted);margin-left:.4em}
.kt-d{display:block;padding-left:1.7em;font-size:14.5px;line-height:1.6;color:var(--muted)}
.kt-use{display:block;padding-left:1.7em;font-size:13.5px;line-height:1.6}
.kt-use a{font-weight:700}
.kit-b{margin:20px 0 6px}
.kit-b ul{margin:.2em 0 .6em;padding-left:1.2em}
.kit-tip{margin:26px 0 0;padding:14px 20px}
.kit-tip summary{cursor:pointer;font-weight:900}
.kit-tip p,.kit-tip li{font-size:15px}
.kit-tip ul{padding-left:1.2em}

/* 全份列印版（螢幕） */
.print-cover{padding:clamp(20px,4vw,40px)}
.print-tip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0;padding:12px 14px;background:var(--yel-soft);border:2px dashed var(--ink);font-size:15px}
.print-toc ol{list-style:none;padding:0;margin:0}
.print-toc>ol{columns:2;column-gap:30px}
.print-toc>ol>li{break-inside:avoid;margin:0 0 14px}
.pt-toc-h{margin:0 0 4px;font-weight:900;display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
.pt-toc-h span{font-size:13px;color:var(--muted);font-weight:700}
.print-toc a{display:flex;gap:8px;text-decoration:none;padding:2px 0;font-size:15px;line-height:1.5}
.print-toc a:hover{text-decoration:underline}
@media screen and (max-width:760px){ .print-toc>ol{columns:1} }
.sec{padding-top:26px;margin-top:20px;border-top:4px dashed color-mix(in srgb,var(--pagefg) 35%,transparent)}
.sec .ph-t{font-size:clamp(23px,3.6vw,31px)}
.sec .sheet{margin-bottom:10px}
.sec-url{margin:0 0 10px;font-size:14px;font-weight:700}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ── 列印 ── */
@media print{
  @page{size:A4;margin:15mm 14mm 16mm}
  :root,:root:not([data-theme="light"]){--bgpage:#fff;--pagefg:#141414;--pagemuted:#444;--shadow:transparent}
  html{scroll-padding-top:0}
  body{background:#fff;color:#141414;font-size:11pt;line-height:1.65}
  .bar,.skip,.pager,.xp,.xp-dlg,.copy,.pr-msg,.sc-cap,.scene.is-pending,.cv-fig.is-pending,.btns,.btn,.dl-more,.no-print,.sec-url,
  .crumbs,.site-foot .sf-links,.tw-hint,.ov-other,.kit-tip,.jump,.prt{display:none!important}
  .wrap,.wrap.wide{max-width:none;padding:0}
  .sheet,.sc-frame,.blk,.cmp-col,.flow-l li,.prompt,.take,.tw,.dl-btn,.xp-btn{box-shadow:none!important}
  .sheet{border:1px solid #777;margin:0 0 6mm}
  .prose{padding:6mm 7mm 2mm}
  .ph-t{font-size:20pt;margin:.2em 0 .45em}
  .scene,.cv-fig{margin:0 auto 5mm;max-width:118mm}
  .sc-frame{border:1px solid #777}
  .blk{border-width:1px;break-inside:avoid}
  .tbl,.flow,.compare,.stp{break-inside:auto}
  .tw{overflow:visible;border-width:1px}
  .t{min-width:0!important;font-size:9.5pt;line-height:1.5}
  .t th,.t td{position:static!important;box-shadow:none!important;padding:.35em .5em;border-right-width:1px;border-bottom-width:1px}
  .t tr{break-inside:avoid}
  .t thead{display:table-header-group}
  .tag,.blk-k,.lv,.t th,.pr-head,.steps>li::before,.fl-n,.ex-tag,.ex-t,.pt-no,.cv-sub span,.rf li::before,.jm-part span{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tag,.lv,.blk-k,.cv-sub span,.pt-no{box-shadow:none!important}
  .take{background:#fff;color:#141414;border:1.5px solid #141414}
  .take li{font-size:11.5pt}
  .take li::marker{color:#e5484d}
  .take .blk-k{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .box,.ex,.note,.check,.reflect,.cmp-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pr-body{font-size:9.5pt;line-height:1.55;padding:.6em .8em}
  .flow-l{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4mm}
  .flow-l li{display:flex!important;padding:6px}
  .fl-d{font-size:9pt}
  .cmp{grid-template-columns:1fr 1fr!important;gap:4mm}
  .cmp-b{font-size:10pt}
  a{text-decoration:none}
  .prose a[href^="http"]::after,.ln a[href^="http"]::after{content:"（" attr(href) "）";font-weight:400;font-size:9pt;overflow-wrap:anywhere}
  .ln-host{display:none}
  .p-print .print-cover{border:0;break-after:page}
  .p-print .sec{break-before:page;border-top:0;padding-top:3mm;margin-top:0}
  .p-print .sec .sheet{border:0}
  .p-print .sec .prose{padding:0}
  .print-toc>ol{columns:2}
  .cover{display:block;border:0}
  .part{break-inside:avoid}
  .site-foot{border-top:1px solid #999;padding:4mm 0 0;font-size:9pt}
}