:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--felt:#0c2e22;--felt-deep:#071c15;--felt-line:#1a5a42;--text:#f3f6f2;--muted:#b7c9be;--gold:#f4d35e;--good:#8ee0a8;--near:#e8c07a;--miss:#f07167;--btn:#16382c;--btn-border:#2e6b52;--target-fill-opacity:1;--target-fill-opacity-overlay:.28}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;min-height:100%;margin:0}html{background:var(--felt-deep)}body{color:var(--text);background:radial-gradient(ellipse at 50% 18%, #14563d 0%, transparent 52%), linear-gradient(180deg, var(--felt) 0%, var(--felt-deep) 100%);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:480px;min-height:100dvh;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom)) 16px;flex-direction:column;margin:0 auto;display:flex}.header{text-align:center}.header h1{letter-spacing:.02em;margin:0;font-size:clamp(1.35rem,5.4vw,1.85rem);font-weight:700}.trial{color:var(--muted);font-variant-numeric:tabular-nums;margin:6px 0 0;font-size:1rem}.stroke-count{color:#2ee9ff;margin-top:4px;font-size:.92rem;display:block}.stroke-flash{z-index:16;pointer-events:none;letter-spacing:.08em;color:#2ee9ff;text-shadow:0 0 18px #2ee9ff8c;justify-content:center;align-items:center;font-size:clamp(2rem,10vw,3.2rem);font-weight:800;display:flex;position:absolute;inset:0}.stroke-flash--perfect{color:var(--gold);text-shadow:0 0 18px #f4d35e8c}.stroke-flash--good{color:var(--good)}.stroke-flash--near{color:var(--near)}.stroke-flash--miss{color:var(--miss)}.stage{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-height:0;padding:8px 0;display:flex}.training-stage{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative}.training-stage--live{background:#050f0b;border-radius:16px;overflow:hidden}.camera-feed{display:none}.camera-feed--active{object-fit:cover;z-index:1;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0;transform:scaleX(-1)}.camera-live{z-index:20;letter-spacing:.04em;color:#f3f6f2;text-shadow:0 1px 4px #000000b3;pointer-events:none;margin:0;font-size:.68rem;font-weight:700;position:absolute;top:8px;right:8px}.tracking-overlay{z-index:10;pointer-events:none;position:absolute;inset:0}.color-debug-layer{z-index:1;pointer-events:auto;touch-action:none;cursor:crosshair;position:absolute;inset:0}.color-probe{pointer-events:none;z-index:2;border:1px dashed #f4d35e;border-radius:3px;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 4px #0009}.marker-status{z-index:20;letter-spacing:.04em;color:#d7e3dc;text-shadow:0 1px 4px #000000b3;margin:0;font-size:.68rem;font-weight:700;position:absolute;top:28px;right:8px}.marker-status--found{color:#2ee9ff}.marker-status--error{color:var(--miss)}.calibration-box{z-index:12;pointer-events:none;border:2px solid #f4d35e;width:72px;height:72px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #f4d35e73}.calibration-box-cross{border-bottom:1px solid #f4d35e;border-right:1px solid #f4d35e;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.calibration-box-label{text-align:center;letter-spacing:.08em;color:#f4d35e;font-size:.55rem;font-weight:700;position:absolute;bottom:3px;left:0;right:0}.marker-blob-box{z-index:11;pointer-events:none;border:2px solid #2ee9ff;position:absolute;box-shadow:0 0 8px #2ee9ff73}.tracking-point{z-index:10;width:22px;height:22px;position:absolute;transform:translate(-50%,-50%)}.tracking-point-ring,.tracking-point-core{border-radius:50%;position:absolute}.tracking-point-ring{border:2px solid #2ee9ff;inset:0;box-shadow:0 0 10px #2ee9ffb3}.tracking-point-core{background:#2ee9ff;inset:7px;box-shadow:0 0 8px #2ee9ffe6}.tracking-debug{z-index:20;color:#d7e3dc;font-variant-numeric:tabular-nums;pointer-events:auto;background:#050f0bd1;border-radius:8px;max-width:64%;max-height:58%;margin:0;padding:7px 8px;font-size:.62rem;line-height:1.35;position:absolute;top:8px;left:8px;overflow:auto}.color-debug-btn{appearance:none;color:#f3f6f2;width:100%;font:inherit;letter-spacing:.04em;touch-action:manipulation;cursor:pointer;background:#16382c;border:1px solid #2e6b52;border-radius:6px;margin:0 0 6px;padding:6px 8px;font-size:.62rem;font-weight:700;display:block}.color-debug-btn--on{color:#2ee9ff;border-color:#2ee9ff}.tracking-debug p{margin:0 0 4px}.tracking-debug p:last-child{margin-bottom:0}.tracking-hint{color:#b7c9be}.target-overlay{z-index:2;position:relative}.result-overlay{z-index:3;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.result{letter-spacing:.08em;text-align:center;text-shadow:0 1px 10px #0000008c;min-height:2.1rem;margin:0;font-size:clamp(1.7rem,8vw,2.4rem);font-weight:800;line-height:1}.result--empty{visibility:hidden}.result--perfect{color:var(--gold);text-shadow:0 0 18px #f4d35e73}.result--good{color:var(--good)}.result--near{color:var(--near)}.result--miss{color:var(--miss)}.target{aspect-ratio:1;touch-action:none;-webkit-touch-callout:none;cursor:crosshair;filter:drop-shadow(0 10px 18px #00000061);width:min(70vw,52dvh,340px);height:auto}.target--disabled{cursor:default;opacity:.72}.target-ball{fill-opacity:var(--target-fill-opacity);stroke:#cfcfc8;stroke-width:1.2px}.target--overlay{filter:drop-shadow(0 4px 10px #00000059)}.target--overlay .target-ball{fill-opacity:var(--target-fill-opacity-overlay);stroke:#ffffffeb;stroke-width:1.6px}.target--overlay .target-ring{stroke:#ffffffd1;stroke-width:1.25px}.target--overlay .target-ring--perfect{stroke:#ff5050eb}.target-ring{fill:none;stroke:#4646446b;stroke-width:1.1px}.target-ring--perfect{stroke:#b4282859}.target-center{fill:#d61f1f}.target-marker{fill:#16382c;stroke:#fff;stroke-width:1.1px;pointer-events:none}.session-ended{color:var(--muted);margin:0;font-size:.85rem}.footer{flex-direction:column;gap:12px;display:flex}.scoreboard{border:1px solid var(--felt-line);font-variant-numeric:tabular-nums;background:#071c1573;border-radius:12px;grid-template-columns:1fr 1fr;gap:6px 16px;margin:0;padding:10px 12px;font-size:.95rem;list-style:none;display:grid}.scoreboard strong{font-weight:700}.controls-row{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.btn{appearance:none;border:1px solid var(--btn-border);background:var(--btn);color:var(--text);font:inherit;letter-spacing:.04em;touch-action:manipulation;cursor:pointer;border-radius:10px;padding:12px 4px;font-size:.75rem;font-weight:700}.btn:active{background:#1c4a39;transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default;transform:none}.camera-error{text-align:center;white-space:pre-line;color:var(--miss);margin:8px 0 0;font-size:.82rem;line-height:1.4}.safety{text-align:center;color:var(--muted);margin:0;font-size:.72rem;line-height:1.45}@media (width>=720px){.app{max-width:520px;padding-top:24px;padding-bottom:24px}.target{width:min(70vw,52dvh,360px)}}