:root{color-scheme:dark;--bg:#0b111e;--lime:#c7ff4f;--muted:#a2b2c6;--line:#2b394c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0 0,#213642,transparent 55%),var(--bg);color:#f5f7fa;font:16px system-ui,sans-serif}header,main,footer{max-width:1080px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{display:flex;gap:14px;align-items:center;font-size:25px;font-weight:900}.brand>b,.brand{color:var(--lime)}.brand span{color:white;font-size:20px}.brand b{color:var(--lime)}button,select{font:inherit;cursor:pointer}button,a,select,input{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #60cfff;outline-offset:4px}[hidden]{display:none!important}.menu,.quiet{background:#172335;color:#d6e0ed;border:1px solid var(--line);border-radius:10px;padding:12px}.intro{position:relative;padding:35px 0 25px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--lime)}h1{font-size:clamp(48px,8vw,86px);line-height:.96;letter-spacing:-3px;margin:20px 0}em{font-style:normal;color:var(--lime)}p{line-height:1.6;color:var(--muted)}.field-art{position:absolute;right:20px;top:42px;width:40%;height:190px;border:1px solid #76a38e50;border-radius:100px;display:flex;justify-content:space-evenly;align-items:center;background:repeating-linear-gradient(90deg,#233f3530 0 45px,#213d2820 45px 90px);font-size:72px;color:#60cfff;transform:rotate(-8deg)}.field-art span:last-child{color:#ffae60}.field-art i{font-size:40px;color:white}fieldset{border:0;padding:0;margin:20px 0 32px}legend{font-size:12px;text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;color:var(--muted)}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mode-grid label{position:relative;cursor:pointer}.mode-grid input{position:absolute;left:15px;top:18px;accent-color:var(--lime)}.mode-grid span{display:block;border:1px solid var(--line);background:#142032;border-radius:16px;padding:20px 16px 20px 40px;height:100%}.mode-grid input:checked+span{border-color:var(--lime);background:#223328}.mode-grid input:focus-visible+span{outline:3px solid #60cfff}.mode-grid small{display:block;color:var(--muted);margin-top:8px;line-height:1.5}.mode-grid i{font-size:9px;font-style:normal;color:var(--lime)}.select-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.select-grid label{font-size:13px;color:var(--muted)}select{display:block;width:100%;margin-top:8px;padding:14px 10px;background:#142032;border:1px solid var(--line);border-radius:10px;color:white}.how{padding:22px;border-left:3px solid var(--lime);background:#142032;border-radius:0 14px 14px 0;margin-bottom:24px}.how p{font-size:14px;margin:12px 0 0}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:0;border-radius:12px;font-weight:800;padding:18px 24px;font-size:17px}.primary{background:var(--lime);color:#101b15}.primary span{margin-left:auto}.secondary{background:#203049;color:white;border:1px solid #3d526d}#start{width:100%}.note{font-size:12px;line-height:1.6}.error{color:#ffb19b}.coming{margin-top:35px;padding:24px;border:1px dashed var(--line);border-radius:16px}.coming span{font-size:10px;letter-spacing:2px;color:var(--muted);display:block;margin-bottom:8px}.coming p{margin:5px 0 0;font-size:13px}footer{font-size:10px;letter-spacing:2px;color:var(--muted);padding-top:40px}.session-top,.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.session-top>span{font-size:12px;letter-spacing:2px;color:var(--lime)}.hud{font-size:14px}.hud .quiet{margin-left:auto}#play{max-width:780px;margin:auto}#stage{border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at center,#1d3141,#101c2c);min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}#signal{font-size:clamp(90px,20vw,170px);line-height:1.1;font-weight:900;min-height:120px}#instruction{font-size:30px;margin:12px 0 0}#detail{margin-bottom:0;max-width:490px}#stage[data-color=blue] #signal{color:#60cfff}#stage[data-color=orange] #signal{color:#ffae60}.zones{display:flex;justify-content:space-between;font-weight:800;font-size:13px;padding:20px 8px}.zones span:first-child{color:#60cfff}.zones span:last-child{color:#ffae60}#parent-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}#unseen{grid-column:1/-1}#camera-wrap{position:relative;margin-bottom:15px;width:100%;height:180px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#050b13}video{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}.center-guide{position:absolute;left:40%;right:40%;top:10%;bottom:25%;border:1px dashed #c7ff4f70;border-radius:30px}#tracking{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:12px;padding:6px;background:#07111ce6}#summary{max-width:720px;margin:30px auto}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.stats div{border:1px solid var(--line);border-radius:14px;padding:20px}.stats b{display:block;font-size:35px;color:var(--lime)}.stats small{color:var(--muted)}.result-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0;font-size:14px}#summary .primary,#summary .secondary{margin:15px 5px 0 0}button:disabled{opacity:.5;cursor:wait}#resume,#recalibrate{margin:12px 0;width:100%}@media(max-width:650px){header,main,footer{padding:18px}.field-art{width:33%;right:0;top:65px;height:120px;font-size:40px}.field-art i{font-size:24px}.intro p{font-size:14px}.mode-grid{grid-template-columns:1fr}.mode-grid span{padding:16px 16px 16px 40px}.mode-grid small{margin-top:4px}.select-grid{grid-template-columns:1fr 1fr}#stage{min-height:330px}#instruction{font-size:26px}.stats{gap:8px}.stats div{padding:14px 10px}.stats b{font-size:27px}.stats small{font-size:11px}.session-top>span{font-size:10px}}
/* Signals must be readable from across the training space. */
#stage{min-height:clamp(350px,57svh,620px)}
#stage[data-display=color][data-color=blue]{background:#075de0;border-color:#075de0;color:#fff}
#stage[data-display=color][data-color=orange]{background:#ff8b20;border-color:#ff8b20;color:#101b29}
#stage[data-display=color] #signal{display:none}
#stage[data-display=color] #instruction{font-size:clamp(60px,13vw,112px);font-weight:900;letter-spacing:-2px;line-height:1.1}
#stage[data-display=color] .eyebrow,#stage[data-display=color] #detail{color:inherit;font-weight:800}
#stage[data-display=color] .eyebrow{font-size:22px}
#stage[data-display=arrow] #signal{font-size:clamp(170px,38vw,300px);line-height:.9}
.cone-setup{display:flex;align-items:center;justify-content:space-around;gap:12px;margin:22px 0;text-align:center;font-size:12px;font-weight:800;line-height:1.6}.cone-middle{color:#b4c5d1;font-size:11px}.cone{display:block;width:42px;height:46px;margin:0 auto 8px;clip-path:polygon(37% 0,63% 0,88% 85%,100% 85%,100% 100%,0 100%,0 85%,12% 85%)}.blue-cone{background:#438eff}.orange-cone{background:#ff8b20}

.custom-panel{padding:22px;border:1px solid var(--line);border-radius:16px;background:#111e2e}.custom-panel legend{padding:0 8px}.custom-panel input[type=number]{display:block;width:100%;font:inherit;margin-top:8px;padding:14px 10px;background:#142032;border:1px solid var(--line);border-radius:10px;color:white}.signal-checks{display:flex;flex-wrap:wrap;gap:24px;margin:18px 0}.custom-panel input[type=checkbox]{accent-color:var(--lime);width:18px;height:18px;vertical-align:middle}.timing-toggle{display:block;margin:22px 0}.custom-panel p{font-size:13px}#stage[data-display=number] #signal{font-size:clamp(170px,38vw,300px);color:white;line-height:1}#stage[data-display=number]{background:#142437}

.multi-cones{font-size:clamp(22px,5vw,36px);font-weight:900;color:var(--lime);text-align:center;padding:24px 10px;line-height:1.7;word-spacing:12px}#extra-cones{margin-top:16px}

#stage[data-display=color][data-color=red]{background:#c92531;border-color:#c92531;color:#fff}#stage[data-display=color][data-color=yellow]{background:#ffe23d;border-color:#ffe23d;color:#101b29}#stage[data-display=color][data-color=green]{background:#16733b;border-color:#16733b;color:#fff}#stage[data-display=color][data-color=purple]{background:#7732b5;border-color:#7732b5;color:#fff}#stage[data-display=color][data-color=white]{background:#f8fafc;border-color:#f8fafc;color:#101b29}#stage[data-display=color][data-color=pink]{background:#f582c3;border-color:#f582c3;color:#101b29}
.camera-diagram{display:block;width:100%;max-width:480px;margin:16px auto}.how ol{padding-left:22px;color:var(--muted);line-height:1.65}.how li{margin:10px 0}#camera-wrap.framing{height:clamp(280px,50svh,480px)}#camera-wrap.framing .center-guide{left:8%;right:8%;top:7%;bottom:12%;border-radius:12px}#framing-ready{width:100%}#framing-check p{font-size:15px}