/* ==========================================================================
   Extra CSS - Optimized & Refactored
   包含：互動特效、自定義配色、排版優化、深色模式適配
   ========================================================================== */

/* === 1. 全域變數與主題設定 (Variables & Theming) === */
:root {
  /* --- 互動特效變數 --- */
  --spotlight-bg: radial-gradient(circle, rgba(120, 140, 180, 0.12) 0%, transparent 70%);
  --spotlight-blend: multiply;

  /* --- Announce Banner 變數 (預設淺色) --- */
  --ann-border: rgba(255, 255, 255, 0.6);
  --ann-bg: rgba(255, 255, 255, 0.3);
  --ann-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  --ann-summary-color: #2c3e50;
  --ann-summary-bg: linear-gradient(90deg, rgba(44, 62, 80, 0.25), rgba(44, 62, 80, 0.05));
  --ann-summary-border: 1px solid rgba(44, 62, 80, 0.1);
  --ann-aside-bg: transparent;
  --ann-aside-color: #2c3e50;
  --ann-backdrop: blur(12px) saturate(180%);
  --ann-animation: none;

  /* --- FAQ Ripple Colors --- */
  --faq-ripple-color: #f7c948;
  --tip-ripple-color: #a8dcff;

  /* --- Grid Card Settings --- */
  --grid-card-font-size: 0.9rem;
  --grid-card-chip-size: 0.8rem;

  /* --- Preview Width --- */
  --preview-max-width: 700px;
}

[data-md-color-scheme="slate"] {
  /* --- 深色模式變數 --- */
  --spotlight-bg: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  --spotlight-blend: screen;

  /* --- Announce Banner (深色) --- */
  --ann-border: rgba(255, 255, 255, 0.1);
  --ann-bg: rgba(20, 20, 30, 0.4);
  --ann-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --ann-summary-color: #ffffff;
  --ann-summary-bg: linear-gradient(45deg, rgba(21, 101, 192, 0.75) 0%, rgba(33, 150, 243, 0.75) 50%, rgba(0, 188, 212, 0.75) 100%);
  --ann-summary-border: 1px solid rgba(255, 255, 255, 0.1);
  --ann-aside-color: #e0e0e0;
  --ann-animation: banner-gradient-move 6s ease infinite;

  /* --- FAQ Ripple (深色) --- */
  --faq-ripple-color: #ffd460;
  --tip-ripple-color: #8cc8ff;
}

/* === 2. 自定義配色方案 (Custom Color Schemes) === */

/* 淺色模式 (Light Mode) - 科技深藍 */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #2c3e50;
  --md-primary-fg-color--light: #34495e;
  --md-primary-fg-color--dark: #1a252f;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #00b0ff;
}

/* 深色模式 (Dark Mode) - 夜空藍 */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #011627;
  --md-primary-fg-color--light: #0b2942;
  --md-primary-fg-color--dark: #000814;
  --md-accent-fg-color: #ffb74d;
}

/* 修正 Header 與 Tabs 在自定義配色下的表現 */
.md-header, .md-tabs { background-color: var(--md-primary-fg-color) !important; }

/* === 3. 基礎排版與元件 (Typography & Components) === */

/* 標題與圖示 */
.page-title { letter-spacing: .3px; margin-bottom: .25rem; }
.icon-xxl { font-size: 42px; line-height: 1; color: var(--md-primary-fg-color); }
.icon-inline { font-size: 1.15em; vertical-align: -0.1em; margin-left: .4rem; color: var(--md-primary-fg-color); }

/* 列表與間距 */
.md-typeset ul, .md-typeset ol { margin-top: .3rem; margin-bottom: .6rem; }
.hero-cta { margin: 0 0 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.hero-cta .md-button { transition: transform .06s ease; }
.hero-cta .md-button:hover { transform: translateY(-1px); }
.hero-cta .break { flex-basis: 100%; height: 0; }

/* 標題顏色邏輯 */
[data-md-color-scheme="default"] .md-content .md-typeset h1,
[data-md-color-scheme="default"] .md-content .md-typeset h2,
[data-md-color-scheme="default"] .md-content .md-typeset h1 .headerlink,
[data-md-color-scheme="default"] .md-content .md-typeset h2 .headerlink { 
  color: var(--md-primary-fg-color) !important; 
}
[data-md-color-scheme="slate"] .md-content .md-typeset h2,
[data-md-color-scheme="slate"] .md-content .md-typeset h2 .headerlink { 
  color: #1e88e5 !important; 
}

/* 漸層流光標題 */
.md-typeset h1, .md-typeset h2 {
  width: fit-content;
  display: block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
[data-md-color-scheme="default"] .md-typeset h1, 
[data-md-color-scheme="default"] .md-typeset h2 {
  background-image: linear-gradient(120deg, #2c3e50 0%, #2980b9 100%);
}
[data-md-color-scheme="slate"] .md-typeset h1, 
[data-md-color-scheme="slate"] .md-typeset h2 {
  background-image: linear-gradient(120deg, #1e88e5 0%, #00bcd4 100%);
}

/* === 4. 公告欄 (Announce Banner) - 整合版 === */
details.announce-banner {
  border: 1px solid var(--ann-border) !important;
  border-radius: 12px;
  box-shadow: var(--ann-shadow) !important;
  overflow: hidden;
  background-color: var(--ann-bg) !important;
  backdrop-filter: var(--ann-backdrop);
  -webkit-backdrop-filter: var(--ann-backdrop);
  opacity: 0;
  transform: translate3d(0, -28px, 0) scale(.985);
  /* will-change optimized */
  will-change: opacity, transform;
}

details.announce-banner.fx-floating--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: ann-banner-slide .85s cubic-bezier(.17, .67, .27, 1.02) forwards;
}

details.announce-banner > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: var(--ann-summary-bg) !important;
  background-size: 200% 200% !important;
  color: var(--ann-summary-color) !important;
  border-bottom: var(--ann-summary-border);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: var(--ann-animation) !important;
}

details.announce-banner > summary::before { background-color: currentColor !important; }
details.announce-banner > summary > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

details.announce-banner .ann-aside {
  padding: 0 0.9rem 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms ease, opacity 220ms ease, padding 220ms ease;
  margin-top: 0;
  background: var(--ann-aside-bg) !important;
  color: var(--ann-aside-color) !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  font-size: 0.8rem;
}

details.announce-banner[open] .ann-aside {
  max-height: 2000px;
  opacity: 1;
  padding: 0.8rem 0.9rem 0.9rem;
  margin-top: 0.6rem;
}

@keyframes ann-banner-slide {
  0% { opacity: 0; transform: translate3d(0, -32px, 0) scale(.95); }
  60% { opacity: 1; transform: translate3d(0, 6px, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes banner-gradient-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === 5. 圖片與卡片 (Images & Cards) === */
.img-inline { vertical-align: -0.3em; }
.md-typeset img:not(.img-inline):not(.no-hover-scale) {
  transition: transform .35s cubic-bezier(.15, .75, .25, 1), box-shadow .35s ease, filter .35s ease;
  transform-origin: center;
  /* will-change removed to save memory on load */
}
.md-typeset img:not(.img-inline):not(.no-hover-scale):hover,
.md-typeset img:not(.img-inline):not(.no-hover-scale):focus-visible {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 32px rgb(15 27 56 / 18%);
  filter: saturate(1.02);
  cursor: zoom-in;
}

.click-card { display: inline-block; text-align: center; margin: .25rem; }
.click-card figcaption { margin-top: .35rem; font-size: .85rem; color: var(--md-default-fg-color--light); }
a img { cursor: pointer; }

/* === 6. Chip 樣式 === */
.chip {
  --chip-fg: var(--md-default-fg-color);
  --chip-bg: color-mix(in srgb, var(--md-default-bg-color) 80%, transparent);
  --chip-br: color-mix(in srgb, var(--md-primary-fg-color) 35%, transparent);
  --chip-shadow: 0 6px 18px rgb(0 0 0 / 10%);
  display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem;
  border-radius: 999px; font-size: .85rem; line-height: 1.2; font-weight: 600;
  color: var(--chip-fg); text-decoration: none; border: 1px solid var(--chip-br);
  background: linear-gradient(180deg, color-mix(in srgb, var(--md-default-bg-color) 92%, transparent), transparent), var(--chip-bg);
  backdrop-filter: blur(6px); box-shadow: var(--chip-shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.chip .ico { font-size: 1.1em; line-height: 1; }
.chip:hover, .chip:focus-visible {
  border-color: color-mix(in srgb, var(--md-accent-fg-color) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--md-primary-fg-color) 14%, transparent), transparent), var(--chip-bg);
  box-shadow: 0 10px 26px rgb(0 0 0 / 16%), 0 0 0 3px color-mix(in srgb, var(--md-accent-fg-color) 25%, transparent);
  transform: translateY(-1px); outline: none;
}
.chip.outline { --chip-bg: transparent; box-shadow: none; border-style: dashed; opacity: .92; }
.chip.outline:hover { opacity: 1; }
.chip.xs { font-size: .78rem; padding: .16rem .5rem; }
.chip + .chip { margin-left: .18rem; }
[data-md-color-scheme="slate"] .chip {
  --chip-bg: color-mix(in srgb, var(--md-default-bg-color) 70%, transparent);
  --chip-shadow: 0 6px 18px rgb(0 0 0 / 28%);
}

/* === 7. 摺疊區塊 (Collapse Section) === */
.collapse-section {
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 18%, transparent);
  border-radius: 12px; padding: .4rem .8rem .8rem; margin: .6rem 0 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent), transparent), var(--md-default-bg-color);
  box-shadow: 0 3px 14px rgb(0 0 0 / 8%);
}
.collapse-section[open] { padding-bottom: 1rem; }
.collapse-section summary { cursor: pointer; list-style: none; }
.collapse-section summary::-webkit-details-marker { display: none; }
.collapse-section .h3 { display: inline-block; font-weight: 700; font-size: var(--md-typeset-h3-size); line-height: 1.3; color: var(--md-default-fg-color); }
.collapse-section summary .h3::after { content: "▾"; margin-left: .4rem; font-weight: 700; opacity: .7; }
.collapse-section[open] summary .h3::after { content: "▴"; }

/* === 8. Admonitions & Details 優化 === */
.md-typeset .admonition, .md-typeset details.admonition {
  border-width: 0; border-left-width: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  background-color: rgba(128, 128, 128, 0.05);
}
.md-typeset .admonition-title, .md-typeset summary.admonition-title {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-weight: 600; font-size: 0.9rem;
}
.md-typeset .admonition > p, .md-typeset .admonition > ul, .md-typeset .admonition > ol, .md-typeset details > * { font-size: 0.8rem; }

/* 各類型背景色 */
.md-typeset .admonition.note, .md-typeset details.note { background-color: rgba(68, 138, 255, 0.06); }
.md-typeset .admonition.info, .md-typeset details.info { background-color: rgba(0, 188, 212, 0.06); }
.md-typeset .admonition.warning, .md-typeset details.warning { background-color: rgba(255, 145, 0, 0.06); }
.md-typeset .admonition.danger, .md-typeset details.danger { background-color: rgba(255, 82, 82, 0.06); }

/* 深色模式 Admonition */
[data-md-color-scheme="slate"] .md-typeset .admonition, 
[data-md-color-scheme="slate"] .md-typeset details.admonition {
  background-color: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
[data-md-color-scheme="slate"] .md-typeset .admonition-title, 
[data-md-color-scheme="slate"] .md-typeset summary.admonition-title {
  background-color: rgba(255, 255, 255, 0.05) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* FAQ Ripple Effect */
.md-typeset details.info { --faq-ripple-color: var(--tip-ripple-color); }
.md-typeset details.question, .md-typeset details.example, .md-typeset details.warning, .md-typeset details.info, .md-typeset details.tips {
  position: relative; overflow: hidden; border-radius: 12px; transition: transform .2s ease;
}
.md-typeset details[open].question, .md-typeset details[open].example, .md-typeset details[open].warning, .md-typeset details[open].info, .md-typeset details[open].tips {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.md-typeset details.question::after, .md-typeset details.example::after, .md-typeset details.warning::after, .md-typeset details.info::after, .md-typeset details.tips::after {
  content: ""; position: absolute; inset: -25%;
  background: radial-gradient(circle, color-mix(in srgb, var(--faq-ripple-color) 45%, transparent) 0%, color-mix(in srgb, var(--faq-ripple-color) 22%, transparent) 42%, transparent 70%);
  opacity: 0; transform: scale(.32); pointer-events: none; transition: opacity .35s ease, transform .35s ease;
}
.md-typeset details[open].question::after, .md-typeset details[open].example::after, .md-typeset details[open].warning::after, .md-typeset details[open].info::after, .md-typeset details[open].tips::after {
  opacity: .42; transform: scale(1.02); animation: faq-ripple .85s ease-out forwards;
}
@keyframes faq-ripple {
  0% { opacity: .52; transform: scale(.45); }
  45% { opacity: .25; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* === 9. 特殊 Admonition (Abstract & Tips) === */
/* Abstract (仿公告欄) - 僅淺色 */
html body[data-md-color-scheme="default"] .md-typeset details.abstract,
html body[data-md-color-scheme="default"] .md-typeset .admonition.abstract {
  border: 1px solid color-mix(in srgb, var(--md-typeset-a-color) 18%, transparent) !important;
  border-radius: 12px !important; box-shadow: 0 4px 18px rgb(0 0 0 / 10%) !important;
  background-color: var(--md-default-bg-color) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--md-typeset-a-color) 14%, transparent), transparent) !important;
  background-repeat: no-repeat !important; border-left: 1px solid color-mix(in srgb, var(--md-typeset-a-color) 18%, transparent) !important;
  overflow: hidden !important; color: var(--md-typeset-a-color) !important;
}
html body[data-md-color-scheme="default"] .md-typeset details.abstract > summary,
html body[data-md-color-scheme="default"] .md-typeset .admonition.abstract > .admonition-title {
  background-color: var(--md-default-bg-color) !important;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--md-typeset-a-color) 10%, transparent), transparent) !important;
  border-top-left-radius: 12px !important; border-top-right-radius: 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--md-typeset-a-color) 10%, transparent) !important;
  border-left: none !important; border-right: none !important; border-top: none !important;
  color: var(--md-typeset-a-color) !important; font-weight: 700 !important;
}
html body[data-md-color-scheme="default"] .md-typeset details.abstract > summary::before,
html body[data-md-color-scheme="default"] .md-typeset .admonition.abstract > .admonition-title::before {
  background-color: var(--md-typeset-a-color) !important; -webkit-mask-image: var(--md-admonition-icon--abstract) !important; mask-image: var(--md-admonition-icon--abstract) !important;
}
html body[data-md-color-scheme="default"] .md-typeset .admonition.abstract strong,
html body[data-md-color-scheme="default"] .md-typeset details.abstract strong {
  color: var(--md-typeset-a-color) !important; filter: brightness(0.9);
}

/* Tips (自定義) */
[data-md-color-scheme="default"] .md-typeset .admonition.tips, [data-md-color-scheme="default"] .md-typeset details.tips {
  border: none !important; background-color: #ffffff; --faq-ripple-color: #2c3e50; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
[data-md-color-scheme="default"] .md-typeset .admonition.tips > .admonition-title, [data-md-color-scheme="default"] .md-typeset details.tips > summary {
  background-color: #2c3e50 !important; border-left-color: #2c3e50; color: #ffffff !important;
}
[data-md-color-scheme="default"] .md-typeset .admonition.tips > .admonition-title::before, [data-md-color-scheme="default"] .md-typeset details.tips > summary::before {
  background-color: #ffffff; -webkit-mask-image: var(--md-admonition-icon--info); mask-image: var(--md-admonition-icon--info);
}
/* Tips Dark Mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.tips, [data-md-color-scheme="slate"] .md-typeset details.tips {
  border-left-color: #00bcd4; --faq-ripple-color: #00bcd4;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.tips > .admonition-title, [data-md-color-scheme="slate"] .md-typeset details.tips > summary {
  border-left-color: #00bcd4; color: #00bcd4;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.tips > .admonition-title::before, [data-md-color-scheme="slate"] .md-typeset details.tips > summary::before {
  background-color: #00bcd4; -webkit-mask-image: var(--md-admonition-icon--info); mask-image: var(--md-admonition-icon--info);
}

/* === 10. 字體與導航 (Fonts & Navigation) === */
.md-nav__link, .md-nav__item .md-nav__link, .md-nav--secondary .md-nav__link { font-size: 0.8rem !important; }
.md-nav__title, .md-nav--secondary .md-nav__title { font-size: 0.9rem !important; }
.md-header .md-tabs .md-tabs__link, .md-tabs .md-tabs__link { font-size: 0.8rem !important; font-weight: 600; letter-spacing: .2px; line-height: 1.2; }
.md-header .md-tabs .md-tabs__link--active, .md-tabs .md-tabs__link--active { font-size: 0.9rem !important; }
@media screen and (min-width: 76.25em){
  .md-header .md-tabs .md-tabs__link, .md-tabs .md-tabs__link, .md-header .md-tabs .md-tabs__link--active, .md-tabs .md-tabs__link--active { font-size: 0.8rem !important; }
}
.md-header__title .md-ellipsis { font-size: 1.0rem; font-weight: 700; }
.md-typeset .tabbed-labels > label, .md-typeset .tabbed-labels > label.md-button { font-size: 0.75rem; }

/* 導航列選定項目 */
[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active {
  color: #2c3e50 !important; font-weight: 700; background: linear-gradient(90deg, rgba(44, 62, 80, 0.1), transparent); border-left: 3px solid #2c3e50; padding-left: 0.6rem;
}
[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active:hover { color: #1a252f !important; }
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: #40c4ff !important; font-weight: 700; background: linear-gradient(90deg, rgba(64, 196, 255, 0.1), transparent); border-left: 3px solid #40c4ff; padding-left: 0.6rem;
}
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active:hover { color: #80d8ff !important; }

/* === 11. Grid Cards 優化 === */
.grid.cards, .grid.cards .md-typeset, .grid.cards > ul, .grid.cards .md-typeset > ul, .grid.cards > ul > li, .grid.cards .md-typeset > ul > li {
  font-size: var(--grid-card-font-size) !important;
}
.grid.cards a.chip, .grid.cards .chip { font-size: var(--grid-card-chip-size) !important; line-height: 1; display: inline-flex; align-items: center; }
.grid.cards .chip .md-icon, .grid.cards .chip .ico, .grid.cards .chip svg { font-size: 1em !important; width: 1em; height: 1em; margin-right: .35rem; }
.grid.cards li > a { font-size: var(--grid-card-font-size) !important; }
.grid.cards > ul > li {
  padding-top: 0 !important; padding-bottom: 0.8rem !important; position: relative;
  transition: transform .35s cubic-bezier(.15, .75, .25, 1), box-shadow .35s ease; transform-origin: center; will-change: transform, box-shadow;
}
.grid.cards > ul > li:hover, .grid.cards > ul > li:focus-within {
  transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 38px rgb(13 23 44 / 18%), 0 6px 18px rgb(7 15 30 / 12%);
  border-color: rgba(30, 136, 229, 0.4);
}
[data-md-color-scheme="slate"] .grid.cards > ul > li:hover {
  box-shadow: 0 12px 40px -12px rgba(0, 188, 212, 0.25); border-color: rgba(0, 188, 212, 0.4);
}
.grid.cards > ul > li > p:first-child, .grid.cards .md-typeset > ul > li > p:first-child {
  display: flex !important; align-items: center !important; height: 40px !important; margin: 0 !important; padding: 0 0.5rem !important; box-sizing: border-box !important;
}
.grid.cards > ul > li > p:first-child > strong, .grid.cards .md-typeset > ul > li > p:first-child > strong {
  display: inline-block !important; margin: 0 !important; line-height: normal !important; vertical-align: middle !important; font-size: inherit !important;
}
.grid.cards > ul > li > hr, .grid.cards .md-typeset > ul > li > hr { margin-top: 0 !important; }

/* === 12. 預覽與浮動特效 (Preview & Floating) === */
.md-tooltip2, .md-tooltip2 > .md-tooltip__inner, .md-tooltip2 > .md-tooltip2__inner, .md-tooltip2 > .md-tooltip__content, .md-tooltip2 > .md-tooltip2__content, .md-tooltip2 > .md-typeset, .md-tooltip2 .md-typeset {
  max-width: var(--preview-max-width) !important; width: auto !important; white-space: normal !important; line-height: 1.55;
}
@media screen and (max-width: 58em){ :root{ --preview-max-width: calc(100vw - 5rem) !important; } }

.fx-floating {
  --fx-layer-delay: 70ms; --fx-layer-depth: 24px; --fx-container-depth: 18px;
  opacity: 0; transform: translate3d(0, var(--fx-container-depth), 0) scale(.985); filter: blur(6px);
  transition: opacity .45s ease, transform .85s cubic-bezier(.17, .67, .27, 1.02), filter .45s ease; will-change: opacity, transform;
}
.fx-floating--visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
.fx-floating__item {
  opacity: 0; transform: translate3d(0, var(--fx-layer-depth), 0) scale(0.96); filter: blur(8px);
  transition: opacity .45s ease, transform .8s cubic-bezier(.17, .67, .27, 1.02), filter .45s ease;
  transition-delay: calc(var(--fx-layer-index, 0) * var(--fx-layer-delay)); will-change: opacity, transform;
}
.fx-floating--visible .fx-floating__item { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }

/* === 13. 連結與按鈕特效 (Links & Buttons) === */
.md-typeset a:not(.md-button):not(.headerlink) {
  text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px;
  transition: background-size .3s cubic-bezier(0.25, 0.8, 0.25, 1); padding-bottom: 2px;
}
.md-typeset a:not(.md-button):not(.headerlink):hover { background-size: 100% 2px; }

.md-button--primary { transition: all 0.3s ease; position: relative; overflow: hidden; }
.md-button--primary:hover { box-shadow: 0 0 15px var(--md-primary-fg-color); transform: translateY(-2px); }
.md-button--primary::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}
.md-button--primary:active::after { width: 200%; height: 200%; }

/* === 14. 捲軸與選取 (Scrollbar & Selection) === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(150, 150, 150, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(150, 150, 150, 0.6); }

[data-md-color-scheme="default"] ::selection { background-color: rgba(44, 62, 80, 0.15); color: #2c3e50; text-shadow: none; }
[data-md-color-scheme="slate"] ::selection { background-color: rgba(255, 183, 77, 0.25); color: #ffb74d; text-shadow: none; }

/* === 15. 頁首與導航特效 (Header & Tabs Effects) === */
.md-header__title { transition: text-shadow 0.3s ease, transform 0.3s ease; }
.md-header__title:hover { text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px var(--md-primary-fg-color); transform: scale(1.02); cursor: default; }
[data-md-color-scheme="slate"] .md-header__title:hover { text-shadow: 0 0 15px rgba(33, 150, 243, 0.6), 0 0 30px rgba(33, 150, 243, 0.4); }

.md-tabs__link { position: relative; transition: all 0.3s ease; opacity: 0.6; overflow: visible; }
.md-tabs__link:hover { opacity: 1; transform: translateY(-2px); text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
html body[data-md-color-scheme="slate"] .md-tabs__link:hover { color: #ffb74d !important; text-shadow: 0 0 10px rgba(255, 183, 77, 0.7) !important; opacity: 1 !important; }
.md-tabs__link::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
  background: currentColor; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px currentColor; opacity: 0;
}
.md-tabs__link:hover::after { width: 100%; left: 0; opacity: 1; }
.md-tabs__link--active {
  opacity: 1; font-weight: 700; transform: translateY(-2px); color: var(--md-accent-fg-color) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--md-accent-fg-color) 60%, transparent);
}
html body[data-md-color-scheme="slate"] .md-tabs .md-tabs__link--active,
html body[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #ffb74d !important; text-shadow: 0 0 12px rgba(255, 183, 77, 0.8) !important; opacity: 1 !important;
}
.md-tabs__link--active::after { width: 100%; left: 0; opacity: 1; height: 3px; }

/* === 16. 日夜切換按鈕 (Palette Toggle) === */
.md-header__option[data-md-component="palette"] .md-header__button:not([hidden]) {
  width: auto; padding: 0 12px; border-radius: 24px; display: flex; align-items: center; gap: 6px;
}
.md-header__option[data-md-component="palette"] .md-header__button svg { width: 24px; height: 24px; flex-shrink: 0; }
.md-header__option[data-md-component="palette"] .md-header__button::before { content: "日"; font-weight: 700; font-size: 0.9rem; transition: opacity 0.3s, color 0.3s; }
.md-header__option[data-md-component="palette"] .md-header__button::after { content: "夜"; font-weight: 700; font-size: 0.9rem; transition: opacity 0.3s, color 0.3s; }

[data-md-color-scheme="default"] .md-header__option[data-md-component="palette"] .md-header__button::before { opacity: 1; color: #ffffff; text-shadow: 0 0 8px rgba(255, 235, 59, 0.8); }
[data-md-color-scheme="default"] .md-header__option[data-md-component="palette"] .md-header__button::after { opacity: 0.85; color: #ffffff; }
[data-md-color-scheme="slate"] .md-header__option[data-md-component="palette"] .md-header__button::before { opacity: 0.4; color: rgba(255, 255, 255, 0.8); }
[data-md-color-scheme="slate"] .md-header__option[data-md-component="palette"] .md-header__button::after { opacity: 1; color: #ffb74d; text-shadow: 0 0 10px rgba(255, 183, 77, 0.5); }

@media screen and (max-width: 600px) {
  .md-header__option[data-md-component="palette"] .md-header__button::before,
  .md-header__option[data-md-component="palette"] .md-header__button::after { content: none !important; }
  .md-header__option[data-md-component="palette"] .md-header__button { padding: 0.6rem; width: initial; }
}

/* === 17. 其他優化 (Tables, Progress, Search, etc.) === */
.md-typeset table:not([class]) {
  border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border-collapse: separate; border-spacing: 0; width: 100%; margin: 1.5em 0;
}
.md-typeset table:not([class]) th { background-color: var(--md-primary-fg-color); color: #fff; font-weight: 600; padding: 12px 16px; border: none; }
.md-typeset table:not([class]) td { padding: 12px 16px; border-top: 1px solid var(--md-default-fg-color--lightest); }
.md-typeset table:not([class]) tr:nth-child(2n) { background-color: var(--md-default-fg-color--lightest); }
.md-typeset table:not([class]) tr:hover td { background-color: rgba(0, 0, 0, 0.03); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { color: var(--md-default-bg-color); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td { background-color: rgba(255, 255, 255, 0.05); }

.md-typeset blockquote {
  border-left: 4px solid var(--md-primary-fg-color); background-color: rgba(120, 140, 180, 0.08);
  border-radius: 0 8px 8px 0; padding: 12px 20px; color: var(--md-default-fg-color); font-style: normal;
  position: relative; overflow: hidden;
}
.md-typeset blockquote::before {
  content: "\201C"; position: absolute; top: -15px; right: 10px; font-size: 5rem; line-height: 1;
  color: var(--md-primary-fg-color); opacity: 0.06; font-family: "Times New Roman", serif; pointer-events: none;
}

.header-progress {
  position: absolute; bottom: 0; left: 0; width: 0%; height: 3px; background: var(--md-accent-fg-color);
  z-index: 10; transition: width 0.1s linear, opacity 0.2s ease; box-shadow: 0 0 10px var(--md-accent-fg-color);
}
[data-md-toggle="search"]:checked ~ .md-header .header-progress { opacity: 0; }
[data-md-color-scheme="slate"] .header-progress { background: #ffb74d; box-shadow: 0 0 10px #ffb74d; }
@media screen and (max-width: 768px) { .header-progress { display: none !important; } }

.md-search__overlay { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 0.25s, backdrop-filter 0.25s; }
[data-md-color-scheme="slate"] .md-search__scrollwrap { background-color: rgba(26, 32, 44, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.md-top { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s, background-color 0.25s; }
.md-top:hover { transform: translate(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
[data-md-color-scheme="slate"] .md-top { background-color: rgba(255, 183, 77, 0.6); color: #000000; }
[data-md-color-scheme="slate"] .md-top:hover { background-color: #ffb74d; color: #000; }

.md-header__button.md-logo img, .md-header__button.md-logo svg { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }
.md-header__button.md-logo:hover img, .md-header__button.md-logo:hover svg { transform: rotate(360deg) scale(1.15); }

.md-content__inner { animation: content-fade-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; transform: translateY(20px); }
@keyframes content-fade-in { to { opacity: 1; transform: translateY(0); } }

.md-clipboard:after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px;
  background-color: #00e676; opacity: 0; transition: opacity 0.2s; z-index: -1;
}
.md-clipboard[data-md-clipboard-message]:after { opacity: 0.2; animation: copy-flash 0.5s ease-out; }
@keyframes copy-flash { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

.md-typeset kbd {
  background-color: #f7f7f7; border: 1px solid #ccc; border-bottom-color: #bbb; border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 #fff; color: #333; display: inline-block;
  font-family: "Roboto Mono", monospace; font-size: 0.85em; line-height: 1.4; padding: 0.15em 0.5em;
  text-shadow: 0 1px 0 #fff; margin: 0 0.15em; vertical-align: baseline; transition: transform 0.1s, box-shadow 0.1s;
}
[data-md-color-scheme="slate"] .md-typeset kbd {
  background-color: #2e303e; border-color: #1f2129; border-bottom-color: #16181d;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); color: #e0e0e0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.md-typeset kbd:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

/* === 18. 手機版與減弱動畫 (Mobile & Reduced Motion) === */
@media screen and (max-width: 768px) {
  .md-header__title { transition: none !important; transform: none !important; }
  .md-header { transform: none !important; -webkit-transform: none !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; }
  details.announce-banner { opacity: 1 !important; transform: none !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  details.announce-banner, details.announce-banner.fx-floating--visible,
  .md-typeset img:not(.img-inline):not(.no-hover-scale),
  .md-typeset img:not(.img-inline):not(.no-hover-scale):hover,
  .md-typeset img:not(.img-inline):not(.no-hover-scale):focus-visible,
  .grid.cards > ul > li, .grid.cards > ul > li:hover, .grid.cards > ul > li:focus-within,
  .fx-floating, .fx-floating__item {
    animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; box-shadow: none !important;
  }
}