:root{color-scheme:dark;--bg:#101112;--ink:#f5f5f3;--muted:#acafb1;--cyan:#37ddec;--size:clamp(48px,7vw,110px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Malgun Gothic","Segoe UI",sans-serif}button{font:inherit}button[hidden],[hidden]{display:none!important}
#stage{position:relative;height:100svh;min-height:540px;overflow:hidden;background:radial-gradient(ellipse at center,#17191a 0%,#101112 75%)}
header{position:absolute;top:4%;left:20%;right:20%;text-align:center}h1{font-size:clamp(17px,2.3vw,34px);margin:0 0 15px;font-weight:650;letter-spacing:-.04em}.badge{display:inline-block;border:1px solid #e1ba50;color:#ebc76c;border-radius:10px;margin:0;padding:8px 16px;font-size:clamp(12px,1.3vw,18px)}
.target{position:absolute;width:var(--size);color:#a8aaab;transform:translate(-50%,-50%);text-align:center}.left{left:8%}.right{left:92%}.top{top:18%}.bottom{top:82%}.target>span{display:block;position:absolute;bottom:calc(100% + 12px);left:-20px;right:-20px;font-size:clamp(13px,1.5vw,22px);font-weight:600;white-space:nowrap}.cross{width:var(--size);height:var(--size);border:3px solid currentColor;border-radius:50%;position:relative}.cross:before,.cross:after{content:"";position:absolute;background:currentColor;opacity:.8}.cross:before{height:2px;top:calc(50% - 1px);left:0;right:0}.cross:after{width:2px;left:calc(50% - 1px);top:0;bottom:0}.cross i{position:absolute;top:50%;left:50%;width:15%;height:15%;transform:translate(-50%,-50%);background:currentColor;border-radius:50%}.target.active{color:var(--cyan)}.target.done{color:#6faaa5}.target.active .cross{box-shadow:0 0 0 8px #37ddec0a}
.instruction{position:absolute;top:30%;left:17%;right:17%;text-align:center}h2{font-size:clamp(23px,3.5vw,52px);font-weight:650;letter-spacing:-.05em;margin:0}#count{height:clamp(104px,19vh,205px);font-size:clamp(76px,12vw,172px);font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}#count span{font-size:16px;letter-spacing:.15em;display:block;line-height:1}#hint{color:#cbcecf;font-size:clamp(14px,1.8vw,25px);margin:12px 0 0;line-height:1.5}
footer{position:absolute;bottom:6%;left:18%;right:18%;text-align:center}#progress{font-size:16px;margin:0 0 10px;color:#e0e3e3}.dots{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.dots i{width:12px;height:12px;background:#55595c;border-radius:50%}.dots i.active{background:var(--cyan)}.dots i.done{background:#6faaa5}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}button{color:var(--ink);background:transparent;border:1px solid #72777b;border-radius:9px;padding:11px 17px;cursor:pointer;min-height:44px}button:hover{background:#252a2e}button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.primary{background:var(--cyan);color:#071316;border-color:var(--cyan);font-weight:700}.primary:hover{background:#78e9f2}#notice{color:var(--muted);font-size:12px;margin:14px 0 0;line-height:1.5}.escape{position:absolute;right:3%;bottom:2%;color:#a3a7aa;font-size:12px}#center-target{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);color:var(--cyan)}body.verify .instruction{top:24%}body.verify #count{visibility:hidden}body.verify #hint{margin-top:30px}
#distance-setting{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;color:#d5d9da;font-size:14px}#screen-distance{width:76px;min-height:38px;padding:6px 8px;border:1px solid #72777b;border-radius:8px;background:#17191a;color:var(--ink);font:inherit;text-align:right}#screen-distance:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media(max-width:650px){#stage{min-height:680px}header{left:10%;right:10%;top:3%}h1 span{display:block;font-size:16px;margin-top:4px}.top{top:23%}.bottom{top:76%}.left{left:12%}.right{left:88%}.instruction{top:34%;left:9%;right:9%}h2{font-size:25px}#count{height:120px;font-size:92px}#hint{font-size:14px}footer{bottom:5%;left:22%;right:22%}.controls{gap:6px}button{padding:8px 10px;font-size:13px}.dots{margin-bottom:10px}#progress{font-size:12px}#notice{font-size:11px}.escape{display:none}body.verify .instruction{top:31%}body.verify #hint{margin-top:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
#center-target{top:50%}body.verify #hint{position:fixed;top:62%;left:20%;right:20%;margin:0}
@media(max-width:650px){body.verify #hint{top:57%;left:16%;right:16%}}
#live-pointer{--pointer-color:var(--cyan);position:absolute;width:18px;height:18px;border:2px solid white;background:var(--pointer-color);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--pointer-color) 24%,transparent);z-index:4}
#live-pointer:is([data-shape="cursor"],[data-shape="hand"]){width:42px;height:42px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--pointer-color);font:700 38px/1 "Segoe UI Symbol","Noto Sans Symbols",sans-serif;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 3px 8px #0009}
#live-pointer[data-shape="cursor"]::before{content:"↖"}#live-pointer[data-shape="hand"]::before{content:"☝︎"}
body:is([data-phase="prepare"],[data-phase="move"],[data-phase="settle"],[data-phase="sample"],[data-phase="tracking"]) #network-connection{display:none}
body:is([data-phase="prepare"],[data-phase="move"],[data-phase="settle"],[data-phase="sample"],[data-phase="tracking"]) #distance-setting{display:none}
button:disabled{opacity:.4;cursor:not-allowed}body.tracking .instruction{top:27%}body.tracking h2{font-size:clamp(20px,2.5vw,34px)}body.tracking #count{display:none}body.tracking #hint{position:fixed;top:62%;left:20%;right:20%;font-size:18px}