:root {
  color-scheme:dark;
  --bg:#0c141c;
  --panel:#121e28;
  --line:#263540;
  --ink:#e8eff3;
  --muted:#a0afb9;
  --dim:#798e9d;
  --mint:#85e4bc;
  --amber:#efbc79;
  --red:#ec8f91;
  --blue:#8cbbef;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-synthesis:none
}

#annotations, .position-fit-overlay {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none
}

.position-fit-overlay { overflow:hidden }
.position-fit-overlay[hidden], .legend>span[hidden] { display:none }
#fit-displacement, #pinned-fit-displacement { stroke:#d7b4ff; stroke-width:1.5; stroke-dasharray:5 5; opacity:.85 }
#fit-marker, #pinned-fit-marker { fill:#121e28; stroke:#d7b4ff; stroke-width:2 }
#fit-label, #pinned-fit-label { fill:#e1c8ff; font:600 12px Inter,"Segoe UI",sans-serif; stroke:#0c141c; stroke-width:3; paint-order:stroke }
#fit-legend i, #pinned-fit-legend i { width:7px; height:7px; border:1.5px solid #d7b4ff; transform:rotate(45deg) }

#pinned-fit-displacement { stroke:var(--blue); stroke-dasharray:3 5 }
#pinned-fit-marker { stroke:var(--blue); fill:none }
#pinned-fit-label { fill:#aacdf2 }
#pinned-fit-origin { fill:none; stroke:var(--blue); stroke-width:1.5; stroke-dasharray:2 2 }
#pinned-fit-legend i { border-color:var(--blue) }

.data-strip {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 20px;
  border-top:1px solid var(--line);
  font:10px ui-monospace,monospace;
  color:var(--muted)
}

.route-navigation {
  display:grid;
  grid-template-columns:minmax(180px,.9fr) minmax(0,1.3fr);
  align-items:center;
  gap:20px;
  padding:14px 20px;
  border-top:1px solid var(--line);
  background:#101b25
}

.route-chart {
  min-width:0;
  border:1px solid #2e4251;
  border-radius:7px;
  background:radial-gradient(ellipse,#192b36,#111d27)
}

#route {
  height:190px;
  cursor:crosshair;
  touch-action:pan-y
}

#route[aria-disabled=true] { opacity:.5; cursor:wait }
.route-info { min-width:0 }
.route-info .section-title { flex-wrap:wrap; gap:7px; margin-bottom:13px }
.route-key { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:8px }
.route-key i { width:14px; border-top:2px solid var(--mint) }
.route-selection { margin:0; color:var(--ink); font-size:10px; line-height:1.6; font-variant-numeric:tabular-nums }
.route-trace { margin:5px 0 13px; color:var(--amber); font-size:9px }
.route-trace[data-ready=true] { color:var(--mint) }
.route-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px }
.route-steps button { min-height:34px; padding:6px 3px; border:1px solid #3a5060; border-radius:5px; background:#1a2b38; font-size:10px; font-variant-numeric:tabular-nums }
.route-steps button:disabled { opacity:.35; cursor:default }
.route-info .small-note { font-size:9px; margin:8px 0 0 }

@media(max-width:1100px) and (min-width:781px) {
  .route-navigation { gap:14px; grid-template-columns:minmax(160px,1fr) minmax(0,1.2fr); padding:14px }
}

@media(max-width:520px) {
  .route-navigation { grid-template-columns:1fr; gap:15px; padding:15px 12px }
  #route { height:185px }
  .route-steps button { min-height:38px }
}

.feature-id,.small-note {
  overflow-wrap:anywhere;
  font-size:10px;
  line-height:1.6;
  color:var(--dim);
  margin-bottom:0
}

.trace-status.error { color:var(--red) }
.sky-panel { margin:17px 0 6px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 0 }
.sky-panel summary { color:var(--mint); cursor:pointer; font-size:10px }
.sky-panel summary span { float:right; color:var(--dim); font-size:8px }
.sky-plot svg { display:block; width:100%; height:auto; max-width:330px; margin:4px auto 0; overflow:visible }
.sky-horizon { fill:#292e32; stroke:#5c7181; stroke-width:1 }
.sky-mask { fill:#152731; stroke:var(--amber); stroke-dasharray:3 3; stroke-width:.8 }
.sky-ring-grid,.sky-axes { fill:none; stroke:#3c5260; stroke-width:.6; stroke-dasharray:2 3 }
.sky-cardinal { fill:var(--muted); font:11px ui-monospace,monospace; text-anchor:middle }
.sky-elevation { fill:#91a2ad; font:8px ui-monospace,monospace; text-anchor:middle }
.sky-zenith { fill:var(--muted) }
.sky-point,.sky-labels [data-path] { color:var(--muted) }
.sky-point[data-path=LOS],.sky-labels [data-path=LOS] { color:var(--mint) }
.sky-point[data-path=NLOS],.sky-labels [data-path=NLOS] { color:var(--amber) }
.sky-point[data-path=BLOCKED],.sky-labels [data-path=BLOCKED] { color:var(--red) }
.sky-point { cursor:pointer; outline:none }
.sky-hit { fill:transparent; pointer-events:all }
.sky-dot { fill:currentColor; stroke:#0c141c; stroke-width:1.5 }
.sky-selection-ring { fill:none; stroke:transparent; stroke-width:1.4 }
.sky-point[aria-pressed=true] .sky-selection-ring,.sky-point:focus-visible .sky-selection-ring { stroke:var(--ink) }
.sky-point:focus-visible .sky-selection-ring { stroke-dasharray:2 2; stroke-width:2 }
.sky-point[aria-disabled=true],.sky-point[aria-disabled=true] .sky-hit { pointer-events:none }
.sky-plot[data-state=pending] .sky-dot,.sky-plot[data-state=unavailable] .sky-points { opacity:.6 }
.sky-labels { pointer-events:none; font:10px ui-monospace,monospace; text-anchor:middle; fill:currentColor }
.sky-labels [data-selected=true] text { font-weight:700; text-decoration:underline }
.sky-leader { stroke:#627b8a; stroke-width:.6; opacity:.8 }
.sky-source,.sky-selection { margin:3px 0; font:9px/1.7 ui-monospace,monospace; color:var(--muted); overflow-wrap:anywhere }
.sky-plot[data-state=pending] .sky-source,.sky-plot[data-state=unavailable] .sky-source { color:var(--amber) }
.sky-selection { color:var(--ink) }
.sky-arrival-marker { pointer-events:none }
.sky-arrival-link { stroke:#c5b1ff; stroke-width:1; stroke-dasharray:3 3; opacity:.8 }
.sky-arrival-diamond { fill:#152731; stroke:#c5b1ff; stroke-width:2 }
.sky-arrival-readout,.sky-arrival-note { margin:4px 0; font:9px/1.7 ui-monospace,monospace; overflow-wrap:anywhere }
.sky-arrival-readout { color:#c5b1ff }
.sky-arrival-readout[data-state=pending],.sky-arrival-readout[data-state=unavailable],.sky-arrival-readout[data-state=blocked] { color:var(--muted) }
.sky-arrival-note { color:var(--muted) }
.sky-panel .sky-note { font-size:9px; margin-top:6px }
#sky-pause { min-height:36px; margin:7px 0 0; padding:7px 10px; border:1px solid #3a5060; border-radius:5px; background:#1a2b38; font-size:10px }
.scene-link-notice { display:flex; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid #345247; background:#172c28; color:var(--mint); font-size:10px; line-height:1.6 }
.scene-link-notice[hidden] { display:none }
.scene-link-notice[data-warning=true] { color:var(--amber); background:#302a22; border-color:#5c4a32 }
.scene-link-notice p { margin:0; flex:1 }
.scene-link-notice button { border:0; background:none; color:inherit; padding:5px; font-size:18px }
.scene-share { border-top:1px solid var(--line); padding:13px 20px; background:#101b25 }
.scene-share summary { cursor:pointer; font-size:11px; color:var(--mint); line-height:1.6 }
.scene-share summary span { margin-left:12px; color:var(--dim); font-size:9px }
.tool-help { margin:10px 0 0; font-size:10px; line-height:1.6; color:var(--muted) }
.tool-help > summary { cursor:pointer; color:var(--dim); font-size:9px }
.tool-help[open] > summary { margin-bottom:10px }
.reflection-status { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.6 }
.reflection-panel[data-state=ready] .reflection-status { color:var(--amber) }
.reflection-panel[data-state=pending] .reflection-status { color:var(--amber) }
.reflection-layout { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.3fr); align-items:center; gap:20px }
#reflection-sketch { display:block; width:100%; max-width:320px; margin:6px auto; font:10px ui-monospace,monospace }
.geometry-surface { fill:none; stroke:#718998; stroke-width:1 }
.geometry-normal { fill:none; stroke:#91a2ad; stroke-dasharray:4 4; stroke-width:1 }
.geometry-normal-label { fill:var(--muted); font-size:9px }
.geometry-incident,.geometry-outgoing { fill:none; stroke-width:2 }
.geometry-incident { stroke:var(--amber) }
.geometry-outgoing { stroke:var(--mint) }
.geometry-incident-head,.geometry-incident-label { fill:var(--amber) }
.geometry-outgoing-head,.geometry-outgoing-label { fill:var(--mint) }
.geometry-arc { stroke-width:1; opacity:.7 }
.geometry-contact { fill:var(--ink) }
.reflection-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; margin:14px 0; font-variant-numeric:tabular-nums }
.reflection-values div { min-width:0 }
.reflection-values dt { color:var(--dim); font-size:9px; line-height:1.5 }
.reflection-values dd { color:var(--ink); font:12px/1.7 ui-monospace,monospace; margin:4px 0 0; overflow-wrap:anywhere }
.reflection-panel .small-note { font-size:9px; margin:6px 0 0 }
.range-status { margin:12px 0; color:var(--muted); font-size:10px; line-height:1.6 }
.range-panel[data-state=pending] .range-status,.range-panel[data-state=no-solution] .range-status { color:var(--amber) }
.range-summary,.range-terms { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:16px 0; font-variant-numeric:tabular-nums }
.range-summary div,.range-terms div { min-width:0 }
.range-summary dt,.range-terms dt { color:var(--dim); font-size:9px; line-height:1.5 }
.range-summary dd,.range-terms dd { margin:5px 0 0; color:var(--ink); font:12px/1.7 ui-monospace,monospace; overflow-wrap:anywhere }
.range-summary dd { color:#c7adff }
.range-equation { color:var(--muted); font:10px/1.8 ui-monospace,monospace; margin:14px 0 }
.range-selection { border:1px solid #3d4c55; border-radius:6px; padding:12px; background:#14232d }
.range-selection p { color:var(--muted); font-size:10px; line-height:1.6; margin:0 }
.range-terms { margin:12px 0 0 }
#range-excess { color:var(--amber) }
.range-table { width:100%; table-layout:fixed; border-collapse:collapse; margin:18px 0 12px; font-size:10px; font-variant-numeric:tabular-nums }
.range-table caption { text-align:left; color:var(--muted); padding-bottom:9px; font-size:10px }
.range-table th,.range-table td { padding:6px; border-bottom:1px solid var(--line); text-align:right; font-weight:400; overflow-wrap:anywhere }
.range-table th:first-child { text-align:left; width:19% }
.range-table thead th { font-size:9px; color:var(--dim) }
.range-table button { min-height:32px; min-width:42px; padding:6px; border:1px solid transparent; border-radius:4px; background:none; color:inherit; font:inherit }
.range-table button[aria-pressed=true] { border-color:#658376; background:#254034 }
.range-table tr[data-selected=true] { background:#1b2e36 }
.range-table tr[data-path=LOS] th { color:var(--mint) }
.range-table tr[data-path=NLOS] th { color:var(--amber) }
.range-table tr[data-path=BLOCKED] th { color:var(--red) }
.range-panel .small-note { font-size:9px; line-height:1.7; margin:7px 0 0 }
@media(max-width:780px) {
  .reflection-layout { grid-template-columns:1fr; gap:0 }
  .reflection-values { margin:5px 0 12px; gap:14px 8px }
  .reflection-values dd { font-size:11px }
  .range-summary,.range-terms { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .range-table button { min-height:40px }
}
.share-content { padding-top:14px }
.share-content label { display:block; margin-bottom:7px; font-size:10px; color:var(--muted) }
.share-controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center }
.share-controls input { min-width:0; width:100%; height:36px; border:1px solid #3a5060; border-radius:5px; background:#0c1720; padding:8px; color:var(--ink); font:10px ui-monospace,monospace }
.share-controls button,.share-controls a { min-height:36px; padding:9px 12px; border:1px solid #3a5060; border-radius:5px; background:#1a2b38; font-size:10px; white-space:nowrap }
.share-controls a[aria-disabled=true] { opacity:.4; pointer-events:none }
.share-content .small-note { font-size:9px; margin:8px 0 0 }
.compare-content { padding-top:12px; font-size:10px; line-height:1.6 }
.comparison-status { margin:0 0 10px; color:var(--muted) }
.scene-compare[data-state=ready] .comparison-status { color:var(--mint) }
.scene-compare[data-state=pending] .comparison-status,.scene-compare[data-state=different-pose] .comparison-status { color:var(--amber) }
.compare-actions { display:flex; flex-wrap:wrap; gap:7px }
.compare-actions button,.reference-info a { min-height:34px; padding:7px 10px; border:1px solid #3a5060; border-radius:5px; background:#1a2b38; font-size:10px }
.compare-actions button:disabled { opacity:.35; cursor:default }
.reference-info { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:12px 0; border-bottom:1px solid var(--line) }
.reference-info[hidden],.compare-actions button[hidden] { display:none }
.reference-info p { margin:0; color:var(--muted); flex:1; min-width:150px; font:9px/1.7 ui-monospace,monospace }
.reference-info a { color:var(--mint); text-align:center }
.comparison-conditions { margin:14px 0 0; font:10px/1.7 ui-monospace,monospace; color:var(--muted) }
.compare-content table { width:100%; table-layout:fixed; border-collapse:collapse; margin:12px 0; font-size:10px; font-variant-numeric:tabular-nums }
.compare-content caption { text-align:left; color:var(--ink); padding:0 0 8px; font-size:10px }
.compare-content th,.compare-content td { border-bottom:1px solid var(--line); padding:8px 5px; text-align:right; font-weight:400; overflow-wrap:anywhere }
.compare-content thead th { color:var(--dim); font-size:9px }
.compare-content th:first-child { text-align:left }
.compare-metrics th:first-child { width:40% }
.compare-signals th:first-child { width:12% }
.compare-signals tr[data-changed=true] { background:#23303a }
.compare-signals [data-path=LOS] { color:var(--mint) }
.compare-signals [data-path=NLOS] { color:var(--amber) }
.compare-signals [data-path=BLOCKED] { color:var(--red) }
.compare-signals [data-path=MASKED] { color:var(--dim) }
.compare-content .small-note { font-size:9px; margin:10px 0 0 }
@media(max-width:520px) {
  .scene-share { padding:12px }
  .scene-share summary span { display:block; margin-left:15px }
  .share-controls { grid-template-columns:1fr 1fr }
  .share-controls input { grid-column:1/-1 }
  .share-controls button,.share-controls a { text-align:center; min-height:40px }
  .compare-actions button { min-height:40px }
  .compare-content table { font-size:9px }
  .compare-content th,.compare-content td { padding:8px 3px }
}
.surface-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px }
.surface-actions button,.focus-exit { border:1px solid #4b6170; border-radius:5px; background:#1a2b38; min-height:36px; padding:7px 6px; font-size:10px }
.surface-actions button[aria-pressed=true] { color:var(--amber); border-color:#a27e4e; background:#352d24 }
#focus-blockage[aria-pressed=true] { color:var(--red); border-color:#9c6263; background:#35272b }
.surface-actions button:disabled { opacity:.35; cursor:default }
.focus-exit { position:absolute; top:110px; left:23px; background:#0c141cf2; min-height:32px; padding:7px 10px; color:var(--mint) }
.focus-exit[hidden] { display:none }
#stage { scroll-margin-top:12px }
.model-note details a { text-decoration:underline; text-underline-offset:3px }
.bias-panel dd { color:#c7adff }

.map-credit {
  position:absolute;
  right:12px;
  bottom:43px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  padding:7px 9px;
  background:#0c141ce8;
  border:1px solid #52647188;
  border-radius:5px;
  font-size:10px;
  line-height:1.3;
  color:#dce8ef
}

.map-credit[hidden] { display:none }
.map-credit a { text-decoration:underline; text-underline-offset:2px }
.map-credit a:last-child { font-size:8px; color:#a0c0d5 }
.map-status { margin:5px 0 0 20px }

.stage-caption {
  padding:9px 11px;
  background:#0c141ce8;
  border-radius:5px
}

.stage-note {
  width:fit-content;
  max-width:calc(100% - 24px);
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%);
  padding:5px 9px;
  border-radius:4px;
  background:#0c141ce8
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink)
}

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

a:hover {
  color:var(--mint)
}

button,input,select {
  font:inherit
}

button,select {
  cursor:pointer
}

button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible,summary:focus-visible {
  outline:2px solid var(--mint);
  outline-offset:4px
}

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

button {
  color:inherit
}

button:hover {
  filter:brightness(1.18)
}

.shell {
  max-width:1512px;
  margin:0 auto;
  padding:0 44px
}

.topbar {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:16px
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:650;
  letter-spacing:-.5px
}

.brand-mark {
  display:inline-grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid #46665b;
  border-radius:8px;
  color:var(--mint);
  font-size:28px;
  font-weight:400;
  line-height:1
}

.brand-divider {
  padding:0 8px;
  color:#4e616e;
  font-weight:400
}

.brand-section {
  font-size:13px;
  font-weight:450;
  letter-spacing:0;
  color:var(--muted)
}

.nav-links {
  display:flex;
  gap:26px;
  font-size:12px;
  color:var(--muted)
}

.nav-links span {
  padding-left:5px;
  color:var(--dim)
}

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

.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:1.9px;
  font-size:10px;
  font-weight:650;
  color:var(--mint);
  margin:0 0 12px
}

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

h1 {
  font-size:clamp(25px,2.6vw,34px);
  letter-spacing:-1.5px;
  font-weight:540;
  line-height:1.16;
  margin:0
}

.intro-copy {
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  margin:12px 0 0
}

.intro-tag {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  font-size:12px
}

.intro-tag span:not(.tag-icon) {
  display:block;
  color:var(--dim);
  font-size:11px;
  margin-top:5px
}

.tag-icon {
  font-size:29px;
  font-weight:300;
  color:var(--mint)
}

.workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) 318px;
  gap:20px;
  align-items:start
}

.viewer {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel)
}

.viewer-toolbar {
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 20px;
  border-bottom:1px solid var(--line)
}

.scene-select {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:var(--dim)
}

select {
  border:1px solid #354752;
  border-radius:6px;
  color:var(--ink);
  background:#182630;
  padding:8px 25px 8px 10px;
  font-size:12px;
  max-width:200px
}

.trace-status {
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}

.stage {
  height:565px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,#1a2a35 0,#101d27 72%)
}

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

canvas:active {
  cursor:grabbing
}

.stage-caption {
  position:absolute;
  top:23px;
  left:23px;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:5px
}

.caption-label {
  font-size:8px;
  letter-spacing:1.8px;
  color:var(--dim);
  margin-bottom:4px
}

.stage-caption strong {
  font-size:13px;
  letter-spacing:.15px;
  font-weight:550
}

.stage-caption>span:last-child {
  font-size:10px;
  color:var(--dim)
}

.view-tools {
  position:absolute;
  top:22px;
  right:18px;
  display:flex;
  flex-direction:column;
  border:1px solid #344650;
  border-radius:7px;
  overflow:hidden;
  background:#12212cdd
}

.view-tools button {
  border:0;
  border-bottom:1px solid #344650;
  background:none;
  font-size:18px;
  width:30px;
  height:31px;
  font-weight:300
}

.view-tools button:last-child {
  border-bottom:0
}

.stage-note {
  pointer-events:none;
  position:absolute;
  bottom:19px;
  left:20px;
  right:20px;
  text-align:center;
  color:#93a8b6;
  font-size:9px;
  line-height:1.5
}

.stage-note span {
  margin:0 8px;
  color:#546c7d
}

.toast {
  position:absolute;
  left:50%;
  bottom:53px;
  transform:translateX(-50%);
  max-width:90%;
  width:max-content;
  background:#263642f5;
  border:1px solid #586f7f;
  border-radius:6px;
  padding:10px 16px;
  font-size:11px;
  box-shadow:0 8px 30px #0004;
  text-align:center
}

.legend {
  display:flex;
  gap:19px;
  align-items:center;
  justify-content:center;
  padding:15px 10px;
  font-size:10px;
  color:var(--muted);
  border-top:1px solid var(--line);
  flex-wrap:wrap
}

.legend>span {
  display:flex;
  align-items:center;
  gap:7px
}

.legend-line {
  display:inline-block;
  width:18px;
  border-top:2px solid
}

.legend-line.los {
  border-color:var(--mint)
}

.legend-line.nlos {
  border-color:var(--amber)
}

.legend-line.blocked {
  border-color:var(--red);
  border-top-style:dashed
}

.receiver-key i {
  width:6px;
  height:6px;
  border:1px solid var(--blue);
  border-radius:50%;
  box-shadow:0 0 0 3px #8cbbef22
}

.playback {
  padding:19px 20px;
  display:flex;
  gap:20px;
  align-items:center;
  border-top:1px solid var(--line);
  background:#14212b
}

.play-button {
  background:var(--mint);
  color:#113228;
  font-size:11px;
  font-weight:650;
  border:0;
  border-radius:6px;
  min-width:104px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px
}

.play-button>span:first-child {
  font-size:10px
}

.timeline {
  flex:1;
  min-width:0
}

.timeline label {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin-bottom:7px
}

.timeline output {
  font-variant-numeric:tabular-nums;
  color:var(--ink)
}

.text-button {
  font-size:10px;
  border:0;
  padding:8px 0;
  background:none;
  color:var(--muted)
}

input[type=range] {
  --fill:0%;
  width:100%;
  height:4px;
  margin:6px 0;
  background:linear-gradient(to right,var(--mint) var(--fill),#344752 var(--fill));
  border-radius:4px;
  appearance:none;
  cursor:pointer
}

input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d5f5e8;
  box-shadow:0 0 0 3px #85e4bc18
}

input[type=range]::-moz-range-thumb {
  width:11px;
  height:11px;
  border-radius:50%;
  background:#d5f5e8;
  border:0
}

.sidebar {
  display:flex;
  flex-direction:column;
  gap:14px
}

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

.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px
}

h2 {
  font-size:12px;
  font-weight:550;
  letter-spacing:.1px;
  margin:0
}

.section-index {
  font-size:9px;
  color:#668193;
  font-variant-numeric:tabular-nums
}

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

.slider-label output {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--ink)
}

.range-endpoints {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--dim);
  margin-top:5px
}

.second-slider {
  margin-top:22px
}

.check-row {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:var(--muted);
  margin-top:19px
}

.check-row input {
  accent-color:var(--mint);
  width:12px;
  height:12px;
  margin:0
}

.signals .section-title {
  margin-bottom:17px
}

.metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line)
}

.metrics div {
  display:flex;
  flex-direction:column;
  gap:7px
}

.metrics strong {
  font-size:25px;
  line-height:1;
  font-weight:450;
  font-variant-numeric:tabular-nums
}

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

.los-color {
  color:var(--mint)
}

.nlos-color {
  color:var(--amber)
}

.blocked-color {
  color:var(--red)
}

.satellite-heading {
  display:flex;
  justify-content:space-between;
  color:var(--dim);
  font-size:8px;
  letter-spacing:.4px;
  text-transform:uppercase;
  margin:15px 0 6px
}

.satellites {
  display:grid;
  grid-template-columns:1fr;
  gap:2px
}

.satellite {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 7px;
  border:1px solid transparent;
  background:transparent;
  border-radius:5px;
  font-size:10px;
  text-align:left
}

.satellite:hover {
  background:#1c2e3a
}

.satellite[aria-pressed=true] {
  border-color:#406251;
  background:#1a302b
}

.satellite-id {
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:500
}

.satellite-dot {
  width:4px;
  height:4px;
  background:currentColor;
  border-radius:50%
}

.satellite-meta {
  display:flex;
  gap:9px;
  align-items:center;
  color:var(--dim);
  font-size:9px
}

.satellite-meta>span:first-child {
  width:22px;
  text-align:right;
  font-variant-numeric:tabular-nums
}

.path-tag {
  font-size:8px;
  letter-spacing:.25px;
  min-width:43px;
  text-align:right
}

.selected-id {
  font-size:10px;
  color:var(--mint);
  border:1px solid #3d5f50;
  border-radius:4px;
  padding:3px 6px;
  font-variant-numeric:tabular-nums
}

.inspector .section-title {
  margin-bottom:13px
}

.channel-status {
  font-size:10px;
  line-height:1.5;
  margin:0 0 14px;
  color:var(--muted)
}

.channel-values {
  margin:0;
  display:grid;
  gap:10px
}

.channel-values>div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  font-size:9px
}

.channel-values dt {
  color:var(--dim)
}

.channel-values dd {
  margin:0;
  color:var(--ink);
  font-variant-numeric:tabular-nums
}

.model-note {
  border:1px solid var(--line);
  border-radius:8px;
  padding:17px 20px;
  margin-top:20px;
  color:var(--dim);
  font-size:10px;
  line-height:1.7
}

.model-note>div {
  display:flex;
  gap:11px;
  align-items:center
}

.model-icon {
  font-size:20px;
  color:#7d9e9b
}

.model-note p {
  margin:0
}

.model-note strong {
  color:var(--muted);
  font-weight:550;
  margin-right:4px
}

.model-note details {
  padding-left:31px;
  margin-top:6px
}

.model-note summary {
  width:max-content;
  max-width:100%;
  cursor:pointer;
  color:var(--muted);
  font-size:9px
}

.model-note details p {
  margin-top:12px;
  max-width:110ch
}

.model-note a {
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--mint)
}

footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:23px 0 30px;
  font-size:9px;
  color:var(--dim)
}

.footer-separator {
  padding:0 9px;
  color:#465f70
}

.no-script {
  padding:20px;
  border:1px solid var(--red);
  color:var(--ink)
}

@media(min-width:1500px) {
  .stage {
    height:650px
  }
}

@media(max-width:1100px) {
  .shell {
    padding:0 25px
  }
  .workspace {
    grid-template-columns:minmax(0,1fr) 280px;
    gap:14px
  }
  .stage {
    height:570px
  }
  .panel {
    padding:15px
  }
  .intro-tag {
    display:none
  }
  .stage-note {
    font-size:8px
  }
  .legend {
    gap:12px
  }
  .playback {
    gap:14px;
    padding:18px 14px
  }
}

@media(max-width:780px) {
  .shell {
    padding:0 18px
  }
  .topbar {
    height:64px
  }
  .brand {
    font-size:15px
  }
  .brand-divider {
    padding:0 2px
  }
  .nav-links {
    gap:15px;
    font-size:10px
  }
  .nav-links a:first-child {
    display:none
  }
  .intro {
    padding:27px 0 23px
  }
  h1 {
    font-size:29px;
    letter-spacing:-1px
  }
  .intro-copy {
    font-size:12px;
    max-width:45ch
  }
  .workspace {
    grid-template-columns:1fr
  }
  .stage {
    height:440px
  }
  .viewer-toolbar {
    height:57px;
    padding:0 15px
  }
  .sidebar {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .signals {
    grid-column:2;
    grid-row:1/3
  }
  .environment,.inspector {
    grid-column:1
  }
  .model-note {
    margin-top:14px
  }
  .playback {
    gap:14px
  }
  .stage-caption {
    top:19px;
    left:17px
  }
  .stage-note {
    left:12px;
    right:12px;
    font-size:8px
  }
  .trace-status {
    font-size:9px
  }
  .intro .eyebrow {
    font-size:9px
  }
  .legend {
    font-size:9px
  }
}

@media(max-width:520px) {
  .shell {
    padding:0 13px
  }
  .brand-section {
    font-size:11px
  }
  .intro {
    padding-top:23px
  }
  .intro-copy {
    font-size:11px
  }
  .workspace {
    gap:12px
  }
  .stage {
    height:385px
  }
  .sidebar {
    grid-template-columns:1fr
  }
  .signals {
    grid-column:1;
    grid-row:auto
  }
  .environment,.inspector {
    grid-column:1
  }
  .environment {
    order:0
  }
  .signals {
    order:1
  }
  .inspector {
    order:2
  }
  .bias-panel {
    order:3
  }
  .panel {
    padding:18px
  }
  .satellites {
    grid-template-columns:1fr 1fr;
    gap:3px 10px
  }
  .satellite {
    padding:7px 5px
  }
  .satellite-meta {
    gap:5px
  }
  .satellite-heading {
    display:none
  }
  .metrics {
    margin-bottom:12px
  }
  .metrics span {
    font-size:9px
  }
  .metrics strong {
    font-size:27px
  }
  .channel-values>div {
    font-size:10px
  }
  .stage-note span {
    margin:0 3px
  }
  .stage-note {
    font-size:7px;
    bottom:13px
  }
  .legend {
    gap:9px;
    font-size:8px;
    padding:13px 7px
  }
  .legend-line {
    width:13px
  }
  .playback {
    padding:15px 12px;
    gap:12px
  }
  .play-button {
    min-width:88px;
    font-size:10px;
    height:34px
  }
  .scene-select {
    gap:8px;
    font-size:10px
  }
  select {
    font-size:11px;
    padding-left:8px;
    max-width:158px
  }
  .viewer-toolbar {
    gap:8px;
    padding:0 12px
  }
  .trace-status {
    font-size:8px;
    gap:5px
  }
  .model-note {
    padding:14px;
    font-size:9px
  }
  .model-note>div {
    align-items:flex-start
  }
  .model-note details {
    padding-left:28px
  }
  .model-note strong {
    display:block
  }
  footer {
    font-size:8px;
    gap:14px;
    line-height:1.5
  }
  .stage-caption>span:last-child {
    font-size:9px
  }
  .stage-caption strong {
    font-size:12px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }
}

label[for="gnss-systems"] { display:block; margin:12px 0 6px; color:var(--muted); font-size:11px }
#gnss-systems { width:100%; max-width:100%; box-sizing:border-box; font-size:11px }

.signal-history{padding:16px 20px;border-top:1px solid #ffffff18;min-width:0}.signal-history-heading{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}.signal-history h2{font-size:13px;margin:0}.signal-history h2 span{font-size:11px;color:#a9b9b6;font-weight:400;margin-left:8px}.signal-history output{font-size:11px;color:#a9b9b6}.signal-history svg{display:block;width:100%;height:auto;max-height:210px}.signal-history .tool-help{margin-top:0}@media(max-width:600px){.signal-history{padding:12px}.signal-history-heading{display:block}.signal-history output{display:block;margin-top:6px}}

.analysis-content{padding:0 20px 18px;min-width:0}.analysis-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:10px 0}.analysis-controls label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#a9b9b6}.analysis-controls select,.analysis-controls input{max-width:100%;background:#12202b;color:#e7eeec;border:1px solid #ffffff30;padding:6px;border-radius:5px}.analysis-controls input{width:100px}.analysis-controls button,#analysis-jump{background:#1e3542;color:#e7eeec;border:1px solid #ffffff30;padding:7px 12px;border-radius:5px;cursor:pointer}.analysis-controls button:disabled,#analysis-jump:disabled{opacity:.4;cursor:default}#analysis-map{display:block;width:100%;height:230px;touch-action:pan-y;background:#0b1721;border-radius:8px}#analysis-position{width:100%}.analysis-controls select{font-size:12px}@media(max-width:600px){.analysis-content{padding:0 12px 12px}.analysis-controls{gap:8px}#analysis-map{height:200px}}

.analysis-statistics{width:100%;border-collapse:collapse;font-size:11px;color:#d4e2de}.analysis-statistics caption{text-align:left;color:#a9b9b6;margin:12px 0 8px}.analysis-statistics th,.analysis-statistics td{text-align:right;padding:7px 4px;border-bottom:1px solid #ffffff18}.analysis-statistics th:first-child,.analysis-statistics td:first-child{text-align:left}

.recorded-strength{border-top:1px solid #ffffff18;margin-top:10px;padding-top:12px}.recorded-strength>summary{cursor:pointer;font-size:12px;color:#d4e2de}.recorded-strength>summary span{color:#a9b9b6;margin-left:8px;font-size:11px}.recorded-strength>output{display:block;font-size:11px;color:#a9b9b6;margin:8px 0}.recorded-strength>svg{display:block;width:100%;height:auto}