*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Rajdhani',sans-serif;color:#fff}
canvas#scene{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}
canvas#draw-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none}
#scanlines{position:fixed;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,.008) 2px,rgba(0,240,255,.008) 4px)}
#loading{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s,visibility 1s}
#loading.hide{opacity:0;visibility:hidden;pointer-events:none}
#loading h1{font-family:'Orbitron',sans-serif;font-size:clamp(20px,4vw,40px);letter-spacing:8px;background:linear-gradient(90deg,#00f0ff,#a855f7,#ff2d95);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pulse 2s ease-in-out infinite}
.spinner{width:40px;height:40px;margin-top:24px;border:2px solid rgba(0,240,255,.15);border-top-color:#00f0ff;border-radius:50%;animation:spin 1s linear infinite}
#loading p{margin-top:16px;font-size:13px;letter-spacing:4px;color:#00f0ff80}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blinker{0%,100%{opacity:1}50%{opacity:.3}}
.glass{border-radius:14px;background:rgba(8,8,30,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,240,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.4)}
/* Webcam */
#cam-box{position:fixed;top:20px;right:20px;z-index:20;width:220px;height:165px;border-radius:14px;overflow:hidden;border:1px solid rgba(0,240,255,.35);box-shadow:0 0 24px rgba(0,240,255,.15);background:rgba(0,0,0,.7);transition:opacity .4s,transform .4s}
#cam-box.cam-hidden{opacity:0;transform:translateX(260px);pointer-events:none}
#cam-box::before{content:'● REC';position:absolute;top:8px;left:10px;font-family:'Orbitron',sans-serif;font-size:9px;color:#ff2d95;letter-spacing:2px;z-index:3;animation:blinker 1.5s steps(2) infinite}
video#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.85}
canvas#hand-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;transform:scaleX(-1)}
#cam-label{position:absolute;bottom:0;left:0;right:0;padding:4px;font-size:9px;letter-spacing:2px;background:rgba(0,0,0,.7);color:#00f0ff;font-family:'Orbitron',sans-serif;text-align:center;z-index:3}
#hand-count{position:absolute;top:8px;right:10px;font-family:'Orbitron',sans-serif;font-size:9px;color:#00f0ff;letter-spacing:1px;z-index:3}
/* Finger info */
#finger-info{position:fixed;top:195px;right:20px;z-index:20;padding:10px 14px;min-width:140px;font-family:'Orbitron',sans-serif;letter-spacing:1px;transition:opacity .4s,transform .4s}
#finger-info.cam-hidden{opacity:0;transform:translateX(260px);pointer-events:none}
.fi-row{display:flex;align-items:center;gap:8px;margin-bottom:3px;opacity:.4;transition:opacity .15s;font-size:10px}
.fi-row.active{opacity:1}
.fi-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.fi-label{color:#ffffffaa}
.fi-state{margin-left:auto;font-size:9px}
/* Info panel */
#info{position:fixed;bottom:24px;left:24px;z-index:20;padding:14px 18px;min-width:220px}
.lbl{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:4px;color:#00f0ff55;margin-bottom:6px}
#shape-name{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;letter-spacing:3px;background:linear-gradient(135deg,#00f0ff,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2px}
#auto-status{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;margin-bottom:6px;color:#39ff14}
#gesture-status{font-size:12px;color:#ff2d95;font-weight:700;letter-spacing:1px;min-height:16px}
/* Draw controls */
#draw-ctrl{position:fixed;bottom:24px;right:24px;z-index:20;padding:12px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#draw-ctrl button,#draw-ctrl .toggle-btn{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;padding:6px 12px;border:1px solid rgba(0,240,255,.25);background:rgba(0,240,255,.08);color:#00f0ff;border-radius:8px;cursor:pointer;transition:all .2s;pointer-events:auto;user-select:none}
#draw-ctrl button:hover,.toggle-btn:hover{background:rgba(0,240,255,.2);box-shadow:0 0 10px rgba(0,240,255,.3)}
.toggle-btn.pen-on{background:rgba(255,45,149,.15)!important;border-color:rgba(255,45,149,.5)!important;color:#ff2d95!important;box-shadow:0 0 10px rgba(255,45,149,.2)!important}
.color-row{display:flex;gap:5px;pointer-events:auto}
.cdot{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s}
.cdot:hover,.cdot.on{border-color:#fff;transform:scale(1.2)}
/* Voice */
#voice-status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;padding:6px 16px;display:flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;cursor:pointer;pointer-events:auto}
#voice-status:hover{border-color:rgba(0,240,255,.3)}
#mic-icon{font-size:16px;transition:all .3s}
#voice-status.listening #mic-icon{color:#ff2d95;animation:pulse 1s ease-in-out infinite}
#voice-status.listening #voice-text{color:#ff2d95}
#voice-status.listening{border-color:rgba(255,45,149,.4);background:rgba(255,45,149,.08)}
/* Guide */
#guide-toggle{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:25;padding:6px 16px;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;color:#00f0ff;cursor:pointer;pointer-events:auto;border:1px solid rgba(0,240,255,.2);background:rgba(0,240,255,.05)}
#guide-toggle:hover{background:rgba(0,240,255,.12)}
#guide{position:fixed;top:0;right:-400px;width:380px;height:100%;z-index:100;padding:24px 20px;overflow-y:auto;transition:right .4s ease;border-radius:0;border-left:1px solid rgba(0,240,255,.15);background:rgba(5,5,20,.92);backdrop-filter:blur(30px)}
#guide.open{right:0}
#guide h3{font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:4px;color:#00f0ff;margin-bottom:20px}
#guide .close-btn{position:absolute;top:20px;right:16px;background:none;border:1px solid rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.guide-section{margin-bottom:18px}
.guide-section h4{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;color:#a855f7;margin-bottom:8px}
.gc{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:5px;padding-left:8px;border-left:2px solid rgba(0,240,255,.1);line-height:1.4}
.gc b{color:#00f0ff;font-weight:600}
/* Mode badge */
#mode-badge{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:20;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:4px;padding:6px 16px;border-radius:20px;opacity:0;transition:opacity .4s;pointer-events:none}
#mode-badge.show{opacity:1}
#mode-badge.writing{background:rgba(255,45,149,.1);border:1px solid rgba(255,45,149,.3);color:#ff2d95}
#mode-badge.orbit{background:rgba(57,255,20,.08);border:1px solid rgba(57,255,20,.25);color:#39ff14}
#mode-badge.particles{background:rgba(0,240,255,.08);border:1px solid rgba(0,240,255,.25);color:#00f0ff}
#mode-badge.dual{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);color:#a855f7}
#mode-badge.zoom{background:rgba(255,190,11,.08);border:1px solid rgba(255,190,11,.25);color:#ffbe0b}
#mode-badge.eraser{background:rgba(255,100,100,.1);border:1px solid rgba(255,100,100,.3);color:#ff6b6b}
#fps{position:fixed;top:24px;left:24px;z-index:20;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;color:#00f0ff40;padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid rgba(0,240,255,.05)}
#gesture-flash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:6px;color:#00f0ff;opacity:0;transition:opacity .3s;pointer-events:none;text-shadow:0 0 30px #00f0ff80}