/* Echo (mocap.html).
*
* Unlike css/game.css, this page has no legibility reason to pin one colour
* scheme, so it takes the shared palette from css/style.css rather than
* keeping its own copy. Nothing below is a colour literal; every colour is a
* var() from that file, so scripts/check_palette.py has no sixth file to
* track for this page.
*/
.skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 0.5rem 0.75rem;
background: var(--bg-alt);
border: 1px solid var(--accent-text);
color: var(--accent-text);
z-index: 10;
}
.skip-link:focus {
left: 0.5rem;
top: 0.5rem;
}
body {
margin: 0;
padding: 1rem;
background: var(--bg-chrome);
color: var(--text);
}
.echo--head {
max-width: var(--measure, 40rem);
margin: 0 auto 1.5rem auto;
}
.echo--sub {
color: var(--text-muted);
line-height: 1.6;
}
.echo--notice {
max-width: var(--measure, 40rem);
margin: 0 auto 1rem auto;
color: var(--text-muted);
}
.echo--gate {
max-width: var(--measure, 40rem);
margin: 0 auto 1.5rem auto;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
}
.echo--gate p {
margin: 0 0 1rem 0;
line-height: 1.7;
color: var(--text-muted);
}
.echo--gate-cost {
margin: 0.75rem 0 0 0 !important;
font-size: 0.9375rem;
}
/* Matches .ask--load: the only filled surfaces are --accent-text on --bg,
never --accent, which fails contrast as text. */
.echo--load,
.echo--stop {
font-family: inherit;
font-size: 1rem;
font-weight: 600;
color: var(--bg);
background: var(--accent-text);
border: 2px solid var(--accent-text);
border-radius: 6px;
padding: 0.75rem 1.25rem;
cursor: pointer;
}
.echo--load:hover,
.echo--stop:hover {
color: var(--accent-text);
background: transparent;
}
.echo--load:focus-visible,
.echo--stop:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 3px;
}
/* aria-disabled, never the disabled property — see AGENTS.md and the matching
rule on #ask--load. #echo--load stays on the page through the whole camera
permission prompt and model download, so disabling it on press would strand
a keyboard user on for that entire window. */
.echo--load[aria-disabled='true'] {
cursor: progress;
opacity: 0.6;
}
.echo {
max-width: 60rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* Kept small and out of the reading flow rather than display:none, so it
stays a real decodable video element in every browser — inference reads
its frames, but a visitor is not meant to watch themselves. */
.echo--video {
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
}
.echo--stage-wrap {
width: 100%;
}
.echo--stage {
display: block;
width: 100%;
max-width: 48rem;
aspect-ratio: 4 / 3;
margin: 0 auto;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 8px;
}