:root{--color-bg-primary: #0a0a1a;--color-bg-secondary: #0f172a;--color-bg-tertiary: #1e293b;--color-accent-blue: #3b82f6;--color-accent-blue-glow: rgba(59, 130, 246, .5);--color-accent-cyan: #22d3ee;--color-accent-emerald: #10b981;--color-accent-orange: #f59e0b;--color-accent-red: #ef4444;--color-accent-purple: #a855f7;--glass-bg: rgba(15, 23, 42, .85);--glass-border: rgba(148, 163, 184, .1);--glass-blur: 20px;--gradient-primary: linear-gradient(135deg, rgba(59, 130, 246, .1), rgba(168, 85, 247, .1));--gradient-border: linear-gradient(135deg, rgba(59, 130, 246, .3), rgba(168, 85, 247, .3));--gradient-glow: radial-gradient(ellipse at center, rgba(59, 130, 246, .15), transparent 70%);--shadow-soft: 0 4px 30px rgba(0, 0, 0, .3);--shadow-glow: 0 0 40px rgba(59, 130, 246, .2);--transition-fast: .15s;--transition-normal: .3s;--transition-slow: .5s}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;overflow:hidden;background:var(--color-bg-primary);color:#f8fafc;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}canvas{display:block}.scrollbar-hide::-webkit-scrollbar{width:6px}.scrollbar-hide::-webkit-scrollbar-track{background:transparent}.scrollbar-hide::-webkit-scrollbar-thumb{background:#64748b4d;border-radius:3px}.scrollbar-hide::-webkit-scrollbar-thumb:hover{background:#64748b80}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--shadow-soft)}.glass-panel-gradient{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));position:relative}.glass-panel-gradient:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:var(--gradient-border);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.btn-primary{position:relative;background:linear-gradient(135deg,var(--color-accent-blue),var(--color-accent-purple));border:none;transition:all var(--transition-normal) ease;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity var(--transition-fast)}.btn-primary:hover:before{opacity:1}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #3b82f666}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 10px #3b82f64d}.btn-ghost{background:#ffffff08;border:1px solid rgba(255,255,255,.1);transition:all var(--transition-normal) ease}.btn-ghost:hover{background:#ffffff14;border-color:#fff3}.toggle-wrapper{position:relative}.toggle-track{width:40px;height:20px;border-radius:10px;background:#334155;transition:background var(--transition-normal) ease;cursor:pointer}.toggle-track.active{background:linear-gradient(135deg,var(--color-accent-blue),var(--color-accent-purple))}.toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0003;transition:transform var(--transition-normal) cubic-bezier(.68,-.55,.27,1.55)}.toggle-track.active .toggle-thumb{transform:translate(20px)}.hud-panel{background:var(--glass-bg);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-radius:16px;border:1px solid rgba(59,130,246,.2);box-shadow:var(--shadow-soft),0 0 60px #3b82f61a,inset 0 1px #ffffff0d;position:relative;overflow:hidden}.hud-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.5),transparent)}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #3b82f64d}50%{box-shadow:0 0 40px #3b82f680,0 0 60px #3b82f633}}@keyframes border-flow{0%{background-position:0% 50%}to{background-position:200% 50%}}.animate-glow{animation:pulse-glow 2s ease-in-out infinite}@keyframes milestone-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.milestone-active{animation:milestone-pulse 1s ease-in-out infinite;box-shadow:0 0 30px #facc1566!important;border-color:#facc1580!important}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.floating{animation:float 3s ease-in-out infinite}.stat-value{font-variant-numeric:tabular-nums;transition:color var(--transition-fast)}.section-dot{width:6px;height:6px;border-radius:50%;box-shadow:0 0 8px currentColor}.toolbar-btn{width:44px;height:44px;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#94a3b8;transition:all var(--transition-normal) ease;cursor:pointer}.toolbar-btn:hover{color:#fff;background:#3b82f626;border-color:#3b82f64d;box-shadow:0 0 20px #3b82f633}.tip-card{background:linear-gradient(135deg,#f9731614,#f59e0b0d);border:1px solid rgba(249,115,22,.15);border-radius:12px;padding:12px 16px}.kbd{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;font-size:10px;font-weight:600;color:#64748b}.view-btn{padding:10px;font-size:10px;font-weight:700;border-radius:8px;border:1px solid #334155;background:#1e293b99;color:#94a3b8;transition:all var(--transition-normal) ease;cursor:pointer}.view-btn:hover{border-color:#475569;color:#e2e8f0}.view-btn.active{background:linear-gradient(135deg,var(--color-accent-blue),var(--color-accent-purple));border-color:var(--color-accent-blue);color:#fff;box-shadow:0 4px 15px #3b82f64d}.status-bar{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:9999px}@media(max-width:768px){.glass-panel{backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}}