@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;src:url(vendor/fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-style:normal;font-display:swap;src:url(vendor/fonts/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;src:url(vendor/fonts/Barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:500;font-style:normal;font-display:swap;src:url(vendor/fonts/BarlowCondensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-style:normal;font-display:swap;src:url(vendor/fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-style:normal;font-display:swap;src:url(vendor/fonts/BarlowCondensed-700.woff2) format('woff2')}
@font-face{font-family:'Special Elite';font-weight:400;font-style:normal;font-display:swap;src:url(vendor/fonts/SpecialElite-400.woff2) format('woff2')}
/* ---------- theme: plotting room + war-diary card (2026-11-10) ---------- */
:root{--bg:#040b10;--panel:#0a171d;--panel2:#10232b;--line:#1f3640;--ink:#e8e2d0;--dim:#8b9b9c;--acc:#c9a04a;--acc2:#7fb9c8;--red:#d4513f;
 --f:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;--disp:"Barlow Condensed","Barlow",system-ui,sans-serif;--type:"Special Elite",ui-monospace,Menlo,monospace}
body{font:14.5px/1.45 var(--f)}
#left{border-right:1px solid #2c4650;background:
 linear-gradient(180deg,#0d1f27 0,#0a171d 180px),var(--panel);box-shadow:inset -1px 0 0 #00000080}
header{padding:16px 16px 12px;border-bottom:1px solid var(--line);position:relative;display:grid;grid-template-columns:44px 1fr;gap:2px 12px;align-items:center}
header .mark{grid-row:1/3;width:44px;height:44px;color:var(--acc)}
header::after{content:"";position:absolute;left:16px;bottom:-1px;width:56px;height:2px;background:var(--red)}
h1{font:700 24px/1 var(--disp);letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.sub{font-size:12px;line-height:1.35;margin:0;grid-column:2}
.tabs{padding:0 8px;background:#08141a}
.tab{font:600 13.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;padding:10px 2px 8px}
.tab.on{color:var(--acc);border-color:var(--acc)}
input[type=search],select{border-radius:2px;background:#07131a;border-color:#27424d}
input[type=search]:focus,select:focus{outline:1px solid var(--acc);outline-offset:0}
.facet summary,h3,.sec h4{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.16em}
.chip{border-radius:2px;font-size:12px;padding:2px 8px}
.chip.on{background:var(--acc);border-color:var(--acc)}
button{border-radius:2px;font:600 12.5px var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:5px 11px}
.st{text-transform:none;letter-spacing:0}
li b{font-weight:600;letter-spacing:.01em}
li .d{font:12px var(--type);color:#a9b3ad}
#list li,#blist li,#clist li{border-radius:0;border-bottom:1px solid #1a2f38;border-left:2px solid transparent}
#list li.sel,#blist li.sel,#clist li.sel{background:#12303a;border-left-color:var(--acc)}
.dot{border-radius:1px;transform:rotate(45deg);width:8px;height:8px}
.src{font:600 10.5px var(--disp);letter-spacing:.1em;text-transform:uppercase;border-radius:2px}
/* stage */
#stage{background:var(--bg)}
#stage::before{content:"";position:absolute;inset:0 0 auto 0;bottom:0;pointer-events:none;z-index:1;
 background:radial-gradient(ellipse at 50% 45%,transparent 55%,#02070bcc 100%)}
#hud,#tip,#time,#loading{z-index:3}
#hud{top:14px;left:18px}
#hud-date{font:400 30px/1.1 var(--type);letter-spacing:.02em;color:#f1ead6;text-shadow:0 2px 10px #000}
#hud-sub{font:500 13px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#b9c3bd}
#rose{position:absolute;right:18px;top:14px;width:92px;height:92px;color:#cbbf9a;opacity:.5;pointer-events:none;z-index:2}
#tip{border-radius:2px;background:#f0e8d2;color:#1d2428;border:1px solid #1d2428;font-size:12.5px;box-shadow:3px 3px 0 #0008}
#tip span{color:#5d5a4c}
#time{background:#08141a;border-top:1px solid #2c4650;position:relative}
.tctl{font:500 13px var(--disp);letter-spacing:.08em;text-transform:uppercase}
#trange{font:13px var(--type);text-transform:none;letter-spacing:0;color:#cfc8b2}
#play.on{background:var(--red);border-color:var(--red);color:#fff}
#tl .bar{fill:#3f6a78}#tl .bar.r{fill:#8a7440}#tl .axis text{font-family:var(--disp);font-size:11.5px;letter-spacing:.08em}
#tl .selection{fill:var(--acc);fill-opacity:.14;stroke:var(--acc)}
/* the record card */
#right{--panel:#ebe2ca;--panel2:#dfd4b6;--line:#b5a781;--ink:#1c2327;--dim:#5f5b4b;--acc:#8a2a1c;--acc2:#1d5870;
 width:420px;color:var(--ink);border-left:1px solid #000;box-shadow:-10px 0 30px #0009;
 background:repeating-linear-gradient(0deg,#0000 0 27px,#9c8e6a14 27px 28px),linear-gradient(135deg,#efe7d1,#e4d9bc)}
#right::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,#8a2a1c 0 14px,#0000 14px 22px);opacity:.75;z-index:1}
#detail{padding:18px 18px 28px 24px}
#detail h2{font:700 27px/1.05 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin:0 34px 4px 0;padding-bottom:6px;border-bottom:2px solid var(--ink)}
#detail .k{font:13px var(--type);color:#4b4738;margin:6px 0 10px}
#close{background:none;border:1px solid var(--ink);color:var(--ink);top:12px;right:12px;font:400 18px/1 var(--f)}
#right button{background:#e0d5b8;border-color:#8f8262;color:var(--ink)}
#right button:hover{border-color:var(--ink)}
.badge{font:600 11px var(--disp);letter-spacing:.12em;text-transform:uppercase;border-radius:1px;border-color:#7d7257;color:#4b4738;padding:1px 6px}
.badge.w{border:1.5px solid #8a2a1c;color:#8a2a1c;transform:rotate(-1.5deg)}
dl{grid-template-columns:112px 1fr;gap:5px 12px;font-size:13.5px}
dt{font:600 11.5px/1.6 var(--disp);letter-spacing:.13em;text-transform:uppercase}
dd{border-bottom:1px dotted #a89a7566;padding-bottom:3px}
.sec{border-top:1px solid #1c232766;margin-top:16px;padding-top:10px}
.sec h4{color:#8a2a1c}
.sec p{margin:0 0 6px}
.link{color:var(--acc2);text-decoration-color:#1d587066}
.photo{margin:10px 0 8px;background:#f8f3e4;padding:7px 7px 6px;box-shadow:0 2px 0 #b5a781,0 6px 14px #0000002e;transform:rotate(-.4deg)}
.photo img{border-radius:0;border:0;filter:grayscale(1) sepia(.22) contrast(1.05)}
.photo figcaption{font:11.5px/1.35 var(--type);color:#4b4738}
.photo .cr{font-family:var(--f);font-size:10.5px}
.viewer{border-radius:2px;border:1px solid #1c2327;background:radial-gradient(#17303b,#07141b);box-shadow:inset 0 0 30px #000a}
.vtabs button.on{border-color:#8a2a1c;color:#8a2a1c;background:#f3ecd8}
.plist li,.rlist li{border-radius:0;border-bottom:1px solid #b5a78188}
.plist li.sel{background:#d6c9a4}
.steps{gap:2px}
.st{border-radius:0;background:#f3ecd8 !important;font:11px var(--type)}
.st.on{background:#1c2327 !important;color:#f1ead6 !important;border-color:#1c2327}
.st.dec{outline:1.5px solid #8a2a1c}
.stepbox{background:#f5efdc;border:1px solid #8f8262;border-radius:0;box-shadow:2px 2px 0 #b5a78188}
.stepbox .sh b{font:15px var(--type)}
.ktb{font:12.5px/1.55 var(--type);background:#f5efdc;border:1px solid #b5a781;border-radius:0;color:#23292c}
#right .src{border-color:#8f8262;color:#5f5b4b}
#right a{color:var(--acc2)}
#loading{font:600 14px var(--disp);letter-spacing:.2em;text-transform:uppercase}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#2c4650;border:2px solid #0a171d}#right ::-webkit-scrollbar-thumb{background:#9c8e6a;border-color:#e6dcc2}
@media (max-width:1100px){#right{width:min(420px,94vw)}}
@media (max-width:720px){#rose{width:60px;height:60px;right:10px;top:10px}#hud-date{font-size:22px}h1{font-size:21px}}

/* ---------- version 4: library, war, numbers, intro, periscope ---------- */
.tab{letter-spacing:.05em;font-size:12.5px;white-space:nowrap;padding-left:0;padding-right:0}
button.big{font-size:14px;padding:8px 14px;letter-spacing:.14em}
#peri{display:block;width:100%;margin:8px 0 2px;background:#1c2327 !important;color:#f1ead6 !important;border-color:#1c2327 !important}
#peri:hover{background:#8a2a1c !important}
.photo.ill{transform:rotate(.3deg)}.photo.ill img{filter:none}
.lib ul,#detail ul{margin:6px 0 6px 0;padding-left:18px}.lib li,#detail ul li{margin:3px 0;font-size:13.5px}
.cite{font:11.5px var(--type);color:#5f5b4b;margin:4px 0 0}
.lead{font-size:15px;line-height:1.5}
.libit{margin-bottom:10px}
.tac{margin-top:8px;border-left:3px solid #8a2a1c;padding:2px 0 2px 10px}.tac h5{font:600 11.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;margin:4px 0;color:#5f5b4b}
details summary{cursor:pointer;font-weight:600;font-size:13.5px;margin:3px 0}details p{margin:2px 0 6px}
.layout{padding-left:18px;font-size:13px}.layout li{margin:4px 0}
#tab-war ol li,#tab-stats ol li{padding:7px 8px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 8px;border-bottom:1px solid #1a2f38;border-left:2px solid transparent}
#tab-war ol li:hover{background:var(--panel2)}#tab-war ol li.sel{background:#12303a;border-left-color:var(--acc)}
.cbox{margin-bottom:14px}.cbox h3{margin:6px 0 4px}
.chart{width:100%;height:auto;display:block}.chart text{fill:var(--dim);font:9px var(--disp);letter-spacing:.06em}.chart .tick line{stroke:#1f3640}.chart .domain{stroke:#1f3640}
.hb .hr{display:grid;grid-template-columns:118px 1fr 34px;gap:6px;align-items:center;font-size:12px;padding:2px 0}.hb .hr[data-go]{cursor:pointer}.hb .hr[data-go]:hover span{color:var(--acc)}
.hb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}.hb i{height:9px;display:block}.hb b{font:12px var(--type);text-align:right;color:#cfc8b2}
header .mark{cursor:pointer}
#intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#040b10;transition:opacity .5s}#intro.out{opacity:0;pointer-events:none}
#intro .ibg{position:absolute;inset:0;background:#07141b center/cover no-repeat;opacity:.55;filter:saturate(.8)}
#intro .ibg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#040b1000 0,#040b10e6 85%)}
#intro .ibox{position:relative;max-width:720px;padding:28px;text-align:center}
#intro .ik{font:14px var(--type);letter-spacing:.2em;color:var(--acc);margin:0 0 10px}
#intro h1{font:700 clamp(40px,8vw,84px)/.95 var(--disp);letter-spacing:.08em;margin:0 0 14px;text-shadow:0 4px 30px #000}
#intro .il{font-size:17px;color:#d6d0be;margin:0 auto 22px;max-width:560px}
#intro .ibtn{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}#intro .ibtn button:first-child{background:var(--acc);border-color:var(--acc);color:#1a1405}
#intro .in{font-size:12px;color:var(--dim);margin-top:22px}
#peri-ov{position:fixed;inset:0;z-index:70;background:#000;--flash:0}
#peri-ov canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:ew-resize;touch-action:none}
.pmask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,#0000 0 44vmin,#000c 45.5vmin,#000 47vmin)}
.pmask::after{content:"";position:absolute;inset:0;background:#fff;opacity:calc(var(--flash)*.5)}
.pret{position:absolute;left:50%;top:50%;width:100vmin;height:100vmin;transform:translate(-50%,-50%);pointer-events:none;font-family:var(--disp)}
.pwash{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(180deg,#27484f66 0,#1c3a44ee 55%,#0c2026 100%);transition:opacity .25s}
.pplate{position:absolute;left:18px;top:18px;max-width:300px;background:#ebe2ca;color:#1c2327;padding:12px 14px;font:13px/1.4 var(--f);box-shadow:4px 4px 0 #0008;display:flex;flex-direction:column;gap:2px}
.pplate b{font:700 22px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid #1c2327;padding-bottom:5px;margin-bottom:4px}
.pplate span{font:12.5px var(--type)}.pplate p{margin:6px 0 0;font-size:13px}.pplate .pn{color:#8a2a1c;font-weight:600}
.pbar{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#08141acc;padding:8px 10px;border:1px solid #2c4650}
.pbar span{font:13px var(--type);color:#e8e2d0;min-width:230px}.pbar button.on{border-color:var(--acc);color:var(--acc)}#pfire{background:var(--red);border-color:var(--red);color:#fff}
.pfoot{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:11.5px;color:#8b9b9c}
@media (max-width:720px){.pplate{left:8px;right:8px;top:8px;max-width:none;font-size:12px}.pplate p:not(.pn){display:none}.pfoot{font-size:10.5px;padding:0 8px}.pbar{bottom:64px;flex-wrap:wrap;justify-content:center;width:94vw}.pbar span{min-width:0;width:100%;text-align:center}.tab{font-size:12px;letter-spacing:.04em}}

.notable{border:1.5px solid #8a2a1c;border-top:1.5px solid #8a2a1c;background:#f3ecd8;padding:8px 10px;margin:8px 0}.notable h4{margin-bottom:4px}.notable p{margin:0 0 4px}
#tab-war #nolist li b{color:#f0c75e}

.dayl{margin-left:auto;display:flex;gap:6px;align-items:center}.dayl input{background:#07131a;border:1px solid #27424d;color:var(--ink);border-radius:2px;padding:3px 6px;font:12.5px var(--type);color-scheme:dark}
#bswitch{margin:0 0 8px}#cmdwrap{display:flex;flex-direction:column;min-height:0}#cmdwrap[hidden]{display:none}#cmdlist li{padding:6px 8px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 8px;border-bottom:1px solid #1a2f38}#cmdlist li:hover{background:var(--panel2)}
@media (max-width:720px){.dayl{margin-left:0}.tctl{flex-wrap:wrap}}

.nav{flex-wrap:wrap}

.pres{list-style:none;padding-left:0 !important}.pres li{margin:6px 0 !important;padding-left:8px;border-left:2px solid #b5a781}

.keyt{width:100%;border-collapse:collapse;font-size:13px}.keyt td{padding:5px 6px 5px 0;vertical-align:top;border-bottom:1px dotted #a89a7566}.keyt td:first-child{width:34px}.keyt td:last-child{width:34%;color:#5f5b4b;font-size:12px}
.kd{display:inline-block;width:11px;height:11px;border-radius:50%;background:#c9a04a;vertical-align:middle}.kd.est{background:none;border:2.5px solid #c9a04a;border-radius:0;transform:rotate(45deg);width:9px;height:9px}
.kl{display:inline-block;width:26px;height:0;border-top:2.5px solid #7fb9c8;vertical-align:middle}.kl.dash{border-top-style:dashed}.kl.dash.y{border-top-color:#e0b84a}.kl.log{border-top-color:#f2d16b}
#legend2{list-style:none;padding:0;margin:8px 0 4px;font-size:12.5px}#legend2 li{margin:3px 0}#legend2 .kd,#legend2 .kl{margin-right:8px}

.dot{border-radius:50%;transform:none;width:9px;height:9px}

/* ---------- interface round (2026-11-12) ---------- */
#right:not([hidden]){animation:cardin .28s ease-out}@keyframes cardin{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#right:not([hidden]){animation:none}}
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:0;border:1.5px solid #1c2327;margin:10px 0 8px;background:#f3ecd8}
.glance>div{padding:7px 9px 8px;border-right:1px dotted #8f8262;border-bottom:1px dotted #8f8262;min-width:0}
.glance span{display:block;font:600 10.5px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#8a2a1c}
.glance b{display:block;font:400 17px/1.25 var(--type);color:#1c2327;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glance small{display:block;font-size:11.5px;color:#5f5b4b;line-height:1.25}
.glance b.pips{display:flex;gap:3px;align-items:center;height:21px;overflow:visible}.pips i{width:16px;height:6px;border:1.5px solid #1c2327;border-radius:3px 1px 1px 3px;display:block}.pips i.hit{background:#8a2a1c;border-color:#8a2a1c}
.glance .bar{display:block;height:5px;background:#c9bc98;margin-top:4px}.glance .bar i{display:block;height:100%;background:#8a2a1c}
.secnav{position:sticky;top:-18px;z-index:3;display:flex;gap:4px;flex-wrap:wrap;padding:8px 0 6px;margin:0 0 4px;background:linear-gradient(#ebe2ca 82%,#ebe2ca00)}
.secnav button{font-size:11.5px !important;padding:2px 7px !important;letter-spacing:.08em !important}
details.booktext>summary{font:600 12.5px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#8a2a1c;cursor:pointer;padding:2px 0}details.booktext .ktb{margin-top:8px;max-height:none}
#phband{position:relative;height:30px;margin:6px 0 0}
#phband .pb{position:absolute;top:13px;height:15px;box-sizing:border-box;border-left:1px solid #08141a;background:#17323c;cursor:pointer;overflow:hidden}
#phband .pb:nth-of-type(even){background:#1e3d48}#phband .pb:hover{background:#2c5562}
#phband .pb i{font:600 10px/15px var(--disp);letter-spacing:.08em;text-transform:uppercase;color:#b9c3bd;font-style:normal;padding:0 5px;white-space:nowrap}
#phband .pstar{position:absolute;top:-2px;transform:translateX(-50%);font-size:12px;line-height:14px;color:#f0c75e;cursor:pointer;font-weight:400}#phband .pstar:hover{color:#fff;transform:translateX(-50%) scale(1.5)}
#palbtn{grid-column:1/-1;margin-top:10px;text-align:left;background:#07131a;border-color:#27424d;color:var(--dim);font:500 12.5px var(--disp);letter-spacing:.1em;display:flex;justify-content:space-between;align-items:center}#palbtn:hover{color:var(--ink);border-color:var(--acc)}
kbd{font:11px var(--mono);border:1px solid #2c4650;border-radius:2px;padding:0 5px;color:var(--dim)}
#pal{position:fixed;inset:0;z-index:80;background:#02070bcc;display:grid;place-items:start center;padding-top:12vh}
.palbox{width:min(620px,92vw);background:#0a171d;border:1px solid var(--acc);box-shadow:0 20px 60px #000c}
#palq{width:100%;border:0 !important;border-bottom:1px solid #27424d !important;background:#07131a !important;padding:14px 16px !important;font:17px var(--f) !important;border-radius:0 !important;outline:none !important}
#palr{max-height:52vh;overflow:auto}#palr li{padding:8px 14px;cursor:pointer;border-bottom:1px solid #132830;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#palr li.sel,#palr li:hover{background:#12303a}#palr li.none{color:var(--dim);cursor:default}
#palr .badge{border-color:#2c4650;color:var(--acc);min-width:76px;display:inline-block;text-align:center}#palr small{color:var(--dim)}
.palh{margin:0;padding:6px 14px;font-size:11.5px;color:var(--dim)}
@media (max-width:720px){#phband .pb i{display:none}.glance{grid-template-columns:repeat(2,1fr)}}