:root { color-scheme: light dark; --bg:#fcfbf8; --fg:#22272b; --muted:#555e65; --line:#cfd4d4; --panel:#edf1f2; --accent:#1c557f; }
@media (prefers-color-scheme:dark) { :root { --bg:#151b20; --fg:#ecede9; --muted:#b6bec3; --line:#45515a; --panel:#202a31; --accent:#9ecaf0; } }
* { box-sizing:border-box; }
body { margin:0; padding:1.2rem; background:var(--bg); color:var(--fg); font:1rem/1.5 system-ui,sans-serif; overflow-wrap:anywhere; }
main { max-width:64rem; margin:auto; }
h1 { font-size:1.5rem; line-height:1.2; }
a { color:var(--accent); }
.notice { border-left:3px solid var(--accent); padding:.7rem; background:var(--panel); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,1fr); gap:1.2rem; align-items:start; }
.camera { position:relative; width:100%; max-width:26rem; background:#000; }
video { display:block; width:100%; height:auto; }
.camera svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
[hidden] { display:none !important; }
.caption { color:var(--muted); font-size:.85rem; }
.buttons { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
button,select,input { font:inherit; }
button,select { padding:.4rem; }
label { display:block; margin:.7rem 0 .2rem; }
input[type=range] { width:100%; }
.toggle { display:flex; gap:.5rem; align-items:baseline; }
dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem; }
dt { color:var(--muted); }
dd { margin:0; font-variant-numeric:tabular-nums; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (max-width:34rem) { .workspace { grid-template-columns:1fr; } .camera { max-width:23rem; margin:auto; } }

#jump { width:6rem; padding:.4rem; }

.position-trace { margin:1.3rem 0; }
.position-trace h2 { font-size:1rem; margin:0 0 .4rem; }
.position-trace svg { display:block; position:static; width:100%; height:auto; overflow:visible; }
.position-trace figcaption { color:var(--muted); font-size:.85rem; }
#trace-axes { fill:var(--muted); font-size:18px; }
#trace-axes line { stroke:var(--line); stroke-width:1; }
#trace-points circle { fill:var(--accent); }
#trace-cursor { stroke:#00a5bf; stroke-width:1.5; }
#trace-current { fill:#62e8ff; stroke:#151b20; stroke-width:1.5; }