:root{--bg: #05040b;--bg-2: #0d0820;--panel: rgba(10, 13, 28, .88);--panel-strong: rgba(15, 19, 40, .96);--panel-hot: rgba(33, 12, 43, .88);--fg: #ecf8ff;--fg-dim: #8795b5;--fg-muted: #58617d;--cyan: #28f4ff;--magenta: #ff2bd6;--amber: #ffd166;--green: #58ff9a;--red: #ff4d6d;--line: rgba(40, 244, 255, .24);--line-hot: rgba(255, 43, 214, .28);--shadow-cyan: 0 0 18px rgba(40, 244, 255, .34);--shadow-magenta: 0 0 22px rgba(255, 43, 214, .34);--radius: 4px;--topbar-h: 62px;font-family:SF Mono,JetBrains Mono,Fira Code,IBM Plex Mono,ui-monospace,monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{min-height:100vh;background:linear-gradient(rgba(40,244,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,43,214,.035) 1px,transparent 1px),linear-gradient(180deg,rgba(255,43,214,.16),transparent 32%),linear-gradient(135deg,#05040b,#0d0820 48%,#090b18);background-size:28px 28px,28px 28px,auto,auto;color:var(--fg);font-size:14px;line-height:1.55;overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen;opacity:.35;z-index:10}button,input{font:inherit}button:focus-visible,input:focus-visible,.terminal-pane iframe:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.app{display:grid;grid-template-columns:minmax(230px,280px) minmax(360px,1fr) minmax(420px,.95fr);grid-template-rows:var(--topbar-h) minmax(0,1fr) auto;grid-template-areas:"topbar topbar topbar" "sidebar content terminal" "sidebar flag terminal";height:100vh;padding:10px;gap:10px}.topbar,.sidebar,.content,.terminal-pane,.flag-pane{position:relative;border:1px solid var(--line);background:var(--panel);box-shadow:inset 0 0 0 1px #ffffff09,var(--shadow-cyan);overflow:hidden}.topbar:after,.sidebar:after,.content:after,.terminal-pane:after,.flag-pane:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid rgba(255,43,214,.12)}.topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between;min-width:0;padding:0 18px;background:linear-gradient(90deg,rgba(255,43,214,.16),transparent 42%),var(--panel-strong)}.brand-lockup{min-width:0}.brand-kicker,.panel-label span,.terminal-pane>header span,.flag-pane>header span,.mission-status span{color:var(--amber);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.topbar h1{margin-top:2px;color:var(--fg);font-size:22px;font-weight:900;letter-spacing:.04em;line-height:1;text-shadow:2px 0 rgba(255,43,214,.85),-2px 0 rgba(40,244,255,.8),0 0 24px rgba(255,255,255,.28);white-space:nowrap}.progress{display:flex;align-items:center;gap:10px;color:var(--fg-dim);font-size:12px;text-transform:uppercase;white-space:nowrap}.progress span{border:1px solid rgba(255,209,102,.32);border-radius:var(--radius);padding:7px 9px;background:#ffd1660f}.progress strong{color:var(--green);font-size:14px;text-shadow:0 0 12px rgba(88,255,154,.55)}.sidebar{grid-area:sidebar;overflow-y:auto;background:linear-gradient(180deg,rgba(40,244,255,.1),transparent 22%),var(--panel-strong)}.panel-label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}.panel-label small{color:var(--fg-muted);font-size:10px;text-transform:uppercase}.sidebar ul{list-style:none;padding:8px}.sidebar li+li{margin-top:6px}.sidebar li button{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;width:100%;min-height:58px;padding:8px;border:1px solid transparent;border-radius:var(--radius);background:#05040b6b;color:var(--fg);cursor:pointer;text-align:left;transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.sidebar li button:hover{transform:translate(2px);border-color:#28f4ff73;background:#28f4ff14;box-shadow:var(--shadow-cyan)}.sidebar li.active button{border-color:var(--magenta);background:linear-gradient(90deg,#ff2bd638,#28f4ff0f),#05040b9e;box-shadow:var(--shadow-magenta)}.sidebar li.done button{border-color:#58ff9a40}.sidebar li .num{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid rgba(40,244,255,.38);color:var(--cyan);font-size:12px;font-weight:900}.sidebar li .title{display:flex;min-width:0;flex-direction:column;gap:2px}.sidebar li .title span{overflow:hidden;color:var(--fg);font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.sidebar li .title small{color:var(--fg-muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.sidebar li .check{color:var(--green);font-size:10px;font-weight:900;letter-spacing:.12em}.content{grid-area:content;overflow-y:auto;padding:22px 28px;background:linear-gradient(135deg,rgba(40,244,255,.08),transparent 28%),#070812e0}.mission-status{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:18px;border-bottom:1px solid var(--line-hot);padding-bottom:12px}.mission-status strong{color:var(--cyan);font-size:32px;line-height:1;text-shadow:var(--shadow-cyan)}.mission-status em{justify-self:end;color:var(--green);font-size:11px;font-style:normal;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.lesson{max-width:78ch}.lesson h1,.lesson h2,.lesson h3{color:var(--fg);font-weight:900;line-height:1.18}.lesson h1{margin:0 0 18px;color:var(--cyan);font-size:31px;text-shadow:2px 0 rgba(255,43,214,.72),0 0 20px rgba(40,244,255,.48)}.lesson h2{margin:28px 0 10px;color:var(--magenta);font-size:17px;letter-spacing:.05em;text-transform:uppercase}.lesson h3{margin:20px 0 8px;color:var(--amber);font-size:14px;text-transform:uppercase}.lesson p,.lesson ul,.lesson ol{margin:9px 0 14px;color:#ecf8ffe6}.lesson ul,.lesson ol{padding-left:24px}.lesson li+li{margin-top:5px}.lesson code{border:1px solid rgba(40,244,255,.22);border-radius:3px;background:#28f4ff14;color:var(--green);padding:1px 6px;font-size:13px}.lesson pre{margin:14px 0;overflow-x:auto;border:1px solid rgba(88,255,154,.32);border-left:3px solid var(--green);border-radius:var(--radius);background:linear-gradient(90deg,rgba(88,255,154,.08),transparent),#040806;padding:13px 15px;box-shadow:0 0 18px #58ff9a1f}.lesson pre code{border:0;background:transparent;color:var(--fg);padding:0}.lesson table{width:100%;margin:15px 0;border-collapse:collapse;border:1px solid var(--line);background:#05040b80;font-size:13px}.lesson th,.lesson td{border:1px solid rgba(40,244,255,.18);padding:8px 10px;text-align:left;vertical-align:top}.lesson th{background:#ff2bd61f;color:var(--amber);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.lesson a{color:var(--cyan);text-decoration-color:#28f4ff73}.lesson-actions{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}button.primary{min-height:38px;border:1px solid var(--green);border-radius:var(--radius);background:linear-gradient(90deg,#58ff9af5,#ffd166eb);color:#06110b;cursor:pointer;padding:8px 14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 18px #58ff9a59}button.primary:hover{filter:brightness(1.08)}button.primary:disabled{border-color:#58ff9a38;background:#58ff9a14;color:var(--fg-muted);cursor:default;box-shadow:none}.terminal-pane{grid-area:terminal;display:flex;min-height:0;flex-direction:column;background:#020207;border-color:#ff2bd652;box-shadow:var(--shadow-magenta)}.terminal-pane>header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-hot);background:var(--panel-hot);padding:10px 12px}.terminal-pane>header strong{overflow:hidden;color:var(--cyan);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.terminal-pane iframe{flex:1;min-height:360px;border:0;background:#000}.flag-pane{grid-area:flag;padding:13px 18px 16px;background:linear-gradient(90deg,rgba(255,43,214,.12),transparent),var(--panel-strong)}.flag-pane>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.flag-pane>header small{color:var(--fg-muted);font-size:10px;text-transform:uppercase}.flag-pane form{display:flex;gap:8px}.flag-pane input{min-width:0;flex:1;border:1px solid var(--line);border-radius:var(--radius);background:#05040bc7;color:var(--fg);padding:9px 10px;font-size:13px}.flag-pane input::placeholder{color:var(--fg-muted)}.flag-pane input:focus{border-color:var(--cyan);box-shadow:var(--shadow-cyan);outline:none}.flag-pane button{min-height:38px;border:1px solid var(--magenta);border-radius:var(--radius);background:#ff2bd61f;color:var(--fg);cursor:pointer;padding:8px 12px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.flag-pane button:hover{background:var(--magenta);color:#120616;box-shadow:var(--shadow-magenta)}.flag-msg{margin-top:9px;color:var(--green);font-size:12px}@media (max-width: 1180px){.app{grid-template-columns:minmax(220px,260px) minmax(0,1fr);grid-template-rows:var(--topbar-h) minmax(440px,1fr) minmax(360px,45vh) auto;grid-template-areas:"topbar topbar" "sidebar content" "terminal terminal" "flag flag";overflow-y:auto;height:auto;min-height:100vh}body{overflow:auto}.terminal-pane iframe{min-height:340px}}@media (max-width: 760px){:root{--topbar-h: auto}.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;grid-template-areas:"topbar" "sidebar" "content" "terminal" "flag";padding:8px}.topbar{align-items:flex-start;flex-direction:column;gap:10px;padding:14px}.topbar h1{font-size:19px;white-space:normal}.progress{width:100%;justify-content:space-between}.progress span{flex:1}.sidebar{max-height:320px}.content{padding:18px}.mission-status{grid-template-columns:1fr auto}.mission-status span{grid-column:1 / -1}.lesson h1{font-size:24px}.flag-pane form{flex-direction:column}.flag-pane button{width:100%}}