@font-face{font-family:'Geist Mono';src:url('/game/fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* The survey has its own still, legible surface while the water is paused. */
#chart{width:min(900px,94vw);padding:30px;border:1px solid #92b5a850;border-radius:22px;background:radial-gradient(ellipse at 13% 0%,#23433a80,transparent 65%),linear-gradient(145deg,#112b2b,#071920 68%);box-shadow:inset 0 1px 0 #d6e4c915,0 32px 120px #000b;color:#e3e8d7}
#chart::backdrop{background:#020b10ca;backdrop-filter:blur(10px)}
#chart header{padding-bottom:12px;border-bottom:1px solid #afc9b71a;margin-bottom:21px}
#chart .eyebrow{color:#b5c6a7;letter-spacing:.18em;font-size:9px}
#chart h2{font-size:32px;line-height:1.12;letter-spacing:-.045em;font-weight:420;margin:9px 0 4px}
#chart-close{border-color:#b4cbb332;background:#b8d0b507;transition:background .18s,border-color .18s}
#chart-close:hover{background:#b8d0b514;border-color:#c2d1af80}
#chart-close:focus-visible,#chart-enlarge:focus-visible,#chart-routes button:focus-visible{outline:2px solid #ead0a0;outline-offset:4px}
#chart .chart-layout{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:30px;align-items:start}
#chart .chart-survey{min-width:0;border:1px solid #a2c0aa1c;border-radius:13px;background:radial-gradient(ellipse at 50% 25%,#4d746218,transparent 65%),#04161c52;box-shadow:inset 0 1px 0 #d4e8c805;overflow:hidden}
#chart-map{padding:9px 7px 5px}
#chart-map svg{display:block;width:100%;height:auto;max-height:540px;overflow:visible}
#chart-map text{font-family:'Geist Mono',monospace;fill:#9cb8b0;font-size:10px;font-weight:400}
#chart-map .survey-kicker{fill:#c5d3b8;font-size:10px;letter-spacing:1.5px}
#chart-map .survey-index{fill:#8eaca1;font-size:10px;letter-spacing:1px}
#chart-map .survey-rule{fill:none;stroke:#a1b9a6;stroke-opacity:.16;stroke-width:.7}
#chart-map .survey-relief{fill:none;stroke:#799d85;stroke-opacity:.055;stroke-linecap:round;stroke-linejoin:round}
#chart-map .survey-shaft{fill:url(#survey-water);stroke:url(#survey-edge);stroke-width:.45}
#chart-map .passage-envelope{fill:none;stroke-linecap:round;stroke-linejoin:round}
#chart-map .survey-passage-fill{stroke:#659b86;stroke-opacity:.36}
#chart-map .survey-passage-inner{stroke:#103936;stroke-opacity:.9}
#chart-map .grid{fill:none;stroke:#b4c9b9;stroke-opacity:.09;stroke-width:.7;stroke-dasharray:1 5}
#chart-map .survey-tick{fill:none;stroke:#90a99c;stroke-opacity:.26;stroke-width:.65}
#chart-map .survey-tick.major{stroke-opacity:.55}
#chart-map .survey-depth{fill:#a5b7a4;font-size:10px}
#chart-map .survey-unit{fill:#788f85;font-size:9px}
#chart-map .survey-edge-label{fill:#869f8c;font-size:8px;letter-spacing:1px}
#chart-map .shot{fill:none;stroke:#d5c999;stroke-opacity:.44;stroke-width:.9;stroke-dasharray:2 5}
#chart-map .survey-mooring{fill:none;stroke:#cfccaa;stroke-width:1.3}
#chart-map .passage{fill:none;stroke:#8aaba0;stroke-opacity:.32;stroke-width:1.1;stroke-dasharray:3 5;stroke-linecap:round;stroke-linejoin:round}
#chart-map .passage.visited{stroke:#b2e0c8;stroke-opacity:.72;stroke-width:1.2;stroke-dasharray:none}
#chart-map .site{fill:#0c2429;stroke:#728e82;stroke-opacity:.8;stroke-width:1.1}
#chart-map .recorded{fill:#a6d5bd;stroke:#c5ecd2;stroke-width:.8}
#chart-map .light{fill:#e8be7f;stroke:#fae2b5;stroke-width:1.2}
#chart-map .taken{fill:#143431;stroke:#879d89;stroke-width:1.2}
#chart-map .survey-number{fill:#28312b;font-size:10px;font-weight:650}
#chart-map .is-taken .survey-number{fill:#b1c0a8;font-weight:450}
#chart-map .survey-position-ring{fill:#102d29;fill-opacity:.8;stroke:#d9e7cb;stroke-opacity:.38;stroke-width:.7}
#chart-map .diver{fill:#eef1d9;stroke:#0b2427;stroke-width:1.2}
#chart-map .survey-position-ticks{fill:none;stroke:#d9e7cb;stroke-opacity:.6;stroke-width:.7}
#chart-map .you{fill:#e9edd5;font-size:10px;letter-spacing:.6px;paint-order:stroke;stroke:#092126;stroke-width:4px;stroke-linejoin:round}
#chart-map .survey-bed{fill:#94af9c;font-size:9px;letter-spacing:1px}
#chart-map .survey-footer{fill:#7d998d;font-size:8px;letter-spacing:.7px}
#chart .chart-intro{font-size:12px;line-height:1.8;color:#b4c5b6;margin:2px 0 21px;max-width:29em}
#chart-routes{gap:8px}
#chart-routes button{position:relative;min-height:58px;border:1px solid #a9c0a922;border-radius:10px;padding:13px 16px;background:linear-gradient(110deg,#91b69b09,#91b69b02);box-shadow:inset 0 1px 0 #e0e9c604;transition:border-color .18s,background .18s;color:#d8e3cc}
#chart-routes button:hover{border-color:#b6cdb552;background:#90b69b10}
#chart-routes button[aria-pressed=true]{border-color:#d2bd8775;background:linear-gradient(110deg,#c1b37516,#c1b37504);box-shadow:inset 2px 0 0 #dac58c}
#chart-routes b{font-size:12px;line-height:1.35;font-weight:500;letter-spacing:.015em}
#chart-routes span{font-family:'Geist Mono',monospace;font-size:9px;line-height:1.5;color:#88a695;margin-top:5px}
#chart-routes button[aria-pressed=true] span{color:#c4b98f}
#chart .chart-key{font-family:'Geist Mono',monospace;font-size:9px;line-height:1.85;color:#849e90;margin:19px 0 15px}
#chart details{border-top:1px solid #9eb6a421}
#chart summary{color:#c2cfb5;padding:14px 0;font-size:11px}
#discovery-notes p{color:#92ab9b;font-size:11px;line-height:1.75;margin:4px 0 17px}
#discovery-notes b{color:#bdcdb2;font-weight:500}
@media(max-width:600px){
 #chart{width:calc(100vw - 16px);max-width:none;max-height:96dvh;padding:17px;border-radius:17px;box-sizing:border-box}
 #chart header{margin-bottom:15px;padding-bottom:13px;gap:10px}
 #chart h2{font-size:27px}
 #chart .chart-layout{grid-template-columns:1fr;gap:20px}
 #chart .chart-survey{width:100%;max-width:390px;justify-self:center}
 #chart-map{padding:5px 3px 0}
 #chart-map svg{height:auto;max-height:325px}
 #chart .chart-layout.expanded #chart-map svg{height:auto;max-height:560px}
 #chart-map .survey-depth{font-size:13px}
 #chart-map .survey-number{font-size:11px}
 #chart-map .you{font-size:11px}
 #chart-enlarge{display:block;min-height:44px;margin:0!important;width:100%;padding:11px;border:0;border-top:1px solid #91ae991c;border-radius:0;color:#c3d4ba;background:#a2c39907;font:10px 'Geist Mono',monospace;letter-spacing:.02em}
 #chart .chart-intro{margin:0 0 14px;max-width:none}
 #chart-routes button{padding:13px 14px;min-height:59px}
 #chart-routes b{font-size:12px}
 #chart-routes span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){#chart-close,#chart-routes button{transition:none}}