:root {
  --bg: #101919;
  --panel: #162222;
  --panel2: #1b2929;
  --ink: #e6eeea;
  --muted: #8d9e98;
  --line: #2a3a35;
  --lime: #c9ef8e;
  --cyan: #75ded7;
  --orange: #e8b177;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: dark
}

.flight-mode-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.flight-mode-switch { display:flex; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.flight-mode-switch button { padding:9px 15px; border-radius:6px; background:transparent; color:var(--muted); white-space:nowrap; }
.flight-mode-switch button[aria-pressed="true"] { background:var(--lime); color:var(--bg); }
.flight-mode-switch span { font:10px var(--mono); margin-left:6px; opacity:.7; }
#flight-mode-hint { font-size:11px; color:var(--muted); }
.manual-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; margin:0 0 18px; background:linear-gradient(125deg,#20332d,var(--panel)); border:1px solid #43553e; border-radius:12px; }
.manual-copy h2 { font-size:20px; margin:4px 0 12px; }
.manual-copy p:not(.eyebrow) { color:var(--muted); font-size:12px; line-height:2; }
.manual-copy kbd { font:11px var(--mono); padding:2px 4px; margin-right:2px; color:var(--ink); border:1px solid #4b5d50; border-radius:3px; }
.manual-copy>small { display:block; font-size:10px; color:var(--muted); line-height:1.7; }
#manual-status { display:block; margin:12px 0 5px; font-size:12px; color:var(--ink); }
#manual-status.moving { color:var(--lime); }
.flight-pad { flex-shrink:0; display:grid; grid-template-columns:repeat(3,54px); grid-template-rows:repeat(3,54px); gap:5px; }
.flight-pad button { border:1px solid #4c6154; border-radius:9px; background:#243c32; font:21px var(--mono); touch-action:none; user-select:none; -webkit-user-select:none; }
.flight-pad button small { display:block; font:9px var(--mono); margin-top:2px; color:var(--muted); }
.flight-pad [data-flight-direction="forward"] { grid-area:1/2; }
.flight-pad [data-flight-direction="left"] { grid-area:2/1; }
.flight-pad [data-flight-direction="yawLeft"] { grid-area:1/1; }
.flight-pad [data-flight-direction="yawRight"] { grid-area:1/3; }
.flight-pad #manual-hold { grid-area:2/2; font-size:12px; background:#172a25; }
.flight-pad [data-flight-direction="right"] { grid-area:2/3; }
.flight-pad [data-flight-direction="back"] { grid-area:3/2; }
.flight-pad button.is-held { background:var(--lime); color:var(--bg); border-color:var(--lime); box-shadow:0 0 22px #c9ef8e25; }
.flight-pad button.is-held small { color:#415332; }
.flight-pad button:disabled { cursor:default; }
@media(max-width:600px) {
  .flight-mode-bar { flex-wrap:wrap; gap:6px; }
  #flight-mode-hint { width:100%; padding-left:4px; }
  .manual-panel { padding:16px 12px; gap:10px; }
  .manual-copy h2 { font-size:16px; }
  .manual-copy .eyebrow { font-size:8px; letter-spacing:1px; }
  .manual-copy p:not(.eyebrow) { font-size:10px; }
  .manual-copy>small { font-size:9px; }
  .flight-pad { grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,46px); gap:3px; }
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased
}

button,
input,
select {
  font: inherit
}

button {
  cursor: pointer;
  border: 0;
  color: inherit
}

button,
a,
input,
select {
  outline-offset: 4px
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--lime)
}

a {
  color: inherit;
  text-decoration: none
}

button,
input,
select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation
}

h1,
h2,
h3,
p {
  margin: 0
}

h1,
h2,
h3 {
  line-height: 1.4
}

svg {
  vertical-align: middle
}

button:disabled {
  cursor: wait;
  opacity: .5
}

[hidden] {
  display: none !important
}

.muted {
  color: var(--muted)
}

.header {
  height: 92px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  max-width: 1600px;
  margin: auto
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 750
}

.brand>svg {
  width: 37px;
  height: 37px;
  fill: var(--lime)
}

.brand-light {
  font-weight: 350;
  color: var(--muted)
}

.brand small {
  font-size: 9px;
  display: block;
  font-weight: 400;
  letter-spacing: 2.5px;
  color: var(--muted);
  margin-top: 0
}

.header-center {
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 11px #c9ef8e22
}

.header-divider {
  margin: 0 8px;
  color: #52645b
}

.header-actions {
  display: flex;
  gap: 20px;
  align-items: center
}

.header-actions button {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 20px
}

.quiet {
  background: transparent;
  color: var(--muted);
  padding: 10px 0
}

.quiet:hover {
  color: var(--ink)
}

.outline {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  padding: 10px 14px
}

.outline:hover {
  border-color: var(--lime)
}

main {
  max-width: 1500px;
  margin: auto;
  padding: 0 40px
}

.intro {
  padding: 37px 0 31px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px
}

.eyebrow {
  font: 9px/1.8 var(--mono);
  letter-spacing: 1.5px;
  color: var(--muted)
}

.intro h1 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1px;
  margin-top: 12px
}

.intro h1>span {
  color: var(--lime)
}

.description {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px
}

.intro-note {
  display: flex;
  align-items: center;
  gap: 19px;
  font-size: 11px;
  line-height: 1.9
}

.intro-note span:not(.cross) {
  color: var(--muted)
}

.cross {
  font-size: 43px;
  color: var(--lime);
  font-weight: 200;
  line-height: 1
}

.lab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 23px;
  align-items: start
}

.visual-column {
  min-width: 0
}

.viewport {
  height: 490px;
  border: 1px solid #344a3e;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  background: #192725
}

.scene {
  position: absolute;
  inset: 0
}

.scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab
}

.scene canvas:active {
  cursor: grabbing
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 12px
}

.scene-top {
  position: absolute;
  left: 23px;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  pointer-events: none
}

.scene-title {
  font-size: 12px;
  letter-spacing: .5px
}

.scene-title>.live-dot {
  margin-right: 7px
}

.scene-title small {
  display: block;
  font: 7px var(--mono);
  color: #a2b5a4;
  letter-spacing: 1.4px;
  margin-top: 7px;
  padding-left: 14px
}

.camera-controls {
  display: flex;
  gap: 3px;
  pointer-events: auto;
  background: #0c191acf;
  border: 1px solid #455d4c80;
  border-radius: 5px;
  padding: 3px
}

.camera-controls button {
  background: transparent;
  border-radius: 3px;
  padding: 6px 10px;
  color: #b5c5b8;
  font-size: 10px
}

.camera-controls button[aria-pressed=true] {
  background: #e3ecd41f;
  color: var(--lime)
}

.camera-controls #capture {
  font-size: 19px;
  line-height: 15px;
  border-left: 1px solid #425642;
  padding: 6px 9px;
  margin-left: 2px
}

.scene-side {
  position: absolute;
  top: 90px;
  left: 23px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 9px var(--mono);
  color: #9fb59f;
  pointer-events: none
}

.scene-side>span>strong {
  font-weight: 400;
  color: #e3eddf;
  margin-left: 4px
}

.scene-side>span:last-child {
  font-size: 8px;
  letter-spacing: .3px;
  margin-top: 4px
}

.scene-axis {
  position: absolute;
  right: 23px;
  bottom: 83px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 10px/1.6 var(--mono);
  color: #b7c7b3;
  pointer-events: none
}

.scene-axis>small {
  font-size: 6px;
  letter-spacing: 1px;
  margin-top: 6px
}

.scene-bottom {
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  pointer-events: none
}

.playback {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  background: #0d181be8;
  border: 1px solid #415641a1;
  border-radius: 5px;
  pointer-events: auto
}

.playback button {
  background: transparent;
  width: 27px;
  height: 26px;
  border-radius: 3px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: #d5e6c4
}

.playback button:hover {
  background: #c9ef8e20
}

.playback-divider {
  height: 13px;
  width: 1px;
  background: #455341;
  margin: 0 5px
}

.playback>span:not(.playback-divider) {
  font: 10px var(--mono);
  font-variant-numeric: tabular-nums;
  min-width: 56px
}

.playback select {
  border: 0;
  border-left: 1px solid #455341;
  background: transparent;
  color: #bbceac;
  font-size: 10px;
  padding-left: 7px;
  width: 44px;
  margin-left: 5px
}

.scene-hint {
  font-size: 9px;
  color: #bdcbb1;
  letter-spacing: .4px
}

.legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 2px;
  font-size: 10px;
  color: var(--muted);
  flex-wrap: wrap
}

.legend>span,
.plot-footer>span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.legend i,
.plot-footer i {
  height: 2px;
  width: 14px;
  display: inline-block
}

.truth {
  background: var(--cyan)
}

.estimate {
  background: var(--lime)
}

.gnss {
  background: var(--orange)
}

.route {
  background: #86958f
}

.legend small {
  margin-left: auto;
  font: 7px var(--mono);
  letter-spacing: 1px
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  margin: 3px 0 21px
}

.metrics>div {
  padding: 20px 22px;
  min-width: 0
}

.metrics>div+div {
  border-left: 1px solid var(--line)
}

.metrics>div>span {
  font-size: 11px;
  display: block;
  color: #c9d5cc
}

.metrics>div>span small {
  font-size: 8px;
  color: var(--muted);
  margin-left: 6px
}

.metrics strong {
  display: block;
  font: 30px/1.6 var(--mono);
  font-weight: 400;
  margin-top: 3px;
  letter-spacing: -1px;
  color: var(--lime);
  font-variant-numeric: tabular-nums
}

.metrics strong small {
  font: 11px var(--mono);
  color: var(--muted);
  letter-spacing: 0
}

.metrics>div:nth-child(2) strong {
  color: var(--orange)
}

.metrics>div:nth-child(3) strong {
  color: var(--cyan)
}

.metrics p {
  font-size: 8px;
  color: var(--muted);
  margin-top: 5px
}

.metric-track {
  height: 3px;
  width: 95%;
  background: var(--line);
  margin-top: 10px;
  border-radius: 2px;
  overflow: hidden
}

.metric-track>i {
  display: block;
  height: 100%;
  background: var(--lime);
  width: 0%;
  transition: width .15s
}

.plot-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 7px;
  padding: 17px 20px 12px
}

.plot-panel>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

.plot-panel>header>div {
  display: flex;
  align-items: center;
  gap: 10px
}

.plot-panel h2 {
  font-size: 12px;
  font-weight: 500
}

.section-index {
  font: 9px var(--mono);
  color: var(--muted)
}

.plot-panel>header>span {
  font: 8px var(--mono);
  color: var(--muted)
}

#error-chart {
  height: 137px;
  width: 100%;
  display: block;
  margin-top: 14px
}

.plot-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 8px;
  color: var(--muted);
  margin-top: 9px
}

.plot-footer>span:last-child {
  margin-left: auto;
  font: 7px var(--mono);
  letter-spacing: 1px
}

.control-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 23px 22px
}

.control-panel>header>.eyebrow {
  font-size: 7px;
  letter-spacing: 1px
}

.control-panel>header>h2 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  margin-top: 9px
}

.control-panel>header>h2>span {
  color: var(--lime)
}

.presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 22px 0 24px
}

.presets button {
  text-align: left;
  position: relative;
  padding: 13px 10px 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 11px
}

.presets button>span {
  font: 8px var(--mono);
  color: #6c8773;
  margin-right: 7px
}

.presets small {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-top: 5px;
  padding-left: 20px
}

.presets button[aria-pressed=true] {
  background: #c9ef8e12;
  border-color: #9ab77c;
  color: var(--lime)
}

.presets button:hover {
  border-color: var(--muted)
}

.control-group {
  border-top: 1px solid var(--line);
  padding-top: 18px
}

.group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 17px
}

.group-title>span:first-child {
  font-size: 11px;
  color: #d3ddd4
}

.group-title>span:last-child {
  font: 7px var(--mono);
  letter-spacing: 1px;
  color: var(--muted)
}

.select-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 18px
}

.select-label select {
  font-size: 10px;
  max-width: 160px;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 4px;
  color: var(--ink);
  padding: 7px 9px
}

.slider-label {
  display: block;
  position: relative;
  font-size: 10px;
  color: var(--muted);
  margin: 17px 0 22px
}

.slider-label output {
  float: right;
  font: 10px var(--mono);
  color: #e0e9dc
}

.slider-label input {
  display: block;
  width: 100%;
  height: 3px;
  accent-color: var(--lime);
  margin: 15px 0 0;
  cursor: pointer;
  border-radius: 3px
}

.slider-label input::-webkit-slider-thumb {
  width: 12px;
  height: 12px
}

.sensor-group {
  padding-top: 18px
}

.switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 20px
}

.switch-label>span {
  display: block;
  position: relative;
  width: 29px;
  height: 17px
}

.switch-label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1
}

.switch-label i {
  display: block;
  width: 29px;
  height: 17px;
  background: #3a4940;
  border-radius: 20px
}

.switch-label i:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #8c9b8d;
  transition: transform .15s
}

.switch-label input:checked+i {
  background: #71875a
}

.switch-label input:checked+i:after {
  background: var(--lime);
  transform: translateX(12px)
}

.switch-label input:focus-visible+i {
  outline: 2px solid var(--lime);
  outline-offset: 4px
}

.alignment {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 8px;
  background: #c9ef8e09;
  border: 1px solid #c9ef8e18;
  border-radius: 4px;
  font-size: 9px;
  color: var(--lime);
  margin-top: 6px
}

.align-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0
}

.alignment button {
  background: transparent;
  font-size: 9px;
  color: var(--muted);
  margin-left: auto;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap
}

.alignment.misaligned {
  color: var(--orange);
  background: #e8b1770c;
  border-color: #e8b17722
}

.compare-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  text-align: left;
  padding: 14px 13px;
  background: var(--lime);
  border-radius: 5px;
  color: #23341b;
  margin-top: 21px;
  font-size: 11px;
  font-weight: 600
}

.compare-button:hover {
  background: #ddffab
}

.compare-button small {
  display: block;
  font-size: 8px;
  font-weight: 400;
  opacity: .7;
  margin-top: 5px
}

.compare-button>span:last-child {
  font-size: 22px;
  font-weight: 400
}

.control-footnote {
  font-size: 8px;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 12px
}

.timing-panel {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 27px;
  padding: 29px 32px;
  background: linear-gradient(100deg, #172424, #132020)
}

.timing-copy>.eyebrow {
  font-size: 8px
}

.timing-copy h2 {
  font-size: 23px;
  letter-spacing: -.5px;
  margin-top: 9px;
  font-weight: 500
}

.timing-copy h2>span {
  color: var(--lime)
}

.timing-copy>p:last-child {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 11px
}

.timing-visual {
  padding: 17px 20px 0 0;
  min-width: 0
}

.timeline-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font: 8px var(--mono)
}

.timeline {
  height: 2px;
  background: repeating-linear-gradient(to right, #647260 0, #647260 2px, transparent 2px, transparent 10px);
  margin: 27px 12px 52px 0;
  position: relative
}

.timeline:before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  height: 10px;
  border-left: 1px solid #647260
}

.timeline-now {
  position: absolute;
  right: 0;
  top: -5px;
  width: 1px;
  height: 13px;
  background: #d7e4d1
}

.timeline-marker {
  position: absolute;
  top: 0;
  width: 0;
  transition: left .15s
}

.timeline-marker>i {
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: -3px;
  background: var(--panel)
}

.timeline-marker>span {
  display: block;
  position: absolute;
  top: 17px;
  width: 70px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 8px;
  white-space: nowrap
}

.timeline-marker.sample {
  color: var(--orange)
}

.timeline-marker.fusion {
  color: var(--lime)
}

.timeline-marker.fusion>span {
  top: -25px
}

.timing-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 8px;
  color: var(--muted)
}

.timing-status strong {
  color: var(--lime);
  font: 9px var(--mono);
  white-space: nowrap
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 27px 0 32px;
  font-size: 9px;
  color: var(--muted)
}

.footer button {
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  padding: 0
}

.footer button:hover {
  color: var(--lime)
}

dialog {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid #526147;
  border-radius: 9px;
  padding: 35px;
  width: min(710px, calc(100% - 30px));
  max-height: 85svh;
  overflow: auto;
  box-shadow: 0 30px 120px #0007
}

dialog::backdrop {
  background: #061012b8;
  backdrop-filter: blur(5px)
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 15px;
  background: transparent;
  color: var(--muted);
  font-size: 25px;
  width: 30px;
  height: 30px;
  padding: 0
}

.dialog-close:hover {
  color: var(--ink)
}

dialog h2 {
  font-size: 23px;
  margin: 13px 0 18px;
  font-weight: 550
}

dialog h3 {
  font-size: 14px;
  margin: 24px 0 10px;
  font-weight: 500;
  color: var(--lime)
}

dialog p,
dialog li {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.95
}

dialog ul {
  padding-left: 19px
}

dialog li {
  margin: 9px 0
}

dialog a {
  text-decoration: underline;
  text-underline-offset: 3px
}

.compare-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 22px
}

.compare-metrics>div {
  padding: 20px
}

.compare-metrics>div+div {
  border-left: 1px solid var(--line)
}

.compare-metrics span {
  font-size: 10px;
  color: var(--muted)
}

.compare-metrics strong {
  font: 31px var(--mono);
  display: block;
  margin-top: 9px;
  color: var(--orange)
}

.compare-metrics>div:last-child strong {
  color: var(--lime)
}

#compare-chart {
  width: 100%;
  height: 210px;
  display: block;
  margin: 23px 0 13px
}

dialog .compare-conclusion {
  font-size: 12px;
  color: var(--lime)
}

dialog .compare-note {
  font-size: 9px;
  margin-top: 12px
}

.toast {
  pointer-events: none;
  position: fixed;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--lime);
  color: #203019;
  box-shadow: 0 10px 40px #0005;
  font-size: 12px;
  padding: 12px 20px;
  border-radius: 5px;
  max-width: 90%;
  text-align: center
}

.noscript {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--orange);
  color: #222;
  padding: 15px;
  text-align: center;
  font-size: 13px
}

@media(min-width:1500px) {
  .viewport {
    height: 530px
  }

  .control-panel {
    padding: 26px
  }

  .metrics>div {
    padding: 23px
  }

  .plot-panel {
    padding-top: 22px
  }

  #error-chart {
    height: 150px
  }
}

@media(max-width:1200px) {
  .header {
    padding: 0 28px
  }

  .header-center {
    font-size: 8px;
    letter-spacing: .6px
  }

  .header-actions {
    gap: 16px
  }

  main {
    padding: 0 28px
  }

  .lab-layout {
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 18px
  }

  .control-panel {
    padding: 21px 18px
  }

  .viewport {
    height: 475px
  }

  .scene-hint {
    font-size: 8px
  }

  .legend {
    gap: 12px;
    font-size: 9px
  }

  .legend small {
    display: none
  }

  .metrics>div {
    padding: 18px 15px
  }

  .metrics>div>span small {
    display: block;
    margin: 4px 0 0
  }

  .metrics strong {
    font-size: 26px
  }

  .metrics p {
    font-size: 7px
  }

  .plot-panel {
    padding: 16px 16px 12px
  }

  .intro h1 {
    font-size: 31px
  }

  .timing-panel {
    gap: 35px
  }

  .timing-status {
    flex-wrap: wrap;
    gap: 7px
  }

  .scene-top {
    left: 18px;
    right: 15px
  }

  .scene-side {
    left: 18px
  }

  .scene-bottom {
    left: 16px;
    right: 16px
  }

  .camera-controls button {
    font-size: 9px;
    padding: 6px 8px
  }

  .scene-title {
    font-size: 11px
  }

  .scene-title small {
    font-size: 6px
  }

  .header-center .header-divider,
  .header-center {
    letter-spacing: .3px
  }
}

@media(max-width:960px) {
  .header-center {
    display: none
  }

  .intro-note {
    display: none
  }

  .lab-layout {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 15px
  }

  .control-panel {
    padding: 20px 16px
  }

  .control-panel>header>h2 {
    font-size: 17px
  }

  .control-panel>header>.eyebrow {
    font-size: 6px
  }

  .viewport {
    height: 470px
  }

  .scene-title small {
    display: none
  }

  .camera-controls button {
    padding: 6px 7px
  }

  .scene-top {
    left: 15px;
    right: 12px;
    gap: 10px
  }

  .scene-title {
    font-size: 10px
  }

  .scene-hint {
    display: none
  }

  .scene-side {
    top: 74px;
    left: 16px;
    font-size: 8px
  }

  .scene-axis {
    right: 18px;
    bottom: 75px
  }

  .legend {
    gap: 11px;
    font-size: 8px
  }

  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .metrics>div {
    padding: 15px 11px
  }

  .metrics>div>span {
    font-size: 10px
  }

  .metrics>div>span small {
    font-size: 7px
  }

  .metrics strong {
    font-size: 24px
  }

  .metrics p {
    font-size: 7px;
    line-height: 1.8;
    min-height: 24px
  }

  .metric-track {
    margin-top: 14px
  }

  .timing-panel {
    padding: 25px;
    grid-template-columns: 1fr 1fr;
    gap: 30px
  }

  .timing-copy h2 {
    font-size: 22px
  }

  .timing-copy>p:last-child {
    font-size: 9px
  }

  .timing-visual {
    padding-right: 5px
  }

  .footer {
    font-size: 8px
  }

  .footer button {
    font-size: 8px
  }
}

@media(max-width:760px) {
  .header {
    height: 78px;
    padding: 0 20px
  }

  .brand {
    font-size: 17px;
    gap: 9px
  }

  .brand>svg {
    width: 30px;
    height: 30px
  }

  .brand small {
    font-size: 8px;
    letter-spacing: 1.5px
  }

  .header-actions {
    gap: 15px
  }

  .header-actions button {
    font-size: 10px;
    gap: 10px
  }

  .header-actions .outline {
    padding: 8px 10px
  }

  main {
    padding: 0 20px
  }

  .intro {
    padding: 28px 0 24px
  }

  .intro h1 {
    font-size: 28px;
    line-height: 1.45
  }

  .description {
    font-size: 11px;
    max-width: 440px;
    line-height: 1.9
  }

  .lab-layout {
    grid-template-columns: 1fr;
    gap: 23px
  }

  .viewport {
    height: 445px
  }

  .scene-title {
    font-size: 12px
  }

  .scene-title small {
    display: block;
    font-size: 7px
  }

  .scene-top {
    left: 19px;
    right: 17px;
    top: 18px
  }

  .scene-side {
    top: 86px;
    left: 20px;
    font-size: 9px
  }

  .scene-side>span:last-child {
    font-size: 8px
  }

  .camera-controls button {
    padding: 7px 10px;
    font-size: 10px
  }

  .scene-hint {
    display: block;
    font-size: 9px
  }

  .legend {
    font-size: 10px;
    gap: 20px;
    padding: 15px 3px
  }

  .legend small {
    display: inline;
    font-size: 6px
  }

  .metrics>div {
    padding: 18px 20px
  }

  .metrics>div>span {
    font-size: 11px
  }

  .metrics>div>span small {
    font-size: 8px
  }

  .metrics strong {
    font-size: 29px
  }

  .metrics p {
    font-size: 8px;
    min-height: 0
  }

  .plot-panel {
    padding: 18px 20px 14px
  }

  #error-chart {
    height: 150px
  }

  .control-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    padding: 25px
  }

  .control-panel>header {
    grid-column: 1/-1
  }

  .control-panel>header>.eyebrow {
    font-size: 8px
  }

  .control-panel>header>h2 {
    font-size: 21px
  }

  .presets {
    grid-column: 1/-1;
    grid-template-columns: repeat(4, 1fr);
    margin: 21px 0 26px
  }

  .control-group {
    grid-column: 1
  }

  .sensor-group {
    grid-column: 2;
    grid-row: 3/6
  }

  .group-title {
    margin-bottom: 20px
  }

  .slider-label {
    font-size: 11px;
    margin: 21px 0 27px
  }

  .slider-label input {
    margin-top: 18px;
    height: 4px
  }

  .select-label {
    font-size: 11px
  }

  .switch-label {
    font-size: 11px
  }

  .compare-button {
    grid-column: 1;
    align-self: end;
    margin-top: 15px
  }

  .control-footnote {
    grid-column: 1;
    font-size: 9px
  }

  .alignment {
    font-size: 9px
  }

  .timing-panel {
    margin-top: 24px;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 25px
  }

  .timing-copy h2 {
    font-size: 22px
  }

  .timing-copy>.eyebrow {
    font-size: 7px
  }

  .timing-copy>p:last-child {
    font-size: 9px
  }

  .footer {
    padding: 24px 0 27px;
    font-size: 8px;
    flex-wrap: wrap;
    gap: 10px
  }
}

@media(max-width:500px) {
  .header {
    padding: 0 16px;
    height: 73px
  }

  .brand {
    font-size: 15px;
    gap: 7px
  }

  .brand>svg {
    width: 27px;
    height: 27px
  }

  .brand small {
    font-size: 7px;
    letter-spacing: 1.5px
  }

  .header-actions {
    gap: 13px
  }

  .header-actions button {
    font-size: 9px;
    gap: 7px
  }

  .header-actions .outline {
    padding: 8px
  }

  .header-actions .quiet span {
    display: none
  }

  main {
    padding: 0 16px
  }

  .intro {
    padding: 26px 0 22px
  }

  .intro>.eyebrow,
  .intro .eyebrow {
    font-size: 7px;
    letter-spacing: 1.2px
  }

  .intro h1 {
    font-size: 27px;
    letter-spacing: -.8px;
    margin-top: 12px
  }

  .intro h1>span {
    display: block
  }

  .description {
    font-size: 10px;
    line-height: 1.85;
    max-width: 310px;
    margin-top: 12px
  }

  .viewport {
    height: 370px;
    border-radius: 7px
  }

  .scene-top {
    left: 14px;
    right: 12px;
    top: 14px;
    gap: 8px
  }

  .scene-title {
    font-size: 10px
  }

  .scene-title small {
    font-size: 5px;
    letter-spacing: .9px;
    margin-top: 6px;
    padding-left: 12px
  }

  .scene-title>.live-dot {
    width: 5px;
    height: 5px;
    margin-right: 5px
  }

  .camera-controls {
    gap: 0;
    padding: 2px
  }

  .camera-controls button {
    font-size: 8px;
    padding: 6px 7px
  }

  .camera-controls #capture {
    font-size: 16px;
    padding: 5px 7px
  }

  .scene-side {
    left: 15px;
    top: 68px;
    font-size: 8px;
    gap: 8px
  }

  .scene-side>span:last-child {
    font-size: 7px
  }

  .scene-bottom {
    left: 12px;
    right: 12px;
    bottom: 13px
  }

  .scene-hint {
    display: none
  }

  .playback {
    padding: 5px 7px;
    gap: 5px
  }

  .playback button {
    width: 27px;
    height: 29px
  }

  .playback>span:not(.playback-divider) {
    font-size: 9px;
    min-width: 52px
  }

  .playback select {
    font-size: 9px;
    width: 40px;
    padding-left: 6px
  }

  .scene-axis {
    bottom: 67px;
    right: 16px;
    font-size: 9px
  }

  .legend {
    gap: 14px;
    font-size: 8px;
    line-height: 1.8;
    padding: 12px 1px
  }

  .legend i {
    width: 11px
  }

  .legend small {
    display: none
  }

  .metrics {
    margin-bottom: 16px
  }

  .metrics>div {
    padding: 15px 10px
  }

  .metrics>div>span {
    font-size: 9px
  }

  .metrics>div>span small {
    font-size: 6px;
    margin-top: 5px
  }

  .metrics strong {
    font-size: 24px;
    letter-spacing: -1px;
    margin-top: 7px
  }

  .metrics strong small {
    font-size: 9px
  }

  .metrics p {
    font-size: 7px;
    line-height: 1.8;
    min-height: 24px
  }

  .metric-track {
    margin-top: 14px;
    width: 90%
  }

  .plot-panel {
    padding: 15px 14px 12px
  }

  .plot-panel h2 {
    font-size: 11px
  }

  .section-index {
    font-size: 8px
  }

  .plot-panel>header>span {
    font-size: 7px
  }

  #error-chart {
    height: 133px
  }

  .plot-footer {
    gap: 12px;
    font-size: 7px
  }

  .plot-footer>span:last-child {
    font-size: 6px;
    letter-spacing: .4px
  }

  .lab-layout {
    gap: 19px
  }

  .control-panel {
    display: block;
    padding: 23px 21px
  }

  .control-panel>header>.eyebrow {
    font-size: 7px
  }

  .control-panel>header>h2 {
    font-size: 20px
  }

  .presets {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 20px 0 24px
  }

  .presets button {
    font-size: 12px;
    padding: 13px
  }

  .presets button>span {
    font-size: 9px
  }

  .presets small {
    font-size: 9px
  }

  .group-title {
    margin-bottom: 20px
  }

  .group-title>span:first-child {
    font-size: 12px
  }

  .group-title>span:last-child {
    font-size: 8px
  }

  .select-label {
    font-size: 11px
  }

  .select-label select {
    font-size: 12px;
    padding: 8px 10px
  }

  .slider-label {
    font-size: 11px;
    margin: 22px 0 28px
  }

  .slider-label output {
    font-size: 11px
  }

  .slider-label input {
    margin-top: 19px
  }

  .sensor-group {
    padding-top: 21px
  }

  .switch-label {
    font-size: 11px
  }

  .alignment {
    padding: 12px 10px;
    font-size: 10px;
    gap: 7px
  }

  .alignment button {
    font-size: 10px
  }

  .compare-button {
    padding: 15px;
    margin-top: 22px;
    font-size: 12px
  }

  .compare-button small {
    font-size: 9px
  }

  .control-footnote {
    font-size: 9px;
    line-height: 1.9
  }

  .timing-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 23px 20px;
    margin-top: 21px
  }

  .timing-copy>.eyebrow {
    font-size: 7px
  }

  .timing-copy h2 {
    font-size: 24px
  }

  .timing-copy>p:last-child {
    font-size: 10px
  }

  .timing-visual {
    padding: 3px 22px 0 5px
  }

  .timing-status {
    font-size: 7px;
    gap: 10px
  }

  .timeline-labels {
    font-size: 8px
  }

  .timeline-marker>span {
    font-size: 8px
  }

  .footer {
    font-size: 8px;
    line-height: 1.8;
    padding: 22px 0 26px
  }

  .footer button {
    font-size: 8px
  }

  dialog {
    padding: 29px 23px;
    width: calc(100% - 24px)
  }

  dialog h2 {
    font-size: 21px
  }

  dialog p,
  dialog li {
    font-size: 11px;
    line-height: 1.9
  }

  .compare-metrics>div {
    padding: 15px 12px
  }

  .compare-metrics span {
    font-size: 9px
  }

  .compare-metrics strong {
    font-size: 24px
  }

  #compare-chart {
    height: 180px
  }

  dialog .compare-note {
    font-size: 8px
  }
}

@media(max-width:350px) {
  .header {
    padding: 0 12px;
    gap: 8px
  }

  .header-actions {
    gap: 11px
  }

  .header-actions button {
    font-size: 8px;
    gap: 4px
  }

  .brand {
    font-size: 13px
  }

  .brand>svg {
    width: 25px
  }

  .header-actions .outline {
    padding: 7px
  }

  main {
    padding: 0 12px
  }

  .intro h1 {
    font-size: 26px
  }

  .viewport {
    height: 345px
  }

  .scene-title small {
    display: none
  }

  .camera-controls button {
    padding: 6px
  }

  .scene-side {
    top: 58px
  }

  .legend {
    gap: 10px;
    font-size: 7px
  }

  .metrics>div {
    padding: 13px 8px
  }

  .metrics strong {
    font-size: 22px
  }

  .metrics>div>span small {
    font-size: 6px
  }

  .control-panel {
    padding: 22px 18px
  }

  .timing-panel {
    padding: 22px 18px
  }

  .plot-footer {
    gap: 9px
  }

  .plot-footer>span:last-child {
    font-size: 5px
  }

  .intro .eyebrow {
    font-size: 6px
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important
  }
}

.scene:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }

/* Personal signature: Dylan / WHT / Wu. */
.intro-copy { min-width:0; }
.intro-note.identity-note { flex-shrink:0; gap:16px; padding-left:24px; border-left:1px solid var(--line); }
.intro-note.identity-note .surname-seal { display:grid; place-items:center; width:58px; height:64px; border:1px solid #8f795b; border-radius:9px 3px 9px 3px; color:var(--orange); font:34px/1 "Songti SC","SimSun",serif; transform:rotate(-5deg); }
.intro-note.identity-note .signature-name { display:block; color:var(--ink); font:italic 32px/1.1 Georgia,"Times New Roman",serif; letter-spacing:-1px; }
.signature-role { display:block; color:var(--lime); font:9px/1.8 var(--mono); letter-spacing:1.2px; margin-top:7px; }
.signature-domain { display:block; color:var(--muted); font:8px/1.8 var(--mono); letter-spacing:.7px; margin-top:2px; }
@media(max-width:960px) {
  .intro { flex-wrap:wrap; gap:18px; }
  .intro-copy { flex:1 1 100%; }
  .intro-note.identity-note { display:flex; width:100%; border-left:0; border-top:1px solid var(--line); padding:14px 0 0; gap:12px; }
  .intro-note.identity-note .surname-seal { width:36px; height:40px; font-size:24px; border-radius:6px 2px 6px 2px; }
  .intro-note.identity-note>div { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .intro-note.identity-note .signature-name { font-size:26px; }
  .signature-role { margin:0; font-size:8px; }
  .signature-domain { display:none; }
}

/* Wu personal mark, in the same Latin type style as Dylan. */
.intro-note.identity-note .surname-seal { font:italic 27px/1 Georgia,"Times New Roman",serif; }
@media(max-width:960px) { .intro-note.identity-note .surname-seal { font-size:20px; } }

.route-preview-panel { margin:14px 0 18px; background:#101d1b; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
#route-preview { display:block; width:100%; height:130px; padding:8px; }
#route-summary { font-size:10px; color:var(--muted); padding:0 10px 10px; text-align:center; }
#edit-route { display:flex; width:100%; align-items:center; justify-content:space-between; padding:11px 12px; color:var(--lime); background:#21352a; font-size:11px; border-top:1px solid var(--line); }
#route-dialog { width:min(760px,calc(100% - 24px)); }
.route-editor-toolbar { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin:18px 0 12px; }
.route-editor-toolbar label { display:grid; gap:5px; flex:1; min-width:130px; font-size:11px; color:var(--muted); }
.route-editor-toolbar select { width:100%; max-width:none; padding:9px; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:5px; }
.route-editor-toolbar button { font-size:11px; padding:9px 12px; }
#route-editor-map { display:block; width:100%; height:min(42vh,360px); min-height:210px; border:1px solid var(--line); border-radius:8px; touch-action:none; user-select:none; cursor:crosshair; }
#route-waypoints circle { cursor:grab; }
.route-editor-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; color:var(--muted); font:11px var(--mono); }
.route-editor-meta button { font-size:11px; }
#route-point-list { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:10px 0 14px; list-style:none; max-height:92px; overflow:auto; }
#route-point-list button { border:1px solid var(--line); padding:5px 9px; border-radius:5px; font:10px var(--mono); background:var(--panel2); }
#route-point-list button[aria-pressed="true"] { color:var(--orange); border-color:var(--orange); }
.route-coordinate-row { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.route-coordinate-row label { display:grid; gap:5px; flex:1; min-width:80px; font-size:11px; color:var(--muted); }
.route-coordinate-row input { width:100%; min-width:0; padding:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:5px; }
.route-coordinate-row button { font-size:11px; padding:9px 12px; }
#route-editor-message { color:var(--orange); margin-top:12px; }
#route-dialog .route-editor-note { font-size:10px; margin:6px 0 14px; }
@media(max-width:600px) {
  #route-dialog { padding:22px 14px; }
  #route-dialog h2 { font-size:20px; }
  #route-editor-map { height:auto; min-height:0; aspect-ratio:90/64; }
  .route-editor-toolbar label { flex:1 1 40%; min-width:100px; }
  .route-coordinate-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-coordinate-row button { min-height:40px; white-space:nowrap; }
}

/* Browser-only experiment workbench. */
.workbench { margin-top:22px; border-top:1px solid var(--line); }
.workbench details { border-bottom:1px solid var(--line); padding:16px 0; }
.workbench summary { cursor:pointer; font-size:13px; color:var(--ink); }
.workbench summary span { float:right; font:9px var(--mono); color:var(--muted); letter-spacing:1px; }
.workbench label { display:grid; gap:6px; min-width:0; color:var(--muted); font-size:11px; margin-top:13px; }
.workbench input:not([type=file]),.workbench select { width:100%; max-width:100%; min-width:0; padding:9px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:5px; font-size:12px; }
.workbench input[type=file] { width:100%; font-size:10px; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; }
.work-grid label:first-child { grid-column:1/-1; }
.work-grid label:has(#navigation) { grid-column:1/-1; }
.work-note { color:var(--muted); font-size:10px; line-height:1.8; margin-top:10px; }
.work-actions { display:flex; gap:8px; margin-top:12px; }
.work-actions button { flex:1; padding:9px 5px; font-size:11px; }
.experiment-status { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 16px; padding:10px 12px; border-left:2px solid var(--lime); background:#192924; font:11px var(--mono); color:var(--muted); }
#feedback-status { color:var(--lime); } #fault-status { color:var(--orange); }
.replay-panel { padding:18px 20px; border:1px solid var(--line); border-radius:8px; background:var(--panel); margin-top:14px; }
.replay-title { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
.replay-title button { font-size:11px; padding:7px 10px; }
#replay-time { width:100%; margin:18px 0 10px; accent-color:var(--lime); }
#replay-label { font:11px var(--mono); color:var(--lime); }
.replay-locked { opacity:.5; }
.display-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.display-tools button { padding:8px 10px; font-size:11px; }
.display-tools label { margin-left:auto; font-size:11px; color:var(--muted); }
.display-tools select { background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:7px; color:var(--ink); margin-left:5px; }
.legend [role=button] { cursor:pointer; border-radius:4px; padding:3px; }
.legend [aria-pressed=false] { opacity:.35; text-decoration:line-through; }
.legend [role=button]:focus-visible { outline:1px solid var(--lime); }
.presentation .control-panel,.presentation .timing-panel { display:none; }
.presentation .lab-layout { grid-template-columns:minmax(0,1fr); }
.presentation .viewport { height:65vh; }
.visual-column:fullscreen { background:var(--bg); padding:18px; overflow:auto; }
.visual-column:fullscreen .viewport { height:65vh; }
.scene canvas[hidden] { display:none!important; }
@media(max-width:600px){.display-tools { gap:6px; }.display-tools label { margin-left:0; }.experiment-status { font-size:10px; }.replay-panel { padding:14px; }}
.control-tabs { display:flex; gap:5px; margin:18px 0; padding:4px; border:1px solid var(--line); border-radius:7px; }
.control-tabs button { flex:1; padding:9px 4px; color:var(--muted); font-size:11px; border-radius:4px; }
.control-tabs button[aria-pressed=true] { background:var(--lime); color:#182619; }
.control-panel.advanced-tab>.presets,.control-panel.advanced-tab>.control-group,.control-panel.advanced-tab>#compare,.control-panel.advanced-tab>.control-footnote { display:none; }
.workbench[hidden] { display:none; }
.workbench { margin-top:0; border-top:0; }

/* Estimator selection is visible in either control tab. */
.control-panel>.estimator-select{display:grid;gap:8px;padding:16px 0 4px;color:var(--muted);font-size:12px}
.control-panel>.estimator-select select{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:#1a2927;font:inherit}
.control-tabs button{background:transparent;border:0;cursor:pointer}
.legend b,.plot-footer b{font-weight:inherit}
.ekf-detail{margin:0;padding:0 20px 10px;color:var(--muted);font:11px/1.6 monospace;overflow-wrap:anywhere}
.engine-loading{margin:12px 20px;color:var(--lime);font-size:12px;line-height:1.6}
.engine-busy #scene{opacity:.65}

.work-grid>.work-note,.work-grid label:has(#feedback){grid-column:1/-1}