.App{min-height:100vh;display:flex;flex-direction:column;padding:2rem;max-width:1400px;margin:0 auto}header{text-align:center;margin-bottom:2rem}h1{font-size:3rem;margin-bottom:.5rem;color:var(--gold)}header p{font-size:1.2rem;margin:0;opacity:.7}main{display:flex;flex-direction:column;gap:2rem;align-items:center}.error{background:#f44;color:#fff;padding:1.5rem;border-radius:12px;text-align:center;max-width:500px}.error p{margin:.5rem 0;color:#fff;opacity:1}.loading{background:#0b112099;padding:2rem;border-radius:8px;text-align:center;border:1px solid var(--gold);min-width:400px}.loading p{margin:0;font-size:1.1rem;color:var(--gold)}.progress-bar-container{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin:1.5rem 0 .5rem}.progress-bar-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .05s linear;box-shadow:0 0 10px #f8b83a80}.progress-bar-fill.complete{animation:progressPop .6s ease-out forwards}@keyframes progressPop{0%{transform:scaleY(1);box-shadow:0 0 10px #f8b83a80}30%{transform:scaleY(1.8);box-shadow:0 0 30px #f8b83ae6,0 0 60px #4cc2b499}50%{transform:scaleY(2.2);box-shadow:0 0 40px #f8b83a,0 0 80px #4cc2b4cc;background:var(--teal)}70%{transform:scaleY(1.5)}to{transform:scaleY(1);box-shadow:0 0 20px #4cc2b4cc;background:var(--teal)}}.progress-text{margin-top:.5rem!important;font-size:.9rem!important;opacity:.8}.video-container{position:relative;width:100%;max-width:800px;aspect-ratio:16 / 9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px #0000004d;transition:box-shadow .3s ease;opacity:1;transform:scale(1);animation:none}.video-container.hidden{opacity:0;pointer-events:none;position:absolute;visibility:hidden}.video-container.slide-to-position{animation:slideToPosition .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideToPosition{0%{opacity:0;transform:translateY(-300px) scale(.8)}60%{opacity:1}to{opacity:1;transform:translateY(0) scale(1)}}.video-container.gesture-success{box-shadow:0 0 60px #0f8c,0 0 100px #00ff8880,0 20px 60px #0000004d;animation:success-glow .8s ease-out}@keyframes success-glow{0%{box-shadow:0 0 40px #0f89,0 0 80px #00ff884d,0 20px 60px #0000004d}50%{box-shadow:0 0 80px #0f8,0 0 140px #00ff88b3,0 20px 60px #0000004d}to{box-shadow:0 0 60px #0f8c,0 0 100px #00ff8880,0 20px 60px #0000004d}}.video-feed{position:absolute;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none}.start-button{font-size:1.2rem;padding:1rem 2.5rem;background:var(--gold);color:var(--navy);border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.start-button:hover{transform:translateY(-1px);opacity:.9}.start-button:active{transform:translateY(0)}.status{padding:1rem 2rem;border-radius:50px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.indicator{font-size:1.2rem;font-weight:600;color:#888;transition:all .3s ease}.indicator.active{color:var(--teal);animation:pulse 1.5s ease-in-out infinite}.indicator.stopped{color:var(--coral-red);font-weight:700}.indicator.waiting{color:var(--gold);font-weight:700;animation:waiting-pulse 2s ease-in-out infinite}@keyframes waiting-pulse{0%,to{opacity:1}50%{opacity:.5}}.indicator.recording{color:var(--coral-red);animation:recording-pulse 1s ease-in-out infinite}@keyframes recording-pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.gesture-info{background:#0b112099;padding:1.5rem;border-radius:8px;width:100%;max-width:600px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gold)}.gesture-info h3{margin-top:0;margin-bottom:1rem;font-size:1.3rem;color:var(--gold)}.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.data-item{display:flex;flex-direction:column;gap:.3rem;padding:.75rem;background:#ffffff08;border-radius:8px}.data-item .label{font-size:.85rem;opacity:.6;text-transform:uppercase;letter-spacing:.05em}.data-item .value{font-size:1.2rem;font-weight:700;color:var(--teal)}.instructions{background:#0b112099;padding:2rem;border-radius:8px;max-width:600px;border:1px solid var(--gold)}.instructions h3{margin-top:0;margin-bottom:1.5rem;font-size:1.3rem;color:var(--gold)}.instructions ul{list-style:none;padding:0;margin:0}.instructions li{padding:.75rem 0;font-size:1rem;line-height:1.6;border-bottom:1px solid rgba(248,184,58,.2)}.instructions li:last-child{border-bottom:none}.instructions strong{color:var(--teal)}.emotion-badge{display:flex;align-items:center;gap:1rem;padding:1rem 2rem;background:#667eea26;border:2px solid rgba(102,126,234,.4);border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:1rem;transition:all .3s ease}.emotion-badge:hover{background:#667eea33;border-color:#667eea99;transform:translateY(-2px);box-shadow:0 10px 30px #667eea4d}.emotion-icon{font-size:2rem;line-height:1}.emotion-label{font-size:1.3rem;font-weight:700;text-transform:capitalize;color:#fff;letter-spacing:.02em}.emotion-score{font-size:1.2rem;font-weight:700;color:#0f8;background:#00ff881a;padding:.25rem .75rem;border-radius:20px}.emotion-warning-inline{background:#f903;border:2px solid rgba(255,153,0,.5);border-radius:50px;padding:.75rem 1.5rem;color:#ffb84d;font-weight:600;margin-bottom:1rem;text-align:center}@media (max-width: 768px){h1{font-size:2rem}.video-container{max-width:100%}.data-grid{grid-template-columns:repeat(2,1fr)}.start-button{font-size:1.2rem;padding:1rem 2rem}.emotion-badge{padding:.75rem 1.5rem;gap:.75rem}.emotion-icon{font-size:1.5rem}.emotion-label{font-size:1.1rem}.emotion-score{font-size:1rem;padding:.2rem .6rem}.emotion-warning-inline{padding:.5rem 1rem;font-size:.9rem}}.instrument-status{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}.hand-instrument{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1.25rem;background:#ffffff08;border-radius:12px;border:2px solid rgba(255,255,255,.1);transition:all .3s ease}.hand-instrument.playing{border-color:var(--teal);background:#4cc2b426;box-shadow:0 0 20px #4cc2b44d}.hand-label{font-size:.9rem;opacity:.7;font-weight:500}.instrument-name{font-size:1.1rem;font-weight:700;color:var(--gold)}.hand-instrument.playing .instrument-name{color:var(--teal)}.hand-data{margin-bottom:1.5rem;padding:1rem;background:#ffffff05;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.hand-data h4{margin:0 0 1rem;color:var(--gold);font-size:1.1rem}.hand-data:last-child{margin-bottom:0}.gesture-detected{grid-column:span 2;background:#4cc2b426;border:1px solid var(--teal);animation:gesture-glow .5s ease-out}@keyframes gesture-glow{0%{transform:scale(.95);opacity:.5}to{transform:scale(1);opacity:1}}.gesture-detected .value{color:var(--teal);font-size:1rem;text-align:center}.dual-view-container{display:flex;gap:2rem;width:100%;max-width:1600px;align-items:flex-start;justify-content:center}.webcam-column,.fluid-column{flex:0 0 50%;max-width:800px}.fluid-canvas{width:100%;height:auto;aspect-ratio:16 / 9;background:#000;border-radius:16px;box-shadow:0 20px 60px #667eea4d;display:block;min-height:400px;border:2px solid rgba(102,126,234,.3)}@media (max-width: 1200px){.dual-view-container{flex-direction:column;align-items:center}.webcam-column,.fluid-column{flex:1 1 100%;max-width:800px;width:100%}}@media (max-width: 768px){.App{padding:1rem}h1{font-size:2rem}.dual-view-container{gap:1rem}.webcam-column,.fluid-column{max-width:100%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.exit-button{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;border:1px solid rgba(255,255,255,.3);background:transparent;color:#ffffffb3;border-radius:.25rem;line-height:1;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0}.exit-button:hover{background:#ffffff1a;color:#fff;border-color:#ffffff80}.calibration-header{text-align:center;margin-bottom:1rem}.calibration-header h2{margin:0 0 .25rem;color:var(--gold);text-transform:uppercase;letter-spacing:.05em}.calibration-subtitle{opacity:.85;margin:0;color:#fff}.calibration-progress-bar{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin-bottom:.5rem}.calibration-progress-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .3s ease}.calibration-step-counter{text-align:center;opacity:.6;margin-bottom:1.5rem;color:#fff}.calibration-timeline{display:flex;justify-content:space-between;margin:1rem 0;position:relative;padding:0 .5rem}.calibration-timeline:before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:#ffffff1a;z-index:0}.hold-progress-container{margin:1rem 0}.timeline-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;position:relative;z-index:1;flex:1}.timeline-circle{width:44px;height:44px;border-radius:50%;background:#ffffff0d;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .3s ease}.timeline-item.completed .timeline-circle{background:#4cc2b433;border-color:var(--teal);color:var(--teal)}.timeline-item.active .timeline-circle{background:#f8b83a33;border-color:var(--gold);border-width:2px;animation:pulse-border 2s ease-in-out infinite}@keyframes pulse-border{0%,to{opacity:1}50%{opacity:.7}}.timeline-item.pending .timeline-circle{opacity:.3}.timeline-label{text-align:center;opacity:.6;max-width:70px;line-height:1.2;color:#fff}.timeline-item.active .timeline-label{opacity:1;color:var(--gold)}.timeline-item.completed .timeline-label{opacity:.8;color:var(--teal)}.hold-progress-text{margin-bottom:.4rem;color:var(--gold);display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:1.5rem}.pulse-dot{color:var(--teal);animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.hold-progress-bar{width:100%;height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden;position:relative}.hold-progress-fill{height:100%;background:var(--gold);border-radius:6px;transition:width .05s linear;position:relative}.hold-progress-fill.active{opacity:.9}.hold-progress-fill.success{background:var(--teal)}.hold-progress-percentage{margin-top:.4rem;opacity:.6;color:#fff}.calibration-help{text-align:center;margin-top:1rem;padding:.5rem;background:#ffffff0d;border-radius:.375rem}.calibration-help p{margin:0;opacity:.7;color:#fff}.skip-button-container{text-align:center;margin-top:1rem;animation:fadeIn .3s ease-out}.skip-button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:.375rem;cursor:pointer;transition:background .2s;pointer-events:auto}.skip-button:hover{background:#ffffff1a}@media (max-width: 768px){.calibration-overlay{padding:1rem}.calibration-container{padding:1.5rem 1rem;max-width:100%}.calibration-header h2{font-size:1.75rem}.calibration-timeline{flex-wrap:wrap;gap:1rem;margin:1rem 0}.timeline-item{flex-basis:calc(50% - .5rem)}.timeline-circle{width:50px;height:50px;font-size:1.2rem}.calibration-video-container{margin:1rem 0}.calibration-gesture-text{margin:.75rem 0 .5rem;padding:.6rem .8rem}.calibration-help{margin-top:1rem;padding:.75rem}}:root{--navy: #0B1120;--violet: #483C9D;--gold: #F8B83A;--teal: #4CC2B4;--coral-red: #E85C55}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:-10%;left:-10%;width:120%;height:120%;background-image:url(/background3.png);background-size:cover;background-position:center;filter:blur(8px);z-index:-2;animation:parallaxDrift 60s ease-in-out infinite}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at top left,rgba(102,126,234,.3) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(118,75,162,.3) 0%,transparent 50%),linear-gradient(180deg,#1a1a1ab3,#1a1a1ad9);z-index:-1}@keyframes parallaxDrift{0%,to{transform:translate(0) scale(1)}25%{transform:translate(-2%,1%) scale(1.02)}50%{transform:translate(1%,-1%) scale(1.01)}75%{transform:translate(-1%,2%) scale(1.02)}}