:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; color: #e4eaf4; background: #0b1018; }
* { box-sizing: border-box; }
body { margin: 0; }
header { min-height: 70px; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #293243; background: #121925; }
.brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand > span:last-child { color: #abb9cd; font-size: .9rem; }
.brand-mark { color: #59caff; font-size: 1.65rem; }
.brand strong { letter-spacing: .13em; font-size: .95rem; }
.divider { height: 22px; width: 1px; background: #384256; }
.badge { color: #afdff6; border: 1px solid #365268; padding: 5px 10px; border-radius: 5px; font-size: .8rem; white-space: nowrap; }
main { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100dvh - 70px); min-height: 620px; }
aside { background: #121925; padding: 27px 24px; overflow: auto; border-right: 1px solid #293243; }
.section-label { color: #98a9c1; font-size: .75rem; letter-spacing: .13em; font-weight: 600; margin-bottom: 12px; }
h1 { font-size: 1.25rem; line-height: 1.45; margin: 0 0 9px; overflow-wrap: anywhere; font-weight: 550; }
.sequence-label { display: block; font-size: .875rem; margin-bottom: 7px; color: #afbed2; }
#sequence-select, #frame-stride { display: block; width: 100%; min-width: 0; padding: 10px; margin-bottom: 18px; color: #e4eaf4; background: #202c3d; border: 1px solid #40516a; border-radius: 5px; font: inherit; font-size: .875rem; }
summary { cursor: pointer; font-size: .875rem; color: #afbed2; }
details p { font-size: .8rem; overflow-wrap: anywhere; margin: 8px 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0 28px; gap: 10px; }
.stats strong { display: block; font-size: 1.2rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.stats span { display: block; color: #99aac0; font-size: .8rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.range-label { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; margin-top: 10px; }
output { color: #8fd7fa; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: #59caff; margin: 10px 0 19px; cursor: pointer; }
.toggle { display: flex; align-items: center; gap: 10px; font-size: .875rem; margin: 8px 0 24px; cursor: pointer; }
.annotation-controls { margin-bottom: 24px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: #ffc16a; margin: 0; flex-shrink: 0; }
button { width: 100%; color: #e4eaf4; background: #202c3d; border: 1px solid #40516a; border-radius: 5px; font: inherit; font-size: .875rem; padding: 9px 15px; cursor: pointer; }
button:hover { background: #2b3b50; }
:focus-visible { outline: 2px solid #59caff; outline-offset: 4px; }
.legend { border-top: 1px solid #293243; margin-top: 28px; padding-top: 22px; }
.legend > div:not(.section-label) { display: flex; align-items: center; gap: 12px; font-size: .875rem; margin-bottom: 12px; }
.line-swatch { width: 26px; border-top: 2px solid; flex-shrink: 0; }
.reconstructed { border-color: #59caff; }
.gt { border-color: #ffc16a; border-top-style: dashed; }
.point-swatch { width: 26px; height: 8px; background: radial-gradient(circle, #d5d4c9 1px, transparent 2px) 0 0 / 7px 7px; flex-shrink: 0; }
.glyph-note { color: #94a5bc; }
.glyph-note { font-size: .75rem; margin: 20px 0 0; }
#viewport { position: relative; min-width: 0; min-height: 400px; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#frame-labels { position: absolute; inset: 0; width: 100%; height: 100%; font: 600 14px system-ui, sans-serif; pointer-events: none; }
#frame-labels line { stroke: #59caff; stroke-opacity: .7; }
#frame-labels text { fill: #a5e3ff; stroke: #0b1018; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; text-anchor: middle; dominant-baseline: central; }
.viewport-label { position: absolute; z-index: 1; top: 23px; left: 24px; color: #c0cde0; font-size: .75rem; letter-spacing: .1em; pointer-events: none; }
.viewport-label span { color: #8c9eb8; letter-spacing: 0; margin-left: 14px; }
.ate-card { position: absolute; z-index: 1; top: 23px; right: 24px; padding: 14px 18px; background: #142335f5; border: 1px solid #4387aa; border-left: 4px solid #59caff; border-radius: 6px; pointer-events: none; }
.ate-label { color: #d3edff; font-size: .875rem; font-weight: 650; }
.ate-label span { display: block; color: #a7bcd2; font-size: .75rem; font-weight: 400; }
#ate-value { display: block; font-size: 2.25rem; line-height: 1.3; font-weight: 650; color: #8fd7fa; font-variant-numeric: tabular-nums; margin: 5px 0; }
#ate-detail { color: #b6c7dc; font-size: .75rem; white-space: pre-line; }
.navigation-help { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #101722e8; border: 1px solid #2b3647; border-radius: 6px; padding: 8px 15px; color: #b5c3d7; font-size: .8rem; white-space: nowrap; pointer-events: none; }
.navigation-help span { padding: 0 7px; color: #647993; }
#status { position: absolute; z-index: 2; top: 45%; left: 10%; right: 10%; text-align: center; padding: 20px; background: #141e2c; border: 1px solid #3c506c; border-radius: 6px; }
#status[hidden] { display: none; }
@media (max-width: 760px) {
  header { padding: 13px 18px; }
  .brand { gap: 8px; }
  .brand > span:last-child, .divider, .badge { display: none; }
  main { height: auto; min-height: 0; grid-template-columns: 1fr; }
  #viewport { grid-row: 1; height: 58dvh; min-height: 340px; }
  aside { border-right: 0; border-top: 1px solid #293243; }
  .navigation-help { width: calc(100% - 28px); text-align: center; white-space: normal; }
  .viewport-label { left: 16px; top: 16px; }
  .viewport-label span { display: block; margin-left: 0; }
  .ate-card { top: 75px; right: 16px; padding: 10px 12px; }
  #ate-value { font-size: 1.75rem; }
}