:root{--bg:#0a0d14;--panel:#111722;--panel2:#171f2d;--ink:#f7f8fb;--muted:#9ba7b8;--line:#283143;--green:#86f6b8;--violet:#9d8cff;--orange:#ffb86b;--blue:#65c8ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font:15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button,textarea{font:inherit}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1220px)/2));border-bottom:1px solid var(--line);background:#0a0d14e8;backdrop-filter:blur(15px);position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.02em}.brand span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#07120d;background:var(--green);font-size:12px}.topbar nav{display:flex;align-items:center;gap:23px}.topbar nav a{color:var(--muted);font-weight:700}.topbar nav a.active,.topbar nav a:hover{color:#fff}.xp{padding:6px 11px;border:1px solid #4b5a42;border-radius:999px;color:var(--green);font-size:12px;font-weight:900}main{min-height:calc(100vh - 160px)}.hero,.choice,.tracks,.editor-head,.catalog-head{width:min(1220px,calc(100% - 40px));margin:auto}.hero{min-height:690px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:80px 0}.hero:before{content:"";position:absolute;z-index:-1;width:560px;height:560px;top:90px;left:-220px;border-radius:50%;background:#673cff28;filter:blur(50px)}.eyebrow{color:var(--green);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.hero h1,.catalog-head h1,.editor-head h1{margin:12px 0 20px;font-size:clamp(46px,6.2vw,86px);line-height:.98;letter-spacing:-.065em}.hero h1 em{color:var(--green);font-style:normal}.hero-copy>p{max-width:620px;color:var(--muted);font-size:19px}.hero-actions,.editor-actions{display:flex;gap:12px;margin:30px 0}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 19px;border:1px solid transparent;border-radius:11px;font-weight:850;cursor:pointer}.primary{color:#07120d;background:var(--green)}.ghost{color:#fff;border-color:var(--line);background:#121824}.trust{display:flex;flex-wrap:wrap;gap:18px;color:#93a0af;font-size:12px}.demo-window{overflow:hidden;border:1px solid #374258;border-radius:22px;background:#101622;box-shadow:0 35px 100px #000b;transform:rotate(1deg)}.window-bar{height:48px;display:flex;align-items:center;gap:7px;padding:0 15px;border-bottom:1px solid var(--line);background:#181f2c}.window-bar i{width:9px;height:9px;border-radius:50%;background:#566174}.window-bar i:first-child{background:#ff6b6b}.window-bar i:nth-child(2){background:#ffd166}.window-bar i:nth-child(3){background:var(--green)}.window-bar span{margin-left:8px;color:#7f8b9b;font:11px ui-monospace,monospace}.demo-grid{display:grid;grid-template-columns:1fr 1fr;min-height:365px}.demo-grid pre{margin:0;padding:25px;color:#d8e2ee;background:#0d121b;font:14px/1.9 ui-monospace,SFMono-Regular,monospace}.demo-grid small,.demo-result small{display:block;margin-bottom:20px;color:#6f7c8e;font:800 10px system-ui;letter-spacing:.12em}.demo-result{display:grid;place-items:center;align-content:center;padding:25px;text-align:center;background:radial-gradient(circle at center,#293053,#151b29 60%)}.planet{display:grid;place-items:center;width:145px;height:145px;margin:20px;border:1px solid #9d8cff66;border-radius:50%;background:#9d8cff22;box-shadow:0 0 70px #9d8cff30}.planet span{font-size:55px}.choice,.tracks{padding:90px 0}.choice h2,.tracks h2{max-width:780px;margin:10px 0 35px;font-size:clamp(34px,4vw,58px);line-height:1.05;letter-spacing:-.045em}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.choice-grid article,.track-grid article{position:relative;padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.choice-grid article.accent{background:linear-gradient(145deg,#18251f,#121a18)}.card-index{position:absolute;right:25px;color:#526070;font:800 13px ui-monospace}.icon-code{display:grid;place-items:center;width:53px;height:53px;border-radius:15px;color:#08120d;background:var(--green);font-weight:900}.choice-grid h3{font-size:28px}.choice-grid p,.choice-grid li,.track-grid p{color:var(--muted)}.choice-grid ul{padding-left:20px}.choice-grid a{display:inline-block;margin-top:15px;color:var(--green);font-weight:850}.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.track-grid b{color:var(--green);font:900 13px ui-monospace}.track-grid h3{font-size:22px}.track-grid span{color:#718096;font-size:12px}.editor-head{display:flex;align-items:end;justify-content:space-between;padding:48px 0 22px}.editor-head h1{font-size:54px}.editor-head p,.catalog-head p{color:var(--muted)}.workspace{height:calc(100vh - 250px);min-height:600px;display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line);background:#0d121b}.editors,.preview-pane{min-width:0}.editors{border-right:1px solid var(--line)}.editor-tabs{height:52px;display:flex;border-bottom:1px solid var(--line);background:#121823}.editor-tabs button,.preview-bar button{padding:0 18px;border:0;color:#8290a2;background:transparent;font-weight:800;cursor:pointer}.editor-tabs button.active{color:var(--green);box-shadow:inset 0 -2px var(--green)}.code-panel{display:none;height:calc(100% - 52px)}.code-panel.active{display:grid;grid-template-rows:auto 1fr}.code-panel span{padding:10px 18px;color:#6f7d8d;font-size:11px}.code-panel textarea,#missionCode{width:100%;height:100%;padding:18px;border:0;outline:0;resize:none;color:#dbe7f5;background:#0d121b;font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}.preview-pane{display:grid;grid-template-rows:52px 1fr 120px;background:#fff}.preview-bar{display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#dce4ef;background:#121823}.preview-bar button{height:34px;padding:0 10px}.preview-pane iframe{width:100%;height:100%;border:0;margin:auto;transition:width .2s}.preview-pane iframe.mobile{width:390px;box-shadow:0 0 30px #0003}.console{padding:11px 15px;border-top:1px solid #242d3b;color:#cbd5e1;background:#0a0e15;overflow:auto}.console strong{font-size:10px}.console pre{margin:6px 0;font:12px ui-monospace;color:#91a0b1}.catalog-head{padding:75px 0 30px}.catalog-head h1{max-width:850px;font-size:64px}.catalog-head>p{max-width:720px;font-size:18px}.progress-card{display:grid;grid-template-columns:260px 1fr;align-items:center;gap:30px;margin-top:35px;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.progress-card div:first-child{display:grid}.progress-card span{color:var(--muted);font-size:11px}.progress{height:8px;overflow:hidden;border-radius:99px;background:#293244}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .4s}.mission-grid{width:min(1220px,calc(100% - 40px));display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px auto 90px}.mission-card{position:relative;padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--panel);transition:.2s}.mission-card:hover{transform:translateY(-4px);border-color:#53647c}.mission-type{display:inline-flex;padding:5px 9px;border-radius:999px;font:900 10px ui-monospace}.mission-type.html{color:#ffae7a;background:#442a20}.mission-type.css{color:#9fd8ff;background:#17334a}.mission-type.js{color:#ffe981;background:#45401d}.mission-visual{display:grid;place-items:center;height:170px;margin:18px 0;border-radius:15px;background:radial-gradient(circle,#27354b,#171e2a);font-size:65px}.mission-card h2{line-height:1.2}.mission-card p{min-height:52px;color:var(--muted)}.mission-card>div:last-child{display:flex;justify-content:space-between;color:#8491a3;font-size:11px}.mission-card b{color:var(--green)}.done-mark{position:absolute;top:24px;right:24px;color:var(--green);font-size:11px;font-weight:900}.mission-card.complete{border-color:#3c7456}.mission-shell{min-height:calc(100vh - 72px);display:grid;grid-template-columns:380px 1fr}.brief{padding:42px;border-right:1px solid var(--line);background:#101621}.brief>a{display:block;margin-bottom:35px;color:var(--muted)}.brief h1{font-size:38px;line-height:1.05}.brief>p{color:var(--muted)}.objective,.checks{margin:25px 0;padding:17px;border:1px solid var(--line);border-radius:13px;background:#171e2a}.objective p{margin-bottom:0}.checks ul{padding-left:20px}.checks li{margin:6px 0;color:#aab5c3}.checks li.passed{color:var(--green);text-decoration:line-through}.hint{border:0;color:var(--green);background:none;font-weight:800;cursor:pointer}.challenge{min-width:0;display:grid;grid-template-rows:64px minmax(230px,42vh) 1fr;background:#0d121b}.challenge-top,.result-head{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line)}.challenge-top div{display:grid}.challenge-top span{color:var(--muted);font-size:10px}.challenge-result{min-height:0;display:grid;grid-template-rows:47px 1fr auto;background:#fff}.result-head{color:#dfe6ef;background:#151c27}.result-head span{color:var(--orange);font-size:11px}.challenge-result iframe{width:100%;height:100%;border:0}.feedback{padding:14px 20px;color:#283447;background:#edf2f7}.feedback.success{color:#125c37;background:#dff9e9}.feedback.error{color:#8b392f;background:#ffe8e3}footer{display:flex;justify-content:space-between;padding:35px max(22px,calc((100% - 1220px)/2));border-top:1px solid var(--line);color:var(--muted)}footer strong{color:#fff}@media(max-width:900px){.hero{grid-template-columns:1fr}.demo-window{transform:none}.choice-grid,.track-grid,.mission-grid{grid-template-columns:1fr 1fr}.workspace{height:auto;grid-template-columns:1fr}.editors{height:500px}.preview-pane{height:620px}.mission-shell{grid-template-columns:1fr}.brief{border-right:0;border-bottom:1px solid var(--line)}}@media(max-width:620px){.topbar nav a:first-child{display:none}.topbar nav{gap:10px}.hero{padding:50px 0}.hero h1{font-size:52px}.demo-grid,.choice-grid,.track-grid,.mission-grid{grid-template-columns:1fr}.demo-grid{min-height:580px}.editor-head{align-items:flex-start;flex-direction:column}.editor-actions{margin:10px 0}.workspace{min-height:0}.preview-pane iframe.mobile{width:100%}.catalog-head h1{font-size:45px}.progress-card{grid-template-columns:1fr}.mission-shell{display:block}.brief{padding:28px}.challenge{min-height:720px}.topbar{padding:0 12px}.topbar nav a{font-size:12px}.xp{display:none}}