@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap');
:root{--night:#09182d;--panel:#102746;--panel-light:#17375e;--cyan:#4ee4d1;--blue:#55a6ff;--purple:#a783ff;--yellow:#ffd75e;--white:#f5fbff;--muted:#a8bdd3;--danger:#ff7086}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;margin:0;color:var(--white);background:linear-gradient(rgba(78,228,209,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(78,228,209,.035) 1px,transparent 1px),radial-gradient(circle at 80% 5%,#183f70,transparent 34rem),var(--night);background-size:32px 32px,32px 32px,auto,auto;font-family:'DM Sans',sans-serif}button,a{font:inherit}.code-bar,.code-shell,footer{width:min(1160px,calc(100% - 40px));margin:auto}.code-bar{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14)}.code-brand{color:white;text-decoration:none;font:700 23px 'Space Grotesk',sans-serif;letter-spacing:-.5px}.code-brand span{margin-right:8px;color:var(--cyan)}.back-link{padding:10px 14px;color:white;border:1px solid rgba(255,255,255,.18);text-decoration:none;font-size:13px}
.code-hero{min-height:540px;padding:85px 0 70px;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:70px}.code-kicker{margin:0 0 12px;color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:2.3px}.code-hero h1{margin:0;font:700 clamp(54px,7vw,88px)/.93 'Space Grotesk',sans-serif;letter-spacing:-4px}.code-hero h1 em{color:var(--yellow);font-style:normal}.code-hero>div>p:not(.code-kicker){max-width:650px;color:var(--muted);line-height:1.72}.code-hero .level-selector{margin-top:20px}.hero-code{position:relative;min-height:240px;padding:38px 30px;display:grid;grid-template-columns:35px 1fr;align-content:center;gap:19px 12px;color:var(--muted);background:rgba(7,21,40,.75);border:1px solid rgba(78,228,209,.27);box-shadow:18px 18px 0 rgba(78,228,209,.07),0 30px 80px rgba(0,0,0,.3)}.hero-code span{color:#56708c;font:600 12px 'Space Grotesk'}.hero-code code{color:var(--white);font:600 17px 'Space Grotesk'}.hero-code code:nth-of-type(2){color:var(--purple)}.hero-code code:nth-of-type(3){color:var(--cyan)}.code-cursor{width:10px;height:20px;margin-left:47px;background:var(--yellow);animation:blink 1s steps(1) infinite}
.lab-card{margin-bottom:70px;overflow:hidden;color:var(--night);background:#f8fbff;box-shadow:0 30px 90px rgba(0,0,0,.32)}.lab-hud{display:grid;grid-template-columns:repeat(3,1fr);color:white;background:var(--panel)}.lab-hud div{min-height:76px;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;border-right:1px solid rgba(255,255,255,.1)}.lab-hud span{color:var(--muted);font-size:11px;letter-spacing:1.3px;text-transform:uppercase}.lab-hud strong{color:var(--yellow)}.code-stage{min-height:400px;padding:48px}.intro-stage,.finish-stage{display:grid;place-items:center;align-content:center;text-align:center}.code-stage[hidden]{display:none}.intro-stage h2,.finish-stage h2{max-width:720px;margin:7px 0 14px;font:700 clamp(36px,5vw,58px)/1.05 'Space Grotesk'}.intro-stage>p:not(.code-kicker),.finish-stage>p:not(.code-kicker){max-width:650px;margin:0 0 28px;color:#5c6f83;line-height:1.65}.code-button{min-height:50px;padding:0 23px;border:0;color:var(--night);background:var(--cyan);box-shadow:5px 5px 0 var(--blue);cursor:pointer;font-weight:700}.code-button:hover{filter:brightness(1.04);transform:translateY(-2px)}
.game-stage{display:grid;grid-template-columns:300px 1fr;gap:35px}.mission-panel{padding-right:30px;border-right:1px solid #dbe6f1}.difficulty-badge{display:inline-flex;margin-bottom:16px;padding:7px 10px;color:#5c3fa6;background:#eee9ff;border:1px solid #d1c5f5;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}.mission-panel h2{margin:8px 0 13px;font:700 34px/1.05 'Space Grotesk'}.mission-panel>p{color:#5c6f83;line-height:1.6}.concept-box{margin-top:25px;padding:18px;color:#24405e;background:#e9f7f6;border-left:4px solid #21aa9a}.concept-box strong{display:block;margin-bottom:7px;color:#167a70}.concept-box p{margin:0;font-size:14px;line-height:1.5}.block-limit{font-size:13px}.robot-workspace{min-width:0}.robot-grid{width:min(100%,470px);aspect-ratio:1;margin:0 auto 20px;display:grid;grid-template-columns:repeat(5,1fr);background:#d8e8f3;border:8px solid var(--panel);box-shadow:8px 8px 0 #ccdce8}.grid-cell{position:relative;display:grid;place-items:center;background:#edf6fb;border:1px solid #c7dbe8}.grid-cell:nth-child(even){background:#e5f1f8}.grid-wall::after{content:'';width:62%;height:62%;border-radius:4px;background:repeating-linear-gradient(135deg,#48627b 0 7px,#3a526a 8px 14px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}.grid-goal::before{content:'★';color:#e3a500;font-size:clamp(23px,4vw,38px);filter:drop-shadow(0 2px 0 white)}.grid-robot::after{content:'▲';position:absolute;z-index:2;display:grid;width:58%;aspect-ratio:1;place-items:center;color:white;background:#7355db;border:3px solid white;border-radius:12px;box-shadow:0 4px 0 #48369b;transform:rotate(var(--robot-turn));transition:transform .25s}.grid-crash::after{background:var(--danger);box-shadow:0 4px 0 #a9354a}
.programmer{overflow:hidden;margin-top:24px;color:white;background:var(--night);border-radius:8px}.program-head{min-height:40px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);background:var(--panel);font:600 12px 'Space Grotesk'}.window-dot{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;background:var(--danger)}.window-dot:nth-child(2){background:var(--yellow)}.window-dot:nth-child(3){background:var(--cyan)}.program-blocks{min-height:65px;padding:14px;display:flex;flex-wrap:wrap;gap:8px}.program-block{padding:9px 12px;color:white;background:#285684;border:1px solid #4b7cab;border-radius:4px;cursor:pointer;font:600 13px 'Space Grotesk'}.program-block::before{content:attr(data-line);margin-right:8px;color:#8da9c4}.program-block:hover{background:#aa3e58}.empty-program{margin:-50px 14px 0;padding-bottom:20px;color:#6f89a4;font:13px 'Space Grotesk'}.empty-program[hidden]{display:none}.command-palette{margin:14px 0;display:flex;flex-wrap:wrap;gap:8px}.command-button{min-height:43px;padding:0 13px;color:#19344f;background:#e6f1fa;border:1px solid #b9d0e2;border-bottom:3px solid #9ebbd1;border-radius:4px;cursor:pointer;font-weight:700}.command-button:hover{border-color:var(--blue);background:white;transform:translateY(-1px)}.command-button.loop{color:#60479e;background:#eee9ff;border-color:#c4b7ef}.command-button.condition{color:#966415;background:#fff4ce;border-color:#e5c86d}.command-button.function{color:#14786e;background:#e4f8f5;border-color:#83d8cf}
.code-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.quiet-button{min-height:42px;padding:0 13px;color:#4c6278;background:white;border:1px solid #cbd9e5;cursor:pointer}.run-button{margin-left:auto}.code-feedback{min-height:50px;margin:16px 0 0;padding:13px 15px;color:#486078;background:#edf4fa;line-height:1.5}.code-feedback.good{color:#146c5e;background:#ddf5ef}.code-feedback.bad{color:#983d4f;background:#ffe5ea}.finish-robot{width:90px;height:90px;margin-bottom:18px;display:grid;place-items:center;color:white;background:var(--purple);border:6px solid #e8e0ff;border-radius:25px;font-size:38px;box-shadow:8px 8px 0 #cfc2f5}.learning-strip{margin:0 0 90px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.13)}.learning-strip div{min-height:180px;padding:25px;border-right:1px solid rgba(255,255,255,.13)}.learning-strip span{display:grid;width:30px;height:30px;margin-bottom:18px;place-items:center;color:var(--night);background:var(--cyan);border-radius:50%;font-weight:700}.learning-strip strong{font:700 19px 'Space Grotesk'}.learning-strip p{color:var(--muted);font-size:14px;line-height:1.5}footer{padding:26px 0;display:flex;justify-content:space-between;color:var(--muted);font-size:12px;border-top:1px solid rgba(255,255,255,.1)}
@keyframes blink{50%{opacity:0}}@media(max-width:820px){.code-hero{grid-template-columns:1fr;gap:30px}.hero-code{display:none}.game-stage{grid-template-columns:1fr;padding:30px}.mission-panel{padding:0 0 20px;border:0;border-bottom:1px solid #dbe6f1}.learning-strip{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.code-bar,.code-shell,footer{width:min(100% - 24px,1160px)}.code-brand{font-size:18px}.code-hero{min-height:470px;padding:55px 0}.code-hero h1{letter-spacing:-2px}.lab-hud div{padding:12px 8px;flex-direction:column;gap:5px;text-align:center}.code-stage,.game-stage{padding:24px 16px}.robot-grid{border-width:5px}.run-button{width:100%;margin:5px 0 0}.learning-strip{grid-template-columns:1fr}.learning-strip div{min-height:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}footer{flex-direction:column;gap:7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.code-cursor{animation:none}.grid-robot::after{transition:none}}