.snake-demo{outline:none;max-width:1320px;margin:auto;padding:30px 5% 60px}.snake-header{color:#a9bfd0;justify-content:space-between;gap:20px;font-size:.8rem;display:flex}.snake-header a{color:#08b5ef}.snake-title{justify-content:space-between;align-items:center;margin:48px 0 32px;display:flex}.snake-title h1{letter-spacing:-.055em;margin:15px 0;font-size:clamp(2.8rem,6vw,5.4rem);font-weight:700;line-height:1.02}.snake-title em{color:#08b5ef;font-style:normal}.snake-title p{font-size:1rem}.snake-badge{color:#08b5ef;border:1px solid #24445b;padding:20px;font-family:monospace;font-size:.75rem}.snake-badge strong{font-size:3rem;display:block}.snake-layout{border:1px solid #24445b;border-radius:16px;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);display:grid;overflow:hidden}.snake-stage{perspective:1100px;background:radial-gradient(#16384a,#031321 70%);justify-content:center;align-items:center;min-height:610px;display:flex;position:relative;overflow:hidden}.snake-grid{opacity:.3;background-image:linear-gradient(#30546944 1px,#0000 1px),linear-gradient(90deg,#30546944 1px,#0000 1px);background-size:38px 38px;position:absolute;inset:0;transform:rotateX(55deg)scale(1.5)}.snake-device{width:320px;height:422px;transform-style:preserve-3d;transition:transform .22s;position:relative}.snake-device-back{background:#062d28;border:8px solid #183d34;border-radius:18px;position:absolute;inset:0;transform:translateZ(-22px);box-shadow:18px 40px 45px #0009}.snake-board{transform-style:preserve-3d;background:linear-gradient(120deg,#126659,#084236 65%);border:3px solid #3b8e77;border-radius:16px;padding:30px;position:absolute;inset:0;transform:translateZ(0);box-shadow:0 5px #052e28,0 10px #052e28,0 16px #052e28,0 22px #052e28}.board-label{letter-spacing:1px;color:#bfd1aa;font:8px monospace;display:block;position:absolute;top:12px;left:30px}.snake-lcd{background:#111;border:8px solid #121b20;border-radius:6px;width:256px;height:256px;margin-top:4px;position:relative;transform:translateZ(10px);box-shadow:0 5px #000,0 0 0 2px #526565}.snake-lcd canvas{width:240px;height:240px;image-rendering:pixelated;display:block}.snake-overlay{text-align:center;background:#000c;flex-direction:column;justify-content:center;align-items:center;gap:14px;font-family:monospace;display:flex;position:absolute;inset:0}.snake-overlay strong{color:#08b5ef}.snake-overlay span{font-size:10px}.board-components{align-items:center;gap:16px;margin-top:28px;display:flex}.rp-chip,.imu-chip{color:#d6e2db;background:#172027;border:3px dashed #9eada2;padding:13px 8px;font:11px monospace;transform:translateZ(6px);box-shadow:0 4px #001510}.imu-chip{padding:6px;font-size:9px}.board-traces{border-top:2px solid #65a478;border-bottom:2px solid #65a478;flex:1;height:23px}.power-led{background:#72ff9b;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #4f8}.board-bottom{color:#b6d4ad;letter-spacing:2px;margin-top:15px;font:8px monospace;display:block}.board-screw{background:#072c24;border:3px solid #cfb26e;border-radius:50%;width:10px;height:10px;position:absolute}.screw-0{top:8px;left:8px}.screw-1{top:8px;right:8px}.screw-2{bottom:8px;left:8px}.screw-3{bottom:8px;right:8px}.stage-caption{text-align:center;color:#9bb4c8;font:10px monospace;position:absolute;bottom:20px}.snake-controls{background:#071d30;padding:30px}.snake-score{align-items:center;gap:15px;font-family:monospace;display:flex}.snake-score>span:first-child{color:#a9bfd0;font-size:.8rem}.snake-score strong{color:#08b5ef;font-size:2.6rem}.snake-score>span:last-child{margin-left:auto;font-size:.75rem}.snake-actions{gap:10px;margin:20px 0 30px;display:flex}.snake-controls h2{margin-bottom:10px;font-size:1.5rem}.snake-controls p{font-size:.875rem}.snake-dpad{grid-template-columns:repeat(3,52px);grid-template-areas:".up.""left down right";justify-content:center;gap:8px;margin:24px 0;display:grid}.snake-dpad button{touch-action:manipulation;height:46px;font-size:22px}.view-controls{border-top:1px solid #24445b;padding-top:18px;font-size:.85rem}.view-controls summary{cursor:pointer}.view-controls label{color:#a9bfd0;gap:8px;margin:15px 0;display:grid}.view-controls input{accent-color:#08b5ef;width:100%}.snake-explainer{grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;display:grid}.snake-explainer span{color:#08b5ef;letter-spacing:.08em;font:11px monospace}.snake-explainer h2{margin:14px 0;font-size:1.4rem}.snake-explainer p{font-size:.9rem}@media (max-width:780px){.snake-layout{grid-template-columns:1fr}.snake-stage{min-height:520px}.snake-title{margin-top:30px}.snake-badge,.snake-header span{display:none}.snake-controls{padding:24px}.snake-explainer{grid-template-columns:1fr;gap:24px}.snake-device{scale:.88}}@media (prefers-reduced-motion:reduce){.snake-device{transition:none}}@media (max-width:780px){.snake-stage{min-height:390px}.snake-device{scale:.78}.stage-caption{font-size:9px;bottom:10px}.snake-controls{grid-template-columns:1fr auto;align-items:center;gap:8px 14px;padding:16px;display:grid}.snake-score{flex-wrap:wrap;grid-column:1;gap:8px;font-size:.7rem}.snake-score strong{font-size:1.8rem}.snake-score>span:last-child{width:100%;margin:0}.snake-actions{flex-wrap:wrap;grid-area:2/1;margin:0}.snake-dpad{grid-area:1/2/3;grid-template-columns:repeat(3,44px);gap:5px;margin:0}.snake-dpad button{height:44px}.snake-controls h2{display:none}.snake-controls p{grid-column:1/-1;margin:8px 0;font-size:.75rem}.view-controls{grid-column:1/-1;padding-top:10px}}.snake-device{flex-shrink:0;width:400px;height:560px}.breadboard-wiring{filter:drop-shadow(0 12px #88918b)drop-shadow(12px 24px 15px #0008);width:400px;height:560px;position:absolute;inset:0}.snake-board{background:#8e252b;border:2px solid #b94443;border-radius:6px;width:272px;height:282px;padding:8px;inset:14px auto auto 64px;transform:translateZ(12px);box-shadow:0 6px #41191c}.snake-lcd{border-width:6px;width:252px;height:252px;margin:0}.snake-stage{min-height:700px}.wiring-guide{background:#071d30;border:1px solid #24445b;border-radius:16px;margin-top:40px;padding:28px}.wiring-guide h2{margin:12px 0;font-size:1.6rem}.wiring-guide p{color:#a9bfd0;font-size:.85rem}.wiring-tables{grid-template-columns:1fr 1fr;gap:32px;display:grid}.wiring-tables h3{margin:18px 0;font-size:1rem}.wiring-tables table{border-collapse:collapse;width:100%;font:13px monospace}.wiring-tables td{border-bottom:1px solid #24445b;padding:9px 5px}.wiring-tables i{border-radius:50%;width:9px;height:9px;margin-right:10px;display:inline-block}.wiring-tables a{color:#08b5ef;font-size:.8rem}@media (max-width:780px){.snake-device{scale:.76}.snake-stage{min-height:475px}.wiring-tables{grid-template-columns:1fr;gap:12px}.wiring-guide{padding:20px}}@media (max-width:400px){.snake-device{scale:.67}.snake-stage{min-height:420px}}.snake-board{height:280px;top:4px}.snake-device{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.snake-device.is-dragging{cursor:grabbing;transition:none}.breadboard-wiring text{pointer-events:none}.direction-indicator{color:#b5c8d6;-webkit-user-select:none;user-select:none;background:#091d2b;border:1px solid #638194;border-radius:6px;justify-content:center;align-items:center;height:46px;font-size:22px;transition:background .1s,color .1s,box-shadow .1s;display:flex}.direction-indicator.active{color:#001321;background:#08b5ef;border-color:#72deff;box-shadow:0 0 18px #08b5ef66}@media (max-width:780px){.direction-indicator{height:44px}}