*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#89907c;background-color:#fefefe;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}html,body,#root{width:100%;height:100%;min-height:100vh}button{font-family:inherit;cursor:pointer}input[type=file]{font-family:inherit}.app-container{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fefefe}.setup-screen{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:3rem 2rem;max-width:480px;width:100%}.game-title{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#b86878,#8a6aaa,#5a8a6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;letter-spacing:-1px}.setup-subtitle{color:#a8aa9c;text-align:center;font-size:1rem;margin-top:-1.5rem}.setup-form{display:flex;flex-direction:column;gap:1.5rem;width:100%}.file-input-group{display:flex;flex-direction:column;gap:.4rem}.file-input-group label{font-weight:600;font-size:.875rem;color:#6a7060;text-transform:uppercase;letter-spacing:.05em}.file-input-group input[type=file]{background:#f4f4f0;border:1px solid #d0d0c8;border-radius:8px;padding:.6rem .8rem;color:#89907c;font-size:.875rem;width:100%}.file-name{font-size:.8rem;color:#a8aa9c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analyzing{font-size:.8rem;color:#8a6aaa;animation:pulse 1s ease-in-out infinite}.beat-info{font-size:.8rem;color:#5a8a6a}.error-message{color:#b85a5a;font-size:.8rem;font-family:monospace;white-space:pre-wrap;word-break:break-word;background:#f9f0f0;border:1px solid #e0c8c8;border-radius:8px;padding:.6rem .8rem;text-align:left;width:100%}.bpm-form{display:flex;flex-direction:column;gap:.75rem;width:100%}.bpm-label{font-weight:600;font-size:.875rem;color:#ccc;text-transform:uppercase;letter-spacing:.05em}.bpm-input{background:#1a1a2e;border:1px solid #555;border-radius:8px;padding:.7rem 1rem;color:#f0f0f0;font-size:2rem;font-weight:700;text-align:center;width:100%;appearance:textfield}.bpm-input::-webkit-inner-spin-button,.bpm-input::-webkit-outer-spin-button{opacity:1}.error-details{width:100%}.error-details summary{cursor:pointer;color:#f88;font-size:.8rem;margin-bottom:.4rem}.setup-subtitle{color:#aaa;text-align:center;font-size:.95rem;margin-top:-1rem}.start-button{background:linear-gradient(135deg,#b86878,#8a6aaa);color:#fefefe;border:none;border-radius:10px;padding:.9rem 2rem;font-size:1.1rem;font-weight:700;letter-spacing:.05em;transition:opacity .2s,transform .15s;width:100%}.start-button:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.start-button:disabled{opacity:.4;cursor:not-allowed}.algorithm-selector{display:flex;flex-direction:column;gap:.8rem;width:100%;align-items:center}.algorithm-selector label{font-size:.875rem;font-weight:600;color:#6a7060;text-transform:uppercase;letter-spacing:.05em}.algorithm-buttons{display:flex;gap:.8rem;width:100%;justify-content:center}.algorithm-button{flex:1;max-width:200px;background:#f4f4f0;color:#89907c;border:2px solid #d0d0c8;border-radius:8px;padding:.7rem 1rem;font-size:.95rem;font-weight:600;transition:all .2s;cursor:pointer}.algorithm-button:hover:not(:disabled){border-color:#8a6aaa;background:#f9f9f6}.algorithm-button.active{background:linear-gradient(135deg,#b86878,#8a6aaa);color:#fefefe;border-color:#8a6aaa}.algorithm-button:disabled{opacity:.6;cursor:not-allowed}.extraction-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2rem;max-width:480px;width:100%;text-align:center}.extraction-screen h2{font-size:1.5rem;font-weight:700;color:#6a7060}.progress-bar-container{width:100%;height:12px;background:#e8e8e2;border-radius:6px;overflow:hidden;border:1px solid #d0d0c8}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#b86878,#8a6aaa);border-radius:6px;transition:width .1s ease}.progress-text{color:#a8aa9c;font-size:.875rem}.extraction-complete{display:flex;flex-direction:column;gap:1rem;width:100%;align-items:center}.success-text{color:#5a8a6a;font-size:1rem}.extraction-actions{display:flex;gap:1rem;width:100%}.secondary-button{flex:1;background:#f4f4f0;color:#89907c;border:1px solid #d0d0c8;border-radius:10px;padding:.8rem 1rem;font-size:.95rem;font-weight:600;transition:border-color .2s}.secondary-button:hover{border-color:#8a6aaa}.extraction-actions .start-button{flex:1}.countdown-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%}.countdown-number{font-size:12rem;font-weight:900;background:linear-gradient(135deg,#b86878,#8a6aaa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:countdown-pop .8s ease-out;text-align:center;line-height:1;-webkit-user-select:none;user-select:none}@keyframes countdown-pop{0%{transform:scale(1.6);opacity:0}40%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:.6;transform:scale(.9)}}.bodycheck-screen{position:relative;width:100%;height:100vh;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.bodycheck-canvas{width:100%;height:100%;object-fit:cover;transition:box-shadow .3s}.bodycheck-canvas.bodycheck-ok{box-shadow:inset 0 0 0 6px #4f8}.bodycheck-ui{position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;width:min(420px,90vw)}.bodycheck-status{font-size:1rem;font-weight:600;text-align:center;padding:.5rem 1.25rem;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.status-ok{background:#4f83;color:#4f8;border:1px solid rgba(68,255,136,.4)}.status-warn{background:#0000008c;color:#ffe;border:1px solid rgba(255,255,255,.15)}.bodycheck-progress-bar{width:100%;height:6px;background:#ffffff26;border-radius:3px;overflow:hidden}.bodycheck-progress-fill{height:100%;background:#4f8;border-radius:3px;transition:width .05s linear}.bodycheck-skip{opacity:.5;font-size:.8rem;padding:.4rem 1rem}.bodycheck-skip:hover{opacity:.8}.game-screen{position:relative;width:100%;height:100vh;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}.webcam-hidden{display:none}.game-panel{position:relative;overflow:hidden}.ref-video,.webcam-canvas{width:100%;height:100%;object-fit:cover}.panel-label{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);color:#fff9;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;pointer-events:none}.ref-video-pip{position:absolute;bottom:1.5rem;right:1.5rem;width:25vmin;height:25vmin;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0006;z-index:20}.ref-video-pip video{width:100%;height:100%;object-fit:contain}.ref-video-pip canvas{position:absolute;top:0;left:0;width:100%;height:100%}.game-overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:10}.score-hud{margin-top:1.5rem;text-align:center}.score-value{font-size:2.5rem;font-weight:800;color:#4a5040;text-shadow:0 0 20px rgba(138,106,170,.3);letter-spacing:2px}.combo-value{font-size:1rem;font-weight:700;color:#a89450;text-shadow:0 0 10px rgba(168,148,80,.4);animation:pulse .5s ease-out}.grade-feedback{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;animation:grade-flash .7s ease-out forwards;pointer-events:none;z-index:100;-webkit-user-select:none;user-select:none;text-shadow:0 0 30px currentColor}.grade-perfect{color:#5a8a6a}.grade-good{color:#a89450}.grade-miss{color:#b85a5a}@keyframes grade-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}.results-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2rem;max-width:420px;width:100%;text-align:center}.results-title{font-size:2rem;font-weight:800;color:#6a7060}.rank-display{font-size:6rem;font-weight:900;line-height:1}.rank-s{color:#a89450;text-shadow:0 0 30px rgba(168,148,80,.4)}.rank-a{color:#5a8a6a;text-shadow:0 0 30px rgba(90,138,106,.4)}.rank-b{color:#6a8a7a;text-shadow:0 0 30px rgba(106,138,122,.4)}.rank-c{color:#8a6aaa;text-shadow:0 0 30px rgba(138,106,170,.4)}.rank-d{color:#b87850;text-shadow:0 0 30px rgba(184,120,80,.4)}.rank-f{color:#b85a5a;text-shadow:0 0 30px rgba(184,90,90,.4)}.final-score{font-size:3rem;font-weight:800;color:#4a5040;letter-spacing:2px}.grade-breakdown{width:100%;display:flex;flex-direction:column;gap:.5rem;background:#f4f4f0;border-radius:12px;padding:1rem 1.5rem;border:1px solid #d0d0c8}.grade-row{display:flex;justify-content:space-between;align-items:center;font-size:1rem}.grade-row.total{border-top:1px solid #d0d0c8;padding-top:.5rem;margin-top:.25rem;font-weight:700}.grade-label{font-weight:600}.grade-label.perfect{color:#5a8a6a}.grade-label.good{color:#a89450}.grade-label.miss{color:#b85a5a}.grade-count{font-weight:700;font-size:1.1rem}.game-end-overlay{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-end-score{font-size:5rem;font-weight:900;color:#fefefe;letter-spacing:4px;text-shadow:0 0 40px rgba(138,106,170,.7)}.game-end-overlay .start-button{max-width:280px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}