:root{--bg-color: #0c0c0f;--bg-secondary: #141418;--text-color: #e4e4e7;--text-muted: #71717a;--primary-color: #06b6d4;--primary-glow: rgba(6, 182, 212, .4);--secondary-color: #52525b;--accent-color: #22c55e;--accent-glow: rgba(34, 197, 94, .4);--danger-color: #f97316;--danger-glow: rgba(249, 115, 22, .4);--warning-color: #eab308;--panel-bg: rgba(20, 20, 24, .9);--glass-bg: rgba(255, 255, 255, .02);--glass-border: rgba(6, 182, 212, .15);--border-color: rgba(113, 113, 122, .2);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--shadow-glow: 0 0 30px rgba(6, 182, 212, .15);--hud-cyan: #06b6d4;--hud-green: #22c55e;--hud-orange: #f97316;--grid-color: rgba(6, 182, 212, .03)}.light-mode{--bg-color: #f4f4f5;--bg-secondary: #e4e4e7;--text-color: #18181b;--text-muted: #52525b;--primary-color: #0891b2;--primary-glow: rgba(8, 145, 178, .3);--secondary-color: #a1a1aa;--accent-color: #16a34a;--accent-glow: rgba(22, 163, 74, .3);--danger-color: #ea580c;--danger-glow: rgba(234, 88, 12, .3);--warning-color: #ca8a04;--panel-bg: rgba(255, 255, 255, .9);--glass-bg: rgba(0, 0, 0, .02);--glass-border: rgba(8, 145, 178, .2);--border-color: rgba(82, 82, 91, .15);--shadow-glow: 0 0 30px rgba(8, 145, 178, .1);--hud-cyan: #0891b2;--hud-green: #16a34a;--hud-orange: #ea580c;--grid-color: rgba(8, 145, 178, .05)}*{box-sizing:border-box}body{margin:0;font-family:Outfit,sans-serif;background:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px),linear-gradient(180deg,var(--bg-color) 0%,var(--bg-secondary) 100%);background-size:50px 50px,50px 50px,100% 100%;color:var(--text-color);overflow:hidden;height:100vh;display:flex;flex-direction:column;transition:background .3s ease,color .3s ease}#app{display:flex;flex-direction:column;height:100%}header{padding:.75rem 1.5rem;background:var(--panel-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}h1{margin:0;font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.2em;background:linear-gradient(135deg,#06b6d4,#22c55e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}#fps-counter{font-family:JetBrains Mono,Fira Code,monospace;font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--hud-cyan);font-weight:500;padding:.4rem .8rem;background:var(--glass-bg);border-radius:var(--radius-sm);border:1px solid var(--glass-border);text-transform:uppercase;letter-spacing:.05em}.main-container{display:flex;flex:1;padding:1rem;gap:1rem;height:calc(100% - 56px)}.video-section,.metrics-section{flex:1;min-width:0;background:var(--panel-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);border:1px solid var(--glass-border);padding:1rem;display:flex;flex-direction:column;gap:.75rem;overflow:hidden}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:1rem 1.25rem;position:relative;box-shadow:inset 1px 1px #06b6d41a}.glass-panel:before{content:"";position:absolute;top:-1px;left:10px;right:10px;height:1px;background:linear-gradient(90deg,transparent,var(--hud-cyan),transparent);opacity:.5}.session-panel{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;overflow:hidden}.input-group{display:flex;flex-direction:column;gap:.4rem;flex:1;min-width:0}.input-group label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--hud-cyan)}.input-group input{background:#0000004d;border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:.7rem 1rem;color:var(--text-color);font-family:inherit;font-size:.95rem;font-weight:500;transition:all .2s ease;width:100%;min-width:0}.input-group input::placeholder{color:var(--secondary-color);font-weight:400}.input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-glow);background:#0006}.input-group input:disabled{opacity:.6;cursor:not-allowed}#btn-record{min-width:160px;padding:.7rem 1.2rem;font-size:.85rem;font-weight:600;letter-spacing:.5px;border-radius:var(--radius-sm);transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}#btn-record:hover{transform:translateY(-1px);box-shadow:0 4px 15px var(--danger-glow)}@keyframes pulse-record{0%,to{box-shadow:0 0 0 0 var(--danger-glow)}50%{box-shadow:0 0 0 8px transparent}}.pulse-animation{animation:pulse-record 1.5s ease-in-out infinite}.canvas-container{position:relative;flex:1;background:linear-gradient(145deg,#0a0f1a,#111827);border-radius:var(--radius-md);overflow:hidden;display:flex;justify-content:center;align-items:center;border:1px solid var(--glass-border);touch-action:pan-y pinch-zoom}#output-canvas{max-width:100%;max-height:100%;object-fit:contain;touch-action:pan-y pinch-zoom}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--primary-color);font-size:.85rem;font-weight:500;background:#000000d9;padding:1rem 1.5rem;border-radius:var(--radius-md);border:1px solid var(--glass-border);display:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.position-guide-bar{display:none;align-items:center;justify-content:center;gap:.75rem;background:var(--glass-bg);border:1px solid var(--accent-color);border-radius:var(--radius-sm);padding:.6rem 1rem;margin-bottom:.5rem}.position-guide-bar.visible{display:flex}.position-guide-bar .guide-icon{font-size:1.3rem}.position-guide-bar .guide-text{font-size:.9rem;font-weight:600;color:var(--accent-color)}.position-guide-bar .guide-subtext{font-size:.75rem;color:var(--text-muted)}.position-guide-bar.depth-ready{border-color:var(--warning-color);background:#f59e0b1a}.position-guide-bar.depth-ready .guide-text{color:var(--warning-color)}.position-guide-bar.jump-now{border-color:var(--primary-color);background:#3b82f626;animation:pulse-bar .5s ease-in-out infinite}.position-guide-bar.jump-now .guide-text{color:var(--primary-color)}@keyframes pulse-bar{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}.container-3d{flex:2;background:radial-gradient(ellipse at center,#1a2332,#0a0f1a);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--glass-border)}.controls{display:flex;gap:.75rem;align-items:center;justify-content:center;padding:.5rem;background:var(--glass-bg);border-radius:var(--radius-md);border:1px solid var(--glass-border)}.control-group{display:flex;gap:.5rem;align-items:center}.control-group label{font-size:.75rem;color:var(--text-muted);font-weight:500}.metrics-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}.metric-card{background:var(--glass-bg);border-radius:var(--radius-md);padding:1rem .75rem;text-align:center;border:1px solid var(--glass-border);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:90px;transition:all .2s ease;position:relative;box-shadow:inset 1px 1px #06b6d433,inset -1px -1px #06b6d40d}.metric-card:before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-top:2px solid var(--hud-cyan);border-left:2px solid var(--hud-cyan);border-radius:var(--radius-md) 0 0 0;opacity:.6}.metric-card:after{content:"";position:absolute;bottom:0;right:0;width:20px;height:20px;border-bottom:2px solid var(--hud-cyan);border-right:2px solid var(--hud-cyan);border-radius:0 0 var(--radius-md) 0;opacity:.6}.metric-card:hover{background:#06b6d40d;border-color:var(--hud-cyan);box-shadow:0 0 20px #06b6d426,inset 1px 1px #06b6d44d,inset -1px -1px #06b6d41a}.metric-card h3{margin:0 0 .4rem;font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em;font-weight:600}.metric-card span{font-family:JetBrains Mono,Fira Code,monospace;font-size:1.8rem;font-weight:700;color:var(--hud-green);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(34,197,94,.3)}.metric-card small{font-size:.55rem;color:var(--text-muted);margin-top:.3rem;text-transform:uppercase;letter-spacing:.1em}.metric-card.status-card span{font-family:Outfit,sans-serif;font-size:.8rem;font-weight:600;color:var(--hud-cyan);text-shadow:0 0 10px rgba(6,182,212,.3)}.metric-card.height-card{background:#22c55e0d;border-color:#22c55e4d}.metric-card.height-card:before{border-color:var(--hud-green)}.metric-card.height-card:after{border-color:var(--hud-green)}.metric-card.height-card span{font-size:2.2rem;color:var(--hud-green);text-shadow:0 0 20px rgba(34,197,94,.5)}.btn{padding:.65rem 1.25rem;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;font-size:.75rem;cursor:pointer;transition:all .2s ease;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem;text-transform:uppercase;letter-spacing:.08em}.btn:active{transform:scale(.98)}.primary{background:linear-gradient(135deg,var(--primary-color) 0%,#0891b2 100%);color:#fff;border-color:var(--hud-cyan);box-shadow:0 2px 10px var(--primary-glow),inset 0 1px #ffffff1a}.primary:hover{box-shadow:0 4px 25px var(--primary-glow),0 0 15px var(--primary-glow);transform:translateY(-1px)}.secondary{background:#52525b4d;color:var(--text-color);border:1px solid var(--glass-border)}.secondary:hover:not(:disabled){background:#64748b4d}.secondary:disabled{opacity:.4;cursor:not-allowed}.danger{background:#f9731626;color:var(--hud-orange);border:1px solid rgba(249,115,22,.4)}.danger:hover{background:#f9731640;box-shadow:0 0 15px #f9731633}select{padding:.6rem .9rem;border-radius:var(--radius-sm);background:#0000004d;border:1px solid var(--glass-border);color:var(--text-color);font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}select:hover{border-color:#ffffff26}select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-glow)}select option{background:var(--bg-secondary);color:var(--text-color)}.calibration-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:55%;height:75%;border:2px dashed rgba(255,255,255,.2);border-radius:var(--radius-lg);pointer-events:none;display:flex;justify-content:center;align-items:flex-end;padding-bottom:1rem;z-index:10}.calibration-overlay:after{content:attr(data-text);color:#fffc;font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;background:#00000080;padding:10px 20px;border-radius:8px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--secondary-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width: 1200px){.session-panel{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:stretch}.session-panel #btn-record{grid-column:1 / -1}}@media (max-width: 1024px){.main-container{flex-direction:column;padding:.75rem;gap:.75rem}.metrics-panel{grid-template-columns:repeat(4,1fr)}.video-section,.metrics-section{flex:none}.container-3d{min-height:250px}.header-right{gap:.6rem}.controls{flex-wrap:wrap;gap:.5rem}}@media (max-width: 900px){.metrics-panel{grid-template-columns:repeat(3,1fr);gap:.5rem}.container-3d{min-height:200px}.controls .btn{padding:.5rem .8rem;font-size:.72rem}.controls select{padding:.45rem .6rem;font-size:.75rem}.modal-content{width:95%;max-width:600px}.modal-footer{flex-wrap:wrap;gap:.5rem}.modal-footer .btn{flex:1 1 auto;min-width:120px}}@media (max-width: 768px){.container-3d{display:none}body{overflow-y:auto;min-height:100vh;margin:0}#app{min-height:100vh;display:flex;flex-direction:column}header{padding:.4rem .75rem;flex-shrink:0}h1{font-size:1rem}.main-container{padding:.5rem;gap:.5rem;flex:1;display:flex;flex-direction:column}.video-section{flex:1;display:flex;flex-direction:column;padding:.5rem;gap:.5rem;border-radius:0;min-height:0}.metrics-section{flex-shrink:0;padding:.5rem;border-radius:0}.session-panel{display:grid;grid-template-columns:1fr 1fr;padding:.5rem;flex-shrink:0;gap:.5rem}.session-panel #btn-record{grid-column:1 / -1}.session-panel .input-group input{padding:.4rem .6rem;font-size:.85rem}#btn-record{padding:.4rem .6rem;font-size:.75rem;min-width:auto}.canvas-container{flex:0 1 auto;min-height:30vh;width:100%;max-height:38vh}#output-canvas{object-fit:contain;display:block;margin:auto}.controls{flex-wrap:wrap;gap:.3rem;padding:.3rem;flex-shrink:0}.controls .btn{padding:.4rem .6rem;font-size:.7rem}.controls select{padding:.35rem .5rem;font-size:.7rem}.metrics-panel{grid-template-columns:repeat(3,1fr);gap:.4rem}.metric-card{padding:.5rem .25rem;min-height:60px}.metric-card h3{font-size:.55rem}.metric-card span{font-size:1.3rem}.metric-card small{font-size:.5rem}.position-guide-bar{padding:.4rem .6rem;gap:.4rem;margin-bottom:.3rem}.position-guide-bar .guide-icon{font-size:1rem}.position-guide-bar .guide-text{font-size:.7rem}.position-guide-bar .guide-subtext{display:none}.spinner{font-size:.7rem;padding:.5rem .75rem}.calibration-overlay{display:none!important}}@media (max-width: 480px){.session-panel{grid-template-columns:1fr;padding:.4rem}.btn{padding:.5rem 1rem;font-size:.75rem}.control-group{flex-direction:column;align-items:stretch}.control-group label{display:none}.metrics-panel{grid-template-columns:repeat(2,1fr)}.symmetry-card,.leaderboard{grid-column:span 2}}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent-color)}.text-danger{color:var(--danger-color)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.fade-in{animation:fadeIn .3s ease-out}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:1;transition:opacity .3s ease}.modal.hidden{display:none;opacity:0}.modal-content{width:90%;max-width:700px;max-height:85vh;display:flex;flex-direction:column;animation:fadeIn .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.modal-header h2{margin:0;font-size:1.25rem;color:var(--accent-color)}.btn-close{background:transparent;border:none;color:var(--text-color);font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;line-height:1;transition:color .2s}.btn-close:hover{color:var(--danger-color)}.modal-body{flex:1;overflow-y:auto;padding:1rem 0}.modal-footer{display:flex;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border-color);flex-wrap:wrap}.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.5rem}.stat-item{background:#00ffcc1a;border:1px solid var(--border-color);border-radius:8px;padding:.75rem;text-align:center}.stat-item .stat-value{font-size:1.5rem;font-weight:700;color:var(--accent-color);display:block}.stat-item .stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.sessions-list{display:flex;flex-direction:column;gap:.75rem}.session-item{background:#ffffff08;border:1px solid var(--border-color);border-radius:8px;padding:1rem;transition:background .2s}.session-item:hover{background:#ffffff0d}.session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.session-athlete{font-weight:600;color:var(--text-color)}.session-date{font-size:.75rem;color:var(--text-muted)}.session-stats{display:flex;gap:1rem;font-size:.85rem}.session-stats span{color:var(--text-muted)}.session-stats strong{color:var(--accent-color)}.session-actions{display:flex;gap:.5rem;margin-top:.75rem}.session-actions button{padding:.25rem .75rem;font-size:.75rem}.no-sessions{text-align:center;padding:2rem;color:var(--text-muted)}.charts-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1.5rem}.chart-wrapper{background:#0000004d;border:1px solid var(--border-color);border-radius:8px;padding:1rem}.chart-wrapper h4{margin:0 0 .75rem;font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.chart-wrapper canvas{width:100%;height:auto}.sessions-title{margin:0 0 1rem;font-size:1rem;color:var(--text-color);border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.header-right{display:flex;align-items:center;gap:1rem}.user-menu{position:relative}.btn-user{display:flex;align-items:center;gap:.5rem;background:#ffffff0d;border:1px solid var(--border-color);border-radius:20px;padding:.25rem .75rem .25rem .25rem;cursor:pointer;transition:all .2s;color:var(--text-color)}.btn-user:hover{background:#ffffff1a;border-color:var(--accent-color)}#user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-color);color:var(--bg-primary);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;overflow:hidden}#user-avatar img{width:100%;height:100%;object-fit:cover}#user-name{font-size:.85rem;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1rem;min-width:200px;z-index:100;box-shadow:0 4px 20px #0000004d}.user-dropdown.hidden{display:none}.user-info{padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:1px solid var(--border-color);font-size:.85rem;color:var(--text-muted)}.user-dropdown .btn{width:100%;margin-top:.5rem}@media (max-width: 768px){.header-right{gap:.4rem}#fps-counter{padding:.25rem .5rem;font-size:.6rem}.btn-icon{width:28px;height:28px;font-size:.85rem}}@media (max-width: 600px){#user-name{display:none}.btn-user{padding:.25rem}#fps-counter{display:none}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent-color);color:var(--bg-primary);padding:8px;z-index:100;transition:top .3s}.skip-link:focus{top:0}.btn-icon{background:transparent;border:1px solid var(--border-color);color:var(--text-color);width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-icon:hover{background:#ffffff1a;border-color:var(--accent-color)}.high-contrast{--bg-color: #000000;--bg-secondary: #1a1a1a;--text-color: #ffffff;--text-muted: #cccccc;--accent-color: #00ff00;--secondary-color: #ffff00;--danger-color: #ff0000;--border-color: #ffffff}.high-contrast .glass-panel{background:#1a1a1a;border:2px solid #ffffff}.high-contrast .btn{border-width:2px}.high-contrast .metric-card{background:#1a1a1a;border:2px solid #ffffff}.high-contrast canvas{filter:contrast(1.2)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){:root{--bg-primary: #000000;--bg-secondary: #1a1a1a;--text-color: #ffffff;--border-color: #ffffff}}@media (max-width: 600px){.modal-content{width:95%;max-height:90vh}.modal-footer{flex-direction:column}.modal-footer .btn{width:100%}.stats-summary{grid-template-columns:repeat(2,1fr)}}.leaderboard{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:1rem;position:relative;overflow:hidden}.leaderboard-empty{text-align:center;color:var(--text-muted)}.leaderboard-empty p{font-size:.8rem;margin-top:.5rem}.leaderboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.leaderboard-header h3{margin:0;font-size:1rem;letter-spacing:.1em;color:var(--hud-cyan)}.new-record-badge{background:linear-gradient(135deg,var(--hud-green),var(--hud-cyan));color:#000;font-size:.65rem;font-weight:700;padding:.25rem .5rem;border-radius:4px;text-transform:uppercase;letter-spacing:.05em}.leaderboard-list{display:flex;flex-direction:column;gap:.5rem}.leaderboard-entry{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#0003;border-radius:6px;border-left:3px solid;transition:all .2s ease}.leaderboard-entry:hover{background:#0000004d}.leaderboard-entry.is-new{background:#06b6d41a;box-shadow:0 0 15px #06b6d433}.leaderboard-entry.is-current{border-left-width:4px}.entry-medal{font-size:1.2rem;min-width:28px;text-align:center}.entry-height{font-family:JetBrains Mono,monospace;font-size:1.1rem;font-weight:700;flex:1}.entry-mode{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.entry-new-tag{background:var(--hud-green);color:#000;font-size:.6rem;font-weight:700;padding:.15rem .4rem;border-radius:3px;text-transform:uppercase}.celebration-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:12px}.celebration-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.celebration-emoji{font-size:3rem}.celebration-text{font-size:1rem;font-weight:700;color:var(--hud-green);text-transform:uppercase;letter-spacing:.1em;text-shadow:0 0 20px var(--hud-green)}.celebration-height{font-family:JetBrains Mono,monospace;font-size:1.5rem;color:var(--hud-cyan);text-shadow:0 0 15px var(--hud-cyan)}.symmetry-card{grid-column:span 2;padding:1rem}.symmetry-card h3{margin-bottom:.5rem;letter-spacing:.15em}.symmetry-score-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.75rem}.symmetry-score{font-family:JetBrains Mono,monospace;font-size:1.8rem;font-weight:700;text-shadow:0 0 10px currentColor}.symmetry-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}.symmetry-angles{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding:.5rem;background:#0003;border-radius:4px}.angle-side{display:flex;flex-direction:column;align-items:center;min-width:50px}.angle-label{font-size:.6rem;color:var(--text-muted);letter-spacing:.1em}.angle-value{font-family:JetBrains Mono,monospace;font-size:1.1rem;color:var(--hud-cyan)}.angle-diff{text-align:center}.angle-diff span{font-family:JetBrains Mono,monospace;font-size:.85rem;padding:.25rem .5rem;border-radius:4px}.diff-ok{color:var(--hud-green);background:#22c55e1a}.diff-warning{color:var(--hud-orange);background:#f973161a}.symmetry-balance-container{margin-bottom:.5rem}.balance-labels{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-muted);margin-bottom:2px}.balance-track{position:relative;width:100%;height:12px;background:#ffffff0d;border-radius:6px;overflow:visible}.balance-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--hud-cyan);opacity:.5;transform:translate(-50%)}.balance-indicator{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px currentColor}.symmetry-bar-container{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.symmetry-bar{height:100%;border-radius:3px;box-shadow:0 0 8px currentColor}.replay-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.replay-modal{background:var(--panel-bg);border:1px solid var(--hud-cyan);border-radius:12px;max-width:800px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 0 30px #06b6d44d}.replay-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(6,182,212,.3)}.replay-header h2{margin:0;font-size:1.2rem;letter-spacing:.1em;color:var(--hud-cyan);flex:1}.replay-height{font-family:JetBrains Mono,monospace;font-size:1.5rem;color:var(--hud-green);text-shadow:0 0 10px var(--hud-green)}.replay-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;transition:color .2s}.replay-close:hover{color:var(--hud-orange)}.replay-content{background:#000;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative}.replay-frame-container{width:100%;height:100%;position:relative}.replay-frame{width:100%;height:100%;object-fit:contain}.replay-frame-number{position:absolute;bottom:10px;right:10px;background:#000000b3;color:var(--hud-cyan);padding:.25rem .5rem;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:.8rem}.replay-no-frames{text-align:center;color:var(--text-muted)}.replay-no-frames p{margin:.5rem 0}.replay-hint{font-size:.8rem;opacity:.7}.replay-progress{position:relative;height:20px;background:#0000004d}.replay-progress-bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--hud-cyan),var(--hud-green));opacity:.3;transition:width .1s}.replay-scrubber{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.replay-controls{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.replay-speed{display:flex;align-items:center;gap:.5rem;justify-content:center}.replay-speed span{color:var(--text-muted);font-size:.8rem}.speed-btn{background:#ffffff1a;border:1px solid var(--glass-border);color:var(--text-color);padding:.25rem .75rem;border-radius:4px;cursor:pointer;font-family:JetBrains Mono,monospace;transition:all .2s}.speed-btn:hover{background:#06b6d433}.speed-btn.active{background:var(--hud-cyan);color:#000;border-color:var(--hud-cyan)}.replay-buttons{display:flex;justify-content:center;gap:.5rem}.replay-buttons button{background:#ffffff1a;border:1px solid var(--glass-border);color:var(--text-color);font-size:1.2rem;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s}.replay-buttons button:hover{background:#06b6d433;border-color:var(--hud-cyan)}.replay-buttons .play-btn{background:var(--hud-cyan);color:#000;padding:.5rem 1.5rem}.replay-buttons .play-btn:hover{background:var(--hud-green)}.replay-shortcuts{display:flex;justify-content:center;gap:1rem;font-size:.7rem;color:var(--text-muted)}