/* Conceptual geohazards landscape: the terrain leads, controls reveal depth. */
.geohazard-twin {
    --twin-line: rgba(22, 36, 61, 0.12);
    --twin-paper: #f8f8f3;
    --twin-ink: #16243d;
    --twin-muted: #566575;
    --twin-teal: #0c887f;
    /* Small secondary text: at least 4.5:1 on every panel and page background used here. */
    --twin-subtle: #5f6d66;
    max-width: 1240px;
    margin: 4.25rem auto 4.75rem;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
    scroll-margin-top: 100px;
    color: var(--twin-ink);
    font-family: 'Inter', sans-serif;
}
.twin-heading { margin: 0 auto 2rem; text-align: center; }
.twin-heading .section-eyebrow { justify-content: center; }
.twin-heading h2 { max-width: 26ch; margin: 0 auto 0.85rem; color: var(--twin-ink); font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.17; text-wrap: balance; }
.twin-heading > p { max-width: 650px; margin: 0 auto; color: var(--twin-muted); font-size: 1rem; line-height: 1.7; text-wrap: balance; }
.twin-experience { border: 1px solid var(--twin-line); border-radius: 22px; background: #fff; box-shadow: 0 18px 50px -38px rgba(22, 36, 61, 0.36); }
.twin-toolbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--twin-line); }
.twin-control { display: grid; gap: 0.28rem; min-width: 160px; }
.twin-control > span { color: var(--twin-muted); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; }
.geohazard-twin select { max-width: 100%; min-height: 36px; padding: 0.3rem 1.65rem 0.3rem 0; border: 0; border-radius: 3px; background-color: transparent; color: var(--twin-ink); font: 500 0.84rem/1.4 'Inter', sans-serif; cursor: pointer; }
.geohazard-twin button { appearance: none; min-height: 38px; border: 1px solid var(--twin-line); border-radius: 9px; background: #fff; color: var(--twin-ink); font: 500 0.8rem/1.4 'Inter', sans-serif; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease; }
.geohazard-twin button:hover { border-color: rgba(12, 136, 127, 0.45); background: #f2f7f4; }
.geohazard-twin button:disabled { cursor: default; opacity: 0.55; }
.geohazard-twin :is(button, select, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--twin-teal); outline-offset: 4px; }
.twin-toolbar-actions { display: flex; align-items: center; gap: 0.55rem; margin-left: auto; }
.geohazard-twin .twin-icon-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 38px; padding: 0; }
.geohazard-twin .twin-explore-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.6rem 0.9rem; border-color: var(--twin-ink); background: var(--twin-ink); color: #fff; }
.geohazard-twin .twin-explore-button:hover { border-color: #23545b; background: #23545b; }
.twin-explore-button[aria-pressed="true"] { background: #fff; color: var(--twin-ink); }
.twin-settings { position: relative; align-self: center; }
.twin-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-height: 42px; padding: 0.4rem 0; color: var(--twin-muted); font-size: 0.78rem; cursor: pointer; list-style: none; }
.twin-settings summary::-webkit-details-marker { display: none; }
.twin-settings[open] > summary { color: var(--twin-teal); }
.twin-settings[open] > summary svg { transform: rotate(180deg); }
.twin-settings-panel { position: absolute; top: calc(100% + 0.8rem); left: -1rem; width: 285px; max-height: min(70vh, 580px); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; border: 1px solid var(--twin-line); border-radius: 13px; background: rgba(255,255,252,0.98); box-shadow: 0 16px 35px -20px rgba(22,36,61,0.3); }
.twin-settings-title { margin: 0 0 0.55rem; color: var(--twin-ink); font-size: 0.8rem; font-weight: 650; }
.twin-settings-panel > label { display: flex; align-items: center; gap: 0.6rem; min-height: 37px; color: var(--twin-muted); font-size: 0.78rem; cursor: pointer; }
.twin-settings-panel input { flex-shrink: 0; width: 15px; height: 15px; margin: 0; accent-color: var(--twin-teal); }
.twin-settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-top: 0.65rem; }
.twin-settings-panel > p:last-child { margin: 0.85rem 0 0; color: var(--twin-subtle); font-size: 0.7rem; line-height: 1.6; }
.twin-viewport { position: relative; }
.twin-stage { position: relative; height: clamp(520px, 48vw, 650px); overflow: hidden; background: #f1f2ed; isolation: isolate; }
.twin-object-rail { position: absolute; z-index: 3; top: 3.9rem; width: 152px; padding: 0.6rem 0.4rem; box-sizing: border-box; border: 1px solid rgba(22,36,61,0.08); border-radius: 12px; background: rgba(255,255,250,0.94); color: var(--twin-ink); backdrop-filter: blur(12px); }
.twin-object-rail--left { left: 1rem; }
.twin-object-rail--right { right: 1rem; }
.geohazard-twin.is-inspecting .twin-object-rail--right { visibility: hidden; pointer-events: none; }
.twin-rail-title { margin: 0 0 0.45rem; padding: 0 0.3rem; color: #445f5d; font-size: 0.61rem; font-weight: 600; letter-spacing: 0.11em; line-height: 1.4; text-transform: uppercase; }
.twin-rail-group + .twin-rail-group { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid rgba(22,36,61,0.08); }
.twin-rail-group > h3 { margin: 0 0 0.2rem; padding: 0 0.3rem; color: var(--twin-subtle); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; }
.twin-object-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.125rem; }
.geohazard-twin .twin-object-grid > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-width: 0; min-height: 40px; padding: 0.15rem; border-color: transparent; border-radius: 7px; background: transparent; color: #4c635f; font-size: 0.64rem; font-weight: 450; line-height: 1.3; }
.twin-object-grid > button > svg { flex-shrink: 0; color: #4f7c70; }
.twin-object-grid > button > span { max-width: 100%; white-space: nowrap; }
.geohazard-twin .twin-object-grid > button:hover { border-color: transparent; background: rgba(226,236,229,0.72); color: var(--twin-ink); }
.geohazard-twin .twin-object-grid > button[aria-pressed="true"] { border-color: var(--twin-teal); background: #d9eae2; color: var(--twin-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--twin-teal); }
.twin-object-grid > button[aria-pressed="true"] > svg { color: var(--twin-teal); }
.twin-object-grid > button:focus-visible { outline-offset: 1px; }
.twin-canvas { position: absolute; z-index: 1; inset: 0; visibility: hidden; pointer-events: none; outline: none; }
.geohazard-twin.is-ready .twin-canvas { visibility: visible; pointer-events: auto; }
.twin-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.twin-canvas canvas:focus-visible { outline: 3px solid var(--twin-teal); outline-offset: -5px; }
.geohazard-twin.is-interacting .twin-canvas canvas { touch-action: none; }
.twin-fallback { position: absolute; z-index: 0; inset: 0; background: linear-gradient(155deg, #eef3ec, #c7d6ca 60%, #e8eee8); }
.twin-fallback[hidden] { display: none; }
.twin-fallback > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.twin-fallback-caption { position: absolute; bottom: 12%; left: 7%; display: flex; align-items: center; gap: 1rem; color: #23413d; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.2rem, 2.3vw, 1.9rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.035em; }
.twin-fallback-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(35,65,61,0.2); border-radius: 50%; font-size: 1.4rem; }
.twin-stage-top { position: absolute; z-index: 2; top: 1rem; right: 1rem; left: 1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; pointer-events: none; }
.twin-simulation-label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.65rem; border: 1px solid rgba(22,36,61,0.08); border-radius: 6px; background: rgba(255,255,250,0.88); color: #495e61; font-size: 0.65rem; font-weight: 500; line-height: 1.4; backdrop-filter: blur(10px); }
.twin-simulation-label > span { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #638576; }
.twin-orientation { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.6rem; border: 1px solid rgba(22,36,61,0.08); border-radius: 6px; background: rgba(255,255,250,0.88); color: var(--twin-subtle); font-size: 0.625rem; font-weight: 600; line-height: 1.4; backdrop-filter: blur(10px); }
.twin-orientation > span { font-size: 0.95rem; line-height: 1; }
.twin-stage-bottom { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; left: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; pointer-events: none; }
.twin-stage-bottom p { margin: 0; padding: 0.4rem 0.6rem; border-radius: 6px; background: rgba(255,255,250,0.85); color: #496167; font-size: 0.68rem; line-height: 1.5; backdrop-filter: blur(8px); }
.twin-load-status:empty { display: none; }
.twin-inspector { position: absolute; z-index: 4; top: 3.9rem; right: 1rem; display: flex; scroll-margin: 96px 0 16px; flex-direction: column; width: min(320px, calc(100% - 2rem)); max-height: calc(100% - 8rem); overflow: hidden; border: 1px solid rgba(22,36,61,0.13); border-radius: 15px; background: rgba(255,255,250,0.96); box-shadow: 0 18px 45px -24px rgba(22,36,61,0.38); backdrop-filter: blur(18px); }
.twin-inspector[hidden] { display: none; }
.twin-inspector-header { display: flex; flex-shrink: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem 0.9rem; border-bottom: 1px solid var(--twin-line); }
.twin-inspector-kicker { margin: 0 0 0.4rem; color: var(--twin-subtle); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.twin-inspector-header h3 { margin: 0; color: var(--twin-ink); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; text-wrap: balance; }
.twin-inspector-id { display: inline-block; margin-left: 0.45rem; padding: 0 0.38rem; border: 1px solid rgba(22,36,61,0.14); border-radius: 5px; color: var(--twin-subtle); font: 600 0.66rem/1.6 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; vertical-align: 0.2em; white-space: nowrap; }
.twin-inspector-header .twin-icon-button { width: 34px; min-height: 34px; margin: -0.2rem -0.3rem 0 0; border-color: transparent; background: transparent; }
.twin-inspector-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem; scrollbar-color: #9dafaa transparent; scrollbar-width: thin;
    background: linear-gradient(#fffffa 35%, rgba(255,255,250,0)) top / 100% 22px no-repeat local, linear-gradient(rgba(255,255,250,0), #fffffa 65%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(22,36,61,0.16), rgba(22,36,61,0)) top / 100% 9px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(22,36,61,0.16), rgba(22,36,61,0)) bottom / 100% 9px no-repeat scroll; }
.geohazard-twin .twin-inspector-content:focus-visible, .geohazard-twin .twin-table-scroll:focus-visible { outline-offset: -3px; }
.twin-inspector-content::-webkit-scrollbar { width: 4px; }
.twin-inspector-content::-webkit-scrollbar-thumb { border-radius: 5px; background: #9dafaa; }
.twin-inspector-content > p { margin: 0 0 0.9rem; color: var(--twin-muted); font-size: 0.77rem; line-height: 1.65; }
.twin-inspector-content h4 { margin: 1rem 0 0.55rem; color: var(--twin-ink); font-size: 0.78rem; font-weight: 650; }
.twin-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; margin: 0 0 1rem; }
.twin-metrics > div { min-width: 0; }
.twin-metrics dt { margin: 0 0 0.2rem; color: var(--twin-subtle); font-size: 0.66rem; line-height: 1.45; }
.twin-metrics dd { margin: 0; color: var(--twin-ink); font-size: 0.96rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.twin-metrics dd.is-text { color: #33464c; font-size: 0.78rem; font-weight: 500; line-height: 1.45; }
.twin-metric-unit { font-size: 0.7em; font-weight: 450; white-space: nowrap; }
.twin-chart-figure { margin: 1rem 0; }
.twin-chart-caption { margin-bottom: 0.5rem; color: var(--twin-ink); font-size: 0.75rem; font-weight: 600; line-height: 1.55; }
.twin-chart, .twin-profile { display: block; width: 100%; height: auto; overflow: visible; }
.twin-chart text, .twin-profile text { font: 11px 'Inter', sans-serif; fill: var(--twin-subtle); font-variant-numeric: tabular-nums; }
.twin-chart .twin-axis-title, .twin-profile .twin-axis-title { font-size: 10.5px; font-weight: 500; fill: #3d4f55; }
.twin-chart-values { margin-top: 0.65rem; color: var(--twin-muted); font-size: 0.68rem; }
.twin-chart-values > summary { width: fit-content; min-height: 30px; cursor: pointer; }
.twin-table-scroll { max-height: 13.5rem; overflow: auto; overscroll-behavior: contain; border-radius: 4px; }
.twin-table-scroll thead th { position: sticky; top: 0; background: #fbfbf6; }
.twin-chart-values table { width: 100%; border-collapse: collapse; font-size: 0.65rem; line-height: 1.6; font-variant-numeric: tabular-nums; text-align: left; }
.twin-chart-values th, .twin-chart-values td { padding: 0.35rem 0.25rem; border-bottom: 1px solid var(--twin-line); }
.twin-chart-values th { font-weight: 500; }
.twin-data-note { margin: 0.5rem 0 0; color: var(--twin-subtle); font-size: 0.65rem; line-height: 1.6; }
.twin-inspector-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--twin-line); }
.twin-inspector-footer > span { color: var(--twin-subtle); font-size: 0.61rem; }
.twin-inspector-footer button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 30px; padding: 0.25rem 0.45rem; border: 0; background: transparent; font-size: 0.68rem; }
.twin-subsurface-legend { color: #536568; font-size: 0.64rem; line-height: 1.55; }
.twin-subsurface-legend[hidden] { display: none; }
.twin-subsurface-legend--desktop { position: absolute; z-index: 3; right: 184px; bottom: 3.5rem; left: 184px; width: fit-content; max-width: calc(100% - 368px); box-sizing: border-box; margin: 0 auto; padding: 0.65rem 0.85rem; border: 1px solid rgba(22,36,61,0.1); border-radius: 10px; background: rgba(255,255,250,0.94); backdrop-filter: blur(12px); pointer-events: none; }
.geohazard-twin.is-inspecting .twin-subsurface-legend--desktop { right: 352px; max-width: calc(100% - 536px); }
.twin-subsurface-legend.twin-subsurface-legend--desktop ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.twin-subsurface-legend--desktop .twin-subsurface-note { max-width: 490px; margin-top: 0.4rem; }
.twin-subsurface-legend--mobile { display: none; }
.twin-subsurface-title { margin: 0 0 0.6rem; color: var(--twin-ink); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.twin-subsurface-legend ul { display: grid; gap: 0.35rem; padding: 0; margin: 0; list-style: none; }
.twin-subsurface-legend li { display: flex; align-items: baseline; gap: 0.45rem; }
.twin-subsurface-legend li > i { flex-shrink: 0; width: 9px; height: 9px; border-radius: 2px; }
.twin-subsurface-legend li small { margin-left: 0.3rem; color: var(--twin-subtle); font-size: 0.9em; white-space: nowrap; }
.twin-stratum--colluvium { background: #9c9275; }
.twin-stratum--weathered { background: #85836e; }
.twin-stratum--bedrock { background: #646d64; }
.twin-subsurface-legend li > .twin-stratum--water { height: 3px; border-radius: 0; background: #6eacba; transform: translateY(-2px); }
.twin-subsurface-legend li > .twin-stratum--shear { height: 3px; border-radius: 0; background: #d6aa77; transform: translateY(-2px); }
.twin-subsurface-note { margin: 0.65rem 0 0; color: var(--twin-subtle); font-size: 0.6rem; line-height: 1.5; }
.twin-scenario-controls { display: grid; grid-template-columns: minmax(160px, 0.8fr) minmax(160px, 1fr) minmax(180px, 1.3fr); align-items: center; gap: 1.25rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--twin-line); background: #f5f8f4; }
.twin-scenario-controls[hidden] { display: none; }
.twin-scenario-controls > label { color: var(--twin-ink); font-size: 0.76rem; font-weight: 500; }
.twin-scenario-controls output { display: inline-block; margin-left: 0.55rem; color: var(--twin-teal); font-variant-numeric: tabular-nums; }
.twin-scenario-controls input { width: 100%; margin: 0; accent-color: var(--twin-teal); cursor: pointer; }
.twin-scenario-controls p { margin: 0; color: var(--twin-subtle); font-size: 0.7rem; line-height: 1.55; }
.twin-storm-options { grid-column: 1 / -1; border-top: 1px solid var(--twin-line); padding-top: 0.6rem; }
.twin-storm-options > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; min-height: 30px; color: var(--twin-ink); font-size: 0.73rem; cursor: pointer; }
.twin-storm-options > summary > [data-twin-storm-summary] { color: var(--twin-subtle); font-size: 0.66rem; }
.twin-storm-trigger { display: inline-flex; align-items: center; gap: 0.55rem; }
.twin-storm-options[open] .twin-storm-trigger > svg { transform: rotate(180deg); }
.twin-storm-options-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 2rem; padding: 0.7rem 0 0.2rem; }
.twin-storm-area { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; color: var(--twin-muted); font-size: 0.72rem; }
.twin-storm-area select { min-height: 38px; padding: 0.4rem 1.7rem 0.4rem 0.6rem; border: 1px solid var(--twin-line); border-radius: 7px; background-color: rgba(255,255,255,0.8); font-size: 0.74rem; }
.twin-chain-toggle { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 38px; color: var(--twin-muted); font-size: 0.72rem; cursor: pointer; }
.twin-chain-toggle[hidden] { display: none; }
.twin-chain-toggle input { flex-shrink: 0; width: 16px; height: 16px; }
.twin-storm-options-body > p { flex-basis: 100%; max-width: 850px; }
.twin-event-readout { padding: 1rem 1.25rem; border-top: 1px solid var(--twin-line); background: #fafbf6; }
.twin-event-readout[hidden] { display: none; }
.twin-event-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.twin-event-eyebrow { color: var(--twin-subtle); font-size: 0.625rem; font-weight: 550; letter-spacing: 0.12em; text-transform: uppercase; }
.twin-event-heading p { margin: 0.3rem 0 0; color: var(--twin-ink); font-size: 0.82rem; font-weight: 550; line-height: 1.5; }
.twin-event-heading button { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.65rem; min-height: 36px; padding: 0.4rem 0.65rem; font-size: 0.68rem; }
.twin-event-timeline { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 0.8rem; padding: 0; margin: 1rem 0 0.85rem; list-style: none; }
.twin-event-timeline.is-short-sequence { grid-template-columns: repeat(3,minmax(0,1fr)); }
.twin-event-timeline > li { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.4rem; color: var(--twin-subtle); font-size: 0.62rem; line-height: 1.45; text-align: center; }
.twin-event-timeline > li::before { position: absolute; top: 5px; left: 50%; width: calc(100% + 0.8rem); height: 1px; background: #d5ded7; content: ''; }
.twin-event-timeline > li:last-child::before { display: none; }
.twin-event-marker { position: relative; z-index: 1; width: 11px; height: 11px; box-sizing: border-box; border: 2px solid #c5d2c9; border-radius: 50%; background: #fafbf6; }
.twin-event-timeline > .is-complete { color: #60786c; }
.twin-event-timeline > .is-complete::before { background: #a2c0ad; }
.twin-event-timeline > .is-complete .twin-event-marker { border-color: #6d9a80; background: #6d9a80; }
.twin-event-timeline > .is-current { color: var(--twin-ink); font-weight: 600; }
.twin-event-timeline > .is-current .twin-event-marker { border-color: var(--twin-ink); background: var(--twin-ink); outline: 3px solid rgba(22,36,61,0.1); }
.twin-event-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.twin-event-caption > p { max-width: 850px; margin: 0; color: var(--twin-subtle); font-size: 0.67rem; line-height: 1.65; }
.twin-event-caption > span { flex-shrink: 0; color: var(--twin-subtle); font-size: 0.61rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.twin-experience-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; padding: 0.8rem 1.25rem; border-top: 1px solid var(--twin-line); }
.twin-experience-footer > p { margin: 0; color: var(--twin-subtle); font-size: 0.71rem; line-height: 1.5; }
.twin-experience-footer > .twin-scenario-description { flex-basis: 100%; color: var(--twin-subtle); font-size: 0.66rem; }
.twin-legend { display: flex; align-items: center; gap: 1rem; color: var(--twin-subtle); font-size: 0.65rem; }
.twin-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.twin-legend-dot { width: 5px; height: 5px; border-radius: 50%; background: #647992; }
.twin-legend-dot--water { background: #3a9290; }
.twin-legend-dot--hazard { background: #bf8c4f; }
.twin-help { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--twin-line); color: var(--twin-muted); font-size: 0.7rem; line-height: 1.7; }
.twin-help > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 32px; color: var(--twin-ink); font-weight: 500; cursor: pointer; }
.twin-help > summary::after { content: '+'; font-size: 1rem; font-weight: 400; }
.twin-help[open] > summary::after { content: '−'; }
.twin-help > p { margin: 0.65rem 0; }
.twin-method-note, .twin-noscript { max-width: 900px; margin: 1rem auto 0; color: var(--twin-subtle); font-size: 0.7rem; line-height: 1.65; text-align: center; }
.twin-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
    .twin-toolbar { gap: 0.65rem 1rem; }
    .twin-control { min-width: 145px; }
    .twin-control--drone { min-width: 140px; }
    .twin-viewport { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); background: #f7f8f2; }
    .twin-stage { grid-column: 1 / -1; }
    .twin-object-rail { position: static; width: auto; margin: 0; padding: 0.85rem 1rem; border: 0; border-top: 1px solid var(--twin-line); border-radius: 0; background: transparent; backdrop-filter: none; }
    .twin-object-rail--right { border-left: 1px solid var(--twin-line); }
    .geohazard-twin.is-inspecting .twin-object-rail--right { visibility: visible; pointer-events: auto; }
    .twin-rail-title { font-size: 0.66rem; }
    .geohazard-twin .twin-object-grid > button { min-height: 44px; font-size: 0.67rem; }
    .twin-subsurface-legend--desktop { display: none; }
    .twin-subsurface-legend--mobile { display: block; grid-column: 1 / -1; padding: 0.8rem 1rem; border-top: 1px solid var(--twin-line); background: #f7f8f2; }
    .twin-subsurface-legend--mobile ul { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; }
    .twin-subsurface-legend--mobile .twin-subsurface-title { margin-bottom: 0.45rem; }
    .twin-scenario-controls { grid-template-columns: 1fr 1fr; }
    .twin-scenario-controls > p { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .geohazard-twin { margin: 3.5rem auto 4rem; }
    .twin-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; padding: 0.85rem 1rem; }
    .twin-control, .twin-control--drone { min-width: 0; }
    .twin-toolbar > .twin-control:first-child { grid-column: 1 / -1; }
    .twin-control select { width: 100%; font-size: 0.78rem; }
    .twin-settings > summary { min-height: 38px; font-size: 0.73rem; }
    .twin-toolbar-actions { grid-column: 1 / -1; justify-content: flex-end; gap: 0.4rem; margin-left: 0; }
    .geohazard-twin .twin-explore-button { padding: 0.55rem 0.65rem; font-size: 0.72rem; }
    .geohazard-twin .twin-toolbar-actions .twin-icon-button { width: 32px; min-height: 36px; }
    /* Anchored to the toolbar, so the open panel can never widen a 360 px page. */
    .twin-settings { position: static; align-self: end; }
    .twin-settings-panel { top: calc(100% - 0.25rem); right: 1rem; left: 1rem; width: auto; }
    .twin-stage { height: 520px; }
    .twin-stage-top { top: 0.75rem; right: 0.75rem; left: 0.75rem; }
    .twin-simulation-label { max-width: calc(100% - 36px); padding: 0.4rem 0.5rem; font-size: 0.58rem; }
    .twin-orientation { padding: 0.3rem 0.4rem; }
    .twin-stage-bottom { right: 0.75rem; bottom: 0.75rem; left: 0.75rem; flex-wrap: wrap; gap: 0.35rem; }
    .twin-stage-bottom p { font-size: 0.61rem; }
    .twin-inspector { top: auto; right: 0.75rem; bottom: 0.75rem; left: 0.75rem; width: auto; max-height: 56%; }
    .geohazard-twin.is-inspecting .twin-stage-bottom { visibility: hidden; }
    .twin-inspector-header { padding: 0.85rem 0.95rem 0.65rem; }
    .twin-inspector-content { padding: 0.8rem 0.95rem; }
    .twin-inspector-footer { padding: 0.6rem 0.95rem; }
    .twin-experience-footer { padding: 0.75rem 1rem; }
    .twin-event-readout { padding: 0.85rem 1rem; }
    .twin-event-heading { align-items: flex-start; gap: 0.5rem; }
    .twin-event-heading p { font-size: 0.75rem; }
    .twin-event-heading button { gap: 0.35rem; max-width: 105px; padding: 0.4rem 0.5rem; font-size: 0.64rem; }
    .twin-event-timeline { grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 0.8rem; }
    .twin-event-timeline:not(.is-short-sequence) > li:nth-child(4)::before { display: none; }
    .twin-event-caption { display: grid; gap: 0.4rem; }
    .twin-storm-options > summary > [data-twin-storm-summary] { flex-basis: 100%; }
    .twin-legend { gap: 0.85rem; font-size: 0.6rem; }
}
@media (min-width: 761px) and (max-width: 1000px) {
    .twin-object-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (min-width: 360px) and (max-width: 760px) {
    .twin-object-rail { padding: 0.75rem; }
    .twin-object-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 400px) {
    .twin-toolbar-actions { grid-column: 1 / -1; justify-self: stretch; }
    .geohazard-twin .twin-explore-button { gap: 0.35rem; font-size: 0.68rem; }
    .twin-explore-button svg { width: 13px; }
    .twin-scenario-controls { grid-template-columns: 1fr; gap: 0.65rem; padding: 0.8rem 1rem; }
    .twin-scenario-controls > p { grid-column: auto; }
    .twin-stage { height: 500px; }
}
/* Touch and narrow layouts: every control keeps at least a 44 × 44 px target. */
@media (pointer: coarse), (max-width: 760px) {
    .geohazard-twin button, .geohazard-twin select, .geohazard-twin .twin-object-grid > button, .twin-inspector-footer button { min-height: 44px; }
    .geohazard-twin .twin-icon-button, .geohazard-twin .twin-toolbar-actions .twin-icon-button { width: 44px; min-height: 44px; }
    .twin-settings > summary, .twin-help > summary, .twin-storm-options > summary, .twin-settings-panel > label, .twin-chain-toggle { min-height: 44px; }
    .twin-storm-options > summary { align-items: center; }
    .twin-chart-values > summary { min-height: 44px; padding: 0.75rem 0; box-sizing: border-box; }
    .twin-scenario-controls input[type="range"] { min-height: 44px; }
    .geohazard-twin .twin-inspector-header .twin-icon-button { width: 44px; min-height: 44px; margin: -0.45rem -0.6rem 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .geohazard-twin button { transition: none; }
}