/* Generated by map/tools/port.py from the artboard's <helmet><style>. Do not edit by hand. */
html,body{margin:0;padding:0;height:100%;background:#dfe7ea}
body{margin:0;background:#dfe7ea;color:#2b241c;font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-size:14px;line-height:1.45}
a{color:#b3362b}a:hover{color:#7a2219}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
.app{position:relative;width:100%;height:100vh;overflow:hidden;background:#dfe7ea}
.mapwrap{position:absolute;inset:0}
#mapcanvas{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-family:"IBM Plex Mono",monospace;font-size:10px;background:rgba(248,245,236,.85)}
.maplibregl-ctrl-bottom-right{bottom:118px}
.story-mode .maplibregl-ctrl-bottom-right{bottom:10px;right:calc(min(480px,40vw) + 10px)}
.story-mode .maplibregl-ctrl-bottom-left{left:10px}
.card{position:absolute;background:rgba(248,245,236,.94);border:1px solid #cfc5b1;box-shadow:0 1px 0 #fff inset,0 2px 10px rgba(60,40,10,.10);padding:14px 16px}
.kick{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#b3362b;margin:0 0 4px}
.kick.grey{color:#6f675c}
h1.ttl{font-size:26px;line-height:1.1;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin:4px 0 10px;color:#2b241c}
.rule{width:120px;height:1px;background:#8a7f6a;margin:6px 0 10px}
.lede{font-style:italic;font-size:13.5px;line-height:1.45;margin:0 0 8px;color:#3a3127}
.body{font-size:13px;line-height:1.5;margin:0 0 8px}
.body b{font-weight:600}
.red{color:#b3362b}
.title-card{left:18px;top:58px;width:330px;max-height:calc(100vh - 190px);overflow:auto}
.crew-card{left:18px;bottom:128px;width:300px}
.crew-card img{width:100%;display:block;filter:sepia(.25) contrast(1.05)}
.roster{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:11.5px;margin:8px 0 0}
.roster div{line-height:1.25}
.roster i{display:block;color:#6f675c;font-size:10.5px}
.roster .me{color:#b3362b;font-weight:600}
.cap{font-size:11px;line-height:1.35;color:#6f675c;margin:5px 0 0;font-style:italic}
.panel{right:18px;top:58px;width:380px;max-height:calc(100vh - 190px);overflow:auto;padding:0}
.panel-in{padding:14px 16px}
.panel h2{font-size:21px;line-height:1.15;margin:2px 0 6px;font-weight:700}
.panel h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace;font-weight:500;color:#6f675c;margin:16px 0 6px}
.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;padding:2px 7px;border:1px solid currentColor;margin:0 0 8px}
.tag.doc,.tag.crew{color:#b3362b}.tag.one{color:#b3362b;border-style:dashed}.tag.pos{color:#5c554b}.tag.out{color:#8d8577;border-style:dotted}
.phase{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#2b241c;background:#ece5d3;padding:7px 10px;margin:0 0 10px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.phase b{font-weight:500;color:#b3362b}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.btn{border:1px solid #8a7f6a;background:#f8f5ec;padding:7px 11px;font-size:12.5px;line-height:1.2;min-height:34px;color:#2b241c}
.btn:hover{background:#efe8d6}
.btn.pri{background:#b3362b;border-color:#8a2a21;color:#fff}
.btn.pri:hover{background:#9c2d23}
.btn.sm{padding:5px 8px;font-size:11.5px;min-height:28px}
.btn.on{background:#2b241c;color:#f8f5ec;border-color:#2b241c}
.btn.light{background:transparent;border-color:rgba(248,245,236,.55);color:#f8f5ec;padding:11px 20px;font-size:14px;min-height:44px;letter-spacing:.02em}
.btn.light:hover{background:rgba(248,245,236,.12)}
.btn.light.pri{background:rgba(248,245,236,.92);color:#2b241c;border-color:rgba(248,245,236,.92)}
.btn.light.pri:hover{background:#fff}
.photo{margin:0 0 12px}
.photo img{width:100%;display:block;border:1px solid #cfc5b1;background:#e9e2d0}
.photo .cap{margin-top:4px}
.photo .match{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#b3362b}
.photo .match.ctx{color:#6f675c}
.loss{border-left:3px solid #b3362b;padding:6px 0 6px 10px;margin:8px 0 12px}
.loss .ser{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#b3362b;letter-spacing:.04em}
.facts{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12.5px;margin:0 0 6px}
.facts dt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6f675c;padding-top:3px}
.facts dd{margin:0}
.roe{font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.5;background:#f1ebdb;padding:9px 11px;border:1px dashed #cfc5b1;white-space:pre-line}
.mlist{list-style:none;margin:0;padding:0}
.mlist li{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid #e4dcc9;cursor:pointer;font-size:12.5px}
.mlist li:hover{background:#f1ebdb}
.mlist .d{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#6f675c;white-space:nowrap;min-width:60px}
.sw{width:9px;height:9px;border-radius:50%;flex-shrink:0;position:relative;top:0}
.sw.doc,.sw.crew{background:#b3362b}.sw.one{border:2px dashed #b3362b}.sw.pos{background:#7b756b}.sw.out{border:1.5px dotted #8d8577}
.record{position:absolute;right:18px;top:58px;width:380px;max-height:calc(100vh - 190px);overflow:auto}
.squares{display:flex;flex-wrap:wrap;gap:3px;margin:8px 0 6px}
.sq{width:12px;height:12px;border:1px solid #8a7f6a;background:#f8f5ec}
.sq.on{background:#b3362b;border-color:#8a2a21}
.legrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid #e4dcc9;font-size:12.5px;cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left}
.legrow:hover{background:#f1ebdb}
.legrow.off{opacity:.4}
.legrow .n{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px}
.line{width:34px;height:0;border-top:2px solid #b3362b;flex-shrink:0}
.line.one{border-top:2px dashed #b3362b}.line.pos{border-top:1.5px solid #7b756b}.line.out{border-top:1.5px dotted #a39b8c}
.tl{position:absolute;left:18px;right:18px;bottom:14px;height:96px;background:rgba(248,245,236,.94);border:1px solid #cfc5b1;padding:6px 14px 4px}
.tl-inner{position:relative;height:60px}
.tick{position:absolute;width:12px;height:12px;margin-left:-6px;border-radius:50%;cursor:pointer;border:0;padding:0;background:#7b756b}
.tick.doc,.tick.crew{background:#b3362b;width:14px;height:14px;margin-left:-7px}
.tick.crew{border-radius:2px;transform:rotate(45deg)}
.tick.one{background:#f8f5ec;border:2px solid #b3362b}
.tick.out{background:#f8f5ec;border:1.5px dotted #8d8577}
.tick.sel{box-shadow:0 0 0 3px #f8f5ec,0 0 0 5px #2b241c}
.tick.dim{opacity:.25}
.tick .lossmark{position:absolute;left:50%;top:16px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid #2b241c;margin-left:-4px}
.tl .mon{position:absolute;bottom:-2px;font-family:"IBM Plex Mono",monospace;font-size:10px;color:#6f675c;letter-spacing:.08em}
.tl .shade{position:absolute;top:0;bottom:0;background:rgba(43,36,28,.07)}
.tl .ann{position:absolute;top:-2px;font-size:10.5px;font-style:italic;color:#6f675c;white-space:nowrap}
.tl .axis{position:absolute;left:0;right:0;bottom:14px;border-top:1px solid #8a7f6a}
.tlhead{display:flex;justify-content:space-between;align-items:center;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6f675c;margin:0 0 4px}
.tlhead .ctl{display:flex;gap:6px}
.lbl{position:absolute;top:0;left:0;will-change:transform;pointer-events:none;white-space:nowrap;font-family:"Source Serif 4",Georgia,serif;text-shadow:0 0 3px #f3eee2,0 0 3px #f3eee2,0 0 2px #f3eee2}
.lbl-country{font-size:12px;letter-spacing:.42em;color:#6f675c;text-transform:uppercase;opacity:.8}
.lbl-sea{font-size:12px;font-style:italic;letter-spacing:.18em;color:#5d7d8c}
.lbl-city{font-size:11px;color:#4a4238;padding-left:9px;position:relative}
.lbl-city:before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:#4a4238}
.lbl-target{font-size:13px;font-style:italic;color:#2b241c;padding-left:10px;line-height:1.1}
.lbl-target.doc,.lbl-target.crew{font-weight:600;color:#b3362b}
.lbl-target small{display:block;font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:9.5px;letter-spacing:.08em;color:#b3362b}
.lbl-event{font-size:10.5px;font-style:italic;color:#8c5a2f;max-width:150px;white-space:normal;line-height:1.2}
.lbl-loss{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:#2b241c;background:rgba(248,245,236,.92);padding:4px 7px;border:1px solid #2b241c;line-height:1.3;text-shadow:none}
.lbl-loss small{display:block;font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:10.5px;color:#5c554b}
.lbl-loss.other{border-color:#8d8577;color:#5c554b;border-style:dashed}
.lbl-loss.his{border-color:#b3362b;color:#b3362b}
.lbl-base{font-size:14px;font-weight:700;color:#2b241c;padding-left:10px}
.lbl-base small{display:block;font-size:10.5px;font-style:italic;font-weight:400;color:#6f675c}
.hid{display:none}
.topbtns{position:absolute;left:18px;top:58px;display:flex;gap:6px;flex-wrap:wrap}
.chap{font-size:13px;line-height:1.5}
.chap p{margin:0 0 8px}
.src{font-size:11px;color:#6f675c;line-height:1.4;margin:10px 0 0;font-style:italic}
.ovrow{display:flex;gap:6px;align-items:center;padding:5px 0;border-top:1px solid #e4dcc9;font-size:12.5px}
.ovrow .y{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#6f675c;min-width:42px}
.ovrow .btn{margin-left:auto}
.note{font-size:11.5px;color:#6f675c;font-style:italic}
.names{list-style:none;margin:10px 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
.names li{font-size:12.5px;line-height:1.3;padding:3px 0;border-bottom:1px solid #e4dcc9}
.names .nm{display:block;font-weight:600}
.names .nm.me{color:#b3362b}
.names .np{display:block;font-size:11px;color:#6f675c;font-style:italic}
.names.one{grid-template-columns:1fr}
.roll{list-style:none;margin:8px 0 0;padding:0}
.roll li{padding:9px 0 10px;border-top:1px solid #d9d0bb}
.roll .rd{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6f675c}
.roll .rs{font-size:15px;font-weight:600;margin:1px 0 2px}
.roll .rs i{font-weight:400;color:#5c554b}
.roll .rf{font-size:13px;line-height:1.5;color:#3a3127}
/* ---- header strip */
.top{position:absolute;left:18px;top:14px;display:flex;align-items:center;gap:10px;background:rgba(248,245,236,.94);border:1px solid #cfc5b1;padding:5px 6px 5px 12px;z-index:5}
.top .brand{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2b241c;white-space:nowrap}
.top nav{display:flex;gap:4px}
/* ---- story column */
.story{position:absolute;top:0;right:0;bottom:0;width:min(480px,40vw);overflow-y:auto;overflow-x:hidden;z-index:4;scroll-behavior:auto;overscroll-behavior:contain}
.story:focus{outline:0}
.sprog{position:absolute;top:0;right:0;width:min(480px,40vw);height:3px;background:rgba(43,36,28,.12);z-index:6;pointer-events:none}
.sprog i{display:block;height:100%;background:#b3362b;transition:width .25s}
.spad{height:18vh}
.spad-end{height:52vh}
.scene{padding:0 22px 44vh}
.scene.first{padding-top:6vh}
.scene.last{padding-bottom:10vh}
.scard{background:rgba(248,245,236,.96);border:1px solid #cfc5b1;box-shadow:0 1px 0 #fff inset,0 3px 14px rgba(40,28,10,.16);padding:22px 24px 20px;transition:opacity .5s, transform .6s;opacity:.72;transform:translateY(0)}
.scene.on .scard{opacity:1}
.scene.dark .scard{background:rgba(26,22,18,.92);border-color:#4a4238;color:#efe8d6}
.scene.dark .stitle{color:#f8f5ec}
.scene.dark .sp{color:#e4dcc9}
.scene.dark .kick{color:#d98b7f}
.scene.dark .kick.grey{color:#a39b8c}
.scene.dark .quote{border-color:#6f675c;color:#efe8d6}
.scene.dark .quote .who,.scene.dark .note,.scene.dark .src,.scene.dark .fig figcaption,.scene.dark .names .np,.scene.dark .roll .rd{color:#a39b8c}
.scene.dark .names li,.scene.dark .roll li{border-color:#4a4238}
.scene.dark .roll .rs i,.scene.dark .roll .rf{color:#d9d0bb}
.scene.dark .roe{background:rgba(248,245,236,.08);border-color:#5f574c;color:#efe8d6}
.scene.dark .live{background:rgba(248,245,236,.1);color:#efe8d6}
.scene.dark .btn{background:transparent;color:#efe8d6;border-color:#8a7f6a}
.scene.dark .btn.pri{background:#b3362b;color:#fff}
.stitle{font-size:25px;line-height:1.15;font-weight:600;margin:2px 0 12px;color:#2b241c;letter-spacing:-.005em}
.stitle.big{font-size:30px}
.sp{font-size:15.5px;line-height:1.66;margin:0 0 12px;color:#2b241c;text-wrap:pretty}
.sp:last-child{margin-bottom:0}
.quote{margin:14px 0 14px;padding:4px 0 4px 16px;border-left:2px solid #b3362b;font-style:italic;font-size:16px;line-height:1.55;color:#2b241c}
.quote p{margin:0}
.quote .who{margin-top:6px;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6f675c;margin-top:6px}
.live{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#2b241c;background:#ece5d3;padding:7px 10px;margin:0 0 14px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.live b{font-weight:500;color:#b3362b;white-space:nowrap}
.fig{margin:14px 0 6px}
.fig img{width:100%;display:block;border:1px solid #cfc5b1;background:#e9e2d0}
.fig figcaption{font-size:11.5px;line-height:1.4;color:#6f675c;margin:6px 0 0;font-style:italic}
.fig figcaption span{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:2px}
.scard .src{margin-top:14px}
.scard .btnrow{margin-top:14px}
/* ---- immersive backdrop, vignette */
.bg{position:absolute;inset:0;background:#13100c;opacity:0;transition:opacity 1.5s ease;pointer-events:none;z-index:2;overflow:hidden}
.bg.on{opacity:1}
.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.9s ease, transform 32s linear;filter:sepia(.18) contrast(1.02)}
.bgimg.on{opacity:.92;transform:scale(1.17)}
.bgimg.none{display:none}
.bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(10,8,6,.55), rgba(10,8,6,0) 34%),linear-gradient(to right, rgba(10,8,6,0) 50%, rgba(10,8,6,.28))}
.bgcap{position:absolute;left:22px;bottom:16px;max-width:min(520px,52vw);margin:0;font-size:12.5px;line-height:1.45;font-style:italic;color:#efe8d6;text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:3}
.bgcap .credit{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#cfc5b1;margin-top:3px}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity 2.6s ease;background:radial-gradient(ellipse at 40% 50%, rgba(20,16,10,.18) 20%, rgba(20,16,10,.78) 100%)}
.vignette.on{opacity:1}
/* ---- cover */
.cover{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.1), rgba(0,0,0,.55));animation:coverin 2.4s ease both}
@keyframes coverin{from{opacity:0}to{opacity:1}}
.cover-in{max-width:720px;padding:32px 36px;text-align:center;color:#f8f5ec;animation:riseup 2.2s ease .4s both}
@keyframes riseup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cover .kick{color:#cfc5b1;margin-bottom:18px}
.cover h1{font-size:48px;line-height:1.05;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin:0 0 22px;color:#f8f5ec;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.cover .ded{font-size:18px;line-height:1.55;font-style:italic;color:#efe8d6;margin:0 auto 26px;max-width:560px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.cover .ded b{font-style:normal;font-weight:600}
.cover .btnrow{justify-content:center;gap:12px}
.cover .cap{color:#cfc5b1;margin-top:34px;font-size:11.5px}
/* ---- phone */
.mobhead{display:none}
@media (max-width:900px){
  .title-card{left:12px;right:12px;top:58px;width:auto;max-height:34vh}
  .crew-card{display:none}
  .topbtns{left:12px;top:auto;bottom:112px}
  .panel{left:12px;right:12px;top:auto;bottom:112px;width:auto;max-height:46vh}
  .record{left:12px;right:12px;top:auto;bottom:112px;width:auto;max-height:40vh;overflow:auto}
  .tl{left:12px;right:12px;bottom:8px}
  .maplibregl-ctrl-bottom-right{bottom:112px}
  .story-mode .maplibregl-ctrl-bottom-right{display:none}
  .story,.sprog{width:100%}
  .spad{height:46vh}
  .scene{padding:0 12px 52vh}
  .scard{padding:18px 18px 16px;background:#f8f5ec}
  .scene.dark .scard{background:#1a1612}
  .stitle{font-size:22px}
  .sp{font-size:15px}
  .top{left:12px;top:10px;padding-left:10px}
  .top .brand{display:none}
  .cover h1{font-size:30px}
  .cover .ded{font-size:15.5px}
  .cover-in{padding:20px}
  .bgcap{max-width:calc(100% - 44px);bottom:auto;top:12vh;left:22px;font-size:11.5px}
  .names{grid-template-columns:1fr}
}