*{box-sizing:border-box}
body{margin:0;background:#f8f7f2;color:#244638;font-family:system-ui,sans-serif;line-height:1.85}
main{max-width:1200px;margin:auto;padding:36px 6% 75px}
a{color:inherit;text-underline-offset:5px}
a:focus-visible,summary:focus-visible{outline:3px solid #ae8650;outline-offset:4px}
header{padding:65px 0 30px}
header p{max-width:680px}
.eyebrow{font:11px monospace;letter-spacing:2px;color:#718266}
h1{font-family:'Songti TC',Georgia,'Noto Serif TC','Source Han Serif TC','PMingLiU','Microsoft JhengHei',serif;font-size:clamp(42px,6vw,75px);font-weight:500;line-height:1.3;margin:20px 0}
h2{font-size:30px;line-height:1.4}
h3{line-height:1.45}
.chapter{margin-top:65px;border-top:1px solid #c6cfbb;padding-top:30px}
.jump{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14px}
.note{font-size:12px;color:#65765c}
.src{font-size:12px;color:#65765c;margin:6px 0 0}
.anchor{display:block;position:relative;top:-20px}

/* 縮寫小抄 */
.glossary{background:#eeeee3;padding:18px 22px;margin-top:10px}
.small-title{font-size:16px;margin:0 0 10px}
.glossary dl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 22px;margin:0}
.glossary dl div{font-size:13px;line-height:1.6}
.glossary dt{font-weight:700;display:inline}
.glossary dt::after{content:'：'}
.glossary dd{display:inline;margin:0}

/* 光路五站 */
.flow{list-style:none;padding:0;margin:24px 0 10px;display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.flow li{position:relative;background:#e5eadb;padding:0 16px 16px;border-top:6px solid #b28f62}
.flow li.st-carrier{border-top-color:#8fae9f}
.flow li.st-data{border-top-color:#3f6f52}
.flow li:not(:last-child)::after{content:'→';position:absolute;right:-19px;top:42%;font-size:18px;color:#728365}
.flow .kind{display:block;font-size:12px;color:#65765c;margin-top:10px}
.flow h3{font-size:18px;margin:4px 0 6px}
.flow h3 b{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:#244638;color:#f8f7f2;font-size:13px;margin-right:6px}
.flow p{font-size:14px;margin:6px 0}
.flow .myth{font-size:13px;color:#65765c;border-top:1px solid #c6cfbb;padding-top:6px}
.legend-line{font-size:13px;color:#4b6246}
.sw{display:inline-block;width:22px;height:10px;vertical-align:middle;margin:0 5px 0 8px}
.sw-elec{background:#b28f62}.sw-carrier{background:#8fae9f}.sw-data{background:#3f6f52}
.sw-asic{background:#244638}.sw-engine{background:#a9bb93}.sw-dsp{background:#ae8650;width:10px}
.sw-fiber{height:0;border-top:3px dashed #568478}

/* 模組圖 */
.module{background:#e5eadb;padding:22px}
.module svg{width:100%;height:auto;display:block}
.module text{font:15px system-ui;fill:#244638}
.module .tiny{font-size:13px;fill:#4b6246}
.module-tall{display:none!important}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.card{padding:24px;background:#eeeee3}
.card h3{font-size:20px;margin:10px 0}
.card p{font-size:14px}

/* 架構矩陣 */
.defs{background:#eeeee3;padding:16px 20px;margin:16px 0 20px}
.defs p{margin:4px 0;font-size:15px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;border-bottom:1px solid #c6cfbb;padding:13px 10px;vertical-align:top}
th{background:#e5eadb;font-size:13px}
td small{display:block;font-size:12.5px;color:#65765c;margin-top:4px;line-height:1.6}
.arch{table-layout:fixed}
.arch th:nth-child(1){width:14%}.arch th:nth-child(2){width:128px}.arch th:nth-child(3),.arch th:nth-child(4){width:12%}.arch th:nth-child(5),.arch th:nth-child(6){width:15%}
.arch td:last-child{font-size:13px}
svg.mini{width:120px;height:auto;display:block}
.m-elec{stroke:#b28f62;stroke-width:4;fill:none}
.m-fiber{stroke:#568478;stroke-width:3;stroke-dasharray:6 4;fill:none}
.m-dsp{fill:#ae8650}
.optic-myths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.optic-myths details{background:#e5eadb;padding:16px 20px}
.optic-myths summary{font-size:17px;cursor:pointer;font-weight:600}
.optic-myths p{font-size:14px}

/* 價值鏈 */
.disclose{background:#eeeee3;padding:12px 16px;font-size:14px}
.chain{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px;counter-reset:c}
.chain li{position:relative;background:#e5eadb;padding:16px 18px;border:2px solid transparent}
.chain li.bottleneck{border-color:#ae8650}
.chain li:not(:last-child)::after{content:'→';position:absolute;right:-24px;top:16px;font-size:18px;color:#728365}
.chain li:nth-child(3n)::after{content:none}
.chain h3{font-size:17px;margin:0 0 6px}
.chain h3 b{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:#244638;color:#f8f7f2;font-size:13px;margin-right:6px}
.chain p{font-size:13.5px;margin:5px 0;line-height:1.7}
.chain .co{font-weight:600}
.chain .bn{color:#7a5528;font-size:13px}
.chain .ask{color:#65765c;font-size:13px}

/* AI 時間軸 */
.timeline{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:3px solid #b28f62}
.timeline li{padding:12px 14px 0 0;position:relative}
.timeline li::before{content:'';position:absolute;top:-9px;left:0;width:14px;height:14px;border-radius:50%;background:#244638}
.timeline .when{display:block;font-weight:700;font-size:15px;margin-top:6px}
.timeline p{font-size:13.5px;margin:4px 0}

.sources{font-size:12px;color:#65765c}
.sources a{display:block;margin:10px 0}

@media(max-width:1000px){.flow{grid-template-columns:repeat(3,1fr)}.flow li:nth-child(3n)::after{content:none}.glossary dl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
 h2{font-size:25px}
 .flow,.grid,.optic-myths,.chain,.timeline,.glossary dl{grid-template-columns:1fr}
 .flow{gap:26px}
 .flow li:not(:last-child)::after,.chain li:not(:last-child)::after,.chain li:nth-child(3n)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-25px}
 .module{padding:10px}
 .module-wide{display:none!important}.module-tall{display:block!important}
 table.stack thead{display:none}
 table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:auto!important}
 table.stack tr{border-bottom:1px solid #c6cfbb;padding:12px 0}
 table.stack td{border:0;padding:3px 0}
 table.stack td::before{content:attr(data-label);display:block;font-size:12px;color:#65765c}
 table.stack td:first-child::before{content:none}
 table.stack td:first-child b{font-size:17px}
 svg.mini{width:230px}
 .timeline{border-top:0;border-left:3px solid #b28f62;padding-left:16px}
 .timeline li{padding:0 0 12px}
 .timeline li::before{left:-25px;top:8px}
}