:root{--c1: #18e6ff;--c2: #7afcd6;--c3: #b48cff;--c4: #ff5fa2;--bg: #05070d;--glass: rgba(10, 16, 26, .55);--line: rgba(120, 230, 255, .28)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Rajdhani,-apple-system,sans-serif;color:#eaf6ff;letter-spacing:.3px}#app{position:fixed;top:0;right:0;bottom:0;left:0}#webcam{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000;filter:contrast(1.12) saturate(1.18) brightness(.78)}#three-canvas,#hand-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}#vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,#0000 36%,#0000009e)}#scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3;opacity:.05;background:repeating-linear-gradient(to bottom,#a0e6ff00 0,#a0e6ff99 1px,#a0e6ff00 3px)}#grid-fx{position:absolute;left:-25%;right:-25%;bottom:-10%;height:45%;pointer-events:none;z-index:2;opacity:.18;background-image:linear-gradient(var(--c1) 1px,transparent 1px),linear-gradient(90deg,var(--c1) 1px,transparent 1px);background-size:50px 50px;transform:perspective(340px) rotateX(70deg);transform-origin:bottom center;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 80%);mask-image:linear-gradient(to top,#000 10%,transparent 80%);animation:gridscroll 6s linear infinite}@keyframes gridscroll{0%{background-position:0 0}to{background-position:0 50px}}.panel{background:var(--glass);border:1px solid var(--line);border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px #0000004d,0 8px 30px #0006,inset 0 0 18px #18e6ff0f}.btn,#controls button,.seg-actions button{font-family:Rajdhani,sans-serif;font-weight:700;letter-spacing:1px;color:#dff6ff;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;font-size:13px;cursor:pointer;transition:all .18s ease}.btn:hover,#controls button:hover,.seg-actions button:hover{background:#18e6ff29;border-color:var(--c1);box-shadow:0 0 16px #18e6ff66;transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--c1),var(--c2));color:#021018;border:none}.btn.accent{background:#b48cff38;border-color:#b48cff80}.btn.accent.active{background:var(--c3);color:#120a22;box-shadow:0 0 18px #b48cff99}#topbar{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;z-index:8;gap:12px;animation:fadeDown .6s ease both}#score{font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;padding:9px 18px;color:var(--c2);letter-spacing:2px}#score b{color:#fff;font-size:17px}#brand{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(18px,2.4vw,26px);letter-spacing:3px;color:#fff;text-shadow:0 0 20px rgba(24,230,255,.5);pointer-events:none}#brand span{background:linear-gradient(90deg,var(--c1),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent}#actions{display:flex;gap:8px}#controls{position:absolute;top:70px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:7px;padding:7px 12px;z-index:8;animation:fadeDown .7s ease both}#controls .ctl-label{font-family:Orbitron,sans-serif;font-size:11px;font-weight:700;color:var(--c1);letter-spacing:2px}#controls .ctl-sep{width:1px;height:20px;background:#ffffff2e;margin:0 4px}#controls button{padding:6px 12px;font-size:12px}#controls button.active,.diff.active{background:linear-gradient(135deg,var(--c1),var(--c2));color:#021018;border-color:transparent;box-shadow:0 0 14px #18e6ff80}.diff{min-width:34px;font-family:Orbitron,sans-serif}#occ-btn.active{background:var(--c3);color:#120a22;box-shadow:0 0 14px #b48cff99}#combo{position:absolute;top:120px;left:50%;transform:translate(-50%) scale(.6);font-family:Orbitron,sans-serif;font-size:44px;font-weight:900;color:#ffd84a;text-shadow:0 0 26px rgba(255,216,74,.9);opacity:0;pointer-events:none;z-index:9}#combo.pop{animation:comboPop .75s cubic-bezier(.2,1.4,.3,1)}@keyframes comboPop{0%{opacity:0;transform:translate(-50%) scale(.4)}30%{opacity:1;transform:translate(-50%) scale(1.18)}to{opacity:0;transform:translate(-50%) scale(1)}}#message{position:absolute;bottom:64px;left:50%;transform:translate(-50%);padding:10px 24px;font-size:17px;font-weight:600;text-align:center;color:#eaf6ff;white-space:nowrap;pointer-events:none;z-index:6;background:var(--glass);border:1px solid var(--line);border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 22px #18e6ff2e}#progress{position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:min(440px,70vw);display:flex;align-items:center;gap:12px;z-index:7}#progress-track{flex:1;height:8px;border-radius:999px;overflow:hidden;background:#ffffff1a;border:1px solid rgba(255,255,255,.12)}#progress-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));box-shadow:0 0 14px #18e6ffb3;transition:width .45s cubic-bezier(.3,1,.4,1)}#progress-label{font-family:Orbitron,sans-serif;font-size:12px;color:var(--c2);letter-spacing:1px;min-width:48px}#intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#080e1ac7,#020409f5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .6s ease}#intro.hidden{opacity:0;pointer-events:none}.intro-card{text-align:center;padding:38px 44px;max-width:92vw;border-radius:20px;border:1px solid var(--line);background:var(--glass);box-shadow:0 0 60px #18e6ff2e,inset 0 0 40px #18e6ff0d;animation:fadeUp .7s ease both}.intro-tag{font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:3px;color:var(--c1);margin-bottom:14px}.intro-title{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(40px,9vw,86px);letter-spacing:6px;line-height:1;color:#fff;text-shadow:0 0 40px rgba(24,230,255,.6);animation:titleGlow 3s ease-in-out infinite}.intro-title span{background:linear-gradient(90deg,var(--c1),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent}.intro-sub{margin:16px 0 22px;font-size:18px;color:#b9d6e8}.legend{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:0 auto 28px;max-width:520px}.legend div{text-align:left;font-size:15px;color:#cfe8f5}.legend b{display:block;font-family:Orbitron,sans-serif;font-size:13px;color:var(--c2);letter-spacing:1px}.legend span{font-size:13px;color:#8fb0c2}#start-btn{font-family:Orbitron,sans-serif;font-weight:700;font-size:18px;letter-spacing:3px;color:#021018;background:linear-gradient(135deg,var(--c1),var(--c2));border:none;border-radius:999px;padding:16px 48px;cursor:pointer;box-shadow:0 0 30px #18e6ff80;transition:all .2s ease;animation:pulse 2s ease-in-out infinite}#start-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 0 44px #18e6ffcc}#start-btn:disabled{background:#2a3340;color:#7e93a3;box-shadow:none;cursor:default;animation:none}#status{margin-top:14px;font-size:13px;color:#7fa8bd;font-family:Orbitron,sans-serif;letter-spacing:1px;min-height:16px}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;text-align:center;padding:0 30px;font-family:Orbitron,sans-serif;font-size:22px;font-weight:700;letter-spacing:1px;color:var(--c2);background:#04060cd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:60}#loading.show{display:flex}#solved-banner{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) scale(.6);font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(48px,9vw,96px);letter-spacing:6px;color:var(--c2);text-shadow:0 0 50px rgba(122,252,214,.9);opacity:0;pointer-events:none;z-index:40;transition:opacity .3s ease,transform .3s ease}#solved-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#segment-modal{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#04060ce0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:70}#segment-modal.show{display:flex}.seg-box{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:22px;max-width:88vw;max-height:90vh;text-align:center;box-shadow:0 0 60px #18e6ff33;animation:fadeUp .4s ease both}.seg-title{font-family:Orbitron,sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;color:#fff;margin-bottom:14px}.seg-stage{position:relative;display:inline-block}#seg-img{max-width:70vw;max-height:58vh;display:block;border-radius:12px;cursor:crosshair}#seg-cut{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;display:none;pointer-events:none;filter:drop-shadow(0 0 16px rgba(122,252,214,.7))}#seg-dots{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}#seg-status{margin:14px 0;font-size:14px;font-weight:600;color:var(--c2);min-height:18px}.seg-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.seg-actions button{padding:11px 20px;font-size:13px}#seg-make{background:linear-gradient(135deg,var(--c1),var(--c2))!important;color:#021018!important;border:none!important}#seg-make:disabled{opacity:.4;cursor:default}#upload-btn,#import-btn,#hd-btn{position:static}#actions{position:relative}#photo-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:9;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--glass);border:1px solid var(--line);border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 30px #00000080}#photo-menu.hidden{display:none}#photo-menu button{font-family:Rajdhani,sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;color:#dff6ff;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:9px 14px;cursor:pointer;white-space:nowrap;text-align:left}#photo-menu button:hover{background:#18e6ff29;border-color:var(--c1)}#camera-modal{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#04060ce0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:72}#camera-modal.show{display:flex}.cam-box{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:22px;text-align:center;box-shadow:0 0 60px #18e6ff33;animation:fadeUp .4s ease both}.cam-title{font-family:Orbitron,sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;color:#fff;margin-bottom:14px}.cam-stage{position:relative;display:inline-block}#cam-video,#cam-shot{max-width:70vw;max-height:56vh;border-radius:12px;display:block}#cam-video{transform:scaleX(-1)}#cam-shot{display:none}#cam-status{margin:14px 0;font-size:14px;font-weight:600;color:var(--c2)}.cam-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.cam-actions button{font-family:Rajdhani,sans-serif;font-weight:700;letter-spacing:1px;color:#dff6ff;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:11px 20px;font-size:13px;cursor:pointer}.cam-actions button:hover{background:#18e6ff29;border-color:var(--c1)}#cam-capture,#cam-use{background:linear-gradient(135deg,var(--c1),var(--c2))!important;color:#021018!important;border:none!important}.rot-ctl{position:absolute;top:50%;transform:translateY(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:10px}#rot-left{left:22px}#rot-right{right:22px}.rot-ctl input[type=range]{writing-mode:vertical-lr;direction:rtl;width:10px;height:190px;cursor:grab;accent-color:var(--c1);background:transparent}.rot-ctl span{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:1px;color:var(--c2);background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:3px 7px}@keyframes fadeDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}#controls.panel{animation:fadeDown .7s ease both}@keyframes titleGlow{0%,to{text-shadow:0 0 40px rgba(24,230,255,.5)}50%{text-shadow:0 0 60px rgba(180,140,255,.7)}}@keyframes pulse{0%,to{box-shadow:0 0 30px #18e6ff80}50%{box-shadow:0 0 46px #18e6ffd9}}