:root{--cream:#f8f4ea;--paper:#fffdf8;--ink:#3b4a5a;--text:#45484e;--muted:#7a7d83;--mustard:#d9a93a;--mustard-d:#a8771a;--sea:#8ec5d6;--mint:#bfdcc7;--sand:#ead9b8;--line:#e6d4a6}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans TC",sans-serif;font-weight:400;color:var(--text);background:var(--cream);line-height:1.8}
body::before{content:"";position:fixed;inset:0;background:var(--tile);background-size:520px;opacity:.55;pointer-events:none;z-index:-1}
h1,h2,h3{color:var(--ink);line-height:1.3;font-weight:700}
img{max-width:100%;height:auto;display:block}
.coord{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.12em;color:var(--mustard-d);margin:0 0 .4rem}
nav.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 1.2rem;background:rgba(248,244,234,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.top .brand{font-weight:900;color:var(--ink);text-decoration:none;letter-spacing:.1em}
nav.top div{display:flex;flex-wrap:wrap;gap:.1rem}
nav.top div a{color:var(--ink);text-decoration:none;font-size:.92rem;padding:.2rem .6rem;border-radius:99px}nav.top div a:hover{background:rgba(217,169,58,.18)}
.hero{max-width:1200px;margin:auto;padding:3.5rem 1.2rem 2rem;display:grid;grid-template-columns:.9fr 1.3fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(3rem,8vw,5.6rem);font-weight:900;margin:.2rem 0;letter-spacing:.06em}
.subtitle{font-size:1.35rem;color:var(--ink);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px dashed var(--mustard);display:inline-block}
.lead{color:var(--text);max-width:32rem}
.btn{display:inline-block;background:var(--mustard);color:#fff;font-weight:700;border:2px solid var(--mustard);border-radius:99px;padding:.5rem 1.3rem;text-decoration:none;cursor:pointer;font-size:1rem;font-family:inherit}
.btn:hover{background:var(--mustard-d);border-color:var(--mustard-d)}
.btn.ghost{background:transparent;color:var(--mustard-d)}.btn.ghost:hover{background:rgba(217,169,58,.12)}
.btn.sm{padding:.25rem .9rem;font-size:.9rem}
main{max-width:1200px;margin:auto;padding:0 1.2rem}
section{padding:3.4rem 0 1rem}
.sec-h{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.2rem .8rem;margin-bottom:1.4rem}
.sec-h .no{font-family:"IBM Plex Mono",monospace;color:var(--mustard-d);font-size:1rem;border:1.5px solid var(--mustard);border-radius:99px;padding:.05rem .6rem}
.sec-h .ic{width:56px;height:56px;object-fit:contain}
.sec-h h2{margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem)}
.sec-h .sub{grid-column:1/-1;margin:0;color:var(--muted);font-size:.95rem;padding-left:.2rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:1.2rem 1.4rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.4rem}
.two h3{margin:.2rem 0 .6rem}
ul.dots{list-style:none;padding:0;margin:0}ul.dots li{padding-left:1.1rem;position:relative;margin:.25rem 0}
ul.dots li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--mustard)}
ul.dots b{color:var(--ink);margin-right:.5rem}
.pebbles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:1rem}
.wide{margin:0 auto;cursor:zoom-in}
.reader{display:flex;align-items:center;gap:.6rem}
.reader img{flex:1;min-width:0;border-radius:18px;box-shadow:0 10px 30px rgba(59,74,90,.12)}
.nav{font-size:2rem;width:2.8rem;height:2.8rem;flex:none;border-radius:99px;border:1.5px solid var(--mustard);background:var(--paper);color:var(--mustard-d);cursor:pointer;line-height:1}
.reader-bar{display:flex;gap:.8rem;justify-content:center;align-items:center;margin:.9rem 0}
#pg{font-family:"IBM Plex Mono",monospace;color:var(--ink);min-width:6rem;text-align:center}
.thumbs{display:flex;gap:.45rem;overflow-x:auto;padding:.3rem 0}.thumbs img{width:104px;border-radius:10px;cursor:pointer;opacity:.6;border:2px solid transparent}.thumbs img.on{opacity:1;border-color:var(--mustard)}
.route{position:relative}
.stop{display:grid;grid-template-columns:1.15fr 1fr;gap:1.6rem;align-items:center}
.stop.r{grid-template-columns:1fr 1.15fr}.stop.r .stop-img{order:2}
.stop-img{margin:0}.stop-img img{cursor:zoom-in}
.stop-txt h3{margin:.1rem 0;font-size:1.45rem}.stop-txt .tag{margin:0 0 .6rem;color:var(--mustard-d)}
.steps{list-style:none;padding:0;margin:0}.steps li{padding:.35rem 0;border-bottom:1px dashed var(--line)}
.steps .t{display:inline-block;min-width:4.4rem;font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--mustard-d)}
.curve{display:block;width:100%;height:90px}.curve path{fill:none;stroke:var(--mustard);stroke-width:2.2;stroke-dasharray:2 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.anat{padding:1rem;margin:0 0 1.2rem}.anat img{margin:auto;cursor:zoom-in}
.sci-grid,.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.1rem}
.sci,.ws{margin:0;padding:.8rem;text-align:center}.sci img,.ws img{cursor:zoom-in;margin:auto}
figcaption{color:var(--ink);margin-top:.4rem;display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap;font-weight:500}
.ng{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;max-width:900px;margin:1rem auto}
.cell{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:.55rem;display:flex;flex-direction:column;gap:.3rem;min-height:190px}
.cell b{color:var(--ink)}.cell.center{align-items:center;justify-content:center;border:2px dashed var(--mustard);background:#fff8e6}
.gl{width:96px}
.cell textarea{flex:1;border:1px dashed #b9d6e0;border-radius:10px;font:inherit;font-size:.92rem;color:#2c6e8a;resize:vertical;min-height:58px;padding:.3rem;background:transparent}
.cell textarea.post{color:#c0503a;border-color:#ecc3b8}
.note{color:var(--muted);text-align:center;max-width:52rem;margin:0 auto}.center{text-align:center}.mt{margin-top:2rem}
.tbl{overflow-x:auto}table{border-collapse:collapse;width:100%;background:var(--paper);border-radius:14px;overflow:hidden;font-size:.95rem}
th{background:#f3e7c6;color:var(--ink);padding:.6rem}td{border:1px solid var(--line);padding:.55rem .7rem;vertical-align:top}td:first-child{font-weight:700;color:var(--mustard-d);white-space:nowrap}
.slide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}.slide-grid img{border-radius:12px;border:1px solid var(--line);cursor:zoom-in}
.dls{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem;margin-bottom:1rem}
.dl{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:.9rem 1.1rem;text-decoration:none;color:var(--ink);font-weight:500}
.dl::before{content:"↓";color:var(--mustard-d);margin-right:.5rem;font-weight:700}.dl small{color:var(--muted)}
.dl:hover{border-color:var(--mustard)}
#lb{position:fixed;inset:0;background:rgba(40,44,50,.82);display:grid;place-items:center;z-index:9;padding:1rem}#lb[hidden]{display:none}
#lb img{max-height:92vh;max-width:96vw;border-radius:12px;background:var(--paper)}#lb button{position:absolute;top:.8rem;right:1rem;font-size:2rem;background:none;border:0;color:#fff;cursor:pointer}
footer{text-align:center;padding:2.5rem 1rem 3rem;color:var(--muted);font-size:.9rem;border-top:1px dashed var(--line);margin-top:2rem}.flogo{width:220px;margin:0 auto .4rem}
@media(max-width:860px){.hero,.two,.stop,.stop.r{grid-template-columns:1fr}.stop.r .stop-img{order:0}.curve{height:50px}.cell{min-height:150px}.ng{gap:.35rem}.pebbles{grid-template-columns:repeat(2,1fr)}nav.top{flex-direction:column;align-items:flex-start}}
@media print{nav,.hero,section:not(#grid),footer,#grid .btn,#grid .note,#grid .sec-h{display:none!important}body::before{display:none}#grid{padding:0}.cell{min-height:230px}}