:root{--navy:#0d2d68;--blue:#1767db;--turquoise:#11c9d4;--yellow:#ffd447;--ink:#102d61;--muted:#567197;--line:#d5e5fb;--paper:#f4f9ff}
html{scroll-padding-top:102px}
body{color:var(--ink);background:radial-gradient(circle at 8% 12%,#e8f7ff 0,transparent 27%),radial-gradient(circle at 93% 22%,#edf3ff 0,transparent 31%),var(--paper)}
.site-nav{background:radial-gradient(circle at 9% 32%,#226aca88 0 2px,transparent 3px),radial-gradient(circle at 74% 26%,#23dbff99 0 3px,transparent 4px),linear-gradient(110deg,#0b2c67,#1252a7 57%,#092a62);box-shadow:0 8px 30px #0a358c25}
.site-nav__inner{max-width:1530px;min-height:88px;gap:18px}
.site-nav__brand{font-size:clamp(20px,2.2vw,29px);line-height:1.05;letter-spacing:-.04em;gap:13px}
.site-nav__brand small{display:block;margin-top:6px;color:#b9defe;font-size:12px;font-weight:600;letter-spacing:0}
.site-nav__mark{width:56px;height:56px;border:3px solid #fff;border-radius:19px;background:linear-gradient(150deg,#fff,#c9f2ff);box-shadow:0 5px 0 #54adf4,0 8px 18px #0a2c6388;font-size:30px;transform:rotate(-5deg)}
.site-nav__mark svg{width:40px;height:40px}
.site-nav__links{gap:5px}
.site-nav__links a{padding:11px 14px;border:1px solid #ffffff19;border-radius:18px;background:#ffffff10;font-size:14px;color:#f2f8ff}
.site-nav__links a:hover,.site-nav__links a:focus-visible{background:#ffffff32;transform:translateY(-2px)}
.site-nav__links a[aria-current="page"]{background:linear-gradient(135deg,#ddf5ff,#80bfff);color:#103b82;box-shadow:0 6px 15px #4dd4ff40}
.site-nav__progress{display:flex;align-items:center;gap:9px;min-width:160px;padding:9px 12px;border:1px solid #ffffff30;border-radius:17px;background:#ffffff12;color:#fff!important;font-size:19px}
.site-nav__progress span:last-child{display:grid;grid-template-columns:1fr auto;column-gap:6px;min-width:90px}
.site-nav__progress strong{font-size:12px;white-space:nowrap}
.site-nav__progress small{font-size:11px;color:#dcf2ff;white-space:nowrap}
.site-nav__progress i{grid-column:1/-1;display:block;height:6px;margin-top:5px;border-radius:20px;background:linear-gradient(90deg,#71e35c var(--progress),#ffffff33 var(--progress));}
.site-nav + header{background:linear-gradient(110deg,#0d3676,#1769ba 64%,#0c3d85);color:#fff}
.site-nav + header p{color:#d8ecff}
.page-editor > header{display:none}
.page-editor main{max-width:1510px;margin:0 auto;padding:26px 24px 70px}
.page-editor .intro{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:18px 24px;border:1px solid #cce8ff;border-left:6px solid var(--yellow);border-radius:18px;background:linear-gradient(100deg,#e3f4ff,#edf6ff 65%,#d6f3ff);box-shadow:0 8px 25px #14529d0b;font-size:16px}
.page-editor .intro strong{font-size:21px;white-space:nowrap;color:#0b3a85}
.hero-sticker{margin-left:auto;min-width:180px;text-align:center;color:#1765c9;font-weight:850;font-size:16px;transform:rotate(-5deg)}
.page-editor .guide{gap:16px;margin-bottom:20px}
.lesson-card{display:flex;align-items:center;gap:14px;min-height:94px;padding:16px 18px;border:1px solid #bbd9ff;border-radius:17px;background:#fff;color:#0e326c;text-decoration:none;box-shadow:0 8px 24px #113b7110;transition:transform .18s,box-shadow .18s}
.lesson-card:hover,.lesson-card:focus-visible{transform:translateY(-4px);box-shadow:0 13px 25px #14499b24;outline:2px solid #72baff}
.lesson-card:nth-child(1){background:linear-gradient(115deg,#fff8e8,#fff);border-color:#f1c96d}
.lesson-card:nth-child(2){background:linear-gradient(115deg,#eaf6ff,#fff)}
.lesson-card:nth-child(3){background:linear-gradient(115deg,#e9fff8,#fff);border-color:#8be5c5}
.lesson-card__icon{display:grid;place-items:center;flex:none;width:55px;height:55px;border-radius:15px;background:linear-gradient(140deg,#d9edff,#93d6ff);font-size:26px;box-shadow:inset 0 -4px #145da51a}
.lesson-card:nth-child(1) .lesson-card__icon{background:linear-gradient(140deg,#fff0c8,#ffd36b)}
.lesson-card:nth-child(3) .lesson-card__icon{background:linear-gradient(140deg,#c4fff3,#67eac0)}
.lesson-card strong,.lesson-card code{display:block}
.lesson-card strong{font-size:17px;margin-bottom:5px}
.lesson-card code{font:14px/1.35 Consolas,monospace;color:#1263d3}
.lesson-card__arrow{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #c8dcf8;border-radius:50%;background:#fff;color:#1559bb;font-weight:900}
.page-editor .grid{gap:18px;align-items:stretch}
.page-editor .card,.page-lessons .panel,.page-games .panel,.page-book section,.page-compare section{border:1px solid var(--line);border-radius:17px;box-shadow:0 9px 28px #11366d0d}
.page-editor .card h2{color:#123b83;background:linear-gradient(#fff,#fbfdff);font-size:20px}
.page-editor .editor-wrap{height:405px;border-color:#b9d5f7;background:#fff;box-shadow:inset 0 2px 10px #0b428509}
.page-editor .editor-wrap #highlight,.page-editor .editor-wrap #source{padding-left:58px}
#editor-lines{position:absolute;z-index:3;left:0;top:0;bottom:0;width:45px;overflow:hidden;padding:16px 5px;background:#eff6ff;border-right:1px solid #e0ebfa;color:#7291bc;text-align:center;font:15px/1.6 Consolas,monospace;pointer-events:none}
#editor-lines span{display:block;height:24px}
.page-editor #cpp{height:405px;min-height:405px;background:linear-gradient(145deg,#162a48,#0f1d34);color:#e9f7ff;border:1px solid #263e5e}
.cpp-keyword{color:#d882f1}.cpp-type{color:#83c7ff}.cpp-string{color:#cdf365}.cpp-number{color:#ffd47f}.cpp-comment{color:#889db9}
.page-editor .diagnostics{background:#e9f8f4;color:#107968}
.page-editor .diagnostics.bad{background:#fff0ee;color:#a32920}
.page-editor .diagnostics.warn{background:#fff5df;color:#805400}
.editor-tools,.cpp-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto}
.editor-tools button,.cpp-tools button{padding:7px 10px;border:1px solid #d9e6f7;border-radius:9px;background:#f7faff;color:#1856ab;font-size:12px}
.editor-tools button:hover,.cpp-tools button:hover{background:#e3f1ff}
.page-editor .card h2{display:flex;align-items:center;gap:8px;min-height:60px}
.page-editor .actions{align-items:center;gap:14px;margin:23px 0 0}
.page-editor #ready-status{display:inline-flex;align-items:center;min-height:45px;padding:8px 14px;border-radius:13px;background:#ffffffbd;color:#16467f;font-size:14px;font-weight:800}
.page-editor #run,.page-lessons #run{min-width:255px;min-height:68px;padding:14px 31px;border:4px solid #fff;border-radius:100px;background:linear-gradient(110deg,#129eea,#1254dc);color:#fff;box-shadow:0 0 0 3px #80e8ff,0 9px 24px #0aaee160;font-size:26px;font-weight:900;transition:transform .17s,box-shadow .17s}
.page-editor #run:hover,.page-lessons #run:hover{transform:translateY(-3px);box-shadow:0 0 0 3px #80e8ff,0 13px 28px #0aaee180}
.page-editor #run:focus-visible,.page-lessons #run:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}
.page-editor .secondary,.page-lessons .soft{background:#e7f2ff;color:#1556b1}
.page-editor .output{margin-top:22px}
.page-editor #robot-dock{z-index:1001}
.page-editor #robot-launch{width:85px;height:85px;border-radius:27px;background:linear-gradient(145deg,#2ed5e8,#0b5bd2);box-shadow:0 0 0 5px #c7f7ff,0 12px 30px #0b3d8b50}
.page-editor #robot-launch svg{width:56px;height:56px;animation:robotFloat 3.2s ease-in-out infinite}
.page-editor #robot-callout{top:13px;right:97px;width:186px;border-color:#c4ddff;border-radius:13px;color:#17427e;box-shadow:0 8px 22px #17459022}
@keyframes robotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.page-lessons .nav-panel,.page-lessons .right-column{top:105px}
.page-lessons .progress-track{background:#e8f0ff}.page-lessons #progress-bar{background:linear-gradient(90deg,#1db8df,#f4cd45)}
.page-lessons #lessons button{border:1px solid #e0eaf9;border-radius:10px}
.page-lessons #lessons button.active{border-color:#83c3fc;background:#eaf6ff;color:#104caa}
.page-lessons .task{background:#edf6ff;border-left-color:#16aadd}
.page-lessons #run{min-width:185px;min-height:54px;border-width:3px;font-size:16px}
.page-lessons #cpp-code{background:#102543}
.page-games .intro{background:linear-gradient(100deg,#e6f6ff,#fffbe8);border-left-color:#f3c644}
.page-games .game-card{border-color:#cfe2fa;color:#123b82}
.page-games .game-card[aria-pressed="true"]{border-color:#168fe3;background:#eaf7ff;box-shadow:0 0 0 3px #c9ecff}
.page-games .game-card .icon{background:#e1f3ff}
.page-games .guide{border-color:#f0da8d;background:#fff9e7}
.page-games .guide button,.page-games .primary{background:linear-gradient(110deg,#168edc,#1260d4)}
.page-games .panel h2{color:#113e84}
.page-games .panel{border-color:#d5e5fb}
.page-games .palette button{border-color:#b7d8fa;background:#e9f5ff;color:#1458a5}
.page-games .plan{border-color:#a7c8ed;background:#f9fcff}
.page-games .plan.drag-over{border-color:#168fe3;background:#e5f4ff}
.page-games .block{border-color:#d0e2f4;border-left-color:#24bacc}
.page-games .block input{border-color:#aacdec}
.page-games .secondary{background:#e5f2ff;color:#165ca9}
.page-games .quiet{background:#edf4fa;color:#235478}
.page-games .hud span{background:#e5f6ff;color:#124582}
.page-games .progress{background:#dceafa}
.page-games #goal-bar{background:linear-gradient(90deg,#11cbd6,#ffd447)}
.page-games .asset{border-color:#c8dcf4;background:#fafdff;color:#1b568c}
.page-games .asset.selected{border-color:#168fe3;background:#e4f5ff}
.page-games .slot{border-color:#9fc8ec;background:#f3faff}
.page-games .asset-upload{border-color:#9fc8ec;background:#f2f9ff}
.page-games .asset-upload label{background:#1767cf}
.page-games .code-box pre{background:#11294a}
.page-games .asset-filters button[aria-pressed="true"]{background:#1767d1;border-color:#1767d1}
.page-games #stage{border-color:#156cc4}
.page-book h2,.page-compare section h2{color:#174b99}
@media(max-width:1190px){.site-nav__inner{gap:10px}.site-nav__links a{padding:9px 10px;font-size:12px}.site-nav__progress{min-width:110px}}
@media(max-width:900px){.site-nav__brand small{display:none}.site-nav__progress{display:none}}
@media(max-width:760px){.site-nav__links.is-open+.site-nav__progress{display:flex;order:3;width:100%;margin:0 0 10px;justify-content:center}}
@media(max-width:760px){.site-nav__inner{min-height:62px}.site-nav__mark{width:42px;height:42px;border-radius:13px;font-size:23px}.site-nav__brand{font-size:19px}.site-nav__toggle{background:#ffffff20}.site-nav__links{background:#0e3a80;padding:8px 0 14px}.site-nav__links a{font-size:16px}.page-editor main{padding:16px 12px 50px}.page-editor .intro{display:block;font-size:14px}.page-editor .intro strong{display:block;font-size:19px}.hero-sticker{display:none}.page-editor .guide{grid-template-columns:1fr;gap:9px}.lesson-card{min-height:70px;padding:11px 13px}.lesson-card__icon{width:44px;height:44px;font-size:22px}.page-editor .grid{grid-template-columns:1fr}.page-editor #editor-lines{display:none}.page-editor .editor-wrap #highlight,.page-editor .editor-wrap #source{padding-left:16px}.page-editor #run{min-width:100%;font-size:23px}.page-editor .actions .secondary,.page-editor .actions .ghost{flex:1}.page-editor #robot-launch{width:62px;height:62px;border-radius:20px}.page-editor #robot-launch svg{width:40px;height:40px}.page-lessons .nav-panel,.page-lessons .right-column{top:auto}.page-lessons #run{min-width:0;width:100%}}
@media(prefers-reduced-motion:reduce){.page-editor #robot-launch svg{animation:none}.lesson-card,.site-nav__links a,.page-editor #run{transition:none}}
.page-games .custom-setup{margin:-3px 0 17px;padding:17px 19px;border:1px solid #9ecaff;border-left:5px solid #20cbd5;border-radius:16px;background:#effaff;box-shadow:0 8px 20px #123e7012}
.page-games .custom-setup[hidden]{display:none}
.page-games .custom-setup label{display:block;margin-bottom:7px;color:#123b80;font-weight:800}
.page-games .custom-setup input{width:min(100%,390px);padding:10px 12px;border:1px solid #9dbde9;border-radius:10px;background:#fff;color:#142d55}
.page-games .custom-setup p{margin:9px 0 0;color:#355782;font-size:14px}
.page-games .rule-helper{margin:11px 0 16px;padding:15px;border:1px solid #96c6ef;border-radius:14px;background:linear-gradient(125deg,#eff9ff,#f8fcff);color:#143c7d}
.page-games .rule-helper strong{font-size:16px}
.page-games .rule-helper p{margin:8px 0;line-height:1.45}
.page-games .rule-helper button{background:#1269cf;color:#fff}
.page-games .rule-helper button[hidden]{display:none}
.page-games .rule-help-example{font:13px/1.5 Consolas,monospace;color:#47648a}
.page-games .game-card:last-child{border-color:#50cdd2;background:linear-gradient(120deg,#e8fbff,#fffbea)}
@media(min-width:901px){.page-games .game-library{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.page-games .layout>div{order:initial}}
.site-nav__visitor{max-width:1380px;margin:18px auto 26px;padding:0 20px;color:#55749a;font:12px/1.5 system-ui,"Segoe UI",sans-serif;text-align:center}