@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap");

[data-feature-disabled="true"] { display:none !important; }

:root {
  color-scheme: dark;
  --bg: #04060b;
  --panel: rgba(10, 15, 24, 0.78);
  --panel-strong: rgba(7, 11, 18, 0.94);
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f2f4f5;
  --muted: #8c949f;
  --blue: #72a9ff;
  --cyan: #85d9ff;
  --gold: #ffca72;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--text); font-family: Manrope, system-ui, sans-serif; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.top-toolbar {
  position: fixed; z-index: 25; top: 19px; right: 18px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.exploration-mode-toggle, .cinematic-mode-toggle, .help-mode-toggle, .events-mode-toggle, .top-toolbar-action {
  position: static; z-index: auto; width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center; padding: 0;
  border-radius: 50%; color: #aebdcd;
  transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.help-mode-toggle { font: 600 16px/1 "Space Grotesk", sans-serif; }
.events-mode-toggle { font-size: 13px; }
.top-toolbar-action { font: 600 13px/1 "Space Grotesk", sans-serif; }
.top-toolbar-action:hover, .top-toolbar-action:focus-visible { color:#eef7ff; border-color:rgba(114,169,255,.5); }
#dual-screen-button[hidden] { display:none !important; }
.dual-screen-icon { display:block; margin-left:-1px; font:600 10px/1 "JetBrains Mono",monospace; letter-spacing:-.28em; }
.exploration-mode-toggle:hover, .exploration-mode-toggle:focus-visible, .cinematic-mode-toggle:hover, .cinematic-mode-toggle:focus-visible, .help-mode-toggle:hover, .help-mode-toggle:focus-visible, .events-mode-toggle:hover, .events-mode-toggle:focus-visible { color: #eef7ff; border-color: rgba(114,169,255,.5); }
.exploration-eye { width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.cinematic-icon { width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.cinematic-orbit { stroke: #9ed8ff; opacity: .5; transition: opacity .2s ease; }
.eye-iris { fill: rgba(133,217,255,.18); stroke: #bfeaff; filter: drop-shadow(0 0 3px rgba(133,217,255,.65)); transition: opacity .2s ease; }
.eye-slash { opacity: 0; stroke: #d7eaff; stroke-width: 1.6; filter: drop-shadow(0 0 2px rgba(4,6,11,.9)); transition: opacity .2s ease; }
.exploration-mode .exploration-mode-toggle { color: #d7eaff; background: rgba(10,17,27,.66); border-color: rgba(114,169,255,.38); opacity: .62; }
.exploration-mode .exploration-mode-toggle:hover, .exploration-mode .exploration-mode-toggle:focus-visible { opacity: 1; }
.cinematic-mode-toggle.active { color: #e3f4ff; background: rgba(49,118,189,.34); border-color: rgba(128,200,255,.68); box-shadow: 0 0 16px rgba(76,159,239,.22), inset 0 0 12px rgba(132,206,255,.12); }
.cinematic-mode-toggle.active .cinematic-orbit { opacity: 1; filter: drop-shadow(0 0 3px rgba(133,217,255,.8)); }
.exploration-mode .eye-iris { opacity: .3; }
.exploration-mode .eye-slash { opacity: 1; }
.exploration-date {
  position: fixed; z-index: 25; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); pointer-events: none;
  min-width: 292px; padding: 13px 17px 14px; border-right: 2px solid rgba(112,174,255,.56);
  background: linear-gradient(90deg, transparent, rgba(5,9,16,.5)); text-align: right;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.exploration-date span { display: block; margin-bottom: 4px; color: rgba(119,176,255,.68); font: 600 8px "Space Grotesk", sans-serif; letter-spacing: .24em; }
.exploration-date time { display: block; color: rgba(237,246,255,.88); font: 500 18px/1.15 "Space Grotesk", Manrope, sans-serif; letter-spacing: .035em; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(111,174,255,.16); }
.exploration-mode .exploration-date { opacity: 1; transform: translateY(0); }

.render-host { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #03050a; }
#space-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.voyager-nac-optical-mask { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.voyager-nac-optical-mask::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(100vw, 100vh); height: min(100vw, 100vh);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax #000;
  outline: 1px solid rgba(255,255,255,.07);
}
#app::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 48% 44%, transparent 25%, rgba(2, 4, 8, .12) 60%, rgba(1, 2, 5, .66) 100%);
}

.glass-panel {
  background: linear-gradient(145deg, rgba(17, 24, 36, .78), rgba(6, 9, 15, .76));
  border: 1px solid var(--line);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px) saturate(125%);
}

.topbar {
  display: none !important;
}
.brand { display: flex; align-items: center; min-width: 0; }
.brand-logo { display: block; width: min(29vw, 292px); height: auto; max-height: 54px; object-fit: contain; object-position: left center; border-radius: 5px; }
.eyebrow { margin: 0 0 3px; color: #718096; letter-spacing: .19em; font: 500 9px/1.2 "JetBrains Mono", monospace; }
.time-readout { position: relative; min-width: 356px; padding: 8px 30px 7px; text-align: center; display: flex; flex-direction: column; gap: 3px; border-inline: 1px solid rgba(112,169,255,.12); background: radial-gradient(ellipse at center, rgba(75,128,202,.09), transparent 72%); }
.time-readout::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(105,171,255,.65), transparent); box-shadow: 0 0 10px rgba(105,171,255,.3); }
.readout-label { color: rgba(126,180,250,.72); letter-spacing: .22em; font: 600 8px "Space Grotesk", sans-serif; }
.time-readout strong { color: #f1f7ff; font: 500 21px/1.15 "Space Grotesk", Manrope, sans-serif; letter-spacing: .035em; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(111,174,255,.16); }
.icon-button { justify-self: end; width: 34px; height: 34px; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: #acb5bf; }
.icon-button:hover { border-color: var(--blue); color: white; }

.info-panel { position: fixed; z-index: 9; top: 24px; left: 0; width: 400px; max-height: calc(100vh - 44px); overflow-y: auto; scrollbar-width: thin; border-width: 1px 1px 1px 0; border-radius: 0 18px 18px 0; padding: 20px; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 18px; }
.panel-heading h2 { margin: 0; font-size: 17px; font-weight: 500; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #79e5b2; box-shadow: 0 0 12px #79e5b2; margin: 8px 3px 0 0; }
.status-dot.paused { background: #ffca72; box-shadow: 0 0 12px #ffca72; }
.data-grid small { display: block; color: var(--muted); font: 500 8px "JetBrains Mono", monospace; letter-spacing: .13em; margin-bottom: 4px; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 12px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.data-grid strong { font: 500 11px "JetBrains Mono", monospace; color: #dfe5ec; }
.system-state-description-block { margin: 0; padding: 13px 2px 1px 11px; border-left: 1px solid rgba(111,174,255,.24); }
.system-state-description-block[hidden] { display: none !important; }
.system-state-description { margin: 0; color: #aab9c8; font: 400 12px/1.58 "Space Grotesk", sans-serif; letter-spacing: .01em; }
.section-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.section-title { display: flex; justify-content: space-between; color: #aeb6c0; font-size: 10px; margin-bottom: 10px; }
.section-title span:last-child { color: var(--blue); }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.22); }
.segmented button { flex: 1; border: 0; border-radius: 5px; background: transparent; color: #78818d; padding: 7px 6px; font-size: 9px; transition: .2s; }
.segmented button:hover { color: white; }
.segmented button.active { background: rgba(110, 160, 234, .16); color: #d8e9ff; box-shadow: inset 0 0 0 1px rgba(115,169,255,.22); }
.segmented button:disabled { opacity: .34; cursor: not-allowed; }
.view-submenu [data-view]:disabled,
[data-view-group="spacecraft"] .view-group-label:disabled,
[data-view-group="probes"] .view-group-label:disabled { opacity: .3; cursor: not-allowed; filter: saturate(.25); }
.view-submenu [data-view]:disabled:hover,
[data-view-group="spacecraft"] .view-group-label:disabled:hover,
[data-view-group="probes"] .view-group-label:disabled:hover { color: inherit; background: transparent; }
.performance-block { display: grid; gap: 9px; }
.performance-block .section-title { margin-bottom: 1px; }
.performance-mode-row { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; color: #acb4be; font-size: 10px; }
.performance-mode-row select {
  min-width: 0; width: 100%; height: 30px; padding: 0 28px 0 9px;
  border: 1px solid rgba(120,170,220,.20); border-radius: 8px; outline: none;
  background: rgba(3,8,15,.72); color: #dce7f4;
  font: 600 9px "JetBrains Mono", monospace; cursor: pointer;
}
.performance-mode-row select:focus { border-color: rgba(115,169,255,.48); box-shadow: 0 0 0 1px rgba(115,169,255,.10); }
.performance-detail { display: block; min-height: 26px; color: #788797; font: 500 8px/1.45 "JetBrains Mono", monospace; }

.compact-options { display: grid; gap: 12px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; color: #acb4be; font-size: 10px; cursor: pointer; }
.switch-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.switch-row input { position: absolute; opacity: 0; }
.switch { width: 29px; height: 16px; background: #222a35; border-radius: 12px; padding: 2px; transition: .2s; }
.switch::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: #68727e; transition: .2s; }
.switch-row input:checked + .switch { background: rgba(70,124,202,.6); }
.switch-row input:checked + .switch::after { transform: translateX(13px); background: #cce4ff; }

.user-debug-switch { margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.user-debug-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.user-debug-readout[hidden] { display: none !important; }
.user-debug-badge {
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid rgba(120,170,220,.22);
  border-radius: 8px;
  background: rgba(5,10,17,.62);
  font: 700 10px/1 "JetBrains Mono", monospace;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}
.user-debug-badge--fps { color: #a8dfff; border-color: rgba(83,185,244,.30); background: rgba(21,74,105,.20); }
.user-debug-badge--fps.is-good { color: #91e6b0; border-color: rgba(74,204,124,.34); background: rgba(24,91,50,.22); }
.user-debug-badge--fps.is-warn { color: #ffd185; border-color: rgba(236,173,71,.35); background: rgba(104,67,20,.23); }
.user-debug-badge--fps.is-low { color: #ff9b9b; border-color: rgba(236,91,91,.36); background: rgba(105,35,35,.24); }
.user-debug-badge--gpu { color: #c6b0ff; border-color: rgba(159,124,241,.34); background: rgba(69,45,121,.23); }
.user-debug-badge--texture { color: #9be5bd; border-color: rgba(83,207,143,.34); background: rgba(28,91,61,.23); }

.view-controls { position: fixed; z-index: 9; right: 0; top: 68px; border-width: 1px 0 1px 1px; border-radius: 18px 0 0 18px; padding: 6px; display: flex; flex-direction: column; overflow: visible; }
.view-controls button { position: relative; width: 128px; border: 0; background: transparent; color: #8d96a2; padding: 10px 12px; border-radius: 9px; font-size: 9px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; }
.view-controls button span { font-size: 13px; }
.view-controls button:hover { color: white; }
.view-controls button.active { color: #ddecff; background: rgba(102,157,238,.14); }
.view-controls [data-view]:not([data-view="system"]).active::after,
.view-controls [data-view]:not([data-view="system"]).is-selected::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; }
.view-controls [data-view]:not([data-view="system"]).active::after { background: #8fd0ff; box-shadow: 0 0 5px rgba(143,208,255,.95), 0 0 11px rgba(98,171,255,.72); }
.view-controls [data-view]:not([data-view="system"]).is-selected:not(.active)::after { background: #ffc66d; box-shadow: 0 0 5px rgba(255,198,109,.95), 0 0 11px rgba(255,165,65,.68); }
.view-controls button.capturing { color: #fff2bb; background: rgba(255,210,104,.18); }

.view-controls .view-group { position: relative; width: 128px; }
.view-controls .view-group-row { display: flex; align-items: stretch; width: 100%; }
.view-controls .view-group-row > [data-view] { flex: 1 1 auto; min-width: 0; width: auto; }
.view-controls .view-group-toggle { position: relative; flex: 0 0 27px; width: 27px; padding: 0; justify-content: center; gap: 0; color: #657080; }
.view-controls .view-group-toggle:hover { color: #ddecff; }
.view-controls .view-group-chevron { font-size: 15px; line-height: 1; transition: transform .16s ease; }
.view-controls .view-group.expanded .view-group-chevron { transform: rotate(180deg); }
.view-controls .view-group-active-dot { position: absolute; top: 7px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #8fd0ff; box-shadow: 0 0 5px rgba(143,208,255,.95), 0 0 11px rgba(98,171,255,.72); opacity: 0; }
.view-controls .view-group.contains-active .view-group-active-dot { opacity: 1; }
.view-controls .view-group.contains-selected:not(.contains-active) .view-group-active-dot { opacity: 1; background: #ffc66d; box-shadow: 0 0 5px rgba(255,198,109,.95), 0 0 11px rgba(255,165,65,.68); }
.view-controls .view-submenu { position: absolute; z-index: 12; right: calc(100% + 9px); top: -5px; width: 138px; padding: 5px; border: 1px solid rgba(160,190,225,.14); border-radius: 12px; background: rgba(9,14,22,.91); box-shadow: 0 12px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(7px) scale(.985); transform-origin: right top; transition: opacity .13s ease, transform .15s ease, visibility 0s linear .15s; }
.view-controls .view-submenu::after { content: ""; position: absolute; right: -5px; top: 17px; width: 9px; height: 9px; border-top: 1px solid rgba(160,190,225,.14); border-right: 1px solid rgba(160,190,225,.14); background: rgba(9,14,22,.91); transform: rotate(45deg); }
.view-controls .view-submenu > button { position: relative; z-index: 1; width: 128px; margin: 0; padding: 9px 10px; color: #7d8998; font-size: 9px; }
.view-controls .view-group.expanded .view-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) scale(1); transition-delay: 0s; }
.view-controls .view-submenu button:hover { color: #eef6ff; background: rgba(102,157,238,.08); }
.view-controls .view-submenu button.active { color: #ddecff; background: rgba(102,157,238,.14); }
.view-controls .spacecraft-view-group, .view-controls .deep-space-view-group { margin-top: 2px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 2px; }
.view-controls .spacecraft-view-group .view-group-label, .view-controls .deep-space-view-group .view-group-label { position: relative; width: 128px; flex: 1 1 auto; padding-right: 27px; }
.view-controls .spacecraft-view-group .view-group-label .view-group-chevron, .view-controls .deep-space-view-group .view-group-label .view-group-chevron { position: absolute; right: 8px; }
.view-controls .spacecraft-view-group .view-group-label .view-group-active-dot, .view-controls .deep-space-view-group .view-group-label .view-group-active-dot { right: 20px; }

.view-controls .sagittarius-cinematic-button { margin-top: 2px; border-top: 1px solid rgba(255,255,255,.07); color: #89b8ef; background: rgba(82,138,216,.045); }
.view-controls .sagittarius-cinematic-button:hover { color: #eaf5ff; background: rgba(82,138,216,.11); }
.view-controls .sagittarius-cinematic-button.active { color: #eef7ff; background: rgba(82,138,216,.19); box-shadow: inset 0 0 0 1px rgba(130,190,255,.18), 0 0 18px rgba(71,145,255,.10); }
.view-controls .sagittarius-cinematic-button.active span:first-child { color: #a9d2ff; text-shadow: 0 0 12px rgba(101,174,255,.65); }
.view-controls .sagittarius-cinematic-button[hidden], .cinematic-mode-toggle[hidden] { display: none !important; }

.view-controls .iss-camera-selector { margin-top: 2px; }
.view-controls .iss-camera-selector .view-group-label { position: relative; width: 128px; padding-right: 24px; }
.view-controls .iss-camera-selector .iss-camera-button-label { min-width: 0; white-space: nowrap; overflow: visible; text-overflow: clip; font-size: clamp(7.2px, .58vw, 8.4px); letter-spacing: -.15px; }
.view-controls .iss-camera-selector .view-group-label { gap: 5px; padding-left: 10px; }
.view-controls .iss-camera-selector .view-group-label > span:first-child { flex: 0 0 auto; }
.view-controls .iss-camera-selector .view-group-chevron { position: absolute; right: 8px; }
.view-controls .iss-camera-submenu > button { justify-content: flex-start; }
.view-controls .iss-camera-submenu > button.active { color: #ddecff; background: rgba(102,157,238,.14); }
.view-controls .inspection-light-button { margin-top: 2px; border-top: 1px solid rgba(255,255,255,.07); border-radius: 0 0 9px 9px; color: #535b66; cursor: not-allowed; opacity: .5; }
.view-controls .inspection-light-button span { color: #59616c; text-shadow: none; }
.view-controls .inspection-light-button.available { color: #d6b36d; cursor: pointer; opacity: 1; background: rgba(255,196,91,.045); box-shadow: inset 0 0 0 1px rgba(255,205,118,.08); }
.view-controls .inspection-light-button.available span { color: #e6bd6b; text-shadow: 0 0 9px rgba(255,202,114,.34); }
.view-controls .inspection-light-button.available:hover { color: #fff0c9; background: rgba(255,196,91,.1); }
.view-controls .inspection-light-button.active { color: #fff2cd; background: rgba(255,196,91,.19); box-shadow: inset 0 0 0 1px rgba(255,215,143,.26), 0 0 18px rgba(255,177,67,.11); }
.view-controls .inspection-light-button.active span { color: #ffd27f; text-shadow: 0 0 13px rgba(255,196,91,.72); }
.nav-divider { width: auto; height: 1px; background: var(--line); margin: 4px 6px; }

.timeline-panel { position: fixed; z-index: 9; left: 50%; transform: translate(-50%, 0); bottom: 0; width: min(840px, calc(100vw - 430px)); border-width: 1px 1px 0; border-radius: 18px 18px 0 0; padding: 13px 18px calc(12px + env(safe-area-inset-bottom)); }
.timeline-top { display: grid; grid-template-columns: minmax(330px, auto) minmax(260px, 1fr); gap: 26px; align-items: center; }
.transport { display: flex; align-items: center; gap: 6px; min-width: 0; }
.transport button { flex: 0 0 auto; width: 31px; height: 31px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #778391; font-size: 10px; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.transport button:hover, .transport button:focus-visible { color: white; background: rgba(255,255,255,.06); border-color: rgba(126,180,250,.18); }
.transport .reset-time-button { width: auto; padding: 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 16px; color: #8d98a5; font-size: 8px; }
.transport .reset-time-button span:first-child { color: #9ecbff; font-size: 13px; }
.transport .direction-button.active { color: #c9e3ff; border-color: rgba(112,174,255,.28); background: rgba(93,151,230,.13); }
.transport .play-button { width: 39px; height: 39px; border: 0; background: #d6e8ff; color: #0a101a; box-shadow: 0 0 22px rgba(121,175,255,.18); font-size: 11px; }
.transport .play-button:hover, .transport .play-button:focus-visible { color: #06101d; background: #edf6ff; }
.time-direction-label { min-width: 98px; color: #6f7b88; font: 500 7px "JetBrains Mono", monospace; letter-spacing: .04em; }
.time-scale { min-width: 0; }
.time-scale-heading, .timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.time-scale-heading label, .timeline-heading span { color: #6f7b88; font: 500 7px "JetBrains Mono", monospace; letter-spacing: .12em; }
.time-scale-heading output, .timeline-heading output { color: #b9cce1; font: 500 8px "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
.time-scale input, .timeline-track input { display: block; width: 100%; height: 16px; margin: 3px 0 0; appearance: none; background: transparent; cursor: pointer; }
.time-scale input::-webkit-slider-runnable-track, .timeline-track input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(92,151,230,.72), rgba(121,214,255,.44)); }
.time-scale input::-moz-range-track, .timeline-track input::-moz-range-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(92,151,230,.72), rgba(121,214,255,.44)); }
.time-scale input::-webkit-slider-thumb, .timeline-track input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -5px; appearance: none; border: 2px solid #08101b; border-radius: 50%; background: #c9e7ff; box-shadow: 0 0 11px rgba(104,181,255,.65); }
.time-scale input::-moz-range-thumb, .timeline-track input::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #08101b; border-radius: 50%; background: #c9e7ff; box-shadow: 0 0 11px rgba(104,181,255,.65); }
.time-scale input:focus-visible, .timeline-track input:focus-visible { outline: 1px solid rgba(141,198,255,.62); outline-offset: 3px; border-radius: 4px; }
.epoch-markers { display: flex; justify-content: space-between; color: #505b68; font: 400 7px "JetBrains Mono", monospace; }
.timeline-track { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.06); }
.timeline-track input { margin-top: 4px; }
.interaction-hint { position: fixed; z-index: 12; left: 50%; bottom: 132px; max-width: min(520px, calc(100vw - 40px)); padding: 8px 13px; pointer-events: none; border: 1px solid rgba(117,177,255,.24); border-radius: 18px; background: rgba(5,10,18,.72); color: rgba(220,237,255,.86); box-shadow: 0 10px 32px rgba(0,0,0,.26); backdrop-filter: blur(12px); font: 500 9px "Space Grotesk", sans-serif; letter-spacing: .025em; opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s ease, transform .32s cubic-bezier(.22,1,.36,1); }
.interaction-hint.visible { opacity: 1; transform: translate(-50%, 0); }


.topbar, .info-panel, .view-controls, .timeline-panel {
  opacity: 1; visibility: visible; filter: none; will-change: transform;
  transition: transform .62s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
}
.exploration-mode .topbar, .exploration-mode .info-panel, .exploration-mode .view-controls, .exploration-mode .timeline-panel {
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  filter: none;
  transition: transform .62s cubic-bezier(.64,0,.78,0), visibility 0s linear .62s;
}
.exploration-mode .topbar { transform: translateY(calc(-100% - 2px)); }
.exploration-mode .info-panel { transform: translateX(calc(-100% - 2px)); }
.exploration-mode .view-controls { transform: translateX(calc(100% + 2px)); }
.exploration-mode .timeline-panel { transform: translate(-50%, calc(100% + 2px)); }
.exploration-mode .interaction-hint { opacity: 0 !important; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .topbar, .info-panel, .view-controls, .timeline-panel, .interaction-hint { transition-duration: .01ms; }
}

.help-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; background: rgba(1,3,7,.62); opacity: 0; visibility: hidden; transition: .25s; }
.help-modal.open { opacity: 1; visibility: visible; }
.help-card { width: min(560px, calc(100vw - 32px)); border-radius: 20px; padding: 34px; position: relative; }
.close-help { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: #929ca8; font-size: 20px; }
.help-card h2 { font-size: 28px; line-height: 1.25; margin: 9px 0 24px; font-weight: 500; }
.help-card h2 em { font-family: Georgia, serif; font-weight: 400; color: #9cc9ff; }
.help-steps { display: grid; gap: 10px; }
.help-steps > div { display: grid; grid-template-columns: 34px 1fr; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.help-steps span { color: var(--blue); font: 500 10px "JetBrains Mono", monospace; }
.help-steps p { margin: 0; color: #949eaa; font-size: 11px; line-height: 1.5; }
.help-steps strong { color: #e5eaf0; font-weight: 500; }
.help-foot { color: #606a76; font-size: 9px; margin: 20px 0; }
.primary-button { width: 100%; border: 0; border-radius: 9px; padding: 12px; background: linear-gradient(135deg, #dcecff, #86baff); color: #07101d; font-weight: 700; font-size: 11px; }

.celestial-label { pointer-events:none; white-space:nowrap; text-shadow:0 2px 6px rgba(0,0,0,.92); font-family:"Poppins",Manrope,system-ui,sans-serif; font-size:10px; line-height:1; }
/* Celestial points and hover contours use the same assigned body colour. */
.celestial-label[data-label-kind="celestial"] { color:rgba(203,213,225,.76); font-weight:600; letter-spacing:.20em; text-transform:uppercase; }
 .celestial-label[data-label-kind="object"] { color:rgba(198,208,222,.79); font-weight:500; letter-spacing:.035em; text-transform:none; }
/* EOTSS-inspired distant-object navigation markers. The icon is purely CSS:
   label.textContent and accessibility names remain unchanged. */
.celestial-label[data-marker-visible="1"] { display:inline-flex; align-items:center; gap:7px; }
/* Only a rendered, collision-accepted marker is clickable. The scene overlay
   remains pointer-transparent elsewhere so camera controls are unaffected. */
.celestial-label[data-marker-interactive="1"] { pointer-events:auto; cursor:pointer; user-select:none; touch-action:manipulation; padding:3px 5px 3px 2px; }
/* A camera drag already started on the canvas must not stall while passing
   through a CSS2D name/marker. Normal click and hover resume on pointerup. */
.render-host .scene-camera-pointer-drag .celestial-label[data-marker-interactive="1"] { pointer-events:none !important; }
/* No background, border or hover outline: only the letter colour changes. */
.celestial-label[data-marker-interactive="1"]:hover,
.celestial-label[data-marker-interactive="1"]:focus-visible { color:#fff; background:transparent; outline:none; box-shadow:none; }
/* Text and ring colours are independent; keep the colour assigned to each body. */
.celestial-label[data-marker-visible="1"]::before {
  content:""; display:inline-block; flex:0 0 9px; width:9px; height:9px;
  box-sizing:border-box; border:1.2px solid var(--scene-marker-color,#b5c0ce);
  border-radius:50%; background:transparent; opacity:.96;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.9));
}
.celestial-label[data-marker-type="star"][data-marker-visible="1"]::before {
  /* Transparent centre: the reference UI must never recolour solar light. */
  border-color:#ffd674; background:transparent; box-shadow:0 0 7px rgba(255,196,95,.45);
}
.celestial-label[data-marker-type="moon"][data-marker-visible="1"]::before {
  width:7px; height:7px; flex-basis:7px; border-color:#b7bac0;
}
.celestial-label[data-marker-type="station"][data-marker-visible="1"]::before,
.celestial-label[data-marker-type="spacecraft"][data-marker-visible="1"]::before,
.celestial-label[data-marker-type="telescope"][data-marker-visible="1"]::before,
.celestial-label[data-marker-type="probe"][data-marker-visible="1"]::before {
  width:9px; height:9px; flex-basis:9px;
  border:0; border-radius:0; transform:none;
  background:var(--scene-marker-color,#a6afb9);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 4px color-mix(in srgb,var(--scene-marker-color,#a6afb9) 55%,transparent);
  opacity:1;
}
/* A real 6px point is the distant celestial object, never a permanent
   14px reference ring. Its independent CSS2D hover circle lives elsewhere. */
.celestial-label[data-label-kind="celestial"][data-marker-visible="1"]::before,
.celestial-label[data-label-kind="celestial"][data-marker-visible="1"][data-marker-type="star"]::before,
.celestial-label[data-label-kind="celestial"][data-marker-visible="1"][data-marker-type="moon"]::before {
  width:6px; height:6px; flex-basis:6px;
  border:0; border-radius:50%;
  background:var(--scene-marker-color,#b5c0ce);
  box-shadow:0 0 4px color-mix(in srgb,var(--scene-marker-color,#b5c0ce) 55%,transparent);
  opacity:1; filter:none; transform:none; transition:none;
}
/* Colliding names collapse to just their six-pixel marker. Astronomical
   locations do not disappear merely because two text rectangles overlap. */
.celestial-label[data-label-kind="celestial"][data-marker-visible="1"][data-collision-collapsed="1"] {
  font-size:0; letter-spacing:0; gap:0;
  padding:3px 0 3px 2px;
}
.celestial-label[data-hovered="1"] { color:#fff; }
/* CSS2D owns the outer transform and positional anchoring. The inner
   ellipse can rotate without changing the screen-space reference point. */
.celestial-hover-ring {
  box-sizing:border-box; pointer-events:none; user-select:none;
  background:transparent;
}
.celestial-hover-ring__outline {
  box-sizing:border-box; width:100%; height:100%;
  border:1.2px solid; border-radius:50%;
  transform-origin:50% 50%; pointer-events:none;
  background:transparent;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.8));
}
.celestial-hover-ring[data-indicator-shape="diamond"] .celestial-hover-ring__outline {
  position:absolute;
  left:50%; top:50%; width:70.710678%; height:70.710678%;
  border-radius:0;
  /* Rotate only the child: CSS2D owns the outer translation. */
  transform:translate(-50%,-50%) rotate(45deg) !important;
}
/* Selection is a separate ring of four curved arcs, outside the hover
   contour. It never replaces or responds to hover, and has no hit-test area. */
.celestial-selection-ring {
  box-sizing:border-box; pointer-events:none; user-select:none;
  background:transparent;
}
.celestial-selection-ring__outline {
  display:block; width:100%; height:100%; overflow:visible;
  transform-origin:50% 50%; pointer-events:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.8));
}
/* Never override the planet-specific --scene-marker-color on pointer hover. */
.celestial-label[data-marker-interactive="1"] {transition:color .13s ease;}


.constellation-label { color: rgba(157,201,239,.82); font: 500 8px "JetBrains Mono", monospace; letter-spacing: .08em; text-shadow: 0 1px 4px #000, 0 0 8px rgba(0,0,0,.72); white-space: nowrap; pointer-events: none; user-select: none; }

@media (max-width: 900px) {
  .topbar { left: 0; right: 0; top: 0; }
  .info-panel { left: 0; top: 88px; }
  .view-controls { right: 0; top: 88px; }
  .view-controls button { width: 48px; justify-content: center; padding: 9px 7px; font-size: 0; }
  .view-controls .view-group { width: 48px; }
  .view-controls .view-group-row > [data-view] { width: 30px; padding-left: 6px; padding-right: 3px; }
  .view-controls .view-group-toggle { width: 18px; flex-basis: 18px; }
  .view-controls .view-submenu { width: 122px; }
  .view-controls .view-submenu > button { width: 112px; padding: 9px 10px; justify-content: flex-start; font-size: 9px; }
  .view-controls .spacecraft-view-group .view-group-label, .view-controls .deep-space-view-group .view-group-label { width: 48px; padding-right: 7px; }
  .view-controls .spacecraft-view-group .view-group-label .view-group-chevron, .view-controls .deep-space-view-group .view-group-label .view-group-chevron { right: 1px; font-size: 11px; }
  .view-controls .spacecraft-view-group .view-group-label .view-group-active-dot, .view-controls .deep-space-view-group .view-group-label .view-group-active-dot { right: 7px; top: 5px; }
  .view-controls .iss-camera-selector .view-group-label { width: 48px; padding-right: 7px; }
  .view-controls .iss-camera-selector .iss-camera-button-label { display: none; }
  .view-controls .iss-camera-selector .view-group-chevron { right: 1px; font-size: 11px; }
  .view-controls button span { font-size: 13px; }
  .timeline-panel { width: calc(100vw - 24px); bottom: 0; }
}

@media (max-width: 620px) {
  .top-toolbar { top:11px; right:10px; gap:8px; }
  .exploration-date { right: 12px; bottom: max(13px, env(safe-area-inset-bottom)); min-width: 230px; padding: 10px 12px 11px; }
  .exploration-date span { font-size: 7px; }
  .exploration-date time { font-size: 14px; }

  .topbar, .info-panel, .view-controls, .timeline-panel { opacity: 1; visibility: visible; pointer-events: auto; filter: none; transition: transform .62s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s; }
  .topbar { left:0; right:196px; top:0; height:60px; padding:0 12px; grid-template-columns:auto 1fr auto; border-radius:0 0 14px 0; transform:none; }
  .brand-logo { width: 164px; max-height: 42px; }
  .topbar .icon-button { display: none; }
  .time-readout { min-width: 0; padding: 3px 0 2px 8px; text-align: right; gap: 2px; border: 0; background: none; }
  .time-readout::after { display: none; }
  .readout-label { font-size: 6px; letter-spacing: .1em; }
  .time-readout strong { font-size: 10px; letter-spacing: .01em; white-space: nowrap; }

  .info-panel { top: 70px; left: 0; width: min(292px, calc(100vw - 68px)); max-height: calc(100dvh - 258px); overflow-y: auto; padding: 15px; transform: none; }
  .panel-heading { margin-bottom: 12px; }
  .data-grid { gap: 10px; padding: 12px 2px; }
  .section-block { padding: 12px 0; }

  .view-controls { top: 70px; left: auto; right: 0; bottom: auto; width: 56px; max-height: calc(100dvh - 244px); display: flex; flex-direction: column; transform: none; }
  .view-controls button { width: 100%; justify-content: center; padding: 9px 4px; }
  .timeline-panel { left: 50%; bottom: 0; width: calc(100vw - 20px); border-width: 1px 1px 0; border-radius: 14px 14px 0 0; padding: 9px 11px calc(9px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .timeline-top { grid-template-columns: 1fr; gap: 7px; }
  .transport { justify-content: center; }
  .time-direction-label { margin-left: 4px; }
  .time-scale-heading label { font-size: 6px; }
  .timeline-track { margin-top: 7px; padding-top: 7px; }
  .interaction-hint { bottom: 180px; font-size: 8px; }
}

@media (max-width: 420px) {
  .brand-logo { width: 145px; }
  .time-readout strong { font-size: 9px; }
  .transport .reset-time-button { width: 31px; padding: 0; justify-content: center; }
  .transport .reset-time-button span:last-child, .time-direction-label { display: none; }
  .transport { gap: 8px; }
}


/* Precise UTC date/time picker opened from the top simulation clock. */
.simulation-date-button{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:700;
  line-height:1.2;
  padding:.18rem .45rem;
  margin:-.18rem -.45rem;
  border-radius:.45rem;
  cursor:pointer;
}
.simulation-date-button:hover,
.simulation-date-button[aria-expanded="true"]{
  background:rgba(95,162,255,.09);
  color:#dcebff;
}
.simulation-date-button:focus-visible{
  outline:1px solid rgba(116,181,255,.95);
  outline-offset:3px;
}
.date-time-picker[hidden]{display:none!important}
.date-time-picker{
  position:absolute;
  z-index:80;
  top:4.25rem;
  left:50%;
  transform:translateX(-50%);
  width:min(31rem,calc(100vw - 2rem));
  padding:1rem;
  border:1px solid rgba(100,157,218,.28);
}
.date-time-picker__heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
}
.date-time-picker__heading strong{
  display:block;
  margin-top:.16rem;
  font-size:.98rem;
}
.date-time-picker__close{
  width:2rem;
  height:2rem;
  border:1px solid rgba(125,157,190,.2);
  border-radius:50%;
  background:rgba(8,15,25,.6);
  color:#aebdce;
  cursor:pointer;
}
.date-time-picker__fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.date-time-picker__fields label{
  display:grid;
  gap:.35rem;
  color:#8d9caf;
  font-size:.72rem;
}
.date-time-picker__fields input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid rgba(91,139,190,.32);
  border-radius:.55rem;
  background:#080e17;
  color:#e8f1fc;
  padding:.68rem .75rem;
  font:inherit;
  color-scheme:dark;
}
.date-time-picker__fields input:focus{
  outline:1px solid rgba(104,174,255,.8);
  border-color:rgba(104,174,255,.55);
}
.date-time-picker__error{
  min-height:1.1rem;
  margin:.55rem 0 .15rem;
  color:#ff9b91;
  font-size:.72rem;
}
.date-time-picker__actions{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  margin-top:.5rem;
}
.date-time-picker__actions button{
  border-radius:.55rem;
  padding:.62rem .85rem;
  font:inherit;
  cursor:pointer;
}
.date-time-picker__secondary{
  border:1px solid rgba(125,157,190,.25);
  background:rgba(8,15,25,.65);
  color:#aebdce;
}
.date-time-picker__primary{
  border:1px solid rgba(96,166,255,.55);
  background:rgba(50,105,166,.3);
  color:#e6f2ff;
}
@media (max-width:600px){
  .date-time-picker__fields{grid-template-columns:1fr}
  .date-time-picker__actions{flex-direction:column-reverse}
  .date-time-picker__actions button{width:100%}
}

/* Astronomical events timeline. */
.topbar-actions{display:flex;align-items:center;gap:6px}
.events-button{font-size:13px}
.events-button[aria-expanded="true"]{color:#e8f4ff;background:rgba(93,151,230,.16);border-color:rgba(123,184,255,.34)}
.astronomical-events-panel{
  position:fixed;top:92px;right:132px;width:min(410px,calc(100vw - 360px));
  max-height:calc(100dvh - 118px);display:flex;flex-direction:column;padding:18px;
  border-radius:18px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.985);
  transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s;
}
.astronomical-events-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.events-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.events-panel-heading h2{margin:2px 0 0;font-size:18px;font-weight:500;color:#e7edf5}
.events-close{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:rgba(7,12,20,.46);color:#85919f;font-size:18px;cursor:pointer}
.events-close:hover{color:#eef6ff;border-color:rgba(123,184,255,.28)}
.events-period-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.2)}
.events-period-tabs button,.events-kind-filters button{border:0;background:transparent;color:#778391;font:500 9px "Space Grotesk",sans-serif;cursor:pointer}
.events-period-tabs button{padding:8px;border-radius:6px}
.events-period-tabs button span{margin-left:4px;color:#5f7186;font:500 8px "JetBrains Mono",monospace}
.events-period-tabs button.active{color:#e3f1ff;background:rgba(92,151,230,.15);box-shadow:inset 0 0 0 1px rgba(115,169,255,.16)}
.events-period-tabs button.active span{color:#9ccfff}
.events-kind-filters{display:flex;gap:5px;margin:9px 0 10px}
.events-kind-filters button{padding:6px 9px;border:1px solid rgba(255,255,255,.055);border-radius:14px}
.events-kind-filters button.active{color:#d9ebff;border-color:rgba(112,174,255,.3);background:rgba(78,137,215,.11)}
.events-list{min-height:0;overflow-y:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(109,153,207,.35) transparent}
.event-card{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:12px 4px;border-top:1px solid rgba(255,255,255,.065)}
.event-card:first-child{border-top:0}
.event-card-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:16px;color:#ffd98d;background:rgba(230,174,82,.08);box-shadow:inset 0 0 0 1px rgba(255,210,126,.12)}
.event-card[data-event-kind="lunar"] .event-card-icon{color:#b8d7ff;background:rgba(95,145,220,.09);box-shadow:inset 0 0 0 1px rgba(140,190,255,.13)}
.event-card[data-event-kind="hubble"] .event-card-icon{color:#b9f0ff;background:rgba(75,162,196,.09);box-shadow:inset 0 0 0 1px rgba(125,220,255,.16)}
.event-card-body{min-width:0}
.event-card-meta,.event-card-actions{display:flex;align-items:center;justify-content:space-between;gap:9px}
.event-card-meta{margin-bottom:4px;color:#637184;font:500 7px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.event-card-meta time{color:#8ca0b8;letter-spacing:.03em}
.event-card-body>strong{display:block;color:#dfe8f2;font-size:11px;font-weight:600}
.event-card-body>p{margin:4px 0 9px;color:#798695;font-size:9px;line-height:1.45}
.event-card-actions span{color:#657487;font:500 7px "JetBrains Mono",monospace}
.event-card-actions button{flex:0 0 auto;border:1px solid rgba(104,174,255,.28);border-radius:6px;background:rgba(50,105,166,.16);color:#cfe7ff;padding:6px 9px;font:600 8px "Space Grotesk",sans-serif;cursor:pointer}
.event-card-actions button:hover,.event-card-actions button:focus-visible{background:rgba(68,128,198,.28);border-color:rgba(118,187,255,.48);color:#fff}
.events-empty{padding:24px 8px;text-align:center;color:#687585;font-size:10px}
.events-source{margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(255,255,255,.06);color:#526071;font:500 7px "JetBrains Mono",monospace;text-align:center}
.exploration-mode .astronomical-events-panel{opacity:0;visibility:hidden;pointer-events:none}

@media(max-width:900px){
  .astronomical-events-panel{right:66px;width:min(390px,calc(100vw - 92px))}
}
@media(max-width:620px){
  .topbar-actions .icon-button{display:none}
  .astronomical-events-panel{top:70px;right:10px;left:10px;width:auto;max-height:calc(100dvh - 250px)}
}
.topbar-actions{justify-self:end}
@media (min-width:621px){
  .topbar-actions{margin-right:286px}
}

/* Integrated Earth texture diagnostic + audio volume */
.audio-volume-row { display: grid; grid-template-columns: auto minmax(0,1fr) 34px; align-items: center; gap: 8px; color: #7f8995; font-size: 9px; }
.audio-volume-row input[type="range"] { width: 100%; min-width: 0; accent-color: #78b8ff; cursor: pointer; }
.audio-volume-row output { color: #9fc9f5; font: 500 8px "JetBrains Mono", monospace; text-align: right; }
.audio-volume-row.is-disabled { opacity: .45; }

.earth-lod-diagnostic { margin-top: 14px; padding-bottom: 0; border-bottom: 0; }
.earth-lod-diagnostic[hidden] { display: none !important; }
.earth-lod-diagnostic__heading { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:14px; row-gap:5px; margin-bottom: 9px; color: #78aee5; font: 700 8px/1.2 "Space Grotesk", sans-serif; letter-spacing: .13em; }
/* The dynamic body name is right-aligned without touching the heading, in
   both standard and dual-screen DevTools. On narrow panels it wraps below. */
.earth-lod-diagnostic__heading > span { flex:0 0 auto; white-space:nowrap; }
.earth-lod-diagnostic__heading > #texture-context-body-label { flex:0 1 auto; white-space:nowrap; }
.earth-lod-diagnostic__modes { margin-bottom: 11px; }
.earth-lod-cloud-toggle { margin: 0 1px 9px; }
.cloud-symbol { width: 17px; text-align: center; color: #a7cbed; font-style: normal; font-size: 12px; line-height: 1; }
.earth-lod-diagnostic__tile-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 9px 0 8px; }
.earth-lod-diagnostic__tile-stat { min-width: 0; padding: 6px 7px; border: 1px solid rgba(100,155,210,.14); border-radius: 7px; background: rgba(7,20,35,.42); }
.earth-lod-diagnostic__tile-stat span { display: block; margin-bottom: 2px; color: #68798b; font: 600 6.5px/1.2 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.earth-lod-diagnostic__tile-stat strong { display: block; color: #b8dcff; font: 600 9px/1.2 "JetBrains Mono", monospace; white-space: nowrap; }
.earth-lod-diagnostic__tile-stat--cache strong { color: #82baf0; }
.earth-lod-diagnostic__hint { display: block; color: #626f7e; font: 500 7px/1.45 "JetBrains Mono", monospace; }
.earth-lod-diagnostic__status { margin-top: 7px; color: #a8c9e8; font: 500 8px/1.45 "JetBrains Mono", monospace; overflow-wrap: anywhere; }

/* Voyager 1 historical-photo reconstruction prototype */
.voyager-photo-block[hidden]{display:none!important}
.voyager-photo-list{display:grid;grid-template-columns:1fr;gap:7px}
.voyager-photo-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 10px;border:1px solid rgba(104,166,238,.24);border-radius:8px;background:rgba(29,53,84,.24);color:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.voyager-photo-list button:hover{border-color:rgba(111,179,255,.58);background:rgba(42,83,128,.38);transform:translateY(-1px)}
.voyager-photo-list button span{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:rgba(203,220,241,.58)}
.voyager-photo-list button strong{font-size:10px;font-weight:700;color:#dcecff}
.voyager-photo-note{display:block;margin-top:7px;font-size:8px;line-height:1.35;color:rgba(192,211,235,.48)}

/* Voyager historical-photo live calibration */
.voyager-photo-calibration[hidden]{display:none!important}
.voyager-photo-calibration{margin-top:10px;padding:10px;border:1px solid rgba(111,179,255,.2);border-radius:9px;background:rgba(7,18,31,.42)}
.voyager-calibration-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.voyager-calibration-head strong{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#b9d9fa}
.voyager-calibration-head button{border:1px solid rgba(111,179,255,.28);border-radius:6px;background:rgba(35,69,107,.28);padding:4px 7px;color:#bcd8f5;font:600 8px/1 "JetBrains Mono",monospace;cursor:pointer}
.voyager-calibration-row{display:grid;grid-template-columns:58px minmax(80px,1fr) 52px;align-items:center;gap:7px;margin:6px 0;color:rgba(205,222,241,.72);font:500 8px/1.2 "JetBrains Mono",monospace}
.voyager-calibration-row input{width:100%;accent-color:#79b8f6}
.voyager-calibration-row output{text-align:right;color:#e0efff;font-variant-numeric:tabular-nums}
.voyager-calibration-values{margin-top:9px;padding:7px 8px;border-radius:6px;background:rgba(43,88,133,.22);color:#dcecff;font:600 8px/1.35 "JetBrains Mono",monospace;overflow-wrap:anywhere}
.voyager-photo-calibration>small{display:block;margin-top:6px;color:rgba(192,211,235,.42);font:500 7px/1.45 "JetBrains Mono",monospace}
.voyager-free-calibration-help{display:block;color:rgba(205,222,241,.68);font:500 8px/1.45 "JetBrains Mono",monospace;margin:2px 0 8px}
.voyager-pose-values{white-space:normal;line-height:1.5}
.voyager-calibration-copy{width:100%;margin-top:7px;border:1px solid rgba(111,179,255,.32);border-radius:6px;background:rgba(35,69,107,.34);padding:6px 8px;color:#d9ebff;font:600 8px/1 "JetBrains Mono",monospace;cursor:pointer}
.voyager-calibration-copy:hover{background:rgba(49,92,139,.46)}

/* Fine FOV adjustment during free Voyager historical-photo calibration */
.voyager-fov-calibration{display:grid;grid-template-columns:62px minmax(82px,1fr) 62px;align-items:center;gap:7px;margin:9px 0 4px;color:rgba(205,222,241,.78);font:600 8px/1.2 "JetBrains Mono",monospace}
.voyager-fov-calibration>label{color:#b9d9fa}
.voyager-fov-calibration>input[type=range]{width:100%;accent-color:#79b8f6}
.voyager-fov-number-wrap{display:flex;align-items:center;gap:3px;min-width:0}
.voyager-fov-number-wrap input{width:100%;min-width:0;box-sizing:border-box;border:1px solid rgba(111,179,255,.28);border-radius:5px;background:rgba(5,13,23,.65);padding:4px;color:#e0efff;font:600 8px/1 "JetBrains Mono",monospace;text-align:right;font-variant-numeric:tabular-nums}
.voyager-fov-number-wrap span{color:rgba(205,222,241,.72)}
.voyager-fov-help{display:block;margin:0 0 7px;color:rgba(192,211,235,.48);font:500 7px/1.4 "JetBrains Mono",monospace}
.voyager-photo-view-mode[hidden]{display:none!important}
.voyager-photo-view-mode{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.voyager-photo-view-mode button{min-width:0;padding:8px 7px;border:1px solid rgba(104,166,238,.24);border-radius:7px;background:rgba(20,39,64,.34);color:rgba(215,231,250,.72);font:700 8px/1.1 "JetBrains Mono",monospace;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.voyager-photo-view-mode button.active{border-color:rgba(111,179,255,.68);background:rgba(49,101,158,.38);color:#e4f2ff;box-shadow:inset 0 0 0 1px rgba(111,179,255,.12)}
.voyager-photo-mode-note{display:block;margin-top:6px;color:rgba(192,211,235,.52);font:500 7px/1.45 "JetBrains Mono",monospace}
.voyager-photo-list button.active{border-color:rgba(111,179,255,.66);background:rgba(45,91,143,.42)}

/* Voyager documentary -> historical NAC acquisition transition */
.voyager-capture-overlay{position:absolute;inset:0;z-index:120;pointer-events:none;opacity:0;background:#000;will-change:opacity,background-color}
.voyager-capture-overlay.reveal{animation:voyager-photo-acquisition .58s cubic-bezier(.2,.72,.2,1) forwards}
@keyframes voyager-photo-acquisition{
  0%,18%{opacity:1;background:#000}
  24%{opacity:.88;background:#f4f4ef}
  34%{opacity:.20;background:#fff}
  100%{opacity:0;background:#000}
}

/* Stellarius central loading system — procedural Sun / Earth / Moon */
.stellarius-loading{
  position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:28px;
  background:radial-gradient(circle at 50% 46%,rgba(10,19,32,.86) 0,rgba(3,6,11,.96) 42%,#020408 100%);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s;
}
.stellarius-loading[hidden]{display:none!important}
.stellarius-loading.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
/* Runtime loading: compact, non-blocking and deliberately outside the main UI. */
.stellarius-loading.is-compact{
  inset:auto 142px 88px auto;z-index:80;display:flex;align-items:center;gap:9px;place-content:initial;justify-items:initial;
  width:auto;max-width:min(270px,calc(100vw - 170px));padding:8px 11px 8px 8px;border:1px solid rgba(114,169,255,.22);border-radius:12px;
  background:rgba(5,11,19,.86);box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);pointer-events:none;
}
.stellarius-loading.is-compact .stellarius-loading__system{width:156px;height:156px;flex:0 0 156px;margin:-51px;transform:scale(.35);transform-origin:50% 50%;overflow:visible;contain:layout style}
.stellarius-loading.is-compact .stellarius-loading__copy{min-width:0;align-items:flex-start;gap:4px;text-align:left}
.stellarius-loading.is-compact .stellarius-loading__copy strong{font-size:8px;letter-spacing:.22em;text-indent:0}
.stellarius-loading.is-compact .stellarius-loading__copy span{min-height:10px;max-width:185px;font-size:6.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stellarius-loading__system{position:relative;width:156px;height:156px;isolation:isolate;contain:layout paint style;transform:translateZ(0)}
.stellarius-loading__sun{
  position:absolute;z-index:3;left:50%;top:50%;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 35%,#fffde6 0 13%,#ffe997 31%,#f6b94a 62%,#cf7627 100%);
  box-shadow:0 0 10px rgba(255,220,125,.88),0 0 26px rgba(255,177,62,.4),0 0 48px rgba(255,147,40,.16);
}
.stellarius-loading__earth-orbit{
  position:absolute;inset:0;border-radius:50%;
}
.stellarius-loading__earth-orbit::before{
  content:"";position:absolute;z-index:1;left:50%;top:50%;width:130px;height:76px;border:1px solid rgba(135,181,225,.15);border-radius:50%;
  transform:translate(-50%,-50%) rotate(-12deg);box-shadow:0 0 12px rgba(90,145,198,.035);
}
.stellarius-loading__earth-node{
  position:absolute;z-index:4;left:50%;top:50%;width:0;height:0;
  animation:stellarius-earth-orbit 3.2s linear infinite;will-change:transform,opacity;
  transform:translate3d(63.6px,-13.5px,0) scale(1);backface-visibility:hidden;
}
.stellarius-loading__earth{
  position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 34% 30%,#d7f3ff 0 7%,#75bce7 18%,#2672a7 54%,#123f6e 78%,#071d36 100%);
  box-shadow:0 0 8px rgba(88,167,225,.35);
}
.stellarius-loading__moon-orbit{
  position:absolute;left:0;top:0;width:34px;height:20px;transform:translate(-50%,-50%) rotate(27deg);
  border:1px solid rgba(171,196,219,.13);border-radius:50%;
}
.stellarius-loading__moon-node{
  position:absolute;left:50%;top:50%;width:0;height:0;
  animation:stellarius-moon-orbit .92s linear infinite;will-change:transform,opacity;
  transform:translate3d(16px,0,0) scale(1);backface-visibility:hidden;
}
.stellarius-loading__moon{
  position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;transform:translate(-50%,-50%);
  background:#d6d9dc;box-shadow:0 0 5px rgba(214,223,232,.32);
}
.stellarius-loading__copy{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.stellarius-loading__copy strong{
  color:#d9e8f7;font:600 11px/1 "Space Grotesk",sans-serif;letter-spacing:.34em;text-indent:.34em;
}
.stellarius-loading__copy span{
  min-height:14px;color:var(--blue);font:500 8px/1.45 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 12px rgba(114,169,255,.18);
}
@keyframes stellarius-earth-orbit{
  0%,100%{transform:translate3d(63.6px,-13.5px,0) scale(1);opacity:1}
  12.5%{transform:translate3d(50.5px,16.7px,0) scale(1.07);opacity:1}
  25%{transform:translate3d(7.9px,37.2px,0) scale(1.16);opacity:1}
  37.5%{transform:translate3d(-39.4px,35.8px,0) scale(1.08);opacity:1}
  50%{transform:translate3d(-63.6px,13.5px,0) scale(.98);opacity:.94}
  62.5%{transform:translate3d(-50.5px,-16.7px,0) scale(.88);opacity:.78}
  75%{transform:translate3d(-7.9px,-37.2px,0) scale(.82);opacity:.66}
  87.5%{transform:translate3d(39.4px,-35.8px,0) scale(.89);opacity:.8}
}
@keyframes stellarius-moon-orbit{
  0%,100%{transform:translate3d(16px,0,0) scale(1);opacity:1}
  12.5%{transform:translate3d(11px,7px,0) scale(1.05);opacity:1}
  25%{transform:translate3d(0,10px,0) scale(1.1);opacity:1}
  37.5%{transform:translate3d(-12px,7px,0) scale(1.04);opacity:.98}
  50%{transform:translate3d(-16px,0,0) scale(.96);opacity:.86}
  62.5%{transform:translate3d(-12px,-7px,0) scale(.88);opacity:.68}
  75%{transform:translate3d(0,-10px,0) scale(.84);opacity:.58}
  87.5%{transform:translate3d(11px,-7px,0) scale(.9);opacity:.72}
}
@media(max-width:620px){
  .stellarius-loading__system{transform:scale(.88)}
  .stellarius-loading.is-compact{right:68px;bottom:72px;max-width:calc(100vw - 82px)}
  .stellarius-loading.is-compact .stellarius-loading__system{margin:-53.8px;transform:scale(.31)}
}
@media(prefers-reduced-motion:reduce){
  .stellarius-loading{transition:none!important}
  .stellarius-loading__earth-node,.stellarius-loading__moon-node{animation:none!important}
}

/* Stellarius language selector */
.language-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(0,0,0,.22);
}
.language-switch button{
  min-width:30px;
  height:26px;
  padding:0 7px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#78818d;
  font:600 9px/1 inherit;
  letter-spacing:.08em;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.language-switch button:hover{color:#fff}
.language-switch button.active{
  background:rgba(110,160,234,.16);
  color:#d8e9ff;
  box-shadow:inset 0 0 0 1px rgba(115,169,255,.22);
}
.language-switch button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Lens Flare Optical Lab --------------------------------------------------- */
.lens-flare-lab {
  position: fixed;
  z-index: 26;
  top: 92px;
  left: 286px;
  width: 318px;
  max-height: calc(100vh - 112px);
  overflow: hidden;
  border-radius: 16px;
  padding: 0;
  color: rgba(231,241,255,.92);
  background: rgba(5,10,18,.88);
  box-shadow: 0 18px 54px rgba(0,0,0,.34);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.lens-flare-lab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 11px 12px 10px 14px;
  border-bottom: 1px solid rgba(138,177,222,.13);
}
.lens-flare-lab__header > div { min-width: 0; display: grid; gap: 2px; }
.lens-flare-lab__header strong { font: 600 12px "Space Grotesk",sans-serif; letter-spacing: .035em; }
.lens-flare-lab__eyebrow { color: rgba(123,178,239,.68); font: 600 8px "Space Mono",monospace; letter-spacing: .12em; }
.lens-flare-lab__collapse {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  border: 1px solid rgba(121,171,228,.18); background: rgba(19,31,48,.66);
  color: rgba(222,237,255,.88); font: 500 18px/1 "Space Grotesk",sans-serif; cursor: pointer;
}
.lens-flare-lab__collapse:hover { background: rgba(30,49,74,.76); }
.lens-flare-lab__body { max-height: calc(100vh - 176px); overflow-y: auto; padding: 12px 14px 14px; scrollbar-width: thin; }
.lens-flare-lab.is-collapsed .lens-flare-lab__body { display: none; }
.lens-flare-lab.is-collapsed { width: 224px; }
.lens-flare-lab__intro { margin: 0 0 12px; color: rgba(171,193,218,.70); font: 500 9px/1.45 "Space Grotesk",sans-serif; }
.lens-flare-lab__group { display: grid; gap: 7px; padding: 11px 0 12px; border-top: 1px solid rgba(138,177,222,.09); }
.lens-flare-lab__group:first-of-type { border-top: 0; padding-top: 2px; }
.lens-flare-lab__group h3 { margin: 0 0 2px; color: rgba(139,190,246,.78); font: 600 8px "Space Mono",monospace; letter-spacing: .12em; text-transform: uppercase; }
.lens-flare-lab__control { display: grid; grid-template-columns: minmax(0,1fr) 92px 62px; align-items: center; gap: 7px; min-height: 26px; }
.lens-flare-lab__control--checkbox { grid-template-columns: minmax(0,1fr) auto; }
.lens-flare-lab__label { min-width: 0; color: rgba(220,233,249,.82); font: 500 9px "Space Grotesk",sans-serif; }
.lens-flare-lab input[type="range"] { width: 100%; accent-color: #86bdf2; }
.lens-flare-lab__number { width: 62px; min-width: 0; box-sizing: border-box; padding: 4px 5px; border: 1px solid rgba(128,173,226,.18); border-radius: 6px; outline: none; background: rgba(8,16,27,.72); color: rgba(185,215,247,.90); text-align: right; font: 500 8px "Space Mono",monospace; font-variant-numeric: tabular-nums; }
.lens-flare-lab__number:focus { border-color: rgba(121,184,245,.58); box-shadow: 0 0 0 1px rgba(121,184,245,.13); }
.lens-flare-lab__number::-webkit-inner-spin-button,.lens-flare-lab__number::-webkit-outer-spin-button { opacity: .45; }
.lens-flare-lab__switch { width: 34px; height: 18px; accent-color: #78b6ef; cursor: pointer; }
.lens-flare-lab__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(138,177,222,.11); }
.lens-flare-lab__button { min-height: 34px; padding: 7px 8px; border: 1px solid rgba(128,173,226,.17); border-radius: 9px; background: rgba(17,29,45,.66); color: rgba(221,235,250,.82); font: 600 8px "Space Grotesk",sans-serif; cursor: pointer; }
.lens-flare-lab__button--primary { background: rgba(35,79,119,.48); border-color: rgba(118,181,241,.28); color: rgba(231,244,255,.94); }
.lens-flare-lab__button:hover { background: rgba(32,51,75,.82); }
.lens-flare-lab__status { min-height: 18px; padding-top: 7px; color: rgba(140,198,250,.72); font: 500 8px/1.35 "Space Grotesk",sans-serif; }

@media (max-width: 900px) {
  .lens-flare-lab { left: 12px; top: 84px; width: min(318px, calc(100vw - 24px)); max-height: calc(100vh - 104px); }
  .lens-flare-lab__body { max-height: calc(100vh - 164px); }
}

/* === Spatial scale v3: Pedagogical / System / Galactic ==================== */
.scale-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 170ms ease;
}
.scale-transition-overlay.is-active { opacity: 1; }

/* Solar <-> pedagogical changes keep the selected body visible. The veil only
   softens the instantaneous reorganisation of the surrounding system while the
   camera performs its compensated framing pulse. */
.scale-transition-overlay.is-solar-scale-shift {
  background: radial-gradient(circle at 50% 50%, rgba(2,5,10,.08) 0, rgba(1,3,7,.18) 42%, rgba(0,0,0,.32) 100%);
  transition-duration: 260ms;
}

.scale-transition-overlay.is-target-transition {
  transition-duration: 260ms;
  background: rgba(0,0,0,.96);
}
.scale-transition-overlay.is-target-transition[data-transition-style="galactic-sun"],
.scale-transition-overlay.is-target-transition[data-transition-style="system-galactic-sun"] {
  background: radial-gradient(circle at 50% 50%, rgba(255,242,204,.12) 0, rgba(30,18,5,.12) 22%, #000 72%);
}
.scale-transition-overlay.is-target-transition[data-transition-style="galactic-sgr"] {
  background: radial-gradient(circle at 50% 50%, rgba(42,18,5,.14) 0, rgba(0,0,0,.82) 30%, #000 72%);
}

.galactic-target-transition {
  --galactic-transition-x: 50vw;
  --galactic-transition-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.galactic-target-transition--sun {
  background: radial-gradient(circle at var(--galactic-transition-x) var(--galactic-transition-y),
    rgba(255,249,222,.94) 0,
    rgba(255,220,145,.32) 7%,
    rgba(31,17,5,.38) 28%,
    rgba(0,0,0,.92) 76%);
}
.galactic-target-transition--sgr {
  background: radial-gradient(circle at var(--galactic-transition-x) var(--galactic-transition-y),
    rgba(0,0,0,.98) 0,
    rgba(60,25,8,.18) 10%,
    rgba(0,0,0,.70) 34%,
    rgba(0,0,0,.97) 80%);
}

.galactic-marker {
  position: fixed;
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
  transform: translateY(-50%);
  padding-left: 13px;
  font: 600 11px/1.2 "Space Grotesk", Manrope, sans-serif;
  letter-spacing: .06em;
  text-shadow: 0 1px 5px #000, 0 0 7px #000;
}
.galactic-marker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.galactic-marker--sgr { color: #ffb347; }
.galactic-marker--sun { color: #fff27a; }
.galactic-marker.is-selected {
  font-weight: 800;
  text-shadow: 0 1px 5px #000, 0 0 10px currentColor, 0 0 16px #000;
}
.galactic-marker.is-selected::before {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 4px #fff, 0 0 14px currentColor, 0 0 24px currentColor;
}

/* Galactic scale owns its own WebGL camera. Disable only solar-system-only
   controls. The Capture button remains a live global canvas action. */
#app.is-galactic-scale .view-controls > *,
#app.is-galactic-scale #cinematic-mode-toggle,
#app.is-galactic-scale #sagittarius-cinematic-button {
  opacity: .34;
  pointer-events: none;
  filter: saturate(.45);
}

#app.is-galactic-scale .view-controls {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

#app.is-galactic-scale #screenshot-button,
#app.is-galactic-scale #dual-screen-button {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  cursor: pointer;
}

#app.is-galactic-scale #space-canvas { cursor: grab; }
#app.is-galactic-scale #space-canvas:active { cursor: grabbing; }

/* Solar Visual Lab --------------------------------------------------------- */
.solar-visual-lab {
  position: fixed;
  z-index: 26;
  top: 92px;
  left: 616px;
  width: 330px;
  max-height: calc(100vh - 112px);
  overflow: hidden;
  border-radius: 16px;
  padding: 0;
  color: rgba(231,241,255,.92);
  background: rgba(5,10,18,.88);
  box-shadow: 0 18px 54px rgba(0,0,0,.34);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.solar-visual-lab__header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:52px; padding:11px 12px 10px 14px;
  border-bottom:1px solid rgba(255,156,87,.15);
}
.solar-visual-lab__header > div { min-width:0; display:grid; gap:2px; }
.solar-visual-lab__header strong { font:600 12px "Space Grotesk",sans-serif; letter-spacing:.035em; }
.solar-visual-lab__eyebrow { color:rgba(255,156,87,.72); font:600 8px "Space Mono",monospace; letter-spacing:.12em; }
.solar-visual-lab__collapse {
  width:32px; height:32px; flex:0 0 32px; border-radius:9px;
  border:1px solid rgba(255,159,91,.20); background:rgba(45,25,18,.66);
  color:rgba(255,237,222,.90); font:500 18px/1 "Space Grotesk",sans-serif; cursor:pointer;
}
.solar-visual-lab__collapse:hover { background:rgba(72,37,24,.78); }
.solar-visual-lab__body { max-height:calc(100vh - 176px); overflow-y:auto; padding:12px 14px 14px; scrollbar-width:thin; }
.solar-visual-lab.is-collapsed .solar-visual-lab__body { display:none; }
.solar-visual-lab.is-collapsed { width:224px; }
.solar-visual-lab__intro { margin:0 0 12px; color:rgba(206,188,174,.72); font:500 9px/1.45 "Space Grotesk",sans-serif; }
.solar-visual-lab__group { display:grid; gap:7px; padding:11px 0 12px; border-top:1px solid rgba(255,172,113,.09); }
.solar-visual-lab__group:first-of-type { border-top:0; padding-top:2px; }
.solar-visual-lab__group h3 { margin:0 0 2px; color:rgba(255,166,101,.82); font:600 8px "Space Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.solar-visual-lab__control { display:grid; grid-template-columns:minmax(0,1fr) 92px 62px; align-items:center; gap:7px; min-height:26px; }
.solar-visual-lab__control--color { grid-template-columns:minmax(0,1fr) 42px 74px; }
.solar-visual-lab__control--checkbox { grid-template-columns:minmax(0,1fr) auto; }
.solar-visual-lab__checkbox { width:16px; height:16px; margin:0 5px 0 0; accent-color:#f39a5e; cursor:pointer; }
.solar-visual-lab__label { min-width:0; color:rgba(244,231,221,.86); font:500 9px "Space Grotesk",sans-serif; }
.solar-visual-lab input[type="range"] { width:100%; accent-color:#f39a5e; }
.solar-visual-lab__number,.solar-visual-lab__hex {
  width:62px; min-width:0; box-sizing:border-box; padding:4px 5px;
  border:1px solid rgba(234,151,96,.20); border-radius:6px; outline:none;
  background:rgba(17,11,9,.72); color:rgba(248,210,183,.92); text-align:right;
  font:500 8px "Space Mono",monospace; font-variant-numeric:tabular-nums;
}
.solar-visual-lab__hex { width:74px; text-align:left; text-transform:lowercase; }
.solar-visual-lab__number:focus,.solar-visual-lab__hex:focus { border-color:rgba(245,157,96,.62); box-shadow:0 0 0 1px rgba(245,157,96,.14); }
.solar-visual-lab__number::-webkit-inner-spin-button,.solar-visual-lab__number::-webkit-outer-spin-button { opacity:.45; }
.solar-visual-lab__color { width:38px; height:24px; padding:0; border:1px solid rgba(234,151,96,.20); border-radius:6px; background:rgba(17,11,9,.72); cursor:pointer; }
.solar-visual-lab__actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; border-top:1px solid rgba(255,172,113,.11); }
.solar-visual-lab__button { min-height:34px; padding:7px 8px; border:1px solid rgba(234,151,96,.18); border-radius:9px; background:rgba(45,27,19,.66); color:rgba(248,231,218,.86); font:600 8px "Space Grotesk",sans-serif; cursor:pointer; }
.solar-visual-lab__button--primary { background:rgba(115,55,25,.52); border-color:rgba(245,154,92,.31); color:rgba(255,241,230,.96); }
.solar-visual-lab__button:hover { background:rgba(75,40,25,.84); }
.solar-visual-lab__status { min-height:18px; padding-top:7px; color:rgba(246,163,106,.76); font:500 8px/1.35 "Space Grotesk",sans-serif; }

@media (max-width: 1100px) {
  .solar-visual-lab { left:12px; top:148px; width:min(330px,calc(100vw - 24px)); max-height:calc(100vh - 168px); }
  .solar-visual-lab__body { max-height:calc(100vh - 228px); }
}

/* Unified debug toolbar ---------------------------------------------------- */
.debug-toolbar {
  position: fixed;
  z-index: 48;
  top: 68px;
  right: 18px;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 16px);
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
  color: rgba(231,241,255,.92);
  background: rgba(5,10,18,.93);
  box-shadow: 0 18px 52px rgba(0,0,0,.40);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  pointer-events: auto;
  touch-action: none;
}
.debug-toolbar.is-dragging { cursor: grabbing; user-select: none; }
.debug-toolbar__bar {
  min-height: 42px;
  display: grid;
  /* grip | title + persistent status row | activity | collapse */
  grid-template-columns: 20px minmax(0,1fr) 10px 30px;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 9px;
  border-bottom: 1px solid rgba(128,173,226,.13);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.debug-toolbar.is-dragging .debug-toolbar__bar { cursor: grabbing; }
.debug-toolbar__grip {
  color: rgba(126,151,178,.52);
  font: 600 15px/1 "Space Mono", monospace;
  transform: translateY(-1px);
}
.debug-toolbar__heading {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.debug-toolbar__status-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  overflow: hidden;
}
.debug-toolbar__heading > span {
  color: rgba(121,178,238,.60);
  font: 600 6px/1.1 "Space Mono", monospace;
  letter-spacing: .15em;
}
.debug-toolbar__heading strong {
  overflow: hidden;
  color: rgba(234,243,253,.92);
  font: 600 10px/1.15 "Space Grotesk", sans-serif;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debug-toolbar__activity {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(124,147,171,.20);
  transition: background .18s ease, box-shadow .18s ease;
}
.debug-toolbar__activity.active {
  background: #79bfff;
  box-shadow: 0 0 8px rgba(121,191,255,.72);
}
.debug-toolbar__fps-badge {
  min-width: 78px;
  padding: 7px 11px;
  border: 1px solid rgba(72,190,236,.42);
  border-radius: 7px;
  background: rgba(15,64,82,.32);
  color: #9aedff;
  font: 700 14px/1 "Space Mono", monospace;
  text-align: center;
  letter-spacing: .015em;
  white-space: nowrap;
}
.debug-toolbar__fps-badge.is-good {
  color: #91e6b0;
  border-color: rgba(74,204,124,.42);
  background: rgba(24,91,50,.28);
}
.debug-toolbar__fps-badge.is-warn {
  color: #ffd185;
  border-color: rgba(236,173,71,.44);
  background: rgba(104,67,20,.29);
}
.debug-toolbar__fps-badge.is-low {
  color: #ff9b9b;
  border-color: rgba(236,91,91,.45);
  background: rgba(105,35,35,.30);
}
.debug-toolbar__fps-badge[hidden] { display: none; }
.debug-toolbar__texture-format-badge {
  min-width: 48px;
  padding: 5px 8px;
  border: 1px solid rgba(121,184,245,.30);
  border-radius: 7px;
  background: rgba(24,48,72,.34);
  color: #b9dcff;
  font: 700 10px/1 "Space Mono", monospace;
  text-align: center;
  letter-spacing: .045em;
  white-space: nowrap;
}
.debug-toolbar__texture-format-badge.is-ktx2 {
  color: #91e6b0;
  border-color: rgba(74,204,124,.38);
  background: rgba(24,91,50,.24);
}
.debug-toolbar__texture-format-badge.is-jpg {
  color: #ffd185;
  border-color: rgba(236,173,71,.38);
  background: rgba(104,67,20,.24);
}
.debug-fps-overlay {
  position: fixed;
  z-index: 52;
  top: 76px;
  left: 10px;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(3,8,14,.42);
  color: rgba(153,207,255,.72);
  font: 600 8px/1 "Space Mono", monospace;
  letter-spacing: .025em;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
  pointer-events: none;
  user-select: none;
}
.debug-fps-overlay[hidden] { display: none; }
.debug-toolbar__collapse {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(121,171,228,.16);
  border-radius: 8px;
  background: rgba(19,31,48,.62);
  color: rgba(222,237,255,.88);
  font: 500 17px/1 "Space Grotesk", sans-serif;
  cursor: pointer;
}
.debug-toolbar__collapse:hover,
.debug-toolbar__collapse:focus-visible { background: rgba(30,49,74,.78); border-color: rgba(121,184,245,.38); }
.debug-toolbar__content { min-width: 0; }
.debug-toolbar__quick {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 0;
}
.debug-toolbar__switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(196,216,237,.78);
  font: 600 8px/1 "Space Grotesk", sans-serif;
  cursor: pointer;
  user-select: none;
}
.debug-toolbar__switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.debug-toolbar__switch-track {
  position: relative;
  width: 28px;
  height: 15px;
  border: 1px solid rgba(112,154,197,.26);
  border-radius: 999px;
  background: rgba(28,43,60,.80);
  transition: background .16s ease,border-color .16s ease;
}
.debug-toolbar__switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(184,205,226,.72);
  transition: transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.debug-toolbar__switch input:checked + .debug-toolbar__switch-track {
  background: rgba(53,117,169,.48);
  border-color: rgba(111,187,246,.46);
}
.debug-toolbar__switch input:checked + .debug-toolbar__switch-track::after {
  transform: translateX(13px);
  background: #8ed2ff;
  box-shadow: 0 0 7px rgba(100,193,255,.54);
}
.debug-toolbar__switch input:focus-visible + .debug-toolbar__switch-track {
  outline: 2px solid rgba(121,191,255,.42);
  outline-offset: 2px;
}
.debug-toolbar.is-collapsed { width: min(520px, calc(100vw - 24px)); }
.debug-toolbar.is-collapsed .debug-toolbar__content { display: none; }
.debug-toolbar.is-collapsed .debug-toolbar__bar { border-bottom-color: transparent; }

.debug-toolbar__tools {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 7px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(128,173,226,.10);
  scrollbar-width: thin;
}
.debug-toolbar__tool {
  min-width: 82px;
  flex: 1 0 82px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) 6px;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(195,214,234,.72);
  text-align: left;
  cursor: pointer;
}
.debug-toolbar__tool:hover:not(:disabled),
.debug-toolbar__tool:focus-visible:not(:disabled) {
  background: rgba(77,126,174,.12);
  border-color: rgba(117,175,232,.16);
}
.debug-toolbar__tool.active {
  background: rgba(55,112,164,.20);
  border-color: rgba(115,182,244,.26);
  color: rgba(236,247,255,.96);
}
.debug-toolbar__tool:disabled { opacity: .28; cursor: default; }
.debug-toolbar__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(110,164,220,.08);
  color: rgba(143,198,247,.78);
  font-size: 11px;
}
.debug-toolbar__tool-copy { min-width: 0; display: grid; gap: 1px; }
.debug-toolbar__tool-copy strong {
  overflow: hidden;
  font: 600 7px/1.15 "Space Grotesk", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debug-toolbar__tool-copy small {
  display: none;
  color: rgba(155,173,194,.52);
  font: 500 6px/1.15 "Space Grotesk", sans-serif;
}
.debug-toolbar__state {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(124,147,171,.22);
}
.debug-toolbar__tool.active .debug-toolbar__state {
  background: #79bfff;
  box-shadow: 0 0 7px rgba(121,191,255,.68);
}

.debug-toolbar__viewport {
  max-height: min(70vh, calc(100vh - 142px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}

/* Existing debug controls are hosted here without cloning them: IDs, listeners
   and controller references therefore remain exactly the same. */
#debug-toolbar .debug-toolbar__panel {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: none !important;
}
#debug-toolbar .debug-toolbar__panel.debug-toolbar-active { display: block !important; }
#debug-toolbar .lens-flare-lab__header,
#debug-toolbar .solar-visual-lab__header { display: none !important; }
#debug-toolbar .lens-flare-lab__body,
#debug-toolbar .solar-visual-lab__body {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 11px 12px 13px;
}
#debug-toolbar .lens-flare-lab.is-collapsed,
#debug-toolbar .solar-visual-lab.is-collapsed { width: 100% !important; }
#debug-toolbar #earth-lod-diagnostic {
  padding: 12px 13px 13px !important;
  border-bottom: 0 !important;
}
#debug-toolbar #voyager-debug-panel {
  padding: 0 !important;
}
#debug-toolbar #voyager-debug-panel > .voyager-photo-calibration {
  padding: 12px 13px 13px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#debug-toolbar #voyager-debug-panel > .voyager-photo-calibration + .voyager-photo-calibration {
  border-top: 1px solid rgba(104,158,211,.14) !important;
}

@media (max-width: 620px) {
  .debug-toolbar { top: 58px; right: 10px; width: min(360px, calc(100vw - 20px)); }
  .debug-toolbar.is-collapsed { width: min(520px, calc(100vw - 20px)); }
  .debug-toolbar__viewport { max-height: calc(100vh - 128px); }
}



/* Keyboard immersion layer ------------------------------------------------- */
#app.keyboard-ui-hidden .topbar,
#app.keyboard-ui-hidden .info-panel,
#app.keyboard-ui-hidden .view-controls,
#app.keyboard-ui-hidden .timeline-panel,
#app.keyboard-ui-hidden .events-mode-toggle,
#app.keyboard-ui-hidden .help-mode-toggle,
#app.keyboard-ui-hidden .exploration-mode-toggle,
#app.keyboard-ui-hidden .cinematic-mode-toggle,
#app.keyboard-ui-hidden .exploration-date,
#app.keyboard-ui-hidden #astronomical-events-panel,
#app.keyboard-ui-hidden #date-time-picker,
#app.keyboard-ui-hidden #help-modal,
#app.keyboard-ui-hidden #debug-toolbar,
#app.keyboard-ui-hidden #debug-fps-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#app.keyboard-ui-hidden .topbar { transform: translateY(calc(-100% - 8px)) !important; }
#app.keyboard-ui-hidden .info-panel { transform: translateX(calc(-100% - 8px)) !important; }
#app.keyboard-ui-hidden .view-controls { transform: translateX(calc(100% + 8px)) !important; }
#app.keyboard-ui-hidden .timeline-panel { transform: translate(-50%, calc(100% + 8px)) !important; }
#app.keyboard-ui-hidden .interaction-hint.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
}

.help-shortcuts {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid rgba(150,190,235,.13);
}
.help-shortcuts h3 {
  margin: 0 0 10px;
  color: rgba(214,233,255,.88);
  font: 600 10px/1.2 "Space Grotesk", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.help-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px 14px;
}
.help-shortcuts-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  color: rgba(174,193,214,.82);
  font: 500 9px/1.35 "Space Grotesk", sans-serif;
}
.help-shortcuts kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid rgba(132,183,235,.20);
  border-bottom-color: rgba(132,183,235,.34);
  border-radius: 6px;
  background: rgba(9,18,29,.68);
  color: #c9e5ff;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.035);
  font: 600 8px/1 "JetBrains Mono", monospace;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .help-shortcuts-grid { grid-template-columns: 1fr; }
}

.help-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* ========================================================================== */
/* Immersive UX layer — 20260902-0034                                        */
/* ========================================================================== */
:root{
  --ui-motion-fast:160ms;
  --ui-motion-medium:280ms;
  --ui-motion-slow:520ms;
  --ui-ease:cubic-bezier(.22,1,.36,1);
}

/* One motion grammar for interactive chrome. */
.topbar,.info-panel,.view-controls,.timeline-panel,.astronomical-events-panel,.date-time-picker,
.help-card,.remarkable-moment,.technical-hud,.command-palette__card,
.view-controls button,.topbar button,.info-panel button,.timeline-panel button{
  transition-timing-function:var(--ui-ease);
}
.view-controls button,.topbar button,.info-panel button,.timeline-panel button{
  transition-duration:var(--ui-motion-fast);
}
.glass-panel{will-change:transform,opacity}

/* Selection focus emphasis: no outline around the body, only a short optical
   concentration toward the destination while the existing 3D flight runs. */
.focus-emphasis{
  position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0 19%,rgba(1,3,7,.04) 34%,rgba(1,3,7,.24) 72%,rgba(0,1,3,.48) 100%);
  transition:opacity var(--ui-motion-medium) ease;
}
#app.selection-transition .focus-emphasis{opacity:1;animation:stellarius-focus-breathe 1.15s var(--ui-ease) both}
#app.selection-transition .info-panel,#app.selection-transition .view-controls{opacity:.82}
@keyframes stellarius-focus-breathe{0%{opacity:0}28%{opacity:1}76%{opacity:.78}100%{opacity:.2}}

/* Visual astronomical timeline. */
.timeline-scrubber-wrap{position:relative;height:19px;margin-top:3px}
.timeline-scrubber-wrap>input{position:relative;z-index:2;margin:0}
.timeline-event-markers{position:absolute;z-index:3;left:6px;right:6px;top:-5px;height:12px;pointer-events:none}
.timeline-event-marker{
  --marker-x:50%;position:absolute;left:var(--marker-x);top:0;width:7px;height:7px;padding:0;
  transform:translateX(-50%) rotate(45deg);border:1px solid rgba(174,213,255,.76);border-radius:1px;
  background:#8ec5ff;box-shadow:0 0 8px rgba(112,169,255,.52);pointer-events:auto;cursor:pointer;
}
.timeline-event-marker[data-kind="solar"]{background:#ffd486;border-color:#ffe3a8;box-shadow:0 0 8px rgba(255,197,100,.5)}
.timeline-event-marker[data-kind="lunar"]{background:#b7ccff;border-color:#d7e3ff}
.timeline-event-marker[data-kind="hubble"]{background:#86dbf5;border-color:#c6f2ff;box-shadow:0 0 8px rgba(88,197,235,.38)}
.timeline-event-marker[data-kind="launch"]{width:6px;height:6px;border-radius:50%;transform:translateX(-50%);background:#8ee8df;border-color:#b7fff6}
.timeline-event-marker[data-kind="history"]{background:#d6a8ff;border-color:#e7cbff}
.timeline-event-marker:hover,.timeline-event-marker:focus-visible{z-index:5;transform:translateX(-50%) rotate(45deg) scale(1.55);outline:none}
.timeline-event-marker[data-kind="launch"]:hover,.timeline-event-marker[data-kind="launch"]:focus-visible{transform:translateX(-50%) scale(1.55)}
.timeline-footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:1px}
.timeline-footer .epoch-markers{min-width:0}
.timeline-scale-context{color:rgba(125,178,239,.48);font:600 6.5px/1 "JetBrains Mono",monospace;letter-spacing:.11em;white-space:nowrap;text-transform:uppercase}
.timeline-panel[data-time-band="realtime"] .timeline-scale-context{color:rgba(150,211,255,.66)}
.timeline-panel[data-time-band="minutes"] .timeline-track input::-webkit-slider-runnable-track{height:2.5px}
.timeline-panel[data-time-band="hours"] .timeline-track input::-webkit-slider-runnable-track{height:3px;box-shadow:0 0 9px rgba(98,168,255,.16)}
.timeline-panel[data-time-band="days"] .timeline-track input::-webkit-slider-runnable-track{height:3px;box-shadow:0 0 12px rgba(98,168,255,.24)}
.timeline-panel[data-time-band="months"] .timeline-track input::-webkit-slider-runnable-track{height:4px;box-shadow:0 0 15px rgba(98,168,255,.32)}
.timeline-panel[data-time-band="years"] .timeline-track input::-webkit-slider-runnable-track{height:4px;box-shadow:0 0 18px rgba(125,190,255,.42)}
.timeline-panel[data-time-band="months"] .timeline-track input::-webkit-slider-thumb,
.timeline-panel[data-time-band="years"] .timeline-track input::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;box-shadow:0 0 16px rgba(104,181,255,.78)}

/* Dynamic remarkable moments. */
.remarkable-moment{
  position:fixed;z-index:24;left:50%;top:92px;display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto;align-items:center;gap:10px;
  width:min(560px,calc(100vw - 48px));padding:9px 10px 9px 12px;border-radius:13px;
  opacity:0;transform:translate(-50%,-10px) scale(.985);pointer-events:none;
}
.remarkable-moment:not([hidden]){opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto;animation:remarkable-arrive .42s var(--ui-ease) both}
@keyframes remarkable-arrive{from{opacity:0;transform:translate(-50%,-12px) scale(.98)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.remarkable-moment__icon{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(130,190,255,.25);border-radius:50%;color:#9ed4ff;background:rgba(63,119,178,.12);box-shadow:0 0 16px rgba(87,158,232,.13)}
.remarkable-moment__body{display:flex;min-width:0;flex-direction:column;gap:2px}
.remarkable-moment__body small{color:#71859c;font:600 6.5px/1 "JetBrains Mono",monospace;letter-spacing:.17em}
.remarkable-moment__body strong{overflow:hidden;color:#e7f3ff;font:600 10px/1.2 "Space Grotesk",sans-serif;text-overflow:ellipsis;white-space:nowrap}
.remarkable-moment__body span{color:#8ca9c8;font:500 7px/1.2 "JetBrains Mono",monospace}
.remarkable-moment>button{border:1px solid rgba(114,169,255,.24);border-radius:8px;background:rgba(44,90,138,.24);padding:7px 9px;color:#cfe8ff;font:600 7px/1 "JetBrains Mono",monospace;text-transform:uppercase}
.remarkable-moment .remarkable-moment__dismiss{width:25px;height:25px;padding:0;border:0;background:transparent;color:#738194;font-size:15px}

/* Technical state exists only when local-debug/DebugToolbar.js creates it.
   The toolbar then docks it into its persistent header. */
.technical-hud{display:none}
.technical-hud.technical-hud--debug{
  position:static;
  z-index:auto;
  min-width:0;
  display:flex;
  flex:1 1 auto;
  align-items:center;
  gap:8px;
  pointer-events:auto;
  opacity:1;
}
.technical-chip{
  min-width:0;
  padding:7px 11px;
  border:1px solid rgba(122,174,230,.20);
  border-radius:7px;
  background:rgba(5,10,17,.62);
  color:#b7c8d9;
  font:700 13px/1 "JetBrains Mono",monospace;
  letter-spacing:.025em;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.014);
}
.technical-chip.is-active{filter:saturate(1.18) brightness(1.08)}
#tech-scale{color:#c7adff;border-color:rgba(166,125,255,.34);background:rgba(76,45,126,.26)}
#tech-texture{color:#8fe5b2;border-color:rgba(90,207,139,.34);background:rgba(27,91,54,.25)}
#tech-camera{color:#ffd083;border-color:rgba(244,174,71,.36);background:rgba(111,69,19,.25)}
#tech-renderer{color:#ff9ed9;border-color:rgba(232,104,184,.35);background:rgba(105,34,80,.25)}

/* Command palette. */
.command-palette{position:fixed;inset:0;z-index:140;display:grid;place-items:start center;padding-top:min(15vh,132px);background:rgba(1,3,7,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--ui-motion-fast) ease}
.command-palette:not([hidden]){opacity:1;pointer-events:auto}
.command-palette__card{width:min(620px,calc(100vw - 36px));max-height:min(68vh,620px);overflow:hidden;border-radius:16px;transform:translateY(-9px) scale(.985);transition:transform var(--ui-motion-medium) var(--ui-ease)}
.command-palette:not([hidden]) .command-palette__card{transform:translateY(0) scale(1)}
.command-palette__search{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.command-palette__search>span{color:#83bfff;font:600 14px/1 "JetBrains Mono",monospace}
.command-palette__search input{min-width:0;border:0;outline:0;background:transparent;color:#eff7ff;font:500 14px/1.3 "Space Grotesk",sans-serif}
.command-palette__search input::placeholder{color:#68788b}
.command-palette__search kbd{padding:4px 6px;border:1px solid rgba(255,255,255,.1);border-radius:5px;background:rgba(255,255,255,.025);color:#708094;font:500 7px/1 "JetBrains Mono",monospace}
.command-palette__results{max-height:46vh;overflow:auto;padding:6px}
.command-result{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;border:0;border-radius:9px;background:transparent;padding:8px 9px;text-align:left;color:#aebdcd;cursor:pointer}
.command-result:hover,.command-result.active{background:rgba(84,139,202,.13);color:#ebf6ff}
.command-result__icon{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(112,169,255,.13);border-radius:7px;background:rgba(31,63,97,.18);color:#8ec6ff;font:600 10px/1 "JetBrains Mono",monospace}
.command-result strong{display:block;font:600 9px/1.25 "Space Grotesk",sans-serif}.command-result small{display:block;margin-top:2px;color:#697b8f;font:500 6.5px/1.2 "JetBrains Mono",monospace;letter-spacing:.04em}
.command-result kbd{color:#61758b;font:500 6px/1 "JetBrains Mono",monospace}
.command-palette__empty{padding:24px;text-align:center;color:#728399;font:500 9px/1.4 "JetBrains Mono",monospace}
.command-palette__foot{padding:8px 13px;border-top:1px solid rgba(255,255,255,.06);color:#596b7d;font:500 6.5px/1 "JetBrains Mono",monospace}



@media(max-width:760px){
  .remarkable-moment{top:74px;grid-template-columns:auto 1fr auto}.remarkable-moment #remarkable-moment-observe{display:none}
}
@media(prefers-reduced-motion:reduce){
  .focus-emphasis,.remarkable-moment,.command-palette,.command-palette__card{animation:none!important;transition-duration:.01ms!important}
}

/* The temporal-speed slider itself becomes progressively more emphatic as the
   simulation crosses larger units; geometry stays identical, only hierarchy
   and glow communicate the active temporal scale. */
.timeline-panel[data-time-band="minutes"] .time-scale input::-webkit-slider-runnable-track{height:2.5px;box-shadow:0 0 7px rgba(98,168,255,.12)}
.timeline-panel[data-time-band="hours"] .time-scale input::-webkit-slider-runnable-track{height:3px;box-shadow:0 0 9px rgba(98,168,255,.18)}
.timeline-panel[data-time-band="days"] .time-scale input::-webkit-slider-runnable-track{height:3px;box-shadow:0 0 12px rgba(98,168,255,.24)}
.timeline-panel[data-time-band="months"] .time-scale input::-webkit-slider-runnable-track,.timeline-panel[data-time-band="years"] .time-scale input::-webkit-slider-runnable-track{height:4px;box-shadow:0 0 16px rgba(112,181,255,.34)}
.timeline-panel[data-time-band="months"] .time-scale input::-webkit-slider-thumb,.timeline-panel[data-time-band="years"] .time-scale input::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;box-shadow:0 0 17px rgba(104,181,255,.8)}
.timeline-panel[data-time-band="minutes"] .time-scale input::-moz-range-track{height:2.5px}.timeline-panel[data-time-band="hours"] .time-scale input::-moz-range-track,.timeline-panel[data-time-band="days"] .time-scale input::-moz-range-track{height:3px}.timeline-panel[data-time-band="months"] .time-scale input::-moz-range-track,.timeline-panel[data-time-band="years"] .time-scale input::-moz-range-track{height:4px}
#app.keyboard-ui-hidden .technical-hud,#app.keyboard-ui-hidden .remarkable-moment{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
#app.exploration-mode .technical-hud,#app.exploration-mode .remarkable-moment{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.timeline-event-marker::after{content:"";position:absolute;inset:-5px}


/* Expressive temporal-speed ruler -------------------------------------------------
   The speed control is a discrete ladder, so every profile exposes its real
   available steps directly under the thumb instead of generic endpoint labels. */
.time-scale{--speed-progress:0%}
.time-scale input::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,
    rgba(105,181,255,.86) 0,
    rgba(121,214,255,.62) var(--speed-progress),
    rgba(74,98,126,.34) var(--speed-progress),
    rgba(74,98,126,.34) 100%);
}
.time-scale input::-moz-range-track{
  background:linear-gradient(90deg,
    rgba(105,181,255,.86) 0,
    rgba(121,214,255,.62) var(--speed-progress),
    rgba(74,98,126,.34) var(--speed-progress),
    rgba(74,98,126,.34) 100%);
}
.speed-markers{
  position:relative;
  height:20px;
  margin:0 1px;
  color:#4f6174;
  font:500 6.4px/1 "JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  user-select:none;
}
.speed-markers span{
  position:absolute;
  top:7px;
  transform:translateX(-50%);
  color:inherit;
  transition:color .18s ease,text-shadow .18s ease,opacity .18s ease;
}
.speed-markers span::before{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  width:1px;
  height:4px;
  transform:translateX(-50%);
  border-radius:1px;
  background:rgba(111,151,194,.32);
  transition:height .18s ease,background .18s ease,box-shadow .18s ease;
}
.speed-markers span[data-edge="start"]{transform:none;text-align:left}
.speed-markers span[data-edge="start"]::before{left:0;transform:none}
.speed-markers span[data-edge="end"]{transform:translateX(-100%);text-align:right}
.speed-markers span[data-edge="end"]::before{left:100%}
.speed-markers span.active{
  color:#c9e8ff;
  text-shadow:0 0 9px rgba(105,182,255,.38);
}
.speed-markers span.active::before{
  height:6px;
  background:rgba(151,211,255,.95);
  box-shadow:0 0 7px rgba(105,182,255,.62);
}
.timeline-panel[data-time-band="months"] .speed-markers span.active,
.timeline-panel[data-time-band="years"] .speed-markers span.active{color:#e1f3ff}
@media(max-width:760px){
  .speed-markers{font-size:5.7px;height:18px}
}


/* Mission replay studio ---------------------------------------------------- */
.mission-console{position:fixed;left:50%;bottom:142px;transform:translateX(-50%);z-index:32;width:min(1180px,calc(100vw - 36px));padding:14px 16px 12px;border:1px solid rgba(104,181,255,.24);background:linear-gradient(180deg,rgba(8,16,27,.66),rgba(5,10,18,.58));box-shadow:0 18px 60px rgba(0,0,0,.28);backdrop-filter:blur(14px) saturate(118%);-webkit-backdrop-filter:blur(14px) saturate(118%);opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}
.mission-console.is-pointer-idle{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,10px);transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .28s}
#app.exploration-mode .mission-console{bottom:18px}
.mission-console[hidden]{display:none!important}.mission-console__header,.mission-console__status,.mission-console__cameras{display:flex;align-items:center;gap:16px}.mission-console__header{justify-content:space-between;margin-bottom:10px}.mission-console__header>div{display:grid;gap:2px}.mission-console__header small,.mission-console__status small,.mission-console__cameras small{font:600 8px/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;color:#65819e}.mission-console__header strong{font-size:15px;color:#e7f3ff}.mission-console__header button{border:0;background:transparent;color:#8ca3bb;font-size:20px;cursor:pointer}.mission-console__status{display:grid;grid-template-columns:1fr .55fr 1.3fr;margin-bottom:9px}.mission-console__status>div{display:grid;gap:3px}.mission-console__status strong{font-size:12px;color:#d8eaff}.mission-console__director>div{display:flex;gap:5px}.mission-console button{font-family:"JetBrains Mono",monospace}.mission-console__director button,.mission-console__cameras button{border:1px solid rgba(111,151,194,.22);background:rgba(22,38,56,.54);color:#7690aa;border-radius:4px;padding:5px 7px;font-size:8px;cursor:pointer}.mission-console__director button.active,.mission-console__cameras button.active{color:#dff3ff;border-color:rgba(105,181,255,.72);background:rgba(55,119,170,.28);box-shadow:0 0 12px rgba(80,165,225,.12)}.mission-console__progress{position:relative;height:14px;margin:-6px 0;background:linear-gradient(transparent 6px,rgba(77,103,132,.25) 6px,rgba(77,103,132,.25) 8px,transparent 8px);overflow:visible}.mission-console__progress span{position:absolute;left:0;top:6px;height:2px;width:0;background:linear-gradient(90deg,#6ab2ff,#9fdcff);transition:width .1s linear;pointer-events:none}.mission-console__progress input{position:absolute;inset:0;width:100%;height:14px;margin:0;opacity:0;cursor:ew-resize;z-index:2}.mission-console__timeline{display:grid;grid-template-columns:repeat(var(--mission-phase-count,9),minmax(0,1fr));gap:0;margin:9px 0 11px}.mission-console__timeline button{position:relative;border:0;background:transparent;color:#52687f;min-width:0;padding:11px 4px 0;cursor:pointer}.mission-console__timeline button::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:rgba(91,122,151,.24)}.mission-console__timeline button span{position:absolute;top:0;left:50%;width:7px;height:7px;border-radius:50%;transform:translateX(-50%);background:#2d4257;border:1px solid #4c667f;z-index:1}.mission-console__timeline button.passed span{background:#5d98c6}.mission-console__timeline button.active span{background:#c9ecff;box-shadow:0 0 10px rgba(110,190,255,.85)}.mission-console__timeline button.active small{color:#d8efff}.mission-console__timeline small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px}.mission-console__cameras{align-items:flex-start;gap:24px}.mission-console__cameras section{flex:1;display:grid;gap:6px}.mission-console__cameras section>div{display:flex;flex-wrap:wrap;gap:5px}.mission-console__note{margin:9px 0 0;color:#62798f;font:500 7.5px/1.35 "JetBrains Mono",monospace}.mission-console~.timeline-panel{transition:opacity .2s ease}.mission-console:not([hidden])~.timeline-panel{opacity:.38}.mission-console:not([hidden])~.timeline-panel:hover{opacity:.92}@media(max-width:900px){.mission-console{bottom:126px}.mission-console__timeline{grid-template-columns:repeat(4,1fr);row-gap:5px}.mission-console__status{grid-template-columns:1fr 1fr}.mission-console__director{grid-column:1/-1}.mission-console__cameras{display:grid}}

/* 0174 · Mission mode: clean scene + docking telemetry / playback surface */
#app.mission-mode>.topbar,
#app.mission-mode>.info-panel,
#app.mission-mode>.view-controls,
#app.mission-mode>.timeline-panel,
#app.mission-mode>.events-mode-toggle,
#app.mission-mode>.help-mode-toggle,
#app.mission-mode>.exploration-mode-toggle,
#app.mission-mode>.cinematic-mode-toggle,
#app.mission-mode>.exploration-date,
#app.mission-mode>.astronomical-events-panel,
#app.mission-mode>.remarkable-moment,
#app.mission-mode>.technical-hud{display:none!important}

#app.mission-mode .mission-console{bottom:18px;width:min(1040px,calc(100vw - 28px));padding:12px 16px 13px;background:linear-gradient(180deg,rgba(3,7,12,.78),rgba(2,5,9,.70));border-color:rgba(176,211,240,.20);box-shadow:0 16px 56px rgba(0,0,0,.34)}
#app.mission-mode .mission-console__header{margin-bottom:7px}
#app.mission-mode .mission-console__status{grid-template-columns:minmax(180px,.8fr) 1.6fr;margin-bottom:7px;align-items:end}
#app.mission-mode .mission-console__director{justify-self:end;width:min(100%,500px)}

.mission-docking-hud{display:grid;grid-template-columns:150px minmax(205px,1fr);align-items:center;justify-content:center;justify-items:center;gap:30px;margin:5px auto 10px;max-width:430px}
.mission-capture-indicator{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;isolation:isolate;transition:filter .25s ease,opacity .25s ease}
.mission-capture-ring{position:absolute;inset:6px;border-radius:50%;border:2px solid rgba(185,207,225,.20);box-shadow:inset 0 0 0 8px rgba(154,182,204,.025),0 0 0 1px rgba(0,0,0,.75)}
.mission-capture-ring::before,.mission-capture-ring::after{content:"";position:absolute;inset:13px;border-radius:50%;border:1px solid rgba(203,220,233,.13)}
.mission-capture-ring::after{inset:25px;border-color:rgba(185,207,225,.10)}
.mission-capture-ring i{position:absolute;left:50%;top:50%;width:8px;height:13px;border:1px solid rgba(211,225,237,.28);border-radius:1px;background:rgba(141,168,190,.08);transform-origin:center center;box-sizing:border-box}
.mission-capture-ring i:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateY(-53px)}
.mission-capture-ring i:nth-child(2){transform:translate(-50%,-50%) rotate(90deg) translateY(-53px)}
.mission-capture-ring i:nth-child(3){transform:translate(-50%,-50%) rotate(180deg) translateY(-53px)}
.mission-capture-ring i:nth-child(4){transform:translate(-50%,-50%) rotate(270deg) translateY(-53px)}
.mission-capture-copy{position:relative;z-index:2;text-align:center;display:grid;gap:4px;text-shadow:0 0 10px rgba(0,0,0,.95)}
.mission-capture-copy small{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.18em;color:#667b8e}
.mission-capture-copy strong{font:700 12px/1.05 "JetBrains Mono",monospace;letter-spacing:.05em;color:#7c8e9e}
.mission-capture-indicator.approach{opacity:.56;filter:saturate(.45)}
.mission-capture-indicator.approach .mission-capture-ring{animation:missionDockScan 3.6s linear infinite}
.mission-capture-indicator.locked{opacity:1;filter:drop-shadow(0 0 9px rgba(220,240,255,.14))}
.mission-capture-indicator.locked .mission-capture-ring{border-color:rgba(236,247,255,.72);box-shadow:inset 0 0 0 8px rgba(217,237,251,.035),0 0 13px rgba(210,237,255,.11)}
.mission-capture-indicator.locked .mission-capture-ring::before{border-color:rgba(234,246,255,.40)}
.mission-capture-indicator.locked .mission-capture-ring i{border-color:#fff;background:#fff;box-shadow:0 0 7px rgba(235,248,255,.72)}
.mission-capture-indicator.locked .mission-capture-copy small,.mission-capture-indicator.locked .mission-capture-copy strong{color:#fff;text-shadow:0 0 8px rgba(211,237,255,.42)}
.mission-capture-indicator.locked .mission-capture-copy strong{font:800 23px/1 "JetBrains Mono",monospace;letter-spacing:0;margin-top:-1px}
.mission-capture-indicator.locking .mission-capture-ring{animation:missionDockLockRing .72s cubic-bezier(.2,.72,.2,1) 1}
.mission-capture-indicator.locking .mission-capture-ring i{animation:missionDockLockTick .72s cubic-bezier(.2,.72,.2,1) 1}
.mission-capture-indicator.locking .mission-capture-copy strong{animation:missionDockLockCheck .72s cubic-bezier(.18,.72,.2,1) 1}
@keyframes missionDockScan{to{transform:rotate(360deg)}}
@keyframes missionDockLockRing{0%{transform:scale(.93);filter:brightness(.75)}42%{transform:scale(1.045);filter:brightness(1.65)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes missionDockLockTick{0%{opacity:.18}38%{opacity:1;box-shadow:0 0 14px rgba(240,250,255,.95)}100%{opacity:1}}
@keyframes missionDockLockCheck{0%{opacity:0;transform:scale(.45)}45%{opacity:1;transform:scale(1.24)}100%{opacity:1;transform:scale(1)}}

.mission-range-gauge{position:relative;min-width:205px;height:132px;display:grid;grid-template-rows:30px 48px 18px;align-content:center;justify-items:center;text-align:center}
.mission-range-arc{--mission-range-angle:270deg;position:absolute;left:50%;top:3px;width:130px;height:130px;transform:translateX(-50%);border-radius:50%;background:conic-gradient(from 225deg,rgba(235,247,255,.90) 0deg var(--mission-range-angle),rgba(111,132,149,.34) var(--mission-range-angle) 270deg,transparent 270deg 360deg);mask:radial-gradient(circle,transparent 58%,#000 59% 63%,transparent 64%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 59% 63%,transparent 64%);opacity:.92;transition:background .10s linear}
.mission-range-gauge small{position:relative;z-index:1;align-self:end;font:700 8px/1.15 "JetBrains Mono",monospace;letter-spacing:.14em;color:#8aa0b4}
.mission-range-gauge strong{position:relative;z-index:1;font:500 38px/.95 "JetBrains Mono",monospace;letter-spacing:-.045em;color:#f1f8ff;text-shadow:0 0 12px rgba(205,234,255,.18)}
.mission-range-gauge span{position:relative;z-index:1;font:700 8px/1 "JetBrains Mono",monospace;letter-spacing:.18em;color:#60778c}

.mission-playback{display:grid;grid-template-columns:30px 36px 30px minmax(180px,1fr) 72px;gap:6px;align-items:center;margin:4px 0 2px}
.mission-playback>button,.mission-playback>select{height:28px;border:1px solid rgba(111,151,194,.24);background:rgba(13,25,37,.68);color:#8197aa;border-radius:4px;font:700 9px/1 "JetBrains Mono",monospace;cursor:pointer}
.mission-playback>button:hover,.mission-playback>button.active,.mission-playback>select:hover{color:#e5f5ff;border-color:rgba(151,207,246,.62);background:rgba(49,97,133,.28)}
.mission-playback__play{font-size:13px!important;color:#dcefff!important}
.mission-playback>select{padding:0 5px;outline:none}
.mission-playback .mission-console__progress{margin:0;height:28px;background:linear-gradient(transparent 13px,rgba(107,137,166,.28) 13px,rgba(107,137,166,.28) 15px,transparent 15px)}
.mission-playback .mission-console__progress span{top:13px}
.mission-playback .mission-console__progress input{height:28px}

@media(max-width:760px){
  #app.mission-mode .mission-console{width:calc(100vw - 16px);padding:10px}
  .mission-docking-hud{grid-template-columns:104px minmax(160px,1fr);gap:10px 14px;max-width:310px}
  .mission-range-gauge{height:112px;min-width:160px}
  .mission-capture-indicator{width:104px;height:104px}
  
  
  
  
  .mission-playback{grid-template-columns:28px 34px 28px 1fr 64px}
  #app.mission-mode .mission-console__status{grid-template-columns:1fr}
  #app.mission-mode .mission-console__director{justify-self:stretch;width:100%}
}
#app.mission-mode .mission-console.is-pointer-idle{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%);transition:none}
#app.mission-mode>#debug-toolbar{display:none!important}

@media (max-width:760px){
  .mission-capture-ring i{height:11px;width:7px}
  .mission-capture-ring i:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateY(-39px)}
  .mission-capture-ring i:nth-child(2){transform:translate(-50%,-50%) rotate(90deg) translateY(-39px)}
  .mission-capture-ring i:nth-child(3){transform:translate(-50%,-50%) rotate(180deg) translateY(-39px)}
  .mission-capture-ring i:nth-child(4){transform:translate(-50%,-50%) rotate(270deg) translateY(-39px)}
}
n/* 0177 — mission capture lock sequence + adaptive typography */
.mission-capture-copy{width:64%;max-width:82px;min-width:0;justify-items:center;gap:3px}
.mission-capture-copy small{font-size:clamp(8px,.72vw,10px);letter-spacing:clamp(.08em,.14vw,.18em);white-space:nowrap}
.mission-capture-copy strong{max-width:100%;font-size:clamp(8px,.82vw,11px);line-height:1.02;letter-spacing:clamp(.01em,.06vw,.05em);white-space:nowrap}
.mission-capture-indicator.locked .mission-capture-copy strong{font-size:clamp(19px,1.8vw,23px)}

/* During the 8 s soft-capture settling, the four physical latch markers
   validate one after another. Their state is driven from simulated mission
   progress so scrubbing/reverse playback remains deterministic. */
.mission-capture-indicator.locking-sequence{opacity:1;filter:drop-shadow(0 0 8px rgba(220,240,255,.10))}
.mission-capture-indicator.locking-sequence .mission-capture-ring{animation:none;border-color:rgba(224,239,250,.48)}
.mission-capture-indicator.locking-sequence .mission-capture-ring i{border-color:rgba(211,225,237,.38);background:rgba(141,168,190,.08);box-shadow:none;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease}
.mission-capture-indicator.locking-sequence.lock-step-1 .mission-capture-ring i:nth-child(1),
.mission-capture-indicator.locking-sequence.lock-step-2 .mission-capture-ring i:nth-child(-n/**/+2),
.mission-capture-indicator.locking-sequence.lock-step-3 .mission-capture-ring i:nth-child(-n/**/+3),
.mission-capture-indicator.locking-sequence.lock-step-4 .mission-capture-ring i:nth-child(-n/**/+4){border-color:#fff;background:#fff;box-shadow:0 0 8px rgba(235,248,255,.82);filter:brightness(1.18)}
.mission-capture-indicator.locking-sequence.lock-step-1 .mission-capture-ring i:nth-child(1){animation:missionLatchConfirm .24s cubic-bezier(.2,.8,.2,1) 1 both}
.mission-capture-indicator.locking-sequence.lock-step-2 .mission-capture-ring i:nth-child(2){animation:missionLatchConfirm .24s cubic-bezier(.2,.8,.2,1) 1 both}
.mission-capture-indicator.locking-sequence.lock-step-3 .mission-capture-ring i:nth-child(3){animation:missionLatchConfirm .24s cubic-bezier(.2,.8,.2,1) 1 both}
.mission-capture-indicator.locking-sequence.lock-step-4 .mission-capture-ring i:nth-child(4){animation:missionLatchConfirm .24s cubic-bezier(.2,.8,.2,1) 1 both}
.mission-capture-indicator.locking-sequence .mission-capture-copy strong{font-size:clamp(8px,.76vw,10px);letter-spacing:.035em;color:#eef8ff;animation:missionLockingTextBlink .72s steps(2,end) infinite}
.mission-capture-indicator.locking-sequence.lock-final .mission-capture-copy strong{font-size:clamp(19px,1.8vw,23px);letter-spacing:0;animation:missionDockFinalCheck .36s cubic-bezier(.18,.72,.2,1) 1 both}
@keyframes missionLockingTextBlink{0%,46%{opacity:1;text-shadow:0 0 8px rgba(218,240,255,.62)}47%,100%{opacity:.22;text-shadow:none}}
@keyframes missionLatchConfirm{0%{filter:brightness(.65);box-shadow:none}55%{filter:brightness(1.8);box-shadow:0 0 14px rgba(242,251,255,.98)}100%{filter:brightness(1.18);box-shadow:0 0 8px rgba(235,248,255,.82)}}
@keyframes missionDockFinalCheck{0%{opacity:0;transform:scale(.42)}70%{opacity:1;transform:scale(1.22)}100%{opacity:1;transform:scale(1)}}

/* Compact hard-capture cue: the same four markers lock in sequence, followed
   by the centre check. Animation only; the final state remains fully white. */
.mission-capture-indicator.locking .mission-capture-ring i:nth-child(1){animation:missionDockLockTick .20s ease 0s 1 both}
.mission-capture-indicator.locking .mission-capture-ring i:nth-child(2){animation:missionDockLockTick .20s ease .13s 1 both}
.mission-capture-indicator.locking .mission-capture-ring i:nth-child(3){animation:missionDockLockTick .20s ease .26s 1 both}
.mission-capture-indicator.locking .mission-capture-ring i:nth-child(4){animation:missionDockLockTick .20s ease .39s 1 both}
.mission-capture-indicator.locking .mission-capture-copy strong{animation:missionDockLockCheck .34s cubic-bezier(.18,.72,.2,1) .50s 1 both}

@media(max-width:700px){
  .mission-capture-copy{width:60%;max-width:62px}
  .mission-capture-copy small{font-size:8px;letter-spacing:.08em}
  .mission-capture-copy strong{font-size:8px;letter-spacing:0}
  .mission-capture-indicator.locking-sequence .mission-capture-copy strong{font-size:6.5px}
}

/* 0181 — Mission UI compacte + HUD scène */
#app.mission-mode .mission-console{bottom:12px;width:min(820px,calc(100vw - 24px));padding:8px 10px 9px;background:linear-gradient(180deg,rgba(3,7,12,.68),rgba(2,5,9,.62));backdrop-filter:blur(11px) saturate(112%);-webkit-backdrop-filter:blur(11px) saturate(112%)}
#app.mission-mode .mission-console__header{margin-bottom:4px}
#app.mission-mode .mission-console__header small{font-size:6px}
#app.mission-mode .mission-console__header strong{font-size:11px}
#app.mission-mode .mission-console__status{display:grid;grid-template-columns:minmax(130px,.7fr) 1fr;gap:8px;margin-bottom:3px}
#app.mission-mode .mission-console__status small,#app.mission-mode .mission-console__cameras small{font-size:6px}
#app.mission-mode .mission-console__status strong{font-size:9px}
#app.mission-mode .mission-console__director{justify-self:end;width:auto}
#app.mission-mode .mission-console__director button,#app.mission-mode .mission-console__cameras button{padding:3px 5px;font-size:6.5px}
#app.mission-mode .mission-playback{margin:2px 0 0;grid-template-columns:26px 30px 26px minmax(180px,1fr) 60px}
#app.mission-mode .mission-playback>button,#app.mission-mode .mission-playback>select{height:24px}
#app.mission-mode .mission-console__timeline{margin:4px 0 5px}
#app.mission-mode .mission-console__timeline button{padding:8px 2px 0}
#app.mission-mode .mission-console__timeline small{font-size:5.7px}
#app.mission-mode .mission-console__cameras{gap:10px}
#app.mission-mode .mission-console__cameras section{gap:3px}
#app.mission-mode .mission-console__cameras section>div{gap:3px}
#app.mission-mode .mission-console__note{display:none}
#app.mission-mode .mission-docking-hud{position:static;display:block;width:0;height:0;max-width:none;margin:0}
#app.mission-mode .mission-capture-indicator{position:fixed;left:22px;bottom:22px;z-index:31;width:118px;height:118px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.96);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s,filter .25s ease}
#app.mission-mode .mission-capture-indicator.mission-capture-visible{opacity:.92;visibility:visible;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
#app.mission-mode .mission-capture-indicator.approach.mission-capture-visible{opacity:.62}
#app.mission-mode .mission-range-gauge{position:fixed;right:22px;bottom:22px;z-index:31;width:150px;min-width:150px;height:118px;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(2,7,12,.22),transparent 68%);border-radius:50%}
#app.mission-mode .mission-range-arc{width:116px;height:116px}
#app.mission-mode .mission-range-gauge strong{font-size:34px}
@media (max-width:1120px){#app.mission-mode .mission-capture-indicator{left:12px;bottom:190px}#app.mission-mode .mission-range-gauge{right:12px;bottom:190px}}
@media (max-width:760px){#app.mission-mode .mission-console{width:calc(100vw - 12px);bottom:6px}#app.mission-mode .mission-console__cameras,#app.mission-mode .mission-console__timeline{display:none}#app.mission-mode .mission-capture-indicator{left:8px;bottom:118px;width:96px;height:96px}#app.mission-mode .mission-range-gauge{right:8px;bottom:118px;width:118px;min-width:118px;height:96px}#app.mission-mode .mission-range-arc{width:94px;height:94px;top:1px}#app.mission-mode .mission-range-gauge strong{font-size:28px}}


/* 0182 — Mission UI architecture
   HUD = scene overlay
   bottom sheet = playback + timeline
   right sheet = camera selection
*/
#app.mission-mode .mission-console,
#app.mission-mode .mission-console.is-pointer-idle{
  position:fixed;
  inset:0;
  z-index:30;
  width:auto;
  height:auto;
  padding:0;
  margin:0;
  border:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:none;
  transition:none;
}
#app.mission-mode .mission-console[hidden]{display:none!important}

/* Bottom sheet: only a slim grab area remains when pointer is away. */
#app.mission-mode .mission-bottomsheet{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:32;
  width:min(900px,calc(100vw - 380px));
  min-width:560px;
  padding:8px 12px 10px;
  border:1px solid rgba(145,190,225,.22);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,rgba(5,11,19,.86),rgba(2,7,12,.80));
  box-shadow:0 -12px 38px rgba(0,0,0,.24);
  backdrop-filter:blur(13px) saturate(112%);
  -webkit-backdrop-filter:blur(13px) saturate(112%);
  transform:translate(-50%,calc(100% - 18px));
  transition:transform .28s cubic-bezier(.22,1,.36,1),background .2s ease;
  pointer-events:auto;
}
#app.mission-mode .mission-bottomsheet:hover,
#app.mission-mode .mission-bottomsheet:focus-within{
  transform:translate(-50%,0);
}
#app.mission-mode .mission-sheet-handle{
  position:absolute;
  left:50%;
  top:4px;
  width:58px;
  height:3px;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(193,224,246,.50);
  box-shadow:0 0 10px rgba(130,196,238,.12);
}
#app.mission-mode .mission-bottomsheet__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:3px 0 5px;
}
#app.mission-mode .mission-bottomsheet__identity{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}
#app.mission-mode .mission-bottomsheet__identity small{
  font:700 6px/1 "JetBrains Mono",monospace;
  letter-spacing:.13em;
  color:#68839d;
  white-space:nowrap;
}
#app.mission-mode .mission-bottomsheet__identity strong{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  color:#e5f3ff;
}
#app.mission-mode .mission-bottomsheet__identity span{
  padding-left:9px;
  border-left:1px solid rgba(124,158,188,.22);
  font:600 7px/1.1 "JetBrains Mono",monospace;
  color:#8fa9bf;
  white-space:nowrap;
}
#app.mission-mode #mission-exit{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:#7892aa;
  font-size:17px;
  line-height:1;
  cursor:pointer;
}
#app.mission-mode .mission-playback{
  display:grid;
  grid-template-columns:24px 28px 24px minmax(170px,1fr) 58px;
  gap:5px;
  align-items:center;
  margin:0;
}
#app.mission-mode .mission-playback>button,
#app.mission-mode .mission-playback>select{
  height:22px;
  border-radius:4px;
  font-size:7px;
}
#app.mission-mode .mission-playback .mission-console__progress,
#app.mission-mode .mission-playback .mission-console__progress input{
  height:22px;
}
#app.mission-mode .mission-playback .mission-console__progress{
  background:linear-gradient(transparent 10px,rgba(107,137,166,.28) 10px,rgba(107,137,166,.28) 12px,transparent 12px);
}
#app.mission-mode .mission-playback .mission-console__progress span{top:10px}
#app.mission-mode .mission-console__timeline{
  margin:3px 0 0;
}
#app.mission-mode .mission-console__timeline button{
  padding:7px 2px 0;
}
#app.mission-mode .mission-console__timeline small{
  font-size:5.5px;
}

/* Right sheet: camera controls stay out of the scene until intentionally hovered. */
#app.mission-mode .mission-rightsheet{
  position:absolute;
  right:0;
  top:50%;
  z-index:33;
  width:250px;
  padding:10px 10px 11px 22px;
  border:1px solid rgba(145,190,225,.22);
  border-right:0;
  border-radius:12px 0 0 12px;
  background:linear-gradient(270deg,rgba(5,11,19,.90),rgba(3,8,14,.82));
  box-shadow:-12px 0 38px rgba(0,0,0,.24);
  backdrop-filter:blur(13px) saturate(112%);
  -webkit-backdrop-filter:blur(13px) saturate(112%);
  transform:translate(calc(100% - 18px),-50%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  pointer-events:auto;
}
#app.mission-mode .mission-rightsheet:hover,
#app.mission-mode .mission-rightsheet:focus-within{
  transform:translate(0,-50%);
}
#app.mission-mode .mission-rightsheet__handle{
  position:absolute;
  left:4px;
  top:50%;
  width:10px;
  height:70px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(193,224,246,.26);
  display:grid;
  place-items:center;
}
#app.mission-mode .mission-rightsheet__handle span{
  transform:rotate(-90deg);
  font:700 5px/1 "JetBrains Mono",monospace;
  letter-spacing:.13em;
  color:#98b3c9;
}
#app.mission-mode .mission-rightsheet__body{
  display:grid;
  gap:8px;
}
#app.mission-mode .mission-rightsheet__head small{
  display:block;
  font:700 6px/1 "JetBrains Mono",monospace;
  letter-spacing:.13em;
  color:#68839d;
}
#app.mission-mode .mission-rightsheet__head strong{
  display:block;
  margin-top:2px;
  font:700 10px/1.1 "JetBrains Mono",monospace;
  color:#dceeff;
}
#app.mission-mode .mission-console__director{
  display:flex;
  gap:4px;
  width:100%;
}
#app.mission-mode .mission-console__director button{
  padding:4px 6px;
  font-size:6.5px;
}
#app.mission-mode .mission-console__cameras{
  display:grid;
  gap:9px;
}
#app.mission-mode .mission-console__cameras section{
  display:grid;
  gap:4px;
}
#app.mission-mode .mission-console__cameras section>small{
  font-size:5.8px;
}
#app.mission-mode .mission-console__cameras section>div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}
#app.mission-mode .mission-console__cameras button{
  width:100%;
  padding:5px 5px;
  font-size:6.2px;
  text-align:left;
}

/* Scene HUD: outside mission-console so transforms/backdrop filters cannot trap fixed positioning. */
#app.mission-mode .mission-docking-hud{
  position:fixed;
  inset:0;
  z-index:31;
  width:auto;
  height:auto;
  margin:0;
  max-width:none;
  display:block;
  pointer-events:none;
}
#app:not(.mission-mode) .mission-docking-hud{display:none}
#app.mission-mode .mission-capture-indicator{
  position:absolute;
  left:22px;
  bottom:22px;
  width:118px;
  height:118px;
}
#app.mission-mode .mission-range-gauge{
  position:absolute;
  right:22px;
  bottom:22px;
  width:150px;
  min-width:150px;
  height:118px;
}

/* At desktop widths the bottom sheet physically fits between both HUD instruments. */
@media (max-width:1240px){
  #app.mission-mode .mission-bottomsheet{
    width:min(720px,calc(100vw - 310px));
    min-width:480px;
  }
  #app.mission-mode .mission-capture-indicator{left:14px}
  #app.mission-mode .mission-range-gauge{right:14px}
}
@media (max-width:900px){
  #app.mission-mode .mission-bottomsheet{
    width:calc(100vw - 150px);
    min-width:0;
  }
  #app.mission-mode .mission-bottomsheet__identity small,
  #app.mission-mode .mission-bottomsheet__identity span{display:none}
  #app.mission-mode .mission-rightsheet{width:220px}
  #app.mission-mode .mission-capture-indicator{width:92px;height:92px;bottom:20px}
  #app.mission-mode .mission-range-gauge{width:110px;min-width:110px;height:92px;bottom:20px}
}
@media (max-width:620px){
  #app.mission-mode .mission-bottomsheet{
    width:calc(100vw - 20px);
  }
  #app.mission-mode .mission-capture-indicator{
    left:8px;
    bottom:28px;
    transform:scale(.78);
    transform-origin:left bottom;
  }
  #app.mission-mode .mission-range-gauge{
    right:8px;
    bottom:28px;
    transform:scale(.78);
    transform-origin:right bottom;
  }
}


/* 0183 — Mission sheets: lisibilité renforcée et meilleur usage de l'espace vertical */
#app.mission-mode .mission-bottomsheet{
  width:min(1120px,calc(100vw - 330px));
  min-width:720px;
  padding:12px 18px 14px;
  border-radius:14px 14px 0 0;
}
#app.mission-mode .mission-sheet-handle{
  top:5px;
  width:72px;
  height:4px;
}
#app.mission-mode .mission-bottomsheet__meta{
  margin:6px 0 9px;
  gap:16px;
}
#app.mission-mode .mission-bottomsheet__identity{
  gap:12px;
}
#app.mission-mode .mission-bottomsheet__identity small{
  font-size:7.5px;
}
#app.mission-mode .mission-bottomsheet__identity strong{
  max-width:360px;
  font-size:12px;
}
#app.mission-mode .mission-bottomsheet__identity span{
  font-size:8.5px;
  padding-left:12px;
}
#app.mission-mode #mission-exit{
  font-size:20px;
}
#app.mission-mode .mission-playback{
  grid-template-columns:30px 36px 30px minmax(280px,1fr) 70px;
  gap:8px;
}
#app.mission-mode .mission-playback>button,
#app.mission-mode .mission-playback>select{
  height:30px;
  font-size:9px;
}
#app.mission-mode .mission-playback .mission-console__progress,
#app.mission-mode .mission-playback .mission-console__progress input{
  height:30px;
}
#app.mission-mode .mission-playback .mission-console__progress{
  background:linear-gradient(
    transparent 14px,
    rgba(107,137,166,.30) 14px,
    rgba(107,137,166,.30) 16px,
    transparent 16px
  );
}
#app.mission-mode .mission-playback .mission-console__progress span{
  top:14px;
}
#app.mission-mode .mission-console__timeline{
  margin:7px 0 1px;
}
#app.mission-mode .mission-console__timeline button{
  padding:10px 4px 1px;
}
#app.mission-mode .mission-console__timeline small{
  font-size:7px;
  line-height:1.15;
}

/* Right sheet: plus verticale, plus étroite, boutons empilés */
#app.mission-mode .mission-rightsheet{
  top:50%;
  width:214px;
  max-height:calc(100vh - 36px);
  padding:16px 12px 16px 24px;
  border-radius:16px 0 0 16px;
  overflow-y:auto;
  scrollbar-width:thin;
}
#app.mission-mode .mission-rightsheet__handle{
  left:5px;
  width:11px;
  height:92px;
}
#app.mission-mode .mission-rightsheet__handle span{
  font-size:6px;
}
#app.mission-mode .mission-rightsheet__body{
  gap:12px;
}
#app.mission-mode .mission-rightsheet__head small{
  font-size:7px;
}
#app.mission-mode .mission-rightsheet__head strong{
  margin-top:3px;
  font-size:12px;
}
#app.mission-mode .mission-console__director{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
#app.mission-mode .mission-console__director button{
  width:100%;
  min-height:31px;
  padding:7px 8px;
  font-size:8px;
  border-radius:7px;
}
#app.mission-mode .mission-console__cameras{
  gap:12px;
}
#app.mission-mode .mission-console__cameras section{
  gap:6px;
}
#app.mission-mode .mission-console__cameras section>small{
  font-size:7px;
}
#app.mission-mode .mission-console__cameras section>div{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
#app.mission-mode .mission-console__cameras button{
  min-height:32px;
  padding:7px 9px;
  font-size:8.2px;
  line-height:1.1;
  border-radius:8px;
  text-align:left;
}

/* Responsive: préserver la lisibilité avant de réduire les polices */
@media (max-width:1380px){
  #app.mission-mode .mission-bottomsheet{
    width:min(980px,calc(100vw - 300px));
    min-width:660px;
  }
}
@media (max-width:1100px){
  #app.mission-mode .mission-bottomsheet{
    width:calc(100vw - 250px);
    min-width:560px;
    padding:10px 14px 12px;
  }
  #app.mission-mode .mission-rightsheet{
    width:200px;
  }
}
@media (max-width:820px){
  #app.mission-mode .mission-bottomsheet{
    width:calc(100vw - 130px);
    min-width:0;
  }
  #app.mission-mode .mission-bottomsheet__identity small,
  #app.mission-mode .mission-bottomsheet__identity span{
    display:none;
  }
  #app.mission-mode .mission-rightsheet{
    width:190px;
  }
}


/* 0184 — Right sheet: dégager la jauge et compacter les libellés */
#app.mission-mode .mission-rightsheet{
  top:42%;
  width:188px;
  max-height:calc(100vh - 170px);
  padding:14px 10px 14px 22px;
}
#app.mission-mode .mission-rightsheet__body{
  gap:10px;
}
#app.mission-mode .mission-console__director{
  gap:5px;
}
#app.mission-mode .mission-console__director button{
  min-height:27px;
  padding:6px 7px;
  font-size:7.6px;
  border-radius:7px;
}
#app.mission-mode .mission-console__cameras{
  gap:10px;
}
#app.mission-mode .mission-console__cameras section{
  gap:5px;
}
#app.mission-mode .mission-console__cameras section>div{
  gap:5px;
}
#app.mission-mode .mission-console__cameras button{
  min-height:28px;
  padding:6px 8px;
  font-size:7.8px;
  border-radius:7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#app.mission-mode .mission-rightsheet__head strong{
  font-size:11px;
}
#app.mission-mode .mission-rightsheet__head small,
#app.mission-mode .mission-console__cameras section>small{
  font-size:6.6px;
}
@media (max-height:820px){
  #app.mission-mode .mission-rightsheet{
    top:40%;
    max-height:calc(100vh - 155px);
    width:180px;
    padding-top:10px;
    padding-bottom:10px;
  }
  #app.mission-mode .mission-rightsheet__body{gap:8px}
  #app.mission-mode .mission-console__cameras{gap:8px}
  #app.mission-mode .mission-console__director button,
  #app.mission-mode .mission-console__cameras button{
    min-height:25px;
    padding-top:5px;
    padding-bottom:5px;
  }
}


/* 0185 — SOFT CAPTURE proximity sensor */
#app.mission-mode .mission-capture-copy{
  width:72%;
  max-width:92px;
}
#app.mission-mode .mission-capture-copy small{
  font-size:clamp(7px,.62vw,9px);
  letter-spacing:.08em;
}
#app.mission-mode .mission-capture-copy strong{
  font-size:clamp(8px,.72vw,10px);
}

/* Keep the four proximity markers rotating during approach. Their validation
   is distance-driven, not time/settling-driven. */
#app.mission-mode .mission-capture-indicator.proximity-sequence{
  opacity:.88;
  filter:drop-shadow(0 0 7px rgba(220,240,255,.08));
}
#app.mission-mode .mission-capture-indicator.proximity-sequence .mission-capture-ring{
  border-color:rgba(224,239,250,.42);
  animation:missionDockScan 3.6s linear infinite;
}
#app.mission-mode .mission-capture-indicator.proximity-sequence .mission-capture-ring i{
  border-color:rgba(211,225,237,.38);
  background:rgba(141,168,190,.08);
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;
}
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-1 .mission-capture-ring i:nth-child(1),
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-2 .mission-capture-ring i:nth-child(-n/**/+2),
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-3 .mission-capture-ring i:nth-child(-n/**/+3),
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-4 .mission-capture-ring i:nth-child(-n/**/+4){
  border-color:#fff;
  background:#fff;
  box-shadow:0 0 8px rgba(235,248,255,.82);
  filter:brightness(1.18);
}
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-1 .mission-capture-ring i:nth-child(1),
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-2 .mission-capture-ring i:nth-child(2),
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-3 .mission-capture-ring i:nth-child(3),
#app.mission-mode .mission-capture-indicator.proximity-sequence.lock-step-4 .mission-capture-ring i:nth-child(4){
  animation:missionLatchConfirm .26s cubic-bezier(.2,.8,.2,1) 1 both;
}

/* APPROCHE flashes continuously until the actual Soft Capture lock. */
#app.mission-mode .mission-capture-indicator.proximity-sequence .mission-capture-copy strong{
  color:#eef8ff;
  animation:missionSoftApproachBlink .78s steps(2,end) infinite;
}
#app.mission-mode .mission-capture-indicator.locked .mission-capture-copy strong{
  animation:missionDockFinalCheck .36s cubic-bezier(.18,.72,.2,1) 1 both;
}
@keyframes missionSoftApproachBlink{
  0%,48%{opacity:1;text-shadow:0 0 8px rgba(218,240,255,.60)}
  49%,100%{opacity:.26;text-shadow:none}
}

/* At Soft Contact the remaining arc becomes the small residual white segment;
   the rest of the 270° track remains explicitly grey. */
#app.mission-mode .mission-range-arc{
  background:conic-gradient(
    from 225deg,
    rgba(235,247,255,.92) 0deg var(--mission-range-angle),
    rgba(111,132,149,.38) var(--mission-range-angle) 270deg,
    transparent 270deg 360deg
  );
}


/* 0186 — Dock HUD geometry + ultra-compact camera right sheet */

/* Put the four proximity markers fully inside the outer circle, in the
   annulus between outer and inner rings. */
#app.mission-mode .mission-capture-ring i:nth-child(1){
  transform:translate(-50%,-50%) rotate(0deg) translateY(-39px);
}
#app.mission-mode .mission-capture-ring i:nth-child(2){
  transform:translate(-50%,-50%) rotate(90deg) translateY(-39px);
}
#app.mission-mode .mission-capture-ring i:nth-child(3){
  transform:translate(-50%,-50%) rotate(180deg) translateY(-39px);
}
#app.mission-mode .mission-capture-ring i:nth-child(4){
  transform:translate(-50%,-50%) rotate(270deg) translateY(-39px);
}
#app.mission-mode .mission-capture-ring i{
  width:8px;
  height:15px;
  border-radius:2px;
}

/* Keep SOFT CAPTURE + APPROCHE entirely inside the second circle. */
#app.mission-mode .mission-capture-copy{
  width:58px;
  max-width:58px;
  gap:3px;
}
#app.mission-mode .mission-capture-copy small{
  display:block;
  max-width:58px;
  font-size:7.2px;
  line-height:1.05;
  letter-spacing:.035em;
  white-space:nowrap;
}
#app.mission-mode .mission-capture-copy strong{
  display:block;
  max-width:58px;
  font-size:7.8px;
  line-height:1.05;
  letter-spacing:.015em;
  white-space:nowrap;
}

/* Right sheet: harmonised typography, minimum useful width, no wrapping. */
#app.mission-mode .mission-rightsheet{
  width:162px;
  padding-left:20px;
  padding-right:8px;
}
#app.mission-mode .mission-rightsheet__head small,
#app.mission-mode .mission-console__cameras section>small{
  font-size:7px;
  line-height:1;
  letter-spacing:.09em;
}
#app.mission-mode .mission-rightsheet__head strong{
  font-size:10px;
  line-height:1.05;
  letter-spacing:.035em;
}
#app.mission-mode .mission-console__director button,
#app.mission-mode .mission-console__cameras button{
  min-height:27px;
  padding:5px 6px;
  font-size:7.4px;
  line-height:1;
  letter-spacing:.015em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  justify-content:center;
}
#app.mission-mode .mission-console__director,
#app.mission-mode .mission-console__cameras section>div{
  width:100%;
}
@media (max-height:820px){
  #app.mission-mode .mission-rightsheet{
    width:156px;
  }
  #app.mission-mode .mission-console__director button,
  #app.mission-mode .mission-console__cameras button{
    min-height:25px;
    font-size:7.1px;
  }
}


/* 0187 — Dock HUD final geometry */
#app.mission-mode .mission-capture-ring::after{
  display:none;
}
#app.mission-mode .mission-capture-ring::before{
  inset:13px;
  border-color:rgba(203,220,233,.16);
}
#app.mission-mode .mission-capture-ring i{
  width:7px;
  height:11px;
  border-radius:2px;
}
#app.mission-mode .mission-capture-ring i:nth-child(1){
  transform:translate(-50%,-50%) rotate(0deg) translateY(-46px);
}
#app.mission-mode .mission-capture-ring i:nth-child(2){
  transform:translate(-50%,-50%) rotate(90deg) translateY(-46px);
}
#app.mission-mode .mission-capture-ring i:nth-child(3){
  transform:translate(-50%,-50%) rotate(180deg) translateY(-46px);
}
#app.mission-mode .mission-capture-ring i:nth-child(4){
  transform:translate(-50%,-50%) rotate(270deg) translateY(-46px);
}

/* At zero, no residual white arc: the grey 270° track represents zero remaining. */
#app.mission-mode .mission-range-arc{
  background:conic-gradient(
    from 225deg,
    rgba(235,247,255,.92) 0deg var(--mission-range-angle),
    rgba(111,132,149,.42) var(--mission-range-angle) 270deg,
    transparent 270deg 360deg
  );
}


/* 0188 — Continuous distance gauge: visible consumed track at every range */
#app.mission-mode .mission-range-arc{
  filter:drop-shadow(0 0 4px rgba(210,235,250,.12));
  background:conic-gradient(
    from 225deg,
    rgba(238,248,255,.96) 0deg var(--mission-range-angle),
    rgba(105,126,144,.48) var(--mission-range-angle) 270deg,
    transparent 270deg 360deg
  );
}

/* -------------------------------------------------------------------------
   Mobile UI v2
   Smartphone layout uses mutually-exclusive drawers instead of shrinking the
   desktop panels until they overlap the simulation. Desktop/tablet behaviour
   is intentionally unchanged.
   ------------------------------------------------------------------------- */
.mobile-ui-dock,
.mobile-ui-backdrop { display: none; }

@media (max-width: 620px) {
  :root { --mobile-header-h: 82px; --mobile-dock-h: 46px; }

  /* Header: first row = brand + global tools, second row = simulation UTC. */
  .topbar {
    z-index: 25;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-header-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 6px;
    display: block;
    border-radius: 0 0 14px 14px;
  }
  .brand {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 8px);
    left: 10px;
    height: 31px;
  }
  .brand-logo { width: 116px; max-height: 30px; }
  .time-readout {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 5px;
    min-width: 0;
    height: 31px;
    padding: 0 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    border: 0;
    background: linear-gradient(90deg, rgba(73,126,196,.10), rgba(73,126,196,.02));
    border-radius: 8px;
  }
  .readout-label { flex: 0 0 auto; font-size: 6px; letter-spacing: .12em; }
  .time-readout strong { min-width: 0; font-size: 10px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { display: none; }

  /* The four global actions live on the first header row. */
  .exploration-mode-toggle, .cinematic-mode-toggle, .help-mode-toggle, .events-mode-toggle {
    top: calc(env(safe-area-inset-top) + 7px);
    width: 32px;
    height: 32px;
  }
  .exploration-mode-toggle { right: 8px; }
  .cinematic-mode-toggle { right: 44px; }
  .help-mode-toggle { right: 80px; }
  .events-mode-toggle { right: 116px; }

  /* Compact smartphone drawer selector. */
  .mobile-ui-dock {
    position: fixed;
    z-index: 27;
    top: calc(var(--mobile-header-h) + env(safe-area-inset-top) + 7px);
    left: 50%;
    width: min(272px, calc(100vw - 28px));
    height: var(--mobile-dock-h);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 4px;
    border-radius: 14px;
  }
  .mobile-ui-dock button {
    min-width: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #7d8998;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 6px;
    font: 600 8px/1 "Space Grotesk", sans-serif;
    letter-spacing: .035em;
  }
  .mobile-ui-dock button.active {
    color: #e7f3ff;
    background: rgba(101,159,235,.16);
    box-shadow: inset 0 0 0 1px rgba(126,184,255,.18);
  }
  .mobile-ui-dock__icon {
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font: 700 9px/1 "JetBrains Mono", monospace;
  }

  .mobile-ui-backdrop {
    position: fixed;
    z-index: 20;
    inset: calc(var(--mobile-header-h) + env(safe-area-inset-top)) 0 0;
    display: block;
    pointer-events: none;
    opacity: 0;
    background: rgba(1,4,8,.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity .18s ease;
  }
  #app.mobile-panel-open .mobile-ui-backdrop { opacity: 1; pointer-events: auto; }

  /* Mobile panels start closed. They are drawers, never simultaneous. */
  .info-panel,
  .view-controls,
  .timeline-panel {
    z-index: 22;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .24s cubic-bezier(.22,1,.36,1), visibility 0s linear .24s;
  }

  .info-panel {
    top: calc(var(--mobile-header-h) + var(--mobile-dock-h) + env(safe-area-inset-top) + 15px);
    left: 10px;
    right: 10px;
    bottom: auto;
    width: auto;
    max-height: calc(100dvh - var(--mobile-header-h) - var(--mobile-dock-h) - env(safe-area-inset-top) - 34px);
    padding: 16px;
    border-width: 1px;
    border-radius: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-10px) scale(.985);
  }
  #app.mobile-panel-info .info-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }
  .info-panel .data-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .info-panel .data-grid strong { overflow-wrap: anywhere; }

  /* Camera/body menu becomes a touch grid with readable labels. */
  .view-controls {
    top: calc(var(--mobile-header-h) + var(--mobile-dock-h) + env(safe-area-inset-top) + 15px);
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-height: calc(100dvh - var(--mobile-header-h) - var(--mobile-dock-h) - env(safe-area-inset-top) - 34px);
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: stretch;
    gap: 6px;
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-10px) scale(.985);
  }
  #app.mobile-panel-views .view-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }
  .view-controls > button,
  .view-controls .view-group-label,
  .view-controls .view-group-row > [data-view],
  .view-controls .iss-camera-selector .view-group-label {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 6px 4px;
    border-radius: 10px;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    font-size: 8px;
    text-align: center;
  }
  .view-controls button > span:first-child { font-size: 15px; line-height: 1; }
  .view-controls button > span:not(:first-child) { font-size: 7.5px; line-height: 1.15; white-space: normal; }
  .view-controls .view-group { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
  .view-controls .view-group-row { width: 100%; display: flex; }
  .view-controls .view-group-row > [data-view] { flex: 1 1 auto; }
  .view-controls .view-group-toggle:not(.view-group-label) {
    width: 24px;
    flex: 0 0 24px;
    min-height: 48px;
    padding: 0;
    border-radius: 0 10px 10px 0;
  }
  .view-controls .view-group.expanded { grid-column: 1 / -1; }
  .view-controls .view-submenu {
    position: static;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
    border: 0;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transform: none;
    background: rgba(5,10,18,.62);
    box-shadow: none;
    transition: max-height .18s ease, padding .18s ease, margin .18s ease;
  }
  .view-controls .view-submenu::after { display: none; }
  .view-controls .view-group.expanded .view-submenu {
    max-height: 320px;
    margin-top: 6px;
    padding: 6px;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .view-controls .view-submenu > button {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 7px 5px;
    justify-content: center;
    font-size: 8px;
  }
  .view-controls .spacecraft-view-group .view-group-label,
  .view-controls .deep-space-view-group .view-group-label,
  .view-controls .iss-camera-selector .view-group-label { padding-right: 4px; }
  .view-controls .spacecraft-view-group .view-group-label .view-group-chevron,
  .view-controls .deep-space-view-group .view-group-label .view-group-chevron,
  .view-controls .iss-camera-selector .view-group-chevron { position: static; font-size: 10px; }
  .view-controls .iss-camera-selector .iss-camera-button-label { display: inline; font-size: 7.5px; white-space: normal; }
  .view-controls .nav-divider { grid-column: 1 / -1; }

  /* Time controls are a proper bottom sheet and no longer permanently cover
     the scene. */
  .timeline-panel {
    left: 6px;
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100dvh - var(--mobile-header-h) - var(--mobile-dock-h) - env(safe-area-inset-top) - 36px);
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
    border-width: 1px;
    border-radius: 16px;
    overflow-y: auto;
    transform: translateY(calc(100% + 14px));
  }
  #app.mobile-panel-timeline .timeline-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .timeline-top { grid-template-columns: 1fr; gap: 9px; }
  .transport { justify-content: center; flex-wrap: wrap; }
  .timeline-track { margin-top: 8px; padding-top: 8px; }

  /* Existing exploration animation must not fight the mobile drawer state. */
  .exploration-mode .mobile-ui-dock { transform: translate(-50%, -10px); opacity: 0; visibility: hidden; pointer-events: none; }
  .exploration-mode .info-panel,
  .exploration-mode .view-controls,
  .exploration-mode .timeline-panel { visibility: hidden !important; pointer-events: none !important; }

  .interaction-hint { bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .topbar { right:168px; }
  .brand-logo { width: 102px; }
  .top-toolbar { right:6px; gap:3px; }
  .exploration-mode-toggle, .cinematic-mode-toggle, .help-mode-toggle, .events-mode-toggle, .top-toolbar-action { width:30px; height:30px; flex-basis:30px; }
  .view-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* 20260917 — Media Studio: non-destructive photo/video capture workspace. */
.media-studio{position:fixed;inset:0;z-index:12000;pointer-events:none}.media-studio[hidden]{display:none}.media-studio__backdrop{position:absolute;inset:0;background:transparent;pointer-events:auto;backdrop-filter:none;-webkit-backdrop-filter:none}.media-studio__panel{position:absolute;top:16px;right:16px;bottom:16px;width:min(390px,calc(100vw - 32px));display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:rgba(7,14,23,.82);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(22px);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.media-studio__panel header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px}.media-studio__panel header small{letter-spacing:.22em;opacity:.55;font-size:10px}.media-studio__panel h2{font-size:20px;margin:3px 0 0;font-weight:560}.media-close{border:0;background:transparent;color:#fff;font-size:28px;opacity:.65;cursor:pointer}.media-mode,.media-tabs,.media-presets{display:flex;gap:6px;padding:0 14px 12px}.media-mode button,.media-tabs button,.media-presets button,.media-reset{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);color:rgba(255,255,255,.72);border-radius:8px;padding:9px 10px;cursor:pointer}.media-mode button{flex:1}.media-mode button.active,.media-tabs button.active{background:rgba(123,203,255,.14);border-color:rgba(123,203,255,.42);color:#fff}.media-tabs{overflow-x:auto;padding-bottom:10px}.media-tabs button{font-size:10px;letter-spacing:.08em;white-space:nowrap;padding:7px 8px}.media-pages{flex:1;overflow:auto;padding:4px 18px 18px}.media-pages section{display:none}.media-pages section.active{display:block}.media-presets{padding:0 0 16px}.media-presets button{flex:1;font-size:11px}.media-range{display:block;margin:0 0 16px}.media-range>span{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.media-range output{font-variant-numeric:tabular-nums;color:#a9ddff}.media-range input{width:100%;accent-color:#91d6ff}.media-switch{display:flex;align-items:center;justify-content:space-between;min-height:45px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px}.media-switch input{position:absolute;opacity:0}.media-switch i{width:36px;height:20px;border-radius:12px;background:rgba(255,255,255,.16);position:relative;transition:.2s}.media-switch i:after{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.media-switch input:checked+i{background:#398ac0}.media-switch input:checked+i:after{transform:translateX(16px)}.media-pages section>label:not(.media-range):not(.media-switch){display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:12px}.media-pages select{min-width:145px;background:#101c28;color:#fff;border:1px solid rgba(255,255,255,.13);border-radius:7px;padding:8px}.media-note{font-size:11px;line-height:1.5;opacity:.55}.media-reset{width:100%}.media-studio footer{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.14)}.media-status{flex:1;font-size:10px;opacity:.7;font-variant-numeric:tabular-nums}.media-primary{border:1px solid rgba(111,202,255,.55);background:rgba(53,151,211,.22);color:#fff;border-radius:9px;padding:10px 14px;font-weight:650;letter-spacing:.04em;cursor:pointer}.media-studio.is-recording .media-record{background:rgba(210,55,55,.28);border-color:rgba(255,100,100,.65)}
@media(max-width:640px){.media-studio__panel{inset:auto 8px 8px 8px;width:auto;height:min(76vh,650px);top:auto}.media-studio__panel header{padding-top:12px}.media-tabs{padding-left:10px;padding-right:10px}}

.media-studio-preview-fx{position:fixed;pointer-events:none;z-index:20;background:transparent}

/* Dual-screen control mode: the live render-host is adopted by the render
   popup, while this window remains a dedicated Stellarius control console. */
.dual-screen-button.active { color:#e3f4ff !important; background:rgba(49,118,189,.26) !important; border-color:rgba(128,200,255,.5) !important; box-shadow:inset 0 0 0 1px rgba(128,200,255,.12),0 0 18px rgba(76,159,239,.12); }
#app.dual-screen-control { background:radial-gradient(circle at 50% 45%,rgba(18,31,48,.45),rgba(3,6,11,.98) 62%); }
#app.dual-screen-control::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(110,160,220,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(110,160,220,.025) 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(circle at 50% 50%,black,transparent 74%); }
.dual-screen-control-status { position:fixed; z-index:4; left:50%; top:50%; width:min(430px,calc(100vw - 680px)); min-width:250px; transform:translate(-50%,-50%); text-align:center; pointer-events:none; opacity:.72; }
.dual-screen-control-status__eyebrow { display:block; margin-bottom:10px; color:rgba(113,174,255,.72); font:600 9px/1 "JetBrains Mono",monospace; letter-spacing:.28em; }
.dual-screen-control-status strong { display:block; color:#d9eaff; font:500 20px/1.25 "Space Grotesk",Manrope,sans-serif; letter-spacing:.03em; }
.dual-screen-control-status small { display:block; max-width:360px; margin:10px auto 0; color:#6f8296; font:500 9px/1.55 "JetBrains Mono",monospace; }
@media (max-width: 900px) { .dual-screen-control-status { display:none; } }

/* 20260917 — Media Studio workspace v2.
   Desktop: compact editor docked below the global toolbar, with a vertical
   tool rail. Scene interaction collapses the panel without creating a second
   floating button over the toolbar; the permanent Studio toolbar button is
   the single reopen/toggle control. */
.top-toolbar #screenshot-button.active {
  color: #edf8ff;
  background: rgba(48,126,188,.30);
  border-color: rgba(126,204,255,.58);
  box-shadow: 0 0 16px rgba(74,164,230,.18), inset 0 0 12px rgba(132,206,255,.08);
}
.top-toolbar #screenshot-button.is-collapsed {
  color: #bfe8ff;
  background: rgba(35,86,128,.28);
  border-color: rgba(126,204,255,.38);
}

.media-studio { position: fixed; inset: 0; z-index: 12000; pointer-events: none; }
.media-studio[hidden] { display: none !important; }
.media-studio__backdrop { position: absolute; inset: 0; pointer-events: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.media-studio__panel {
  position: absolute;
  top: 72px;
  right: 18px;
  bottom: 18px;
  width: min(440px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(10,18,29,.94), rgba(5,10,17,.91));
  border: 1px solid rgba(156,197,235,.16);
  box-shadow: 0 26px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  transform-origin: right top;
  transition: opacity .16s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
}
.media-studio.is-collapsed .media-studio__panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(16px) scale(.985);
  transition: opacity .13s ease, transform .18s ease, visibility 0s linear .18s;
}
.media-studio__panel header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 10px 18px;
}
.media-studio__heading { min-width: 0; }
.media-studio__panel header small {
  display: block;
  color: rgba(142,194,241,.58);
  font: 600 8px/1 "JetBrains Mono", monospace;
  letter-spacing: .22em;
}
.media-studio__panel h2 {
  margin: 4px 0 0;
  color: #ecf5fd;
  font: 500 18px/1.1 "Space Grotesk", Manrope, sans-serif;
  letter-spacing: .015em;
}
.media-close {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: rgba(225,237,248,.58);
  font: 300 21px/1 sans-serif;
  opacity: 1;
  cursor: pointer;
}
.media-close:hover, .media-close:focus-visible { color: #fff; border-color: rgba(138,197,250,.30); background: rgba(91,151,211,.10); }

.media-studio .media-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 14px 12px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.20);
}
.media-studio .media-mode button {
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6f7d8d;
  font: 600 9px/1 "Space Grotesk", sans-serif;
  letter-spacing: .08em;
}
.media-studio .media-mode button:hover { color: #dbeeff; }
.media-studio .media-mode button.active {
  color: #e8f5ff;
  background: rgba(83,146,214,.17);
  box-shadow: inset 0 0 0 1px rgba(123,190,255,.18);
}

.media-studio__workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 78px minmax(0,1fr);
  border-top: 1px solid rgba(255,255,255,.065);
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.media-studio .media-tabs {
  min-width: 0;
  margin: 0;
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  overflow: visible;
  border-right: 1px solid rgba(255,255,255,.065);
  background: rgba(1,5,10,.24);
}
.media-studio .media-tabs button {
  width: 100%;
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 7px 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #697889;
  font: 600 7.5px/1 "Space Grotesk", sans-serif;
  letter-spacing: .07em;
  white-space: normal;
  text-align: center;
}
.media-studio .media-tabs button:hover, .media-studio .media-tabs button:focus-visible { color: #ddecfb; background: rgba(255,255,255,.025); }
.media-studio .media-tabs button.active {
  color: #e5f3ff;
  border-color: rgba(119,186,249,.16);
  background: linear-gradient(145deg, rgba(71,136,204,.17), rgba(45,101,158,.08));
  box-shadow: inset 2px 0 0 rgba(123,205,255,.58);
}
.media-tab-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #95bde2;
  background: rgba(86,145,202,.08);
  font: 600 13px/1 "JetBrains Mono", monospace;
}
.media-studio .media-tabs button.active .media-tab-icon { color: #cceaff; background: rgba(92,163,226,.16); box-shadow: 0 0 12px rgba(75,159,232,.10); }

.media-studio .media-pages {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(111,165,216,.28) transparent;
}
.media-studio .media-pages section { display: none; }
.media-studio .media-pages section.active { display: block; }
.media-page-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin-bottom: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.media-page-title strong { color: #dceaf7; font: 600 10px/1 "Space Grotesk", sans-serif; letter-spacing: .10em; }
.media-page-title span { color: #5f7183; font: 500 7px/1 "JetBrains Mono", monospace; text-align: right; }

.media-studio .media-presets {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
}
.media-studio .media-presets button, .media-studio .media-reset {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #8c99a7;
  padding: 8px 7px;
  font-size: 9px;
}
.media-studio .media-presets button:hover, .media-studio .media-reset:hover { color: #eef7ff; border-color: rgba(123,184,255,.25); background: rgba(80,140,202,.09); }
.media-studio .media-range {
  display: block;
  margin: 0 0 8px;
  padding: 10px 11px 9px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(2,8,14,.27);
}
.media-studio .media-range > span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #99a7b5; font-size: 10px; }
.media-studio .media-range output { color: #9fd7ff; font: 500 9px/1 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.media-studio .media-range input { width: 100%; accent-color: #78bff0; }
.media-studio .media-reset { width: 100%; margin-top: 4px; }

.media-studio .media-switch {
  min-height: 44px;
  margin-bottom: 7px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(2,8,14,.27);
  color: #a1aeba;
  font-size: 10px;
}
.media-studio .media-switch input { position: absolute; opacity: 0; }
.media-studio .media-switch i { width: 34px; height: 18px; flex: 0 0 34px; border-radius: 12px; background: rgba(255,255,255,.13); position: relative; transition: .18s ease; }
.media-studio .media-switch i::after { content: ""; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; border-radius: 50%; background: #bdc7d0; transition: .18s ease; }
.media-studio .media-switch input:checked + i { background: rgba(57,138,192,.72); }
.media-studio .media-switch input:checked + i::after { transform: translateX(16px); background: #eef9ff; }
.media-studio .media-pages section > label:not(.media-range):not(.media-switch) {
  min-height: 48px;
  margin-bottom: 7px;
  padding: 8px 10px 8px 11px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(142px,auto);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(2,8,14,.27);
  color: #99a7b5;
  font-size: 10px;
}
.media-studio .media-pages select,
.media-studio .media-pages input[type="number"],
.media-studio .media-pages input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 6px 8px;
  border: 1px solid rgba(127,173,214,.14);
  border-radius: 7px;
  outline: none;
  background: rgba(11,22,34,.90);
  color: #dce9f5;
  font: 500 9px/1 "JetBrains Mono", monospace;
}
.media-studio .media-pages select:focus,
.media-studio .media-pages input[type="number"]:focus,
.media-studio .media-pages input[type="text"]:focus { border-color: rgba(113,183,244,.42); }
.media-studio .media-note {
  margin: 7px 1px 10px;
  padding: 8px 10px;
  border-left: 2px solid rgba(105,177,238,.25);
  border-radius: 0 7px 7px 0;
  background: rgba(37,84,124,.07);
  color: #718294;
  font: 500 8px/1.5 "JetBrains Mono", monospace;
}


.media-studio .media-plan-manager { display:grid; gap:7px; margin:0 0 10px; padding:9px; border:1px solid rgba(104,181,239,.12); border-radius:10px; background:rgba(9,24,37,.28); }
.media-studio .media-plan-manager > strong { color:#8da0b1; font:600 8px/1 "Space Grotesk",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.media-studio .media-plan-manager > select,
.media-studio .media-plan-manager > input { min-height:32px; }
.media-studio .media-plan-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
.media-studio .media-time-keyframe-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.media-studio .media-time-keyframe-list { display:grid; gap:5px; max-height:184px; overflow:auto; padding-right:2px; scrollbar-width:thin; }
.media-studio .media-time-keyframe-list button { display:grid; grid-template-columns:34px 74px minmax(0,1fr); align-items:center; gap:7px; width:100%; min-height:34px; padding:6px 8px; border:1px solid rgba(255,255,255,.055); border-radius:8px; background:rgba(2,8,14,.27); color:#8fa0b0; text-align:left; cursor:pointer; }
.media-studio .media-time-keyframe-list button span { color:#e8b870; font:700 8px/1 "JetBrains Mono",monospace; }
.media-studio .media-time-keyframe-list button strong { color:#d7e5f1; font:600 8px/1 "JetBrains Mono",monospace; }
.media-studio .media-time-keyframe-list button small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 7px/1 "JetBrains Mono",monospace; }
.media-studio .media-time-keyframe-list button.active { border-color:rgba(238,185,112,.34); background:rgba(185,122,54,.11); box-shadow:inset 2px 0 0 rgba(238,185,112,.56); }
.media-studio .media-time-playhead-head { margin-top:2px; }

.media-studio .media-timeline { display: grid; gap: 8px; margin: 8px 0 10px; }
.media-studio .media-timeline-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#9aabba; font:600 9px/1 "JetBrains Mono",monospace; }
.media-studio .media-timeline-head output { color:#a9ddff; font-variant-numeric:tabular-nums; }
.media-studio .media-playhead-entry { display:flex; align-items:center; justify-content:flex-end; gap:5px; min-width:0; }
.media-studio .media-playhead-entry input { width:78px; min-width:0; height:26px; padding:3px 7px; border:1px solid rgba(120,191,240,.18); border-radius:6px; background:rgba(4,13,21,.74); color:#dcecf8; font:600 9px/1 "JetBrains Mono",monospace; font-variant-numeric:tabular-nums; text-align:right; outline:none; }
.media-studio .media-playhead-entry input:focus { border-color:rgba(120,191,240,.58); box-shadow:0 0 0 2px rgba(120,191,240,.08); }
.media-studio .media-playhead-entry > span { color:#6f8292; font:600 8px/1 "JetBrains Mono",monospace; }
.media-studio .media-playhead-entry output { min-width:64px; text-align:right; }
.media-studio .media-timeline-scrub { width:100%; margin:0; accent-color:#78bff0; }
.media-studio .media-inline-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.media-studio .media-timeline-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.media-studio .media-inline-actions button,
.media-studio .media-time-endpoint button {
  min-height:31px; padding:6px 7px; border:1px solid rgba(127,173,214,.14); border-radius:7px;
  background:rgba(11,22,34,.76); color:#a8bac9; font:600 8px/1.15 "Space Grotesk",sans-serif; cursor:pointer;
}
.media-studio .media-inline-actions button:hover,
.media-studio .media-time-endpoint button:hover { color:#edf8ff; border-color:rgba(113,183,244,.35); background:rgba(28,57,84,.58); }
.media-studio .media-inline-actions button:disabled { opacity:.32; cursor:default; }
.media-studio .media-keyframe-list { display:grid; gap:5px; max-height:184px; overflow:auto; padding-right:2px; scrollbar-width:thin; }
.media-studio .media-keyframe-list button { display:grid; grid-template-columns:34px 74px minmax(0,1fr); align-items:center; gap:7px; width:100%; min-height:34px; padding:6px 8px; border:1px solid rgba(255,255,255,.055); border-radius:8px; background:rgba(2,8,14,.27); color:#8fa0b0; text-align:left; cursor:pointer; }
.media-studio .media-keyframe-list button span { color:#77bdea; font:700 8px/1 "JetBrains Mono",monospace; }
.media-studio .media-keyframe-list button strong { color:#d7e5f1; font:600 8px/1 "JetBrains Mono",monospace; }
.media-studio .media-keyframe-list button small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 7px/1 "JetBrains Mono",monospace; }
.media-studio .media-keyframe-list button.active { border-color:rgba(123,203,255,.36); background:rgba(72,137,193,.13); box-shadow:inset 2px 0 0 rgba(126,204,255,.58); }
.media-studio .media-keyframe-empty { padding:9px; border:1px dashed rgba(255,255,255,.07); border-radius:8px; color:#647587; text-align:center; font:500 8px/1.3 "JetBrains Mono",monospace; }
.media-studio .media-timeline-time-range { display:grid; gap:7px; margin-top:3px; padding-top:10px; border-top:1px solid rgba(255,255,255,.065); }
.media-studio .media-timeline-time-range > strong { color:#8da0b1; font:600 8px/1 "Space Grotesk",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.media-studio .media-timeline-time-range > label:not(.media-switch) { min-height:44px; padding:7px 9px; display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,auto); align-items:center; gap:10px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(2,8,14,.27); color:#99a7b5; font-size:9px; }
.media-studio .media-time-endpoint { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:42px; padding:6px 8px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(2,8,14,.27); }
.media-studio .media-time-endpoint > span { color:#7f91a1; font:600 8px/1 "Space Grotesk",sans-serif; }
.media-studio .media-time-endpoint output { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#b7c9d8; font:500 7px/1.25 "JetBrains Mono",monospace; }
.media-studio footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 0;
  background: rgba(0,0,0,.17);
}
.media-status { min-width: 0; flex: 1 1 auto; color: #7d8d9d; font: 500 8px/1.35 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.media-primary {
  min-height: 35px;
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid rgba(111,202,255,.43);
  border-radius: 9px;
  background: rgba(53,151,211,.18);
  color: #edf8ff;
  font: 650 9px/1 "Space Grotesk", sans-serif;
  letter-spacing: .055em;
}
.media-primary:hover, .media-primary:focus-visible { background: rgba(67,163,221,.27); border-color: rgba(132,211,255,.62); }
.media-preset-reset {
  min-height: 35px;
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #93a4b5;
  font: 600 8px/1 "Space Grotesk", sans-serif;
  letter-spacing: .045em;
  cursor: pointer;
  transition: background .18s ease,border-color .18s ease,color .18s ease;
}
.media-preset-reset:hover, .media-preset-reset:focus-visible { background: rgba(255,255,255,.075); border-color: rgba(151,190,223,.24); color: #e4eef7; }
.media-studio.is-recording .media-record { background: rgba(210,55,55,.28); border-color: rgba(255,100,100,.65); }

@media (max-width: 720px) {
  .media-studio__panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    height: min(78dvh, 720px);
    border-radius: 16px;
    transform-origin: center bottom;
  }
  .media-studio.is-collapsed .media-studio__panel { transform: translateY(14px) scale(.985); }
  .media-studio__panel header { min-height: 54px; padding: 10px 12px 7px 14px; }
  .media-studio__panel h2 { font-size: 16px; }
  .media-studio .media-mode { margin: 0 10px 9px; }
  .media-studio__workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .media-studio .media-tabs {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 4px;
    padding: 6px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.065);
  }
  .media-studio .media-tabs button {
    min-height: 40px;
    grid-template-columns: auto auto;
    place-items: center;
    justify-content: center;
    align-content: center;
    gap: 5px;
    padding: 5px 4px;
    font-size: 7px;
  }
  .media-studio .media-tabs button.active { box-shadow: inset 0 -2px 0 rgba(123,205,255,.58); }
  .media-tab-icon { width: 20px; height: 20px; font-size: 11px; }
  .media-studio .media-pages { padding: 10px 11px 14px; }
  .media-page-title { margin-bottom: 9px; }
  .media-studio footer { min-height: 54px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .media-studio .media-pages section > label:not(.media-range):not(.media-switch) { grid-template-columns: 1fr; gap: 6px; }
  .media-studio .media-tabs button > span:last-child { display: none; }
  .media-studio .media-tabs button { grid-template-columns: 1fr; }
}

/* 2026-09-17 — Desktop retractable panels ---------------------------------
   Same interaction language as Mission mode: panels rest against the edge,
   leaving a slim discoverable grip, and unfold on hover / keyboard focus.
   Mouse/trackpad desktop only: touch layouts keep their existing drawers. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel,
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls,
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel {
    transition: transform .28s cubic-bezier(.22,1,.36,1),
                box-shadow .22s ease,
                border-color .22s ease,
                visibility 0s linear 0s;
  }

  /* Left system/state sheet. */
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel {
    transform: translateX(calc(-100% + 34px));
    box-shadow: 12px 0 36px rgba(0,0,0,.18), inset -1px 0 rgba(173,210,241,.08);
  }
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel:hover,
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel:focus-within,
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel.is-selection-open {
    transform: translateX(0);
    box-shadow: 18px 0 54px rgba(0,0,0,.30), inset -1px 0 rgba(173,210,241,.08);
  }
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel::after {
    display: none !important;
    content: none !important;
  }

  /* Right body/camera sheet. */
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls {
    transform: translateX(calc(100% - 20px));
    box-shadow: -12px 0 36px rgba(0,0,0,.18), inset 1px 0 rgba(173,210,241,.08);
  }
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls:hover,
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls:focus-within {
    transform: translateX(0);
    box-shadow: -18px 0 54px rgba(0,0,0,.30), inset 1px 0 rgba(173,210,241,.08);
  }
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 6px;
    top: 50%;
    width: 5px;
    height: 72px;
    transform: translateY(-50%);
    border-radius: 999px;
    pointer-events: none;
    background: rgba(193,224,246,.32);
    box-shadow: 0 0 14px rgba(119,185,235,.12);
  }

  /* Bottom timeline sheet. Keep the horizontal centering transform. */
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel {
    transform: translate(-50%, calc(100% - 20px));
    box-shadow: 0 -12px 36px rgba(0,0,0,.18), inset 0 1px rgba(173,210,241,.08);
  }
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel:hover,
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel:focus-within {
    transform: translate(-50%, 0);
    box-shadow: 0 -18px 54px rgba(0,0,0,.30), inset 0 1px rgba(173,210,241,.08);
  }
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 6px;
    width: 72px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    pointer-events: none;
    background: rgba(193,224,246,.32);
    box-shadow: 0 0 14px rgba(119,185,235,.12);
  }

  /* Media Studio: when scene interaction collapses it, keep a Mission-like
     edge handle instead of making the panel disappear completely. */
  .media-studio.is-collapsed .media-studio__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(calc(100% - 2px));
    transition: transform .28s cubic-bezier(.22,1,.36,1),
                box-shadow .22s ease,
                border-color .22s ease,
                visibility 0s linear 0s;
    box-shadow: -12px 0 38px rgba(0,0,0,.24), inset 1px 0 rgba(173,210,241,.08);
  }
  .media-studio.is-collapsed .media-studio__panel:hover,
  .media-studio.is-collapsed .media-studio__panel:focus-within {
    transform: translateX(0);
    box-shadow: -22px 0 70px rgba(0,0,0,.42), inset 1px 0 rgba(173,210,241,.08);
  }
  .media-studio.is-collapsed .media-studio__panel::before {
    content: "";
    position: absolute;
    z-index: 8;
    left: 6px;
    top: 50%;
    width: 5px;
    height: 78px;
    transform: translateY(-50%);
    border-radius: 999px;
    pointer-events: none;
    background: rgba(193,224,246,.36);
    box-shadow: 0 0 16px rgba(119,185,235,.16);
  }
}

/* 2026-09-17 — Dual-screen control room -----------------------------------
   The primary monitor stops being an overlay UI when the live render is moved
   to monitor 2. It becomes a stable control surface: state + views at left,
   Media Studio in the centre, timeline below, and a dedicated DevTool bay at
   right. Nothing retracts while dual-screen is active. */
body.dual-screen-control-ui {
  --dual-top: 88px;
  --dual-gap: 12px;
  --dual-edge: 12px;
  --dual-info-width: clamp(260px, 16vw, 300px);
  --dual-views-width: 144px;
  --dual-debug-width: 0px;
  --dual-timeline-clearance: 184px;
  background: #04070c;
}
body.dual-screen-control-ui.dual-screen-debug-available {
  --dual-debug-width: clamp(400px, 28vw, 520px);
}

#app.dual-screen-control {
  background:
    radial-gradient(circle at 58% 34%, rgba(31,57,84,.34), transparent 40%),
    radial-gradient(circle at 23% 78%, rgba(19,43,66,.20), transparent 34%),
    linear-gradient(155deg, #07101a 0%, #03070d 52%, #04070c 100%);
}
#app.dual-screen-control::before {
  opacity: .72;
  background-size: 44px 44px;
}
#app.dual-screen-control::after {
  background: linear-gradient(180deg, rgba(1,4,8,.10), rgba(1,4,8,.42));
}
#app.dual-screen-control .dual-screen-control-status { display: none !important; }

/* State panel: permanent left diagnostics column. */
#app.dual-screen-control > .info-panel {
  top: var(--dual-top) !important;
  left: var(--dual-edge) !important;
  right: auto !important;
  bottom: var(--dual-edge) !important;
  width: var(--dual-info-width) !important;
  max-height: none !important;
  height: auto !important;
  transform: none !important;
  border-width: 1px !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.035) !important;
}
#app.dual-screen-control > .info-panel::after { display: none !important; }

/* Views: compact permanent rail immediately beside state. */







/* Timeline: workstation transport, not an edge drawer. */
#app.dual-screen-control > .timeline-panel {
  left: calc(var(--dual-edge) + var(--dual-info-width) + var(--dual-gap) + var(--dual-views-width) + var(--dual-gap)) !important;
  right: calc(var(--dual-edge) + var(--dual-debug-width) + var(--dual-gap)) !important;
  bottom: var(--dual-edge) !important;
  width: auto !important;
  transform: none !important;
  border-width: 1px !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.035) !important;
}
#app.dual-screen-control > .timeline-panel::after { display: none !important; }

/* Media Studio docks in the centre when explicitly opened. */
body.dual-screen-control-ui .media-studio { z-index: 46; }
body.dual-screen-control-ui .media-studio__panel,
body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
  top: var(--dual-top) !important;
  left: calc(var(--dual-edge) + var(--dual-info-width) + var(--dual-gap) + var(--dual-views-width) + var(--dual-gap)) !important;
  right: calc(var(--dual-edge) + var(--dual-debug-width) + var(--dual-gap)) !important;
  bottom: var(--dual-timeline-clearance) !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.035) !important;
}
body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel::before { display: none !important; }
body.dual-screen-control-ui .media-studio .media-close { display: none !important; }
body.dual-screen-control-ui .media-studio__panel header { min-height: 58px; }
body.dual-screen-control-ui .media-studio .media-pages section.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-content: start;
  gap: 8px;
}
body.dual-screen-control-ui .media-studio .media-page-title,
body.dual-screen-control-ui .media-studio .media-presets,
body.dual-screen-control-ui .media-studio .media-reset,
body.dual-screen-control-ui .media-studio .media-note,
body.dual-screen-control-ui .media-studio .media-pages section.active > p {
  grid-column: 1 / -1;
}
body.dual-screen-control-ui .media-studio .media-range,
body.dual-screen-control-ui .media-studio .media-switch,
body.dual-screen-control-ui .media-studio .media-pages section > label:not(.media-range):not(.media-switch) {
  margin-bottom: 0;
}
body.dual-screen-control-ui .media-studio .media-pages section > label:not(.media-range):not(.media-switch) {
  grid-template-columns: minmax(0,1fr) minmax(120px, 42%);
}

/* DevTool: fixed engineering bay. Dragging/collapsing is intentionally removed
   here; it returns to the user's previous state when dual-screen closes. */
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
  display: flex !important;
  flex-direction: column !important;
  top: var(--dual-top) !important;
  left: auto !important;
  right: var(--dual-edge) !important;
  bottom: var(--dual-edge) !important;
  width: var(--dual-debug-width) !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 16px !important;
  transform: none !important;
  touch-action: auto;
  box-shadow: 0 20px 58px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.035);
}
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar {
  flex: 0 0 auto;
  cursor: default !important;
  grid-template-columns: minmax(0,1fr) 10px;
  min-height: 58px;
  padding: 8px 11px 8px 13px;
}
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__grip,
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__collapse { display: none !important; }
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__content {
  display: flex !important;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 5px;
  overflow: visible;
  padding: 8px;
}
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  flex: none;
}
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow: auto;
}

/* The controller is a workstation; immersion shortcuts must not hide its
   controls while the render lives on monitor 2. */
#app.dual-screen-control.keyboard-ui-hidden .topbar,
#app.dual-screen-control.keyboard-ui-hidden .info-panel,
#app.dual-screen-control.keyboard-ui-hidden .timeline-panel,
#app.dual-screen-control.keyboard-ui-hidden #debug-toolbar,
#app.dual-screen-control.keyboard-ui-hidden .top-toolbar {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Compact fallback for 1366–1599px controller displays. */
@media (min-width: 901px) and (max-width: 1599px) {
  body.dual-screen-control-ui {
    --dual-info-width: 250px;
    --dual-views-width: 140px;
    --dual-timeline-clearance: 176px;
  }
  body.dual-screen-control-ui.dual-screen-debug-available { --dual-debug-width: 390px; }
  body.dual-screen-control-ui .media-studio__workspace { grid-template-columns: 68px minmax(0,1fr); }
  body.dual-screen-control-ui .media-studio .media-tabs button { min-height: 52px; }
  body.dual-screen-control-ui .media-studio .media-pages { padding: 12px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Fit the persistent engineering status strip inside the dedicated bay. */
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
  --stellarius-dev-debug-badge-width: 44px;
  --stellarius-dev-debug-badge-gap: 3px;
}
#app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar { min-height: 68px; }

/* 2026-09-17 — Dual-screen UI/UX refinement --------------------------------
   Monitor 1 is a control desk, not a second overlay. Studio is docked only
   while explicitly open; body navigation becomes a readable control grid and
   the engineering bay uses the same spacing/card language as the main UI. */
@media (min-width: 901px) {
  body.dual-screen-control-ui {
    --dual-info-width: clamp(250px, 15vw, 292px);
    --dual-views-width: clamp(244px, 16vw, 292px);
    --dual-debug-width: 0px;
  }
  body.dual-screen-control-ui.dual-screen-debug-available {
    --dual-debug-width: clamp(420px, 27vw, 510px);
  }

  /* ASTRES / VUES --------------------------------------------------------- */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* STUDIO MEDIA --------------------------------------------------------- */
  /* No modal backdrop on the controller: the other control bays remain usable
     while Studio is open. Closing Studio also removes every preview/framing FX
     from the render monitor through MediaStudio.close(). */
  body.dual-screen-control-ui .media-studio__backdrop { display: none !important; }
  body.dual-screen-control-ui .media-studio .media-close {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(137,180,225,.14);
    border-radius: 9px;
    background: rgba(22,37,55,.56);
    font-size: 22px;
  }
  body.dual-screen-control-ui .media-studio .media-close:hover {
    background: rgba(48,74,104,.68);
    border-color: rgba(136,194,248,.30);
    opacity: 1;
  }

  /* DEBUG / ENGINEERING BAY --------------------------------------------- */
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
    background: rgba(7,14,23,.91) !important;
    border-color: rgba(142,183,226,.14) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar {
    min-height: 72px;
    padding: 11px 14px 10px !important;
    border-bottom-color: rgba(128,173,226,.12);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__heading > span {
    font-size: 7px;
    letter-spacing: .17em;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__heading strong {
    margin-top: 2px;
    font-size: 12px;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__status-row {
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.055);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    padding: 10px 11px 11px !important;
    border-bottom: 1px solid rgba(128,173,226,.10);
    background: rgba(3,8,14,.24);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool {
    min-height: 52px !important;
    grid-template-columns: 30px minmax(0,1fr) 7px;
    gap: 8px;
    padding: 8px 9px !important;
    border: 1px solid rgba(128,173,226,.10);
    border-radius: 10px;
    background: rgba(23,38,56,.40);
    color: rgba(203,221,239,.80);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool:hover:not(:disabled) {
    background: rgba(48,81,113,.50);
    border-color: rgba(122,184,243,.22);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool.active {
    background: linear-gradient(135deg,rgba(55,112,164,.34),rgba(28,63,96,.28));
    border-color: rgba(121,190,255,.34);
    box-shadow: inset 0 0 0 1px rgba(121,190,255,.045),0 7px 16px rgba(0,0,0,.14);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(110,164,220,.10);
    font-size: 14px;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy strong {
    font-size: 8.5px;
    line-height: 1.2;
    white-space: normal;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy small {
    display: block;
    margin-top: 2px;
    font-size: 6.5px;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport {
    padding: 11px 11px 15px;
    box-sizing: border-box;
    background: linear-gradient(180deg,rgba(5,11,18,.20),rgba(3,8,14,.34));
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__panel {
    box-sizing: border-box;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #skybox-diagnostic,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #iss-camera-debug-panel {
    padding: 14px !important;
    border: 1px solid rgba(128,173,226,.10) !important;
    border-radius: 12px !important;
    background: rgba(15,27,41,.42) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__body {
    padding: 14px !important;
    border: 1px solid rgba(128,173,226,.10);
    border-radius: 12px;
    background: rgba(15,27,41,.42);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel {
    padding: 0 !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel > .voyager-photo-calibration {
    margin: 0 0 9px !important;
    padding: 14px !important;
    border: 1px solid rgba(128,173,226,.10) !important;
    border-radius: 12px !important;
    background: rgba(15,27,41,.42) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel > .voyager-photo-calibration + .voyager-photo-calibration {
    border-top: 1px solid rgba(128,173,226,.10) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .earth-lod-diagnostic__heading {
    display: flex;
    align-items: center;
    min-height: 22px;
    margin: 0 0 9px;
    color: rgba(143,201,255,.88);
    font-size: 8.5px;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .earth-lod-diagnostic__status {
    margin: 8px 0 0 !important;
    padding: 8px 9px;
    border: 1px solid rgba(120,165,208,.09);
    border-radius: 8px;
    background: rgba(5,14,24,.34);
    color: rgba(177,207,234,.78);
    line-height: 1.5;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .switch-row,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .audio-volume-row {
    min-height: 42px;
    margin: 6px 0 !important;
    padding: 8px 9px;
    box-sizing: border-box;
    border: 1px solid rgba(126,169,213,.09);
    border-radius: 9px;
    background: rgba(9,20,32,.38);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .audio-volume-row {
    grid-template-columns: minmax(96px,auto) minmax(0,1fr) auto;
    gap: 9px;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar select,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar input[type="number"] {
    min-height: 30px;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid rgba(128,173,226,.16);
    border-radius: 7px;
    background: rgba(7,16,27,.72);
    color: rgba(213,231,249,.88);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .segmented {
    gap: 4px;
    padding: 4px;
    border-color: rgba(128,173,226,.12);
    background: rgba(4,11,19,.46);
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .segmented button {
    min-height: 31px;
    padding: 7px 8px;
    border-radius: 7px;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__group,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__group {
    margin: 0 0 9px;
    padding: 11px !important;
    border: 1px solid rgba(126,169,213,.09) !important;
    border-radius: 10px;
    background: rgba(8,19,31,.34);
  }
}

@media (min-width: 901px) and (max-width: 1599px) {
  body.dual-screen-control-ui {
    --dual-info-width: 225px;
    --dual-views-width: 226px;
  }
  body.dual-screen-control-ui.dual-screen-debug-available { --dual-debug-width: 360px; }
  
  
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools { gap: 5px !important; padding: 8px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool { min-height: 47px !important; padding: 7px !important; }
}

/* ========================================================================== */
/* 2026-09-18 — Dual Screen Control Deck v3                                  */
/* Purpose: turn monitor 1 into an operator console rather than a collection   */
/* of floating panels. The patterns below are intentionally scoped to Dual     */
/* Screen, so the single-screen and mobile UIs keep their existing behaviour.  */
/* ========================================================================== */
@media (min-width: 901px) {
  body.dual-screen-control-ui {
    --ctl-edge: 12px;
    --ctl-gap: 12px;
    --ctl-top: 84px;
    --ctl-left: clamp(310px, 18vw, 356px);
    --ctl-nav-h: clamp(430px, 56vh, 610px);
    --ctl-debug: 0px;
    --ctl-bottom: 174px;
    --ctl-radius: 18px;
    --ctl-radius-sm: 12px;
    --ctl-accent: #80c9ff;
    --ctl-accent-2: #74a8ff;
    --ctl-text: #e8f3ff;
    --ctl-muted: #8294a8;
    --ctl-surface: rgba(8, 16, 27, .88);
    --ctl-surface-2: rgba(13, 25, 39, .74);
    --ctl-line: rgba(148, 192, 235, .13);
    --ctl-line-strong: rgba(139, 199, 255, .27);
    --ctl-shadow: 0 24px 64px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.035);
    --ctl-ease: cubic-bezier(.22, 1, .36, 1);
    background: #02060b;
    color-scheme: dark;
  }
  body.dual-screen-control-ui.dual-screen-debug-available {
    --ctl-debug: clamp(430px, 27vw, 520px);
  }

  /* ---------- Global console shell ---------- */
  #app.dual-screen-control {
    isolation: isolate;
    background:
      radial-gradient(1100px 760px at 57% 36%, rgba(35, 83, 125, .20), transparent 65%),
      radial-gradient(720px 560px at 20% 86%, rgba(26, 62, 91, .13), transparent 70%),
      linear-gradient(155deg, #07101a 0%, #03080e 54%, #02050a 100%) !important;
  }
  #app.dual-screen-control::before {
    opacity: 1 !important;
    background-image:
      linear-gradient(rgba(132, 185, 235, .028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(132, 185, 235, .028) 1px, transparent 1px),
      radial-gradient(circle at 58% 42%, rgba(94, 173, 237, .07), transparent 43%) !important;
    background-size: 36px 36px, 36px 36px, 100% 100% !important;
    mask-image: linear-gradient(to bottom, transparent 0, black 90px, black 88%, transparent 100%);
  }
  #app.dual-screen-control::after {
    background:
      linear-gradient(180deg, rgba(2, 7, 12, .06), rgba(2, 6, 11, .44)),
      radial-gradient(circle at 50% 45%, transparent 35%, rgba(0,0,0,.23) 100%) !important;
  }

  #app.dual-screen-control > .topbar {
    z-index: 31;
    top: 10px !important;
    left: var(--ctl-edge) !important;
    right: var(--ctl-edge) !important;
    height: 62px !important;
    padding: 0 18px !important;
    border: 1px solid var(--ctl-line) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(180deg, rgba(16, 29, 45, .90), rgba(7, 15, 25, .88)) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04) !important;
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    animation: ctlTopIn .55s var(--ctl-ease) both;
  }
  #app.dual-screen-control > .topbar::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(137,205,255,.26), transparent);
    pointer-events: none;
  }
  #app.dual-screen-control .brand-logo { width: min(24vw, 252px); max-height: 43px; }
  #app.dual-screen-control .time-readout {
    min-width: 330px;
    padding: 5px 26px 4px;
    border-inline-color: rgba(116,181,239,.11);
    background: radial-gradient(ellipse at center, rgba(80,149,214,.09), transparent 70%);
  }
  #app.dual-screen-control .time-readout strong,
  #app.dual-screen-control .simulation-date-button { font-size: 18px; }
  #app.dual-screen-control .top-toolbar {
    z-index: 33;
    top: 22px !important;
    right: 108px !important;
    gap: 6px !important;
    animation: ctlTopIn .55s .05s var(--ctl-ease) both;
  }
  #app.dual-screen-control .top-toolbar > button {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 11px !important;
    background: rgba(17, 31, 47, .66);
    border-color: rgba(141, 190, 235, .13);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
    backdrop-filter: blur(16px);
    transition: transform .18s var(--ctl-ease), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  }
  #app.dual-screen-control .top-toolbar > button:hover,
  #app.dual-screen-control .top-toolbar > button:focus-visible {
    transform: translateY(-1px);
    background: rgba(45, 80, 114, .63);
    border-color: rgba(126, 197, 255, .34);
    box-shadow: 0 8px 20px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.05);
  }

  /* ---------- Reusable workstation surface ---------- */
  #app.dual-screen-control > .info-panel,
  #app.dual-screen-control > .timeline-panel,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar,
  body.dual-screen-control-ui .media-studio__panel {
    border: 1px solid var(--ctl-line) !important;
    border-radius: var(--ctl-radius) !important;
    background:
      linear-gradient(155deg, rgba(14, 27, 42, .92), rgba(6, 13, 22, .90)) !important;
    box-shadow: var(--ctl-shadow) !important;
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
  }

  /* ---------- Left command stack: navigation above telemetry ---------- */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  #app.dual-screen-control > .info-panel {
    z-index: 17;
    top: calc(var(--ctl-top) + var(--ctl-nav-h) + var(--ctl-gap)) !important;
    left: var(--ctl-edge) !important;
    right: auto !important;
    bottom: var(--ctl-edge) !important;
    width: var(--ctl-left) !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px !important;
    overflow: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    transform: none !important;
    animation: ctlLeftIn .62s .12s var(--ctl-ease) both;
  }
  #app.dual-screen-control > .info-panel::after { display: none !important; }
  #app.dual-screen-control > .info-panel .panel-heading {
    position: sticky;
    top: -14px;
    z-index: 3;
    min-height: 58px;
    margin: -14px -14px 9px;
    padding: 14px 14px 10px;
    align-items: center;
    border-bottom: 1px solid rgba(139,187,232,.10);
    background: linear-gradient(180deg, rgba(12,24,38,.98), rgba(10,20,32,.90));
    backdrop-filter: blur(18px);
  }
  #app.dual-screen-control > .info-panel .panel-heading h2 { font-size: 15px; color: var(--ctl-text); }
  #app.dual-screen-control > .info-panel .eyebrow { color: rgba(133, 190, 242, .62); font-size: 7.5px; }
  #app.dual-screen-control > .info-panel .status-dot { width: 8px; height: 8px; margin-top: 0; }
  #app.dual-screen-control > .info-panel .data-grid {
    gap: 7px;
    padding: 0 0 8px;
    border: 0;
  }
  #app.dual-screen-control > .info-panel .data-grid > div {
    min-width: 0;
    padding: 9px 10px 8px;
    border: 1px solid rgba(129, 174, 215, .075);
    border-radius: 10px;
    background: rgba(16, 30, 45, .40);
    transition: background .18s ease, border-color .18s ease;
  }
  #app.dual-screen-control > .info-panel .data-grid > div:hover { background: rgba(24, 44, 64, .52); border-color: rgba(123, 185, 240, .14); }
  #app.dual-screen-control > .info-panel .data-grid small { margin-bottom: 4px; color: #6f8297; font-size: 6.5px; }
  #app.dual-screen-control > .info-panel .data-grid strong { display: block; overflow: hidden; color: #dbe9f6; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
  #app.dual-screen-control > .info-panel .section-block {
    margin: 7px 0 0;
    padding: 11px;
    border: 1px solid rgba(129, 174, 215, .075);
    border-radius: 11px;
    background: rgba(12, 25, 39, .34);
  }
  #app.dual-screen-control > .info-panel .section-title { margin-bottom: 8px; color: #8594a5; font-size: 8.5px; }
  #app.dual-screen-control > .info-panel .segmented { padding: 3px; border-color: rgba(126,174,219,.11); border-radius: 9px; background: rgba(2,7,12,.38); }
  #app.dual-screen-control > .info-panel .segmented button { min-height: 29px; padding: 6px 4px; border-radius: 7px; font-size: 8px; }
  #app.dual-screen-control > .info-panel .switch-row,
  #app.dual-screen-control > .info-panel .audio-volume-row {
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid rgba(129,174,215,.065);
    border-radius: 9px;
    background: rgba(7,17,28,.38);
  }
  #app.dual-screen-control > .info-panel .compact-options { gap: 6px; }
  #app.dual-screen-control > .info-panel .user-debug-switch { margin-top: 0; border-top: 0; }

  /* ---------- Central idle control deck ---------- */
  #app.dual-screen-control .dual-screen-control-status {
    z-index: 8;
    left: calc(var(--ctl-edge) + var(--ctl-left) + var(--ctl-gap)) !important;
    right: calc(var(--ctl-edge) + var(--ctl-debug) + var(--ctl-gap)) !important;
    top: var(--ctl-top) !important;
    bottom: var(--ctl-bottom) !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: left !important;
    pointer-events: none;
    transition: opacity .28s ease, transform .36s var(--ctl-ease), visibility 0s linear 0s !important;
  }
  body.dual-screen-control-ui:has(.media-studio:not([hidden])) #app.dual-screen-control .dual-screen-control-status {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(.985) !important;
    transition: opacity .20s ease, transform .28s var(--ctl-ease), visibility 0s linear .25s !important;
  }
  .dual-control-deck__surface {
    position: relative;
    width: min(760px, 86%);
    min-width: 430px;
    padding: 22px;
    pointer-events: auto;
    overflow: hidden;
    border: 1px solid rgba(133, 193, 247, .14);
    border-radius: 24px;
    background:
      linear-gradient(145deg, rgba(15, 31, 48, .72), rgba(7, 15, 25, .76)),
      radial-gradient(circle at 75% 0, rgba(91, 175, 238, .12), transparent 36%);
    box-shadow: 0 30px 90px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    animation: ctlDeckIn .72s .16s var(--ctl-ease) both;
  }
  .dual-control-deck__surface::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(140,211,255,.36), transparent);
  }
  .dual-control-deck__surface::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -95px;
    top: -110px;
    border: 1px solid rgba(126, 197, 255, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(113,185,244,.022), 0 0 0 78px rgba(113,185,244,.012);
    pointer-events: none;
  }
  .dual-control-deck__ambient {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: .55;
  }
  .dual-control-deck__ambient i {
    position: absolute;
    width: min(54vmin, 540px);
    aspect-ratio: 1;
    border: 1px solid rgba(111, 183, 239, .055);
    border-radius: 50%;
  }
  .dual-control-deck__ambient i:nth-child(2) { width: min(40vmin, 400px); border-style: dashed; animation: ctlOrbit 26s linear infinite; }
  .dual-control-deck__ambient i:nth-child(3) { width: min(26vmin, 260px); border-color: rgba(111,183,239,.08); animation: ctlOrbit 18s linear infinite reverse; }
  .dual-control-deck__header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(135,184,229,.10); }
  .dual-screen-control-status__eyebrow { margin: 0 0 7px !important; color: rgba(127, 188, 244, .66) !important; font: 700 8px/1 "JetBrains Mono", monospace !important; letter-spacing: .20em !important; }
  #app.dual-screen-control .dual-control-deck__title { display: block; color: #eaf5ff; font: 500 18px/1.25 "Space Grotesk", Manrope, sans-serif; letter-spacing: .01em; }
  .dual-control-deck__link { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 28px; padding: 0 10px; border: 1px solid rgba(90,206,154,.18); border-radius: 999px; background: rgba(28, 85, 61, .16); color: rgba(151, 230, 190, .86); font: 700 7px/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
  .dual-control-deck__link i { width: 6px; height: 6px; border-radius: 50%; background: #74dfa9; box-shadow: 0 0 0 4px rgba(91,212,154,.08), 0 0 12px rgba(91,212,154,.45); animation: ctlPulse 2.4s ease-in-out infinite; }
  .dual-control-deck__target { position: relative; z-index: 1; padding: 24px 1px 18px; }
  .dual-control-deck__target > span { display: block; margin-bottom: 6px; color: #6f8398; font: 700 7px/1 "JetBrains Mono", monospace; letter-spacing: .16em; }
  .dual-control-deck__target > b { display: block; overflow: hidden; color: #f0f8ff; font: 500 clamp(28px, 3vw, 43px)/1.04 "Space Grotesk", Manrope, sans-serif; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 32px rgba(108,190,255,.10); }
  .dual-control-deck__metrics { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 8px; }
  .dual-control-deck__metrics > div { min-width: 0; padding: 11px 12px; border: 1px solid rgba(134, 181, 224, .08); border-radius: 12px; background: rgba(7, 17, 28, .44); }
  .dual-control-deck__metrics small { display: block; margin-bottom: 6px; color: #65798e; font: 700 6.5px/1 "JetBrains Mono", monospace; letter-spacing: .13em; }
  .dual-control-deck__metrics strong { display: block; overflow: hidden; color: #cfe3f6; font: 500 10px/1.2 "JetBrains Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
  .dual-control-deck__hint { position: relative; z-index: 1; max-width: 620px !important; margin: 14px 1px 0 !important; color: #708398 !important; font: 500 8px/1.55 "JetBrains Mono", monospace !important; }
  .dual-control-deck__actions { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 18px; }
  .dual-control-deck__actions button { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(127, 181, 228, .13); border-radius: 10px; background: rgba(21, 39, 57, .52); color: #9fb2c5; font: 600 8px/1 "Space Grotesk", sans-serif; letter-spacing: .055em; transition: transform .18s var(--ctl-ease), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
  .dual-control-deck__actions button > span { color: #91cfff; font-size: 13px; }
  .dual-control-deck__actions button:hover,
  .dual-control-deck__actions button:focus-visible { transform: translateY(-1px); color: #eef8ff; border-color: rgba(126, 198, 255, .28); background: rgba(43, 77, 108, .62); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
  .dual-control-deck__actions button.active { color: #e9f7ff; border-color: rgba(126,204,255,.38); background: rgba(51,118,168,.27); }

  /* ---------- Timeline = transport deck ---------- */
  #app.dual-screen-control > .timeline-panel {
    z-index: 19;
    left: calc(var(--ctl-edge) + var(--ctl-left) + var(--ctl-gap)) !important;
    right: calc(var(--ctl-edge) + var(--ctl-debug) + var(--ctl-gap)) !important;
    bottom: var(--ctl-edge) !important;
    width: auto !important;
    min-height: 146px;
    padding: 14px 16px 13px !important;
    transform: none !important;
    animation: ctlBottomIn .62s .10s var(--ctl-ease) both;
  }
  #app.dual-screen-control > .timeline-panel::after { display: none !important; }
  #app.dual-screen-control > .timeline-panel .timeline-top { grid-template-columns: minmax(300px,.95fr) minmax(280px,1.05fr); gap: 24px; }
  #app.dual-screen-control > .timeline-panel .transport { gap: 7px; }
  #app.dual-screen-control > .timeline-panel .transport button { border-color: rgba(128, 178, 220, .09); background: rgba(20, 36, 52, .44); }
  #app.dual-screen-control > .timeline-panel .transport button:hover { background: rgba(48, 78, 106, .54); border-color: rgba(126,190,241,.20); transform: translateY(-1px); }
  #app.dual-screen-control > .timeline-panel .transport .play-button { width: 40px; height: 40px; background: linear-gradient(145deg, #d9edff, #a9d8fb); color: #07101a; box-shadow: 0 0 0 5px rgba(111,189,244,.06), 0 8px 22px rgba(0,0,0,.18); }
  #app.dual-screen-control > .timeline-panel .timeline-track { margin-top: 11px; padding-top: 10px; border-top-color: rgba(134,183,226,.085); }
  #app.dual-screen-control > .timeline-panel .time-scale input::-webkit-slider-runnable-track,
  #app.dual-screen-control > .timeline-panel .timeline-track input::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, rgba(93,163,224,.80), rgba(115,218,255,.48)); box-shadow: 0 0 12px rgba(93,163,224,.10); }

  /* ---------- Media Studio = contextual center workspace ---------- */
  body.dual-screen-control-ui .media-studio { z-index: 46; }
  body.dual-screen-control-ui .media-studio__backdrop { display: none !important; }
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    top: var(--ctl-top) !important;
    left: calc(var(--ctl-edge) + var(--ctl-left) + var(--ctl-gap)) !important;
    right: calc(var(--ctl-edge) + var(--ctl-debug) + var(--ctl-gap)) !important;
    bottom: var(--ctl-bottom) !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow: hidden;
    animation: ctlStudioIn .42s var(--ctl-ease) both;
  }
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel::before { display:none !important; }
  body.dual-screen-control-ui .media-studio__panel header {
    min-height: 66px !important;
    padding: 14px 16px 11px 18px !important;
    border-bottom: 1px solid rgba(134,183,226,.08);
    background: linear-gradient(180deg, rgba(18,34,51,.64), rgba(9,20,32,.26));
  }
  body.dual-screen-control-ui .media-studio .media-close { display:grid !important; width:34px; height:34px; place-items:center; border-radius:10px; }
  body.dual-screen-control-ui .media-studio .media-mode { margin: 10px 14px 12px; }
  body.dual-screen-control-ui .media-studio__workspace { grid-template-columns: 92px minmax(0,1fr) !important; }
  body.dual-screen-control-ui .media-studio .media-tabs { padding: 10px 8px !important; background: rgba(2,8,14,.30); }
  body.dual-screen-control-ui .media-studio .media-tabs button { min-height: 64px !important; border-radius: 11px; transition: transform .18s var(--ctl-ease), background .18s ease, color .18s ease, border-color .18s ease; }
  body.dual-screen-control-ui .media-studio .media-tabs button:hover { transform: translateY(-1px); background: rgba(49,85,117,.35); }
  body.dual-screen-control-ui .media-studio .media-tabs button.active { background: linear-gradient(145deg, rgba(54,116,170,.34), rgba(29,68,103,.30)); border-color: rgba(124,197,255,.28); box-shadow: inset 3px 0 0 rgba(126,204,255,.66); }
  body.dual-screen-control-ui .media-studio .media-pages { padding: 16px 17px 18px !important; scrollbar-gutter: stable; }
  body.dual-screen-control-ui .media-studio .media-pages section.active { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; }
  body.dual-screen-control-ui .media-studio .media-range,
  body.dual-screen-control-ui .media-studio .media-switch,
  body.dual-screen-control-ui .media-studio .media-pages section > label:not(.media-range):not(.media-switch) { border-radius: 11px; background: rgba(9,21,34,.42); border-color: rgba(129,176,217,.08); transition: background .18s ease,border-color .18s ease; }
  body.dual-screen-control-ui .media-studio .media-range:hover,
  body.dual-screen-control-ui .media-studio .media-switch:hover,
  body.dual-screen-control-ui .media-studio .media-pages section > label:not(.media-range):not(.media-switch):hover { background: rgba(16,31,47,.52); border-color: rgba(126,188,242,.14); }
  body.dual-screen-control-ui .media-studio footer { min-height: 62px; background: rgba(3,9,15,.50); border-top: 1px solid rgba(134,183,226,.08); }

  /* ---------- Debug bay = vertical tool rail + property inspector ---------- */
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
    z-index: 22;
    top: var(--ctl-top) !important;
    right: var(--ctl-edge) !important;
    bottom: var(--ctl-edge) !important;
    left: auto !important;
    width: var(--ctl-debug) !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    transform: none !important;
    touch-action: auto;
    animation: ctlRightIn .62s .10s var(--ctl-ease) both;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar {
    flex: 0 0 auto;
    min-height: 72px !important;
    grid-template-columns: minmax(0,1fr) 10px !important;
    gap: 10px;
    padding: 11px 14px 10px !important;
    cursor: default !important;
    border-bottom: 1px solid rgba(134,183,226,.10) !important;
    background: linear-gradient(180deg, rgba(18,34,51,.68), rgba(9,20,32,.30));
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__grip,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__collapse { display:none !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__heading > span { color: rgba(128,190,244,.58); font-size: 6.5px; letter-spacing:.18em; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__heading strong { margin-top:2px; color:#e7f3ff; font-size:13px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__status-row { gap:6px; margin-top:8px; padding-top:7px; border-top:1px solid rgba(255,255,255,.045); }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__fps-badge { min-width:70px; padding:6px 9px; font-size:12px; border-radius:8px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__texture-format-badge { min-width:43px; padding:5px 7px; font-size:9px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__content {
    min-height: 0;
    flex: 1 1 auto;
    display: grid !important;
    grid-template-columns: 112px minmax(0,1fr) !important;
    overflow: hidden;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools {
    min-width: 0;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 6px !important;
    padding: 9px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    border: 0 !important;
    border-right: 1px solid rgba(134,183,226,.09) !important;
    background: rgba(2,8,14,.30) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool {
    position: relative;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 29px auto !important;
    place-items: center;
    align-content: center;
    gap: 5px !important;
    padding: 7px 5px !important;
    border: 1px solid rgba(130,178,220,.08) !important;
    border-radius: 11px !important;
    background: linear-gradient(145deg, rgba(25,43,61,.40), rgba(14,28,42,.32)) !important;
    color: rgba(188,209,229,.72) !important;
    text-align: center !important;
    overflow: hidden;
    transition: transform .18s var(--ctl-ease), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 2px;
    border-radius: 3px;
    background: transparent;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool:hover:not(:disabled) { transform: translateY(-1px); color:#eef8ff !important; background: rgba(47,78,108,.50) !important; border-color: rgba(126,191,245,.18) !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool.active { color:#f1f8ff !important; background: linear-gradient(145deg, rgba(50,108,158,.38), rgba(25,62,95,.34)) !important; border-color: rgba(124,197,255,.30) !important; box-shadow: inset 0 0 0 1px rgba(132,205,255,.025), 0 9px 18px rgba(0,0,0,.14) !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool.active::before { background: var(--ctl-accent); box-shadow: 0 0 9px rgba(116,199,255,.62); }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__icon { width:29px; height:29px; border-radius:9px; background: rgba(98,162,219,.10); color:#9ed5ff; font-size:14px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy { display:block; width:100%; min-width:0; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy strong { display:-webkit-box; overflow:hidden; color:inherit; font-size:7.3px; line-height:1.12; text-align:center; white-space:normal; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy small { display:none !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__state { position:absolute; right:8px; top:8px; width:5px; height:5px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport {
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    overflow: auto !important;
    padding: 12px 12px 18px !important;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, rgba(6,14,23,.16), rgba(3,9,15,.34));
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__panel { box-sizing:border-box; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__panel.debug-toolbar-active { animation: ctlInspectorIn .28s var(--ctl-ease) both; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #skybox-diagnostic,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #iss-camera-debug-panel,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel > .voyager-photo-calibration {
    padding: 14px !important;
    border: 1px solid rgba(130,178,220,.09) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(14,29,44,.52), rgba(8,20,32,.42)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.02) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel { display:grid !important; gap:9px; padding:0 !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel > .voyager-photo-calibration + .voyager-photo-calibration { border-top: 1px solid rgba(130,178,220,.09) !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .earth-lod-diagnostic__heading,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__group > label:first-child,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__group > label:first-child { color: rgba(150,207,255,.90); }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .earth-lod-diagnostic__heading { min-height:25px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid rgba(133,181,225,.085); font-size:8.5px; letter-spacing:.08em; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .earth-lod-diagnostic__status { margin:9px 0 0 !important; padding:9px 10px !important; border:1px solid rgba(128,176,218,.08) !important; border-radius:9px !important; background:rgba(4,13,22,.42) !important; color:rgba(178,207,232,.78); line-height:1.5; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .switch-row,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .audio-volume-row {
    min-height: 44px !important;
    margin: 7px 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(128,176,218,.075) !important;
    border-radius: 10px !important;
    background: rgba(8,20,32,.40) !important;
    transition: background .16s ease, border-color .16s ease;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .switch-row:hover,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .audio-volume-row:hover { background:rgba(14,29,44,.50) !important; border-color:rgba(126,188,242,.13) !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .audio-volume-row { grid-template-columns:minmax(94px,auto) minmax(0,1fr) auto !important; gap:9px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar select,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar input[type="number"] { min-height:32px !important; padding:6px 8px !important; border:1px solid rgba(130,181,225,.15) !important; border-radius:8px !important; outline:none; background:rgba(4,13,22,.72) !important; color:#dbeaf7 !important; transition:border-color .16s ease,box-shadow .16s ease; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar select:focus,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar input[type="number"]:focus { border-color:rgba(122,196,255,.40) !important; box-shadow:0 0 0 3px rgba(88,172,237,.08); }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar input[type="range"] { accent-color:#7bc8fb; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar input[type="range"]::-webkit-slider-runnable-track { height:3px; border-radius:999px; background:linear-gradient(90deg,rgba(94,166,226,.78),rgba(108,211,250,.42)); }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar input[type="range"]::-webkit-slider-thumb { margin-top:-5px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .segmented { gap:4px !important; padding:4px !important; border-color:rgba(128,176,218,.10) !important; border-radius:9px !important; background:rgba(3,10,17,.46) !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .segmented button { min-height:32px !important; padding:7px 8px !important; border-radius:7px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__group,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__group { margin:0 0 9px !important; padding:11px !important; border:1px solid rgba(128,176,218,.075) !important; border-radius:11px !important; background:rgba(7,19,31,.36) !important; }

  /* Focus treatment: keyboard operation should feel intentional on a console. */
  body.dual-screen-control-ui :where(button, select, input):focus-visible {
    outline: 2px solid rgba(119, 199, 255, .62);
    outline-offset: 2px;
  }

  /* Modern overlay scrollbars without removing the native fallback. */
  
  
  
  

  @supports (color: color-mix(in srgb, white 50%, black)) {
    
    #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool.active {
      border-color: color-mix(in srgb, var(--ctl-accent) 35%, transparent) !important;
    }
  }

  @keyframes ctlTopIn { from { opacity:0; transform:translateY(-10px) scale(.99); } to { opacity:1; transform:none; } }
  @keyframes ctlLeftIn { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:none; } }
  @keyframes ctlRightIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
  @keyframes ctlBottomIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  @keyframes ctlDeckIn { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
  @keyframes ctlStudioIn { from { opacity:0; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
  @keyframes ctlInspectorIn { from { opacity:0; transform:translateX(7px); } to { opacity:1; transform:none; } }
  @keyframes ctlOrbit { to { transform:rotate(360deg); } }
  @keyframes ctlPulse { 0%,100% { opacity:.68; transform:scale(.92); } 50% { opacity:1; transform:scale(1.08); } }
}

/* 1366–1599px control monitors: preserve hierarchy and usable target sizes. */
@media (min-width: 901px) and (max-width: 1599px) {
  body.dual-screen-control-ui {
    --ctl-left: 286px;
    --ctl-debug: 0px;
    --ctl-nav-h: clamp(410px, 54vh, 550px);
    --ctl-bottom: 166px;
  }
  body.dual-screen-control-ui.dual-screen-debug-available { --ctl-debug: 372px; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__content { grid-template-columns: 96px minmax(0,1fr) !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools { padding:7px !important; gap:5px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool { min-height:56px !important; }
  
  
  .dual-control-deck__surface { width:min(680px, 90%); min-width:360px; padding:18px; }
  .dual-control-deck__metrics { grid-template-columns:1.2fr .8fr; }
  .dual-control-deck__metrics > div:last-child { grid-column:1 / -1; }
  #app.dual-screen-control > .timeline-panel .timeline-top { grid-template-columns:1fr; gap:8px; }
  #app.dual-screen-control > .timeline-panel { min-height:154px; }
}

/* Very short desktop screens: navigation and telemetry share the height more evenly. */
@media (min-width: 901px) and (max-height: 820px) {
  body.dual-screen-control-ui { --ctl-top:78px; --ctl-nav-h:390px; --ctl-bottom:158px; }
  #app.dual-screen-control > .topbar { height:56px !important; }
  #app.dual-screen-control .top-toolbar { top:19px !important; }
  
  
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar { min-height:64px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool { min-height:50px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.dual-screen-control-ui *,
  body.dual-screen-control-ui *::before,
  body.dual-screen-control-ui *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ========================================================================== */
/* 2026-09-18 — Dual Screen Control Console v4 · Precision Minimal            */
/* Direction: text-first, no decorative pictograms, no stacked navigation.    */
/* The left navigation, system state, workspace and debug inspector are four   */
/* simultaneous work zones. Primary menus never need their own scrollbar.      */
/* ========================================================================== */
@media (min-width: 901px) {
  body.dual-screen-control-ui {
    --ctl-edge: 10px;
    --ctl-gap: 10px;
    --ctl-top: 76px;
    --ctl-nav-w: clamp(204px, 12vw, 232px);
    --ctl-state-w: clamp(280px, 17vw, 322px);
    --ctl-debug: 0px;
    --ctl-bottom: 152px;
    --ctl-radius: 11px;
    --ctl-radius-sm: 7px;
    --ctl-accent: #79c7ff;
    --ctl-text: #edf4fa;
    --ctl-muted: #7f8b97;
    --ctl-surface: rgba(12, 16, 22, .96);
    --ctl-surface-2: rgba(17, 22, 29, .94);
    --ctl-line: rgba(255, 255, 255, .075);
    --ctl-line-strong: rgba(121, 199, 255, .32);
    --ctl-shadow: 0 12px 34px rgba(0, 0, 0, .22);
    background: #07090d;
  }
  body.dual-screen-control-ui.dual-screen-debug-available {
    --ctl-debug: clamp(390px, 24vw, 468px);
  }

  /* Minimal shell: matte layers, thin separators, almost no decoration. */
  #app.dual-screen-control {
    background: #07090d !important;
  }
  #app.dual-screen-control::before {
    opacity: .22 !important;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    mask-image: linear-gradient(to bottom, transparent 0, black 82px, black 94%, transparent 100%);
  }
  #app.dual-screen-control::after { display: none !important; }

  #app.dual-screen-control > .topbar,
  #app.dual-screen-control > .info-panel,
  #app.dual-screen-control > .timeline-panel,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar,
  body.dual-screen-control-ui .media-studio__panel {
    border: 1px solid var(--ctl-line) !important;
    border-radius: var(--ctl-radius) !important;
    background: var(--ctl-surface) !important;
    box-shadow: var(--ctl-shadow) !important;
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
  }

  #app.dual-screen-control > .topbar {
    top: 10px !important;
    left: var(--ctl-edge) !important;
    right: var(--ctl-edge) !important;
    height: 56px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
  }
  #app.dual-screen-control > .topbar::before { display:none !important; }
  #app.dual-screen-control .brand-logo { display: none !important; }
  #app.dual-screen-control .brand {
    width: 178px;
    min-width: 178px;
    display: flex;
    align-items: center;
  }
  #app.dual-screen-control .brand::before {
    content: "DUAL CONTROL";
    color: rgba(219, 231, 241, .66);
    font: 700 8px/1 "JetBrains Mono", monospace;
    letter-spacing: .19em;
  }
  #app.dual-screen-control .time-readout {
    min-width: 304px;
    padding: 3px 22px;
    border-inline-color: rgba(255,255,255,.07);
    background: none;
  }
  #app.dual-screen-control .time-readout strong,
  #app.dual-screen-control .simulation-date-button { font-size: 16px; }
  #app.dual-screen-control .top-toolbar {
    top: 21px !important;
    right: 104px !important;
    gap: 4px !important;
  }
  #app.dual-screen-control .top-toolbar > button {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border-radius: 7px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
  }
  #app.dual-screen-control .top-toolbar > button:hover,
  #app.dual-screen-control .top-toolbar > button:focus-visible {
    transform: none;
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.075) !important;
    box-shadow: none !important;
  }

  /* ---------------------------------------------------------------------- */
  /* VIEWS — single text rail. No two-column cards and no internal scrolling. */
  /* Secondary choices open as compact flyouts, avoiding layout shifts.       */
  /* ---------------------------------------------------------------------- */
  
  
  
  
  
  
  
  
  
  

  /* Remove decorative pictograms from navigation. Text and state are enough. */
  
  
  
  
  
  
  
  
  
  

  /* Context flyouts: one column, no reflow, no scrolling in the primary rail. */
  
  
  
  
  
  

  /* ---------------------------------------------------------------------- */
  /* SYSTEM STATE — a parallel information rail, never below navigation.      */
  /* ---------------------------------------------------------------------- */
  #app.dual-screen-control > .info-panel {
    z-index: 17;
    top: var(--ctl-top) !important;
    left: calc(var(--ctl-edge) + var(--ctl-nav-w) + var(--ctl-gap)) !important;
    right: auto !important;
    bottom: var(--ctl-edge) !important;
    width: var(--ctl-state-w) !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px !important;
    overflow: hidden !important;
    scrollbar-gutter: auto;
    transform: none !important;
    animation: ctlLeftIn .42s .04s var(--ctl-ease) both;
  }
  #app.dual-screen-control > .info-panel::after { display:none !important; }
  #app.dual-screen-control > .info-panel .panel-heading {
    position: static !important;
    min-height: 42px;
    margin: 0 0 7px !important;
    padding: 0 8px 7px !important;
    align-items: center;
    border-bottom: 1px solid var(--ctl-line);
    background: transparent !important;
    backdrop-filter: none;
  }
  #app.dual-screen-control > .info-panel .panel-heading .eyebrow { display:none !important; }
  #app.dual-screen-control > .info-panel .panel-heading h2 {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .01em;
    color: #e8eef4;
  }
  #app.dual-screen-control > .info-panel .status-dot { width:6px; height:6px; }
  #app.dual-screen-control > .info-panel .data-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #app.dual-screen-control > .info-panel .data-grid > div {
    min-height: 45px;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.025) !important;
  }
  #app.dual-screen-control > .info-panel .data-grid > div:hover {
    background: rgba(255,255,255,.04) !important;
    border-color: transparent !important;
  }
  #app.dual-screen-control > .info-panel .data-grid small {
    margin-bottom: 4px;
    color: #707b86;
    font-size: 6px;
    letter-spacing: .06em;
  }
  #app.dual-screen-control > .info-panel .data-grid strong {
    color: #dfe7ee;
    font-size: 8.7px;
    font-weight: 600;
  }
  #app.dual-screen-control > .info-panel .section-block {
    margin: 6px 0 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-top: 1px solid var(--ctl-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .section-title {
    margin-bottom: 6px !important;
    color: #7d8995 !important;
    font-size: 7px !important;
    letter-spacing: .05em;
  }
  #app.dual-screen-control > .info-panel .segmented {
    padding: 2px !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.02) !important;
  }
  #app.dual-screen-control > .info-panel .segmented button {
    min-height: 25px !important;
    padding: 4px 3px !important;
    border-radius: 4px !important;
    font-size: 7.4px !important;
  }
  #app.dual-screen-control > .info-panel .performance-mode-row { min-height: 30px !important; }
  #app.dual-screen-control > .info-panel #performance-mode { min-height: 28px !important; font-size: 8px !important; }
  #app.dual-screen-control > .info-panel .performance-detail { font-size: 6.7px !important; line-height:1.3 !important; }
  #app.dual-screen-control > .info-panel .compact-options { gap: 3px !important; }
  #app.dual-screen-control > .info-panel .switch-row,
  #app.dual-screen-control > .info-panel .audio-volume-row {
    min-height: 30px !important;
    padding: 5px 6px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: rgba(255,255,255,.02) !important;
    font-size: 8px !important;
  }
  #app.dual-screen-control > .info-panel .switch-row:hover,
  #app.dual-screen-control > .info-panel .audio-volume-row:hover { background:rgba(255,255,255,.04) !important; }
  #app.dual-screen-control > .info-panel .voyager-photo-note,
  #app.dual-screen-control > .info-panel .voyager-photo-mode-note { display:none !important; }
  #app.dual-screen-control > .info-panel .voyager-photo-list { gap:3px !important; }
  #app.dual-screen-control > .info-panel .voyager-photo-list button { min-height:30px !important; padding:5px 7px !important; }
  #app.dual-screen-control > .info-panel i[aria-hidden="true"] { display:none !important; }

  /* ---------------------------------------------------------------------- */
  /* WORKSPACE + TRANSPORT — central area only.                               */
  /* ---------------------------------------------------------------------- */
  #app.dual-screen-control .dual-screen-control-status {
    left: calc(var(--ctl-edge) + var(--ctl-nav-w) + var(--ctl-gap) + var(--ctl-state-w) + var(--ctl-gap)) !important;
    right: calc(var(--ctl-edge) + var(--ctl-debug) + var(--ctl-gap)) !important;
    top: var(--ctl-top) !important;
    bottom: var(--ctl-bottom) !important;
  }
  .dual-control-deck__ambient { display:none !important; }
  .dual-control-deck__surface {
    width: min(700px, 88%) !important;
    min-width: 0 !important;
    padding: 20px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 12px !important;
    background: rgba(13,17,23,.86) !important;
    box-shadow: none !important;
  }
  .dual-control-deck__surface::before,
  .dual-control-deck__surface::after { display:none !important; }
  .dual-control-deck__header { padding-bottom: 13px !important; border-bottom-color: var(--ctl-line) !important; }
  .dual-screen-control-status__eyebrow { color:#788592 !important; font-size:6.5px !important; letter-spacing:.14em !important; }
  #app.dual-screen-control .dual-control-deck__title { color:#e9eff4 !important; font-size:15px !important; font-weight:600 !important; }
  .dual-control-deck__link {
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(104,205,157,.13) !important;
    border-radius: 5px !important;
    background: transparent !important;
    font-size:6.5px !important;
  }
  .dual-control-deck__link i { width:5px !important; height:5px !important; box-shadow:none !important; animation:none !important; }
  .dual-control-deck__target { padding: 18px 0 14px !important; }
  .dual-control-deck__target > b { font-size: clamp(24px, 2.5vw, 36px) !important; text-shadow:none !important; }
  .dual-control-deck__metrics { gap:5px !important; }
  .dual-control-deck__metrics > div { padding:9px 10px !important; border:0 !important; border-radius:6px !important; background:rgba(255,255,255,.025) !important; }
  .dual-control-deck__actions { gap:5px !important; margin-top:14px !important; }
  .dual-control-deck__actions button { min-height:34px !important; padding:0 11px !important; border-radius:6px !important; background:transparent !important; box-shadow:none !important; }
  .dual-control-deck__actions button > span { display:none !important; }
  .dual-control-deck__actions button:hover,
  .dual-control-deck__actions button:focus-visible { transform:none !important; background:rgba(255,255,255,.045) !important; box-shadow:none !important; }

  #app.dual-screen-control > .timeline-panel {
    left: calc(var(--ctl-edge) + var(--ctl-nav-w) + var(--ctl-gap) + var(--ctl-state-w) + var(--ctl-gap)) !important;
    right: calc(var(--ctl-edge) + var(--ctl-debug) + var(--ctl-gap)) !important;
    bottom: var(--ctl-edge) !important;
    min-height: 132px !important;
    padding: 10px 12px !important;
  }
  #app.dual-screen-control > .timeline-panel .timeline-top {
    grid-template-columns: minmax(250px,.9fr) minmax(260px,1.1fr) !important;
    gap: 16px !important;
  }
  #app.dual-screen-control > .timeline-panel .transport button {
    border-color: transparent !important;
    border-radius:6px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  #app.dual-screen-control > .timeline-panel .transport button:hover { transform:none !important; background:rgba(255,255,255,.045) !important; }
  #app.dual-screen-control > .timeline-panel .transport .play-button {
    width:36px !important; height:36px !important;
    background:#dbe9f4 !important;
    box-shadow:none !important;
  }
  #app.dual-screen-control > .timeline-panel .timeline-track { margin-top:8px !important; padding-top:8px !important; }

  /* Studio occupies only the central workspace; side rails remain available. */
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    top: var(--ctl-top) !important;
    left: calc(var(--ctl-edge) + var(--ctl-nav-w) + var(--ctl-gap) + var(--ctl-state-w) + var(--ctl-gap)) !important;
    right: calc(var(--ctl-edge) + var(--ctl-debug) + var(--ctl-gap)) !important;
    bottom: var(--ctl-bottom) !important;
    border-radius: 11px !important;
  }
  body.dual-screen-control-ui .media-studio__panel header {
    min-height: 54px !important;
    padding: 10px 12px !important;
    background: transparent !important;
  }
  body.dual-screen-control-ui .media-studio .media-mode { margin:8px 10px !important; }
  body.dual-screen-control-ui .media-studio__workspace { grid-template-columns: 76px minmax(0,1fr) !important; }
  body.dual-screen-control-ui .media-studio .media-tabs { padding:7px 6px !important; background:rgba(255,255,255,.012) !important; }
  body.dual-screen-control-ui .media-studio .media-tabs button { min-height:52px !important; border-radius:6px !important; }
  body.dual-screen-control-ui .media-studio .media-tabs button:hover { transform:none !important; background:rgba(255,255,255,.04) !important; }
  body.dual-screen-control-ui .media-studio .media-tabs button.active { background:rgba(121,199,255,.07) !important; border-color:transparent !important; box-shadow:inset 2px 0 0 var(--ctl-accent) !important; }

  /* ---------------------------------------------------------------------- */
  /* DEBUG — horizontal text tabs + wide inspector. Pictograms removed.       */
  /* ---------------------------------------------------------------------- */
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
    top: var(--ctl-top) !important;
    right: var(--ctl-edge) !important;
    bottom: var(--ctl-edge) !important;
    width: var(--ctl-debug) !important;
    overflow: hidden !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar {
    min-height: 58px !important;
    grid-template-columns: 1fr 8px !important;
    gap: 8px !important;
    padding: 9px 11px 8px !important;
    border-bottom: 1px solid var(--ctl-line) !important;
    background: transparent !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__heading > span { display:none !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__heading strong {
    color:#e7edf3 !important;
    font-size:11px !important;
    font-weight:600 !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__status-row {
    gap:4px !important;
    margin-top:6px !important;
    padding-top:0 !important;
    border-top:0 !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__fps-badge,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__texture-format-badge,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .technical-chip {
    min-width:0 !important;
    padding:3px 6px !important;
    border-radius:4px !important;
    font-size:7px !important;
    box-shadow:none !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__content {
    min-height:0;
    flex:1 1 auto;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools {
    flex:0 0 auto !important;
    min-width:0;
    min-height:0;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:2px !important;
    padding:7px !important;
    overflow:visible !important;
    border:0 !important;
    border-bottom:1px solid var(--ctl-line) !important;
    background:rgba(255,255,255,.01) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool {
    width:100% !important;
    min-width:0 !important;
    min-height:29px !important;
    height:29px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 8px !important;
    border:0 !important;
    border-radius:5px !important;
    background:transparent !important;
    color:rgba(198,209,219,.65) !important;
    text-align:left !important;
    box-shadow:none !important;
    transition:background .14s ease,color .14s ease !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool::before {
    top:6px !important; bottom:6px !important; width:2px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool:hover:not(:disabled) {
    transform:none !important;
    color:#f1f5f8 !important;
    background:rgba(255,255,255,.04) !important;
    border-color:transparent !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool.active {
    color:#f5f8fb !important;
    background:rgba(121,199,255,.065) !important;
    border-color:transparent !important;
    box-shadow:none !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__icon { display:none !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy { display:block !important; min-width:0; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy strong {
    display:block !important;
    overflow:hidden;
    font-size:7.4px !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-align:left !important;
    white-space:nowrap !important;
    text-overflow:ellipsis;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy small { display:none !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__state { right:5px !important; top:5px !important; width:4px !important; height:4px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport {
    min-height:0;
    flex:1 1 auto;
    max-height:none !important;
    overflow:auto !important;
    padding:9px !important;
    background:transparent !important;
    scrollbar-width:thin;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar i[aria-hidden="true"] { display:none !important; }

  /* Use horizontal space inside long engineering panels before vertical scroll. */
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #skybox-diagnostic,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #iss-camera-debug-panel,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__body {
    padding: 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.018) !important;
    box-shadow:none !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    align-content:start;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel > .voyager-photo-calibration {
    padding:9px !important;
    border-radius:7px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__group,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__group {
    margin:0 !important;
    padding:8px !important;
    border:0 !important;
    border-radius:6px !important;
    background:rgba(255,255,255,.02) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .earth-lod-diagnostic__heading {
    min-height:22px !important;
    margin:0 0 6px !important;
    padding-bottom:6px !important;
    font-size:7.5px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .switch-row,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .audio-volume-row {
    min-height:34px !important;
    margin:4px 0 !important;
    padding:5px 7px !important;
    border:0 !important;
    border-radius:5px !important;
    background:rgba(255,255,255,.025) !important;
    font-size:8px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar select,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar input[type="number"] {
    min-height:27px !important;
    padding:4px 6px !important;
    border-radius:5px !important;
    font-size:8px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .segmented { padding:2px !important; border-radius:5px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .segmented button { min-height:27px !important; padding:5px 6px !important; border-radius:4px !important; font-size:7.5px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar small { line-height:1.3 !important; }

  /* More restrained motion: state changes rather than decorative movement. */
  #app.dual-screen-control .dual-control-deck__link i,
  #app.dual-screen-control .status-dot { animation:none !important; }
  body.dual-screen-control-ui :where(button, select, input):focus-visible {
    outline: 1px solid rgba(121,199,255,.72) !important;
    outline-offset: 1px !important;
  }
}

/* 1366–1599 px: keep the same four-zone architecture, only tighten widths. */
@media (min-width: 901px) and (max-width: 1599px) {
  body.dual-screen-control-ui {
    --ctl-nav-w: 192px;
    --ctl-state-w: 254px;
    --ctl-bottom: 146px;
  }
  body.dual-screen-control-ui.dual-screen-debug-available { --ctl-debug: 344px; }
  
  
  
  
  #app.dual-screen-control > .info-panel { padding:8px !important; }
  #app.dual-screen-control > .info-panel .panel-heading { min-height:38px !important; }
  #app.dual-screen-control > .info-panel .data-grid > div { min-height:40px !important; padding:6px !important; }
  #app.dual-screen-control > .info-panel .section-block { margin-top:4px !important; padding:6px !important; }
  #app.dual-screen-control > .info-panel .switch-row,
  #app.dual-screen-control > .info-panel .audio-volume-row { min-height:27px !important; padding:4px 5px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools { grid-template-columns:repeat(3,minmax(0,1fr)) !important; padding:5px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool { min-height:27px !important; height:27px !important; padding:0 6px !important; }
  .dual-control-deck__surface { width:min(620px,92%) !important; padding:16px !important; }
  #app.dual-screen-control > .timeline-panel .timeline-top { grid-template-columns:1fr !important; gap:5px !important; }
  #app.dual-screen-control > .timeline-panel { min-height:132px !important; }
}

/* Short desktop screens: preserve access without introducing navigation scroll. */
@media (min-width: 901px) and (max-height: 820px) {
  body.dual-screen-control-ui {
    --ctl-top: 72px;
    --ctl-bottom: 136px;
  }
  #app.dual-screen-control > .topbar { height:52px !important; }
  #app.dual-screen-control .top-toolbar { top:19px !important; }
  
  
  #app.dual-screen-control > .info-panel .data-grid > div { min-height:36px !important; padding:5px 6px !important; }
  #app.dual-screen-control > .info-panel .section-block { margin-top:3px !important; padding:5px 6px !important; }
  #app.dual-screen-control > .info-panel .section-title { margin-bottom:4px !important; }
  #app.dual-screen-control > .info-panel .switch-row,
  #app.dual-screen-control > .info-panel .audio-volume-row { min-height:25px !important; padding:3px 5px !important; }
  #app.dual-screen-control > .info-panel .audio-volume-row output { font-size:7px !important; }
  #app.dual-screen-control > .info-panel .performance-detail { display:none !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar { min-height:52px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool { min-height:25px !important; height:25px !important; }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .switch-row,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .audio-volume-row { min-height:30px !important; margin:3px 0 !important; }
}

/* Standard control monitors (>= 821px high): engineering inspectors are laid
   out across the available width so the normal tool panels fit without scroll. */
@media (min-width: 901px) and (min-height: 821px) {
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport {
    overflow: hidden !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #skybox-diagnostic.debug-toolbar-active,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic.debug-toolbar-active,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #iss-camera-debug-panel.debug-toolbar-active {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px 8px !important;
    align-content: start !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #skybox-diagnostic.debug-toolbar-active > .earth-lod-diagnostic__heading,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic.debug-toolbar-active > .earth-lod-diagnostic__heading,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic.debug-toolbar-active > #texture-context-summary,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #iss-camera-debug-panel.debug-toolbar-active > .earth-lod-diagnostic__heading {
    grid-column: 1 / -1 !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #skybox-diagnostic.debug-toolbar-active > div[style*="border-top"] {
    grid-row: span 4;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    padding-left: 8px !important;
    border-left: 1px solid var(--ctl-line) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic.debug-toolbar-active > #texture-context-native-panel,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic.debug-toolbar-active > #texture-context-common-controls,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #earth-lod-diagnostic.debug-toolbar-active > #texture-context-earth-controls {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    align-content: start !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #iss-camera-debug-panel.debug-toolbar-active > div[style*="border-top"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 8px !important;
    border-top: 0 !important;
    border-left: 1px solid var(--ctl-line) !important;
  }
}

/* ========================================================================== */
/* 2026-09-18 — Dual Screen Control Console v5 · Coherent Minimal            */
/* Same spatial grammar as single-screen: state left, views right, time       */
/* bottom. The developer inspector owns the centre only when Debug is active. */
/* Page never scrolls; long panels scroll internally.                         */
/* ========================================================================== */
@media (min-width: 901px) {
  body.dual-screen-control-ui {
    --ctl-edge: 0px;
    --ctl-top: 92px;
    --ctl-info-w: 300px;
    --ctl-view-w: 196px;
    --ctl-panel-gap: 18px;
    --ctl-timeline-h: 150px;
    --ctl-center-max: 840px;
    overflow: hidden !important;
    background: #07090d;
  }

  body.dual-screen-control-ui,
  body.dual-screen-control-ui #app.dual-screen-control {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
  }

  /* Preserve the single-screen spatial landmarks. */
  #app.dual-screen-control > .topbar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 76px !important;
    padding: 0 24px !important;
    border-width: 0 1px 1px !important;
    border-radius: 0 0 18px 18px !important;
    background: linear-gradient(145deg, rgba(17,24,36,.84), rgba(6,9,15,.82)) !important;
  }
  #app.dual-screen-control .brand {
    width: auto !important;
    min-width: 0 !important;
  }
  #app.dual-screen-control .brand::before,
  #app.dual-screen-control .brand-logo {
    display: none !important;
    content: none !important;
  }
  #app.dual-screen-control .time-readout {
    min-width: 356px !important;
    padding: 8px 30px 7px !important;
    background: radial-gradient(ellipse at center, rgba(75,128,202,.09), transparent 72%) !important;
  }
  #app.dual-screen-control .time-readout strong,
  #app.dual-screen-control .simulation-date-button { font-size: 21px !important; }
  #app.dual-screen-control .top-toolbar {
    top: 21px !important;
    right: 24px !important;
    gap: 5px !important;
  }

  /* The v3/v4 centre dashboard duplicated information already present in the
     state panel and top bar. It has no role in the coherent control layout. */
  #app.dual-screen-control .dual-screen-control-status,
  #app.dual-screen-control .dual-control-deck {
    display: none !important;
  }

  /* LEFT — System state: same side and edge anchoring as single-screen. */
  #app.dual-screen-control > .info-panel {
    top: var(--ctl-top) !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--ctl-info-w) !important;
    height: auto !important;
    max-height: calc(100vh - 112px) !important;
    padding: 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-width: 1px 1px 1px 0 !important;
    border-radius: 0 18px 18px 0 !important;
    transform: none !important;
    animation: none !important;
  }
  #app.dual-screen-control > .info-panel .panel-heading {
    position: static !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #app.dual-screen-control > .info-panel .panel-heading h2 {
    font-size: 15px !important;
    font-weight: 560 !important;
  }
  #app.dual-screen-control > .info-panel .data-grid {
    gap: 10px 8px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #app.dual-screen-control > .info-panel .data-grid > div {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .data-grid > div:hover {
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .data-grid small {
    margin-bottom: 4px !important;
    font-size: 7px !important;
  }
  #app.dual-screen-control > .info-panel .data-grid strong {
    font-size: 10px !important;
  }
  #app.dual-screen-control > .info-panel .section-block {
    margin: 0 !important;
    padding: 13px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .switch-row,
  #app.dual-screen-control > .info-panel .audio-volume-row {
    min-height: 30px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* RIGHT — Views/Astres. Accordion stays inside the menu; no lateral flyout. */
  
  
  
  
  
  
  
  
  

  
  
  
  

  /* BOTTOM — timeline keeps the same central anchor as single-screen. */
  #app.dual-screen-control > .timeline-panel {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(840px, calc(100vw - 520px)) !important;
    min-height: 0 !important;
    padding: 13px 18px calc(12px + env(safe-area-inset-bottom)) !important;
    border-width: 1px 1px 0 !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
  #app.dual-screen-control > .timeline-panel .timeline-top {
    grid-template-columns: minmax(330px,auto) minmax(260px,1fr) !important;
    gap: 26px !important;
  }

  /* CENTRE — developer-only inspector. It is not a permanent layout column. */
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
    top: var(--ctl-top) !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--ctl-timeline-h) !important;
    width: min(var(--ctl-center-max), calc(100vw - var(--ctl-info-w) - var(--ctl-view-w) - 72px)) !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.34) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar {
    min-height: 58px !important;
    grid-template-columns: minmax(0,1fr) 10px !important;
    padding: 9px 12px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    gap: 3px !important;
    padding: 7px 9px !important;
    overflow: visible !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    justify-content: center !important;
    padding: 0 7px !important;
    text-align: center !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy strong {
    text-align: center !important;
    font-size: 7.2px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  /* Studio is another central tool, never another side rail. */
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    top: var(--ctl-top) !important;
    left: calc(var(--ctl-info-w) + 26px) !important;
    right: calc(var(--ctl-view-w) + 26px) !important;
    bottom: var(--ctl-timeline-h) !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  /* Scroll belongs to each tool, never to the control page. */
  #app.dual-screen-control > .info-panel,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport,
  body.dual-screen-control-ui .media-studio__content {
    scrollbar-width: thin;
    scrollbar-color: rgba(130,160,190,.32) transparent;
  }
  #app.dual-screen-control > .info-panel::-webkit-scrollbar,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport::-webkit-scrollbar,
  body.dual-screen-control-ui .media-studio__content::-webkit-scrollbar { width: 6px; }
  #app.dual-screen-control > .info-panel::-webkit-scrollbar-thumb,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport::-webkit-scrollbar-thumb,
  body.dual-screen-control-ui .media-studio__content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(130,160,190,.28);
  }
}

/* Compact control monitors: preserve positions and let panels scroll internally. */
@media (min-width: 901px) and (max-width: 1399px) {
  body.dual-screen-control-ui {
    --ctl-info-w: 276px;
    --ctl-view-w: 184px;
    --ctl-center-max: 720px;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  #app.dual-screen-control > .timeline-panel {
    width: min(760px, calc(100vw - 460px)) !important;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  body.dual-screen-control-ui {
    --ctl-top: 84px;
    --ctl-timeline-h: 138px;
  }
  #app.dual-screen-control > .info-panel{
    max-height: calc(100vh - 98px) !important;
  }
  
  
  
}

/* 2026-09-19 — Dual Screen navigation semantic parity ----------------------
   Dual Screen deliberately keeps its compact text-only accordion, but every
   control state must carry the same meaning as the single-screen navigation.
   Earlier minimalist overrides flattened several specific states. */
@media (min-width: 901px) {
  /* Selected target while another view is focused: same amber distinction as
     single-screen, expressed by the Dual Screen left state rail. */
  
  
  
  

  /* Preserve the single-screen capture/inspection semantics that were hidden
     by the generic minimal button rule. */
  
  
  
  
  
  
  

  
  
  
  

  /* Context camera controls use exactly the same active boolean in both modes.
     Give ON states an unambiguous state rail even though pictograms are hidden. */
  
}

/* 2026-09-25 — Dashboard contextuel + paramètres interface */
.interface-settings-panel{position:fixed;z-index:31;top:92px;right:18px;width:min(360px,calc(100vw - 36px));max-height:calc(100dvh - 116px);overflow:auto;padding:18px;border-radius:16px}
.interface-settings-panel[hidden]{display:none!important}
.interface-settings-panel__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(150,190,225,.12)}
.interface-settings-panel__heading h2{margin:2px 0 0;font-size:18px;color:#eaf5ff}
.interface-settings-panel__heading .eyebrow{margin:0}
.interface-settings-panel__heading>button{width:30px;height:30px;border:1px solid rgba(150,190,225,.16);border-radius:9px;background:rgba(22,38,56,.5);color:#a9bfd5;font-size:19px;cursor:pointer}
.interface-settings-panel .section-block{margin-top:12px}
.interface-settings-button[aria-expanded="true"]{color:#eef7ff!important;border-color:rgba(114,169,255,.58)!important;background:rgba(55,101,150,.28)!important}

/* Le panneau gauche devient un dashboard : métriques + outils liés à la scène. */
.info-panel .dashboard-context-tools{display:grid;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(150,190,225,.10)}
.dashboard-context-tools>.view-group,.dashboard-context-tools>button{width:100%}
.dashboard-context-tools .view-group[hidden],.dashboard-context-tools>button[hidden]{display:none!important}
.dashboard-context-tools .view-group{position:relative}
.dashboard-context-tools .view-group-label,.dashboard-context-tools>button{width:100%;min-height:38px;border:1px solid rgba(135,182,224,.10);border-radius:10px;background:rgba(24,42,61,.42);color:#9fb2c5;padding:8px 10px;display:flex;align-items:center;gap:8px;cursor:pointer}
.dashboard-context-tools .view-submenu{display:grid;grid-template-columns:1fr;gap:5px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;margin:0;padding:0;transition:max-height .28s ease,opacity .18s ease,margin .2s ease}
.dashboard-context-tools .view-group.expanded .view-submenu{max-height:620px;opacity:1;pointer-events:auto;margin-top:6px}
.dashboard-context-tools .view-submenu button{width:100%;min-height:34px;border:1px solid rgba(135,182,224,.08);border-radius:8px;background:rgba(20,36,53,.46);color:#91a8bd;text-align:left;padding:7px 9px}
.dashboard-context-tools .view-submenu button.active{color:#e8f5ff;border-color:rgba(123,198,255,.30);background:rgba(48,101,149,.28)}
.dashboard-context-tools .view-group-chevron{margin-left:auto}
.dashboard-context-tools .view-group.expanded .view-group-chevron{transform:rotate(90deg)}

/* Même logique de dropdown que le Control Deck dual-screen. */
@media (min-width:761px){
  #app:not(.dual-screen-control)>.view-controls .view-group{height:auto}
  #app:not(.dual-screen-control)>.view-controls .view-submenu{position:static!important;inset:auto!important;display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-height:0;margin:0!important;padding:0 5px!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-4px)!important;border:1px solid transparent!important;border-radius:10px!important;background:rgba(3,9,15,.40)!important;box-shadow:none!important;transition:max-height .3s ease,opacity .18s ease,transform .22s ease,margin .22s ease,padding .22s ease,visibility 0s linear .3s!important}
  #app:not(.dual-screen-control)>.view-controls .view-submenu::after{display:none!important}
  #app:not(.dual-screen-control)>.view-controls .view-group.expanded .view-submenu{max-height:520px;margin:5px 0 1px!important;padding:5px!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;border-color:rgba(132,181,225,.10)!important;transition-delay:0s!important}
  #app:not(.dual-screen-control)>.view-controls .view-submenu>button{width:100%!important;min-height:34px;padding:6px 8px!important}
  #app:not(.dual-screen-control)>.view-controls .view-group.expanded .view-group-chevron{transform:rotate(90deg)}
}
@media(max-width:760px){.interface-settings-panel{top:70px;right:10px;left:10px;width:auto;max-height:calc(100dvh - 88px)}}
.dashboard-context-tools .iss-camera-selector:has(> .iss-camera-button:disabled){display:none}
.dashboard-context-tools #inspection-light-button:disabled{display:none}
.dashboard-context-tools:empty{display:none}

/* ISS contextual orbital dashboard ------------------------------------------------ */
.iss-orbit-dashboard{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
}
.iss-orbit-dashboard[hidden]{display:none !important}
.iss-dashboard-heading,
.iss-map-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.iss-dashboard-heading{margin-bottom:10px}
.iss-dashboard-heading>div{min-width:0}
.iss-dashboard-heading small,
.iss-map-heading,
.iss-orbit-meta small{
  color:#718298;
  font:600 7px/1.2 "JetBrains Mono",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.iss-dashboard-heading strong{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:#dce9f6;
  font:600 10px/1.1 "Space Grotesk",sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.iss-live-badge{
  flex:0 0 auto;
  min-width:54px;
  padding:5px 7px;
  border:1px solid rgba(135,168,198,.17);
  border-radius:999px;
  background:rgba(8,18,28,.62);
  color:#7f93a8;
  font:700 7px/1 "JetBrains Mono",monospace;
  letter-spacing:.08em;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.iss-live-badge.is-live{
  border-color:rgba(111,216,169,.28);
  background:rgba(52,141,101,.11);
  color:#a4e5c5;
}
.iss-live-badge.is-live::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:0;
  border-radius:50%;
  background:currentColor;
  vertical-align:middle;
  box-shadow:0 0 5px currentColor;
  transform-origin:center;
  animation:iss-live-dot-pulse 1.65s ease-in-out infinite;
}
.iss-telemetry-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-bottom:9px;
}
.iss-telemetry-grid>div,
.iss-orbit-meta>div{
  min-width:0;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:8px;
  background:rgba(1,7,13,.26);
}
.iss-telemetry-grid small{
  display:block;
  margin-bottom:4px;
  color:#9cc9ff;
  font:600 8px/1 "JetBrains Mono",monospace;
  letter-spacing:.11em;
}
.iss-telemetry-grid strong{
  display:block;
  overflow:hidden;
  color:#dbe9f7;
  font:500 9.5px/1.15 "JetBrains Mono",monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.iss-map-card{
  overflow:hidden;
  border:1px solid rgba(125,174,218,.12);
  border-radius:10px;
  background:rgba(0,5,10,.38);
}
.iss-map-heading{
  min-height:29px;
  padding:0 8px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.iss-map-heading>span:first-child{color:#8ea3b9}
.iss-map-heading>span:last-child{
  color:#60768d;
  font-size:6.3px;
  letter-spacing:.05em;
  white-space:nowrap;
}
.iss-map-heading>span.is-loading{color:#8e7962}
.iss-world-map{
  position:relative;
  aspect-ratio:2/1;
  overflow:hidden;
  background:
    linear-gradient(rgba(37,66,92,.08),rgba(37,66,92,.08)),
    #02070d;
  isolation:isolate;
}
.iss-map-earth,
.iss-map-night,
.iss-map-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.iss-map-earth{
  z-index:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  filter:saturate(.72) brightness(.78) contrast(1.10);
  opacity:.96;
}
.iss-map-earth img{
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
}
.iss-map-night{z-index:1;pointer-events:none}
.iss-map-overlay{z-index:2;overflow:visible;pointer-events:none}
.iss-map-grid path{
  fill:none;
  stroke:rgba(177,205,229,.11);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.iss-footprint path{
  fill:rgba(91,165,224,.10);
  stroke:rgba(120,195,249,.52);
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
.iss-track path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.iss-track-past path{
  stroke:rgba(169,185,199,.42);
  stroke-width:1.2;
  stroke-dasharray:none;
}
.iss-track-future path{
  stroke:rgba(121,201,255,.92);
  stroke-width:1.7;
  stroke-dasharray:3.5 3.5;
}
.iss-marker-core{
  color:#9cc9ff;
  fill:currentColor;
  stroke:#07131e;
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 0 4px currentColor);
  animation:iss-live-dot-pulse 1.65s ease-in-out infinite;
}
@keyframes iss-live-dot-pulse{
  0%,100%{opacity:.58;transform:scale(.88)}
  50%{opacity:1;transform:scale(1.08)}
}
.iss-map-corner{
  position:absolute;
  z-index:3;
  bottom:3px;
  color:rgba(204,222,237,.43);
  font:500 5.5px/1 "JetBrains Mono",monospace;
  text-shadow:0 1px 2px #000;
  pointer-events:none;
}
.iss-map-corner--left{left:5px}
.iss-map-corner--right{right:5px}
.iss-map-legend{
  min-height:27px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 8px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#68798a;
  font:500 6px/1 "JetBrains Mono",monospace;
}
.iss-map-legend>span{display:flex;align-items:center;gap:4px;min-width:0}
.iss-legend-line{width:12px;height:0;border-top:1px solid}
.iss-legend-past{border-color:rgba(169,185,199,.56);border-top-style:dashed}
.iss-legend-future{border-color:rgba(121,201,255,.9)}
.iss-legend-area{
  width:8px;height:8px;
  border:1px solid rgba(120,195,249,.62);
  border-radius:50%;
  background:rgba(91,165,224,.12);
}
.iss-orbit-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:6px;
}
.iss-orbit-meta small{display:block;margin-bottom:4px;font-size:6px;letter-spacing:.08em}
.iss-orbit-meta strong{
  display:block;
  overflow:hidden;
  color:#b8cbe0;
  font:500 8px/1.15 "JetBrains Mono",monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.iss-orbit-meta strong.is-sunlit{color:#f1d9a0}
.iss-orbit-meta strong.is-eclipse{color:#a5bad0}
.iss-orbit-source{grid-column:1/-1}

@media (max-width:620px){
  .iss-orbit-dashboard{margin-top:9px;padding-top:9px}
  .iss-world-map{min-height:118px}
}

#app.dual-screen-control > .info-panel .iss-orbit-dashboard{
  margin-top:6px;
  padding-top:7px;
}
#app.dual-screen-control > .info-panel .iss-dashboard-heading{margin-bottom:6px}
#app.dual-screen-control > .info-panel .iss-telemetry-grid{gap:3px;margin-bottom:5px}
#app.dual-screen-control > .info-panel .iss-telemetry-grid>div,
#app.dual-screen-control > .info-panel .iss-orbit-meta>div{padding:5px 6px;border-radius:6px}
#app.dual-screen-control > .info-panel .iss-map-heading{min-height:24px;padding:0 6px}
#app.dual-screen-control > .info-panel .iss-map-legend{min-height:23px;padding:0 6px;gap:7px}
#app.dual-screen-control > .info-panel .iss-orbit-meta{gap:3px;margin-top:4px}
.info-panel.iss-dashboard-active > .data-grid{display:none}
.info-panel.iss-dashboard-active .iss-orbit-dashboard{margin-top:0;padding-top:2px;border-top:0}


/* 2026-09-26 — ISS dashboard refinements ---------------------------------- */
/* 400 px gives the orbital map its native 360 px drawing area after panel padding. */
@media (min-width:761px){
  #app:not(.dual-screen-control) > .info-panel{width:400px}
}

/* Camera selector: same typography as the Dashboard, SD/HD paired by camera port. */
.dashboard-context-tools .iss-camera-button-label,
.dashboard-context-tools .iss-camera-submenu > button{
  font-family:Manrope,system-ui,sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:0;
}
.dashboard-context-tools .iss-camera-submenu{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
}
.dashboard-context-tools .iss-camera-submenu > button{
  min-width:0;
  justify-content:flex-start;
  white-space:nowrap;
}
.dashboard-context-tools .iss-camera-submenu > .iss-camera-standard{
  grid-column:1/-1;
}


/* 2026-09-26 — Dashboard readability + stronger ISS day/night contrast -------- */
/* Keep the 400 px Dashboard compact, but never at the expense of legibility. */
@media (min-width:761px){
  #app:not(.dual-screen-control) > .info-panel .eyebrow{
    color:#9cc9ff;
    font-size:10px;
    font-weight:600;
    letter-spacing:.16em;
  }
  #app:not(.dual-screen-control) > .info-panel .panel-heading h2{font-size:18px}
  #app:not(.dual-screen-control) > .info-panel .data-grid small{font-size:9px}
  #app:not(.dual-screen-control) > .info-panel .data-grid strong{font-size:12px}
  #app:not(.dual-screen-control) > .info-panel .section-title{font-size:11px}
  #app:not(.dual-screen-control) > .info-panel .dashboard-context-tools .view-group-label,
  #app:not(.dual-screen-control) > .info-panel .dashboard-context-tools > button,
  #app:not(.dual-screen-control) > .info-panel .dashboard-context-tools .view-submenu button{font-size:11px}
}

/* Blue theme headings replace the former muted greys in the contextual Dashboard. */
.info-panel .iss-dashboard-heading small,
.info-panel .iss-map-heading,
.info-panel .iss-orbit-meta small,
.info-panel .iss-telemetry-grid small{color:#9cc9ff}
.info-panel .iss-dashboard-heading small{font-size:8.5px;letter-spacing:.11em}
.info-panel .iss-dashboard-heading strong{font-size:11.5px}
.info-panel .iss-telemetry-grid small{font-size:8px;letter-spacing:.10em}
.info-panel .iss-telemetry-grid strong{font-size:10.75px}
.info-panel .iss-map-heading{font-size:8px;letter-spacing:.10em}
.info-panel .iss-map-heading > span:first-child{color:#9cc9ff}
.info-panel .iss-map-heading > span:last-child{color:#7893ad;font-size:7px}
.info-panel .iss-map-legend{font-size:7px;color:#8194a8}
.info-panel .iss-orbit-meta small{font-size:7.5px;letter-spacing:.08em}
.info-panel .iss-orbit-meta strong{font-size:9.5px}

/* Day texture stays readable; the night canvas now owns the actual darkness. */
.info-panel .iss-map-earth{
  filter:saturate(.72) brightness(.78) contrast(1.10);
  opacity:.96;
}
.info-panel .iss-map-night{
  opacity:1;
}


/* 2026-09-26 — ISS dashboard: stronger Black Marble + value hierarchy -------- */
/* The geodesic horizon remains projection-correct; higher JS sampling only smooths it. */
.info-panel .iss-telemetry-grid > div,
.info-panel .iss-orbit-meta > div{
  text-align:center;
}
.info-panel .iss-telemetry-grid small{
  margin-bottom:6px;
  color:#9cc9ff;
  font-size:7.5px;
  font-weight:600;
  letter-spacing:.11em;
  opacity:.82;
}
.info-panel .iss-telemetry-grid strong{
  color:#f1f7fd;
  font-size:14px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.015em;
  text-align:center;
}
.info-panel .iss-orbit-meta small{
  margin-bottom:5px;
  color:#9cc9ff;
  font-size:7px;
  font-weight:600;
  opacity:.82;
}
.info-panel .iss-orbit-meta strong{
  color:#e9f3fc;
  font-size:11.5px;
  font-weight:700;
  line-height:1.08;
  text-align:center;
}
.info-panel .iss-orbit-meta strong.is-sunlit{color:#f7dfa6}
.info-panel .iss-orbit-meta strong.is-eclipse{color:#c6d8ea}


/* 2026-09-26 — Dashboard identity, ISS illumination badge, named retract handles */
.panel-heading-copy{min-width:0}
.dashboard-title-row{display:flex;align-items:center;gap:9px;min-width:0}
.dashboard-title-row h2{min-width:0}
.dashboard-phase-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:4px 8px 3px;
  border:1px solid rgba(156,201,255,.20);
  border-radius:999px;
  background:rgba(14,28,42,.72);
  color:#b9cee2;
  font:700 7.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.dashboard-phase-badge[hidden]{display:none!important}
.dashboard-phase-badge.is-day{
  border-color:rgba(247,216,143,.34);
  background:rgba(128,96,30,.16);
  color:#f7dfa6;
}
.dashboard-phase-badge.is-night{
  border-color:rgba(125,177,229,.30);
  background:rgba(37,73,110,.16);
  color:#c8ddf2;
}
.dashboard-phase-badge.is-day::before,
.dashboard-phase-badge.is-night::before{
  content:"";
  width:5px;
  height:5px;
  margin-right:5px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 7px currentColor;
}
.iss-orbit-meta .iss-orbit-source{grid-column:auto}

/* The old static "ORBIT TRACKING" heading was not a status value. The dashboard
   now uses this row only to identify the tracked catalogue object. */
.info-panel .iss-dashboard-heading strong{letter-spacing:.01em}

@media (min-width:901px) and (hover:hover) and (pointer:fine){
  /* Leave enough edge exposed for a readable name instead of an anonymous line. */
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel{
    transform:translateX(calc(-100% + 30px));
  }
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls{
    transform:translateX(calc(100% - 30px));
  }
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel{
    transform:translate(-50%,calc(100% - 30px));
  }

  #app:not(.mission-mode):not(.exploration-mode) > .info-panel::after,
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls::after,
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel::after{
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0;
    background:transparent;
    color:#9cc9ff;
    box-shadow:none;
    opacity:.86;
    pointer-events:none;
    font:600 8px/1 "JetBrains Mono",monospace;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:opacity .12s ease;
  }
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel::after{
    content:"Tableau de bord";
    right:0;
    top:50%;
    width:30px;
    height:168px;
    transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl;
    text-orientation:mixed;
  }
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls::after{
    content:"Astres";
    left:0;
    top:50%;
    width:30px;
    height:112px;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    text-orientation:mixed;
  }
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel::after{
    content:"Temps";
    left:50%;
    top:0;
    width:96px;
    height:30px;
    transform:translateX(-50%);
    writing-mode:horizontal-tb;
  }
  html[lang="en"] #app:not(.mission-mode):not(.exploration-mode) > .info-panel::after{content:"Dashboard"}
  html[lang="en"] #app:not(.mission-mode):not(.exploration-mode) > .view-controls::after{content:"Objects"}
  html[lang="en"] #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel::after{content:"Time"}

  /* Names are handles only: they disappear as soon as their panel opens. */
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel:hover::after,
  #app:not(.mission-mode):not(.exploration-mode) > .info-panel:focus-within::after,
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls:hover::after,
  #app:not(.mission-mode):not(.exploration-mode) > .view-controls:focus-within::after,
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel:hover::after,
  #app:not(.mission-mode):not(.exploration-mode) > .timeline-panel:focus-within::after{
    opacity:0;
  }
}


/* 2026-09-26 — ISS ±45 min track, sun event countdown, compact orbit source */
.dashboard-phase-badge.is-night{
  border-color:rgba(116,166,255,.56);
  background:rgba(46,78,152,.42);
  color:#c5dcff;
  box-shadow:0 0 12px rgba(78,125,222,.20),inset 0 0 10px rgba(126,171,255,.07);
}
.dashboard-sun-event{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:20px;
  padding:3px 7px 3px 5px;
  border:1px solid rgba(156,201,255,.16);
  border-radius:999px;
  background:rgba(9,20,31,.66);
  color:#b9cce0;
}
.dashboard-sun-event[hidden]{display:none!important}
.dashboard-sun-event-icon{
  width:17px;
  height:14px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-sun-event strong{
  color:inherit;
  font:700 7.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.02em;
  white-space:nowrap;
}
.dashboard-sun-event.is-sunrise{
  border-color:rgba(247,208,123,.30);
  background:rgba(112,79,21,.13);
  color:#f2d28e;
}
.dashboard-sun-event.is-sunset{
  border-color:rgba(135,171,231,.28);
  background:rgba(42,66,111,.18);
  color:#b8d0f1;
}
.dashboard-sun-event .sun-arrow-down{display:none}
.dashboard-sun-event.is-sunset .sun-arrow-up{display:none}
.dashboard-sun-event.is-sunset .sun-arrow-down{display:inline}

/* Source orbital now occupies the former orbital identifier slot; no redundant meta row below the map. */
.info-panel .iss-dashboard-heading strong[data-iss-source]{
  color:#e9f3fc;
  font:700 10.5px/1.1 "JetBrains Mono",monospace;
  letter-spacing:.015em;
}


/* 2026-09-26 — ISS centred orbital map + compact panel header ---------------- */
/* The world texture is repeated three times so the current ISS longitude can
   stay on the horizontal centre line without exposing an empty map edge. */
.info-panel .iss-map-earth{
  right:auto;
  width:300%;
  grid-template-columns:repeat(6,1fr);
  will-change:transform;
}

/* Next orbital sunrise/sunset is information, not a badge. */
.info-panel .iss-map-sun-event{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#9cc9ff;
  white-space:nowrap;
}
.info-panel .iss-map-sun-event[hidden]{display:none!important}
.info-panel .iss-map-sun-event-icon{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}
.info-panel .iss-map-sun-event strong{
  color:inherit;
  font:700 7.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.025em;
}
.info-panel .iss-map-sun-event.is-sunrise{color:#f0cf82}
.info-panel .iss-map-sun-event.is-sunset{color:#a9c9f4}
.info-panel .iss-map-sun-event .sun-direction-down{display:none}
.info-panel .iss-map-sun-event.is-sunset .sun-direction-up{display:none}
.info-panel .iss-map-sun-event.is-sunset .sun-direction-down{display:inline}

/* No redundant dashboard eyebrow/status LED inside the open panel. */
.info-panel .panel-heading-copy>.eyebrow,
.info-panel>.panel-heading>.status-dot{display:none!important}

/* 2026-09-26 — ISS title status, illumination map header, mission lifetime ---- */
.info-panel .panel-heading-copy{flex:1 1 auto;width:100%}
.info-panel .dashboard-title-row{width:100%}
.dashboard-title-row .dashboard-title-status{
  margin-left:auto;
}
.iss-live-badge[hidden]{display:none!important}

/* Launch date + elapsed mission time are first-class dashboard values. */
.info-panel .iss-mission-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin:0 0 9px;
}
.info-panel .iss-mission-grid>div{
  min-width:0;
  padding:7px 8px 8px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:8px;
  background:rgba(1,7,13,.26);
  text-align:center;
}
.info-panel .iss-mission-grid small{
  display:block;
  margin-bottom:5px;
  color:#9cc9ff;
  font:600 7.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.info-panel .iss-mission-grid strong{
  display:block;
  color:#eaf4fd;
  font:700 9.5px/1.25 "JetBrains Mono",monospace;
  white-space:normal;
}

/* The day/night badge now labels the orbital map itself. Keep its own palette
   stronger than the generic first-child heading rule. */
.info-panel .iss-map-heading>.dashboard-phase-badge.is-day{
  color:#f7dfa6;
  border-color:rgba(247,216,143,.34);
  background:rgba(128,96,30,.16);
}
.info-panel .iss-map-heading>.dashboard-phase-badge.is-night{
  color:#c5dcff;
  border-color:rgba(116,166,255,.56);
  background:rgba(46,78,152,.42);
}

/* Sunrise / sunset stays unboxed, but uses the exact day/night colour language. */
.info-panel .iss-map-sun-event.is-sunrise{
  color:#f7dfa6;
  text-shadow:0 0 8px rgba(247,216,143,.18);
}
.info-panel .iss-map-sun-event.is-sunset{
  color:#c5dcff;
  text-shadow:0 0 8px rgba(116,166,255,.20);
}

/* 2026-09-26 — ISS orbital telemetry charts --------------------------------- */
.info-panel .iss-orbital-telemetry{
  display:grid;
  gap:7px;
  margin-top:10px;
  padding:8px;
  border:1px solid rgba(125,174,218,.12);
  border-radius:10px;
  background:rgba(0,5,10,.30);
}
.info-panel .iss-orbital-telemetry-title{
  color:#9cc9ff;
  font:600 8px/1 "JetBrains Mono",monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.info-panel .iss-chart-card{
  overflow:hidden;
  border:1px solid rgba(125,174,218,.12);
  border-radius:9px;
  background:rgba(1,7,13,.32);
}
.info-panel .iss-chart-heading{
  min-height:27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 8px;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.info-panel .iss-chart-heading span{
  color:#9cc9ff;
  font:600 7.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.10em;
}
.info-panel .iss-chart-heading strong{
  color:#f1f7fd;
  font:700 9px/1 "JetBrains Mono",monospace;
  letter-spacing:.01em;
}
.info-panel .iss-mini-chart{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:360/112;
  background:linear-gradient(180deg,rgba(17,34,49,.16),rgba(4,11,18,.06));
}
.info-panel .iss-chart-grid path{
  fill:none;
  stroke:rgba(142,179,210,.10);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.info-panel .iss-chart-line{
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.info-panel .iss-chart-line--altitude{stroke:#f0bd4f}
.info-panel .iss-chart-line--speed{stroke:#b69bff}
.info-panel .iss-chart-dot{stroke:#06111b;stroke-width:1.4;vector-effect:non-scaling-stroke}
.info-panel .iss-chart-dot--altitude{fill:#f0bd4f}
.info-panel .iss-chart-dot--speed{fill:#b69bff}
.info-panel .iss-chart-axis text{
  fill:#60768d;
  font:500 6px/1 "JetBrains Mono",monospace;
  letter-spacing:.01em;
}
.info-panel .iss-chart-axis-x text{fill:#71879d}

/* Specificity fix: the generic map-heading last-child rule previously won
   against the sunrise/sunset state classes, so the event kept the muted grey. */
.info-panel .iss-map-heading > .iss-map-sun-event.is-sunrise{
  color:#f7dfa6;
  text-shadow:0 0 8px rgba(247,216,143,.18);
}
.info-panel .iss-map-heading > .iss-map-sun-event.is-sunset{
  color:#c5dcff;
  text-shadow:0 0 8px rgba(116,166,255,.20);
}

/* 2026-09-26 — ISS orbital map: subtle telemetry scan sweep ----------------- */
.info-panel .iss-world-map::after{
  content:"";
  position:absolute;
  z-index:4;
  top:-32%;
  left:0;
  width:100%;
  height:30%;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(
      to bottom,
      rgba(156,201,255,0) 0%,
      rgba(156,201,255,.018) 24%,
      rgba(156,201,255,.065) 43%,
      rgba(156,201,255,.16) 49%,
      rgba(213,233,255,.28) 50%,
      rgba(156,201,255,.16) 51%,
      rgba(156,201,255,.065) 57%,
      rgba(156,201,255,.018) 76%,
      rgba(156,201,255,0) 100%
    );
  mix-blend-mode:screen;
  filter:blur(.15px);
  transform:translate3d(0,0,0);
  will-change:transform;
  animation:iss-orbital-map-scan 6.5s linear infinite;
}

@keyframes iss-orbital-map-scan{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(0,490%,0)}
}

@media (prefers-reduced-motion: reduce){
  .iss-marker-core,
  .iss-live-badge.is-live::before{
    animation:none;
    opacity:1;
    transform:none;
  }
  .info-panel .iss-world-map::after{
    display:none;
    animation:none;
  }
}


/* 2026-09-26 — Orbiter Dashboard colour contract ----------------------------
   Only these elements inherit the orbiter accent:
   1. orbital track, 2. map dot, 3. horizon/footprint when present,
   4. legend below the map, 5. primary accent labels.
   Everything else deliberately keeps the common Dashboard styling. */
.info-panel .orbiter-dashboard{
  --orbiter-accent:#9cc9ff;
  --orbiter-accent-rgb:156,201,255;
}
.info-panel #hubble-orbit-dashboard{
  --orbiter-accent:#cc44ff;
  --orbiter-accent-rgb:204,68,255;
}

/* 1 — Orbital track */
.info-panel .orbiter-dashboard .iss-track-past path{
  stroke:rgba(var(--orbiter-accent-rgb),.42);
}
.info-panel .orbiter-dashboard .iss-track-future path{
  stroke:var(--orbiter-accent);
}

/* 2 — Orbiter dot */
.info-panel .orbiter-dashboard .iss-marker-core{
  color:var(--orbiter-accent);
}

/* 3 — Horizon / footprint when that orbiter exposes one */
.info-panel .orbiter-dashboard .iss-footprint path{
  fill:rgba(var(--orbiter-accent-rgb),.10);
  stroke:rgba(var(--orbiter-accent-rgb),.60);
}

/* 4 — Legend below the orbital map */
/* Legend text stays on the shared neutral palette. Only its graphic traces
   inherit the orbiter theme color. */
.info-panel .orbiter-dashboard .iss-map-legend{
  color:#8194a8;
}
.info-panel .orbiter-dashboard .iss-legend-past{
  border-color:rgba(var(--orbiter-accent-rgb),.52);
}
.info-panel .orbiter-dashboard .iss-legend-future{
  border-color:var(--orbiter-accent);
}
.info-panel .orbiter-dashboard .iss-legend-area{
  border-color:rgba(var(--orbiter-accent-rgb),.62);
  background:rgba(var(--orbiter-accent-rgb),.12);
}

/* 5 — Primary Dashboard accent labels */
.info-panel .orbiter-dashboard .iss-dashboard-heading small,
.info-panel .orbiter-dashboard .iss-mission-grid small,
.info-panel .orbiter-dashboard .iss-telemetry-grid small,
.info-panel .orbiter-dashboard .iss-orbit-meta small,
.info-panel .orbiter-dashboard .iss-orbital-telemetry-title,
.info-panel .orbiter-dashboard .iss-chart-heading span{
  color:var(--orbiter-accent);
}


/* 2026-09-26 — STELLA Eyes now belongs to the Astres navigation. */
.view-controls .spacecraft-view-group .view-submenu > .inspection-light-button{
  margin-top:4px;
  border-top:1px solid rgba(255,255,255,.07);
  border-radius:0 0 9px 9px;
}
.view-controls .spacecraft-view-group .view-submenu > .inspection-light-button[hidden]{
  display:none!important;
}

/* 2026-09-26 — Unified collapsed desktop panels ---------------------------
   Dashboard / Navigation / Simulation expose only their named handle while
   retracted. The Navigation sheet shares the Dashboard vertical budget. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls {
    box-sizing: border-box;
    max-height: calc(100vh - 112px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  /* Closed state: no panel contents may leak into the 30 px handle strip. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:not(.is-selection-open):not(:hover):not(:focus-within),
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:not(:hover):not(:focus-within),
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:not(:hover):not(:focus-within) {
    overflow: hidden;
  }

  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:not(.is-selection-open):not(:hover):not(:focus-within) > :not(.dashboard-panel-toggle),
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:not(:hover):not(:focus-within) > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:not(:hover):not(:focus-within) > * {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Open state restores each panel's normal content and scrolling. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:hover > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:focus-within > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:hover > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:focus-within > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:hover > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:focus-within > * {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:hover,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:focus-within {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:hover,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:focus-within {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Collapsed labels: one vocabulary and one visual language. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls::after {
    content: "Navigation";
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::after {
    content: "Simulation";
  }

  html[lang="en"] #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls::after {
    content: "Navigation";
  }
  html[lang="en"] #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::after {
    content: "Simulation";
  }
}


/* 2026-09-26 — STELLA Eyes promoted to the persistent top toolbar --------- */
.stella-eyes-toolbar-button{
  color:#68717d;
  cursor:not-allowed;
  opacity:.58;
}
.stella-eyes-toolbar-icon{
  width:20px;
  height:20px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.stella-eyes-toolbar-icon .stella-eyes-core{
  fill:currentColor;
  stroke:none;
}
.stella-eyes-toolbar-button.available{
  color:#e7bd69;
  cursor:pointer;
  opacity:1;
  border-color:rgba(255,205,118,.30);
  background:rgba(64,45,15,.22);
  box-shadow:inset 0 0 0 1px rgba(255,205,118,.055),0 0 12px rgba(255,177,67,.055);
}
.stella-eyes-toolbar-button.available:hover,
.stella-eyes-toolbar-button.available:focus-visible{
  color:#fff0c9;
  border-color:rgba(255,215,143,.62);
  background:rgba(82,55,15,.36);
  box-shadow:0 0 15px rgba(255,184,73,.15),inset 0 0 10px rgba(255,215,143,.08);
}
.stella-eyes-toolbar-button.active{
  color:#ffd27f;
  border-color:rgba(255,218,151,.76);
  background:rgba(105,69,15,.42);
  box-shadow:0 0 20px rgba(255,177,67,.24),inset 0 0 13px rgba(255,221,160,.13);
}
.stella-eyes-toolbar-button.active .stella-eyes-core{
  filter:drop-shadow(0 0 3px currentColor);
}
.stella-eyes-toolbar-button:disabled{
  pointer-events:auto;
}
/* The former Navigation placement is intentionally retired. */
.view-controls .spacecraft-view-group .view-submenu > .inspection-light-button{
  display:none!important;
}


/* 2026-09-26 — Orbiter map status separated from the map container ---------- */
.info-panel .orbiter-dashboard .iss-map-status-row{
  min-height:26px;
  margin:0 2px 5px;
  padding:0;
  border:0;
  background:transparent;
}
.info-panel .orbiter-dashboard .iss-map-card{
  overflow:hidden;
}
/* Orbital maps are intentionally self-explanatory: no persistent legend. */
.info-panel .orbiter-dashboard .iss-map-legend{
  display:none!important;
}




/* 2026-09-26 — Unified Orbiter Telemetry container ------------------------ */
.info-panel .orbiter-dashboard .iss-map-card{
  margin-bottom:10px;
}
.info-panel .orbiter-dashboard .iss-orbital-telemetry .iss-mission-grid,
.info-panel .orbiter-dashboard .iss-orbital-telemetry .iss-position-grid{
  margin:0;
}
.info-panel .orbiter-dashboard .iss-orbital-telemetry .iss-mission-grid{
  margin-top:1px;
}
.info-panel .orbiter-dashboard .iss-orbital-telemetry .iss-position-grid{
  margin-bottom:1px;
}
.info-panel .orbiter-dashboard .iss-orbital-telemetry .iss-mission-grid>div,
.info-panel .orbiter-dashboard .iss-orbital-telemetry .iss-position-grid>div{
  background:rgba(1,7,13,.18);
}


/* 2026-09-26 — Orbiter telemetry: flat container + unified value hierarchy -- */
.info-panel .orbiter-dashboard .iss-orbital-telemetry{
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
}
.info-panel .orbiter-dashboard .iss-chart-heading strong{
  font-size:14px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.015em;
}

/* 2026-09-26 — Orbiter charts: cleaner heading / tighter plot spacing ------- */
.info-panel .orbiter-dashboard .iss-chart-heading{
  border-bottom:none;
}
.info-panel .orbiter-dashboard .iss-mini-chart{
  margin-top:-5px;
}


/* 2026-09-26 — ISS Dashboard camera mode ----------------------------------- */
.dashboard-camera-entry{
  flex:0 0 auto;
  min-height:24px;
  padding:4px 8px;
  border:1px solid rgba(156,201,255,.18);
  border-radius:7px;
  background:rgba(20,38,55,.54);
  color:#9cc9ff;
  font:700 8px/1 "JetBrains Mono",monospace;
  letter-spacing:.04em;
  cursor:pointer;
}
.dashboard-camera-entry:hover:not(:disabled),
.dashboard-camera-entry:focus-visible{
  border-color:rgba(156,201,255,.42);
  background:rgba(39,74,105,.62);
  color:#d9edff;
}
.dashboard-camera-entry[aria-expanded="true"],
.dashboard-camera-entry.active{
  border-color:rgba(156,201,255,.48);
  background:rgba(56,103,145,.42);
  color:#eef8ff;
}
.dashboard-camera-entry:disabled{
  opacity:.40;
  cursor:default;
}
.dashboard-camera-entry[hidden]{display:none!important}

.info-panel.iss-camera-dashboard-mode > #iss-orbit-dashboard{display:none!important}
.info-panel.iss-camera-dashboard-mode > #hubble-orbit-dashboard{display:none!important}
.info-panel.iss-camera-dashboard-mode > .data-grid{display:none!important}
.iss-camera-dashboard-panel[hidden]{display:none!important}
.iss-camera-dashboard-panel{
  display:grid;
  gap:12px;
  margin-top:0;
  padding-top:2px;
}
.iss-camera-dashboard-header{
  display:grid;
  gap:10px;
}
.iss-camera-dashboard-header>strong{
  color:#9cc9ff;
  font:700 9px/1 "JetBrains Mono",monospace;
  letter-spacing:.12em;
}
.iss-camera-dashboard-back{
  width:max-content;
  max-width:100%;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid rgba(156,201,255,.14);
  border-radius:8px;
  background:rgba(18,35,51,.48);
  color:#b9cee2;
  font:600 9px/1 "JetBrains Mono",monospace;
  cursor:pointer;
}
.iss-camera-dashboard-back>span:first-child{font-size:16px;line-height:.7;color:#9cc9ff}
.iss-camera-dashboard-back:hover,
.iss-camera-dashboard-back:focus-visible{
  border-color:rgba(156,201,255,.36);
  background:rgba(34,66,94,.55);
  color:#eef8ff;
}
.iss-camera-dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.iss-camera-dashboard-grid>button,
.iss-camera-dashboard-actions>button{
  min-width:0;
  min-height:38px;
  padding:8px 9px;
  border:1px solid rgba(135,182,224,.10);
  border-radius:9px;
  background:rgba(20,36,53,.46);
  color:#9fb2c5;
  font:600 10px/1.15 "JetBrains Mono",monospace;
  cursor:pointer;
}
.iss-camera-dashboard-grid>.iss-camera-standard{
  grid-column:1/-1;
}
.iss-camera-dashboard-grid>button:hover:not(:disabled),
.iss-camera-dashboard-actions>button:hover:not(:disabled){
  border-color:rgba(123,198,255,.27);
  background:rgba(39,75,106,.45);
  color:#dceeff;
}
.iss-camera-dashboard-grid>button.active{
  color:#f0f8ff;
  border-color:rgba(123,198,255,.42);
  background:rgba(48,101,149,.30);
}
.iss-camera-dashboard-grid>button:disabled,
.iss-camera-dashboard-actions>button:disabled{
  opacity:.38;
  cursor:default;
}
.iss-camera-dashboard-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding-top:4px;
  border-top:1px solid rgba(150,190,225,.08);
}
.iss-camera-dashboard-actions>button[hidden]{display:none!important}
.iss-camera-dashboard-actions:not(:has(> button:not([hidden]))){display:none!important}
.iss-camera-dashboard-actions>button.active{
  color:#f5df9e;
  border-color:rgba(230,194,102,.28);
  background:rgba(112,84,28,.20);
}


/* 2026-09-26 — Dashboard/camera separators cleanup ------------------------- */
/* The contextual tools wrapper contains hidden camera groups; :empty cannot
   detect that state, so its top rule used to leave a stray line below the
   orbiter Dashboard and a second line below the ISS camera controls. */
.info-panel.iss-dashboard-active > .dashboard-context-tools:not(:has(> :not([hidden]))){
  display:none!important;
}


/* 2026-09-26 — ISS Dashboard / Cameras segmented mode selector ------------- */
.iss-dashboard-mode-switch{
  flex:0 0 auto;
  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(156,201,255,.16);
  border-radius:8px;
  background:rgba(10,24,36,.46);
}
.iss-dashboard-mode-switch[hidden]{display:none!important}
.iss-dashboard-mode-button{
  min-height:24px;
  padding:5px 8px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#73899e;
  font:700 7.8px/1 "JetBrains Mono",monospace;
  letter-spacing:.025em;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.iss-dashboard-mode-button + .iss-dashboard-mode-button{
  border-left:1px solid rgba(156,201,255,.12);
}
.iss-dashboard-mode-button:hover:not(:disabled),
.iss-dashboard-mode-button:focus-visible{
  background:rgba(39,74,105,.34);
  color:#cce6fb;
}
.iss-dashboard-mode-button.is-active{
  background:rgba(66,117,159,.38);
  color:#eef8ff;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.16);
}
.iss-dashboard-mode-button:disabled{
  color:#4c5b69;
  background:rgba(10,18,27,.20);
  cursor:default;
}
.iss-dashboard-mode-button:disabled.is-active{
  color:#8999a8;
}
/* The segmented switch replaces the old standalone Camera and Back buttons. */
.dashboard-camera-entry,
.iss-camera-dashboard-back{display:none!important}

/* 2026-09-26 — Dual Screen layout parity v6 ---------------------------------
   The controller reuses the exact same Dashboard and Navigation components as
   single-screen. Dual Screen now changes only their workstation placement:
   Debug at left, Dashboard in the centre, Navigation at right. Studio overlays
   the centre workspace when opened instead of displacing the Dashboard. */
@media (min-width: 901px) {
  body.dual-screen-control-ui {
    --dual-debug-left-w: clamp(286px, 20vw, 340px);
    --dual-nav-right-w: 140px;
    --dual-centre-gap: 22px;
    --dual-work-top: 92px;
    --dual-work-bottom: 164px;
  }

  /* CENTRE — Dashboard: same component, dimensions and visual density as the
     newly unified single-screen Dashboard. Only its anchoring changes. */
  #app.dual-screen-control > .info-panel {
    z-index: 16 !important;
    top: var(--dual-work-top) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 400px !important;
    height: auto !important;
    max-width: calc(100vw - var(--dual-debug-left-w) - var(--dual-nav-right-w) - 2 * var(--dual-centre-gap)) !important;
    max-height: calc(100vh - var(--dual-work-top) - var(--dual-work-bottom)) !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-width: 1px !important;
    border-radius: 18px !important;
    transform: translateX(-50%) !important;
    animation: none !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035) !important;
  }
  #app.dual-screen-control > .info-panel::after { display: none !important; }
  #app.dual-screen-control > .info-panel .panel-heading {
    position: static !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #app.dual-screen-control > .info-panel .panel-heading h2 {
    font-size: 18px !important;
    font-weight: 500 !important;
  }
  #app.dual-screen-control > .info-panel .data-grid {
    gap: 13px 12px !important;
    padding: 15px 2px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #app.dual-screen-control > .info-panel .data-grid > div {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .data-grid small {
    margin-bottom: 4px !important;
    font-size: 9px !important;
  }
  #app.dual-screen-control > .info-panel .data-grid strong {
    font-size: 12px !important;
  }
  #app.dual-screen-control > .info-panel .section-block {
    margin: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .switch-row,
  #app.dual-screen-control > .info-panel .audio-volume-row {
    min-height: initial !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Undo the former Dual Screen compact ISS treatment: the orbital Dashboard
     now has exactly the same spacing and map/telemetry density as single-screen. */
  #app.dual-screen-control > .info-panel .iss-orbit-dashboard {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
  #app.dual-screen-control > .info-panel.iss-dashboard-active .iss-orbit-dashboard {
    margin-top: 0 !important;
    padding-top: 2px !important;
    border-top: 0 !important;
  }
  #app.dual-screen-control > .info-panel .iss-dashboard-heading { margin-bottom: 10px !important; }
  #app.dual-screen-control > .info-panel .iss-telemetry-grid { gap: 5px !important; margin-bottom: 9px !important; }
  #app.dual-screen-control > .info-panel .iss-telemetry-grid > div,
  #app.dual-screen-control > .info-panel .iss-orbit-meta > div {
    padding: 7px 8px !important;
    border-radius: 8px !important;
  }
  #app.dual-screen-control > .info-panel .iss-map-heading { min-height: 29px !important; padding: 0 8px !important; }
  #app.dual-screen-control > .info-panel .iss-map-legend { min-height: 27px !important; padding: 0 8px !important; gap: 10px !important; }
  #app.dual-screen-control > .info-panel .iss-orbit-meta { gap: 5px !important; margin-top: 6px !important; }

  /* LEFT — Debug engineering bay. The selector and inspector content are kept
     in a single internal column, as requested. */
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
    z-index: 18 !important;
    top: var(--dual-work-top) !important;
    left: 0 !important;
    right: auto !important;
    bottom: 12px !important;
    width: var(--dual-debug-left-w) !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-width: 1px 1px 1px 0 !important;
    border-radius: 0 16px 16px 0 !important;
    transform: none !important;
    box-shadow: 0 20px 58px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__bar {
    min-height: 58px !important;
    grid-template-columns: minmax(0,1fr) 10px !important;
    padding: 9px 12px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tools {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    max-height: 42% !important;
    padding: 7px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-bottom: 1px solid rgba(148,192,235,.13) !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 31px !important;
    height: 31px !important;
    justify-content: flex-start !important;
    padding: 0 9px !important;
    text-align: left !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__tool-copy strong {
    text-align: left !important;
    font-size: 7.6px !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .debug-toolbar__viewport {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .lens-flare-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar .solar-visual-lab__body,
  #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar #voyager-debug-panel {
    grid-template-columns: 1fr !important;
  }

  /* RIGHT — Navigation: same width, typography and inline accordion behaviour
     as the current single-screen Navigation menu. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Studio owns the centre workspace while open. Its z-index is deliberately
     above the Dashboard, while Debug and Navigation remain independently usable. */
  body.dual-screen-control-ui .media-studio { z-index: 12000 !important; }
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    top: var(--dual-work-top) !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--dual-work-bottom) !important;
    width: min(900px, calc(100vw - var(--dual-debug-left-w) - var(--dual-nav-right-w) - 2 * var(--dual-centre-gap))) !important;
    max-width: 900px !important;
    max-height: none !important;
    transform: translateX(-50%) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.04) !important;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  body.dual-screen-control-ui {
    --dual-debug-left-w: 270px;
    --dual-nav-right-w: 140px;
    --dual-centre-gap: 14px;
  }
  #app.dual-screen-control > .info-panel {
    width: min(400px, calc(100vw - var(--dual-debug-left-w) - var(--dual-nav-right-w) - 2 * var(--dual-centre-gap))) !important;
  }
}

/* 2026-09-26 — Dual Screen Navigation = Single Screen Navigation v7 ---------
   One component, one interaction model. In Dual Screen the Astres/Navigation
   panel keeps the exact Single Screen geometry, fly-out submenus and retractable
   edge handle. Only the rest of the Dual Screen workstation layout differs. */
@media (min-width: 901px) {
  

  
  
  
  

  
  
  
  
  
  
  

  /* Exact Single Screen fly-out submenu: no Dual Screen inline accordion. */
  
  
  
  
  
  

  
  
  

  /* Same retractable right-edge behaviour as the current Single Screen menu. */
  @media (hover: hover) and (pointer: fine) {
    
    
    
    
    
    
    
    
  }
}

/* Dual Navigation final specificity cleanup: retire old textless/rail states so
   the component is visually identical to the Single Screen source component. */
@media (min-width: 901px) {
  
  
  
  
  
}

/* 2026-09-26 — Dual Screen workspace v8 ------------------------------------
   The primary display uses the live Single Screen components. Dual Screen only
   changes their workstation placement and density; it no longer owns parallel
   Dashboard/Navigation implementations. */
@media (min-width: 901px) {
  body.dual-screen-control-ui {
    --dual-left-width: 400px;
    --dual-nav-width: 140px;
    --dual-work-gap: 12px;
    --dual-work-top: 92px;
    --dual-edge-bottom: 12px;
    --dual-timeline-clearance: 170px;
  }

  /* LEFT — one permanent 400 px control bay with Settings / Devtool modes. */
  body.dual-screen-control-ui #interface-settings-panel {
    z-index: 60 !important;
    top: var(--dual-work-top) !important;
    left: 0 !important;
    right: auto !important;
    bottom: var(--dual-edge-bottom) !important;
    width: var(--dual-left-width) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-width: 1px 1px 1px 0 !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 0 20px 58px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035) !important;
  }
  body.dual-screen-control-ui #interface-settings-panel[hidden] { display: flex !important; }
  body.dual-screen-control-ui #interface-settings-panel .interface-settings-panel__heading {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 15px 18px 13px !important;
    border-bottom: 1px solid rgba(150,190,225,.12) !important;
  }
  body.dual-screen-control-ui #interface-settings-panel .interface-settings-panel__title {
    min-width: 0;
  }
  body.dual-screen-control-ui #interface-settings-panel .interface-settings-panel__title .eyebrow {
    margin: 0 0 3px !important;
    color: #9cc9ff !important;
    font-size: 8px !important;
  }
  body.dual-screen-control-ui #interface-settings-panel .interface-settings-panel__title h2 {
    margin: 0 !important;
    font-size: 17px !important;
  }
  body.dual-screen-control-ui #interface-settings-close { display: none !important; }
  body.dual-screen-control-ui #interface-settings-panel .interface-settings-content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 0 18px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
  body.dual-screen-control-ui #interface-settings-panel[data-dual-settings-mode="devtool"] .interface-settings-content {
    display: none !important;
  }

  .dual-settings-mode-switch {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid rgba(156,201,255,.16);
    border-radius: 8px;
    background: rgba(10,24,36,.46);
  }
  .dual-settings-mode-switch[hidden] { display: none !important; }
  .dual-settings-mode-switch > button {
    min-height: 30px;
    padding: 6px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #73899e;
    font: 700 8px/1 "JetBrains Mono", monospace;
    letter-spacing: .025em;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
  }
  .dual-settings-mode-switch > button + button { border-left: 1px solid rgba(156,201,255,.12); }
  .dual-settings-mode-switch > button:hover,
  .dual-settings-mode-switch > button:focus-visible {
    background: rgba(39,74,105,.34);
    color: #cce6fb;
  }
  .dual-settings-mode-switch > button.is-active {
    background: rgba(66,117,159,.38);
    color: #eef8ff;
    box-shadow: inset 0 0 0 1px rgba(156,201,255,.16);
  }

  /* Devtool occupies the same 400 px bay, underneath the persistent selector. */
  body.dual-screen-control-ui:not(.dual-settings-devtool) #app.dual-screen-control > #debug-toolbar {
    display: none !important;
  }
  body.dual-screen-control-ui.dual-settings-devtool #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
    z-index: 61 !important;
    top: calc(var(--dual-work-top) + 103px) !important;
    left: 0 !important;
    right: auto !important;
    bottom: var(--dual-edge-bottom) !important;
    width: var(--dual-left-width) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 0 18px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .debug-toolbar__bar {
    flex: 0 0 auto !important;
    min-height: 52px !important;
    grid-template-columns: minmax(0,1fr) 10px !important;
    padding: 8px 14px !important;
    border-bottom: 1px solid rgba(150,190,225,.10) !important;
    cursor: default !important;
  }
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .debug-toolbar__grip,
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .debug-toolbar__collapse { display: none !important; }
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .debug-toolbar__content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .debug-toolbar__tools {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    max-height: 42% !important;
    padding: 7px 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .debug-toolbar__tool {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
  }
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .debug-toolbar__viewport {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    padding: 10px 12px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .lens-flare-lab__body,
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar .solar-visual-lab__body,
  body.dual-screen-control-ui.dual-settings-devtool #debug-toolbar #voyager-debug-panel {
    grid-template-columns: 1fr !important;
  }

  /* CENTRE — the actual Single Screen Dashboard fills every remaining pixel. */
  #app.dual-screen-control > .info-panel {
    z-index: 16 !important;
    top: var(--dual-work-top) !important;
    left: calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
    right: calc(var(--dual-nav-width) + var(--dual-work-gap)) !important;
    bottom: var(--dual-timeline-clearance) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-width: 1px !important;
    border-radius: 18px !important;
    transform: none !important;
    animation: none !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035) !important;
  }
  #app.dual-screen-control > .info-panel::after { display: none !important; content: none !important; }

  /* Reset obsolete compact Dual Screen Dashboard styling back to the Single
     Screen component. Only font density is reduced slightly for the wide bay. */
  #app.dual-screen-control > .info-panel .panel-heading {
    position: static !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #app.dual-screen-control > .info-panel .panel-heading h2 { font-size: 17px !important; font-weight: 500 !important; }
  #app.dual-screen-control > .info-panel .eyebrow { font-size: 8px !important; }
  #app.dual-screen-control > .info-panel .data-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 13px 12px !important;
    padding: 15px 2px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #app.dual-screen-control > .info-panel .data-grid > div {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .data-grid small { margin-bottom: 4px !important; font-size: 8px !important; }
  #app.dual-screen-control > .info-panel .data-grid strong { font-size: 11px !important; }
  #app.dual-screen-control > .info-panel .section-block {
    margin: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .section-title { font-size: 10px !important; }
  #app.dual-screen-control > .info-panel .switch-row,
  #app.dual-screen-control > .info-panel .audio-volume-row {
    min-height: initial !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #app.dual-screen-control > .info-panel .dashboard-context-tools .view-group-label,
  #app.dual-screen-control > .info-panel .dashboard-context-tools > button,
  #app.dual-screen-control > .info-panel .dashboard-context-tools .view-submenu button { font-size: 10px !important; }

  /* ISS/Hubble content is the same DOM and same visual hierarchy as Single.
     The only Dual adaptation is the two orbital charts sharing one row. */
  #app.dual-screen-control > .info-panel .iss-orbit-dashboard {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }
  #app.dual-screen-control > .info-panel.iss-dashboard-active .iss-orbit-dashboard {
    margin-top: 0 !important;
    padding-top: 2px !important;
    border-top: 0 !important;
  }
  #app.dual-screen-control > .info-panel .iss-dashboard-heading { margin-bottom: 10px !important; }
  #app.dual-screen-control > .info-panel .iss-telemetry-grid { gap: 5px !important; margin-bottom: 9px !important; }
  #app.dual-screen-control > .info-panel .iss-telemetry-grid > div,
  #app.dual-screen-control > .info-panel .iss-orbit-meta > div {
    padding: 7px 8px !important;
    border-radius: 8px !important;
  }
  #app.dual-screen-control > .info-panel .iss-map-heading { min-height: 29px !important; padding: 0 8px !important; }
  #app.dual-screen-control > .info-panel .iss-map-legend { min-height: 27px !important; padding: 0 8px !important; gap: 10px !important; }
  #app.dual-screen-control > .info-panel .iss-orbit-meta { gap: 5px !important; margin-top: 6px !important; }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbital-telemetry {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbital-telemetry > .iss-mission-grid,
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbital-telemetry > .iss-position-grid {
    grid-column: 1 / -1 !important;
  }
  #app.dual-screen-control > .info-panel .iss-chart-heading span { font-size: 7px !important; }
  #app.dual-screen-control > .info-panel .iss-chart-heading strong { font-size: 12px !important; }
  #app.dual-screen-control > .info-panel .iss-chart-axis text { font-size: 5.5px !important; }

  /* RIGHT — exactly the Single Screen Navigation component, permanently open. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Timeline and Media Studio use the exact same central workspace as Dashboard. */
  #app.dual-screen-control > .timeline-panel {
    left: calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
    right: calc(var(--dual-nav-width) + var(--dual-work-gap)) !important;
    bottom: var(--dual-edge-bottom) !important;
    width: auto !important;
    transform: none !important;
  }
  body.dual-screen-control-ui .media-studio { z-index: 12000 !important; }
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    top: var(--dual-work-top) !important;
    left: calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
    right: calc(var(--dual-nav-width) + var(--dual-work-gap)) !important;
    bottom: var(--dual-timeline-clearance) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.04) !important;
  }
}


/* Dual Screen must never inherit the retract transforms used by the Single
   Screen edge handles. These selectors intentionally match their specificity. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #app.dual-screen-control:not(.mission-mode):not(.exploration-mode) > .info-panel,
  #app.dual-screen-control:not(.mission-mode):not(.exploration-mode) > .timeline-panel {
    transform: none !important;
  }
  #app.dual-screen-control:not(.mission-mode):not(.exploration-mode) > .info-panel::after,
  #app.dual-screen-control:not(.mission-mode):not(.exploration-mode) > .timeline-panel::after {
    display: none !important;
    content: none !important;
  }
  
  
}

/* 2026-09-26 — Dual Screen parity cleanup ----------------------------------
   The Dual Screen reuses the current Single Screen Navigation and Orbiter
   Dashboard. Only workstation placement/density differ. */
.info-panel .iss-orbit-main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:9px;
}
.info-panel .iss-orbit-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
}
.info-panel .iss-orbit-summary-metric{
  min-width:0;
  padding:7px 8px 8px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:8px;
  background:rgba(1,7,13,.26);
}
.info-panel .iss-orbit-summary-metric small{
  display:block;
  margin-bottom:5px;
  color:var(--orbiter-accent,#9cc9ff);
  font:600 7.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.info-panel .iss-orbit-summary-metric strong{
  display:block;
  min-width:0;
  overflow:hidden;
  color:#eaf4fd;
  font:700 9.5px/1.25 "JetBrains Mono",monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (min-width:761px){
  /* Exact current Single Screen accordion behaviour, without the retract state. */
  #app.dual-screen-control>.view-controls .view-group{height:auto}
  #app.dual-screen-control>.view-controls .view-submenu{
    position:static!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-height:0;
    margin:0!important;
    padding:0 5px!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-4px)!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    background:rgba(3,9,15,.40)!important;
    box-shadow:none!important;
    transition:max-height .3s ease,opacity .18s ease,transform .22s ease,margin .22s ease,padding .22s ease,visibility 0s linear .3s!important;
  }
  #app.dual-screen-control>.view-controls .view-submenu::after{display:none!important}
  #app.dual-screen-control>.view-controls .view-group.expanded .view-submenu{
    max-height:520px;
    margin:5px 0 1px!important;
    padding:5px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
    border-color:rgba(132,181,225,.10)!important;
    transition-delay:0s!important;
  }
  #app.dual-screen-control>.view-controls .view-submenu>button{
    width:100%!important;
    min-height:34px;
    padding:6px 8px!important;
  }
  #app.dual-screen-control>.view-controls .view-group.expanded .view-group-chevron{transform:rotate(90deg)}
}

@media (min-width:901px){
  /* Same Navigation sheet as Single Screen; it simply stays open in Dual. */
  #app.dual-screen-control > .view-controls{
    position:fixed!important;
    z-index:40!important;
    top:var(--dual-work-top,92px)!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
    max-height:calc(100vh - 112px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    scrollbar-width:thin;
    overscroll-behavior:contain;
  }
  #app.dual-screen-control > .view-controls::after{
    display:none!important;
    content:none!important;
  }
  #app.dual-screen-control > .view-controls > *{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* The legacy contextual metrics are not another Orbiter Dashboard. */
  #app.dual-screen-control > .info-panel.iss-dashboard-active > .data-grid,
  #app.dual-screen-control > .info-panel.iss-camera-dashboard-mode > .data-grid{
    display:none!important;
  }

  /* Stable wide layout: orbital map + four compact metrics, then charts. */
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:12px!important;
    align-items:start!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-content:start!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric{
    min-height:58px!important;
    padding:10px 11px!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric small{
    margin-bottom:6px!important;
    font-size:7px!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric strong{
    font-size:11px!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbital-telemetry{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:10px!important;
  }
}

@media (min-width:901px) and (max-width:1380px){
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
    grid-template-columns:minmax(0,1fr) 240px!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary{
    grid-template-columns:1fr!important;
  }
}

/* 2026-09-26 — Dual Screen: side telemetry column next to a slightly narrower map */
.info-panel .iss-orbit-side{
  display:grid;
  gap:10px;
  align-content:start;
}

@media (min-width:901px){
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr)!important;
    gap:14px!important;
    align-items:start!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-map-card{
    width:100%!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side{
    min-width:0!important;
    align-self:start!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-content:start!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric{
    min-height:58px!important;
    padding:10px 11px!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric small{
    margin-bottom:6px!important;
    font-size:7px!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric strong{
    font-size:11px!important;
  }
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbital-telemetry{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:0!important;
  }
}

@media (min-width:901px) and (max-width:1380px){
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.95fr)!important;
  }
}

@media (max-width:900px){
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side{
    order:2;
  }
}

/* 2026-09-26 — Dual Screen telemetry side v10 -------------------------------
   Forced workstation layout. This is intentionally NOT tied to viewport width:
   the Dual Screen control window must keep the entire telemetry block beside
   the orbital map. */
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.95fr)!important;
  gap:14px!important;
  align-items:start!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-map-card{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side{
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  align-self:start!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbit-summary{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbital-telemetry{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbital-telemetry > .iss-chart-card{
  grid-column:1!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side .iss-mini-chart{
  width:100%!important;
  height:106px!important;
  display:block!important;
}

/* 2026-09-26 — hard lock: map and telemetry remain side-by-side in Dual Screen */
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  gap:14px!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main > .iss-map-card{
  flex:1 1 60%!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main > .iss-orbit-side{
  flex:0 1 40%!important;
  width:auto!important;
  min-width:360px!important;
  max-width:520px!important;
}

/* 2026-09-26 — Dual Screen polish: night/day map fidelity + balanced telemetry */
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-map-card{
  align-self:stretch!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-world-map{
  width:100%!important;
  aspect-ratio:2/1!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-map-night{
  image-rendering:auto!important;
}

/* Better space distribution between map and telemetry column. */
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
  gap:16px!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main > .iss-map-card{
  flex:1 1 auto!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main > .iss-orbit-side{
  flex:0 0 34%!important;
  min-width:400px!important;
  max-width:540px!important;
  align-self:stretch!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side{
  justify-content:flex-start!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbit-summary{
  gap:10px!important;
  align-items:stretch!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric{
  min-height:60px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-summary-metric strong{
  line-height:1.18!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbital-telemetry{
  gap:10px!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbital-telemetry > .iss-chart-card{
  padding:10px 12px!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-chart-heading{
  align-items:baseline!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-chart-heading strong{
  margin-left:auto!important;
  text-align:right!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-mini-chart{
  margin-top:6px!important;
}

@media (min-width:901px) and (max-width:1320px){
  #app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main > .iss-orbit-side{
    min-width:360px!important;
    flex-basis:36%!important;
  }
}

/* 2026-09-26 — Dual Screen v12: map is the vertical reference ----------------
   The orbital map keeps its native 2:1 height. Telemetry is constrained to
   that measured height and its charts share the remaining space. */
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main{
  align-items:flex-start!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main > .iss-map-card{
  align-self:flex-start!important;
  height:auto!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-main > .iss-orbit-side{
  height:var(--orbiter-map-height,auto)!important;
  min-height:0!important;
  max-height:var(--orbiter-map-height,none)!important;
  overflow:hidden!important;
  align-self:flex-start!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbit-summary{
  flex:0 0 auto!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbital-telemetry{
  flex:1 1 0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  overflow:hidden!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side > .iss-orbital-telemetry > .iss-chart-card{
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side .iss-chart-heading{
  flex:0 0 auto!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-orbit-side .iss-mini-chart{
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:auto!important;
  margin-top:4px!important;
}


/* 2026-09-26 — Orbiter telemetry typography v13 -----------------------------
   Latitude / longitude are compact horizontal metrics. Their numeric values
   share the same hierarchy as the altitude / speed chart readouts. */
#app.dual-screen-control > .info-panel .orbiter-dashboard{
  --orbiter-primary-value-size:15px;
  --orbiter-mono:"JetBrains Mono",monospace;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-coordinate-metric{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:12px!important;
  min-height:60px!important;
  padding:10px 12px!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-coordinate-metric small{
  align-self:center!important;
  margin:0!important;
  white-space:nowrap!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-coordinate-metric strong{
  align-self:center!important;
  justify-self:end!important;
  width:auto!important;
  margin:0!important;
  overflow:visible!important;
  color:#f1f7fd!important;
  font-family:var(--orbiter-mono)!important;
  font-size:var(--orbiter-primary-value-size)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  text-align:right!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
#app.dual-screen-control > .info-panel .orbiter-dashboard .iss-chart-heading strong{
  font-family:var(--orbiter-mono)!important;
  font-size:var(--orbiter-primary-value-size)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  font-variant-numeric:tabular-nums!important;
}

/* 2026-09-26 — Dual Screen: ISS camera control directly under orbital map ---- */
.iss-camera-map-slot{display:none}

#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-orbit-map-column{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  align-self:flex-start!important;
}
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-orbit-map-column > .iss-map-card{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  flex:0 0 auto!important;
}
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-camera-map-slot:not([hidden]){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  margin:0!important;
}
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-camera-map-slot > #iss-camera-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:170px!important;
  min-height:30px!important;
  padding:7px 16px!important;
  border:1px solid rgba(156,201,255,.20)!important;
  border-radius:8px!important;
  background:rgba(10,24,36,.52)!important;
  color:#9cc9ff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
  font:700 8px/1 "JetBrains Mono",monospace!important;
  letter-spacing:.04em!important;
}
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-camera-map-slot > #iss-camera-button:hover:not(:disabled),
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-camera-map-slot > #iss-camera-button:focus-visible{
  background:rgba(39,74,105,.42)!important;
  color:#eef8ff!important;
  border-color:rgba(156,201,255,.34)!important;
}
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-camera-map-slot > #iss-camera-button:disabled{
  opacity:.48!important;
  cursor:default!important;
}
#app.dual-screen-control > .info-panel .iss-dashboard-mode-switch.is-dual-camera-detached{
  grid-template-columns:auto!important;
}
#app.dual-screen-control > .info-panel .iss-dashboard-mode-switch.is-dual-camera-detached > #iss-dashboard-button{
  border-left:0!important;
}

/* 2026-09-26 — Dual Screen ISS camera controls docked under the orbital map -- */
/* v16 moved the Dashboard/Cameras toggle itself. v17 keeps that toggle in the
   Dashboard header and docks the actual camera control panel when there is room. */
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-camera-map-slot:not([hidden]){
  display:none!important;
  min-height:0!important;
  margin:0!important;
}
#app.dual-screen-control > .info-panel #iss-orbit-dashboard .iss-camera-map-slot:not([hidden]):has(> .iss-camera-dashboard-panel:not([hidden])){
  display:block!important;
  width:100%!important;
  margin:0!important;
}

/* Keep the orbital Dashboard visible when the camera controls are docked below
   its map. If the controls do not fit, the existing full camera panel remains
   the fallback and the Dashboard is replaced exactly as before. */
#app.dual-screen-control > .info-panel.dual-iss-camera-controls-docked.iss-camera-dashboard-mode > #iss-orbit-dashboard{
  display:block!important;
}

#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel{
  display:grid!important;
  gap:6px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel > .iss-camera-dashboard-header{
  display:none!important;
}
#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel > .iss-camera-dashboard-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
}
#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel .iss-camera-dashboard-grid > button,
#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel .iss-camera-dashboard-actions > button{
  min-height:32px!important;
  padding:6px 7px!important;
  border-radius:7px!important;
  font:600 8.5px/1.1 "JetBrains Mono",monospace!important;
}
#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel .iss-camera-dashboard-grid > .iss-camera-standard{
  grid-column:span 2!important;
}
#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel > .iss-camera-dashboard-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px!important;
  padding-top:6px!important;
}
#app.dual-screen-control > .info-panel #iss-camera-map-slot > .iss-camera-dashboard-panel > .iss-camera-dashboard-actions:not(:has(> button:not([hidden]))){
  display:none!important;
}

/* Off-screen measurement uses the exact compact docked geometry. */
#app.dual-screen-control .iss-camera-dashboard-panel.dual-camera-measure,
#app.dual-screen-control .iss-camera-dashboard-panel.dual-camera-measure[hidden]{
  display:grid!important;
  position:fixed!important;
  z-index:-1!important;
  left:-20000px!important;
  top:0!important;
  width:var(--dual-camera-measure-width,640px)!important;
  max-width:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#app.dual-screen-control .iss-camera-dashboard-panel.dual-camera-measure > .iss-camera-dashboard-header{
  display:none!important;
}
#app.dual-screen-control .iss-camera-dashboard-panel.dual-camera-measure > .iss-camera-dashboard-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
}
#app.dual-screen-control .iss-camera-dashboard-panel.dual-camera-measure .iss-camera-dashboard-grid > button,
#app.dual-screen-control .iss-camera-dashboard-panel.dual-camera-measure .iss-camera-dashboard-actions > button{
  min-height:32px!important;
  padding:6px 7px!important;
  border-radius:7px!important;
  font:600 8.5px/1.1 "JetBrains Mono",monospace!important;
}
#app.dual-screen-control .iss-camera-dashboard-panel.dual-camera-measure .iss-camera-dashboard-grid > .iss-camera-standard{
  grid-column:span 2!important;
}


/* 2026-09-28 — Celestial dashboard identity + expandable description */
.info-panel .dashboard-title-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px}
.info-panel .dashboard-title-copy h2{min-width:0}
.info-panel .dashboard-body-type{color:#79b9ff;font:600 8.5px/1.15 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.info-panel .dashboard-body-type[hidden]{display:none!important}
.info-panel > .data-grid small{color:#79b9ff!important}
.info-panel .system-state-description{font-size:12px!important}
@media (min-width:901px){
  #app.dual-screen-control > .info-panel .dashboard-body-type{font-size:8px}
  #app.dual-screen-control > .info-panel .system-state-description{font-size:11.5px!important}
}

/* 2026-09-28 — Navigation spatial-scale selector ---------------------------
   Replaces the old System home button. Only the two public Solar-System scales
   are exposed; the Galactic renderer remains an internal Real-scale extension. */
.view-controls .view-scale-mode-switch{
  width:128px;
  margin:0 0 3px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid rgba(156,201,255,.16);
  border-radius:9px;
  background:rgba(10,24,36,.46);
}
.view-controls .view-scale-mode-switch > button{
  width:auto;
  min-width:0;
  min-height:30px;
  padding:7px 4px;
  border:0;
  border-radius:0;
  justify-content:center;
  background:transparent;
  color:#73899e;
  font:700 7.8px/1 "JetBrains Mono",monospace;
  letter-spacing:.02em;
  text-align:center;
}
.view-controls .view-scale-mode-switch > button + button{
  border-left:1px solid rgba(156,201,255,.12);
}
.view-controls .view-scale-mode-switch > button:hover,
.view-controls .view-scale-mode-switch > button:focus-visible{
  background:rgba(39,74,105,.34);
  color:#cce6fb;
}
.view-controls .view-scale-mode-switch > button.active{
  background:rgba(66,117,159,.38);
  color:#eef8ff;
  box-shadow:inset 0 0 0 1px rgba(156,201,255,.16);
}

@media (max-width:620px){
  .view-controls .view-scale-mode-switch{
    grid-column:1/-1;
    width:100%;
    margin:0 0 2px;
  }
  .view-controls .view-scale-mode-switch > button{
    min-height:40px;
    padding:7px 5px;
    font-size:8px;
  }
}

/* 20260928 — NASA Eyes-inspired temporal rate control -------------------------
   The temporal HUD floats directly over the scene: no card, blur or background.
   LIVE is wall-clock synchronisation; the centered rate axis is bidirectional. */
.eyes-time-panel{
  bottom:18px;
  width:min(820px,calc(100vw - 430px));
  padding:0 14px calc(4px + env(safe-area-inset-bottom));
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.eyes-time-deck{
  display:grid;
  grid-template-columns:minmax(78px,.55fr) minmax(120px,.9fr) minmax(250px,1.35fr) minmax(120px,.9fr);
  grid-template-areas:"live date rate clock";
  align-items:end;
  gap:18px;
  min-width:0;
}
.eyes-live-button{grid-area:live}
.eyes-date-button{grid-area:date}
.eyes-rate-control{grid-area:rate}
.eyes-clock-label{grid-area:clock}

.eyes-live-button,
.eyes-date-button{
  appearance:none;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:"JetBrains Mono",monospace;
}
.eyes-live-button{
  width:max-content!important;
  min-width:0;
  height:34px!important;
  padding:0 7px!important;
  display:inline-flex;
  align-items:center;
  gap:7px;
  justify-self:start;
  color:#626d79!important;
  font-size:10px!important;
  font-weight:700;
  letter-spacing:.05em;
  border-radius:6px!important;
}
.eyes-live-button:hover:not(:disabled),
.eyes-live-button:focus-visible:not(:disabled){color:#d6e2ee!important;background:rgba(255,255,255,.045)!important}
.eyes-live-button:disabled{opacity:.28;cursor:default}
.eyes-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#4b535d;
  box-shadow:none;
  transition:background .18s ease,box-shadow .18s ease;
}
.eyes-time-panel.is-live .eyes-live-button{color:#41e38a!important}
.eyes-time-panel.is-live .eyes-live-dot{background:#41e38a;box-shadow:0 0 10px rgba(65,227,138,.72)}

.eyes-date-button{
  min-width:0;
  height:34px!important;
  padding:0!important;
  justify-self:end;
  color:#c3ccd6!important;
  font-size:9.5px!important;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  letter-spacing:.02em;
}
.eyes-date-button:hover,.eyes-date-button:focus-visible{color:#eef6ff!important}
.eyes-clock-label{
  height:34px;
  display:flex;
  align-items:center;
  justify-self:start;
  color:#c3ccd6;
  font:600 9.5px/1 "JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  letter-spacing:.02em;
}

.eyes-rate-control{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-rows:22px 34px 17px;
  align-items:center;
}
.eyes-rate-label{grid-row:1}
.eyes-transport{grid-row:2}
.eyes-rate-slider{grid-row:3}
.eyes-rate-label{
  display:block;
  width:100%;
  color:#d9e2eb;
  font:650 15px/1 "Space Grotesk",sans-serif;
  font-variant-numeric:tabular-nums;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.015em;
  white-space:nowrap;
  transition:color .18s ease,text-shadow .18s ease;
}
.eyes-time-panel.is-live .eyes-rate-label{color:#41e38a;text-shadow:0 0 13px rgba(65,227,138,.2)}

.eyes-transport{
  min-width:0;
  display:flex;
  justify-content:center;
  gap:9px;
  opacity:1;
  visibility:visible;
  transition:opacity .16s ease,visibility 0s linear 0s;
}
.eyes-time-panel.is-live .eyes-transport{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility 0s linear .16s;
}
.eyes-transport button{
  width:38px!important;
  height:28px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055))!important;
  color:#77818b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.13)!important;
  font:650 8px/1 "JetBrains Mono",monospace!important;
}
.eyes-transport .play-button{
  width:38px!important;
  color:#aab3bc!important;
  font-size:10px!important;
}
.eyes-transport button:hover,.eyes-transport button:focus-visible{
  color:#eef5fb!important;
  border-color:rgba(166,198,225,.25)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.075))!important;
}
.eyes-transport .direction-button.active{
  color:#e4f2ff!important;
  border-color:rgba(124,184,237,.34)!important;
  background:rgba(85,139,184,.20)!important;
}

.eyes-rate-slider{
  position:relative;
  min-width:0;
  height:17px;
  --speed-thumb:50%;
  --speed-fill-start:50%;
  --speed-fill-end:50%;
}
.eyes-rate-slider input{
  position:relative;
  z-index:2;
  height:17px;
  margin:0;
  border-radius:999px!important;
}
.eyes-rate-slider .speed-markers{display:none!important}
.eyes-real-rate-marker{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:6px;height:6px;
  border:1px solid rgba(180,196,210,.55);
  border-radius:50%;
  background:#535b64;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(0,0,0,.24);
  pointer-events:none;
}
.eyes-rate-slider input::-webkit-slider-runnable-track{
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,
    rgba(73,83,94,.50) 0,
    rgba(73,83,94,.50) var(--speed-fill-start),
    rgba(140,154,168,.82) var(--speed-fill-start),
    rgba(140,154,168,.82) var(--speed-fill-end),
    rgba(73,83,94,.50) var(--speed-fill-end),
    rgba(73,83,94,.50) 100%)!important;
  box-shadow:none!important;
}
.eyes-rate-slider input::-moz-range-track{
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,
    rgba(73,83,94,.50) 0,
    rgba(73,83,94,.50) var(--speed-fill-start),
    rgba(140,154,168,.82) var(--speed-fill-start),
    rgba(140,154,168,.82) var(--speed-fill-end),
    rgba(73,83,94,.50) var(--speed-fill-end),
    rgba(73,83,94,.50) 100%)!important;
  box-shadow:none!important;
}
.eyes-rate-slider input::-webkit-slider-thumb{
  width:17px!important;height:17px!important;margin-top:-7.5px!important;
  border:2px solid #171c21!important;
  background:#5f666e!important;
  box-shadow:0 0 0 1px rgba(190,202,213,.34),0 3px 10px rgba(0,0,0,.38)!important;
}
.eyes-rate-slider input::-moz-range-thumb{
  width:15px!important;height:15px!important;
  border:2px solid #171c21!important;
  background:#5f666e!important;
  box-shadow:0 0 0 1px rgba(190,202,213,.34),0 3px 10px rgba(0,0,0,.38)!important;
}
.eyes-time-panel.is-live .eyes-rate-slider input::-webkit-slider-thumb{
  background:#41e38a!important;
  border-color:#173728!important;
  box-shadow:0 0 0 2px rgba(65,227,138,.18),0 0 15px rgba(65,227,138,.62)!important;
}
.eyes-time-panel.is-live .eyes-rate-slider input::-moz-range-thumb{
  background:#41e38a!important;
  border-color:#173728!important;
  box-shadow:0 0 0 2px rgba(65,227,138,.18),0 0 15px rgba(65,227,138,.62)!important;
}
.eyes-time-panel.is-live .eyes-real-rate-marker{opacity:0}
/* When transport controls are hidden in LIVE mode, place the rate label in
   the transport row to preserve NASA Eyes spacing and visual balance. */
.eyes-time-panel.is-live .eyes-rate-control{
  /* Keep the full three-row height even when transport is hidden.
     This prevents the whole time HUD from jumping vertically. */
  grid-template-rows:22px 34px 17px;
}
.eyes-time-panel.is-live .eyes-rate-label{
  grid-row:2;
  align-self:center;
}
.eyes-time-panel.is-live .eyes-rate-slider{
  grid-row:3;
}
.eyes-direction-label{display:none!important}


@media(max-width:900px){
  .eyes-time-panel{width:calc(100vw - 24px);bottom:14px}
  .eyes-time-deck{grid-template-columns:minmax(68px,.45fr) minmax(115px,.9fr) minmax(230px,1.2fr) minmax(115px,.9fr);gap:12px}
}
@media(max-width:620px){
  .eyes-time-deck{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"date clock" "live live" "rate rate";
    gap:5px 12px;
    align-items:center;
  }
  .eyes-live-button{justify-self:center;height:27px!important}
  .eyes-date-button{justify-self:end;height:28px!important;font-size:8.5px!important}
  .eyes-clock-label{justify-self:start;height:28px;font-size:8.5px}
  .eyes-rate-control{width:min(330px,100%);justify-self:center}
}

/* LIVE keeps the Eyes-like clean state, but transport remains discoverable on
   pointer/focus and always reachable on touch devices. */
.eyes-time-panel.is-live .eyes-rate-control:hover .eyes-transport,
.eyes-time-panel.is-live .eyes-rate-control:focus-within .eyes-transport{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
@media(hover:none){
  .eyes-time-panel.is-live .eyes-transport{
    opacity:.72;
    visibility:visible;
    pointer-events:auto;
  }
}

/* Dual-screen keeps the same Eyes transport instead of falling back to the
   older oversized workstation play button. */
#app.dual-screen-control > .timeline-panel .eyes-time-deck{
  grid-template-columns:minmax(78px,.55fr) minmax(120px,.9fr) minmax(260px,1.35fr) minmax(120px,.9fr);
  gap:20px;
}
#app.dual-screen-control > .timeline-panel .eyes-transport{gap:9px}
#app.dual-screen-control > .timeline-panel .eyes-transport button,
#app.dual-screen-control > .timeline-panel .eyes-transport .play-button{
  width:38px!important;
  height:28px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055))!important;
  color:#8e98a2!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.13)!important;
}
#app.dual-screen-control > .timeline-panel .eyes-rate-slider input::-webkit-slider-runnable-track{
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(73,83,94,.50) 0,rgba(73,83,94,.50) var(--speed-fill-start),rgba(140,154,168,.82) var(--speed-fill-start),rgba(140,154,168,.82) var(--speed-fill-end),rgba(73,83,94,.50) var(--speed-fill-end),rgba(73,83,94,.50) 100%)!important;
  box-shadow:none!important;
}

/* 20260928 — temporal HUD v9 -------------------------------------------------
   LIVE and simulation time are independent scene-corner indicators. */
.eyes-time-deck{
  grid-template-columns:minmax(120px,.9fr) minmax(270px,1.5fr) minmax(120px,.9fr)!important;
  grid-template-areas:"date rate clock"!important;
  gap:18px!important;
}

.eyes-live-corner{
  position:fixed!important;
  z-index:24!important;
  left:20px!important;
  bottom:max(20px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  min-width:82px!important;
  height:34px!important;
  padding:0 11px!important;
  justify-content:center!important;
  color:#7f8993!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:6px!important;
  background:rgba(10,13,17,.72)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease!important;
}
.eyes-live-corner.is-inactive:not(:disabled){
  background:rgba(18,22,27,.82)!important;
  border-color:rgba(255,255,255,.11)!important;
}
.eyes-live-corner.is-inactive:hover:not(:disabled),
.eyes-live-corner.is-inactive:focus-visible:not(:disabled){
  color:#eef6ff!important;
  background:rgba(42,49,57,.94)!important;
  border-color:rgba(162,194,222,.32)!important;
  box-shadow:0 7px 22px rgba(0,0,0,.30),0 0 0 1px rgba(152,197,236,.06)!important;
}
.eyes-live-corner.is-paused:not(:disabled){
  color:#d4a56c!important;
  border-color:rgba(255,163,72,.18)!important;
  background:rgba(42,29,18,.82)!important;
}
.eyes-live-corner.active{
  color:#41e38a!important;
  border-color:rgba(65,227,138,.14)!important;
  background:rgba(10,21,16,.48)!important;
  box-shadow:0 0 16px rgba(65,227,138,.08)!important;
}
.eyes-live-corner.active .eyes-live-dot{
  background:#41e38a!important;
  box-shadow:0 0 10px rgba(65,227,138,.72)!important;
}
.eyes-live-corner.is-paused .eyes-live-dot{
  background:#d98a42!important;
  box-shadow:0 0 9px rgba(217,138,66,.36)!important;
}

.eyes-time-panel.is-paused .eyes-rate-label{
  color:#f29a45!important;
  text-shadow:0 0 14px rgba(242,154,69,.2)!important;
}
.eyes-time-panel.is-paused .eyes-rate-slider input::-webkit-slider-thumb{
  background:#f29a45!important;
  border-color:#3b2718!important;
  box-shadow:0 0 0 2px rgba(242,154,69,.14),0 0 14px rgba(242,154,69,.4)!important;
}
.eyes-time-panel.is-paused .eyes-rate-slider input::-moz-range-thumb{
  background:#f29a45!important;
  border-color:#3b2718!important;
  box-shadow:0 0 0 2px rgba(242,154,69,.14),0 0 14px rgba(242,154,69,.4)!important;
}

.simulation-time-corner{
  position:fixed!important;
  z-index:24!important;
  top:auto!important;
  right:20px!important;
  bottom:max(18px,env(safe-area-inset-bottom))!important;
  left:auto!important;
  min-width:0!important;
  width:auto!important;
  padding:6px 9px 7px!important;
  gap:2px!important;
  align-items:flex-end!important;
  text-align:right!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.simulation-time-corner::after{display:none!important}
.simulation-time-corner .readout-label{
  color:rgba(129,174,224,.7)!important;
  font:600 7px/1.1 "JetBrains Mono",monospace!important;
  letter-spacing:.13em!important;
}
.simulation-time-corner .simulation-date-button{
  margin:0!important;
  padding:4px 6px!important;
  color:#d3dce5!important;
  font:600 10px/1.2 "JetBrains Mono",monospace!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.015em!important;
}
.simulation-time-corner .simulation-date-button:hover,
.simulation-time-corner .simulation-date-button[aria-expanded="true"]{
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
}
.date-time-picker{
  position:fixed!important;
  z-index:80!important;
  top:auto!important;
  right:20px!important;
  bottom:64px!important;
  left:auto!important;
  transform:none!important;
}

.exploration-mode .eyes-live-corner,
.exploration-mode .simulation-time-corner,
#app.keyboard-ui-hidden .eyes-live-corner,
#app.keyboard-ui-hidden .simulation-time-corner{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  .eyes-time-deck{
    grid-template-columns:minmax(105px,.85fr) minmax(240px,1.4fr) minmax(105px,.85fr)!important;
    gap:12px!important;
  }
}
@media(max-width:620px){
  .eyes-time-deck{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:"date clock" "rate rate"!important;
    gap:5px 12px!important;
  }
  .eyes-live-corner{
    left:12px!important;
    bottom:calc(74px + env(safe-area-inset-bottom))!important;
    min-width:70px!important;
    height:30px!important;
    padding:0 9px!important;
    font-size:9px!important;
  }
  .simulation-time-corner{
    right:12px!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
  }
  .simulation-time-corner .readout-label{font-size:6px!important}
  .simulation-time-corner .simulation-date-button{font-size:8px!important}
  .date-time-picker{
    right:12px!important;
    left:12px!important;
    bottom:calc(112px + env(safe-area-inset-bottom))!important;
    width:auto!important;
  }
}

#app.dual-screen-control > .timeline-panel .eyes-time-deck{
  grid-template-columns:minmax(120px,.9fr) minmax(280px,1.5fr) minmax(120px,.9fr)!important;
  grid-template-areas:"date rate clock"!important;
}


/* 20260928 — temporal HUD v10 -------------------------------------------------
   Match the simulation-time readout to Exploration mode, keep LIVE neutral
   outside wall-clock sync, and raise the opened Time Controls content. */

/* Bottom-right simulation time: same visual hierarchy as Exploration mode. */
.simulation-time-corner{
  display:block!important;
  right:24px!important;
  bottom:max(24px,env(safe-area-inset-bottom))!important;
  min-width:292px!important;
  padding:13px 17px 14px!important;
  border:0!important;
  border-right:2px solid rgba(112,174,255,.56)!important;
  background:linear-gradient(90deg,transparent,rgba(5,9,16,.5))!important;
  text-align:right!important;
  pointer-events:auto!important;
}
.simulation-time-corner .readout-label{
  display:block!important;
  margin:0 0 4px!important;
  color:rgba(119,176,255,.68)!important;
  font:600 8px/1 "Space Grotesk",sans-serif!important;
  letter-spacing:.24em!important;
}
.simulation-time-corner .simulation-date-button{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(237,246,255,.88)!important;
  font:500 18px/1.15 "Space Grotesk",Manrope,sans-serif!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.035em!important;
  text-align:right!important;
  text-shadow:0 0 18px rgba(111,174,255,.16)!important;
}
.simulation-time-corner .simulation-date-button:hover,
.simulation-time-corner .simulation-date-button:focus-visible,
.simulation-time-corner .simulation-date-button[aria-expanded="true"]{
  color:#fff!important;
  background:transparent!important;
  text-shadow:0 0 22px rgba(111,174,255,.30)!important;
}

/* The date and UTC clock in Time Controls use the same 18 px scale. */
.eyes-date-button,
.eyes-clock-label{
  height:36px!important;
  color:rgba(237,246,255,.88)!important;
  font:500 18px/1.15 "Space Grotesk",Manrope,sans-serif!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.035em!important;
  text-shadow:0 0 18px rgba(111,174,255,.12)!important;
}

/* LIVE v11 — definitive three-state treatment --------------------------------
   Neutral matches the approved reference: charcoal chip, soft grey text and a
   solid black status dot. Pause remains visually neutral. Hover advertises the
   reset-to-live action in green; active LIVE keeps the same green vocabulary. */
.eyes-live-corner,
.eyes-live-corner.is-inactive:not(:disabled),
.eyes-live-corner.is-paused:not(:disabled){
  color:rgba(194,197,204,.76)!important;
  border:0!important;
  border-radius:5px!important;
  background:rgba(27,27,30,.92)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.26)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.eyes-live-corner:not(.active) .eyes-live-dot{
  opacity:1!important;
  background:#050505!important;
  box-shadow:none!important;
}
.eyes-live-corner.is-inactive:hover:not(:disabled),
.eyes-live-corner.is-inactive:focus-visible:not(:disabled),
.eyes-live-corner.is-paused:hover:not(:disabled),
.eyes-live-corner.is-paused:focus-visible:not(:disabled),
.eyes-live-corner:hover:not(.active):not(:disabled),
.eyes-live-corner:focus-visible:not(.active):not(:disabled){
  color:#69efa5!important;
  background:rgba(24,66,45,.92)!important;
  box-shadow:0 5px 16px rgba(0,0,0,.30),0 0 18px rgba(65,227,138,.14)!important;
}
.eyes-live-corner:not(.active):hover .eyes-live-dot,
.eyes-live-corner:not(.active):focus-visible .eyes-live-dot{
  opacity:1!important;
  background:#41e38a!important;
  box-shadow:0 0 9px rgba(65,227,138,.58)!important;
}
.eyes-live-corner.active{
  color:#58ec9b!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.eyes-live-corner.active:hover,
.eyes-live-corner.active:focus-visible{
  color:#58ec9b!important;
  background:transparent!important;
  box-shadow:none!important;
}
.eyes-live-corner.active .eyes-live-dot{
  opacity:1!important;
  background:#41e38a!important;
  box-shadow:0 0 10px rgba(65,227,138,.72)!important;
}

/* Desktop collapsed handle vocabulary. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::after{
    content:"Contrôle du Temps"!important;
    width:154px!important;
  }
  html[lang="en"] #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::after{
    content:"Time Controls"!important;
    width:132px!important;
  }
  /* Keep the bottom handle at the same location, but lift the opened content. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .eyes-time-panel{
    padding-bottom:calc(30px + env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:620px){
  .simulation-time-corner{
    right:12px!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    min-width:220px!important;
    padding:10px 12px 11px!important;
  }
  .simulation-time-corner .readout-label{font-size:7px!important}
  .simulation-time-corner .simulation-date-button{font-size:14px!important}
  .eyes-date-button,.eyes-clock-label{font-size:14px!important}
}

/* 20260928 — temporal rate control v19 --------------------------------------
   Consolidated layout. The three visual levels are fixed:
   label / transport / curved rate axis. In clean LIVE mode the label glides
   into the transport zone, but can never overlap the rate axis. */
.eyes-rate-control{
  position:relative!important;
  display:block!important;
  min-width:0!important;
  height:73px!important;
}

.eyes-rate-label{
  position:absolute!important;
  z-index:7!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  color:#d9e2eb;
  font:650 17px/1 "Space Grotesk",sans-serif!important;
  font-variant-numeric:tabular-nums;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.015em;
  white-space:nowrap;
  pointer-events:none!important;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:50% 50%;
  will-change:transform,opacity;
  transition:
    transform .28s cubic-bezier(.22,.78,.24,1),
    opacity .20s ease,
    color .18s ease,
    text-shadow .18s ease!important;
}
.eyes-time-panel.is-live .eyes-rate-label{
  color:#41e38a!important;
  text-shadow:0 0 13px rgba(65,227,138,.2)!important;
}
.eyes-time-panel.is-paused .eyes-rate-label{
  color:#f29a45!important;
  text-shadow:0 0 14px rgba(242,154,69,.2)!important;
}

.eyes-transport{
  position:absolute!important;
  z-index:6!important;
  top:24px!important;
  left:0!important;
  right:0!important;
  height:28px!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0);
  transition:opacity .22s ease,visibility 0s linear 0s!important;
}
.eyes-transport button{
  width:38px!important;
  height:28px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055))!important;
  color:#77818b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.13)!important;
  font:650 8px/1 "JetBrains Mono",monospace!important;
}
.eyes-transport .play-button,
#app.dual-screen-control > .timeline-panel .eyes-transport .play-button{
  width:32px!important;
  height:24px!important;
  align-self:center!important;
  color:#aab3bc!important;
  font-size:9px!important;
}
.eyes-transport button:hover,.eyes-transport button:focus-visible{
  color:#eef5fb!important;
  border-color:rgba(166,198,225,.25)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.075))!important;
}
.eyes-transport .direction-button.active{
  color:#e4f2ff!important;
  border-color:rgba(124,184,237,.34)!important;
  background:rgba(85,139,184,.20)!important;
}

.eyes-rate-slider{
  --speed-thumb-y:6px;
  position:absolute!important;
  z-index:4!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  min-width:0!important;
  height:18px!important;
  overflow:visible!important;
}
.eyes-rate-slider .speed-markers{display:none!important}
.eyes-rate-slider .eyes-rate-curve{
  position:absolute!important;
  z-index:1!important;
  left:0!important;
  top:1px!important;
  width:100%!important;
  height:14px!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.eyes-rate-curve-base,
.eyes-rate-curve-fill{
  fill:none!important;
  vector-effect:non-scaling-stroke!important;
  stroke-linecap:round!important;
  stroke-width:2.4!important;
}
.eyes-rate-curve-base{stroke:rgba(73,83,94,.62)!important}
.eyes-rate-curve-fill{
  stroke:rgba(140,154,168,.88)!important;
  clip-path:inset(0 calc(100% - var(--speed-fill-end)) 0 var(--speed-fill-start))!important;
}
.eyes-rate-slider input{
  position:absolute!important;
  z-index:5!important;
  inset:0!important;
  width:100%!important;
  height:18px!important;
  margin:0!important;
  background:transparent!important;
  cursor:pointer!important;
}
.eyes-rate-slider input::-webkit-slider-runnable-track{
  height:14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.eyes-rate-slider input::-moz-range-track{
  height:14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.eyes-rate-slider input::-webkit-slider-thumb{
  width:20px!important;height:20px!important;margin-top:-4px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;opacity:0!important;
}
.eyes-rate-slider input::-moz-range-thumb{
  width:20px!important;height:20px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;opacity:0!important;
}
.eyes-rate-thumb-visual{
  position:absolute!important;
  z-index:4!important;
  left:var(--speed-thumb)!important;
  top:calc(1px + var(--speed-thumb-y))!important;
  width:17px!important;height:17px!important;
  border:2px solid #171c21!important;
  border-radius:50%!important;
  background:#5f666e!important;
  box-shadow:0 0 0 1px rgba(190,202,213,.34),0 3px 10px rgba(0,0,0,.38)!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.eyes-real-rate-marker{
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:8.5px!important;
  width:6px!important;height:6px!important;
  border:1px solid rgba(180,196,210,.55)!important;
  border-radius:50%!important;
  background:#535b64!important;
  transform:translate(-50%,-50%)!important;
  box-shadow:0 0 0 2px rgba(0,0,0,.24)!important;
  pointer-events:none!important;
}
.eyes-time-panel.is-live .eyes-real-rate-marker{opacity:0!important}
.eyes-time-panel.is-live .eyes-rate-thumb-visual{
  background:#41e38a!important;
  border-color:#173728!important;
  box-shadow:0 0 0 2px rgba(65,227,138,.18),0 0 15px rgba(65,227,138,.62)!important;
}
.eyes-time-panel.is-paused .eyes-rate-thumb-visual{
  background:#f29a45!important;
  border-color:#3b2718!important;
  box-shadow:0 0 0 2px rgba(242,154,69,.14),0 0 14px rgba(242,154,69,.4)!important;
}
.eyes-direction-label{display:none!important}

/* Time speed v1 — one interaction model in LIVE, simulated playback and
   pause. When idle, the value occupies the transport row. Hover/focus moves
   the value above and reveals rate +/- and play/pause in the same coordinates.
   For touch, both value and controls remain available without hover. */
@media (hover:hover) and (pointer:fine){
  .eyes-time-panel .eyes-rate-control:not(:hover):not(:focus-within) .eyes-rate-label{
    transform:translate3d(0,25px,0) scale(.88)!important;
    opacity:.96!important;
  }
  .eyes-time-panel .eyes-rate-control:not(:hover):not(:focus-within) .eyes-transport{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .22s ease,visibility 0s linear .22s!important;
  }
  .eyes-time-panel .eyes-rate-control:is(:hover,:focus-within) .eyes-rate-label{
    transform:translate3d(0,-2px,0) scale(1)!important;
    opacity:1!important;
  }
  .eyes-time-panel .eyes-rate-control:is(:hover,:focus-within) .eyes-transport{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:opacity .22s ease,visibility 0s linear 0s!important;
  }
}
@media (hover:none), (pointer:coarse){
  .eyes-time-panel .eyes-rate-label{
    transform:none!important;
    font-size:17px!important;
  }
  .eyes-time-panel .eyes-transport{
    opacity:.82!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}
.eyes-time-panel .eyes-transport .direction-button:disabled{
  opacity:.25!important;
  cursor:default!important;
  pointer-events:none!important;
}

#app.dual-screen-control > .timeline-panel .eyes-rate-control{height:73px!important}
#app.dual-screen-control > .timeline-panel .eyes-rate-slider input::-webkit-slider-runnable-track{
  height:14px!important;border:0!important;background:transparent!important;box-shadow:none!important;
}



/* 20260928 — LIVE active state v21 ------------------------------------------
   Active EN DIRECT is intentionally flat: no background, shadow or hover/focus
   treatment. Hover feedback is reserved for the inactive reset-to-live state. */
.eyes-live-corner.active,
.eyes-live-corner.active:hover,
.eyes-live-corner.active:focus,
.eyes-live-corner.active:focus-visible,
.eyes-live-corner.active:active{
  color:#58ec9b!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
  transition:none!important;
}
.eyes-live-corner.active .eyes-live-dot,
.eyes-live-corner.active:hover .eyes-live-dot,
.eyes-live-corner.active:focus-visible .eyes-live-dot{
  background:#41e38a!important;
  box-shadow:0 0 10px rgba(65,227,138,.72)!important;
  transform:none!important;
}


/* 20260928 — Time Controls handle + simulated-time visibility v22 -----------
   The collapsed handle advertises the opening direction; once open it changes
   to a closing indicator. Simulated time is only shown while this menu is shut. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::after{
    content:"⌃  Contrôle du Temps"!important;
    width:188px!important;
    height:30px!important;
    opacity:.94!important;
    color:#a9d2ff!important;
    font:650 10px/1 "JetBrains Mono",monospace!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
  }
  html[lang="en"] #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::after{
    content:"⌃  Time Controls"!important;
    width:160px!important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:hover::after,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:focus-within::after{
    content:"⌄  Contrôle du Temps"!important;
    opacity:.82!important;
  }
  html[lang="en"] #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:hover::after,
  html[lang="en"] #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:focus-within::after{
    content:"⌄  Time Controls"!important;
  }

  #app > .simulation-time-corner{
    transition:opacity .18s ease,visibility 0s linear 0s!important;
  }
  #app:has(> .timeline-panel:hover) > .simulation-time-corner,
  #app:has(> .timeline-panel:focus-within) > .simulation-time-corner{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .14s ease,visibility 0s linear .14s!important;
  }
}

/* On touch/mobile the time sheet is explicitly opened by the dock. */
#app.mobile-panel-timeline > .simulation-time-corner,
#app.dual-screen-control > .simulation-time-corner{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* 20260928 — Time Controls v23: explicit click-only drawer -----------------
   The time drawer no longer reacts to hover/focus. A real fixed button owns
   both open and close actions. Its arrow has a stem (not a text chevron), and
   stays at the same screen position in both states. */
.time-panel-toggle{display:none}

@media (min-width:901px) and (hover:hover) and (pointer:fine){
  /* Retire every legacy pseudo-handle. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::after,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel::before{
    display:none!important;
    content:none!important;
  }

  /* Closed means genuinely closed: hover/focus cannot pull the sheet up. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:hover,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel:focus-within{
    transform:translate(-50%,calc(100% + 12px))!important;
    overflow:hidden!important;
    pointer-events:none!important;
    box-shadow:none!important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel > *{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* The click state is the only desktop route that opens the drawer. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel.time-panel-open,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel.time-panel-open:hover,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel.time-panel-open:focus-within{
    transform:translate(-50%,0)!important;
    overflow:visible!important;
    pointer-events:auto!important;
    box-shadow:none!important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .timeline-panel.time-panel-open > *{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Persistent button: opening arrow when shut, closing arrow when open. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .time-panel-toggle{
    position:fixed!important;
    z-index:31!important;
    left:50%!important;
    bottom:8px!important;
    transform:translateX(-50%)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    min-width:190px!important;
    height:32px!important;
    padding:0 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#a9d2ff!important;
    cursor:pointer!important;
    font:650 11px/1 "JetBrains Mono",monospace!important;
    letter-spacing:.10em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    opacity:.92!important;
    transition:color .16s ease,opacity .16s ease!important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .time-panel-toggle:hover,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .time-panel-toggle:focus-visible{
    color:#d9ecff!important;
    opacity:1!important;
    outline:none!important;
  }
  .time-panel-toggle__label{pointer-events:none}
  .time-panel-toggle__icon{
    width:15px!important;
    height:15px!important;
    flex:0 0 15px!important;
    overflow:visible!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.65!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    transform:rotate(0deg)!important;
    transform-origin:50% 50%!important;
    transition:transform .22s cubic-bezier(.22,1,.36,1)!important;
    pointer-events:none!important;
  }
  #app.time-controls-open > .time-panel-toggle .time-panel-toggle__icon{
    transform:rotate(180deg)!important;
  }

  /* Simulated time is tied to the explicit state, never hover/focus. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .simulation-time-corner{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:opacity .18s ease,visibility 0s linear 0s!important;
  }
  #app.time-controls-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .simulation-time-corner{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .14s ease,visibility 0s linear .14s!important;
  }
}

/* Touch keeps the existing mobile dock; Dual Screen keeps the permanently
   expanded workstation control. */
#app.dual-screen-control > .time-panel-toggle,
#app.mission-mode > .time-panel-toggle,
#app.exploration-mode > .time-panel-toggle{
  display:none!important;
}

/* 2026-10-05 — Media Studio / Dual Screen ergonomic Movement workspace v3
   Keep Single Screen untouched. In Dual Screen, use the central width as a
   shot editor: compact plan bar, camera column, independent time column. */
@media (min-width: 901px) {
  body.dual-screen-control-ui .media-studio .media-pages {
    padding: 10px 12px 12px !important;
    scrollbar-gutter: stable;
  }

  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"].active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "title title"
      "plan plan"
      "cameraMode time"
      "cameraTimeline time"
      "legacy time";
    align-content: start !important;
    align-items: start !important;
    gap: 9px 12px !important;
  }

  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-page-title {
    grid-area: title;
    min-height: 25px;
    margin: 0 0 1px !important;
    padding: 0 0 8px !important;
  }

  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-plan-manager {
    grid-area: plan;
    min-width: 0;
    margin: 0 !important;
    padding: 7px 8px !important;
    display: grid !important;
    grid-template-columns: 84px minmax(145px, .72fr) minmax(180px, 1fr) minmax(330px, 1.35fr);
    align-items: center;
    gap: 6px 8px !important;
    border-radius: 9px !important;
    background: rgba(7, 18, 29, .40) !important;
    border-color: rgba(119, 181, 231, .10) !important;
  }

  body.dual-screen-control-ui .media-studio .media-plan-manager > strong {
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    color: #91a7bb;
  }

  body.dual-screen-control-ui .media-studio .media-plan-manager > select,
  body.dual-screen-control-ui .media-studio .media-plan-manager > input {
    min-width: 0;
    min-height: 29px !important;
    height: 29px;
    margin: 0 !important;
  }

  body.dual-screen-control-ui .media-studio .media-plan-actions {
    min-width: 0;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body.dual-screen-control-ui .media-studio .media-plan-actions button {
    min-width: 0;
    min-height: 29px !important;
    height: 29px;
    padding: 5px 6px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 7.5px !important;
  }

  /* Camera selector belongs visually to the left editor column. */
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > label:not(.media-range):not(.media-switch) {
    grid-area: cameraMode;
    min-height: 39px !important;
    height: 39px;
    margin: 0 !important;
    padding: 5px 8px 5px 10px !important;
    grid-template-columns: minmax(0, .72fr) minmax(150px, 1fr) !important;
    border-radius: 9px !important;
  }

  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > label select {
    min-height: 28px !important;
    height: 28px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-timeline {
    grid-area: cameraTimeline;
    min-width: 0;
    margin: 0 !important;
    padding: 10px !important;
    gap: 7px !important;
    border: 1px solid rgba(113, 179, 232, .10);
    border-radius: 10px;
    background: rgba(4, 13, 22, .34);
  }

  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > [data-legacy-motion-controls] {
    grid-area: legacy;
    min-width: 0;
  }

  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-timeline-time-range {
    grid-area: time;
    min-width: 0;
    margin: 0 !important;
    padding: 10px !important;
    gap: 7px !important;
    border: 1px solid rgba(220, 169, 96, .11) !important;
    border-radius: 10px !important;
    background: rgba(18, 14, 10, .20);
  }

  body.dual-screen-control-ui .media-studio .media-timeline-time-range > strong {
    min-height: 16px;
    display: flex;
    align-items: center;
    color: #b9a584;
    letter-spacing: .075em;
  }

  body.dual-screen-control-ui .media-studio .media-timeline-time-range > .media-switch {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
  }

  body.dual-screen-control-ui .media-studio .media-timeline-head {
    min-height: 18px;
    font-size: 8px;
  }

  body.dual-screen-control-ui .media-studio .media-playhead-entry {
    gap: 4px;
  }

  body.dual-screen-control-ui .media-studio .media-playhead-entry input {
    width: 72px;
    height: 24px;
    padding: 2px 6px;
    font-size: 8px;
  }

  body.dual-screen-control-ui .media-studio .media-playhead-entry output {
    min-width: 60px;
    font-size: 8px;
  }

  body.dual-screen-control-ui .media-studio .media-timeline-scrub {
    height: 16px;
  }

  body.dual-screen-control-ui .media-studio .media-inline-actions {
    gap: 5px !important;
  }

  body.dual-screen-control-ui .media-studio .media-inline-actions button,
  body.dual-screen-control-ui .media-studio .media-time-endpoint button {
    min-height: 30px !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
    font-size: 7.5px !important;
  }

  body.dual-screen-control-ui .media-studio .media-keyframe-list,
  body.dual-screen-control-ui .media-studio .media-time-keyframe-list {
    min-height: 0;
    max-height: 92px !important;
    gap: 4px !important;
  }

  body.dual-screen-control-ui .media-studio .media-keyframe-list button,
  body.dual-screen-control-ui .media-studio .media-time-keyframe-list button {
    min-height: 30px !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
  }

  body.dual-screen-control-ui .media-studio .media-note[data-timeline-help],
  body.dual-screen-control-ui .media-studio .media-note[data-time-timeline-help],
  body.dual-screen-control-ui .media-studio .media-note[data-historical-lock-help] {
    margin: 0 !important;
    padding: 6px 8px !important;
    max-height: 40px;
    overflow: hidden;
    font-size: 7px !important;
    line-height: 1.35 !important;
  }

  body.dual-screen-control-ui .media-studio .media-timeline-time-range > label:not(.media-switch) {
    min-height: 38px !important;
    height: 38px;
    margin: 0 !important;
    padding: 5px 8px !important;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 42%) !important;
    border-radius: 8px !important;
  }

  body.dual-screen-control-ui .media-studio .media-timeline-time-range > label select {
    min-height: 27px !important;
    height: 27px;
  }

  /* Footer stays visually separated from the editor and consumes less height. */
  body.dual-screen-control-ui .media-studio footer {
    min-height: 50px !important;
    padding: 7px 10px !important;
  }

  body.dual-screen-control-ui .media-studio footer .media-primary,
  body.dual-screen-control-ui .media-studio footer .media-reset {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* Medium control displays: keep the same hierarchy but let the plan bar wrap
   cleanly instead of shrinking labels/actions into unusable widths. */
@media (min-width: 901px) and (max-width: 1499px) {
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-plan-manager {
    grid-template-columns: 78px minmax(145px, .72fr) minmax(180px, 1fr) !important;
  }
  body.dual-screen-control-ui .media-studio .media-plan-actions {
    grid-column: 1 / -1;
  }
}

/* Narrow dual-screen control windows fall back to a single editor column, but
   preserve the same ordering: plan -> camera -> time. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"].active {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "plan"
      "cameraMode"
      "cameraTimeline"
      "legacy"
      "time" !important;
  }
}


/* 20261006 — Dual Screen floating tools / direct UTC clock editing ----------
   Media Studio is a body-level layer at z-index 12000. Date/time and
   astronomical-event tools remain children of #app, so they need an explicit
   higher workstation layer when Dual Screen is active. */
.eyes-clock-button{
  appearance:none;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  cursor:pointer;
}
.eyes-clock-button:hover,
.eyes-clock-button:focus-visible,
.eyes-clock-button[aria-expanded="true"]{
  color:#fff!important;
  text-shadow:0 0 22px rgba(111,174,255,.30)!important;
}
.eyes-clock-button:focus-visible{
  outline:1px solid rgba(116,181,255,.88)!important;
  outline-offset:4px!important;
  border-radius:5px!important;
}
body.dual-screen-control-ui #app.dual-screen-control > #date-time-picker,
body.dual-screen-control-ui #app.dual-screen-control > #astronomical-events-panel{
  z-index:13050!important;
}
body.dual-screen-control-ui #app.dual-screen-control > #date-time-picker:not([hidden]),
body.dual-screen-control-ui #app.dual-screen-control > #astronomical-events-panel.open{
  pointer-events:auto!important;
}


/* Media Studio camera FOV control */
.media-studio .media-camera-fov {
  display:grid;
  gap:7px;
  margin:0 0 10px;
  padding:9px 10px;
  border:1px solid rgba(112,181,232,.10);
  border-radius:9px;
  background:rgba(7,18,29,.30);
}
.media-studio .media-camera-fov-row { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:8px; align-items:center; }
.media-studio .media-camera-fov-row input[type="range"] { width:100%; accent-color:#78bff0; }
.media-studio .media-camera-fov-row input[type="number"] { width:72px; min-width:0; padding:6px 7px; border:1px solid rgba(255,255,255,.13); border-radius:7px; background:#101c28; color:#fff; font:500 10px/1 "JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.media-studio .media-camera-fov.is-locked { opacity:.62; }

@media (min-width: 901px) {
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"].active {
    grid-template-areas:
      "title title"
      "plan plan"
      "cameraMode time"
      "cameraFov time"
      "keyframeState time"
      "cameraTimeline time"
      "legacy time" !important;
  }
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-camera-fov {
    grid-area:cameraFov;
    min-width:0;
    margin:0 !important;
    padding:8px 10px !important;
  }
}


/* 2026-10-06 — Media Studio visible keyframe state controls */
.media-studio .media-keyframe-scene-state {
  display:grid;
  gap:7px;
  margin:0 0 10px;
  padding:9px 10px;
  border:1px solid rgba(112,181,232,.10);
  border-radius:9px;
  background:rgba(7,18,29,.30);
}
.media-studio .media-keyframe-scene-switches {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 8px;
}
.media-studio .media-keyframe-scene-state .media-switch {
  min-height:34px;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:8px;
  background:rgba(2,8,14,.24);
  font-size:9px;
}
.media-studio .media-keyframe-scene-state .media-switch i {
  width:30px;
  height:16px;
  flex-basis:30px;
}
.media-studio .media-keyframe-scene-state .media-switch i::after { width:10px; height:10px; }
.media-studio .media-keyframe-scene-state .media-switch input:checked + i::after { transform:translateX(14px); }
.media-studio .media-keyframe-scene-state > .media-note { margin:0; line-height:1.35; }
@media (min-width:901px) {
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-keyframe-scene-state {
    grid-area:keyframeState;
    min-width:0;
    margin:0 !important;
    padding:8px 10px !important;
  }
}
@media (max-width:1180px) {
  .media-studio .media-keyframe-scene-switches { grid-template-columns:1fr; }
}


/* 2026-10-06 — Dual Screen floating tools portal v2 -------------------------
   Date/time and astronomical events are temporarily moved next to Media Studio
   under <body> while open in Dual Screen. This removes any dependency on #app
   stacking contexts and guarantees that these tools are the top interactive
   workstation layer. */
body.dual-screen-control-ui > #date-time-picker,
body.dual-screen-control-ui > #astronomical-events-panel {
  z-index: 14050 !important;
  pointer-events: auto !important;
}
body.dual-screen-control-ui > #date-time-picker:not([hidden]),
body.dual-screen-control-ui > #astronomical-events-panel.open {
  visibility: visible;
}

/* 2026-10-07 — Media Studio free camera ----------------------------------- */
.media-studio .media-free-camera {
  display:grid;
  gap:8px;
  margin:0 0 10px;
  padding:10px;
  border:1px solid rgba(112,181,232,.12);
  border-radius:10px;
  background:rgba(6,16,27,.38);
  transition:border-color .18s ease,background .18s ease;
}
.media-studio .media-free-camera.is-active {
  border-color:rgba(111,198,255,.34);
  background:rgba(8,27,42,.48);
}
.media-studio .media-free-camera-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.media-studio .media-free-camera-head > div { display:grid; gap:3px; min-width:0; }
.media-studio .media-free-camera-head strong {
  color:#a9c4d9;
  font:600 9px/1.1 "Space Grotesk",sans-serif;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.media-studio .media-free-camera-head small {
  overflow:hidden;
  color:#71899c;
  font:500 8px/1.15 "JetBrains Mono",monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.media-studio .media-free-camera-head button {
  flex:0 0 auto;
  min-width:76px;
  min-height:30px;
  padding:6px 10px;
  border:1px solid rgba(119,190,239,.22);
  border-radius:8px;
  background:rgba(15,38,56,.65);
  color:#a9cbe2;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.065em;
}
.media-studio .media-free-camera-head button.active {
  border-color:rgba(111,198,255,.46);
  background:rgba(27,79,111,.62);
  color:#eef9ff;
}
.media-studio .media-free-camera-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(115px,.7fr);
  gap:8px;
  align-items:stretch;
}
.media-studio .media-free-camera-grid > label { margin:0; min-height:38px; }
.media-studio .media-free-camera-speed {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  min-height:38px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:rgba(2,8,14,.25);
}
.media-studio .media-free-camera-speed span {
  color:#738b9e;
  font:500 8px/1.15 "Space Grotesk",sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.media-studio .media-free-camera-speed output {
  color:#c9e5f7;
  font:600 9px/1 "JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.media-studio .media-free-camera > .media-note { margin:0; line-height:1.4; }

@media (min-width:901px) {
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"].active {
    grid-template-areas:
      "title title"
      "plan plan"
      "freeCamera time"
      "cameraMode time"
      "cameraFov time"
      "keyframeState time"
      "cameraTimeline time"
      "legacy time" !important;
  }
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"] > .media-free-camera {
    grid-area:freeCamera;
    min-width:0;
    margin:0 !important;
    padding:8px 10px !important;
  }
}
@media (max-width:1180px) {
  .media-studio .media-free-camera-grid { grid-template-columns:1fr; }
}
@media (min-width:901px) and (max-width:1180px) {
  body.dual-screen-control-ui .media-studio .media-pages section[data-page="movement"].active {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "title"
      "plan"
      "freeCamera"
      "cameraMode"
      "cameraFov"
      "keyframeState"
      "cameraTimeline"
      "legacy"
      "time" !important;
  }
}


/* 2026-10-07 — Free Camera v2: always-visible Studio toolbar */
.media-studio .media-free-camera-toolbar {
  display:grid;
  grid-template-columns:auto minmax(150px,1fr) minmax(110px,.55fr);
  gap:8px;
  align-items:center;
  margin:0 12px 10px;
  padding:7px 9px;
  border:1px solid rgba(112,181,232,.14);
  border-radius:10px;
  background:rgba(4,13,22,.52);
}
.media-studio .media-free-camera-toolbar.is-active { border-color:rgba(111,198,255,.46); background:rgba(8,31,48,.62); }
.media-studio .media-free-camera-toolbar > button {
  min-height:32px; padding:7px 11px; border:1px solid rgba(119,190,239,.24); border-radius:8px;
  background:rgba(15,38,56,.72); color:#b7d4e8; font:600 8px/1 "Space Grotesk",sans-serif; letter-spacing:.055em; white-space:nowrap;
}
.media-studio .media-free-camera-toolbar > button.active { border-color:rgba(111,198,255,.52); background:rgba(27,79,111,.72); color:#fff; }
.media-studio .media-free-camera-toolbar > label { margin:0; min-height:32px; display:grid; grid-template-columns:auto minmax(100px,1fr); gap:7px; align-items:center; }
.media-studio .media-free-camera-toolbar > label > span,
.media-studio .media-free-camera-toolbar-speed > span { color:#71899c; font:500 7.5px/1 "Space Grotesk",sans-serif; text-transform:uppercase; letter-spacing:.045em; white-space:nowrap; }
.media-studio .media-free-camera-toolbar select { min-width:0; height:30px; }
.media-studio .media-free-camera-toolbar-speed { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:32px; padding:0 7px; }
.media-studio .media-free-camera-toolbar-speed output { color:#c9e5f7; font:600 8.5px/1 "JetBrains Mono",monospace; white-space:nowrap; }
@media (max-width:900px) { .media-studio .media-free-camera-toolbar { grid-template-columns:1fr; margin:0 8px 8px; } }
body.dual-screen-control-ui .media-studio .media-free-camera-toolbar { margin:0 10px 8px; }


/* Media Studio — reusable JSON shots and real-time camera path capture. */
.media-studio .media-plan-json-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.media-studio .media-plan-json-actions input[type=file] { display:none; }
.media-studio .media-trajectory-actions { grid-template-columns:minmax(0,1fr) auto; align-items:center; margin-top:2px; }
.media-studio .media-trajectory-actions button { min-height:36px; border-color:rgba(216,99,105,.42); color:#f6b0ad; font-size:10px; }
.media-studio .media-trajectory-actions button.is-active { background:rgba(187,44,57,.25); border-color:rgba(255,95,111,.75); color:#fff; animation:media-trajectory-pulse 1.2s ease-in-out infinite; }
.media-studio .media-trajectory-actions output { min-width:92px; text-align:right; font:600 10px/1 'JetBrains Mono',monospace; color:#a9d8fa; font-variant-numeric:tabular-nums; }
@keyframes media-trajectory-pulse { 50% { box-shadow:0 0 0 2px rgba(255,100,111,.12); } }

/* Media Studio only: direction hint for a selected target outside the camera view.
   DOM overlay over the live canvas; never part of the photo/video frame buffer. */
.media-studio-preview-fx .media-studio-target-indicator {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: min(190px, 55%);
  min-height: 32px;
  padding: 5px 11px 5px 7px;
  border: 1px solid rgba(120, 198, 255, .65);
  border-radius: 18px;
  background: rgba(6, 22, 38, .85);
  box-shadow: 0 3px 20px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255,255,255,.04);
  color: #e8f7ff;
  font: 600 11px/1.25 "JetBrains Mono", monospace;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9;
  white-space: nowrap;
}
.media-studio-preview-fx .media-studio-target-indicator[hidden] { display: none !important; }
.media-studio-target-indicator__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #8cd4ff;
  font: bold 22px/1 system-ui, sans-serif;
  transform-origin: center;
}
.media-studio-target-indicator__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Voyager 1: direct SPICE optical selector beside the dashboard title. */
.voyager-quick-optics{margin-left:auto;display:inline-flex;flex:0 0 auto;align-items:center;overflow:hidden;border:1px solid rgba(128,194,241,.25);border-radius:7px;background:rgba(6,20,33,.65)}
.voyager-quick-optics[hidden]{display:none!important}
.voyager-quick-optics>button{min-height:25px;padding:5px 8px;border:0;background:transparent;color:#90a8bb;cursor:pointer;font:600 9px/1 "JetBrains Mono",monospace;white-space:nowrap}
.voyager-quick-optics>button+button{border-left:1px solid rgba(128,194,241,.18)}
.voyager-quick-optics>button.active{background:rgba(67,140,198,.30);color:#eaf6ff}
.voyager-quick-optics>button:hover:not(:disabled){color:#fff;background:rgba(67,140,198,.19)}
.voyager-quick-optics>button:disabled{opacity:.35;cursor:default}
@media(max-width:520px){.voyager-quick-optics>button{padding:4px 5px;font-size:8px}}

/* Spacecraft trajectory mode: exclusive three-position toggle. */
.spacecraft-trail-setting{display:grid;gap:9px;margin:8px 0 14px;padding:8px 2px;color:#dce6f2;font-size:12px}
.spacecraft-trail-segments{display:flex;width:100%;border:1px solid rgba(130,190,240,.22);border-radius:8px;overflow:hidden;background:rgba(11,21,35,.6)}
.spacecraft-trail-segments button{flex:1;min-width:0;padding:9px 3px;border:0;border-right:1px solid rgba(130,190,240,.17);background:transparent;color:#9caec5;font-size:10px;cursor:pointer}
.spacecraft-trail-segments button:last-child{border-right:0}
.spacecraft-trail-segments button.active{background:rgba(73,149,219,.25);color:#cbeaff;box-shadow:inset 0 0 0 1px rgba(116,196,255,.32)}
.spacecraft-trail-segments button:disabled{opacity:.32;cursor:not-allowed}
.media-trail-setting{display:grid;gap:8px;padding:10px 0}
.media-trail-setting > span{font-size:12px;color:var(--text-primary,#e3edff)}
.media-trail-setting .spacecraft-trail-segments button{font-size:10px}
.media-trail-setting.is-compact{padding:4px 0}
.media-trail-setting.is-compact > span{font-size:10px}

/* Single-screen contextual dashboard: selection pins open the same panel as hover.
   The empty-canvas click unpins it; dual-screen layout stays permanently docked. */
@media (min-width:901px) and (hover:hover) and (pointer:fine) {
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel.is-selection-open {
    transform:translateX(0);
    box-shadow:18px 0 54px rgba(0,0,0,.30),inset -1px 0 rgba(173,210,241,.08);
    overflow-x:hidden;
    overflow-y:auto;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel.is-selection-open > * {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}

/* Dynamic controls live inside the selected body's dashboard, not the global menu. */
.dashboard-content-visibility {display:grid; gap:8px; padding:11px 13px; margin:9px 0 12px; border:1px solid rgba(159,181,205,.13);border-radius:9px;background:rgba(10,19,30,.28)}
.dashboard-content-visibility[hidden], .dashboard-content-visibility [hidden] {display:none!important}
.dashboard-content-visibility .switch-row {margin:0; padding:4px 0;}
.dashboard-content-visibility .section-title {margin-bottom:2px;}
.dashboard-content-visibility .context-visibility-note {font:400 9px "JetBrains Mono",monospace;color:#788a9d;line-height:1.45}

/* Independent mission trace toggles in the Media Studio scene/keyframe views. */
.media-trail-setting .media-switch{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}
.media-trail-setting.is-compact .media-switch{font-size:11px}

/* 2026-10-17 v11 — single-screen dashboard/header cleanup */
.topbar{display:none!important}
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel{
    top:24px;
    max-height:calc(100vh - 44px);
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls{
    top:68px;
  }
}

@media (max-width:900px){
  .camera-distance-hud{top:12px;left:12px;min-width:160px;padding:8px 12px 9px}
  .camera-distance-hud__value{font-size:18px}
}


.camera-distance-hud {
  position: fixed;
  z-index: 8;
  top: 16px;
  left: 16px;
  min-width: 184px;
  padding: 10px 14px 11px;
  display: grid;
  gap: 4px;
  border-radius: 14px;
  border: 1px solid rgba(140, 189, 242, .18);
  background: linear-gradient(180deg, rgba(10, 16, 27, .82), rgba(5, 9, 16, .72));
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.camera-distance-hud__label {
  margin: 0;
  color: #7fb7f1;
  font: 600 10px/1.1 "Space Grotesk", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.camera-distance-hud__value {
  color: #f4f8ff;
  font: 700 20px/1.05 "Space Grotesk", sans-serif;
  letter-spacing: .02em;
}


/* 2026-10-17 V15 — Dashboard drawer and distance readout. */
/* A true value-only HUD: same typography as the simulated clock, no decoration. */
.camera-distance-hud {
  position: fixed !important;
  z-index: 28 !important;
  top: 11px !important;
  left: 24px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  text-align: left !important;
}
.camera-distance-hud[hidden] { display: none !important; }
.camera-distance-hud__label {
  display: block;
  margin: 0 0 4px !important;
  color: rgba(119,176,255,.68) !important;
  font: 600 8px/1 "Space Grotesk", sans-serif !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}
.camera-distance-hud__value {
  display: block;
  color: rgba(237,246,255,.88) !important;
  font: 500 18px/1.15 "Space Grotesk", Manrope, sans-serif !important;
  letter-spacing: .035em !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 18px rgba(111,174,255,.16) !important;
}
/* Remove the clock's decorative right rule as requested. */
#app > .simulation-time-corner,
.simulation-time-corner {border:0 !important;border-left:0 !important;border-right:0 !important;}
.exploration-date {border-right:0 !important;}

/* Dashboard handle: single authoritative layout and state definition.
   No inherited pseudo-handle and no coupling to panel scroll/content height. */
.dashboard-panel-toggle { display:none; }
.dashboard-panel-toggle__label,
.dashboard-panel-toggle__icon { pointer-events:none; }

@media (min-width:901px) and (hover:hover) and (pointer:fine) {
  /* Closed drawer and transient hover share the same body-visibility state. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel {
    top:68px !important;
    max-height:calc(100vh - 88px) !important;
    transform:translateX(calc(-100% + 30px)) !important;
    transition:transform .28s cubic-bezier(.22,1,.36,1) !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls {
    top:68px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:is(:hover,:focus-within,.is-selection-open),
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode):has(> .dashboard-panel-toggle:is(:hover,:focus-visible)) > .info-panel {
    transform:translateX(0) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:is(:hover,:focus-within,.is-selection-open) > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode):has(> .dashboard-panel-toggle:is(:hover,:focus-visible)) > .info-panel > * {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  /* Reclose a click-pinned drawer immediately even while the pointer remains
     over its former open position. Pointerleave clears this guard. */
  #app.dashboard-handle-dismissed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel {
    transform:translateX(calc(-100% + 30px)) !important;
    overflow:hidden !important;
  }
  #app.dashboard-handle-dismissed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel > * {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* One vertical reading axis: the double chevron is immediately below
     the vertical label, never in a separate horizontal column. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .dashboard-panel-toggle {
    display:flex;
    position:fixed;
    z-index:30;
    top:var(--dashboard-handle-center, 260px);
    left:0;
    width:30px;
    height:150px;
    min-height:0;
    margin:0;
    padding:0 2px;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    color:#9cc9ff;
    opacity:.9;
    cursor:pointer;
    box-sizing:border-box;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    transform:translateY(-50%);
    transition:left .28s cubic-bezier(.22,1,.36,1),opacity .12s ease;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .dashboard-panel-toggle:is(:hover,:focus-visible) { color:#d9ecff; }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .dashboard-panel-toggle .dashboard-panel-toggle__label {
    display:block;
    flex:none;
    margin:0;
    padding:0;
    color:inherit;
    font:600 8px/1 "JetBrains Mono",monospace;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:none;
    opacity:1;
    visibility:visible;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .dashboard-panel-toggle .dashboard-panel-toggle__icon {
    display:block;
    flex:0 0 12px;
    width:12px;
    height:12px;
    margin:0;
    padding:0;
    fill:none;
    overflow:visible;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:rotate(90deg); /* double V points right when closed */
    transform-origin:center;
    opacity:1;
    visibility:visible;
  }
  /* Auto-open on hover: hide BOTH items, while retaining the button's hit
     area so the pointer can move into the drawer without flicker. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .dashboard-panel-toggle:not([aria-expanded="true"]):is(:hover,:focus-visible) > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel:is(:hover,:focus-within) + .dashboard-panel-toggle:not([aria-expanded="true"]) > * {
    opacity:0;
    visibility:hidden;
  }
  /* Explicit click selection pins the panel. Center the handle in the visible
     panel rectangle, NOT relative to the amount or kind of metric content. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel.is-selection-open + .dashboard-panel-toggle {
    left:calc(var(--dashboard-panel-width, 400px) - 30px);
    top:var(--dashboard-panel-center, var(--dashboard-handle-center, 260px));
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel.is-selection-open + .dashboard-panel-toggle .dashboard-panel-toggle__icon {
    transform:rotate(-90deg); /* double V points left to fold */
  }
  /* Give the visible handle its own 30px strip without covering telemetry. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel.is-selection-open {
    padding-right:48px;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel::after {
    content:none !important;
    display:none !important;
  }
}
@media (max-width:900px) {
  .camera-distance-hud{top:10px !important;left:12px !important;}
  .camera-distance-hud__label{font-size:7px !important;}
  .camera-distance-hud__value{font-size:16px !important;}
}

/* 2026-10-17 V19 — Navigation rail uses the same vertical label + double V
   as Dashboard. Purely decorative: navigation still opens by hover/focus. */
.navigation-rail-handle { display:none; pointer-events:none; }
@media (min-width:901px) and (hover:hover) and (pointer:fine) {
  /* Retire the legacy standalone pseudo-label, preventing duplicates. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls::after {
    content:none !important;
    display:none !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls > .navigation-rail-handle {
    position:absolute;
    display:flex;
    top:50%;
    left:0;
    width:30px;
    height:150px;
    min-height:0;
    margin:0;
    padding:0 2px;
    box-sizing:border-box;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    transform:translateY(-50%);
    color:#9cc9ff;
    opacity:.9;
    visibility:visible;
    pointer-events:none;
    transition:opacity .12s ease, visibility 0s linear .12s;
  }
  /* Explicitly exempt this decorative rail from the old generic
     closed-drawer rule that hides every direct Navigation child. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:not(:hover):not(:focus-within) > .navigation-rail-handle {
    opacity:.9;
    visibility:visible;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls > .navigation-rail-handle .navigation-rail-handle__label {
    display:block;
    margin:0;
    padding:0;
    font:600 8px/1 "JetBrains Mono",monospace;
    letter-spacing:.13em;
    color:inherit;
    text-transform:uppercase;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    white-space:nowrap;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls > .navigation-rail-handle .navigation-rail-handle__icon {
    display:block;
    width:12px;
    height:12px;
    flex:0 0 12px;
    margin:0;
    padding:0;
    fill:none;
    overflow:visible;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:rotate(-90deg); /* opposite to the left-side Dashboard rail */
    transform-origin:center;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .view-controls:is(:hover,:focus-within) > .navigation-rail-handle {
    opacity:0;
    visibility:hidden;
  }
}

/* 2026-10-17 V21 — pedagogical: retain Mars/Jupiter while suppressing only
   their moon submenu and expansion controls (single-screen and dual-screen). */
#app > .view-controls .view-group.pedagogical-body-only > .view-group-row > .view-group-toggle,
#app > .view-controls .view-group.pedagogical-body-only > .view-submenu {
  display: none !important;
}

/* 2026-10-19 — Dashboard contextuel moderne -------------------------------- */
.info-panel .dashboard-title-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.info-panel .dashboard-title-copy{
  flex:1 1 auto;
  min-width:0;
}
.info-panel .dashboard-body-type{
  margin-top:6px;
  color:#8ebeff;
  font:600 9px/1.2 "Space Grotesk",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.info-panel .dashboard-settings-toggle{
  display:none;
}
.info-panel .dashboard-settings-toggle:not([hidden]){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:0 0 auto;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(116,178,243,.18);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(18,32,50,.72), rgba(8,16,28,.82));
  color:#d8ebff;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 10px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(180,220,255,.05);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.info-panel .dashboard-settings-toggle:hover,
.info-panel .dashboard-settings-toggle:focus-visible{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(23,42,65,.82), rgba(11,20,34,.94));
  border-color:rgba(136,201,255,.34);
  color:#f2f8ff;
  box-shadow:0 12px 30px rgba(0,0,0,.24), 0 0 0 1px rgba(114,181,249,.08) inset;
}
.info-panel .dashboard-settings-toggle.is-open{
  border-color:rgba(134,201,255,.38);
  background:linear-gradient(180deg, rgba(31,58,91,.88), rgba(13,25,41,.96));
  color:#ffffff;
}
.dashboard-settings-toggle__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(114,181,249,.12);
  color:#9bd0ff;
  font-size:9px;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.info-panel .dashboard-settings-toggle.is-open .dashboard-settings-toggle__icon{
  transform:rotate(45deg);
  background:rgba(114,181,249,.22);
  color:#def0ff;
}
.info-panel .dashboard-context-settings-panel{
  display:grid;
  gap:10px;
  margin:0 0 14px;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(7,16,28,.76), rgba(4,10,18,.92));
  border:1px solid rgba(100,156,221,.12);
  box-shadow:inset 0 1px 0 rgba(180,220,255,.04), 0 16px 34px rgba(0,0,0,.18);
}
.info-panel .dashboard-context-settings-panel[hidden]{display:none!important}
.info-panel .dashboard-settings-group{
  display:grid;
  gap:8px;
  margin:0;
}
.info-panel .dashboard-settings-group .section-title{
  margin:0 0 2px;
  color:#8298af;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.info-panel .dashboard-context-settings-panel .switch-row{
  min-height:40px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(133,186,240,.08);
  color:#d4e3f2;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.info-panel .dashboard-context-settings-panel .switch-row:hover,
.info-panel .dashboard-context-settings-panel .switch-row:focus-within{
  transform:translateY(-1px);
  background:rgba(255,255,255,.045);
  border-color:rgba(132,196,255,.17);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}
.info-panel .dashboard-context-settings-panel .context-visibility-note{
  display:block;
  margin-top:2px;
  color:#6f879f;
  font-size:8px;
  line-height:1.45;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid{
  gap:10px;
  padding:10px 0 4px;
  border-bottom:0;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid > div{
  min-height:62px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(118,169,226,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(185,220,255,.03);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid > div:hover{
  transform:translateY(-1px);
  border-color:rgba(132,196,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.016));
  box-shadow:0 12px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(197,229,255,.03);
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid small{
  margin-bottom:6px;
  color:#7a90a6;
  font-size:8px;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid strong{
  color:#edf4fb;
  font-size:12px;
}
.info-panel .dashboard-texture-status{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.info-panel .dashboard-texture-heading,
.info-panel .dashboard-linked-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.info-panel .dashboard-texture-title,
.info-panel #dashboard-linked-title{
  color:#7f95ab;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.info-panel .dashboard-texture-quality{
  color:#eef5ff;
  font:700 10px/1 "Space Grotesk",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.info-panel .dashboard-texture-levels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(42px,1fr));
  gap:6px;
}
.info-panel .dashboard-texture-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  padding:0 8px;
  border-radius:10px;
  border:1px solid transparent;
  background:rgba(255,255,255,.03);
  color:#7f93a8;
  font:700 8px/1 "JetBrains Mono",monospace;
  letter-spacing:.06em;
  user-select:none;
}
.info-panel .dashboard-texture-chip.is-active{
  background:linear-gradient(180deg, rgba(111,174,255,.28), rgba(68,122,197,.24));
  border-color:rgba(145,205,255,.44);
  color:#f3f8ff;
  box-shadow:0 0 0 1px rgba(111,174,255,.08) inset, 0 12px 22px rgba(28,78,136,.18);
}
.info-panel .dashboard-texture-chip.is-ghost{
  color:#697d91;
  background:rgba(255,255,255,.018);
}
.info-panel .system-state-description-block{
  margin-top:14px;
  padding:0;
  border-left:0;
}
.info-panel .system-state-description{
  margin:0;
  color:#bdcde0;
  font-size:10.5px;
  line-height:1.72;
}
.info-panel .dashboard-linked-objects{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.info-panel .dashboard-linked-groups{
  display:grid;
  gap:10px;
}
.info-panel .dashboard-linked-group{
  display:grid;
  gap:6px;
}
.info-panel .dashboard-linked-group__label{
  color:#7d91a6;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.info-panel .dashboard-linked-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.info-panel .dashboard-linked-chip{
  border:1px solid rgba(122,181,242,.10);
  border-radius:11px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
  color:#dceaf8;
  min-height:34px;
  padding:0 12px;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.info-panel .dashboard-linked-chip:hover,
.info-panel .dashboard-linked-chip:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(137,202,255,.28);
  background:linear-gradient(180deg, rgba(101,160,227,.20), rgba(41,86,137,.18));
  color:#f4f9ff;
  box-shadow:0 10px 20px rgba(0,0,0,.14);
}
@media (max-width: 520px){
  .info-panel .dashboard-settings-toggle__label{display:none}
  .info-panel .dashboard-settings-toggle:not([hidden]){padding:0 10px;min-width:34px}
  .info-panel .dashboard-texture-levels{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* 2026-10-20 — Instrumental adaptive dashboard (no tabs / secondary drawer). */
/* One instrument accent for all bodies. No per-body palette. */
#mobile-info-panel { --instrument-accent:#91c9ef; }
#app > .info-panel .dashboard-body-type {color:var(--instrument-accent);}
/* Scientific measurements read as one instrument readout, without decorative cards. */
#app:not(.dual-screen-control) > .info-panel .data-grid{
  gap:18px 20px;
  padding:18px 2px 12px;
  border:0;
}
#app:not(.dual-screen-control) > .info-panel .data-grid > div,
#app:not(.dual-screen-control) > .info-panel .data-grid > div:hover{
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  transform:none;
}
#app:not(.dual-screen-control) > .info-panel .data-grid small{
  margin-bottom:5px;
  color:#75889e;
  font:600 8px/1.35 "JetBrains Mono",monospace;
  letter-spacing:.12em;
}
#app:not(.dual-screen-control) > .info-panel .data-grid strong{
  font:600 12px/1.4 "JetBrains Mono",monospace;
  letter-spacing:.015em;
  color:#eaf1fa;
  overflow-wrap:anywhere;
}
/* Native VT texture ruler follows the active body and performance ceiling. */
#app > .info-panel .dashboard-texture-status{
  display:grid;
  gap:10px;
  margin-top:19px;
}
#app > .info-panel .dashboard-texture-heading{
  justify-content:flex-start;
  align-items:center;
  gap:8px;
}
#app > .info-panel .dashboard-texture-title{
  color:#758da4;
  font:600 8px/1.2 "JetBrains Mono",monospace;
  letter-spacing:.13em;
}
#app > .info-panel .dashboard-texture-quality{
  color:var(--instrument-accent);
  font:700 10px/1.2 "JetBrains Mono",monospace;
}
#app > .info-panel .dashboard-texture-levels{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:4px;
  pointer-events:none;
  user-select:none;
}
#app > .info-panel .dashboard-texture-chip,
#app > .info-panel .dashboard-texture-chip.is-ghost{
  min-width:0;
  min-height:28px;
  padding:0;
  border:0;
  border-radius:6px;
  background:rgba(121,150,181,.055);
  color:#8e9aab;
  box-shadow:none;
  font:600 8px/1 "JetBrains Mono",monospace;
}
#app > .info-panel .dashboard-texture-chip.is-ghost{
  /* A faint, readable cell: listed for orientation, but unavailable here. */
  color:#536577;
  background:rgba(121,150,181,.018);
}
#app > .info-panel .dashboard-texture-chip.is-active{
  color:#ffffff;
  background:#294a63;
  border:0;
  box-shadow:none;
  font-weight:700;
}
/* State-dependent direct controls with minimal chrome and a discreet status LED. */
#app > .info-panel .dashboard-instrument-controls{
  display:grid;
  gap:16px;
  margin:20px 0 0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
#app > .info-panel .dashboard-instrument-controls[hidden]{display:none!important;}
#app > .info-panel .dashboard-instrument-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:-5px;
  color:#8ca6bb;
  font:600 8px/1.4 "JetBrains Mono",monospace;
  letter-spacing:.12em;
}
#app > .info-panel .dashboard-instrument-heading__status{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--instrument-accent);
  opacity:.6;
  box-shadow:0 0 9px color-mix(in srgb, var(--instrument-accent) 35%, transparent);
}
#app > .info-panel .dashboard-instrument-controls .dashboard-settings-group{
  display:grid;
  grid-template-columns:repeat(auto-fill,44px);
  justify-content:start;
  column-gap:9px;
  row-gap:10px;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
#app > .info-panel .dashboard-instrument-controls .dashboard-settings-group[hidden]{display:none!important;}
#app > .info-panel .dashboard-instrument-controls .dashboard-settings-group .section-title{
  grid-column:1/-1;
  margin:0 0 1px;
  padding:0;
  font:600 8px/1.4 "JetBrains Mono",monospace;
  color:#6f869b;
  letter-spacing:.1em;
}
#app > .info-panel .dashboard-instrument-controls .switch-row{
  box-sizing:border-box;
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  background:#131e2a;
  border:0;
  border-radius:8px;
  text-align:center;
  cursor:pointer;
  color:#8697a8;
  transition:background .18s ease,color .18s ease;
  isolation:isolate;
}
#app > .info-panel .dashboard-instrument-controls .switch-row[hidden]{display:none!important;}
#app > .info-panel .dashboard-instrument-controls .switch-row::before{display:none;content:none;}
#app > .info-panel .dashboard-instrument-controls .dashboard-control-icon{
  display:block;
  position:relative;
  z-index:1;
  width:23px;
  height:23px;
  flex:none;
  pointer-events:none;
}
/* Existing accessible control label doubles as a delayed tooltip on hover/focus. */
#app > .info-panel .dashboard-instrument-controls .switch-row > span:first-of-type{
  position:absolute;
  z-index:12;
  left:0;
  bottom:calc(100% + 8px);
  width:max-content;
  min-width:0;
  max-width:190px;
  padding:7px 10px;
  border-radius:7px;
  background:#22354a;
  color:#edf4fb;
  font:500 10px/1.2 "Space Grotesk",sans-serif;
  white-space:normal;
  text-align:center;
  overflow-wrap:break-word;
  box-shadow:0 5px 16px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:none;
  pointer-events:none;
  transition:opacity .16s ease, visibility .16s ease;
}
#app > .info-panel .dashboard-instrument-controls .switch-row:hover > span:first-of-type,
#app > .info-panel .dashboard-instrument-controls .switch-row:focus-within > span:first-of-type{
  opacity:1;
  visibility:visible;
}
#app > .info-panel .dashboard-instrument-controls .switch-row:has(input:checked){
  background:#1b3346;
  border:0;
  color:#eaf6ff;
}
#app > .info-panel .dashboard-instrument-controls .switch-row:has(input:checked) .dashboard-control-icon{
  color:#b4e2ff;
}
#app > .info-panel .dashboard-instrument-controls .switch-row:hover{
  transform:none;
  background:#254055;
}
#app > .info-panel .dashboard-instrument-controls .switch-row:focus-within{
  outline:2px solid var(--instrument-accent);
  outline-offset:2px;
}
#app > .info-panel .dashboard-instrument-controls .switch-row input{
  position:absolute;
  opacity:0;
}
#app > .info-panel .dashboard-instrument-controls .switch-row .switch,
#app > .info-panel .dashboard-instrument-controls .switch-row input:checked + .switch{
  position:absolute;
  width:5px;
  height:5px;
  top:5px;
  right:5px;
  border:0;
  border-radius:50%;
  background:#536170;
  box-shadow:none;
  transform:none;
}
#app > .info-panel .dashboard-instrument-controls .switch-row input:checked + .switch{
  background:var(--instrument-accent);
  box-shadow:0 0 7px color-mix(in srgb,var(--instrument-accent) 55%,transparent);
}
#app > .info-panel .dashboard-instrument-controls .switch-row .switch::after{display:none!important;}
#app > .info-panel .dashboard-instrument-controls .context-visibility-note{grid-column:1/-1;}
/* Keep descriptive content below the instruments, with no separator rule. */
#app > .info-panel .system-state-description-block{
  margin-top:20px;
  padding:0;
  border:0;
}
#app > .info-panel .dashboard-linked-objects{margin-top:17px;}
#app > .info-panel .dashboard-linked-chip{
  border:0;
  background:rgba(121,163,208,.07);
  border-radius:8px;
  transition:background .18s ease,color .18s ease;
}
#app > .info-panel .dashboard-linked-chip::after{
  content:none;
  display:none;
}
#app > .info-panel .dashboard-linked-chip:hover,
#app > .info-panel .dashboard-linked-chip:focus-visible{
  transform:none;
  border:0;
  background:color-mix(in srgb,var(--instrument-accent) 13%,#101d2b);
  box-shadow:none;
}
@media(max-width:900px){
  #app > .info-panel .dashboard-texture-levels{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:3px;
  }
  #app > .info-panel .dashboard-texture-chip{min-height:27px;font-size:7px;}
  #app > .info-panel .dashboard-instrument-controls .dashboard-settings-group{
    grid-template-columns:repeat(auto-fill,44px);
    gap:9px;
  }
  #app > .info-panel .dashboard-instrument-controls .switch-row{
    width:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
  }
}
@media(prefers-reduced-motion:reduce){
  #app > .info-panel .dashboard-instrument-controls .switch-row,
  #app > .info-panel .dashboard-linked-chip{transition:none;}
}
#app > .info-panel .dashboard-texture-status[hidden],
#app > .info-panel .dashboard-linked-objects[hidden]{display:none!important;}
/* Specificity equal to the legacy context metrics selectors. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid > div,
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid > div:hover{
  min-height:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  border-radius:0;
  transform:none;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid{
  gap:17px 20px;
  padding:19px 2px 11px;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid small{
  color:#7e91a7;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > .info-panel .data-grid strong{
  color:#e8f1fa;
}

/* Texture cells are truly borderless, including active/focus/hover inherited states. */
#app > .info-panel .dashboard-texture-levels .dashboard-texture-chip,
#app > .info-panel .dashboard-texture-levels .dashboard-texture-chip.is-active,
#app > .info-panel .dashboard-texture-levels .dashboard-texture-chip.is-ghost{
  border:0;
  box-shadow:none;
}
#app > .info-panel .dashboard-texture-levels .dashboard-texture-chip.is-active{color:#fff;}

/* 2026-10-20 — Dashboard pictograms: clearer icons + luminous pilot lights */
#app > .info-panel .dashboard-instrument-controls .dashboard-control-icon{
  width:24px;
  height:24px;
  stroke-width:1.75;
}
#app > .info-panel .dashboard-instrument-controls .switch-row{
  overflow:visible;
}
#app > .info-panel .dashboard-instrument-controls .switch-row .switch{
  position:absolute;
  width:8px;
  height:8px;
  top:5px;
  right:5px;
  display:none;
  border-radius:50%;
}
#app > .info-panel .dashboard-instrument-controls .switch-row .switch::before{content:none;}
#app > .info-panel .dashboard-instrument-controls .switch-row input:checked + .switch{
  display:block;
  background:radial-gradient(circle at 35% 35%, #ffffff 0%, #e8fbff 14%, #8fe4ff 30%, #2f9bff 52%, #1b63ff 72%, #0c2e8f 88%, #06153f 100%);
  box-shadow:
    0 0 0 1px rgba(186,228,255,.22),
    0 0 10px rgba(59,162,255,.62),
    0 0 18px rgba(27,99,255,.46),
    inset 0 0 7px rgba(255,255,255,.58);
}
#app > .info-panel .dashboard-instrument-controls .switch-row input:checked + .switch::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(70,158,255,.58) 0%, rgba(34,104,255,.28) 42%, rgba(18,55,160,0) 74%);
}
#app > .info-panel .dashboard-instrument-controls .switch-row:has(input:checked) .dashboard-control-icon{
  color:#d8f3ff;
  filter:drop-shadow(0 0 3px rgba(103,214,255,.22));
}
#app > .info-panel .dashboard-instrument-controls .switch-row:hover .dashboard-control-icon,
#app > .info-panel .dashboard-instrument-controls .switch-row:focus-within .dashboard-control-icon{
  color:#cde7fb;
}


/* Stellarius custom pictograms — 2026-10-20 ------------------------------
   Original white SVG assets from Icons(2).zip; updated trace from trace.svg.
   Source artwork is 512 × 512 with intrinsic margins. A 32px <img> gives
   about 22–24px of visible glyph, matching the previous instrument scale. */
#app > .info-panel .dashboard-instrument-controls img.dashboard-control-icon{
  display:block;
  width:32px;
  height:32px;
  min-width:32px;
  flex:0 0 32px;
  object-fit:contain;
  opacity:.70;
  filter:none;
  transform:none;
  border:0;
  background:none;
  pointer-events:none;
  user-select:none;
}
#app > .info-panel .dashboard-instrument-controls .switch-row:has(input:checked) img.dashboard-control-icon{
  opacity:1;
  filter:drop-shadow(0 0 3px rgba(103,214,255,.20));
}
#app > .info-panel .dashboard-instrument-controls .switch-row:hover img.dashboard-control-icon,
#app > .info-panel .dashboard-instrument-controls .switch-row:focus-within img.dashboard-control-icon{
  opacity:1;
}

/* 2026-10-20 — Single-row contextual instruments, without category headings.
   Keep existing inputs/sections intact so appearance, visibility and trail
   controls retain independent contextual availability and event handling. */
#app > .info-panel .dashboard-instrument-controls:not([hidden]){
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:8px;
  margin-top:17px;
  padding:0;
  min-width:0;
}
#app > .info-panel .dashboard-instrument-controls .dashboard-instrument-heading,
#app > .info-panel .dashboard-instrument-controls .dashboard-settings-group .section-title,
#app > .info-panel .dashboard-instrument-controls .context-visibility-note{
  display:none!important;
}
/* Flatten only visible groups into one horizontal sequence of actual buttons. */
#app > .info-panel .dashboard-instrument-controls .dashboard-settings-group:not([hidden]){
  display:contents;
}
#app > .info-panel .dashboard-instrument-controls .switch-row:not([hidden]){
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  margin:0;
}
/* Narrow dashboard: maintain a single line and fully operable touch targets.
   Scroll horizontally only when its available space cannot contain them. */
@media(max-width:900px){
  #app > .info-panel .dashboard-instrument-controls:not([hidden]){
    gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    min-height:46px;
  }
  #app > .info-panel .dashboard-instrument-controls::-webkit-scrollbar{display:none;}
  #app > .info-panel .dashboard-instrument-controls .switch-row:not([hidden]){
    flex:0 0 38px;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
  }
}

/* 2026-10-21 — General settings: compact icon controls --------------------
   Existing native checkboxes stay wired to UIController / SceneManager.
   The orbital trail is controlled here only, never in the body's dashboard. */
#interface-settings-panel .general-icon-controls{
  display:grid;
  gap:12px;
  padding-top:13px;
  border-bottom:0;
}
#interface-settings-panel .general-icon-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
  overflow:visible;
  padding:2px 0 4px;
}
#interface-settings-panel .general-icon-button{
  box-sizing:border-box;
  display:flex;
  position:relative;
  flex:0 0 40px;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  margin:0;
  padding:0;
  border:0;
  border-radius:8px;
  background:#131e2a;
  color:#a7b8c8;
  isolation:isolate;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
#interface-settings-panel .general-icon-button:hover,
#interface-settings-panel .general-icon-button:focus-within{background:#254055;color:#edf7ff;transform:none;}
#interface-settings-panel .general-icon-button:has(input:checked){background:#1b3346;color:#f0f8ff;}
#interface-settings-panel .general-icon-button:focus-within{outline:2px solid #74a9ff;outline-offset:2px;}
#interface-settings-panel .general-icon-button input[type="checkbox"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  margin:0;
  cursor:pointer;
}
#interface-settings-panel .general-icon-button .general-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  opacity:.66;
  filter:none;
}
#interface-settings-panel .general-icon-button:has(input:checked) .general-icon{opacity:1;filter:drop-shadow(0 0 3px rgba(103,214,255,.18));}
#interface-settings-panel .general-icon-button:hover .general-icon{opacity:1;}
#interface-settings-panel .general-icon-button--sound .general-icon--muted{display:block;position:absolute;}
#interface-settings-panel .general-icon-button--sound .general-icon:not(.general-icon--muted){display:none;}
#interface-settings-panel .general-icon-button--sound:has(input:checked) .general-icon--muted{display:none;}
#interface-settings-panel .general-icon-button--sound:has(input:checked) .general-icon:not(.general-icon--muted){display:block;}
#interface-settings-panel .general-icon-debug{
  color:#e3f1ff;
  font:700 10px/1 "JetBrains Mono",monospace;
  letter-spacing:.015em;
  pointer-events:none;
  opacity:.7;
}
#interface-settings-panel .general-icon-button:has(input:checked) .general-icon-debug{opacity:1;}
#interface-settings-panel .general-icon-button .general-icon-label{
  display:block;
  position:absolute;
  left:0;
  bottom:calc(100% + 7px);
  max-width:190px;
  width:max-content;
  padding:7px 9px;
  border-radius:7px;
  background:#22354a;
  color:#edf4fb;
  font:500 10px/1.2 "Space Grotesk",sans-serif;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
  box-shadow:0 5px 16px rgba(0,0,0,.35);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  z-index:15;
  transition:opacity .16s ease,visibility .16s ease;
}
#interface-settings-panel .general-icon-button:hover .general-icon-label,
#interface-settings-panel .general-icon-button:focus-within .general-icon-label{visibility:visible;opacity:1;}
#interface-settings-panel .general-icon-button .switch{
  display:none;
  position:absolute;
  top:4px;
  right:4px;
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  transform:none;
}
#interface-settings-panel .general-icon-button .switch::after{display:none!important;content:none!important;}
#interface-settings-panel .general-icon-button input:checked + .switch{
  display:block;
  background:radial-gradient(circle at 35% 35%,#fff 0%,#e8fbff 14%,#8fe4ff 30%,#2f9bff 52%,#1b63ff 72%,#0c2e8f 88%,#06153f 100%);
  box-shadow:0 0 0 1px rgba(186,228,255,.22),0 0 9px rgba(59,162,255,.66),0 0 15px rgba(27,99,255,.48),inset 0 0 6px rgba(255,255,255,.52);
}
#interface-settings-panel .general-icon-button input:checked + .switch::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(70,158,255,.52),rgba(34,104,255,.18) 48%,transparent 76%);
}
#interface-settings-panel .general-icon-controls .audio-volume-row{
  min-height:30px;
  margin:0;
  padding:3px 2px;
  border:0;
  background:none;
}
@media(prefers-reduced-motion:reduce){
  #interface-settings-panel .general-icon-button,
  #interface-settings-panel .general-icon-button .general-icon-label{transition:none;}
}


/* 2026-10-21 — Top sheet navigation + right-edge general controls */
#mobile-view-panel.view-controls.topsheet-navigation{
  position:fixed !important;
  top:70px !important;
  left:50% !important;
  right:auto !important;
  width:min(1560px, calc(100vw - 36px)) !important;
  max-height:min(56vh, 720px);
  padding:14px 18px 18px !important;
  border-radius:0 0 24px 24px !important;
  border-width:0 1px 1px 1px !important;
  transform:translateX(-50%) !important;
  display:block !important;
  overflow:auto !important;
  z-index:28;
}
#mobile-view-panel.view-controls.topsheet-navigation::after{display:none !important;}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-rail-handle{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  margin:0 0 14px;
  pointer-events:none;
}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-rail-handle__label{
  color:#e7f3ff;
  font:600 14px/1.1 "Poppins",sans-serif;
  letter-spacing:.03em;
  text-transform:none;
}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-rail-handle__icon{display:none !important;}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:18px;
  align-items:start;
}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:12px;
  border-right:1px solid rgba(255,255,255,.08);
}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section:last-child{border-right:0;padding-right:0;}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-title{
  color:#f0f7ff;
  font:600 12px/1.2 "Poppins",sans-serif;
  margin-bottom:4px;
}
#mobile-view-panel.view-controls.topsheet-navigation button,
#mobile-view-panel.view-controls.topsheet-navigation .nav-sheet-link{
  width:100% !important;
  min-height:36px;
  justify-content:flex-start !important;
  padding:8px 10px !important;
  font-size:11px !important;
  border-radius:10px;
}
#mobile-view-panel.view-controls.topsheet-navigation button span{font-size:12px;}
#mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-links{display:grid;gap:8px;}
#mobile-view-panel.view-controls.topsheet-navigation .nav-sheet-link--wide{
  background:rgba(68,106,154,.10);
  color:#d9eaff;
}
#mobile-view-panel.view-controls.topsheet-navigation .nav-sheet-link--wide:hover{background:rgba(88,135,196,.16);}
#mobile-view-panel.view-controls.topsheet-navigation .view-group{position:relative;width:100% !important;}
#mobile-view-panel.view-controls.topsheet-navigation .view-group-row{display:flex;width:100%;gap:6px;align-items:stretch;}
#mobile-view-panel.view-controls.topsheet-navigation .view-group-row>[data-view],
#mobile-view-panel.view-controls.topsheet-navigation .view-group-row>.view-group-label{flex:1 1 auto;min-width:0;width:auto !important;}
#mobile-view-panel.view-controls.topsheet-navigation .view-group-toggle{flex:0 0 32px !important;width:32px !important;justify-content:center !important;padding:0 !important;}
#mobile-view-panel.view-controls.topsheet-navigation .view-submenu{
  position:static !important;
  inset:auto !important;
  width:100% !important;
  padding:0 !important;
  margin:4px 0 0 0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  display:grid !important;
  gap:6px;
}
#mobile-view-panel.view-controls.topsheet-navigation .view-submenu::after{display:none !important;}
#mobile-view-panel.view-controls.topsheet-navigation .view-submenu > button{width:100% !important;padding-left:12px !important;}
#mobile-view-panel.view-controls.topsheet-navigation .spacecraft-view-group,
#mobile-view-panel.view-controls.topsheet-navigation .deep-space-view-group{margin-top:0;padding-top:0;border-top:0;}
@media (max-width: 1180px){
  #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid{grid-template-columns:repeat(2,minmax(220px,1fr));}
  #mobile-view-panel.view-controls.topsheet-navigation{max-height:min(62vh, 760px);} 
}
@media (max-width: 760px){
  #mobile-view-panel.view-controls.topsheet-navigation{
    top:56px !important;
    width:calc(100vw - 16px) !important;
    padding:12px !important;
    max-height:min(70vh, 720px);
  }
  #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid{grid-template-columns:1fr;gap:14px;}
  #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section{border-right:0;padding-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px;}
  #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section:last-child{border-bottom:0;padding-bottom:0;}
}

#scene-general-controls{
  position:fixed;
  z-index:29;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:64px;
  padding:8px;
  border-radius:18px 0 0 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#scene-general-controls .scene-tool-button{
  position:relative;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  border:0;
  border-radius:12px;
  background:rgba(20,40,62,.82);
  color:#cfe4fa;
  cursor:pointer;
  padding:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
#scene-general-controls .scene-tool-button:hover,
#scene-general-controls .scene-tool-button:focus-within{background:rgba(31,56,84,.92);color:#ffffff;outline:none;}
#scene-general-controls .scene-tool-button input[type="checkbox"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  margin:0;
}
#scene-general-controls .scene-tool-button .scene-tool-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  opacity:.88;
  pointer-events:none;
}
#scene-general-controls .scene-tool-button--sound .scene-tool-icon--muted{display:block;position:absolute;}
#scene-general-controls .scene-tool-button--sound .scene-tool-icon:not(.scene-tool-icon--muted){display:none;}
#scene-general-controls .scene-tool-button--sound:has(input:checked) .scene-tool-icon--muted{display:none;}
#scene-general-controls .scene-tool-button--sound:has(input:checked) .scene-tool-icon:not(.scene-tool-icon--muted){display:block;}
#scene-general-controls .scene-tool-button .general-icon-debug{
  font:700 10px/1 "JetBrains Mono",monospace;
  letter-spacing:.08em;
  color:#f0f8ff;
}
#scene-general-controls .scene-tool-button .scene-tool-label{
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(6,13,22,.94);
  color:#eef7ff;
  font:500 11px/1 "Poppins",sans-serif;
  letter-spacing:.02em;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease, transform .16s ease, visibility 0s linear .16s;
}
#scene-general-controls .scene-tool-button:hover .scene-tool-label,
#scene-general-controls .scene-tool-button:focus-within .scene-tool-label{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(-2px);
  transition-delay:0s;
}
#scene-general-controls .scene-tool-button .switch{
  position:absolute;
  width:8px;
  height:8px;
  top:6px;
  right:6px;
  display:none;
  border-radius:50%;
}
#scene-general-controls .scene-tool-button input:checked + .switch,
#scene-general-controls .scene-tool-button:has(input:checked) .switch{
  display:block;
  background:radial-gradient(circle at 35% 35%, #ffffff 0%, #e8fbff 14%, #8fe4ff 30%, #2f9bff 52%, #1b63ff 72%, #0c2e8f 88%, #06153f 100%);
  box-shadow:0 0 0 1px rgba(186,228,255,.22),0 0 10px rgba(59,162,255,.62),0 0 18px rgba(27,99,255,.46),inset 0 0 7px rgba(255,255,255,.58);
}
#scene-general-controls .scene-tool-button input:checked + .switch::before,
#scene-general-controls .scene-tool-button:has(input:checked) .switch::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(70,158,255,.58) 0%, rgba(34,104,255,.28) 42%, rgba(18,55,160,0) 74%);
}
#scene-general-controls .scene-language-code{
  position:absolute;
  bottom:5px;
  right:6px;
  font:700 8px/1 "JetBrains Mono",monospace;
  color:#a4ceff;
  letter-spacing:.08em;
}
#interface-settings-panel .interface-language-block,
#interface-settings-panel .general-icon-controls{display:none !important;}
#interface-settings-panel .scene-general-support{display:block;}
#interface-settings-panel .audio-volume-row{display:none !important;}
@media (max-width: 760px){
  #scene-general-controls{
    top:auto;
    bottom:112px;
    right:8px;
    transform:none;
    width:56px;
    padding:6px;
    gap:6px;
  }
  #scene-general-controls .scene-tool-button{width:44px;height:44px;border-radius:11px;}
}


/* 2026-10-21 — Scene tools v2: flush right, translucent hover only, no container. */
#app > #scene-general-controls.scene-general-controls{
  position:fixed;
  top:50%;
  right:0 !important;
  left:auto;
  bottom:auto;
  transform:translateY(-50%);
  z-index:29;
  width:42px;
  min-width:42px;
  max-width:42px;
  height:auto;
  margin:0;
  padding:0 !important;
  gap:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#app > #scene-general-controls .scene-tool-button{
  position:relative;
  flex:0 0 40px;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0 !important;
  border-radius:9px !important;
  outline-offset:-2px;
  background:transparent !important;
  box-shadow:none !important;
  color:#d1dfed;
  opacity:.64;
  transition:background .18s ease, opacity .18s ease,color .18s ease;
  font:inherit;
  cursor:pointer;
}
#app > #scene-general-controls .scene-tool-button:hover,
#app > #scene-general-controls .scene-tool-button:focus-visible,
#app > #scene-general-controls .scene-tool-button:focus-within{
  opacity:1;
  color:#f8fcff;
  background:rgba(92,137,181,.14) !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
#app > #scene-general-controls .scene-tool-button:focus-visible,
#app > #scene-general-controls .scene-tool-button:focus-within:has(:focus-visible){
  outline:2px solid rgba(136,198,255,.65);
}
#app > #scene-general-controls .scene-tool-button[hidden]{display:none !important;}
#app > #scene-general-controls .scene-tool-button:has(input:checked),
#app > #scene-general-controls #dual-screen-button[aria-pressed="true"],
#app > #scene-general-controls #scene-fullscreen-button[aria-pressed="true"]{opacity:.92;}
#app > #scene-general-controls .scene-tool-button .scene-tool-icon{
  display:block;
  width:29px;
  height:29px;
  min-width:29px;
  object-fit:contain;
  pointer-events:none;
  opacity:1;
}
#app > #scene-general-controls .scene-tool-button--sound .scene-tool-icon:not(.scene-tool-icon--muted){display:none;}
#app > #scene-general-controls .scene-tool-button--sound:has(input:checked) .scene-tool-icon--muted{display:none;}
#app > #scene-general-controls .scene-tool-button--sound:has(input:checked) .scene-tool-icon:not(.scene-tool-icon--muted){display:block;}
#app > #scene-general-controls .scene-tool-button .scene-tool-svg{
  width:22px;
  height:22px;
  display:block;
  flex:none;
  pointer-events:none;
}
#app > #scene-general-controls .scene-tool-button .scene-tool-glyph--info{
  width:21px;
  height:21px;
  border-radius:50%;
  border:1.6px solid currentColor;
  display:grid;
  place-items:center;
  font:700 15px/1 "Space Grotesk",sans-serif;
  pointer-events:none;
}
#app > #scene-general-controls #scene-language-button .scene-language-code{
  position:static;
  display:block;
  font:700 12px/1 "JetBrains Mono",monospace;
  letter-spacing:.02em;
  color:#f0f7ff;
  pointer-events:none;
}
#app > #scene-general-controls .scene-tool-button .switch{top:5px;right:5px;width:7px;height:7px;}
#app > #scene-general-controls .scene-tool-button--dual-screen .scene-tool-label,
#app > #scene-general-controls .scene-tool-button--fullscreen .scene-tool-label,
#app > #scene-general-controls .scene-tool-button--info .scene-tool-label{
  font-size:11px;
}
#app > #scene-general-controls .scene-tool-button--fullscreen .scene-fullscreen-shrink{display:none;}
#app > #scene-general-controls .scene-tool-button--fullscreen[aria-pressed="true"] .scene-fullscreen-expand{display:none;}
#app > #scene-general-controls .scene-tool-button--fullscreen[aria-pressed="true"] .scene-fullscreen-shrink{display:block;}
#app > #scene-general-controls .scene-tool-button--dual-screen[aria-pressed="true"] .scene-tool-svg{
  filter:drop-shadow(0 0 4px rgba(97,172,242,.45));
}
@media (max-height:650px){
  #app > #scene-general-controls.scene-general-controls{
    top:56px;
    bottom:74px;
    transform:none;
    justify-content:flex-start;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  #app > #scene-general-controls::-webkit-scrollbar{display:none;}
  #app > #scene-general-controls .scene-tool-button{
    flex:0 0 34px;
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
  }
}
@media(max-width:760px){
  #app > #scene-general-controls.scene-general-controls{
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    right:0 !important;
    width:40px;
    min-width:40px;
    max-width:40px;
    padding:0 !important;
    gap:3px;
  }
  #app > #scene-general-controls .scene-tool-button{
    flex:0 0 38px;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
  }
}
@media(max-width:760px) and (max-height:650px){
  #app > #scene-general-controls.scene-general-controls{
    top:62px;
    bottom:88px;
    transform:none;
    overflow-y:auto;
    overflow-x:hidden;
    justify-content:flex-start;
  }
}
@media(prefers-reduced-motion:reduce){
  #app > #scene-general-controls .scene-tool-button{transition:none;}
}
/* Override inherited mobile top-toolbar offsets on the relocated help button. */
#app > #scene-general-controls .scene-tool-button{
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
}


/* 2026-10-21 — Corrective: top sheet has a genuine collapsed state. */
#app > #navigation-sheet-toggle.navigation-sheet-toggle{
  position:fixed;
  z-index:32;
  top:14px;
  left:150px;
  right:auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:29px;
  padding:5px 11px;
  border:0;
  border-radius:8px;
  background:rgba(17,29,45,.72);
  color:#bbd4eb;
  font:600 10px/1.2 "Poppins",sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .17s ease,color .17s ease;
}
#app > #navigation-sheet-toggle.navigation-sheet-toggle:hover,
#app > #navigation-sheet-toggle.navigation-sheet-toggle:focus-visible,
#app > #navigation-sheet-toggle.navigation-sheet-toggle.is-open{
  background:rgba(34,55,79,.86);
  color:#f3f9ff;
}
#app > #navigation-sheet-toggle .navigation-sheet-toggle__chevron{
  font-size:17px;
  line-height:1;
  display:inline-block;
  transition:transform .18s ease;
}
#app > #navigation-sheet-toggle.is-open .navigation-sheet-toggle__chevron{transform:rotate(180deg);}
#app > #mobile-view-panel.view-controls.topsheet-navigation{
  /* Closed even under older always-visible and hover/focus rules. */
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(-50%,-16px) !important;
  transition:opacity .20s ease,transform .23s ease,visibility 0s linear .23s !important;
  overflow:auto !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation.is-open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(-50%,0) !important;
  transition:opacity .20s ease,transform .23s ease,visibility 0s linear 0s !important;
}
/* The obsolete collapsed rail rules also target direct children. */
#app > #mobile-view-panel.view-controls.topsheet-navigation.is-open > *{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-rail-handle{
  pointer-events:none !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation #navigation-sheet-close{
  position:absolute;
  top:9px;
  right:13px;
  z-index:2;
  display:grid !important;
  place-items:center;
  width:29px !important;
  min-width:29px;
  min-height:29px;
  padding:0 !important;
  border:0;
  background:rgba(255,255,255,.06);
  color:#d7e9fb;
  font:500 21px/1 sans-serif !important;
  border-radius:7px;
  cursor:pointer;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation #navigation-sheet-close:hover{
  background:rgba(137,190,235,.19);
}
@media(max-width:760px){
  #app > #navigation-sheet-toggle.navigation-sheet-toggle{
    left:50%;
    top:8px;
    transform:translateX(-50%);
  }
}
@media(prefers-reduced-motion:reduce){
  #app > #mobile-view-panel.view-controls.topsheet-navigation,
  #app > #navigation-sheet-toggle.navigation-sheet-toggle{transition:none !important;}
}

/* Scene buttons: one and ONLY one luminous LED. Hide the legacy switch knob. */
#app > #scene-general-controls .scene-tool-button > .switch{
  display:none !important;
  position:absolute !important;
  top:5px !important;
  right:5px !important;
  width:7px !important;
  height:7px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  transform:none !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
#app > #scene-general-controls .scene-tool-button > .switch::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}
#app > #scene-general-controls .scene-tool-button > .switch::before{
  content:none !important;
  display:none !important;
}
#app > #scene-general-controls .scene-tool-button > input:checked + .switch{
  display:block !important;
  background:radial-gradient(circle at 35% 35%, #fff 0%, #d4f4ff 16%, #5ebdff 42%, #2069eb 70%, #0b2b73 100%) !important;
  box-shadow:0 0 1px rgba(233,248,255,.65),0 0 7px rgba(54,145,255,.65),0 0 13px rgba(26,95,223,.42) !important;
}
#app > #scene-general-controls .scene-tool-button > input:checked + .switch::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(78,161,255,.36),transparent 72%);
}

/* Remove legacy vertical navigation-handle styling inside the horizontal topsheet. */
#app > #mobile-view-panel.view-controls.topsheet-navigation > .navigation-rail-handle{
  position:static !important;
  top:auto !important;
  left:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  margin:0 0 14px !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation > .navigation-rail-handle .navigation-rail-handle__label{
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  transform:none !important;
  display:block !important;
  font:600 13px/1.2 "Poppins",sans-serif !important;
  color:#e7f3ff !important;
  letter-spacing:.02em !important;
}


/* 2026-10-21 — Four custom Settings icons; preserve existing button behavior. */
.top-toolbar #screenshot-button > .top-toolbar-svg-icon,
.top-toolbar #inspection-light-button > .top-toolbar-svg-icon{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
  flex:none;
  pointer-events:none;
}
/* Match the size and opacity used by the original right-edge icons. */
#app > #scene-general-controls .scene-tool-icon--info,
#app > #scene-general-controls .scene-tool-icon--dual{
  display:block;
  width:27px;
  height:27px;
  object-fit:contain;
  pointer-events:none;
}
#app > #scene-general-controls #dual-screen-button[aria-pressed="true"] .scene-tool-icon--dual{
  filter:drop-shadow(0 0 4px rgba(97,172,242,.45));
}

/* 2026-10-21 — Right-side command rail: active background instead of LED.  */
/* Keep the native checkboxes as the single source of truth for all toggles. */
#app > #scene-general-controls .scene-tool-button > .switch,
#app > #scene-general-controls .scene-tool-button > input:checked + .switch {
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  background:none !important;
  box-shadow:none !important;
}
#app > #scene-general-controls .scene-tool-button > .switch::before,
#app > #scene-general-controls .scene-tool-button > .switch::after,
#app > #scene-general-controls .scene-tool-button > input:checked + .switch::before,
#app > #scene-general-controls .scene-tool-button > input:checked + .switch::after {
  display:none !important;
  content:none !important;
  box-shadow:none !important;
  background:none !important;
}
/* Neutral state stays transparent; only the selected setting gets a surface. */
#app > #scene-general-controls .scene-tool-button:has(input:checked),
#app > #scene-general-controls #screenshot-button.active,
#app > #scene-general-controls #screenshot-button[aria-pressed="true"],
#app > #scene-general-controls #inspection-light-button[aria-pressed="true"],
#app > #scene-general-controls #scene-fullscreen-button[aria-pressed="true"],
#app > #scene-general-controls #dual-screen-button[aria-pressed="true"] {
  opacity:1 !important;
  background:rgba(41,102,153,.45) !important;
  color:#f0f8ff !important;
  box-shadow:none !important;
  border:0 !important;
}
#app > #scene-general-controls .scene-tool-button:has(input:checked):hover,
#app > #scene-general-controls #screenshot-button.active:hover,
#app > #scene-general-controls #inspection-light-button[aria-pressed="true"]:hover,
#app > #scene-general-controls #scene-fullscreen-button[aria-pressed="true"]:hover,
#app > #scene-general-controls #dual-screen-button[aria-pressed="true"]:hover {
  background:rgba(54,123,174,.60) !important;
}
#app > #scene-general-controls #screenshot-button .scene-tool-icon,
#app > #scene-general-controls #inspection-light-button .scene-tool-icon {
  display:block;
  width:29px;
  height:29px;
  object-fit:contain;
  flex:none;
}
#app > #scene-general-controls #inspection-light-button:disabled {
  opacity:.28 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:not-allowed;
}
#app > #scene-general-controls #inspection-light-button.available {
  opacity:.72;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#d1dfed;
  cursor:pointer;
}
#app > #scene-general-controls #inspection-light-button.available:hover {
  opacity:1;
  color:#fff;
  background:rgba(92,137,181,.14) !important;
  box-shadow:none !important;
}
#app > #scene-general-controls #inspection-light-button.available[aria-pressed="true"],
#app > #scene-general-controls #inspection-light-button.available.active {
  opacity:1 !important;
  background:rgba(41,102,153,.45) !important;
  color:#f0f8ff !important;
  box-shadow:none !important;
}
/* Many commands can be visible when Media Studio and dual-screen are enabled. */
@media (max-height:760px){
  #app > #scene-general-controls.scene-general-controls {
    top:48px !important;
    bottom:66px !important;
    height:auto !important;
    max-height:calc(100dvh - 114px) !important;
    transform:none !important;
    overflow-y:auto !important;
    overflow-x:hidden;
    align-items:center;
    justify-content:flex-start;
    scrollbar-width:none;
  }
  #app > #scene-general-controls::-webkit-scrollbar { display:none; }
}


/* 2026-10-21 — Menu and performance controls belong to the right scene rail. */
#app > #scene-general-controls #navigation-sheet-toggle.navigation-sheet-toggle{
  position:relative !important;
  inset:auto !important;
  flex:0 0 auto;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#cfe4fa;
  justify-content:center !important;
  transform:none !important;
  gap:0 !important;
}
#app > #scene-general-controls #navigation-sheet-toggle.navigation-sheet-toggle:hover,
#app > #scene-general-controls #navigation-sheet-toggle.navigation-sheet-toggle:focus-visible{
  background:rgba(90,140,184,.16) !important;
}
#app > #scene-general-controls #navigation-sheet-toggle.navigation-sheet-toggle.is-open{
  background:rgba(41,102,153,.45) !important;
  color:#f0f8ff;
}
#app > #scene-general-controls #scene-performance-button[aria-expanded="true"]{
  background:rgba(41,102,153,.45) !important;
  color:#f0f8ff !important;
  opacity:1;
}
/* Suppress UA title flyouts: hover help is our in-scene scene-tool-label. */
#scene-performance-popover.scene-performance-popover{
  position:fixed;
  z-index:41;
  right:52px;
  top:50%;
  width:min(310px,calc(100vw - 76px));
  max-height:min(430px,calc(100dvh - 24px));
  overflow:auto;
  padding:16px;
  border:1px solid rgba(126,169,210,.19);
  border-radius:16px;
  background:rgba(9,18,30,.97);
  color:#ecf4ff;
  box-shadow:0 16px 42px rgba(0,0,0,.48);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
#scene-performance-popover[hidden]{display:none !important;}
#scene-performance-popover .scene-performance-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
}
#scene-performance-popover .scene-performance-header strong{
  font:600 13px/1.3 "Poppins",sans-serif;
}
#scene-performance-popover #scene-performance-close{
  border:0;
  background:transparent;
  color:#a8bdd1;
  font-size:23px;
  line-height:1;
  width:30px;
  height:30px;
  border-radius:8px;
  cursor:pointer;
}
#scene-performance-popover #scene-performance-close:hover{background:rgba(255,255,255,.08);color:#fff;}
#scene-performance-popover .section-block.performance-block{margin:0;padding:0;background:none;border:0;}
#scene-performance-popover .performance-mode-row{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:12px;
}
#scene-performance-popover #performance-mode{
  width:100%;
  min-height:38px;
  padding:6px 10px;
  border:1px solid rgba(152,190,225,.20);
  border-radius:9px;
  background:#142638;
  color:#edf5ff;
}
#scene-performance-popover #performance-detail{
  display:block;
  margin-top:12px;
  color:#8ba7be;
  line-height:1.55;
}
@media(max-width:760px){
  #app > #scene-general-controls #navigation-sheet-toggle.navigation-sheet-toggle{
    width:38px !important;height:38px !important;
    min-width:38px !important;min-height:38px !important;
  }
  #scene-performance-popover.scene-performance-popover{right:42px;width:min(290px,calc(100vw - 56px));}
}


/* 2026-10-21 — Real side-sheet layout: scene viewport BETWEEN independent panels. */
#app {
  --drawer-rail-width:44px;
  --drawer-dashboard-width:min(400px,calc(100vw - 190px));
  --drawer-navigation-width:min(390px,calc(100vw - 190px));
  --scene-left-occupancy:0px;
  --scene-right-occupancy:var(--drawer-rail-width);
}
#app.scene-dashboard-open { --scene-left-occupancy:var(--drawer-dashboard-width); }
#app.scene-navigation-open { --scene-right-occupancy:calc(var(--drawer-rail-width) + var(--drawer-navigation-width)); }
/* Normal desktop mode: the WebGL host is resized, not visually stretched. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host {
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  left:var(--scene-left-occupancy) !important;
  right:var(--scene-right-occupancy) !important;
  inset-block:0 !important;
  width:auto !important;
  height:auto !important;
  min-width:1px;
  overflow:hidden !important;
  transform:none !important;
  transition:none !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host #space-canvas {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  transform:none !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host .voyager-nac-optical-mask,
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host .iss-native-video-mask {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host .voyager-nac-optical-mask::before {
  width:min(100%,100vh) !important;
  height:min(100%,100vh) !important;
}
/* Dashboard occupies the LEFT side, irrespective of hover/focus pseudo states. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel {
  position:fixed !important;
  left:0 !important;
  right:auto !important;
  top:0 !important;
  bottom:0 !important;
  width:var(--drawer-dashboard-width) !important;
  height:100dvh !important;
  max-height:none !important;
  min-height:0 !important;
  border-radius:0 18px 18px 0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  box-sizing:border-box;
  transform:translateX(-100%) !important;
  transition:transform .22s cubic-bezier(.22,1,.36,1) !important;
  z-index:28 !important;
  pointer-events:none !important;
}
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel {
  transform:translateX(0) !important;
  pointer-events:auto !important;
}
/* Restore content visibility when the previous left rail rule hides it. */
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel > * {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle {
  display:flex !important;
  position:fixed !important;
  left:0 !important;
  transform:translateY(-50%) !important;
  pointer-events:auto !important;
  z-index:31 !important;
  transition:left .22s cubic-bezier(.22,1,.36,1) !important;
}
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle {
  left:calc(var(--drawer-dashboard-width) - 30px) !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle > * {
  opacity:1 !important;
  visibility:visible !important;
}
/* Right sheet replaces the top sheet. Its right edge stays just left of tools. */
#app > #mobile-view-panel.view-controls.topsheet-navigation {
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  right:var(--drawer-rail-width) !important;
  left:auto !important;
  width:var(--drawer-navigation-width) !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  padding:22px 20px 28px !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
  border-radius:18px 0 0 18px !important;
  background:linear-gradient(180deg,rgba(13,20,30,.985),rgba(5,10,18,.99)) !important;
  border-width:0 0 0 1px !important;
  transform:translateX(calc(100% + var(--drawer-rail-width))) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .22s !important;
  z-index:28 !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation.is-open {
  transform:translateX(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-rail-handle {
  margin-bottom:20px !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid {
  display:flex !important;
  flex-direction:column !important;
  gap:20px !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section {
  border-right:0 !important;
  border-bottom:1px solid rgba(145,185,226,.10) !important;
  padding:0 0 18px !important;
  gap:7px !important;
  width:100% !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section:last-child {
  border:0 !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-title {
  font-size:12px !important;
  letter-spacing:.015em;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation #navigation-sheet-close {
  top:15px !important;
  right:14px !important;
}
#app > #scene-general-controls { right:0 !important; z-index:32 !important; }
@media(max-width:980px){
  #app {
    --drawer-dashboard-width:min(340px,calc(100vw - 190px));
    --drawer-navigation-width:min(340px,calc(100vw - 190px));
  }
}
@media(max-width:760px){
  #app {
    --drawer-rail-width:38px;
    --drawer-dashboard-width:max(150px,calc(100vw - 208px));
    --drawer-navigation-width:max(150px,calc(100vw - 208px));
  }
  #app > #mobile-view-panel.view-controls.topsheet-navigation { padding:18px 12px 28px !important; }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel { padding:16px 12px !important; }
  #mobile-ui-backdrop { display:none !important; }
}
@media(prefers-reduced-motion:reduce){
  #app > #mobile-view-panel.view-controls.topsheet-navigation,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel {
    transition:none !important;
  }
}

/* Viewport HUDs stay attached to the visible scene rather than behind sidebars. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #camera-distance-hud {
  left:calc(var(--scene-left-occupancy) + 22px) !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud {
  right:calc(var(--scene-right-occupancy) + 22px) !important;
}

/* Dedicated dual-screen render popup always uses its full physical viewport. */
body.dual-screen-output-ui #app,
body.dual-screen-output-ui #app.scene-navigation-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode),
body.dual-screen-output-ui #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) {
  --scene-left-occupancy:0px !important;
  --scene-right-occupancy:0px !important;
}
body.dual-screen-output-ui #app > #render-host.render-host {
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
body.dual-screen-output-ui #app > #render-host #space-canvas {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}


/* 2026-10-21 — Synchronized, slower side-sheet animations.
   A side sheet and its reserved 3D viewport space use the same timing,
   so the scene never snaps to its final width before the panel arrives. */
#app {
  --scene-panel-duration:650ms;
  --scene-panel-easing:cubic-bezier(.22,.72,.22,1);
}

/* Move the render host's layout edges smoothly; ResizeObserver in
   SceneManager resizes the actual renderer to the host as it moves. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host {
  transition:left var(--scene-panel-duration) var(--scene-panel-easing),
             right var(--scene-panel-duration) var(--scene-panel-easing) !important;
}

#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel {
  transition:transform var(--scene-panel-duration) var(--scene-panel-easing) !important;
}

#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle {
  transition:left var(--scene-panel-duration) var(--scene-panel-easing) !important;
}

#app > #mobile-view-panel.view-controls.topsheet-navigation {
  transition:transform var(--scene-panel-duration) var(--scene-panel-easing),
             opacity 420ms ease,
             visibility 0s linear var(--scene-panel-duration) !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation.is-open {
  transition:transform var(--scene-panel-duration) var(--scene-panel-easing),
             opacity 420ms ease,
             visibility 0s linear 0s !important;
}

/* The HUD tracks the actual camera viewport rather than jumping. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #camera-distance-hud {
  transition:left var(--scene-panel-duration) var(--scene-panel-easing) !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud {
  transition:right var(--scene-panel-duration) var(--scene-panel-easing) !important;
}

@media (prefers-reduced-motion:reduce) {
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle,
  #app > #mobile-view-panel.view-controls.topsheet-navigation,
  #app > #mobile-view-panel.view-controls.topsheet-navigation.is-open,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #camera-distance-hud,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud {
    transition:none !important;
  }
}


/* NASA Eyes-inspired single-category drilldown. The right sheet continues to
   reserve WebGL viewport width and retains the 650 ms sliding transition. */
#app > #mobile-view-panel.view-controls.topsheet-navigation {
  padding:0 0 22px !important;
  --nav-drill-pad:24px;
}
/* Legacy multi-column layout cannot force hidden category panes back into view. */
#app > #mobile-view-panel.view-controls.topsheet-navigation [hidden],
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid[hidden],
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section[hidden],
#app > #mobile-view-panel.view-controls.topsheet-navigation #navigation-category-list[hidden],
#app > #mobile-view-panel.view-controls.topsheet-navigation #navigation-drill-back[hidden] {
  display:none !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation > .navigation-rail-handle {display:none !important;}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-header {
  position:sticky;
  top:0;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:center;
  height:66px;
  padding:0 52px;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(18,22,30,.985),rgba(12,17,25,.975));
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  color:#f3f6fa;
  font:600 14px/1.25 'Poppins',sans-serif;
  letter-spacing:.01em;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-back {
  position:absolute !important;
  top:12px;
  left:10px;
  width:42px !important;
  height:42px;
  min-height:42px;
  padding:9px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  border:0;
  color:#e6eff8;
  background:transparent;
  border-radius:8px;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-back svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation #navigation-sheet-close {
  position:absolute !important;
  top:12px !important;
  right:10px !important;
  width:42px !important;
  height:42px;
  min-height:42px;
  display:flex !important;
  align-items:center;
  justify-content:center !important;
  font-size:22px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:8px !important;
  padding:4px !important;
  z-index:9;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list {
  display:flex;
  flex-direction:column;
  padding:18px var(--nav-drill-pad) 32px;
  min-width:0;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button {
  display:flex;
  align-items:center;
  justify-content:space-between !important;
  padding:17px 10px !important;
  width:100% !important;
  min-height:64px;
  gap:10px;
  border:0;
  border-radius:0;
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#e1e7ee;
  text-align:left;
  font:500 13px/1.35 'Poppins',sans-serif !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:focus-visible {
  background:rgba(65,110,163,.13) !important;
  color:#fff;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-chevron {
  font-size:24px;
  color:#c9d8eb;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid {
  display:block !important;
  padding:17px var(--nav-drill-pad) 42px;
  margin:0;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section {
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  gap:0 !important;
  min-width:0;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section > .navigation-sheet-title {
  display:none !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section > button,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button[data-view],
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > .view-group-label {
  min-height:49px !important;
  height:auto;
  width:100% !important;
  font:400 12px/1.45 'Poppins',sans-serif !important;
  padding:12px 8px !important;
  margin:0 !important;
  border-radius:4px !important;
  color:#d5dce6;
  text-align:left;
  background:transparent !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section > button:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button[data-view]:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > .view-group-label:hover {
  color:#fff;
  background:rgba(65,110,163,.13) !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .view-group-row {align-items:stretch;}
#app > #mobile-view-panel.view-controls.topsheet-navigation .view-group-row > .view-group-toggle {
  flex:0 0 36px !important;
  min-height:49px;
  width:36px !important;
  display:flex;
  justify-content:center !important;
  align-items:center;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .view-group:not(.expanded) > .view-submenu {
  display:none !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .view-group.expanded > .view-submenu {
  display:grid !important;
  max-height:none !important;
  overflow:visible !important;
  padding:0 0 7px 12px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .view-group.expanded > .view-submenu button {
  min-height:43px !important;
  width:100% !important;
  padding:10px 9px !important;
  color:#b9c7d6;
  background:transparent !important;
  font:400 12px/1.4 'Poppins',sans-serif !important;
}
/* The spatial scale is a global choice: keep it in the FIRST navigation
   level, visible alongside the category choices on desktop and mobile. */
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > .navigation-scale-option {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 10px 17px;
  padding:4px 0 21px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-title {
  color:#9db1c6;
  font:600 10px/1.4 'Poppins',sans-serif;
  letter-spacing:.075em;
  text-transform:uppercase;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch {
  align-self:stretch;
  width:100%;
  margin:0;
  border-radius:7px;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch > button {
  min-height:44px;
  padding:10px 6px;
  justify-content:center !important;
  text-align:center !important;
  font:500 12px/1.25 'Poppins',sans-serif;
}
@media (max-width:760px) {
  #app {
    /* Reserve usable WebGL space while giving the navigation a readable width. */
    --drawer-navigation-width:min(310px,calc(100vw - 98px));
  }
  #app > #mobile-view-panel.view-controls.topsheet-navigation {
    --nav-drill-pad:17px;
    padding:0 0 25px !important;
  }
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-header {
    height:60px;
    padding:0 43px;
  }
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-title {font-size:13px;}
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid {padding-top:9px;}
}

/* Moon-group rows share the same left alignment as ordinary planet links. */
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button[data-view],
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button.view-group-label,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-submenu > button {
  justify-content:flex-start !important;
  text-align:left !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button[data-view],
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button.view-group-label {
  flex-direction:row !important;
  align-items:center !important;
}


/* 2026-10-21 · Right rail / NASA navigation / panel stability revision. */
/* The original header branding is deliberately restored, without its old toolbar. */
#app > header.topbar {
  display:flex !important;
  position:fixed !important;
  z-index:34 !important;
  top:0 !important;left:0 !important;right:auto !important;
  width:auto !important;
  height:64px !important;
  min-height:0 !important;
  padding:12px 14px !important;
  margin:0 !important;
  transform:none !important;
  pointer-events:none !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#app > header.topbar .brand-logo {
  display:block !important;
  width:min(170px,32vw) !important;
  max-height:42px !important;
  object-fit:contain !important;
  border-radius:0 !important;
}
#app > header.topbar .topbar-actions {display:none !important;}
/* The logo does not cover the Dashboard heading when the left panel opens. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel {
  padding-top:70px !important;
  border-radius:0 !important;
}
/* Distance is centred within the VISIBLE WebGL viewport, also with both drawers. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #camera-distance-hud {
  left:var(--scene-left-occupancy) !important;
  right:var(--scene-right-occupancy) !important;
  width:auto !important;
  transform:none !important;
  text-align:center !important;
  z-index:30 !important;
}
/* Right sheet overlays the controls; when opened it owns the entire right edge. */
#app.scene-navigation-open{--scene-right-occupancy:var(--drawer-navigation-width) !important;}
#app > #mobile-view-panel.view-controls.topsheet-navigation {
  right:0 !important;
  z-index:48 !important;
  border-radius:0 !important;
  box-shadow:-12px 0 35px rgba(0,0,0,.26) !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation.is-open {z-index:48 !important;}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-header,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section > button,
#scene-performance-popover.scene-performance-popover {
  border-radius:0 !important;
}
/* User general controls: pin to the edge or retract, leaving a 10px hover tab. */
#app > #scene-general-controls.scene-general-controls {
  z-index:32 !important;
  transition:transform 420ms cubic-bezier(.22,.72,.22,1) !important;
  will-change:transform;
}
#app.scene-rail-unlocked:not(.scene-navigation-open) > #scene-general-controls:not(:hover):not(:focus-within) {
  transform:translateX(calc(100% - 10px)) !important;
}
#app.scene-rail-unlocked > #scene-general-controls::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:10px;
  border-left:2px solid rgba(104,151,213,.65);
  background:rgba(44,78,113,.10);
  pointer-events:none;
}
#app > #scene-general-controls #cinematic-mode-toggle.scene-tool-button,
#app > #scene-general-controls #scene-rail-pin.scene-tool-button {
  position:relative !important;
  inset:auto !important;
  top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
  width:40px !important;height:40px !important;
  min-width:40px !important;min-height:40px !important;
  transform:none !important;
  border:0 !important;
  border-radius:7px !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  opacity:.7;
  color:#e3f0ff;
}
#app > #scene-general-controls #cinematic-mode-toggle:hover,
#app > #scene-general-controls #scene-rail-pin:hover {background:rgba(68,105,145,.16) !important;opacity:1;}
#app > #scene-general-controls #cinematic-mode-toggle[aria-pressed="true"],
#app > #scene-general-controls #cinematic-mode-toggle.active,
#app > #scene-general-controls #scene-rail-pin[aria-pressed="true"] {
  background:rgba(54,115,176,.28) !important;
  opacity:1;
}
#app > #scene-general-controls #cinematic-mode-toggle .scene-tool-icon,
#app > #scene-general-controls #scene-rail-pin .scene-tool-icon {width:21px !important;height:21px !important;}
/* The readouts move into Performance and remain visible there regardless of
   the legacy Debug checkbox, without duplicating the FPS already shown. */
#scene-performance-popover #user-debug-readout.scene-performance-diagnostics {
  position:static !important;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  margin:15px 0 0;
  padding:14px 0 0;
  width:100%;
  border-top:1px solid rgba(150,181,211,.17);
  background:none !important;
  box-shadow:none !important;
}
#scene-performance-popover #user-debug-readout[hidden] {display:none !important;}
#scene-performance-popover #user-debug-fps {display:none !important;}
#scene-performance-popover .user-debug-badge {display:inline-flex;min-height:25px;padding:5px 9px;}
/* Embedded astronomical events inside the NASA-style navigation hierarchy. */
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section--events,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section--missions {width:100% !important;}
#app > #mobile-view-panel.view-controls.topsheet-navigation #astronomical-events-panel.navigation-embedded {
  position:relative !important;
  inset:auto !important;
  top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
  z-index:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  margin:0 !important;
  padding:2px 0 16px !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:visible !important;
}
#app > #mobile-view-panel #astronomical-events-panel .events-panel-heading {display:none !important;}
#app > #mobile-view-panel #astronomical-events-panel .events-list {height:auto !important;max-height:none !important;overflow:visible !important;}
#app > #mobile-view-panel #astronomical-events-panel .events-period-tabs,
#app > #mobile-view-panel #astronomical-events-panel .events-kind-filters {max-width:100%;flex-wrap:wrap;}
/* Square corners everywhere on the two main panels. */
#app > #mobile-view-panel,
#app > #mobile-info-panel,
#app > #mobile-view-panel .navigation-drill-header,
#scene-performance-popover{border-radius:0 !important;}
@media(max-width:760px){
  #app > header.topbar{height:50px !important;padding:7px 8px !important;}
  #app > header.topbar .brand-logo{width:min(115px,30vw) !important;max-height:32px !important;}
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel {padding-top:56px !important;}
  #app > #scene-general-controls #cinematic-mode-toggle.scene-tool-button,
  #app > #scene-general-controls #scene-rail-pin.scene-tool-button {width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;}
}

/* Resilient branding when the source archive excludes the original image. */
#app > header.topbar .brand-logo-fallback {display:none;flex-direction:column;gap:3px;color:#e7f2ff;font:700 21px/1 'Space Grotesk',sans-serif;letter-spacing:.15em;white-space:nowrap;}
#app > header.topbar .brand-logo-fallback small {font:600 7px/1.2 'Space Grotesk',sans-serif;letter-spacing:.3em;color:#83a8d3;}
#app > header.topbar .brand-logo-unavailable .brand-logo {display:none !important;}
#app > header.topbar .brand-logo-unavailable .brand-logo-fallback {display:flex;}
#app.dual-screen-control > header.topbar {display:none !important;}
body.dual-screen-output-ui #app > header.topbar {display:none !important;}
@media(max-width:760px){#app > header.topbar .brand-logo-fallback{font-size:15px;letter-spacing:.09em;}#app > header.topbar .brand-logo-fallback small{font-size:6px;letter-spacing:.11em;}}

/* Guard against simultaneous drawers triggered by a stale mobile dock state. */
@media(max-width:1149px){
  #app.scene-dashboard-open.scene-navigation-open{--scene-left-occupancy:0px !important;}
  #app.scene-dashboard-open.scene-navigation-open > #mobile-info-panel.info-panel{
    transform:translateX(-100%) !important;
    pointer-events:none !important;
  }
}

/* 2026-10-21 — Rail v4: edge-only reveal, a bottom-pinned lock and educational mode. */
/* Always use a top-and-bottom anchored box. Never combine a translateY centring
   offset with the horizontal hide animation: that made the rail slide downward. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
  position:fixed !important;
  top:clamp(48px,7vh,74px) !important;
  bottom:clamp(48px,5vh,72px) !important;
  left:auto !important;
  right:0 !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:center !important;
  overflow:visible !important;
  transform:translate3d(0,0,0) !important;
  transition:transform 520ms cubic-bezier(.22,.72,.22,1) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  will-change:transform;
}
/* Override the old ten-pixel visible tab and its tinted pseudo-element. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode).scene-rail-unlocked > #scene-general-controls.scene-general-controls{
  transform:translate3d(calc(100% + 2px),0,0) !important;
  pointer-events:none !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode).scene-rail-unlocked.scene-rail-peek > #scene-general-controls.scene-general-controls,
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode).scene-rail-unlocked > #scene-general-controls.scene-general-controls:focus-within{
  transform:translate3d(0,0,0) !important;
  pointer-events:auto !important;
}
#app > #scene-general-controls.scene-general-controls::before,
#app > #scene-general-controls.scene-general-controls::after{
  display:none !important;
  content:none !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
/* The tool section can scroll on small-height displays, independently from the
   footer, so the lock stays at the physical bottom of the tool rail. */
#app > #scene-general-controls .scene-rail-tools{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  flex:1 1 auto;
  min-height:0;
  width:42px;
  gap:4px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  overscroll-behavior:contain;
  padding:0;
}
#app > #scene-general-controls .scene-rail-tools::-webkit-scrollbar{display:none;}
#app > #scene-general-controls .scene-rail-footer{
  flex:0 0 auto;
  display:flex;
  width:42px;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(129,162,201,.18);
  margin-top:8px;
  padding-top:6px;
  padding-bottom:max(0px, env(safe-area-inset-bottom));
  background:transparent !important;
}
#app > #scene-general-controls #scene-rail-pin.scene-tool-button{
  position:relative !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  flex:0 0 40px !important;
  margin:0 !important;
}
#scene-rail-hotzone[hidden]{display:none !important;}
#app.scene-rail-unlocked:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-rail-hotzone:not([hidden]){
  position:fixed;
  z-index:31;
  right:0;
  top:clamp(48px,7vh,74px);
  bottom:clamp(48px,5vh,72px);
  width:12px;
  height:auto;
  padding:0;
  margin:0;
  opacity:0;
  background:transparent;
  border:0;
  border-radius:0;
  outline-offset:-2px;
  cursor:pointer;
  display:block;
}
#app.scene-rail-unlocked > #scene-rail-hotzone:focus-visible{outline:1px solid rgba(155,194,231,.65);opacity:1;}
/* The navigation RightSheet always remains above the rail and its invisible trigger. */
#app > #mobile-view-panel.view-controls.topsheet-navigation{z-index:48 !important;}
#app > #scene-general-controls.scene-general-controls{z-index:32 !important;}
@media(max-width:760px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
    top:54px !important;
    bottom:64px !important;
    max-height:none !important;
  }
  #app > #scene-general-controls .scene-rail-tools,
  #app > #scene-general-controls .scene-rail-footer {width:42px;}
  #app > #scene-general-controls #scene-rail-pin.scene-tool-button{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;}
  #app.scene-rail-unlocked:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-rail-hotzone:not([hidden]) {top:54px;bottom:64px;}
}
@media(prefers-reduced-motion:reduce){
  #app > #scene-general-controls.scene-general-controls{transition:none !important;}
}

/* 2026-10-21 — Fixed dashboard footer: controls above texture levels.
   The information scrolls separately; the actual switches and texture LOD
   indicator always stay at the bottom of the expanded Dashboard. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding:0 !important;
  min-height:0 !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:76px 18px 20px;
  scrollbar-width:thin;
  scrollbar-color:rgba(140,177,213,.18) transparent;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock{
  flex:0 0 auto;
  position:relative;
  z-index:2;
  min-width:0;
  margin-top:auto;
  padding:12px 17px 15px;
  background:linear-gradient(to bottom,rgba(9,16,27,.97),rgba(7,14,23,.99));
  border-top:1px solid rgba(139,178,220,.16);
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock:has(> section[hidden]:only-child){display:none;}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock:has(> #dashboard-context-settings-panel[hidden]):has(> #dashboard-texture-status[hidden]){
  display:none;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock #dashboard-context-settings-panel:not([hidden]){
  display:flex !important;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  margin:0 0 10px !important;
  padding:0 !important;
  min-height:42px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
#app > #mobile-info-panel .dashboard-bottom-dock #dashboard-context-settings-panel::-webkit-scrollbar{display:none;}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock #dashboard-context-settings-panel .switch-row:not([hidden]){
  flex:0 0 40px;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock #dashboard-texture-status:not([hidden]){
  margin:0 !important;
  padding:0 !important;
  min-width:0;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.iss-dashboard-active .data-grid{display:none !important;}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region .data-grid small{color:#79b9ff;}
@media(max-width:760px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region{padding:66px 13px 16px;}
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock{padding:10px 12px 13px;}
}
/* The source logo has ample whitespace around its artwork; give it more space
   without reintroducing a top toolbar or covering the controls. */
#app > header.topbar{height:86px !important;padding:10px 15px !important;}
#app > header.topbar .brand-logo{
  width:min(245px,36vw) !important;
  max-height:65px !important;
  object-fit:contain !important;
}
#app > header.topbar .brand-logo-fallback{font-size:26px !important;}
@media(max-width:760px){
  #app > header.topbar{height:60px !important;padding:7px 9px !important;}
  #app > header.topbar .brand-logo{width:min(165px,42vw) !important;max-height:46px !important;}
  #app > header.topbar .brand-logo-fallback{font-size:18px !important;}
}
/* Preserve custom hover labels on taller displays; the inner list scrolls only
   on compact-height screens, where keeping every command reachable wins. */
@media(min-height:850px){
  #app > #scene-general-controls .scene-rail-tools{
    overflow:visible !important;
  }
}


/* 2026-10-21 — Rail v5: release the WebGL strip, bottom-align actions and
   centre the larger Stellarius mark in the expanded Dashboard. */

/* Previous rail code only translated the tools but still reserved 44px for
   them. That unused WebGL margin looked like a permanent black vertical band. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode).scene-rail-unlocked:not(.scene-navigation-open){
  --scene-right-occupancy:0px !important;
}
/* The unlocked rail is a temporary overlay, even while revealed by the edge
   hotzone. It must not shrink/stretch the 3D viewport when hovered. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode).scene-rail-unlocked.scene-rail-peek:not(.scene-navigation-open){
  --scene-right-occupancy:0px !important;
}

/* Keep the original lock in the independent footer as the final action.
   Automatic top margin packs all other actions against it when space allows;
   on short screens, the margin becomes zero and scrolling still works. */
#app > #scene-general-controls .scene-rail-tools{
  justify-content:flex-start !important;
}
#app > #scene-general-controls .scene-rail-tools > label.scene-tool-button:first-of-type{
  margin-top:auto !important;
}
#app > #scene-general-controls .scene-rail-footer{
  order:2 !important;
  margin-top:6px !important;
}
#app > #scene-general-controls #scene-rail-pin.scene-tool-button{
  order:initial !important;
}

/* Hover does not persist after a pointer click. Keyboard tab still has a
   distinct focus-visible affordance; checkbox state stays visually selected. */
#app > #scene-general-controls .scene-tool-button:focus:not(:focus-visible):not(:hover),
#app > #scene-general-controls .scene-tool-button:focus-within:not(:hover):not(:has(:focus-visible)){
  outline:none !important;
}
#app > #scene-general-controls .scene-tool-button:focus-within:not(:hover):not(:has(:focus-visible)){
  background:transparent !important;
  box-shadow:none !important;
}
/* Preserve active states, irrespective of keyboard focus. */
#app > #scene-general-controls .scene-tool-button:has(input:checked),
#app > #scene-general-controls #cinematic-mode-toggle[aria-pressed="true"],
#app > #scene-general-controls #screenshot-button[aria-pressed="true"],
#app > #scene-general-controls #screenshot-button.active,
#app > #scene-general-controls #inspection-light-button[aria-pressed="true"],
#app > #scene-general-controls #scene-fullscreen-button[aria-pressed="true"],
#app > #scene-general-controls #dual-screen-button[aria-pressed="true"]{
  background:rgba(41,102,153,.45) !important;
}

/* Centre a generously-sized image in the dashboard's available width,
   rather than the full browser window. Keep the logo in its existing header
   above the dashboard scrollable area. */
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar{
  width:var(--drawer-dashboard-width) !important;
  min-width:0 !important;
  height:103px !important;
  padding:10px 10px 4px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo{
  display:block !important;
  width:min(360px,100%) !important;
  max-width:100% !important;
  max-height:82px !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback{
  align-items:center !important;
  font-size:30px !important;
  text-align:center !important;
}
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region{
  padding-top:108px !important;
}
@media(max-width:760px){
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar{
    height:82px !important;
    padding:6px 5px 2px !important;
  }
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo{
    width:min(270px,100%) !important;
    max-height:68px !important;
  }
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback{
    font-size:21px !important;
  }
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region{
    padding-top:88px !important;
  }
}

/* v5b — In the previous stylesheet the first Menu button has an ID-scoped
   margin:0 override; safe flex-end aligns the whole scrollable list instead.
   'safe' falls back to top alignment when the content is taller than the rail,
   so upper actions remain reachable with scrolling. */
#app > #scene-general-controls .scene-rail-tools{
  justify-content:safe flex-end !important;
}
#app > #scene-general-controls .scene-rail-tools > #navigation-sheet-toggle{
  margin-top:0 !important;
}


/* 2026-10-21 — GPU-stable side panels and independent tools rail.
   The WebGL backbuffer must NEVER change size when only a side panel moves.
   Render at the full browser viewport, then clip to the unobstructed central
   region and pan the complete set of viewport layers by half the difference
   between left/right panel widths. Perspective remains correct: the cropped
   image has the same vertical FOV as a true narrowed WebGL viewport, with
   no framebuffer resize, no composer reallocation and no canvas stretching.
   Real browser/window resizing is still handled by SceneManager.resize(). */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) {
  --scene-right-occupancy:0px !important;
}
#app.scene-navigation-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) {
  --scene-right-occupancy:var(--drawer-navigation-width) !important;
}
/* Right-side general settings controls overlay the scene regardless of whether
   their padlock is open, closed, or being hovered. Only Navigation reserves it. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host {
  position:fixed !important;
  inset:0 !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  transform:none !important;
  clip-path:inset(0 var(--scene-right-occupancy) 0 var(--scene-left-occupancy)) !important;
  transition:clip-path var(--scene-panel-duration,650ms) var(--scene-panel-easing,cubic-bezier(.22,.72,.22,1)) !important;
}
/* The canvas, the CSS2D label renderer and instrument masks share the SAME
   translation; they all retain the viewport's full pixel dimensions. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > * {
  transform:translate3d(calc((var(--scene-left-occupancy) - var(--scene-right-occupancy)) / 2),0,0) !important;
  transition:transform var(--scene-panel-duration,650ms) var(--scene-panel-easing,cubic-bezier(.22,.72,.22,1)) !important;
}
/* No clip or translation on the dedicated second-monitor renderer. */
body.dual-screen-output-ui #app > #render-host.render-host {
  clip-path:none !important;
  transition:none !important;
}
body.dual-screen-output-ui #app > #render-host.render-host > * {
  transform:none !important;
  transition:none !important;
}
/* The logo occupies the same dashboard-sized header box and image dimensions
   whether the dashboard itself is open or retracted. No size jump on toggles. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar,
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar {
  width:var(--drawer-dashboard-width) !important;
  height:103px !important;
  padding:10px 10px 4px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand,
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand {
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo,
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo {
  display:block !important;
  width:min(360px,100%) !important;
  max-width:100% !important;
  height:auto !important;
  max-height:82px !important;
  object-fit:contain !important;
  object-position:center center !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback,
#app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback {
  align-items:center !important;
  font-size:30px !important;
  text-align:center !important;
}
@media(max-width:760px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar {
    height:82px !important;
    padding:6px 5px 2px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo {
    width:min(270px,100%) !important;
    max-height:68px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback {
    font-size:21px !important;
  }
}
@media(prefers-reduced-motion:reduce){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > * {
    transition:none !important;
  }
}
/* Specificity guard: the old #render-host #space-canvas rule contains three
   ID selectors and otherwise forces transform:none during panel transitions.
   Include the actual canvas ID here so the stage pan wins the cascade. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > :is(#space-canvas,#voyager-nac-optical-mask,#iss-native-video-mask,div) {
  transform:translate3d(calc((var(--scene-left-occupancy) - var(--scene-right-occupancy)) / 2),0,0) !important;
  transition:transform var(--scene-panel-duration,650ms) var(--scene-panel-easing,cubic-bezier(.22,.72,.22,1)) !important;
}
@media(prefers-reduced-motion:reduce){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > :is(#space-canvas,#voyager-nac-optical-mask,#iss-native-video-mask,div) {transition:none !important;}
}


/* 2026-10-21 — Prevent the simulated-time HUD from sitting underneath the
   42px right-hand tools rail. Navigation retains its own reserved width. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud.simulation-time-corner {
  right:calc(var(--scene-right-occupancy, 0px) + 68px) !important;
  transition:right var(--scene-panel-duration, 650ms) var(--scene-panel-easing, cubic-bezier(.22,.72,.22,1)) !important;
}
/* No separator line, extra padding or divider shadow above the last lock.
   The lock remains in the independent footer, at the bottom of the rail. */
#app > #scene-general-controls.scene-general-controls > .scene-rail-footer {
  border-top:0 !important;
  border-bottom:0 !important;
  margin-top:4px !important;
  padding-top:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
#app > #scene-general-controls.scene-general-controls > .scene-rail-footer::before,
#app > #scene-general-controls.scene-general-controls > .scene-rail-footer::after {
  content:none !important;
  display:none !important;
}
@media (prefers-reduced-motion:reduce) {
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud.simulation-time-corner {
    transition:none !important;
  }
}


/* ========================================================================
   2026-10-21 · Mobile NASA Eyes composition. Desktop untouched.
   1. Persistent menu separate from tools
   2. Closed/expanded dashboard as bottomsheet (not side drawer)
   3. Stable WebGL dimensions: mobile UI overlays full-viewport scene
   4. Tools unroll vertically, pin button always reachable
   ======================================================================== */
/* The menu is not a child of the tool rail anymore, at any viewport width. */
#app > #navigation-sheet-toggle.navigation-sheet-toggle{
  position:fixed !important;
  z-index:45 !important;
  inset:14px 12px auto auto !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  display:grid !important;
  place-items:center !important;
  transform:none !important;
  padding:8px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer !important;
  color:#eaf2fc;
  pointer-events:auto !important;
}
#app > #navigation-sheet-toggle.navigation-sheet-toggle .scene-tool-icon{width:24px;height:24px;object-fit:contain;pointer-events:none;}
#app > #navigation-sheet-toggle.navigation-sheet-toggle .scene-tool-label{display:none !important;}
#app > #navigation-sheet-toggle.navigation-sheet-toggle:hover,
#app > #navigation-sheet-toggle.navigation-sheet-toggle:focus-visible,
#app > #navigation-sheet-toggle.navigation-sheet-toggle.is-open{background:rgba(59,93,133,.23) !important;}

@media(max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
    --mobile-sheet-peek:116px;
    --mobile-sheet-open:min(72dvh, 585px);
    --mobile-sheet-height:var(--mobile-sheet-peek);
    --scene-left-occupancy:0px !important;
    --scene-right-occupancy:0px !important;
  }
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
    --mobile-sheet-height:var(--mobile-sheet-open);
    --scene-left-occupancy:0px !important;
    --scene-right-occupancy:0px !important;
  }
  #app.scene-navigation-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
    --scene-left-occupancy:0px !important;
    --scene-right-occupancy:0px !important;
  }
  /* All 3D layers remain full-size. Neither sheet resizes the GPU buffer. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    clip-path:none !important;
    transform:none !important;
    transition:none !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > *,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > :is(#space-canvas,#voyager-nac-optical-mask,#iss-native-video-mask,div){
    transform:none !important;
    transition:none !important;
  }
  /* Header aligned like NASA Eyes, but all Stellarius identity is preserved. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar{
    position:fixed !important;
    z-index:38 !important;
    top:env(safe-area-inset-top) !important;
    left:50% !important;
    right:auto !important;
    width:min(175px,calc(100vw - 190px)) !important;
    height:60px !important;
    min-height:0 !important;
    padding:4px 0 !important;
    transform:translateX(-50%) !important;
    background:transparent !important;
    pointer-events:none !important;
    justify-content:center !important;
    align-items:center !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand{
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    position:static !important;
    height:auto !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo{
    width:100% !important;
    max-width:100% !important;
    max-height:50px !important;
    height:auto !important;
    object-fit:contain !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar .brand-logo-fallback{
    font-size:clamp(13px,4.3vw,21px) !important;
  }
  #app > #navigation-sheet-toggle.navigation-sheet-toggle{
    top:calc(env(safe-area-inset-top) + 9px) !important;
    right:8px !important;
    left:auto !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    transform:none !important;
  }
  /* Distance at the upper-left, independently from the central logo. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #camera-distance-hud.camera-distance-hud{
    position:fixed !important;
    top:calc(env(safe-area-inset-top) + 12px) !important;
    left:10px !important;
    right:auto !important;
    width:min(86px,23vw) !important;
    text-align:left !important;
    transform:none !important;
    z-index:39 !important;
  }
  #app > #camera-distance-hud .camera-distance-hud__label{font-size:7px !important;}
  #app > #camera-distance-hud .camera-distance-hud__value{font-size:13px !important;overflow-wrap:anywhere;}
  /* Old mobile dock is replaced by the title handle of the bottom sheet. */
  #app > #mobile-ui-dock,
  #app > #mobile-ui-backdrop{display:none !important;}
  /* NASA Eyes-style bottomsheet: 116px title peek / 72dvh expanded.
     Height is animated; nothing in the 3D canvas changes size. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel{
    display:flex !important;
    flex-direction:column !important;
    position:fixed !important;
    z-index:37 !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    height:var(--mobile-sheet-height) !important;
    min-height:0 !important;
    max-height:calc(100dvh - env(safe-area-inset-top) - 75px) !important;
    box-sizing:border-box !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
    border-top:1px solid rgba(177,206,235,.14) !important;
    background:linear-gradient(180deg,rgba(20,24,30,.99),rgba(11,15,22,.99)) !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:none !important;
    pointer-events:auto !important;
    transition:height 650ms cubic-bezier(.22,.72,.22,1) !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region{
    position:relative !important;
    display:block !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    padding:14px 62px 18px 16px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #app:not(.scene-dashboard-open):not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region{
    overflow-y:hidden !important;
  }
  #app:not(.scene-dashboard-open):not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region > :not(.panel-heading){
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #app:not(.scene-dashboard-open):not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock{display:none !important;}
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .panel-heading{
    position:relative !important;
    margin:0 0 8px !important;
    padding:0 !important;
    min-height:52px !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-title-row{
    align-items:center !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel #dashboard-title-text{
    font-size:19px !important;
    line-height:1.25 !important;
    color:#fff !important;
    text-align:left !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-bottom-dock{
    flex:0 0 auto;
    max-height:45%;
    overflow:auto;
    background:rgba(12,17,24,.99);
    border-radius:0 !important;
  }
  /* Dashboard toggle, in the top-right corner of the sheet itself. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle{
    display:flex !important;
    position:fixed !important;
    z-index:43 !important;
    top:auto !important;
    left:auto !important;
    right:10px !important;
    bottom:calc(var(--mobile-sheet-height) - 50px) !important;
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.08) !important;
    color:#eaf4ff !important;
    transform:none !important;
    transition:bottom 650ms cubic-bezier(.22,.72,.22,1),background .15s ease !important;
    pointer-events:auto !important;
  }
  #app > #dashboard-panel-toggle .dashboard-panel-toggle__label{display:none !important;}
  #app > #dashboard-panel-toggle .dashboard-panel-toggle__icon{transform:rotate(0deg) !important;width:19px !important;height:19px !important;}
  #app.scene-dashboard-open > #dashboard-panel-toggle .dashboard-panel-toggle__icon{transform:rotate(180deg) !important;}
  /* Close navigation over everything without altering the WebGL viewport. */
  #app > #mobile-view-panel.view-controls.topsheet-navigation,
  #app > #mobile-view-panel.view-controls.topsheet-navigation.is-open{
    position:fixed !important;
    z-index:48 !important;
    inset:0 0 0 auto !important;
    left:auto !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  #app > #mobile-view-panel.view-controls.topsheet-navigation:not(.is-open){
    transform:translateX(100%) !important;
  }
  #app > #mobile-view-panel.view-controls.topsheet-navigation.is-open{
    transform:translateX(0) !important;
  }
  /* The timeline is a floating expansion; its handle always stays centred
     immediately above the dashboard's current top edge. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle.time-panel-toggle{
    display:inline-flex !important;
    position:fixed !important;
    z-index:41 !important;
    top:auto !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(var(--mobile-sheet-height) + 6px) !important;
    width:auto !important;
    min-width:145px !important;
    height:33px !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    border:0 !important;
    padding:0 10px !important;
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:#c2d7e9 !important;
    font:650 10px/1 'JetBrains Mono',monospace !important;
    letter-spacing:.06em !important;
    transform:translateX(-50%) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:bottom 650ms cubic-bezier(.22,.72,.22,1) !important;
  }
  #app > #time-panel-toggle .time-panel-toggle__icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;}
  #app.time-controls-open > #time-panel-toggle .time-panel-toggle__icon{transform:rotate(180deg);}
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-time-panel.timeline-panel{
    position:fixed !important;
    z-index:40 !important;
    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:calc(var(--mobile-sheet-height) + 42px) !important;
    width:auto !important;
    max-height:min(58dvh,410px) !important;
    padding:13px 12px !important;
    border-radius:0 !important;
    background:rgba(8,14,23,.97) !important;
    transform:translateY(16px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .2s ease,transform .25s ease,visibility 0s linear .25s,bottom 650ms cubic-bezier(.22,.72,.22,1) !important;
  }
  #app.time-controls-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-time-panel.timeline-panel,
  #app.time-controls-open.mobile-panel-timeline:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-time-panel.timeline-panel{
    transform:translateY(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  /* LIVE: left-hand anchor of the usable scene, just above the bottom sheet. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #reset-button.eyes-live-corner{
    display:flex !important;
    position:fixed !important;
    z-index:40 !important;
    top:auto !important;
    left:10px !important;
    right:auto !important;
    bottom:calc(var(--mobile-sheet-height) + 12px) !important;
    transform:none !important;
    transition:bottom 650ms cubic-bezier(.22,.72,.22,1) !important;
    pointer-events:auto !important;
  }
  /* Keep simulated UTC readable without competing with LIVE or tools. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud.simulation-time-corner{
    right:8px !important;
    left:auto !important;
    top:auto !important;
    bottom:calc(var(--mobile-sheet-height) + 54px) !important;
    max-width:min(55vw,230px) !important;
    text-align:right !important;
    transition:bottom 650ms cubic-bezier(.22,.72,.22,1) !important;
  }
  /* Floating tools, no side reservation: slide closed from top to bottom.
     Only the lock persists when unlocked; it is the sole mobile reopener. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
  #app.scene-rail-unlocked:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
  #app.scene-rail-unlocked.scene-rail-peek:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
    position:fixed !important;
    z-index:42 !important;
    top:calc(env(safe-area-inset-top) + 67px) !important;
    bottom:calc(var(--mobile-sheet-height) + 48px) !important;
    left:auto !important;
    right:2px !important;
    width:42px !important;
    height:auto !important;
    min-height:40px !important;
    max-height:none !important;
    padding:0 !important;
    background:transparent !important;
    transform:none !important;
    pointer-events:auto !important;
    overflow:visible !important;
    justify-content:flex-end !important;
    transition:bottom 650ms cubic-bezier(.22,.72,.22,1) !important;
  }
  #app > #scene-general-controls .scene-rail-tools{
    display:flex !important;
    flex-direction:column !important;
    flex:0 1 auto !important;
    width:42px !important;
    min-height:0 !important;
    max-height:calc(100% - 42px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scroll-behavior:smooth;
    transition:max-height .32s ease,opacity .25s ease,transform .32s ease !important;
  }
  #app > #scene-general-controls .scene-rail-tools > label.scene-tool-button:first-of-type{margin-top:0 !important;}
  #app > #scene-general-controls .scene-rail-footer{
    display:flex !important;
    flex:0 0 40px !important;
    width:42px !important;
    margin:2px 0 0 !important;
    padding:0 !important;
  }
  #app.scene-rail-unlocked:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls .scene-rail-tools{
    max-height:0 !important;
    opacity:0 !important;
    transform:translateY(12px) !important;
    pointer-events:none !important;
    padding:0 !important;
  }
  #app > #scene-general-controls #scene-rail-pin.scene-tool-button{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
  #app > #scene-rail-hotzone{display:none !important;}
  /* Preserve accessibility of onscreen controls, no hover-only mobile traps. */
  #app.scene-navigation-open > #scene-general-controls{pointer-events:none !important;}
  #app.scene-navigation-open > #navigation-sheet-toggle{pointer-events:none !important;}
}
@media(max-width:370px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){--mobile-sheet-peek:112px;}
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar{width:min(175px,calc(100vw - 190px)) !important;}
  #app > #camera-distance-hud .camera-distance-hud__value{font-size:12px !important;}
}
@media(max-width:620px) and (prefers-reduced-motion:reduce){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle{transition:none !important;}
}


/* ============================================================
   2026-10-21 · One vertical retractable rail + compact sheets
   ============================================================ */
/* The simulated clock no longer occupies any scene real estate; hidden DOM
   stays intact for date-picker bindings and astronomical calculations. */
#app > #simulation-time-hud.simulation-time-corner,
#app.time-controls-open > #simulation-time-hud.simulation-time-corner{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
/* Transparent time-controls sheet, independently of screen size. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-time-panel.timeline-panel,
#app.time-controls-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-time-panel.timeline-panel{
  background:transparent !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
}
#app > #mobile-time-panel.timeline-panel::before,
#app > #mobile-time-panel.timeline-panel::after{
  display:none !important;
  content:none !important;
}
/* Button below the sheet: SVG chevron above label, also on desktop. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle.time-panel-toggle{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-height:44px !important;
  height:44px !important;
  padding:2px 8px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
#app > #time-panel-toggle .time-panel-toggle__icon{
  display:block !important;
  width:19px !important;
  height:14px !important;
  flex:0 0 14px !important;
  object-fit:contain !important;
  fill:initial !important;
  stroke:initial !important;
  opacity:.9;
  transform:rotate(0deg) !important;
  transform-origin:center !important;
  transition:transform .25s ease !important;
}
#app.time-controls-open > #time-panel-toggle .time-panel-toggle__icon{
  transform:rotate(180deg) !important;
}
#app > #time-panel-toggle .time-panel-toggle__label{
  display:block !important;
  line-height:1.15 !important;
  white-space:nowrap;
}
/* Shared rail behavior on every viewport: settings button stays at the
   physical bottom; the tools only unfold upward, never sideways. */
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
#app.scene-rail-collapsed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
  position:fixed !important;
  right:0 !important;
  left:auto !important;
  top:clamp(60px,8vh,82px) !important;
  bottom:clamp(12px,4vh,46px) !important;
  width:42px !important;
  min-width:42px !important;
  height:auto !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:3px !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transform:none !important;
  transition:bottom 650ms cubic-bezier(.22,.72,.22,1) !important;
  pointer-events:none !important;
  z-index:32 !important;
}
#app > #scene-general-controls .scene-rail-tools{
  order:0 !important;
  display:flex !important;
  flex-direction:column !important;
  flex:0 1 auto !important;
  width:42px !important;
  min-height:0 !important;
  max-height:calc(100% - 44px) !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  align-items:center !important;
  justify-content:flex-start !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
  transition:max-height 440ms cubic-bezier(.22,.72,.22,1),opacity 250ms ease,transform 440ms cubic-bezier(.22,.72,.22,1),visibility 0s !important;
}
#app > #scene-general-controls .scene-rail-tools > label.scene-tool-button:first-of-type{margin-top:auto !important;}
#app.scene-rail-collapsed > #scene-general-controls .scene-rail-tools{
  flex:0 0 0px !important;
  max-height:0px !important;
  min-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(12px) !important;
  pointer-events:none !important;
  transition:max-height 440ms cubic-bezier(.22,.72,.22,1),opacity 200ms ease,transform 440ms cubic-bezier(.22,.72,.22,1),visibility 0s linear 440ms !important;
}
#app > #scene-general-controls .scene-rail-footer{
  order:1 !important;
  display:flex !important;
  width:42px !important;
  flex:0 0 40px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:auto !important;
  align-items:center !important;
  justify-content:center !important;
}
#app > #scene-general-controls #scene-rail-pin.scene-tool-button{
  display:flex !important;
  flex:0 0 40px !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
  pointer-events:auto !important;
}
#app > #scene-general-controls #scene-rail-pin .scene-tool-icon{
  width:25px !important;
  height:25px !important;
  object-fit:contain !important;
  opacity:1 !important;
}
#app.scene-rail-collapsed > #scene-general-controls #scene-rail-pin{
  background:rgba(34,70,106,.20) !important;
}
/* The previous hover edge and horizontal retraction are retired. */
#app > #scene-rail-hotzone,
#app > #scene-rail-hotzone:not([hidden]){display:none !important;pointer-events:none !important;}
@media(max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
    --mobile-sheet-peek:86px;
    --mobile-sheet-open:min(65dvh,540px);
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
  #app.scene-rail-collapsed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
    top:calc(env(safe-area-inset-top) + 64px) !important;
    bottom:calc(var(--mobile-sheet-height) + 48px) !important;
    transform:none !important;
  }
  /* Reduce the collapsed bottomsheet, keep title & type visible. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-scroll-region{
    padding:10px 54px 10px 14px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .panel-heading{
    min-height:43px !important;
    margin-bottom:3px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel #dashboard-title-text{
    font-size:18px !important;
  }
  /* Sheet chevron without a bordered circle or any background. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle{
    bottom:calc(var(--mobile-sheet-height) - 44px) !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    outline:none !important;
    box-shadow:none !important;
  }
  #app > #dashboard-panel-toggle.dashboard-panel-toggle::before,
  #app > #dashboard-panel-toggle.dashboard-panel-toggle::after{
    display:none !important;
    content:none !important;
  }
  #app > #dashboard-panel-toggle .dashboard-panel-toggle__icon{
    width:22px !important;
    height:22px !important;
    object-fit:contain !important;
    stroke:initial !important;
    fill:initial !important;
    transform:rotate(0deg) !important;
    transition:transform 250ms ease !important;
  }
  #app.scene-dashboard-open > #dashboard-panel-toggle .dashboard-panel-toggle__icon{transform:rotate(180deg) !important;}
  /* The two-line time toggle stays centered above the compact sheet. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle.time-panel-toggle{
    bottom:calc(var(--mobile-sheet-height) + 6px) !important;
    height:46px !important;
    min-width:150px !important;
    gap:4px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-time-panel.timeline-panel{
    bottom:calc(var(--mobile-sheet-height) + 54px) !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #reset-button.eyes-live-corner{
    bottom:calc(var(--mobile-sheet-height) + 11px) !important;
  }
}
@media(max-width:370px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){--mobile-sheet-peek:84px;}
}
@media(prefers-reduced-motion:reduce){
  #app > #scene-general-controls .scene-rail-tools,
  #app > #time-panel-toggle .time-panel-toggle__icon,
  #app > #dashboard-panel-toggle .dashboard-panel-toggle__icon{transition:none !important;}
}


/* 2026-10-21 — Dashboard mobile: compact header and visible chevrons. */
/* Descriptions of bodies are typeset as paragraphs, without altering
   technical metrics, column labels or short headlines. */
#app > #mobile-info-panel .system-state-description,
#app > #mobile-info-panel #system-state-description{
  text-align:justify !important;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* Increase the actual glyph size (not just the button hit area). */
#app > #time-panel-toggle.time-panel-toggle .time-panel-toggle__icon{
  width:32px !important;
  height:25px !important;
  flex:0 0 25px !important;
  object-fit:contain !important;
}
#app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle.time-panel-toggle{
  gap:2px !important;
  min-height:52px !important;
  height:52px !important;
}
@media (max-width:620px){
  /* Expanded mobile sheet: old padding-top (88px) was intended to reserve
     room for a logo, but the logo now lives above the scene. */
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .dashboard-scroll-region{
    padding-top:12px !important;
  }
  /* The title begins immediately after the sheet's top padding. */
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .panel-heading{
    margin-top:0 !important;
    margin-bottom:8px !important;
  }
  /* Restore the round touch surface, but absolutely no border, outline ring
     or pseudo-element rim.  It is purely a background. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    border-radius:50% !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:rgba(108,132,158,.18) !important;
  }
  #app > #dashboard-panel-toggle.dashboard-panel-toggle:hover,
  #app > #dashboard-panel-toggle.dashboard-panel-toggle:focus-visible{
    background:rgba(108,132,158,.30) !important;
  }
  #app > #dashboard-panel-toggle.dashboard-panel-toggle::before,
  #app > #dashboard-panel-toggle.dashboard-panel-toggle::after{
    content:none !important;
    display:none !important;
  }
  #app > #dashboard-panel-toggle .dashboard-panel-toggle__icon{
    width:23px !important;
    height:23px !important;
  }
  /* The larger time glyph must not be squeezed by the earlier mobile
     height:46px override. Keep it directly above the sheet edge. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle.time-panel-toggle{
    height:54px !important;
    min-height:54px !important;
    bottom:calc(var(--mobile-sheet-height) + 6px) !important;
  }
}


/* 2026-10-21 — Alignement visuel: chevron Dashboard + rail Settings / Menu.
   Le centrage ne dépend plus des anciennes règles de disposition du bouton. */
@media (max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle{
    display:grid !important;
    place-items:center !important;
    justify-content:center !important;
    align-content:center !important;
    border:0 !important;
    box-shadow:none !important;
  }
  #app > #dashboard-panel-toggle.dashboard-panel-toggle .dashboard-panel-toggle__icon{
    display:block !important;
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    padding:0 !important;
    flex:none !important;
    object-fit:contain !important;
    transform:translate(-50%,-50%) rotate(0deg) !important;
    transform-origin:center center !important;
  }
  #app.scene-dashboard-open > #dashboard-panel-toggle.dashboard-panel-toggle .dashboard-panel-toggle__icon{
    transform:translate(-50%,-50%) rotate(180deg) !important;
  }
  /* Bouton Menu: right=8px, largeur=40px, centre à 28px du bord.
     Rail: largeur 42px, right=7px, centre également à 28px. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
  #app.scene-rail-collapsed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
    right:7px !important;
    left:auto !important;
  }
}
/* Desktop: menu à right:12px, largeur 42px; rail de même largeur. */
@media (min-width:621px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
  #app.scene-rail-collapsed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
    right:12px !important;
    left:auto !important;
  }
}


/* 2026-10-21 — Alignement bas du bouton Settings et espacement du temps.
   Desktop : marge basse 12px, égale à la marge droite 12px.
   Mobile : marge basse 7px depuis le bord haut du bottomsheet,
   égale à la marge droite 7px (la commande ne recouvre pas la fiche). */
@media (min-width:621px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
  #app.scene-rail-collapsed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
    bottom:12px !important;
  }
  /* Plus d'air entre le pictogramme et son libellé, uniquement sur desktop. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle.time-panel-toggle{
    gap:11px !important;
    height:66px !important;
    min-height:66px !important;
  }
}
@media (max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls,
  #app.scene-rail-collapsed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #scene-general-controls.scene-general-controls{
    bottom:calc(var(--mobile-sheet-height) + 7px) !important;
  }
}


/* 2026-10-21 — Le dégagement vertical concerne la barre temporelle,
   pas l'écart entre le chevron et « Contrôle du Temps ».
   L'espace supérieur du bouton abaisse le chevron d'environ 10 px
   par rapport à la réglette sans déplacer sensiblement le texte. */
@media (min-width: 621px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #time-panel-toggle.time-panel-toggle{
    gap:2px !important;
    padding:12px 8px 0 !important;
  }
}

/* Décaler la réglette entière vers le haut, plutôt que le texte vers le bas.
   Le réglage normal du panneau est bottom:18px; +22px donnent un
   vrai intervalle chevron/réglette sans toucher au cadrage WebGL. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-time-panel.timeline-panel.time-panel-open{
    bottom:40px !important;
  }
}

/* 2026-10-22 — Bottomsheet touch gesture handle; does not intercept WebGL canvas. */
@media (max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .panel-heading,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle{
    touch-action:pan-y;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel::before{
    content:"";position:absolute;z-index:5;top:6px;left:50%;transform:translateX(-50%);
    width:34px;height:4px;border-radius:5px;background:rgba(215,233,255,.26);pointer-events:none;
  }
}


/* 2026-10-22 — Bottomsheet compact : no chevron, 50% open, scene lifted
   by a composited translation rather than resizing its WebGL drawing buffer. */
@media (max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
    --mobile-sheet-peek:68px !important;
    --mobile-sheet-open:50dvh !important;
  }
  /* Respect the application viewport on browsers using a dynamic toolbar. */
  @supports not (height:100dvh){
    #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
      --mobile-sheet-open:50vh !important;
    }
  }
  /* The scene follows the sheet without any canvas resize, aspect change,
     GPU buffer reallocation, or visual stretching. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host{
    transform:translate3d(0,0,0) !important;
    transition:transform 650ms cubic-bezier(.22,.72,.22,1) !important;
    will-change:transform;
  }
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host{
    transform:translate3d(0,calc((var(--mobile-sheet-peek) - var(--mobile-sheet-open))/2),0) !important;
  }
  /* Same lateral spacing on both states; the title/type block is vertically
     centered in the compact sheet rather than padded toward the upper edge. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .dashboard-scroll-region{
    padding:12px 18px 14px !important;
  }
  #app:not(.scene-dashboard-open):not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .dashboard-scroll-region{
    padding:0 18px !important;
  }
  #app:not(.scene-dashboard-open):not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .panel-heading{
    display:flex !important;
    align-items:center !important;
    min-height:var(--mobile-sheet-peek) !important;
    height:var(--mobile-sheet-peek) !important;
    box-sizing:border-box !important;
    padding:0 !important;
    margin:0 !important;
  }
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .panel-heading{
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    align-items:center !important;
    margin:0 0 10px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .panel-heading-copy,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .dashboard-title-row{
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .dashboard-title-copy{
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
  }
  /* The panel still supports swipe and header tap; no visual chevron. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle,
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #dashboard-panel-toggle.dashboard-panel-toggle{
    display:none !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .panel-heading{
    cursor:pointer;
    touch-action:pan-y;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel.info-panel .panel-heading:focus-visible{
    outline:2px solid rgba(120,186,250,.8);
    outline-offset:-3px;
  }
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host{
    transition:none !important;
  }
}

/* 2026-10-22 — Long official spacecraft names must not be cropped in the mobile bottomsheet. */
@media(max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel #dashboard-title-text{
    white-space:normal !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    line-height:1.16 !important;
    font-size:clamp(13px,3.7vw,17px) !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #mobile-info-panel .dashboard-title-copy{
    align-items:flex-start !important;
    justify-content:center !important;
  }
}


/* 2026-10-22 — Simulation clock returns on desktop only.
   The 42px Settings rail occupies the extreme right-hand edge. Keep an
   additional 20px gutter, and follow any open navigation sheet.
   Desktop bottom padding is 12px, matching the Settings button's bottom
   and right edge margin. Mobile keeps the clock hidden. */
@media (min-width:621px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode):not(.keyboard-ui-hidden) > #simulation-time-hud.simulation-time-corner{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:4px !important;
    top:auto !important;
    left:auto !important;
    right:calc(var(--scene-right-occupancy, 0px) + 62px) !important;
    bottom:12px !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:calc(100vw - 134px) !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    text-align:right !important;
    z-index:24 !important;
    transition:right var(--scene-panel-duration,650ms) var(--scene-panel-easing,cubic-bezier(.22,.72,.22,1)) !important;
  }
  /* Keep the date picker independent and avoid duplicating the date while
     the time controls are expanded. */
  #app.time-controls-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud.simulation-time-corner{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}
@media (min-width:621px) and (prefers-reduced-motion:reduce){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #simulation-time-hud.simulation-time-corner{
    transition:none !important;
  }
}


/* 2026-10-22 — Rail help labels: scrollable tool list clips labels on its left.
   Keep the scrollable rail untouched; paint the hover/focus label in a fixed
   body-level overlay, while Settings retains its own existing hover label. */
#app > #scene-general-controls .scene-rail-tools .scene-tool-button > .scene-tool-label,
#app > #scene-general-controls .scene-rail-tools .scene-tool-button:hover > .scene-tool-label,
#app > #scene-general-controls .scene-rail-tools .scene-tool-button:focus-within > .scene-tool-label{
  opacity:0 !important;
  visibility:hidden !important;
}
#scene-rail-tooltip{
  position:fixed;
  left:-9999px;
  top:0;
  z-index:40;
  display:block;
  box-sizing:border-box;
  max-width:min(240px,calc(100vw - 16px));
  width:max-content;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(6,13,22,.94);
  color:#eef7ff;
  font:500 11px/1.2 "Poppins",sans-serif;
  letter-spacing:.02em;
  white-space:normal;
  text-align:center;
  overflow-wrap:break-word;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease,visibility 0s linear .14s;
}
#scene-rail-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
@media (prefers-reduced-motion:reduce){
  #scene-rail-tooltip{transition:none;}
}


/* 2026-10-22 — “Comment explorer”: dedicated right sheet, aligned with
   Navigation (same width, header, scroll and 650 ms motion). The scene is
   cropped/recentered with the existing WebGL-stable viewport mechanism. */
#app > #help-modal.help-modal {
  position:fixed !important;
  inset:0 0 0 auto !important;
  display:block !important;
  box-sizing:border-box !important;
  width:var(--drawer-navigation-width) !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  border-left:1px solid rgba(145,185,226,.12) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(13,20,30,.985),rgba(5,10,18,.99)) !important;
  box-shadow:-12px 0 35px rgba(0,0,0,.26) !important;
  transform:translateX(101%) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  overflow:hidden !important;
  z-index:48 !important;
  transition:transform var(--scene-panel-duration,650ms) var(--scene-panel-easing,cubic-bezier(.22,.72,.22,1)),
             opacity 420ms ease,
             visibility 0s linear var(--scene-panel-duration,650ms) !important;
}
#app > #help-modal.help-modal.open {
  transform:translateX(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:transform var(--scene-panel-duration,650ms) var(--scene-panel-easing,cubic-bezier(.22,.72,.22,1)),
             opacity 420ms ease,visibility 0s linear 0s !important;
}
#app > #help-modal.help-modal .help-card.glass-panel {
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
#app > #help-modal.help-modal .help-sheet-header {
  position:relative;
  display:flex;
  flex:0 0 66px;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:66px;
  padding:0 52px;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(18,22,30,.985),rgba(12,17,25,.975));
}
#app > #help-modal.help-modal #help-sheet-title {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  color:#f3f6fa;
  font:600 14px/1.25 'Poppins',sans-serif;
  letter-spacing:.01em;
}
#app > #help-modal.help-modal #close-help.close-help {
  position:absolute !important;
  top:12px !important;
  right:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:4px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#e6eff8 !important;
  font-size:22px !important;
  cursor:pointer;
}
#app > #help-modal.help-modal #close-help:hover,
#app > #help-modal.help-modal #close-help:focus-visible {
  background:rgba(65,110,163,.13) !important;
  color:#fff !important;
}
#app > #help-modal.help-modal .help-sheet-content {
  flex:1 1 auto;
  min-height:0;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:22px 24px 32px;
  scrollbar-width:thin;
  scrollbar-color:rgba(145,185,226,.32) transparent;
}
#app > #help-modal.help-modal .help-card h2 {
  font-size:clamp(19px,2.3vw,23px);
  line-height:1.28;
  margin:4px 0 23px;
}
#app > #help-modal.help-modal .help-steps {gap:14px;}
#app > #help-modal.help-modal .help-steps > div {padding-top:14px;}
#app > #help-modal.help-modal .help-steps p {font-size:12px;line-height:1.55;}
#app > #help-modal.help-modal .help-shortcuts {margin-top:24px;}
#app > #help-modal.help-modal .help-shortcuts-grid {grid-template-columns:1fr;}
#app > #help-modal.help-modal .help-shortcuts-grid > div {
  grid-template-columns:96px minmax(0,1fr);
  gap:10px;
}
#app > #help-modal.help-modal .help-shortcuts-grid kbd {
  min-width:0;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:break-word;
  text-align:center;
  line-height:1.3;
}
#app > #help-modal.help-modal .help-foot {font-size:11px;line-height:1.5;}
#app > #help-modal.help-modal #start-exploring {margin-bottom:12px;}
/* Desktop: reserve the same width and shift the scene as Navigation does. */
@media(min-width:621px){
  #app.scene-help-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
    --scene-right-occupancy:var(--drawer-navigation-width) !important;
  }
}
/* Mobile: the right sheet overlays the scene like Navigation; never resize
   or recenter the WebGL surface because opening a panel must stay GPU-safe. */
@media(max-width:620px){
  #app > #help-modal.help-modal .help-sheet-header {
    flex-basis:60px;
    min-height:60px;
  }
  #app > #help-modal.help-modal .help-sheet-content {padding:18px 17px 26px;}
  #app > #help-modal.help-modal .help-card h2 {font-size:18px;}
  #app.scene-help-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode){
    --scene-right-occupancy:0px !important;
  }
}
@media(prefers-reduced-motion:reduce){
  #app > #help-modal.help-modal,
  #app > #help-modal.help-modal.open {transition:none !important;}
}


/* 2026-10-25 — Two-level navigation: restrained, compact, accessible. */
#app > #mobile-view-panel.view-controls.topsheet-navigation {
  --nav-minimal-text:#e0e8f0;
  --nav-minimal-muted:#a4b6c8;
  --nav-minimal-focus:rgba(92,142,198,.16);
}
/* Prevent clicks on content while the two pages exchange positions. */
#app > #mobile-view-panel.view-controls.topsheet-navigation.navigation-page-changing .navigation-category-list,
#app > #mobile-view-panel.view-controls.topsheet-navigation.navigation-page-changing .navigation-sheet-grid {pointer-events:none;}
/* Compact, inline scale control, with enough tap area on phones. */
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > .navigation-scale-option {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin:0 3px 9px !important;
  padding:4px 0 15px !important;
  min-height:54px;
  border-bottom:1px solid rgba(165,195,227,.12);
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-title {
  flex:1 1 auto;
  min-width:0;
  color:var(--nav-minimal-muted);
  font:500 11px/1.35 'Poppins',sans-serif;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch {
  flex:0 0 auto;
  align-self:center !important;
  width:157px !important;
  max-width:61%;
  min-width:142px;
  margin:0 !important;
  padding:2px;
  gap:2px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid rgba(149,181,217,.19);
  border-radius:9px !important;
  background:rgba(13,23,36,.66);
  box-shadow:none;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch > button {
  width:100% !important;
  min-height:33px !important;
  border:0 !important;
  border-radius:6px !important;
  padding:6px 3px !important;
  font:500 10px/1.15 'Poppins',sans-serif !important;
  color:#9baec1;
  background:transparent !important;
  box-shadow:none !important;
  transition:background-color .16s ease,color .16s ease;
  justify-content:center !important;
  text-align:center !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch > button.active {
  background:rgba(87,131,177,.34) !important;
  color:#f2f7fd !important;
  box-shadow:inset 0 0 0 1px rgba(166,199,236,.14) !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch > button:not(.active):hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch > button:focus-visible {
  background:rgba(67,109,150,.22) !important;
  color:#f2f7fd;
}
/* First level: typographic rows, fine separators, NO cards or pills. */
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list {
  padding-top:13px !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button {
  min-height:62px !important;
  border:0 !important;
  border-bottom:1px solid rgba(171,199,224,.105) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--nav-minimal-text);
  padding:16px 6px !important;
  transition:color .18s ease;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:focus-visible {
  background:transparent !important;
  color:#fff;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-chevron {
  color:#a4b5c7;
  font-size:19px;
  font-weight:400;
  transition:transform .18s ease,color .18s ease;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:hover .navigation-category-chevron,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:focus-visible .navigation-category-chevron {
  color:#fff;
  transform:none;
}
/* Second level: one clean list, a clear distinction between parents & moons. */
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid {
  padding-top:13px !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section > button,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button[data-view],
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > .view-group-label {
  min-height:49px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:12px 10px !important;
  font:400 12px/1.45 'Poppins',sans-serif !important;
  color:#c8d3df;
  transition:color .18s ease;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section > button:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > button[data-view]:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > .view-group-label:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section [data-view]:focus-visible {
  background:transparent !important;
  color:#fff !important;
}
/* Remove the redundant status dots in navigation — including CSS-generated ones. */
#app > #mobile-view-panel.view-controls [data-view].active::after,
#app > #mobile-view-panel.view-controls [data-view].is-selected::after,
#app > #mobile-view-panel.view-controls .view-group-active-dot {
  content:none !important;
  display:none !important;
}
/* Selection remains legible through tint, not a bright status LED. */
#app > #mobile-view-panel.view-controls .navigation-sheet-section [data-view].active,
#app > #mobile-view-panel.view-controls .navigation-sheet-section [data-view].is-selected {
  color:#f4f9ff !important;
  background:rgba(94,146,198,.13) !important;
  box-shadow:inset 2px 0 0 rgba(149,199,245,.76);
}
#app > #mobile-view-panel.view-controls .navigation-sheet-section [data-view].is-selected:not(.active) {
  color:#d7e8f8 !important;
  box-shadow:inset 2px 0 0 rgba(162,189,213,.58);
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group {
  width:100% !important;
  margin:0;
  padding:0;
  border:0;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row {
  gap:0 !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > .view-group-toggle {
  flex:0 0 38px !important;
  width:38px !important;
  min-height:49px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#9eb0c2;
  transition:color .18s ease;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > .view-group-toggle:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row > .view-group-toggle:focus-visible {
  background:transparent !important;
  color:#fff;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .view-group.expanded .view-group-chevron {
  transform:rotate(90deg);
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group.expanded > .view-submenu {
  margin:2px 0 9px 16px !important;
  padding:2px 0 3px 10px !important;
  border:0 !important;
  border-left:1px solid rgba(139,180,224,.27) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  gap:0 !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group.expanded > .view-submenu > button {
  min-height:41px !important;
  padding:10px 12px !important;
  border-radius:0 !important;
  font:400 11.5px/1.45 'Poppins',sans-serif !important;
  color:#adbed0;
  transition:color .18s ease;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group.expanded > .view-submenu > button:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group.expanded > .view-submenu > button:focus-visible {
  background:transparent !important;
  color:#fff !important;
}
@media(max-width:760px){
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option > .view-scale-mode-switch {
    width:150px !important;
    min-width:138px;
    max-width:61%;
  }
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button{
    min-height:60px !important;
  }
}
@media(prefers-reduced-motion:reduce){
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button,
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-chevron,
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section [data-view],
  #app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-scale-option button {transition:none !important;}
}

/* Hover A — typography and chevrons only, without hover fills or movement.
   Active/selected state keeps its existing discrete indicator. */
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:focus-visible,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section [data-view]:focus-visible,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section [data-view-group-toggle]:focus-visible {
  outline:1px solid rgba(170,206,240,.52);
  outline-offset:-2px;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row:hover .view-group-toggle,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-section .view-group-row:focus-within .view-group-toggle {
  color:#fff;
  background:transparent !important;
}
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:hover,
#app > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list > button:focus-visible {
  padding-left:6px !important;
}

/* 2026-10-25 — Dual Screen: Navigation replaces the obsolete Settings bay.
   Use the existing two-level Navigation; only its control-screen placement
   changes. The regular Settings panel remains untouched outside Dual Screen. */
@media (min-width:901px) {
  body.dual-screen-control-ui {
    --dual-left-width:clamp(320px,28vw,400px);
    --dual-nav-width:0px;
    --dual-work-gap:12px;
  }
  body.dual-screen-control-ui #interface-settings-panel,
  body.dual-screen-control-ui #interface-settings-panel[hidden],
  #app.dual-screen-control > #navigation-sheet-toggle,
  #app.dual-screen-control > #dashboard-panel-toggle {
    display:none !important;
  }
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation,
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation.is-open {
    position:fixed !important;
    z-index:60 !important;
    top:var(--dual-work-top,92px) !important;
    left:0 !important;
    right:auto !important;
    bottom:var(--dual-edge-bottom,12px) !important;
    width:var(--dual-left-width) !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 0 18px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    border:1px solid rgba(148,192,235,.13) !important;
    border-left:0 !important;
    border-radius:0 18px 18px 0 !important;
    background:linear-gradient(180deg,rgba(13,20,30,.985),rgba(5,10,18,.99)) !important;
    box-shadow:0 20px 58px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation #navigation-sheet-close {display:none !important;}
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-header {
    padding:0 94px 0 52px;
  }
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation #dual-screen-devtool-toggle:not([hidden]) {
    position:absolute;
    z-index:10;
    top:16px;
    right:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:33px;
    min-width:70px;
    padding:0 9px;
    border:1px solid rgba(148,192,235,.18);
    border-radius:7px;
    background:rgba(27,45,63,.58);
    color:#b6cadc;
    font:500 10px/1 'Poppins',sans-serif;
    cursor:pointer;
  }
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation #dual-screen-devtool-toggle:hover,
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation #dual-screen-devtool-toggle[aria-pressed="true"] {
    color:#eff8ff;
    background:rgba(54,110,162,.45);
    border-color:rgba(132,197,255,.40);
  }
  /* The Debug panel remains an optional, independent inspector (not Settings).
     It overlays the central dashboard only while expressly requested. */
  body.dual-screen-control-ui.dual-screen-debug-open #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar {
    position:fixed !important;
    z-index:65 !important;
    top:var(--dual-work-top,92px) !important;
    right:0 !important;
    bottom:var(--dual-edge-bottom,12px) !important;
    left:auto !important;
    width:min(460px,calc(100vw - var(--dual-left-width) - 24px)) !important;
    height:auto !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border:1px solid rgba(148,192,235,.16) !important;
    border-right:0 !important;
    border-radius:16px 0 0 16px !important;
    background:linear-gradient(155deg,rgba(14,27,42,.98),rgba(6,13,22,.98)) !important;
    box-shadow:-16px 22px 55px rgba(0,0,0,.45) !important;
    transform:none !important;
    animation:none !important;
  }
  body.dual-screen-control-ui.dual-screen-debug-open #app.dual-screen-control #debug-toolbar .debug-toolbar__content {
    display:flex !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  body.dual-screen-control-ui.dual-screen-debug-open #app.dual-screen-control #debug-toolbar .debug-toolbar__viewport {
    min-height:0 !important;
    flex:1 1 auto !important;
    overflow-y:auto !important;
  }
  /* Extend Dashboard and Timeline into the former (now empty) right bay. */
  #app.dual-screen-control > .info-panel,
  #app.dual-screen-control > .timeline-panel {
    right:var(--dual-work-gap) !important;
  }
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    right:var(--dual-work-gap) !important;
  }
}
/* Keep this Dual-only utility independent of legacy full-width view buttons. */
@media (min-width:901px){
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation #dual-screen-devtool-toggle:not([hidden]){
    left:auto !important;
    right:14px !important;
    width:76px !important;
    max-width:76px !important;
    min-width:76px !important;
    flex:0 0 76px !important;
    margin:0 !important;
    transform:none !important;
  }
}
/* Smaller desktop control windows still use a usable split Dual workspace. */
@media (min-width:701px) and (max-width:900px){
  body.dual-screen-control-ui{
    --dual-left-width:clamp(270px,37vw,320px);
    --dual-work-top:76px;
    --dual-edge-bottom:12px;
    --dual-work-gap:12px;
  }
  body.dual-screen-control-ui #interface-settings-panel,
  body.dual-screen-control-ui #interface-settings-panel[hidden],
  #app.dual-screen-control > #navigation-sheet-toggle,
  #app.dual-screen-control > #dashboard-panel-toggle{display:none !important;}
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation,
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation.is-open{
    position:fixed !important;
    z-index:60 !important;
    top:var(--dual-work-top) !important;
    bottom:var(--dual-edge-bottom) !important;
    left:0 !important;
    right:auto !important;
    width:var(--dual-left-width) !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    padding:0 0 16px !important;
    border:1px solid rgba(148,192,235,.13) !important;
    border-left:0 !important;
    border-radius:0 16px 16px 0 !important;
    background:linear-gradient(180deg,rgba(13,20,30,.985),rgba(5,10,18,.99)) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    transition:none !important;
    overflow-y:auto !important;
  }
  #app.dual-screen-control > #mobile-view-panel #navigation-sheet-close{display:none !important;}
  #app.dual-screen-control > #mobile-view-panel .navigation-drill-header{padding:0 94px 0 42px;}
  #app.dual-screen-control > #mobile-view-panel #dual-screen-devtool-toggle:not([hidden]){
    position:absolute !important;
    top:16px !important;
    right:10px !important;
    left:auto !important;
    width:76px !important;
    max-width:76px !important;
    min-width:76px !important;
    min-height:32px !important;
    padding:0 7px !important;
    border:1px solid rgba(148,192,235,.18) !important;
    border-radius:7px !important;
    background:rgba(27,45,63,.58) !important;
    color:#b6cadc;
    font:500 10px/1 'Poppins',sans-serif;
    transform:none !important;
  }
  #app.dual-screen-control > #mobile-info-panel.info-panel{
    position:fixed !important;
    top:var(--dual-work-top) !important;
    bottom:145px !important;
    left:calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
    right:var(--dual-work-gap) !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    transform:none !important;
    overflow-y:auto !important;
  }
  #app.dual-screen-control > #mobile-time-panel.timeline-panel{
    position:fixed !important;
    top:auto !important;
    bottom:var(--dual-edge-bottom) !important;
    left:calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
    right:var(--dual-work-gap) !important;
    width:auto !important;
    transform:none !important;
  }
  body.dual-screen-control-ui.dual-screen-debug-open #app.dual-screen-control.dual-screen-debug-available > #debug-toolbar{
    display:flex !important;
    position:fixed !important;
    z-index:65 !important;
    top:var(--dual-work-top) !important;
    left:auto !important;
    right:0 !important;
    bottom:var(--dual-edge-bottom) !important;
    width:calc(100vw - var(--dual-left-width) - 12px) !important;
    height:auto !important;
    max-height:none !important;
    border-radius:14px 0 0 14px !important;
    transform:none !important;
    overflow:auto !important;
  }
}
@media (min-width:701px) and (max-width:900px){
  #app.dual-screen-control > #mobile-info-panel.info-panel,
  #app.dual-screen-control > #mobile-time-panel.timeline-panel{
    animation:none !important;
    transition:none !important;
  }
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel{
    top:var(--dual-work-top) !important;
    left:calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
    right:var(--dual-work-gap) !important;
    bottom:145px !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
  }
}

/* 2026-10-25 — Dual Screen: permanent scene tools + floating Devtool.
   Navigation keeps its own left column, controls have an exclusive right bay,
   Dashboard/Timeline/Studio use only the remaining area. Single Screen unchanged. */
@media (min-width:701px){
  body.dual-screen-control-ui{
    --dual-tool-bay:56px;
    --dual-work-gap:12px;
    --dual-tool-top:var(--dual-work-top,92px);
    --dual-tool-bottom:var(--dual-edge-bottom,12px);
    --dual-content-right:calc(var(--dual-tool-bay) + var(--dual-work-gap));
  }
  /* Do not reserve canvas drawer geometry in the independent control window. */
  #app.dual-screen-control.scene-navigation-open{
    --scene-left-occupancy:0px !important;
    --scene-right-occupancy:0px !important;
  }
  /* The normal toggle is removed only from the Dual Screen control surface. */
  #app.dual-screen-control > #scene-general-controls .scene-rail-footer,
  #app.dual-screen-control > #scene-general-controls #scene-rail-pin{
    display:none !important;
  }
  /* Exclusive vertical tool strip: never fold or overlap Navigation/Dashboard. */
  #app.dual-screen-control > #scene-general-controls.scene-general-controls{
    position:fixed !important;
    z-index:62 !important;
    top:var(--dual-tool-top) !important;
    left:auto !important;
    right:0 !important;
    bottom:var(--dual-tool-bottom) !important;
    width:var(--dual-tool-bay) !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    padding:6px 5px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border:1px solid rgba(148,192,235,.12) !important;
    border-right:0 !important;
    border-radius:12px 0 0 12px !important;
    background:linear-gradient(180deg,rgba(13,20,30,.98),rgba(5,10,18,.98)) !important;
    box-shadow:-6px 8px 28px rgba(0,0,0,.22) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    transition:none !important;
    pointer-events:auto !important;
    overflow:hidden !important;
  }
  #app.dual-screen-control > #scene-general-controls .scene-rail-tools,
  #app.dual-screen-control.scene-rail-collapsed > #scene-general-controls .scene-rail-tools{
    display:flex !important;
    flex:1 1 auto !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    transition:none !important;
  }
  #app.dual-screen-control > #scene-general-controls .scene-rail-tools > label.scene-tool-button:first-of-type{
    margin-top:0 !important;
  }
  /* Independent panes remain fixed when Navigation is opened or drilled. */
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation,
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation.is-open{
    left:0 !important;
    right:auto !important;
    transform:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    contain:layout;
  }
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation .navigation-drill-header{
    box-sizing:border-box !important;
    width:100% !important;
  }
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation .navigation-category-list,
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation .navigation-sheet-grid{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #app.dual-screen-control > #mobile-info-panel.info-panel,
  #app.dual-screen-control > #mobile-time-panel.timeline-panel{
    right:var(--dual-content-right) !important;
    min-width:0 !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel{
    right:var(--dual-content-right) !important;
    left:calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
  }
  /* The ordinary Devtool lives above the workspace and retains drag/collapse. */
  body.dual-screen-control-ui > #debug-toolbar.debug-toolbar{
    z-index:15001 !important;
    position:fixed !important;
    width:min(520px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    top:clamp(12px,12vh,104px);
    right:calc(var(--dual-tool-bay) + 14px);
    bottom:auto;
    display:block;
    overflow:hidden;
  }
  body.dual-screen-control-ui > #debug-toolbar.debug-toolbar .debug-toolbar__bar{
    cursor:grab !important;
  }
  body.dual-screen-control-ui > #debug-toolbar.debug-toolbar.is-collapsed .debug-toolbar__content{
    display:none !important;
  }
}
@media (min-width:701px) and (max-width:900px){
  #app.dual-screen-control > #mobile-info-panel.info-panel,
  #app.dual-screen-control > #mobile-time-panel.timeline-panel{
    left:calc(var(--dual-left-width) + var(--dual-work-gap)) !important;
  }
}


/* 2026-10-25 — Dual Screen: the render window must NEVER inherit the
   Navigation/Dashboard viewport cropping of the controller window.
   The normal drawer rules above use high-specificity :is(#space-canvas,...)
   selectors. A generic `#render-host > *` reset was not specific enough:
   the output canvas was shifted -195px and clipped 390px at 1280px viewport.
   Preserve the independent full-frame secondary display for every layer. */
body.dual-screen-output-ui #app,
body.dual-screen-output-ui #app.scene-navigation-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode),
body.dual-screen-output-ui #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) {
  --scene-left-occupancy:0px !important;
  --scene-right-occupancy:0px !important;
}
body.dual-screen-output-ui #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host {
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  clip-path:none !important;
  transform:none !important;
  transition:none !important;
}
body.dual-screen-output-ui #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > *,
body.dual-screen-output-ui #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > #render-host.render-host > :is(#space-canvas,#voyager-nac-optical-mask,#iss-native-video-mask,div) {
  transform:none !important;
  transition:none !important;
}


/* 2026-10-25 — Dual Screen dashboard / Studio fit.
   Align the upper panels to the live timeline top, not a fixed 170/145 px
   allowance. The layout controller updates this value as the timeline grows
   or shrinks (date/time controls, resized windows), keeping a 12px gutter.
   The fallback is used before the first measurement only. */
@media (min-width:701px) {
  body.dual-screen-control-ui {
    --dual-timeline-clearance:var(--dual-timeline-measured-clearance,124px);
  }
  #app.dual-screen-control > #mobile-info-panel.info-panel,
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    bottom:var(--dual-timeline-clearance) !important;
    border-radius:18px !important;
  }
}
@media (min-width:701px) and (max-width:900px) {
  #app.dual-screen-control > #mobile-info-panel.info-panel,
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel {
    border-radius:16px !important;
  }
}


/* 2026-10-25 — ISS/Hubble: only the live orbital dashboard owns telemetry.
   The context grid was moved inside #dashboard-scroll-region; obsolete
   direct-child selectors no longer matched it in Dual Screen. Also protect
   the [hidden] state independently of the active dashboard mode. */
#app > #mobile-info-panel:is(.iss-dashboard-active,.iss-camera-dashboard-mode)
  #dashboard-scroll-region > .data-grid,
#app > #mobile-info-panel #dashboard-scroll-region > .data-grid[hidden] {
  display:none !important;
}
/* Keep orbital-source provenance, but after the map, chart cards and metrics. */
#app > #mobile-info-panel .orbiter-dashboard > .iss-dashboard-heading {
  margin:14px 0 0 !important;
  padding:10px 0 0;
  border-top:1px solid rgba(150,192,230,.10);
}

/* Media Studio director v1 · a monitor + inspector + unified dual-track sequencer.
   Never renders guides into the captured canvas. Desktop priority, responsive fallbacks. */
.media-studio--director .media-studio__panel{border-radius:16px;background:linear-gradient(152deg,rgba(9,19,31,.96),rgba(4,10,18,.94))}
.media-studio--director .media-studio__panel header{min-height:55px}
.media-studio--director .media-director-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:3px 12px 10px}
.media-studio--director .media-director-steps button{min-width:0;min-height:31px;padding:5px 2px;border:1px solid rgba(124,172,210,.09);border-radius:8px;background:rgba(19,37,53,.48);color:#839ab0;font:600 8px/1.2 'Space Grotesk',sans-serif;cursor:pointer}
.media-studio--director .media-director-steps button.active{color:#e9f6ff;background:rgba(67,130,187,.19);border-color:rgba(127,202,255,.35)}
.media-studio--director .media-director-project{margin:0 12px 10px!important;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;padding:8px!important;border-radius:10px}
.media-studio--director .media-director-project>strong{grid-column:1/-1}
.media-studio--director .media-director-project>[data-plan-select],.media-studio--director .media-director-project>[data-plan-name]{width:100%;min-width:0;max-width:none;min-height:29px;background:#0e1a27;color:#dae9f8;border:1px solid rgba(130,179,220,.17);border-radius:6px;padding:4px 7px;font-size:10px}
.media-studio--director .media-director-project .media-plan-actions{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.media-studio--director .media-director-project .media-plan-json-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}
.media-studio--director .media-director-project button{min-height:26px!important;padding:5px 3px!important;font-size:8px!important;white-space:nowrap}
.media-studio--director .media-pages{padding:13px 15px 18px}
.media-studio--director .media-pages .media-page-title{background:transparent;margin-bottom:13px;border-bottom:1px solid rgba(148,199,235,.12);padding-bottom:9px}
.media-studio--director .media-director-recipes{padding:11px;margin-bottom:12px;background:rgba(17,35,51,.46);border:1px solid rgba(120,183,230,.14);border-radius:10px}
.media-studio--director .media-director-recipes>strong{display:block;margin:0 0 9px;color:#d4e7f8;font:600 11px/1.2 'Space Grotesk',sans-serif}
.media-studio--director .media-director-recipe-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.media-studio--director .media-director-recipe-list button{min-height:36px;padding:5px;border:1px solid rgba(133,188,232,.13);border-radius:8px;background:rgba(6,18,29,.55);color:#a2b7c9;font:600 10px/1.2 'Space Grotesk',sans-serif;cursor:pointer}
.media-studio--director .media-director-recipe-list button:hover,.media-studio--director .media-director-recipe-list button.active{color:#f0f8ff;border-color:rgba(121,200,248,.5);background:rgba(77,145,206,.21)}
.media-studio--director .media-director-recipes p{margin:9px 0 0;color:#8298aa;font-size:10px;line-height:1.45}
.media-studio--director .media-director-inline{display:flex;align-items:center;gap:8px;color:#a7b9ca;font-size:10px}
.media-studio--director .media-director-inline label{flex:1;min-width:0}
.media-studio--director .media-director-inline input{width:86px;min-height:31px;background:#0b1a29;color:#e9f4fd;border:1px solid rgba(131,186,225,.2);border-radius:7px;text-align:right;padding:5px;font:500 11px/1 'JetBrains Mono',monospace}
.media-studio--director .media-director-lens{padding:11px 8px;margin:0 0 10px;border:1px solid rgba(134,181,213,.1);border-radius:9px}
.media-studio--director .media-director-lens small{display:block;margin-top:7px;line-height:1.45;color:#8291a0;font-size:9px}
.media-studio--director .media-director-hold{display:flex!important;align-items:center;justify-content:flex-start!important;gap:9px;min-height:35px;margin:0 0 10px;color:#bdcbda;font-size:10px}
.media-studio--director .media-director-hold input{accent-color:#82c5f6}
.media-studio--director .media-director-guide-control{display:grid;gap:7px;padding:12px;border:1px solid rgba(145,187,219,.12);border-radius:9px;margin-top:18px}
.media-studio--director .media-director-guide-control label{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#c7d5e1;font-size:11px}
.media-studio--director .media-director-guide-control small{color:#7a8f9f;font-size:10px;line-height:1.4}
.media-studio--director .media-director-timeline[hidden],.media-studio--director .video-only[hidden]{display:none!important}
.media-studio--director .media-director-timeline{position:absolute;left:18px;right:476px;bottom:18px;height:auto;min-height:199px;max-height:46vh;overflow:auto;z-index:3;pointer-events:auto;display:flex;flex-direction:column;gap:8px;padding:12px 15px 11px;border:1px solid rgba(148,194,229,.22);border-radius:14px;background:linear-gradient(135deg,rgba(10,25,39,.96),rgba(4,12,20,.97));backdrop-filter:blur(22px);box-shadow:0 16px 44px rgba(0,0,0,.45);font-family:'Space Grotesk',sans-serif}
.media-studio--director .media-director-timeline button{cursor:pointer}
.media-studio--director .media-director-timeline-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.media-studio--director .media-director-timeline-heading{display:grid;gap:4px;min-width:120px}
.media-studio--director .media-director-timeline-heading strong{color:#e1f0fb;font-size:11px;letter-spacing:.1em}
.media-studio--director .media-director-timeline-heading output{color:#7991a4;font:500 10px/1 'JetBrains Mono',monospace}
.media-studio--director .media-director-transport{display:flex;align-items:center;justify-content:center;gap:4px}
.media-studio--director .media-director-transport button{min-width:30px;min-height:31px;padding:3px;border:1px solid rgba(143,184,217,.12);border-radius:7px;background:rgba(31,52,71,.37);color:#c8d9e9;font-size:12px;white-space:nowrap}
.media-studio--director .media-director-transport button:hover,.media-studio--director .media-director-timeline button:focus-visible{border-color:rgba(122,204,255,.55);color:white;background:rgba(61,127,185,.22)}
.media-studio--director .media-director-transport .media-director-play{min-width:44px;color:#fff;background:rgba(73,153,217,.25);border-color:rgba(122,204,255,.43);font-size:18px}
.media-studio--director .media-director-transport button.active{background:rgba(81,163,215,.32);border-color:rgba(133,220,255,.65)}
.media-studio--director .media-director-clock{white-space:nowrap;color:#69859b;font:500 10px/1 'JetBrains Mono',monospace}
.media-studio--director .media-director-clock output:first-child{color:#b8e2ff}
.media-studio--director .media-director-ruler{display:grid;grid-template-columns:82px minmax(0,1fr) 36px;gap:10px;align-items:center;color:#8599a9;font:600 9px/1 'JetBrains Mono',monospace}
.media-studio--director .media-director-ruler input{width:100%;margin:0;accent-color:#77c9f5;cursor:ew-resize}
.media-studio--director .media-director-tracks{display:grid;gap:5px}
.media-studio--director .media-director-track{display:grid;grid-template-columns:82px minmax(0,1fr) 36px;align-items:center;gap:10px;min-height:28px}
.media-studio--director .media-director-track>label{color:#b8cbdc;font:600 9px/1 'JetBrains Mono',monospace;letter-spacing:.06em}
.media-studio--director .media-director-track:nth-child(2)>label{color:#dfbd88}
.media-studio--director .media-director-track-lane{position:relative;min-width:0;height:23px;border:1px solid rgba(130,185,224,.13);border-radius:5px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(137,177,211,.09) calc(10% - 1px),rgba(137,177,211,.09) 10%),rgba(4,14,25,.72);cursor:crosshair}
.media-studio--director .media-director-marker{position:absolute;top:50%;width:12px;height:12px;min-height:0!important;min-width:0!important;padding:0!important;border:1px solid #aee3ff!important;border-radius:2px!important;background:#579eca!important;transform:translate(-50%,-50%) rotate(45deg);touch-action:none;cursor:grab!important}
.media-studio--director .media-director-track:nth-child(2) .media-director-marker{background:#c4975a!important;border-color:#ffe0a0!important}
.media-studio--director .media-director-marker.active{background:#fff!important;box-shadow:0 0 0 4px rgba(100,186,238,.21),0 0 12px rgba(118,201,255,.65)}
.media-studio--director .media-director-track>button{min-height:24px;min-width:24px;border:1px solid rgba(139,183,221,.2);border-radius:6px;background:rgba(19,45,67,.5);color:#b7d8f0}
.media-studio--director .media-director-timeline-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid rgba(159,199,226,.09);padding-top:8px}
.media-studio--director .media-director-edit-actions,.media-studio--director .media-director-time-toggle{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.media-studio--director .media-director-edit-actions button,.media-studio--director .media-director-time-toggle button{min-height:28px;padding:4px 9px;border:1px solid rgba(134,182,219,.2);border-radius:7px;color:#abc7dc;background:rgba(21,47,70,.46);font-size:9px}
.media-studio--director .media-director-edit-actions button:disabled{opacity:.35;cursor:not-allowed}
.media-studio--director .media-director-edit-actions button.is-recording{color:#ffbdc2;border-color:#e45c73}
.media-studio--director .media-director-time-toggle label{display:flex;align-items:center;gap:6px;color:#c6d5e4;font-size:10px;white-space:nowrap}
.media-studio--director .media-director-time-toggle input{accent-color:#e0b77b}
.media-studio--director .media-director-help{padding:8px 10px;background:rgba(22,44,62,.75);border:1px solid rgba(130,187,229,.2);border-radius:8px;font-size:10px;line-height:1.45;color:#bed0df}
.media-studio--director .media-director-help[hidden]{display:none!important}
.media-studio--director .media-director-help p{margin:5px 0 0}
.media-studio-preview-fx .media-composition-frame[data-guide="thirds"]{background-image:linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.53) 33.3%,rgba(255,255,255,.53) 33.45%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.53) 66.55%,rgba(255,255,255,.53) 66.7%,transparent 66.8%),linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.53) 33.3%,rgba(255,255,255,.53) 33.45%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.53) 66.55%,rgba(255,255,255,.53) 66.7%,transparent 66.8%)}
.media-studio-preview-fx .media-composition-frame[data-guide="center"]{background:linear-gradient(to right,transparent calc(50% - .5px),rgba(255,255,255,.65) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),rgba(255,255,255,.65) 50%,transparent calc(50% + .5px))}
.media-studio-preview-fx .media-composition-frame[data-guide="safe"]::after{content:"";position:absolute;inset:10%;border:1px dashed rgba(255,255,255,.72)}
@media(max-width:1100px){.media-studio--director .media-studio__panel{bottom:236px}.media-studio--director .media-director-timeline{right:18px}.media-studio--director .media-director-timeline-heading{min-width:0}}
@media(max-width:720px){.media-studio--director .media-studio__panel{bottom:230px;height:auto;max-height:calc(100dvh - 248px);top:8px}.media-studio--director .media-director-timeline{bottom:8px;left:8px;right:8px;padding:9px;gap:6px}.media-studio--director .media-director-transport{order:3;width:100%}.media-studio--director .media-director-timeline-top{gap:5px}.media-studio--director .media-director-clock{margin-left:auto}.media-studio--director .media-director-timeline-footer{flex-wrap:wrap}.media-studio--director .media-director-track,.media-studio--director .media-director-ruler{grid-template-columns:58px minmax(0,1fr) 28px;gap:4px}.media-studio--director .media-director-track>label{font-size:8px}.media-studio--director .media-director-steps button{font-size:7px}}
/* Dual Screen has its own scene monitor. Put the timeline INSIDE the central editor,
   not on top of the persistent time controls or the navigation/devtool columns. */
@media(min-width:701px){body.dual-screen-control-ui .media-studio--director .media-director-timeline{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important;max-height:235px;margin:8px 12px 10px;flex:0 0 auto;padding:9px 12px;z-index:1}body.dual-screen-control-ui .media-studio--director .media-studio__panel{display:flex;flex-direction:column}body.dual-screen-control-ui .media-studio--director .media-director-project{grid-template-columns:90px minmax(130px,1fr) minmax(130px,1fr) minmax(260px,1.6fr);align-items:center}body.dual-screen-control-ui .media-studio--director .media-director-project>strong{grid-column:auto}body.dual-screen-control-ui .media-studio--director .media-director-project .media-plan-actions{grid-column:auto}body.dual-screen-control-ui .media-studio--director .media-director-project .media-plan-json-actions{grid-column:1/-1}}
@media(min-width:901px){body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active{grid-template-areas:"title title" "recipes recipes" "freeCamera time" "cameraMode time" "cameraFov time" "lens time" "hold time" "keyframeState time" "cameraTimeline time" "legacy time"!important}body.dual-screen-control-ui .media-studio--director [data-page="movement"]>.media-director-recipes{grid-area:recipes}body.dual-screen-control-ui .media-studio--director [data-page="movement"]>.media-director-lens{grid-area:lens}body.dual-screen-control-ui .media-studio--director [data-page="movement"]>.media-director-hold{grid-area:hold}}
@media(min-width:901px) and (max-width:1180px){body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active{grid-template-areas:"title" "recipes" "freeCamera" "cameraMode" "cameraFov" "lens" "hold" "keyframeState" "cameraTimeline" "legacy" "time"!important}}

/* Director final hierarchy: steps replace the redundant miniature icon sidebar. */
.media-studio--director .media-studio__workspace{grid-template-columns:minmax(0,1fr)}
.media-studio--director .media-tabs{display:none!important}
.media-studio--director .media-director-steps:has(>[data-director-step="movement"][hidden]){grid-template-columns:repeat(4,minmax(0,1fr))}
.media-studio--director .media-director-advanced{margin-top:12px;border:1px solid rgba(129,177,216,.15);border-radius:9px;background:rgba(4,15,26,.46);overflow:hidden}
.media-studio--director .media-director-advanced>summary{list-style-position:inside;padding:12px 10px;cursor:pointer;color:#a6c8e0;font:600 10px/1.3 'Space Grotesk',sans-serif}
.media-studio--director .media-director-advanced[open]{padding:0 10px 10px}
.media-studio--director .media-director-advanced[open]>summary{margin:0 -10px 10px;border-bottom:1px solid rgba(125,184,227,.11)}
@media(min-width:901px){body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active{grid-template-areas:"title title" "recipes recipes" "freeCamera cameraMode" "cameraFov lens" "hold hold" "keyframeState advanced" "legacy advanced"!important;align-items:start!important}body.dual-screen-control-ui .media-studio--director [data-page="movement"]>.media-director-advanced{grid-area:advanced;min-width:0}body.dual-screen-control-ui .media-studio--director .media-director-steps{gap:7px}}
@media(min-width:901px) and (max-width:1180px){body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active{grid-template-areas:"title" "recipes" "freeCamera" "cameraMode" "cameraFov" "lens" "hold" "keyframeState" "legacy" "advanced"!important}}

/* Director refinement: essential shot actions stay prominent; uncommon file actions
   sit in progressive disclosure instead of collapsing five buttons to 8px. */
.media-studio--director .media-director-project .media-plan-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
.media-studio--director .media-director-project .media-plan-actions button{min-height:32px!important;font-size:10px!important}
.media-studio--director .media-director-plan-more{grid-column:1/-1;border-top:1px solid rgba(134,182,219,.1);padding-top:7px;color:#91afc4}
.media-studio--director .media-director-plan-more>summary{cursor:pointer;padding:3px 2px;font-size:10px;font-weight:600}
.media-studio--director .media-director-plan-more>button{width:calc(50% - 3px);margin-top:8px;margin-right:3px;font-size:10px!important}
.media-studio--director .media-director-plan-more .media-plan-json-actions{margin-top:7px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.media-studio--director .media-director-plan-more .media-plan-json-actions button{min-height:30px!important;font-size:10px!important}
.media-studio--director .media-director-duration{display:flex;align-items:center;gap:6px;color:#8da6bc;font-size:10px;white-space:nowrap}
.media-studio--director .media-director-duration input{width:53px;height:29px;min-width:0;padding:4px 6px;border:1px solid rgba(133,184,223,.24);border-radius:6px;background:#081b29;color:#d7ecfc;text-align:right;font:500 11px/1 'JetBrains Mono',monospace}
body.dual-screen-control-ui .media-studio--director .media-director-plan-more{grid-column:1/-1}
@media(max-width:760px){.media-studio--director .media-director-duration input{height:27px}}

/* 2026-10-25 — MEDIA STUDIO / DUAL SCREEN WORKSTATION v2.
 * Deliberately limited to the controller monitor. All previous movement-grid
 * generations were made obsolete by the director DOM moves; clearing grid-area
 * on direct children prevents the collisions seen in the October 25 capture.
 */
body:not(.dual-screen-control-ui) .media-studio,
body:not(.dual-screen-control-ui) #screenshot-button { display:none!important; }

@media (min-width:701px) {
  body.dual-screen-control-ui .media-studio--director .media-studio__panel {
    display:flex!important;
    flex-direction:column;
    min-height:0;
    gap:0;
    background:linear-gradient(155deg,#0d1723 0%,#090f19 70%,#080e16 100%)!important;
    border:1px solid rgba(142,183,217,.18)!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-studio__panel>header {
    flex:0 0 56px;
    min-height:56px!important;
    max-height:56px;
    padding:9px 18px!important;
    display:flex; align-items:center; gap:16px;
    border-bottom:1px solid rgba(142,182,210,.12);
  }
  body.dual-screen-control-ui .media-studio--director .media-studio__heading{flex:1 1 auto;min-width:0}
  body.dual-screen-control-ui .media-studio--director .media-studio__heading small{font-size:9px;letter-spacing:.22em;color:#7495b0}
  body.dual-screen-control-ui .media-studio--director .media-studio__heading h2{margin:2px 0 0;font-size:17px;letter-spacing:-.02em;line-height:1.15;color:#f0f6fc}
  body.dual-screen-control-ui .media-studio--director .media-mode {
    flex:0 0 auto;display:flex;align-items:center;gap:3px;
    width:auto;min-width:0;padding:3px!important;margin:0!important;
    border:1px solid rgba(138,181,217,.16);border-radius:10px;background:#081420;
  }
  body.dual-screen-control-ui .media-studio--director .media-mode button{
    flex:0 0 auto;min-width:96px;height:32px;min-height:32px;padding:5px 14px;
    font:600 12px/1 'Space Grotesk',sans-serif;letter-spacing:.025em;border-radius:7px;
    border:1px solid transparent;
  }
  body.dual-screen-control-ui .media-studio--director .media-mode button.active{background:#203a53;border-color:#467391;color:#f3f8ff}
  body.dual-screen-control-ui .media-studio--director .media-close{
    display:grid!important;place-items:center;flex:0 0 32px;width:32px;height:32px;
    font-size:22px;line-height:1;color:#a7bccd;opacity:1;
    border:1px solid rgba(132,176,213,.14);border-radius:9px;background:#142334;
  }
  body.dual-screen-control-ui .media-studio--director .media-close:hover{color:#fff;border-color:#6689a8}
  body.dual-screen-control-ui .media-studio--director .media-director-project {
    flex:0 0 auto;display:grid!important;
    grid-template-columns:110px minmax(145px,.9fr) minmax(165px,1.2fr) minmax(250px,1.5fr) auto!important;
    align-items:center;gap:8px!important;
    margin:12px 16px 9px!important;padding:9px 12px!important;
    border:1px solid rgba(128,175,216,.15)!important;border-radius:11px;
    background:rgba(8,23,36,.72)!important;
    min-height:52px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-project>strong{
    grid-column:auto!important;font-size:11px!important;line-height:1.25;white-space:normal;color:#a8bdcf;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-project>[data-plan-select],
  body.dual-screen-control-ui .media-studio--director .media-director-project>[data-plan-name]{
    grid-column:auto!important;max-width:none;min-width:0;min-height:35px!important;height:35px!important;
    padding:6px 11px!important;font-size:12px!important;border-radius:8px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-project .media-plan-actions{
    display:grid!important;grid-column:auto!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;align-items:center;min-width:0;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-project .media-plan-actions button{
    font-size:11px!important;min-width:0;min-height:35px!important;height:35px!important;
    padding:6px 8px!important;text-overflow:ellipsis;overflow:hidden;border-radius:8px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more{
    grid-column:auto!important;align-self:center;border:0;padding:0;position:relative;
    color:#b9cede;font-size:11px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more>summary{
    border:1px solid rgba(131,177,211,.18);border-radius:8px;
    padding:9px 11px;min-height:35px;box-sizing:border-box;background:#152739;
    font-size:11px;white-space:nowrap;list-style:none;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more>summary:after{content:' ▾';color:#83aed0}
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more[open]{z-index:15}
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more[open]>button,
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more[open]>.media-plan-json-actions{position:relative;z-index:16}
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more[open]{
    position:relative;min-width:170px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more[open]:after{
    content:'';position:absolute;top:34px;left:-7px;right:-7px;bottom:-12px;
    background:#0c1a28;border:1px solid rgba(128,179,214,.24);border-radius:0 0 9px 9px;z-index:14;box-shadow:0 12px 24px #0008;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more>button{
    width:calc(50% - 7px);min-height:31px!important;margin:10px 3px 0!important;font-size:11px!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more .media-plan-json-actions{margin-top:9px}
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more .media-plan-json-actions button{font-size:10px!important}
  body.dual-screen-control-ui .media-studio--director .media-director-steps{
    flex:0 0 auto;display:flex;gap:6px!important;margin:0 16px 0!important;
    padding:0 0 10px!important;border-bottom:1px solid rgba(130,183,220,.10);
  }
  body.dual-screen-control-ui .media-studio--director .media-director-steps button{
    flex:1 1 0;height:40px;min-height:40px!important;font-size:12px!important;
    font-weight:600;letter-spacing:.01em;border-radius:8px;background:rgba(17,31,44,.65);
    color:#9cb0c2;border:1px solid rgba(120,166,203,.13);
  }
  body.dual-screen-control-ui .media-studio--director .media-director-steps button.active{
    color:#f1faff;background:#233e57;border-color:#5189b4;box-shadow:inset 0 -2px 0 #76bce8;
  }
  body.dual-screen-control-ui .media-studio--director .media-studio__workspace{
    display:grid!important;flex:1 1 0;grid-template-columns:minmax(0,1fr)!important;
    min-height:0;overflow:hidden;border:0!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-pages{
    display:block;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;
    padding:14px 17px!important;scrollbar-width:thin;scrollbar-color:#35556f transparent;
  }
  /* Reset layout areas supplied by obsolete historical Movement workspaces. */
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active{
    display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important;
    grid-template-areas:none!important;align-content:start!important;align-items:start!important;
    gap:11px 14px!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"]>*{
    grid-area:auto!important;grid-column:1/-1;min-width:0;min-height:0;
    box-sizing:border-box;
  }
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"]>.media-page-title{
    grid-column:1/-1;margin:0!important;padding:0 0 7px!important;min-height:auto;
  }
  body.dual-screen-control-ui .media-studio--director .media-pages .media-page-title strong{font-size:13px!important}
  body.dual-screen-control-ui .media-studio--director .media-pages .media-page-title span{font-size:11px!important;color:#8fa7b9}
  body.dual-screen-control-ui .media-studio--director .media-director-recipes{
    grid-column:1/-1;margin:0!important;padding:13px 15px!important;border-radius:11px;
    background:#112235;border-color:#29445b;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-recipes>strong{font-size:13px}
  body.dual-screen-control-ui .media-studio--director .media-director-recipe-list{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-recipe-list button{
    min-height:41px;padding:7px 5px;font-size:12px!important;border-radius:8px;
    border-color:rgba(130,178,215,.20);background:#0b1b2a;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-recipes p{font-size:11px;line-height:1.45;margin:8px 0 0}
  body.dual-screen-control-ui .media-studio--director .media-free-camera-toolbar{
    grid-column:1;margin:0!important;min-width:0;min-height:66px;
    grid-template-columns:auto minmax(145px,1fr) auto;gap:8px;
    padding:11px!important;border:1px solid #29445b;border-radius:10px;background:#101f2e;
  }
  body.dual-screen-control-ui .media-studio--director .media-free-camera-toolbar>button{font-size:11px;min-height:36px}
  body.dual-screen-control-ui .media-studio--director .media-free-camera-toolbar select{font-size:11px;min-height:36px}
  body.dual-screen-control-ui .media-studio--director .media-free-camera-toolbar>label>span,
  body.dual-screen-control-ui .media-studio--director .media-free-camera-toolbar-speed>span{font-size:10px}
  body.dual-screen-control-ui .media-studio--director .media-free-camera-toolbar-speed output{font-size:11px}
  body.dual-screen-control-ui .media-studio--director .media-director-lens{
    grid-column:2;margin:0;padding:12px 14px;min-height:66px;
    border:1px solid #29445b;border-radius:10px;background:#101f2e;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-inline{font-size:12px}
  body.dual-screen-control-ui .media-studio--director .media-director-inline input{font-size:13px;min-height:36px}
  body.dual-screen-control-ui .media-studio--director .media-director-lens small{font-size:10px;line-height:1.35}
  body.dual-screen-control-ui .media-studio--director .media-director-motion-selector{
    grid-column:1!important;grid-area:auto!important;display:flex!important;
    justify-content:space-between;gap:15px;min-height:52px!important;height:auto!important;
    padding:9px 12px!important;margin:0!important;font-size:12px!important;
    border:1px solid #29445b;border-radius:10px;background:#0f2030;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-motion-selector select{min-width:160px;max-width:55%;font-size:12px!important}
  body.dual-screen-control-ui .media-studio--director .media-director-legacy{
    grid-column:2;grid-area:auto!important;min-width:0;margin:0!important;
    padding:9px 12px!important;border:1px solid #29445b;border-radius:10px;background:#101f2e;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-legacy label{font-size:11px!important}
  body.dual-screen-control-ui .media-studio--director .media-director-hold{
    grid-column:1/-1!important;grid-area:auto!important;min-height:31px!important;
    padding:6px 10px!important;margin:0!important;font-size:12px!important;
    border:1px solid rgba(137,179,208,.13);border-radius:8px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-free-details,
  body.dual-screen-control-ui .media-studio--director .media-director-advanced{
    grid-area:auto!important;grid-column:auto;min-width:0;min-height:0;
    margin:0!important;border:1px solid #2b465c;border-radius:10px;
    background:rgba(10,25,38,.78);overflow:hidden;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-free-details>summary,
  body.dual-screen-control-ui .media-studio--director .media-director-advanced>summary{
    display:block;padding:12px 14px!important;font-size:12px!important;font-weight:600;
    line-height:1.4!important;cursor:pointer;list-style:none;color:#bdd5e8;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-free-details>summary:after,
  body.dual-screen-control-ui .media-studio--director .media-director-advanced>summary:after{
    content:'▾';float:right;color:#84b8dc;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-free-details[open],
  body.dual-screen-control-ui .media-studio--director .media-director-advanced[open]{padding:0 12px 12px!important}
  body.dual-screen-control-ui .media-studio--director .media-director-free-details[open]>summary,
  body.dual-screen-control-ui .media-studio--director .media-director-advanced[open]>summary{
    margin:0 -12px 10px;padding-left:24px!important;padding-right:24px!important;
    border-bottom:1px solid rgba(130,174,203,.14);
  }
  body.dual-screen-control-ui .media-studio--director .media-director-free-details>.media-free-camera,
  body.dual-screen-control-ui .media-studio--director .media-director-advanced>*:not(summary){max-width:100%;min-width:0}
  body.dual-screen-control-ui .media-studio--director .media-director-advanced .media-timeline,
  body.dual-screen-control-ui .media-studio--director .media-director-advanced .media-timeline-time-range{margin-top:10px}
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;align-content:start;
  }
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active>.media-page-title,
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active>.media-presets,
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active>.media-note,
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active>.media-director-guide-control {grid-column:1/-1}
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active>.media-range,
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active>.media-switch,
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page]:not([data-page="movement"]).active>label{
    min-height:45px;margin:0!important;padding:9px 12px!important;border:1px solid rgba(130,175,210,.13);
    border-radius:9px;background:rgba(12,29,43,.65);font-size:12px!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-pages input,
  body.dual-screen-control-ui .media-studio--director .media-pages select{font-size:12px;max-width:100%}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline{
    flex:0 0 auto;min-height:0!important;max-height:min(38vh,300px)!important;
    padding:11px 14px!important;margin:0 16px 10px!important;gap:8px;
    border-color:rgba(115,167,208,.24);border-radius:11px;
    box-shadow:none;background:#081724;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-timeline-top{gap:12px;flex-wrap:nowrap}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline-heading{min-width:123px}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline-heading strong{font-size:12px!important}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline-heading output{font-size:10px}
  body.dual-screen-control-ui .media-studio--director .media-director-transport{gap:5px;flex:1 1 auto}
  body.dual-screen-control-ui .media-studio--director .media-director-transport button{
    min-width:34px;min-height:34px;font-size:14px;border-radius:7px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-transport button.media-director-play{
    min-width:44px;min-height:38px;font-size:19px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-clock{font-size:11px}
  body.dual-screen-control-ui .media-studio--director .media-director-duration{font-size:11px}
  body.dual-screen-control-ui .media-studio--director .media-director-duration input{height:32px;width:58px;font-size:12px}
  body.dual-screen-control-ui .media-studio--director .media-director-collapse{
    flex:0 0 28px;min-width:28px;min-height:29px;padding:0;
    border:1px solid rgba(135,184,215,.2);border-radius:7px;
    background:#172d40;color:#a9cde4;font-size:17px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-ruler,
  body.dual-screen-control-ui .media-studio--director .media-director-track{
    grid-template-columns:70px minmax(0,1fr) 34px;gap:10px;min-height:31px;font-size:11px;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-track>label{font-size:11px}
  body.dual-screen-control-ui .media-studio--director .media-director-track-lane{height:28px}
  body.dual-screen-control-ui .media-studio--director .media-director-track>button{min-height:28px;font-size:17px}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline-footer button{font-size:11px;min-height:29px}
  body.dual-screen-control-ui .media-studio--director .media-director-time-toggle label{font-size:11px}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline.is-sequence-collapsed{max-height:64px!important;overflow:hidden}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline.is-sequence-collapsed>.media-director-ruler,
  body.dual-screen-control-ui .media-studio--director .media-director-timeline.is-sequence-collapsed>.media-director-tracks,
  body.dual-screen-control-ui .media-studio--director .media-director-timeline.is-sequence-collapsed>.media-director-timeline-footer,
  body.dual-screen-control-ui .media-studio--director .media-director-timeline.is-sequence-collapsed>.media-director-help{display:none!important}
  body.dual-screen-control-ui .media-studio--director footer{
    flex:0 0 49px;min-height:49px;padding:7px 16px!important;gap:8px;
    background:#0a1521;border-top:1px solid rgba(121,177,219,.12);
  }
  body.dual-screen-control-ui .media-studio--director footer button{min-height:34px;font-size:11px!important;border-radius:8px}
  body.dual-screen-control-ui .media-studio--director footer .media-primary{font-size:12px!important;min-width:160px}
}
@media (min-width:701px) and (max-width:1200px){
  body.dual-screen-control-ui .media-studio--director .media-director-project{
    grid-template-columns:105px minmax(100px,1fr) minmax(110px,1fr)!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-project .media-plan-actions{grid-column:1/3!important}
  body.dual-screen-control-ui .media-studio--director .media-director-plan-more{grid-column:3!important}
  body.dual-screen-control-ui .media-studio--director .media-director-recipe-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active{grid-template-columns:minmax(0,1fr)!important}
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"]>*{grid-column:1/-1!important}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline-top{flex-wrap:wrap}
}


/* 2026-10-25 — Dual Screen: retractable Navigation, no permanent left bay.
   The working area (Dashboard, Media Studio, time controls) starts at the
   left gutter. The original Navigation is available as a transient overlay.
   All these overrides are scoped to Dual Screen; Single Screen is unchanged. */
@media (min-width:701px){
  body.dual-screen-control-ui{
    --dual-left-width:0px;
    --dual-navigation-width:clamp(320px,28vw,400px);
  }
  /* Only 12px of workspace is reserved on the left, regardless of whether
     the navigation overlay is expanded. Opening it never resizes the Studio. */
  #app.dual-screen-control > #mobile-info-panel.info-panel,
  #app.dual-screen-control > #mobile-time-panel.timeline-panel,
  body.dual-screen-control-ui .media-studio__panel,
  body.dual-screen-control-ui .media-studio.is-collapsed .media-studio__panel{
    left:var(--dual-work-gap,12px) !important;
  }
  /* Reuse the normal navigation action rather than adding a second handler. */
  #app.dual-screen-control > #navigation-sheet-toggle.navigation-sheet-toggle{
    position:fixed !important;
    z-index:72 !important;
    display:inline-flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    top:calc(var(--dual-work-top,92px) - 46px) !important;
    left:var(--dual-work-gap,12px) !important;
    right:auto !important;
    bottom:auto !important;
    width:112px !important;
    min-width:112px !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 9px !important;
    border:1px solid rgba(144,189,228,.23) !important;
    border-left:1px solid rgba(144,189,228,.23) !important;
    border-radius:10px !important;
    color:#dcebf7 !important;
    background:rgba(14,31,47,.97) !important;
    box-shadow:3px 5px 16px rgba(0,0,0,.28) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    transition:background .15s ease,border-color .15s ease !important;
  }
  #app.dual-screen-control > #navigation-sheet-toggle.navigation-sheet-toggle .scene-tool-label{
    display:inline !important;
    color:inherit !important;
    font:600 11px/1.2 'Poppins',sans-serif !important;
    white-space:nowrap !important;
  }
  #app.dual-screen-control > #navigation-sheet-toggle.navigation-sheet-toggle .scene-tool-icon{
    flex:0 0 20px !important;
    width:20px !important;
    height:20px !important;
    margin:0 !important;
  }
  #app.dual-screen-control.scene-navigation-open > #navigation-sheet-toggle.navigation-sheet-toggle{
    left:var(--dual-work-gap,12px) !important;
    border-color:rgba(144,189,228,.32) !important;
    background:rgba(32,66,94,.98) !important;
  }
  /* Earlier Dual Screen CSS forced the navigation visible even with inert and
     aria-hidden. Override both states explicitly to restore click-to-open. */
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation,
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation.is-open{
    left:0 !important;
    right:auto !important;
    width:var(--dual-navigation-width) !important;
    max-width:calc(100vw - 124px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(calc(-100% - 8px)) !important;
    transition:transform .22s ease,opacity .18s ease,visibility 0s linear .22s !important;
  }
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
    transition:transform .22s ease,opacity .18s ease,visibility 0s !important;
  }
  #app.dual-screen-control{
    --scene-left-occupancy:0px !important;
    --scene-right-occupancy:0px !important;
  }
}
@media (min-width:701px) and (max-width:900px){
  body.dual-screen-control-ui{--dual-navigation-width:clamp(270px,37vw,320px)}
}
@media (min-width:701px) and (prefers-reduced-motion:reduce){
  #app.dual-screen-control > #navigation-sheet-toggle.navigation-sheet-toggle,
  #app.dual-screen-control > #mobile-view-panel.view-controls.topsheet-navigation{
    transition:none !important;
  }
}

/* The Studio is docked inside #app for Dual Screen. Its inspector must sit
   below the temporary Navigation (z60) and the menu tab (z72). */
@media (min-width:701px){
  body.dual-screen-control-ui #app.dual-screen-control > .media-studio.media-studio--director{
    z-index:46 !important;
  }
}

@media (min-width:701px){
  #app.dual-screen-control > #navigation-sheet-toggle.navigation-sheet-toggle .scene-tool-icon{
    stroke:currentColor !important;
    fill:none !important;
  }
}

/* Preserve the original Menu icon in Single Screen. The self-contained vector
   is used only on the Dual Screen control surface. */
#app:not(.dual-screen-control) > #navigation-sheet-toggle .scene-tool-icon--navigation-dual { display:none !important; }
@media (min-width:701px){
  #app.dual-screen-control > #navigation-sheet-toggle .scene-tool-icon--navigation-single { display:none !important; }
  #app.dual-screen-control > #navigation-sheet-toggle .scene-tool-icon--navigation-dual { display:block !important; }
}


/* 2026-10-25 — Earlier Media Studio workstation rules, now scoped to the
   second-screen Studio document only. The main scene is not transferred. */
@media (min-width:701px) {
  body.dual-screen-control-ui #app.dual-screen-control > #mobile-info-panel.info-panel,
  body.dual-screen-control-ui #app.dual-screen-control > #dashboard-panel-toggle {
    display:none!important;
  }
  body.dual-screen-control-ui #app.dual-screen-control > #screenshot-button,
  body.dual-screen-control-ui #app.dual-screen-control #screenshot-button {
    display:none!important;
  }
  body.dual-screen-control-ui #app.dual-screen-control > .media-studio.media-studio--director {
    z-index:46!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-studio__panel,
  body.dual-screen-control-ui .media-studio--director.is-collapsed .media-studio__panel{
    left:var(--dual-work-gap,12px)!important;
    right:var(--dual-content-right,68px)!important;
    top:var(--dual-work-top,92px)!important;
    bottom:var(--dual-timeline-clearance,124px)!important;
    min-width:0!important;
    max-width:none!important;
    border-radius:12px!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-timeline {
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:auto!important;
    min-width:0!important;
    max-height:270px!important;
    min-height:0!important;
    margin:8px 16px 12px!important;
    padding:10px 14px!important;
    border-radius:10px!important;
    overflow:auto!important;
    box-shadow:none!important;
    flex:0 0 auto!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-timeline.is-sequence-collapsed {
    max-height:64px!important;
    min-height:0!important;
    margin-bottom:8px!important;
    overflow:hidden!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-keyframe-start {
    grid-column:1/-1!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 17px;
    border:1px solid rgba(115,179,227,.28);
    border-radius:10px;
    background:linear-gradient(120deg,rgba(27,62,87,.65),rgba(13,33,51,.55));
  }
  body.dual-screen-control-ui .media-studio--director .media-director-keyframe-start>div{flex:1;min-width:0}
  body.dual-screen-control-ui .media-studio--director .media-director-keyframe-start strong {display:block;color:#e4f4ff;font-size:12px;line-height:1.5}
  body.dual-screen-control-ui .media-studio--director .media-director-keyframe-start p {color:#a5bed2;font-size:11px;line-height:1.5;margin:4px 0 0}
  body.dual-screen-control-ui .media-studio--director .media-director-keyframe-start button {
    flex:0 0 auto;
    min-height:39px;
    padding:8px 15px;
    border:1px solid rgba(125,200,255,.46);
    border-radius:8px;
    background:rgba(54,128,182,.33);
    color:#f4fbff;
    font:600 11px/1.4 'Space Grotesk',sans-serif;
    cursor:pointer;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-auto-moves {
    grid-column:1/-1!important;
    align-self:start;
    border:1px solid rgba(129,177,216,.15);
    border-radius:9px;
    background:rgba(4,15,26,.46);
    overflow:hidden;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-auto-moves>summary {
    padding:11px 14px;
    color:#a6c8e0;
    font:600 11px/1.3 'Space Grotesk',sans-serif;
    cursor:pointer;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-auto-moves[open]{padding-bottom:12px}
  body.dual-screen-control-ui .media-studio--director .media-director-auto-moves .media-director-recipes {margin:0 10px 10px!important}
  body.dual-screen-control-ui .media-studio--director .media-director-auto-moves>label,
  body.dual-screen-control-ui .media-studio--director .media-director-auto-moves>[data-legacy-motion-controls]{margin:9px 12px!important}
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active {
    grid-template-areas:none!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-pages section[data-page="movement"].active > * {
    grid-area:auto!important;
  }
  body.dual-screen-control-ui .media-studio--director .media-director-auto-moves,
  body.dual-screen-control-ui .media-studio--director .media-director-advanced {grid-column:1/-1!important}
  body.dual-screen-control-ui .media-studio--director .media-director-keyframe-start {grid-column:1/-1!important}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline-footer {padding-top:10px}
}
@media (min-width:701px) and (max-width:1050px) {
  body.dual-screen-control-ui .media-studio--director .media-director-keyframe-start {flex-direction:column;align-items:stretch}
  body.dual-screen-control-ui .media-studio--director .media-director-timeline {max-height:245px!important}
}

/* 2026-10-25 — Media Studio occupies its own physical monitor.
   The main document never receives dual-screen-control-ui / dual-screen-control:
   the existing scene, navigation drawer, tool rail, time controls, dashboard
   and floating DevTool stay unchanged on monitor 1. Only this popup gets the
   old Studio workbench styling, with full monitor width and no fictitious
   dashboard, navigation, tool rail, or time-control spacing. */
body.stellarius-studio-output {
  --dual-left-width:0px;
  --dual-tool-bay:0px;
  --dual-debug-width:0px;
  --dual-work-gap:12px;
  --dual-content-right:12px;
  --dual-timeline-clearance:12px;
  --dual-timeline-measured-clearance:12px;
  background:#050c15;
  overflow:hidden;
}
body.stellarius-studio-output #app.dual-screen-control {
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:#050c15!important;
}
body.stellarius-studio-output #app.dual-screen-control::before,
body.stellarius-studio-output #app.dual-screen-control::after {
  display:none!important;
}
body.stellarius-studio-output .media-studio,
body.stellarius-studio-output #app.dual-screen-control > .media-studio.media-studio--director {
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:50!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
}
body.stellarius-studio-output .media-studio[hidden] { display:none!important; }
body.stellarius-studio-output .media-studio__backdrop { display:none!important; }
body.stellarius-studio-output .media-studio--director .media-studio__panel,
body.stellarius-studio-output .media-studio--director.is-collapsed .media-studio__panel {
  position:absolute!important;
  top:58px!important;
  left:12px!important;
  right:12px!important;
  bottom:12px!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid rgba(131,181,221,.20)!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#0c1c2b,#07111d)!important;
  box-shadow:none!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  animation:none!important;
}
body.stellarius-studio-output .media-studio--director .media-studio__workspace {
  min-height:0!important;
  flex:1 1 0!important;
  overflow:hidden!important;
}
body.stellarius-studio-output .media-studio--director .media-pages {
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body.stellarius-studio-output .media-studio--director .media-director-timeline {
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-height:min(33vh,320px)!important;
  margin:8px 16px 12px!important;
  flex:0 0 auto!important;
  overflow-y:auto!important;
}
body.stellarius-studio-output .media-studio--director .media-director-timeline.is-sequence-collapsed {
  max-height:64px!important;
  overflow:hidden!important;
}
body.stellarius-studio-output .media-studio--director footer {
  flex:0 0 auto;
}
@media(max-width:900px) {
  body.stellarius-studio-output .media-studio--director .media-pages section.active {
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-timeline {
    max-height:230px!important;
  }
}

/* 2026-10-25 — Media Studio Phase 2: one camera inspector / one keyframe workflow.
   The workstation is the SECOND window; it does not contain a scene preview. */
@media (min-width:701px) {
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector {
    grid-column:1/-1!important;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);
    gap:12px 16px;
    padding:16px;
    border:1px solid rgba(112,171,219,.27);
    border-radius:11px;
    background:linear-gradient(130deg,rgba(18,41,61,.86),rgba(10,27,42,.72));
    min-width:0;
  }
  body.stellarius-studio-output .media-studio--director .media-director-inspector-head {
    grid-column:1/-1;
    display:flex;align-items:center;justify-content:space-between;gap:15px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(140,187,222,.14);
  }
  body.stellarius-studio-output .media-studio--director .media-director-inspector-head strong {
    color:#e5f3ff;font:600 12px/1.4 'Space Grotesk',sans-serif;letter-spacing:.05em;
  }
  body.stellarius-studio-output .media-studio--director [data-director-reference-value] {
    color:#8ac8f0;font:500 11px/1.4 'Space Grotesk',sans-serif;text-align:right;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-free-camera-toolbar {
    grid-column:1/-1;
    min-height:0;
    width:100%;
    box-sizing:border-box;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector [data-camera-fov-control] {
    grid-column:1;
    display:block!important;
    margin:0!important;
    min-width:0;
    padding:11px 13px;
    border:1px solid rgba(133,180,219,.19);
    border-radius:8px;
    background:rgba(5,17,28,.4);
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation {
    grid-column:2;
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:9px;
    min-width:0;
    padding:11px 13px;
    margin:0!important;
    border:1px solid rgba(133,180,219,.19);
    border-radius:8px;
    background:rgba(5,17,28,.4);
    font-size:11px;
    color:#b7d1e5;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation select {
    width:100%;min-height:34px;font-size:12px;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-hold {
    grid-column:1/-1;
  }
  body.stellarius-studio-output .media-studio--director .media-director-reference-help {
    grid-column:1/-1;
    margin:0;
    color:#8ca6ba;
    font-size:11px;
    line-height:1.45;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-free-details {
    grid-column:1/-1!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-lens {
    grid-column:1/-1;
    margin:5px 0 0;
  }
  body.stellarius-studio-output .media-studio--director .media-director-auto-moves,
  body.stellarius-studio-output .media-studio--director .media-director-advanced {
    grid-column:1/-1!important;
  }
}
@media (max-width:900px) {
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector {
    display:flex;flex-direction:column;gap:11px;padding:12px;
    border:1px solid rgba(112,171,219,.27);border-radius:10px;
    background:#102335;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector > *{min-width:0;width:100%;box-sizing:border-box}
  body.stellarius-studio-output .media-studio--director .media-director-inspector-head {display:flex;justify-content:space-between;gap:10px}
  body.stellarius-studio-output .media-studio--director .media-director-inspector-head strong{font-size:12px;color:#e7f3ff}
  body.stellarius-studio-output .media-studio--director [data-director-reference-value]{font-size:11px;color:#93c9eb}
  body.stellarius-studio-output .media-studio--director .media-director-reference-help{font-size:11px;line-height:1.5;color:#91aabd;margin:0}
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation{display:flex;gap:10px;align-items:center;font-size:12px}
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation select{flex:1;min-width:0}
}

/* Older procedural camera controls remain import-compatible, but hidden behind
   a second explicit disclosure so they never compete with ordinary keyframes. */
body.stellarius-studio-output .media-studio--director .media-director-legacy-options {
  margin:10px 13px 0;padding:0 11px 8px;
  border:1px solid rgba(130,178,215,.15);border-radius:8px;
  background:rgba(5,15,25,.4);
}
body.stellarius-studio-output .media-studio--director .media-director-legacy-options>summary {
  cursor:pointer;padding:10px 0;color:#8fa7ba;font-size:11px;
}
body.stellarius-studio-output .media-studio--director .media-director-legacy-options>label,
body.stellarius-studio-output .media-studio--director .media-director-legacy-options>[data-legacy-motion-controls]{
  width:100%;max-width:none;box-sizing:border-box;margin:7px 0!important;
}

/* Media Studio / Phase 3 — precision editor for camera and astronomical-time keys.
 * This dock lives on the Studio OUTPUT window; navigation/time controls stay in
 * the original 3D window. No WebGL preview or duplicate time controls here. */
.media-studio--director .media-director-key-editor{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:10px 12px;border:1px solid rgba(133,184,224,.19);
  background:rgba(9,27,43,.7);border-radius:8px;min-height:40px;
}
.media-studio--director .media-director-key-editor.is-empty{
  padding:8px 12px;min-height:0;
}
.media-studio--director .media-director-key-editor.is-empty .media-director-key-video-time{display:none}
.media-studio--director .media-director-key-title{font:600 10px/1.4 'Space Grotesk',sans-serif;letter-spacing:.03em;color:#c9e4f6;min-width:130px}
.media-studio--director .media-director-key-editor.is-empty .media-director-key-title{font-weight:400;color:#8faabb}
.media-studio--director .media-director-key-video-time,.media-studio--director .media-director-key-date,
.media-studio--director .media-director-key-hold{display:flex;align-items:center;gap:8px;color:#bdd3e5;font-size:10px;white-space:nowrap}
.media-studio--director .media-director-key-video-time input,
.media-studio--director .media-director-key-date input,
.media-studio--director .media-director-time-info select{
  min-height:30px;min-width:0;padding:4px 8px;box-sizing:border-box;
  border:1px solid rgba(132,181,222,.3);border-radius:6px;
  background:#091d2d;color:#e3f1fb;color-scheme:dark;font:500 11px 'JetBrains Mono',monospace;
}
.media-studio--director .media-director-key-video-time input{width:73px;text-align:right}
.media-studio--director .media-director-key-date input{width:200px;max-width:100%}
.media-studio--director .media-director-key-editor [data-director-key-take-date]{
  min-height:30px;padding:5px 10px;font-size:10px;border-radius:6px;
  color:#b9dff8;border:1px solid rgba(112,183,226,.35);background:rgba(31,76,110,.45)
}
.media-studio--director .media-director-key-editor [data-director-key-take-date]:hover{background:rgba(49,105,146,.6)}
.media-studio--director .media-director-key-hold input{accent-color:#d9ad6f}
.media-studio--director .media-director-key-editor [hidden]{display:none!important}
.media-studio--director .media-director-time-info{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
  padding:2px 2px 5px;
}
.media-studio--director .media-director-time-info label,.media-studio--director .media-director-time-info>div{
  display:flex;align-items:center;gap:9px;color:#93acc0;font-size:10px;
}
.media-studio--director .media-director-time-info select{min-height:28px;font-family:'Space Grotesk',sans-serif}
.media-studio--director .media-director-time-info output{color:#e4c292;font:500 10px 'JetBrains Mono',monospace}
body.stellarius-studio-output .media-studio--director .media-director-timeline{
  max-height:min(44vh,400px)!important;
}
body.stellarius-studio-output .media-studio--director .media-director-timeline.is-sequence-collapsed{
  max-height:64px!important;
}
body.stellarius-studio-output .media-studio--director .media-director-timeline.is-sequence-collapsed>.media-director-key-editor,
body.stellarius-studio-output .media-studio--director .media-director-timeline.is-sequence-collapsed>.media-director-time-info{display:none!important}
@media(max-width:900px){
  body.stellarius-studio-output .media-studio--director .media-director-timeline{max-height:min(50vh,365px)!important}
  .media-studio--director .media-director-key-date{flex-wrap:wrap}
}
/* Synchronized playhead indicator on BOTH timeline tracks. */
.media-studio--director .media-director-track-cursor{
  position:absolute;top:0;bottom:0;width:2px;background:#e7f5ff;
  opacity:.62;pointer-events:none;z-index:1;transform:translateX(-1px);
}
.media-studio--director .media-director-marker{z-index:2}
.media-studio--director .media-director-track:nth-child(2) .media-director-marker.is-hold{
  border-style:dashed!important;box-shadow:0 0 0 2px rgba(225,168,89,.23);
}

/* Media Studio / Phase 4 — compact export workstation on secondary screen. */
body.stellarius-studio-output .media-studio--director .media-export-page.active{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start;gap:12px!important;
}
body.stellarius-studio-output .media-studio--director .media-export-page>.media-page-title,
body.stellarius-studio-output .media-studio--director .media-export-page>.media-export-summary,
body.stellarius-studio-output .media-studio--director .media-export-page>.media-export-advanced,
body.stellarius-studio-output .media-studio--director .media-export-page>[data-video-timing],
body.stellarius-studio-output .media-studio--director .media-export-page>[data-video-codec]{grid-column:1/-1!important}
body.stellarius-studio-output .media-studio--director .media-export-page>.media-export-profile{grid-column:1/-1!important}
body.stellarius-studio-output .media-studio--director .media-export-profile select{font-weight:600;color:#eaf5fd;min-height:39px}
body.stellarius-studio-output .media-studio--director .media-export-summary{
  white-space:pre-line;line-height:1.65;padding:14px;border:1px solid rgba(100,180,225,.28);
  border-radius:10px;background:rgba(24,59,84,.34);color:#d5e9f8;font-size:12px;
}
body.stellarius-studio-output .media-studio--director .media-export-advanced{
  padding:10px 13px;border-radius:10px;border:1px solid rgba(130,178,215,.16);background:rgba(5,17,28,.48);
}
body.stellarius-studio-output .media-studio--director .media-export-advanced summary{cursor:pointer;color:#b4cde1;font-size:12px;font-weight:600;padding:4px 0}
body.stellarius-studio-output .media-studio--director .media-export-advanced>label{display:flex;flex-direction:column;gap:7px;margin:12px 0 0}
body.stellarius-studio-output .media-studio--director .media-export-advanced>.media-note{margin:8px 0 0;color:#8facbf}
body.stellarius-studio-output .media-studio--director footer .media-export-progress{
  display:grid;grid-template-columns:auto minmax(90px,1fr) 38px;align-items:center;gap:10px;
  flex:1 1 100%;padding:5px 0;color:#c5e3f5;font-size:11px;
}
body.stellarius-studio-output .media-studio--director footer .media-export-progress[hidden]{display:none!important}
body.stellarius-studio-output .media-studio--director footer .media-export-progress progress{
  width:100%;height:9px;accent-color:#64b6e4;border:0;border-radius:5px;overflow:hidden;
}
body.stellarius-studio-output .media-studio--director footer .media-export-progress output{text-align:right;font-variant-numeric:tabular-nums}
body.stellarius-studio-output .media-studio--director.media-rendering footer .media-record{
  background:rgba(133,54,58,.43)!important;border-color:rgba(244,126,128,.5)!important;
}
@media(max-width:750px){body.stellarius-studio-output .media-studio--director .media-export-page.active{grid-template-columns:minmax(0,1fr)!important}}

body.stellarius-studio-output .media-studio--director.media-rendering footer{
  flex-wrap:wrap!important;min-height:76px!important;height:auto!important;padding-top:9px!important;
}
body.stellarius-studio-output .media-studio--director.media-rendering .media-pages,
body.stellarius-studio-output .media-studio--director.media-rendering .media-director-timeline,
body.stellarius-studio-output .media-studio--director.media-rendering .media-director-project{
  pointer-events:none;opacity:.75;
}

/* 2026-10-25 Media Studio phase 5 — second-monitor finishing pass.
   One navigation (steps), one timeline, visible autosave feedback, no extra preview. */
body.stellarius-studio-output .media-studio--director .media-director-steps{gap:8px;padding:7px 16px 12px}
body.stellarius-studio-output .media-studio--director .media-director-steps button{
 min-height:38px;font-size:11px;letter-spacing:.02em;border-radius:8px;
}
body.stellarius-studio-output .media-studio--director .media-director-project{
 grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:center;gap:9px;margin:0 16px 8px!important;
}
body.stellarius-studio-output .media-studio--director .media-director-project>strong{grid-column:1/-1}
body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions{grid-column:1/3!important;display:flex;flex-wrap:wrap;gap:8px}
body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions button{min-height:32px!important;padding:6px 10px!important}
body.stellarius-studio-output .media-studio--director .media-director-plan-more{grid-column:1/-1}
body.stellarius-studio-output .media-studio--director .media-director-save-state{
 grid-column:3;grid-row:2/4;justify-self:end;white-space:nowrap;padding:5px 7px;
 color:#a4c7de;font:500 10px 'Space Grotesk',sans-serif;
}
body.stellarius-studio-output .media-studio--director .media-director-save-state[data-state='saving']{color:#d5bc8f}
body.stellarius-studio-output .media-studio--director .media-director-save-state[data-state='failed']{color:#f2a7a7;white-space:normal}
body.stellarius-studio-output .media-studio--director .media-director-save-state::before{
 content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:currentColor;vertical-align:middle;
}
body.stellarius-studio-output .media-studio--director .media-director-timeline:not(.is-sequence-collapsed){
 flex:0 0 var(--studio-sequencer-height,290px)!important;
 height:var(--studio-sequencer-height,290px)!important;
 max-height:var(--studio-sequencer-height,290px)!important;
 min-height:155px!important;
 box-sizing:border-box!important;
}
body.stellarius-studio-output .media-studio--director .media-director-timeline.is-sequence-collapsed{
 flex:0 0 64px!important;max-height:64px!important;height:64px!important;
}
body.stellarius-studio-output .media-studio--director .media-director-resize{
 flex:0 0 8px;width:110px;max-width:40%;height:10px;min-height:10px;margin:-8px auto -3px;
 padding:0;border:0;background:transparent;border-radius:4px;cursor:ns-resize;
}
body.stellarius-studio-output .media-studio--director .media-director-resize span{
 display:block;width:70px;max-width:100%;height:3px;margin:3px auto;border-radius:4px;background:rgba(140,194,233,.38);
}
body.stellarius-studio-output .media-studio--director .media-director-resize:hover span,
body.stellarius-studio-output .media-studio--director .media-director-resize:focus-visible span{background:#bce7ff}
body.stellarius-studio-output .media-studio--director .media-director-marker:focus-visible{
 outline:2px solid #ffde9b!important;outline-offset:5px!important;z-index:4!important;
}
body.stellarius-studio-output .media-studio--director button:focus-visible,
body.stellarius-studio-output .media-studio--director select:focus-visible,
body.stellarius-studio-output .media-studio--director input:focus-visible{
 outline:2px solid rgba(136,211,255,.86);outline-offset:2px;
}
@media(max-width:760px){
 body.stellarius-studio-output .media-studio--director .media-director-project{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body.stellarius-studio-output .media-studio--director .media-director-save-state{grid-column:1/-1;grid-row:auto;justify-self:start}
 body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions{grid-column:1/-1!important}
 body.stellarius-studio-output .media-studio--director .media-director-steps button{font-size:9px;min-height:34px}
 body.stellarius-studio-output .media-studio--director .media-director-timeline:not(.is-sequence-collapsed){flex-basis:min(var(--studio-sequencer-height,260px),58vh)!important;height:min(var(--studio-sequencer-height,260px),58vh)!important;max-height:min(var(--studio-sequencer-height,260px),58vh)!important}
}
@media(prefers-reduced-motion:reduce){body.stellarius-studio-output .media-studio--director *{scroll-behavior:auto!important}}


/* Stellarius Studio Media - Phase 5.1 - workstation layout (1920 x 1080).
   Scope to monitor 2 only. Monitor 1 retains scene, navigation, toolbar,
   dashboard and astronomical-time controls as they are. */
@media (min-width:1101px) {
 body.stellarius-studio-output .media-studio--director .media-studio__panel {
   top:47px!important;left:12px!important;right:12px!important;bottom:10px!important;
   border-radius:12px!important;background:linear-gradient(145deg,#081827,#06111f)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-studio__panel > header {
   flex:0 0 46px!important;min-height:46px!important;max-height:46px!important;
   padding:6px 16px!important;border-bottom:1px solid rgba(138,191,229,.16);
 }
 body.stellarius-studio-output .media-studio--director .media-studio__heading small {font-size:8px!important}
 body.stellarius-studio-output .media-studio--director .media-studio__heading h2 {font-size:16px!important;margin:2px 0 0!important}
 body.stellarius-studio-output .media-studio--director .media-mode {margin:0 8px 0 auto!important;padding:2px!important;display:flex!important;gap:3px!important;width:auto!important}
 body.stellarius-studio-output .media-studio--director .media-mode button {min-width:82px!important;height:30px!important;min-height:30px!important;padding:4px 12px!important;font-size:10px!important}
 body.stellarius-studio-output .media-studio--director .media-close {height:30px!important;width:30px!important;flex-basis:30px!important;border-radius:8px!important}

 /* One compact project bar, not the old two-row form. */
 body.stellarius-studio-output .media-studio--director .media-director-project {
   display:grid!important;grid-template-columns:85px minmax(200px,1.04fr) minmax(210px,1.18fr) minmax(300px,.95fr) auto auto!important;
   align-items:center!important;gap:8px!important;padding:7px 12px!important;
   min-height:49px!important;margin:0 12px 5px!important;
   border-radius:8px!important;background:rgba(14,32,49,.7)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project > strong {
   grid-column:1!important;grid-row:1!important;margin:0!important;
   font-size:10px!important;line-height:1.2!important;letter-spacing:.045em!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project > [data-plan-select] {
   grid-column:2!important;grid-row:1!important;height:32px!important;min-height:32px!important;font-size:11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project > [data-plan-name] {
   grid-column:3!important;grid-row:1!important;height:32px!important;min-height:32px!important;font-size:11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions {
   grid-column:4!important;grid-row:1!important;display:flex!important;flex-wrap:nowrap!important;gap:6px!important;min-width:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions button {
   min-height:32px!important;height:32px!important;flex:1 1 0!important;min-width:0!important;
   padding:5px 7px!important;font-size:10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-save-state {
   grid-column:5!important;grid-row:1!important;justify-self:center!important;
   padding:3px 4px!important;font-size:10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-plan-more {
   grid-column:6!important;grid-row:1!important;position:relative;
   min-width:140px!important;margin:0!important;padding:0!important;
   border:1px solid rgba(131,181,218,.17);border-radius:7px;
   background:#102235;
 }
 body.stellarius-studio-output .media-studio--director .media-director-plan-more > summary {
   padding:8px 10px!important;font-size:10px!important;cursor:pointer;
 }
 body.stellarius-studio-output .media-studio--director .media-director-plan-more[open] {
   z-index:22!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-plan-more[open] > :not(summary) {
   position:relative;z-index:23;
 }
 body.stellarius-studio-output .media-studio--director .media-director-steps {
   flex:0 0 38px!important;gap:6px!important;padding:2px 12px 6px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-steps button {
   min-height:34px!important;height:34px!important;padding:5px!important;font-size:11px!important;
   border-radius:7px!important;
 }

 /* Useful information lives in one focused two-column workstation. */
 body.stellarius-studio-output .media-studio--director .media-studio__workspace {
   flex:1 1 0!important;min-height:0!important;overflow:hidden!important;
 }
 body.stellarius-studio-output .media-studio--director .media-pages {
   padding:7px 12px 6px!important;min-height:0!important;overflow-y:auto!important;
   scrollbar-width:thin;scrollbar-color:rgba(106,153,189,.35) transparent;
 }
 body.stellarius-studio-output .media-studio--director .media-pages section[data-page="movement"].active {
   display:block!important;grid-template-areas:none!important;min-height:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-pages section[data-page="movement"] > .media-page-title {
   display:none!important; /* Already identified by the selected Plan tab and inspector title */
 }
 body.stellarius-studio-output .media-studio--director .media-director-workbench {
   display:grid!important;grid-template-columns:minmax(0,1.68fr) minmax(350px,1fr)!important;
   align-items:start!important;gap:12px!important;min-width:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-side-tools {
   display:flex;flex-direction:column;gap:9px;min-width:0;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector {
   grid-column:auto!important;display:grid!important;
   grid-template-columns:minmax(0,1.32fr) minmax(225px,.8fr)!important;
   gap:9px 11px!important;padding:13px!important;margin:0!important;min-width:0!important;
   border-radius:10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-inspector-head {
   padding-bottom:9px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-inspector-head strong {
   font-size:13px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-free-camera-toolbar {
   grid-column:1/-1!important;display:grid!important;
   grid-template-columns:auto minmax(140px,1fr) auto!important;
   gap:9px!important;min-height:48px!important;padding:7px 9px!important;
   margin:0!important;border-radius:8px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-free-camera-toolbar > button {
   min-height:30px!important;padding:5px 10px!important;font-size:11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-free-camera-toolbar > label {
   min-height:30px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-free-camera-toolbar select {
   min-height:30px!important;height:30px!important;font-size:11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector [data-camera-fov-control],
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation {
   min-height:88px!important;max-height:none!important;padding:10px 12px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector [data-camera-fov-control] .media-note {
   margin-top:5px!important;font-size:10px!important;line-height:1.25!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation {
   justify-content:center!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-hold {
   min-height:24px!important;margin:0!important;padding:0!important;font-size:11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-reference-help {display:none!important}
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-free-details {
   grid-column:1/-1!important;margin:0!important;padding:0!important;min-height:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-free-details > summary {
   padding:8px 10px!important;font-size:11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start {
   display:flex!important;flex-direction:column!important;align-items:stretch!important;
   gap:9px!important;padding:13px!important;margin:0!important;
   grid-column:auto!important;min-height:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start strong {font-size:12px!important}
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start p {
   margin:4px 0 0!important;font-size:11px!important;line-height:1.35!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start button {
   min-height:35px!important;height:35px!important;max-width:none!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-auto-moves,
 body.stellarius-studio-output .media-studio--director .media-director-advanced {
   grid-column:auto!important;margin:0!important;width:100%!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-auto-moves > summary,
 body.stellarius-studio-output .media-studio--director .media-director-advanced > summary {
   padding:10px 12px!important;font-size:11px!important;
 }

 /* Compact timeline: playhead, two tracks and the selected key are visible. */
 body.stellarius-studio-output .media-studio--director .media-director-timeline:not(.is-sequence-collapsed) {
   flex:0 0 min(var(--studio-sequencer-height,264px),35vh)!important;
   height:min(var(--studio-sequencer-height,264px),35vh)!important;
   max-height:min(var(--studio-sequencer-height,264px),35vh)!important;
   min-height:0!important;
   margin:3px 12px 5px!important;
   padding:9px 13px 7px!important;
   gap:4px!important;
   border-radius:9px!important;
   overflow:auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline-top {
   flex-wrap:nowrap!important;gap:10px!important;min-height:32px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline-heading {min-width:135px!important;gap:1px!important}
 body.stellarius-studio-output .media-studio--director .media-director-timeline-heading strong {font-size:11px!important}
 body.stellarius-studio-output .media-studio--director .media-director-timeline-heading output {font-size:9px!important}
 body.stellarius-studio-output .media-studio--director .media-director-transport {flex:1 1 auto!important;gap:4px!important}
 body.stellarius-studio-output .media-studio--director .media-director-transport button {
   min-height:29px!important;min-width:29px!important;padding:3px!important;font-size:12px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-transport .media-director-play {
   min-height:32px!important;min-width:39px!important;font-size:16px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-ruler,
 body.stellarius-studio-output .media-studio--director .media-director-track {
   grid-template-columns:84px minmax(0,1fr) 31px!important;gap:8px!important;min-height:26px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-track-lane {height:23px!important}
 body.stellarius-studio-output .media-studio--director .media-director-tracks {gap:3px!important}
 body.stellarius-studio-output .media-studio--director .media-director-key-editor {
   min-height:29px!important;padding:5px 7px!important;gap:8px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-time-info {
   padding:3px 0!important;gap:10px!important;min-height:26px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline-footer {
   padding-top:4px!important;min-height:27px!important;
 }
 body.stellarius-studio-output .media-studio--director footer {
   flex:0 0 47px!important;min-height:47px!important;max-height:47px!important;
   padding:6px 13px!important;background:#071421!important;
 }
 body.stellarius-studio-output .media-studio--director footer button {
   min-height:32px!important;height:32px!important;font-size:11px!important;
 }
}
/* On smaller output windows, preserve controls rather than clipping them. */
@media (max-width:1350px) and (min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-director-project {
  grid-template-columns:80px minmax(130px,1fr) minmax(135px,1fr) minmax(230px,1.1fr) auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project .media-director-plan-more {
   grid-column:5!important;grid-row:2!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project .media-director-save-state {
   grid-column:5!important;grid-row:1!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-workbench {
   grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr)!important;
 }
}
@media (max-width:1100px){
 body.stellarius-studio-output .media-studio--director .media-director-workbench {
   display:flex!important;flex-direction:column;gap:12px;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector,
 body.stellarius-studio-output .media-studio--director .media-director-side-tools {
   width:100%;box-sizing:border-box;
 }
}

/* Visual finish: restrained cinematic blue, clear primary actions and legible UI.
   No textures, pseudo-scene preview or decorative duplicate controls. */
@media (min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-studio__panel {box-sizing:border-box!important}
 body.stellarius-studio-output .media-studio--director .media-director-project {
   box-sizing:border-box!important;border:1px solid rgba(91,155,204,.2)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-steps button {
   color:#a6bbd0!important;background:rgba(10,26,43,.82)!important;
   border:1px solid rgba(94,150,196,.21)!important;
   transition:border-color .15s ease,background .15s ease,color .15s ease;
 }
 body.stellarius-studio-output .media-studio--director .media-director-steps button.active {
   color:#f2f9ff!important;background:linear-gradient(180deg,#1e4565,#15324c)!important;
   border-color:#5fa8d9!important;box-shadow:inset 0 -2px 0 #69bff5,0 0 0 1px rgba(46,128,186,.1)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-steps button:hover {
   color:#f3f9ff!important;border-color:rgba(118,203,250,.6)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector {
   background:linear-gradient(146deg,rgba(12,37,57,.98),rgba(8,24,40,.96))!important;
   border:1px solid rgba(78,157,217,.42)!important;
   box-shadow:inset 0 1px 0 rgba(154,215,255,.035)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start {
   background:linear-gradient(115deg,rgba(15,48,74,.91),rgba(9,34,56,.87))!important;
   border-color:rgba(89,166,225,.42)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start button {
   color:#f0f9ff!important;background:linear-gradient(180deg,#205479,#174364)!important;
   border-color:#5caee4!important;font-size:11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start button:hover,
 body.stellarius-studio-output .media-studio--director footer .media-primary:hover {
   background:#286995!important;border-color:#a4e0ff!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-auto-moves,
 body.stellarius-studio-output .media-studio--director .media-director-advanced {
   background:rgba(9,26,42,.85)!important;border-color:rgba(89,150,197,.28)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline {
   background:linear-gradient(180deg,#081c2f,#071525)!important;
   border-color:rgba(87,159,216,.36)!important;
 }
 body.stellarius-studio-output .media-studio--director footer {
   box-sizing:border-box!important;height:47px!important;
   border-top-color:rgba(116,177,219,.23)!important;
 }
 body.stellarius-studio-output .media-studio--director footer .media-primary {
   background:linear-gradient(180deg,#225476,#183e60)!important;
   border-color:#5aa7d5!important;min-width:162px!important;
 }
}

@media (min-width:1101px) {
 /* Export progress is intentionally allowed to grow while encoding. */
 body.stellarius-studio-output .media-studio--director.media-rendering footer {
   flex:0 0 auto!important;height:auto!important;min-height:64px!important;max-height:none!important;
   flex-wrap:wrap!important;
 }
}

/* 2026-10-25 — Media Studio UI refinement.
   Goal: remove the redundant top studio banner on monitor 2 and make advanced
   editing / timeline the visual centre of the workspace at 1920×1080. */
@media (min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-studio__panel{
   top:10px!important;left:12px!important;right:12px!important;bottom:10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-studio__panel>header{
   display:none!important;
 }
 body.stellarius-studio-output .media-studio--director .media-studio__workspace{
   flex:1 1 0!important;min-height:0!important;overflow:hidden!important;
 }
 body.stellarius-studio-output .media-studio--director .media-pages{
   padding:4px 12px 6px!important;
 }

 /* Project row now also carries the mode switch and close control. */
 body.stellarius-studio-output .media-studio--director .media-director-project{
   display:grid!important;
   grid-template-columns:84px minmax(180px,.9fr) minmax(220px,1.08fr) minmax(285px,.95fr) auto auto auto!important;
   align-items:center!important;gap:8px!important;
   margin:0 12px 6px!important;padding:8px 12px!important;min-height:50px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project>strong{grid-column:1!important;grid-row:1!important}
 body.stellarius-studio-output .media-studio--director .media-director-project>[data-plan-select]{grid-column:2!important;grid-row:1!important}
 body.stellarius-studio-output .media-studio--director .media-director-project>[data-plan-name]{grid-column:3!important;grid-row:1!important}
 body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions{grid-column:4!important;grid-row:1!important}
 body.stellarius-studio-output .media-studio--director .media-director-save-state{grid-column:5!important;grid-row:1!important}
 body.stellarius-studio-output .media-studio--director .media-director-plan-more{grid-column:6!important;grid-row:1!important;min-width:155px!important}
 body.stellarius-studio-output .media-studio--director .media-director-top-tools{
   grid-column:7!important;grid-row:1!important;display:flex!important;align-items:center;justify-content:flex-end;gap:8px;min-width:0;
 }
 body.stellarius-studio-output .media-studio--director .media-director-top-tools .media-mode{
   margin:0!important;padding:0!important;display:flex!important;gap:4px!important;width:auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-top-tools .media-mode button{
   min-width:86px!important;height:30px!important;min-height:30px!important;padding:4px 12px!important;font-size:10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-top-tools .media-close{
   height:30px!important;width:30px!important;min-width:30px!important;flex:0 0 30px!important;
   border:1px solid rgba(109,161,204,.22)!important;border-radius:8px!important;
   background:rgba(10,27,42,.82)!important;color:#d7e7f4!important;font-size:18px!important;opacity:1!important;
 }

 body.stellarius-studio-output .media-studio--director .media-director-steps{
   padding:0 12px 8px!important;gap:6px!important;
 }

 /* The movement page becomes a montage workspace: sequencer first, tools after. */
 body.stellarius-studio-output .media-studio--director .media-pages section[data-page="movement"].active{
   display:flex!important;flex-direction:column!important;gap:10px!important;min-height:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline{
   order:1!important;position:relative!important;inset:auto!important;width:100%!important;min-width:0!important;
   margin:0!important;flex:0 0 min(var(--studio-sequencer-height,318px),38vh)!important;
   height:min(var(--studio-sequencer-height,318px),38vh)!important;max-height:min(var(--studio-sequencer-height,318px),38vh)!important;
   padding:11px 13px 10px!important;border-radius:10px!important;overflow:auto!important;
   border:1px solid rgba(96,168,220,.34)!important;
   background:linear-gradient(145deg,rgba(12,31,47,.97),rgba(7,20,32,.98))!important;
   box-shadow:0 12px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(156,216,255,.03)!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline-top{
   flex-wrap:nowrap!important;align-items:center!important;gap:12px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline-heading strong{
   font-size:12px!important;letter-spacing:.11em!important;color:#f0f7ff!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline-heading output{font-size:10px!important}
 body.stellarius-studio-output .media-studio--director .media-director-duration{margin-left:auto!important}
 body.stellarius-studio-output .media-studio--director .media-director-ruler,
 body.stellarius-studio-output .media-studio--director .media-director-track{
   grid-template-columns:88px minmax(0,1fr) 32px!important;gap:8px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-track-lane{height:24px!important}
 body.stellarius-studio-output .media-studio--director .media-director-key-editor{
   min-height:34px!important;padding:7px 9px!important;gap:8px 12px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-time-info{padding:3px 0 2px!important}
 body.stellarius-studio-output .media-studio--director .media-director-timeline-footer{padding-top:6px!important}

 body.stellarius-studio-output .media-studio--director .media-director-workbench{
   order:2!important;display:grid!important;
   grid-template-columns:minmax(0,1.28fr) minmax(320px,.82fr)!important;
   gap:12px!important;align-items:start!important;min-width:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector{
   grid-template-columns:minmax(0,1.25fr) minmax(210px,.75fr)!important;
   padding:12px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-side-tools{
   gap:10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-keyframe-start,
 body.stellarius-studio-output .media-studio--director .media-director-auto-moves,
 body.stellarius-studio-output .media-studio--director .media-director-advanced{
   box-sizing:border-box!important;
 }
}

@media (max-width:1500px) and (min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-director-project{
   grid-template-columns:84px minmax(130px,.85fr) minmax(150px,.95fr) minmax(215px,.9fr) auto auto auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-workbench{
   grid-template-columns:minmax(0,1.16fr) minmax(290px,.84fr)!important;
 }
}

/* Studio monitor 2: the timeline is a fixed-position *workspace section* (not
   a descendant of the scrollable camera inspector). This overrides the prior
   experimental move into [data-page="movement"], which caused it to vanish. */
body.stellarius-studio-output .media-studio--director .media-director-timeline{
  order:0!important;
  box-sizing:border-box!important;
}
@media (min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-studio__panel{
   top:8px!important;bottom:8px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project{
   flex:0 0 auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline:not(.is-sequence-collapsed){
   order:0!important;
   flex:0 0 min(max(282px,var(--studio-sequencer-height,320px)),38vh)!important;
   height:min(max(282px,var(--studio-sequencer-height,320px)),38vh)!important;
   max-height:min(max(282px,var(--studio-sequencer-height,320px)),38vh)!important;
   min-height:0!important;
   margin:0 12px 7px!important;
   padding:10px 13px!important;
   overflow-y:auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-studio__workspace{
   flex:1 1 auto!important;
   min-height:0!important;
   order:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-pages{
   height:100%!important;box-sizing:border-box!important;
   overflow-y:auto!important;
 }
 body.stellarius-studio-output .media-studio--director footer{
   flex:0 0 47px!important;
   order:0!important;
 }
}
@media (max-width:1100px){
 body.stellarius-studio-output .media-studio--director .media-director-timeline{
   position:relative!important;inset:auto!important;flex:0 0 auto!important;
   margin:8px 12px!important;max-height:38vh!important;
 }
}

/* Media Studio — Editor-first workstation. 2026-10-25.
   Screen 1 = live 3D and navigation; Screen 2 = editing workstation.
   This is a single scoped layer to keep old plan/render controls intact. */
@media (min-width: 1101px) {
  body.stellarius-studio-output .media-studio--director .media-studio__panel {
    top:8px!important;right:10px!important;bottom:8px!important;left:10px!important;
    border-radius:11px!important;background:#071726!important;
  }
  body.stellarius-studio-output .media-studio--director .media-studio__panel>header {display:none!important}
  body.stellarius-studio-output .media-studio--director .media-director-project{
    display:grid!important;grid-template-columns:85px minmax(190px,1fr) auto minmax(255px,1fr) auto auto auto!important;
    min-height:52px!important;box-sizing:border-box!important;gap:9px!important;
    margin:7px 11px 5px!important;padding:8px 12px!important;
    align-items:center!important;position:relative!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-project>strong {grid-column:1!important;grid-row:1!important;font-size:11px!important;color:#bacfe0!important}
  body.stellarius-studio-output .media-studio--director .media-director-project>[data-plan-select]{grid-column:2!important;grid-row:1!important;min-width:0!important;font-size:12px!important}
  body.stellarius-studio-output .media-studio--director .media-director-project>[data-plan-name]{
    display:none!important;position:absolute!important;z-index:25;left:106px;top:8px;width:min(36%,485px)!important;
    height:34px!important;min-height:34px!important;font-size:12px!important;
    border-color:#66b1e0!important;box-shadow:0 6px 24px rgba(0,0,0,.45)!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-project.is-renaming>[data-plan-name]{display:block!important}
  body.stellarius-studio-output .media-studio--director .media-director-rename{
    grid-column:3!important;grid-row:1!important;min-width:72px!important;min-height:32px!important;
    border:1px solid rgba(122,172,205,.25)!important;border-radius:7px!important;
    color:#a5cee9;background:rgba(24,54,77,.62);font-size:11px!important;padding:4px 8px!important;cursor:pointer;
  }
  body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions{grid-column:4!important;grid-row:1!important;min-width:0!important}
  body.stellarius-studio-output .media-studio--director .media-director-project .media-plan-actions button{font-size:11px!important;min-height:33px!important;height:33px!important}
  body.stellarius-studio-output .media-studio--director .media-director-save-state{grid-column:5!important;grid-row:1!important;white-space:nowrap;font-size:10px!important}
  body.stellarius-studio-output .media-studio--director .media-director-plan-more{grid-column:6!important;grid-row:1!important;min-width:128px!important}
  body.stellarius-studio-output .media-studio--director .media-director-top-tools{grid-column:7!important;grid-row:1!important;min-width:max-content!important}
  body.stellarius-studio-output .media-studio--director .media-director-top-tools .media-mode button{min-width:66px!important;font-size:11px!important}
  body.stellarius-studio-output .media-studio--director .media-director-steps{
    flex:0 0 auto!important;padding:0 11px 8px!important;gap:6px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-steps button{
    min-height:34px!important;height:34px!important;font-size:12px!important;font-weight:650!important;
  }

  /* No phantom 320px timeline: content determines the default height. The grip
     can still set an explicit height (and the Studio remembers it in v2). */
  body.stellarius-studio-output .media-studio--director .media-director-timeline:not(.is-sequence-collapsed){
    display:flex!important;flex:0 0 auto!important;
    height:var(--studio-sequencer-height,auto)!important;min-height:0!important;
    max-height:min(44vh,430px)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    gap:6px!important;margin:0 11px 8px!important;padding:12px 14px 10px!important;
    background:linear-gradient(135deg,#102a40,#091b2b)!important;
    border:1px solid rgba(95,174,230,.45)!important;border-radius:10px!important;
    box-shadow:inset 0 1px 0 rgba(172,224,255,.045)!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-timeline.is-sequence-collapsed{
    flex:0 0 55px!important;height:55px!important;max-height:55px!important;overflow:hidden!important;
    margin:0 11px 8px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-timeline-heading strong{
    color:#e7f5ff!important;font-size:14px!important;letter-spacing:.06em!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-timeline-heading output{
    font:500 11px/1.3 'Space Grotesk',sans-serif!important;color:#8eabc1!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-transport button{
    min-width:32px!important;min-height:32px!important;font-size:13px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-transport .media-director-play{
    min-width:43px!important;min-height:35px!important;font-size:18px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-ruler,
  body.stellarius-studio-output .media-studio--director .media-director-track{
    grid-template-columns:94px minmax(0,1fr) 34px!important;gap:8px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-track{
    min-height:35px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-track>label{
    font-size:11px!important;color:#badbf3!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-track:nth-child(2)>label{color:#ecc489!important}
  body.stellarius-studio-output .media-studio--director .media-director-track-lane{
    height:30px!important;background-color:#071b2b!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-marker{
    width:13px!important;height:13px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-ticks{
    display:grid;grid-template-columns:94px minmax(0,1fr) 34px;gap:8px;
    color:#7d9cb6;font:500 10px/1.2 'JetBrains Mono',monospace;min-height:14px;
  }
  body.stellarius-studio-output .media-studio--director .media-director-ticks:before,
  body.stellarius-studio-output .media-studio--director .media-director-ticks:after{content:""}
  body.stellarius-studio-output .media-studio--director .media-director-ticks{display:flex;padding:0 42px 0 102px;justify-content:space-between;box-sizing:border-box;gap:0!important}
  body.stellarius-studio-output .media-studio--director .media-director-ticks span{position:relative;white-space:nowrap;transform:translateX(-50%)}
  body.stellarius-studio-output .media-studio--director .media-director-ticks span:first-child{transform:none}
  body.stellarius-studio-output .media-studio--director .media-director-ticks span:last-child{transform:translateX(0)}
  body.stellarius-studio-output .media-studio--director .media-director-key-editor{
    min-height:40px!important;padding:7px 10px!important;gap:8px 14px!important;
    border-color:rgba(97,171,216,.3)!important;background:rgba(10,32,50,.85)!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-key-title{font-size:11px!important;color:#d9e8f5!important}
  body.stellarius-studio-output .media-studio--director .media-director-key-video-time,
  body.stellarius-studio-output .media-studio--director .media-director-key-date{font-size:11px!important}
  body.stellarius-studio-output .media-studio--director .media-director-time-info,
  body.stellarius-studio-output .media-studio--director .media-director-timeline-footer{font-size:11px!important;min-height:30px!important}
  body.stellarius-studio-output .media-studio--director .media-director-edit-actions button,
  body.stellarius-studio-output .media-studio--director .media-director-time-toggle button{
    font-size:11px!important;min-height:30px!important;
  }
  /* Open help as a compact inline row rather than overlays. */
  body.stellarius-studio-output .media-studio--director .media-director-help:not([hidden]){
    max-height:94px;overflow:auto;font-size:11px;
  }

  /* The settings are subordinate to Montage; the camera is left, shot options right. */
  body.stellarius-studio-output .media-studio--director .media-studio__workspace{
    flex:1 1 0!important;min-height:0!important;overflow:hidden!important;
  }
  body.stellarius-studio-output .media-studio--director .media-pages{
    min-height:0!important;padding:2px 11px 6px!important;
    overflow-x:hidden!important;overflow-y:auto!important;
  }
  body.stellarius-studio-output .media-studio--director .media-pages section[data-page="movement"].active{
    display:block!important;min-height:0!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-workbench{
    grid-template-columns:minmax(0,1.3fr) minmax(325px,.7fr)!important;
    gap:11px!important;align-items:start!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector{
    grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr)!important;
    gap:10px!important;padding:12px!important;background:linear-gradient(130deg,#0e293e,#0b2032)!important;
    border:1px solid rgba(91,147,191,.34)!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-inspector-head strong{
    font-size:13px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector [data-camera-fov-control],
  body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation{
    min-height:87px!important;padding:10px 12px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-side-tools{gap:8px!important}
  body.stellarius-studio-output .media-studio--director .media-director-keyframe-start{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(155px,.7fr)!important;
    align-items:center!important;gap:10px!important;min-height:81px!important;
    padding:11px 12px!important;background:#102d44!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-keyframe-start strong{font-size:12px!important}
  body.stellarius-studio-output .media-studio--director .media-director-keyframe-start p{
    font-size:11px!important;line-height:1.35!important;color:#b0c9da!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-keyframe-start button{
    min-height:37px!important;height:auto!important;font-size:12px!important;padding:7px 10px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-auto-moves>summary,
  body.stellarius-studio-output .media-studio--director .media-director-advanced>summary{
    min-height:32px;padding:9px 11px!important;font-size:12px!important;
  }
  body.stellarius-studio-output .media-studio--director .media-director-advanced[open]{
    max-height:290px;overflow-y:auto;
  }
  body.stellarius-studio-output .media-studio--director .media-director-technical-editor{
    margin:8px 10px 10px;padding:8px 10px;border:1px solid rgba(118,170,209,.2);
    border-radius:8px;background:rgba(5,19,31,.55);
  }
  body.stellarius-studio-output .media-studio--director .media-director-technical-editor>summary{
    cursor:pointer;color:#9db8ca;font-size:11px;padding:3px 2px 7px;
  }
  body.stellarius-studio-output .media-studio--director footer{
    flex:0 0 46px!important;min-height:46px!important;max-height:46px!important;
    padding:6px 12px!important;
  }
  body.stellarius-studio-output .media-studio--director button:focus-visible,
  body.stellarius-studio-output .media-studio--director input:focus-visible,
  body.stellarius-studio-output .media-studio--director select:focus-visible,
  body.stellarius-studio-output .media-studio--director summary:focus-visible{
    outline:2px solid #83ceff!important;outline-offset:2px!important;
  }
}
@media (min-width:1101px) and (max-width:1500px){
 body.stellarius-studio-output .media-studio--director .media-director-project{
   grid-template-columns:76px minmax(140px,1fr) 69px minmax(210px,1.05fr) auto auto auto!important;
   gap:6px!important;padding:6px 8px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project .media-director-save-state{
   font-size:9px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-plan-more{min-width:109px!important}
 body.stellarius-studio-output .media-studio--director .media-director-top-tools .media-mode button{min-width:59px!important;padding:4px 8px!important}
 body.stellarius-studio-output .media-studio--director .media-director-workbench{grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr)!important}
}
@media (min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-director-ticks{
  display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0!important;
  padding-left:102px!important;padding-right:42px!important;justify-content:initial!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-ticks::before,
 body.stellarius-studio-output .media-studio--director .media-director-ticks::after{content:none!important}
 body.stellarius-studio-output .media-studio--director .media-director-ticks span{transform:none!important;text-align:center}
 body.stellarius-studio-output .media-studio--director .media-director-ticks span:first-child{text-align:left}
 body.stellarius-studio-output .media-studio--director .media-director-ticks span:last-child{text-align:right}
}
/* Photo/Video and Close must never disappear when the video project bar hides. */
@media(min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-director-shellbar{
   display:flex!important;align-items:center;gap:10px;margin:7px 11px 5px;
   flex:0 0 auto!important;min-height:51px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-shellbar .media-director-project{
   flex:1 1 auto!important;min-width:0!important;margin:0!important;
   grid-template-columns:81px minmax(180px,1.15fr) auto minmax(235px,1fr) auto auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-project .media-director-plan-more{grid-column:6!important}
 body.stellarius-studio-output .media-studio--director .media-director-shellbar>.media-director-top-tools{
   display:flex!important;align-items:center;justify-content:flex-end;gap:7px;
   flex:0 0 auto;min-width:max-content;min-height:42px;
 }
 body.stellarius-studio-output .media-studio--director .media-director-shellbar>.media-director-top-tools .media-mode{
   display:flex!important;gap:4px!important;margin:0!important;padding:0!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-shellbar>.media-director-top-tools .media-mode button{
   min-width:66px!important;min-height:33px!important;height:33px!important;padding:4px 10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-shellbar>.media-director-top-tools .media-close{
   height:33px!important;width:33px!important;min-width:33px!important;flex:0 0 33px!important;
   border:1px solid rgba(109,161,204,.24)!important;border-radius:8px!important;
   background:rgba(10,27,42,.86)!important;color:#d7e7f4!important;font-size:19px!important;opacity:1!important;
 }
}
@media (min-width:1101px) and (max-width:1500px){
 body.stellarius-studio-output .media-studio--director .media-director-shellbar .media-director-project{
   grid-template-columns:73px minmax(130px,1fr) auto minmax(190px,.9fr) auto auto!important;
   gap:6px!important;
 }
}
/* 830px browser viewport: keep the entire everyday Montage workflow in view. */
@media(min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-director-timeline:not(.is-sequence-collapsed){
  gap:4px!important;padding:8px 12px 7px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-track{
  min-height:29px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-track-lane{
  height:25px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-ticks{min-height:11px!important;font-size:9px!important}
 body.stellarius-studio-output .media-studio--director .media-director-key-editor{
  min-height:34px!important;padding:5px 9px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-time-info{
  min-height:26px!important;padding:1px 1px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-timeline-footer{
  min-height:26px!important;padding-top:3px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector{
  gap:7px 10px!important;padding:10px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector [data-camera-fov-control],
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-director-interpolation{
  min-height:76px!important;padding:9px 11px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-inspector-head{
  padding-bottom:6px!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-camera-inspector .media-free-camera-toolbar{
  min-height:40px!important;padding:5px 8px!important;
 }
}

/* Media Studio: independent DISPLAY keyframes and removal of the legacy editor.
   This is intentionally scoped to the second monitor. */
body.stellarius-studio-output .media-director-compatibility-host[hidden],
body.stellarius-studio-output .media-director-display-editor[hidden]{display:none!important}
body.stellarius-studio-output .media-studio--director .media-director-display-track>label{color:#98d7c1!important}
body.stellarius-studio-output .media-studio--director .media-director-display-track .media-director-marker{
 background:#56ac89!important;border-color:#a4f1cc!important;
}
body.stellarius-studio-output .media-studio--director .media-director-display-track .media-director-marker.active{
 background:#e9fff3!important;box-shadow:0 0 0 4px rgba(62,179,128,.16),0 0 12px rgba(123,229,175,.55)!important;
}
body.stellarius-studio-output .media-studio--director .media-director-display-editor{
 flex:0 0 auto;display:grid;gap:7px;padding:8px 11px;
 border:1px solid rgba(88,184,139,.27);border-radius:8px;
 background:rgba(13,42,38,.62);min-width:0;
}
body.stellarius-studio-output .media-studio--director .media-director-display-head{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 color:#ccebdd;font:600 10px 'Space Grotesk',sans-serif;
}
body.stellarius-studio-output .media-studio--director .media-director-display-head span{
 color:#9ec8b6;font:500 10px 'JetBrains Mono',monospace;
}
body.stellarius-studio-output .media-studio--director .media-director-display-controls{
 display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
}
body.stellarius-studio-output .media-studio--director .media-director-display-controls label{
 display:inline-flex;gap:6px;align-items:center;white-space:nowrap;color:#c4ded4;font:500 10px 'Space Grotesk',sans-serif;
}
body.stellarius-studio-output .media-studio--director .media-director-display-controls input{accent-color:#77d3a8}
body.stellarius-studio-output .media-studio--director .media-director-display-editor small{
 color:#86ac9d;font:400 10px/1.35 'Space Grotesk',sans-serif;
}
body.stellarius-studio-output .media-studio--director .media-director-history-options{
 grid-column:1/-1;padding:9px 11px;margin-top:10px;border:1px solid rgba(105,160,196,.2);border-radius:9px;background:rgba(10,26,43,.48);
}
body.stellarius-studio-output .media-studio--director .media-director-history-options>summary{
 cursor:pointer;color:#b4cadb;font-size:11px;
}
body.stellarius-studio-output .media-studio--director .media-director-history-options>label{
 display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 3px;color:#c7dce9;font-size:11px;
}
@media(min-width:1101px){
 body.stellarius-studio-output .media-studio--director .media-director-timeline:not(.is-sequence-collapsed){
  flex-basis:auto!important;height:auto!important;min-height:285px!important;
  max-height:min(57vh,470px)!important;overflow-y:auto!important;
 }
 body.stellarius-studio-output .media-studio--director .media-director-tracks{gap:5px!important}
 body.stellarius-studio-output .media-studio--director .media-director-timeline.is-sequence-collapsed{min-height:0!important}
}
@media(max-width:1100px){
 body.stellarius-studio-output .media-studio--director .media-director-display-controls{gap:7px 12px}
}

/* Modern three-track timeline: no legacy technical editor. */
body.stellarius-studio-output .media-studio--director .media-director-internal-controls[hidden]{display:none!important}

/* Media Studio — STELLA Eyes is a keyframe setting, not a disabled navigation command. */
body.stellarius-studio-output .media-studio--director .media-director-display-controls .media-director-stella-target { gap:7px; }
body.stellarius-studio-output .media-studio--director .media-director-stella-target select {
 min-width:113px;max-width:190px;min-height:27px;padding:3px 7px;
 background:#0c2530;border:1px solid rgba(119,190,163,.35);border-radius:6px;
 color:#d8eee6;color-scheme:dark;font:500 10px 'Space Grotesk',sans-serif;
}
body.stellarius-studio-output .media-studio--director [data-director-stella-status] { color:#b2d9c4; }

/* 2026-10-27 — Contextual keyboard shortcuts reference for Media Studio.
   Attach to the Studio root, not the scrollable timeline: never clip the popup. */
body.stellarius-studio-output .media-studio--director > .media-director-help {
 pointer-events:auto!important;position:fixed!important;right:clamp(16px,2vw,40px)!important;bottom:clamp(70px,8vh,115px)!important;
 z-index:12010!important;width:min(670px,calc(100vw - 36px))!important;
 max-height:min(77vh,740px)!important;overflow-y:auto!important;
 box-sizing:border-box!important;border:1px solid rgba(116,189,236,.43)!important;
 border-radius:12px!important;padding:18px!important;
 background:linear-gradient(155deg,#122c44,#071826)!important;
 box-shadow:0 22px 70px rgba(0,0,0,.72)!important;
 color:#d6e8f7!important;scrollbar-width:thin;
}
body.stellarius-studio-output .media-studio--director > .media-director-help[hidden] {display:none!important}
body.stellarius-studio-output .media-director-help-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
body.stellarius-studio-output .media-director-help-heading strong{font:600 15px 'Space Grotesk',sans-serif;letter-spacing:.045em;color:#eaf6ff}
body.stellarius-studio-output .media-director-help-heading button{cursor:pointer;min-width:32px;min-height:32px;border:1px solid rgba(144,188,220,.24);border-radius:8px;background:#203d54;color:#fff;font-size:20px}
body.stellarius-studio-output .media-director-help-categories{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
body.stellarius-studio-output .media-director-help-group{min-width:0;border:1px solid rgba(133,186,227,.13);border-radius:9px;background:rgba(3,14,26,.42);padding:11px 12px}
body.stellarius-studio-output .media-director-help-group:last-child{grid-column:1/-1}
body.stellarius-studio-output .media-director-help-group h3{font:600 11px 'Space Grotesk',sans-serif;color:#8dd2ff;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}
body.stellarius-studio-output .media-director-help-group dl{display:grid;gap:8px;margin:0}
body.stellarius-studio-output .media-director-help-group dl>div{display:grid;grid-template-columns:minmax(74px,.65fr) minmax(0,1.3fr);align-items:center;gap:9px}
body.stellarius-studio-output .media-director-help-group dt,body.stellarius-studio-output .media-director-help-group dd{margin:0;font:500 11px/1.35 'Space Grotesk',sans-serif}
body.stellarius-studio-output .media-director-help-group dd{color:#bbd0e0}
body.stellarius-studio-output .media-director-help-group kbd{display:inline-block;padding:4px 6px;border:1px solid rgba(125,182,217,.35);border-radius:5px;background:rgba(29,64,91,.5);color:#e9f7ff;font:500 10px/1.25 'JetBrains Mono',monospace}
body.stellarius-studio-output .media-director-help-note{margin:13px 0 0;color:#8eacbf;font-size:11px;line-height:1.5}
@media(max-width:680px){
 body.stellarius-studio-output .media-director-help-categories{grid-template-columns:1fr}
 body.stellarius-studio-output .media-director-help-group:last-child{grid-column:auto}
}

/* 2026-10-27 — The single camera inspector replaces the redundant Add framing card.
   The timeline (+) and K shortcut stay available; optional moves remain collapsible. */
body.stellarius-studio-output .media-studio--director .media-director-workbench {
  grid-template-columns:minmax(0,1fr)!important;
}
body.stellarius-studio-output .media-studio--director .media-director-camera-inspector {
  box-sizing:border-box;
  width:100%;
}
body.stellarius-studio-output .media-studio--director .media-director-camera-inspector > .media-director-auto-moves {
  grid-column:1/-1!important;
}

/* Media Studio: compact split New-shot action. One toolbar cell at 1920px. */
.media-studio--director .media-director-new-plan{position:relative;display:flex;min-width:0;align-items:stretch;isolation:isolate}
.media-studio--director .media-director-new-plan>[data-new-plan]{flex:1 1 auto;min-width:0;border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.media-studio--director .media-director-new-plan-options{flex:0 0 24px;min-width:24px!important;width:24px!important;padding:2px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;border-left:0!important}
.media-studio--director .media-director-new-plan-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:218px;max-width:min(310px,75vw);padding:6px;border:1px solid rgba(131,185,222,.35);border-radius:8px;background:#122b40;box-shadow:0 12px 25px rgba(0,0,0,.48);z-index:95}
.media-studio--director .media-director-new-plan-menu[hidden]{display:none!important}
.media-studio--director .media-director-new-plan-menu>button{display:block;width:100%;min-height:36px!important;padding:9px 11px!important;text-align:left;white-space:normal!important;line-height:1.3!important;color:#d9edfa;background:rgba(68,128,168,.15);border:1px solid rgba(130,181,215,.17);border-radius:5px;cursor:pointer;font-size:11px!important}
.media-studio--director .media-director-new-plan-menu>button:hover,.media-studio--director .media-director-new-plan-menu>button:focus-visible{background:rgba(77,154,203,.3);outline:1px solid #78b5dd}


/* 2026-11-01 · Smartphone portrait orientation: no rotation of the WebGL viewport.
   Fullscreen/installed PWA may be locked by the OS; Safari cannot lock through JS.
   The landscape notice is shown only on touchscreen-sized handheld viewports. */
.smartphone-portrait-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  box-sizing: border-box;
  background: #05070c;
  color: #eef5ff;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(24px + env(safe-area-inset-top, 0px))
           calc(24px + env(safe-area-inset-right, 0px))
           calc(24px + env(safe-area-inset-bottom, 0px))
           calc(24px + env(safe-area-inset-left, 0px));
}
.smartphone-portrait-notice__content {
  max-width: 440px;
}
.smartphone-portrait-notice__icon {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  color: #9dbfea;
}
.smartphone-portrait-notice strong {
  font-size: clamp(18px, 3.5vw, 23px);
  font-weight: 650;
}
.smartphone-portrait-notice p {
  margin: 9px 0 0;
  color: #b7c8db;
  font-size: 14px;
  line-height: 1.5;
}
html[lang|="fr"] .smartphone-portrait-notice__en,
html:not([lang|="fr"]) .smartphone-portrait-notice__fr {
  display: none;
}
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 620px) and (pointer: coarse) {
  .smartphone-portrait-notice { display: flex; }
}

/* ISS camera panel precedes — and does not replace — orbital telemetry.
   The ISS dashboard stays available below the camera presets for scrolling. */
#app > #mobile-info-panel.iss-camera-dashboard-mode #dashboard-scroll-region > #iss-orbit-dashboard:not([hidden]) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(150,190,225,.12);
}


/* 2026-11-01 — On desktop only, the expanded dashboard logo must be an
   opaque cover over scrolling telemetry and descriptions. Retain the original
   header dimensions, stacking order, and transparency while the panel is shut. */
@media (min-width:761px) {
  #app.scene-dashboard-open:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode) > header.topbar {
    background:linear-gradient(180deg,#0d1722 0%,#09131e 100%) !important;
  }
}


/* 2026-11-01 — Smartphone solar-system tour control. The button is a direct
   child of the sheet, NOT of its scrolling region or collapsible heading:
   it stays at the top right in both the 68px peek and expanded dashboard. */
#app > #mobile-info-panel > #mobile-next-body.mobile-next-body { display:none; }
@media (max-width:620px) {
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel.info-panel > #mobile-next-body.mobile-next-body {
    position:absolute;
    z-index:14;
    display:flex;
    align-items:center;
    justify-content:center;
    top:10px;
    right:10px;
    width:46px;
    height:46px;
    padding:0;
    border:1px solid rgba(156,198,237,.23);
    border-radius:12px;
    background:rgba(45,68,93,.60);
    color:#e3f2ff;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .15s ease,border-color .15s ease;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel > #mobile-next-body.mobile-next-body:active {
    background:rgba(74,117,159,.76);
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel > #mobile-next-body.mobile-next-body:focus-visible {
    outline:2px solid #96cfff;
    outline-offset:2px;
  }
  /* Long body names and contextual camera tabs cannot overlap the arrow. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel .panel-heading-copy {
    box-sizing:border-box;
    padding-right:53px !important;
  }
}
#app > #mobile-info-panel > #mobile-next-body.mobile-next-body[hidden] {
  display:none !important;
}


/* 2026-11-01 — Bidirectional Solar-System tour, responsive and unobtrusive. */
#app > #desktop-solar-tour.desktop-solar-tour{display:none;}
#app > #mobile-info-panel > #mobile-prev-body.mobile-prev-body{display:none;}
@media (max-width:620px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel.info-panel > #mobile-prev-body.mobile-prev-body{
    position:absolute;
    z-index:14;
    display:flex;
    align-items:center;
    justify-content:center;
    top:10px;
    left:10px;
    right:auto;
    width:46px;
    height:46px;
    padding:0;
    border:1px solid rgba(156,198,237,.23);
    border-radius:12px;
    background:rgba(45,68,93,.60);
    color:#e3f2ff;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel > #mobile-prev-body.mobile-prev-body:active{
    background:rgba(74,117,159,.76);
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel > #mobile-prev-body.mobile-prev-body:focus-visible{
    outline:2px solid #96cfff;
    outline-offset:2px;
  }
  #app > #mobile-info-panel > #mobile-prev-body.mobile-prev-body[hidden]{display:none !important;}
  /* Only the heading needs side gutters. Keep telemetry and camera rows at
     their original usable width, including on small phones. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel.info-panel .dashboard-scroll-region{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel.info-panel .panel-heading-copy{
    box-sizing:border-box;
    padding-left:48px !important;
    padding-right:48px !important;
    width:100%;
    text-align:center;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel .dashboard-title-row{
    justify-content:center !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel .dashboard-title-copy{
    align-items:center !important;
    text-align:center !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel #dashboard-title-text,
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #mobile-info-panel #dashboard-body-type{
    text-align:center !important;
  }
}
@media (min-width:621px){
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode):not(.keyboard-ui-hidden)
    > #desktop-solar-tour.desktop-solar-tour{
    display:contents;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #desktop-solar-tour > .desktop-tour-arrow{
    display:grid;
    place-items:center;
    position:fixed;
    z-index:35;
    top:45%;
    width:40px;
    height:68px;
    margin:0;
    padding:0;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    color:rgba(179,190,205,.42);
    cursor:pointer;
    opacity:.65;
    transition:left var(--scene-panel-duration,650ms) var(--scene-panel-easing,ease),
               right var(--scene-panel-duration,650ms) var(--scene-panel-easing,ease),
               color .18s ease,opacity .18s ease;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #desktop-solar-tour > .desktop-tour-arrow--prev{
    left:calc(var(--scene-left-occupancy) + 48px);
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #desktop-solar-tour > .desktop-tour-arrow--next{
    right:calc(var(--scene-right-occupancy) + 48px);
  }
  #app > #desktop-solar-tour > .desktop-tour-arrow svg{
    display:block;
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #app > #desktop-solar-tour > .desktop-tour-arrow:hover,
  #app > #desktop-solar-tour > .desktop-tour-arrow:focus-visible{
    color:#fff !important;
    opacity:1;
  }
  #app > #desktop-solar-tour > .desktop-tour-arrow:focus-visible{
    outline:1px solid rgba(255,255,255,.5);
    outline-offset:1px;
  }
  #app > #desktop-solar-tour > .desktop-tour-arrow[hidden]{display:none !important;}
  /* LIVE and the settings rail must remain INSIDE the unclipped WebGL view,
     not behind the left Dashboard or the right Navigation drawer. */
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #reset-button.eyes-live-corner{
    left:calc(var(--scene-left-occupancy) + 20px) !important;
    transition:left var(--scene-panel-duration,650ms) var(--scene-panel-easing,ease),
               color .16s ease,background .16s ease !important;
  }
  #app:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #scene-general-controls.scene-general-controls,
  #app.scene-rail-collapsed:not(.dual-screen-control):not(.mission-mode):not(.exploration-mode)
    > #scene-general-controls.scene-general-controls{
    right:calc(var(--scene-right-occupancy) + 12px) !important;
    transition:right var(--scene-panel-duration,650ms) var(--scene-panel-easing,ease),
               bottom 650ms cubic-bezier(.22,.72,.22,1) !important;
  }
}
@media (prefers-reduced-motion:reduce){
  #app > #desktop-solar-tour > .desktop-tour-arrow{transition:none !important;}
}