:root{
  --bg:#080e18; --card:#131f2e; --text:#e2e8f0; --muted:#94a3b8; --border:#2d3f55;
  --blue:#3b82f6; --orange:#fb923c; --callout-bg:#0f2040; --callout-fg:#93c5fd;
  --side-w:250px;
}
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;line-height:1.7}
a{color:#60a5fa;text-decoration:none}
a:hover{text-decoration:underline}
code{background:#07111e;color:#7dd3fc;border:1px solid rgba(59,130,246,.3);border-radius:4px;padding:0 4px;font-size:.85em;overflow-wrap:anywhere}

.topbar{display:none}
.layout{display:flex;min-height:100vh}

/* 側欄目錄 */
.side{width:var(--side-w);flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--card);border-right:1px solid var(--border);padding:20px 14px}
.side .brand{display:block;font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:14px}
.side .brand span{display:block;font-size:.8rem;color:var(--muted);font-weight:400}
.side h3{font-size:.85rem;color:var(--orange);margin:18px 0 6px;letter-spacing:.05em}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:5px 10px;border-radius:6px;color:var(--text);font-size:.92rem}
.side li a span{display:block;font-size:.72rem;color:var(--muted)}
.side li a:hover{background:#1b2b40;text-decoration:none}
.side li a.active{background:var(--callout-bg);border-left:3px solid var(--blue);color:var(--callout-fg)}
.side li.sub a{padding-left:24px;font-size:.85rem}

/* 主內容 */
main{flex:1;min-width:0;padding:28px 40px 40px;max-width:1200px}
h1{margin:0 0 20px;font-size:1.8rem}
h1 small{display:block;font-size:1rem;color:var(--muted);font-weight:400}
h2{margin:44px 0 14px;font-size:1.35rem;border-left:4px solid var(--orange);padding-left:10px}
h2 em,h3 em{font-style:normal;color:var(--muted);font-weight:400;font-size:.85em}
h3{margin:28px 0 10px;font-size:1.08rem;color:var(--callout-fg)}
p,li{max-width:62em}
.muted{color:var(--muted)}
.callout{background:var(--callout-bg);border:1px solid rgba(59,130,246,.3);color:var(--callout-fg);border-radius:8px;padding:12px 16px;margin:20px 0}
.callout.colab{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.colab-btn{display:inline-block;flex:none;background:#f9ab00;color:#1f2937!important;font-weight:700;text-decoration:none!important;border-radius:6px;padding:6px 12px}
.colab-btn:hover{background:#fbbc04}
blockquote{margin:16px 0;padding:12px 18px;background:var(--card);border-left:4px solid var(--blue);border-radius:0 8px 8px 0}
blockquote cite{display:block;margin-top:6px;font-size:.85rem;color:var(--muted);font-style:normal}
.key{color:var(--orange);font-weight:700}
.hl{color:#7dd3fc}

/* 圖片：原圖多為白底，放白色卡片內避免深色背景刺眼 */
.gallery{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin:0 0 16px}
figure{margin:0;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px;max-width:100%}
figure img{display:block;max-width:100%;height:auto}
figure.center{margin:0 auto 16px;width:fit-content}

/* Flash 動畫（Ruffle 播放）：外框鎖長寬比，手機會等比縮小 */
.swf{width:100%;background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;line-height:0}
.swf embed,.swf ruffle-embed{display:block;width:100%;height:100%}
/* 自製機構動畫（assets/anim/*.js，取代第三方 Flash） */
.anim{margin:1rem auto;width:100%}
.anim canvas{display:block;width:100%;border:1px solid var(--border);border-radius:10px;background:#0b1422}
.anim-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 2px;font-size:.9rem;color:var(--muted)}
.anim-ctl button{background:#0f1a29;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font:inherit;cursor:pointer}
.anim-ctl button:hover{border-color:var(--blue)}
.anim-ctl button.act.on,.anim-ctl .seg button.on{background:var(--callout-bg);border-color:var(--blue);color:var(--callout-fg)}
.anim-ctl .seg{display:inline-flex}
.anim-ctl .seg button{border-radius:0;margin-left:-1px}
.anim-ctl .seg button:first-child{border-radius:8px 0 0 8px}
.anim-ctl .seg button:last-child{border-radius:0 8px 8px 0}
.anim-ctl label{display:inline-flex;align-items:center;gap:6px}
.anim-ctl input[type=range]{width:120px;accent-color:var(--blue)}
.anim figcaption{font-size:.8rem;color:var(--muted);text-align:right}
figure.animlink{background:#0b1422;max-width:420px}
figure.animlink figcaption{font-size:.85rem;color:#93c5fd;text-align:center;margin-top:6px}

/* 步驟／階段卡 */
.steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.steps>li{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;max-width:none}
.steps>li b{display:block;color:var(--orange);margin-bottom:4px}
.steps>li p{margin:6px 0 0}
ul.dots{padding-left:1.3em}
ul.dots li{margin:6px 0}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.tags li{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:2px 12px;font-size:.9rem}

/* 課程目錄（首頁） */
.book{display:flex;flex-wrap:wrap;gap:10px 32px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin:0 0 14px}
.book>div{flex:1 1 280px}
.book span.muted{display:block;font-size:.8rem}
.book b{display:block;font-size:1.05rem;color:var(--callout-fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:0 0 8px}
.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 16px;color:var(--text);position:relative}
a.card:hover{border-color:var(--blue);text-decoration:none}
.card b{display:block;font-size:1.02rem}
.card>span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px}
.card>i{position:absolute;top:10px;right:12px;font-style:normal;font-size:.72rem;color:#4ade80;border:1px solid rgba(74,222,128,.4);border-radius:999px;padding:0 8px}
.card.new{border-color:rgba(74,222,128,.45)}
.card .go{display:inline-block;margin:2px 10px 0 0;font-size:.85rem}
.card .go.new{color:#4ade80}

/* 章節重建頁：公式（KaTeX）＋ SVG 示意圖 */
.eqrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin:0 0 16px}
.eqrow .dg{flex:0 1 380px;width:100%;max-width:420px;height:auto}
.eqrow .dg.small{flex:0 1 300px;max-width:330px}
.eqrow .eqs{flex:1 1 320px;min-width:0}
.eqs{overflow-x:auto;overflow-y:hidden;scrollbar-color:var(--border) transparent}
.eqs p{margin:6px 0}
.eqs.wide{background:#07111e;border:1px solid rgba(59,130,246,.3);border-radius:10px;padding:4px 18px;margin:0 0 16px}
svg.dg{display:block}
svg.dg.wide{width:100%;max-width:720px;height:auto;margin:0 auto 12px}
svg.dg.mid{width:100%;max-width:540px;height:auto;margin:0 auto 12px}
.figrow svg.dg{flex:1 1 300px;max-width:440px;height:auto;margin:0}
.dg .shape{fill:rgba(96,165,250,.16);stroke:#93c5fd;stroke-width:1.6}
.dg .part1{fill:rgba(74,222,128,.2);stroke:#4ade80;stroke-width:1.6}
.dg .part2{fill:rgba(250,204,21,.2);stroke:#facc15;stroke-width:1.6}
.dg .strip{fill:rgba(147,197,253,.55);stroke:#e2e8f0;stroke-width:1}
.dg .ring{fill:none;stroke:rgba(147,197,253,.6);stroke-width:12}
.dg .elem{fill:rgba(147,197,253,.6);stroke:#e2e8f0;stroke-width:1.2}
.dg .ax{stroke:#94a3b8;stroke-width:1.5;fill:none}
.dg .ax-sym{stroke:var(--orange);stroke-width:2;fill:none}
.dg .dash{stroke:#94a3b8;stroke-width:1.1;stroke-dasharray:4 4;fill:none}
.dg .dim{stroke:#94a3b8;stroke-width:1.2;fill:none}
.dg .thin{stroke:#e2e8f0;stroke-width:1.2;fill:none}
.dg .center{stroke:#94a3b8;stroke-width:1.2;stroke-dasharray:12 4 2 4;fill:none}
.dg .dot{fill:#e2e8f0}
.dg .lb{font-family:KaTeX_Math,"Times New Roman",serif;font-style:italic;font-size:19px;fill:var(--text)}
.dg .lb.sym{fill:var(--orange)}
.dg .sub{font-size:13px}
.dg .cap{font-size:14px;fill:var(--muted);text-anchor:middle}
.dg .capl{font-size:14px;fill:#cbd5e1}
/* 梁圖（beamfig.py 產生）：負載、剪力圖、彎矩圖、自由體圖 */
svg.beamfig{width:100%;max-width:600px;height:auto;margin:0 auto 14px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.eqrow svg.beamfig{flex:0 1 330px;max-width:360px;margin:0;border:0;background:none}
.figrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 14px}
.figrow svg.beamfig{flex:1 1 280px;margin:0}
.bf-beam{fill:#475569;stroke:#94a3b8;stroke-width:1}
.bf-dist{fill:rgba(147,197,253,.12);stroke:#93c5fd;stroke-width:1.2}
.bf-darrow{stroke:#93c5fd;stroke-width:1.2}
.bf-load{stroke:#e2e8f0;stroke-width:2.2}
.bf-couple{fill:none;stroke:var(--orange);stroke-width:2.2}
.bf-cut{fill:none;stroke:var(--orange);stroke-width:2.2}
.bf-react{fill:none;stroke:#4ade80;stroke-width:2.2}
.bf-sup{fill:none;stroke:#cbd5e1;stroke-width:1.5}
.bf-ground{stroke:#cbd5e1;stroke-width:2}
.bf-wall{fill:#475569;stroke:#cbd5e1;stroke-width:1.2}
.bf-mark{fill:#e2e8f0}
.bf-dim{stroke:#94a3b8;stroke-width:1.1}
.bf-ext{stroke:#64748b;stroke-width:1;stroke-dasharray:3 3}
.bf-guide{stroke:#475569;stroke-width:1;stroke-dasharray:4 4}
.bf-axis{stroke:#94a3b8;stroke-width:1.3}
.bf-v{fill:rgba(96,165,250,.22);stroke:#60a5fa;stroke-width:2}
.bf-m{fill:rgba(251,146,60,.2);stroke:#fb923c;stroke-width:2}
.bf-v-l{fill:#60a5fa}.bf-m-l{fill:#fb923c}
.bf-defl{fill:none;stroke:#4ade80;stroke-width:2.6}
.dg .bf-defl-l{fill:#4ade80}
.bf-pt{fill:#e2e8f0}
.bf-val{font-size:14px;fill:#e2e8f0;font-family:"Times New Roman",KaTeX_Main,serif}
.dg .bf-dl{fill:#93c5fd;font-size:17px}
.dg .bf-cl{fill:var(--orange);font-size:17px}
.dg .bf-rl{fill:#4ade80;font-size:16px}
.dg .bf-dt{font-size:16px;fill:#cbd5e1}
.dg .bf-val .sub,.dg .lb .sub{font-size:12px}

.tbl{overflow-x:auto;margin:0 0 16px}
.tbl table{border-collapse:collapse;min-width:420px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.tbl th,.tbl td{border-bottom:1px solid var(--border);padding:7px 12px;text-align:left;font-size:.92rem}
.tbl th{color:var(--callout-fg);background:#0f1a29}

details.orig{margin:10px 0 8px;background:var(--card);border:1px dashed var(--border);border-radius:10px;padding:8px 14px}
details.orig summary{cursor:pointer;color:var(--muted);font-size:.9rem}
details.orig figure{margin:10px 0}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:16px;border-top:1px solid var(--border)}
.pager a{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 14px}
.pager a:hover{border-color:var(--blue);text-decoration:none}

/* 正齒輪嚙合動畫（assets/gearmesh.js，沿用 .mohr 的控制列與數值格） */
#g-svg{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;background:#0b1422;border-radius:10px}
#g-svg .mlb{font-family:"Times New Roman",serif;font-style:italic;font-size:16px}
table.jtab td,table.jtab th{white-space:nowrap;font-size:.85rem;padding:4px 7px;text-align:center}
.g-chk{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text);cursor:pointer}
/* 互動莫爾圓（assets/mohr.js） */
.mohr{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin:0 0 16px}
.mohr-ctrl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px;align-items:center;margin-bottom:8px}
.mohr-ctrl label{display:flex;align-items:center;gap:8px;font-family:"Times New Roman",serif;font-style:italic;font-size:1.05rem}
.mohr-ctrl input{flex:1;min-width:0;accent-color:var(--orange)}
.mohr-ctrl output{min-width:3.4em;text-align:right;font-style:normal;font-size:.9rem;color:var(--callout-fg);font-variant-numeric:tabular-nums}
.mohr-btn{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.mohr-btn button{background:#0f1a29;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font:inherit;font-size:.88rem;cursor:pointer}
.mohr-btn button:hover{border-color:var(--blue)}
.mohr-figs{display:flex;flex-wrap:wrap;gap:12px}
.mohr-figs svg{flex:1 1 260px;min-width:0;width:100%;max-width:400px;height:auto;background:#0b1422;border-radius:10px}
.mohr-figs svg .mlb{font-family:"Times New Roman",KaTeX_Math,serif;font-style:italic;font-size:16px;fill:#e2e8f0}
.mohr-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin:10px 0 4px}
.mohr-out div{background:#0b1422;border-radius:8px;padding:6px 10px;display:flex;justify-content:space-between;gap:8px}
.mohr-out div.wide{grid-column:1/-1}
.mohr-out span{color:var(--muted);font-size:.85rem}
.mohr-out b{font-variant-numeric:tabular-nums}

.tryit{background:var(--callout-bg);color:var(--callout-fg);border:1px solid rgba(59,130,246,.4);border-radius:8px;padding:5px 12px;font:inherit;font-size:.88rem;cursor:pointer}
.tryit:hover{border-color:var(--blue)}
svg.mohrfig{width:100%;max-width:520px;height:auto;margin:0 auto 12px;background:#0b1422;border-radius:10px}
.eqrow svg.dg.wide{flex:0 1 300px;max-width:320px;margin:0}

/* 三維主應力計算器（assets/tensor.js） */
.tensor{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin:0 0 16px}
.tensor-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 14px;margin-bottom:10px}
.tensor-in label{display:flex;align-items:center;gap:8px;font-family:"Times New Roman",serif;font-style:italic;font-size:1.05rem}
.tensor-in input{flex:1;min-width:0;background:#0b1422;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font:inherit;font-style:normal;font-size:.95rem}
.tensor-out{margin:10px 0}
.tensor-out .tbl,.tensor-out table{margin:0 0 8px;min-width:0;width:100%}
.tensor-out table{border-collapse:collapse;background:#0b1422;border-radius:8px}
.tensor-out th,.tensor-out td{padding:5px 10px;border-bottom:1px solid var(--border);font-size:.9rem;text-align:left;font-variant-numeric:tabular-nums}
.tensor-out p{font-size:.9rem;margin:6px 0}
#t-mohr{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;background:#0b1422;border-radius:10px}
#t-mohr .mlb{font-family:"Times New Roman",serif;font-style:italic;font-size:16px;fill:#e2e8f0}
pre.code{background:#07111e;color:#7dd3fc;border:1px solid rgba(59,130,246,.3);border-radius:8px;padding:8px 12px;overflow-x:auto;font-size:.9rem}

/* 破壞理論比較器（assets/failure.js） */
.failw{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin:0 0 16px}
.failw-on{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 8px;font-size:.92rem}
.failw-main{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
#f-plot{flex:1 1 300px;max-width:440px;width:100%;height:auto;background:#0b1422;border-radius:10px}
#f-plot .mlb{font-family:"Times New Roman",serif;font-style:italic;font-size:16px;fill:#e2e8f0}
.failw-main .tensor-out{flex:1 1 280px;min-width:0}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.bad{color:#f87171;font-weight:700}

/* KaTeX */
.katex{font-size:1.1em;color:var(--text);position:relative}   /* 讓隱藏的 MathML（absolute）留在可捲動的公式框內，不撐寬整頁 */
.katex-display{overflow-x:auto;overflow-y:hidden;padding:4px 0}
.katex-display>.katex{color:#7dd3fc}
details.answer{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 14px;margin:8px 0 14px}
details.answer summary{cursor:pointer;color:var(--orange);font-weight:700}

/* 差速器互動元件 */
.df{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin:0 0 20px}
.df-ctrl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px}
.df-ctrl button{background:#0f1a29;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font:inherit;font-size:.9rem;cursor:pointer}
.df-ctrl button:hover{border-color:var(--blue)}
.df-seg{display:inline-flex}
.df-seg button{border-radius:0;margin-left:-1px}
.df-seg button:first-child{border-radius:8px 0 0 8px}
.df-seg button:last-child{border-radius:0 8px 8px 0}
.df-seg button.on{background:var(--callout-bg);border-color:var(--blue);color:var(--callout-fg);position:relative}
.df-ctrl .rng{display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
.df-ctrl .rng.off{opacity:.4}
.df-ctrl .rng input{width:130px;accent-color:var(--orange)}
.df-ctrl output{min-width:7.5em;font-size:.85rem;color:var(--callout-fg)}
.df-ctrl .chk{font-size:.9rem;display:inline-flex;gap:4px;align-items:center}
.df-main{display:flex;flex-wrap:wrap;gap:12px}
.df-3d{flex:1 1 520px;min-width:0;position:relative}
.df-3d canvas{display:block;width:100%;background:radial-gradient(ellipse at 50% 40%,#16263b,#0b1422 75%);border-radius:10px;cursor:grab;touch-action:pan-y}
.df-side{flex:1 1 260px;max-width:420px;min-width:0}
.df-side svg{display:block;width:100%;max-width:300px;margin:0 auto 8px;background:#0b1422;border-radius:10px}
.df-side svg .lb{font-size:12px;fill:var(--muted)}
.df-read .rd{display:grid;grid-template-columns:12px 8.2em 1fr 3em 4.6em;gap:6px;align-items:center;font-size:.86rem;margin:4px 0}
.df-read .sw{width:10px;height:10px;border-radius:2px}
.df-read .bar{height:8px;background:#0b1422;border-radius:4px;overflow:hidden}
.df-read .bar i{display:block;height:100%}
.df-read b{text-align:right;font-variant-numeric:tabular-nums}
.df-read small{color:var(--muted);font-size:.72rem;white-space:nowrap}
.df-read .eq{background:#07111e;border:1px solid rgba(59,130,246,.3);color:#7dd3fc;border-radius:8px;padding:6px 10px;font-size:.88rem;margin:10px 0 6px}
.df-read .muted{font-size:.78rem;margin:4px 0 0}
@media (max-width:600px){
  .df{padding:8px}
  .df-ctrl .rng{flex:1 1 100%}
  .df-ctrl .rng input{flex:1;width:auto;min-width:0}
  .df-ctrl output{min-width:0}
  .df-read .rd{grid-template-columns:10px 6.6em 1fr 2.4em auto;gap:5px;font-size:.8rem}
  .df-read small{white-space:normal}
}

footer{margin-top:40px;padding-top:14px;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}

/* 手機：側欄改抽屜 */
@media (max-width:860px){
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--border);padding:10px 16px}
  .topbar a{color:var(--text);font-weight:700}
  .topbar button{background:none;border:1px solid var(--border);color:var(--text);border-radius:6px;font-size:1.1rem;padding:2px 10px;cursor:pointer}
  .side{position:fixed;top:0;left:0;z-index:30;transform:translateX(-100%);transition:transform .2s;box-shadow:4px 0 20px rgba(0,0,0,.5)}
  body.nav-open .side{transform:none}
  main{padding:18px 16px 32px}
  html{scroll-padding-top:60px}
  figure{padding:6px}
}

/* 舊 FrontPage 內文轉換後用到的樣式 */
.red{color:#f87171}
.blue{color:#93c5fd}
p.center,h1.center,h2.center,h3.center,td.center{text-align:center}
table.center{margin-left:auto;margin-right:auto}
main img{background:#fff;max-width:100%;height:auto;border-radius:4px;vertical-align:middle}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.card .muted{font-size:.78rem}
.tw{max-width:100%;overflow-x:auto;margin:0 0 16px}
pre{max-width:100%;overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:.85rem}
pre code{background:none;border:0;padding:0;font-size:inherit;overflow-wrap:normal}
pre.py{border-left:3px solid #60a5fa}
pre.out{border-left:3px solid #4ade80;color:#cbd5e1}
pre.out code{color:inherit}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}