/* 總覽主視覺：雙環磁力線（使用者 2026-10-24：採 GPT 構圖的中間主視覺；中間大圈＝認識鐵研，左右各三個小圈，不標章節號）。
   只用在首頁；幾何由 build_stage_site.loop_field() 算（viewBox 1200×660），小圈位置 --x／--y 為主視覺寬高百分比。
   沿用 .stg-ov 類別讓 stage.js（←→ 在總覽輪流聚焦）與 app.js（站內導覽不算跨主題跳轉）照舊運作，
   因此這裡一律以 .stg-ov.hl 開頭，蓋過 stage.css／stage-bridge.css 對舊卡片格的設定。 */
.stg-ov.hl{display:flex;align-items:center;justify-content:center;flex:1;height:100%;min-height:0;overflow:visible;container-type:size;margin:0}
.stg-ov.hl .hl-box{position:relative;width:min(100cqw,calc(100cqh * 1200 / 660));aspect-ratio:1200/660;container-type:inline-size}

/* ---------- 磁力線（SVG） ---------- */
.stg-ov.hl .hl-field{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hl-field .ax path{fill:none;stroke:var(--sage);stroke-width:1;opacity:.75}
.hl-field .ax .pl,.hl-field .ax .tk{stroke:var(--g-mid);stroke-width:1.4;opacity:1}
.hl-field text.it{font:italic 600 24px Georgia,"Times New Roman",serif;fill:var(--g-mid)}
.hl-field .lobe{animation:hlFade 1.1s var(--ease) backwards}
.hl-field .lobe[data-side="r"]{animation-delay:.15s}
.hl-field .lobe path{fill:none;stroke:var(--g-mid);stroke-width:1.5;opacity:.8;transition:stroke .25s,opacity .25s,stroke-width .25s}
.hl-field .lobe .trk{stroke:var(--g-dk);stroke-width:2.4;opacity:1}
.hl-field .lobe .out{stroke-dasharray:7 7;opacity:.7}
.hl-field .lobe .ar{fill:var(--g);stroke:none;opacity:1}
.hl-field .lobe .flow{stroke:var(--g);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:1 23;opacity:.95;animation:hlFlow 2.6s linear infinite}
.hl-field .ball{stroke:#fff;stroke-width:2.5}
.hl-field .ball.r{fill:#D9433B}.hl-field .ball.b{fill:#1F72C4}
.hl-field .ball.halo{stroke:none;opacity:.2}
/* 紅藍兩球只在滑到中間大圓時出現（使用者 2026-10-24），從大圓裡衝出來；兩側磁力線一起亮起 */
.hl-field .balls{opacity:0;transition:opacity .35s}
.hl-box:has(.hl-core:is(:hover,:focus-visible)) .balls{opacity:1}
.hl-box:has(.hl-core:is(:hover,:focus-visible)) .lobe path:not(.ar){stroke:var(--g);opacity:1}
.hl-field .core .glow{fill:url(#hlGlow)}
.hl-field .core .rot{fill:none;stroke:var(--g-mid);stroke-width:1.3;stroke-dasharray:2 8;transform-box:view-box;transform-origin:600px 330px;animation:hlSpin 90s linear infinite}
.hl-field .core .ticks path{stroke:var(--g-mid);stroke-width:1.4}
.hl-field .core .disk{fill:none;stroke:var(--g-dk);stroke-width:3;transition:fill .25s,stroke-width .25s}
.hl-field .core .in{fill:none;stroke:var(--sage);stroke-width:1.2}
/* 滑到哪一圈，那一側的磁力線變亮、另一側退後；滑到中間大圈，大圈變色 */
.hl-box:has(.hl-n[data-side="l"]:is(:hover,:focus-visible)) .lobe[data-side="l"] path:not(.ar),
.hl-box:has(.hl-n[data-side="r"]:is(:hover,:focus-visible)) .lobe[data-side="r"] path:not(.ar){stroke:var(--g);opacity:1}
.hl-box:has(.hl-n[data-side="l"]:is(:hover,:focus-visible)) .lobe[data-side="r"],
.hl-box:has(.hl-n[data-side="r"]:is(:hover,:focus-visible)) .lobe[data-side="l"]{opacity:.4;transition:opacity .25s}
.hl-box:has(.hl-core:is(:hover,:focus-visible)) .core .disk{fill:rgba(0,144,72,.05);stroke-width:4.5}

/* ---------- 六個章節小圈 ---------- */
.stg-ov.hl .hl-n{position:absolute;left:var(--x);top:var(--y);width:9.6cqw;height:9.6cqw;min-width:64px;min-height:64px;padding:0;margin:0;
  transform:translate(-50%,-50%);display:block;background:none;border:0;overflow:visible;text-decoration:none;color:var(--ink);z-index:2;
  animation:hlPop .7s var(--ease) backwards;animation-delay:calc(.25s + var(--i,0) * 70ms)}
.stg-ov.hl .hl-n:hover,.stg-ov.hl .hl-n:focus-visible{transform:translate(-50%,-50%);border:0;outline:none}
.stg-ov.hl .hl-c{position:absolute;inset:0;border-radius:50%;background:none;border:max(2px,.24cqw) solid var(--g-dk);color:var(--g-dk);
  box-shadow:none;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s}
.stg-ov.hl .hl-c::after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid var(--sage);pointer-events:none}
.stg-ov.hl .hl-c .ic{position:absolute;left:12%;top:12%;width:76%;height:76%;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hl-c .ic .f{fill:currentColor;stroke:none}
.hl-c .ic .d{stroke-dasharray:3.5 3.5;stroke-width:1.8}
.hl-c .ic .h{stroke:var(--g-mid);stroke-width:1.6}
.hl-c .ic text{fill:currentColor;stroke:none}
.hl-c .ic .it{font:italic 700 15px Georgia,"Times New Roman",serif}
.hl-c .ic .lb{font:700 10px var(--font-latin)}
.stg-ov.hl .hl-n:is(:hover,:focus-visible) .hl-c{transform:scale(1.08);background:rgba(0,144,72,.06);border-color:var(--g);
  box-shadow:0 0 0 max(4px,.45cqw) rgba(0,144,72,.16)}
.stg-ov.hl .hl-n:focus-visible .hl-c{outline:2px solid var(--g);outline-offset:max(9px,1cqw)}

/* 標籤：壓在圓圈下緣的白底框（同 GPT 主視覺），滑過反白 */
.stg-ov.hl .hl-t{position:absolute;left:50%;top:86%;transform:translateX(-50%);z-index:1;display:block;white-space:nowrap;
  padding:.3em .95em .32em;background:#fff;border:1.5px solid var(--g-dk);color:var(--ink);
  font:700 clamp(12px,1.38cqw,19px)/1.25 var(--font-latin),var(--font-cjk),sans-serif;letter-spacing:.05em;
  box-shadow:0 4px 12px rgba(32,48,42,.08);transition:background .25s,color .25s,border-color .25s}
.stg-ov.hl .hl-n:is(:hover,:focus-visible) .hl-t,.stg-ov.hl .hl-core:is(:hover,:focus-visible) .hl-t{background:var(--g-dk);border-color:var(--g-dk);color:#fff}
/* 章節一句話：桌機只給螢幕報讀與下方說明列用；手機直接顯示 */
.stg-ov.hl .hl-d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 中間大圈＝認識鐵研 ---------- */
.stg-ov.hl .hl-core{position:absolute;left:50%;top:50%;width:25cqw;height:25cqw;padding:0;margin:0;transform:translate(-50%,-50%);border-radius:50%;
  display:block;background:none;border:0;overflow:visible;text-decoration:none;color:var(--ink);z-index:2;animation:hlFade .8s var(--ease) backwards}
.stg-ov.hl .hl-core:hover,.stg-ov.hl .hl-core:focus-visible{transform:translate(-50%,-50%);border:0;outline:none}
.stg-ov.hl .hl-core:focus-visible .hl-disk{outline:2px solid var(--g);outline-offset:4px}
.stg-ov.hl .hl-disk{position:absolute;inset:6%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9cqw;text-align:center}
.stg-ov.hl .hl-core h1{margin:0;font:800 clamp(18px,2.85cqw,40px)/1.15 var(--font-latin),var(--font-cjk),sans-serif;letter-spacing:.08em;color:var(--ink);
  max-width:19cqw;text-wrap:balance}
.stg-ov.hl .hl-core:lang(en) h1,.stg-ov.hl .hl-core:lang(de) h1{letter-spacing:0;font-size:clamp(15px,1.95cqw,28px)}
.stg-ov.hl .hl-acr:lang(de)>span{padding:0 .55cqw}.stg-ov.hl .hl-acr:lang(de) small{font-size:clamp(10px,.8cqw,11px);letter-spacing:0}
.stg-ov.hl .hl-core img{position:static;display:block;width:auto;max-width:none;height:5.6cqw;min-height:34px;opacity:1;margin:.1cqw 0 .2cqw}
.stg-ov.hl .hl-acr{display:flex;align-items:stretch;white-space:nowrap}
.stg-ov.hl .hl-acr:lang(de){max-width:19.5cqw;white-space:normal}
/* 主視覺寬度不到 1100 px 時（約 960–1200 視窗），T/A/K 三欄收窄間距，免得字碰到內圈 */
@container (max-width:1100px){.stg-ov.hl .hl-acr>span{padding:0 .45cqw}.stg-ov.hl .hl-disk{gap:.6cqw}}
.stg-ov.hl .hl-core:lang(ja) h1{font-size:clamp(15px,2.05cqw,30px);letter-spacing:.02em;max-width:22cqw}   /* 日文標題排成一行，T/A/K 列才留在大圓內 */   /* 德文長字靠軟連字號（Qualitäts-sicherung）在大圓內換行 */
.stg-ov.hl .hl-acr>span{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 1.05cqw;line-height:1.15}
.stg-ov.hl .hl-acr>span+span{border-left:1px solid var(--g-mid)}
.stg-ov.hl .hl-acr b{font:800 clamp(14px,1.75cqw,24px)/1 var(--font-latin);color:var(--g-dk)}
.stg-ov.hl .hl-acr>span:nth-child(1) b{color:#D9433B}.stg-ov.hl .hl-acr>span:nth-child(2) b{color:#009048}.stg-ov.hl .hl-acr>span:nth-child(3) b{color:#1F72C4}   /* RGB, 同小球 */
.stg-ov.hl .hl-acr i{font:500 clamp(9.5px,.78cqw,11px)/1.3 var(--font-latin);font-style:normal;color:var(--ink-2);margin-top:.25em}
.stg-ov.hl .hl-acr small{font:600 clamp(10px,.9cqw,13px)/1.3 var(--font-latin),var(--font-cjk),sans-serif;color:var(--ink);text-transform:none;letter-spacing:.04em}
.stg-ov.hl .hl-core .hl-t{top:auto;bottom:-4%;font-size:clamp(13px,1.55cqw,21px);padding:.32em 1.2em .34em}

/* ---------- 說明列：預設是首頁導言；滑到某一圈換成該章一句話 ---------- */
.stg-ov.hl .hl-cap{position:absolute;left:50%;top:81%;transform:translateX(-50%);width:27cqw;margin:0;text-align:center;
  font:400 clamp(11px,1.05cqw,14px)/1.6 var(--font-latin),var(--font-cjk),sans-serif;color:var(--ink-2);pointer-events:none;
  padding:.5em .9em;background:rgba(255,255,255,.88);box-shadow:0 0 18px 10px rgba(255,255,255,.88)}
.stg-ov.hl .hl-cap b{display:block;font:600 clamp(10px,.82cqw,12px)/1.4 var(--font-mono);letter-spacing:.14em;color:var(--g);text-transform:uppercase;margin-bottom:.2em}
.stg-ov.hl .hl-cap span{display:block;animation:hlFade .35s var(--ease)}

/* ---------- 小圈圖示的物理動畫：只在滑過／聚焦該圈時播放 ---------- */
.hl-c .ic .mv,.hl-c .ic .ac{fill:none;stroke:var(--g-dk);stroke-width:4;stroke-linecap:round;stroke-dasharray:.5 11.5;opacity:0;transition:opacity .25s}
.hl-c .ic .bs{transition:opacity .25s}.hl-n:is(:hover,:focus-visible) .ic .bs{opacity:.3}   /* 底線退後，流動的點才看得清楚 */
.hl-c .ic .mv.in{stroke:#fff;stroke-width:3.4}
.hl-c .ic .core{fill:none;stroke:var(--sage);stroke-width:7}
.hl-c .ic .coil{stroke-width:2}
.hl-c .ic .chg{fill:var(--g-dk);stroke:none;transform-box:fill-box;transform-origin:center}.hl-c .ic .plus{stroke:#fff;stroke-width:2.4}
.hl-n:is(:hover,:focus-visible) .ic .chg{animation:icSrc .6s ease-in-out infinite alternate}
.hl-n:is(:hover,:focus-visible) .ic .mv.out{animation-duration:.7s}
.hl-c .ic .src{fill:var(--g-dk);stroke:none;transform-box:fill-box;transform-origin:center}
.hl-c .ic .rad{transform-box:view-box;transform-origin:50px 50px}
.hl-c .ic .wave{transform:translateX(0)}
.hl-n:is(:hover,:focus-visible) .ic .mv,.hl-n:is(:hover,:focus-visible) .ic .ac{opacity:1}
/* 電流、磁力線沿路徑方向流動（路徑方向已照物理方向畫） */
.hl-n:is(:hover,:focus-visible) .ic .mv{animation:icFlow .9s linear infinite}
/* 交流磁通：在磁芯裡來回換向；一次、二次線圈電流反相（楞次定律）一明一暗 */
.hl-n:is(:hover,:focus-visible) .ic .ac{animation:icAC 1.6s ease-in-out infinite alternate}
.hl-n:is(:hover,:focus-visible) .ic .coil.p{animation:icPulse 1.6s ease-in-out infinite alternate}
.hl-n:is(:hover,:focus-visible) .ic .coil.s{animation:icPulse 1.6s ease-in-out infinite alternate-reverse}
/* 平面電磁波：E、B 同相、互相垂直，一起往 +x 前進 */
.hl-n:is(:hover,:focus-visible) .ic .wave{animation:icWave 1.4s linear infinite}
/* 偶極天線：波前由天線往兩側傳出、逐漸變弱（軸向不輻射） */
.hl-c .ic .rad{opacity:.9}
.hl-n:is(:hover,:focus-visible) .ic .rad{animation:icRad 1.8s ease-out infinite}
.hl-n:is(:hover,:focus-visible) .ic .rad.r1{animation-delay:-.6s}
.hl-n:is(:hover,:focus-visible) .ic .rad.r2{animation-delay:-1.2s}
.hl-n:is(:hover,:focus-visible) .ic .src{animation:icSrc .45s ease-in-out infinite alternate}
@keyframes icFlow{to{stroke-dashoffset:-24}}
@keyframes icAC{from{stroke-dashoffset:0}to{stroke-dashoffset:-36}}
@keyframes icPulse{from{opacity:1;stroke:var(--g)}to{opacity:.35}}
@keyframes icWave{from{transform:translateX(-48px)}to{transform:translateX(0)}}
@keyframes icRad{0%{transform:scale(.55);opacity:0}15%{opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes icSrc{to{transform:scale(1.5)}}

@keyframes hlFade{from{opacity:0}}
@keyframes hlPop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes hlFlow{to{stroke-dashoffset:-24}}
@keyframes hlSpin{to{transform:rotate(360deg)}}
html.calm .hl-field .balls{display:none}
@media (prefers-reduced-motion:reduce){.hl-field .balls{display:none}}

/* ---------- 窄螢幕（<960，GPT 審查 P1：768 寬時雙環字太小）：大圈在上，六個章節排兩欄，說明直接顯示 ---------- */
@media (max-width:959px){
  .stg-ov.hl{display:block;height:auto;container-type:normal}
  .stg-ov.hl .hl-box{width:auto;aspect-ratio:auto;container-type:normal;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stg-ov.hl .hl-field,.stg-ov.hl .hl-cap{display:none}
  .stg-ov.hl .hl-core{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;justify-self:center;width:min(300px,82vw);height:auto;aspect-ratio:1;margin:6px 0 26px;
    border-radius:50%;background:none;border:3px solid var(--g-dk);box-shadow:0 0 0 8px transparent,0 0 0 9px var(--sage)}
  .stg-ov.hl .hl-core:hover,.stg-ov.hl .hl-core:focus-visible{transform:none}
  .stg-ov.hl .hl-disk{gap:8px}
  .stg-ov.hl .hl-core h1{font-size:24px;max-width:80%}
  .stg-ov.hl .hl-core:lang(en) h1,.stg-ov.hl .hl-core:lang(de) h1{font-size:19px}
  .stg-ov.hl .hl-core img{height:46px}
  .stg-ov.hl .hl-acr>span{padding:0 9px}
  .stg-ov.hl .hl-acr b{font-size:19px}.stg-ov.hl .hl-acr i{font-size:10.5px}.stg-ov.hl .hl-acr small{font-size:11px}
  .stg-ov.hl .hl-core .hl-t{bottom:-14px;font-size:15px}
  .stg-ov.hl .hl-n{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:0;transform:none;display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:12px 10px 14px;background:#fff;border:1px solid var(--rule);text-align:center}
  .stg-ov.hl .hl-n:hover,.stg-ov.hl .hl-n:focus-visible{transform:none;border:1px solid var(--g)}
  .stg-ov.hl .hl-c{position:relative;inset:auto;width:64px;height:64px;flex:none;box-shadow:none}
  .stg-ov.hl .hl-n .hl-t{position:static;transform:none;white-space:normal;font-size:14px;padding:.25em .7em}
  .stg-ov.hl .hl-n .hl-d{position:static;width:auto;height:auto;clip:auto;white-space:normal;font:400 12px/1.55 var(--font-latin),var(--font-cjk),sans-serif;color:var(--ink-2);letter-spacing:0;text-transform:none}
  @keyframes hlPop{from{opacity:0;transform:translateY(8px)}}
}

/* 英文、德文詞長：420 以下卡片改單欄，免得大量斷字（GPT 審查 P2）；中、日文維持兩欄 */
@media (max-width:420px){
  .stg-ov.hl .hl-box:is(:lang(en),:lang(de)){grid-template-columns:minmax(0,1fr)}
  .stg-ov.hl .hl-box:is(:lang(en),:lang(de)) .hl-n{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center;text-align:left;justify-items:start}
  .stg-ov.hl .hl-box:is(:lang(en),:lang(de)) .hl-n .hl-c{grid-row:1/3}
  .stg-ov.hl .hl-box:is(:lang(en),:lang(de)) .hl-n .hl-d{hyphens:manual}
}