:root{color-scheme:dark;--bg:#102326;--panel:#172d2f;--line:#48544a;--gold:#d6b976;--ink:#e9e4cf;--dim:#adb6a9;--serif:"Noto Serif TC","Songti TC","PMingLiU",serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:"Microsoft JhengHei",system-ui,sans-serif;font-size:15px;line-height:1.65}button,input,a{touch-action:manipulation}a{color:inherit}a:hover{color:var(--gold)}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #e8c479;outline-offset:3px}.wrap{max-width:1470px;margin:0 auto;padding:0 clamp(20px,4.2vw,76px)}header{border-bottom:1px solid var(--line)}.mast{min-height:61px;display:flex;justify-content:space-between;align-items:center}.home{display:flex;align-items:center;gap:.8em;text-decoration:none;font-size:13px;letter-spacing:.09em}.home span{font-size:22px;color:var(--gold)}.folio{font:13px Georgia,serif;letter-spacing:.23em;color:var(--gold)}.folio i,.overline i{font-style:normal;margin:0 .6em}.lead{display:flex;justify-content:space-between;align-items:flex-end;padding:clamp(24px,3vw,54px) 0 21px}.overline{font:11px/1.5 Georgia,var(--serif);letter-spacing:.18em;color:var(--gold)}h1,h2,p{margin:0}h1,h2{font-family:var(--serif);font-weight:600}h1{font-size:clamp(32px,3.9vw,66px);line-height:1.22;letter-spacing:.08em;margin:8px 0}.lead p{color:#bfcbc0;font-size:14px}.range-date{font:13px Georgia,serif;letter-spacing:.15em;color:var(--gold);margin-bottom:5px}.range-date b{font-weight:400;margin:0 .35em}.reader{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(265px,1fr);border:1px solid var(--line);background:var(--panel)}.sheet{min-width:0;border-right:1px solid var(--line)}.map-frame{position:relative;isolation:isolate;background:#1b3b3f;overflow:hidden;height:clamp(340px,33vw,575px)}#map{position:absolute;width:100%;height:100%;inset:0}.map-tag,.map-caption,.compass{position:absolute;color:#eddec1;text-shadow:0 1px 3px #0d1d1e}.map-tag{top:16px;left:17px;display:flex;align-items:center;gap:.6em;font:12px var(--serif);letter-spacing:.15em;background:#162b2de6;padding:7px 10px;border:1px solid #74816c}.dot{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}.compass{right:18px;top:16px;display:grid;justify-items:center;color:#e7d6a4;font:11px/1 Georgia,serif}.compass svg{width:28px;height:36px}.map-caption{bottom:16px;left:18px;box-shadow:0 0 4px #0003;background:#192d2ee6;padding:5px 8px;font:10px/1.4 Georgia,serif;letter-spacing:.18em}.transport{display:flex;align-items:center;gap:16px;background:#13292b;border-top:1px solid var(--line);height:54px;padding:0 15px}.transport button{color:#152728;background:var(--gold);border:0;cursor:pointer;width:34px;height:30px;font-size:13px;border-radius:2px}.transport input{min-width:0;flex:1;accent-color:#c4ab73;cursor:pointer}.transport output{font:11px/1.45 ui-monospace,monospace;color:#d0ccb5}.story{padding:clamp(20px,2.5vw,42px);display:flex;flex-direction:column;align-items:flex-start}.era{font:clamp(34px,3.8vw,60px)/1.1 Georgia,var(--serif);letter-spacing:-.045em;color:var(--gold);margin:clamp(14px,2vw,30px) 0 7px}.story h2{font-size:clamp(22px,2vw,35px);line-height:1.35;margin-bottom:14px}.story p{font-size:15px;line-height:1.9}.note{margin-top:auto;padding-top:18px}.note span{display:block;color:var(--gold);font:12px/1.8 var(--serif);letter-spacing:.15em;margin-bottom:4px}.note p{font-size:12px;line-height:1.7;color:#b6c0b1}.chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line);margin-top:16px}.chapter{appearance:none;text-align:left;color:var(--ink);cursor:pointer;border:0;border-top:2px solid transparent;background:#152b2d;padding:12px clamp(9px,1.5vw,24px);display:flex;align-items:center;gap:13px}.chapter:hover,.chapter[aria-current="step"]{background:#233b3a}.chapter[aria-current="step"]{border-top-color:var(--gold)}.chapter small,.chapter strong{display:block}.chapter small{font:11px/1.4 Georgia,var(--serif);letter-spacing:.08em;color:#c6ba97}.chapter strong{font:16px/1.65 var(--serif)}.num{font:italic 23px Georgia,serif;color:var(--gold)}footer{margin:19px 0 28px;display:flex;gap:10px 30px;justify-content:space-between;flex-wrap:wrap;font-size:11px;color:#a8b3a9}.sr{position:absolute;height:1px;width:1px;overflow:hidden;clip-path:inset(50%)}.place{font:600 15px var(--serif);fill:#fff0c5;paint-order:stroke;stroke:#243732;stroke-width:3.2;stroke-linejoin:round}.water-name{fill:#d6dfc9;opacity:.83;font:italic 15px Georgia,var(--serif);letter-spacing:.13em;paint-order:stroke;stroke:#345558;stroke-width:2}.water-name.atlantic{font-size:26px;letter-spacing:.35em}.map-site{fill:#e4c881;stroke:#1d3538;stroke-width:2}.halo{fill:none;stroke:#fbda90;stroke-width:1.3}.land-name{font:600 14px var(--serif);fill:#283b34;stroke:#b6b08b;stroke-width:2.3;paint-order:stroke;letter-spacing:.27em}
@media(max-width:860px){.reader{grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr)}.range-date{display:none}.chapter{gap:8px}.chapter strong{font-size:14px}}@media(max-width:660px){.wrap{padding-inline:16px}.reader{display:block}.sheet{border-right:0;border-bottom:1px solid var(--line)}.map-frame{height:clamp(255px,65vw,360px)}.story{padding:18px}.story .era{font-size:32px;margin:10px 0 2px}.story h2{font-size:22px;margin:0 0 9px}.story p{font-size:14px}.note{padding-top:11px}.note p{font-size:12px}.chapters{grid-template-columns:1fr 1fr;gap:1px}.chapter{padding:11px 16px}.folio{font-size:10px}.place{font-size:12px}.water-name,.land-name{font-size:10px}.water-name.atlantic{font-size:17px}.map-tag,.map-caption{font-size:9px}.map-tag{top:10px;left:10px}.map-caption{bottom:10px;left:10px}.compass{right:10px;top:10px}.compass svg{height:26px}.transport{gap:10px;padding-inline:10px}.lead p{max-width:25em}.note span{margin:0}footer{margin-bottom:18px}}
@media(max-width:660px){.transport button{min-width:42px;min-height:40px}}