:root {
  color-scheme: dark;
  --glass: rgba(7, 18, 27, .82);
  --border: rgba(255,255,255,.13);
  --text: #f4f7f8;
  --muted: rgba(238,246,249,.64);
  --accent: #79d4ff;
  --sand: #d7b875;
  --ice: #dff6ff;
}
* { box-sizing: border-box; }
html, body, #cesiumContainer { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:#03090d; color:var(--text); }
#cesiumContainer { position:fixed; inset:0; }
.glass { background:var(--glass); border:1px solid var(--border); box-shadow:0 18px 60px rgba(0,0,0,.25); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); }
.topbar { position:fixed; z-index:10; left:18px; top:18px; right:18px; min-height:72px; border-radius:18px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.topbar > * { pointer-events:auto; }
.eyebrow { font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; }
h1 { font-size:23px; line-height:1; margin:6px 0 0; letter-spacing:-.035em; }
.status { display:flex; align-items:center; gap:9px; border-radius:999px; padding:8px 11px; background:rgba(255,255,255,.06); font-size:12px; color:var(--muted); }
.status .dot { width:8px; height:8px; border-radius:50%; background:#6dd89c; box-shadow:0 0 14px rgba(109,216,156,.8); }
.status.loading .dot { background:#ffd66d; box-shadow:0 0 14px rgba(255,214,109,.8); animation:pulse 1.1s infinite alternate; }
.status.error .dot { background:#ff7777; box-shadow:0 0 14px rgba(255,119,119,.7); }
@keyframes pulse { to { opacity:.35; transform:scale(.78); } }
.panel { position:fixed; z-index:10; top:108px; left:18px; width:min(390px, calc(100vw - 36px)); max-height:calc(100vh - 132px); overflow:auto; scrollbar-width:thin; border-radius:22px; padding:18px; }
.value-row { display:flex; justify-content:space-between; align-items:end; gap:16px; }
.label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; font-weight:700; }
.big-value { font-weight:780; letter-spacing:-.05em; font-size:42px; margin-top:2px; font-variant-numeric:tabular-nums; }
.big-value small { font-size:18px; letter-spacing:0; color:var(--muted); }
.ghost-btn, .places button, .presets button, .pole-presets button { appearance:none; border:1px solid rgba(255,255,255,.14); color:var(--text); background:rgba(255,255,255,.06); border-radius:10px; cursor:pointer; transition:.15s ease; }
.ghost-btn { padding:9px 13px; }
.ghost-btn:hover, .places button:hover, .presets button:hover, .pole-presets button:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); transform:translateY(-1px); }
.slider { width:100%; margin:18px 0 3px; accent-color:var(--accent); cursor:pointer; }
.slider.mini { margin:10px 0 2px; }
.scale { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.presets { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:13px; }
.presets button { padding:8px 0; font-size:12px; }
.presets button.active { border-color:rgba(121,212,255,.58); background:rgba(121,212,255,.16); }
.divider { height:1px; background:rgba(255,255,255,.09); margin:16px 0; }
.places { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.places button { padding:8px 10px; font-size:11px; }
.toggle-row { display:flex; align-items:center; gap:9px; margin-top:16px; font-size:12px; color:var(--muted); cursor:pointer; }
.toggle-row input { accent-color:var(--accent); }
.compact-toggle { margin-top:11px; }
.hint { margin:12px 0 0; font-size:11px; line-height:1.48; color:var(--muted); }
.micro-hint { margin:8px 0 0; font-size:10px; line-height:1.42; color:rgba(238,246,249,.52); }
.legend { position:fixed; z-index:9; left:18px; bottom:24px; border-radius:13px; padding:9px 11px; display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); }
.swatch { width:14px; height:9px; border-radius:3px; display:inline-block; margin-left:6px; }
.swatch:first-child { margin-left:0; }
.swatch.emerged { background:#cbb27c; }
.swatch.ice { background:#e5f8ff; }
.swatch.equator { height:2px; background:#ffbd5d; }
.inspect { position:fixed; z-index:11; right:18px; bottom:48px; width:min(350px, calc(100vw - 36px)); padding:15px; border-radius:18px; }
.hidden { display:none !important; }
.close { position:absolute; right:8px; top:6px; border:0; background:transparent; color:rgba(255,255,255,.7); font-size:24px; cursor:pointer; }
.coords { margin-top:6px; font-size:13px; font-variant-numeric:tabular-nums; }
.inspect-grid { display:grid; gap:7px; margin-top:13px; }
.inspect-grid div { display:flex; justify-content:space-between; align-items:center; padding:9px 10px; background:rgba(255,255,255,.05); border-radius:10px; }
.inspect-grid span { color:var(--muted); font-size:11px; }
.inspect-grid strong { font-size:12px; }
.toast { position:fixed; z-index:30; left:50%; top:100px; transform:translateX(-50%); max-width:min(720px,calc(100vw - 36px)); border:1px solid rgba(255,170,120,.25); background:rgba(43,22,12,.93); border-radius:12px; padding:10px 13px; font-size:12px; box-shadow:0 16px 50px rgba(0,0,0,.35); }
.credits { position:fixed; z-index:7; right:12px; bottom:8px; font-size:9px; color:rgba(255,255,255,.45); text-shadow:0 1px 4px #000; pointer-events:none; }
.cesium-viewer-bottom, .cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-timelineContainer, .cesium-viewer-fullscreenContainer { display:none !important; }
.cesium-widget-credits { font-size:9px !important; opacity:.25; }
.zoom-controls { position:fixed; z-index:12; right:18px; top:108px; display:flex; flex-direction:column; overflow:hidden; border-radius:14px; }
.zoom-controls button { width:46px; height:46px; border:0; border-bottom:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.04); color:var(--text); font-size:24px; line-height:1; cursor:pointer; transition:.12s ease; touch-action:none; user-select:none; -webkit-user-select:none; }
.zoom-controls button:last-child { border-bottom:0; font-size:18px; }
.zoom-controls button:hover { background:rgba(255,255,255,.13); }
.zoom-controls button:active { transform:scale(.95); }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pole-name { margin-top:4px; font-size:15px; font-weight:700; letter-spacing:-.015em; }
.angle-badge { flex:none; padding:5px 8px; border:1px solid rgba(121,212,255,.25); background:rgba(121,212,255,.08); border-radius:999px; font-size:11px; color:#a9e5ff; font-variant-numeric:tabular-nums; }
.model-note { margin-top:11px; padding:7px 9px; border-radius:9px; background:rgba(121,212,255,.07); border:1px solid rgba(121,212,255,.14); color:rgba(215,242,255,.75); font-size:10px; letter-spacing:.04em; }
.pole-presets { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.pole-presets button { position:relative; text-align:left; padding:9px 9px 8px; min-height:52px; }
.pole-presets button strong { display:block; font-size:11px; line-height:1.15; }
.pole-presets button small { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.25; }
.pole-presets button.active { border-color:rgba(121,212,255,.58); background:linear-gradient(135deg, rgba(121,212,255,.18), rgba(121,212,255,.07)); }
.pole-presets button.tentative::after { content:'?'; position:absolute; right:7px; top:6px; color:#ffd68a; font-weight:800; }
.ice-btn { width:100%; border:1px solid rgba(196,235,255,.22); background:linear-gradient(135deg, rgba(122,198,235,.12), rgba(225,248,255,.06)); color:var(--text); border-radius:13px; display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:11px; text-align:left; cursor:pointer; transition:.15s ease; }
.ice-btn:hover { background:linear-gradient(135deg, rgba(122,198,235,.22), rgba(225,248,255,.10)); }
.ice-btn.active { border-color:rgba(190,235,255,.58); background:linear-gradient(135deg, rgba(122,198,235,.30), rgba(225,248,255,.13)); box-shadow:0 0 30px rgba(112,202,255,.10); }
.ice-btn .ice-icon { font-size:22px; width:25px; text-align:center; }
.ice-btn strong { display:block; font-size:12px; }
.ice-btn small { display:block; margin-top:2px; font-size:9px; color:var(--muted); }
.ice-controls { margin-top:10px; padding:10px 11px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.ice-control-head { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.ice-control-head strong { color:#dff6ff; font-variant-numeric:tabular-nums; }
@media (max-width:720px) {
  .topbar { left:10px; right:10px; top:10px; min-height:64px; }
  .topbar .status span:last-child { display:none; }
  .panel { left:10px; top:auto; bottom:52px; width:calc(100vw - 20px); max-height:48vh; padding:14px; border-radius:18px; }
  .big-value { font-size:34px; }
  .places, .panel > .label, .hint { display:none; }
  .legend { display:none; }
  .inspect { right:10px; top:88px; bottom:auto; z-index:17; }
  .credits { display:none; }
  .zoom-controls { right:10px; top:84px; }
  .zoom-controls button { width:38px; height:38px; }
}

.detail-note { margin-top:11px; padding:9px 10px; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.detail-note strong { display:block; font-size:10px; color:#dff6ff; }
.detail-note span { display:block; margin-top:3px; font-size:9px; line-height:1.35; color:var(--muted); }

.terrain-box { margin-top:11px; padding:10px 11px; border-radius:12px; background:rgba(121,212,255,.045); border:1px solid rgba(121,212,255,.12); }
.terrain-toggle { margin-top:0; align-items:flex-start; }
.terrain-toggle span { display:block; }
.terrain-toggle strong { display:block; font-size:11px; color:#e8f7ff; }
.terrain-toggle small { display:block; margin-top:2px; font-size:9px; color:var(--muted); }
.terrain-control-head { display:flex; justify-content:space-between; margin-top:9px; color:var(--muted); font-size:10px; }
.terrain-control-head strong { color:#bcecff; font-variant-numeric:tabular-nums; }


/* Geographic latitude/longitude overlay */
.coordinate-settings { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:2px; }
.coordinate-settings .coordinate-toggle { flex:1; margin-top:11px; }
.coordinate-step { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; }
.coordinate-step span { text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.coordinate-step select { appearance:none; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.06); color:var(--text); border-radius:8px; padding:6px 22px 6px 8px; font:inherit; cursor:pointer; }
.coordinate-step select option { background:#0b1821; color:var(--text); }
.cursor-coords { position:fixed; z-index:13; right:76px; top:108px; border-radius:11px; padding:7px 10px; color:#e9f7ff; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.015em; pointer-events:none; white-space:nowrap; }

/* Zoom is animated in JS; don't add CSS transforms that can look like extra jumps. */
.zoom-controls button:active { transform:none; background:rgba(255,255,255,.17); }
.zoom-controls button.zoom-hold { background:rgba(121,212,255,.18); }

@media (max-width:720px) {
  .cursor-coords { right:58px; top:84px; font-size:10px; }
  .coordinate-settings { align-items:center; }
}

/* v3.4 — coordinate search */
.coordinate-search { margin-top:11px; padding:10px 11px; border-radius:12px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.085); }
.coordinate-search-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.coordinate-search-head strong { font-size:11px; color:#e8f7ff; }
.coordinate-search-head span { color:var(--muted); font-size:9px; text-align:right; }
.coordinate-search-fields { display:grid; grid-template-columns:1fr 1fr auto; gap:7px; margin-top:8px; align-items:end; }
.coordinate-search-fields label { display:block; min-width:0; }
.coordinate-search-fields label > span { display:block; margin:0 0 4px 2px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.055em; font-weight:700; }
.coordinate-search-fields input { box-sizing:border-box; width:100%; min-width:0; height:34px; border:1px solid rgba(255,255,255,.14); background:rgba(1,8,13,.47); color:var(--text); border-radius:9px; padding:0 8px; outline:none; font:500 11px/1 sans-serif; font-variant-numeric:tabular-nums; }
.coordinate-search-fields input:focus { border-color:rgba(121,212,255,.62); box-shadow:0 0 0 2px rgba(121,212,255,.08); }
.coordinate-search-fields button { height:34px; padding:0 12px; border:1px solid rgba(121,212,255,.34); border-radius:9px; background:rgba(121,212,255,.14); color:#eaf9ff; cursor:pointer; font-size:11px; font-weight:700; }
.coordinate-search-fields button:hover { background:rgba(121,212,255,.23); }
.coordinate-search-error { margin-top:7px; color:#ffadad; font-size:9px; line-height:1.35; }

/* v3.4 — contour lines */
.contour-controls { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.07); }
.contour-toggle { flex:1; margin-top:0; }
.contour-step { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.055em; font-weight:700; }
.contour-step select { appearance:none; min-width:72px; height:31px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.06); color:var(--text); border-radius:8px; padding:0 8px; font-size:10px; cursor:pointer; }
.contour-step select option { background:#0b1821; color:var(--text); }

@media (max-width:720px) {
  .coordinate-search-fields { grid-template-columns:1fr 1fr 54px; }
  .coordinate-search-head span { display:none; }
}

/* v4.0 — scenario, climate, Atlantis, compare */
.scenario-section,.atlantis-section,.environment-section{position:relative}
.scenario-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.scenario-actions button,.wide-action{appearance:none;border:1px solid rgba(121,212,255,.24);background:rgba(121,212,255,.09);color:var(--text);border-radius:10px;min-height:36px;padding:8px 10px;font-size:10px;font-weight:700;cursor:pointer;transition:.15s ease}
.scenario-actions button:hover,.wide-action:hover{background:rgba(121,212,255,.18);border-color:rgba(121,212,255,.45)}
.scenario-actions button.active{background:rgba(121,212,255,.22);border-color:rgba(121,212,255,.55)}
.secondary-actions{margin-top:12px}
.hypothesis-badge{padding:5px 8px;border:1px solid rgba(255,190,101,.30);background:rgba(255,170,68,.09);border-radius:999px;color:#ffd398;font-size:9px;font-weight:800;letter-spacing:.08em}
.atlantis-section .ice-controls{border-color:rgba(255,184,98,.15);background:rgba(255,151,64,.035)}
.wide-action{width:100%;margin-top:8px;border-color:rgba(255,190,101,.25);background:rgba(255,170,68,.08)}
.environment-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.environment-grid label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.055em;font-weight:700}
.environment-grid select{appearance:none;width:100%;height:34px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:var(--text);border-radius:8px;padding:0 8px;font-size:10px;cursor:pointer}
.environment-grid select option{background:#0b1821;color:var(--text)}
.uncertainty-head{margin-top:11px}
.split-divider{position:fixed;z-index:20;top:0;bottom:0;left:50%;width:3px;background:rgba(255,255,255,.82);box-shadow:0 0 15px rgba(0,0,0,.8);cursor:ew-resize;touch-action:none}
.split-divider::before{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(7,18,27,.92);border:1px solid rgba(255,255,255,.35);font-size:13px}
.swatch.river{height:2px;background:#54bfff}
.site-label{font-weight:700}
@media (max-width:720px){.scenario-actions{grid-template-columns:1fr}.environment-grid{grid-template-columns:1fr 1fr}.split-divider{z-index:8}}
/* v4.1 performance/deglaciation additions */
#deglaciationToggle + span { line-height:1.25; }

button:disabled, input:disabled, select:disabled { opacity:.55; cursor:default; }
.terrain-transition { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.scenario-section .scenario-actions { grid-template-columns:1fr; }

/* v4.6 — explicit before/after deformation scenario */
#impact-section .scenario-actions button[aria-pressed="true"] { background:rgba(121,212,255,.24); border-color:#79d4ff; }
#impactControls .ice-control-head { margin-top:12px; }
#impact-section details { margin-top:12px; }
#impact-section summary { color:var(--muted); font-size:11px; cursor:pointer; }
#inspectCard { max-height:calc(100vh - 170px); overflow-y:auto; }
#inspectImpact { max-width:400px; line-height:1.5; margin-bottom:0; }