@import url('https://fonts.googleapis.com/css2?family=Jura:wght@500;600;700&display=swap');

:root {
  /* The former 90% browser view is now the native 100% layout. */
  --ui-scale: .9;
  --ui-inverse-scale: 1.111111;
  --viewport-gutter: 26px;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --page: #000207;
  --panel: #020917;
  --panel-solid: #030a17;
  --line: #173359;
  --line-strong: #315d91;
  --text: var(--accent);
  --muted: #8298b8;
  --accent: #82b2f4;
  --button: rgba(3, 13, 29, .78);
  --glass: rgba(1, 7, 18, .76);
  --shadow: rgba(0, 0, 0, .48);
}

body[data-theme="earth"] {
  color-scheme: light;
  --page: #b08b64;
  --panel: #8a6246;
  --panel-solid: #71503b;
  --line: #67442e;
  --line-strong: #7e5033;
  --text: #291910;
  --muted: #5b3e2b;
  --accent: #7a351b;
  --button: rgba(203, 166, 121, .82);
  --glass: rgba(181, 139, 97, .82);
  --shadow: rgba(47, 24, 10, .32);
}

body[data-theme="dune"] {
  color-scheme: dark;
  --page: #050504;
  /* This is the single source of truth for every permanent shell surface:
     title rail, outer frame, centre notch, and lower rail. Keeping this as
     one translucent value prevents the seams from reading as separate UI. */
  --dune-shell-surface: rgba(0, 0, 0, .75);
  --panel: var(--dune-shell-surface);
  --panel-solid: #050504;
  --line: rgba(151, 146, 136, .28);
  --line-strong: rgba(184, 177, 164, .42);
  --text: var(--accent);
  --muted: #8f8c85;
  --accent: #aaa69e;
  --button: rgba(12, 12, 11, .72);
  --glass: rgba(8, 8, 7, .64);
  --shadow: rgba(0, 0, 0, .62);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; min-width: 320px; overflow: hidden; color: var(--text); background: var(--page); transition: color .3s ease, background .3s ease; }
button, input { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }

.app-shell {
  position: fixed; top: 0; left: 0;
  width: calc(100vw * var(--ui-inverse-scale));
  height: calc(100svh / var(--ui-scale)); margin: 0;
  /* Keep the theme switcher vertically balanced between the viewport edge
     and the explorer, while returning the saved height to the diagram. */
  padding: 53px calc(var(--viewport-gutter) * var(--ui-inverse-scale)) 10px;
  transform: scale(var(--ui-scale)); transform-origin: top left;
  display: grid; grid-template-rows: minmax(0, 1fr) 108px;
  isolation: isolate; overflow: hidden;
}
.app-shell::before {
  content: '';
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  background: var(--panel);
  pointer-events: none;
  transition: background .3s ease;
}
.explorer-shell {
  --frame-bottom-radius: 76px;
  --parallel-corner-radius: calc(var(--frame-bottom-radius) - 7px);
  position: relative; height: auto; min-height: 0;
  border: 0; border-radius: 58px 58px 76px 76px;
  background: var(--panel); box-shadow: none; transition: background .3s, border-color .3s;
}
.explorer-frame-shape {
  position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  /* The notch and outer frame read as one continuous surface. The shell
     supplies the exterior depth, so this SVG must not cast an inner seam. */
  filter: none;
}
.dune-shell-mask {
  display: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dune-shell-mask-surface {
  fill: var(--panel);
  /* The frame is already one surface, so we can preserve a smooth curve. */
  shape-rendering: geometricPrecision;
}
.frame-notch-surface {
  fill: var(--panel); stroke: none; shape-rendering: geometricPrecision;
  transition: fill .3s ease;
}
.scene-wrap { position: absolute; inset: -1px 0 0; overflow: hidden; border-radius: inherit; }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#map:active { cursor: grabbing; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); letter-spacing: .04em; pointer-events: none; }

.brand-tab {
  position: absolute; z-index: 8; top: -43px; left: 50%; width: min(560px, 62vw); height: 32px; padding: 0 20px;
  display: grid; place-items: center; transform: translateX(-50%); text-align: center;
  border: 0; border-radius: 0;
  color: var(--accent); background: transparent; font: 700 clamp(13px, 1.24vw, 17px)/1 Jura, sans-serif; letter-spacing: .16em;
  white-space: nowrap; box-shadow: none;
}
.top-controls {
  --notch-button-width: 110px;
  --notch-arrow-width: 79px;
  --notch-button-height: 35px;
  --notch-button-radius: 11px;
  position: absolute; z-index: 7; top: 0; left: 50%; width: min(284px, calc(100% - 92px)); height: 80px; padding: 0;
  display: grid; justify-items: center; transform: translateX(-50%);
  border: 0; background: transparent; isolation: isolate;
}
.top-control-row {
  position: absolute; top: 39px; left: 50%; width: 100%;
  display: grid; grid-template-columns: var(--notch-arrow-width) var(--notch-button-width) var(--notch-arrow-width); align-items: center; gap: 8px;
  transform: translateX(-50%);
}
.journey-step {
  position: static; display: block; transform: none; text-align: center;
  color: var(--accent); font: 800 15px/1 Jura, sans-serif; letter-spacing: .2em;
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 48%, transparent);
}
.journey-step.changed { animation: counter-pulse .42s ease-out; }
@keyframes counter-pulse { 0% { transform: scale(.8); opacity: .4; } 58% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } }
.arrow, .notch-action, .mode-toggle, .theme-button {
  display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text); background: var(--button); cursor: pointer;
}
.arrow { justify-self: center; width: min(100%, var(--notch-arrow-width)); height: var(--notch-button-height); padding: 0 0 3px; border-radius: var(--notch-button-radius); font: 500 29px/1 Arial, sans-serif; }
.top-control-row #prev-state, .notch-action-row #reset-view { grid-column: 1; }
.top-control-row .journey-step, .notch-action-row #next-route { grid-column: 2; }
.top-control-row #next-state, .notch-action-row #spin-toggle { grid-column: 3; }
.notch-action-row {
  position: absolute; z-index: 2; top: 0; left: 50%; width: 100%;
  display: grid; grid-template-columns: var(--notch-arrow-width) var(--notch-button-width) var(--notch-arrow-width); align-items: center; gap: 8px;
  transform: translateX(-50%);
}
.notch-action-row > * { justify-self: center; }
.notch-action { height: 27px; padding: 0 13px; border-radius: 999px; color: var(--muted); font: 650 9px/1 Jura, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.notch-action:hover:not(:disabled) { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 8%, var(--button)); }
.refresh-action, .spin { width: 31px; height: 31px; padding: 0; border-radius: 50%; }
.icon-action { position: relative; overflow: visible; }
.icon-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.app-shell :where([data-tooltip]) { position: relative; overflow: visible; }
.app-shell :where([data-tooltip])::after {
  content: attr(data-tooltip); position: absolute; z-index: 20; top: calc(100% + 7px); left: 50%; padding: 5px 8px;
  transform: translate(-50%, -3px); border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); background: var(--panel-solid); box-shadow: 0 6px 18px var(--shadow);
  font: 650 9px/1 Jura, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.app-shell :where([data-tooltip]):hover::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.app-shell :where(.mode-control [data-tooltip], #map-key-toggle)::after { left: auto; right: 0; transform: translateY(-3px); }
.app-shell :where(.mode-control [data-tooltip], #map-key-toggle):hover::after { transform: translateY(0); }
.app-shell :where(.image-hud .next-path-action)::after { left: 0; transform: translateY(-3px); }
.app-shell :where(.image-hud .next-path-action):is(:hover, :focus-visible)::after { transform: translateY(0); }
.app-shell :where(.edge-toggle)::after { top: auto; bottom: calc(100% + 7px); }
.next-path-action {
  width: var(--notch-button-width); height: var(--notch-button-height); padding: 0 10px; border-radius: var(--notch-button-radius);
  border-color: color-mix(in srgb, var(--line-strong) 82%, var(--accent)); color: var(--text); font-weight: 750;
}
.spin { position: static; min-width: 0; transform: none; }
.spin.active { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 24%, transparent); }
.arrow:hover:not(:disabled), .notch-action:hover:not(:disabled), .mode-toggle:hover, .theme-button:hover { border-color: var(--accent); }
.arrow:disabled { opacity: .24; cursor: default; }
.arrow:focus,
.notch-action:focus,
.mode-toggle:focus,
.theme-button:focus,
.feature-filter:focus,
.edge-toggle:focus,
.hud-minimize:focus,
.hud-expand:focus,
#map-key-toggle:focus {
  outline: none;
}
.arrow:focus-visible,
.notch-action:focus-visible,
.mode-toggle:focus-visible,
.theme-button:focus-visible,
.feature-filter:focus-visible,
.edge-toggle:focus-visible,
.hud-minimize:focus-visible,
.hud-expand:focus-visible,
#map-key-toggle:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 9px color-mix(in srgb, var(--accent) 12%, transparent);
}
.arrow:focus-visible {
  border-color: var(--line-strong);
  box-shadow: none;
}

.theme-switcher { position: absolute; z-index: 10; top: -41px; right: calc(24px + var(--viewport-gutter) * var(--ui-inverse-scale)); width: 108px; }
.theme-switcher summary { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 29px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: var(--notch-button-radius, 11px); color: var(--muted); background: var(--button); cursor: pointer; font-size: 13px; letter-spacing: .04em; list-style: none; }
.theme-switcher summary::-webkit-details-marker { display: none; }
.theme-switcher summary span { font-size: 16px; line-height: 1; transition: transform .2s ease; }
.theme-switcher[open] summary { color: var(--text); border-color: var(--accent); }
.theme-switcher[open] summary span { transform: rotate(180deg); }
.theme-menu { display: grid; gap: 6px; padding-top: 7px; }
.theme-button { width: 100%; height: 29px; padding: 0 13px; border-radius: var(--notch-button-radius, 11px); color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.theme-button.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--button)); }
.nav-hint { position: absolute; z-index: 2; right: 124px; bottom: 31px; max-width: 270px; color: var(--muted); font-size: 12px; line-height: 1.25; text-align: right; pointer-events: none; }
.mode-control { position: absolute; z-index: 8; right: 7px; bottom: 7px; width: 184px; height: 60px; }
.interaction-copy {
  position: absolute; z-index: 8; left: 50%; bottom: 15px; width: max-content; max-width: calc(100% - 96px);
  transform: translateX(-50%); color: var(--muted); font-size: 11px; line-height: 1.2;
  text-align: center; white-space: normal; pointer-events: none;
}
.mode-toggle {
  width: 100%; height: 100%; padding: 0 39px 5px 18px;
  border-radius: 17px 0 var(--parallel-corner-radius) 17px;
  color: var(--muted); font: 650 13px/1 Jura, sans-serif; letter-spacing: .09em; text-transform: uppercase;
}
.mode-toggle.active { color: var(--accent); border-color: var(--accent); }

.image-hud {
  position: absolute; z-index: 9; left: 50%; bottom: -84px; width: clamp(350px, 22.5vw, 460px); padding: 12px 14px 15px;
  transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: 25px;
  background: var(--glass); box-shadow: 0 18px 48px var(--shadow); backdrop-filter: blur(20px) saturate(118%);
  transition: opacity .26s ease, transform .34s ease-in-out, width .34s ease-in-out, bottom .34s ease-in-out, left .34s ease-in-out, top .34s ease-in-out, background .3s, border-color .3s;
}
.image-hud.is-dragged { left: 0; top: 0; bottom: auto; transform: none; }
.image-hud.is-transition-free { transition: none !important; }
.image-hud.is-dragging { transition: none !important; }
.hud-drag-handle {
  position: absolute; z-index: 2; top: 6px; left: 50%; width: 52px; height: 13px;
  display: grid; place-items: center; transform: translateX(-50%); cursor: grab; touch-action: none;
}
.hud-drag-handle:active { cursor: grabbing; }
.hud-drag-handle span { width: 28px; height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 52%, transparent); }
.hud-drag-handle:hover span { background: var(--accent); }
.image-hud.is-near-home .hud-drag-handle span { background: var(--accent); }
.hud-minimize, .hud-expand {
  position: absolute; z-index: 2; top: 9px; width: 25px; height: 25px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 6px;
  color: var(--muted); background: transparent; cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.hud-minimize:hover, .hud-expand:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.hud-minimize { right: 15px; }
.hud-minimize svg { display: block; width: 12px; height: 12px; overflow: visible; }
.hud-minimize path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.hud-expand { left: 15px; }
.hud-expand span { width: 7px; height: 7px; border: 1px solid currentColor; }
.image-hud.expanded .hud-expand span { width: 7px; height: 7px; box-shadow: 3px -3px 0 -2px var(--button), 3px -3px 0 -1px currentColor; }
.hud-image-title { margin: 0 42px 10px; color: var(--accent); font: 800 14px/1.2 Jura, sans-serif; text-align: center; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-frame { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: var(--panel-solid); }
.image-frame { position: relative; }
.image-frame .frame-status { position: absolute; inset: 15% 8%; display: grid; place-items: center; margin: 0; padding: 16px; color: var(--text); text-align: center; background: transparent; border-radius: 12px; }
.image-frame #frame-retry { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: var(--button); cursor: pointer; }
.image-frame [hidden] { display: none !important; }
.image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.image-hud.expanded .image-frame img { cursor: zoom-out; }
.hud-meta { padding: 11px 36px 0; text-align: center; }
.hud-meta p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.3; }
#state-subtitle { color: var(--text); font-weight: 750; letter-spacing: .035em; }
.meta-label { color: var(--accent); }
#hud-feature { color: var(--accent); font-weight: 600; letter-spacing: .04em; }
#hud-feature strong { color: var(--text); font-weight: 750; }
.image-hud.minimized { opacity: 0; transform: translate(-50%, 16px) scale(.96); pointer-events: none; }
.image-hud.expanded {
  width: min(var(--hud-expanded-width, 640px), 640px, 44vw, calc(100vh - 190px)); bottom: 14px;
}
.image-hud.is-dragged.expanded { bottom: auto; }
.image-hud-tab { position: absolute; z-index: 9; left: 50%; bottom: -19px; min-width: 180px; height: 42px; padding: 0 32px; transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--accent); background: var(--glass); cursor: pointer; font-size: 13px; letter-spacing: .08em; }

.map-key { position: absolute; z-index: 8; left: 7px; bottom: 7px; width: min(520px, calc(50% - 240px)); max-height: 430px; padding: 21px 23px 26px 38px; overflow: hidden; border: 1px solid var(--line); border-radius: 0 28px 28px var(--parallel-corner-radius); color: var(--muted); background: var(--glass); backdrop-filter: blur(20px) saturate(118%); transition: width .32s cubic-bezier(.2,.8,.2,1), max-height .32s cubic-bezier(.2,.8,.2,1), padding .32s cubic-bezier(.2,.8,.2,1), background .3s, border-color .2s, box-shadow .2s; }
.map-key-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-label { margin: 0; color: var(--accent); font-size: 13px; font-weight: 750; letter-spacing: .13em; }
#map-key-toggle { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); background: var(--button); cursor: pointer; }
#map-key-toggle svg { position: absolute; inset: 0; display: block; width: 15px; height: 15px; margin: auto; transform: translate(.25px, .25px); }
#map-key-toggle { position: relative; }
#map-key-toggle path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
#map-key-toggle .map-key-vertical { transform-origin: center; transition: opacity .18s ease, transform .18s ease; }
#map-key-toggle:not(.is-collapsed) .map-key-vertical { display: block; opacity: 0; transform: scaleY(0); }
.map-key.collapsed { width: 184px; min-height: 0; max-height: 60px; padding: 14px 14px 19px 39px; border-radius: 0 17px 17px var(--parallel-corner-radius); cursor: pointer; }
.map-key:not(.collapsed) { z-index: 12; }
.map-key.collapsed:hover { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 14%, transparent); }
.map-key.collapsed .key-grid { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-7px); pointer-events: none; }
.key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; max-height: 280px; margin-top: 18px; overflow: hidden; opacity: 1; transform: translateY(0); transition: max-height .28s ease, margin .28s ease, opacity .18s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
.key-item { display: flex; align-items: center; gap: 13px; font-size: 15px; line-height: 1.42; }
.key-item b { display: block; color: var(--text); }
.key-symbol { position: relative; display: grid; flex: 0 0 auto; place-items: center; color: var(--text); font: 600 12px/1 Jura, sans-serif; }
.key-circle { width: 25px; height: 25px; border: 2px solid var(--accent); border-radius: 50%; background: var(--panel-solid); }
.key-line { width: 34px; height: 26px; }
.key-line::before { position: absolute; width: 29px; height: 1px; background: var(--accent); content: ''; transform: rotate(-18deg); }
.key-line i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.key-line i:first-child { left: 1px; bottom: 4px; } .key-line i:last-child { right: 1px; top: 4px; }
.key-step { width: 42px; height: 26px; color: var(--accent); white-space: nowrap; }
.key-territory { width: 34px; height: 23px; border: 1px solid var(--accent); border-radius: 48% 62% 45% 58% / 56% 43% 64% 42%; background: color-mix(in srgb, var(--accent) 18%, transparent); }

.lower-rail { position: relative; min-height: 0; padding: 18px 20px 0; display: grid; grid-template-columns: minmax(0, 1.12fr) clamp(300px, 23vw, 430px) minmax(0, 1fr); gap: 28px; align-items: start; }
.feature-area { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 15px; align-items: start; }
.feature-area { padding-left: 12px; }
.feature-copy { display: grid; gap: 4px; }
.feature-copy span { max-width: 118px; color: var(--muted); font-size: 12px; line-height: 1.32; }
.keep-together { white-space: nowrap; }
.feature-filters { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px; align-items: start; justify-content: start; }
.feature-filter { border: 1px solid var(--line); border-radius: var(--notch-button-radius, 11px); padding: 6px 15px; color: var(--muted); background: var(--button); font-size: 14px; line-height: 1.15; cursor: pointer; transition: .18s ease; }
.feature-filter:hover { border-color: var(--feature-color, var(--accent)); color: var(--text); box-shadow: 0 0 8px color-mix(in srgb, var(--feature-color, var(--accent)) 34%, transparent), 0 0 20px color-mix(in srgb, var(--feature-color, var(--accent)) 17%, transparent); }
.feature-filter.active { color: var(--text); border-color: var(--feature-color, var(--accent)); background: color-mix(in srgb, var(--feature-color, var(--accent)) 18%, var(--button)); box-shadow: 0 0 14px color-mix(in srgb, var(--feature-color, var(--accent)) 25%, transparent); }
.compact-info {
  grid-column: 3; display: grid; grid-template-columns: minmax(110px, .6fr) minmax(245px, 1fr);
  justify-content: end; align-items: start; gap: clamp(34px, 2.7vw, 58px); padding: 0 10px 10px 0; color: var(--muted);
}
.compact-info p { margin: 6px 0 0; font-size: 13px; line-height: 1.4; }
.prompt-block { min-width: 0; max-width: 100%; align-self: start; }
.prompt-block .section-label { margin: 0; }
.prompt-block #prompt {
  display: -webkit-box; max-height: 2.56em; overflow: hidden; overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--muted) 92%, var(--text)); font-size: 11px; line-height: 1.28;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.edge-block { position: relative; min-width: 0; padding-left: 28px; align-self: start; }
.edge-title { display: block; }
.edge-title .section-label { margin: 0; }
.edge-toggle {
  position: absolute; top: 0; left: 0; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--muted) 55%, transparent), var(--panel-solid) 72%);
  box-shadow: inset -2px -3px 5px rgba(0,0,0,.35); cursor: pointer; transition: .18s ease;
}
.edge-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, white 65%, var(--accent)), var(--accent) 42%, color-mix(in srgb, var(--accent) 58%, #07111f) 76%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent), inset -2px -3px 5px rgba(0,0,0,.25);
}
.pilot-tag { font-size: 10px; }
details { max-width: 100%; margin-top: 5px; padding: 0 2px 5px 0; font-size: 12px; line-height: 1.35; }
details p { max-width: 100%; padding-right: 4px; overflow-wrap: anywhere; }
details[open] > p {
  position: fixed; z-index: 60; right: 28px; bottom: 112px; width: min(350px, calc(100vw - 40px)); margin: 0;
  padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); border-radius: 18px; color: var(--text);
  background: color-mix(in srgb, var(--panel-solid) 68%, transparent);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--shadow) 76%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.lower-rail:has(details[open]) { z-index: 50; }
summary { color: var(--text); cursor: pointer; }

body[data-theme="earth"] .explorer-shell {
  /* The notch and frame now share one exact surface colour. Depth belongs in
     the scene and floating panels, not in a gradient crossing their join. */
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(47, 24, 10, .36), inset 0 0 90px rgba(231, 186, 130, .08);
}
body[data-theme="earth"] .image-hud, body[data-theme="earth"] .map-key { box-shadow: 0 16px 45px rgba(20, 9, 3, .48); }
body[data-theme="earth"] .edge-title .section-label { color: #78c9ff; }
body[data-theme="earth"] .edge-toggle.active {
  border-color: #8bd5ff;
  background: radial-gradient(circle at 34% 30%, #e2f5ff, #78c9ff 42%, #287cae 78%);
  box-shadow: 0 0 7px rgba(120, 201, 255, .65), 0 0 18px rgba(80, 176, 236, .32), inset -2px -3px 5px rgba(13, 47, 68, .28);
}

body[data-theme="dune"] .explorer-shell {
  /* Keep the diagram itself perfectly clear. */
  background: transparent;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .62), inset 0 0 80px rgba(186, 173, 151, .025);
}
body[data-theme="dune"] .app-shell {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-theme="dune"] .app-shell::before {
  /* The outer-frame mask already supplies this surface behind the title.
     A second overlay here made the rail look almost opaque black. */
  background: transparent;
}
body[data-theme="dune"] .scene-wrap {
  /* The map is a true full-screen background in Dune. The shell mask below
     sits above it, so the diagram continues behind every frame edge. */
  position: fixed;
  z-index: 0;
  inset: 0;
  border-radius: 0;
}
body[data-theme="dune"] .frame-notch-surface {
  fill: var(--dune-shell-surface);
}
body[data-theme="dune"] .lower-rail {
  z-index: 1;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-theme="dune"] .image-hud,
body[data-theme="dune"] .map-key,
body[data-theme="dune"] details[open] > p {
  background: rgba(8, 8, 7, .61);
  border-color: rgba(184, 177, 164, .34);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .58);
  backdrop-filter: blur(24px) saturate(108%);
}
body[data-theme="dune"] .arrow,
body[data-theme="dune"] .notch-action,
body[data-theme="dune"] .spin,
body[data-theme="dune"] .mode-toggle,
body[data-theme="dune"] .theme-button,
body[data-theme="dune"] .feature-filter {
  background: rgba(10, 10, 9, .67);
  backdrop-filter: blur(16px) saturate(105%);
}
body[data-theme="dune"] .edge-title .section-label { color: #9d9991; }
body[data-theme="dune"] .edge-toggle.active {
  border-color: #9ad8f6;
  background: radial-gradient(circle at 34% 30%, #e6f7ff, #78c8eb 43%, #246e93 80%);
  box-shadow: 0 0 7px rgba(127, 204, 240, .52), 0 0 17px rgba(67, 157, 203, .24), inset -2px -3px 5px rgba(8, 32, 45, .3);
}

/* Unified Dune shell. The full-screen diagram continues underneath it. */
body[data-theme="dune"] .app-shell {
  background: transparent;
}
body[data-theme="dune"] .app-shell::after {
  content: '';
  position: absolute;
  z-index: 1;
  /* Match the explorer’s top edge exactly. A fractional offset overlaps the
     translucent rail and notch, which reads as a dark hairline. */
  top: 53px;
  right: calc(var(--viewport-gutter) * var(--ui-inverse-scale));
  bottom: 118px;
  left: calc(var(--viewport-gutter) * var(--ui-inverse-scale));
  border-radius: 58px 58px 76px 76px;
  background: transparent;
  box-shadow: 0 0 0 9999px var(--dune-shell-surface);
  pointer-events: none;
}
body[data-theme="dune"] .app-shell::after { display: none; }
body[data-theme="dune"] .dune-shell-mask { display: block; }
body[data-theme="dune"] .explorer-frame-shape { display: none; }
body[data-theme="dune"] .lower-rail {
  z-index: 3;
  background: transparent;
}
body[data-theme="dune"] .lower-rail:has(details[open]) { z-index: 50; }
body[data-theme="dune"] .frame-notch-surface {
  fill: var(--dune-shell-surface);
}
body[data-theme="dune"] .explorer-shell {
  box-shadow: none;
}

/* Shared explorer shell: Dark, Earth, and Dune now use the same single SVG
   surface for the title rail, outer frame, and centre notch. The educational
   tour remains independent; this renderer is active only inside Explorer. */
body.explorer-active .app-shell::before { background: transparent; }
body.explorer-active .explorer-shell { background: transparent; }
body.explorer-active .scene-wrap { z-index: 0; }
body.explorer-active .dune-shell-mask { display: block; }
body.explorer-active .explorer-frame-shape { display: none; }
body.explorer-active .lower-rail { z-index: 3; background: transparent; }

@media (max-width: 1450px) {
  :root { --viewport-gutter: 19px; }
  .lower-rail { grid-template-columns: minmax(0, 1.05fr) 330px minmax(0, 1fr); gap: 18px; padding-inline: 12px; }
  .compact-info { grid-template-columns: minmax(100px, .6fr) minmax(218px, 1fr); gap: 26px; }
  .image-hud { bottom: -82px; }
}

@media (max-width: 980px) {
  :root { --viewport-gutter: 9px; }
  body { overflow: auto; }
  .app-shell { padding-top: 56px; }
  .explorer-shell { --frame-bottom-radius: 48px; height: 64vh; min-height: 540px; border-radius: 38px 38px 48px 48px; }
  .brand-tab { min-width: 300px; font-size: 12px; }
  .top-controls { width: min(330px, calc(100% - 54px)); }
  .top-control-row, .notch-action-row { grid-template-columns: var(--notch-arrow-width) var(--notch-button-width) var(--notch-arrow-width); gap: 9px; }
  .theme-switcher { top: -52px; right: calc(16px + var(--viewport-gutter) * var(--ui-inverse-scale)); }
  .image-hud { position: relative; left: auto; bottom: auto; width: min(430px, calc(100% - 26px)); margin: calc(64vh - 74px) auto 0; transform: none; }
  .image-hud.is-dragged { left: auto; top: auto; bottom: auto; margin: calc(64vh - 74px) auto 0; }
  .hud-drag-handle { display: none; }
  .image-hud.minimized { transform: translateY(10px) scale(.97); }
  .image-hud-tab { bottom: -45px; }
  .lower-rail { margin-top: 520px; grid-template-columns: 1fr; gap: 18px; }
  .feature-area { grid-template-columns: 1fr; }
  .compact-info { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .map-key { width: min(520px, calc(100% - 120px)); max-width: calc(100% - 120px); }
  .nav-hint { display: none; }
}

@media (max-width: 980px) {
  body.explorer-active { overflow-y: auto; }
  .app-shell { position: relative; width: 100%; height: auto; min-height: 100svh; transform: none; overflow: visible; grid-template-rows: auto auto; padding: 56px 9px 20px; }
  .explorer-shell { height: max(540px, 64vh); }
  .image-hud { margin-top: calc(max(540px, 64vh) - 74px); }
  .lower-rail { margin-top: 520px; }
}
@media (max-width: 540px) {
  .brand-tab { width: 100%; min-width: 0; top: -38px; left: 0; transform: none; justify-items: start; padding-left: 13px; font-size: 10px; max-width: 45%; overflow: hidden; }
  .theme-switcher { top: -44px; right: 0; width: 76px; }
  .theme-switcher summary, .theme-button { height: 27px; padding-inline: 8px; font-size: 10px; }
  .story-stage[data-focus="journey"] .story-glass { margin-top: 16px; }
  .tour-explorer-link span { display: none; }
  .tour-explorer-link { white-space: nowrap; }
}

@media (max-height: 820px) and (min-width: 981px) {
  .app-shell { padding-top: 53px; }
  .brand-tab { top: -43px; }
  .theme-switcher { top: -41px; }
  .image-hud { bottom: -105px; }
}

@media (max-width: 620px) {
  .brand-tab { min-width: 248px; font-size: 10px; }
  .top-controls { --notch-button-width: 64px; --notch-arrow-width: 48px; width: min(196px, calc(100% - 40px)); }
  .top-control-row, .notch-action-row { grid-template-columns: var(--notch-arrow-width) var(--notch-button-width) var(--notch-arrow-width); gap: 5px; }
  .notch-action { min-width: 0; font-size: 8px; }
  .icon-action { width: 29px; padding: 0; }
  .theme-button { width: 100%; padding-inline: 9px; }
  .mode-control { right: 7px; bottom: 7px; width: 154px; height: 54px; }
  .interaction-copy { bottom: 72px; max-width: calc(100% - 40px); font-size: 10px; }
  .compact-info { grid-template-columns: 1fr; }
  .key-grid { grid-template-columns: 1fr; }
}

/* Educational landing experience */
body:not(.explorer-active) { overflow: auto; background: #0d0d0c; }
.tour { --tour-ink: var(--accent); --tour-muted: #aaa79e; --tour-gold: #e2a96f; --tour-blue: #89d5ed; --tour-bg: #0d0d0c; min-height: 100vh; color: var(--tour-ink); background: radial-gradient(circle at 83% 13%, rgba(135,93,58,.28), transparent 27%), #0d0d0c; font-family: Inter, Aptos, Arial, sans-serif; overflow: hidden; }
.tour[hidden], .app-shell[hidden] { display: none !important; }
.tour a { color: inherit; }
.tour-nav { height: 72px; display: flex; justify-content: space-between; align-items: center; max-width: 1260px; padding: 0 34px; margin: auto; border-bottom: 1px solid rgba(236,232,222,.13); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.tour-mark { text-decoration: none; font-weight: 700; letter-spacing: .18em; }.tour-mark span { color: var(--tour-gold); font-weight: 500; }
.tour-nav-actions { display: flex; align-items: center; gap: 25px; }.tour-nav-actions > a:not(.tour-explorer-link) { color: var(--tour-muted); text-decoration: none; }
.tour-explorer-link, .tour-primary { text-decoration: none; background: #d7d5cf; color: #191918 !important; border-radius: 8px; padding: 13px 18px; font-weight:700; letter-spacing:.09em; transition:transform .2s ease,background .2s ease; }.tour-explorer-link:hover,.tour-primary:hover {transform:translateY(-2px);background:#ebe9e3}
.tour-hero { min-height: calc(100vh - 72px); max-width: 1260px; padding: 12vh 34px 7vh; margin: auto; display: flex; flex-direction: column; position: relative; isolation: isolate; }
.tour-kicker, .tour-chapter-label, .tour-handoff span { color: var(--tour-gold); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; }.tour-hero h1 { margin: 26px 0 auto; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(45px, 7.7vw, 104px); line-height: .94; letter-spacing: -.06em; font-weight: 400; max-width: 880px; z-index: 1; }.tour h1 em, .tour h2 em { color: var(--tour-gold); font-style: italic; }
.tour-hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 35px; z-index: 1; }.tour-hero-bottom p { max-width: 485px; margin: 0; color: var(--tour-muted); font-size: 16px; line-height: 1.55; }.hero-constellation { position: absolute; right: 7%; bottom: 15%; width: 42%; height: 46%; opacity: .8; background: linear-gradient(125deg, transparent 35%, rgba(226,169,111,.42) 35.2%, transparent 35.7%), linear-gradient(32deg, transparent 55%, rgba(137,213,237,.34) 55.2%, transparent 55.7%); z-index: 0; }.hero-constellation i { position:absolute; width: 14px; height:14px; border-radius:50%; background: var(--tour-blue); box-shadow: 0 0 18px rgba(137,213,237,.8); }.hero-constellation i:nth-child(1){left:5%;top:70%}.hero-constellation i:nth-child(2){left:28%;top:40%;background:var(--tour-gold)}.hero-constellation i:nth-child(3){left:50%;top:64%}.hero-constellation i:nth-child(4){left:63%;top:20%;background:var(--tour-gold)}.hero-constellation i:nth-child(5){right:6%;top:46%}.hero-constellation i:nth-child(6){right:21%;bottom:4%}
.tour-chapter { max-width: 1260px; margin: 0 auto; padding: clamp(84px, 11vw, 155px) 34px; border-top: 1px solid rgba(236,232,222,.13); }.tour-chapter-grid { display: grid; grid-template-columns: minmax(260px,.9fr) minmax(420px,1.1fr); gap: clamp(45px, 8vw, 115px); align-items: center; margin-top: 42px; }.tour-chapter-grid.reverse { grid-template-columns: minmax(420px,1.1fr) minmax(260px,.9fr); }.tour h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px,4.3vw,67px); font-weight: 400; letter-spacing: -.05em; line-height: .98; margin:0 0 25px; }.tour p { color: var(--tour-muted); font-size: 15px; line-height: 1.65; }.tour strong { color: var(--tour-ink); font-weight: 650; }
.tour figure { margin: 0; }.tour figcaption { color: #87847d; font-size: 11px; line-height: 1.45; margin-top: 15px; }.unet-workshop, .dial-figure, .route-figure { min-height: 330px; border-radius: 16px; background: linear-gradient(140deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid rgba(236,232,222,.13); padding: 25px; position:relative; overflow:hidden; }.unet-workshop svg { position:absolute; left:8%; top:72px; width:84%; height:170px; fill:none; stroke:rgba(236,232,222,.37); stroke-width:2; }.unet-workshop svg circle:first-of-type { fill: var(--tour-gold); stroke: var(--tour-gold); filter: drop-shadow(0 0 8px rgba(226,169,111,.8)); }.workshop-stage { position:relative; z-index:1; display:inline-flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:7px; color:#aaa79e; font-size:11px; }.workshop-stage.active { background: rgba(226,169,111,.15); color: var(--tour-gold); }.workshop-stage:nth-child(2) { position:absolute; left:31%; bottom:49px; }.workshop-stage:nth-child(3){position:absolute;right:28%;bottom:49px}.workshop-stage:nth-child(4){position:absolute;right:3%;top:25px}.workshop-stage span { font-size:9px; color:inherit; opacity:.8; }
.sae-chapter { background: linear-gradient(90deg, rgba(107,164,186,.07), transparent 55%); }.dial-figure { display:flex; align-items:center; justify-content:center; gap:20px; }.dial-origin { position:absolute; left:28px; top:30px; color:var(--tour-gold); font-size:12px; font-weight:700; }.dial-origin span { display:block; color:var(--tour-muted); font-weight:400; margin-top:5px; }.dial-link { width:34%; height:1px; background:linear-gradient(90deg,var(--tour-gold),var(--tour-blue)); transform:rotate(22deg) translate(-32px,35px); }.feature-dial { width:150px;height:150px;border:1px solid rgba(137,213,237,.7);border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle,rgba(137,213,237,.16),transparent 65%);box-shadow:0 0 35px rgba(137,213,237,.14); }.dial-notch{position:absolute;width:3px;height:53px;background:var(--tour-blue);top:9px;left:74px;transform-origin:50% 66px;transform:rotate(-48deg);border-radius:4px}.dial-value{font-size:35px;font-family:Georgia,serif}.dial-label{position:absolute;bottom:-28px;text-transform:uppercase;font-size:9px;letter-spacing:.15em;color:var(--tour-blue)}.dial-figure figcaption{position:absolute;left:25px;bottom:20px;max-width:245px}
.journey-heading { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin:42px 0 34px; }.journey-heading h2{margin:0}.tour-core-statement{font-size:19px !important;color:var(--tour-ink)!important;margin:0!important;border-left:2px solid var(--tour-gold);padding-left:18px}.controlled-layout{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center}.fixed-card{border:1px solid rgba(236,232,222,.17);padding:22px;border-radius:13px;display:flex;flex-direction:column;gap:7px;background:rgba(255,255,255,.025)}.fixed-card span{font-size:9px;color:var(--tour-gold);letter-spacing:.17em;margin-bottom:8px}.fixed-card b{font-size:12px}.fixed-card small{font-size:11px;color:var(--tour-muted);margin-bottom:9px}.steps-figure{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative;padding-top:10px}.step-line{position:absolute;left:7%;right:7%;top:56px;height:1px;background:linear-gradient(90deg,#8fa2aa,var(--tour-gold))}.journey-step-card{z-index:1;display:grid;justify-items:center;gap:11px}.journey-step-card i{font-style:normal;width:48px;height:48px;border:1px solid #9ca4a4;background:#171817;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:19px}.journey-step-card:last-of-type i{border-color:var(--tour-gold);box-shadow:0 0 20px rgba(226,169,111,.28)}.journey-step-card b{font-size:10px;color:var(--tour-muted);font-weight:500}.steps-figure figcaption{grid-column:1/-1;margin-top:20px}
.map-chapter { background: radial-gradient(circle at 72% 60%, rgba(43,107,133,.19), transparent 29%); }.tour-secondary { display:inline-block; margin-top:13px; color:var(--tour-blue)!important; font-size:12px;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;border-bottom:1px solid rgba(137,213,237,.35);padding-bottom:5px}.route-figure{height:330px}.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(137,213,237,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(137,213,237,.08) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse at center,black,transparent 78%)}.route-figure svg{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);fill:none;stroke:var(--tour-blue);stroke-width:2}.route-figure circle{fill:#12313d;stroke:var(--tour-blue);stroke-width:2}.route-figure circle:last-child{fill:#513d27;stroke:var(--tour-gold)}.route-numbers{position:absolute;inset:0}.route-numbers i{position:absolute;font-style:normal;font-size:11px;display:grid;place-items:center;width:34px;height:34px}.route-numbers i:nth-child(1){left:11%;bottom:20%}.route-numbers i:nth-child(2){left:27%;bottom:35%}.route-numbers i:nth-child(3){left:46%;bottom:38%}.route-numbers i:nth-child(4){left:66%;bottom:52%}.route-numbers i:nth-child(5){right:8%;top:17%;color:var(--tour-gold)}.route-figure figcaption{position:absolute;bottom:20px;left:25px}
.edge-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center;margin-top:42px}.edge-layout h2{margin-bottom:20px}.edge-diagram{height:280px;border-radius:15px;border:1px solid rgba(236,232,222,.13);position:relative;overflow:hidden;background:radial-gradient(circle at 33% 58%,rgba(56,139,178,.31),transparent 32%),linear-gradient(145deg,rgba(255,255,255,.04),transparent)}.edge-diagram:before{content:'';position:absolute;width:240px;height:180px;left:8%;top:20%;border:1px solid rgba(137,213,237,.6);border-radius:49% 51% 42% 58% / 55% 43% 57% 45%;background:rgba(61,147,187,.12)}.territory-label{position:absolute;left:23%;top:46%;font-size:11px;color:var(--tour-blue);line-height:1.4}.edge-point{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--tour-gold);right:20%;top:31%;box-shadow:0 0 18px var(--tour-gold)}.edge-line{position:absolute;left:53%;top:55%;width:29%;height:1px;background:var(--tour-gold);transform:rotate(-29deg);transform-origin:left}.edge-label{position:absolute;right:6%;top:25%;font-size:10px;color:var(--tour-gold);text-transform:uppercase;letter-spacing:.12em}.tour-handoff{display:flex;justify-content:space-between;align-items:end;gap:30px;border-top:1px solid rgba(236,232,222,.13);margin-top:85px;padding-top:35px}.tour-handoff h3{font-family:Georgia,serif;font-size:29px;font-weight:400;line-height:1.1;max-width:620px;margin:12px 0}.tour-handoff p{font-size:12px;max-width:630px}.tour-footer{max-width:1260px;margin:auto;border-top:1px solid rgba(236,232,222,.13);padding:25px 34px;display:flex;justify-content:space-between;color:var(--tour-muted);font-size:10px;letter-spacing:.13em}.tour-footer a{text-decoration:none}.back-to-tour{position:absolute;z-index:8;top:-41px;left:20px;color:var(--text);font-size:9px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);border-radius:var(--notch-button-radius,11px);padding:9px 12px;background:rgba(8,9,10,.62);backdrop-filter:blur(10px)}.back-to-tour:hover{border-color:var(--accent)}
@media (max-width: 800px){.tour-nav{padding-inline:18px}.tour-nav-actions>a:not(.tour-explorer-link){display:none}.tour-hero{padding-inline:22px;padding-top:10vh}.tour-hero-bottom,.tour-handoff{align-items:flex-start;flex-direction:column}.hero-constellation{width:60%;right:-9%;bottom:23%;opacity:.5}.tour-chapter{padding:76px 22px}.tour-chapter-grid,.tour-chapter-grid.reverse,.edge-layout,.journey-heading{grid-template-columns:1fr;gap:34px}.tour-chapter-grid.reverse .dial-figure{order:2}.controlled-layout{grid-template-columns:1fr}.steps-figure{gap:2px}.journey-step-card i{width:37px;height:37px;font-size:15px}.journey-step-card b{font-size:8px}.step-line{top:49px}.back-to-tour{left:13px;top:12px}.back-to-tour span{display:none}.tour-footer{padding-inline:22px}}
@media (prefers-reduced-motion: reduce){.tour *, .tour *:before, .tour *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Progressive studio tour: native SVG and CSS, deliberately schematic. */
.unet-orientation { min-height:300px; border:1px solid rgba(236,232,222,.13); border-radius:16px; padding:24px; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 80%,rgba(137,213,237,.09),transparent 38%),rgba(255,255,255,.018); }
.unet-orientation svg { position:absolute; inset:35px 11% auto; width:78%; height:195px; fill:none; stroke:rgba(236,232,222,.48); stroke-width:2.2; }.unet-orientation .u-arrow { stroke:var(--tour-gold); }.u-word{position:absolute;color:var(--tour-muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.u-left{left:9%;top:42px}.u-middle{left:45%;bottom:69px;color:var(--tour-ink);font-family:Georgia,serif;font-size:20px;letter-spacing:0;text-transform:none}.u-right{right:8%;top:42px}.unet-orientation figcaption{position:absolute;left:24px;right:24px;bottom:17px}
.studio-chapter { background:radial-gradient(circle at 50% 52%,rgba(226,169,111,.08),transparent 36%); }.studio-heading{display:grid;grid-template-columns:1.05fr .75fr;gap:70px;align-items:end;margin:42px 0 32px}.studio-heading h2{margin:0}.studio-heading p{margin:0}.studio-map{height:440px;border:1px solid rgba(236,232,222,.15);border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.008));}.studio-map:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse,black,transparent 72%)}.studio-map svg{position:absolute;inset:28px 8%;width:84%;height:320px;fill:none;stroke:rgba(236,232,222,.45);stroke-width:3}.studio-station{position:absolute;z-index:1;width:170px;padding:14px 15px;border:1px solid rgba(236,232,222,.2);border-radius:10px;background:rgba(16,16,14,.8);display:flex;flex-direction:column;gap:4px;transition:opacity .5s ease,filter .5s ease,transform .5s ease,border-color .5s ease,box-shadow .5s ease}.studio-station b{font-size:12px;color:var(--tour-ink)}.studio-station span{font-family:Georgia,serif;font-size:17px}.studio-station small{color:var(--tour-muted);font-size:10px}.station-down{left:7%;top:35px}.station-mid{left:34%;bottom:76px}.station-up0{right:31%;bottom:76px}.station-up1{right:7%;top:35px}.studio-station.is-focus,.studio-station.active{opacity:1;filter:none;transform:translateY(-4px);border-color:var(--tour-gold);box-shadow:0 0 28px rgba(226,169,111,.16)}.studio-map.is-scrolling .studio-station:not(.is-focus){opacity:.3;filter:blur(1.5px);transform:scale(.97)}.studio-map figcaption{position:absolute;z-index:1;left:26px;bottom:19px;max-width:430px}
.sae-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin:42px 0 52px}.sae-heading h2{margin-bottom:17px}.zoom-flow{min-height:190px;border:1px solid rgba(137,213,237,.24);border-radius:15px;display:flex;align-items:center;justify-content:center;gap:17px;background:radial-gradient(circle at 56% 50%,rgba(137,213,237,.11),transparent 46%)}.zoom-source,.sae-listener{font-size:12px;border:1px solid rgba(236,232,222,.25);border-radius:8px;padding:13px 12px;text-align:center}.zoom-source{color:var(--tour-gold);border-color:rgba(226,169,111,.5)}.sae-listener{font-weight:700}.sae-listener i{font-style:normal;font-size:10px;color:var(--tour-muted);font-weight:400}.zoom-arrow{color:var(--tour-blue);font-size:21px}.zoom-dial{height:78px;width:78px;border:1px solid var(--tour-blue);border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(137,213,237,.18),transparent 68%)}.zoom-dial i{position:absolute;height:27px;width:2px;background:var(--tour-blue);top:8px;left:38px;transform-origin:50% 31px;transform:rotate(-48deg)}.zoom-dial b{font-size:23px;font-family:Georgia,serif}.zoom-dial small{position:absolute;bottom:-23px;white-space:nowrap;color:var(--tour-blue);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.dial-to-steps{position:absolute;right:0;top:-34px;color:var(--tour-blue);font-size:10px;letter-spacing:.08em}.dial-to-steps i{font-size:21px;font-style:normal;vertical-align:middle;margin-left:5px}.steps-figure{padding-top:34px}
@media (max-width:800px){.studio-heading,.sae-heading{grid-template-columns:1fr;gap:22px}.studio-map{height:520px}.studio-map svg{inset:53px 8%;height:340px}.studio-station{width:135px;padding:10px}.studio-station span{font-size:14px}.studio-station small{font-size:9px}.station-down{left:5%;top:36px}.station-mid{left:8%;bottom:101px}.station-up0{right:8%;bottom:101px}.station-up1{right:5%;top:36px}.zoom-flow{min-height:150px;gap:8px}.zoom-source,.sae-listener{font-size:10px;padding:10px 7px}.zoom-dial{width:65px;height:65px}.zoom-dial i{left:31px;transform-origin:50% 27px}.zoom-dial b{font-size:20px}.dial-to-steps{top:-28px}.unet-orientation{min-height:260px}}
@media (prefers-reduced-motion: reduce){.studio-map.is-scrolling .studio-station:not(.is-focus){opacity:1;filter:none;transform:none}}

/* Full-screen liquid-glass scrollytelling studio */
.tour{overflow:hidden;height:100svh}
body:not(.explorer-active){overflow:hidden}
.story-scroll{position:relative;height:calc(100svh - 72px);background:radial-gradient(circle at 50% 43%,#241b16 0,#100f0e 48%,#070808 100%)}
.story-stage{position:relative;height:100%;overflow:hidden;isolation:isolate;color:var(--tour-ink)}
.story-stage:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 47% 38%,rgba(226,169,111,.12),transparent 30%),radial-gradient(circle at 73% 66%,rgba(137,213,237,.08),transparent 27%)}
.story-stage:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,6,.5),transparent 20%,transparent 80%,rgba(5,6,6,.5)),linear-gradient(0deg,rgba(5,6,6,.66),transparent 24%)}
.story-title{position:absolute;z-index:8;top:34px;left:42px}.story-title span{color:var(--tour-gold);font-size:9px;letter-spacing:.23em;font-weight:700}.story-title h1{font-family:Georgia,serif;font-size:clamp(28px,3.2vw,48px);font-weight:400;letter-spacing:-.04em;margin:7px 0 0}
.studio-scene{position:absolute;inset:108px 4.5% 74px;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.012));box-shadow:inset 0 1px rgba(255,255,255,.09),0 35px 100px rgba(0,0,0,.35);overflow:hidden;backdrop-filter:blur(22px) saturate(120%)}
.studio-scene:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse,black,transparent 82%)}
.studio-pipe{position:absolute;inset:4% 8%;width:84%;height:88%;fill:none;stroke:rgba(224,220,210,.31);stroke-width:20;stroke-linecap:round;transition:opacity .65s ease}.studio-pipe .pipe-glow{stroke:rgba(226,169,111,.2);stroke-width:2;filter:drop-shadow(0 0 10px rgba(226,169,111,.5))}
.studio-room{position:absolute;width:25%;height:32%;padding:17px 19px;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.22);backdrop-filter:blur(14px);overflow:hidden;isolation:isolate;transition:filter .7s ease,opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),border-color .7s ease,box-shadow .7s ease}.studio-room:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,10,11,.86) 0%,rgba(8,10,11,.58) 35%,rgba(8,10,11,.08) 73%,rgba(8,10,11,.25) 100%);pointer-events:none}.studio-room>span,.studio-room h2,.studio-room p{position:relative;z-index:2;text-shadow:0 1px 12px rgba(0,0,0,.9)}.studio-room>span{font-size:9px;color:#f0bd84;letter-spacing:.14em}.studio-room h2{font-family:Georgia,serif;font-size:clamp(17px,1.7vw,27px);font-weight:400;letter-spacing:-.03em;margin:5px 0 4px}.studio-room p{font-size:10px;line-height:1.35;margin:0;color:var(--accent);max-width:180px}.room-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.62;filter:saturate(.72) contrast(1.04) brightness(.82);transform:scale(1.01);transition:opacity .7s ease,filter .7s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}.room-composition{left:8%;top:7%}.room-meaning{left:24%;bottom:7%}.room-detail{right:24%;bottom:7%}.room-finish{right:8%;top:7%}
.room-art{position:absolute;right:13px;bottom:12px;width:43%;height:48%;opacity:.65}.easel-art{border:1px solid rgba(226,169,111,.5);transform:rotate(-2deg)}.easel-art:before,.easel-art:after{content:'';position:absolute;background:rgba(226,169,111,.4)}.easel-art:before{width:1px;height:135%;left:50%;top:-10%}.easel-art:after{height:1px;width:120%;left:-10%;bottom:-15%}.easel-art i{position:absolute;inset:14% 20%;border:1px solid rgba(137,213,237,.6);border-radius:50% 45% 53% 40%}.meaning-art i,.meaning-art b,.meaning-art em{position:absolute;border:1px solid rgba(137,213,237,.55)}.meaning-art i{width:34px;height:34px;left:5%;top:20%;transform:rotate(18deg)}.meaning-art b{width:43px;height:28px;right:4%;top:5%;border-radius:50%}.meaning-art em{width:52px;height:1px;left:22%;bottom:15%;transform:rotate(-24deg)}.detail-art:before,.detail-art:after{content:'';position:absolute;inset:10%;border:1px solid rgba(137,213,237,.55);clip-path:polygon(50% 0,100% 38%,78% 100%,24% 88%,0 33%)}.detail-art:after{inset:25%;border-color:rgba(226,169,111,.6)}.finish-art i,.finish-art b,.finish-art em{position:absolute;width:27px;height:27px;border-radius:6px}.finish-art i{left:5%;top:5%;background:rgba(226,169,111,.5)}.finish-art b{right:5%;top:5%;background:rgba(137,213,237,.45)}.finish-art em{left:32%;bottom:0;background:rgba(182,159,204,.45)}
.scene-input,.scene-output{position:absolute;top:43%;font-size:8px;letter-spacing:.14em;color:#8f8c85}.scene-input{left:1.4%}.scene-output{right:1.4%}.scene-input i,.scene-output i{display:block;width:9px;height:9px;border-radius:50%;margin:8px auto;background:var(--tour-gold);box-shadow:0 0 14px var(--tour-gold)}
.feature-console{position:absolute;z-index:3;left:8%;top:38%;width:25%;height:31%;border-radius:18px;border:1px solid rgba(137,213,237,.5);background:linear-gradient(145deg,rgba(93,161,189,.18),rgba(8,17,20,.78));box-shadow:0 25px 80px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:.8s cubic-bezier(.2,.8,.2,1)}.feature-console>span,.feature-console small{font-size:8px;letter-spacing:.15em;color:var(--tour-blue)}.console-dial{position:relative;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin:12px;background:conic-gradient(from -90deg,var(--tour-blue) 0deg var(--dial-fill,0deg),rgba(137,213,237,.16) var(--dial-fill,0deg) 360deg);box-shadow:0 0 22px rgba(137,213,237,.16);transition:background .65s ease,box-shadow .65s ease}.console-dial:before{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle,rgba(137,213,237,.18),rgba(8,17,20,.92) 69%)}.console-dial i{position:absolute;z-index:1;left:50%;top:50%;width:2px;height:30px;border-radius:99px;background:var(--tour-blue);box-shadow:0 0 8px var(--tour-blue);transform:translate(-50%,-100%) rotate(var(--dial-angle,0deg));transform-origin:50% 100%;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.console-dial b{position:relative;z-index:2;font:28px Georgia,serif}.journey-gallery{position:absolute;z-index:4;left:36%;right:9%;top:6%;bottom:18%;opacity:0;transform:translateX(40px) scale(.97);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}.journey-gallery figure{position:absolute;inset:0;margin:0;opacity:0;transform:translateX(34px) scale(.965);transition:opacity .62s ease,transform .75s cubic-bezier(.2,.8,.2,1);display:grid;place-items:center}.journey-gallery figure.is-active{opacity:1;transform:none}.journey-gallery img{display:block;width:min(47%,280px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:15px;filter:saturate(.88) contrast(1.06);box-shadow:0 22px 55px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.14)}.journey-gallery figcaption{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(8,10,11,.56);backdrop-filter:blur(18px) saturate(150%);font-size:9px;letter-spacing:.11em;text-transform:uppercase}.journey-gallery figcaption b{color:var(--tour-gold);font:15px Georgia,serif}.journey-track{position:absolute;z-index:4;left:38%;right:10%;bottom:5%;display:flex;align-items:center;justify-content:space-between;opacity:0;transform:translateX(-40px);transition:.8s ease}.journey-track:before{content:'';position:absolute;left:4%;right:4%;height:1px;background:linear-gradient(90deg,var(--tour-blue),var(--tour-gold))}.journey-track span{z-index:1;width:42px;height:42px;border-radius:50%;border:1px solid rgba(236,232,222,.38);background:#121414;display:grid;place-items:center;font:16px Georgia,serif;transition:background .45s ease,border-color .45s ease,color .45s ease,transform .45s ease,box-shadow .45s ease}.journey-track span.is-past{background:#17313a;border-color:rgba(137,213,237,.65);color:var(--tour-blue)}.journey-track span.is-active{background:#d99f65;border-color:#f0c08b;color:#17120e;transform:scale(1.16);box-shadow:0 0 28px rgba(226,169,111,.48)}
.story-glass{position:absolute;z-index:10;left:42px;bottom:34px;width:min(430px,calc(100% - 84px));padding:22px 24px;border:1px solid rgba(255,255,255,.17);border-radius:20px;background:linear-gradient(145deg,rgba(35,36,35,.68),rgba(16,17,17,.42));box-shadow:inset 0 1px rgba(255,255,255,.16),0 20px 70px rgba(0,0,0,.42);backdrop-filter:blur(28px) saturate(145%)}.story-glass:before{content:'';position:absolute;inset:1px;border-radius:19px;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 30%);pointer-events:none}.story-count{position:relative;color:var(--tour-gold);font-size:9px;letter-spacing:.2em;font-weight:700}.story-glass h2{position:relative;font:400 31px/1.05 Georgia,serif;margin:9px 0}.story-glass p{position:relative;margin:0;color:#aaa79e;font-size:13px;line-height:1.55}.story-open{position:absolute;z-index:11;right:42px;bottom:34px;text-decoration:none;color:#111!important;background:#ece8de;border-radius:999px;padding:15px 20px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.story-progress{position:absolute;z-index:10;right:42px;top:45%;width:2px;height:120px;background:rgba(255,255,255,.14)}.story-progress i{display:block;width:100%;height:14%;background:var(--tour-gold);box-shadow:0 0 8px var(--tour-gold);transition:height .5s ease}.story-steps{display:none}.story-step{height:0}
.story-stage[data-focus]:not([data-focus="overview"]) .studio-room{filter:blur(8px) saturate(.5);opacity:.24;transform:scale(.965)}
.story-stage[data-focus="composition"] .studio-room.room-composition,.story-stage[data-focus="meaning"] .studio-room.room-meaning,.story-stage[data-focus="detail"] .studio-room.room-detail,.story-stage[data-focus="finish"] .studio-room.room-finish{filter:none;opacity:1;transform:scale(1.04);border-color:rgba(226,169,111,.72);box-shadow:inset 0 1px rgba(255,255,255,.18),0 25px 70px rgba(0,0,0,.45),0 0 45px rgba(226,169,111,.14)}
.story-stage[data-focus="composition"] .room-composition .room-image,.story-stage[data-focus="meaning"] .room-meaning .room-image,.story-stage[data-focus="detail"] .room-detail .room-image,.story-stage[data-focus="finish"] .room-finish .room-image{opacity:.94;filter:saturate(.92) contrast(1.07) brightness(.98);transform:scale(1.055)}
.story-stage[data-focus="dial"] .studio-room.room-composition{filter:none;opacity:.4;transform:scale(1.02)}.story-stage[data-focus="dial"] .feature-console{opacity:1;transform:scale(1)}.story-stage[data-focus="journey"] .studio-room,.story-stage[data-focus="journey"] .studio-pipe{visibility:hidden}.story-stage[data-focus="journey"] .scene-input,.story-stage[data-focus="journey"] .scene-output{opacity:.28}.story-stage[data-focus="journey"] .feature-console{opacity:1;transform:translateX(-8%) scale(.78)}.story-stage[data-focus="journey"] .journey-gallery{opacity:1;transform:none}.story-stage[data-focus="journey"] .journey-track{opacity:1;transform:none}.story-stage[data-focus="journey"] .scene-output i{background:var(--tour-blue);box-shadow:0 0 16px var(--tour-blue)}
.room-illustration{position:absolute;right:8px;bottom:6px;width:58%;height:65%;overflow:visible;fill:none;stroke:rgba(232,228,217,.58);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.78}.room-illustration .artist-head{fill:rgba(226,169,111,.38);stroke:rgba(232,228,217,.75)}.room-illustration .artist-body,.room-illustration .artist-arm{stroke:rgba(232,228,217,.76);stroke-width:2}.canvas-sheet,.detail-canvas{fill:rgba(236,232,222,.045);stroke:rgba(226,169,111,.55)}.sketch-shape,.branch-lines{stroke:rgba(137,213,237,.72)}.composition-orbit{stroke:rgba(226,169,111,.34);stroke-dasharray:3 4}.blueprint-table{fill:rgba(137,213,237,.08);stroke:rgba(137,213,237,.62)}.meaning-line{stroke:rgba(137,213,237,.72)}.meaning-card{fill:rgba(137,213,237,.08);stroke:rgba(137,213,237,.55)}.light-column{stroke:rgba(226,169,111,.38);stroke-dasharray:2 5}.magnifier{fill:rgba(137,213,237,.12);stroke:rgba(137,213,237,.8)}.magnifier-handle{stroke:rgba(137,213,237,.8);stroke-width:2}.spotlight{stroke:none;fill:rgba(226,169,111,.08)}.swatch{stroke:none}.s1{fill:rgba(226,169,111,.58)}.s2{fill:rgba(137,213,237,.48)}.s3{fill:rgba(184,156,201,.52)}
.story-stage[data-focus="composition"] .artist-arm{animation:draw-hand 1.8s ease-in-out infinite alternate}.story-stage[data-focus="composition"] .composition-orbit{animation:orbit-pulse 2.4s ease-in-out infinite}.story-stage[data-focus="meaning"] .meaning-card{animation:idea-float 2.8s ease-in-out infinite alternate}.story-stage[data-focus="meaning"] .card-two{animation-delay:.5s}.story-stage[data-focus="meaning"] .card-three{animation-delay:1s}.story-stage[data-focus="detail"] .magnifier{animation:inspect-detail 2s ease-in-out infinite alternate}.story-stage[data-focus="detail"] .branch-lines{animation:line-glow 1.8s ease-in-out infinite alternate}.story-stage[data-focus="finish"] .beam-one{animation:light-breathe 2.4s ease-in-out infinite alternate}.story-stage[data-focus="finish"] .beam-two{animation:light-breathe 2.4s .5s ease-in-out infinite alternate}.story-stage[data-focus="finish"] .finishing-hand{animation:finish-hand 1.7s ease-in-out infinite alternate}
@keyframes draw-hand{to{transform:translate(3px,-4px)}}@keyframes orbit-pulse{50%{opacity:.35;transform:scale(1.07);transform-origin:68px 55px}}@keyframes idea-float{to{transform:translateY(-6px)}}@keyframes inspect-detail{to{transform:translate(9px,-5px)}}@keyframes line-glow{to{stroke:rgba(226,169,111,.9)}}@keyframes light-breathe{to{fill:rgba(226,169,111,.2)}}@keyframes finish-hand{to{transform:rotate(-8deg);transform-origin:141px 68px}}
@media(max-width:800px){.story-title{top:20px;left:20px}.story-title h1{font-size:27px}.studio-scene{inset:85px 12px 138px;border-radius:20px}.studio-pipe{inset:9% 4%;width:92%;height:82%;stroke-width:14}.studio-room{width:40%;height:25%;padding:10px 11px;border-radius:12px}.studio-room h2{font-size:16px}.studio-room p{font-size:8px}.room-art{display:none}.room-composition{left:6%;top:8%}.room-meaning{left:10%;bottom:8%}.room-detail{right:10%;bottom:8%}.room-finish{right:6%;top:8%}.feature-console{left:4%;top:35%;width:38%;height:30%}.feature-console small{font-size:6px}.journey-gallery{left:45%;right:4%;top:7%;bottom:20%}.journey-gallery figcaption{left:8px;top:8px;padding:5px 7px;font-size:7px}.journey-track{left:47%;right:5%;bottom:6%;gap:4px}.journey-track span{width:27px;height:27px;font-size:11px}.story-glass{left:16px;bottom:18px;width:calc(100% - 32px);padding:16px 18px}.story-glass h2{font-size:23px}.story-glass p{font-size:11px;padding-right:86px}.story-open{right:24px;bottom:32px;padding:11px 13px;font-size:8px}.story-progress{display:none}.scene-input,.scene-output{display:none}}
@media(prefers-reduced-motion:reduce){.story-stage[data-focus] .studio-room{transition:none;filter:none!important;opacity:.42}.story-stage[data-focus="composition"] .room-composition,.story-stage[data-focus="meaning"] .room-meaning,.story-stage[data-focus="detail"] .room-detail,.story-stage[data-focus="finish"] .room-finish{opacity:1}.feature-console,.journey-track,.journey-gallery,.journey-gallery figure,.room-image,.console-dial i{transition:none}.room-image{transform:none!important}.room-illustration *{animation:none!important}}

/* Keep the explanation in the centre of the blurred studio, and make the
   strength markers feel like compact instrument readouts rather than buttons. */
.story-glass{left:50%;top:142px;bottom:auto;transform:translateX(-50%)}
.journey-track span{width:34px;height:34px;border-radius:7px;font-size:13px}
.story-stage[data-focus="journey"] .journey-gallery{top:28%}
@media(max-width:800px){.story-glass{left:50%;top:112px;bottom:auto;transform:translateX(-50%);width:calc(100% - 32px)}.journey-track span{width:25px;height:25px;border-radius:5px;font-size:10px}.story-stage[data-focus="journey"] .journey-gallery{top:24%}}

/* Editorial layout: keep the diagram dominant and let the copy sit directly
   on the softened scene rather than inside another interface panel. */
.story-title{top:17px;left:42px;display:flex;align-items:baseline;gap:11px}
.story-title h1{order:1;margin:0;font-size:clamp(22px,2vw,31px);line-height:1}
.story-title span{order:2;font-size:8px;letter-spacing:.18em}
.studio-scene{inset:70px 2.5% 18px}
.story-glass{top:126px;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:0;text-align:center}
.story-glass:before{display:none}
.story-glass h2{font-size:clamp(24px,2.35vw,34px);text-shadow:0 3px 22px rgba(0,0,0,.9)}
.story-glass p{color:var(--accent);text-shadow:0 3px 18px rgba(0,0,0,.92)}
.journey-track{left:34%;right:5%;bottom:3%}
.journey-track:before{left:0;right:0}
.journey-track span{width:28px;height:28px;border-radius:4px;font-size:11px}
.journey-gallery{left:47%;right:4%;top:9%;bottom:13%;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),top .6s ease}
.journey-gallery figure{display:flex;flex-direction:column;align-items:center;justify-content:center}
.journey-gallery img{width:min(78%,380px);height:auto;aspect-ratio:1;object-fit:contain}
.journey-gallery figcaption{position:static;order:-1;margin:0 0 10px;padding:7px 10px}
.story-stage[data-focus="journey"] .journey-gallery{top:9%}
.story-stage[data-focus="journey"] .story-glass{left:31%;top:42%;width:min(220px,18%);transform:none;text-align:left}
.story-stage[data-focus="journey"] .story-glass h2{font-size:20px;line-height:1.06}
.story-stage[data-focus="journey"] .story-glass p{font-size:11px;line-height:1.45}
@media(max-width:800px){.story-title{left:20px;top:18px;gap:7px}.story-title h1{font-size:20px}.story-title span{font-size:6px}.studio-scene{inset:62px 10px 12px}.story-glass{top:104px}.journey-track{left:45%;right:4%;bottom:3%}.journey-track span{width:23px;height:23px;font-size:9px}.journey-gallery{left:44%;right:3%;top:12%;bottom:14%}.journey-gallery img{width:min(87%,290px)}.story-stage[data-focus="journey"] .journey-gallery{top:12%}.story-stage[data-focus="journey"] .story-glass{left:5%;top:43%;width:34%;transform:none}.story-stage[data-focus="journey"] .story-glass h2{font-size:16px}.story-stage[data-focus="journey"] .story-glass p{font-size:9px;padding:0}}

/* Steering mode becomes its own calm instrument view. */
.story-stage[data-focus="dial"] .studio-room,.story-stage[data-focus="dial"] .studio-pipe{visibility:hidden}
.story-stage[data-focus="dial"] .scene-input,.story-stage[data-focus="dial"] .scene-output{opacity:.22}
.story-stage[data-focus="dial"] .feature-console,.story-stage[data-focus="journey"] .feature-console{transform:translateX(-8%) scale(1.05)}
.story-stage[data-focus="dial"] .story-glass,.story-stage[data-focus="journey"] .story-glass{left:8%;top:142px;width:25%;transform:none;text-align:center}
.story-stage[data-focus="dial"] .story-glass h2,.story-stage[data-focus="journey"] .story-glass h2{font-size:20px;line-height:1.06}
.story-stage[data-focus="dial"] .story-glass p,.story-stage[data-focus="journey"] .story-glass p{font-size:11px;line-height:1.45}
.story-stage[data-focus="journey"] .journey-track{left:58%;right:12%;bottom:7%}
.story-handoff{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;pointer-events:none;background:rgba(9,10,10,.28);backdrop-filter:blur(15px) saturate(110%);transition:opacity .7s ease}.story-handoff span{font-size:9px;letter-spacing:.2em;color:var(--tour-gold)}.story-handoff a{color:#15110e;background:#f0ece3;border-radius:999px;padding:17px 23px;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.13em;box-shadow:0 15px 50px rgba(0,0,0,.32)}.story-handoff a i{font-style:normal;margin-left:8px}.story-stage[data-focus="handoff"] .story-handoff{opacity:1;pointer-events:auto}.story-stage[data-focus="handoff"] .story-glass{opacity:0}.story-stage[data-focus="handoff"] .studio-scene{filter:blur(5px);transform:scale(1.02);transition:filter .7s ease,transform .7s ease}
@media(max-width:800px){.story-stage[data-focus="dial"] .story-glass,.story-stage[data-focus="journey"] .story-glass{left:4%;top:117px;width:38%}.story-stage[data-focus="dial"] .story-glass h2,.story-stage[data-focus="journey"] .story-glass h2{font-size:15px}.story-stage[data-focus="dial"] .story-glass p,.story-stage[data-focus="journey"] .story-glass p{font-size:9px}.story-stage[data-focus="dial"] .feature-console,.story-stage[data-focus="journey"] .feature-console{transform:scale(.95)}.story-stage[data-focus="journey"] .journey-track{left:51%;right:7%;bottom:8%}}

/* Keep the evidence and its controls as one centred composition. */
.story-stage[data-focus="dial"] .feature-console,.story-stage[data-focus="journey"] .feature-console{left:18%}
.story-stage[data-focus="dial"] .story-glass,.story-stage[data-focus="journey"] .story-glass{left:18%}
.story-stage[data-focus="journey"] .journey-gallery{top:0;bottom:0}
.story-stage[data-focus="journey"] .journey-gallery figure{justify-content:flex-start;padding-top:0;box-sizing:border-box}
.story-stage[data-focus="journey"] .journey-gallery img{width:min(92%,440px)}
.story-stage[data-focus="journey"] .journey-track{left:53%;right:10%;bottom:3.5%;height:36px}
.story-stage[data-focus="journey"] .journey-track:before{top:50%;transform:translateY(-50%)}
.story-stage[data-focus="journey"] .journey-track span{width:36px;height:36px;border-radius:5px;font-size:12px}
@media(max-width:800px){.story-stage[data-focus="dial"] .feature-console,.story-stage[data-focus="journey"] .feature-console{left:6%}.story-stage[data-focus="dial"] .story-glass,.story-stage[data-focus="journey"] .story-glass{left:6%}.story-stage[data-focus="journey"] .journey-gallery img{width:min(94%,330px)}.story-stage[data-focus="journey"] .journey-track{left:48%;right:5%;bottom:4%;height:28px}.story-stage[data-focus="journey"] .journey-track span{width:28px;height:28px;font-size:10px}}

/* First beat: the mechanism before the metaphor. */
.unet-intro{position:absolute;inset:0;z-index:6;display:grid;place-items:center;opacity:0;visibility:hidden;transform:scale(.96);pointer-events:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s linear .7s}
.unet-intro>img{width:min(86%,860px);height:auto;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.34);filter:saturate(.8) contrast(1.05);opacity:.92}.unet-intro>svg{display:none}
.unet-intro-label{display:none}.story-stage[data-focus="intro"] .unet-intro>img{transform:translateY(38px)}.story-stage[data-focus="intro"] .story-glass{top:12%;width:min(560px,48%)}
.welcome-intro{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:20px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s linear .55s}.welcome-intro div{display:flex;align-items:center;gap:16px}.welcome-intro span{padding:12px 16px;border:1px solid rgba(236,232,222,.36);border-radius:7px;background:rgba(255,255,255,.04);font-size:10px;letter-spacing:.13em;text-transform:uppercase}.welcome-intro i{font:31px Georgia,serif;color:var(--tour-gold)}.welcome-intro b{font:400 clamp(28px,3.3vw,48px)/1.05 Georgia,serif;max-width:620px;text-align:center}.welcome-intro em{font-size:10px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--tour-gold)}.story-stage[data-focus="welcome"] .welcome-intro{opacity:1;visibility:visible;transform:none;transition-delay:0s}.story-stage[data-focus="welcome"] .studio-room,.story-stage[data-focus="welcome"] .studio-pipe{opacity:0;visibility:hidden}.story-stage[data-focus="welcome"] .story-glass{top:64%;width:min(580px,50%)}
.unet-intro svg{width:min(88%,1040px);height:auto;overflow:visible}.unet-intro .unet-cells rect{fill:rgba(16,20,21,.78);stroke:rgba(236,232,222,.72);stroke-width:2;filter:drop-shadow(0 9px 15px rgba(0,0,0,.25))}.unet-intro .unet-cells rect:nth-child(3),.unet-intro .unet-cells rect:nth-child(4){fill:rgba(147,188,199,.17);stroke:#b9e4ee}.unet-intro .unet-arrows path{fill:none;stroke:rgba(236,232,222,.66);stroke-width:3;stroke-linecap:round}.unet-intro .unet-words text{fill:#d9d4c9;font:18px Georgia,serif;letter-spacing:.03em;text-anchor:middle}.unet-intro-label{position:absolute;top:19%;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--tour-gold)}.unet-intro-label.input{left:8%}.unet-intro-label.output{right:8%;color:var(--tour-blue)}
.story-stage[data-focus="intro"] .unet-intro{opacity:1;visibility:visible;transform:none;transition-delay:0s}.story-stage[data-focus="intro"] .studio-room,.story-stage[data-focus="intro"] .studio-pipe{opacity:0;visibility:hidden}.story-stage[data-focus="intro"] .story-glass{top:69%;width:min(490px,42%)}

/* Evidence view: a single optical centre, with the mechanical control level
   with the image rather than dropped beneath it. */
.story-stage[data-focus="dial"] .feature-console,.story-stage[data-focus="journey"] .feature-console{left:20%;top:23%;width:22%;height:38%;transform:translateX(-8%) scale(1.05);gap:14px}
.story-stage[data-focus="dial"] .story-glass,.story-stage[data-focus="journey"] .story-glass{left:20%;top:14%;width:22%;transform:none}
.story-stage[data-focus="journey"] .journey-gallery{left:48%;right:7%;top:5%;bottom:18%}
.story-stage[data-focus="journey"] .journey-gallery figure{justify-content:center;padding:0}
.story-stage[data-focus="journey"] .journey-gallery figure.is-active{transform:translateY(-58px)}
.story-stage[data-focus="journey"] .journey-gallery img{width:min(92%,440px)}
.story-stage[data-focus="journey"] .journey-track{left:52%;right:11%;bottom:9%;height:36px}
.feature-console{border-radius:8px;border-color:rgba(211,180,130,.65);background:linear-gradient(145deg,rgba(100,83,62,.46),rgba(17,18,17,.9));box-shadow:0 24px 65px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.16),inset 0 -1px rgba(0,0,0,.62)}
.feature-console>span,.feature-console small{display:block}.console-dial{margin:0}
.story-stage[data-focus="journey"] .journey-track span.is-past{background:#292a29;border-color:rgba(230,227,218,.32);color:#aaa9a3;box-shadow:none}
.feature-console>span,.feature-console small{color:#d8b07a}.console-dial{width:108px;height:108px;margin:12px;background:conic-gradient(from -90deg,#d8a86f 0deg var(--dial-fill,0deg),#4a4034 var(--dial-fill,0deg) 360deg);box-shadow:0 0 0 3px #171613,0 0 0 5px rgba(220,193,150,.45),0 12px 28px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.14)}
.console-dial:before{inset:7px;background:radial-gradient(circle at 36% 30%,#73624f,#2b2924 46%,#121211 70%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.13)}.console-dial:after{content:"";position:absolute;inset:-10px;border:2px dotted rgba(218,185,134,.7);border-radius:50%;opacity:.75}.console-dial i{width:4px;height:39px;background:#eee4d2;border-radius:1px;box-shadow:0 0 0 1px #17130f,0 1px 6px rgba(0,0,0,.65)}.console-dial b{font-size:25px;color:var(--accent);text-shadow:0 1px 5px #000}
@media(max-width:800px){.story-stage[data-focus="welcome"] .story-glass{top:67%;width:78%}.welcome-intro b{font-size:28px;max-width:80%}.welcome-intro span{font-size:8px;padding:9px}.story-stage[data-focus="intro"] .story-glass{top:64%;width:72%}.story-stage[data-focus="dial"] .feature-console,.story-stage[data-focus="journey"] .feature-console{left:7%;top:25%;width:36%;height:39%;transform:scale(.9);gap:8px}.story-stage[data-focus="dial"] .story-glass,.story-stage[data-focus="journey"] .story-glass{left:7%;top:15%;width:36%}.story-stage[data-focus="journey"] .journey-gallery{left:46%;right:3%;top:7%;bottom:20%}.story-stage[data-focus="journey"] .journey-track{left:48%;right:5%;bottom:10%}.console-dial{width:82px;height:82px}.console-dial i{height:30px}.unet-intro-label{display:none}}

/* Explorer image viewer: clear title separation and a generous drag target. */
.image-frame{background:transparent;border:0;box-shadow:none}.image-frame img{border:0;outline:0}.hud-drag-handle{top:3px;width:min(51%,210px);min-width:168px;height:18px}.hud-drag-handle span{width:70%;height:3px}.hud-image-title{margin:7px 58px 15px}

/* Keep the plain-language U-Net explanation above the reference diagram. */
.story-stage[data-focus="intro"] .story-glass{top:12%;width:min(560px,48%)}

/* Opening screen: the diagram is the focus, now that the U-Net title is gone. */
.tour-nav {
  width: 100%;
  max-width: none;
  padding-inline: 26px;
}

.tour-mark {
  margin: 0;
  font-size: 16.5px;
  line-height: 1;
  letter-spacing: .16em;
  white-space: nowrap;
}

.tour-explorer-link {
  color: var(--accent) !important;
  border: 1px solid rgba(236, 232, 222, .20);
  background-color: #30302f;
  background-image:
    linear-gradient(135deg, rgba(76, 76, 74, .92), rgba(39, 39, 38, .95)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 9px 26px rgba(0, 0, 0, .18);
}

.tour-explorer-link:hover {
  background-color: #3a3a38;
  background-image:
    linear-gradient(135deg, rgba(91, 91, 88, .95), rgba(49, 49, 47, .97)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px);
}

.story-stage > .studio-scene { inset: 14px 2.5% 14px; }

@media (max-width: 800px) {
  .tour-nav { padding-inline: 16px; }
  .tour-mark { font-size: 12px; letter-spacing: .12em; }
  .story-stage > .studio-scene { inset: 12px 10px; }
}

/* Landing navigation: distribute the main label and actions more evenly. */
.tour-mark { margin-left: 20px; }
.tour-nav-actions { margin-right: 46px; }
.tour-explorer-link { padding-block: 9px; }

/* The pointer terminates exactly at the leading edge of the colored dial arc. */
.console-dial i {
  /* The conic arc begins from the left (-90°). Keep the needle at its
     advancing edge, so both communicate the identical strength. */
  transform: translate(-50%, -100%) rotate(calc(var(--dial-angle, 0deg) - 90deg));
}

/* Steps already visited fill the journey connector, rather than leaving it a
   decorative static gradient. */
.journey-track:before {
  background: rgba(236, 232, 222, .22);
}
.journey-track:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--journey-track-progress, 0%);
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #81c3d8, #d8a86f);
  box-shadow: 0 0 9px rgba(216, 168, 111, .42);
  transition: width .58s cubic-bezier(.2, .8, .2, 1);
}

/* Keep the evidence card compact and below its explanation on steps 8–13. */
.story-stage[data-focus="dial"] .feature-console,
.story-stage[data-focus="journey"] .feature-console {
  top: 27%;
  width: 20%;
  height: 34%;
}

@media (max-width: 800px) {
  .tour-mark { margin-left: 0; }
  .tour-nav-actions { margin-right: 0; }
  .tour-explorer-link { padding-block: 8px; }
  .story-stage[data-focus="dial"] .feature-console,
  .story-stage[data-focus="journey"] .feature-console {
    top: 27%;
    width: 36%;
    height: 35%;
  }
}

/* Opening: let the approved explanation lead without competing labels. */
.story-scroll-cue {
  position: relative;
  display: none;
  margin-top: 42px;
  color: var(--tour-gold);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-scroll-cue::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 17px auto 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.story-stage[data-focus="welcome"] .story-scroll-cue { display: block; }
.story-stage[data-focus="welcome"] .story-glass h2 { font-size: clamp(30px, 2.8vw, 42px); }
.story-stage[data-focus="welcome"] .story-glass p { font-size: 14px; line-height: 1.55; }
.story-stage[data-focus="welcome"] .story-copy--detail {
  margin-top: 28px;
}
.story-copy--detail {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease-in-out, visibility 0s linear .9s;
}
.story-copy--detail.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease-in-out, visibility 0s;
}
/* Clear the previous paragraph as soon as a new slide begins. */
.story-stage:not([data-focus="welcome"]) .story-copy--detail {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* Reserve the full opening reading area from the outset. The second
   paragraph can appear without shifting the heading, first paragraph, or cue. */
.story-stage[data-focus="welcome"] .story-glass {
  height: 430px;
}
.story-stage[data-focus="welcome"] .story-scroll-cue {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 26px;
  margin-top: 0;
  text-align: center;
}
@media (max-width: 800px) {
  .story-stage[data-focus="welcome"] .story-glass {
    height: 440px;
  }
}
.story-glass p {
  padding: 0;
  font-size: 16px !important;
  line-height: 1.45 !important;
}
/* Keep the studio explanation in the open space between the four rooms. */
.story-stage:is([data-focus="overview"], [data-focus="composition"], [data-focus="meaning"], [data-focus="detail"], [data-focus="finish"]) .story-glass {
  top: 50%;
  width: min(620px, 72%);
  transform: translate(-50%, -50%);
}
.story-glass h2 { text-wrap: balance; }
.story-glass p { text-wrap: pretty; }
.story-glass h2 {
  font-family: Jura, ui-sans-serif, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}
.story-stage[data-focus="welcome"] .story-glass {
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 800px) {
  .story-glass p { font-size: 14px !important; }
}

/* The expanded U-Net explanation needs its own reading column. */
.story-stage[data-focus="intro"] .story-glass {
  top: 8%;
  width: min(720px, 68%);
}
.story-stage[data-focus="intro"] .unet-intro > img {
  transform: translateY(92px);
}
@media (max-width: 800px) {
  .story-stage[data-focus="intro"] .story-glass { top: 7%; width: 82%; }
  .story-stage[data-focus="intro"] .unet-intro > img { transform: translateY(95px); }
}

/* Steering and journey views: separate the reading panel from the control. */
.story-stage[data-focus="dial"] .story-glass,
.story-stage[data-focus="journey"] .story-glass {
  left: 7%;
  top: 23%;
  width: 23%;
  transform: none;
  text-align: left;
}
.story-stage[data-focus="dial"] .feature-console,
.story-stage[data-focus="journey"] .feature-console {
  left: 30%;
  top: 25%;
  width: 17%;
  height: 27%;
  gap: 4px;
}
.story-stage[data-focus="dial"] .console-dial,
.story-stage[data-focus="journey"] .console-dial {
  width: 72px;
  height: 72px;
  margin: 7px;
}
.story-stage[data-focus="dial"] .console-dial i,
.story-stage[data-focus="journey"] .console-dial i { height: 26px; }
.story-stage[data-focus="dial"] .console-dial b,
.story-stage[data-focus="journey"] .console-dial b { font-size: 21px; }

/* Balance the three journey columns against the diagram edges. */
.story-stage[data-focus="dial"] .feature-console,
.story-stage[data-focus="journey"] .feature-console {
  left: 37%;
  gap: 8px;
}
.story-stage[data-focus="journey"] .journey-gallery {
  left: 51%;
  right: 3%;
}
.story-stage[data-focus="journey"] .journey-gallery img { width: min(88%, 420px); }
.story-stage[data-focus="journey"] .journey-track {
  left: 56%;
  right: 4%;
}

/* Explorer return action balances the appearance controls on the opposite side. */
.back-to-tour {
  left: 35px;
  padding-inline: 22px;
  color: var(--muted);
  background: var(--button);
}
@media (max-width: 800px) {
  .back-to-tour span { display: inline; }
}

/* Final narrow-layout polish: preserve the image focus without crowding the rail. */
.process-guide { display: none; }
.story-stage[data-focus="intro"] .process-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
  color: var(--tour-gold);
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1.5;
}
.process-guide li + li::before { content: '→'; margin-right: 10px; opacity: .6; }
.process-guide li:nth-child(2)::before { content: '+'; }
.studio-room h2 { font-family: Jura, ui-sans-serif, sans-serif; }
.story-handoff { visibility: hidden; }
.story-stage[data-focus="handoff"] .story-handoff { visibility: visible; }
.story-handoff p { max-width: 420px; margin: 0 24px 8px; text-align: center; color: var(--tour-muted); line-height: 1.6; }
.story-handoff a:focus-visible, .tour-explorer-link:focus-visible { outline: 2px solid var(--tour-gold); outline-offset: 5px; }
/* Saved frames crossfade at one fixed position for easy comparison. */
.story-stage[data-focus="journey"] .journey-gallery figure {
  transform: translateY(-58px);
  transition: opacity .62s ease;
}
@media (max-width: 980px) {
  .image-hud { width: min(400px, calc(100% - 32px)); }
}

/* Tour controls and explorer orientation. */
.story-controls { position: absolute; z-index: 21; right: 32px; bottom: 25px; display: flex; gap: 8px; }
.story-controls button { min-width: 82px; padding: 9px 14px; border: 1px solid rgba(236,232,222,.36); border-radius: 999px; color: var(--accent); background: rgba(24,25,24,.82); font: 700 12px Jura, sans-serif; cursor: pointer; }
.story-controls button:disabled { opacity: .35; cursor: default; }
.story-stage[data-focus="handoff"] .story-controls { display: none; }
:is(button, a, summary, [role="button"]):focus-visible { outline: 2px solid #f0c08b; outline-offset: 3px; }
.explorer-intro { position: absolute; z-index: 12; top: 66px; left: 18px; width: min(275px, 30%); padding: 16px 36px 16px 16px; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--text); background: var(--glass); box-shadow: 0 12px 30px var(--shadow); font-size: 12px; line-height: 1.45; }
.explorer-intro p { margin: 0 0 8px; }
.explorer-intro p:last-child { margin-bottom: 0; }
.explorer-intro #explorer-intro-close { position: absolute; top: 6px; right: 7px; border: 0; color: var(--text); background: transparent; font-size: 23px; cursor: pointer; }
.explorer-intro-open { position: absolute; z-index: 12; left: 18px; top: 66px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); background: var(--button); cursor: pointer; }
.explorer-intro[hidden], .explorer-intro-open[hidden] { display: none; }

/* The image and its five markers share one visual column. */
.story-stage[data-focus="journey"] .journey-gallery { bottom: 18%; }
.story-stage[data-focus="journey"] .journey-track { left: 53%; right: 8%; bottom: 8%; }

@media (max-width: 980px) {
  .story-stage[data-focus="journey"] { display: flex; flex-direction: column; align-items: stretch; overflow-y: auto; }
  .story-stage[data-focus="journey"] .story-glass { position: relative; order: 0; flex: none; left: auto; top: auto; bottom: auto; width: min(700px, calc(100% - 32px)); max-height: none; margin: 14px auto 0; transform: none; padding: 16px 20px; text-align: left; }
  .story-stage[data-focus="journey"] .story-glass h2 { font-size: 24px; }
  .story-stage[data-focus="journey"] .story-glass p { font-size: 15px !important; line-height: 1.5 !important; }
  .story-stage[data-focus="journey"] > .studio-scene { position: relative; order: 1; flex: none; inset: auto; width: min(760px, calc(100% - 32px)); height: 500px; margin: 16px auto 85px; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(260px, 2fr); grid-template-rows: 1fr auto; gap: 10px; padding: 22px; }
  .story-stage[data-focus="journey"] .feature-console { position: relative; left: auto; top: auto; width: 100%; height: min(220px, 100%); align-self: center; transform: none; }
  .story-stage[data-focus="journey"] .journey-gallery { position: relative; left: auto; right: auto; top: auto; bottom: auto; grid-column: 2; grid-row: 1; width: 100%; height: 100%; }
  .story-stage[data-focus="journey"] .journey-gallery figure { inset: 0; transform: none; }
  .story-stage[data-focus="journey"] .journey-gallery figure.is-active { transform: none; }
  .story-stage[data-focus="journey"] .journey-gallery img { width: min(90%, 350px); max-height: 100%; object-fit: contain; }
  .story-stage[data-focus="journey"] .journey-track { position: relative; left: auto; right: auto; bottom: auto; grid-column: 2; grid-row: 2; width: 100%; margin: 0 auto; }
  .story-controls { right: 18px; bottom: 12px; }
  .story-stage[data-focus="journey"] .story-controls { position: sticky; order: 2; align-self: flex-end; bottom: 12px; margin: -57px 18px 12px auto; }
}
@media (max-width: 540px) {
  .story-stage[data-focus="journey"] > .studio-scene { height: 565px; grid-template-columns: 1fr; grid-template-rows: 105px minmax(0,1fr) 34px; padding: 12px; }
  .story-stage[data-focus="journey"] .feature-console { grid-column: 1; grid-row: 1; height: 105px; flex-direction: row; gap: 8px; }
  .story-stage[data-focus="journey"] .feature-console .console-dial { width: 62px; height: 62px; flex: none; }
  .story-stage[data-focus="journey"] .journey-gallery { grid-column: 1; grid-row: 2; }
  .story-stage[data-focus="journey"] .journey-gallery img { width: min(85%, 315px); }
  .story-stage[data-focus="journey"] .journey-track { grid-column: 1; grid-row: 3; }
  .explorer-intro { width: min(280px, calc(100% - 36px)); top: 96px; }
}
@media (max-height: 700px) {
  .story-glass { max-height: min(70vh, 430px); overflow-y: auto; }
  .story-stage[data-focus="welcome"] .story-glass { height: min(430px, 70vh); }
}
@media (prefers-reduced-motion: reduce) {
  .image-hud, .image-hud *, .story-controls button { transition: none !important; animation: none !important; }
}
@media (max-width: 540px) {
  .app-shell { padding-top: 94px; }
  .brand-tab { top: -87px; left: 0; width: 100%; max-width: none; height: 25px; justify-items: center; padding: 0; font-size: 11px; }
  .theme-switcher { top: -54px; right: 3px; width: 78px; }
  .theme-switcher summary, .theme-button { width: 100%; padding-inline: 8px; font-size: 10px; }
  .back-to-tour { top: -49px; left: 3px; padding-inline: 10px; }
  .image-hud { max-width: calc(100vw - 36px); }
  .tour-mark span { display: none; }
  .tour-nav { justify-content: space-between; }
  .lower-rail { width: 100%; min-width: 0; padding: 18px 12px 24px; }
  .feature-area, .compact-info { min-width: 0; width: 100%; }
  .feature-filters { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-filter { white-space: normal; padding-inline: 6px; }
  .compact-info { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; }
  .prompt-block #prompt { display: block; max-height: none; -webkit-line-clamp: unset; overflow: visible; font-size: 13px; line-height: 1.45; }
  #language-edge { overflow-wrap: anywhere; }
  .studio-room p { font-size: 11px; line-height: 1.25; }
  .story-stage:is([data-focus="overview"], [data-focus="composition"], [data-focus="meaning"], [data-focus="detail"], [data-focus="finish"]) .story-glass p { font-size: 14px !important; line-height: 1.45 !important; }
}
.story-stage[data-focus="welcome"] .story-glass p { font-size: clamp(14px, 1.6vw, 16px) !important; line-height: 1.5 !important; }

/* Evidence slides: equal outer/inter-column gaps and a fixed text/control stack. */
.story-stage:is([data-focus="dial"], [data-focus="journey"]) {
  --evidence-copy-width: clamp(240px, 28vw, 380px);
  --evidence-image-size: min(38vw, 480px, calc(100svh - 250px));
  --evidence-gap: calc((100% - var(--evidence-copy-width) - var(--evidence-image-size)) / 3);
  --evidence-top: max(28px, calc((100% - 570px) / 2));
  display: block;
  overflow-y: auto;
}
.story-stage:is([data-focus="dial"], [data-focus="journey"]) > .studio-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
.story-stage:is([data-focus="dial"], [data-focus="journey"]) .story-glass {
  position: absolute;
  left: var(--evidence-gap);
  top: calc(var(--evidence-top) + 20px);
  bottom: auto;
  width: var(--evidence-copy-width);
  height: 220px;
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  transform: none;
  text-align: left;
}
.story-stage:is([data-focus="dial"], [data-focus="journey"]) .feature-console {
  position: absolute;
  left: var(--evidence-gap);
  top: calc(var(--evidence-top) + 268px);
  width: var(--evidence-copy-width);
  height: 180px;
  transform: none;
  flex-direction: column;
  gap: 12px;
}
.story-stage:is([data-focus="dial"], [data-focus="journey"]) .console-dial {
  width: 72px;
  height: 72px;
  flex: none;
  margin: 7px;
}
.story-stage[data-focus="journey"] .journey-gallery {
  position: absolute;
  left: calc(var(--evidence-gap) * 2 + var(--evidence-copy-width));
  right: auto;
  top: var(--evidence-top);
  bottom: auto;
  width: var(--evidence-image-size);
  height: calc(var(--evidence-image-size) + 48px);
  transform: none;
}
.story-stage[data-focus="journey"] .journey-gallery figure,
.story-stage[data-focus="journey"] .journey-gallery figure.is-active {
  inset: 0;
  display: grid;
  grid-template-rows: 32px var(--evidence-image-size);
  gap: 16px;
  justify-items: center;
  justify-content: stretch;
  padding: 0;
  transform: none;
}
.story-stage[data-focus="journey"] .journey-gallery figcaption { grid-row: 1; margin: 0; }
.story-stage[data-focus="journey"] .journey-gallery img {
  grid-row: 2;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.story-stage[data-focus="journey"] .journey-track {
  position: absolute;
  left: calc(var(--evidence-gap) * 2 + var(--evidence-copy-width));
  right: auto;
  top: calc(var(--evidence-top) + var(--evidence-image-size) + 72px);
  bottom: auto;
  width: var(--evidence-image-size);
  height: 36px;
  margin: 0;
  transform: none;
}
.story-stage:is([data-focus="dial"], [data-focus="journey"]) .story-controls {
  position: absolute;
  top: auto;
  bottom: 16px;
  margin: 0;
}
@media (max-width: 699px) {
  .story-stage:is([data-focus="dial"], [data-focus="journey"]) {
    --evidence-copy-width: min(380px, calc(100% - 48px));
    --evidence-image-size: min(420px, calc(100vw - 48px));
    --evidence-gap: calc((100% - var(--evidence-copy-width)) / 2);
  }
  .story-stage:is([data-focus="dial"], [data-focus="journey"]) > .studio-scene { height: calc(650px + var(--evidence-image-size)); }
  .story-stage[data-focus="dial"] > .studio-scene { height: 580px; }
  .story-stage:is([data-focus="dial"], [data-focus="journey"]) .story-glass { top: 28px; height: 240px; max-height: 240px; }
  .story-stage:is([data-focus="dial"], [data-focus="journey"]) .feature-console { top: 300px; }
  .story-stage[data-focus="journey"] .journey-gallery { left: calc((100% - var(--evidence-image-size)) / 2); top: 512px; }
  .story-stage[data-focus="journey"] .journey-track { left: calc((100% - var(--evidence-image-size)) / 2); top: calc(584px + var(--evidence-image-size)); }
  .story-stage[data-focus="journey"] .story-controls { top: calc(630px + var(--evidence-image-size)); bottom: auto; }
  .story-stage[data-focus="dial"] .story-controls { top: 520px; bottom: auto; }
}

/* Explorer controls and temporary image preview. */
.back-to-tour {
  top: -43px; left: 25px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
}
.back-to-tour svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-switcher { width: 110px; }
.theme-switcher summary { justify-content: center; gap: 11px; padding: 0 10px; }
.theme-chevron { width: 7px; height: 7px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.theme-switcher[open] .theme-chevron { transform: translateY(2px) rotate(225deg); }
.theme-menu { position: absolute; top: 100%; right: 0; width: 100%; }
.top-control-row { top: 37px; display: flex; justify-content: center; }
.strength-display { display: grid; justify-items: center; gap: 3px; color: var(--accent); }
.strength-display > span { font: 700 8px/1 Jura, sans-serif; letter-spacing: .16em; }
.strength-dial { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); border-bottom-color: transparent; border-radius: 50%; background: color-mix(in srgb, var(--accent) 7%, var(--glass)); box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent); }
.strength-dial::before { content: ''; position: absolute; inset: 5px; border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%; }
.strength-dial i { position: absolute; left: 50%; top: 4px; width: 2px; height: 14px; border-radius: 2px; background: var(--accent); transform: translateX(-50%) rotate(-125deg); transform-origin: 50% 22px; transition: transform .35s ease; }
.strength-dial b { position: relative; z-index: 1; font: 800 17px/1 Jura, sans-serif; }
.mode-control { top: 14px; right: 16px; bottom: auto; width: 48px; height: 48px; }
.mode-toggle { width: 100%; height: 100%; padding: 0; border-radius: 50%; color: var(--text); font: 750 12px/1 Jura, sans-serif; letter-spacing: -.03em; text-transform: none; }
.mode-toggle.active { font-size: 10px; letter-spacing: -.05em; }
.hud-meta { padding: 10px 4px 0; }
.hud-step-controls { display: grid; grid-template-columns: 54px minmax(64px, 1fr) 54px; align-items: center; justify-content: center; gap: 8px; max-width: 240px; margin: 0 auto; }
.hud-step-controls .arrow { width: 54px; height: 31px; font-size: 25px; }
.hud-step-controls .journey-step { font-size: 12px; letter-spacing: .1em; }
.hud-meta #hud-feature { margin-top: 8px; font-size: 11px; }
.hud-meta .strength-display { position: relative; width: 56px; margin: 10px auto 0; cursor: help; }
.hud-meta .strength-dial { width: 52px; height: 52px; }
.hud-meta .strength-dial b { max-width: 42px; font-size: 13px; letter-spacing: -.045em; white-space: nowrap; }
.strength-tooltip { position: absolute; z-index: 3; top: calc(100% + 5px); left: 50%; padding: 5px 8px; transform: translate(-50%, -3px); border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--panel-solid); font: 650 9px/1 Jura, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s; }
.strength-display:hover .strength-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.image-hud.minimized.is-dragged { transform: translateY(16px) scale(.96); }
@media (max-width: 980px) {
  .mode-control { top: 12px; right: 12px; width: 43px; height: 43px; }
}
@media (max-width: 540px) {
  .back-to-tour { top: -53px; left: 3px; width: 30px; height: 30px; padding: 0; }
  .theme-switcher { width: 83px; }
  .theme-switcher summary { gap: 5px; }
  .top-control-row { top: 36px; }
  .hud-meta .strength-dial { width: 48px; height: 48px; }
  .hud-meta .strength-dial i { height: 12px; transform-origin: 50% 19px; }
  .hud-meta .strength-dial b { font-size: 12px; }
  .mode-control { top: 10px; right: 9px; width: 39px; height: 39px; }
  .mode-toggle { font-size: 10px; }
}

/* One centered journey row in the widened notch; view controls sit together. */
.brand-tab { top: -43px; left: 70px; right: auto; width: auto; min-width: 0; max-width: calc(100% - 290px); height: 34px; padding: 0; place-items: center start; transform: none; text-align: left; font-size: 13px; letter-spacing: .12em; }
.top-controls { width: 310px; max-width: calc(100% - 30px); height: 80px; }
.notch-action-row { top: 24px; left: 50%; width: max-content; max-width: 100%; display: grid; grid-template-columns: 62px 48px 76px 48px; align-items: center; justify-content: center; gap: 8px; transform: translateX(-50%); }
.notch-action-row > * { grid-column: auto !important; }
.notch-action-row .next-path-action { width: 62px; height: 34px; padding: 0; border-radius: 9px; font-size: 10px; letter-spacing: .07em; }
.notch-action-row .arrow { width: 48px; height: 34px; padding-bottom: 3px; border-radius: 9px; font-size: 27px; }
.notch-action-row .journey-step { width: 76px; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
.mode-control { top: 13px; right: 15px; bottom: auto; width: max-content; height: 42px; display: flex; align-items: center; gap: 8px; }
.mode-control .notch-action, .mode-control .mode-toggle { flex: none; width: 42px; height: 42px; min-width: 0; padding: 0; border-radius: 50%; }
.mode-control .notch-action { font-size: 0; }
.mode-control .icon-action svg { width: 18px; height: 18px; }
.mode-control .mode-toggle { font-size: 11px; }
.mode-control .mode-toggle.active { font-size: 9px; }
@media (max-width: 980px) {
  .brand-tab { left: 68px; max-width: calc(100% - 260px); min-width: 0; }
  .top-controls { width: 290px; }
  .mode-control { top: 12px; right: 12px; }
}
@media (max-width: 620px) {
  .brand-subtitle { display: none; }
  .brand-tab { top: -43px; left: 68px; width: auto; max-width: calc(100% - 170px); min-width: 0; font-size: 10px; }
  .top-controls { width: 260px; max-width: calc(100% - 22px); }
  .notch-action-row { top: 22px; grid-template-columns: 52px 42px 56px 42px; gap: 7px; }
  .notch-action-row .next-path-action { width: 52px; height: 31px; font-size: 8px; }
  .notch-action-row .arrow { width: 42px; height: 31px; font-size: 23px; }
  .notch-action-row .journey-step { width: 56px; font-size: 11px; }
  .mode-control { top: 82px; right: 9px; width: max-content; height: 34px; gap: 6px; }
  .mode-control .notch-action, .mode-control .mode-toggle { width: 34px; height: 34px; }
  .mode-control .icon-action svg { width: 15px; height: 15px; }
  .mode-control .mode-toggle { font-size: 9px; }
  .mode-control .mode-toggle.active { font-size: 8px; }
  .explorer-intro, .explorer-intro-open { top: 120px; }
}
@media (max-width: 540px) {
  .brand-tab { top: -53px; left: 43px; height: 30px; max-width: calc(100% - 145px); font-size: 10px; }
}

/* Restore the compact four-by-two feature group inside the notch. */
.top-controls { width: min(520px, calc(100% - 160px)); height: 80px; }
.top-controls .feature-filters {
  position: absolute; top: 8px; left: 50%; width: max-content; max-width: none;
  display: grid; grid-template-columns: repeat(4, max-content); gap: 8px;
  justify-content: center;
  transform: translateX(-50%);
}
.top-controls .feature-filter {
  min-width: 0; height: auto; padding: 6px 15px; display: block;
  font-size: 14px; line-height: 1.15; text-align: center; white-space: nowrap;
}
.hud-step-controls {
  position: relative; width: 100%; max-width: none; height: 42px;
  display: flex; align-items: flex-start; justify-content: center; gap: 0;
}
.hud-step-nav {
  display: grid; grid-template-columns: 69px 44px 69px;
  align-items: center; justify-content: center; gap: 7px;
}
.hud-step-controls .next-path-action {
  position: absolute; top: 8px; left: calc(50% - 130px);
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  font-size: 9px; letter-spacing: .02em;
}
.hud-step-controls .arrow { width: 69px; height: 34px; border-radius: 9px; }
.hud-step-controls .journey-step { width: 44px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud-step-controls .journey-step.changed { animation: none; }
.theme-switcher { top: -43px; margin-top: 0; }
.theme-switcher summary { height: 34px; }
.brand-tab { left: 84px; }
.mode-control { right: 34px; }
@media (max-width: 1300px) {
  .mode-control { top: 94px; }
}
@media (max-width: 980px) {
  .top-controls { width: min(480px, calc(100% - 120px)); }
  .top-controls .feature-filters { top: 13px; gap: 6px; }
  .top-controls .feature-filter { padding: 5px 9px; font-size: 12px; }
  .brand-tab { left: 82px; }
  .theme-switcher { top: -43px; right: calc(52px + var(--viewport-gutter) * var(--ui-inverse-scale)); }
  .mode-control { top: 94px; right: 46px; }
}
@media (max-width: 620px) {
  .top-controls { width: calc(100% - 90px); }
  .top-controls .feature-filters { top: 9px; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 6px; }
  .top-controls .feature-filter { height: 25px; padding: 3px; display: grid; place-items: center; font-size: 9px; line-height: 1.05; white-space: normal; }
  .mode-control { top: 82px; right: 27px; }
}
@media (max-width: 540px) {
  .brand-tab { left: 53px; }
  .theme-switcher { top: -53px; right: 36px; }
  .theme-switcher summary { height: 30px; }
  .top-controls .feature-filter { font-size: 9px; }
}
/* Keep the viewer controls legible in a slimmer band above the image. */
.image-hud { padding-top: 34px; }
.hud-drag-handle {
  top: 8px; width: min(196px, calc(100% - 150px)); min-width: 0; height: 18px;
  border: 0; border-radius: 999px; background: rgba(0, 0, 0, .44);
}
.hud-drag-handle span { width: 70%; height: 2px; }
.hud-expand, .hud-minimize {
  top: 5px; width: 24px; height: 24px;
  border: 0; border-radius: 0; background: transparent;
}
.hud-expand:hover, .hud-minimize:hover { background: transparent; }
.map-key.collapsed { overflow: visible; }
.map-key.collapsed {
  width: 44px; height: 44px; min-height: 44px; max-height: 44px; max-width: none;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; backdrop-filter: none; cursor: default;
  transition: none;
}
body.explorer-active .map-key.collapsed:hover { border: 0; box-shadow: none; }
.map-key.collapsed .map-key-head { width: 100%; height: 100%; display: grid; place-items: center; }
.map-key.collapsed .map-key-head .section-label { display: none; }
.map-key.collapsed #map-key-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--button); font: 750 19px/1 Jura, sans-serif;
}
.map-key:not(.collapsed) { overflow-x: hidden; overflow-y: auto; }
.map-key:not(.collapsed) .key-grid { max-height: none; overflow: visible; }
.map-key:not(.collapsed) #map-key-toggle { font: 700 20px/1 Jura, sans-serif; }
/* Anchor the map key to the right edge of the diagram. */
.map-key { left: auto; right: 7px; border-radius: 28px 0 var(--parallel-corner-radius) 28px; }
.map-key.collapsed { border-radius: 17px 0 var(--parallel-corner-radius) 17px; }
body.explorer-active .map-key.collapsed { border-radius: 50%; }
/* Keep the IMAGE tab directly below the lower-left viewer home. */
@media (min-width: 981px) {
  .explorer-shell {
    --hud-home-left: 7%;
    --hud-home-width: clamp(437.5px, 28.125vw, 575px);
  }
  .image-hud { width: var(--hud-home-width); }
  .image-hud:not(.is-dragged) {
    left: var(--hud-home-left); right: auto; top: auto; bottom: -96px;
    transform: none;
  }
  .image-hud.minimized:not(.is-dragged) {
    transform: translateY(16px) scale(.96);
  }
  .image-hud-tab {
    left: calc(var(--hud-home-left) + clamp(218.75px, 14.0625vw, 287.5px));
  }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .explorer-shell { --hud-home-left: 1%; }
}
@media (min-width: 981px) and (max-width: 1000px) {
  .explorer-shell { --hud-home-width: 420px; }
  .image-hud-tab { left: calc(var(--hud-home-left) + 210px); }
}
/* The feature readout now anchors the center of the lower rail. */
.strength-dock {
  grid-column: 2; display: grid; justify-items: center; align-content: start;
  gap: 5px; width: 100%; margin-top: -8px; color: var(--accent);
}
.strength-dock[hidden] { display: none; }
.strength-dock #hud-feature {
  max-width: 100%; margin: 0; color: var(--accent);
  font: 650 12px/1.2 Jura, sans-serif; letter-spacing: .04em; text-align: center;
}
.strength-dock #hud-feature strong { color: var(--text); font-weight: 750; }
.strength-dock .strength-display { position: relative; width: 68px; cursor: help; }
.strength-dock .strength-dial { width: 68px; height: 68px; }
.strength-dock .strength-dial::before { inset: 6px; }
.strength-dock .strength-dial i { top: 5px; height: 17px; transform-origin: 50% 29px; }
.strength-dock .strength-dial b { max-width: 56px; font-size: 15px; letter-spacing: -.04em; white-space: nowrap; }
.image-hud { padding-bottom: 18px; }
.image-hud .hud-meta { padding: 18px 0 0; }
.hud-step-controls {
  height: 40px; display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: center;
}
.hud-step-nav { grid-column: 2; grid-row: 1; align-self: center; }
.hud-step-controls .next-path-action {
  position: relative; grid-column: 1; grid-row: 1; justify-self: center;
  top: 0; left: -7.5px; width: 40px; height: 40px; border-width: 1.5px;
  border-radius: 50%; font-size: 10px;
}
@media (max-width: 350px) {
  .image-hud { width: calc(100% - 10px); max-width: calc(100vw - 20px); }
}
@media (max-width: 980px) {
  .strength-dock { grid-column: 1; margin-top: 0; }
  .lower-rail { margin-top: clamp(330px, calc(100vw - 45px), 430px); }
}
.hud-meta .strength-display { cursor: default; }
.strength-display > .strength-tooltip {
  top: 50%; left: calc(100% + 8px); min-width: 94px; padding: 6px 8px;
  display: grid; gap: 2px; transform: translateY(-50%);
  font: 700 10px/1.15 Jura, sans-serif; letter-spacing: .08em;
  text-align: center; white-space: normal;
}
.strength-display:hover .strength-tooltip { transform: translateY(-50%); }
/* Educational extension: room controls and the measured journey landscape. */
.sae-strip { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease, visibility .5s; }
.story-stage[data-focus="overview"] .studio-room { filter: blur(8px) saturate(.5) !important; opacity: .3; }
/* Preserve the studio anchors; only the room scale changes on this step. */
.story-stage[data-focus="sae"] .studio-room { overflow: visible; filter: none !important; opacity: 1 !important; transform: scale(.82) !important; transition: filter .4s ease, opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.story-stage[data-focus="sae"] .studio-room .room-image { border-radius: 18px; opacity: .94; filter: saturate(.92) contrast(1.07) brightness(.98); }
.story-stage[data-focus="sae"] .studio-room:after { border-radius: 18px; }
.story-stage[data-focus="sae"] .story-glass { left: 50%; top: 50%; bottom: auto; width: min(560px, 48%); transform: translate(-50%, -50%); max-height: none; padding: 12px 18px; }
.story-stage[data-focus="sae"] .story-glass h2 { font-size: 24px; }
.story-stage[data-focus="sae"] .story-glass p { font-size: 14px !important; line-height: 1.45 !important; }
.sae-strip { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; height: 62px; padding: 8px; border: 1px solid #8f785c; border-radius: 9px; background: linear-gradient(#302c25,#151614); color: #d9c3a7; }
.story-stage[data-focus="sae"] .sae-strip { visibility: visible; opacity: 1; transform: none; transition-duration: .25s; transition-delay: 0s; }
.sae-strip span { display: block; font-size: 8px; letter-spacing: .1em; margin-bottom: 8px; }
.sae-strip div { display: flex; justify-content: space-evenly; margin-inline: -8px; }
.sae-strip i { position: relative; display: block; width: 19px; height: 19px; border: 1px solid #b69b78; border-radius: 50%; background: radial-gradient(circle at 35% 25%,#716654,#22221e); transform: rotate(var(--turn)); }
.sae-strip i:after { content: ''; position: absolute; width: 2px; height: 6px; background: #f4cca0; top: 2px; left: 7px; }
.landscape-lesson[hidden], .lesson-preview[hidden] { display: none; }
.landscape-lesson { position: absolute; inset: 28px 4% 80px 40%; z-index: 6; border: 1px solid #75614a; border-radius: 24px; background: radial-gradient(ellipse at 45% 55%,#30291f,#101311); overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 150px; align-items: center; gap: 10px; padding: 22px; }
.lesson-map { min-width: 0; grid-row: 1; }
.lesson-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.lesson-preview { margin: 0; grid-row: 1; }
.lesson-preview img { width: 100%; display: block; border: 1px solid #b49771; border-radius: 12px; }
.lesson-preview figcaption { color: #e7c79e; font-size: 10px; letter-spacing: .08em; line-height: 1.7; margin-top: 12px; }
.tour .lesson-caption { position: static; grid-column: 1 / -1; align-self: end; margin: 0; color: #cdbb9f; font-size: 11px; line-height: 1.5; }
.story-stage:is([data-focus="space"],[data-focus="path"],[data-focus="safety"],[data-focus="language"]) > .studio-scene { visibility: hidden; }
.story-stage:is([data-focus="space"],[data-focus="path"],[data-focus="safety"],[data-focus="language"]) .story-glass { left: 5%; top: 50%; bottom: auto; width: 31%; max-height: calc(100% - 100px); transform: translateY(-50%); text-align: left; }
.story-stage:is([data-focus="safety"],[data-focus="language"]) .landscape-lesson { grid-template-columns: 1fr; }
.story-stage[data-focus="handoff"] .story-controls { display: flex; }
@media (max-width: 980px) {
  .story-stage:is([data-focus="space"],[data-focus="path"],[data-focus="safety"],[data-focus="language"]) { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 75px; }
  .story-stage:is([data-focus="space"],[data-focus="path"],[data-focus="safety"],[data-focus="language"]) .story-glass { position: relative; order: 0; left: auto; top: auto; width: calc(100% - 32px); margin: 16px; transform: none; max-height: none; }
  .landscape-lesson { position: relative; order: 1; inset: auto; min-height: 350px; flex: none; margin: 0 16px; grid-template-columns: minmax(0,1fr) 115px; padding: 14px; }
  .story-stage:is([data-focus="space"],[data-focus="path"],[data-focus="safety"],[data-focus="language"]) .story-controls { position: sticky; order: 2; align-self: flex-end; flex: none; bottom: 12px; margin: 18px 18px 12px; }
}
@media (max-width: 540px) {
  .sae-strip i { width: 13px; height: 13px; }
  .sae-strip i:after { left: 5px; height: 4px; }
  .landscape-lesson { grid-template-columns: 1fr; gap: 0; }
  .lesson-preview { display: flex; grid-row: 2; align-items: center; gap: 14px; margin: 0 12px 20px; }
  .lesson-preview img { width: 96px; }
}

@media (max-width: 800px) {
  .story-stage[data-focus="sae"] .story-glass { width: 90%; padding: 8px 12px; }
  .story-stage[data-focus="sae"] .story-glass h2 { font-size: 20px; }
  .story-stage[data-focus="sae"] .story-glass p { font-size: 13px !important; }
  .story-stage[data-focus="sae"] .studio-room { transform: scale(.78) !important; }
  .story-stage[data-focus="sae"] .sae-strip { top: calc(100% + 6px); height: 44px; padding: 6px; }
  .sae-strip span { font-size: 7px; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-stage[data-focus="sae"] .studio-room, .sae-strip { transition: none !important; }
}
/* Fixed-angle travelling view for section six. Ground and path move together. */
.flight-world { transition: transform 1.6s cubic-bezier(.22,.61,.36,1); }
.flight-grid { fill: none; stroke: #baa27c; stroke-width: 1; opacity: .18; }
.flight-route { fill: none; stroke: #d5b17c; stroke-width: 2.5; }
.flight-halo { fill: #ecc78b; fill-opacity: 0; stroke: #ecc78b; stroke-opacity: 0; transition: fill-opacity .5s, stroke-opacity .5s; }
.flight-stop.is-current .flight-halo { fill-opacity: .12; stroke-opacity: .8; }
.flight-strength { fill: #aa9b84; font-size: 12px; }
.flight-stop.is-current .flight-strength { fill: #f3d2a1; }
.flight-label { fill: #dfc49c; font-size: 11px; letter-spacing: 2px; }
.flight-sublabel { fill: #a89983; font-size: 11px; }
.story-stage:is([data-focus="space"],[data-focus="path"]) .landscape-lesson { grid-template-columns: 1fr; }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-map svg { overflow: hidden; }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview { position: absolute; top: 24px; right: 24px; width: 120px; }
@media (max-width: 540px) {
  .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview { position: static; width: auto; margin: 8px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .flight-world, .flight-halo { transition: none; }
}

/* Section five: balanced image/dial columns and spherical strength markers. */
.story-stage[data-focus="journey"] {
  --evidence-copy-width: clamp(240px, 26vw, 340px);
  --evidence-image-size: min(42vw, 560px, calc(100svh - 260px));
  --evidence-gap: max(24px, calc((100% - var(--evidence-copy-width) - var(--evidence-image-size) - 64px) / 2));
  --evidence-top: max(28px, calc((100% - var(--evidence-image-size) - 100px) / 2));
}
.story-stage[data-focus="journey"] .story-glass { top: calc(var(--evidence-top) + var(--evidence-image-size) / 2 - 190px); height: 180px; max-height: 180px; text-align: center; }
.story-stage[data-focus="journey"] .feature-console { top: calc(var(--evidence-top) + var(--evidence-image-size) / 2 + 14px); }
.story-stage[data-focus="journey"] .journey-gallery { left: calc(var(--evidence-gap) + var(--evidence-copy-width) + 64px); height: var(--evidence-image-size); }
.story-stage[data-focus="journey"] .journey-gallery figure,
.story-stage[data-focus="journey"] .journey-gallery figure.is-active { grid-template-rows: var(--evidence-image-size); gap: 0; }
.story-stage[data-focus="journey"] .journey-gallery figcaption { display: none; }
.story-stage[data-focus="journey"] .journey-gallery img { grid-row: 1; }
.story-stage[data-focus="journey"] .journey-track { left: calc(var(--evidence-gap) + var(--evidence-copy-width) + 64px); top: calc(var(--evidence-top) + var(--evidence-image-size) + 56px); padding: 0 18px; height: 38px; }
.story-stage[data-focus="journey"] .journey-track span { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #ead5b5; border: 1px solid #9c815f; background: radial-gradient(circle at 30% 23%,#b89e76 0%,#695641 42%,#211d18 85%); box-shadow: inset -3px -4px 7px #0008, 0 5px 8px #0006; font: 600 13px Jura, sans-serif; }
.story-stage[data-focus="journey"] .journey-track span.is-past { background: radial-gradient(circle at 30% 23%,#b89e76,#695641 42%,#211d18 85%); color: #ead5b5; }
.story-stage[data-focus="journey"] .journey-track span.is-active { background: radial-gradient(circle at 30% 23%,#fff1cd,#d3a870 48%,#67482b 90%); color: #251b10; box-shadow: 0 0 0 5px #e6bd8220,0 0 22px #e6bd8233; transform: scale(1.1); }
.story-stage[data-focus="journey"] .journey-track span:before { content: attr(data-strength); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); color: #d6bea0; font: 600 12px Jura,sans-serif; white-space: nowrap; }
@media (max-width: 699px) {
  .story-stage[data-focus="journey"] { --evidence-copy-width: min(380px,calc(100% - 48px)); --evidence-image-size: min(460px,calc(100vw - 32px)); --evidence-gap: calc((100% - var(--evidence-copy-width)) / 2); }
  .story-stage[data-focus="journey"] .story-glass { top: 28px; height: 200px; max-height: 200px; }
  .story-stage[data-focus="journey"] .feature-console { top: 250px; }
  .story-stage[data-focus="journey"] .journey-gallery { left: calc((100% - var(--evidence-image-size)) / 2); top: 458px; }
  .story-stage[data-focus="journey"] .journey-track { left: calc((100% - var(--evidence-image-size)) / 2); top: calc(514px + var(--evidence-image-size)); }
  .story-stage[data-focus="journey"] .story-controls { top: calc(590px + var(--evidence-image-size)); }
}

/* Connect ball centres only, including the animated completed segment. */
.story-stage[data-focus="journey"] .journey-track:before { left: 36px; right: 36px; }
.story-stage[data-focus="journey"] .journey-track:after { left: 36px; width: calc(100% - 72px); clip-path: inset(-10px calc(100% - var(--journey-track-progress, 0%)) -10px 0); transition: clip-path .58s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 800px) {
  .sae-strip div { margin-inline: -6px; }
}

/* One title size across every educational slide and breakpoint. */
#tour .story-stage .story-glass h2 { font-size: 22.5px !important; }

/* Matching centred visual panels for sections six through eight. */
.story-stage:is([data-focus="space"], [data-focus="path"], [data-focus="safety"], [data-focus="language"]) .landscape-lesson { transform: scale(.825); transform-origin: center center; }

/* Slide two: a restrained glass-layer schematic, connected to the room tour. */
.story-stage[data-focus="intro"] .story-glass { top: 24px; left: 50%; width: min(760px,85%); transform: translateX(-50%); max-height: none; text-align: center; }
.story-stage[data-focus="intro"] .process-guide { display: none; }
.story-stage[data-focus="intro"] .unet-intro { inset: 270px 4% 55px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.unet-diagram-heading { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.unet-diagram-heading span { font: 10px Jura,sans-serif; letter-spacing: .18em; color: #a99e87; }
.unet-diagram-heading b { font: 600 20px Jura,sans-serif; color: #e8d8bc; }
.story-stage[data-focus="intro"] .unet-intro > svg { display: block; width: min(100%,900px); min-height: 0; flex: 1; max-height: 480px; overflow: visible; }
.unet-main-flow { fill: none; stroke: url(#unet-flow); stroke-width: 3; }
.unet-skip-lines { fill: none; stroke: #c2b89d; stroke-width: 1.2; opacity: .35; marker-end: url(#unet-tip); }
.unet-stack rect { fill: url(#unet-glass); stroke: var(--stack-tone); stroke-width: 1; }
.unet-stack circle, .unet-stack path { fill: none; stroke: var(--stack-tone); }
.unet-stack { filter: drop-shadow(0 8px 14px #0005); }
.unet-end-label { fill: #dac9ac; font: 500 17px Jura,sans-serif; text-anchor: middle; letter-spacing: 1px; }
.unet-bridge-label { fill: #a49c8b; font: 12px Jura,sans-serif; text-anchor: middle; letter-spacing: 2px; }
.unet-repeat { fill: none; stroke: #b8a37f; stroke-width: 1.2; stroke-dasharray: 4 6; opacity: .45; marker-end: url(#unet-tip); }
.unet-repeat-label { fill: #cbb695; font: 12px Jura,sans-serif; text-anchor: middle; letter-spacing: 1px; }
.tour .unet-diagram-note { margin: 0; color: #aa9e8a; font-size: 11px; line-height: 1.4; text-align: center; }
@media (max-width: 800px) {
  .story-stage[data-focus="intro"] { overflow-y: auto; }
  .story-stage[data-focus="intro"] .story-glass { top: 18px; width: calc(100% - 32px); padding: 12px; }
  .story-stage[data-focus="intro"] .unet-intro { inset: 355px 10px 65px; min-height: 250px; }
  .story-stage[data-focus="intro"] > .studio-scene { min-height: 700px; }
}
@media (max-height: 750px) and (min-width: 801px) {
  .story-stage[data-focus="intro"] .unet-intro { top: 245px; }
}

@media (max-width: 800px) {
  .unet-end-label { font-size: 24px; }
  .unet-bridge-label, .unet-repeat-label { font-size: 18px; letter-spacing: 0; }
}

/* Section six: matching dial and image above the travelling path. */
.flight-dial-panel { display: none; }
.story-stage:is([data-focus="space"],[data-focus="path"]) .flight-dial-panel { position: absolute; top: 24px; left: 24px; width: 180px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1px solid #b49771; border-radius: 12px; background: linear-gradient(145deg,#42392b88,#141712dd); box-shadow: inset 0 1px #ffffff12; }
.flight-dial-panel > span { font: 10px Jura,sans-serif; letter-spacing: .12em; color: #d4bd98; }
.flight-dial-panel .console-dial { width: 86px; height: 86px; margin: 0; }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview { width: 180px; }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview img { width: 180px; height: 180px; object-fit: contain; background: #0c0d0b; }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-map { transform: translateY(44px); }
@media (max-width: 800px) {
  .story-stage:is([data-focus="space"],[data-focus="path"]) .landscape-lesson { min-height: 455px; }
  .story-stage:is([data-focus="space"],[data-focus="path"]) .flight-dial-panel { top: 16px; left: 14px; width: calc((100% - 44px) / 2); height: auto; aspect-ratio: 1; gap: 8px; }
  .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview { position: absolute; top: 16px; right: 14px; width: calc((100% - 44px) / 2); display: block; margin: 0; }
  .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview img { width: 100%; height: auto; aspect-ratio: 1; }
  .flight-dial-panel .console-dial { width: 64px; height: 64px; }
  .flight-dial-panel .console-dial i { height: 24px; }
  .flight-dial-panel .console-dial b { font-size: 22px; }
  .flight-dial-panel > span { font-size: 8px; }
  .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-map { transform: translateY(76px); }
}

.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview { grid-area: auto; }

/* Distinct landscape metaphors make each U-Net stage readable at a glance. */
.unet-metaphor { fill: none; stroke: var(--stack-tone); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.unet-metaphor .unet-icon-fill { fill: var(--stack-tone); fill-opacity: .22; }
.unet-node-label { fill: #d3c4aa; font: 14px Jura,sans-serif; text-anchor: middle; }
.unet-stack > rect:last-of-type { fill: #172021; fill-opacity: .92; }
@media (max-width: 800px) { .unet-node-label { font-size: 18px; } }

/* Vintage mixer knobs: a raised ridged grip within a warm metal collar. */
/* A rotating fluted cap under fixed lighting makes each strength change visible. */
#tour .console-dial { background: linear-gradient(135deg,#c0ae88,#514837 48%,#ad9670); box-shadow: 0 0 0 2px #100f0d,0 0 0 4px #8d806b,0 3px 0 5px #29261f,0 10px 0 2px #0a0b09,4px 17px 20px #000b,inset 0 1px 2px #fff4ce80; }
#tour .console-dial:before { inset: 6px; border: 1px solid #968d76; background: radial-gradient(circle,#33372e 0%,#33372e 39%,#141710 42%,transparent 45%),repeating-conic-gradient(from 2deg,#0c0e0b 0deg 6deg,#787562 7deg 10deg,#292c23 11deg 15deg); box-shadow: inset 0 0 0 2px #13160f,0 4px 2px #000b; transform: rotate(calc(var(--dial-angle,0deg) - 90deg)); transition: transform 1.25s cubic-bezier(.25,.1,.25,1); }
#tour .console-dial:after { inset: 6px; border: 0; opacity: 1; background: linear-gradient(140deg,#fff0bf30,transparent 42%,#0008); box-shadow: inset 2px 3px 3px #fff3ca50,inset -3px -5px 5px #000b; pointer-events: none; }
#tour .console-dial i { z-index: 2; width: 5px; background: linear-gradient(to bottom,#fff4d5 0%,#dcc48f 38%,transparent 39%); filter: drop-shadow(1px 2px 1px #000b); box-shadow: none; border-radius: 2px; transition: transform 1.25s cubic-bezier(.25,.1,.25,1); }
#tour .console-dial b { z-index: 3; color: #e4d9bb; text-shadow: 0 2px 2px #000; font-family: Jura,sans-serif; font-weight: 600; }
@media(prefers-reduced-motion:reduce) { #tour .console-dial:before,#tour .console-dial i { transition: none; } }
#tour .sae-strip i { border-color: #aaa08a; background: radial-gradient(circle at 32% 22%,#8d8976 0%,#4b5043 30%,#252a21 52%,transparent 57%), repeating-conic-gradient(#171a14 0deg 12deg,#7e7b64 13deg 19deg,#24291f 20deg 30deg); box-shadow: inset 0 1px 1px #fff5cd99,inset -1px -2px 2px #000b,0 2px 0 #0a0c08,0 4px 4px #000a,0 0 0 1px #716b55; }
#tour .sae-strip i:after { background: #f9e6b4; width: 2px; height: 32%; left: calc(50% - 1px); top: 10%; border-radius: 1px; box-shadow: 0 1px 1px #000; }

/* Concepts unfold on the same journey instead of separate map slides. */
.flight-risk,.flight-language { opacity: 0; transition: opacity .65s ease; pointer-events: none; }
.landscape-lesson[data-topic="safety"] .flight-risk,.landscape-lesson[data-topic="language"] .flight-language { opacity: 1; }
.flight-risk ellipse { fill: #dc7774; fill-opacity: .16; stroke: #df9187; stroke-width: 1.5; stroke-dasharray: 5 4; }
.flight-regions text { font: 10px Jura,sans-serif; letter-spacing: .5px; fill: #e8b3a3; }
.flight-language rect { fill: #77bbdc; fill-opacity: .14; stroke: #8cc9e4; stroke-opacity: .45; }
.flight-language path { fill: none; stroke: #9bd5ec; stroke-width: 1.5; stroke-dasharray: 5 4; }
.flight-language text { fill: #b2def0; }
@media(prefers-reduced-motion:reduce) { .flight-risk,.flight-language { transition: none; } }
@media(max-width:800px) { .landscape-lesson[data-topic] .lesson-caption { transform: translateY(-32px); } }

/* Keep the paired controls centered above the space they describe. */
.story-stage:is([data-focus="space"],[data-focus="path"]) .landscape-lesson { --flight-panel-size: min(216px,calc((100% - 76px) / 2)); }
.story-stage:is([data-focus="space"],[data-focus="path"]) .flight-dial-panel { width: var(--flight-panel-size); height: auto; aspect-ratio: 1; left: calc(50% - var(--flight-panel-size) - 18px); }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview { width: var(--flight-panel-size); right: calc(50% - var(--flight-panel-size) - 18px); }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-preview img { width: 100%; height: auto; aspect-ratio: 1; }
.flight-dial-panel .console-dial { width: 103px; height: 103px; transform: scale(.9); }
.story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-map { transform: translateY(66px); }
.latent-space-label { fill: #bcb5a6; fill-opacity: .65; font: 10px Jura,sans-serif; letter-spacing: 1.8px; }
@media(max-width:800px) {
  .flight-dial-panel .console-dial { width: 77px; height: 77px; }
  .story-stage:is([data-focus="space"],[data-focus="path"]) .lesson-map { transform: translateY(92px); }
  .latent-space-label { font-size: 13px; }
}

/* Prompt details belong to the expanded image view, including after reset/minimize. */
.app-shell:not(:has(#image-hud.expanded:not(.minimized))) .prompt-block { display: none; }
.compact-info .edge-block { grid-column: 2; }
@media(max-width:540px) { .compact-info .edge-block { grid-column: 1; } }

/* Expanded details stay readable; secondary controls retain a quiet hierarchy. */
.app-shell .prompt-block #prompt { display: block; max-height: none; overflow: visible; -webkit-line-clamp: unset; font-size: 12px; line-height: 1.45; }
.app-shell .compact-info, .app-shell .theme-button, .app-shell .feature-filter,
.app-shell .hud-expand, .app-shell .hud-minimize, .app-shell .arrow,
.app-shell .notch-action, .app-shell .mode-toggle { color: color-mix(in srgb,var(--muted) 65%,var(--text)); }
.app-shell .compact-info .section-label { color: color-mix(in srgb,var(--muted) 55%,var(--text)); }
.app-shell .hud-expand span { border-width: 1.5px; }

/* Center the explorer title independently of the corner controls. */
.app-shell .brand-tab { left: 50%; right: auto; width: max-content; min-width: 0; max-width: calc(100% - 240px); transform: translateX(-50%); place-items: center; text-align: center; padding: 0; }
@media(max-width:540px) { .app-shell .brand-tab { max-width: calc(100% - 180px); } }

/* Prompt stays beneath the default expanded viewer, independent of dragging. */
.lower-rail > .prompt-block { text-align: center; }
.lower-rail > .prompt-block .section-label { color: color-mix(in srgb,var(--muted) 55%,var(--text)); }
@media(min-width:981px) {
  .lower-rail > .prompt-block { position: absolute; top: 18px; left: var(--prompt-left,7%); width: var(--prompt-width,440px); max-width: calc(100% - 28px); }
}
@media(max-width:980px) {
  .lower-rail > .prompt-block { grid-column: 1 / -1; width: min(100%,640px); justify-self: center; }
}

body.explorer-active .app-shell:has(#image-hud.expanded:not(.minimized)) .lower-rail { z-index: 10; }

/* Intro guidance occupies the same wide reading area as the expanded prompt. */
.explorer-hint { position: absolute; top: var(--hint-top,28px); left: var(--hint-center,24%); transform: translateX(-50%); width: var(--hint-width,min(610px,calc(44vw - 30px),calc(100vh - 220px))); max-width: calc(100% - 28px); text-align: center; color: color-mix(in srgb,var(--muted) 65%,var(--text)); font-size: 12px; line-height: 1.45; }
.explorer-hint p { margin: 0; }
.explorer-hint strong { color: var(--text); font-weight: 600; }
.app-shell:not(:has(#image-hud.minimized)) .explorer-hint { display: none; }
@media(max-width:980px) {
  .explorer-hint { position: static; transform: none; width: min(100%,640px); grid-column: 1 / -1; justify-self: center; }
}

/* Separate reset from movement controls; simple full-width rail on compact screens. */
.reset-control { position: absolute; z-index: 10; left: 34px; top: 13px; }
.reset-control .refresh-action { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.reset-control svg { width: 18px; height: 18px; }
.explorer-shell.has-desktop-notch .mode-control { top: 13px; }
.explorer-shell:not(.has-desktop-notch) .mode-control,
.explorer-shell:not(.has-desktop-notch) .reset-control { top: 112px; }
@media(max-width:620px) {
  .reset-control { left: 20px; }
  .reset-control .refresh-action { width: 34px; height: 34px; }
  .reset-control svg { width: 15px; height: 15px; }
}

/* Theme joins the circular map controls; icon shows the current appearance. */
.mode-control .theme-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.theme-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon .theme-moon,body[data-theme="dark"] .theme-icon .theme-sun { display: none; }
body[data-theme="dark"] .theme-icon .theme-moon { display: block; }
@media(max-width:620px) { .mode-control .theme-icon { width: 34px; height: 34px; } .theme-icon svg { width: 16px; height: 16px; } }

/* Balanced viewer controls: next journey, step navigation, then strength. */
.image-hud .hud-step-controls { height: auto; min-height: 48px; grid-template-columns: minmax(48px,1fr) minmax(120px,196px) minmax(48px,1fr); grid-template-rows: 44px auto; gap: 3px 8px; padding: 0 4px; }
.image-hud .hud-step-nav { width: 100%; grid-template-columns: minmax(30px,1fr) 44px minmax(30px,1fr); gap: 6px; align-self: start; }
.image-hud .hud-step-nav .arrow { width: 100%; }
.image-hud .hud-step-controls .next-path-action { grid-row: 1 / 3; align-self: center; left: auto; top: auto; width: 48px; height: 48px; justify-self: center; }
.image-hud .hud-step-controls .next-path-action:hover:not(:disabled) { transform: none; }
.image-hud .next-path-label { display: block; font: 750 9px/1.08 Jura,sans-serif; letter-spacing: .04em; text-align: center; }
.image-hud .strength-dock { display: contents; }
.image-hud .strength-dock[hidden] { display: none; }
.image-hud .strength-dock .strength-display { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: center; width: 48px; margin: 0; }
.image-hud .strength-dial { width: 48px; height: 48px; }
.image-hud .strength-dial::before { inset: 4px; }
.image-hud .strength-dial i { top: 4px; height: 12px; transform-origin: 50% 19px; }
.image-hud .strength-dial b { max-width: 40px; font-size: 13px; }
.image-hud .strength-dock #hud-feature { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 11px; line-height: 1.4; }
.image-hud .strength-tooltip { left: 50%; top: auto; bottom: calc(100% + 8px); transform: translateX(-50%); }
.image-hud .strength-display:hover .strength-tooltip { transform: translateX(-50%); }
@media(min-width:621px) {
  .image-hud .hud-step-controls .next-path-action { left: 9px; }
  .image-hud .strength-dock .strength-display { left: -9px; }
}
@media(max-width:980px) {
  .image-hud.expanded, .image-hud.is-dragged { position: relative; left: auto !important; top: auto !important; bottom: auto; width: min(400px,calc(100% - 32px)); transform: none; margin-inline: auto; }
}

/* Keep slide five's readout inside the smaller knob's clear center. */
#tour .feature-console .console-dial b { font-size: 16px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#tour .feature-console .console-dial i { height: 28px; background: linear-gradient(to bottom,#fff4d5 0%,#dcc48f 26%,transparent 27%); }
@media(max-width:800px) { #tour .feature-console .console-dial b { font-size: 14px; } }

/* Home and reset share the left map-control row. */
.reset-control { display: flex; align-items: center; gap: 8px; }
.reset-control .back-to-tour { position: relative; top: auto; left: auto; width: 42px; height: 42px; flex: none; }
@media(max-width:620px) { .reset-control .back-to-tour { width: 34px; height: 34px; } .reset-control { gap: 6px; } }
/* The preview uses the tour's metal collar, rotating flutes and fixed lighting. */
.image-hud .strength-dial { border: 0; background: linear-gradient(135deg,#c0ae88,#514837 48%,#ad9670); box-shadow: 0 0 0 1px #100f0d,0 0 0 2px #8d806b,0 3px 0 #151610,2px 6px 8px #0009; }
.image-hud .strength-dial::before { inset: 4px; border: 1px solid #968d76; background: radial-gradient(circle,#33372e 0%,#33372e 39%,#141710 42%,transparent 45%),repeating-conic-gradient(from 2deg,#0c0e0b 0deg 6deg,#787562 7deg 10deg,#292c23 11deg 15deg); transform: rotate(var(--strength-angle,-125deg)); transition: transform 1.25s cubic-bezier(.25,.1,.25,1); }
.image-hud .strength-dial::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: linear-gradient(140deg,#fff0bf30,transparent 42%,#0008); box-shadow: inset 1px 2px 2px #fff3ca50,inset -2px -3px 3px #000b; pointer-events: none; }
.image-hud .strength-dial i { z-index: 2; left: 50%; top: 50%; width: 3px; height: 18px; transform-origin: 50% 100%; transform: translate(-50%,-100%) rotate(var(--strength-angle,-125deg)); background: linear-gradient(to bottom,#fff4d5 0%,#dcc48f 26%,transparent 27%); filter: drop-shadow(1px 1px 1px #000b); transition: transform 1.25s cubic-bezier(.25,.1,.25,1); }
.image-hud .strength-dial b { z-index: 3; font: 600 11px/1 Jura,sans-serif; color: #e4d9bb; text-shadow: 0 1px 2px #000; }
@media(prefers-reduced-motion:reduce) { .image-hud .strength-dial::before { transition: none; } }

/* The all-features control occupies the notch's left shoulder, between rows. */
.top-controls .feature-filters .all-features { position: absolute; left: -47px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; font: 700 8px/1 Jura,sans-serif; letter-spacing: .03em; }
.top-controls .all-features.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb,var(--accent) 25%,var(--button)); box-shadow: 0 0 12px color-mix(in srgb,var(--accent) 28%,transparent); }
@media(max-width:620px) { .top-controls .feature-filters .all-features { left: -31.75px; width: 19.5px; height: 19.5px; font-size: 6.5px; } }

/* Spin mirrors ALL across the centered feature grid. */
.top-controls .feature-filters #spin-toggle { position: absolute; top: 50%; left: calc(100% + 16px); transform: translateY(-50%); width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.top-controls #spin-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.top-controls #spin-toggle:hover { transform: translateY(-50%); }
@media(max-width:620px) { .top-controls .feature-filters #spin-toggle { width: 19.5px; height: 19.5px; } .top-controls #spin-toggle svg { width: 12px; height: 12px; } }

/* One compact Language Edge status row, with the explanation beneath. */
.lower-rail .compact-info { grid-column: 2 / -1; grid-template-columns: minmax(0,1fr); justify-self: end; width: max-content; max-width: 100%; }
.compact-info .edge-block { grid-column: 1; }
.edge-title { display: flex; align-items: baseline; gap: 10px; }
.app-shell .edge-title .section-label { font-size: 12px; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.edge-title .pilot-tag { font-size: inherit; }
.app-shell .edge-title #language-edge { margin: 0; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow-wrap: normal; }
.edge-block details { margin-top: 6px; }
@media(max-width:980px) { .lower-rail .compact-info { grid-column: 1 / -1; } }
@media(max-width:540px) {
  .lower-rail .compact-info { justify-self: center; }
  .edge-title { gap: 6px; }
  .app-shell .edge-title .section-label,.app-shell .edge-title #language-edge { font-size: clamp(9px,2.6vw,12px); }
}

/* Opposing entrance glides settle at the same distance from the feature rows. */
.feature-filters.side-controls-ready .all-features { animation: all-control-arrive .45s cubic-bezier(.22,.61,.36,1) both; }
.feature-filters.side-controls-ready #spin-toggle { animation: spin-control-arrive .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes all-control-arrive { from { translate: -12px 0; opacity: .4; } to { translate: 0 0; opacity: 1; } }
@keyframes spin-control-arrive { from { translate: 12px 0; opacity: .4; } to { translate: 0 0; opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .feature-filters.side-controls-ready .all-features,.feature-filters.side-controls-ready #spin-toggle { animation: none; } }

/* Slim top rail matches the sides; the lower rail adds 30 screen pixels. */
@media (min-width: 981px) {
  .app-shell { grid-template-rows: minmax(0, 1fr) calc(53px + 30px / var(--ui-scale)); padding-top: calc(var(--viewport-gutter) * var(--ui-inverse-scale)); padding-bottom: 0; }
  .app-shell .brand-tab { top: calc(-1 * var(--viewport-gutter) * var(--ui-inverse-scale)); height: calc(var(--viewport-gutter) * var(--ui-inverse-scale)); }
  .image-hud:not(.is-dragged) { bottom: calc(-31px - 30px / var(--ui-scale)); }
  .image-hud-tab { bottom: 0; }
  .lower-rail { padding-top: 8px; }
  .explorer-hint { top: 8px; }
  .lower-rail > .prompt-block { top: 50%; transform: translateY(-50%); }
  .lower-rail > .prompt-block #prompt { margin: 0; }
}

/* Screen-centered footer title and an inset help control inside the map. */
.app-shell .brand-tab { top: auto; bottom: 5px; left: 50%; height: 20px; max-width: calc(100% - 36px); transform: translateX(-50%); }
.map-key { right: 22px; bottom: 22px; }
body.explorer-active .map-key:not(.collapsed) { border-radius: 24px; }
@media (max-width: 980px) {
  .app-shell { padding-bottom: 38px; }
  .map-key { right: 18px; bottom: 18px; }
}

/* Three balanced reading areas in the footer rail. */
@media (min-width: 981px) {
  .lower-rail { grid-template-columns: minmax(0,1fr) 280px minmax(0,1fr); gap: 16px; padding: 0; align-items: center; }
  .lower-rail .brand-tab { position: static; grid-column: 2; grid-row: 1; width: 100%; max-width: none; height: auto; transform: none; justify-self: center; align-self: center; font-size: 12px; }
  .lower-rail .compact-info { grid-column: 3; grid-row: 1; width: 100%; justify-self: center; align-self: center; text-align: center; }
  .lower-rail .edge-block { justify-self: center; padding-left: 0; }
  .lower-rail .edge-title { justify-content: center; gap: 8px; flex-wrap: wrap; }
  .lower-rail .edge-toggle { position: relative; flex: 0 0 18px; }
  .lower-rail .explorer-hint, .lower-rail > .prompt-block { left: 0; top: 50%; width: calc((100% - 312px) / 2); max-width: none; transform: translateY(-50%); }
}
@media (max-width: 980px) {
  .lower-rail .brand-tab { position: static; grid-column: 1 / -1; width: 100%; max-width: none; height: auto; transform: none; justify-self: center; }
  .lower-rail .compact-info { text-align: center; }
}
@media (min-width: 981px) {
  .lower-rail .compact-info, .lower-rail .edge-block details { padding: 0; }
}

/* Brass-rimmed companion button to the feature-strength dial. */
.image-hud .hud-step-controls .next-path-action {
  padding: 6px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg,#c0ae88,#514837 48%,#ad9670);
  box-shadow: 0 0 0 1px #100f0d,0 0 0 2px #8d806b,0 3px 0 #151610,2px 6px 8px #0009;
}
.image-hud .hud-step-controls .next-path-action::before {
  content: ''; position: absolute; inset: 4px; border: 1px solid #968d76; border-radius: 50%;
  background: linear-gradient(140deg,#484a3b,#20231b 65%,#11140e);
  box-shadow: inset 1px 2px 2px #fff3ca50,inset -2px -3px 3px #000b; pointer-events: none;
}
.image-hud .next-path-action .next-path-label { position: relative; z-index: 1; font-size: 8px; line-height: 1.15; color: #e4d9bb; text-shadow: 0 1px 2px #000; }
.image-hud .hud-step-controls .next-path-action:hover:not(:disabled) { background: linear-gradient(135deg,#ddcba1,#736345 48%,#c3a77b); }

.image-hud .strength-dock button.strength-display { padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.image-hud button.strength-display:focus-visible { outline: 2px solid #e4d9bb; outline-offset: 5px; }

/* Help opens above the same fixed corner button that closes it. */
body.explorer-active .map-key:not(.collapsed) { width: 460px; max-width: calc(100% - 44px); max-height: none; padding: 18px 18px 54px; border: 0; box-shadow: 0 0 0 1px var(--line),0 10px 28px var(--shadow); overflow: visible; transition: none; }
.map-key .map-key-head, .map-key.collapsed .map-key-head { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; display: grid; place-items: center; }
.map-key #map-key-toggle { width: 44px; height: 44px; border-radius: 50%; }
.map-key.collapsed .map-key-content { display: none; }
.map-key-content { max-height: min(380px,calc(100svh - 240px)); overflow-y: auto; }
.map-key-intro { margin: 0; font-size: 12px; line-height: 1.5; }
.map-key-intro strong { color: var(--text); }
.map-key .key-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.map-key .key-item { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; font-size: 12px; line-height: 1.4; align-items: center; }
.map-key .key-symbol { justify-self: center; }
.map-key .key-item b { display: inline; margin-right: 4px; font-weight: 650; }

/* Keep hover labels consistently below their controls. */
.app-shell :where([data-tooltip])::after { top: calc(100% + 7px); bottom: auto; text-transform: uppercase; }
.image-hud .strength-display > .strength-tooltip { top: calc(100% + 7px); bottom: auto; left: 50%; transform: translateX(-50%); text-transform: uppercase; }
.image-hud .strength-display:is(:hover,:focus-visible) .strength-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%); }

/* Narrow the initial prompt while retaining its left-footer center. */
@media (min-width: 981px) {
  .lower-rail > .prompt-block { left: calc((100% - 312px) / 16); width: calc((100% - 312px) * .375); }
}
@media (max-width: 980px) {
  .lower-rail > .prompt-block { width: min(75%,480px); }
}
.app-shell .prompt-block #prompt { width: 95%; margin-inline: auto; text-wrap: balance; }

/* Instrument-style Language Edge badge with a separate coverage indicator. */
.lower-rail .edge-title { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px 8px; }
.app-shell .lower-rail .edge-title .edge-toggle { position: relative; top: auto; left: auto; flex: 0 0 auto; width: auto; height: 25px; padding: 0 10px; border: 2px solid #a18c65; border-radius: 7px; color: #e4d9bb; background: linear-gradient(145deg,#383a30,#151811); box-shadow: 0 0 0 1px #423a2b,inset 0 1px 2px #fff2ce35,0 2px 3px #0006; font: 650 11px/1 Jura,sans-serif; letter-spacing: .03em; }
.lower-rail .edge-title .edge-toggle:not(.active) { opacity: .65; }
.lower-rail .edge-title .pilot-tag { padding: 4px 6px; border: 1px solid #ab9671; border-radius: 3px; background: linear-gradient(145deg,#d0bd97,#978363 55%,#b7a27b); box-shadow: inset 0 1px #f8e6bd90,0 2px 3px #0005; color: #29271e; font: 750 9px/1 Jura,sans-serif; letter-spacing: .1em; }
.edge-status-light { --lamp: #55584f; display: inline-block; width: 12px; height: 12px; border: 1px solid #85775e; border-radius: 50%; background: radial-gradient(circle at 32% 28%,#fff9,var(--lamp) 40%,#111 100%); box-shadow: 0 0 0 2px #171810,inset 0 -2px 3px #0007; }
.edge-status-light[data-status="inside"] { --lamp: #65cafa; box-shadow: 0 0 0 2px #171810,0 0 8px #65cafa88; }
.edge-status-light[data-status="outside"] { --lamp: #f5a34e; box-shadow: 0 0 0 2px #171810,0 0 8px #f5a34e88; }
.lower-rail .edge-title #language-edge { flex-basis: 100%; font-size: 11px; line-height: 1.25; }
.lower-rail .edge-block details { margin-top: 4px; font-size: 11px; }

/* UI1 — fixed paired-image explorer, based on the comparison sketch. */
.app-shell.comparison-layout { --compare-width: clamp(310px,29vw,540px); padding: 0; display: block; }
.app-shell.comparison-layout.comparison-expanded { --compare-width: clamp(310px,29vw,540px); }
.comparison-layout .explorer-shell { position: absolute; inset: 24px calc(var(--compare-width) + 32px) 100px 24px; width: auto; height: auto; min-height: 0; border-radius: 58px; }
body.explorer-active .comparison-layout .scene-wrap { position: fixed; inset: 0; border-radius: 0; }
.comparison-layout .explorer-frame-shape { display: none; }
.app-shell.comparison-layout .image-hud { position: absolute; left: auto !important; right: 0; top: 0 !important; bottom: 16px; width: var(--compare-width); height: auto; max-width: none; margin: 0; padding: 28px 12px 12px; transform: none !important; display: grid; grid-template-rows: minmax(0,1fr) minmax(0,1fr) 78px; gap: 9px; border-radius: 25px; transition: opacity .25s, width .3s; }
.comparison-layout .image-hud.minimized { opacity: 0; visibility: hidden; pointer-events: none; }
.comparison-layout .hud-drag-handle { display: none !important; }
.comparison-layout .comparison-shot { position: relative; display: flex; flex-direction: column; min-height: 0; gap: 4px; }
.comparison-layout .comparison-shot .image-frame { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; border-radius: 15px; overflow: hidden; background: #0a0b0980; }
.comparison-layout .comparison-shot .image-frame img { width: 100%; height: 100%; min-height: 0; object-fit: contain; aspect-ratio: auto; border-radius: 12px; }
.comparison-layout .comparison-shot .image-frame img[hidden] { display: none; }
.comparison-layout .route-label { position: absolute; z-index: 2; left: 9px; top: 8px; padding: 4px 6px; border-radius: 4px; color: var(--accent); background: #13140dbb; font: 650 9px/1 Jura,sans-serif; letter-spacing: .1em; }
.comparison-layout .route-caption { margin: 0; color: var(--muted); font: 500 10px/1.3 Jura,sans-serif; text-align: center; }
.comparison-layout #comparison-status { color: var(--muted); text-align: center; font-size: 12px; padding: 20px; }
.comparison-layout .image-hud .hud-meta { padding: 5px 0 0; min-height: 0; }
.comparison-layout .image-hud .hud-step-controls { grid-template-columns: 48px minmax(100px,1fr) 48px; padding: 0 8px; gap: 3px 10px; }
.comparison-layout .image-hud .strength-dock .strength-display { grid-column: 1; left: auto; }
.comparison-layout .image-hud .hud-step-controls .next-path-action { grid-column: 3; left: auto; }
.comparison-layout .image-hud #hud-feature { font-size: 10px; }
.comparison-layout .image-hud-tab { left: auto; right: calc(16px + (var(--compare-width) - 180px) / 2); bottom: 32px; transform: none; }
.app-shell.comparison-layout .top-controls { position: absolute; left: calc((100% - var(--compare-width) - 56px) * .55 + 24px); right: calc(var(--compare-width) + 40px); top: auto; bottom: 42px; width: auto; max-width: none; min-width: 0; transform: none; z-index: 8; }
.comparison-layout .feature-filters { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,34px); gap: 10px 12px; width: 100%; max-width: none; padding: 0; }
.comparison-layout .feature-choice { display: flex; align-items: center; gap: 5px; min-width: 0; }
.comparison-layout .feature-choice .feature-filter { width: 100%; min-width: 0; height: 30px; padding: 3px 4px; border-radius: 9px; font: 600 10px/1.15 Jura,sans-serif; }
.comparison-layout .feature-choice.active .feature-filter { color: var(--text); border-color: var(--feature-color); background: color-mix(in srgb,var(--feature-color) 20%,var(--button)); }
.feature-mini-knob { position: relative; flex: 0 0 24px; width: 24px; height: 24px; padding: 3px; cursor: pointer; border: 1px solid #9e8a67; border-radius: 50%; background: linear-gradient(135deg,#c0ae88,#514837 48%,#ad9670); box-shadow: 0 2px 3px #0009; }
.feature-mini-knob::before { content: ''; position: absolute; inset: 3px; border: 1px solid #817b63; border-radius: 50%; background: repeating-conic-gradient(#181d14 0deg 9deg,#6f705b 10deg 14deg,#242a1e 15deg 20deg); }
.feature-mini-knob i { position: absolute; inset: 5px; border-radius: 50%; background: #262d20; transform: rotate(var(--mini-angle,-125deg)); transition: transform .7s; }
.feature-mini-knob i::before { content: ''; position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 6px; background: #e6d6a9; border-radius: 2px; }
.feature-choice.active .feature-mini-knob { box-shadow: 0 0 0 2px var(--feature-color),0 0 8px color-mix(in srgb,var(--feature-color) 50%,transparent); }
.app-shell.comparison-layout .brand-tab { position: absolute; top: 27px; bottom: auto; left: calc((100% - var(--compare-width)) * .64); width: max-content; height: 25px; max-width: none; transform: translateX(-50%); font: 600 15px/1 Jura,sans-serif; letter-spacing: .06em; }
.comparison-layout .brand-tab .pilot-tag { display: inline-block; vertical-align: middle; margin-left: 7px; padding: 4px 6px; background: linear-gradient(135deg,#c9b78f,#95815e); color: #28251c; border: 1px solid #aa936c; border-radius: 3px; font: 700 9px/1 Jura,sans-serif; letter-spacing: .08em; }
.comparison-layout .mode-control { position: absolute; right: calc(var(--compare-width) + 90px); top: 22px; bottom: auto; display: flex; gap: 12px; width: auto; height: 44px; align-items: center; }
.comparison-layout .mode-control #spin-toggle,.comparison-layout .mode-control #theme-toggle { position: relative; top: auto !important; left: auto !important; width: 24px; height: 24px; transform: none; padding: 4px; }
.comparison-layout .mode-control #mode-toggle { order: 3; width: 44px; height: 44px; }
.comparison-layout .mode-control #spin-toggle { order: 1; }
.comparison-layout .mode-control #theme-toggle { order: 2; }
.comparison-layout .mode-control svg { width: 14px; height: 14px; }
.comparison-layout .map-key { position: absolute; top: 22px; right: calc(var(--compare-width) + 34px); bottom: auto; }
.comparison-layout .map-key .map-key-head { top: 0; bottom: auto; right: 0; }
body.explorer-active .comparison-layout .map-key:not(.collapsed) { padding: 54px 18px 18px; }
.comparison-layout .reset-control { top: 16px !important; left: 24px; }
.comparison-layout .interaction-copy { left: 32px; right: auto; bottom: 18px; max-width: 48%; font-size: 10px; text-align: left; }
.app-shell.comparison-layout .lower-rail { position: absolute; left: 36px; right: auto; bottom: 20px; width: calc((100% - var(--compare-width)) * .42); height: 65px; display: flex; padding: 0; margin: 0; justify-content: flex-start; align-items: center; }
.comparison-layout .lower-rail .compact-info { width: auto; }
.comparison-layout .lower-rail .explorer-hint,.comparison-layout .lower-rail > .prompt-block { display: none !important; }
#feature-connection { position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#feature-connection path { fill: none; stroke: #a4cad8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 4; animation: connection-flow 1.5s linear infinite; opacity: .7; }
@keyframes connection-flow { to { stroke-dashoffset: -22; } }
@media(prefers-reduced-motion:reduce) { #feature-connection path { animation: none; stroke-dasharray: none; } }
@media (max-width: 1250px) and (min-width:981px) {
  .app-shell.comparison-layout .top-controls { left: 40%; }
  .comparison-layout .feature-filters { gap: 8px 6px; }
  .comparison-layout .feature-choice { gap: 3px; }
  .comparison-layout .feature-choice .feature-filter { font-size: 9px; }
  .app-shell.comparison-layout .brand-tab { left: calc(75.5% - 387px); font-size: 12px; }
}
@media (max-width:980px) {
  .app-shell.comparison-layout { position: relative; width: 100%; height: auto; min-height: 100svh; padding: 0 12px 22px; transform: none; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
  .comparison-layout .explorer-shell { position: relative; inset: auto; order: 1; width: 100%; height: 58svh; min-height: 380px; margin-top: 82px; }
  .app-shell.comparison-layout .brand-tab { top: 12px; left: 48px; transform: none; font-size: 12px; }
  .comparison-layout .mode-control { top: 38px; right: 72px; }
  .comparison-layout .map-key { top: 38px; right: 16px; }
  .comparison-layout .reset-control { left: 8px; top: 8px !important; }
  .app-shell.comparison-layout .top-controls { position: relative; inset: auto; order: 2; width: 100%; }
  .comparison-layout .feature-filters { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(4,34px); }
  .comparison-layout .feature-choice .feature-filter { font-size: 11px; }
  .app-shell.comparison-layout .image-hud { position: relative; inset: auto !important; order: 3; width: 100%; height: auto; min-height: 700px; padding-top: 30px; grid-template-rows: minmax(230px,1fr) minmax(230px,1fr) 78px; }
  .app-shell.comparison-layout .image-hud.minimized { display: none; }
  .comparison-layout .comparison-shot .image-frame { aspect-ratio: 1; }
  .comparison-layout .image-hud-tab { position: relative; inset: auto; order: 3; align-self: center; }
  .app-shell.comparison-layout .lower-rail { position: relative; inset: auto; order: 4; width: 100%; justify-content: center; }
  .comparison-layout .interaction-copy { max-width: calc(100% - 30px); left: 15px; bottom: 14px; font-size: 9px; }
  #feature-connection { display: none; }
}
.comparison-layout .interaction-copy { transform: none; }
.app-shell.comparison-layout .top-controls { bottom: 95px; }
@media (max-width:980px) { .app-shell.comparison-layout .top-controls { bottom: auto; } }
.app-shell.comparison-layout .top-controls { height: auto; }
@media (max-width:980px) {
  .app-shell.comparison-layout .top-controls { min-height: 166px; flex-shrink: 0; }
  .comparison-layout .feature-filters { height: auto; }
  .comparison-layout .image-hud-tab { flex-shrink: 0; }
  .app-shell.comparison-layout .lower-rail { flex-shrink: 0; }
}

/* UI1 refinement: one fixed preview size and independent prompt disclosures. */
.comparison-layout #image-hud-expand { display: none; }
.comparison-layout .comparison-shot .image-frame img { cursor: default; }
.comparison-layout .prompt-toggle { position:absolute; z-index:4; top:8px; right:9px; width:26px; height:26px; padding:0; display:grid; place-items:center; border:1px solid #a18c65; border-radius:50%; background:#24251ee8; color:#e4d9bb; font:650 12px/1 Jura,sans-serif; cursor:pointer; }
.comparison-layout .prompt-toggle[aria-expanded="true"] { background:#ad9670; color:#191a15; }
.comparison-layout .route-caption { position:absolute; z-index:3; left:8px; right:8px; bottom:8px; max-height:calc(100% - 52px); overflow:auto; padding:14px; border:1px solid var(--line-strong); border-radius:10px; background:var(--glass); color:var(--text); font-size:12px; line-height:1.5; backdrop-filter:blur(16px); }
.comparison-layout .route-caption[hidden] { display:none; }
.comparison-layout .route-label { display:flex; align-items:center; gap:8px; padding:0; background:transparent; font-size:11px; text-shadow:0 1px 3px #000; }
.preview-step-ball { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb,var(--ball-color) 70%,white); background:radial-gradient(circle at 32% 25%,color-mix(in srgb,var(--ball-color) 45%,white),var(--ball-color) 55%,#15222b); box-shadow:inset 0 -2px 3px #0006,0 2px 4px #0008; color:#172731; font:750 12px/1 Jura,sans-serif; text-shadow:none; }
.comparison-layout .image-hud .hud-step-nav { width:80%; justify-self:center; }
.comparison-layout .image-hud .strength-dock #hud-feature { font-size:12px; }
.comparison-layout .edge-result-row { display:flex; align-items:baseline; justify-content:center; gap:10px; margin-top:6px; }
.comparison-layout .edge-result-row #language-edge { margin:0; font-size:11px; line-height:1.25; }
.comparison-layout .edge-result-row details { margin:0; position:relative; font-size:11px; }
.comparison-layout .edge-result-row details p { position:absolute; z-index:15; bottom:22px; left:0; width:280px; max-width:65vw; padding:14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--glass); }
@media(min-width:981px) {
  .app-shell.comparison-layout .lower-rail { bottom:12px; height:49px; }
  .app-shell.comparison-layout .top-controls { bottom:36px; }
}

/* Keep the empty comparison rail visible and align header hardware. */
.comparison-layout .image-hud.is-empty .route-label,
.comparison-layout .image-hud.is-empty .prompt-toggle { display:none; }
.comparison-layout .image-hud.is-empty .frame-status,
.comparison-layout .image-hud.is-empty #comparison-status { position:static; margin:0; padding:20px; color:var(--muted); font:500 13px/1.5 Jura,sans-serif; text-align:center; }
.comparison-layout .edge-result-row { align-items:center; }
.comparison-layout .edge-result-row .edge-status-light { flex:0 0 10px; width:10px; height:10px; }
@media(min-width:981px) {
  .app-shell.comparison-layout .brand-tab { top:23.5px; display:flex; align-items:center; }
  .comparison-layout .mode-control,.comparison-layout .map-key { top:14px; }
}

/* Airier paired previews: the rail itself frames the rounded images. */
.app-shell.comparison-layout .image-hud { padding-inline:20px; row-gap:24px; }
.comparison-layout .comparison-shot .image-frame { background:transparent; border:0; box-shadow:none; container-type:size; }
.comparison-layout .comparison-shot .image-frame img { width:min(100cqw,100cqh); height:min(100cqw,100cqh); max-width:100%; max-height:100%; border-radius:20px; background:transparent; box-shadow:none; }
@media(min-width:981px) {
  .app-shell.comparison-layout .lower-rail { bottom:0; height:100px; }
}

/* Anchor the badges and prompt disclosure to the actual image boundary. */
.app-shell.comparison-layout .image-hud { padding-top:28px; padding-inline:28px; }
.comparison-layout .preview-image-surface { position:relative; width:min(97cqw,97cqh); height:min(97cqw,97cqh); border-radius:20px; overflow:hidden; }
.comparison-layout .comparison-shot .preview-image-surface img { width:100%; height:100%; }
.comparison-layout .preview-image-surface .route-label { top:12px; left:12px; }
.comparison-layout .preview-image-surface .prompt-toggle { top:auto; right:12px; bottom:12px; width:auto; min-width:66px; height:26px; padding:0 10px; border-radius:13px; font-size:10px; letter-spacing:.06em; white-space:nowrap; }
.comparison-layout .preview-image-surface .route-caption { bottom:46px; max-height:calc(100% - 94px); }
.comparison-layout .image-hud.is-empty .preview-image-surface { display:none; }
.comparison-layout .comparison-shot .image-frame { place-items:start center; }
.comparison-layout .image-hud.is-empty .image-frame { place-items:center; }

/* Quiet prompt labels; the comparison panel now remains permanently open. */
.comparison-layout .preview-image-surface .prompt-toggle { right:8px; bottom:8px; min-width:52px; height:22px; padding:0 9px; font-size:6.5px; color:#e4d9bbb3; background:#34372f80; border-color:#b8aa8866; }
.comparison-layout .preview-image-surface .prompt-toggle:hover,
.comparison-layout .preview-image-surface .prompt-toggle:focus-visible { color:#f2e7ca; background:#34372fbb; }
.comparison-layout .preview-image-surface .prompt-toggle[aria-expanded="true"] { color:#f2e7ca; background:#665e478f; }
.comparison-layout #image-hud-toggle,.comparison-layout #image-hud-tab { display:none !important; }

/* Main comparison dial: 30% larger, centered in the footer control strip. */
.comparison-layout .image-hud .hud-meta { display:flex; align-items:center; justify-content:center; padding:0; }
.comparison-layout .image-hud .hud-step-controls { width:100%; grid-template-columns:62.4px minmax(80px,1fr) 62.4px; }
.comparison-layout .image-hud .strength-dock .strength-display,
.comparison-layout .image-hud .strength-dial { width:62.4px; height:62.4px; }
.comparison-layout .image-hud .strength-dial::before,
.comparison-layout .image-hud .strength-dial::after { inset:5.2px; }
.comparison-layout .image-hud .strength-dial i { width:3.9px; height:23.4px; }
.comparison-layout .image-hud .strength-dial b { font-size:14.3px; max-width:45px; }
.comparison-layout .feature-filters { top:auto; left:auto; bottom:auto; transform:none; }


/* Per-image strength readouts; the shared dial represents the path step. */
.comparison-layout .image-strength-knob { position:relative; width:36px; height:36px; display:grid; place-items:center; border:1px solid #a28d69; border-radius:50%; background:linear-gradient(135deg,#c0ae88,#514837 48%,#ad9670); box-shadow:0 2px 4px #0008; }
.comparison-layout .image-strength-knob::before { content:''; position:absolute; inset:3px; border-radius:50%; background:radial-gradient(circle,#33372e 0 53%,#141710 55%,transparent 58%),repeating-conic-gradient(#161a12 0deg 7deg,#77715b 8deg 11deg,#252a20 12deg 18deg); transform:rotate(var(--image-strength-angle)); }
.comparison-layout .image-strength-knob i { position:absolute; inset:5px; border-radius:50%; transform:rotate(var(--image-strength-angle)); }
.comparison-layout .image-strength-knob i::before { content:''; position:absolute; top:0; left:calc(50% - 1px); width:2px; height:4px; border-radius:2px; background:#e6d6a9; }
.comparison-layout .image-strength-knob b { position:relative; font:650 9px/1 Jura,sans-serif; color:#e4d9bb; letter-spacing:0; text-shadow:0 1px 2px #000; }
.comparison-layout .strength-display:disabled { opacity:1; cursor:default; }

.comparison-layout .image-strength-knob::before,
.comparison-layout .image-strength-knob i { transition:transform 1.25s cubic-bezier(.25,.1,.25,1); }
@media(prefers-reduced-motion:reduce) {
  .comparison-layout .image-strength-knob::before,
  .comparison-layout .image-strength-knob i { transition:none; }
}

/* Give the connector its own space between neighboring feature controls. */
.comparison-layout .feature-filters { column-gap:20px; }
.comparison-layout .feature-controls-label { position:absolute; left:0; bottom:calc(100% + 8px); color:var(--muted); font:650 10px/1.2 Jura,sans-serif; letter-spacing:.12em; }
@media(min-width:981px) and (max-width:1250px) { .comparison-layout .feature-filters { column-gap:14px; } }
@media(max-width:980px) {
 .comparison-layout .feature-controls-label { position:static; margin:0 0 10px; }
 .app-shell.comparison-layout .top-controls { min-height:188px; }
}

/* Keep button labels within their usable area at every responsive width. */
.comparison-layout .feature-choice .feature-filter { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; white-space:normal; padding:3px 5px; }
.comparison-layout .feature-button-label { display:block; min-width:0; max-width:100%; max-height:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.1; overflow:hidden; text-align:center; }
.comparison-layout .next-path-label { max-width:100%; overflow-wrap:anywhere; }
.comparison-layout .prompt-toggle { max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; }
/* Align the section subtitle with the first feature button, after its knob. */
.comparison-layout .feature-controls-label { left:29px; }
@media(min-width:981px) and (max-width:1250px) { .comparison-layout .feature-controls-label { left:27px; } }
@media(max-width:980px) { .comparison-layout .feature-controls-label { padding-left:29px; } }

/* Full-size step dial between the navigation arrows. */
.comparison-layout .image-hud .hud-step-controls { grid-template-columns:62.4px minmax(122.4px,1fr) 62.4px; grid-template-rows:62.4px auto; gap:0 6px; padding:0 8px; }
.comparison-layout .image-hud .hud-step-nav { grid-column:2; grid-row:1; width:122.4px; height:62.4px; grid-template-columns:24px 62.4px 24px; gap:6px; align-items:center; }
.comparison-layout .image-hud .hud-step-nav .strength-display { grid-column:2; grid-row:1; width:62.4px; height:62.4px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; }
.comparison-layout .image-hud .hud-step-nav .strength-dial { width:62.4px; height:62.4px; }
.comparison-layout .image-hud .hud-step-nav #prev-state { grid-column:1; grid-row:1; }
.comparison-layout .image-hud .hud-step-nav #next-state { grid-column:3; grid-row:1; }
.comparison-layout .image-hud .hud-step-controls .next-path-action { grid-column:3; grid-row:1; }
.comparison-layout .image-hud .strength-dock #hud-feature { grid-column:1/-1; grid-row:2; margin:0; }
.comparison-layout .image-hud #strength-readout { position:relative; width:28px; height:28px; max-width:none; color:#e4d9bb; font:650 13px/1 Jura,sans-serif; }
.dial-current { position:absolute; left:0; top:-1px; font-size:18px; }
.dial-total { position:absolute; right:1px; bottom:1px; font-size:8px; opacity:.75; }
.dial-divider { position:absolute; left:13px; top:5px; width:1px; height:21px; background:currentColor; transform:rotate(35deg); opacity:.65; }
.app-shell.comparison-layout .image-hud { grid-template-rows:minmax(0,1fr) minmax(0,1fr) 78px; }
@media(max-width:980px) { .app-shell.comparison-layout .image-hud { grid-template-rows:minmax(230px,1fr) minmax(230px,1fr) 78px; } }
@media(max-width:1150px) {
 .comparison-layout .image-hud .hud-step-controls { grid-template-columns:minmax(0,1fr) 122.4px 48px; }
}
/* More breathing room around the unchanged 62.4px step knob. */
.comparison-layout .image-hud .hud-step-controls { grid-template-columns:minmax(0,1fr) 195.22px minmax(48px,1fr); }
.comparison-layout .image-hud .hud-step-nav { width:195.22px; grid-template-columns:46.41px 62.4px 46.41px; gap:20px; }
.comparison-layout .image-hud .hud-step-nav .arrow { width:46.41px; height:34px; }
@media(max-width:980px) {
 .comparison-layout .image-hud .hud-step-nav { width:163.22px; gap:4px; }
}
@media(max-width:360px) {
 .comparison-layout .image-hud .hud-step-nav { width:156.4px; grid-template-columns:43px 62.4px 43px; gap:4px; }
 .comparison-layout .image-hud .hud-step-nav .arrow { width:43px; }
}
.dial-current { left:4px; top:3px; font-size:15px; }
.dial-divider { left:14px; top:6px; height:17px; }
.dial-total { right:7px; bottom:3px; }

/* Feature label centered in the existing header space above the image pair. */
.comparison-layout .image-hud > #hud-feature { position:absolute; top:0; left:20px; right:20px; height:28px; margin:0; display:flex; align-items:center; justify-content:center; gap:4px; color:var(--accent); font:600 12px/1.2 Jura,sans-serif; text-align:center; white-space:nowrap; overflow:hidden; }
.comparison-layout .image-hud > #hud-feature strong { min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* Center the heading over Subject Fade, including responsive column widths. */
.comparison-layout .feature-controls-label { position:absolute; bottom:calc(100% + 8px); padding:0; margin:0; text-align:center; }

/* Quiet invitation to advance; completed journeys stay quiet when stepping back. */
.comparison-layout .image-hud.step-hint-active #next-state,
.comparison-layout .image-hud.step-hint-active .hud-step-nav .strength-display {
 animation: step-invitation 2.6s ease-in-out infinite;
}
.comparison-layout .image-hud.step-hint-active #next-state {
 --pulse-ring:3px; --pulse-ring-alpha:.23; --pulse-blur:15px; --pulse-glow-alpha:.38;
}
.comparison-layout .image-hud.step-hint-active .hud-step-nav .strength-display {
 --pulse-ring:5px; --pulse-ring-alpha:.41; --pulse-blur:25px; --pulse-glow-alpha:.66;
}
@keyframes step-invitation {
 0%,100% { box-shadow:0 0 0 0 rgba(212,181,120,0),0 0 0 rgba(212,181,120,0); }
 50% { box-shadow:0 0 0 var(--pulse-ring) rgba(212,181,120,var(--pulse-ring-alpha)),0 0 var(--pulse-blur) rgba(212,181,120,var(--pulse-glow-alpha)); }
}
@media(prefers-reduced-motion:reduce) {
 .comparison-layout .image-hud.step-hint-active #next-state,
 .comparison-layout .image-hud.step-hint-active .hud-step-nav .strength-display { animation:none; }
}

.comparison-layout .image-hud.is-empty > #hud-feature { display:none; }

/* Unified rounded preview frame, preserving the existing control positions. */
body .app-shell.comparison-layout .image-hud {
 isolation:isolate; background:transparent; border-color:transparent;
 box-shadow:none; backdrop-filter:none;
}
.comparison-layout .preview-tray-frame {
 position:absolute; inset:0; width:100%; height:100%; z-index:-1; overflow:visible;
 pointer-events:none; fill:var(--glass); stroke:var(--line-strong); stroke-width:1;
}
body[data-theme="dune"] .comparison-layout .preview-tray-frame { fill:rgba(8,8,7,.61); stroke:rgba(184,177,164,.34); }
.comparison-layout .image-hud .hud-step-controls .next-path-action { translate:22px 0; width:60px; height:38px; border-radius:10px; }



.comparison-layout .image-hud .hud-step-controls .next-path-action::before { border-radius:7px; }

/* The rounded image surface clips its own content while allowing notch alignment. */
.comparison-layout .comparison-shot .image-frame { overflow:visible; }

/* Help lives over the lower preview, with its toggle anchored in the footer. */
body.explorer-active .comparison-layout .image-hud .map-key,
body.explorer-active .comparison-layout .image-hud .map-key.collapsed {
 position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none;
 margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
 backdrop-filter:none; pointer-events:none; overflow:visible;
}
.comparison-layout .image-hud .map-key .map-key-head { right:16px; bottom:auto; pointer-events:auto; }
.comparison-layout .image-hud .map-key .map-key-content {
 position:absolute; box-sizing:border-box; margin:0; padding:16px; max-height:none;
 border:1px solid var(--line-strong); border-radius:20px; background:var(--panel-solid);
 overflow-y:auto; pointer-events:auto; box-shadow:0 8px 24px #0005;
}
body[data-theme="dune"] .comparison-layout .image-hud .map-key-content { background:#1b1712; }
.comparison-layout .image-hud #map-key-toggle[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.comparison-layout .image-hud .map-key-intro,
.comparison-layout .image-hud .map-key .key-item { font-size:11px; line-height:1.4; }
.comparison-layout .image-hud .map-key .key-grid { gap:8px; margin-top:19px; }

/* Give the introduction more emphasis and balance the help panel's vertical space. */
.comparison-layout .image-hud .map-key:not(.collapsed) .map-key-content {
 display:flex; flex-direction:column; justify-content:safe center; padding:20px 16px;
}
.comparison-layout .image-hud .map-key-content > * { flex-shrink:0; }
.comparison-layout .image-hud .map-key .map-key-intro { display:grid; gap:1.45em; font-size:13px; line-height:1.45; }
.comparison-layout .image-hud .map-key-intro h3,
.comparison-layout .image-hud .map-key-intro p { margin:0; font:inherit; }
.comparison-layout .image-hud .map-key-intro h3 { color:var(--text); font-weight:700; }

.comparison-layout .brand-tab .pilot-tag { opacity:.5; }

@media(min-width:981px) {
 .app-shell.comparison-layout .top-controls { transform:translateX(8px); }
 .comparison-layout .feature-controls-label {
  left:auto; right:calc(100% + 14px); top:50%; bottom:auto; width:auto;
  transform:translateY(-50%); white-space:nowrap; text-align:right;
 }
}

/* Small brass console switch, paired with the Language Edge nameplate. */
.edge-power {
 display:inline-flex; align-items:center; justify-content:center; gap:7px;
 width:57px; height:25px; padding:0 6px; border:2px solid #a18c65; border-radius:6px;
 background:linear-gradient(145deg,#454637,#191c15 70%); color:#e4d9bb;
 box-shadow:0 0 0 1px #423a2b,inset 0 1px 2px #fff2ce55,0 3px 0 #11130e,0 4px 5px #0006;
 font:700 9px/1 Jura,sans-serif; letter-spacing:.08em; cursor:pointer;
}
.edge-power[aria-checked="true"] { color:#65cafa; border-color:#6a9cab; background:linear-gradient(145deg,#344955,#17252b 70%); box-shadow:0 0 0 1px #30454a,inset 0 1px 2px #bef0ff44,0 0 8px #65cafa33,0 3px 0 #11130e,0 4px 5px #0006; }
.edge-power-led { width:6px; height:6px; flex:none; border-radius:50%; background:#65cafa; box-shadow:0 0 6px #65cafa99,inset 0 1px 1px #fff9; }
.edge-power[aria-checked="false"] { color:#aaa696; background:linear-gradient(145deg,#303228,#11140e); }
.edge-power[aria-checked="false"] .edge-power-led { background:#615c4d; box-shadow:inset 0 1px 2px #0009; }
.edge-power:active { box-shadow:0 0 0 1px #423a2b,inset 0 2px 4px #0008; }
.edge-power:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

/* Compact Home in the dark frame corner; Refresh joins the camera controls. */
.app-shell.comparison-layout .reset-control { left:8px; top:8px !important; }
.app-shell.comparison-layout .reset-control .back-to-tour { width:28px; height:28px; border:0; border-radius:8px; padding:6px; display:grid; place-items:center; background:transparent; box-shadow:none; backdrop-filter:none; color:var(--muted); }
.app-shell.comparison-layout .reset-control .back-to-tour:hover { color:var(--accent); }
.app-shell.comparison-layout .reset-control .back-to-tour:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.app-shell.comparison-layout .reset-control .back-to-tour::after { left:0; transform:translateY(-3px); }
.app-shell.comparison-layout .reset-control .back-to-tour:is(:hover,:focus-visible)::after { transform:translateY(0); }
.comparison-layout .reset-control svg { width:16px; height:16px; }
.comparison-layout .mode-control #reset-view { order:4; position:relative; width:24px; height:24px; padding:4px; border-radius:50%; display:grid; place-items:center; }
.comparison-layout .mode-control #reset-view svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@media(min-width:981px) { .comparison-layout .mode-control { right:calc(var(--compare-width) + 54px); } }

/* Match the three primary circular controls at 90% of the former help size. */
.comparison-layout .mode-control #mode-toggle,
.comparison-layout .mode-control #reset-view,
.comparison-layout .image-hud .map-key #map-key-toggle,
.comparison-layout .image-hud .map-key .map-key-head {
 width:39.6px; height:39.6px; min-height:39.6px; max-height:39.6px; border-radius:50%;
}

/* Extend only the preview frame; its contents retain their existing positions. */
@media(min-width:981px) { .comparison-layout .preview-tray-frame { height:calc(100% + 16px); } }

/* Equal-sized camera/theme controls with consistent spacing. */
.comparison-layout .mode-control { gap:12px; }
.comparison-layout .mode-control #spin-toggle,
.comparison-layout .mode-control #theme-toggle,
.comparison-layout .mode-control #mode-toggle,
.comparison-layout .mode-control #reset-view {
 width:31.2px; height:31.2px; min-width:31.2px; min-height:31.2px;
 max-width:31.2px; max-height:31.2px; flex:0 0 31.2px; border-radius:50%; padding:4px;
}

.comparison-layout .mode-control #reset-view {
 width:37.44px; height:37.44px; min-width:37.44px; min-height:37.44px;
 max-width:37.44px; max-height:37.44px; flex-basis:37.44px;
}

/* Help unfolds from its corner; either close control dismisses the same panel. */
.comparison-layout .image-hud #map-key-close {
 position:absolute; top:7px; right:7px; width:24px; height:24px; padding:0;
 display:grid; place-items:center; border:0; border-radius:50%;
 background:transparent; color:var(--muted); font:400 18px/1 sans-serif; cursor:pointer;
}
.comparison-layout .image-hud #map-key-close:hover { color:var(--text); background:#ffffff0a; }
.comparison-layout .image-hud #map-key-close:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.comparison-layout .image-hud .map-key:not(.collapsed) .map-key-content {
 padding-top:20px; padding-bottom:20px; transform-origin:top right;
 animation:help-corner-open .28s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes help-corner-open {
 from { opacity:0; transform:translate(3px,-3px) scale(.95); }
 to { opacity:1; transform:translate(0,0) scale(1); }
}
@media(prefers-reduced-motion:reduce) {
 .comparison-layout .image-hud .map-key:not(.collapsed) .map-key-content { animation:none; }
}

/* Keep both movement labels comfortably inside the compact circle. */
.comparison-layout .mode-control #mode-toggle { font-size:9px; padding:0; }
.comparison-layout .mode-control #mode-toggle.active { font-size:8px; }

/* A group heading inside the lower notch, aligned with its first knob. */
.comparison-layout .feature-controls-label {
 left:0; right:auto; top:auto; bottom:calc(100% + 10px); width:auto;
 transform:none; text-align:left; padding:0; font-size:9px; line-height:1.2;
}
@media(max-width:980px) {
 .comparison-layout .feature-controls-label { position:static; margin:0 0 10px; }
}

/* Align the group heading to the feature buttons' right edge. */
.comparison-layout .feature-controls-label { left:auto; right:0; text-align:right; }

/* Enlarge the main dial around its center without shifting the footer controls. */
.comparison-layout .image-hud .hud-step-nav .strength-display { transform:scale(1.2); transform-origin:center; }
.comparison-layout .image-hud .hud-step-nav .arrow { height:39.1px; }

@media(max-width:360px) {
 .comparison-layout .image-hud .hud-step-nav { width:162.4px; gap:7px; }
}

/* A little more breathing room beside the enlarged main dial. */
.comparison-layout .image-hud .hud-step-nav { width:203.22px; gap:24px; }
.comparison-layout .image-hud .hud-step-controls { grid-template-columns:minmax(0,1fr) 203.22px minmax(48px,1fr); }
@media(max-width:360px) {
 .comparison-layout .image-hud .hud-step-nav { width:168.4px; gap:10px; }
}

.comparison-layout .brand-name { font-size:19px; letter-spacing:.25em; white-space:nowrap; }
.comparison-layout .brand-obscura { font-size:inherit; letter-spacing:inherit; }
@media(max-width:360px) { .comparison-layout .brand-name { letter-spacing:.18em; } }

/* One shared scale preserves button sizes and spacing when the rail is narrow. */
.comparison-layout .image-hud .map-key #map-key-toggle,
.comparison-layout .image-hud .map-key .map-key-head {
 width:37.44px; height:37.44px; min-width:37.44px; min-height:37.44px; max-height:37.44px;
}
.comparison-layout .image-hud .hud-step-nav,
.comparison-layout .image-hud .next-path-action,
.comparison-layout .image-hud .map-key .map-key-head,
.comparison-layout .mode-control > button { zoom:var(--control-fit,1); }
.comparison-layout .mode-control { gap:calc(12px * var(--control-fit,1)); }

/* A single, open console detail for Language Edge and its power switch. */
.comparison-layout .lower-rail .edge-title { gap:0; flex-wrap:nowrap; }
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle {
 height:29px; padding:0 13px 0 9px; background:transparent; border:0;
 border-bottom:1px solid #a18c6570; border-radius:0; box-shadow:none;
 letter-spacing:.09em; font-size:10px; color:#c5bea9;
}
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle::before {
 content:''; position:absolute; left:0; top:7px; bottom:6px; width:3px;
 border-left:1px solid #b8a582; border-top:1px solid #b8a582;
 transform:skewY(-30deg); opacity:.7;
}
.comparison-layout .edge-title .edge-power {
 height:29px; border:1px solid #a18c6580; border-radius:0 9px 9px 0;
 background:linear-gradient(120deg,#a18c6512,transparent); box-shadow:inset 0 1px #e4d9bb15;
}
.comparison-layout .edge-title .edge-power[aria-checked="true"] {
 border-color:#a18c6580; color:#a9d8e3; background:linear-gradient(120deg,#65cafa0c,transparent);
 box-shadow:inset 0 1px #e4d9bb15;
}
.comparison-layout .edge-title .edge-power[aria-checked="false"] { background:transparent; box-shadow:none; }

/* Match the step dial's aged brass rim and recessed instrument face. */
.comparison-layout .edge-title .edge-power,
.comparison-layout .edge-title .edge-power[aria-checked="true"],
.comparison-layout .edge-title .edge-power[aria-checked="false"] {
 position:relative; isolation:isolate; border:1px solid #8d806b; border-radius:8px;
 background:linear-gradient(135deg,#c0ae88,#514837 48%,#ad9670);
 box-shadow:0 0 0 1px #100f0d,inset 0 1px #fff0bf65,0 2px 0 #151610,1px 4px 5px #0008;
 color:#e4d9bb; text-shadow:0 1px 1px #000; letter-spacing:.08em;
}
.comparison-layout .edge-title .edge-power::before {
 content:''; position:absolute; inset:3px; z-index:-1; border-radius:5px;
 border:1px solid #968d7680;
 background:linear-gradient(145deg,#ffffff0b,transparent 45%,#0005),repeating-linear-gradient(90deg,#303429 0 2px,#292d23 2px 3px);
 box-shadow:inset 1px 1px 2px #fff3ca20,inset -1px -2px 3px #000a;
}
.comparison-layout .edge-title .edge-power:active {
 box-shadow:0 0 0 1px #100f0d,inset 0 1px 3px #0008,0 1px 0 #151610;
}
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle { border-bottom-color:#a18c6590; }

/* Status, label and brass switch share a single row; explanation sits under the label. */
.comparison-layout .lower-rail .edge-block { display:grid; grid-template-columns:68px auto 57px; column-gap:0; padding-left:0; }
.comparison-layout .lower-rail .edge-title { display:contents; }
.comparison-layout .edge-title .edge-result-row { grid-column:1; grid-row:1; margin:0; gap:6px; align-self:center; justify-content:flex-start; }
.comparison-layout .edge-title .edge-result-row #language-edge { flex-basis:auto; font:600 9px/1.2 Jura,sans-serif; letter-spacing:.05em; }
.comparison-layout .edge-title .edge-result-row .edge-status-light { width:7px; height:7px; flex-basis:7px; }
.comparison-layout .edge-title .edge-toggle { grid-column:2; grid-row:1; }
.comparison-layout .edge-title .edge-power { grid-column:3; grid-row:1; }
.comparison-layout .lower-rail .edge-block > details { grid-column:2; grid-row:2; position:static; margin:5px 0 0; text-align:center; font-size:10px; }
.comparison-layout .edge-block > details > summary { list-style:none; cursor:pointer; color:var(--muted); }
.comparison-layout .edge-block > details > summary::-webkit-details-marker { display:none; }
.comparison-layout .edge-block > details > summary:hover { color:var(--text); }
.comparison-layout .edge-block > details > .edge-about-popover { position:absolute; z-index:15; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); display:grid; gap:1.5em; width:280px; max-width:65vw; max-height:calc(100svh - 32px); padding:14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel-solid); overflow-y:auto; text-align:left; line-height:1.5; }
.comparison-layout .edge-about-popover p { margin:0; }

/* A continuous brass outline groups the three Language Edge sections. */
.comparison-layout .edge-title .edge-result-row {
 box-sizing:border-box; height:29px; width:100%; padding:0 8px;
 border:1px solid #aa936c; border-right:0; border-radius:8px 0 0 8px;
 box-shadow:inset 0 1px #f2d9a51a; justify-content:center;
}
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle {
 border:1px solid #aa936c; border-right:0; border-radius:0;
 padding:0 10px; box-shadow:inset 0 1px #f2d9a51a;
}
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle::before { display:none; }
.comparison-layout .edge-title .edge-power,
.comparison-layout .edge-title .edge-power[aria-checked="true"],
.comparison-layout .edge-title .edge-power[aria-checked="false"] {
 border-radius:0 8px 8px 0; border-color:#aa936c;
 box-shadow:inset 0 1px #fff0bf65,0 2px 3px #0005;
}
.comparison-layout .edge-title .edge-power::before { border-radius:2px 5px 5px 2px; }

/* Breathing room for the status and explanation label. */
.comparison-layout .lower-rail .edge-block { grid-template-columns:88px auto 57px; }
.comparison-layout .edge-title .edge-result-row { padding:0 14px; }
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle { padding:0 18px; }

/* Warm warning light for states outside sampled caption coverage. */
.comparison-layout .edge-title .edge-result-row {
 transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease;
}
.comparison-layout .edge-title .edge-result-row:has(.edge-status-light[data-status="outside"]) {
 border-color:#d49a60; color:#edbb87; background:rgba(206,116,43,.12);
 box-shadow:inset 0 0 10px #d7863b25,0 0 12px #d7863b38;
}
.comparison-layout .edge-title .edge-result-row:has(.edge-status-light[data-status="outside"]) #language-edge {
 color:#edbb87; text-shadow:0 0 7px #e99d5755;
}

@media(min-width:981px) {
 /* Match the diagram's 24px inset plus the instruction's 32px inset. */
 .app-shell.comparison-layout .lower-rail { left:56px; }
}

/* An open center keeps the preview background visible inside the brass rim. */
.comparison-layout .image-hud .hud-step-controls .next-path-action,
.comparison-layout .image-hud .hud-step-controls .next-path-action:hover:not(:disabled) { background:transparent; }
.comparison-layout .image-hud .hud-step-controls .next-path-action::before {
 inset:0; padding:4px; border:0; border-radius:inherit; box-shadow:none;
 background:linear-gradient(135deg,#c0ae88,#514837 48%,#ad9670);
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask-composite:exclude;
}
.comparison-layout .image-hud .hud-step-controls .next-path-action:hover:not(:disabled)::before {
 background:linear-gradient(135deg,#ddcba1,#736345 48%,#c3a77b);
}

/* Center the badge against the title, independent of font metrics or viewport. */
.comparison-layout .brand-tab > span { display:inline-flex; align-items:center; gap:11px; white-space:nowrap; }
.comparison-layout .brand-tab .brand-name { line-height:1; }
.comparison-layout .brand-tab .pilot-tag { display:inline-flex; align-items:center; justify-content:center; flex:none; margin:0; vertical-align:initial; }

/* Invite the first selection while the empty-state guidance is visible. */
.comparison-layout:has(.image-hud.is-empty .map-key:not(.collapsed)) .feature-mini-knob {
 animation:feature-knob-invitation 2.2s ease-in-out infinite;
}
@keyframes feature-knob-invitation {
 0%,100% { box-shadow:0 2px 3px #0009,0 0 0 1px #dfbd7940,0 0 7px #dfbd7930; }
 50% { box-shadow:0 2px 3px #0009,0 0 0 2px #edc98466,0 0 14px #e5b96788,0 0 22px #e5b96740; }
}
@media(prefers-reduced-motion:reduce) {
 .comparison-layout:has(.image-hud.is-empty .map-key:not(.collapsed)) .feature-mini-knob {
  animation:none; box-shadow:0 0 0 2px #edc98466,0 0 12px #e5b96777;
 }
}

.comparison-layout .mode-control #reset-view {
 width:43.056px; height:43.056px; min-width:43.056px; min-height:43.056px;
 max-width:43.056px; max-height:43.056px; flex-basis:43.056px;
}

/* Draw one uninterrupted outline rather than joining separate section borders. */
.comparison-layout .lower-rail .edge-block::before {
 content:''; position:absolute; top:0; left:0; right:0; height:29px;
 box-sizing:border-box; border:1px solid #aa936c; border-radius:8px;
 pointer-events:none; z-index:1;
}
.comparison-layout .edge-title .edge-result-row { border:0; box-shadow:none; }
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle {
 border:0; border-left:1px solid #aa936c; box-shadow:none;
}
.comparison-layout .edge-title .edge-result-row,
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle,
.comparison-layout .edge-title .edge-power { box-sizing:border-box; height:29px; align-self:start; margin-top:0; }

.comparison-layout .image-hud > #hud-feature { font-size:14.4px; }

.comparison-layout .image-hud.is-empty .frame-status { font-size:19px; letter-spacing:.06em; }
#feature-connection .empty-feature-guide { stroke-width:1.5; opacity:.65; stroke-dasharray:none; animation:none; }

/* Only the lower empty slot carries the feature-selection invitation. */
.comparison-layout .image-hud.is-empty #comparison-status { font-size:19px; letter-spacing:.06em; }
.comparison-layout .image-hud.is-empty .frame-status { display:none; }

/* The label itself opens the explanation; keep the instrument vertically centered. */
.comparison-layout .lower-rail .edge-block > details {
 position:absolute; grid-area:auto; left:0; right:0; top:0; bottom:auto; height:0; margin:0;
}
.comparison-layout .edge-block > details > summary { display:none; }
.comparison-layout .edge-block > details > .edge-about-popover { bottom:8px; }
.comparison-layout .lower-rail .edge-block { grid-template-rows:29px; align-self:center; }
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle {
 transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.app-shell.comparison-layout .lower-rail .edge-title .edge-toggle:is(:hover,:focus-visible) {
 background:rgba(196,164,105,.16); color:#f0dab0;
 box-shadow:inset 0 0 12px #d6b77720;
}

/* Help is a dedicated view; selection stays intact underneath for restoration. */
.comparison-layout .image-hud.help-mode .comparison-shot,
.comparison-layout .image-hud.help-mode > #hud-feature { visibility:hidden; pointer-events:none; }
.comparison-layout:has(.image-hud.help-mode) #feature-connection { visibility:hidden; }

/* One shared help/empty state, with a compact invitation beneath the guide. */
.comparison-layout .help-feature-invitation {
 display:none; position:absolute; box-sizing:border-box; padding:11px 8px;
 border:1px solid var(--line-strong); border-radius:9px;
 color:var(--muted); background:var(--glass); text-align:center;
 font:600 13px/1.3 Jura,sans-serif; letter-spacing:.06em; pointer-events:none;
}
.comparison-layout .image-hud.help-mode .help-feature-invitation { display:block; }
.comparison-layout .image-hud.is-empty #comparison-status { display:none; }
.comparison-layout:has(.image-hud.help-mode) #feature-connection { visibility:visible; }
.comparison-layout:has(.image-hud.help-mode) #feature-connection > path:not(.empty-feature-guide) { visibility:hidden; }

/* A single help panel with a direct first-feature action and readable instructions. */
.comparison-layout .image-hud .map-key:not(.collapsed) .map-key-content {
 justify-content:flex-start; padding:27px 18px 22px;
}
.comparison-layout .image-hud .map-key-intro { width:100%; }
.comparison-layout .image-hud .map-key-intro h3 {
 margin:0 0 17px; text-align:center; font:650 13px/1.3 Jura,sans-serif;
}
.comparison-layout .help-select-feature {
 display:block; width:100%; padding:10px 6px; border:1px solid #aa936c;
 border-radius:8px; background:transparent; color:var(--text);
 font:650 13px/1.3 Jura,sans-serif; cursor:pointer;
}
.comparison-layout .help-select-feature:hover { background:#c4a46922; border-color:#e0c28c; }
.comparison-layout .help-select-feature:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.comparison-layout .help-instructions { margin:22px 0 0; padding-left:16px; font:500 12px/1.5 Jura,sans-serif; color:var(--muted); }
.comparison-layout .help-instructions li { margin:0 0 15px; padding-left:3px; }
.comparison-layout .help-instructions li:nth-child(3) { margin-top:26px; }
.comparison-layout .help-instructions li::marker { color:#baa47e; }
.comparison-layout .help-instructions li:last-child { margin-bottom:0; }

/* Equal visible gaps account for the dial's 1.2x visual size. */
.comparison-layout .image-hud .hud-step-nav { width:202.88px; grid-template-columns:52px 62.4px 52px; gap:18.24px; }
.comparison-layout .image-hud .hud-step-nav .arrow { width:52px; }
.comparison-layout .image-hud .hud-step-controls { grid-template-columns:minmax(0,1fr) 202.88px minmax(48px,1fr); }
.comparison-layout .image-hud .map-key .key-grid { margin-top:24px; gap:13px; }
.comparison-layout .image-hud .map-key .key-item { font:500 12px/1.5 Jura,sans-serif; }

/* Wider arrows with equal breathing room throughout the footer. */
.comparison-layout .image-hud .hud-step-nav {
 width:255.28px; grid-template-columns:70.2px 62.4px 70.2px; gap:26.24px;
}
.comparison-layout .image-hud .hud-step-nav .arrow { width:70.2px; }
.comparison-layout .image-hud .hud-step-controls { grid-template-columns:minmax(0,1fr) 255.28px minmax(48px,1fr); }

.comparison-layout .image-hud .help-elements-heading {
 margin:30px 0 0; text-align:center; color:var(--text);
 font:650 13px/1.3 Jura,sans-serif; letter-spacing:.04em;
}
.comparison-layout .image-hud .map-key .key-grid { margin-top:18px; }

.comparison-layout .image-hud .map-key:not(.collapsed) .map-key-content { padding-inline:8px; }
.comparison-layout .help-instructions { padding-left:12px; }
.comparison-layout .help-instructions li { padding-left:2px; }

/* Center the help content and align the action with the diagram text column. */
.comparison-layout .help-select-feature {
 width:max-content; max-width:calc(100% - 46px); margin-inline:23px auto;
 padding:10px 28px; text-align:left;
}
.comparison-layout .help-instructions { padding-left:0; text-align:center; list-style-position:inside; }
.comparison-layout .help-instructions li { padding-left:0; }
.comparison-layout .image-hud .map-key .key-item { text-align:center; align-items:center; }
.comparison-layout .image-hud .map-key .key-item > span:last-child { text-align:center; }

.comparison-layout .image-hud .map-key .key-item { display:block; position:relative; padding-inline:32px; }
.comparison-layout .image-hud .map-key .key-item > .key-symbol { position:absolute; left:0; top:50%; transform:translateY(-50%); }
@media(min-width:981px) { .comparison-layout .help-instructions li:first-child { white-space:nowrap; } }

.comparison-layout .image-hud .help-elements-heading { margin-top:50px; }

/* All help copy shares the action button's left edge. */
.comparison-layout .image-hud .map-key-intro h3 { text-align:left; margin-left:23px; }
.comparison-layout .help-instructions,
.comparison-layout .image-hud .help-elements-heading,
.comparison-layout .image-hud .map-key .key-grid { margin-left:23px; margin-right:23px; text-align:left; }
.comparison-layout .help-instructions { list-style-position:outside; }
.comparison-layout .image-hud .map-key .key-item { padding-inline:0; text-align:left; }
.comparison-layout .image-hud .map-key .key-item > span:last-child { text-align:left; }
.comparison-layout .image-hud .map-key .key-item > .key-symbol { left:-35px; }
@media(min-width:981px) {
 .comparison-layout .help-instructions li { white-space:normal; }
}

.comparison-layout .image-hud .map-key .key-item > .key-symbol { left:-26px; width:22px; font-size:8.5px; }
.comparison-layout .image-hud .map-key .key-circle { width:20px; height:20px; }
.comparison-layout .image-hud .map-key .key-territory { height:15px; }

.comparison-layout .help-instructions li:first-child { white-space:normal; }

/* Circular control hints sit on the button centerline and appear only on hover. */
.comparison-layout .mode-control [data-tooltip]::after,
.comparison-layout .reset-control [data-tooltip]::after {
 left:50%; right:auto; top:calc(100% + 7px); bottom:auto;
 transform:translate(-50%,-3px); text-align:center;
}
.comparison-layout .mode-control [data-tooltip]:hover::after,
.comparison-layout .reset-control [data-tooltip]:hover::after { transform:translate(-50%,0); }

/* Align the markers themselves, rather than their text, to the action edge. */
.comparison-layout .help-instructions { list-style:none; }
.comparison-layout .help-instructions li { position:relative; padding-left:16px; }
.comparison-layout .help-instructions li::before { content:'•'; position:absolute; left:0; top:0; color:#baa47e; }
.comparison-layout .image-hud .map-key .key-item { padding-left:32px; }
.comparison-layout .image-hud .map-key .key-item > .key-symbol { left:0; }
.comparison-layout .image-hud .map-key .key-line { width:26px; height:26px; }
.comparison-layout .image-hud .map-key .key-line::before { display:none; }
.comparison-layout .image-hud .map-key .key-line svg { width:26px; height:26px; overflow:visible; }
.comparison-layout .image-hud .map-key .key-line path { fill:none; stroke:var(--accent); stroke-width:1.4; }
.comparison-layout .image-hud .map-key .key-line circle { fill:var(--accent); }

/* A miniature numbered sphere mirrors the graph's shaded balls. */
.comparison-layout .image-hud .map-key .key-circle {
 border:1px solid #8e9392;
 background:radial-gradient(circle at 30% 24%,#b8bfbe 0%,#8d9694 24%,#626d6b 52%,#343e3c 78%,#18201f 100%);
 color:var(--accent); text-shadow:0 1px color-mix(in srgb, var(--accent) 33%, transparent);
 box-shadow:inset 1px 1px 2px #ffffff77,inset -2px -2px 3px #07152388,1px 2px 3px #0008;
 font-weight:750;
}

.comparison-layout .image-hud .map-key .key-circle { color:#000; text-shadow:none; }

/* Subtle gray tint on the frame surrounding the interactive diagram. */
body.explorer-active .dune-shell-mask-surface {
  fill: color-mix(in srgb, var(--panel) 90%, gray 10%);
}

body.explorer-active .comparison-layout .image-hud .map-key .map-key-content {
  background: color-mix(in srgb, var(--panel) 90%, gray 10%);
}

/* Improve explorer copy readability without changing control geometry. */
.comparison-layout .feature-choice .feature-filter {
  font-size:12px;
  color:color-mix(in srgb, var(--muted) 30%, var(--text));
}
.comparison-layout .interaction-copy {
  font-size:12px;
  color:color-mix(in srgb, var(--muted) 85%, var(--text));
}
.comparison-layout .help-instructions,
.comparison-layout .image-hud .map-key .key-item {
  font-size:13px;
  color:color-mix(in srgb, var(--muted) 45%, var(--text));
}
.comparison-layout .image-hud .map-key-intro h3,
.comparison-layout .image-hud .help-elements-heading {
  font-size:14px;
}

/* Larger feature buttons; preserve knob size and the gaps between controls. */
.comparison-layout .feature-choice .feature-filter { height:34.5px; }
.comparison-layout .feature-filters { grid-template-rows:repeat(2,38.5px); }
@media(min-width:981px) {
  .app-shell.comparison-layout .top-controls {
    --feature-base-left:calc((100% - var(--compare-width) - 56px) * .55 + 24px);
    left:calc(var(--feature-base-left) - (100% - var(--compare-width) - 40px - var(--feature-base-left) - 176px) * .15);
  }
}
@media(min-width:981px) and (max-width:1250px) {
  .app-shell.comparison-layout .top-controls {
    --feature-base-left:40%;
    left:calc(var(--feature-base-left) - (100% - var(--compare-width) - 40px - var(--feature-base-left) - 158px) * .15);
  }
}
@media(max-width:980px) {
  .comparison-layout .feature-filters { grid-template-rows:repeat(4,38.5px); }
  .app-shell.comparison-layout .top-controls { min-height:206px; }
}

/* Match Next feature to the arrows and reduce the help control by 15%. */
.comparison-layout .image-hud .hud-step-controls .next-path-action {
  width:70.2px; height:39.1px;
}
.comparison-layout .image-hud .map-key #map-key-toggle,
.comparison-layout .image-hud .map-key .map-key-head {
  width:31.824px; height:31.824px;
  min-width:31.824px; max-width:31.824px;
  min-height:31.824px; max-height:31.824px;
}

@media(min-width:981px) {
 .app-shell.comparison-layout .top-controls { translate:-24px 0; }
}

.comparison-layout .feature-controls-label { font-size:12px; }

.comparison-layout .interaction-copy,
.comparison-layout .feature-controls-label { color:#3c3a36; }

/* Trim the help panel's trailing space while preserving text size and line lengths. */
.comparison-layout .help-instructions,
.comparison-layout .image-hud .map-key .key-grid {
  margin-right:5px;
}

.comparison-layout .creator-credit { position:absolute; z-index:12; transform:translateX(-100%); padding:1px 0; text-align:right; white-space:nowrap; color:#3c3a36; font:500 13.5px/21px Jura,sans-serif; text-decoration:none; text-shadow:none; transition:color .22s ease,text-shadow .22s ease; }
.comparison-layout .creator-credit[hidden] { display:none; }
.comparison-layout .creator-credit:hover,
.comparison-layout .creator-credit:focus-visible { color:#e4d9bb; text-shadow:0 0 10px #e4d9bb40; }
.comparison-layout .creator-credit:focus-visible { outline:1px solid #d4ac7680; outline-offset:3px; border-radius:3px; }

/* The empty-selection guide uses the same ink as the explorer wordmark. */
.comparison-layout .image-hud .map-key .map-key-content,
.comparison-layout .image-hud .map-key .map-key-content :is(h3,p,li,b,button,.key-item,.key-item > span:last-child) { color:var(--accent); }
body.explorer-active:not(.walkthrough-active) .comparison-layout .image-hud.is-empty .help-select-feature { animation:help-feature-attention 2.8s ease-in-out infinite alternate; }
@keyframes help-feature-attention {
  from { background-color:#d4ac7605; box-shadow:0 0 0 0 #d4ac7600,0 0 8px #d4ac7608; }
  to { background-color:#d4ac7614; box-shadow:0 0 0 5px #d4ac7612,0 0 22px #d4ac7624; }
}
@media(prefers-reduced-motion:reduce) {
  body.explorer-active:not(.walkthrough-active) .comparison-layout .image-hud.is-empty .help-select-feature { animation:none; background-color:#d4ac760c; box-shadow:0 0 12px #d4ac7618; }
}