:root{--primary:#00f2ff;--secondary:#7000ff;--bg:#050505;--glass:#ffffff0d;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:#fff;font-family:Outfit,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#canvas3d{z-index:5;width:100%;height:100%;display:block;position:absolute;top:0;left:0}#webcam{object-fit:cover;z-index:1;opacity:.8;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}#ui-container{pointer-events:none;z-index:10;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:2rem;display:flex;position:absolute;top:0;left:0}.header{text-align:center}h1{letter-spacing:.5rem;background:linear-gradient(to right, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px #00f2ff80);-webkit-background-clip:text;font-size:2.5rem;font-weight:700}.header p{opacity:.7;letter-spacing:.2rem;margin-top:.5rem;font-size:1rem}.stats{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1rem;width:250px;padding:1.5rem;position:absolute;top:2rem;right:2rem}.stat-item{margin-bottom:1rem}.stat-item:last-child{margin-bottom:0}.label{opacity:.5;margin-bottom:.3rem;font-size:.7rem;display:block}.value{color:var(--primary);text-shadow:0 0 10px var(--primary);font-weight:700}.progress-bar{background:#ffffff1a;border-radius:3px;width:100%;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(to right, var(--primary), var(--secondary));width:80%;height:100%;box-shadow:0 0 10px var(--primary);transition:width .3s}#instructions{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1rem;align-self:center;width:fit-content;margin-bottom:2rem;padding:1.5rem}#instructions p{opacity:.8;margin:.5rem 0;font-size:.9rem}#loading-overlay{background:var(--bg);z-index:100;flex-direction:column;justify-content:center;align-items:center;transition:opacity 1s;display:flex;position:absolute;inset:0}.loader{border:3px solid #0000;border-top-color:var(--primary);border-radius:50%;width:60px;height:60px;margin-bottom:1rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hidden{pointer-events:none;opacity:0!important}