:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#0a0a0f;--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--primary-color: #667eea;--secondary-color: #f093fb;--success-color: #4facfe;--danger-color: #fa709a;--warning-color: #fee140;--bg-dark: #0a0a0f;--bg-light: #1a1a2e;--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--shadow-sm: 0 2px 4px rgba(0,0,0,.1);--shadow-md: 0 4px 6px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px rgba(0,0,0,.1);--shadow-xl: 0 20px 25px rgba(0,0,0,.1);--shadow-2xl: 0 25px 50px rgba(0,0,0,.25);--glow-primary: 0 0 20px rgba(102, 126, 234, .5);--glow-secondary: 0 0 20px rgba(240, 147, 251, .5);--glow-success: 0 0 20px rgba(79, 172, 254, .5);--glow-danger: 0 0 20px rgba(250, 112, 154, .5);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:var(--bg-dark);background-image:radial-gradient(circle at 20% 80%,rgba(102,126,234,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(240,147,251,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(79,172,254,.05) 0%,transparent 50%);background-attachment:fixed}h1{font-size:3.2em;line-height:1.1;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-weight:700;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(102,126,234,.3)}button{border-radius:12px;border:1px solid rgba(255,255,255,.1);padding:.8em 1.6em;font-size:1em;font-weight:600;font-family:inherit;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-gradient);opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);z-index:-1}button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--glow-primary);border-color:var(--primary-color)}button:hover:before{opacity:.1}button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button:focus,button:focus-visible{outline:none;box-shadow:0 0 0 3px #667eea80}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff;--bg-dark: #ffffff;--bg-light: #f5f5f5;--text-primary: rgba(0, 0, 0, .9);--text-secondary: rgba(0, 0, 0, .7);--text-tertiary: rgba(0, 0, 0, .5)}body{background:#fff;background-image:radial-gradient(circle at 20% 80%,rgba(102,126,234,.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(240,147,251,.05) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(79,172,254,.02) 0%,transparent 50%)}a:hover{color:#747bff}button{background:#0000000d;color:var(--text-primary);border-color:#0000001a}h1{text-shadow:0 2px 10px rgba(102,126,234,.2)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes glow{0%,to{box-shadow:0 0 5px #667eea80}50%{box-shadow:0 0 20px #667eeacc}}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.logo{height:6em;padding:1.5em}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.qwik:hover{filter:drop-shadow(0 0 2em #673ab8aa)}.card{padding:2em}.read-the-docs{color:#888}.snake-game{display:flex;flex-direction:column;align-items:center;padding:40px 20px;font-family:system-ui,-apple-system,sans-serif;animation:fadeIn .6s ease-out}.game-info{text-align:center;margin-bottom:30px;animation:slideIn .8s ease-out}.game-info h1{margin:0 0 20px;font-size:2.5em;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(102,126,234,.3);animation:float 3s ease-in-out infinite}.game-info p{margin:8px 0;font-size:20px;color:var(--text-secondary);font-weight:500;transition:all .3s ease}.score{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-md)}.score-value{font-size:24px;font-weight:700;background:var(--success-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:transform .3s ease}.score-value.score-increase{animation:pulse .5s ease}.game-over{color:var(--danger-color)!important;font-weight:700;font-size:24px!important;animation:pulse 1s ease-in-out infinite;text-shadow:0 0 20px rgba(250,112,154,.5)}.game-controls{display:flex;gap:15px;margin-bottom:30px;flex-wrap:wrap;justify-content:center}.game-controls button{padding:12px 28px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#4facfee6,#00f2fee6);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #4facfe4d;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}.game-controls button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.game-controls button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #4facfe66,var(--glow-success)}.game-controls button:hover:before{width:300px;height:300px}.game-controls button:active{transform:translateY(-1px);box-shadow:0 2px 10px #4facfe4d}.game-controls button:disabled{opacity:.6;cursor:not-allowed;transform:none}.game-board{position:relative;background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(102,126,234,.3);border-radius:20px;box-shadow:0 0 40px #667eea33,0 10px 40px #0000004d,inset 0 0 20px #0003;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.game-board:before{content:"";position:absolute;inset:-2px;background:var(--primary-gradient);border-radius:20px;opacity:.5;z-index:-1;animation:glow 2s ease-in-out infinite}.game-board:hover{transform:scale(1.02);box-shadow:0 0 60px #667eea4d,0 15px 50px #0006}.snake-segment{position:absolute;background:linear-gradient(135deg,#4facfe,#00f2fe);border-radius:4px;box-sizing:border-box;box-shadow:0 0 10px #4facfe80;transition:all .15s ease-out;animation:snakeGlow 2s ease-in-out infinite}.snake-segment:after{content:"";position:absolute;inset:2px;background:#fff3;border-radius:2px}.snake-segment:first-child{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 0 15px #667eeab3;transform:scale(1.1)}.snake-segment:first-child:before{content:"";position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;top:25%;left:25%;box-shadow:0 0 4px #fff}.snake-segment:first-child:after{content:"";position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;top:25%;right:25%;box-shadow:0 0 4px #fff}@keyframes snakeGlow{0%,to{opacity:.9}50%{opacity:1}}.food{position:absolute;background:radial-gradient(circle,#ff006e,#8338ec);border-radius:50%;box-sizing:border-box;box-shadow:0 0 20px #ff006e99,0 0 40px #8338ec66,inset 0 0 10px #ffffff4d;animation:foodPulse 1s ease-in-out infinite,foodFloat 3s ease-in-out infinite}.food:before{content:"";position:absolute;top:20%;left:20%;width:30%;height:30%;background:#fff9;border-radius:50%;filter:blur(4px)}@keyframes foodPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes foodFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}.instructions{margin-top:30px;text-align:center;color:var(--text-tertiary);background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px 30px;border-radius:15px;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-md);max-width:500px}.instructions h3{margin:0 0 15px;color:var(--text-primary);font-size:18px;font-weight:600}.instructions p{margin:8px 0;font-size:14px;line-height:1.6}.instructions kbd{display:inline-block;padding:2px 8px;margin:0 2px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-family:monospace;font-size:12px;color:var(--text-primary);box-shadow:0 2px 4px #0003}@media (max-width: 768px){.snake-game{padding:20px 10px}.game-info h1{font-size:2em}.game-controls{gap:10px}.game-controls button{padding:10px 20px;font-size:14px}.instructions{padding:15px 20px;max-width:90%}}