:root{--cyber-cyan: #00FFFF;--cyber-magenta: #FF00FF;--cyber-purple: #9D00FF;--cyber-yellow: #FFFF00;--cyber-dark: #0a0a0f;--cyber-darker: #050507}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,monospace;background:var(--cyber-darker);color:var(--cyber-cyan);overflow:hidden;width:100vw;height:100vh;overscroll-behavior:none;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}#app{width:100%;height:100%;position:relative}#hand-canvas{opacity:.3;mix-blend-mode:screen}#ui-container{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;gap:20px;align-items:center}#mode-selector{display:flex;gap:15px}.mode-btn{padding:15px 30px;background:#00ffff1a;border:2px solid var(--cyber-cyan);color:var(--cyber-cyan);font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;box-shadow:0 0 10px var(--cyber-cyan);position:relative;overflow:hidden}.mode-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:var(--cyber-cyan);transform:translate(-50%,-50%);transition:width .3s,height .3s;z-index:-1}.mode-btn:hover:before{width:100%;height:100%}.mode-btn:hover{color:var(--cyber-dark);box-shadow:0 0 20px var(--cyber-cyan),0 0 40px var(--cyber-cyan)}.mode-btn.active{background:var(--cyber-cyan);color:var(--cyber-dark);box-shadow:0 0 30px var(--cyber-cyan);animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 30px var(--cyber-cyan)}50%{box-shadow:0 0 50px var(--cyber-cyan),0 0 80px var(--cyber-cyan)}}#status-display{padding:10px 20px;background:#9d00ff33;border:1px solid var(--cyber-purple);border-radius:5px;font-size:14px;text-align:center;min-width:200px}#app-name{position:fixed;top:20px;left:20px;z-index:100;margin:0;font-size:32px;font-weight:700;letter-spacing:4px;color:var(--cyber-cyan);text-shadow:0 0 10px var(--cyber-cyan),0 0 20px var(--cyber-cyan),0 0 30px var(--cyber-cyan),0 0 40px var(--cyber-magenta);animation:glow 2s ease-in-out infinite alternate;user-select:none;pointer-events:none}@keyframes glow{0%{text-shadow:0 0 10px var(--cyber-cyan),0 0 20px var(--cyber-cyan),0 0 30px var(--cyber-cyan),0 0 40px var(--cyber-magenta)}to{text-shadow:0 0 20px var(--cyber-cyan),0 0 30px var(--cyber-cyan),0 0 40px var(--cyber-cyan),0 0 50px var(--cyber-magenta),0 0 60px var(--cyber-magenta)}}#github-link{position:fixed;top:20px;right:20px;z-index:100;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#00ffff1a;border:2px solid var(--cyber-cyan);border-radius:50%;color:var(--cyber-cyan);transition:all .3s ease;box-shadow:0 0 10px var(--cyber-cyan);text-decoration:none}#github-link:hover{background:var(--cyber-cyan);color:var(--cyber-dark);box-shadow:0 0 20px var(--cyber-cyan),0 0 40px var(--cyber-cyan);transform:scale(1.1) rotate(360deg)}#github-link svg{width:24px;height:24px}@media (max-width: 768px){#ui-container{bottom:10px;gap:10px}#mode-selector{gap:8px}.mode-btn{padding:12px 20px;font-size:14px;letter-spacing:1px;min-height:44px;min-width:100px}#status-display{padding:8px 15px;font-size:12px;min-width:150px}#hand-canvas{opacity:.4}#app-name{top:10px;left:10px;font-size:20px;letter-spacing:2px}#github-link{top:10px;right:10px;width:40px;height:40px}#github-link svg{width:20px;height:20px}}@media (max-width: 480px){.mode-btn{padding:10px 15px;font-size:12px;letter-spacing:.5px;min-width:80px}#status-display{font-size:11px;min-width:120px}#app-name{font-size:16px;letter-spacing:1px}}@media (max-width: 768px) and (orientation: landscape){#ui-container{bottom:5px;gap:5px}#mode-selector{flex-direction:row;gap:5px}.mode-btn{padding:8px 12px;font-size:11px;min-height:36px;min-width:70px}#status-display{padding:5px 10px;font-size:10px}}