@charset "UTF-8";
/* MBC-Pro Sensors site styles (extracted from the former Docsify index.html) */

:root { 
  --theme-color: #0ABAB5; /* Theme 1: 蒂芬妮綠 */
  --accent-color: #F2C200; /* Theme 2: SPIKE 螢光黃 */
}

/* 融合: Theme 1 的深空黑底色 + Theme 2 的現代字體 */
body { background: #050a10; font-family: 'Nunito', 'Segoe UI', Tahoma, sans-serif; }

/* 融合: 側邊欄保持 Theme 1 實驗室風格 */
.sidebar { background: #0a111a; border-right: 1px solid rgba(10,186,181,0.2); }
.sidebar>h1 a { color: var(--theme-color); font-weight: bold; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; }

/* 融合: 滑鼠游標經過時，用 Theme 2 的高對比跳色 */
.sidebar ul li a:hover { color: var(--accent-color); text-decoration: none; text-shadow: 0 0 8px rgba(242,194,0,0.5); }
.sidebar ul li.active>a { color: var(--theme-color); font-weight: bold; border-right: 3px solid var(--theme-color); }

/* 融合: Theme 1 的發光標題 */
.markdown-section h1, .markdown-section h2 { 
  color: var(--theme-color); 
  text-shadow: 0 0 10px rgba(10,186,181,0.3); 
}

/* 融合: Theme 2 的圓角引言與撞色設計 (使用 SPIKE 的黃色來做醒目提示) */
.markdown-section blockquote { 
  border-left: 4px solid var(--accent-color); 
  background: rgba(242,194,0,0.08); 
  border-radius: 0 8px 8px 0; 
  color: #ddd;
}

/* 融合: Theme 2 的圓潤程式碼區塊 + Theme 1 的配色 */
.markdown-section code { 
  background: rgba(10,186,181,0.1); 
  color: var(--theme-color); 
  border-radius: 6px; 
  padding: 3px 6px;
}

.markdown-section pre { 
  border-radius: 12px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
  border: 1px solid rgba(10,186,181,0.2);
}

/* 讓表格也更有科技感與圓潤度 */
.markdown-section table th {
  background: rgba(10,186,181,0.15);
  color: var(--theme-color);
  border-radius: 4px;
  border: none;
}
.markdown-section table td { border-bottom: 1px solid rgba(255,255,255,0.05); }

/* --- 側邊欄摺疊功能 CSS --- */
.sidebar-nav li { margin-bottom: 5px; line-height: 1.5; }
.sidebar-nav li.closed > ul { display: none; }
.sidebar-nav li .menu-toggle { cursor: pointer; position: relative; padding-right: 20px; user-select: none; transition: 0.2s; display: block; padding: 4px 0; }
.sidebar-nav li .menu-toggle:hover { color: var(--accent-color); text-shadow: 0 0 8px rgba(242,194,0,0.5); }
.sidebar-nav li.has-children > .menu-toggle::after {
  content: '\25BC'; font-size: 10px; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); transition: transform 0.3s; color: #666;
}
.sidebar-nav li.has-children.closed > .menu-toggle::after { transform: translateY(-50%) rotate(-90deg); }
/* --- 搜尋列客製化 CSS --- */
.search { margin-bottom: 20px !important; }
.search input {
  background-color: rgba(10,186,181,0.1) !important;
  border: 1px solid rgba(10,186,181,0.3) !important;
  border-radius: 20px !important;
  color: var(--theme-color) !important;
  padding: 8px 15px !important;
}
.search input:focus {
  box-shadow: 0 0 10px rgba(10,186,181,0.5) !important;
  outline: none !important;
}
.search .clear-button { cursor: pointer !important; }
.search .matching-post {
  border-bottom: 1px solid rgba(10,186,181,0.2) !important;
}

/* --- 環境導覽 Hub 按鈕 CSS --- */
.env-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.env-card {
  background: rgba(10, 17, 26, 0.8);
  border: 1px solid rgba(10, 186, 181, 0.2);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.env-card:hover {
  transform: translateY(-5px);
  border-color: var(--theme-color);
  box-shadow: 0 10px 25px rgba(10, 186, 181, 0.2);
  background: rgba(10, 186, 181, 0.05);
}
.env-card.spike:hover {
  border-color: var(--accent-color);
  box-shadow: 0 10px 25px rgba(242, 194, 0, 0.15);
  background: rgba(242, 194, 0, 0.05);
}
.env-card.mcu:hover {
  border-color: #00d2ff;
  box-shadow: 0 10px 25px rgba(0, 210, 255, 0.15);
  background: rgba(0, 210, 255, 0.05);
}
.env-card h3 {
  margin: 0 0 10px 0 !important;
  font-size: 1.2rem;
  color: #fff;
}
.env-card.spike h3 { color: var(--accent-color); }
.env-card.ev3 h3 { color: var(--theme-color); }
.env-card.mcu h3 { color: #00d2ff; }
.env-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #aaa;
}
/* --- 響應式佈局 CSS --- */
.product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
}
.responsive-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* --- 產品頁詢價 CTA --- */
.buy-cta {
  margin: 40px 0 20px;
  padding: 24px;
  border: 1px solid rgba(242,194,0,0.4);
  border-radius: 12px;
  background: rgba(242,194,0,0.06);
  text-align: center;
}
.markdown-section .buy-cta h3 { margin: 0 0 8px; color: var(--accent-color); }
.markdown-section .buy-cta p { margin: 0 0 16px; color: #ccc; }
.buy-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.markdown-section .buy-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 24px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s;
}
.markdown-section .buy-btn:hover { transform: translateY(-2px); }
.markdown-section .buy-btn.line { background: #037a34; color: #fff; }
.markdown-section .buy-btn.mail { background: var(--theme-color); color: #000; }
.markdown-section .buy-btn.more { border: 1px solid rgba(255,255,255,0.3); color: #ddd; }
@media (max-width: 767px) {
  .product-card {
    flex-direction: column-reverse;
    text-align: center;
  }
  .responsive-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --- GitHub 風格提示框 ([!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION]) --- */
.markdown-section blockquote.callout { --c: #0ABAB5; border-left-color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); }
.markdown-section blockquote.callout-note { --c: #4aa3ff; }
.markdown-section blockquote.callout-tip { --c: #3fb950; }
.markdown-section blockquote.callout-important { --c: #a371f7; }
.markdown-section blockquote.callout-warning { --c: #F2C200; }
.markdown-section blockquote.callout-caution { --c: #ff5c5c; }
.markdown-section blockquote .callout-title { margin: 0.6em 0 0.2em; font-size: 0.8rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: var(--c); }

/* --- 搜尋結果 --- */
.search { position: relative; }
.search .input-wrap { display: flex; align-items: center; }
.search input { width: 100%; font-size: 0.95rem; }
.search .results-panel { display: none; }
.search .results-panel.show { display: block; }
.search .matching-post { padding: 10px 4px; }
.search .matching-post a { text-decoration: none; display: block; }
.search .matching-post h2 { font-size: 0.95rem; margin: 0 0 4px; color: var(--theme-color); }
.search .matching-post p { font-size: 0.8rem; margin: 0; color: #aaa; line-height: 1.5; }
.search .matching-post em { color: var(--accent-color); font-style: normal; font-weight: bold; }
.search .empty { color: #888; font-size: 0.85rem; padding: 10px 4px; }

/* --- 語言切換按鈕 --- */
#lang-toggle-btn {
  position: fixed; bottom: 30px; right: 30px; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,186,181,0.9); color: #000; text-decoration: none;
  padding: 10px 20px; border-radius: 30px; font-weight: bold;
  box-shadow: 0 4px 15px rgba(10,186,181,0.5); transition: 0.3s; backdrop-filter: blur(5px);
}
#lang-toggle-btn:hover { transform: scale(1.05); background: #0ABAB5; }
#lang-toggle-btn span:first-child { font-size: 1.2rem; }

/* --- 麵包屑 --- */
.markdown-section .breadcrumbs { font-size: 0.85rem; color: #888; margin: 0 0 1em; }
.markdown-section .breadcrumbs a { color: #9aa; text-decoration: none; }
.markdown-section .breadcrumbs a:hover { color: var(--accent-color); }
.markdown-section .breadcrumbs span { margin: 0 6px; }
.markdown-section blockquote .callout-title + p { margin-top: 0.2em; }

/* 表格斑馬紋：主題預設的淺色底在深色網站上看不清楚 */
.markdown-section tr:nth-child(2n) { background-color: rgba(255,255,255,0.04); }

/* =========================================================
   產品頁銷售區 (product-hero)
   ========================================================= */
.product-hero { --pc: #0ABAB5; margin: 10px 0 34px; padding: 26px; border-radius: 16px;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--pc) 14%, transparent), transparent 70%), rgba(255,255,255,0.02);
  border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); text-align: center; }
.product-hero .ph-badge { display: inline-block; background: var(--pc); color: #0a0a0a; font-weight: bold; padding: 3px 14px; border-radius: 20px; font-family: monospace; font-size: 0.85rem; }
.product-hero .ph-media { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: center; margin: 22px 0 10px; }
.product-hero .ph-media.single { grid-template-columns: 1fr; }
.product-hero .ph-img img { max-width: 300px; width: 100%; margin: 0 auto; display: block; }
.product-hero .ph-video { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.product-hero .ph-video iframe { width: 100%; height: 100%; border: 0; }
.markdown-section .product-hero .ph-pitch { font-size: 1.15rem; line-height: 1.7; color: #e6e6e6; max-width: 720px; margin: 14px auto 20px; }
.product-hero .ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 720px; margin: 0 auto 20px; }
.product-hero .ph-stat { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 8px; }
.product-hero .ph-stat b { display: block; font-size: 1.6rem; color: var(--pc); font-family: 'Orbitron', 'Nunito', sans-serif; line-height: 1.2; }
.product-hero .ph-stat span { font-size: 0.85rem; color: #aaa; }
.product-hero .ph-editions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-bottom: 18px; }
.product-hero .ph-editions span { color: #999; font-size: 0.9rem; }
.markdown-section .product-hero .ph-editions a { padding: 5px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); color: #eee; text-decoration: none; font-size: 0.9rem; }
.markdown-section .product-hero .ph-editions a:hover { background: color-mix(in srgb, var(--pc) 20%, transparent); }
.markdown-section .product-hero .ph-price { margin: 0 0 16px; color: #ccc; font-size: 1rem; }
.markdown-section .product-hero .ph-price b { color: var(--pc); font-size: 1.5rem; margin-left: 4px; }
.markdown-section .product-hero .ph-price small { color: #999; }
.product-hero .ph-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 767px) {
  .product-hero { padding: 18px 12px; }
  .product-hero .ph-media { grid-template-columns: 1fr; }
  .product-hero .ph-stat b { font-size: 1.2rem; }
}

/* =========================================================
   LINE 詢價固定按鈕（桌機：右下浮動；手機：底部列）
   ========================================================= */
.cta-dock { position: fixed; right: 30px; bottom: 92px; z-index: 9998; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.cta-dock a { text-decoration: none; font-weight: bold; border-radius: 30px; padding: 10px 18px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); transition: transform 0.2s; }
.cta-dock a:hover { transform: scale(1.05); }
.cta-dock .dock-line { background: #037a34; color: #fff; }
.cta-dock .dock-guide { display: none; }
body.landing .cta-dock { bottom: 30px; }
@media (max-width: 767px) {
  .cta-dock { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; background: #0a111a; border-top: 1px solid rgba(10,186,181,0.3); }
  .cta-dock a { flex: 1; text-align: center; border-radius: 0; padding: 14px 6px; box-shadow: none; }
  .cta-dock .dock-guide { display: block; background: #0a111a; color: var(--theme-color); }
  body.landing .cta-dock { bottom: 0; }
  body { padding-bottom: 56px; }
  .sidebar-toggle { bottom: 56px !important; }
  #lang-toggle-btn { bottom: 70px; right: 12px; padding: 8px 14px; }
}

/* =========================================================
   首頁 landing 版型
   ========================================================= */
body.landing { overflow-x: hidden; }
.topnav { position: sticky; top: 0; z-index: 9999; display: flex; align-items: center; gap: 16px; padding: 10px 24px;
  background: rgba(5,10,16,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(10,186,181,0.2); }
.topnav .tn-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--theme-color); font-family: 'Orbitron', sans-serif; font-weight: 700; margin-right: auto; }
.topnav .tn-logo img { height: 34px; width: auto; }
.topnav .tn-links { display: flex; align-items: center; gap: 22px; }
.topnav .tn-links a { color: #ccc; text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.topnav .tn-links a:hover { color: var(--accent-color); }
.topnav .tn-line { background: #037a34; color: #fff !important; padding: 8px 16px; border-radius: 20px; }
.topnav .tn-burger { display: none; background: none; border: 0; color: #ddd; font-size: 1.6rem; cursor: pointer; }
@media (max-width: 900px) {
  .topnav { padding: 10px 16px; }
  .topnav .tn-burger { display: block; }
  .topnav .tn-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #0a111a; border-bottom: 1px solid rgba(10,186,181,0.3); }
  .topnav.open .tn-links { display: flex; }
  .topnav .tn-links a { padding: 14px 20px; width: 100%; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,0.05); }
  .topnav .tn-line { border-radius: 0; }
}
.landing-main .markdown-section { max-width: 1180px; margin: 0 auto; padding: 0 24px 60px; }
.landing-main .markdown-section h2 { text-align: center; font-size: 1.9rem; margin: 70px 0 10px; border: 0; }
.landing-main .lp-sub { text-align: center; color: #aaa; max-width: 720px; margin: 0 auto 30px; }
@media (max-width: 767px) { .landing-main .markdown-section { padding: 0 16px 40px; } .landing-main .markdown-section h2 { font-size: 1.5rem; margin-top: 50px; } }

/* Hero */
.lp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 60px 0 30px; }
.markdown-section .lp-hero .lp-kicker { color: var(--accent-color); font-weight: 700; letter-spacing: 2px; font-size: 0.9rem; margin: 0 0 10px; }
.markdown-section .lp-hero h1 { font-size: 2.8rem; line-height: 1.25; margin: 0 0 18px; color: #fff; text-shadow: none; }
.markdown-section .lp-hero h1 a { color: inherit; }
.markdown-section .lp-hero h1 em { font-style: normal; color: var(--theme-color); }
.markdown-section .lp-hero .lp-lead { font-size: 1.15rem; color: #cfcfcf; line-height: 1.8; margin: 0 0 26px; }
.lp-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.markdown-section .lp-btn { display: inline-block; padding: 13px 24px; border-radius: 30px; font-weight: 700; text-decoration: none; font-size: 1.05rem; transition: transform 0.2s; }
.markdown-section .lp-btn:hover { transform: translateY(-2px); }
.markdown-section .lp-btn.line { background: #037a34; color: #fff; }
.markdown-section .lp-btn.ghost { border: 1px solid rgba(255,255,255,0.35); color: #eee; }
.lp-hero-visual { position: relative; min-height: 320px; }
.lp-hero-visual::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(circle, rgba(10,186,181,0.35), transparent 65%); filter: blur(30px); }
.lp-hero-visual img { position: relative; display: block; width: 88%; margin-left: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6)); }
.lp-hero-visual img + img { width: 62%; margin: -22% 0 0 4%; }
.lp-hero-visual video { position: relative; width: 100%; border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
.lp-platforms { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; padding: 22px 10px; margin: 10px 0 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); color: #8a9aa6; font-weight: 700; font-size: 0.95rem; }
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 30px; text-align: center; }
  .markdown-section .lp-hero h1 { font-size: 2rem; }
  .lp-btns { justify-content: center; }
  .lp-hero-visual { min-height: 0; max-width: 440px; margin: 0 auto; }
}

/* Cards / grids */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lp-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 22px; }
.markdown-section .lp-card h3 { margin: 8px 0 8px; font-size: 1.15rem; color: #fff; }
.markdown-section .lp-card p { margin: 0; color: #aaa; font-size: 0.95rem; line-height: 1.7; }
.lp-card .lp-ico { font-size: 1.8rem; }
.markdown-section .lp-card .lp-fix { margin-top: 12px; font-size: 0.9rem; color: var(--theme-color); font-weight: 700; }
.markdown-section a.lp-prod { display: flex; flex-direction: column; text-decoration: none; background: #0a111a; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; transition: transform 0.2s, border-color 0.2s; }
.markdown-section a.lp-prod:hover { transform: translateY(-4px); border-color: var(--pc, #0ABAB5); }
.lp-prod img { height: 150px; width: 100%; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--pc, #0ABAB5) 55%, transparent)); }
.lp-prod .lp-cat { font-size: 0.8rem; color: var(--pc, #0ABAB5); font-weight: 700; letter-spacing: 1px; }
.markdown-section .lp-prod h3 { margin: 4px 0 6px; color: #fff; font-size: 1.15rem; }
.markdown-section .lp-prod p { margin: 0 0 12px; color: #9aa; font-size: 0.9rem; line-height: 1.6; flex: 1; }
.lp-prod .lp-more { color: var(--pc, #0ABAB5); font-weight: 700; font-size: 0.9rem; }
.lp-soon { display: inline-block; font-size: 0.75rem; background: #7c4dcc; color: #fff; padding: 1px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }

/* Comparison */
.landing-main .lp-compare { max-width: 860px; margin: 0 auto; display: table; width: 100%; }
.landing-main .lp-compare td:first-child { color: #ccc; font-weight: 700; }
.landing-main .lp-compare .yes { color: var(--theme-color); font-weight: 700; }
.landing-main .lp-compare .no { color: #888; }

/* Steps */
.lp-steps { counter-reset: step; margin-top: 20px; }
.lp-steps .lp-card { position: relative; padding-top: 30px; }
.lp-steps .lp-card::before { counter-increment: step; content: counter(step); position: absolute; top: -16px; left: 22px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-color); color: #0a0a0a; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Videos */
.lp-video { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.lp-video iframe { width: 100%; height: 100%; border: 0; }
.markdown-section .lp-vcap { margin: 10px 0 0; color: #bbb; font-size: 0.95rem; }

/* FAQ */
.lp-faq { max-width: 860px; margin: 0 auto; }
.lp-faq details { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; }
.lp-faq summary { cursor: pointer; font-weight: 700; color: #eee; }
.markdown-section .lp-faq details p { margin: 12px 0 0; color: #aaa; line-height: 1.8; }

/* Final CTA + footer */
.lp-final { margin: 70px 0 20px; padding: 40px 24px; border-radius: 18px; text-align: center; background: linear-gradient(135deg, rgba(10,186,181,0.18), rgba(242,194,0,0.10)); border: 1px solid rgba(10,186,181,0.35); }
.markdown-section .lp-final h2 { margin-top: 0; }
.markdown-section .lp-final p { color: #ccc; margin: 0 0 22px; }
.lp-final .lp-btns { justify-content: center; }
.lp-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; padding: 30px 0 10px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.9rem; }
.markdown-section .lp-footer h3, .markdown-section .lp-footer h4 { color: #ddd; margin: 0 0 8px; font-size: 0.95rem; }
.markdown-section .lp-footer a { display: block; color: #8a9aa6; text-decoration: none; line-height: 1.9; }
.markdown-section .lp-footer a:hover { color: var(--accent-color); }

/* 選購指南 */
.guide-hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 30px; }
.markdown-section a.guide-host { display: block; text-align: center; padding: 18px 10px; border-radius: 12px; background: #0a111a; border: 1px solid rgba(10,186,181,0.3); color: #eee; text-decoration: none; font-weight: 700; }
.markdown-section a.guide-host:hover { border-color: var(--accent-color); color: var(--accent-color); }
.guide-host small { display: block; color: #888; font-weight: 400; margin-top: 4px; }
.lp-prod .lp-noimg { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; margin-bottom: 10px; filter: drop-shadow(0 0 18px rgba(163,113,247,0.6)); }
.product-hero .ph-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .product-hero .ph-stat { padding: 12px 4px; } .product-hero .ph-stat b { font-size: 1.05rem; overflow-wrap: anywhere; } .product-hero .ph-stat span { font-size: 0.78rem; display: block; } }

/* =========================================================
   首頁「明亮混合」風格（landing 版型預設）
   白底內容區＋深色產品主視覺，參考 Makeblock / DFRobot / LEGO Education
   ========================================================= */
body.landing.theme-light { background: #f6f8fa; color: #1f2933; }
body.theme-light .topnav { background: rgba(255,255,255,0.95); border-bottom: 1px solid #e3e8ee; }
body.theme-light .topnav .tn-links a { color: #33414e; }
body.theme-light .topnav .tn-links a:hover { color: #0a7c78; }
body.theme-light .topnav .tn-logo { color: #0a7c78; }
body.theme-light .topnav .tn-burger { color: #33414e; }
@media (max-width: 900px) { body.theme-light .topnav .tn-links { background: #fff; border-bottom: 1px solid #e3e8ee; } }
body.landing.theme-light .markdown-section { color: #33414e; }
body.landing.theme-light .markdown-section h2 { color: #10212b; text-shadow: none; }
body.landing.theme-light .markdown-section a { color: #0a7c78; }
body.landing.theme-light .lp-sub { color: #5b6b78; }

/* 深色主視覺帶（全寬） */
body.landing.theme-light .lp-hero { position: relative; z-index: 0; color: #fff; }
body.landing.theme-light .lp-hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: radial-gradient(ellipse at 75% 50%, rgba(10,186,181,0.35), transparent 55%), #050a10; }
body.landing.theme-light .markdown-section .lp-hero .lp-lead { color: #d5dde3; }
body.landing.theme-light .lp-hero .lp-btn.ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
body.landing.theme-light .lp-platforms { background: #fff; color: #5b6b78; border-color: #e3e8ee; margin-top: 0; }

/* 卡片 */
body.landing.theme-light .lp-card { background: #fff; border-color: #e3e8ee; box-shadow: 0 4px 14px rgba(16,33,43,0.06); }
body.landing.theme-light .markdown-section .lp-card h3 { color: #10212b; }
body.landing.theme-light .markdown-section .lp-card p { color: #5b6b78; }
body.landing.theme-light .markdown-section .lp-card .lp-fix { color: #0a7c78; }
/* 產品卡維持深色，讓黑色電路板發光 */
body.landing.theme-light .markdown-section a.lp-prod { background: #0a111a; border-color: transparent; box-shadow: 0 6px 18px rgba(16,33,43,0.18); }
body.landing.theme-light .markdown-section .lp-prod h3 { color: #fff; }

/* 表格 */
body.landing.theme-light .markdown-section table { background: #fff; }
body.landing.theme-light .markdown-section table th { background: #e6f6f5; color: #0a6f6b; }
body.landing.theme-light .markdown-section td { color: #33414e; border-color: #e3e8ee; }
body.landing.theme-light .markdown-section tr:nth-child(2n) { background-color: #f6f8fa; }
body.landing.theme-light .landing-main .lp-compare td:first-child { color: #10212b; }
body.landing.theme-light .landing-main .lp-compare .yes { color: #0a7c78; }
body.landing.theme-light .landing-main .lp-compare .no { color: #5f6b76; }

/* FAQ / 影片 / 結尾 */
body.landing.theme-light .lp-faq details { background: #fff; border-color: #e3e8ee; }
body.landing.theme-light .lp-faq summary { color: #10212b; }
body.landing.theme-light .markdown-section .lp-faq details p { color: #5b6b78; }
body.landing.theme-light .markdown-section .lp-vcap { color: #33414e; }
body.landing.theme-light .lp-final { background: linear-gradient(135deg, #0a111a, #0f2a2c); border: 0; }
body.landing.theme-light .markdown-section .lp-final h2 { color: #fff; }
body.landing.theme-light .markdown-section .lp-final p { color: #cfd8de; }
body.landing.theme-light .lp-final .lp-btn.ghost { color: #fff; }
body.landing.theme-light .lp-footer { border-color: #e3e8ee; }
body.landing.theme-light .markdown-section .lp-footer h3, body.landing.theme-light .markdown-section .lp-footer h4 { color: #10212b; }
body.landing.theme-light .markdown-section .lp-footer a { color: #5b6b78; }
@media (max-width: 767px) { body.theme-light .cta-dock { background: #fff; border-top-color: #e3e8ee; } body.theme-light .cta-dock .dock-guide { background: #fff; color: #0a7c78; } }
body.landing.theme-light .markdown-section .lp-btn.line { color: #fff; }

/* 全站頁尾：公司名稱＋商標聲明 */
.site-footer { max-width: 800px; margin: 0 auto; padding: 24px 15px 40px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; line-height: 1.6; color: #8a97a3; }
.site-footer p { margin: 0 0 6px; }
body.landing .site-footer { max-width: 1180px; padding: 24px 24px 90px; }
body.theme-light .site-footer { border-top-color: #e3e8ee; color: #5b6b78; }

/* 產品頁：WRO 適用組別＋規則對照／購買管道連結 */
.markdown-section .product-hero .ph-wro { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.7; color: #ccc; }
.markdown-section .product-hero .ph-wro a { color: var(--pc); }
.site-footer .sf-social { font-size: 0.85rem; margin-bottom: 10px; }
.site-footer .sf-social a { color: var(--theme-color); text-decoration: none; font-weight: 700; }
body.theme-light .site-footer .sf-social a { color: #0a7c78; }

/* 首頁信任提示列與產品卡建議售價 */
.lp-proof { text-align: center; margin: 18px auto 0; padding: 12px 16px; border-radius: 12px; background: rgba(10,186,181,0.08); font-size: 0.98rem; line-height: 1.6; }
body.landing.theme-light .lp-proof { background: #e6f6f5; color: #10212b; }
.lp-prod .lp-price { font-weight: 700; font-size: 0.95rem; margin: 2px 0 6px; color: #fff; }
body.landing.theme-light .markdown-section .lp-proof a { color: #08635f; }
body.landing.theme-light .markdown-section .lp-card a { color: #0a7c78; }

/* 產品頁規格摘要表 */
.markdown-section .product-hero table.ph-specs { display: table; width: 100%; max-width: 720px; margin: 0 auto 18px; border-collapse: collapse; font-size: 0.92rem; text-align: left; }
.markdown-section .product-hero table.ph-specs th, .markdown-section .product-hero table.ph-specs td { border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 7px 10px; background: transparent; vertical-align: top; }
.markdown-section .product-hero table.ph-specs th { width: 28%; color: #9aa7b0; font-weight: 600; white-space: nowrap; }
.markdown-section .product-hero table.ph-specs td { color: #dde4e8; }

/* =========================================================
   2026-10-15 UI/UX 優化（ui-ux-pro-max 檢查結果）
   ========================================================= */

/* --- 圖片：建置時已補 width/height，這裡讓圖片依比例縮放（:where 不增加權重，不蓋掉各區塊的高度設定）--- */
:where(img[width][height]) { height: auto; }

/* --- SVG 線條圖示（取代 emoji）--- */
svg.i { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.35em; flex: none; }
.markdown-section h1 svg.i, .markdown-section h2 svg.i, .markdown-section h3 svg.i, .markdown-section h4 svg.i { color: var(--theme-color); }
.lp-card .lp-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; font-size: 0; background: rgba(10,186,181,0.12); color: var(--theme-color); }
.lp-card .lp-ico svg.i { width: 26px; height: 26px; margin: 0; }
body.theme-light .lp-card .lp-ico { background: #e6f6f5; color: #0a7c78; }
.lp-prod .lp-noimg { color: #a371f7; }
.lp-prod .lp-noimg svg.i { width: 96px; height: 96px; margin: 0; }
.topnav .tn-burger svg.i { width: 26px; height: 26px; margin: 0; }

/* --- 觸控目標至少 44px --- */
.topnav .tn-burger, .topnav .tn-toc { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
@media (max-width: 900px) { .topnav .tn-burger { display: inline-flex; } }
.markdown-section .lp-footer a { display: flex; align-items: center; min-height: 44px; line-height: 1.3; }
.site-footer .sf-social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.markdown-section .lp-card p > a:only-child, .markdown-section .lp-vcap a, .markdown-section .lp-proof a,
.markdown-section .product-hero .ph-wro a { display: inline-flex; align-items: center; min-height: 44px; }
.markdown-section .product-hero .ph-editions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; }
.markdown-section .buy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; }
.lp-faq summary { padding: 10px 0; margin: -10px 0; }
.search input { min-height: 44px; box-sizing: border-box; }
@media (max-width: 767px) {
  .sidebar ul li a { display: block; padding: 11px 0; }
  .markdown-section .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- 固定元素：桌機上方選單已有詢價按鈕，不再顯示右下浮鈕；手機只留底部詢價列 --- */
@media (min-width: 768px) { .cta-dock { display: none; } }
.cta-dock a { display: inline-flex; align-items: center; justify-content: center; }

/* --- 手機版產品頁：照片 → 介紹 → 價格與詢價 → 影片 → 規格 --- */
@media (max-width: 767px) {
  .product-hero { display: flex; flex-direction: column; align-items: center; }
  .product-hero > * { width: 100%; box-sizing: border-box; }
  .product-hero > .ph-badge { width: auto; order: 0; }
  .product-hero .ph-media { display: contents; }
  .product-hero .ph-img { order: 1; margin-top: 14px; }
  .product-hero .ph-img img { max-width: 220px; }
  .markdown-section .product-hero .ph-pitch { order: 2; font-size: 1.05rem; margin: 12px 0 14px; }
  .markdown-section .product-hero .ph-price { order: 3; }
  .product-hero .ph-cta { order: 4; }
  .product-hero .ph-cta .buy-btn { flex: 1 1 40%; }
  .product-hero .ph-video { order: 5; margin-top: 20px; }
  .product-hero .ph-stats { order: 6; margin: 20px 0; }
  .product-hero .ph-editions { order: 7; }
  .markdown-section .product-hero table.ph-specs { order: 8; }
  .markdown-section .product-hero .ph-wro { order: 9; }
}

/* --- 首頁：手機版產品卡兩欄 --- */
@media (max-width: 767px) {
  .lp-grid.lp-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .markdown-section .lp-prods a.lp-prod { padding: 12px 10px; }
  .lp-prods .lp-prod img, .lp-prods .lp-prod .lp-noimg { height: 96px; margin-bottom: 6px; }
  .lp-prods .lp-prod .lp-noimg svg.i { width: 64px; height: 64px; }
  .markdown-section .lp-prods .lp-prod h3 { font-size: 0.98rem; line-height: 1.35; }
  .markdown-section .lp-prods .lp-prod p { font-size: 0.82rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
  .markdown-section .lp-prods .lp-prod p.lp-price { display: block; font-size: 0.88rem; flex: none; }
  .lp-prods .lp-prod .lp-cat, .lp-prods .lp-prod .lp-more { font-size: 0.78rem; }
}

/* --- 減少動態：使用者系統設定「減少動態效果」時關閉位移與轉場 --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .markdown-section a.lp-prod:hover, .markdown-section .lp-btn:hover, .markdown-section .buy-btn:hover, .cta-dock a:hover, .env-card:hover,
  .func-card:hover, .download-card:hover, .reason-card:hover, .channel-card:hover, .btn-download:hover, .btn-download-lib:hover { transform: none !important; }
}

/* =========================================================
   文件頁（產品說明、教學、比賽對照…）：上方選單＋淺色主題，與首頁一致
   產品銷售區 product-hero 保持深色舞台，讓黑色電路板發光（同首頁產品卡）
   ========================================================= */
body.docs.theme-light { background: #fff; color: #33414e; }
body.docs .topnav { position: fixed; top: 0; left: 0; right: 0; height: 60px; box-sizing: border-box; }
body.docs .sidebar { top: 60px; padding-top: 16px; background: #f6f8fa; border-right: 1px solid #e3e8ee; }
body.docs .sidebar > h1.app-name { display: none; }
body.docs .topnav .tn-toc { display: none; gap: 6px; padding: 0 12px; border: 1px solid #cfd8de; border-radius: 22px; background: #fff; color: #33414e; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
body.docs .topnav .tn-toc svg.i { margin: 0; }
@media (max-width: 767px) {
  body.docs .topnav { gap: 8px; }
  body.docs .topnav .tn-toc { display: inline-flex; }
  body.docs .topnav .tn-logo span { font-size: 0.85rem; }
  body.docs .content { padding-top: 76px; }
}

/* 側欄 */
body.docs .sidebar ul li a { color: #33414e; }
body.docs .sidebar ul li a:hover, body.docs .sidebar-nav li .menu-toggle:hover { color: #0a7c78; text-shadow: none; }
body.docs .sidebar ul li.active > a { color: #0a7c78; border-right-color: #0a7c78; }
body.docs .search input { background-color: #fff !important; border-color: #cfd8de !important; color: #10212b !important; }
body.docs .search input:focus { box-shadow: 0 0 0 3px rgba(10,143,138,0.2) !important; }
body.docs .search .matching-post { border-bottom-color: #e3e8ee !important; }
body.docs .search .matching-post h2 { color: #0a7c78; }
body.docs .search .matching-post p { color: #5b6b78; }
body.docs .search .matching-post em { color: #0a6f6b; }
body.docs .search .empty { color: #5b6b78; }

/* 內文 */
body.docs .markdown-section { color: #33414e; }
body.docs .markdown-section h1, body.docs .markdown-section h2, body.docs .markdown-section h3, body.docs .markdown-section h4 { color: #10212b; text-shadow: none; }
body.docs .markdown-section h1 a, body.docs .markdown-section h2 a, body.docs .markdown-section h3 a, body.docs .markdown-section h4 a { color: inherit; }
body.docs .markdown-section h1 svg.i, body.docs .markdown-section h2 svg.i, body.docs .markdown-section h3 svg.i, body.docs .markdown-section h4 svg.i { color: #0a7c78; }
body.docs .markdown-section a { color: #0a7c78; }
body.docs .markdown-section strong { color: #10212b; }
body.docs .markdown-section blockquote { background: #fff8db; color: #33414e; }
body.docs .markdown-section blockquote.callout { background: color-mix(in srgb, var(--c) 10%, #fff); }
/* 2026-10-24 70% → 60%：提示（綠）70% 只有 4.46:1（Lighthouse color-contrast） */
body.docs .markdown-section blockquote .callout-title { color: color-mix(in srgb, var(--c) 60%, #000); }
body.docs .markdown-section code { background: #eef7f6; color: #0a6f6b; }
body.docs .markdown-section pre { box-shadow: none; border: 1px solid #e3e8ee; }
body.docs .markdown-section pre code { background: transparent; color: #33414e; }
body.docs .markdown-section table th { background: #e6f6f5; color: #0a6f6b; }
body.docs .markdown-section td { border-color: #e3e8ee; }
body.docs .markdown-section tr:nth-child(2n) { background-color: #f6f8fa; }
body.docs .markdown-section .breadcrumbs { color: #5b6b78; }
body.docs .markdown-section .breadcrumbs a { color: #0a7c78; }

/* 產品銷售區：深色舞台 */
body.docs .product-hero { background: radial-gradient(ellipse at top, color-mix(in srgb, var(--pc) 22%, transparent), transparent 70%), #0a111a; border-color: transparent; box-shadow: 0 8px 24px rgba(16,33,43,0.18); }
body.docs .markdown-section .product-hero strong { color: inherit; }
body.docs .markdown-section .product-hero table.ph-specs tr:nth-child(n) { background: transparent; }
body.docs .markdown-section .product-hero table.ph-specs th { background: transparent; color: #9aa7b0; }

/* 詢價區、環境導覽卡 */
body.docs .buy-cta { background: #fffbea; border-color: #f2d36b; }
body.docs .markdown-section .buy-cta h3 { color: #10212b; }
body.docs .markdown-section .buy-cta p { color: #33414e; }
body.docs .markdown-section .buy-btn.mail { background: #0a7c78; color: #fff; }
body.docs .markdown-section .buy-btn.more { border-color: #cfd8de; color: #33414e; }
body.docs .env-card { background: #fff; border-color: #e3e8ee; box-shadow: 0 4px 14px rgba(16,33,43,0.06); }
body.docs .env-card h3 { color: #10212b; }
body.docs .env-card.spike h3 { color: #8a6d00; }
body.docs .env-card.ev3 h3 { color: #0a7c78; }
body.docs .env-card.mcu h3 { color: #0077a8; }
body.docs .env-card p { color: #5b6b78; }
body.docs .markdown-section a.guide-host { background: #fff; border-color: #cfd8de; color: #10212b; }
body.docs .guide-host small { color: #5b6b78; }

/* 舊頁面內嵌的深色主題文字顏色 → 淺底可讀的顏色（程式碼區塊內不動） */
body.docs .markdown-section :is([style*="color: #aaa"], [style*="color: #888"], [style*="color: #999"], [style*="color: #bbb"], [style*="color: #777"]):not(pre *, .code-block-wrapper *, [style*="background: #1e1e1e"] *) { color: #5b6b78 !important; }
body.docs .markdown-section :is([style*="color: #ccc"], [style*="color: #ddd"], [style*="color: #e0e0e0"]):not(pre *, .code-block-wrapper *, [style*="background: #1e1e1e"] *) { color: #33414e !important; }
body.docs .markdown-section :is([style*="color: #0abab5"], [style*="color:#0abab5"]):not(pre *, .code-block-wrapper *, [style*="background: #1e1e1e"] *) { color: #086a66 !important; }
body.docs .markdown-section :is([style*="color: #00d2ff"], [style*="color:#00d2ff"]):not(pre *, .code-block-wrapper *, [style*="background: #1e1e1e"] *) { color: #0077a8 !important; }
body.docs .markdown-section [style*="color: #ff6b35"]:not(pre *, .code-block-wrapper *, [style*="background: #1e1e1e"] *) { color: #b03a0a !important; }
body.docs .markdown-section :is([style*="color: #d9a300"], [style*="color: #f2c200"]):not(pre *, .code-block-wrapper *, [style*="background: #1e1e1e"] *) { color: #7a6100 !important; }
body.docs .markdown-section [style*="color: #ce93d8"] { color: #8e24aa !important; }
body.docs .markdown-section [style*="background: rgba(255,255,255,0.15); color: #fff"] { background: rgba(16,33,43,0.08) !important; color: #33414e !important; }
body.docs .markdown-section [style*="background: rgba(255,255,255,0.02)"] { background: #fff !important; box-shadow: 0 4px 14px rgba(16,33,43,0.06) !important; }
body.docs .markdown-section :is(.code-example, .reason-card, .support-info-box) { background: #fff; }
body.docs .markdown-section .block-label { color: #5b6b78; }
body.docs .markdown-section .code-header { color: #9fe7ff; }
body.docs .markdown-section .blocks { background: #f6f8fa; border-color: #cfd8de; }
body.docs .markdown-section .code-example h4 { color: #0077a8; }
/* 聯絡頁 */
body.docs .contact-hero h1 { background: none; -webkit-text-fill-color: #10212b; color: #10212b; }
body.docs .contact-hero p, body.docs .channel-info p, body.docs .reason-card p { color: #5b6b78; }
body.docs .reason-card h3, body.docs .markdown-section .section-title { color: #10212b; }
body.docs .support-list li { color: #33414e; }
body.docs .channel-card.email .channel-info h3, body.docs .channel-card.email .channel-info code { color: #006c99; }
body.docs .channel-card.line .channel-info h3, body.docs .channel-card.line .channel-info code { color: #0a7470; }
body.docs .markdown-section .product-hero .buy-btn.more { color: #eee; border-color: rgba(255,255,255,0.35); }
.markdown-section .buy-btn { white-space: nowrap; }
@media (max-width: 767px) {
  body.docs .markdown-section { max-width: 100%; padding: 20px 16px 40px; box-sizing: border-box; }
  .product-hero .ph-cta .buy-btn { padding: 10px 12px; }
}
body.docs .markdown-section em { color: #4b5b68; }
/* 對比修正（2026-10-15 掃描結果） */
body.theme-light .site-footer .sf-social a, body.landing.theme-light .markdown-section .lp-sub a { color: #0a7c78; }
body.docs .markdown-section .lp-prod h3 { color: #fff; }
body.docs .contact-badge { color: #0077a8; }
body.docs .lp-final { background: linear-gradient(135deg, #0a111a, #0f2a2c); border: 0; }
body.docs .markdown-section .lp-final h2 { color: #fff; }
body.docs .markdown-section .lp-final p { color: #cfd8de; }
body.docs .markdown-section .lp-final .lp-btn.ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
body.docs .markdown-section .lp-final .lp-btn.line { color: #fff; }
body.docs .markdown-section [style*="color: var(--theme-color)"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #0a7c78 !important; }
body.docs .markdown-section [style*="color: var(--accent-color)"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #8a6d00 !important; }
body.docs .markdown-section [style*="color: #00ff64"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #13803d !important; }
body.docs .markdown-section [style*="color: #ff4500"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #b03a0a !important; }
body.docs .markdown-section :is([style*="color: #4caf50" i], [style*="color: #ec5959" i], [style*="color: #ff4a4a"]):not(pre *, [style*="background: #1e1e1e"] *) { filter: brightness(0.6); }
body.docs .markdown-section [style*="background: #1e1e1e"] [style*="color: #f2c200"] { color: #f2c200 !important; }
body.docs .sidebar .search { padding: 0 14px; border-bottom: 0; }
.product-hero .ph-cta { margin-bottom: 22px; }
.topnav .tn-logo { min-height: 44px; }
.lp-faq summary { padding: 11px 0; margin: -11px 0; }
@media (max-width: 767px) { .sidebar ul li a { padding: 12px 0; } }
body.docs :is(.reason-icon, .step-icon, .channel-icon-wrap) svg.i { margin: 0; color: #0a7c78; }
body.docs .channel-card.email .channel-icon-wrap svg.i { color: #0077a8; }
/* 側欄分類標題：Markdown 鬆散清單多包一層 <p>，外距歸零，間距改由 menu-toggle 控制 */
.sidebar-nav li .menu-toggle > p { margin: 0; }
.sidebar-nav li .menu-toggle { padding: 8px 0; }
@media (max-width: 767px) { .sidebar-nav li .menu-toggle { padding: 0; min-height: 44px; display: flex; align-items: center; } .sidebar-nav li .menu-toggle > p { flex: 1; } }

/* =========================================================
   2026-10-15 參考 AXIONE 的轉換做法（分析：產品推廣網站資料\參考網站\AXIONE_風格分析.md）
   ========================================================= */

/* 首頁主視覺：比賽場地實景（自家影片截圖）當背景，左側加深讓文字好讀 */
body.landing.theme-light .lp-hero::before {
  background: linear-gradient(90deg, rgba(5,10,16,0.96) 0%, rgba(5,10,16,0.86) 45%, rgba(5,10,16,0.55) 100%),
    url("/images/brand/hero-field.webp") center / cover no-repeat, #050a10;
}
@media (max-width: 900px) {
  body.landing.theme-light .lp-hero::before { background: linear-gradient(180deg, rgba(5,10,16,0.9) 0%, rgba(5,10,16,0.84) 55%, rgba(5,10,16,0.8) 100%), url("/images/brand/hero-field.webp") 30% 60% / cover no-repeat, #050a10; }
}

/* 採購橫幅（主視覺下方） */
.lp-promo { display: flex; align-items: center; justify-content: center; gap: 12px 20px; flex-wrap: wrap; margin: 18px auto 0; padding: 14px 18px; border-radius: 12px; background: #fff6d6; border: 1px solid #f2d36b; text-align: center; }
.markdown-section .lp-promo p { margin: 0; color: #3d3200; font-size: 1rem; line-height: 1.6; }
.markdown-section .lp-promo b { color: #10212b; }
.markdown-section .lp-promo .lp-btn { padding: 10px 20px; font-size: 0.98rem; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }

/* 免費下載 */
.markdown-section .lp-dl .lp-card p a { display: flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; border-bottom: 1px solid #eef1f4; }
.markdown-section .lp-dl .lp-card p a:last-child { border-bottom: 0; }
.markdown-section .lp-dl .lp-card p a:hover { text-decoration: underline; }

/* 產品頁可展開區塊 */
.markdown-section details.acc { border-bottom: 1px solid #e3e8ee; }
.markdown-section details.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.markdown-section details.acc > summary::-webkit-details-marker { display: none; }
.markdown-section details.acc > summary h2 { flex: 1; margin: 14px 0; padding: 0; border: 0; font-size: 1.45rem; }
.markdown-section details.acc > summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 2.5px solid #0a7c78; border-bottom: 2.5px solid #0a7c78; transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.2s; }
.markdown-section details.acc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.markdown-section details.acc > summary:hover h2 { color: #0a7c78; }
.markdown-section details.acc > summary:focus-visible { outline: 3px solid rgba(10,143,138,0.35); outline-offset: 2px; border-radius: 6px; }
.markdown-section details.acc .acc-body { padding-bottom: 18px; }
.markdown-section details.acc .acc-body > hr:last-child { display: none; }
@media (max-width: 767px) { .markdown-section details.acc > summary h2 { font-size: 1.2rem; } }

/* 產品頁選版本 */
.product-hero .ph-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 0 0 14px; }
.product-hero .ph-pick span { color: #cfd8de; font-size: 0.92rem; }
.product-hero .ph-pick button { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent); background: transparent; color: #eee; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.product-hero .ph-pick button:hover { background: color-mix(in srgb, var(--pc) 18%, transparent); }
.product-hero .ph-pick button[aria-checked="true"] { background: var(--pc); border-color: var(--pc); color: #0a0a0a; }
.product-hero .ph-pick button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) { .product-hero .ph-pick { order: 3; } .markdown-section .product-hero .ph-price { order: 3; } .product-hero .ph-pick > span { width: 100%; } }
/* 「各版本教學」是文件連結，做成文字連結，和上方選版本按鈕區分 */
.markdown-section .product-hero .ph-editions a { border: 0; border-radius: 0; padding: 0 10px; color: #cfd8de; text-decoration: underline; text-underline-offset: 3px; }
.markdown-section .product-hero .ph-editions a:hover { background: transparent; color: #fff; }
body.landing.theme-light .markdown-section .lp-vcap a { color: #0a7c78; }

/* 選購指南「已經有感應器了？直接找程式」對照表：手機上 5 欄塞進螢幕寬度（2026-10-20） */
@media (max-width: 600px) {
  .markdown-section #start + p + table { font-size: 0.8rem; }
  .markdown-section #start + p + table th, .markdown-section #start + p + table td { padding: 6px 3px; }
}

/* =========================================================
   2026-10-21 #67 開發者文件版型（D8）：token、左側欄＋72ch 內容＋右側目錄、六平台色、chip、
   指令參考 <details>、產品頁平台磁磚、首頁兩步選擇器
   ========================================================= */
:root {
  --brand: #0ABAB5; --brand-ink: #0a7c78;        /* 品牌蒂芬妮綠；文字用深一階（白底對比 4.6:1） */
  --spike: #F2C200; --spike-ink: #7a6100;        /* SPIKE 黃；文字用深黃 */
  --ev3: #D62828; --ev3-ink: #b11f1f;
  --arduino: #0ABAB5; --arduino-ink: #0a7c78;
  --mblock: #1E6FE8; --mblock-ink: #1a5bc0;
  --matrix: #2E9E4F; --matrix-ink: #237a3d;
  --microbit: #E8711E; --microbit-ink: #b4530f;
  --ink: #1f2933; --ink-2: #33414e; --ink-mute: #5b6b78;
  --paper: #fff; --paper-2: #f6f8fa; --rule: #e3e8ee;
  --font-text: 'Nunito', 'Noto Sans TC', 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  --measure: 72ch;
}
body.docs, body.landing { font-family: var(--font-text); }
body.docs .markdown-section { color: var(--ink); }
body.docs .markdown-section pre, body.docs .markdown-section code, body.docs .markdown-section kbd { font-family: var(--font-mono); }

/* 文件版型：側欄（docsify 既有）＋ 內容 72ch ＋ 右側目錄 */
body.docs .doc-wrap { max-width: calc(var(--measure) + 30px); margin: 0 auto; padding: 0; }
body.docs .doc-wrap > .markdown-section { max-width: none; margin: 0; }
body.docs .toc { font-size: 0.9rem; }
body.docs .toc details { border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2); padding: 8px 14px; margin: 16px 15px 0; }
body.docs .toc summary { cursor: pointer; font-weight: 700; color: var(--ink-2); min-height: 36px; display: flex; align-items: center; }
body.docs .toc ol { list-style: none; margin: 6px 0 4px; padding: 0; }
body.docs .toc li a { display: block; padding: 6px 8px; color: var(--ink-mute); text-decoration: none; border-left: 2px solid transparent; line-height: 1.4; }
body.docs .toc li.toc-h3 a { padding-left: 20px; font-size: 0.85rem; }
body.docs .toc li a:hover { color: var(--brand-ink); }
body.docs .toc li a.active { color: var(--brand-ink); border-left-color: var(--brand); font-weight: 700; background: #fff; }
@media (min-width: 1200px) {
  body.docs .doc-wrap.has-toc { display: grid; grid-template-columns: minmax(0, var(--measure)) 230px; gap: 28px; max-width: calc(var(--measure) + 258px + 30px); align-items: start; }
  body.docs .toc { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
  body.docs .toc details { margin: 30px 0 0; padding: 10px 12px; }
  body.docs .toc summary { list-style: none; pointer-events: none; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-mute); }
  body.docs .toc summary::-webkit-details-marker { display: none; }
}
@media (max-width: 1199px) { body.docs .doc-wrap.has-toc { display: flex; flex-direction: column; } body.docs .doc-wrap.has-toc > .toc { order: -1; } }

/* 平台色：chip、<details class="plat">、磁磚共用 */
.plat-spike, .chip-spike, .pg-spike, .ft-spike { --pc: var(--spike); --pc-ink: var(--spike-ink); }
.plat-ev3, .chip-ev3, .pg-ev3, .ft-ev3 { --pc: var(--ev3); --pc-ink: var(--ev3-ink); }
.plat-arduino, .chip-arduino, .pg-arduino, .ft-arduino { --pc: var(--arduino); --pc-ink: var(--arduino-ink); }
.plat-mblock, .chip-mblock, .pg-mblock, .ft-mblock { --pc: var(--mblock); --pc-ink: var(--mblock-ink); }
.plat-matrix, .chip-matrix, .pg-matrix, .ft-matrix { --pc: var(--matrix); --pc-ink: var(--matrix-ink); }
.plat-microbit, .chip-microbit, .pg-microbit, .ft-microbit { --pc: var(--microbit); --pc-ink: var(--microbit-ink); }

/* chip 列 */
.markdown-section p.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.markdown-section .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1.5px solid var(--pc, var(--brand)); color: var(--pc-ink, var(--brand-ink)); background: color-mix(in srgb, var(--pc, var(--brand)) 8%, #fff); font-weight: 700; font-size: 0.88rem; text-decoration: none; }
.markdown-section a.chip:hover { background: color-mix(in srgb, var(--pc, var(--brand)) 18%, #fff); }
.markdown-section .chip.current { background: var(--pc, var(--brand)); color: #0a0a0a; border-color: var(--pc, var(--brand)); }
.markdown-section .chip-ev3.current, .markdown-section .chip-mblock.current, .markdown-section .chip-matrix.current, .markdown-section .chip-microbit.current { color: #fff; }
.markdown-section .chip.off { opacity: 0.45; border-style: dashed; }

/* 指令參考：每個值一節 */
.markdown-section section.ref-item { padding: 6px 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--rule); scroll-margin-top: 76px; }
.markdown-section section.ref-item h3 { margin-top: 1.2em; }
.markdown-section section.ref-item h3 small { font-family: var(--font-mono); font-weight: 400; font-size: 0.75em; color: var(--ink-mute); margin-left: 8px; }
.markdown-section section.ref-item h3 code { font-size: 0.85em; }
.markdown-section figure.ref-fig { margin: 12px 0 16px; text-align: center; }
.markdown-section figure.ref-fig img { max-width: 480px; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
/* 相機螢幕示意圖（神攝手）：小圖格狀排列、點開看原圖；像素圖不模糊 */
.markdown-section .ui-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; margin: 12px 0 18px; }
.markdown-section .ui-shots figure { margin: 0; }
.markdown-section .ui-shots img { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; border: 1px solid var(--rule); background: #000; }
.markdown-section .ui-shots figcaption { margin-top: 4px; font-size: 0.85rem; line-height: 1.4; color: var(--ink-2); }

/* 六平台 <details>：左邊框平台色 */
.markdown-section details.plat { margin: 0 0 8px; border: 1px solid var(--rule); border-left: 5px solid var(--pc, var(--brand)); border-radius: 10px; background: #fff; }
.markdown-section details.plat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 14px; font-weight: 700; color: var(--ink-2); }
.markdown-section details.plat > summary::-webkit-details-marker { display: none; }
.markdown-section details.plat > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(45deg); transition: transform 0.15s; }
.markdown-section details.plat[open] > summary::after { transform: rotate(-135deg); }
.markdown-section details.plat > summary:hover { color: var(--pc-ink, var(--brand-ink)); }
.markdown-section details.plat > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--pc, var(--brand)) 45%, transparent); outline-offset: -3px; border-radius: 10px; }
.markdown-section details.plat .plat-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pc, var(--brand)); flex: none; }
.markdown-section details.plat > :not(summary) { margin-left: 14px; margin-right: 14px; }
.markdown-section details.plat > p:first-of-type { margin-top: 4px; }
.markdown-section details.plat > pre { margin-top: 8px; }
.markdown-section details.plat > :last-child { margin-bottom: 14px; }
.markdown-section details.plat pre.blocks { background: var(--paper-2); border: 1px solid var(--rule); }

/* 產品頁六平台磁磚 */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 8px; }
.pg-tile { border: 1px solid var(--rule); border-top: 4px solid var(--pc, var(--brand)); border-radius: 12px; padding: 10px 12px 8px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.pg-tile b { color: var(--ink); font-size: 0.95rem; margin-bottom: 4px; }
.markdown-section .pg-tile a { display: flex; align-items: center; min-height: 40px; color: var(--pc-ink, var(--brand-ink)); text-decoration: none; font-weight: 700; font-size: 0.9rem; border-top: 1px solid var(--rule); }
.markdown-section .pg-tile a::before { content: "\2192"; margin-right: 6px; opacity: 0.6; }
.markdown-section .pg-tile a:hover { text-decoration: underline; }
.pg-tile.off { opacity: 0.55; border-top-color: var(--rule); background: var(--paper-2); }
.pg-tile.off span { color: var(--ink-mute); font-size: 0.85rem; min-height: 40px; display: flex; align-items: center; }

/* 首頁兩步選擇器 */
.finder { max-width: 1180px; margin: 0 auto; }
.finder-pick { display: none; }
html.js .finder-pick { display: block; }
html.js .finder-table { margin-top: 18px; }
.markdown-section .finder-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-weight: 700; color: #10212b; }
.markdown-section .finder-step b { width: 30px; height: 30px; border-radius: 50%; background: var(--spike); color: #0a0a0a; display: inline-flex; align-items: center; justify-content: center; }
.finder-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.finder-tiles button { min-height: 48px; padding: 10px 8px; border-radius: 12px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.finder-prods button img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.finder-prods button .ft-noimg { height: 64px; width: 64px; border-radius: 12px; background: var(--paper-2); }
.finder-tiles button:hover { border-color: var(--pc, var(--brand)); }
.finder-tiles button[aria-checked="true"] { border-color: var(--pc, var(--brand)); background: color-mix(in srgb, var(--pc, var(--brand)) 12%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc, var(--brand)) 40%, transparent); }
.finder-hosts button { border-top: 4px solid var(--pc); min-height: 56px; }
.finder-tiles button:focus-visible { outline: 3px solid rgba(10,143,138,0.45); outline-offset: 2px; }
.finder-result { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--rule); }
.markdown-section .finder-result p { margin: 0; color: var(--ink-mute); }
.markdown-section .finder-result h3 { margin: 0 0 10px; color: #10212b; font-size: 1.1rem; }
.finder-result .fr-links { display: flex; flex-wrap: wrap; gap: 10px; }
.markdown-section .finder-result .fr-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--brand-ink); color: #fff; font-weight: 700; text-decoration: none; }
.markdown-section .finder-result .fr-links a.ghost { background: #fff; color: var(--ink-2); border: 1px solid #cfd8de; }
/* 首頁 landing 主題的連結色權重較高，這裡再壓回來 */
body.landing.theme-light .markdown-section .finder-result .fr-links a { color: #fff; }
body.landing.theme-light .markdown-section .finder-result .fr-links a.ghost { color: var(--ink-2); }
body.landing.theme-light .markdown-section .pg-tile a { color: var(--pc-ink, var(--brand-ink)); }
.finder-table summary { cursor: pointer; font-weight: 700; color: #10212b; min-height: 44px; display: flex; align-items: center; }
.finder-table table { width: 100%; font-size: 0.9rem; }
@media (max-width: 600px) { .finder-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .finder-tiles button { font-size: 0.8rem; padding: 8px 4px; } .finder-prods button img { height: 48px; } .finder-table { overflow-x: auto; } }

/* 2026-10-22 touch targets >= 44px (mobile audit): chips, TOC links, summaries, copy buttons, platform-grid buttons, heading anchors */
.markdown-section .chip { min-height: 44px; }
body.docs .toc li a { min-height: 44px; display: flex; align-items: center; }
.markdown-section details > summary { min-height: 44px; }
.code-copy { min-height: 44px; min-width: 44px; }
.platform-grid a { min-height: 44px; }
.markdown-section a.anchor, .markdown-section h2 > a, .markdown-section h3 > a { min-height: 44px; display: inline-flex; align-items: center; }

/* 2026-10-22 Lighthouse contrast: Prism tokens on #f8f8f8, copy button, EV3 chip ink */
.markdown-section pre code .token.keyword, .markdown-section pre code .token.important { color: #b34d00; }
.markdown-section pre code .token.comment, .markdown-section pre code .token.prolog, .markdown-section pre code .token.doctype, .markdown-section pre code .token.cdata { color: #5f6368; }
.markdown-section pre code .token.number, .markdown-section pre code .token.boolean { color: #8a3f00; }
.markdown-section pre code .token.string, .markdown-section pre code .token.char { color: #1b6e20; }
.markdown-section pre code .token.function { color: #6a1b9a; }
.markdown-section pre code .token.operator, .markdown-section pre code .token.punctuation { color: #3c4043; }
.code-copy { background: #0a6f6b !important; color: #fff !important; }
:root { --ev3-ink: #a51f1f; --spike-ink: #6b5400; --arduino-ink: #086a66; --mblock-ink: #164fae; --matrix-ink: #1f6f38; --microbit-ink: #a44c0e; }

/* 2026-10-22 touch targets round 2: platform-grid tile buttons, TOC summary */
.platform-grid .pg-tile a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
body.docs .toc summary { min-height: 44px; }

/* 2026-10-22 chip ink must win over generic link colour */
.markdown-section a.chip, body.docs .markdown-section a.chip { color: var(--pc-ink, var(--brand-ink)); }

/* =========================================================
   2026-10-22 三層導覽：產品 → 主機 → 軟體（_build/guides/DESIGN.md）
   ========================================================= */
/* 切換列（第 2、3 層頁面頂端，sticky 在上方選單底下） */
.markdown-section .gsw { position: sticky; top: 60px; z-index: 60; margin: -6px 0 18px; padding: 8px 0; background: #fff; border-bottom: 1px solid var(--rule); }
.markdown-section .gsw-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.markdown-section .gsw-sep { color: var(--ink-mute); font-weight: 700; padding: 0 2px; }
.markdown-section .gsw-seg { position: relative; margin: 0; }
.markdown-section .gsw-seg > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 30px 4px 12px; border: 1.5px solid var(--rule); border-radius: 22px; background: #fff; color: var(--ink); font-weight: 700; font-size: 0.92rem; line-height: 1.2; position: relative; max-width: 72vw; }
.markdown-section .gsw-seg > summary::-webkit-details-marker { display: none; }
.markdown-section .gsw-seg > summary::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(45deg); transition: transform 0.15s; }
.markdown-section .gsw-seg[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.markdown-section .gsw-seg > summary:hover { border-color: var(--brand); }
.markdown-section .gsw-seg > summary:focus-visible { outline: 3px solid rgba(10,143,138,0.45); outline-offset: 2px; }
.markdown-section .gsw-k { font-size: 0.72rem; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.5px; }
.markdown-section .gsw-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markdown-section .gsw-h > summary { border-color: var(--pc); box-shadow: inset 4px 0 0 var(--pc); }
.markdown-section .gsw-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; min-width: 220px; max-width: min(340px, 92vw); max-height: 60vh; overflow: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,33,43,0.16); }
.markdown-section .gsw-menu li { margin: 0; }
.markdown-section .gsw-menu a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.markdown-section .gsw-menu a small { font-weight: 400; color: var(--ink-mute); font-size: 0.78rem; }
.markdown-section .gsw-menu a:hover, .markdown-section .gsw-menu a:focus-visible { background: var(--paper-2); color: var(--brand-ink); outline: none; }
.markdown-section .gsw-menu a[aria-current="page"] { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand-ink); }
.markdown-section .gsw-s .gsw-menu li:last-child { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 4px; }
@media (max-width: 767px) {
  .markdown-section .gsw { top: 60px; margin-left: -4px; margin-right: -4px; }
  .markdown-section .gsw-seg > summary { padding: 4px 26px 4px 10px; font-size: 0.86rem; max-width: 86vw; }
  .markdown-section .gsw-k { display: none; }
  .markdown-section .gsw-s .gsw-menu, .markdown-section .gsw-h .gsw-menu { left: auto; right: 0; }
  .markdown-section .gsw-p .gsw-menu { left: 0; right: auto; }
}

/* 大格子：① 選你的主機（產品頁）、② 選你用的軟體（平台頁） */
.markdown-section .pick { margin: 6px 0 30px; }
.markdown-section .pick-title { margin: 8px 0 4px; font-size: 1.35rem; color: #10212b; border: 0; }
.markdown-section .pick-sub { margin: 0 0 12px; color: var(--ink-mute); }
.markdown-section .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.markdown-section a.pick-tile { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; align-items: start; min-height: 96px; padding: 14px; border: 1px solid var(--rule); border-top: 4px solid var(--pc, var(--brand)); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
.markdown-section a.pick-tile:hover { box-shadow: 0 8px 22px rgba(16,33,43,0.12); transform: translateY(-1px); text-decoration: none; }
.markdown-section a.pick-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--pc, var(--brand)) 55%, transparent); outline-offset: 2px; }
.markdown-section .pt-img { grid-row: 1 / span 3; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.markdown-section .pt-img img { width: 100%; height: 100%; object-fit: contain; margin: 0; border: 0; }
.markdown-section .pt-img svg.gi { width: 34px; height: 34px; color: var(--pc-ink, var(--brand-ink)); margin: 0; }
.markdown-section .pt-name { font-weight: 800; font-size: 1.08rem; color: #10212b; line-height: 1.3; }
.markdown-section .pt-tag { font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.markdown-section .pt-sw { font-size: 0.8rem; color: var(--pc-ink, var(--brand-ink)); font-weight: 700; margin-top: 6px; }
.markdown-section .pick-continue { margin: 0 0 12px; }
.markdown-section .pick-continue a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--brand-ink); color: #fff; font-weight: 700; text-decoration: none; }
.markdown-section .pick-continue a:hover { background: #075f5c; }
@media (max-width: 600px) { .markdown-section .pick-grid { grid-template-columns: 1fr; } }
body.docs .product-hero + .pick, body.docs .pick { color: var(--ink); }

/* 舊頁提示條 */
.markdown-section .moved-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #fff7d6; border: 1px solid #f0d36b; color: #4a3b00; font-weight: 700; }
.markdown-section .moved-bar a { color: #6b5400; text-decoration: underline; }
.markdown-section .moved-bar svg { flex: none; }
/* 舊版（停止支援）頁頂提示：build.mjs 的 legacyBar；舊版總覽頁的大按鈕也用 .lgb-go */
.markdown-section .legacy-bar { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #fff7d6; border: 1px solid #f0d36b; color: #4a3b00; line-height: 1.6; }
.markdown-section .legacy-bar p { margin: 0; }
.markdown-section .legacy-bar .lgb-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; }
.markdown-section .legacy-bar a { color: #6b5400; }
.markdown-section a.lgb-go { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 10px; background: var(--brand-ink, #0a7c78); color: #fff !important; font-weight: 800; text-decoration: none; }
.markdown-section a.lgb-go:hover { background: #086663; }
.markdown-section .lgb-hero { margin: 0 0 20px; }
.markdown-section .lgb-hero a.lgb-go { font-size: 1.1rem; padding: 14px 24px; min-height: 56px; }

/* 軟體頁：讀值段 */
.markdown-section p.ref-note { font-size: 0.85rem; color: var(--ink-mute); margin: 6px 0 0; }
.markdown-section p.ref-missing { padding: 10px 14px; border-radius: 10px; background: var(--paper-2); border: 1px dashed #cfd8de; color: var(--ink-2); }
.markdown-section details.helper { margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 0 14px; }
.markdown-section details.helper > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; }

/* 首頁三步選擇器：第 3 步（軟體）與不能選的主機 */
.finder-tiles button:disabled { opacity: 0.38; cursor: not-allowed; border-style: dashed; }
.finder-sws button { flex-direction: column; align-items: flex-start; text-align: left; min-height: 64px; }
.finder-sws button small { font-weight: 400; color: var(--ink-mute); font-size: 0.78rem; line-height: 1.35; }
.markdown-section .finder-sws:empty::before { content: attr(data-empty); color: var(--ink-mute); font-size: 0.9rem; grid-column: 1 / -1; }
.markdown-section .finder-table td a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) { .finder-sws { grid-template-columns: 1fr 1fr; } }
/* 三層導覽頂圖：產品頁 ref-<產品>.webp（16:9）、平台頁 host-<主機>.webp（1:1） */
.markdown-section img.pick-banner { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; margin: 0 0 14px; border: 1px solid var(--rule); }
.markdown-section figure.guide-hero { margin: 4px 0 18px; text-align: center; }
.markdown-section figure.guide-hero img { width: 100%; max-width: 200px; height: auto; border-radius: 16px; border: 1px solid var(--rule); background: #fff; }
body.docs .markdown-section .pick-continue a, body.docs .markdown-section .pick-continue a:hover { color: #fff; text-decoration: none; }
body.docs .markdown-section a.pick-tile, body.docs .markdown-section a.pick-tile:hover { color: var(--ink); }
.markdown-section .pt-tag { font-weight: 400; }
/* docsify 在手機把 body／main 設 overflow-x: hidden，會讓 sticky 失效：改成 clip（一樣不橫向捲動，但不建立捲動容器） */
@media (max-width: 767px) { body.docs, body.docs > main { overflow: visible; overflow-x: clip; } }
/* 2026-10-24 對比：下載按鈕是白字，內文 inline 漸層從淺青／黃開始（1.7~2.4:1），用 CSS 統一壓深到 ≥5:1；黃色那顆改深色字 */
.markdown-section a:is(.btn-download, .btn-download-lib):is([style*="#00d2ff"], [style*="#0abab5"]) { background: linear-gradient(135deg, #007a8a, #005e5a) !important; color: #fff !important; }
.markdown-section a.btn-download[style*="#5b6cff"] { background: linear-gradient(135deg, #4f5bd5, #2a2f8f) !important; }
.markdown-section a.btn-download[style*="#f2c200"] { color: #10212b !important; }
/* 2026-10-24 目錄預設收起（手機的樣子），桌機由頁內腳本打開；停用 JS 時桌機也要能點開 */
@media (min-width: 1200px) { html:not(.js) body.docs .toc summary { pointer-events: auto; cursor: pointer; } }
@media (max-width: 1199px) { body.docs .markdown-section > .toc details { margin: 0 0 18px; } }
/* 2026-10-24 全站對比掃描（_build/tests/layout_scan.mjs --all）：舊頁內嵌色在淡色底上不到 4.5:1 */
body.docs .markdown-section [style*="color: #d32f2f"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #a51f1f !important; }
body.docs .markdown-section [style*="color: #007a75"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #006a66 !important; }
body.docs .markdown-section [style*="color: #b88600"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #7a6100 !important; }
body.docs .markdown-section [style*="color: #0077b6"]:not(pre *, [style*="background: #1e1e1e"] *) { color: #005f91 !important; }
body.docs .markdown-section .code-badge.sync { color: #93c5fd; }
body.docs .markdown-section .code-badge.async { color: #d8b4fe; }
/* 舊頁平台晶片：目前這一顆用深一階底＋白字（原本 a.chip 的字色規則蓋掉 .current，字跟底同色系 1.6~2.7:1） */
.markdown-section .chip.current, body.docs .markdown-section a.chip.current { background: var(--pc-ink, var(--brand-ink)); border-color: var(--pc-ink, var(--brand-ink)); color: #fff; }
.markdown-section a:is([style*="linear-gradient(135deg, #00d2ff"], [style*="linear-gradient(135deg, #0abab5"]):is([style*="color: white"], [style*="color: #fff"], [style*="color:#fff"]) { background: linear-gradient(135deg, #007a8a, #005e5a) !important; }
/* 警告（黃）標題混黑 60% 仍只有 4.2:1，直接用深黃 */
body.docs .markdown-section blockquote.callout-warning .callout-title { color: #6b5400; }

/* YouTube 點了才載入（build.mjs ytLite）：縮圖放自己網站，點之前不連 YouTube */
.yt-lite { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; cursor: pointer; text-decoration: none; }
.yt-lite img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; transition: opacity .2s; }
.yt-lite .yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(23,23,23,.82); transition: background .2s; }
.yt-lite .yt-play::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; }
.yt-lite:hover .yt-play, .yt-lite:focus-visible .yt-play { background: #f00; }
.yt-lite:hover img { opacity: .9; }
.yt-lite:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 6px #0a7c78; }
iframe.yt-on { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* 互動教學入口（產品頁、SPIKE 平台頁、SPIKE 軟體頁、首頁 finder、learn/ 總覽） */
.markdown-section .learn-box { margin: 18px 0 8px; padding: 16px 18px; border: 1px solid #f2d36b; border-left: 5px solid #f5b800; border-radius: 14px; background: #fffbea; }
.markdown-section .learn-box.lb-sw { margin: 4px 0 20px; }
.markdown-section .learn-box p { margin: 0; }
.markdown-section .learn-box .lb-title { display: flex; align-items: center; gap: 8px; font-size: 1.08rem; color: #10212b; }
.markdown-section .learn-box .lb-title .i { width: 22px; height: 22px; color: #b07d00; flex: none; }
.markdown-section .learn-box .lb-tag { font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #f5b800; color: #10212b; }
.markdown-section .learn-box .lb-sub { margin: 6px 0 10px; color: var(--ink-mute); }
.markdown-section .learn-box .lb-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.markdown-section .learn-box .lb-links + .lb-links { margin-top: 8px; }
.markdown-section .learn-box .lb-ed { min-width: 4.5em; font-weight: 700; color: var(--ink-2); }
.markdown-section .learn-box .lb-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; background: #10212b; color: #fff; font-weight: 700; text-decoration: none; }
.markdown-section .learn-box .lb-links a:hover { background: #24404f; text-decoration: none; }
.markdown-section .learn-box .lb-all { margin-top: 10px; }
.markdown-section .learn-box .lb-all a { font-weight: 700; }
.markdown-section .finder-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: #fffbea; border: 1px solid #f2d36b; }
.markdown-section .finder-learn .i { width: 20px; height: 20px; color: #b07d00; }
.markdown-section .finder-learn a { font-weight: 700; }
.markdown-section .learn-box .lb-links + .lb-links { margin-top: 6px; }
/* 互動教學總覽：一橫列「產品 ▾ ＋ 主機 ▾ → 寫法按鈕」，下面摺疊的全部產品一覽 */
.markdown-section .lh-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 8px; margin: 16px 0 6px; padding: 14px 12px; border: 1px solid var(--rule); border-radius: 16px; background: #fff; }
.markdown-section .lh-img { width: 48px; height: 40px; object-fit: contain; align-self: flex-end; margin-bottom: 2px; }
.markdown-section .lh-f { display: grid; gap: 4px; margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
.markdown-section .lh-f select { font: inherit; font-size: 1rem; font-weight: 500; min-height: 42px; min-width: 6em; padding: 0 8px; border-radius: 12px; border: 1px solid #cfd8de; background: #fff; color: var(--ink); cursor: pointer; }

.markdown-section .lh-f select:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px; }
.markdown-section .lh-arrow { display: none; }
.markdown-section .lh-ks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 寫法按鈕＝開始教學的行動按鈕：品牌綠底＋播放三角形＋箭頭，出現時閃三下光圈（換產品／主機時會重畫、再閃一次） */
.markdown-section .lh-go { display: grid; gap: 4px; }
.markdown-section .lh-go-l { font-size: 0.82rem; font-weight: 700; color: var(--brand-ink); }
.markdown-section .lh .lh-ks a { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 12px 0 11px; border-radius: 21px; background: var(--brand-ink); color: #fff; font-size: 0.88rem; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(10,124,120,.28); transition: transform .15s, box-shadow .15s, background .15s; animation: lhPulse 1.4s ease-out 3; }
.markdown-section .lh .lh-ks a::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.markdown-section .lh .lh-ks a::after { content: "→"; font-weight: 400; }
.markdown-section .lh .lh-ks a:hover { background: #075f5b; color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(10,124,120,.35); }
.markdown-section .lh .lh-ks a:focus-visible { outline: 3px solid #10212b; outline-offset: 2px; }
@keyframes lhPulse { 0% { box-shadow: 0 0 0 0 rgba(10,124,120,.55); } 100% { box-shadow: 0 0 0 12px rgba(10,124,120,0); } }
@media (prefers-reduced-motion: reduce) { .markdown-section .lh .lh-ks a { animation: none; transition: none; } .markdown-section .lh .lh-ks a:hover { transform: none; } }
/* 寬螢幕：右邊是空的，整列可以往右延伸到放得下為止（不換行） */
@media (min-width: 1200px) { .markdown-section .lh-bar { flex-wrap: nowrap; width: max-content; max-width: none; } .markdown-section .lh-bar.lh-wrap { flex-wrap: wrap; width: auto; } }
.markdown-section .lh-guide { margin: 4px 0 18px; }
.markdown-section .lh-guide a { font-weight: 700; }
.markdown-section .lh-all { border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.markdown-section .lh-all > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; }
.markdown-section .lh-list { display: grid; gap: 4px; padding: 0 16px 14px; }
.markdown-section .lh-row { padding: 10px 0; border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.markdown-section .lh-row b { display: block; margin-bottom: 4px; }
.markdown-section .lh-row p { display: grid; grid-template-columns: 5.5em 1fr; align-items: baseline; gap: 2px 10px; margin: 2px 0; font-size: 0.92rem; }
.markdown-section .lh-row .lh-ls { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.markdown-section .lh-row .lc-host { font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
@media (max-width: 600px) {
  .markdown-section .lh-bar { padding: 14px; gap: 10px; }
  .markdown-section .lh-img { width: 56px; height: 40px; }
  .markdown-section .lh-f { flex: 1 1 40%; }
  .markdown-section .lh-f select { width: 100%; min-width: 0; }
  .markdown-section .lh-arrow { display: none; }
  .markdown-section .lh-ks { flex-basis: 100%; }
  .markdown-section .lh-row p { grid-template-columns: 1fr; gap: 0; }
}
/* <!-- layout: wide -->（互動教學總覽）：沒有右側目錄、內容以表格和選單為主 → 用滿側欄右邊的寬度，不再左右各留一大片空白；一般段落維持好讀的行寬 */
body.docs .doc-wrap.wide { max-width: 1240px; margin: 0; padding: 0 32px; }
body.docs .doc-wrap.wide > .markdown-section > p, body.docs .doc-wrap.wide > .markdown-section > blockquote { max-width: var(--measure); }
@media (min-width: 1200px) { body.docs .doc-wrap.wide .lh-bar { width: max-content; max-width: 100%; } }
@media (max-width: 768px) { body.docs .doc-wrap.wide { padding: 0; } }

/* 技術支援頁（support.md）：先看這裡的連結卡＋寄信表單（_build/assets/support.js） */
.sp-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.markdown-section a.sp-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--rule); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; min-height: 44px; }
.markdown-section a.sp-link:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, #fff); }
.markdown-section a.sp-link b { color: var(--brand-ink); font-size: 0.98rem; }
.markdown-section a.sp-link span { color: var(--ink-mute); font-size: 0.86rem; line-height: 1.5; }
.sp-form { border: 1.5px solid var(--rule); border-radius: 16px; background: var(--paper-2); padding: 20px; margin: 16px 0 28px; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.sp-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-f.sp-wide { grid-column: 1 / -1; }
.sp-hide { display: none !important; }
.markdown-section .sp-l { font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }
.markdown-section .sp-l b, .markdown-section .sp-form p b { color: #c0392b; }
.sp-form select, .sp-form input[type="text"], .sp-form textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1.5px solid #cfd8de; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 0.95rem; }
.sp-form textarea { resize: vertical; line-height: 1.55; }
.sp-form select:focus, .sp-form input:focus, .sp-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.sp-form [aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,0.15); }
.sp-form ::placeholder { color: #8a97a3; }
.markdown-section .sp-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; color: var(--ink-2); cursor: pointer; line-height: 1.5; }
.sp-check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand); }
.sp-media-on { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.markdown-section .sp-note { margin: 0 0 6px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--spike) 14%, #fff); border-left: 4px solid var(--spike); font-size: 0.88rem; line-height: 1.65; color: var(--ink); }
.markdown-section .sp-note b { color: var(--ink); }
.markdown-section details.sp-help { font-size: 0.86rem; color: var(--ink-mute); }
.markdown-section details.sp-help summary { cursor: pointer; color: var(--brand-ink); font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.markdown-section details.sp-help ul { margin: 6px 0 0; padding-left: 18px; }
.markdown-section details.sp-help li { margin: 4px 0; }
.sp-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.markdown-section .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 18px; border-radius: 10px; border: 1.5px solid #0a7c78; background: #fff; color: #0a7c78; font: inherit; font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; }
.markdown-section .sp-btn.sp-primary { background: #0a7c78; color: #fff; }
.markdown-section .sp-btn.sp-ghost { border-color: #cfd8de; color: var(--ink-mute); }
.markdown-section .sp-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.markdown-section .sp-btn svg.i { width: 18px; height: 18px; margin: 0; }
.markdown-section .sp-status { margin: 12px 0 0; min-height: 1.4em; font-size: 0.9rem; font-weight: 700; }
.markdown-section .sp-status.sp-ok { color: #1f7a3d; }
.markdown-section .sp-status.sp-warn { color: #8a5a00; }
.markdown-section .sp-status.sp-err { color: #c0392b; }
.markdown-section details.sp-preview-box { margin-top: 14px; }
.markdown-section details.sp-preview-box summary { cursor: pointer; font-weight: 700; color: var(--ink-2); min-height: 32px; }
.markdown-section pre.sp-preview { white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; color: var(--ink); }
.sp-form:not(.sp-ready) .sp-btns, .sp-form:not(.sp-ready) .sp-preview-box { opacity: 0.5; pointer-events: none; }
@media (max-width: 640px) {
  .sp-form { padding: 14px; border-radius: 12px; }
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-btns .sp-btn { flex: 1 1 100%; }
}