:root{color-scheme:dark;--ink:#f0edda;--muted:#afbeba;--gold:#ddcf8c;--panel:rgba(9,25,29,.94);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:#08202a;color:var(--ink);overflow:hidden}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit;background:transparent;border:1px solid #596c665c;border-radius:8px;padding:10px 13px;min-height:42px;cursor:pointer}button:hover,a.mars:hover,select:hover{background:#e6dcad19;border-color:#afbbab9c}button.active,.primary{background:var(--gold);color:#1c302d;border-color:var(--gold)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f7eebc;outline-offset:3px}button:disabled{opacity:.45;cursor:default}#viewport{position:fixed;inset:0;outline:none}canvas{display:block;touch-action:none}header{position:fixed;z-index:20;top:20px;left:24px;right:24px;display:flex;align-items:center;gap:28px;padding:17px 22px;border:1px solid #a4b8ac3b;border-radius:14px;background:linear-gradient(110deg,#0a1b20ee,#102a30d9);box-shadow:0 14px 45px #020a1029;backdrop-filter:blur(16px)}.brand{min-width:236px}.eyebrow{font-size:10px;letter-spacing:.19em;color:var(--gold);font-weight:650;display:block}.title{display:block;font:28px/1.25 Georgia,serif;letter-spacing:-.02em;margin-top:3px}.edition{font:10px system-ui;letter-spacing:.1em;margin-left:9px;color:var(--muted)}nav{display:flex;gap:6px}.header-tools{margin-left:auto;display:flex;gap:8px;align-items:center}.mars{padding:10px 14px;border:1px solid #c9b9797a;border-radius:8px;color:#eadb9e;white-space:nowrap}nav span,.mars span{margin-left:6px}aside{position:fixed;right:24px;top:126px;z-index:30;width:378px;max-height:calc(100dvh - 220px);overflow:auto;border:1px solid #b0c7b045;border-radius:14px;padding:22px;background:var(--panel);box-shadow:0 20px 60px #0007;scrollbar-width:thin}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading button{padding:0;min-width:36px;min-height:36px;font-size:24px;border:0}h2{font:28px/1.2 Georgia,serif;margin:12px 0}p{color:var(--muted);margin:12px 0 18px}.small{font-size:12px;line-height:1.55}.setting{display:flex;align-items:center;justify-content:space-between;margin:15px 0 8px;gap:20px}.setting label{max-width:215px}input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px}select{max-width:130px}details{border-top:1px solid #899a8e44;padding:13px 0;font-size:13px}summary{cursor:pointer}.text-link{display:block;color:var(--gold);margin-top:14px}#map-list{display:grid;gap:7px;margin:18px 0}#map-list button{text-align:left;display:flex;justify-content:space-between;align-items:center}#map-list button small{font-size:10px;color:var(--muted)}footer{position:fixed;z-index:20;bottom:22px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.footnote{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:12px;padding:10px 14px;background:#0b2024d9;border:1px solid #b9c7ad2c;border-radius:9px;max-width:520px}.detail{color:var(--muted);font-size:10px;letter-spacing:.025em}.status-dot{width:6px;height:6px;border-radius:50%;background:#d7c77f}.navigation{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:6px;border:1px solid #b9c7ad40;border-radius:12px;background:#0b2024e8}.navigation button{border:0;min-width:42px}.divider{height:22px;width:1px;background:#809c8559;margin:0 4px}#loading{position:fixed;z-index:50;inset:0;display:flex;align-items:center;justify-content:center;gap:15px;background:#0b222de6;color:#e0d29a;font-size:16px}.loader-mark{font-size:28px}#loading[hidden],[hidden]{display:none!important}#reference-hud{position:fixed;left:24px;right:24px;top:122px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 18px;border:1px solid #b9c7ad40;border-radius:12px;background:#0b2024ec;z-index:18}#reference-name{display:block;font:22px Georgia,serif;margin:4px 0}#reference-note{font-size:11px;color:var(--muted)}.ref-actions{display:flex;gap:12px;align-items:center;font-size:12px}.ref-actions a{color:var(--gold)}#labels{position:fixed;inset:0;pointer-events:none;z-index:10}.map-label{position:absolute;transform:translate(-50%,-100%);color:#ffedac;padding:3px 7px;border-radius:5px;background:#0d2123de;font-size:12px;white-space:nowrap;box-shadow:0 0 0 1px #d6c79b40}#hover-label{position:fixed;pointer-events:none;z-index:40;background:#071d24f0;border:1px solid #d6c79b8a;padding:8px 12px;border-radius:6px;color:#f4dfa2;font-size:13px;max-width:240px}.ref-actions label{display:flex;gap:4px;align-items:center}
@media(max-width:1100px){header{gap:14px;padding:13px 16px;flex-wrap:wrap}.brand{min-width:200px}.title{font-size:25px}.header-tools{margin-left:0}nav{margin-left:auto}aside{top:176px;max-height:calc(100dvh - 268px)}#reference-hud{top:171px}.detail{display:none}}
@media(max-width:700px){header{top:10px;left:10px;right:10px;padding:11px;gap:9px;border-radius:12px}.brand{min-width:0;flex:1}.eyebrow{font-size:8px}.title{font-size:23px}.edition{font-size:8px}.header-tools{margin-left:0;gap:5px}.header-tools button{font-size:11px;padding:9px 8px}.mars{font-size:11px;padding:10px 9px}nav{width:100%;margin:0;gap:4px;justify-content:space-between}nav button{font-size:11px;flex:1;padding:7px 6px;min-height:37px}aside{top:144px;right:10px;width:calc(100vw - 20px);max-height:calc(100dvh - 234px);padding:16px}footer{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));gap:6px;flex-wrap:wrap;justify-content:center}.footnote{font-size:10px;padding:6px 10px;max-width:100%;order:2}.navigation{margin-left:auto;margin-right:auto;padding:4px}.navigation button{min-height:38px;padding:7px 12px}#reference-hud{top:142px;left:10px;right:10px;padding:10px;flex-wrap:wrap;gap:7px}#reference-name{font-size:18px}#reference-note{font-size:10px}.ref-actions{gap:9px;flex-wrap:wrap}.ref-actions button{font-size:11px;min-height:32px;padding:6px 8px}.map-label{font-size:10px}.setting label{max-width:none}}

/* Follow the actual wrapped header height instead of assuming one mobile layout. */
#marine-notes summary{min-height:28px}
#marine-notes summary:focus-visible{outline:2px solid #f7eebc;outline-offset:4px;border-radius:2px}
#marine-notes .depth-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:14px 0 8px}
#marine-notes .depth-bands li{padding:10px;border:1px solid #899a8e44;border-radius:7px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
#marine-notes .depth-bands span{display:block;color:var(--muted);font-size:11px}
#marine-notes .source-citation{font-size:11px;color:var(--muted)}
#marine-notes .depth-caution{padding-left:12px;border-left:2px solid var(--gold);color:var(--ink)}
aside,#reference-hud{top:var(--panel-top,200px)}
aside{max-height:max(40px,calc(100dvh - var(--panel-top,200px) - var(--panel-bottom,110px)))}
/* Landscape phones need canvas space, not desktop chrome stacked in three rows. */
@media(max-height:500px) and (min-width:500px){
 header{top:8px;left:10px;right:10px;padding:8px 10px;gap:10px;flex-wrap:nowrap;border-radius:10px}
 header .brand{display:none}nav{width:auto;flex:1;margin:0;gap:4px}nav button{min-height:36px;font-size:11px;padding:6px 7px;white-space:nowrap;flex:1}nav span{margin-left:2px}
 .header-tools{margin-left:auto;gap:5px}.header-tools button,.mars{font-size:11px;padding:7px 8px;min-height:36px}.mars span{margin-left:2px}
 footer{left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));justify-content:flex-end;flex-wrap:nowrap}.footnote{display:none}.navigation{padding:3px;margin:0}.navigation button{min-height:34px;padding:5px 10px}
 #reference-hud{left:10px;right:10px;padding:8px 10px;gap:6px;flex-wrap:wrap}#reference-hud .eyebrow,#reference-note{display:none}#reference-name{font-size:16px;margin:0}.ref-actions{gap:7px;font-size:11px;flex-wrap:wrap}.ref-actions button{min-height:30px;padding:4px 7px;font-size:11px}
 aside{left:auto;right:10px;top:var(--panel-top,70px);padding:12px;width:min(410px,calc(100vw - 20px))}aside h2{font-size:23px;margin:6px 0}
}

/* Compact, bounded glass surfaces. No full-screen blur/compositing overlay. */
:root{--glass:linear-gradient(135deg,rgba(31,49,54,.82),rgba(9,24,30,.84));--glass-edge:rgba(218,235,229,.24)}
header{top:16px;left:18px;right:18px;padding:9px 13px;gap:20px;border-radius:22px;background:var(--glass);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 #f0ffff12,0 8px 24px #00101930;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{min-width:192px;padding:0 5px}.brand .eyebrow{font-size:8px;letter-spacing:.21em}.title{font-size:23px;margin-top:1px}.edition{font-size:9px;margin-left:7px}
header button,header .mars{min-height:40px;padding:8px 12px;font-size:12px;border-radius:13px;border-color:transparent;white-space:nowrap}
header nav{padding:3px;gap:2px;background:#051b242d;border:1px solid #d4ebe214;border-radius:16px}
header nav button{min-height:36px;padding:6px 12px}
header button.active{background:#dace9bea;box-shadow:inset 0 1px 0 #ffffff45}
header .mars{border-color:#decd8b55;background:#c9b7790a}
header .header-tools{gap:4px}header button[aria-expanded=true]{background:#ddece719;border-color:#dcefe847}
footer{left:20px;right:20px;bottom:max(16px,env(safe-area-inset-bottom));gap:12px}
.navigation,.footnote,aside,body #sky-panel,#reference-hud{background:var(--glass);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 #f0ffff10,0 8px 28px #00101838;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.navigation{border-radius:20px;padding:4px;gap:2px}
.navigation button{min-width:38px;min-height:38px;padding:7px 11px;border-radius:14px;font-size:12px}
.navigation #quick-play{font-size:16px;color:var(--gold)}
.navigation .divider{height:19px;margin:0 3px;background:#c5ddd12e}
.footnote{padding:7px 12px;border-radius:15px;font-size:11px}
.footnote .detail{font-size:9px}
aside{right:18px;border-radius:20px;padding:19px;width:360px}
body #sky-panel{left:auto;right:18px;width:352px;border-radius:20px;padding:13px 16px;z-index:30;scrollbar-width:thin}
body .sky-head button{min-width:40px;min-height:40px;font-size:23px;border:0;border-radius:12px}
body .sky-actions button,body .sky-phases button{min-height:40px;border-radius:12px}
body .sky-summary canvas{width:62px;height:62px}
body #sky-panel .cloud-controls{margin:8px 0 5px;padding-top:8px}
body #sky-panel .cloud-controls label{min-height:36px}
body #sky-panel details{padding:10px 0}
body #sky-panel details p{line-height:1.6}
body #sky-panel summary{min-height:32px;display:list-item}
body #sky-panel summary:focus-visible{outline:2px solid #f7eebc;outline-offset:3px}
#reference-hud{left:18px;right:18px;border-radius:18px;padding:10px 15px}
@media(max-width:1100px){
 header{gap:8px 16px;display:grid;grid-template-columns:1fr auto;padding:9px 12px}
 header .brand{min-width:0}header .title{font-size:21px}header .header-tools{margin:0;justify-content:flex-end}
 header nav{grid-row:2;grid-column:1/-1;width:auto;margin:0;justify-content:center}
 header nav button{flex:1}
}
@media(max-width:700px){
 header{top:max(8px,env(safe-area-inset-top));left:8px;right:8px;padding:6px;gap:4px;border-radius:19px;grid-template-columns:1fr}
 header .brand{display:none}header nav{grid-row:1;grid-column:1;gap:0;padding:2px;border-radius:14px}
 header nav button{font-size:11px;min-height:38px;padding:6px 4px}
 header .header-tools{grid-row:2;justify-content:space-between;gap:2px}
 header .header-tools button,header .mars{font-size:11px;padding:7px 10px;min-height:38px;flex:1;text-align:center}
 footer{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));gap:5px;justify-content:center}
 .navigation{margin:0;padding:4px;gap:1px;border-radius:18px}
 .navigation button{min-width:35px;min-height:40px;padding:7px 8px}.navigation .divider{margin:0 2px}
 .footnote{font-size:9px;padding:4px 9px;order:2;max-width:100%}
 aside,body #sky-panel{left:8px;right:8px;width:auto;max-width:none;padding:12px 14px;border-radius:18px}
 body #sky-panel{max-height:max(40px,calc(100dvh - var(--panel-top,120px) - var(--panel-bottom,96px)))}
 body .sky-actions button,body .sky-phases button{min-height:44px}
 body #sky-panel .cloud-controls label{min-height:44px}
 #reference-hud{left:8px;right:8px;padding:8px 10px}
}
@media(max-height:500px) and (min-width:500px){
 header{display:flex;flex-wrap:nowrap;top:8px;left:10px;right:10px;padding:5px 7px;gap:6px;border-radius:17px}
 header .brand{display:none}header nav{flex:1;padding:2px;gap:0;min-width:0}
 header nav button,header .header-tools button,header .mars{font-size:10px;min-height:34px;padding:5px 6px}
 header .header-tools{flex:0 0 auto;gap:1px}header .header-tools button,header .mars{flex:none}
 footer{justify-content:flex-end}.footnote{display:none}.navigation{padding:3px}.navigation button{min-height:34px}
 aside,body #sky-panel{left:auto;right:10px;width:min(352px,calc(100vw - 20px));max-width:none;padding:10px 14px}
}
@media(prefers-reduced-transparency:reduce){
 header,.navigation,.footnote,aside,body #sky-panel,#reference-hud{background:#10242c;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 header,.navigation,.footnote,aside,body #sky-panel,#reference-hud{background:#10242cf5}
}
@media(max-width:700px){header nav[hidden]+.header-tools{grid-row:1}}