@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--bg-dark: #01080E;--bg-panel: #011627;--border-color: #1E2D3D;--text-main: #607B96;--text-white: #FFFFFF;--accent-blue: #4D5BCE;--accent-green: #43D9AD;--accent-orange: #FEA55F;--accent-purple: #5565E8;font-family:Fira Code,Consolas,monospace;line-height:1.6;font-weight:400;color:var(--text-main);background-color:var(--bg-dark)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:var(--bg-dark)}#root{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;padding:30px}.app{display:flex;flex-direction:column;width:100%;max-width:1780px;height:100%;background-color:#011627;border:1px solid #1E2D3D;border-radius:8px;overflow:hidden;position:relative}.site-header{height:56px;border-bottom:1px solid #1E2D3D;background-color:#011627;z-index:100}.header-inner{display:flex;height:100%;width:100%}.nav-left{width:10dvw;padding:0 24px;border-right:1px solid #1E2D3D;display:flex;align-items:center;color:#607b96}.nav{display:flex;flex:1}.nav-link{height:100%;display:flex;align-items:center;padding:0 24px;border-right:1px solid #1E2D3D;color:#607b96;text-decoration:none;position:relative;transition:all .2s ease;font-size:14px}.nav-link:hover{background-color:#ffffff0d;color:#fff}.nav-link.active{color:#fff}.nav-link.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#fea55f}.nav-right{height:100%;padding:0 24px;border-left:1px solid #1E2D3D;display:flex;align-items:center;color:#607b96;text-decoration:none;position:relative;transition:all .2s ease;font-size:14px}.nav-right:hover{background-color:#ffffff0d;color:#fff}.nav-right.active{color:#fff}.nav-right.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#fea55f}.site-footer{height:50px;border-top:1px solid #1E2D3D;background-color:#011627;z-index:100}.footer-inner{display:flex;justify-content:space-between;height:100%}.footer-left{display:flex;align-items:center}.footer-label{padding:0 24px;border-right:1px solid #1E2D3D;height:100%;display:flex;align-items:center;color:#607b96}.footer-icons{display:flex;height:100%}.footer-icon{width:50px;height:100%;border-right:1px solid #1E2D3D;display:flex;align-items:center;justify-content:center;color:#607b96;cursor:pointer}.footer-icon:hover{color:#fff}.footer-icon svg{width:24px;height:24px}.footer-github-link{display:flex;align-items:center;color:inherit;text-decoration:none;transition:color .2s ease;height:100%}.footer-github-link:hover{color:#fff}.footer-right{padding:0 24px;border-left:1px solid #1E2D3D;display:flex;align-items:center;color:#607b96}.page{flex:1;width:100%;height:100%;position:relative;overflow:hidden;background:#011627}.hero{display:flex;height:100%;width:100%;align-items:center;padding:10dvw;position:relative;overflow:hidden}.blob{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(100px);z-index:0;opacity:.35;pointer-events:none;transition:transform .15s ease-out}.blob-purple{background:radial-gradient(circle,#4D5BCE,transparent);animation:morph-blob 20s infinite linear}.blob-green{background:radial-gradient(circle,#43D9AD,transparent);animation:morph-blob 22s infinite linear}@keyframes morph-blob{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}33%{border-radius:30% 60% 70% 40%/50% 60% 30%}66%{border-radius:50% 50% 20% 80%/25% 80% 20% 75%}to{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}}.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;width:100%;gap:0px;z-index:1}.hero-copy{display:flex;flex-direction:column;z-index:2}.hero-intro{font-size:18px;color:#e5e9f0;margin-bottom:8px}.hero-title{font-size:62px;font-weight:400;color:#e5e9f0;line-height:normal;margin-bottom:8px}.hero-role{font-size:32px;color:#4d5bce;margin-bottom:80px}.hero-code{font-size:16px;color:#607b96;line-height:1.6}.hero-code-link{color:#4d5bce;font-size:14px}.hero-code-str{color:#fea55f;text-decoration:underline;cursor:pointer}.game-panel-container{display:flex;flex-direction:column;align-items:flex-end;gap:20px}.game-panel{position:relative;width:510px;height:475px;background:#01162766;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:30px;display:flex;flex-direction:column;box-shadow:0 4px 64px #00000080,inset 0 0 20px #ffffff0d;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);z-index:2}.screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#43d9ad99,#114944cc);border:1px solid rgba(67,217,173,.3);box-shadow:0 0 8px #43d9ad33,inset -1px -1px 2px #00000080;display:flex;align-items:center;justify-content:center;opacity:.9}.screw-x{color:#011627cc;font-size:8px;font-weight:700}.screw.top-left{top:12px;left:12px}.screw.top-right{top:12px;right:12px}.screw.bottom-left{bottom:12px;left:12px}.screw.bottom-right{bottom:12px;right:12px}.game-shell{display:flex;gap:20px;height:100%}.game-board{width:260px;height:420px;padding:10px;background-color:#011627d9;border-radius:8px;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #0009;border:1px solid rgba(0,0,0,.3)}.game-side{flex:1;display:flex;flex-direction:column;color:#fff;font-size:14px}.game-help{background-color:#0114234d;padding:12px;border-radius:8px;font-size:12px;line-height:1.4;margin-bottom:20px;border:1px solid rgba(30,45,61,.5)}.error-page{display:flex;height:100%;width:100%;align-items:center;justify-content:center;gap:80px;padding:0 50px}.error-graphic{font-family:"Press Start 2P",system-ui;font-size:80px;font-weight:400;color:#8ba1b4;position:relative;line-height:1;-webkit-user-select:none;user-select:none;letter-spacing:10px;text-shadow:3px 3px 0px #011627,4px 4px 0px #8BA1B4,7px 7px 0px #011627,8px 8px 0px #8BA1B4,11px 11px 0px #011627,12px 12px 0px #8BA1B4}.error-graphic:before{display:none}.code-editor{display:flex;gap:24px;font-size:16px;line-height:1.6;font-family:Fira Code,monospace;background:#01162780;padding:40px;border-radius:8px}.line-numbers{display:flex;flex-direction:column;color:#607b96;text-align:right;-webkit-user-select:none;user-select:none}.code-content{color:#e5e9f0}.code-keyword{color:#c982f7}.code-function{color:#4d5bce}.code-string{color:#fea55f}.code-comment{color:#607b96;font-style:italic}.code-variable{color:#43d9ad}@media(max-width:900px){.error-page{flex-direction:column;gap:40px;padding:40px 20px;overflow-y:auto}.error-graphic{font-size:100px}.code-editor{padding:20px;font-size:14px}}.game-controls{display:flex;flex-direction:column;align-items:center;gap:4px}.key-row{display:flex;gap:4px}.key{width:32px;height:22px;background:#010c15;border:1px solid #1E2D3D;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}.key.active{background:#fea55f;color:#01080e}.game-food{padding:0 5px}.food-dots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:15px}.dot{width:10px;height:10px;border-radius:50%;background-color:#43d9ad;opacity:.15}.dot.active{opacity:1;box-shadow:0 0 10px #43d9ad,0 0 20px #43d9ad80}.game-button{background-color:#fea55f;color:#01080e;border-radius:8px;padding:10px 16px;font-size:14px;position:absolute;bottom:60px;left:50%;transform:translate(-50%);z-index:10;cursor:pointer;border:none;font-family:inherit;font-weight:500;transition:background .2s;display:flex;align-items:center;justify-content:center}.game-button:hover{background-color:#ffb87d}.game-skip{background:transparent;border:1px solid #FFFFFF;color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;cursor:pointer;align-self:flex-end;transition:background .2s}.game-skip:hover{background:#ffffff1a}.snake-head{width:10px;height:10px;background-color:#43d9ad;position:absolute;z-index:5;box-shadow:0 0 15px #43d9ad}.snake-body{width:10px;height:10px;background-color:#43d9ad;position:absolute;box-shadow:0 0 8px #43d9ad80}.snake-food{width:10px;height:10px;background-color:#43d9ad;border-radius:50%;position:absolute;box-shadow:0 0 15px #43d9ad}.game-overlay{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);text-align:center;z-index:20;display:flex;flex-direction:column;align-items:center}.game-message-box{background:#011627;color:#43d9ad;font-size:24px;padding:15px 0;width:100%;border-top:1px solid #1E2D3D;border-bottom:1px solid #1E2D3D;margin-bottom:15px;text-transform:uppercase;letter-spacing:2px}.start-again-link{font-size:14px;color:#607b96;cursor:pointer;position:relative;display:inline-block;padding:5px 10px}.start-again-link:hover{color:#fff}.pointer-cursor,.pointer-cursor-small{position:absolute;top:50%;left:50%;width:24px;height:24px;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4L17 12L12 14L10 19L7 4Z' fill='white' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;pointer-events:none;z-index:100;transform:translate(20px,20px);opacity:0;animation:professionalTap 2.5s infinite}.game-board:after{content:"";position:absolute;inset:10px;border:1px dashed rgba(255,255,255,.1);pointer-events:none;border-radius:4px}.pointer-cursor:after,.pointer-cursor-small:after{content:"";position:absolute;top:0;left:0;width:24px;height:24px;border:2px solid white;border-radius:50%;opacity:0;transform:scale(0);animation:clickRipple 2.5s infinite}@keyframes professionalTap{0%{transform:translate(30px,30px);opacity:0}35%{transform:translate(-50%,5%);opacity:1}40%{transform:translate(-50%,5%) scale(.8)}45%{transform:translate(-50%,5%) scale(1)}85%{opacity:1;transform:translate(-50%,5%)}to{opacity:0;transform:translate(-50%,15px)}}@keyframes clickRipple{0%,39%{transform:scale(0);opacity:0}40%{transform:scale(.5);opacity:1}60%{transform:scale(2.5);opacity:0}to{transform:scale(2.5);opacity:0}}.fade-seq{animation:fadeIn .8s ease forwards;opacity:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.type-line{display:inline-block;overflow:hidden;white-space:nowrap;animation:typing .8s steps(50,end) forwards;opacity:0}@keyframes typing{0%{width:0;opacity:1}to{width:100%;opacity:1}}.line-number{opacity:0;animation:showLineNumber .1s forwards}@keyframes showLineNumber{to{opacity:1}}