:root{--bg:#0b1526;--panel:#12203a;--panel2:#0f1b31;--line:#24365a;--text:#e6e9ef;--muted:#9aa6b8;--gold:#c8a24a;--red:#c0504d}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--gold)}header{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.brand{color:var(--gold);font-weight:700;letter-spacing:.06em;text-decoration:none}.brand-sub{display:block;font-size:13px;color:var(--muted)}
nav a{margin-left:14px;font-size:14px;text-decoration:none}
.layout{display:grid;grid-template-columns:290px 1fr;gap:0;min-height:100vh}
aside{background:var(--panel);border-right:1px solid var(--line);padding:14px;position:sticky;top:0;height:100vh;overflow:auto}
.sh{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);margin:16px 0 8px}
.legend button,.anim button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:4px 0;padding:6px 10px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;font-size:14px;cursor:pointer;text-align:left}
.legend button[aria-pressed=false]{opacity:.45}.legend .sw{width:14px;height:14px;border-radius:50%;flex:none}
.legend .ct{margin-left:auto;color:var(--muted);font-size:13px}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input[type=range]{width:100%;accent-color:var(--gold)}#q,select{width:100%;min-height:44px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:14px}
.seg{display:flex;gap:6px}.seg button{justify-content:center}.seg button.on,#play[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.muted{color:var(--muted);font-size:13px}main{padding:16px 22px;min-width:0}
h1{margin:4px 0 8px;font-size:26px}h2{font-size:18px;margin:26px 0 8px}.intro{margin:0 0 12px}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}.stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 14px;min-width:140px}
.stat b{display:block;font-size:22px;color:var(--gold)}.stat span{font-size:13px;color:var(--muted)}
.banner{background:var(--panel2);border-left:3px solid var(--gold);padding:6px 12px;font-size:14px;margin:8px 0}
#map{height:62vh;min-height:420px;border:1px solid var(--line);border-radius:8px;background:#0d1d36}
.leaflet-container{background:#0d1d36;font:13px system-ui}.leaflet-tooltip{background:var(--panel);color:var(--text);border:1px solid var(--line);font-size:13px}
.leaflet-tooltip:before{display:none}.leaflet-control-zoom a{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important}
.leaflet-control-attribution{background:rgba(15,27,49,.85)!important;color:var(--muted)!important;font-size:12px}.leaflet-control-attribution a{color:var(--gold)}
.note{font-size:13px;color:var(--muted);margin:6px 0}
.bars .row{display:grid;grid-template-columns:200px 1fr 50px;align-items:center;gap:8px;margin:4px 0;font-size:14px}
.bars .bar{height:18px;background:#4fa3e0;border-radius:3px}
table{border-collapse:collapse;width:100%;font-size:14px}th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--gold);font-weight:600;cursor:pointer}
tbody tr{cursor:pointer}tbody tr:hover,tbody tr:focus{background:var(--panel)}
.sources{margin:30px 0;font-size:13px;color:var(--muted)}.sources a{color:var(--muted)}
.panel{position:fixed;top:0;right:0;width:min(480px,100%);height:100vh;overflow:auto;background:var(--panel);border-left:1px solid var(--line);padding:18px 20px;z-index:2000;box-shadow:-8px 0 24px rgba(0,0,0,.5)}
#pclose{position:absolute;top:10px;right:12px;min-width:44px;min-height:44px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;font-size:18px;cursor:pointer}
.panel h3{color:var(--gold);margin:18px 0 6px;font-size:15px}.panel ul{padding-left:18px;margin:4px 0}.panel li{margin:4px 0}
.chip{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:2px 10px;margin:2px;font-size:13px}
.cmp{display:grid;grid-template-columns:1fr 80px 80px;gap:4px;font-size:14px}.cmp b{color:var(--gold);font-weight:600}
.flag{background:var(--panel2);border-left:3px solid var(--gold);padding:8px 10px;margin:6px 0}
.lang{font-size:12px;color:var(--bg);background:var(--gold);border-radius:4px;padding:0 5px;margin-right:6px;font-weight:700}
.tr{display:block;color:var(--muted);font-size:13px}
@media(max-width:860px){.layout{grid-template-columns:1fr}aside{position:static;height:auto}.bars .row{grid-template-columns:120px 1fr 40px}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px}.card summary{cursor:pointer;font-weight:600;color:var(--gold);min-height:32px}
.card p{margin:8px 0}.hl{min-height:44px;background:var(--panel2);color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:14px;margin:4px 4px 0 0}.hl[aria-pressed=true]{background:var(--gold);color:var(--bg)}
.hl.wide{width:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text)}.ln{display:inline-block;width:18px;height:3px;border-radius:2px}
#ftoggle{display:none}
.clu{border-radius:50%;background:rgba(15,27,49,.9);border:3px solid;color:#e6e9ef;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
@media(max-width:700px){
 #ftoggle{display:block;position:sticky;top:0;z-index:1500;width:100%;min-height:48px;background:var(--panel);color:var(--gold);border:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
 aside{display:none}aside.open{display:block}
 header nav{display:flex;flex-wrap:wrap;gap:6px}nav a{margin-left:0}
 main{padding:12px}h1{font-size:21px}.intro{font-size:14px}
 .stats{flex-wrap:nowrap;overflow-x:auto;gap:6px}.stat{min-width:110px;padding:5px 10px}.stat b{font-size:17px}.stat span{font-size:12px}
 #map{height:55vh;min-height:340px}
 .cards{grid-template-columns:1fr}.card:not([open]){padding:6px 12px}
 .panel{top:auto;bottom:0;width:100%;height:78vh;border-left:0;border-top:2px solid var(--gold);border-radius:14px 14px 0 0}
}
.grp>summary{cursor:pointer;list-style:none}.grp>summary h2{display:inline-block}.grp>summary::before{content:"▾ ";color:var(--gold)}.grp:not([open])>summary::before{content:"▸ "}
.sw.sq{border-radius:2px;width:12px;height:12px;display:inline-block}.net .hl{width:100%;text-align:left;color:var(--text)}.chip[role=button]{cursor:pointer}
.hl.wide[aria-pressed=true]{background:var(--panel2);border:2px solid var(--gold);color:var(--text)}
@media(max-width:700px){.stat{min-width:auto}.stat b{display:inline;font-size:16px;margin-right:4px}.stat span{display:inline;white-space:nowrap}.banner{font-size:13px}}
.sh2{font-size:15px;color:var(--gold);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em}
.modes{display:flex;gap:6px;margin:6px 0 8px}.modes button{flex:0 0 auto;padding:8px 16px}.modes button[aria-pressed=true]{border:2px solid var(--gold);color:var(--gold)}
body.story .rawonly,body.story .exonly,body.explore .stonly{display:none!important}
body.explore:not(.raw) .rawonly{display:none!important}
body.story #side{display:none}body.story .layout{grid-template-columns:1fr}body.story #ftoggle{display:none}
.chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.chap{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;font-size:14px}
.chap.on{border:2px solid var(--gold)}.chap h3{margin:0 0 6px;font-size:15px;color:var(--gold)}.chap p{margin:0 0 6px;line-height:1.45}
.chap:not(.on) p,.chap:not(.on) .key,.chap:not(.on) .lnk,.chap:not(.on) .chip{display:none}
.snav{display:flex;align-items:center;gap:10px;margin-top:8px}.snav button{padding:4px 14px;font-size:18px}
.key span{margin-right:12px;font-size:13px}.key i{display:inline-block;width:14px;height:4px;margin-right:5px;vertical-align:middle}
.lnk{background:none;border:0;color:var(--gold);text-decoration:underline;cursor:pointer;padding:0;font:inherit}
@media(max-width:700px){.chapters{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px}.chap{flex:0 0 88%;scroll-snap-align:start}
 .chap:not(.on) p,.chap:not(.on) .key{display:block}}
body.story #map{height:min(62vh,620px)}
@media(min-width:701px){body.story .chapters{grid-template-columns:repeat(5,1fr)}}
.chapters{align-items:start}.modes button,.snav button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;cursor:pointer}
@media(max-width:700px){body.story #map{height:52vh}}
@media(min-width:701px){
 body.story .sw2{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:16px;align-items:start}
 body.story #story{order:0}body.story .chapters{display:flex;flex-direction:column;gap:14px;padding-bottom:45vh}
 body.story .chap{min-height:38vh;opacity:.55;transition:opacity .2s}body.story .chap.on{opacity:1}
 body.story .chap:not(.on) p,body.story .chap:not(.on) .key{display:block}
 body.story .snav{position:sticky;top:0;z-index:2;background:var(--bg);padding:6px 0}
 body.story #map{position:sticky!important;top:10px;height:calc(100vh - 20px);margin:0}
}

.clsb{margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}.clsb .sw,#clsf .sw{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
#clsf button[aria-pressed=false]{opacity:.55}#clsf .muted{font-size:13px}
.cbars .row,.tgrp .row{display:grid;grid-template-columns:150px 1fr 70px;gap:8px;align-items:center;font-size:13px;margin:4px 0}.cbars i,.tgrp i{display:block;height:14px;border-radius:3px;min-width:2px}.cbars b,.tgrp b{font-size:13px;color:var(--text)}
@media(max-width:700px){.cbars .row{grid-template-columns:120px 1fr 40px}}
.b3l{width:max-content;transform:translate(-50%,-50%);background:#0b1526f0;border:1.5px solid;border-radius:6px;padding:2px 7px;white-space:nowrap;color:var(--text);font-size:13px;line-height:1.25}.b3l b{font-size:15px;margin-right:4px}
.cn3{width:max-content;transform:translate(-50%,-50%);color:#fff;font-size:13px;font-weight:300;letter-spacing:.06em;text-shadow:0 0 3px #0b1526,0 0 3px #0b1526;white-space:nowrap}
.pl{width:max-content;transform:translate(-50%,-50%);background:#0b1526e6;border:1px solid #f5f7fa;border-radius:4px;padding:1px 5px;font-size:13px;color:#f5f7fa;white-space:nowrap}
/* phone: fixed-height chapter strip (long chapters scroll inside) so the map sits right under the card and nothing jumps on swipe */
@media(max-width:700px){body.story .chapters{height:min(36svh,320px);align-items:stretch}body.story .chap{overflow-y:auto;overscroll-behavior:contain;max-height:100%;box-sizing:border-box}body.story #story{margin-bottom:8px}body.story #map{height:calc(100svh - min(36svh,320px) - 120px);min-height:340px}}

.arw{position:absolute;left:0;top:0;pointer-events:none;transition:opacity .15s}

@media(max-width:600px){.b3l{padding:1px 5px;text-align:center}.b3l b,.b3l span{display:block;margin:0}.b3l b{font-size:14px}}
.arwnote{display:none;position:absolute;left:56px;top:10px;right:10px;z-index:800;pointer-events:none;font-size:13px;line-height:1.3;color:var(--text);background:#0b1526e6;border-left:3px solid #e8423f;padding:4px 8px;border-radius:4px;max-width:420px}
/* Lead finding: Pacific shuttle */
.lead{margin:6px 0 18px}.leadh{font-size:23px;line-height:1.3;margin:6px 0 8px;color:var(--text)}.leadh2{font-size:19px;margin:22px 0 6px}
.leadp{margin:0 0 10px;font-size:15px}
.lchips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px;align-items:center}.lchip{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:8px 12px;min-width:150px;flex:1 1 150px;max-width:300px}
.lchip b{display:block;font-size:22px;color:var(--gold)}.lchip span{font-size:13px;color:var(--muted)}.arr{color:var(--gold);font-size:20px}
.shgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.shfig{margin:0;position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px}
.figt{font-size:14px;font-weight:600;color:var(--gold);margin:0 0 8px;text-transform:none}
.shmap{position:relative;width:100%}.shmap svg{display:block;width:100%;height:auto;border-radius:6px}
.shmap .sport{cursor:pointer}.shmap .sport:hover,.shmap .sport:focus{stroke:#e6e9ef;outline:none}
.callout{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:21%;background:#0b1526f2;border:1px solid var(--gold);border-radius:6px;padding:4px 8px;font-size:13px;line-height:1.3;color:var(--text)}.callout b{color:var(--gold);font-size:15px}
.shtip{position:absolute;z-index:5;max-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:13px;pointer-events:none}
.shside{display:flex;flex-direction:column;gap:12px}.shbox{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.srow{display:grid;grid-template-columns:110px 1fr 70px;gap:8px;align-items:center;margin:8px 0;font-size:14px}.srow b{text-align:right}
.sl{display:flex;align-items:center;gap:6px}.st,.ct{display:flex;height:18px;background:var(--bg);border-radius:4px;overflow:hidden}.st i,.ct i{display:block;height:100%}
.flg{flex:none;border-radius:2px;vertical-align:-2px;margin-right:5px}.nw{white-space:nowrap}
.cbar{display:grid;grid-template-columns:80px 1fr 48px;gap:8px;align-items:center;margin:8px 0;font-size:14px}.cbar b{text-align:right;color:var(--gold)}
.ckey{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted)}.ckey i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.shmore{margin:10px 0 4px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 12px}.shmore summary{cursor:pointer;min-height:32px;line-height:32px;color:var(--gold)}
.rusgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;align-items:start}.rchips .lchip{flex:1 1 90px;min-width:90px}
.rbars{display:flex;gap:4px;align-items:flex-end;margin-top:8px}.mcol{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.mb{display:flex;flex-direction:column-reverse;width:100%;height:120px;border-radius:3px;overflow:hidden}.mb i{display:block;width:100%}
.mv,.ml{font-size:13px;color:var(--muted);white-space:nowrap}.mv{color:var(--text)}
.skey{display:flex;flex-direction:column;gap:4px;font-size:13px}.skey span{display:flex;align-items:center;gap:8px}.skey .kl{width:20px;height:3px;background:#c8a24a;flex:none}.skey .kd{width:12px;height:12px;border-radius:50%;flex:none}
@media(max-width:900px){.shgrid,.rusgrid{grid-template-columns:1fr}}
@media(max-width:700px){.leadh{font-size:20px}.callout{position:static;transform:none;width:auto;max-width:none;margin:6px 0 0}.shmap line.lead{display:none}
 .srow{grid-template-columns:96px 1fr 62px}.lchip{min-width:0;flex:1 1 100px}.lchip b{font-size:18px}.mv{font-size:13px;writing-mode:horizontal-tb}.rbars{gap:2px}
 .rbars .mcol:nth-child(even) .mv,.rbars .mcol:nth-child(even) .ml{visibility:hidden}}
.rbars{overflow:hidden}.mcol{overflow:hidden}.lead .lchips,.lead .shbox,.lead .shfig{min-width:0;max-width:100%}
@media(max-width:700px){.rchips .lchip{min-width:0;flex:1 1 0;padding:6px 8px}.rchips .lchip b{font-size:17px}.arr{font-size:16px}.mv,.ml{font-size:13px;letter-spacing:-.02em}.srow{grid-template-columns:minmax(0,96px) minmax(0,1fr) auto}.cbar{grid-template-columns:70px minmax(0,1fr) auto}}

.dg{margin:8px 0}.dgh{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}.dgh b{font-size:22px;color:var(--gold)}.dgh span{font-size:13px;color:var(--muted)}.dg svg{display:block;width:100%;max-width:440px;height:auto}
/* open-state cue for the 'in brief' cards: the heading brightens and the card outline turns gold when opened */
.card[open]>summary{color:#f2d16b}.card[open]{border-color:var(--gold)}
/* chips that open a ship record */
.chip[role=button]:hover,.chip[role=button]:focus-visible{border-color:var(--gold);outline:none}

/* chapter 3: identity timeline */
.idl{margin:8px 0 4px}.tl{position:relative;margin:14px 2px 6px;font-size:13px}
.tln,.tlb,.tlv,.tla{position:relative;height:24px}.tln{height:26px}.tla{height:20px}.tlb{height:22px;border-radius:4px}
.tln span{position:absolute;top:0;height:26px;border-top:2px solid var(--text);box-sizing:border-box;padding-top:2px;white-space:nowrap;display:flex;line-height:1.2}.tln span:last-child{justify-content:flex-end}
.tlb i{position:absolute;top:0;height:22px;min-width:3px;display:block}.tlb u{position:absolute;top:-4px;height:28px;width:14px;margin-left:-7px;cursor:pointer;text-decoration:none}.tlb u:after{content:"";position:absolute;left:6px;top:0;height:100%;width:2px;background:var(--text)}
.tlv b{position:absolute;top:5px;width:14px;height:14px;margin-left:-7px;border-radius:50%;box-sizing:border-box;border:2px solid var(--gold);cursor:pointer}.tlv b.vc{background:var(--gold)}.tlv b.vo{background:transparent}
.tlv em{position:absolute;top:0;height:24px;border-left:2px dashed var(--text);margin-left:-1px}
.tla span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}.tla span:first-child{transform:none}
.tltip{position:absolute;top:-4px;z-index:5;max-width:100%;width:max-content;background:#0b1526f2;border:1px solid var(--gold);border-radius:6px;padding:4px 8px;line-height:1.3;pointer-events:none}.tltip[hidden]{display:none}
.tlk{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;margin-top:8px}.tlk i{display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px;border-radius:3px}.tlk i.mk{border-radius:50%;box-sizing:border-box;border:2px solid var(--gold)}.tlk i.mk.vc{background:var(--gold)}.tlk i.tk{width:2px;height:14px;border-radius:0;background:var(--text);margin:0 9px 0 6px}
.tlk i.ds{width:0;height:14px;border-radius:0;border-left:2px dashed var(--text);margin:0 9px 0 6px}
@media(max-width:700px){body.story .chapters:has(.chap[data-ch="identity"].on){height:520px}}

.wreg{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.wreg button{min-height:36px;padding:4px 10px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;font:inherit;font-size:13px;cursor:pointer}.wreg button span{color:var(--gold);font-weight:700;margin-left:4px}.wreg button[aria-pressed=true]{background:var(--gold);color:var(--bg);border-color:var(--gold)}.wreg button[aria-pressed=true] span{color:var(--bg)}
/* transponder off: each red dot is fully on for 1.2 s, then fully off for 0.8 s (2 s cycle); the stagger is slight so they still read as one fleet going dark */
@keyframes gapblink{0%,59.9%{opacity:1}60%,99.9%{opacity:0}100%{opacity:1}}
.gapblink path.gapdot{animation:gapblink 2s step-end infinite}
.gapblink path.gapdot.g1{animation-delay:-.1s}.gapblink path.gapdot.g2{animation-delay:-.2s}.gapblink path.gapdot.g3{animation-delay:-.3s}.gapblink path.gapdot.g4{animation-delay:-.4s}.gapblink path.gapdot.g5{animation-delay:-.5s}
@media(prefers-reduced-motion:reduce){.gapblink path.gapdot{animation:none;opacity:1}}
.ctog{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.ctog button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 10px;background:var(--panel2);color:var(--text);border:2px solid var(--c);border-radius:6px;font:inherit;font-size:13px;cursor:pointer}
.ctog button i{width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:2px solid var(--c);background:var(--c);flex:none;position:relative}
.ctog button[aria-pressed=false]{opacity:.55;border-style:dashed;text-decoration:line-through}.ctog button[aria-pressed=false] i{background:transparent}
.ctog button[aria-pressed=true] i::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
#ctogbar{display:none}
@media(max-width:700px){body.story #ctogbar:not([hidden]){display:block;margin:0 0 8px}#ctogbar .ctog{margin:0}}

.sources{margin:18px auto 24px;max-width:1100px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.sources summary{cursor:pointer;font-weight:600;color:var(--gold);min-height:32px;line-height:32px}.sources[open]{border-color:var(--gold)}.sources ol{margin:6px 0 4px;padding-left:26px;font-size:14px;color:var(--text)}.sources li{margin:4px 0}.sources a{color:var(--gold)}a.sref{color:var(--gold);text-decoration:none;font-weight:600}

/* place-name labels: plain light text, no box; thin sea-colour halo only */
.plc{position:absolute;left:0;top:0;width:max-content;white-space:nowrap;pointer-events:none;font-size:13px;line-height:16px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.62);text-shadow:0 0 2px #0d1d36,0 0 3px #0d1d36}
.plc.city{color:rgba(255,255,255,.65)}
.plsv .plead,.plead{stroke:rgba(255,255,255,.5);stroke-width:1;fill:none}.pdot{fill:rgba(255,255,255,.65)}
.shmap .plc{z-index:3}
.shmap .plsv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* chapter 4 hub-and-spoke graphic stands in for the map */
#hub{display:none;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#0d1d36}
body.hubon #map{display:none}body.hubon #hub{display:block}
#hub svg{display:block}#hub .hn{cursor:pointer}#hub .hn:focus{outline:none}#hub .hn:hover .hd,#hub .hn:focus .hd{stroke:#f5f7fa;stroke-width:2.5}
#hub .hl2{paint-order:stroke;stroke:#0d1d36;stroke-width:3px;stroke-linejoin:round}
.hubtip{position:absolute;z-index:3;max-width:calc(100% - 12px);background:#0b1526f2;border:1px solid var(--gold);border-radius:6px;padding:4px 8px;font-size:13px;line-height:1.3;color:var(--text);pointer-events:none}.hubtip[hidden]{display:none}
.hubnote{position:absolute;left:10px;right:10px;bottom:6px;margin:0;font-size:13px;line-height:1.3;color:var(--muted)}
#hub{height:62vh;min-height:420px}
@media(max-width:700px){#hub{height:55vh;min-height:340px}body.story #hub{height:52vh}body.story #hub{height:calc(100svh - min(36svh,320px) - 120px);min-height:340px}}
@media(min-width:701px){body.story #hub{position:sticky;top:10px;height:calc(100vh - 20px);margin:0}}