:root{--bg-dark:#030408;--bg-panel:#0a0e1ab8;--bg-panel-hover:#12182cd9;--border-glass:#ffffff1f;--border-glass-bright:#00f0ff73;--color-primary:#00f0ff;--color-primary-glow:#00f0ff99;--color-secondary:#ff007f;--color-accent:#a855f7;--color-success:#00f5a0;--color-warning:#ffb703;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--font-main:"Outfit", sans-serif;--font-mono:"Space Grotesk", monospace;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--shadow-glass:0 12px 40px 0 #0009;--shadow-neon:0 0 25px #00f0ff73}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{background-color:var(--bg-dark);width:100%;height:100%;font-family:var(--font-main);color:var(--text-main);overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}#grid-overlay{pointer-events:none;z-index:2;background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:40px 40px;width:100%;height:100%;position:absolute;top:0;left:0}.warp-container{z-index:50;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .4s;display:flex;position:absolute;top:0;left:0}.warp-flash{background:radial-gradient(circle,#00f0ff4d 0%,#030408f2 70%);width:100%;height:100%;animation:.8s infinite alternate warp-pulse;position:absolute;top:0;left:0}.warp-label{font-family:var(--font-mono);letter-spacing:4px;color:var(--color-primary);text-shadow:0 0 20px var(--color-primary-glow);font-size:16px;font-weight:700;animation:1s infinite alternate float-pulse;position:relative}.glass{background:var(--bg-panel);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-glass);box-shadow:var(--shadow-glass)}.hud-container{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px;transition:opacity .5s;display:flex;position:absolute;top:0;left:0}.hud-container>*{pointer-events:auto}.hidden{display:none!important}.top-bar{border-radius:var(--radius-md);justify-content:space-between;align-items:center;max-width:100%;padding:12px 24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-title{letter-spacing:5px;background:linear-gradient(135deg, #fff 0%, var(--color-primary) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px #00f0ff66);-webkit-background-clip:text;font-size:22px;font-weight:800}.brand-badge{font-family:var(--font-mono);color:var(--color-primary);letter-spacing:1px;background:#00f0ff26;border:1px solid #00f0ff4d;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700}.level-status{font-family:var(--font-mono);align-items:center;gap:8px;font-size:13px;display:flex}.status-label{color:var(--text-dim)}.status-value{color:var(--color-primary);letter-spacing:1px;font-weight:600}.pulse-green{color:var(--color-success);text-shadow:0 0 12px #00f5a099;animation:2s infinite alternate pulse-glow}.header-controls{align-items:center;gap:10px;display:flex}.icon-btn{border:1px solid var(--border-glass);color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0d;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.icon-btn:hover{border-color:var(--color-primary);background:#00f0ff26;transform:translateY(-1px);box-shadow:0 0 14px #00f0ff59}.camera-toolbar{border:1px solid var(--border-glass);border-radius:var(--radius-sm);background:#0a0e1ad9;gap:4px;padding:4px;display:flex;position:absolute;top:86px;right:20px}.cam-btn{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:1px;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 12px;font-size:11px;font-weight:700;transition:all .2s}.cam-btn:hover{color:#fff;background:#ffffff14}.cam-btn.active{background:var(--color-primary);color:#030408;box-shadow:0 0 12px var(--color-primary-glow)}.sidebar-left{border-radius:var(--radius-md);flex-direction:column;gap:20px;width:280px;padding:20px;display:flex;position:absolute;top:86px;left:20px}.sidebar-section h3{font-size:11px;font-family:var(--font-mono);color:var(--text-dim);letter-spacing:2px;margin-bottom:10px}.mode-selector{border-radius:var(--radius-sm);border:1px solid var(--border-glass);background:#0006;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.mode-tab{color:var(--text-muted);font-family:var(--font-mono);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px 12px;font-size:12px;font-weight:600;transition:all .2s}.mode-tab.active{background:var(--color-primary);color:#030408;box-shadow:0 0 15px var(--color-primary-glow);font-weight:700}.level-list{flex-direction:column;gap:8px;display:flex}.level-card{border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-main);cursor:pointer;text-align:left;background:#ffffff08;align-items:center;gap:14px;padding:12px 16px;transition:all .2s;display:flex}.level-card:hover{background:#ffffff14;border-color:#ffffff4d;transform:translate(4px)}.level-card.active{border-color:var(--color-primary);background:#00f0ff1f;box-shadow:inset 0 0 15px #00f0ff33}.level-num{font-family:var(--font-mono);color:var(--color-primary);font-size:12px;font-weight:700}.level-name{font-size:13px;font-weight:600}.section-desc{color:var(--text-dim);margin-bottom:12px;font-size:12px;line-height:1.4}.tool-grid{grid-template-columns:1fr;gap:8px;display:grid}.tool-btn{border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-main);cursor:pointer;background:#ffffff0a;align-items:center;gap:12px;padding:10px 14px;font-size:13px;transition:all .2s;display:flex}.tool-btn:hover{border-color:var(--color-primary);background:#00f0ff1f;transform:translateY(-1px);box-shadow:0 0 12px #00f0ff40}.tool-svg{color:var(--color-primary);align-items:center;display:flex}.clear-btn{width:100%;color:var(--color-secondary);font-family:var(--font-mono);letter-spacing:1px;border-radius:var(--radius-sm);cursor:pointer;background:#ff007f1a;border:1px solid #ff007f59;margin-top:10px;padding:10px;font-size:11px;transition:all .2s}.clear-btn:hover{background:#ff007f40;box-shadow:0 0 14px #ff007f66}.transform-actions{gap:8px;display:flex}.action-icon-btn{color:var(--color-primary);border-radius:var(--radius-sm);font-family:var(--font-mono);cursor:pointer;background:#00f0ff14;border:1px solid #00f0ff4d;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.action-icon-btn:hover{border-color:var(--color-primary);background:#00f0ff33;box-shadow:0 0 12px #00f0ff4d}.action-icon-btn.danger{color:var(--color-secondary);background:#ff007f1a;border-color:#ff007f4d;flex:0 0 40px}.action-icon-btn.danger:hover{background:#ff007f40;box-shadow:0 0 12px #ff007f66}.control-list{flex-direction:column;gap:8px;list-style:none;display:flex}.control-list li{color:var(--text-muted);align-items:center;gap:8px;font-size:12px;display:flex}kbd{border:1px solid var(--border-glass);font-family:var(--font-mono);color:var(--color-primary);background:#ffffff14;border-radius:4px;padding:2px 6px;font-size:10px}.bottom-panel{border-radius:var(--radius-md);justify-content:space-between;align-items:center;margin-top:auto;padding:16px 24px;display:flex}.objective-container{align-items:center;gap:16px;display:flex}.objective-tag{border:1px solid var(--color-primary);color:var(--color-primary);font-family:var(--font-mono);letter-spacing:1.5px;border-radius:var(--radius-sm);background:#00f0ff26;padding:4px 10px;font-size:11px;font-weight:700}.objective-text{color:var(--text-main);letter-spacing:.2px;font-size:14px}.action-btn{border:1px solid var(--border-glass);color:var(--text-muted);font-family:var(--font-mono);letter-spacing:1px;border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0d;padding:8px 16px;font-size:12px;transition:all .2s}.action-btn:hover{color:var(--text-main);background:#ffffff1f;border-color:#ffffff4d}.stats-widget{border-radius:var(--radius-md);gap:20px;padding:12px 20px;display:flex;position:absolute;bottom:96px;right:20px}.stat-item{flex-direction:column;gap:2px;display:flex}.stat-name{font-family:var(--font-mono);color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;font-size:10px}.stat-val{font-family:var(--font-mono);color:var(--color-primary);font-size:15px;font-weight:700}.overlay{-webkit-backdrop-filter:blur(24px);z-index:100;opacity:0;pointer-events:none;background:#030408d9;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:0;left:0}.overlay.active{opacity:1;pointer-events:auto}.intro-card{border-radius:var(--radius-lg);text-align:center;border:1px solid #00f0ff4d;flex-direction:column;align-items:center;gap:24px;width:90%;max-width:540px;padding:48px;animation:.8s cubic-bezier(.16,1,.3,1) forwards float-in;display:flex;transform:translateY(20px);box-shadow:0 0 70px #00f0ff33}.logo-text{letter-spacing:16px;background:linear-gradient(135deg, #fff 0%, var(--color-primary) 50%, var(--color-secondary) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 25px #00f0ff80);-webkit-background-clip:text;margin-left:16px;font-size:48px;font-weight:800}.logo-sub{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:4px;margin-top:8px;font-size:12px}.intro-description{color:var(--text-muted);font-size:15px;line-height:1.6}.spark-loader{width:64px;height:64px;margin:10px 0;position:relative}.spark-core{width:16px;height:16px;box-shadow:0 0 20px var(--color-primary), 0 0 45px var(--color-primary);background:#fff;border-radius:50%;animation:1.5s ease-in-out infinite pulse-core;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spark-ring{border:2px dashed var(--color-primary);border-radius:50%;width:100%;height:100%;animation:8s linear infinite spin-ring;position:absolute;top:0;left:0}.glow-btn{background:linear-gradient(135deg, var(--color-primary) 0%, #00b4d8 100%);color:#030408;font-family:var(--font-mono);letter-spacing:2px;border-radius:var(--radius-full);cursor:pointer;box-shadow:0 0 35px var(--color-primary-glow);border:none;padding:16px 36px;font-size:14px;font-weight:700;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.glow-btn:hover{box-shadow:0 0 55px var(--color-primary-glow), 0 0 25px #fff;transform:scale(1.05)}.success-card{border-radius:var(--radius-lg);text-align:center;border:1px solid #00f5a066;flex-direction:column;align-items:center;gap:20px;padding:40px 60px;display:flex;position:relative;box-shadow:0 0 60px #00f5a040}.success-title{letter-spacing:4px;color:var(--color-success);text-shadow:0 0 20px #00f5a099;font-size:28px;font-weight:800}.success-msg{color:var(--text-muted);font-size:15px}.modal-overlay{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:120;background:#030408cc;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.modal-content{border-radius:var(--radius-lg);border:1px solid var(--border-glass-bright);width:90%;max-width:600px;padding:36px;position:relative}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:24px;transition:color .2s;position:absolute;top:20px;right:20px}.close-btn:hover{color:#fff}.modal-content h2{letter-spacing:2px;color:var(--color-primary);margin-bottom:24px;font-size:20px;font-weight:700}.modal-grid{flex-direction:column;gap:16px;display:flex}.guide-item{border-radius:var(--radius-sm);border:1px solid var(--border-glass);background:#ffffff08;align-items:flex-start;gap:16px;padding:16px;display:flex}.guide-icon-svg{background:#ffffff0d;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.guide-item h4{margin-bottom:4px;font-size:15px}.guide-item p{color:var(--text-muted);font-size:13px;line-height:1.4}@keyframes pulse-glow{0%{opacity:.6}to{opacity:1}}@keyframes pulse-core{0%,to{opacity:.9;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;box-shadow:0 0 35px var(--color-primary);transform:translate(-50%,-50%)scale(1.3)}}@keyframes spin-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float-in{to{transform:translateY(0)}}@keyframes warp-pulse{0%{opacity:.4}to{opacity:.95}}@keyframes float-pulse{0%{transform:translateY(0)scale(.98)}to{transform:translateY(-4px)scale(1.02)}}@media (width<=860px){.sidebar-left,.stats-widget{display:none}.camera-toolbar{top:76px}}