:root { color-scheme: light; --ink:#152720; --paper:#f4f2e9; --line:#cbcfc3; --accent:#b6ee66; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Segoe UI",sans-serif; }
main { max-width:1200px; padding:0 48px; margin:auto; }
a { color:inherit; text-underline-offset:5px; }
header { display:flex; justify-content:space-between; gap:20px; padding:28px 0; border-bottom:1px solid var(--line); font-size:14px; }
.brand { font-family:Consolas,monospace; font-weight:bold; letter-spacing:2px; text-decoration:none; }
.intro { padding:60px 0 36px; }
.eyebrow,.number { font-family:Consolas,monospace; font-size:12px; letter-spacing:1.5px; }
h1 { font-family:Georgia,serif; font-weight:normal; letter-spacing:-3px; line-height:1.04; font-size:clamp(46px,6vw,76px); margin:20px 0; }
.lede { max-width:550px; font-size:18px; line-height:1.6; }
.experiment { background:#fffef8; border:1px solid var(--ink); }
.toolbar { padding:18px 24px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
h2 { font-size:20px; font-weight:600; margin:0; }
#capabilities { font-family:Consolas,monospace; font-size:12px; }
#movement-area { padding:24px; text-align:center; background-image:radial-gradient(#bfcabc 1px,transparent 1px); background-size:22px 22px; }
.target { font-family:Consolas,monospace; font-size:40px; line-height:1; }
#instruction { font-weight:600; margin-bottom:8px; }
.quiet,.note { font-size:13px; line-height:1.6; color:#4d5e53; }
.controls { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:22px; }
button { font:600 14px "Segoe UI",sans-serif; padding:12px 20px; border:1px solid var(--ink); color:var(--ink); background:var(--paper); cursor:pointer; }
button:first-child { background:var(--accent); }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid #427b16; outline-offset:4px; }
.progress { height:4px; background:#e5e8df; }
#progress-fill { height:100%; width:0; background:#4b792a; }
.capture-status { display:flex; justify-content:space-between; gap:16px; padding:14px 24px; border-bottom:1px solid var(--line); font-size:13px; }
#elapsed { font-family:Consolas,monospace; white-space:nowrap; }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:13px; }
caption { text-align:left; padding:18px 24px 8px; font-size:12px; color:#4d5e53; }
th,td { padding:16px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
td { font-family:Consolas,monospace; }
th:first-child,td:first-child { padding-left:24px; }
.rate { font-size:22px; }
.source-note { display:block; font:11px "Segoe UI",sans-serif; color:#4d5e53; margin-top:5px; }
.note { padding:0 24px; margin:18px 0; }
.explanation { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:40px 0; }
.number { color:#566853; display:block; margin-bottom:14px; }
.explanation p { line-height:1.7; font-size:14px; }
code { font:12px Consolas,monospace; }
footer { padding:22px 0 30px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12px; color:#4d5e53; }
@media(max-width:650px) { main { padding:0 20px; } .intro { padding-top:36px; } h1 { letter-spacing:-2px; } .toolbar { align-items:flex-start; flex-direction:column; } .explanation { grid-template-columns:1fr; gap:20px; } header { font-size:12px; } th,td { padding:14px 12px; } }