:root{--surface:#fff;--soft:#edf4ff;--ship-fill:#d9eaff;--window:#fff;--flare:#ff9a55;--accent:#285bdd;--ink:#162b50;--muted:#526585;--line:#ccd8ef;--page:#f4f7ff;color-scheme:light}
:root[data-theme=dark]{--surface:#101c32;--soft:#172640;--ship-fill:#2b4469;--window:#e0fbff;--accent:#65dce6;--ink:#ecf4ff;--muted:#a4b5ce;--line:#30435f;--page:#080f20;color-scheme:dark}
body{background:var(--page);color:var(--ink);position:relative;isolation:isolate;font-family:'Segoe UI',system-ui,sans-serif;transition:background .2s,color .2s}body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 10% 5%,#5b77ff20,transparent 50%),radial-gradient(ellipse at 90% 80%,#1dbacd13,transparent 45%);pointer-events:none}.header{max-width:1200px;gap:18px;border-color:var(--line)}.brand{color:var(--ink)}.brand-icon{background:var(--soft);border:1px solid var(--line);color:var(--accent)}.brand-sub{color:var(--muted)}.theme-switch{border:1px solid var(--line);border-radius:30px;background:var(--surface);color:var(--ink);padding:10px 15px;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.demo{margin-left:auto;color:var(--muted)}main,footer,.header{position:relative;z-index:1}.space-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.star-grid{position:absolute;inset:0;background-image:radial-gradient(circle,var(--muted) 1px,transparent 1.5px);background-size:73px 89px;opacity:.16}.space-ship{position:absolute;width:70px;opacity:.45;filter:drop-shadow(0 0 15px #47c9ef55)}.ship-one{left:2%;top:28%;animation:patrol 22s ease-in-out infinite}.ship-two{right:1%;top:65%;width:45px;animation:patrol 28s ease-in-out infinite reverse}.ship-flame{transform-origin:60px 70px;animation:thrust .7s ease-in-out infinite alternate}
.portal-card,.auth-card,.track-card,.challenge-panel,.waiting-question{background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 45px #040d2012;border-radius:20px}.portal-card h2,.portal h1,.challenge-panel h1{color:var(--ink)}.portal h1{letter-spacing:-1.8px}.portal-description,.portal-card p,.auth-card p,.context-note,.hero-description,.objective,.review p,.scenario p,.feedback p,.card-progress,.learning-note p{color:var(--muted)}.primary,.technical .primary{background:linear-gradient(115deg,#3459e8,#097d9f);color:#fff;border-radius:12px;box-shadow:0 4px 14px #3459e823}.primary:hover,.technical .primary:hover{background:linear-gradient(115deg,#436afa,#159bb3);transform:translateY(-1px)}.primary:disabled{background:var(--soft);color:var(--muted);box-shadow:none;transform:none}.form-field input,.form-field select,.form-field textarea{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:10px}.form-field input:focus,.form-field select:focus{outline:2px solid var(--accent);outline-offset:2px}.track-picks label,.ranking-opt{color:var(--ink)}.text-button{color:var(--accent);font-size:13px}.eyebrow,.brand-sub{letter-spacing:2px}.pill,.topics span,.technical .topics span,.track-symbol,.technical .track-symbol{background:var(--soft);color:var(--accent);border-color:var(--line)}.scenario,.learning-note,.completion,.phase.active,.question-clock,.option:has(input:checked),.ranking-you{background:var(--soft);color:var(--ink);border-color:var(--line)}.scenario{border-left-color:var(--accent)}.option:hover{background:var(--soft);border-color:var(--accent)}.option{border-color:var(--line);border-radius:12px;transition:border-color .15s,transform .15s}.option:has(input:checked){border-color:var(--accent);transform:translateX(3px)}.phase-number{background:var(--surface);border-color:var(--line)}.score strong{color:var(--accent)}.hero-art{background:radial-gradient(ellipse,#447dff22,transparent 70%)}.shield{filter:drop-shadow(0 0 20px #54c6ff33)}.orbit{border-color:var(--line)}.art-label{background:var(--surface);border-color:var(--line)}progress,progress::-webkit-progress-bar{background:var(--line)}.question-clock{border-radius:14px}#time-left{color:var(--accent);font-size:20px}#selection-status{color:var(--muted)}.feedback .pill{background:var(--soft);color:var(--accent)}.results th,.results td,.ranking-table th,.ranking-table td{border-color:var(--line);color:var(--ink);background:transparent}.results thead{background:var(--soft)}.overview span,.score small,.score p{color:var(--muted)}.storage-note{background:var(--soft);color:var(--ink);border:1px solid var(--line)}.form-message{color:var(--accent);font-weight:600}.activation-icon{display:grid;place-items:center;width:70px;height:70px;border-radius:20px;color:var(--accent);background:var(--soft);font-size:35px;margin-bottom:24px}.activation-card ol{line-height:2;padding-left:22px;color:var(--ink)}.activation-card h2{font-size:24px}.mission-reward{display:flex;align-items:center;gap:20px;padding:24px;margin:20px 0;background:radial-gradient(ellipse at 20% 50%,#24d9cf19,transparent 65%),var(--soft);border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden}.reward-ship{width:95px;flex:none;animation:launch 1s ease-out both}.reward-points{display:block;font-size:48px;letter-spacing:-2px;color:var(--accent);line-height:1.2;animation:score-pop .6s ease-out both;font-variant-numeric:tabular-nums}.reward-points small{font-size:14px;letter-spacing:0}.reward-breakdown{font-size:12px;color:var(--muted)}.reward-particles{position:absolute;right:20px;top:15px;color:var(--accent);font-size:22px;animation:particles 1.6s ease-out both}.reward-timeout .reward-ship{animation:none;opacity:.6}.reward-timeout .reward-particles{display:none}.campaign-banner{flex-wrap:wrap;gap:14px}.feedback{scroll-margin-top:20px}.mission-reward .eyebrow{font-size:9px}
@keyframes patrol{0%,100%{transform:translateY(20px) rotate(15deg)}50%{transform:translateY(-80px) rotate(-10deg)}}@keyframes thrust{to{transform:scaleY(.65)}}@keyframes launch{from{transform:translateY(80px) rotate(-15deg);opacity:0}to{transform:translateY(0) rotate(8deg);opacity:1}}@keyframes score-pop{0%{transform:scale(.65);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@keyframes particles{from{transform:translateY(30px);opacity:0}50%{opacity:1}to{transform:translateY(-15px);opacity:0}}
@media(max-width:620px){.header{gap:8px;flex-wrap:wrap;height:auto;padding-top:18px;padding-bottom:18px}.theme-switch{font-size:11px;padding:8px 10px}.demo{display:none}.portal h1{font-size:33px}.mission-reward{padding:18px;gap:12px}.reward-ship{width:65px}.reward-points{font-size:38px}.reward-breakdown{font-size:10px}.space-ship{opacity:.2}.journey nav{overflow-x:auto}.phase{min-width:110px}.theme-switch{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.mission-banner{display:flex;align-items:center;gap:24px;margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(115deg,#4557fa15,#1acabd0b),var(--surface)}.intro-ship{width:110px;flex:none;animation:patrol 8s ease-in-out infinite}.mission-banner h2{font-size:27px;margin:8px 0;color:var(--ink)}.mission-banner p{font-size:13px;color:var(--muted);margin:0}.mission-signal{margin-left:auto;font-size:9px;letter-spacing:1px;color:var(--accent)}@media(max-width:620px){.mission-banner{gap:16px;padding:18px}.intro-ship{width:65px}.mission-banner h2{font-size:22px}.mission-signal{display:none}.mission-banner p{font-size:12px}}
.results-wrap{background:var(--surface)}.form-field input[readonly]{background:var(--soft);color:var(--ink)}.ranking-table{color:var(--ink)}
.intro-ship{animation:buoyancy 6s ease-in-out infinite}@keyframes buoyancy{0%,100%{transform:translateY(5px) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}