:root{--accent: #29d3c8;--accent-2: #ff4655;--bg: #0b0f14;--panel: rgba(16, 22, 30, .92);--text: #e8eef5;--muted: #8b98a8}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif;-webkit-user-select:none;user-select:none}#app{position:relative;width:100vw;height:100vh}#scene{display:block;width:100%;height:100%}.hidden{display:none!important}.ch{position:relative;width:60px;height:60px;pointer-events:none;--ch-user-color: #29d3c8;--ch-color: var(--ch-user-color);--ch-gap: 4px;--ch-len: 8px;--ch-thick: 2px}#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}.ch-line{position:absolute;background:var(--ch-color);box-shadow:0 0 2px #000000d9;transition:top .05s linear,bottom .05s linear,left .05s linear,right .05s linear,background .05s linear}.ch-top,.ch-bottom{left:50%;transform:translate(-50%);width:var(--ch-thick);height:var(--ch-len)}.ch-top{bottom:calc(50% + var(--ch-gap))}.ch-bottom{top:calc(50% + var(--ch-gap))}.ch-left,.ch-right{top:50%;transform:translateY(-50%);height:var(--ch-thick);width:var(--ch-len)}.ch-left{right:calc(50% + var(--ch-gap))}.ch-right{left:calc(50% + var(--ch-gap))}.ch-dot{position:absolute;top:50%;left:50%;width:3px;height:3px;background:var(--ch-color);transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 2px #000000d9}.ch.style-dot .ch-line{display:none}.ch.style-dot .ch-dot{width:4px;height:4px}.ch.style-cross{--ch-gap: 0px;--ch-len: 9px}.ch.style-cross .ch-dot{display:none}.ch.style-cross-hollow{--ch-gap: 4px;--ch-len: 8px}.ch.style-cross-hollow .ch-dot{display:none}#crosshair.inaccurate{--ch-color: var(--accent-2)}#crosshair.inaccurate.style-cross,#crosshair.inaccurate.style-cross-hollow{--ch-gap: 13px}#crosshair.inaccurate.style-dot .ch-dot{width:9px;height:9px}#hud{position:absolute;top:18px;left:50%;transform:translate(-50%);display:flex;gap:18px;padding:10px 18px;background:#0b0f148c;border:1px solid rgba(255,255,255,.08);border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:15}.hud-item{display:flex;flex-direction:column;align-items:center;min-width:74px}.hud-label{font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}.hud-value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}#hud-state.state-move{color:var(--accent-2)}#hud-state.state-stop{color:var(--accent)}#move-indicator{position:absolute;bottom:120px;left:50%;transform:translate(-50%);padding:6px 16px;border-radius:20px;font-weight:700;letter-spacing:2px;font-size:13px;z-index:15;background:var(--accent-2);color:#fff;box-shadow:0 4px 16px #ff465566}#move-indicator.stopped{background:var(--accent);color:#04211f;box-shadow:0 4px 16px #29d3c866}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0b0f14bf,#05070af2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:30}.panel{width:min(560px,92vw);padding:34px 38px;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 20px 60px #00000080;text-align:center}.panel h1{font-size:34px;letter-spacing:2px;background:linear-gradient(90deg,var(--accent),#6ff);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{margin-top:8px;color:var(--muted);font-size:13px;letter-spacing:1px}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0 22px}.mode-card{cursor:pointer;padding:20px 16px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--text);text-align:left;transition:all .15s ease}.mode-card:hover{border-color:var(--accent);background:#29d3c814;transform:translateY(-2px)}.mode-title{font-size:18px;font-weight:700;margin-bottom:8px}.mode-desc{font-size:12.5px;color:var(--muted);line-height:1.5}.controls-hint{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.9}.controls-hint .tip{margin-top:8px;color:var(--accent);font-size:12.5px}kbd{display:inline-block;min-width:22px;padding:2px 6px;background:#ffffff14;border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;border-radius:6px;font-size:12px;color:var(--text);font-family:inherit}.panel h2{font-size:26px;letter-spacing:1px;color:var(--accent)}#result-body{margin:22px 0}.rep-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.rep-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:10px;font-variant-numeric:tabular-nums}.rep-row .rep-idx{color:var(--muted);font-size:13px}.rep-row .rep-time{font-size:18px;font-weight:700}.big-number{font-size:58px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;background:linear-gradient(90deg,var(--accent),#6ff);-webkit-background-clip:text;background-clip:text;color:transparent}.big-number .unit{font-size:22px;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:4px}.big-label{margin-top:6px;font-size:13px;color:var(--muted);letter-spacing:1px}.avg-box{margin-top:18px;padding:18px;background:#29d3c80f;border:1px solid rgba(41,211,200,.25);border-radius:14px}.result-actions{display:flex;gap:12px;justify-content:center}.result-actions button{cursor:pointer;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:var(--text);transition:all .15s ease;font-family:inherit}.result-actions button:hover{border-color:var(--accent);color:#fff}.result-actions button.primary{background:var(--accent);color:#04211f;border-color:var(--accent)}.result-actions button.primary:hover{filter:brightness(1.1);color:#04211f}.ghost-btn-row{display:flex;gap:10px;justify-content:center;margin-top:18px}.ghost-btn{cursor:pointer;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.14);transition:all .15s ease}.ghost-btn:hover{color:var(--accent);border-color:var(--accent)}.sens-field{margin:18px 0;text-align:left}.sens-field label{display:block;font-size:13px;color:var(--text);margin-bottom:10px;font-weight:600}.sens-field label .opt{color:var(--muted);font-weight:400;font-size:12px}.sens-controls{display:flex;align-items:center;gap:14px}.sens-controls input[type=range]{flex:1;accent-color:var(--accent);height:4px;cursor:pointer}.sens-controls input[type=number]{width:110px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#ffffff0d;color:var(--text);font-size:16px;font-variant-numeric:tabular-nums;font-family:inherit}.sens-controls input:focus{outline:none;border-color:var(--accent)}.sens-hint{margin:6px 0 4px;padding:12px 14px;background:#29d3c80f;border:1px solid rgba(41,211,200,.22);border-radius:10px;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;text-align:left}.sens-note{margin:14px 0 22px;font-size:12px;line-height:1.6;color:var(--muted);text-align:left}.ch-style-picker{display:flex;gap:8px}.ch-style-btn{flex:1;cursor:pointer;padding:9px 8px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);background:#ffffff0a;border:1px solid rgba(255,255,255,.12);transition:all .15s ease;font-family:inherit}.ch-style-btn:hover{color:var(--text);border-color:#ffffff40}.ch-style-btn.active{color:#04211f;background:var(--accent);border-color:var(--accent)}.ch-color-row{display:flex;align-items:center;gap:14px}.ch-color-row input[type=color]{width:46px;height:40px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:transparent;cursor:pointer}.ch-swatches{display:flex;gap:7px;flex:1;flex-wrap:wrap}.ch-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.2);transition:transform .12s ease,border-color .12s ease}.ch-swatch:hover{transform:scale(1.12);border-color:#fff}.ch-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.ch-toggle-row label:first-child{margin-bottom:0}.switch{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background:#ffffff24;border:1px solid rgba(255,255,255,.16);border-radius:26px;transition:background .15s ease}.switch-slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:2px;background:#e8eef5;border-radius:50%;transition:transform .15s ease}.switch input:checked+.switch-slider{background:var(--accent);border-color:var(--accent)}.switch input:checked+.switch-slider:before{transform:translate(22px);background:#04211f}.ch-preview-box{width:66px;height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:repeating-conic-gradient(#3a3f45,#3a3f45 25%,#2b2f34 0%,#2b2f34 50%) 50% / 16px 16px}.pause-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}.pause-actions button{cursor:pointer;padding:13px 24px;border-radius:10px;font-size:15px;font-weight:700;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:var(--text);transition:all .15s ease;font-family:inherit}.pause-actions button:hover{border-color:var(--accent)}.pause-actions button.primary{background:var(--accent);color:#04211f;border-color:var(--accent)}.pause-actions button.primary:hover{filter:brightness(1.1)}#resume-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:14px 26px;background:#0b0f14d9;border:1px solid rgba(255,255,255,.12);border-radius:12px;font-size:15px;letter-spacing:1px;z-index:25;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}#feedback{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:800;letter-spacing:1px;z-index:18;pointer-events:none;opacity:0}#feedback.show{animation:floatUp .9s ease-out}#feedback.hit{color:var(--accent)}#feedback.miss{color:var(--accent-2)}@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-30%)}to{opacity:0;transform:translate(-50%,-80%)}}