/* ============================================================
   吳維文 個人作品集 — 彩色 IDE 風(06-terminal-light 移植)
   共用設計系統:tokens / 深色色票 / 語法色 / doc 排版 / 元件 / 雙語切換
   風格來源:timmy-web skill「06-terminal-light」(accent #5B6CF0 / bg #E7E1F7)
   ============================================================ */

/* ===== 可由外部調色的兩個主變數(?accent= / ?bg= / 設定面板覆寫)===== */
:root{
  --accent:#5B6CF0;   /* 主強調色:關鍵字 / 重點 / active 分頁 / 狀態列漸層 */
  --bg:#E7E1F7;       /* 頁面 / 編輯器最外底色 */
  /* 衍生色(由上述兩變數 color-mix 推導) */
  --accent-2:color-mix(in srgb, var(--accent) 70%, #8B5CF6);
  --accent-soft:color-mix(in srgb, var(--accent) 14%, #fff);
  --accent-softer:color-mix(in srgb, var(--accent) 9%, #fff);
  --accent-line:color-mix(in srgb, var(--accent) 26%, #fff);
  --bg-page:color-mix(in srgb, var(--bg) 55%, #fff);
  --panel:color-mix(in srgb, var(--bg) 22%, #fff);
  --surface:#FFFFFF;
  --line:color-mix(in srgb, var(--bg) 34%, #fff);
  --linesoft:color-mix(in srgb, var(--bg) 22%, #fff);
  --tab-off:color-mix(in srgb, var(--bg) 40%, #fff);
  --tab-off-h:color-mix(in srgb, var(--bg) 26%, #fff);
  --scroll-track:color-mix(in srgb, var(--bg) 42%, #fff);
  --scroll-thumb:color-mix(in srgb, var(--accent) 22%, #fff);
  --scroll-thumb-h:color-mix(in srgb, var(--accent) 45%, #fff);
  /* 文字基色 */
  --ink:#25303B;
  --muted:#6B7280;
  --tab-on-ink:#25303B;
  --tab-off-ink:#8A86A6;
  --tab-off-ink-h:#6B7280;
  --com:#A9A4C2;
  /* callout / 警示框(淺底;深色於 [data-mode=dark] 重定義) */
  --season-bg:#FFF4F1; --season-line:#FBD9D0; --season-bar:#F8765C;
  --award-bg:color-mix(in srgb, var(--accent) 8%, #fff); --award-bar:var(--accent);
}
/* ===== 深色(IDE 冷藍黑基底;--accent 不動，僅重定義派生變數)===== */
:root[data-mode="dark"]{
  --bg:#14131c;
  --bg-page:#1a1922;
  --surface:#1d1c27;
  --panel:#17161f;
  --line:#2b2a38;
  --linesoft:#242331;
  --tab-off:#1a1923;
  --tab-off-h:#222130;
  --ink:#e7e5f0;
  --muted:#9d9ab4;
  --tab-on-ink:#e7e5f0;
  --tab-off-ink:#7f7c97;
  --tab-off-ink-h:#a8a5be;
  --com:#6f6c86;
  --accent-soft:color-mix(in srgb, var(--accent) 22%, #14131c);
  --accent-softer:color-mix(in srgb, var(--accent) 14%, #14131c);
  --accent-line:color-mix(in srgb, var(--accent) 40%, #14131c);
  --scroll-track:#1a1922;
  --scroll-thumb:color-mix(in srgb, var(--accent) 34%, #14131c);
  --scroll-thumb-h:color-mix(in srgb, var(--accent) 55%, #14131c);
  --season-bg:#2a1d1b; --season-line:#4a2e28; --season-bar:#F8765C;
  --award-bg:color-mix(in srgb, var(--accent) 20%, #14131c); --award-bar:var(--accent);
}
html{background:var(--bg);scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;background:var(--bg);transition:background-color .2s ease,color .2s ease}

/* ===== 變數驅動的「面/底/線」工具類(取代寫死的 Tailwind 色)===== */
.bg-bg{background:var(--bg-page)}
.bg-surface{background:var(--surface)}
.bg-panel{background:var(--panel)}
.border-line{border-color:var(--line)}
.border-linesoft{border-color:var(--linesoft)}
.text-line{color:var(--line)}
.text-accent{color:var(--accent)}
.bg-accent{background:var(--accent)}
.border-accent{border-color:var(--accent)}
.bg-accent-soft{background:var(--accent-soft)}
.accent-dot{background:var(--accent)}
.hover\:border-accent:hover{border-color:var(--accent)}
.hover\:text-accent:hover{color:var(--accent)}
/* 鮮明語法色 — accent 關鍵字 · emerald 字串 · coral 數字 · violet 函式 · rose 標籤 */
.t-key{color:var(--accent)}.t-str{color:#10B981}.t-num{color:#F8765C}.t-fn{color:#8B5CF6}.t-tag{color:#EC4899}.t-com{color:var(--com)}
.pulse{animation:pl 2s ease-in-out infinite}@keyframes pl{0%,100%{opacity:1}50%{opacity:.45}}
.tab-on{background:var(--surface);color:var(--tab-on-ink)}
.tab-off{background:var(--tab-off);color:var(--tab-off-ink)}.tab-off:hover{background:var(--tab-off-h);color:var(--tab-off-ink-h)}
::selection{background:var(--accent-line);color:var(--accent)}
*::-webkit-scrollbar{height:11px;width:11px}*::-webkit-scrollbar-track{background:var(--scroll-track)}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--scroll-track);border-radius:9px}*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-h)}
.mm{width:100%;height:4px;margin-bottom:3px;border-radius:3px;opacity:.7}
.mm-accent{background:var(--accent)}

/* ===== 文件預覽排版(.doc:正常渲染內容，非 code)===== */
.doc h1{font-family:'Noto Serif TC',serif;font-weight:700;font-size:2rem;letter-spacing:.01em;line-height:1.3;color:var(--ink);margin:0 0 .4rem}
.doc h2{font-family:'Noto Serif TC',serif;font-weight:600;font-size:1.3rem;color:var(--ink);margin:2.1rem 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--line)}
.doc h2::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--accent),var(--accent-2));margin-right:.55rem;vertical-align:middle}
.doc h3{font-family:'Noto Serif TC',serif;font-weight:600;font-size:1.05rem;color:var(--ink);margin:0}
.doc p{font-family:'Noto Serif TC',serif;line-height:1.9;color:var(--ink);margin:.6rem 0}
.doc .lead{color:var(--muted);font-style:italic;font-size:1.05rem;margin:0 0 1.4rem;padding-bottom:1.1rem;border-bottom:2px solid var(--line)}
.doc strong{color:var(--accent);font-weight:700}
/* 只給「純內文連結」(無 class)加底線樣式;.docbtn/.arrowlink/.proj-card 等元件連結不受影響
   (否則 .doc a 的 color:var(--accent) 會蓋掉 .docbtn 的白字 → accent 字壓 accent 底而看不見) */
.doc a:not([class]){color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.doc a:not([class]):hover{border-bottom-color:var(--accent)}
.softcard{box-shadow:0 10px 30px -14px color-mix(in srgb, var(--accent) 28%, transparent)}

/* ===== 命令面板(Ctrl/⌘⇧P)結果列 ===== */
.pal-item{color:var(--muted)}
.pal-item:hover{background:var(--accent-soft);color:var(--ink)}
.pal-item.is-sel{background:var(--accent-soft);color:var(--accent);font-weight:700}

/* ===== 設定面板:命令列切換鈕(沿用 IDE 檔列視覺)===== */
.cmd-seg{color:var(--muted)}
.cmd-seg:hover{background:var(--accent-soft);color:var(--ink)}
.cmd-seg[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.cmd-seg[aria-pressed="true"] .cmd-dot{opacity:1}
.cmd-dot{opacity:0}

/* ============================================================
   履歷站元件(由 site.css 移植成 IDE 視覺、深色感知)
   ============================================================ */

/* ---- chip / pill(標籤、徽章)---- */
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;letter-spacing:.02em;color:var(--muted);
  background:var(--accent-soft);border:1px solid var(--line);border-radius:8px;padding:.18rem .55rem;line-height:1.5}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-radius:999px;padding:.18rem .65rem;line-height:1.5}
.pill.is-highlight,.pill.highlight{color:#F8765C;background:var(--season-bg);border-color:var(--season-line)}
.pill.is-done,.pill.done{color:#10B981;background:color-mix(in srgb,#10B981 12%,var(--surface));border-color:color-mix(in srgb,#10B981 32%,transparent)}
.pill.tbd{color:var(--muted);border-color:var(--line)}

/* ---- 關鍵字/數值盒(stat)---- */
.statbox{border-radius:14px;background:var(--panel);border:1px solid var(--line);padding:1rem;text-align:center}
.statbox .s-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:.25rem}
.statbox .s-value{font-family:'Noto Serif TC',serif;font-size:1.9rem;font-weight:700;line-height:1;color:var(--accent)}
.statbox .s-sub{font-size:.8rem;color:var(--muted);margin-top:.3rem}

/* ---- callout(左色條重點框)---- */
.callout{border-radius:14px;padding:.9rem 1.1rem;margin:1rem 0;background:var(--accent-soft);border:1px solid var(--line);border-left:4px solid var(--accent)}
.callout .co-tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--accent);margin-bottom:.25rem;display:block}
.callout.is-season{background:var(--season-bg);border-color:var(--season-line);border-left-color:var(--season-bar)}
.callout.is-season .co-tag{color:#F8765C}
.callout p{margin:0;font-family:'Noto Serif TC',serif;line-height:1.85}

/* ---- 定義列表 / key-value ---- */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 1.2rem;margin:0;font-family:'Noto Serif TC',serif}
.kv dt{font-weight:700;color:var(--accent);font-size:.92rem;line-height:1.6}
.kv dd{margin:0;color:var(--ink);line-height:1.7}
@media (max-width:560px){.kv{grid-template-columns:1fr;gap:.15rem}.kv dd{margin-bottom:.6rem}}

/* ---- 時間軸(經歷)---- */
.tl{list-style:none;margin:0;padding:0}
.tl-item{position:relative;padding:0 0 1.7rem 1.7rem;border-left:2px solid var(--line)}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-7px;top:.4rem;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tl-period{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.tl-role{font-family:'Noto Serif TC',serif;font-size:1.05rem;font-weight:600;color:var(--ink);margin:.2rem 0}
.tl-org{color:var(--accent);font-weight:600}

/* ---- 篩選列(filter)---- */
.filterbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.2rem}
.filterbtn{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:600;letter-spacing:.03em;
  color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:.35rem .9rem;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.4rem}
.filterbtn:hover{border-color:var(--accent);color:var(--accent)}
.filterbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.filterbtn .fb-mark{opacity:.55}
.filterbtn.is-active .fb-mark{opacity:1}

/* ---- 專案卡(含縮圖)---- */
.cardgrid{display:grid;gap:1rem}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.proj-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.proj-card:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 16px 36px -20px color-mix(in srgb,var(--accent) 60%,transparent)}
.proj-card.hide{display:none !important}
.proj-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-page);border-bottom:1px solid var(--line)}
.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.proj-body{padding:1rem 1.15rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.proj-body h3{font-family:'Noto Serif TC',serif;font-size:1.05rem;font-weight:600;color:var(--ink);margin:.1rem 0 0;line-height:1.45}
.proj-desc{font-family:'Noto Serif TC',serif;font-size:.9rem;color:var(--muted);line-height:1.7;margin:0}
.proj-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.proj-more{margin-top:auto;padding-top:.6rem;font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600;color:var(--accent)}

/* ---- 證明文件卡(cred)---- */
.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.cred{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.cred:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 28px -18px color-mix(in srgb,var(--accent) 55%,transparent)}
.cred.hide{display:none !important}
.cred-thumb{aspect-ratio:4/3;background:var(--bg-page);border-bottom:1px solid var(--line);overflow:hidden}
.cred-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cred-body{padding:.7rem .9rem .85rem}
.cred-title{font-family:'Noto Serif TC',serif;font-size:.9rem;font-weight:600;line-height:1.45;color:var(--ink);display:block}
.cred-meta{font-size:.74rem;color:var(--muted);margin-top:.25rem;display:block}
.cred-link{display:inline-block;margin-top:.45rem;font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--accent)}

/* ---- 箭頭連結列(quick links)---- */
.arrowlink{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);padding:.85rem 1.1rem;text-decoration:none;color:var(--ink);
  font-family:'Noto Serif TC',serif;font-weight:600;transition:all .15s}
.arrowlink:hover{border-color:var(--accent);color:var(--accent)}
.arrowlink .al-arr{color:var(--accent);font-family:'JetBrains Mono',monospace}

/* ---- 按鈕 ---- */
.docbtn{display:inline-flex;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.9rem;
  letter-spacing:.02em;color:#fff;background:var(--accent);padding:.6rem 1.15rem;border-radius:10px;text-decoration:none;
  border:1px solid var(--accent);transition:all .15s;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.docbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.docbtn.is-ghost{color:var(--accent);background:transparent;box-shadow:none}
.docbtn.is-ghost:hover{background:var(--accent-soft)}

/* ---- 技能標籤群 ---- */
.skill-label{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .45rem}
.taglist{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}

/* ---- 卡片面板(泛用)---- */
.panelcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.25rem 1.4rem}
.panelcard.is-surface{background:var(--surface)}

/* ============================================================
   雙語切換(.zh / .en;CSS 隱藏另一語言。預設 data-lang="zh")
   ============================================================ */
html[data-lang="en"] .zh{display:none !important}
html[data-lang="zh"] .en{display:none !important}

/* IDE chrome 內當前頁高亮(由 ide.js 加上 .is-current)。
   sidebar 檔列:accent-soft 底 + ink 文字 + dot;tab:tab-on。 */
.navfile.is-current{background:var(--accent-soft);color:var(--ink)}
.navfile.is-current .nf-dot{opacity:1}
.nf-dot{opacity:0}
.navtab.is-current{background:var(--surface);color:var(--tab-on-ink)}
.navtab{background:var(--tab-off);color:var(--tab-off-ink)}
.navtab:hover{background:var(--tab-off-h);color:var(--tab-off-ink-h)}

/* 整個 EXPLORER 側欄收合(由活動列 explorer 圖示 或 EXPLORER 標頭的 « 切換) */
body.sidebar-collapsed aside{display:none !important}
[data-toggle-sidebar],[data-view-btn]{cursor:pointer}
/* 側欄視圖切換(EXPLORER / SEARCH 同位置) */
aside [data-view][hidden]{display:none}
#ide-search-results .sr.is-sel{background:var(--accent-soft);color:var(--ink)}
/* 手機:開搜尋時，側欄(SEARCH 視圖)以「全螢幕」顯示，像獨立搜尋畫面(桌機才是固定側欄)*/
@media (max-width:639px){
  body.sb-open{overflow:hidden}
  body.sb-open aside{display:block !important;position:fixed;inset:0;width:auto;z-index:60;overflow-y:auto;border-right:0}
  /* 全螢幕時加大標頭與關閉鈕，方便觸控 */
  body.sb-open aside [data-view="search"] > div:first-child{padding-top:.7rem;padding-bottom:.7rem;font-size:12px}
  body.sb-open aside [data-toggle-sidebar]{font-size:20px;padding:.15rem .3rem;margin:0}
  body.sb-open aside #ide-search-input{font-size:16px;padding-top:.4rem;padding-bottom:.4rem}
  body.sb-open aside #ide-search-results{max-height:none}
}

/* ===== 桌機:左欄(活動列 + 側欄)黏附視窗、滿版高度 =====
   讓 SEARCH / CHAT 面板底部貼齊畫面,捲動長頁時左欄固定在畫面上(VS Code 風)。
   依賴:外殼 .ide-shell 用 overflow:clip(非 hidden)——否則它會成為 scrollport 而讓 sticky 失效。 */
.ide-shell{overflow:clip}
@media (min-width:640px){
  [data-actbar],aside{align-self:flex-start;position:sticky;top:0;height:100vh}
  aside[data-sidebar]{display:flex;flex-direction:column;overflow:hidden}
  aside [data-view]:not([hidden]){flex:1;min-height:0}
  aside [data-view="explorer"]:not([hidden]){display:block;overflow-y:auto}
  aside [data-view="search"]:not([hidden]){display:flex;flex-direction:column}
  aside [data-view="search"] #ide-search-results{flex:1;min-height:0;max-height:none}
}

/* 可開合資料夾(EXPLORER):由 ide.js 切換 .is-collapsed;chevron ▾/▸ */
.foldhead{cursor:pointer;background:none;border:0;font:inherit;color:inherit}
.foldbody.is-collapsed{display:none}
.foldhead.is-collapsed .chev{transform:none}
.foldhead .chev{display:inline-block;transition:transform .12s}
.filefolder.is-collapsed + .filefolderbody{display:none}

/* ============================================================
   詳情頁(Phase 2)相容層:沿用 site.css 元件類名，改套 IDE 視覺、深色感知，
   讓原 site/ 詳情頁內容可近乎原樣移植。舊變數別名指向 IDE token，自動隨深色變。
   ============================================================ */
:root{
  --border:var(--line); --radius:10px; --paper:var(--bg-page);
  --gold:#F5A524; --highlight:#F8765C; --done:#10B981;
}
.doc .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.35rem;margin:.85rem 0}
.doc .card > p:last-child{margin-bottom:0}
.doc .card h3{margin:.1rem 0 .55rem;font-family:'Noto Serif TC',serif;color:var(--ink)}
.doc .hero-kicker{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem;font-weight:600}
.doc .detail-back{display:inline-block;margin-bottom:.9rem;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.82rem;text-decoration:none;border:0}
.doc .detail-back:hover{color:var(--accent)}
.doc .detail-hero{margin:.6rem auto 1.4rem;max-width:640px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);text-align:center}
.doc .detail-hero img{display:inline-block;width:auto;max-width:100%;max-height:320px;height:auto;vertical-align:middle}
.doc .split-hero{display:flex;flex-direction:column;gap:1.3rem;margin:1rem 0 1.6rem}
.doc .split-hero-img{flex:1.6;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.doc .split-hero-img img{display:block;width:100%;height:100%;object-fit:cover}
.doc .split-hero-content{flex:1}
.doc .split-hero-content .card{height:100%;margin:0}
@media(min-width:860px){.doc .split-hero{flex-direction:row;align-items:stretch}}
.doc .detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:1rem 0 1.4rem}
.doc .detail-meta > div{background:var(--surface);padding:.7rem 1rem}
.doc .detail-meta .dm-label{display:block;font-family:'JetBrains Mono',monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.15rem}
.doc .detail-meta .dm-value{font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.45;font-family:'Noto Serif TC',serif}
.doc .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.8rem;margin:1.1rem 0}
.doc .metric{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem .6rem}
.doc .metric .m-value{font-family:'Noto Serif TC',serif;font-size:1.55rem;font-weight:700;color:var(--accent);line-height:1.1}
.doc .metric .m-value small{font-size:.85rem;font-weight:600}
.doc .metric .m-label{font-size:.76rem;color:var(--muted);margin-top:.3rem;line-height:1.35}
.doc .info{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.1rem;margin:0;font-family:'Noto Serif TC',serif}
.doc .info dt{font-weight:700;color:var(--accent)}
.doc .info dd{margin:0;color:var(--ink)}
@media(max-width:520px){.doc .info{grid-template-columns:1fr;gap:.1rem}.doc .info dd{margin-bottom:.5rem}}
.doc .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0;padding:0;list-style:none}
.doc .tag{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);background:var(--accent-soft);border:1px solid var(--line);border-radius:8px;padding:.15rem .55rem}
.doc .steps{list-style:none;counter-reset:step;margin:.6rem 0;padding:0}
.doc .steps > li{position:relative;padding:0 0 1.1rem 2.7rem;min-height:1.8rem}
.doc .steps > li:last-child{padding-bottom:0}
.doc .steps > li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-size:.82rem;font-weight:700;font-family:'JetBrains Mono',monospace}
.doc .steps > li:not(:last-child)::after{content:"";position:absolute;left:calc(.9rem - 1px);top:1.9rem;bottom:0;width:2px;background:var(--line)}
.doc .steps .s-title{font-weight:700;color:var(--ink)}
.doc .callout .co-label{display:block;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.25rem;font-weight:700}
.doc .callout.gold{border-left-color:var(--gold)}
.doc .callout.award{border-left-color:var(--highlight);background:color-mix(in srgb,var(--highlight) 10%,var(--surface))}
.doc .fig{margin:1.4rem 0;text-align:center}
.doc .fig img{max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.doc .fig figcaption{font-size:.82rem;color:var(--muted);margin-top:.5rem}
.doc .fig-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin:1.1rem 0}
.doc .fig-row figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.6rem;text-align:center}
.doc .fig-row img{display:block;width:100%;height:auto;border-radius:6px}
.doc .fig-row figcaption{font-size:.78rem;color:var(--muted);margin-top:.4rem}
.doc figure{margin:1.4rem 0}
.doc figure img{max-width:100%;border-radius:10px}
.doc figcaption{color:var(--muted)}
.doc .demo-video{width:100%;max-width:760px;display:block;margin:.5rem auto 0;border:1px solid var(--line);border-radius:12px;background:#000}
.doc .btn{display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.9rem;color:#fff;background:var(--accent);padding:.6rem 1.15rem;border-radius:10px;text-decoration:none;border:1px solid var(--accent);transition:all .15s}
.doc .btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.doc .btn.ghost{color:var(--accent);background:transparent}
.doc .btn.ghost:hover{background:var(--accent-soft)}
.doc .links{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.5rem}
.doc .links a{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem 1rem;text-decoration:none;font-weight:600;color:var(--ink);font-family:'Noto Serif TC',serif}
.doc .links a:hover{border-color:var(--accent);color:var(--accent)}
.doc .links .arr{color:var(--accent);font-family:'JetBrains Mono',monospace}
.doc ul,.doc ol{font-family:'Noto Serif TC',serif;color:var(--ink);line-height:1.85}
.doc li{margin:.1rem 0}
.doc code{font-family:'JetBrains Mono',monospace;font-size:.88em;background:var(--accent-soft);color:var(--accent);padding:.05rem .35rem;border-radius:5px}
.doc em,.doc i{font-style:italic}

/* ============================================================
   無障礙:跳到主內容(鍵盤 Tab 第一站)+ 尊重動態縮減偏好
   ============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:.55rem 1.1rem;border-radius:0 0 12px 0;font-family:'JetBrains Mono',monospace;font-size:.85rem;
  font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ===== 跨頁 View Transitions(Chromium 126+;漸進增強,不支援的瀏覽器無感)===== */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
}

/* ============================================================
   列印 / 另存 PDF:隱藏 IDE 外殼，只乾淨輸出內容，並強制淺色(省墨、可讀)
   ============================================================ */
@media print {
  :root, :root[data-mode="dark"]{
    --bg:#fff!important; --bg-page:#fff!important; --surface:#fff!important; --panel:#fff!important;
    --ink:#1a1a1a!important; --muted:#555!important; --line:#ddd!important;
    --accent:#1d3557!important; --accent-2:#1d3557!important; --accent-soft:#eef1f6!important;
  }
  html, body { background:#fff!important; }
  body * { visibility:hidden!important; }
  #ide-content, #ide-content * { visibility:visible!important; }
  #ide-content{ position:absolute!important; left:0; top:0; width:100%!important; padding:0!important; }
  #ide-content .softcard, #ide-content [class*="shadow"]{ box-shadow:none!important; }
  .demo-video, .minimap { display:none!important; }
  @page { margin:1.6cm; }
}