:root{
  --bg:#06101d; --panel:#0d1a2b; --panel2:#101f33; --line:#26364d;
  --text:#f5f8ff; --muted:#9eb0c9; --accent:#78e8d1; --accent-text:#06101d; --danger:#ff7b92;
  --shadow:0 24px 70px rgba(0,0,0,.38);
  --stage-h:52dvh;
  --search-bg:rgba(16,31,51,.92); --search-border:#2a3d57;
  --result-bg:#102036; --result-border:#30435f;
  --pill-bg:rgba(14,27,44,.86); --pill-border:#2b3c53; --pill-text:#d6e4f3;
  --card-bg:linear-gradient(160deg,rgba(13,26,43,.97),rgba(6,15,26,.98)); --card-border:#22354e;
  --btn-bg:#101e31; --btn-border:#2a3d56; --btn-text:#bdd0e7; --btn-hover:#1b2e48;
  --seg-bg:#091523; --seg-border:#25374f; --seg-text:#879bb4; --seg-active:#20334d;
  --toolbar-border:#1f3148; --toolbar-bg:rgba(5,13,23,.5);
  --entity-bg:#101e31; --entity-border:#263a54;
  --stat-bg:#091522; --stat-border:#20334a; --stat-label:#8297b1;
  --block-bg:#0c1829; --block-border:#223650;
  --modal-bg:#0d1b2d; --modal-border:#30445f;
  --toast-bg:#15253a; --toast-border:#36506e;
  --tray-bg:#0e1c2e; --tray-border:#2c415b;
  --lesson-bg:#0c1b2e; --lesson-border:#29415c;
  --daily-bg:#0a1828; --daily-border:#34506b;

  /* Geography tokens. One source of truth for the map and the globe in both
     themes. Never hardcode a map color below this block. */
  --geo-water-1:#081522; --geo-water-2:#060d17;
  --geo-water-glow:rgba(30,73,103,.22);
  --geo-land:#16273a; --geo-land-hover:#1d3450; --geo-land-line:#314b6a;
  --geo-state-line:#2a4159; --geo-state-hover:#1d3450; --geo-state-hover-op:.55;
  --geo-grat:#1d3049; --geo-grat-op:.6;
  --geo-grid:#22364e; --geo-grid-axis:#2e4a66;
  --geo-globe-ocean:#0b1a2c; --geo-globe-rim:#31506e;
  --geo-label-fill:#ffffff; --geo-label-halo:#07101b;
  --geo-tile-label:#9ef0dd;
  --geo-scale:#cfe0f2;
  --geo-reveal-glow:rgba(255,255,255,.22);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{
  margin:0;height:100%;overflow:hidden;
  background:radial-gradient(circle at 15% -10%,#17324d 0,#081522 30%,#050b13 76%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}
html{color-scheme:dark}
button,input{font:inherit}
button{color:inherit}
a{color:#9be8da}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* app shell: locked to the viewport, every pane scrolls internally */
.app{
  height:100vh;height:100dvh;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:12px;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  max-width:1580px;margin:auto;
}
.site-footer{display:flex;justify-content:space-between;gap:18px;padding:0 3px;color:#71879e;font-size:9px;line-height:1.25;white-space:nowrap}
.site-footer a{color:#8fb7b4;text-decoration:none}.site-footer a:hover{text-decoration:underline;color:#b8f3e7}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:12px;min-height:52px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:39px;height:39px;display:grid;place-items:center;flex:none}
.logo img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 14px rgba(70,203,220,.16))}
.brand strong{font-size:17px;letter-spacing:-.3px}
.brand-copy{display:flex;align-items:center;gap:6px}
.beta{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#71d9c4;border:1px solid #315f61;padding:3px 6px;border-radius:999px}

.search-wrap{position:relative;flex:1;max-width:620px}
.searchbox{display:flex;align-items:center;background:var(--search-bg);border:1px solid var(--search-border);border-radius:15px;height:44px;padding:0 12px}
.searchbox svg{width:19px;color:#8ba0bb;flex:none}
#search{width:100%;height:100%;border:0;outline:0;background:transparent;color:#fff;padding:0 10px;font-size:16px;min-width:0}
#search::placeholder{color:#8093ad}
.search-results{position:absolute;z-index:40;top:52px;left:0;right:0;background:var(--result-bg);border:1px solid var(--result-border);border-radius:16px;padding:6px;box-shadow:var(--shadow);max-height:min(420px,60dvh);overflow:auto;display:none}
.search-results.show{display:block}
.result{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 11px;border-radius:11px;cursor:pointer}
.result:hover,.result.active{background:#1a2d47}
.result-name{font-weight:700}
.result-sub{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.result-tag{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#8ca5c2;border:1px solid #354b67;border-radius:999px;padding:4px 7px;white-space:nowrap}

.header-actions{margin-left:auto;display:flex;gap:7px;flex:none}
.pill-btn{border:1px solid var(--pill-border);background:var(--pill-bg);border-radius:13px;height:42px;padding:0 12px;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--pill-text)}
.pill-btn:hover{background:rgba(23,42,67,.9)}
.pill-btn svg{width:18px}
.learn-btn{border-color:#35635f;background:linear-gradient(135deg,rgba(26,72,69,.9),rgba(20,46,70,.9));color:#d8fff6}
.learn-spark{color:var(--accent);font-size:16px;line-height:1}

.capacity-bar{width:100%;min-height:52px;border:1px solid #3b716c;border-radius:16px;padding:8px 13px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;background:linear-gradient(105deg,rgba(24,81,75,.9),rgba(16,39,65,.94) 62%,rgba(19,44,72,.96));box-shadow:0 12px 35px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05)}
.capacity-bar:hover{border-color:#64b2a5;background:linear-gradient(105deg,rgba(30,94,86,.94),rgba(18,46,75,.97))}
.capacity-icon{width:33px;height:33px;border-radius:11px;display:grid;place-items:center;flex:none;background:#78e8d1;color:#07141f;font-size:22px;font-weight:500}
.capacity-copy{display:grid;gap:1px;min-width:0}
.capacity-kicker{font-size:8px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:#8ddfce}
.capacity-copy strong{font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.capacity-hint{margin-left:auto;color:#b1c6da;font-size:11px;white-space:nowrap}
.capacity-slots{display:flex;gap:4px;flex:none}
.capacity-slots i{width:10px;height:10px;border:1px solid #668198;border-radius:50%;background:#0a1726;transition:.2s}
.capacity-slots i.filled{border-color:var(--slot-color);background:var(--slot-color);box-shadow:0 0 9px color-mix(in srgb,var(--slot-color) 55%,transparent)}
.capacity-count{flex:none;border:1px solid #47756f;border-radius:999px;padding:5px 8px;color:#d7fff6;background:#102f32;font-size:10px;font-weight:850;white-space:nowrap}
.capacity-bar.is-full{border-color:#9d7b48;background:linear-gradient(105deg,rgba(77,59,31,.94),rgba(18,42,64,.96))}

/* ---- workspace ---- */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:12px;min-height:0}
.map-card,.side-panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.map-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}

.map-toolbar{display:flex;align-items:center;padding:9px 11px;gap:8px;border-bottom:1px solid var(--toolbar-border);background:var(--toolbar-bg);flex:none;overflow-x:auto;scrollbar-width:none}
.map-toolbar::-webkit-scrollbar{display:none}
.segmented{display:flex;padding:4px;background:var(--seg-bg);border:1px solid var(--seg-border);border-radius:13px;gap:3px;flex:none}
.seg{border:0;background:transparent;color:var(--seg-text);border-radius:9px;padding:7px 10px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.seg.active{background:var(--seg-active);color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.25)}
.seg-accent .seg.active{background:#1d4a48;color:#c8fff2}
.seg-btn[aria-pressed="true"]{background:#20334d;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.25)}
.toolbar-spacer{flex:1;min-width:4px}
.small-btn{border:1px solid var(--btn-border);background:var(--btn-bg);border-radius:11px;padding:8px 10px;font-size:12px;font-weight:700;color:var(--btn-text);cursor:pointer;white-space:nowrap;flex:none}
.small-btn:hover{background:var(--btn-hover)}
.small-btn.on{color:#7de4cf;border-color:#3e786f;background:#12302f}

.map-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,var(--geo-water-glow),transparent 45%),linear-gradient(var(--geo-water-1),var(--geo-water-2))}
#mapSvg{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
#basemapG{transition:opacity .3s}
.map-grat{fill:none;stroke:var(--geo-grat);stroke-width:.8;opacity:var(--geo-grat-op)}
.hit-country{fill:var(--geo-land);stroke:var(--geo-land-line);stroke-width:1;fill-rule:evenodd;cursor:pointer}
.hit-country:hover{fill:var(--geo-land-hover)}
.hit-state{fill:#000;fill-opacity:0;stroke:var(--geo-state-line);stroke-width:.8;opacity:.85;fill-rule:evenodd;cursor:pointer;pointer-events:fill}
.hit-state:hover{fill:var(--geo-state-hover);fill-opacity:var(--geo-state-hover-op)}
.hl-path{fill-rule:evenodd}
.globe-on #basemapG{display:none}
#globeG{display:none}
.globe-on #globeG{display:block}
.globe-ocean{fill:var(--geo-globe-ocean);stroke:var(--geo-globe-rim);stroke-width:1.5}
.btn-q{font-weight:800;font-size:17px;width:19px;text-align:center;display:inline-block}
kbd{background:#0a1523;border:1px solid #2b3f59;border-bottom-width:2px;border-radius:6px;padding:1px 6px;font-size:11px;font-family:ui-monospace,SFMono-Regular,monospace}
.modal ul{padding-left:18px;margin:6px 0}
.basemap-off #basemapG{opacity:0;pointer-events:none}
#hlG{pointer-events:none}
.map-stage:not(.basemap-off) #mapSvg{cursor:grab}
.map-stage:not(.basemap-off) #mapSvg:active{cursor:grabbing}
.grid-line{stroke:var(--geo-grid);stroke-width:1;fill:none}
.grid-axis{stroke:var(--geo-grid-axis);stroke-width:1.4}
.overlay-path{fill-rule:evenodd;stroke-linejoin:round}
.overlay-group.draggable .overlay-path{cursor:grab}
.overlay-group.draggable .overlay-path:active{cursor:grabbing}
.overlay-group.active .overlay-path{filter:drop-shadow(0 0 10px var(--geo-reveal-glow))}
.overlay-label{font-weight:800;paint-order:stroke;stroke:var(--geo-label-halo);stroke-width:4px;stroke-linejoin:round;fill:var(--geo-label-fill);pointer-events:none;text-anchor:middle}
.tile-label{font-size:21px;font-weight:800;fill:var(--geo-tile-label);paint-order:stroke;stroke:var(--geo-label-halo);stroke-width:4px;text-anchor:middle;pointer-events:none;letter-spacing:.02em}
.scalebar-line{stroke:var(--geo-scale);stroke-width:2}
.scalebar-text{fill:var(--geo-scale);font-size:11px;font-weight:700;font-family:ui-sans-serif,system-ui,sans-serif}

.stage-note{position:static;min-height:31px;padding:7px 12px;border-top:1px solid #1e3046;background:#08131f;color:#a9bcd2;font-size:11px;line-height:1.45;pointer-events:none;flex:none}
.stage-note:empty{display:none}
.zoom-stack{position:absolute;right:12px;bottom:12px;display:grid;gap:6px}
.round-btn{width:38px;height:38px;border:1px solid #30435c;border-radius:12px;background:rgba(10,21,35,.9);font-size:18px;cursor:pointer}
.preset-strip{display:flex;gap:7px;padding:9px 11px;border-top:1px solid #1e3046;background:#091422;overflow-x:auto;flex:none;scrollbar-width:none}
.preset-strip::-webkit-scrollbar{display:none}
.preset{white-space:nowrap;border:1px solid #2a3d55;background:#101f33;border-radius:999px;padding:7px 11px;color:#b9cae0;font-size:12px;font-weight:700;cursor:pointer;flex:none}
.preset:hover,.preset.active{border-color:#54817d;color:#e6fffa}

/* ---- side panel ---- */
.side-panel{display:flex;flex-direction:column;min-height:0}
.panel-tabs{display:flex;gap:4px;padding:9px 10px;border-bottom:1px solid #1f3046;flex:none}
.tab{flex:1;border:0;background:transparent;color:#89a0ba;font-size:12.5px;font-weight:700;padding:9px 6px;border-radius:10px;cursor:pointer}
.tab.active{background:#1a2c45;color:#fff}
.panel-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:13px 13px 20px;-webkit-overflow-scrolling:touch}
.panel-section{display:none}
.panel-section.active{display:block}

.insight{background:linear-gradient(135deg,rgba(46,99,110,.35),rgba(37,56,88,.45));border:1px solid #31536a;border-radius:16px;padding:14px;margin-bottom:11px}
.insight-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#8edcca;font-weight:800}
.insight-main{font-size:16px;line-height:1.42;font-weight:750;margin-top:5px}
.insight-sub{font-size:12px;color:#a9bdd2;margin-top:7px;line-height:1.5}

.entity-card{background:var(--entity-bg);border:1px solid var(--entity-border);border-radius:16px;padding:12px;margin-bottom:9px}
.entity-card.is-active{border-color:#3f7d74}
.entity-top{display:flex;gap:10px;align-items:center}
.swatch{width:10px;height:34px;border-radius:999px;flex:none}
.entity-title{min-width:0;flex:1;cursor:pointer;text-align:left;background:none;border:0;padding:0}
.entity-title strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entity-title span{display:block;color:#8fa4bf;font-size:10.5px;margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.remove{border:0;background:#1a2a40;border-radius:9px;width:30px;height:30px;color:#9db0c7;cursor:pointer;font-size:17px;flex:none}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}
.stat{background:var(--stat-bg);border:1px solid var(--stat-border);border-radius:11px;padding:9px 8px;min-width:0}
.stat label{display:block;font-size:9px;color:var(--stat-label);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.stat strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.stat em{font-style:normal;color:#7f94ad;font-size:9px}

.control-row{display:grid;grid-template-columns:58px 1fr 40px;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:#91a6bf}
input[type=range]{width:100%;accent-color:#72d8c5}
.lock-btn{border:1px solid #2a3c54;background:#0c1929;border-radius:9px;height:29px;cursor:pointer;font-size:12px}
.lock-btn.on{color:#7de4cf;border-color:#3e786f;background:#12302f}

.block{background:var(--block-bg);border:1px solid var(--block-border);border-radius:16px;padding:13px;margin-bottom:10px}
.block h3{margin:0 0 9px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#8bd3c2}
.matrix{width:100%;border-collapse:collapse;font-size:11.5px}
.matrix th,.matrix td{padding:6px 5px;text-align:right;border-bottom:1px solid #1d2f45;white-space:nowrap}
.matrix th:first-child,.matrix td:first-child{text-align:left;color:#a9bdd2;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.matrix thead th{color:#7f94ad;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.matrix td.self{color:#4d637d}
.fact{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid #1b2c42;font-size:12.5px;line-height:1.45;color:#c2d3e6}
.fact:last-child{border-bottom:0}
.fact b{color:#fff;font-weight:750}
.fact-dot{width:7px;height:7px;border-radius:999px;margin-top:6px;flex:none}

.empty{border:1px dashed #31435b;border-radius:16px;padding:22px 16px;text-align:center;color:#93a8c1;font-size:13px;line-height:1.5}
.empty strong{display:block;color:#e9f3ff;margin-bottom:6px}
.legend{display:flex;align-items:center;gap:8px;padding:9px 2px;color:#91a5be;font-size:11px;line-height:1.4}
.legend-grad{height:8px;flex:1;border-radius:999px;background:linear-gradient(90deg,#68c9ff,#ff7086)}
.data-note{margin-top:12px;padding-top:12px;border-top:1px solid #21334a;color:#7f94ad;font-size:10.5px;line-height:1.55}
.data-note button{padding:0;border:0;background:none;color:#83dcca;cursor:pointer;text-decoration:underline}
.chip{display:inline-block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid #37506d;color:#9fb6ce;border-radius:999px;padding:3px 7px;margin:0 5px 5px 0}
.chip.warn{border-color:#7a5a3c;color:#ffc38b}
.chip.ok{border-color:#3e786f;color:#7de4cf}

.toast{position:fixed;z-index:80;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--toast-bg);border:1px solid var(--toast-border);padding:11px 15px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow);font-size:13px;max-width:min(90vw,420px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.68);display:none;place-items:center;z-index:70;padding:18px}
.modal-backdrop.show{display:grid}
.modal{max-width:620px;width:100%;max-height:84dvh;overflow:auto;background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:20px;padding:20px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal h2{margin:0;font-size:20px}
.modal h4{margin:16px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#8bd3c2}
.modal p,.modal li{color:#a7bad0;line-height:1.55;font-size:13px}
.modal a{color:#8be4cb}
.modal .legal-links{display:flex;gap:14px;margin:12px 0}
.modal code{background:#08131f;border:1px solid #22344b;border-radius:5px;padding:1px 5px;font-size:12px;word-break:break-all}
.modal-close{border:0;background:#192b43;border-radius:10px;width:34px;height:34px;font-size:19px;cursor:pointer;flex:none}
#diagList{font-size:11px;color:#ffb0b0;line-height:1.5;max-height:150px;overflow:auto}

/* ---- lessons ---- */
.lesson-backdrop{z-index:75;background:rgba(2,7,13,.82);backdrop-filter:blur(8px)}
.lesson-shell{width:min(1080px,100%);max-height:min(900px,94dvh);overflow:auto;background:linear-gradient(150deg,#10213a,#071321 72%);border:1px solid #36506c;border-radius:26px;box-shadow:0 34px 100px rgba(0,0,0,.55);padding:22px;outline:0}
.lesson-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:17px;border-bottom:1px solid #243a54}
.lesson-head h2{font-size:clamp(20px,3vw,31px);letter-spacing:-.035em;margin:3px 0 0;max-width:720px}
.lesson-brand,.lesson-kicker{margin:0;color:#78e8d1;font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.lesson-home{padding-top:17px}
.lesson-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}
.lesson-intro p{color:#a9bdd3;font-size:13px;line-height:1.55;max-width:680px;margin:9px 0 0}
.lesson-pill{display:inline-flex;border:1px solid #38665f;border-radius:999px;padding:5px 9px;color:#a9f1e2;background:#102e2e;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.lesson-courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lesson-course{position:relative;display:flex;align-items:center;gap:13px;min-height:86px;padding:13px;text-align:left;border:1px solid #29415c;border-radius:17px;background:#0c1b2e;color:inherit;cursor:pointer;overflow:hidden}
.lesson-course:hover{border-color:#4d776f;background:#11263d}
.lesson-course-all{grid-column:1/-1;background:linear-gradient(115deg,rgba(24,73,69,.72),rgba(15,36,61,.95))}
.lesson-course-mark{width:9px;align-self:stretch;border-radius:999px;background:var(--course);box-shadow:0 0 22px color-mix(in srgb,var(--course) 45%,transparent);flex:none}
.lesson-course-copy{min-width:0;flex:1}
.lesson-course-copy strong{font-size:16px;display:block}
.lesson-course-copy small{display:block;color:#8fa5be;font-size:11px;margin-top:4px}
.lesson-course-progress{text-align:right;flex:none}
.lesson-course-progress b{display:block;font-size:15px;color:#dffdf7}
.lesson-course-progress small{display:block;color:#7790aa;font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.lesson-play{padding-top:14px}
.lesson-playbar{display:grid;grid-template-columns:auto auto minmax(100px,1fr);align-items:center;gap:12px}
.lesson-progress-copy{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.lesson-progress-copy span{color:#82daca;font-size:11px;font-weight:800}
.lesson-progress-copy strong{font-size:11px;color:#9fb2c8}
.lesson-progress-track{height:7px;border-radius:999px;background:#091522;border:1px solid #21364d;overflow:hidden}
.lesson-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#59a6ff,#78e8d1);transition:width .25s ease}
.lesson-question{text-align:center;padding:11px 0 7px}
.lesson-question h3{font-size:clamp(24px,4vw,38px);letter-spacing:-.04em;margin:2px 0 0}
.lesson-map-wrap{position:relative;min-height:350px;height:min(48dvh,510px);border:1px solid #29425e;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#173350,#081522 67%)}
.lesson-map{width:100%;height:100%;display:block}
.lesson-state{fill:#1a3047;stroke:#66809b;stroke-width:1.2;cursor:pointer;transition:fill .16s,stroke .16s,opacity .16s;outline:0}
.lesson-state-hit{fill:transparent;stroke:transparent;stroke-width:10;pointer-events:all;cursor:pointer}
.lesson-state:hover,.lesson-state:focus{fill:#254968;stroke:#d7efff;stroke-width:2}
.lesson-state.mastered,.lesson-inset.mastered path{fill:#244f59;stroke:#68b9ae;opacity:.88}
.lesson-state.correct,.lesson-inset.correct path{fill:#54dabd!important;stroke:#d7fff5!important;filter:drop-shadow(0 0 7px rgba(120,232,209,.7))}
.lesson-state.wrong,.lesson-inset.wrong path{fill:#d95a74!important;stroke:#ffd4dc!important}
.lesson-state.answer,.lesson-inset.answer path{fill:#287b70;stroke:#9dffeb;stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(120,232,209,.7))}
.lesson-state.dimmed,.lesson-inset.dimmed{opacity:.38}
.lesson-insets{position:absolute;left:16px;bottom:14px;display:flex;gap:7px}
.lesson-inset{width:70px;height:58px;padding:6px 8px;border:1px solid #405b76;border-radius:12px;background:#0b1a2c;color:#aac0d6;cursor:pointer;display:grid;place-items:center}
.lesson-inset svg{width:100%;height:38px;overflow:visible}
.lesson-inset path{fill:#1a3047;stroke:#66809b;stroke-width:2;vector-effect:non-scaling-stroke}
.lesson-response{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px}
.lesson-feedback{margin:0;color:#9eb2c9;font-size:13px;line-height:1.45}
.lesson-feedback.success{color:#9ff1df}
.lesson-feedback.try-again{color:#ffc0a0}
.lesson-actions,.lesson-result-actions{display:flex;gap:8px;flex:none}
.lesson-primary{border:1px solid #62cbb7;background:#63ddc5;color:#06121d;border-radius:11px;padding:9px 13px;font-size:12px;font-weight:850;cursor:pointer;white-space:nowrap}
.lesson-result{text-align:center;padding:clamp(40px,8vh,90px) 16px}
.lesson-result h3{font-size:clamp(25px,4vw,40px);letter-spacing:-.04em;margin:8px 0 18px}
.lesson-score{width:154px;height:154px;margin:0 auto 18px;border-radius:50%;display:grid;place-content:center;background:radial-gradient(circle,#183c42,#0a1c2d 70%);border:1px solid #46766f;box-shadow:0 0 60px rgba(69,189,170,.16)}
.lesson-score strong{font-size:31px}
.lesson-score span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#84cdbc;margin-top:4px}
.lesson-result>p:not(.lesson-brand){max-width:520px;margin:0 auto 20px;color:#a8bbd0;font-size:13px;line-height:1.55}
.lesson-result-actions{justify-content:center}

/* ---- responsive ---- */
@media(max-width:1180px){ .workspace{grid-template-columns:minmax(0,1fr) 330px} }
@media(max-width:900px){
  .app{gap:9px;padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))}
  .site-footer{gap:8px;font-size:8px;overflow-x:auto}.site-footer span:first-child{display:none}
  .brand-copy{display:none}
  .workspace{grid-template-columns:1fr;grid-template-rows:var(--stage-h) minmax(0,1fr)}
  .map-card,.side-panel{border-radius:18px}
  .pill-btn .btn-label{display:none}
  .pill-btn{padding:0 11px}
  .capacity-bar{min-height:48px;padding:7px 10px;gap:8px;border-radius:14px}
  .capacity-icon{width:31px;height:31px;border-radius:10px}
  .capacity-copy strong{font-size:13px}
  .capacity-kicker,.capacity-hint{display:none}
  .capacity-slots{margin-left:auto}
  .stage-note{display:none}
  button,.result{min-height:44px}
  .seg{min-height:36px}
  .modal{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .lesson-shell{max-height:100dvh;height:100dvh;width:100%;border-radius:0;border:0;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .lesson-backdrop{padding:0}
  .lesson-map-wrap{height:min(46dvh,440px);min-height:285px}
}
@media(max-width:900px) and (max-height:700px){ :root{--stage-h:46dvh} }
@media(max-width:430px){
  .capacity-copy strong{white-space:normal;line-height:1.12;max-width:155px}
  .capacity-slots{gap:3px}
  .capacity-slots i{width:8px;height:8px}
  .capacity-count{padding:4px 6px}
  .seg{padding:7px 8px;font-size:12px}
  .small-btn{padding:7px 8px;font-size:11px}
  .stats{gap:5px}
  .stat{padding:8px 6px}
  .stat strong{font-size:11px}
  .lesson-courses{grid-template-columns:1fr}
  .lesson-course-all{grid-column:auto}
  .lesson-intro{align-items:flex-start}
  .lesson-intro .small-btn{font-size:10px;padding:6px 7px}
  .lesson-playbar{grid-template-columns:auto 1fr}
  .lesson-progress-track{grid-column:1/-1}
  .lesson-response{align-items:stretch;flex-direction:column}
  .lesson-actions{justify-content:flex-end}
  .lesson-inset{width:62px;height:53px}
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ---- light theme ---- */
html[data-theme="light"]{
  --bg:#f5f8ff; --panel:#edf1f8; --panel2:#e4eaf3; --line:#c2cfde;
  --text:#06101d; --muted:#4a6174; --accent:#29a890; --accent-text:#f5f8ff; --danger:#cc2f47;
  --shadow:0 24px 70px rgba(0,0,0,.12);
  --search-bg:rgba(237,241,248,.96); --search-border:#b0bfcf;
  --result-bg:#f0f4fb; --result-border:#b8c6d6;
  --pill-bg:rgba(237,241,248,.95); --pill-border:#b8c8d8; --pill-text:#1a3048;
  --card-bg:linear-gradient(160deg,rgba(237,241,248,.95),rgba(245,248,255,.96)); --card-border:#c2cfde;
  --btn-bg:#e8eef7; --btn-border:#b8c8d8; --btn-text:#1a3048; --btn-hover:#dde5f1;
  --seg-bg:#e8eef7; --seg-border:#c2cfde; --seg-text:#4a6174; --seg-active:#d9e3f0;
  --toolbar-border:#c2cfde; --toolbar-bg:rgba(244,248,255,.3);
  --entity-bg:#edf1f8; --entity-border:#c2cfde;
  --stat-bg:#e8eef7; --stat-border:#c2cfde; --stat-label:#4a6174;
  --block-bg:#e8eef7; --block-border:#c2cfde;
  --modal-bg:#edf1f8; --modal-border:#c2cfde;
  --toast-bg:#edf1f8; --toast-border:#c2cfde;
  --tray-bg:#e8eef7; --tray-border:#c2cfde;
  --lesson-bg:#edf1f8; --lesson-border:#c2cfde;
  --daily-bg:#edf1f8; --daily-border:#c2cfde;

  /* Light geography: vibrant but soft ocean, warm paper landmass. The map
     reads as a printed atlas, so the accent fills stay the loudest thing
     on the stage. */
  --geo-water-1:#a8d5f0; --geo-water-2:#7fbde5;
  --geo-water-glow:rgba(255,255,255,.30);
  --geo-land:#f8f5ed; --geo-land-hover:#fffdf7; --geo-land-line:#5c7789;
  --geo-state-line:#8ea3b6; --geo-state-hover:#e9f1f8; --geo-state-hover-op:.85;
  --geo-grat:#ffffff; --geo-grat-op:.5;
  --geo-grid:rgba(255,255,255,.55); --geo-grid-axis:rgba(255,255,255,.8);
  --geo-globe-ocean:#8fc7ea; --geo-globe-rim:#4886b1;
  --geo-label-fill:#0a1b2c; --geo-label-halo:#f8f5ed;
  --geo-tile-label:#0f6b54;
  --geo-scale:#26455f;
  --geo-reveal-glow:rgba(10,27,44,.28);

  color-scheme:light;
}
html[data-theme="light"] body{background:radial-gradient(circle at 15% -10%,#e5f1fb 0,#f0f4fb 30%,#f5f8ff 76%)}
html[data-theme="light"] a{color:#1a8070}
html[data-theme="light"] .site-footer{color:#5d7080}
html[data-theme="light"] .site-footer a{color:#0f7a68}
html[data-theme="light"] .site-footer a:hover{color:#1a6a5c}
html[data-theme="light"] .beta{color:#0c7060}
html[data-theme="light"] #search::placeholder{color:#5e7086}
html[data-theme="light"] .result:hover,.result.active{background:#e8eef7}
html[data-theme="light"] .result-tag{color:#334a62;border-color:#c2cfe0}
html[data-theme="light"] .learn-spark{color:var(--accent)}
/* Map and globe colors are token-driven; see the --geo-* block above. */
html[data-theme="light"] .insight-main{color:var(--text)}
html[data-theme="light"] .insight-sub{color:var(--muted)}
html[data-theme="light"] .entity-card.is-active{border-color:#7ab5a5}
html[data-theme="light"] .entity-title span{color:var(--muted)}
html[data-theme="light"] .remove{background:#e8eef7;color:var(--muted)}
html[data-theme="light"] .stat label{color:var(--muted)}
html[data-theme="light"] .stat em{color:#5d7080}
html[data-theme="light"] .control-row{color:var(--muted)}
html[data-theme="light"] input[type=range]{accent-color:#1a8070}
html[data-theme="light"] .lock-btn{border-color:var(--line);background:#e8eef7}
html[data-theme="light"] .lock-btn.on{color:#1a8070;border-color:#8fa899;background:#cfe5dd}
html[data-theme="light"] .block h3{color:#1a8070}
html[data-theme="light"] .matrix th,.matrix td{border-bottom-color:#c2cfde}
html[data-theme="light"] .matrix th:first-child,.matrix td:first-child{color:var(--muted)}
html[data-theme="light"] .matrix thead th{color:#5d7080}
html[data-theme="light"] .matrix td.self{color:#7d8fa3}
html[data-theme="light"] .fact{border-bottom-color:#c2cfde;color:var(--muted)}
html[data-theme="light"] .fact b{color:var(--text)}
html[data-theme="light"] .empty{border-color:#c2cfde;color:var(--muted)}
html[data-theme="light"] .empty strong{color:var(--text)}
html[data-theme="light"] .legend{color:var(--muted)}
html[data-theme="light"] .data-note{border-top-color:var(--line);color:#5d7080}
html[data-theme="light"] .data-note button{color:#1a8070}
html[data-theme="light"] .chip{border-color:#c2cfde;color:var(--muted)}
html[data-theme="light"] .chip.warn{border-color:#b5956a;color:#8b6f42}
html[data-theme="light"] .chip.ok{border-color:#7ab5a5;color:#1a8070}
html[data-theme="light"] .toast{background:#edf1f8;border-color:#c2cfde;color:var(--text)}
html[data-theme="light"] .modal{background:var(--panel);border-color:var(--line)}
html[data-theme="light"] .modal h4{color:#1a8070}
html[data-theme="light"] .modal p,.modal li{color:var(--muted)}
html[data-theme="light"] .modal a{color:#1a8070}
html[data-theme="light"] .modal code{background:#e8eef7;border-color:var(--line)}
html[data-theme="light"] #diagList{color:#a3283f}
html[data-theme="light"] kbd{background:#e8eef7;border-color:var(--line)}