:root {
  --ink: #eaf5ff;
  --muted: #9bb0c7;
  --deep: #08111f;
  --panel: #0d1b2d;
  --panel-2: #11233a;
  --line: #203957;
  --green: #61f7c5;
  --yellow: #ffcf5a;
  --pink: #ff5d8f;
  --purple: #9d7bff;
  --blue: #54b8ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 75% 8%, rgba(84, 184, 255, .1), transparent 26rem),
    radial-gradient(circle at 10% 45%, rgba(157, 123, 255, .08), transparent 25rem),
    var(--deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-width: 320px;
}
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; background: var(--yellow); color: #172030; padding: 12px 18px; z-index: 100; border-radius: 8px; font-weight: 800; }
.skip-link:focus { top: 12px; }
.scanlines { position: fixed; inset: 0; pointer-events: none; opacity: .07; z-index: 50; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); }

.site-header { height: 78px; border-bottom: 1px solid rgba(97, 247, 197, .13); display: flex; align-items: center; justify-content: space-between; padding: 0 max(20px, calc((100% - 1160px) / 2)); background: rgba(8, 17, 31, .82); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; font: 900 23px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.05em; }
.brand > span:last-child > span { color: var(--green); }
.brand-mark { width: 39px; height: 34px; border: 2px solid var(--green); color: var(--green); border-radius: 8px; display: grid; place-items: center; font: 900 14px/1 ui-monospace, monospace; box-shadow: 0 0 24px rgba(97,247,197,.18); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.main-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; margin-right: 32px; }
.main-nav a { color: var(--muted); text-decoration: none; font: 800 11px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--green); }
.sound-status { color: var(--muted); font: 700 12px/1 ui-monospace, monospace; letter-spacing: .04em; }
.profile-chip { border: 0; background: transparent; display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; padding: 5px; border-radius: 10px; }
.profile-chip:hover, .profile-chip:focus-visible { background: var(--panel-2); outline: 2px solid var(--green); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; background: linear-gradient(145deg, var(--purple), var(--blue)); color: #fff; border-radius: 12px; font-weight: 900; box-shadow: 0 0 0 2px var(--deep), 0 0 0 3px var(--purple); }
.profile-copy { display: grid; gap: 3px; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { color: var(--muted); font: 700 10px/1 monospace; }

.hero { min-height: 610px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; padding-block: 80px; }
.eyebrow { color: var(--green); font: 800 12px/1.2 ui-monospace, monospace; letter-spacing: .13em; display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 22px; height: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; }
h1 { font-size: clamp(50px, 7vw, 80px); line-height: .98; letter-spacing: -.065em; margin: 22px 0 26px; max-width: 700px; }
h1 em { color: transparent; -webkit-text-stroke: 1.5px var(--green); font-style: normal; text-shadow: 0 0 25px rgba(97,247,197,.14); }
.hero-intro { color: #b9c9da; font-size: 18px; line-height: 1.65; max-width: 600px; }
.primary-button { margin-top: 18px; display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 54px; padding: 0 24px; background: var(--green); color: #09211d; text-decoration: none; border: 0; border-radius: 9px; font-weight: 900; cursor: pointer; box-shadow: 0 12px 30px rgba(97,247,197,.18); transition: transform .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(97,247,197,.28); }
.hero-note { color: var(--muted); font-size: 12px; margin-top: 17px; }

.hero-visual { position: relative; height: 420px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px dashed rgba(97,247,197,.2); border-radius: 50%; }
.orbit-one { width: 390px; height: 390px; }
.orbit-two { width: 300px; height: 300px; border-color: rgba(157,123,255,.28); }
.laptop { width: 290px; z-index: 3; filter: drop-shadow(0 25px 35px rgba(0,0,0,.5)); transform: perspective(700px) rotateY(-5deg); }
.laptop-screen { height: 190px; background: #09111c; border: 9px solid #2b3f57; border-radius: 14px 14px 5px 5px; box-shadow: inset 0 0 40px rgba(97,247,197,.05); padding: 18px; }
.screen-dots { display: flex; gap: 5px; margin-bottom: 34px; }.screen-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }.screen-dots i:nth-child(2){background:var(--yellow)}.screen-dots i:nth-child(3){background:var(--green)}
.laptop code { font-size: 13px; line-height: 1.7; color: #cfe4ec; }.prompt{color:var(--purple)}.success{color:var(--green)}.cursor{animation:blink 1s steps(1) infinite;color:var(--yellow)}
.laptop-base { height: 19px; width: 330px; margin-left: -20px; background: linear-gradient(#4f6276,#273a4e); clip-path: polygon(5% 0,95% 0,100% 70%,87% 100%,13% 100%,0 70%); }
.node { position: absolute; width: 64px; height: 64px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; display: grid; place-items: center; font: 800 13px monospace; z-index: 4; box-shadow: var(--shadow); }
.node-one { left: 3%; top: 15%; color: var(--blue); }.node-two{right:2%;top:13%;color:var(--pink)}.node-three{right:8%;bottom:9%;color:var(--yellow)}
.network-line { height: 1px; position: absolute; background: linear-gradient(90deg, transparent, var(--green), transparent); transform-origin: left center; opacity: .55; }.line-one{width:185px;left:15%;top:29%;transform:rotate(26deg)}.line-two{width:170px;left:54%;top:38%;transform:rotate(-28deg)}.line-three{width:170px;left:55%;top:61%;transform:rotate(25deg)}
.mascot { position: absolute; left: 8%; bottom: 10%; width: 82px; height: 72px; border-radius: 45% 45% 30% 30%; background: var(--purple); border: 6px solid #c8b9ff; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 15px 17px 17px; transform: rotate(-7deg); box-shadow: 0 18px 40px rgba(157,123,255,.28); }
.mascot b { width: 13px; height: 13px; color: #18203d; font-size: 8px; background:#fff;border-radius:50%;display:grid;place-items:center}.mascot span{grid-column:1/-1;color:#1e1743;line-height:.5;font-weight:900}
@keyframes blink { 50% { opacity: 0; } }

.status-strip { border-block: 1px solid rgba(97,247,197,.11); background: rgba(13,27,45,.68); }
.status-grid { display: grid; grid-template-columns: 1fr 1.35fr 1fr auto; min-height: 104px; align-items: center; gap: 34px; }
.status-item { display: flex; align-items: center; gap: 14px; }.status-item p{display:grid;gap:6px;margin:0}.status-item small{font:800 9px monospace;color:#6f8aa7;letter-spacing:.1em}.status-item strong{font-size:14px}.status-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:900}.status-icon.purple{color:var(--purple);background:rgba(157,123,255,.12)}.status-icon.yellow{color:var(--yellow);background:rgba(255,207,90,.12)}.status-icon.green{color:var(--green);background:rgba(97,247,197,.12)}
.xp-item > div { flex: 1; }.xp-item p{display:flex;justify-content:space-between}.xp-track{height:4px;border-radius:4px;background:#1c334d;margin-top:10px;overflow:hidden}.xp-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--green));transition:width .5s}
.reset-button { border: 1px solid var(--line); color: var(--muted); background: transparent; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 11px; }.reset-button:hover{color:var(--ink);border-color:var(--pink)}

.missions { padding-block: 110px 90px; }.section-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:42px}.section-heading h2,.code-oath h2{font-size:clamp(32px,5vw,48px);margin:12px 0 0;letter-spacing:-.04em}.section-heading>p{color:var(--muted);max-width:440px;line-height:1.6;margin:0}
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mission-card { position:relative; min-height:330px; background:linear-gradient(145deg,rgba(17,35,58,.98),rgba(10,23,39,.98));border:1px solid var(--line);border-radius:15px;padding:26px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s;box-shadow:0 15px 45px rgba(0,0,0,.14)}
.mission-card:not(.locked):hover{transform:translateY(-5px);border-color:var(--accent)}.mission-card.completed{border-color:rgba(97,247,197,.5)}.mission-card.locked{filter:saturate(.35);opacity:.67}.mission-number{position:absolute;right:-2px;top:-17px;font:900 88px/1 monospace;color:rgba(255,255,255,.035)}.mission-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--accent) 13%, transparent);color:var(--accent);font-size:22px;margin-bottom:24px}.mission-card small{font:800 10px monospace;letter-spacing:.1em;color:var(--accent)}.mission-card h3{font-size:22px;margin:10px 0 9px}.mission-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}.mission-meta{display:flex;gap:15px;margin-top:16px;color:#6f8aa7;font:700 10px monospace}.mission-card button{margin-top:auto;width:100%;height:42px;border-radius:8px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-weight:900;cursor:pointer}.mission-card button:hover{background:var(--accent);color:#08111f}.mission-card button:disabled{border-color:#41516a;color:#60728b;cursor:not-allowed}.done-ribbon{position:absolute;right:15px;top:14px;color:var(--green);font:800 10px monospace}

.history { padding-block: 105px 100px; }
.history-heading { margin-bottom: 28px; }
.history-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.history-filter { border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); padding: 10px 16px; cursor: pointer; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; }
.history-filter:hover, .history-filter.active { color: #08201a; background: var(--green); border-color: var(--green); }
.history-list { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.history-list::before { content: ''; position: absolute; left: 87px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--green), var(--purple), var(--pink)); opacity: .35; }
.history-card { --track: var(--green); display: grid; grid-template-columns: 74px 1fr; gap: 26px; min-height: 190px; padding: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(17,35,58,.95), rgba(10,23,39,.95)); border-radius: 14px; }
.history-card.track-code { --track: var(--yellow); }.history-card.track-hacker { --track: var(--pink); }.history-card.track-ai { --track: var(--purple); }.history-card.track-computer { --track: var(--green); }
.history-year { position: relative; color: var(--track); font: 900 16px/1.2 ui-monospace, monospace; padding-top: 5px; }
.history-year::after { content: ''; position: absolute; right: -32px; top: 7px; width: 11px; height: 11px; border: 2px solid var(--deep); border-radius: 50%; background: var(--track); box-shadow: 0 0 14px var(--track); }
.history-track { color: var(--track); font: 800 9px/1 ui-monospace, monospace; letter-spacing: .1em; }
.history-card h3 { margin: 8px 0; font-size: 19px; }.history-card p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }.history-card a { color: var(--track); font-size: 11px; }

.history-echo { margin: 24px 0; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 7%, #07111f); color: #cbd9e7; line-height: 1.6; }
.history-echo strong { color: var(--accent); }
.lesson-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 30px; }
.lesson-resources > div { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: #0a1727; }
.lesson-resources h3 { margin: 0 0 12px; font-size: 14px; }.lesson-resources ul { margin: 0; padding-left: 18px; display: grid; gap: 9px; }.lesson-resources li { color: var(--muted); font-size: 12px; line-height: 1.4; }

.media-library { padding-block: 10px 100px; }
.media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.media-card { display: flex; flex-direction: column; min-height: 280px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 13px; padding: 23px; background: linear-gradient(145deg, rgba(17,35,58,.97), rgba(10,23,39,.97)); }
.media-card > span { color: var(--accent); font: 800 9px/1 ui-monospace, monospace; letter-spacing: .1em; }.media-card h3 { font-size: 20px; margin: 12px 0 4px; }.media-card small { color: #6f8aa7; font: 700 10px monospace; }.media-card p { color: var(--muted); font-size: 13px; line-height: 1.55; }.media-card a { color: var(--accent); font-size: 11px; margin-top: auto; }
.source-count { color: var(--green); font: 800 11px/1.5 ui-monospace, monospace; }.sources-dialog #source-list > ul { columns: 2; column-gap: 35px; }.sources-dialog #source-list li { break-inside: avoid; margin-bottom: 10px; }

.code-oath { margin-block: 30px 110px; min-height: 230px; border: 1px solid rgba(97,247,197,.25); border-radius: 18px; background:linear-gradient(100deg,rgba(97,247,197,.06),rgba(157,123,255,.06));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:35px;padding:45px 55px;box-shadow:var(--shadow)}
.oath-badge{width:84px;height:84px;border:2px solid var(--green);border-radius:24px;display:grid;place-items:center;color:var(--green);font:900 28px monospace;transform:rotate(-4deg);box-shadow:inset 0 0 30px rgba(97,247,197,.08)}.code-oath h2{font-size:34px}.code-oath>div>p:last-child{color:var(--muted);line-height:1.65;max-width:720px}.oath-stamp{text-align:center;color:var(--yellow);border:2px solid currentColor;border-radius:50%;width:105px;height:105px;display:grid;place-items:center;align-content:center;font:800 10px/1.4 monospace;transform:rotate(8deg);opacity:.78}.oath-stamp b{font-size:20px}
.privacy{display:flex;align-items:center;gap:18px;background:#0d1b2d;border:1px solid var(--line);border-radius:14px;padding:24px 30px;margin-bottom:90px}.privacy>span{font-size:28px}.privacy p{margin:6px 0 0;color:var(--muted);font-size:14px}
footer{border-top:1px solid var(--line);padding:42px 0;color:var(--muted)}footer .shell{display:flex;justify-content:space-between;align-items:center;gap:30px;font-size:12px}.footer-brand{color:var(--ink)}.text-button{border:0;background:none;color:var(--green);padding:0;text-decoration:underline;cursor:pointer}

dialog { width: min(760px, calc(100% - 26px)); max-height: min(850px, calc(100vh - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--panel); box-shadow: 0 35px 100px #000; }
dialog::backdrop { background: rgba(2,7,15,.84); backdrop-filter: blur(5px); }.dialog-shell{padding:45px;position:relative}.dialog-close{position:absolute;right:17px;top:15px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:24px;cursor:pointer}.dialog-close:hover{color:var(--ink);border-color:var(--green)}
.lesson-tag{color:var(--accent);font:800 11px monospace;letter-spacing:.1em}.dialog-shell h2{font-size:clamp(31px,6vw,45px);line-height:1.05;letter-spacing:-.04em;margin:13px 0 20px}.lesson-lead{color:#bdcddd;font-size:17px;line-height:1.6}.lesson-points{display:grid;gap:12px;margin:28px 0;padding:0;list-style:none}.lesson-points li{background:#0a1727;border-left:3px solid var(--accent);padding:15px 18px;border-radius:0 9px 9px 0;line-height:1.5}.mini-lab{background:#07111f;border:1px solid #223c5b;border-radius:11px;padding:20px;margin:24px 0;font-family:ui-monospace,monospace}.mini-lab code{color:var(--green)}.source-link{color:var(--blue);font-size:12px}.quiz{border-top:1px solid var(--line);margin-top:30px;padding-top:24px}.quiz h3{font-size:23px}.question{margin:25px 0}.question>p{font-weight:800}.answers{display:grid;gap:9px}.answer{width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;background:#0a1727;padding:13px 15px;cursor:pointer}.answer:hover{border-color:var(--purple)}.answer.selected{border-color:var(--yellow);background:rgba(255,207,90,.08)}.answer.correct{border-color:var(--green);background:rgba(97,247,197,.1)}.answer.wrong{border-color:var(--pink);background:rgba(255,93,143,.1)}.quiz-feedback{min-height:24px;color:var(--muted);font-weight:700}.quiz-feedback.success{color:var(--green)}.quiz-feedback.error{color:var(--pink)}.quiz-submit{width:100%}.compact-dialog{text-align:center}.big-avatar{width:100px;height:100px;background:linear-gradient(145deg,var(--purple),var(--blue));border-radius:30px;display:grid;place-items:center;margin:25px auto;font-size:42px;font-weight:900}.dialog-done{width:100%}.sources-dialog ul{display:grid;gap:13px;padding-left:22px}.sources-dialog li{color:var(--muted)}.sources-dialog a{color:var(--blue)}

@media (max-width: 900px) {
  .main-nav{display:none}.hero{grid-template-columns:1fr;gap:25px;padding-top:60px}.hero-visual{height:380px}.status-grid{grid-template-columns:1fr 1fr;gap:24px;padding-block:24px}.reset-button{justify-self:start}.mission-grid{grid-template-columns:1fr 1fr}.history-list{grid-template-columns:1fr}.media-grid{grid-template-columns:1fr 1fr}.code-oath{grid-template-columns:auto 1fr}.oath-stamp{display:none}.section-heading{align-items:start;flex-direction:column;gap:15px}footer .shell{flex-wrap:wrap}
}
@media (max-width: 620px) {
  .shell{width:min(100% - 26px,1160px)}.site-header{padding-inline:14px}.sound-status,.profile-copy{display:none}.hero{padding-block:50px;min-height:auto}.hero-visual{height:320px;transform:scale(.82);margin-inline:-40px}h1{font-size:48px}.status-grid{grid-template-columns:1fr}.mission-grid{grid-template-columns:1fr}.missions,.history{padding-block:75px}.history-list::before{left:73px}.history-card{grid-template-columns:60px 1fr;gap:20px;padding:20px}.history-year{font-size:13px}.history-year::after{right:-26px}.media-grid,.lesson-resources{grid-template-columns:1fr}.sources-dialog #source-list > ul{columns:1}.code-oath{grid-template-columns:1fr;padding:34px 26px}.privacy{align-items:flex-start}.dialog-shell{padding:45px 22px 28px}footer .shell{display:grid}.mission-card{min-height:330px}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}*{animation:none!important;transition:none!important} }