:root{--bogolan:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='34'><g fill='none' stroke='%23EADFC8' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6M12 9l-6 6M2 26l8-6 8 6 8-6 8 6'/><circle cx='50' cy='12' r='3' fill='%23C9923F' stroke='none'/><circle cx='60' cy='12' r='3' fill='%23EADFC8' stroke='none'/><path d='M44 24h20' stroke='%23B4532A'/></g></svg>");--indigo:#1F2F4A;--ink:#1A1612;--banco:#EADFC8;--lat:#B4532A;--ocre:#C9923F;--vert:#8D957E;--chaux:#FBF8F3;--gris:#6E7584}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#162238;overflow:hidden;font-family:"Jost","Century Gothic","Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--chaux)}
#frame{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{position:absolute;left:0;top:0;width:1680px;height:1188px;background:var(--indigo);transform-origin:0 0;overflow:hidden}
.band{position:absolute;left:0;width:100%;height:34px;background-color:var(--ink);background-image:var(--bogolan);background-size:68px 34px}
.band.top{top:0}.band.bottom{bottom:0}
header{position:absolute;left:64px;top:56px}
h1{margin:0;font-size:64px;font-weight:800;letter-spacing:.01em;color:var(--chaux)}
.sub{margin:4px 0 0;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre)}
#map{position:absolute;left:30px;top:190px;width:1060px;height:900px}
#side{position:absolute;left:1140px;top:70px;width:500px}
h2{font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre);margin:22px 0 12px;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--lat);color:var(--chaux);border-radius:18px;height:150px;font-size:22px;font-weight:700;text-align:center;transition:background .15s}
.btn svg{width:76px;height:76px}
.btn:hover,.btn:focus-visible,.btn.on{background:var(--ocre);color:var(--ink)}
.btn:focus-visible{outline:4px solid var(--chaux);outline-offset:3px}
.mats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mat{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;font-size:16px;color:var(--banco);text-align:center}
.mat svg{width:54px;height:54px}
.mat:hover,.mat:focus-visible{background:rgba(201,146,63,.22)}
.mat:focus-visible{outline:3px solid var(--chaux)}
.mat .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--vert)}
#extra{display:flex;gap:14px;margin-top:24px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;flex:1;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;font-size:19px;font-weight:600}
.chip svg{width:44px;height:44px;flex:none}
.chip.none{border:3px dashed var(--gris);color:#B9BDC6}
.chip.src{border:3px solid var(--vert);color:var(--banco)}
.chip:hover,.chip:focus-visible{background:rgba(255,255,255,.07)}
.chip:focus-visible{outline:3px solid var(--chaux)}
/* map */
.land{fill:var(--banco)}
.ngb{fill:none;stroke:rgba(234,223,200,.25);stroke-width:2;stroke-dasharray:6 8}
.ctry{fill:rgba(234,223,200,.42);font-size:20px;letter-spacing:.3em;font-weight:700}
.sea{fill:rgba(141,149,126,.75);font-size:20px;letter-spacing:.3em;font-style:italic}
.zone{cursor:pointer;transition:fill .15s,opacity .15s}
.zone.n{fill:rgba(180,83,42,.16)}.zone.s{fill:rgba(141,149,126,.28)}
.zone:hover,.zone:focus-visible{fill:rgba(201,146,63,.35);outline:none}
.zlab{font-size:22px;font-weight:800;letter-spacing:.16em;fill:var(--indigo);pointer-events:none}
.zlab2{font-size:16px;font-weight:600;letter-spacing:.08em;fill:var(--indigo);opacity:.75;pointer-events:none}
.ns{fill:var(--gris);opacity:.18;stroke:var(--gris);stroke-width:2.5;stroke-dasharray:7 6;cursor:pointer}
.ns:hover,.ns:focus-visible{opacity:.35;outline:none}
.nslab{font-size:15px;fill:#5b6270;font-weight:700;letter-spacing:.06em;pointer-events:none}
.mk{cursor:pointer;outline:none}
.mk .bg{fill:var(--lat);transition:fill .15s}
.mk .ico{stroke:var(--chaux);fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.mk:hover .bg,.mk:focus-visible .bg,.mk.on .bg{fill:var(--ocre)}
.mk:hover .ico,.mk:focus-visible .ico,.mk.on .ico{stroke:var(--ink)}
.mk:focus-visible .ring{stroke:var(--indigo);stroke-width:4}
.mk.dim{opacity:.22}
.mk .lab{font-size:19px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--banco);stroke-width:6px;stroke-linejoin:round}
.mk .lab.out{fill:var(--banco);stroke:var(--indigo)}
.dot{fill:var(--indigo)}
/* time */
#time{position:absolute;left:64px;right:64px;top:1072px;height:70px;display:flex;align-items:center;gap:0}
#time .line{position:absolute;left:0;right:0;top:34px;height:4px;background:var(--vert);opacity:.6}
#time .arrow{position:absolute;left:-14px;top:24px;color:var(--vert);font-size:22px}
.tk{all:unset;cursor:pointer;position:absolute;top:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:20px;font-weight:700;color:var(--banco)}
.tk i{display:block;width:24px;height:24px;border-radius:50%;background:var(--lat);border:4px solid var(--indigo);margin-bottom:4px}
.tk:hover i,.tk:focus-visible i{background:var(--ocre)}
.tk:focus-visible{outline:3px solid var(--chaux);outline-offset:4px}
/* card */
#card{position:absolute;width:400px;background:var(--banco);color:var(--ink);border-radius:18px;padding:20px 22px 18px;border-top:10px solid var(--lat);z-index:10;font-size:19px;line-height:1.38}
#card[hidden]{display:none}
#card h3{margin:0 40px 8px 0;font-size:24px;line-height:1.15;color:var(--indigo)}
#card .ic{float:right;width:0}
#card p{margin:0 0 6px}
#card .ex{display:inline-block;margin-top:4px;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lat);border:2px solid var(--lat);border-radius:8px;padding:1px 8px}
#card ul{margin:0;padding-left:20px;font-size:17px}
#card li{margin-bottom:6px}
.x{all:unset;cursor:pointer;position:absolute;right:12px;top:6px;font-size:34px;line-height:1;color:var(--indigo);padding:2px 8px;border-radius:8px}
.x:focus-visible{outline:3px solid var(--indigo)}