:root {
    --bg:#031225;
    --bg2:#071b32;
    --panel:#081a32;
    --panel2:#0b223f;
    --panel3:#102949;
    --line:#274a73;
    --text:#eef5ff;
    --muted:#b7c9df;
    --muted2:#8ba2c0;
    --green:#37d67a;
    --au1:#1aa0d8;
    --au2:#28c857;
    --au3:#f2c84b;
    --gold:#f2d54a;
    --focus:#74d3ff;
    --good:#6ff1a4;
    --warn:#ffd36b;
    --bad:#ff7186;
  }
  * { box-sizing:border-box; }
  html, body { margin:0; min-height:100%; background:radial-gradient(circle at 82% 18%, rgba(21,103,98,.35), transparent 28%), linear-gradient(180deg, #031225 0%, #051731 55%, #041122 100%); color:var(--text); font-family: Inter, Segoe UI, Arial, sans-serif; }
  body { min-width:320px; }
  button, input { font: inherit; }
  .app { width:min(1600px, 100%); margin:0 auto; padding:18px clamp(12px, 2vw, 28px) 22px; }
  .topbar { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; border-bottom:1px solid rgba(132,170,214,.24); padding-bottom:12px; }
  .eyebrow { font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; background: linear-gradient(90deg, var(--au1), var(--au2), var(--au3)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:4px; }
  .brand-wrap { min-width:280px; }
  .brand { font-size:clamp(2.5rem, 4.2vw, 4.2rem); line-height:.96; font-weight:800; letter-spacing:-.04em; margin:0; }
  .brand .plain { color:#f0f4fb; }
  .brand .africa { background:linear-gradient(90deg, #00a1de 0%, #00b050 38%, #f4d130 75%, #f9e28b 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500; }
  .brand .tm { font-size:.42em; vertical-align:top; margin-left:2px; color:var(--gold); font-weight:600; }
  .tagline { margin:6px 0 1px; font-size:1rem; color:#dce6f5; }
  .patents { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#dbe4f1; font-weight:700; }
  .toolbar { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-top:6px; }
  .pill-btn { border:1px solid rgba(109,183,153,.55); background:linear-gradient(180deg, rgba(11,47,41,.62), rgba(10,36,32,.42)); color:#ecfff5; padding:12px 18px; border-radius:18px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; min-height:46px; display:flex; align-items:center; gap:10px; }
  .pill-btn.alt { border-color:rgba(140,170,213,.45); background:rgba(8,22,44,.55); }
  .dot { width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 14px rgba(111,241,164,.75); }
  .content-grid { display:grid; grid-template-columns:1.4fr .95fr; gap:18px; margin-top:18px; align-items:start; }
  @media (max-width: 1080px) { .content-grid { grid-template-columns:1fr; } }
  .panel { background:linear-gradient(180deg, rgba(7,25,49,.94), rgba(5,20,39,.96)); border:1px solid rgba(100,146,204,.32); border-radius:22px; padding:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); min-width:0; }
  .section-eyebrow { font-size:.78rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; background: linear-gradient(90deg, var(--au1), var(--au2), var(--au3)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px; }
  .hero-title { font-size:clamp(1.72rem, 2.55vw, 2.65rem); line-height:1.03; letter-spacing:-.04em; margin:.08rem 0 .5rem; max-width:none; text-wrap:balance; }
  .lede { font-size:1.03rem; line-height:1.45; color:#e1ebf8; max-width:78ch; }
  .controls-top { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
  .level-row, .mission-row { display:grid; gap:12px; }
  .level-row { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; }
  @media (max-width: 860px) { .level-row { grid-template-columns:1fr; } }
  .card-select { border:1px solid rgba(105,145,196,.38); background:linear-gradient(180deg, rgba(12,30,55,.82), rgba(10,25,45,.9)); border-radius:16px; padding:14px; min-height:136px; position:relative; transition:.18s ease; color:var(--text); text-align:left; display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
  .card-select:hover { border-color:rgba(124,185,240,.55); transform:translateY(-1px); }
  .card-select.active { border-color:var(--focus); box-shadow:0 0 0 2px rgba(116,211,255,.18), 0 0 22px rgba(62,143,199,.22) inset; background:linear-gradient(180deg, rgba(19,53,82,.96), rgba(10,28,49,.96)); }
  .card-select.active::after { content:'SELECTED'; position:absolute; right:12px; top:10px; font-size:.7rem; font-weight:800; letter-spacing:.16em; color:#c7f4ff; }
  .card-visual { width:86px; min-width:86px; height:64px; border-radius:14px; background:radial-gradient(circle at 30% 45%, rgba(88,216,255,.95), rgba(53,123,189,.85) 30%, rgba(6,25,53,0) 31%), linear-gradient(180deg,#041327,#081e39); border:1px solid rgba(118,180,232,.35); position:relative; overflow:hidden; box-shadow: inset 0 0 22px rgba(130,209,255,.15); }
  .card-visual::before { content:''; position:absolute; left:8px; right:8px; top:18px; bottom:18px; border:1.5px solid rgba(98,201,255,.5); border-radius:50%; transform:rotate(-15deg); }
  .card-visual::after { content:'🚀'; position:absolute; right:8px; bottom:4px; font-size:28px; filter:drop-shadow(0 0 6px rgba(255,255,255,.35)); }
  .level-text h3, .mission-card h3 { margin:0 0 4px; font-size:1.05rem; }
  .level-note, .mission-note { color:#d6e4f8; font-size:.95rem; line-height:1.35; }
  .mission-row { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:14px; }
  @media (max-width: 900px) { .mission-row { grid-template-columns:1fr; } }
  .mission-card { min-height:150px; padding:16px; border-radius:18px; border:1px solid rgba(106,147,199,.35); background:linear-gradient(180deg, rgba(11,28,52,.78), rgba(8,24,44,.92)); cursor:pointer; position:relative; transition:.18s ease; text-align:left; color:var(--text); }
  .mission-card:hover { transform:translateY(-1px); border-color:rgba(124,185,240,.58); }
  .mission-card.active { box-shadow:0 0 0 2px rgba(88,215,255,.16) inset; border-color:#7fd9ff; background:linear-gradient(180deg, rgba(17,58,83,.92), rgba(10,29,51,.96)); }
  .mission-icon { font-size:1.7rem; display:block; margin-bottom:8px; }
  .chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
  .chip { border:1px solid rgba(127,173,219,.4); color:#dbe7f8; padding:5px 9px; border-radius:999px; font-size:.74rem; background:rgba(12,32,57,.68); }
  .flow-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
  .stage-badge { padding:8px 12px; border-radius:999px; background:rgba(8,28,49,.7); border:1px solid rgba(104,149,201,.4); font-size:.75rem; letter-spacing:.15em; font-weight:800; text-transform:uppercase; background-image:linear-gradient(90deg, rgba(26,160,222,.28), rgba(40,200,87,.25), rgba(242,200,75,.2)); color:#ddf7ee; }
  .top-step-pills { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
  .step-pill { border:1px solid rgba(115,159,210,.45); min-height:44px; border-radius:14px; background:rgba(10,25,45,.76); color:#dcebff; font-weight:800; cursor:pointer; }
  .step-pill.done { background:rgba(23,78,55,.32); border-color:rgba(87,214,138,.55); color:#f0fff6; }
  .step-pill.active { border-color:var(--focus); box-shadow:0 0 0 2px rgba(116,211,255,.14) inset; background:rgba(17,48,78,.92); }
  .small-tag { padding:8px 12px; border-radius:999px; border:1px solid rgba(122,176,233,.45); font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:#dff6ff; }
  .stage-title { font-size:clamp(1.25rem, 2vw, 1.85rem); margin:14px 0 10px; color:#38cc71; }
  .stage-body { color:#ecf4ff; line-height:1.48; margin-bottom:14px; }
  .help-links { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .help-links button { border:1px solid rgba(123,173,225,.45); background:rgba(10,27,49,.65); color:#edf7ff; padding:9px 12px; border-radius:999px; font-size:.82rem; cursor:pointer; }
  .question-card, .param-card { border:1px solid rgba(100,145,196,.38); border-radius:18px; background:linear-gradient(180deg, rgba(9,24,43,.78), rgba(8,21,40,.92)); padding:14px; min-width:0; }
  .question-eyebrow, .param-eyebrow { font-size:.78rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; background: linear-gradient(90deg, var(--au1), var(--au2), var(--au3)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px; }
  .question-title { font-size:1.15rem; line-height:1.3; margin:0 0 12px; max-width:56ch; }
  .answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  @media (max-width: 800px) { .answers { grid-template-columns:1fr; } }
  .answer { border:1px solid rgba(109,150,199,.42); background:rgba(12,29,52,.7); border-radius:16px; padding:14px; color:#f2f8ff; text-align:left; cursor:pointer; min-height:86px; display:flex; flex-direction:column; gap:8px; justify-content:flex-start; }
  .answer .key { width:30px; height:30px; border-radius:10px; border:1px solid rgba(105,208,255,.55); display:flex; align-items:center; justify-content:center; font-weight:800; color:#8be2ff; }
  .answer.selected { border-color:#74d3ff; box-shadow:0 0 0 2px rgba(116,211,255,.16) inset; }
  .answer.correct { border-color:#5dd790; background:rgba(14,50,37,.5); }
  .answer.wrong { border-color:#ff8291; background:rgba(64,16,28,.36); }
  .feedback { margin-top:10px; font-size:.96rem; min-height:1.2rem; color:#dceaf8; }
  .params-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
  @media (max-width: 900px) { .params-grid { grid-template-columns:1fr; } }
  .param-option { border:1px solid rgba(108,147,197,.42); border-radius:14px; background:rgba(11,28,51,.72); padding:12px; min-height:72px; cursor:pointer; text-align:left; }
  .param-option .head { color:#f5f8ff; font-weight:700; font-size:1rem; }
  .param-option .sub { color:#dbe6f3; margin-top:4px; font-size:.92rem; line-height:1.25; }
  .param-option.active { border-color:#74d3ff; background:rgba(18,58,84,.72); box-shadow:0 0 0 2px rgba(116,211,255,.15) inset; }
  .metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
  @media (max-width: 800px) { .metric-grid { grid-template-columns:1fr; } }
  .metric { border:1px solid rgba(109,150,198,.38); border-radius:14px; padding:12px; background:rgba(12,27,49,.55); }
  .metric .label { font-size:.78rem; color:#afc3dd; text-transform:uppercase; letter-spacing:.1em; }
  .metric .value { font-size:1.1rem; font-weight:800; margin-top:4px; }
  .save-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .action-btn { border:1px solid rgba(110,181,223,.55); background:linear-gradient(180deg, rgba(26,68,99,.9), rgba(16,47,73,.94)); color:#fff; padding:12px 18px; border-radius:14px; font-weight:800; cursor:pointer; }
  .action-btn:disabled { opacity:.5; cursor:not-allowed; }
  .nav-row { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; }
  .nav-row .action-btn { min-width:180px; }
  .right-panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
  .progress-mini { display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
  .mini-step { width:28px; height:28px; border-radius:50%; border:1px solid rgba(112,160,211,.45); display:flex; align-items:center; justify-content:center; font-size:.82rem; color:#c9dbf0; background:rgba(8,24,43,.6); }
  .mini-step.done { background:rgba(25,88,61,.46); border-color:rgba(89,214,140,.58); color:#f4fff7; }
  .mini-step.active { border-color:#73d2ff; box-shadow:0 0 0 2px rgba(115,210,255,.16) inset; }
  .visual-wrap { border:1px solid rgba(100,145,196,.38); border-radius:18px; padding:12px; background:linear-gradient(180deg, rgba(4,18,38,.9), rgba(7,21,39,.96)); overflow:hidden; }
  .visual-heading { font-size:1.85rem; margin:0; }
  .visual-sub { color:#e5f0ff; margin:6px 0 12px; }
  .svg-box { width:100%; aspect-ratio: 16 / 9; border-radius:16px; overflow:hidden; background:linear-gradient(180deg, #03111f, #08203a); }
  .summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
  @media (max-width: 700px) { .summary-grid { grid-template-columns:1fr; } }
  .summary-card { border:1px solid rgba(108,149,197,.38); border-radius:16px; padding:12px; background:rgba(10,26,47,.58); min-width:0; }
  .summary-card .label { color:#a9bfdc; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; }
  .summary-card .val { font-size:1rem; font-weight:800; margin-top:6px; word-break:break-word; }
  .done-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .done-chips .chip { background:rgba(23,80,56,.4); border-color:rgba(98,216,141,.45); color:#f3fff6; }
  .footer-note { margin-top:14px; font-size:1rem; color:#eff6ff; }
  .modal-backdrop { position:fixed; inset:0; background:rgba(1,7,15,.72); display:none; align-items:center; justify-content:center; padding:16px; z-index:90; }
  .modal-backdrop.open { display:flex; }
  .modal { width:min(920px,100%); max-height:min(92vh, 900px); overflow:auto; background:linear-gradient(180deg, rgba(5,20,39,.98), rgba(8,24,45,.98)); border:1px solid rgba(105,149,198,.4); border-radius:22px; padding:18px; box-shadow:0 24px 80px rgba(0,0,0,.45); }
  .modal-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
  .modal-title { margin:0; font-size:2rem; }
  .modal-close { border:1px solid rgba(115,160,209,.45); width:44px; height:44px; border-radius:16px; background:rgba(8,25,45,.7); color:#fff; font-size:1.3rem; cursor:pointer; }
  .help-graphic { border:1px solid rgba(110,150,198,.38); border-radius:18px; overflow:hidden; margin:12px 0 14px; background:linear-gradient(180deg, rgba(7,25,47,.75), rgba(7,21,40,.92)); }
  .help-copy { font-size:1.25rem; line-height:1.4; color:#f0f6ff; margin-bottom:14px; }
  .slider-row { margin-top:12px; }
  input[type=range] { width:100%; accent-color:#61d8ff; }
  .slider-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; }
  @media (max-width:700px) { .slider-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .tiny { font-size:.82rem; color:#abc1dd; }
  .banner-footer { margin-top:18px; padding-top:12px; border-top:1px solid rgba(115,160,210,.22); text-align:center; color:#dbe8f8; font-weight:700; }
  .terrain-label { fill:#e8f5ff; font-size:14px; font-weight:700; }
  .ground-block-label { fill:#eaf5ff; font-weight:800; font-size:13px; text-anchor:middle; dominant-baseline:middle; letter-spacing:.02em; }
  .completion-text { color:#eef7ff; line-height:1.5; }
  .completion-text p { margin:.25rem 0 .7rem; }
  .vis-suptitle { color:#6fd96f; font-size:clamp(1rem,1.8vw,1.5rem); font-weight:800; margin-bottom:6px; }
  .hide { display:none !important; }