:root {
  color-scheme: dark;
  --bg: #09120f;
  --surface: #10201a;
  --surface-2: #142821;
  --surface-3: #1c352b;
  --surface-4: #27483b;
  --border: #2d453c;
  --border-strong: #3f6656;
  --ink: #e7f1ed;
  --muted: #8da49b;
  --subtle: #6f8980;
  --green: #74d7a8;
  --green-soft: #2f7558;
  --green-ink: #07130e;
  --danger: #ff9a91;
  --warning: #efc66f;
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; overflow: hidden; background: radial-gradient(circle at 48% 0, #13281f 0, var(--bg) 36%); }
button, input, select { font: inherit; color: inherit; }
button, label, summary, select, input { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1rem; font-weight: 760; letter-spacing: -.01em; }
h2 { font-size: 1rem; font-weight: 760; }
h3 { font-size: .8rem; font-weight: 760; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.eyebrow { color: var(--green); font-size: .61rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.mode-entry { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; overflow: auto; padding: clamp(1rem,4vw,2rem); background: radial-gradient(circle at 50% 20%,rgba(38,94,69,.97),rgba(6,15,11,.995) 55%); }
body[data-ui-ready="true"] .mode-entry { display: none; }
body[data-ui-ready="false"] > :not(.mode-entry) { pointer-events: none; user-select: none; }
.mode-entry__panel { display: grid; gap: .75rem; width: min(680px,100%); padding: clamp(1.15rem,4vw,2rem); border: 1px solid #3e6957; border-radius: 22px; background: linear-gradient(145deg,rgba(19,43,34,.98),rgba(8,21,15,.99)); box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.mode-entry__brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; color: var(--muted); font-size: .75rem; font-weight: 760; }
.mode-entry h1 { max-width: 520px; font-size: clamp(1.55rem,5vw,2.35rem); line-height: 1.08; }
.mode-entry__intro { max-width: 540px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.mode-entry__choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-top: .55rem; }
.mode-choice { position: relative; display: grid; justify-items: start; gap: .3rem; min-height: 176px; border: 1px solid var(--border-strong); border-radius: 16px; padding: 1rem; color: var(--ink); text-align: left; background: rgba(9,27,19,.88); cursor: pointer; }
.mode-choice:hover, .mode-choice:focus-visible { border-color: var(--green); background: rgba(27,64,48,.92); transform: translateY(-1px); }
.mode-choice--recommended { border-color: #55a781; background: linear-gradient(145deg,rgba(38,91,68,.88),rgba(15,44,31,.94)); }
.mode-choice__top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; }
.mode-choice__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--green); background: rgba(116,215,168,.12); font-size: 1rem; }
.mode-choice__tag { border-radius: 999px; padding: .25rem .42rem; color: var(--green); background: rgba(116,215,168,.12); font-size: .52rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mode-choice strong { margin-top: .42rem; font-size: 1.05rem; }
.mode-choice > span:not(.mode-choice__top) { color: var(--ink); font-size: .76rem; font-weight: 700; }
.mode-choice small { color: var(--muted); font-size: .65rem; line-height: 1.5; }
.mode-choice small b { color: var(--green); }
.mode-entry__hint { justify-self: center; margin-top: .3rem; color: var(--subtle); font-size: .62rem; }

.app-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(250px,1fr) auto minmax(250px,1fr);
  align-items: center;
  gap: 1rem;
  height: 64px;
  padding: 0 clamp(.8rem,2vw,1.3rem);
  border-bottom: 1px solid var(--border);
  background: rgba(12,27,21,.96);
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: .68rem; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; color: var(--green-ink); background: var(--green); font-size: .72rem; font-weight: 850; box-shadow: 0 0 0 5px rgba(116,215,168,.06); }
.brand-copy { min-width: 0; }
.brand-copy p { margin-top: .12rem; color: var(--muted); font-size: .64rem; }
.brand-copy p span { margin-right: .2rem; color: var(--green); }
.header-modes { justify-self: center; display: flex; align-items: center; gap: .42rem; min-width: 0; }
.ui-mode-switch, .mode-switch { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: #091713; }
.ui-mode-switch button, .mode-switch button { min-height: 35px; border: 0; border-radius: 8px; padding: .4rem .64rem; color: var(--muted); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 760; white-space: nowrap; }
.ui-mode-switch button { min-width: 92px; }
.ui-mode-switch button span, .mode-switch button span { margin-right: .25rem; font-size: .67rem; }
.ui-mode-switch button[aria-pressed="true"], .mode-switch button[aria-pressed="true"] { color: #ecfff5; background: #285844; box-shadow: inset 0 0 0 1px #3f8064; }
.header-actions { position: relative; justify-self: end; display: flex; align-items: center; gap: .48rem; min-width: 0; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.header-file-button, .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 36px; border: 1px solid var(--border); border-radius: 9px; padding: .42rem .7rem; color: var(--ink); background: var(--surface-2); cursor: pointer; font-size: .74rem; font-weight: 760; }
.header-file-button:hover, .button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-3); }
.button--primary { border-color: #4e9b78; color: var(--green-ink); background: var(--green); }
.button--primary:hover:not(:disabled) { border-color: #79e0b0; background: #83e0b4; }
.button--quiet { color: var(--green); }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .42; }
.file-info { display: flex; min-width: 0; max-width: 230px; }
.file-info span { display: none; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .48rem .65rem; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-2); font-size: .65rem; }
.file-info span:first-child { display: block; }
.file-info strong { color: var(--green); font-weight: 750; }

.message-stack { position: fixed; z-index: 60; top: 72px; left: 50%; display: grid; gap: .4rem; width: min(680px,calc(100% - 1.5rem)); transform: translateX(-50%); pointer-events: none; }
.message { padding: .72rem .9rem; border: 1px solid; border-radius: 10px; font-size: .76rem; line-height: 1.4; box-shadow: 0 14px 40px rgba(0,0,0,.32); backdrop-filter: blur(12px); pointer-events: auto; }
.message--error { border-color: #74463f; color: var(--danger); background: rgba(48,24,20,.96); }
.message--warning { border-color: #6a572e; color: var(--warning); background: rgba(44,35,17,.96); }
.global-drop-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1.2rem; background: rgba(5,16,11,.78); backdrop-filter: blur(8px); pointer-events: none; }
.global-drop-overlay__card { display: grid; justify-items: center; gap: .35rem; width: min(520px,90vw); min-height: 220px; align-content: center; border: 2px dashed var(--green); border-radius: 22px; color: var(--green); background: rgba(18,46,34,.94); box-shadow: 0 24px 80px rgba(0,0,0,.42),inset 0 0 0 6px rgba(116,215,168,.04); }
.global-drop-overlay__card > span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .25rem; border-radius: 15px; color: var(--green-ink); background: var(--green); font-size: 1.7rem; }
.global-drop-overlay__card strong { color: var(--ink); font-size: 1.05rem; }
.global-drop-overlay__card small { color: #a7beb5; font-size: .7rem; }

.app-shell {
  display: grid;
  grid-template-columns: 286px minmax(430px,1fr) 306px;
  min-height: 680px;
  height: calc(100vh - 64px);
  background: var(--bg);
}
.journey-rail, .inspector { min-width: 0; min-height: 0; background: rgba(15,31,25,.98); }
.journey-rail { display: grid; grid-template-rows: auto minmax(0,1fr); border-right: 1px solid var(--border); }
.inspector { overflow: auto; border-left: 1px solid var(--border); scrollbar-color: var(--border-strong) transparent; }
.coverage-card, .timeline-panel, .stats-panel { min-width: 0; }
.coverage-card { padding: .9rem; border-bottom: 1px solid var(--border); }
.section-heading, .inspector-heading, .group-title { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.section-heading h2, .inspector-heading h2 { margin-top: .2rem; }
.panel-heading-actions { display: flex; align-items: center; gap: .45rem; }
.mobile-panel-toggle { display: none; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--green); background: var(--surface-2); cursor: pointer; }
.mobile-panel-toggle span { display: block; transition: transform .2s ease; }
.mobile-panel-toggle[aria-expanded="false"] span { transform: rotate(180deg); }
.section-heading--compact { margin-bottom: .6rem; }
.count-badge { min-width: 30px; padding: .22rem .46rem; border-radius: 999px; color: var(--green); background: var(--surface-3); font-size: .65rem; text-align: center; }
.coverage-switch { display: flex; gap: 3px; margin-top: .8rem; padding: 3px; border-radius: 9px; background: #091713; }
.coverage-switch button { flex: 1; min-height: 31px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: .69rem; font-weight: 760; }
.coverage-switch button[aria-pressed="true"] { color: var(--ink); background: var(--surface-4); }
.single-date-controls, .range-date-controls { margin-top: .72rem; }
.journey-slider-row { display: grid; grid-template-columns: 32px minmax(0,1fr) 32px; gap: .38rem; align-items: center; }
.icon-button, .circle-button { display: grid; place-items: center; border: 1px solid var(--border); color: var(--green); background: var(--surface-2); cursor: pointer; }
.icon-button { width: 32px; height: 32px; border-radius: 8px; }
.journey-date-slider { display: grid; gap: .22rem; min-width: 0; color: var(--muted); font-size: .58rem; font-weight: 760; letter-spacing: .03em; text-transform: uppercase; }
.journey-date-slider__header, .journey-date-slider__bounds, .journey-range__header, .journey-range__bounds { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; }
.journey-date-slider__header output { overflow: hidden; color: var(--ink); font-size: .68rem; font-weight: 780; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.journey-date-slider__bounds, .journey-range__bounds { color: var(--subtle); font-size: .53rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.journey-date-slider input[type="range"] { --coverage-progress: 0%; width: 100%; height: 5px; margin: .28rem 0 .12rem; border-radius: 999px; appearance: none; background: linear-gradient(90deg,var(--green) 0 var(--coverage-progress),var(--border) var(--coverage-progress) 100%); cursor: pointer; }
.journey-date-slider input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; border: 3px solid var(--surface); border-radius: 50%; appearance: none; background: var(--green); box-shadow: 0 0 0 1px rgba(116,215,168,.6); }
.date-actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .45rem; margin-top: .55rem; align-items: end; }
.exact-date, .control, .speed-control, .duration-control { display: grid; gap: .3rem; color: var(--muted); font-size: .61rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
select, input[type="date"], input[type="text"] { width: 100%; min-height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: .38rem .5rem; color: var(--ink); background: #0c1a15; }
.selection-summary { margin-top: .6rem; overflow: hidden; color: var(--muted); font-size: .65rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.journey-range { display: grid; gap: .16rem; }
.journey-range__header { color: var(--muted); font-size: .58rem; font-weight: 760; letter-spacing: .03em; text-transform: uppercase; }
.journey-range__header > span:last-child { display: flex; align-items: center; gap: .3rem; min-width: 0; color: var(--ink); font-size: .64rem; letter-spacing: 0; text-transform: none; }
.journey-range__header b { color: var(--green); }
.journey-range__track { --range-start: 0%; --range-end: 100%; position: relative; height: 26px; }
.journey-range__track::before { position: absolute; top: 10px; right: 0; left: 0; height: 5px; border-radius: 999px; background: linear-gradient(90deg,var(--border) 0 var(--range-start),var(--green) var(--range-start) var(--range-end),var(--border) var(--range-end) 100%); content: ""; }
.journey-range__track input[type="range"] { position: absolute; inset: 0; width: 100%; height: 26px; margin: 0; appearance: none; background: transparent; pointer-events: none; }
.journey-range__track input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.journey-range__track input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border: 3px solid var(--surface); border-radius: 50%; appearance: none; background: var(--green); box-shadow: 0 0 0 1px rgba(116,215,168,.65); cursor: grab; pointer-events: auto; }
.journey-range__inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .48rem; margin-top: .48rem; }
.journey-range__inputs label { display: grid; gap: .24rem; min-width: 0; color: var(--muted); font-size: .56rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.journey-range__inputs input { min-width: 0; width: 100%; padding: .48rem .54rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--ink); font: 650 .68rem/1.2 system-ui,sans-serif; color-scheme: dark; }
.journey-range__inputs input:focus { border-color: var(--green); outline: 2px solid rgba(116,215,168,.2); outline-offset: 1px; }
.journey-range__inputs input:disabled { cursor: not-allowed; opacity: .5; }

.timeline-panel { display: flex; flex-direction: column; min-height: 0; padding: .85rem .45rem .55rem .85rem; overflow: hidden; }
.timeline-list { flex: 1; min-height: 0; overflow: auto; padding-right: .38rem; scrollbar-color: var(--border-strong) transparent; }
.timeline-item { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: .45rem; width: 100%; border: 1px solid transparent; border-radius: 9px; padding: .56rem .48rem .56rem 1.15rem; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.timeline-item::before { position: absolute; top: .82rem; left: .4rem; width: 6px; height: 6px; border-radius: 50%; background: #5a756b; box-shadow: 0 0 0 3px #14251f; content: ""; }
.timeline-item::after { position: absolute; top: 1.3rem; bottom: -.55rem; left: .57rem; width: 1px; background: var(--border); content: ""; }
.timeline-item:last-of-type::after { display: none; }
.timeline-item:hover { background: var(--surface-2); }
.timeline-item.is-selected { border-color: #376c57; background: #193328; }
.timeline-item.is-selected::before { background: var(--green); }
.timeline-item time { color: var(--green); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.timeline-item__body { display: grid; gap: .15rem; min-width: 0; }
.timeline-item__body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.timeline-item__meta { color: var(--muted); font-size: .62rem; line-height: 1.35; }
.empty-state, .limit-note { margin: 1rem .4rem; color: var(--muted); text-align: center; font-size: .72rem; line-height: 1.45; }

.viewer-column { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #08110e; }
.loader { position: absolute; z-index: 20; inset: 0; display: grid; align-content: center; justify-items: center; padding: 2rem; text-align: center; background: radial-gradient(circle at 50% 42%,rgba(31,75,57,.62),rgba(7,17,13,.97) 46%); }
.has-timeline .loader { display: none; }
.loader-mark { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .8rem; border: 1px solid #3f745e; border-radius: 17px; color: var(--green); background: rgba(22,49,38,.8); font-size: 1.8rem; }
.loader h2 { margin-top: .32rem; font-size: 1.35rem; }
.loader > p:not(.eyebrow):not(.loader-formats) { margin-top: .5rem; color: var(--muted); font-size: .78rem; }
.drop-zone { display: grid; justify-items: center; gap: .22rem; width: min(360px,90%); min-height: 112px; margin-top: 1.25rem; border: 1px dashed #4d826b; border-radius: 13px; padding: 1.1rem; color: var(--green); background: rgba(19,44,34,.78); cursor: pointer; }
.drop-zone > span { font-size: 1.3rem; }
.drop-zone strong { font-size: .82rem; }
.drop-zone small, .loader-formats { color: var(--muted); font-size: .65rem; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--green); background: rgba(28,63,49,.92); }
.drop-zone.is-loading { cursor: wait; opacity: .6; }
.loader-formats { max-width: 470px; margin-top: .75rem; line-height: 1.45; }

.basic-workflow, .basic-action-dock { display: none; position: relative; z-index: 4; min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg,rgba(25,55,43,.96),rgba(10,27,19,.98)); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.basic-workflow { gap: .7rem; padding: .78rem; }
.basic-workflow__heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-width: 0; padding: 0 .1rem .1rem; }
.basic-workflow__heading h2 { margin-top: .18rem; font-size: 1rem; }
.basic-workflow__heading > p { color: var(--subtle); font-size: .58rem; white-space: nowrap; }
.basic-step, .basic-action-dock { display: grid; gap: .62rem; min-width: 0; padding: .68rem; border: 1px solid rgba(71,112,91,.62); border-radius: 11px; background: rgba(7,23,15,.48); }
.basic-step__heading { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: .55rem; min-width: 0; }
.basic-step__heading h3 { color: var(--ink); font-size: .76rem; }
.basic-step__heading p { margin-top: .12rem; color: var(--muted); font-size: .59rem; line-height: 1.35; }
.basic-step__number { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #4f9877; border-radius: 9px; color: var(--green-ink); background: var(--green); font-size: .7rem; font-weight: 900; }
.basic-file-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 42px; border: 1px solid #4e9b78; border-radius: 9px; padding: .48rem .7rem; color: var(--green-ink); background: var(--green); cursor: pointer; font-size: .72rem; font-weight: 800; }
.basic-file-button:hover { border-color: #79e0b0; background: #83e0b4; }
.basic-controls { display: grid; gap: .52rem; min-width: 0; }
.basic-control-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; min-width: 0; }
.basic-control-group--coverage { grid-template-columns: minmax(105px,.8fr) minmax(110px,1fr); }
.basic-control-group--icon { display: grid; grid-template-columns: 1fr; }
.basic-control, .basic-control-label { display: grid; gap: .25rem; min-width: 0; color: var(--muted); font-size: .58rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.basic-control select, .basic-control input { min-height: 40px; }
.basic-range-control { display: grid; grid-column: 2/-1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; min-width: 0; }
.basic-range-control .basic-control { min-width: 0; }
.basic-marker-picker { display: grid; grid-template-columns: repeat(5,minmax(44px,1fr)); gap: .3rem; min-width: 0; }
.basic-marker-picker button { display: grid; grid-template-rows: 1fr auto; place-items: center; gap: .08rem; min-width: 0; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; padding: .22rem .18rem; color: var(--muted); background: rgba(12,31,22,.9); cursor: pointer; font-size: .53rem; font-weight: 760; }
.basic-marker-picker button > span:first-child { color: var(--green); font-size: .85rem; line-height: 1; }
.basic-marker-picker button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-3); }
.basic-marker-picker button[aria-pressed="true"] { border-color: #4e9b78; color: var(--ink); background: rgba(52,103,78,.7); box-shadow: inset 0 0 0 1px rgba(116,215,168,.28); }
.basic-file-summary, .basic-export-estimate { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: .59rem; line-height: 1.4; }
.basic-export-estimate { color: var(--subtle); }
.basic-action-dock { gap: .62rem; padding: .72rem; }
.basic-actions { display: grid; grid-template-columns: minmax(100px,.72fr) minmax(140px,1.28fr); gap: .45rem; }
.basic-actions .button { min-height: 42px; font-size: .7rem; }
.basic-export-progress { display: grid; gap: .32rem; min-width: 0; padding: .52rem .58rem; border: 1px solid rgba(71,112,91,.72); border-radius: 10px; color: var(--muted); background: rgba(9,26,18,.5); }
.basic-export-progress[hidden] { display: none; }
.basic-export-progress__header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; font-size: .62rem; }
.basic-export-progress__header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basic-export-progress__header output { flex: 0 0 auto; color: var(--green); font-size: .68rem; font-variant-numeric: tabular-nums; font-weight: 800; }
.basic-export-progress progress { display: block; width: 100%; height: 8px; accent-color: var(--green); }

body[data-ui-mode="basic"] .app-shell { grid-template-columns: minmax(0,1fr); }
body[data-ui-mode="basic"] .journey-rail, body[data-ui-mode="basic"] .inspector { display: none; }
body[data-ui-mode="basic"] .mode-switch { display: none; }
body[data-ui-mode="basic"] .header-file-button { display: none; }
body[data-ui-mode="basic"] .header-export-button { display: none; }
body[data-ui-mode="basic"] .loader { display: none; }
body[data-ui-mode="basic"] .viewer-column { display: grid; grid-template-columns: minmax(280px,350px) minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: .7rem; height: calc(100vh - 64px); min-height: 0; min-width: 0; container-type: inline-size; padding: .7rem; overflow: auto; }
body[data-ui-mode="basic"] .basic-workflow { display: grid; grid-column: 1; grid-row: 1; align-content: start; align-self: stretch; overflow: auto; }
body[data-ui-mode="basic"] .basic-action-dock { display: grid; grid-column: 1; grid-row: 2; }
body[data-ui-mode="basic"]:not(.has-timeline) .basic-step--settings, body[data-ui-mode="basic"]:not(.has-timeline) .basic-action-dock { opacity: .55; }
body[data-ui-mode="basic"]:not(.has-timeline) .viewer-column { grid-template-columns: minmax(0,520px); grid-template-rows: auto auto; align-content: start; justify-content: center; }
body[data-ui-mode="basic"]:not(.has-timeline) .basic-workflow { align-self: start; }
body[data-ui-mode="basic"]:not(.has-timeline) .story-mode { display: none; }
body[data-ui-mode="basic"] .basic-control-group--timing { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-ui-mode="basic"] .story-mode { display: grid; grid-column: 2; grid-row: 1/3; align-items: center; justify-items: center; height: auto; min-height: 0; min-width: 0; container-type: size; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: #07100c; }
body[data-ui-mode="basic"] .story-mode.is-playback-detached { grid-template-rows: minmax(0,1fr); gap: 0; padding: 12px; }
body[data-ui-mode="basic"] .story-mode.is-playback-detached .story-stage { grid-row: auto; width: min(100%,calc(100cqh * var(--story-frame-ratio))); height: min(100%,calc(100cqw / var(--story-frame-ratio))); max-width: 100%; max-height: 100%; margin: 0; }
body[data-ui-mode="basic"] .story-stage { border-radius: 11px; box-shadow: 0 16px 44px rgba(0,0,0,.28), inset 0 0 80px rgba(0,0,0,.2); }
body[data-ui-mode="basic"] .playback-dock { display: none; }
body[data-ui-mode="advanced"] .basic-workflow, body[data-ui-mode="advanced"] .basic-action-dock { display: none !important; }

.story-mode, .story-stage, .explore-mode { width: 100%; height: 100%; min-height: 0; }
.story-mode { position: relative; }
.story-stage { position: relative; overflow: hidden; background: #08120e; box-shadow: inset 0 0 80px rgba(0,0,0,.2); }
.story-map-background, #story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-map-background { z-index: 0; }
.export-map-background { position: fixed; left: -100000px; top: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
#story-canvas { z-index: 1; }
.story-map-background .maplibregl-control-container { position: relative; z-index: 4; }
.stage-title, .explore-title { position: absolute; z-index: 4; top: 14px; left: 14px; display: grid; gap: .16rem; padding: .62rem .72rem; border: 1px solid rgba(73,106,94,.82); border-radius: 10px; background: rgba(8,22,16,.88); box-shadow: 0 10px 30px rgba(0,0,0,.24); backdrop-filter: blur(12px); pointer-events: none; }
.stage-title strong, .explore-title strong { font-size: .76rem; }
.stage-title span, .explore-title span { color: var(--muted); font-size: .6rem; }
.story-empty { position: absolute; z-index: 2; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(420px,80%); color: var(--muted); text-align: center; }
.story-stage[aria-busy="true"] .story-empty { display: flex; align-items: center; justify-content: center; gap: .55rem; width: auto; padding: .7rem .9rem; border: 1px solid rgba(75,125,103,.72); border-radius: 999px; color: #d9eee3; background: rgba(7,24,17,.9); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.story-stage[aria-busy="true"] .story-empty::before { content: ""; width: .82rem; height: .82rem; flex: 0 0 auto; border: 2px solid rgba(111,220,169,.25); border-top-color: var(--green); border-radius: 50%; animation: selection-spin .7s linear infinite; }
@keyframes selection-spin { to { transform: rotate(360deg); } }
.has-timeline .story-stage .stage-title { display: none; }
.story-summary { position: absolute; z-index: 3; top: 24px; left: 50%; display: grid; justify-items: center; gap: .18rem; width: max-content; max-width: calc(100% - 32px); padding: .7rem .9rem; border: 1px solid rgba(182,222,202,.28); border-radius: 12px; background: rgba(7,20,14,.72); box-shadow: 0 10px 32px rgba(0,0,0,.2); font-size: clamp(.95rem,2vw,1.45rem); font-weight: 820; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.85); transform: translateX(-50%); backdrop-filter: blur(10px); pointer-events: none; }
.story-summary > strong { display: -webkit-box; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; font-size: 1.18em; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.story-summary__details { display: grid; justify-items: center; gap: .12rem; width: 100%; min-width: 0; max-width: 100%; }
.story-summary__details > span { min-width: 0; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; }
.story-summary #story-time { color: #c8dbd0; font-size: .66em; font-weight: 700; }
.story-topline { display: flex; justify-content: center; gap: .7rem; width: 100%; color: #c8dbd0; font-size: .58em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.story-summary[data-preset="light"], .story-summary[data-preset="minimal"] { border-color: rgba(20,45,33,.2); color: #102018; background: rgba(255,255,255,.78); text-shadow: none; }
.story-summary[data-preset="light"] #story-time, .story-summary[data-preset="minimal"] #story-time,
.story-summary[data-preset="light"] .story-topline, .story-summary[data-preset="minimal"] .story-topline { color: #587064; }
.story-stage[data-frame] { height: auto; max-height: 100%; width: min(100%,calc((100vh - 64px) * var(--story-frame-ratio))); aspect-ratio: var(--story-frame-aspect); margin: auto; }
.story-stage[data-frame="landscape"] { --story-frame-ratio: 1.7777778; --story-frame-aspect: 16/9; }
.story-stage[data-frame="portrait"] { --story-frame-ratio: .5625; --story-frame-aspect: 9/16; }
.story-stage[data-frame="square"] { --story-frame-ratio: 1; --story-frame-aspect: 1/1; }
.story-stage[data-frame="classic"] { --story-frame-ratio: 1.3333333; --story-frame-aspect: 4/3; }
.story-stage[data-frame="ultrawide"] { --story-frame-ratio: 2.3333333; --story-frame-aspect: 21/9; }
.story-mode.is-playback-detached { display: grid; grid-template-rows: minmax(0,1fr) auto; justify-items: center; gap: 10px; padding: 10px; }
.story-mode.is-playback-detached .story-stage { grid-row: 1; width: auto; height: 100%; max-width: 100%; max-height: 100%; margin: 0; }
.story-mode.is-playback-detached .playback-dock { position: static; width: min(100%,760px); }
.playback-dock { position: absolute; z-index: 8; right: 14px; bottom: 14px; left: 14px; display: grid; grid-template-columns: max-content minmax(120px,1fr) minmax(250px,310px); align-items: center; gap: .55rem; min-height: 76px; padding: .7rem; border: 1px solid rgba(73,106,94,.9); border-radius: 13px; background: rgba(7,20,14,.93); box-shadow: 0 16px 44px rgba(0,0,0,.38); backdrop-filter: blur(14px); }
.playback-buttons { display: grid; grid-template-columns: 38px 76px; gap: .55rem; min-width: 0; }
.playback-settings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: center; gap: .55rem; min-width: 0; }
.circle-button { width: 38px; height: 38px; border-radius: 9px; }
.play-button { min-height: 38px; border: 1px solid #55aa82; border-radius: 9px; color: var(--green-ink); background: var(--green); cursor: pointer; font-size: .72rem; font-weight: 820; }
.playback-timeline { display: grid; gap: .24rem; min-width: 0; }
.playback-hint { color: var(--subtle); font-size: .55rem; }
#playback-slider, #speed-select, .control input[type="range"] { width: 100%; accent-color: var(--green); }
.speed-control, .duration-control { min-width: 0; }
.speed-control span, .duration-control span { display: flex; justify-content: space-between; }
.speed-control output, .control output { color: var(--ink); text-transform: none; }

.explore-mode { display: grid; grid-template-rows: minmax(0,1fr) auto; }
.map-panel { position: relative; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--border); }
.map { position: absolute; inset: 0; }
.map-status { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: min(400px,80%); padding: .8rem; border: 1px solid #aa8842; border-radius: 10px; color: #5c4300; background: rgba(255,236,181,.95); text-align: center; }
.map-legend { position: absolute; z-index: 3; right: 12px; bottom: 12px; width: min(245px,calc(100% - 24px)); padding: .65rem .72rem; border: 1px solid rgba(80,103,94,.72); border-radius: 10px; color: #172019; background: rgba(250,252,251,.92); box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: .62rem; backdrop-filter: blur(10px); }
.map-legend__heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.map-legend strong { font-size: .68rem; }
.map-legend__toggle { display: none; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(50,77,65,.3); border-radius: 7px; color: #183f2e; background: rgba(255,255,255,.64); cursor: pointer; }
.map-legend__toggle span { transition: transform .2s ease; }
.map-legend__toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.map-legend__content { display: grid; grid-template-columns: repeat(2,auto); gap: .38rem .7rem; margin-top: .42rem; }
.map-legend__content span { display: flex; align-items: center; gap: .25rem; }
.map-legend__content small { grid-column: 1/-1; color: #56645e; line-height: 1.35; }
.legend-line { width: 18px; border-top: 3px solid; }
.legend-line.walking { border-color: #16a34a; }
.legend-line.driving { border-color: #2563eb; }
.legend-line.transit { border-color: #7c3aed; }
.legend-line.gap { border-color: #dc2626; border-top-style: dashed; }
.stats-panel { padding: .65rem .75rem .75rem; background: var(--surface); }
.stats-grid { display: grid; grid-template-columns: repeat(6,minmax(90px,1fr)); gap: .4rem; }
.stat { display: grid; gap: .12rem; padding: .48rem .55rem; border-radius: 8px; background: var(--surface-2); }
.stat span { color: var(--muted); font-size: .57rem; }
.stat strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }

.inspector-heading { padding: .9rem; border-bottom: 1px solid var(--border); }
.inspector-state { padding: .18rem .42rem; border-radius: 999px; color: var(--green); background: rgba(116,215,168,.1); font-size: .58rem; }
.frame-control { display: grid; gap: .72rem; padding: .78rem .9rem .85rem; border-bottom: 1px solid var(--border); background: linear-gradient(135deg,rgba(43,88,68,.28),rgba(14,29,23,.2)); }
.frame-control__heading { display: flex; align-items: center; gap: .58rem; }
.frame-control__heading p { margin-top: .12rem; color: var(--muted); font-size: .57rem; }
.frame-control__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid #47755f; border-radius: 8px; color: var(--green); background: rgba(37,80,61,.45); font-size: .78rem; }
.clip-panel, .diagnostics-panel { border-bottom: 1px solid var(--border); }
.clip-panel summary, .diagnostics-panel summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .72rem .9rem; color: var(--ink); cursor: pointer; font-size: .72rem; font-weight: 760; list-style: none; }
.clip-panel summary::-webkit-details-marker, .diagnostics-panel summary::-webkit-details-marker { display: none; }
.clip-panel summary small, .diagnostics-panel summary small { color: var(--muted); font-size: .58rem; font-weight: 650; }
.clip-panel summary b, .diagnostics-panel summary b { margin-right: .3rem; color: var(--green); }
.tool-body { display: grid; gap: .65rem; padding: 0 .9rem .85rem; }
.inspector-tabs { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: .55rem; border-bottom: 1px solid var(--border); background: rgba(15,31,25,.96); backdrop-filter: blur(10px); }
.inspector-tabs button { min-width: 0; min-height: 38px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: .67rem; font-weight: 780; }
.inspector-tabs button span { margin-right: .2rem; }
.inspector-tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface-4); }
.inspector-panels { min-height: 330px; }
.inspector-panel { padding: .9rem; }
.panel-group { display: grid; gap: .72rem; }
.panel-group + .panel-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.group-title { margin-bottom: .05rem; }
.group-title span { color: var(--subtle); font-size: .58rem; }
.control > span { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.control select { min-width: 0; }
.control input[type="color"] { width: 100%; min-height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 3px; background: #0c1a15; }
.toggle-control { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem 0 .15rem; border-top: 1px solid var(--border); cursor: pointer; }
.toggle-control > span { display: grid; gap: .12rem; }
.toggle-control strong { font-size: .69rem; }
.toggle-control small { color: var(--muted); font-size: .57rem; }
.toggle-control input, .toggle-list input { accent-color: var(--green); }
.label-lookup-status { min-height: 29px; padding: .5rem .58rem; border: 1px solid #3b634f; border-radius: 8px; color: #b7d4c7; background: rgba(35,72,56,.3); font-size: .61rem; line-height: 1.35; }
.toggle-list { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.toggle-list label { display: flex; align-items: center; gap: .4rem; min-height: 34px; padding: .45rem .5rem; border: 1px solid var(--border); border-radius: 8px; background: #0c1a15; cursor: pointer; font-size: .65rem; }
.privacy-note { display: flex; align-items: flex-start; gap: .5rem; margin-top: .9rem; padding: .65rem; border: 1px solid #3b634f; border-radius: 9px; color: #a9c8ba; background: rgba(34,73,56,.32); }
.privacy-note > span { color: var(--green); font-size: .62rem; }
.privacy-note p, .helper-copy { color: var(--muted); font-size: .61rem; line-height: 1.48; }
.helper-copy { margin-top: .68rem; }
.export-preview { position: relative; display: grid; place-items: center; min-height: 124px; margin-bottom: .9rem; overflow: hidden; border: 1px solid #456a5b; border-radius: 10px; background: radial-gradient(circle at 57% 48%,#30624d 0 7%,transparent 8%),linear-gradient(135deg,#173127,#091512); }
.export-preview::before { position: absolute; inset: 10px; border: 1px dashed rgba(220,245,233,.38); border-radius: 5px; content: ""; }
.export-preview span { position: absolute; top: 14px; left: 16px; color: #aec5bc; font-size: .58rem; }
.export-preview strong { z-index: 1; font-size: 1.05rem; }
.export-preview i { position: absolute; width: 44%; height: 3px; border-radius: 999px; background: var(--green); transform: rotate(-19deg); box-shadow: 0 0 10px rgba(116,215,168,.5); }
.export-format { color: var(--muted); font-size: .6rem; line-height: 1.4; }
.export-estimate { color: var(--subtle); font-size: .58rem; line-height: 1.45; }
.export-estimate[data-level="warning"] { color: #d9b86c; }
.export-estimate[data-level="advanced"] { color: #ef9d82; }
.export-actions { display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
.inspector progress { width: 100%; accent-color: var(--green); }
.diagnostics-panel { border-top: 1px solid var(--border); border-bottom: 0; }
.diagnostics-content { padding: 0 .9rem .9rem; }
.diagnostics-content dl { display: grid; grid-template-columns: minmax(90px,.45fr) 1fr; margin: 0; font-size: .62rem; }
.diagnostics-content dt, .diagnostics-content dd { margin: 0; padding: .42rem; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.diagnostics-content dt { color: var(--muted); font-weight: 700; }
footer { display: none; }

@media (max-width: 1180px) {
  body { overflow: auto; }
  .app-header { grid-template-columns: 1fr auto 1fr; }
  .header-modes { gap: .25rem; }
  .app-shell { grid-template-columns: 260px minmax(420px,1fr); height: auto; min-height: calc(100vh - 64px); }
  .viewer-column { min-height: 720px; }
  .inspector { grid-column: 1/-1; display: grid; grid-template-columns: 220px minmax(0,1fr); max-height: none; border-top: 1px solid var(--border); border-left: 0; }
  .inspector-heading { grid-column: 1; }
  .frame-control { grid-column: 1; }
  .clip-panel { grid-column: 1; }
  .inspector-tabs { grid-column: 1; position: static; align-content: start; grid-template-columns: 1fr; border-right: 1px solid var(--border); border-bottom: 0; }
  .inspector-panels { grid-column: 2; grid-row: 1/6; }
  .diagnostics-panel { grid-column: 1; }
  .inspector-panel { max-width: 760px; }
  .stats-grid { grid-template-columns: repeat(4,minmax(90px,1fr)); }
}

@media (max-width: 820px) {
  .app-header { grid-template-columns: 1fr auto; height: auto; min-height: 64px; padding-top: .55rem; padding-bottom: .55rem; }
  .header-modes { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); width: 100%; }
  .header-modes .ui-mode-switch, .header-modes .mode-switch { width: 100%; }
  .header-modes .mode-switch { grid-column: auto; grid-row: auto; }
  .ui-mode-switch button, .mode-switch button { flex: 1; min-width: 0; }
  .ui-mode-switch button, .mode-switch button { padding: .36rem .46rem; font-size: .68rem; }
  .ui-mode-switch button { padding-right: .2rem; padding-left: .2rem; font-size: .64rem; }
  body[data-ui-mode="basic"] .header-modes { grid-template-columns: minmax(0,1fr); }
  .file-info { display: none; }
  .header-export-button { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .journey-rail { grid-template-rows: auto minmax(260px,360px); border-right: 0; border-bottom: 1px solid var(--border); }
  .viewer-column { min-height: 660px; }
  body[data-ui-mode="basic"] .viewer-column { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0,1fr); gap: .55rem; height: auto; min-height: calc(100vh - 64px); padding: .55rem; overflow: visible; }
  body[data-ui-mode="basic"] .basic-workflow { grid-column: 1; grid-row: 1; overflow: visible; }
  body[data-ui-mode="basic"] .basic-action-dock { grid-column: 1; grid-row: 2; }
  body[data-ui-mode="basic"] .story-mode { grid-column: 1; grid-row: 3; padding: 8px; }
  .inspector { grid-column: 1; }
  .stats-grid { grid-template-columns: repeat(3,minmax(90px,1fr)); }
  .playback-dock { grid-template-columns: 38px 72px minmax(0,1fr); }
  .playback-buttons { grid-column: 1/3; grid-row: 1; }
  .playback-timeline { grid-column: 3/-1; grid-row: 1; }
  .playback-settings { grid-column: 1/-1; grid-row: 2; }
  .basic-controls { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .app-header { gap: .5rem; }
  .brand-copy p { display: none; }
  .header-file-button span:last-child { display: none; }
  .header-file-button { width: 38px; padding: 0; }
  .journey-rail { grid-template-rows: auto 310px; }
  .viewer-column { min-height: 580px; }
  .stage-title, .explore-title { right: 12px; }
  .story-summary { max-width: calc(100% - 24px); }
  .playback-dock { right: 8px; bottom: 8px; left: 8px; grid-template-columns: 36px 65px minmax(0,1fr); gap: .4rem; padding: .55rem; }
  .playback-buttons { grid-column: 1/3; grid-row: 1; }
  .playback-timeline { grid-column: 1/-1; grid-row: 2; }
  .playback-settings { grid-column: 1/-1; grid-row: 3; grid-template-columns: 1fr; }
  .speed-control input[type="range"] { min-height: 30px; }
  .duration-control select { min-height: 42px; }
  .playback-hint { display: none; }
  .mode-entry { place-items: start center; padding: .75rem; }
  .mode-entry__panel { gap: .62rem; padding: 1rem; border-radius: 18px; }
  .mode-entry__brand { margin-bottom: .3rem; }
  .mode-entry__choices { grid-template-columns: 1fr; gap: .55rem; }
  .mode-choice { grid-template-columns: 38px minmax(0,1fr); grid-template-rows: auto auto auto; column-gap: .7rem; min-height: 0; padding: .78rem; }
  .mode-choice__top { grid-column: 1; grid-row: 1/4; align-self: start; width: auto; }
  .mode-choice__tag { position: absolute; top: .78rem; right: .78rem; }
  .mode-choice strong, .mode-choice > span:not(.mode-choice__top), .mode-choice small { grid-column: 2; margin-top: 0; }
  .mode-entry__hint { margin-top: 0; }
  .basic-workflow { padding: .65rem; }
  .basic-workflow__heading { align-items: flex-start; }
  .basic-workflow__heading h2 { font-size: .9rem; }
  .basic-controls { grid-template-columns: 1fr; }
  .basic-control-group--coverage, .basic-control-group--icon { grid-column: auto; }
  body[data-ui-mode="basic"] .viewer-column { height: auto; min-height: 0; grid-template-rows: auto auto auto; overflow: visible; }
  body[data-ui-mode="basic"] .story-mode { min-height: calc((100cqi - 1.1rem - 24px) / .5625 + 24px); }
  body[data-ui-mode="basic"] .basic-control-group--timing { grid-template-columns: 1fr; }
  body[data-ui-mode="basic"] .basic-control-group--timing .basic-control select { min-height: 42px; font-size: .74rem; }
  body[data-ui-mode="advanced"].has-timeline .viewer-column { height: auto; min-height: 0; overflow: visible; container-type: inline-size; }
  body[data-ui-mode="advanced"].has-timeline .story-mode.is-playback-detached { height: auto; min-height: calc((100cqi - 20px) / var(--mobile-story-frame-ratio, .5625) + 227px); }
  body[data-ui-mode="advanced"].has-timeline .story-mode.is-playback-detached[data-frame="landscape"] { --mobile-story-frame-ratio: 1.7777778; }
  body[data-ui-mode="advanced"].has-timeline .story-mode.is-playback-detached[data-frame="square"] { --mobile-story-frame-ratio: 1; }
  body[data-ui-mode="advanced"].has-timeline .story-mode.is-playback-detached[data-frame="classic"] { --mobile-story-frame-ratio: 1.3333333; }
  body[data-ui-mode="advanced"].has-timeline .story-mode.is-playback-detached[data-frame="ultrawide"] { --mobile-story-frame-ratio: 2.3333333; }
  .basic-control-group--coverage { grid-template-columns: minmax(100px,.78fr) minmax(0,1fr); }
  .basic-control-group--icon { grid-template-columns: 1fr; gap: .4rem; }
  .basic-marker-picker { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .basic-range-control { grid-column: 2/-1; }
  .basic-actions { grid-template-columns: minmax(92px,.68fr) minmax(132px,1.32fr); }
  .basic-actions .button { width: 100%; }
  .map-legend { right: 8px; bottom: 8px; max-width: 210px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(80px,1fr)); }
  .inspector { display: block; }
  .inspector-tabs { position: sticky; grid-template-columns: repeat(3,1fr); border-right: 0; border-bottom: 1px solid var(--border); }
  .inspector-panels { min-height: 0; }
  .export-actions { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .header-modes { grid-template-columns: 1fr; gap: .35rem; }
  .header-modes .ui-mode-switch, .header-modes .mode-switch { width: 100%; }
}

@media (max-width: 820px) {
  .mobile-panel-toggle { display: grid; }
  .timeline-panel.is-collapsed { min-height: auto; padding-bottom: .85rem; }
  .timeline-panel.is-collapsed .section-heading--compact { margin-bottom: 0; }
  .timeline-panel.is-collapsed .timeline-list { display: none; }
  .journey-rail:has(.timeline-panel.is-collapsed) { grid-template-rows: auto auto; }
  .inspector.is-collapsed { display: block; }
  .inspector.is-collapsed > :not(.inspector-heading) { display: none; }
  .inspector.is-collapsed .inspector-heading { border-bottom: 0; }
  .stats-panel.is-collapsed { padding-bottom: .65rem; }
  .stats-panel.is-collapsed .section-heading--compact { margin-bottom: 0; }
  .stats-panel.is-collapsed .stats-grid { display: none; }
  .story-mode { display: grid; grid-template-rows: minmax(0,1fr) auto; justify-items: center; gap: 8px; padding: 8px; }
  .story-mode .story-stage { grid-row: 1; max-width: 100%; max-height: 100%; margin: 0; }
  .story-mode .playback-dock { position: static; width: 100%; }
  .explore-title { top: 8px; right: auto; left: 8px; padding: .46rem .55rem; }
  .explore-title span { display: none; }
  .map-legend { right: 8px; bottom: 8px; width: auto; min-width: 126px; padding: .38rem .42rem; }
  .map-legend__toggle { display: grid; }
  .map-legend:has(.map-legend__toggle[aria-expanded="false"]) .map-legend__content { display: none; }
  .map-legend__content { min-width: 190px; }
}