:root {
  /* Scale interface dimensions and type by 20%; rem keeps browser text preferences. */
  font-size: 120%;
  color-scheme: dark;
  --bg-a: #050b12; --bg-b: #0a1722; --navy: #0b1a28;
  --cyan: #80d9f5; --amber: #edbf7a; --green: #7ee2bc; --yellow: #edbf7a; --red: #ff8781;
  --txt: #e2edf6; --dim: #92a9bb; --faint: #6d889f; --line: #294050;
  --title: 'Montserrat', sans-serif; --body: 'Inter', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--txt); font: 0.8125rem/1.5 var(--body); background: var(--bg-a); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 28%, #132a3c80, transparent 64%), linear-gradient(#19324714 0.0625rem, transparent 0.0625rem), linear-gradient(90deg, #19324714 0.0625rem, transparent 0.0625rem); background-size: auto, 3rem 3rem, 3rem 3rem; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: var(--txt); border: 0.0625rem solid var(--line); background: #112332; transition: background .18s, border-color .18s, transform .18s; }
button:hover { border-color: var(--cyan); background: #193747; }
button:active { transform: translateY(0.0625rem); }
button:disabled { opacity: .42; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 0.125rem solid var(--amber); outline-offset: 0.25rem; }
h1, h2, h3, p { margin: 0; }
.hidden { display: none !important; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.3125rem; height: 1.3125rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--faint); } .amber { color: var(--amber); }
.eyebrow { font: 0.625rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.signal-dot { display: inline-block; width: 0.3125rem; height: 0.3125rem; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0.5rem #80d9f580; flex-shrink: 0; }
.topbar { height: 5.25rem; padding: 0 2.5rem; border-bottom: 0.0625rem solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: #08121bea; }
.brand { display: flex; gap: 0.8125rem; align-items: center; text-decoration: none; color: var(--txt); font: 700 1.0625rem/1 var(--title); letter-spacing: .1em; }
.brand-accent { color: var(--cyan); }
.brand small { display: block; margin-top: 0.5rem; font: 0.5rem var(--mono); color: var(--faint); letter-spacing: .21em; }
.brand-mark { width: 2.5rem; height: 2.5625rem; display: block; object-fit: contain; flex: 0 0 auto; }
.header-center { display: flex; align-items: center; gap: 1.25rem; font: 0.5625rem var(--mono); color: var(--faint); letter-spacing: .22em; }
.header-line { width: 2.625rem; height: 0.0625rem; background: var(--line); }
.header-tools { display: flex; align-items: center; gap: 1.25rem; }
.text-button { padding: 0.3125rem 0; background: transparent; border: 0; color: var(--dim); font-size: 0.6875rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.text-button:hover { color: var(--cyan); background: none; }
.help-symbol { width: 0.9375rem; height: 0.9375rem; border: 0.0625rem solid var(--faint); border-radius: 50%; font: 0.625rem/0.875rem var(--mono); }
.lang { display: flex; gap: 0.0625rem; border: 0.0625rem solid var(--line); padding: 0.1875rem; }
.lang button { font: 0.625rem var(--mono); padding: 0.375rem 0.5rem; border: 0; background: transparent; color: var(--faint); }
.lang button.on { background: #203b4c; color: var(--cyan); }
.icon-button { display: grid; place-content: center; width: 1.875rem; height: 1.875rem; border: 0; background: none; color: var(--faint); }
.page-shell { max-width: 105rem; margin: auto; padding: 1.75rem 2.5rem 0; }
.command-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.6875rem; }
.command-heading .eyebrow { display: flex; align-items: center; gap: 0.5rem; color: var(--cyan); }
.command-heading h1 { font: 600 clamp(1.125rem, 2.28vw, 1.75rem)/1.3 var(--title); margin-top: 0.5rem; letter-spacing: .01em; }
.connection { display: flex; align-items: center; gap: 0.625rem; color: var(--dim); font-size: 0.625rem; }
.connection .icon { color: var(--cyan); width: 1.625rem; height: 1.625rem; }
.connection small { display: block; font-size: 0.5625rem; color: var(--faint); margin-top: 0.125rem; }
.dashboard { display: grid; grid-template-columns: 14.875rem minmax(24.375rem, 1fr) 19.375rem; gap: 1.125rem; align-items: start; }
.panel { position: relative; border: 0.0625rem solid var(--line); background: linear-gradient(135deg, #102130d9, #0b151fe8); box-shadow: inset 0 0.0625rem #a5dafa08; }
.panel::before { content: ''; position: absolute; left: -0.0625rem; top: -0.0625rem; width: 1.625rem; height: 0.125rem; background: #83cbe191; }
.section-caption, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5625rem; font: 0.625rem/1.4 var(--mono); letter-spacing: .08em; color: #bdd5e5; }
.section-caption { height: 2rem; margin-bottom: 0.625rem; }
.section-no { color: var(--cyan); font-size: 0.5625rem; margin-right: 0.5625rem; }
.caption-line { height: 0.0625rem; flex: 1; background: var(--line); }
.panel-heading { padding: 0.9375rem 1.0625rem; border-bottom: 0.0625rem solid var(--line); min-height: 2.875rem; }
.panel-heading > span:first-child { display: flex; align-items: center; }
.panel-heading .icon { width: 1rem; height: 1rem; color: var(--amber); }
.assessment-cards { display: flex; flex-direction: column; gap: 0.625rem; }
.assessment-card { padding: 1rem 1.0625rem 0.8125rem; text-align: left; position: relative; display: flex; flex-direction: column; width: 100%; background: linear-gradient(115deg, #102030, #0b1721); border-color: #233b4c; }
.assessment-card::after { content: ''; position: absolute; left: -0.0625rem; top: 0.875rem; width: 0.125rem; height: 1.5625rem; background: var(--faint); opacity: .4; }
.assessment-card.is-selected { border-color: #6ab4d3; background: linear-gradient(110deg, #1e4055a6, #102332); box-shadow: inset 0 0 1.75rem #53beeb0a, 0 0 1.375rem #42b7de06; }
.assessment-card.is-selected::after { background: var(--cyan); opacity: 1; top: 0; bottom: 0; height: auto; width: 0.1875rem; }
.assessment-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--cyan); }
.selected-mark { margin-left: auto; visibility: hidden; font-size: 1.125rem; line-height: 1; }
.is-selected .selected-mark { visibility: visible; }
.assessment-tag { font: 0.5rem var(--mono); text-transform: uppercase; color: var(--faint); letter-spacing: .1em; margin-bottom: 0.3125rem; }
.is-selected .assessment-tag { color: var(--cyan); }
.assessment-name { font: 600 0.9375rem/1.4 var(--title); color: #dbeaf6; }
.assessment-description { font-size: 0.625rem; line-height: 1.6; color: var(--dim); margin: 0.3125rem 0 0.875rem; }
.briefing { margin-top: 1rem; padding: 1.0625rem; }
.briefing ol { padding: 0; list-style: none; counter-reset: setup; margin: 0.875rem 0; }
.briefing li { counter-increment: setup; display: flex; gap: 0.625rem; font-size: 0.625rem; color: var(--dim); margin-top: 0.5625rem; }
.briefing li::before { content: '0' counter(setup); color: #5a849b; font-family: var(--mono); }
.briefing-footer { border-top: 0.0625rem solid var(--line); display: flex; align-items: center; gap: 0.4375rem; padding-top: 0.75rem; font-size: 0.5625rem; color: var(--faint); }
.briefing-footer .icon { width: 0.8125rem; height: 0.8125rem; }
.viewport-column { display: flex; flex-direction: column; gap: 0.875rem; }
.scanner-panel { background: #09131e; }
.scanner-status { color: var(--cyan); display: flex; align-items: center; gap: 0.375rem; font-size: 0.5rem; letter-spacing: .06em; }
#stage { height: 37.5rem; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 40%, #183c56a6, #08121d 64%); }
#stage::after { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 0.1875rem, #a7d8ff05 0.1875rem 0.25rem); pointer-events: none; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; }
#cam { position: absolute; width: 0.0625rem; height: 0.0625rem; opacity: 0; pointer-events: none; }
.stage-corners { position: absolute; inset: 0.8125rem; pointer-events: none; z-index: 3; }
.stage-corners i { position: absolute; width: 0.875rem; height: 0.875rem; border: solid #699fbc75; }
.stage-corners i:nth-child(1) { top: 0; left: 0; border-width: 0.0625rem 0 0 0.0625rem; }
.stage-corners i:nth-child(2) { top: 0; right: 0; border-width: 0.0625rem 0.0625rem 0 0; }
.stage-corners i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 0.0625rem 0.0625rem; }
.stage-corners i:nth-child(4) { bottom: 0; right: 0; border-width: 0 0.0625rem 0.0625rem 0; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.625rem; gap: 0.875rem; text-align: center; }
#gate { display: grid; grid-template-rows: auto minmax(15rem, 1fr) auto; gap: 0; padding: 1.6875rem 1.5rem 1.1875rem; }
.gate-heading { position: relative; z-index: 1; }
.gate-heading .eyebrow { color: #76a9c3; font-size: 0.5rem; letter-spacing: .2em; }
.gate-heading h2 { font: 600 1.625rem/1.3 var(--title); margin-top: 0.4375rem; }
.sub { font-size: 0.6875rem; color: var(--dim); line-height: 1.7; }
.gate-heading .sub { margin: 0.5625rem auto 0; max-width: 18.125rem; }
.holo-scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; }
.holo-athlete { height: 100%; width: 86%; max-height: 22.8125rem; position: relative; z-index: 1; filter: drop-shadow(0 0 0.875rem #6ac5f51c); }
.orbit { position: absolute; width: 17.5rem; max-width: 86%; aspect-ratio: 1; border: 0.0625rem solid #5ea4c138; border-radius: 50%; }
.orbit-outer::before { content: ''; position: absolute; inset: -0.5rem; border: 0.0625rem dashed #85bdd62e; border-radius: 50%; }
.orbit-outer::after { content: ''; position: absolute; inset: -0.125rem; border: 0.1875rem solid transparent; border-left-color: #8bd6f187; border-right-color: #8bd6f187; border-radius: 50%; transform: rotate(-30deg); }
.orbit-inner { width: 13.375rem; border-color: #619fc320; }
.crosshair { position: absolute; width: 20rem; max-width: 90%; height: 18.125rem; background: linear-gradient(90deg, transparent calc(50% - 0.03125rem), #568cab25 50%, transparent calc(50% + 0.03125rem)), linear-gradient(transparent calc(50% - 0.03125rem), #568cab25 50%, transparent calc(50% + 0.03125rem)); }
.body-label { position: absolute; z-index: 2; text-align: left; font: 0.5rem var(--mono); color: var(--dim); }
.body-label small { font-size: 0.4375rem; color: var(--faint); }
.body-label b { display: block; margin-top: 0.25rem; font-weight: 400; color: #b2d8e9; }
.label-left { left: 0; top: 31%; } .label-right { right: 0; top: 62%; text-align: right; }
.label-leader { display: block; width: 4.0625rem; border-bottom: 0.0625rem solid #56849b; position: relative; margin-top: 0.5625rem; }
.label-leader::after { content: ''; width: 0.25rem; height: 0.25rem; border: 0.0625rem solid #92d4ec; position: absolute; right: -0.25rem; top: -0.125rem; }
.label-right .label-leader { margin-left: auto; }
.floor-ring { position: absolute; width: 11.25rem; height: 1.875rem; border: 0.0625rem solid #81cbe936; border-radius: 50%; bottom: 0.125rem; box-shadow: 0 0 0.75rem #53a5d21f, inset 0 0 1.125rem #53a5d21f; }
.scan-sweep { position: absolute; left: 17%; right: 17%; top: 25%; height: 1.875rem; background: linear-gradient(transparent, #97e2ff0d); border-bottom: 0.0625rem solid #9ee6ff61; z-index: 2; animation: scan 7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes scan { to { top: 80%; } }
.launch-area { width: 100%; position: relative; z-index: 4; }
.launch-meta { display: flex; gap: 0.5rem; justify-content: center; align-items: center; color: var(--faint); font: 0.5625rem var(--mono); margin: 0.4375rem 0 0.625rem; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 0.6875rem; min-height: 2.875rem; padding: 0.75rem 1.375rem; background: #9fdff0; border: 0.0625rem solid #c9f4ff; color: #102332; font-weight: 600; font-size: 0.75rem; box-shadow: 0 0 1.375rem #71cff012; }
.primary-button:hover { background: #c0ecf7; border-color: #e7faff; }
#start-assessment { width: min(100%, 19.75rem); }
.primary-button .icon { width: 1rem; height: 1rem; } .primary-button .arrow { margin-left: 0.75rem; }
.demo-button { display: block; margin: 0.625rem auto 0; padding: 0.125rem; border: 0; background: transparent; color: var(--dim); font-size: 0.625rem; text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-color: #466477; }
.demo-button:hover { color: var(--cyan); background: transparent; }
#demo { margin-top: 0.3125rem; font-size: 0.5625rem; }
#err { font-size: 0.6875rem; max-width: 22.5rem; margin: 0.4375rem auto 0; line-height: 1.5; }
#err:empty { display: none; }
.scanner-footer { min-height: 2.4375rem; border-top: 0.0625rem solid var(--line); display: flex; gap: 0.625rem; align-items: center; justify-content: space-between; padding: 0 1rem; font: 0.5rem var(--mono); color: var(--faint); }
.scanner-footer > span:first-child { display: flex; align-items: center; gap: 0.375rem; color: var(--dim); }
.tiny-bars { color: var(--cyan); letter-spacing: 0.125rem; }
.telemetry { display: grid; grid-template-columns: 1.4fr 1fr; padding: 1.1875rem 0; }
.telemetry > div { padding: 0 1.25rem; border-right: 0.0625rem solid var(--line); }
.telemetry > div:last-child { border: 0; }
.telemetry .eyebrow { font-size: 0.5rem; display: block; }
.telemetry strong { display: block; font: 1.5625rem/1.2 var(--mono); margin-top: 0.5rem; }
.telemetry strong small { font-size: 0.6875rem; color: var(--faint); }
.profile-column { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.progress-content { display: flex; align-items: center; gap: 1rem; padding: 1.3125rem 1.0625rem 1.125rem; }
.progress-ring { --progress: 0%; flex: 0 0 5.75rem; height: 5.75rem; padding: 0.3125rem; border-radius: 50%; background: conic-gradient(var(--cyan) var(--progress), #233d50 0); position: relative; outline: 0.0625rem solid #34586e; outline-offset: 0.3125rem; }
.progress-ring::after { content: ''; position: absolute; width: 0.3125rem; height: 0.3125rem; background: var(--amber); left: calc(50% - 0.125rem); top: -0.4375rem; }
.progress-ring > div { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; background: #0e1d2b; border-radius: 50%; }
.progress-ring strong { font: 1.625rem/1.2 var(--mono); color: #dbedf8; }
.progress-ring small { font-size: 0.6875rem; color: var(--faint); margin-left: 0.125rem; }
.progress-ring span { font: 0.375rem var(--mono); letter-spacing: .1em; color: var(--faint); margin-top: 0.25rem; text-transform: uppercase; }
.progress-copy .eyebrow { font-size: 0.5rem; color: var(--amber); }
.progress-copy h3 { font: 600 0.8125rem/1.5 var(--title); margin-top: 0.25rem; }
.progress-copy p { font-size: 0.5625rem; line-height: 1.6; color: var(--faint); margin-top: 0.3125rem; }
.panel-title { font: 600 0.75rem/1.5 var(--title); padding: 1.0625rem 1.0625rem 0.75rem; color: var(--dim); }
#steps { padding: 0 0.8125rem; }
.step { display: flex; gap: 0.6875rem; padding: 0.8125rem 0.125rem; border-bottom: 0.0625rem solid #253c4d; align-items: flex-start; }
.step:last-child { border: 0; }
.step-n { margin-top: 0.125rem; width: 1.5rem; height: 1.5625rem; display: grid; place-items: center; border: 0.0625rem solid #375366; background: #122938; font: 0.625rem var(--mono); color: var(--faint); flex-shrink: 0; }
.step-name { font-size: 0.6875rem; font-weight: 500; color: #b9d0df; }
.step-meta { font-size: 0.5rem; color: var(--faint); margin-top: 0.1875rem; }
.step-clinical { display: none; }
.step.active .step-n { background: var(--cyan); color: #132a37; border-color: var(--cyan); }
.step.active .step-name { color: var(--cyan); }
.step.done .step-n { background: #1d4e43; border-color: #407763; color: var(--green); }
.step.done .step-name { color: var(--green); }
.step.failed .step-n { border-color: var(--red); color: var(--red); }
.profile-preview { border-top: 0.0625rem solid var(--line); margin: 0.75rem 1.0625rem 0; padding-top: 1.0625rem; }
#idle-chains { margin-top: 0.75rem; }
.idle-chain { display: flex; align-items: center; gap: 0.5rem; font: 0.5rem var(--mono); color: var(--faint); margin-top: 0.625rem; }
.idle-chain span { width: 5.125rem; }
.idle-chain i { height: 0.1875rem; background: repeating-linear-gradient(90deg, #29465a 0 0.4375rem, transparent 0.4375rem 0.625rem); flex: 1; }
.idle-chain b { color: var(--dim); font-weight: 400; }
.subtle { font-size: 0.625rem; color: var(--faint); line-height: 1.7; }
.profile-preview .subtle { margin-top: 0.875rem; font-size: 0.5625rem; }
.note { font-size: 0.5625rem; line-height: 1.7; color: var(--faint); margin: 1rem 1.0625rem; }
.system-footer { margin-top: 1.4375rem; border-top: 0.0625rem solid #263f5066; padding: 1rem 0 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #607d93; font: 0.5rem var(--mono); letter-spacing: .07em; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; }
.footer-brand img { display: block; width: 1.25rem; height: 1.125rem; object-fit: contain; }
.system-footer > span:last-child { display: flex; gap: 0.5rem; align-items: center; }
.hud { display: flex; gap: 0.75rem; font: 0.5rem var(--mono); color: var(--faint); }

/* Capture overlays share the same frame as the assessment launcher. */
#coach, #teach { justify-content: space-between; pointer-events: none; padding: 1.5625rem 1.5rem; background: linear-gradient(#061320e6, transparent 30%, transparent 60%, #061320eb); }
.coach-top, .teach-card, .coach-bottom, .teach-bottom { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.coach-top, .teach-card { max-width: 27.5rem; }
.move-step { font: 0.5625rem var(--mono); letter-spacing: .14em; color: var(--cyan); }
.move-name { font: 600 1.375rem/1.4 var(--title); }
.move-instr { font-size: 0.75rem; color: #b2c7d5; line-height: 1.6; }
.move-clinical { font-size: 0.5625rem; color: var(--faint); }
.teach-tag { font: 0.5625rem var(--mono); letter-spacing: .1em; color: var(--amber); margin-top: 0.25rem; }
.teach-bottom { pointer-events: auto; }
#teach-ready, #start-now { background: var(--cyan); color: #102332; padding: 0.75rem 1.5rem; border-color: #b7e9fb; font-weight: 600; }
.coach-bottom { width: 100%; }
#start-now { pointer-events: auto; }
#countdown { font: 700 6.25rem/1 var(--title); text-shadow: 0 0 2.375rem #9bdcf559; animation: pop .6s ease; }
@keyframes pop { from { transform: scale(1.35); opacity: 0; } }
.rec-bar { width: 100%; height: 0.25rem; background: #365266; }
.rec-bar i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 0.5rem #80d9f5; }
.rec-dot { font: 0.625rem var(--mono); color: var(--amber); display: flex; align-items: center; gap: 0.5rem; }
.rec-dot b { width: 0.375rem; height: 0.375rem; background: var(--amber); border-radius: 50%; }
#hint { font-size: 0.6875rem; padding: 0.5rem 0.75rem; color: var(--cyan); background: #0a1b2eee; border: 0.0625rem solid var(--line); }
#hint.error { color: var(--red); border-color: var(--red); }
#controls { position: absolute; bottom: 0.8125rem; left: 0.875rem; z-index: 6; display: flex; gap: 0.25rem; }
#controls button { padding: 0.375rem 0.5rem; background: #0b1b29d9; font-size: 0.5rem; color: var(--dim); }
body[data-phase="teach"] #controls, body[data-phase="align"] #controls, body[data-phase="countdown"] #controls, body[data-phase="record"] #controls { bottom: 6.25rem; }
#processing { background: #081827ad; backdrop-filter: blur(0.3125rem); }
.rings { position: relative; width: 9.375rem; height: 9.375rem; }
.rings i { position: absolute; inset: 0; border: 0.125rem solid #5283a229; border-top-color: var(--cyan); border-radius: 50%; animation: spin 3s linear infinite; }
.rings i:nth-child(2) { inset: 1rem; border-top-color: var(--amber); animation-direction: reverse; animation-duration: 4s; }
.rings i:nth-child(3) { inset: 2rem; animation-duration: 5s; }
@keyframes spin { to { transform: rotate(360deg); } }
.proc-text { font-size: 0.75rem; color: var(--dim); }
.picker { position: absolute; inset: 1rem; padding: 1.875rem 1.4375rem; z-index: 8; background: #0b1b29f7; backdrop-filter: blur(1.125rem); border: 0.0625rem solid #5d8da6; box-shadow: 0 1.25rem 2.5rem #0008; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.picker h3 { font: 600 1.25rem var(--title); margin: 0.5rem 0 1.25rem; }
.pick { width: 100%; text-align: left; display: flex; gap: 0.8125rem; padding: 0.875rem 0.75rem; margin-bottom: 0.4375rem; border: 0.0625rem solid var(--line); background: #112737; align-items: center; }
.pick.on { border-color: #649bb6; background: #19374a; }
.pick-box { height: 1.25rem; width: 1.25rem; border: 0.0625rem solid #4c798d; display: grid; place-items: center; flex-shrink: 0; color: var(--cyan); }
.pick-name { font-size: 0.75rem; font-weight: 500; } .pick-meta { font-size: 0.5625rem; color: var(--dim); margin-top: 0.1875rem; }
.btns { display: flex; gap: 0.5rem; margin-top: 1.125rem; }
.ghost { padding: 0.5625rem 0.9375rem; background: #122736; color: var(--dim); font-size: 0.6875rem; }

/* Existing assessment results keep their meaning inside the HUD panels. */
#result { padding: 0 0.9375rem 0.9375rem; }
#result .panel-title { padding-left: 0; color: var(--txt); font-size: 0.875rem; }
.primary, .card { border: 0.0625rem solid var(--line); background: #102232; padding: 0.8125rem; margin-bottom: 0.75rem; }
.primary .name { font: 600 0.75rem/1.5 var(--title); }
.primary .sci { font-size: 0.5625rem; color: var(--faint); margin-top: 0.3125rem; }
.primary .row { display: flex; align-items: center; gap: 0.5625rem; justify-content: space-between; }
.primary .val { font: 1.875rem var(--mono); }
.primary .status { font: 0.5rem/1.5 var(--mono); text-align: right; max-width: 8.75rem; }
.bar { position: relative; height: 0.375rem; background: #284153; margin: 0.75rem 0 0.5625rem; }
.bar i { display: block; width: 0; height: 100%; transition: width .7s; }
.bar u { position: absolute; top: -0.1875rem; width: 0.0625rem; height: 0.75rem; background: #e8edf0a8; }
.cmp { color: var(--dim); font-size: 0.5625rem; line-height: 1.6; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4375rem; margin-bottom: 0.75rem; }
.mini { text-align: left; background: #102230; padding: 0.625rem; border: 0.0625rem solid var(--line); }
.mini.iso { border-color: var(--cyan); background: #1b3949; }
.mini .n { font: 0.5rem var(--mono); color: var(--dim); letter-spacing: .04em; }
.mini .v { font: 1.25rem var(--mono); margin-top: 0.1875rem; }
.mini .bar { height: 0.1875rem; margin: 0.5625rem 0 0.125rem; } .mini .bar u { height: 0.5625rem; }
.card .k { color: var(--faint); font: 0.5rem/1.5 var(--mono); letter-spacing: .07em; }
.card .v { font: 600 0.75rem/1.6 var(--title); margin-top: 0.1875rem; }
.sport-row { display: flex; align-items: center; gap: 0.625rem; } .pict { font-size: 1.4375rem; }
.match { margin-left: auto; font: 1.3125rem var(--mono); color: var(--cyan); }
#measure-list, #live-list { display: flex; flex-direction: column; gap: 0.4375rem; margin-top: 0.5625rem; }
.measure { font-size: 0.625rem; color: var(--dim); display: flex; gap: 0.375rem; }
.measure b { color: var(--txt); font-weight: 500; }
.measure i { margin-left: auto; color: var(--cyan); font-style: normal; font-family: var(--mono); }
.measure.idle { opacity: .5; } .measure.waiting { color: var(--cyan); }
#live-card { margin: 0.875rem 0.8125rem; }
.rec { display: flex; gap: 0.5625rem; align-items: center; font-size: 0.625rem; border: 0.0625rem solid var(--line); padding: 0.625rem; margin-bottom: 0.375rem; }
.rec .i { font-size: 1.125rem; } .cta { font-size: 0.5625rem; color: var(--cyan); text-align: center; padding: 0.5rem 0; }
.actions { display: flex; flex-direction: column; gap: 0.4375rem; }
.actions button { font-size: 0.625rem; padding: 0.6875rem; }
.actions button:first-child { background: var(--cyan); color: #102332; }
#demo-note { margin: 0.875rem 0 0; }
.result-details { margin-top: 1.5rem; }
.result-details-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 1.125rem; align-items: start; }
.result-details-grid > .card { min-height: 10.75rem; padding: 1.25rem; background: linear-gradient(125deg, #102330, #0b1924); }
.result-details-grid .k { margin-bottom: 0.75rem; }
.result-details-grid .v { font-size: 0.9375rem; }
.result-details-grid .cmp, .result-details-grid .measure { font-size: 0.6875rem; }
.result-details-grid .phase { font-size: 0.5625rem; }
#recs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
#recs .rec { padding: 1.0625rem; margin: 0; background: #0e2130; font-size: 0.75rem; }
#recs .cta { grid-column: 1 / -1; }
.head-actions { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 0.4375rem; padding: 0.5rem; background: #081522ed; border: 0.0625rem solid #4c758d; box-shadow: 0 0.4375rem 1.5625rem #0008; backdrop-filter: blur(0.875rem); }
dialog { color: var(--txt); background: #0d2130; border: 0.0625rem solid #55819a; padding: 1.875rem; max-width: min(29.375rem, calc(100% - 2rem)); }
dialog::backdrop { background: #030a13cc; backdrop-filter: blur(0.5rem); }
dialog h2 { font: 600 1.4375rem var(--title); margin-top: 0.625rem; }
dialog ol { padding-left: 1.25rem; color: var(--dim); font-size: 0.75rem; }
dialog li { margin: 0.9375rem 0; padding-left: 0.4375rem; }
dialog form { margin-top: 1.375rem; }
dialog .primary-button { width: 100%; }
@media (min-width: 112.5em) { .dashboard { grid-template-columns: 16.5625rem minmax(25rem, 1fr) 21.5625rem; gap: 1.5rem; } #stage { height: 40.625rem; } .holo-athlete { max-height: 25.625rem; } .assessment-card { padding: 1.1875rem 1.25rem; } }
@media (max-width: 89.25em) {
  .page-shell { padding: 1.5rem 1.5rem 0; } .topbar { padding: 0 1.5rem; }
  .dashboard { grid-template-columns: 12.8125rem minmax(21.875rem, 1fr) 16.5625rem; gap: 0.75rem; }
  .header-center { display: none; } .assessment-card { padding: 0.875rem; }
  .progress-content { gap: 0.75rem; padding: 1.3125rem 0.875rem; } .progress-ring { flex-basis: 4.75rem; height: 4.75rem; }
  .progress-copy h3 { font-size: 0.6875rem; } .body-label { font-size: 0.4375rem; } .label-leader { width: 2.6875rem; }
  .scanner-footer { font-size: 0.4375rem; } .gate-heading h2 { font-size: 1.4375rem; }
}
@media (max-width: 73.5em) {
  .dashboard { grid-template-columns: 13.75rem minmax(22.5rem, 1fr); gap: 1rem; }
  .profile-column { grid-column: 1 / -1; display: grid; grid-template-columns: 13.75rem 1fr; gap: 1rem; }
  .progress-panel { align-self: start; } .progress-content { flex-direction: column; text-align: center; }
  .progress-ring { width: 5.75rem; min-height: 5.75rem; } .progress-copy h3 { font-size: 0.875rem; }
  .profile-preview { display: none; } #stage { height: 37.5rem; }
  #result .grid { grid-template-columns: repeat(3, 1fr); } .connection { display: none; }
  .result-details-grid { grid-template-columns: 1fr 1fr; gap: 0.875rem; }
  #recs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 48em) {
  .topbar { padding: 0 1.0625rem; height: 4.375rem; gap: 0.625rem; } .brand { font-size: 0.8125rem; gap: 0.5rem; }
  .brand-mark { width: 2rem; height: 2.125rem; } .brand small { font-size: 0.375rem; }
  .header-tools { gap: 0.625rem; } #how-to > span:last-child, #screen-toggle { display: none; }
  .page-shell { padding: 1.4375rem 0.875rem 0; } .command-heading { margin-bottom: 1.375rem; }
  .command-heading h1 { font-size: 1.25rem; line-height: 1.5; } .command-heading .eyebrow { font-size: 0.5rem; }
  .dashboard { display: flex; flex-direction: column; gap: 1.125rem; } .assessment-column, .viewport-column, .profile-column { width: 100%; }
  .assessment-cards { flex-direction: row; gap: 0.4375rem; } .assessment-card { padding: 0.6875rem 0.5625rem; min-width: 0; flex: 1; }
  .assessment-top { margin-bottom: 0.5rem; gap: 0.3125rem; } .assessment-top .icon { width: 1.125rem; height: 1.125rem; }
  .selected-mark { display: none; } .assessment-tag { font-size: 0.375rem; }
  .assessment-name { font-size: 0.625rem; min-height: 1.75rem; } .assessment-description { display: none; }
  .briefing { display: none; }
  #stage { height: 35.3125rem; } #gate { padding: 1.5625rem 1.25rem 1.1875rem; } .gate-heading h2 { font-size: 1.4375rem; }
  .gate-heading .sub { font-size: 0.625rem; max-width: 16.25rem; } .gate-heading .eyebrow { font-size: 0.4375rem; }
  .body-label { font-size: 0.4375rem; } .body-label small { font-size: 0.375rem; } .label-leader { width: 2.6875rem; }
  .holo-athlete { max-height: 20.625rem; } .orbit-outer { width: 15.625rem; } .orbit-inner { width: 11.875rem; }
  .telemetry { padding: 0.9375rem 0; } .telemetry > div { padding: 0 0.875rem; } .telemetry .eyebrow { font-size: 0.4375rem; }
  .telemetry strong { font-size: 1.375rem; } .profile-column { display: flex; }
  .progress-content { flex-direction: row; text-align: left; gap: 1.5rem; padding: 1.5rem; }
  .progress-ring { flex-basis: 5.75rem; } .profile-preview { display: block; } #result .grid { grid-template-columns: 1fr 1fr; }
  .system-footer { font-size: 0.375rem; flex-wrap: wrap; gap: 0.5625rem; } .system-footer .hud { width: 100%; order: 3; }
  .picker { padding: 1.375rem 1rem; } .picker h3 { font-size: 1.125rem; } .pick { padding: 0.75rem 0.625rem; }
  .pick-meta { font-size: 0.5rem; } .pick-name { font-size: 0.6875rem; } .picker .primary-button { padding: 0.6875rem 0.9375rem; }
  .head-actions { bottom: 0.625rem; width: max-content; max-width: calc(100% - 1.25rem); }
  .move-name { font-size: 1.3125rem; } .move-instr { font-size: 0.6875rem; }
  .result-details-grid, #recs { grid-template-columns: 1fr; }
  .result-details-grid > .card { min-height: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.score-meaning { margin-bottom: 0.875rem; }
#next-card .subtle { margin-top: 0.75rem; }

#assessment-name { font: 600 0.875rem/1.5 var(--title); }