:root{--p:#5545a7;--pd:#372b79;--m:#83d6a6;--r:#ef438d;--y:#f2e94e;--ink:#23213a;--paper:#f4f3f1;--white:#fff;--line:#ddd9e8;--soft:#eeeafd;--shadow:0 18px 50px rgba(51,40,109,.12)}
*{box-sizing:border-box}html{min-width:320px;background:var(--paper)}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Trebuchet MS","Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
header{min-height:98px;padding:16px clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{position:relative;width:125px;height:68px;padding:10px 20px;border:5px solid var(--m);border-bottom-color:var(--r);background:transparent;color:var(--p);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;font-size:20px;font-weight:900;line-height:.9;letter-spacing:-1px}.logo:after{content:"&";position:absolute;right:-8px;top:15px;color:var(--r);font-size:31px;text-shadow:8px 8px var(--y)}.stats{display:flex;align-items:center;gap:10px}.stats>b{color:var(--p)}.stats span{padding:9px 12px;border:1px solid var(--line);border-radius:99px;background:var(--white);color:var(--r)}.stats span b{color:var(--pd)}.progress{height:6px;background:#dedbe7}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--m),var(--y),var(--r));transition:.4s}
main{width:min(1440px,100%);margin:auto}.welcome{min-height:calc(100vh - 104px);padding:clamp(38px,7vw,100px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(35px,7vw,100px)}.eyebrow{margin:0 0 12px;color:var(--r);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.15em}h1,h2,p{margin-top:0}h1{margin-bottom:25px;color:var(--p);font-size:clamp(42px,6.4vw,86px);line-height:.96;letter-spacing:-.065em}.lead{max-width:620px;color:#514e62;font-size:clamp(18px,2vw,24px);line-height:1.55}form{margin-top:36px}label{display:block;margin-bottom:9px;color:var(--pd);font-weight:900}.name-row{display:flex;gap:10px}.name-row input{min-width:0;flex:1;padding:15px 17px;border:2px solid var(--line);border-radius:5px;background:var(--white);font-size:18px;outline:0}.name-row input:focus{border-color:var(--m);box-shadow:0 0 0 4px rgba(131,214,166,.24)}.primary{border:0;border-radius:5px;padding:14px 19px;background:var(--p);color:white;font-weight:900;box-shadow:6px 6px var(--y);transition:.18s}.primary:hover{transform:translate(2px,2px);box-shadow:4px 4px var(--y)}.error{min-height:22px;margin:8px 0;color:#bd285d}.link{border:0;border-bottom:2px solid var(--p);padding:5px 0;background:transparent;color:var(--p);font-weight:900}
.hero-art{text-align:center;color:var(--p);font-weight:900}.art{width:min(430px,82vw);aspect-ratio:1;position:relative;margin:auto;display:grid;place-items:center;overflow:hidden;border:13px solid var(--m);border-bottom-color:var(--r);background:var(--white)}.art i{position:absolute;width:82%;height:34%;border:8px solid var(--p);border-radius:50%;transform:rotate(18deg)}.art i:nth-child(2){width:74%;transform:rotate(78deg);border-color:var(--r)}.art i:nth-child(3){width:58%;height:58%;border-color:var(--y);animation:spin 9s linear infinite}.art b{z-index:2;width:115px;height:70px;border-radius:100% 0 100% 0;background:radial-gradient(circle,var(--r) 0 15px,var(--white) 16px 28px,var(--p) 29px);transform:rotate(-12deg)}.hero-art p{margin:20px 0}@keyframes spin{to{transform:rotate(360deg)}}
.quest{padding:28px clamp(14px,4vw,58px) 50px}.quest nav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 30px}.world{min-width:0;padding:11px 8px;border:0;border-top:4px solid var(--line);background:transparent;color:#777287;text-align:left;font-size:13px;font-weight:900}.world.active{border-color:var(--r);color:var(--p)}.world:not(:disabled):hover{background:var(--soft)}.world:disabled{opacity:.45;cursor:not-allowed}.title-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.title-row h1{max-width:900px;margin:0;font-size:clamp(34px,5vw,62px)}.outline,.next{padding:11px 15px;border:2px solid var(--p);border-radius:5px;background:transparent;color:var(--p);font-weight:900}.outline:hover{background:var(--soft)}.pink{border-color:var(--r);color:var(--r)}
.lesson-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:20px}.panel{position:relative;padding:clamp(20px,3vw,36px);border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow)}.task{border-top:8px solid var(--m)}.result{border-top:8px solid var(--r)}.number{position:absolute;right:22px;top:14px;color:#ebe8f5;font-size:68px;line-height:1}.panel h2{position:relative;color:var(--pd);font-size:26px}.task>p{position:relative;color:#565266;font-size:17px;line-height:1.6}.lesson{margin:20px 0;padding:14px 16px;border-left:5px solid var(--y);background:#fffde4;line-height:1.55}.lesson code{color:var(--pd);font-weight:900}.code-label{display:flex;justify-content:space-between;padding:0 3px 7px;color:#777287;font-size:12px;font-weight:900;letter-spacing:.1em}.code{min-height:180px;padding:20px;overflow-x:auto;border-radius:4px;background:#211d3b;color:#f5f4ff;font:16px/1.8 Consolas,monospace}.code-line{white-space:pre}.code input{width:88px;padding:4px 7px;border:2px solid var(--y);border-radius:4px;background:#fffbd1;color:#211d3b;font:inherit;outline:0}.code input.wide{width:155px}.kw{color:#ff78b4}.fn{color:var(--m)}.str{color:var(--y)}.num{color:#b6a9ff}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.feedback{min-height:50px;margin-top:16px;line-height:1.5}.feedback.good,.feedback.bad,.feedback.tip{padding:12px 14px}.feedback.good{border-left:5px solid var(--m);background:#e5f7ec;color:#24573a}.feedback.bad{border-left:5px solid var(--r);background:#fff0f5;color:#b52558}.feedback.tip{border-left:5px solid var(--y);background:#fffde4}.result-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.result-head b{color:#777287;font-size:13px}.canvas-wrap{min-height:390px;position:relative;display:grid;place-items:center;overflow:hidden;background:#f3f1ee}canvas{display:block;width:100%;height:auto;max-height:460px}.placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;color:#777287}.placeholder i{width:64px;height:64px;padding-left:5px;display:grid;place-items:center;border:3px solid var(--m);border-radius:50%;color:var(--p);font-style:normal}.placeholder p{margin:14px}.science{margin-top:16px;padding:13px 15px;background:var(--soft);color:var(--pd);line-height:1.5}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:22px;color:#777287}.next{border-color:var(--r);background:var(--r);color:white}.next:disabled,.outline:disabled{opacity:.35;cursor:not-allowed}
dialog{width:min(880px,calc(100% - 28px));padding:28px;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 90px rgba(31,24,70,.35)}dialog::backdrop{background:rgba(31,24,70,.62);backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2,.finish h2{color:var(--p);font-size:34px}.close{width:42px;height:42px;border:0;background:white;color:var(--p);font-size:30px}.map-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.map-level{min-height:88px;border:2px solid var(--line);background:white;color:var(--p);font-weight:900}.map-level small{display:block;margin-top:6px;color:#777287;font-weight:400}.map-level.done{border-color:var(--m);background:#e5f7ec}.map-level.current{border-color:var(--r);box-shadow:inset 0 -5px var(--r)}.map-level:disabled{opacity:.4}.finish{max-width:560px;text-align:center;border-top:10px solid var(--m)}.confetti{color:var(--r);font-size:30px;letter-spacing:14px}
@media(max-width:900px){.welcome,.lesson-grid{grid-template-columns:1fr}.hero-art{order:-1}.art{width:min(310px,72vw)}.quest nav{grid-template-columns:repeat(3,1fr)}.map-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){header{min-height:82px;padding:10px 14px}.logo{width:92px;height:54px;padding:8px;font-size:16px}.logo:after{font-size:24px}.stats>b{display:none}.stats{gap:4px}.stats span{padding:7px 8px;font-size:13px}.welcome{padding:30px 18px 60px}h1{font-size:44px}.name-row{flex-direction:column}.quest{padding-inline:12px}.quest nav{grid-template-columns:repeat(2,1fr)}.title-row{align-items:start;flex-direction:column}.panel{padding:18px}.number{font-size:52px}.canvas-wrap{min-height:290px}footer{flex-wrap:wrap}footer span{order:-1;width:100%;text-align:center}.map-grid{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}