:root {
  color-scheme: dark;
  --ink: #eef7f5;
  --muted: #91a8ad;
  --panel: rgba(8, 20, 29, 0.94);
  --panel-2: #10232d;
  --line: rgba(174, 205, 204, 0.15);
  --mint: #5fd3bc;
  --amber: #f4b860;
  --cyan: #56cfe1;
  --green: #79d18b;
  --red: #e84f58;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #071019; color: var(--ink); font-size: 16px; }
button, input, select { font: inherit; }
button { color: inherit; }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: rgba(7, 16, 25, 0.91); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 1rem; letter-spacing: .01em; }
.brand strong { color: var(--mint); font-weight: 650; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: conic-gradient(from 220deg, var(--mint), #207a8a, var(--amber), var(--mint));
  box-shadow: 0 0 28px rgba(95, 211, 188, .26);
}
.demo-label {
  padding: 4px 8px; border: 1px solid rgba(95, 211, 188, .25); border-radius: 999px;
  color: var(--mint); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
}
.top-actions { display: flex; align-items: center; gap: 4px; }
.segmented, .icon-button { border: 1px solid var(--line); background: #0d1a25; cursor: pointer; }
.segmented { min-width: 50px; padding: 8px 12px; }
.segmented:first-child { border-radius: 9px 0 0 9px; }
.segmented:nth-child(2) { margin-left: -5px; border-radius: 0 9px 9px 0; }
.segmented.is-active { color: #062018; background: var(--mint); border-color: var(--mint); font-weight: 700; }
.icon-button { width: 36px; height: 36px; margin-left: 8px; border-radius: 9px; font-size: 1.1rem; }

.workspace { position: absolute; inset: 64px 0 46px 0; }
.map-shell, #cesiumContainer { position: absolute; inset: 0; }
.cesium-viewer-toolbar, .cesium-viewer-animationContainer, .cesium-viewer-timelineContainer { display: none !important; }
.cesium-viewer-bottom { left: auto !important; right: 8px !important; bottom: 8px !important; max-width: calc(100vw - 390px); }
.cesium-widget-credits { color: rgba(255, 255, 255, .74) !important; text-shadow: 0 1px 2px #000; }
.cesium-widget-credits a { color: rgba(255, 255, 255, .88) !important; }

.sidebar {
  position: absolute; z-index: 10; left: 16px; top: 16px; bottom: 16px; width: 344px;
  overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); backdrop-filter: blur(20px); box-shadow: var(--shadow); scrollbar-width: thin;
}
.eyebrow {
  margin: 0 0 8px; color: var(--mint); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.intro h1 { margin: 0; font-size: 1.7rem; letter-spacing: -.03em; }
.intro > p:last-child { margin: 9px 0 18px; color: var(--muted); font-size: .88rem; line-height: 1.55; }

.pipeline { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.pipeline-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; min-height: 27px; font-size: .82rem; }
.pipeline-row strong { max-width: 118px; overflow: hidden; color: var(--muted); font-size: .74rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #687780; box-shadow: 0 0 0 3px rgba(104, 119, 128, .12); }
.status-dot.online { background: var(--mint); box-shadow: 0 0 0 3px rgba(95, 211, 188, .13), 0 0 14px rgba(95, 211, 188, .6); }
.status-dot.error { background: var(--red); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0 18px; }
.stats article { min-width: 0; padding: 12px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.stats span { display: block; margin-bottom: 6px; overflow: hidden; font-size: 1.08rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.stats small { display: block; color: var(--muted); font-size: .7rem; line-height: 1.25; }

.filters { display: grid; gap: 10px; }
.filters > label:not(.switch-row) { color: #c4d3d3; font-size: .8rem; font-weight: 650; }
.search-wrap { position: relative; }
.search-wrap input, select {
  width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 9px;
  outline: none; background: #0b1822; color: var(--ink);
}
.search-wrap input { padding: 0 38px 0 11px; font-size: .84rem; }
.search-wrap span { position: absolute; right: 12px; top: 9px; color: var(--muted); font-size: 1.1rem; }
select { padding: 0 10px; font-size: .84rem; }
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: #0b1822; cursor: pointer;
}
.switch-row span { display: grid; gap: 3px; }
.switch-row strong { font-size: .8rem; }
.switch-row small { color: var(--muted); font-size: .72rem; font-weight: 400; }
.switch-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mint); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 17px; color: var(--muted); font-size: .7rem; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .28); }
.legend .heritage { background: var(--amber); }
.legend .tourism { background: var(--cyan); }
.legend .nature { background: var(--green); }
.legend .locality { background: #f2f0e6; }

.map-note {
  position: absolute; z-index: 5; left: 378px; bottom: 14px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
  background: rgba(7, 16, 25, .84); font-size: .72rem; backdrop-filter: blur(12px);
}
.loading { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; justify-items: center; background: #071019; }
.loading span { width: 34px; height: 34px; border: 3px solid rgba(95, 211, 188, .18); border-top-color: var(--mint); border-radius: 50%; animation: spin 1s linear infinite; }
.loading p { color: var(--muted); font-size: .84rem; }
.loading.is-done { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-banner {
  position: absolute; z-index: 12; top: 14px; left: 50%; transform: translateX(-50%);
  max-width: 560px; padding: 11px 15px; border: 1px solid rgba(232, 79, 88, .5);
  border-radius: 9px; background: rgba(66, 13, 19, .92); color: #ffd6d8; font-size: .84rem;
}

.detail-panel {
  position: absolute; z-index: 11; top: 16px; right: 16px; width: min(360px, calc(100vw - 32px));
  padding: 22px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(20px);
}
.close-button {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 8px; background: #0d1a25;
  cursor: pointer; font-size: 1.25rem;
}
.category-badge {
  display: inline-flex; min-height: 32px; align-items: center; justify-content: center;
  margin: 4px 0 13px; padding: 6px 11px; border-radius: 9px;
  color: #071019; background: var(--mint); font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.detail-panel h2 { margin: 0 30px 18px 0; font-size: 1.28rem; line-height: 1.28; }
.detail-panel dl { display: grid; gap: 10px; margin: 0 0 18px; }
.detail-panel dl div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.detail-panel dt { color: var(--muted); font-size: .76rem; }
.detail-panel dd { max-width: 68%; margin: 0; text-align: right; font-size: .8rem; overflow-wrap: anywhere; }
.detail-panel a {
  display: inline-flex; width: 100%; justify-content: center; padding: 10px 12px;
  border-radius: 9px; color: #061812; background: var(--mint);
  text-decoration: none; font-size: .82rem; font-weight: 750;
}

.data-strip {
  position: fixed; z-index: 21; inset: auto 0 0 0; height: 46px;
  display: flex; align-items: center; gap: 8px; padding: 0 20px; overflow: hidden;
  border-top: 1px solid var(--line); background: #071019; color: #b9cbcb;
  font-size: .72rem; white-space: nowrap;
}
.data-strip b { color: var(--mint); font-weight: 500; }
.data-strip small { margin-left: auto; color: var(--muted); }
.data-strip a { color: #b9cbcb; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .demo-label, .data-strip span:nth-of-type(n+3), .data-strip b:nth-of-type(n+2), .data-strip small { display: none; }
  .topbar { padding: 0 12px; }
  .workspace { inset-bottom: 38px; }
  .sidebar { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 316px; padding: 16px; }
  .intro > p:last-child, .pipeline, .legend { display: none; }
  .intro { display: flex; align-items: baseline; gap: 9px; }
  .intro .eyebrow { display: none; }
  .intro h1 { font-size: 1.18rem; }
  .stats { margin: 10px 0; }
  .stats article { padding: 8px; }
  .filters { grid-template-columns: 1fr 1fr; align-items: end; gap: 7px 10px; }
  .filters > label[for="search"] { grid-column: 1 / -1; }
  .search-wrap { grid-column: 1 / -1; }
  .filters > label[for="category"] { display: none; }
  .filters select { grid-column: 1; }
  .switch-row { padding: 8px; }
  .switch-row small { display: none; }
  .map-note { left: 8px; bottom: 332px; max-width: calc(100vw - 16px); }
  .detail-panel { top: 8px; right: 8px; }
  .data-strip { height: 38px; padding: 0 12px; }
  .cesium-viewer-bottom { bottom: 326px !important; max-width: calc(100vw - 16px); }
}

@media (max-width: 520px) {
  .brand { gap: 7px; font-size: .9rem; }
  .sidebar { height: 300px; }
  .stats small { font-size: .64rem; }
  .map-note { bottom: 316px; }
  .detail-panel { left: 8px; width: auto; }
  .cesium-viewer-bottom { bottom: 310px !important; }
}

/* Field atlas visual language: warm mineral surfaces, restrained ink, clear map tools. */
:root { --ink:#f6f3e9; --muted:#a9b1a7; --panel:rgba(19,29,27,.96); --panel-2:#23342f; --line:rgba(232,224,196,.16); --mint:#c5d987; --amber:#e6a75d; }
.topbar { height:70px; padding:0 26px; background:rgba(18,27,25,.96); border-bottom-color:rgba(232,224,196,.19); }
.brand { font-size:1.04rem; letter-spacing:.035em; }
.brand-mark { border-radius:50% 50% 50% 12%; transform:rotate(-45deg); background:linear-gradient(135deg,#e9b466,#bb653f 55%,#596f54); box-shadow:0 0 0 5px rgba(233,180,102,.08); }
.brand strong { color:#d0df9a; }
.demo-label { color:#d0df9a; border-color:rgba(208,223,154,.32); }
.workspace { inset:70px 0 42px; }
.sidebar { left:22px; top:20px; bottom:20px; width:358px; padding:24px; border-color:rgba(235,226,200,.22); border-radius:6px 20px 20px 20px; background:linear-gradient(160deg,rgba(22,34,30,.98),rgba(13,24,23,.96)); }
.eyebrow { color:#d0df9a; letter-spacing:.16em; font-size:.68rem; }
.intro h1 { font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-weight:500; letter-spacing:-.045em; }
.intro > p:last-child { max-width:290px; font-size:.84rem; }
.pipeline { border-radius:5px 12px 12px 12px; background:rgba(255,255,255,.035); }
.stats article { border-radius:5px 11px 11px; border-color:rgba(235,226,200,.13); background:rgba(255,255,255,.045); }
.stats span { color:#e7c48a; font-family:Georgia,serif; font-size:1.35rem; font-weight:500; }
.search-wrap input, select, .switch-row { border-color:rgba(235,226,200,.16); border-radius:7px; background:#172521; }
.search-wrap input:focus, select:focus { border-color:#c5d987; box-shadow:0 0 0 3px rgba(197,217,135,.1); }
.legend { padding-top:14px; border-top:1px solid var(--line); }
.map-shell { background:#151d1a; }
.map-shell::after { position:absolute; z-index:2; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg,rgba(12,22,19,.16),transparent 50%),linear-gradient(0deg,rgba(12,22,19,.2),transparent 18%); }
#cesiumContainer { cursor:grab; }
#cesiumContainer:active { cursor:grabbing; }
.map-toolbar { position:absolute; z-index:6; top:20px; right:22px; display:flex; gap:6px; padding:6px; border:1px solid rgba(235,226,200,.2); border-radius:10px; background:rgba(19,29,27,.92); box-shadow:0 12px 36px rgba(0,0,0,.28); backdrop-filter:blur(16px); }
.map-toolbar button { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:0; border-radius:6px; color:#e8e5d9; background:transparent; cursor:pointer; font-size:.77rem; }
.map-toolbar button:first-letter { color:#d0df9a; }
.map-toolbar button:hover, .map-toolbar button.active { color:#18211b; background:#d0df9a; }
.camera-control { position:absolute; z-index:6; top:75px; right:22px; display:grid; gap:8px; width:220px; padding:12px 14px 9px; border:1px solid rgba(235,226,200,.2); border-radius:7px; color:#eee8d8; background:rgba(19,29,27,.92); box-shadow:0 12px 30px rgba(0,0,0,.25); backdrop-filter:blur(12px); }
.camera-control-title { display:flex; justify-content:space-between; align-items:center; font-size:.72rem; }
.camera-control-title strong { color:#d0df9a; font-size:.76rem; font-weight:700; }
.camera-control input { width:100%; margin:0; accent-color:#d0df9a; cursor:ns-resize; }
.camera-range { display:flex; justify-content:space-between; color:#a9b1a7; font-size:.64rem; }
.measure-readout { position:absolute; z-index:6; top:166px; right:22px; padding:11px 15px; border:1px solid rgba(235,226,200,.2); border-radius:7px; color:#f1e6c9; background:rgba(19,29,27,.94); font-size:.82rem; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.gesture-hint { position:absolute; z-index:5; right:22px; bottom:20px; padding:8px 12px; border:1px solid rgba(235,226,200,.14); border-radius:6px; color:#eee8d8; background:rgba(19,29,27,.72); font-size:.7rem; backdrop-filter:blur(10px); }
.gesture-hint span { margin-right:7px; color:#d0df9a; }
.map-note { left:402px; bottom:18px; border-radius:5px; color:#eee8d8; background:rgba(19,29,27,.78); }
.story-modal { position:absolute; z-index:12; top:50%; left:50%; display:grid; grid-template-columns: minmax(220px,.88fr) minmax(290px,1.12fr); width:min(760px,calc(100vw - 40px)); max-height:min(620px,calc(100vh - 120px)); overflow:auto; transform:translate(-50%,-50%); border:1px solid rgba(239,229,201,.25); border-radius:10px; background:#17231f; box-shadow:0 30px 100px rgba(0,0,0,.55); }
.story-modal[hidden] { display:none; }
.story-image { min-height:430px; background-position:center; background-size:cover; background-color:#34443b; }
.story-image span { display:inline-block; margin:20px; padding:6px 9px; border:1px solid rgba(255,255,255,.32); border-radius:3px; color:white; background:rgba(16,27,23,.45); font-size:.65rem; text-transform:uppercase; letter-spacing:.13em; }
.story-content { padding:34px 30px 28px; }
.story-content .category-badge { min-height:auto; padding:5px 9px; border-radius:3px; }
.story-content h2 { font-family:Georgia,"Times New Roman",serif; font-size:1.8rem; font-weight:500; }
.story-description { color:#c3cbbd; font-size:.9rem; line-height:1.65; }
.story-content dl { margin-top:22px; }
.story-content a { border-radius:4px; color:#18211b; background:#d0df9a; }
.close-button { z-index:2; top:12px; right:12px; border-radius:50%; color:white; background:rgba(13,24,21,.7); }
.geology-story { position:absolute; z-index:9; top:18px; right:18px; bottom:18px; display:flex; flex-direction:column; width:min(380px,calc(100vw - 24px)); overflow:auto; border:1px solid rgba(239,229,201,.22); border-radius:8px 18px 18px 18px; color:#f4f0e4; background:linear-gradient(155deg,rgba(24,37,32,.98),rgba(14,25,23,.98)); box-shadow:0 28px 90px rgba(0,0,0,.48); backdrop-filter:blur(18px); scrollbar-width:thin; }
.geology-story[hidden] { display:none; }
.story-head { position:relative; padding:24px 22px 14px; border-bottom:1px solid var(--line); }
.story-head .eyebrow { margin-bottom:6px; font-size:.62rem; }
.story-head h2 { margin:0; font:500 1.55rem/1.1 Georgia,"Times New Roman",serif; letter-spacing:-.03em; }
.story-head .close-button { top:17px; right:15px; }
.story-lead { max-width:300px; margin:11px 0 0; color:#b9c3b4; font-size:.77rem; line-height:1.5; }
.story-timeline { display:grid; gap:3px; padding:11px 13px; border-bottom:1px solid var(--line); }
.story-timeline button { position:relative; display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:7px; min-height:32px; padding:4px 8px; border:0; border-radius:4px; color:#c6cec0; background:transparent; cursor:pointer; text-align:left; }
.story-timeline button::before { position:absolute; left:20px; top:-7px; bottom:24px; width:1px; content:""; background:rgba(208,223,154,.25); }
.story-timeline button:first-child::before { display:none; }
.story-timeline button > span { z-index:1; display:grid; width:24px; height:24px; place-items:center; border:1px solid rgba(208,223,154,.3); border-radius:50%; color:#d0df9a; background:#172720; font-size:.62rem; }
.story-timeline button b { font-size:.73rem; font-weight:650; }
.story-timeline button small { color:#9ca99b; font-size:.63rem; }
.story-timeline button:hover, .story-timeline button.is-current { color:#f1eedf; background:rgba(208,223,154,.11); }
.story-timeline button.is-current > span { color:#1b261f; background:#d0df9a; }
.story-chapter { padding:13px 21px 15px; }
.strata-art { position:relative; height:86px; overflow:hidden; margin:0 0 13px; border:1px solid rgba(239,229,201,.17); border-radius:4px; background:linear-gradient(180deg,#b5c0a3 0%,#81947b 47%,#566854 48%,#273c33 100%); }
.strata-art::before { position:absolute; inset:0; content:""; opacity:.9; background:linear-gradient(174deg,transparent 0 29%,rgba(237,204,145,.88) 30% 37%,transparent 38% 43%,rgba(191,127,78,.95) 44% 54%,transparent 55% 61%,rgba(128,91,66,.96) 62% 71%,transparent 72% 77%,rgba(213,190,126,.96) 78% 86%,transparent 87%); }
.strata-art::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(10,22,18,.3),transparent 60%),linear-gradient(0deg,rgba(13,24,20,.38),transparent 65%); }
.strata-art span { position:absolute; z-index:1; right:12px; width:19px; height:1px; background:rgba(255,255,255,.65); }
.strata-art span:nth-child(1) { top:29%; width:29px; }.strata-art span:nth-child(2) { top:47%; width:19px; }.strata-art span:nth-child(3) { top:66%; width:36px; }.strata-art span:nth-child(4) { top:82%; width:24px; }
.chapter-kicker { margin:0 0 5px; color:#d0df9a; font-size:.61rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.story-chapter h3 { margin:0 0 8px; font:500 1.4rem/1.16 Georgia,"Times New Roman",serif; }
.story-chapter > p:not(.chapter-kicker) { margin:0; color:#c1c9bc; font-size:.79rem; line-height:1.57; }
.chapter-place { display:grid; gap:3px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.chapter-place span { color:#98a596; font-size:.59rem; font-weight:700; letter-spacing:.13em; }
.chapter-place strong { color:#e4d4b1; font-size:.73rem; }
.story-sources { margin:10px 0 0; color:#9da99a; font-size:.59rem; line-height:1.5; }
.story-sources a { color:#d0df9a; text-decoration-color:rgba(208,223,154,.45); text-underline-offset:2px; }
.story-navigation { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding:11px 15px; border-top:1px solid var(--line); background:rgba(17,29,25,.98); }
.story-navigation button { padding:7px 9px; border:1px solid rgba(239,229,201,.17); border-radius:4px; color:#eee8d8; background:transparent; cursor:pointer; font-size:.68rem; }
.story-navigation button:hover:not(:disabled) { color:#1b261f; background:#d0df9a; }
.story-navigation button:disabled { opacity:.4; cursor:default; }
.story-navigation span { color:#d0df9a; font-size:.66rem; font-weight:700; }
.story-footer { position:fixed; z-index:21; inset:auto 0 0; display:flex; align-items:center; gap:20px; height:42px; padding:0 22px; border-top:1px solid rgba(235,226,200,.16); color:#d9dece; background:rgba(17,27,24,.97); }
.story-footer > strong { flex:0 0 auto; color:#d0df9a; font-size:.62rem; letter-spacing:.11em; }
.story-footer > strong span { color:#81907f; }
.story-footer nav { display:flex; align-items:center; gap:4px; height:100%; }
.story-footer nav button { display:flex; align-items:center; gap:7px; height:28px; padding:0 9px; border:1px solid transparent; border-radius:4px; color:#bfc8b9; background:transparent; cursor:pointer; font-size:.67rem; }
.story-footer nav button b { color:#d0df9a; font-size:.59rem; }
.story-footer nav button:hover, .story-footer nav button.is-current { border-color:rgba(208,223,154,.23); color:#f2f0e6; background:rgba(208,223,154,.1); }
.story-footer-hint { margin-left:auto; color:#879488; font-size:.62rem; white-space:nowrap; }
.story-footer-hint span { padding-left:6px; color:#d0df9a; }
.data-strip { height:42px; background:#111b18; }
@media (max-width:900px) {
 .topbar { height:62px; }.workspace { inset:62px 0 40px; }
 .sidebar { left:8px; right:8px; bottom:8px; width:auto; }
 .map-toolbar { top:10px; right:10px; }.map-toolbar button { padding:0 8px; }
 .camera-control { top:66px; right:10px; width:198px; }.measure-readout { top:154px; right:10px; }
 .geology-story { top:10px; right:8px; bottom:8px; width:min(360px,calc(100vw - 16px)); }
 .story-footer { height:40px; gap:10px; padding:0 10px; }.story-footer-hint { display:none; }
 .story-footer nav { flex:1; justify-content:space-between; gap:0; }.story-footer nav button { gap:4px; padding:0 5px; font-size:.61rem; }
 .gesture-hint { display:none; }.map-note { left:8px; }
 .story-modal { grid-template-columns:1fr; max-height:calc(100vh - 90px); }
 .story-image { min-height:190px; max-height:190px; }.story-content { padding:20px; }
}
@media (max-width:520px) {
 .map-toolbar { left:8px; right:8px; width:max-content; max-width:calc(100vw - 16px); justify-content:flex-end; }
 .map-toolbar button { min-width:34px; justify-content:center; }
 .map-toolbar button span { display:none; }
 .geology-story { top:8px; bottom:8px; width:calc(100vw - 16px); }
 .story-footer > strong { display:none; }.story-footer nav button { display:grid; justify-items:center; gap:0; padding:0 4px; font-size:.53rem; }
 .story-footer nav button b { font-size:.55rem; }
}