@import "https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&family=Nunito:wght@400;600;700;800;900&family=Fira+Code:wght@400;600&display=swap";:root{--purple:#6b46ff;--purple-dark:#3f1fd1;--purple-text:#5a35f0;--purple-soft:#ede7ff;--cyan:#00c2d1;--lime:#a3e635;--lime-dark:#4d7c0f;--orange:#ff8a00;--orange-soft:#ffe2bf;--orange-text:#7a3a00;--ink:#0d1025;--ink-2:#1b2040;--ink-3:#2a3058;--bg:#f2f4f7;--line:#e4e7ef;--muted:#454b66;--muted-2:#5b6178;--white:#fff;--radius:24px;--display:"Red Hat Display", system-ui, sans-serif;--body:"Nunito", system-ui, sans-serif;--mono:"Fira Code", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;font-size:16px}a{color:var(--purple-text)}a:hover{color:var(--purple-dark)}button{font-family:inherit}:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}h1,h2,h3{font-family:var(--display);margin:0;font-weight:900}p{margin:0}.page{flex-direction:column;gap:22px;max-width:1200px;margin:0 auto;padding:28px 20px 64px;display:flex}.page.narrow{max-width:860px}.row{flex-wrap:wrap;gap:22px;display:flex}.grow{flex:999 460px;min-width:0}.side{flex-direction:column;flex:320px;gap:18px;min-width:0;display:flex}.stack{flex-direction:column;gap:12px;display:flex}.card{background:var(--white);border-radius:var(--radius);flex-direction:column;gap:14px;padding:24px;display:flex}.card.dark{background:var(--ink);color:var(--white)}.card.outlined{border:3px solid var(--purple)}.eyebrow{color:var(--purple-text);letter-spacing:1px;text-transform:uppercase;font-size:13px;font-weight:800}.muted{color:var(--muted)}.small{font-size:14px}.tiny{font-size:13px}.title-xl{font-size:clamp(28px,4vw,36px);line-height:1.15}.title-l{font-size:22px}.title-m{font-size:19px}.between{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.topbar{background:var(--ink);color:var(--white);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:12px 24px;display:flex;position:relative}.brand{font-family:var(--display);color:var(--white);font-size:26px;font-weight:900;text-decoration:none}.brand span{color:var(--cyan)}.brand:hover{color:var(--white)}.brand-logo{align-items:center;display:inline-flex}.brand-logo img{width:auto;height:40px;display:block}.mainnav{flex-wrap:wrap;gap:4px;display:flex}.mainnav a{color:#c9cde0;border-radius:999px;padding:10px 16px;font-size:16px;font-weight:800;text-decoration:none}.mainnav a:hover{color:var(--white);background:var(--ink-2)}.mainnav a[aria-current=page]{color:var(--ink);background:var(--lime)}.hero{background:#ecfbd4}.crumbs{color:#c9cde0;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;display:flex}.crumbs a{color:#c9cde0}.crumbs strong{color:var(--white)}.pill{background:var(--ink-2);color:var(--white);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:8px;padding:9px 14px;font-size:15px;font-weight:800;text-decoration:none;display:inline-flex}a.pill:hover{color:var(--white);background:var(--ink-3)}.badge{background:var(--orange);color:var(--ink);border-radius:999px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 6px;font-size:12px;font-weight:900;display:inline-flex}.btn{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:13px 24px;font-size:16px;font-weight:800;text-decoration:none;transition:transform .1s,background .15s;display:inline-flex}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--purple);color:var(--white)}.btn.primary:hover{background:var(--purple-dark);color:var(--white)}.btn.secondary{background:var(--bg);color:var(--ink)}.btn.secondary:hover{background:var(--line);color:var(--ink)}.btn.outline{background:var(--white);color:var(--ink);border:2px solid #d5d9e3}.btn.dark{background:var(--ink);color:var(--white)}.btn.dark:hover{color:var(--white);background:var(--ink-2)}.btn.big{padding:16px 30px;font-size:18px}.btn.link{color:var(--muted);background:0 0;padding:10px;text-decoration:underline}.btn:disabled,.btn[aria-disabled=true]{color:var(--muted);cursor:not-allowed;background:#d5d9e3}.bar{background:var(--line);border-radius:999px;height:12px;overflow:hidden}.bar>span{background:var(--purple);border-radius:999px;height:100%;transition:width .4s;display:block}.big-number{font-family:var(--display);color:var(--purple-text);font-size:52px;font-weight:900;line-height:1}.stat{background:var(--bg);border-radius:16px;flex-direction:column;gap:2px;padding:12px;display:flex}.stat strong{font-size:18px}.stats{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;display:grid}.stats .stat strong{white-space:nowrap}.tag{white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:800;display:inline-flex}.tag.purple{background:var(--purple);color:var(--white)}.tag.soft{background:var(--purple-soft);color:var(--purple-dark)}.tag.lime{background:var(--lime);color:var(--ink)}.tag.orange{background:var(--orange-soft);color:var(--orange-text)}.tag.cyan{color:#0e5a61;background:#e0f7fa}.tag.gray{background:var(--line);color:var(--muted)}.item{background:var(--white);border:2px solid #0000;border-radius:20px;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 18px;display:flex}.item.current{border:3px solid var(--purple)}.item.locked{background:#e9ecf2}.item.locked .item-title{color:var(--muted)}.item-body{flex-direction:column;flex:220px;gap:3px;display:flex}.item-title{font-family:var(--display);font-size:18px;font-weight:800}.dot{border-radius:50%;flex:none;justify-content:center;align-items:center;width:46px;height:46px;font-size:18px;font-weight:900;display:flex}.dot.done{background:var(--purple);color:var(--white)}.dot.now{background:var(--lime);color:var(--ink)}.dot.lock{color:var(--muted);background:#d5d9e3}.locked-label{color:var(--muted-2);align-items:center;gap:6px;font-size:14px;font-weight:700;display:inline-flex}.route-node{width:82px;height:82px;font-family:var(--display);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:28px;font-weight:900;display:flex}.route-node.completed{background:var(--purple);color:var(--white);box-shadow:0 6px 0 var(--purple-dark)}.route-node.available{background:var(--lime);color:var(--ink);box-shadow:0 6px 0 var(--lime-dark);border:4px solid var(--white)}.route-node.locked{background:var(--line);color:var(--muted-2);box-shadow:0 6px #c9cde0}.route-link{border-left:4px dotted var(--purple);width:0;height:30px;margin-left:39px}.route-link.locked{border-left-color:#c9cde0}.mini-route{flex-wrap:nowrap;justify-content:safe center;align-items:flex-start;padding:4px 0;display:flex;overflow-x:auto}.mini-step{text-align:center;flex-direction:column;flex:none;align-items:center;gap:6px;width:84px;display:flex}.mini-node{border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:18px;font-weight:900;display:flex}.mini-node.completed{background:var(--purple);color:var(--white)}.mini-node.available{background:var(--lime);color:var(--ink);border:3px solid var(--lime-dark)}.mini-node.locked{background:var(--line);color:var(--muted-2)}.mini-dots{flex:none;align-items:center;gap:5px;height:52px;padding:0 2px;display:flex}.mini-dots span{background:var(--line);border-radius:50%;width:6px;height:6px}.mini-dots.done span{background:var(--purple)}.tabs{flex-wrap:wrap;gap:8px;display:flex}.tab{cursor:pointer;background:var(--white);color:var(--ink);border:none;border-radius:999px;align-items:center;gap:8px;min-height:44px;padding:11px 18px;font-size:15px;font-weight:800;display:inline-flex}.tab[aria-selected=true]{background:var(--purple);color:var(--white)}.tab:disabled{background:var(--line);color:var(--muted-2);cursor:not-allowed}.activity-bar{flex:220px;gap:6px;max-width:360px;display:flex}.activity-bar span{background:var(--ink-3);border-radius:999px;flex:1;height:8px}.activity-bar span.done{background:var(--purple)}.activity-bar span.now{background:var(--lime)}pre.code{background:var(--ink);color:#e8eaf6;font-family:var(--mono);border-radius:18px;margin:0;padding:20px 22px;font-size:16px;line-height:1.7;overflow-x:auto}.editor{background:var(--ink);border-radius:20px;overflow:hidden}.editor-head{background:var(--ink-2);color:#c9cde0;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:10px 16px;font-size:14px;font-weight:700;display:flex}.editor .cm-editor{min-height:280px;font-size:16px}.editor .cm-editor.cm-focused{outline:none}.editor .cm-scroller{font-family:var(--mono);line-height:1.7}.console{background:var(--ink-2);color:#e8eaf6;border-radius:18px;flex-direction:column;gap:6px;padding:16px 18px;display:flex}.console.error{background:#3b1020}.console pre{font-family:var(--mono);white-space:pre-wrap;margin:0;font-size:15px}.console-label{letter-spacing:1px;text-transform:uppercase;color:#8c93b8;font-size:12px;font-weight:800}.test-row{border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 12px;font-size:14px;display:flex}.test-row.ok{background:#eef9da}.test-row.ok strong{color:#3f6212}.test-row.bad{background:#fff1e0}.test-row.bad strong{color:#9a3412}.req{align-items:flex-start;gap:10px;display:flex}.req-dot{background:var(--bg);border-radius:50%;flex:none;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:900;display:flex}.options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}@media (width<=560px){.options{grid-template-columns:1fr}}.option{text-align:left;cursor:pointer;min-height:64px;font-family:var(--mono);white-space:pre-line;background:var(--white);color:var(--ink);border:2px solid #d5d9e3;border-radius:18px;align-items:center;gap:12px;padding:16px;font-size:16px;display:flex}.option .key{width:30px;height:30px;font-family:var(--body);background:var(--bg);border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:900;display:flex}.option.selected{border:3px solid var(--purple)}.option.selected .key{background:var(--purple);color:var(--white)}.option.wrong{background:var(--orange-soft);border:3px solid #c2410c}.option.wrong .key{color:var(--white);background:#c2410c}.option.right{background:var(--lime);border:3px solid var(--lime-dark)}.option.right .key{background:var(--ink);color:var(--white)}.option:disabled{cursor:default}.option.dim{opacity:.6}.wait{background:var(--orange-soft);border-radius:18px;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 20px;display:flex}.wait-clock{background:var(--white);width:64px;height:64px;font-family:var(--display);color:var(--orange-text);border:4px solid #c2410c;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:22px;font-weight:900;display:flex}.shake{animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.overlay{z-index:50;background:#0d1025c2;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--white);text-align:center;border-radius:28px;flex-direction:column;align-items:center;gap:14px;width:min(460px,100%);max-height:calc(100vh - 40px);padding:32px;animation:.3s ease-out pop;display:flex;position:relative;overflow-y:auto}.modal-close{background:var(--bg);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:absolute;top:14px;right:14px}@keyframes pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.spot{z-index:30;position:relative;box-shadow:0 0 0 4px var(--lime), 0 0 0 9999px #0d10259e!important}.tour-card{z-index:60;background:var(--white);border-radius:22px;flex-direction:column;gap:12px;width:min(380px,100% - 32px);padding:22px;animation:.25s ease-out pop;display:flex;position:fixed;bottom:16px;right:16px;box-shadow:0 18px 50px #0d102559}.tour-dots{gap:6px;display:flex}@media (width<=560px){.tour-card{gap:8px;padding:16px}.tour-card .title-l{font-size:19px}.tour-card p{font-size:15px}}.tour-dots span{background:var(--line);border-radius:999px;flex:1;height:6px}.tour-dots span.on{background:var(--purple)}.tour-blocker{z-index:25;position:fixed;inset:0}.box-shake{animation:1.1s ease-in-out boxshake}@keyframes boxshake{0%,to{transform:rotate(0)scale(1)}15%{transform:rotate(-9deg)scale(1.04)}30%{transform:rotate(9deg)scale(1.06)}45%{transform:rotate(-11deg)scale(1.08)}60%{transform:rotate(11deg)scale(1.1)}75%{transform:rotate(-6deg)scale(1.14)}90%{transform:rotate(0)scale(1.2)}}.rays{animation:8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.reveal{animation:.6s cubic-bezier(.2,.9,.3,1.3) reveal}@keyframes reveal{0%{opacity:0;transform:scale(.2)rotate(-20deg)}70%{opacity:1;transform:scale(1.15)rotate(4deg)}to{transform:scale(1)rotate(0)}}.toast{z-index:70;background:var(--ink);color:var(--white);border-radius:999px;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:14px 22px;font-weight:800;animation:2.8s ease-out forwards toast;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toast{0%{opacity:0;transform:translate(-50%,16px)}12%{opacity:1;transform:translate(-50%)}85%{opacity:1}to{opacity:0}}.inv-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.inv-item{text-align:left;border:2px solid var(--line);color:var(--ink);cursor:pointer;background:#f7f8fb;border-radius:18px;flex-direction:column;gap:10px;padding:14px;display:flex;position:relative}.inv-item.on{border:3px solid var(--purple);background:#f4fbe6}.inv-item:disabled{opacity:.7;cursor:not-allowed}.inv-swatch{border-radius:14px;justify-content:center;align-items:center;height:64px;font-size:13px;font-weight:900;display:flex}.new-flag{background:var(--orange);color:var(--ink);border-radius:999px;padding:3px 8px;font-size:11px;font-weight:900;position:absolute;top:8px;right:8px}.hw-steps{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.hw-steps li{color:var(--muted-2);background:#f7f8fb;border-radius:14px;flex-direction:column;gap:6px;padding:10px;font-size:13px;font-weight:800;display:flex}.hw-steps li span{background:var(--line);border-radius:999px;height:6px}.hw-steps li.done{color:var(--ink)}.hw-steps li.done span{background:var(--purple)}.hw-steps li.now{color:var(--ink);background:#f4fbe6}.hw-steps li.now span{background:var(--lime)}.login-wrap{background:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100vh;padding:24px;display:flex}.login-card{background:var(--white);border-radius:28px;flex-direction:column;gap:18px;width:min(560px,100%);padding:32px;display:flex}.who{text-align:left;border:2px solid var(--line);background:var(--white);cursor:pointer;border-radius:20px;align-items:center;gap:14px;width:100%;padding:14px;display:flex}.who:hover{border-color:var(--purple)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.notif-panel{z-index:40;background:var(--white);width:min(360px,100vw - 32px);color:var(--ink);border-radius:20px;flex-direction:column;gap:6px;padding:12px;animation:.2s ease-out pop;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 18px 50px #0d10254d}.notif-item{color:var(--ink);border-radius:14px;flex-direction:column;gap:3px;padding:10px 12px;text-decoration:none;display:flex}.notif-item:hover{background:var(--bg);color:var(--ink)}.notif-item.unread{background:var(--purple-soft)}.badge-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;display:grid}.badge-card{text-align:center;background:#f7f8fb;border:2px dashed #dde1e9;border-radius:20px;flex-direction:column;align-items:center;gap:8px;padding:18px 14px;display:flex}.badge-card.earned{border:2px solid var(--purple);background:#f4f0ff}.badge-card.next{background:var(--white);border:2px dashed var(--purple)}.badge-course{border-top:1px solid #eef0f5;flex-direction:column;gap:10px;padding-top:14px;display:flex}.badge-card .bar{width:100%}.badge-mini{color:inherit;background:#f7f8fb;border-radius:16px;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;display:flex}@media (width<=520px){.mini-step{flex:1 1 0;gap:4px;width:auto;min-width:0}.mini-route{justify-content:space-between}.mini-step .tiny{font-size:10px}.mini-route .mini-node{width:40px;height:40px;font-size:16px}.mini-dots{gap:3px;height:40px;padding:0}.mini-dots span{width:4px;height:4px}.mini-dots span:nth-child(3){display:none}}.field{font:inherit;border:2px solid var(--line);background:var(--white);color:var(--ink);border-radius:14px;width:100%;padding:12px 14px;font-size:16px}.field:focus{border-color:var(--purple);outline:none;box-shadow:0 0 0 3px #6c4cff2e}