:root {
  color-scheme: dark;
  --bg: #07111f;
  --bg-soft: #0a1729;
  --surface: #0d1d32;
  --surface-2: #112640;
  --line: #203b59;
  --text: #eef7ff;
  --muted: #98adc3;
  --primary: #4c8dff;
  --primary-2: #55d6ff;
  --accent: #5ee6b5;
  --warm: #ffb85c;
  --danger: #ff7b91;
  --shadow: 0 22px 60px rgba(0, 0, 0, .28);
  --radius: 18px;
}

[data-theme="emerald"] { --primary:#10b981; --primary-2:#5eead4; --accent:#a3e635; --warm:#fbbf24; }
[data-theme="amber"] { --primary:#f59e0b; --primary-2:#fb7185; --accent:#fde047; --warm:#fb923c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 80% 0, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28rem), var(--bg); color:var(--text); font:15px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select { font:inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color:inherit; }
.skip-link { position:fixed; z-index:999; left:1rem; top:-5rem; background:var(--text); color:var(--bg); padding:.7rem 1rem; border-radius:8px; }
.skip-link:focus { top:1rem; }
.topbar { position:sticky; top:0; z-index:50; min-height:72px; display:flex; align-items:center; gap:2rem; padding:0 max(1.25rem, calc((100vw - 1180px)/2)); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(7,17,31,.86); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; line-height:1.15; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:white; background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 7px 22px color-mix(in srgb,var(--primary) 30%,transparent); font-size:1.35rem; }
.brand strong { display:block; letter-spacing:-.02em; }
.brand small { color:var(--muted); }
nav { display:flex; gap:1.4rem; margin-left:auto; }
nav a { color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:650; }
nav a:hover, nav a:focus-visible { color:var(--text); }
.theme-control { display:flex; align-items:center; gap:.55rem; color:var(--muted); font-size:.8rem; }
select { color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:.5rem .7rem; }
main { overflow:hidden; }
.hero, .section, footer { width:min(1180px, calc(100% - 2.5rem)); margin-inline:auto; }
.hero { min-height:620px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:5rem; padding:6rem 0; }
.eyebrow { margin:0 0 .55rem; color:var(--primary-2); font-size:.76rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:1.3rem; font-size:clamp(2.65rem,5.7vw,5rem); line-height:1.02; letter-spacing:-.055em; }
h2 { margin-bottom:.8rem; font-size:clamp(1.85rem,3.5vw,2.8rem); line-height:1.1; letter-spacing:-.04em; }
h3 { line-height:1.25; }
.hero-lead { max-width:620px; color:var(--muted); font-size:1.12rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0 2.4rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.68rem 1rem; border:1px solid transparent; border-radius:10px; text-decoration:none; font-weight:750; cursor:pointer; }
.button.primary { color:white; background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 60%,var(--primary-2))); box-shadow:0 10px 30px color-mix(in srgb,var(--primary) 24%,transparent); }
.button.secondary { color:var(--text); background:var(--surface); border-color:var(--line); }
.button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.hero-facts { display:flex; gap:2.3rem; padding:0; list-style:none; }
.hero-facts li { display:flex; flex-direction:column; }
.hero-facts strong { font-size:1.45rem; }
.hero-facts span { color:var(--muted); font-size:.78rem; }
.hero-orbit { position:relative; isolation:isolate; aspect-ratio:1; display:grid; place-items:center; }
.hero-orbit::before { content:""; position:absolute; inset:15%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--primary) 18%,transparent),transparent 70%); filter:blur(10px); }
.orbit { position:absolute; border:1px dashed color-mix(in srgb,var(--primary-2) 32%,transparent); border-radius:50%; animation:rotate 35s linear infinite; }
.orbit-one { inset:10%; }.orbit-two { inset:25%; animation-direction:reverse; animation-duration:25s; }
.hero-core { z-index:2; width:185px; height:185px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--primary-2) 40%,var(--line)); border-radius:50%; background:linear-gradient(145deg,var(--surface-2),var(--surface)); box-shadow:var(--shadow), inset 0 0 40px color-mix(in srgb,var(--primary) 10%,transparent); }
.hero-core span { color:var(--primary-2); font-size:3.3rem; }.hero-core small { color:var(--muted); }
.satellite { position:absolute; z-index:3; display:grid; place-items:center; width:72px; height:72px; border:1px solid var(--line); border-radius:22px; background:var(--surface); color:var(--muted); font-size:.76rem; font-weight:800; box-shadow:var(--shadow); }
.sat-api { top:7%; left:42%; }.sat-node { right:3%; top:43%; }.sat-net { bottom:7%; left:43%; }.sat-data { left:3%; top:43%; }
@keyframes rotate { to { transform:rotate(360deg); } }
.section { padding:6rem 0; border-top:1px solid rgba(255,255,255,.07); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:2.4rem; }
.section-heading > p { max-width:510px; margin-bottom:.45rem; color:var(--muted); }
.learning-path { scroll-margin-top:90px; }
.level-picker { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1rem; }
.level-picker::before { content:""; position:absolute; top:28px; left:9%; right:9%; height:1px; background:var(--line); z-index:-1; }
.level-button { min-height:112px; display:flex; flex-direction:column; align-items:flex-start; padding:1rem; color:var(--muted); text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--surface); cursor:pointer; transition:.2s ease; }
.level-button:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 55%,var(--line)); }
.level-button[aria-selected="true"] { color:var(--text); border-color:var(--primary-2); background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 15%,var(--surface)),var(--surface)); box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 12%,transparent); }
.level-button > span { color:var(--primary-2); font:800 .7rem ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.level-button strong { margin:.4rem 0 .1rem; font-size:1rem; }.level-button small { color:var(--muted); }
.level-status { display:grid; grid-template-columns:auto 180px; align-items:center; gap:1rem; margin:1.2rem 0; color:var(--muted); font-size:.72rem; }
.level-status span,.level-status strong { display:block; }.level-status strong { margin-top:.15rem; color:var(--text); font-size:.82rem; font-weight:650; }
.level-progress { height:5px; overflow:hidden; border-radius:999px; background:var(--line); }.level-progress span { display:block; width:25%; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); transition:width .3s ease; }
.level-panel { display:grid; grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr); min-height:480px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--bg-soft); box-shadow:var(--shadow); }
.level-copy { display:flex; flex-direction:column; padding:2.2rem; border-right:1px solid var(--line); }.level-copy h2 { font-size:clamp(2rem,4vw,3.2rem); }.level-lead { color:var(--muted); font-size:1.02rem; }
.level-takeaway { margin:1rem 0; padding:1rem; border-left:3px solid var(--primary-2); border-radius:0 10px 10px 0; background:color-mix(in srgb,var(--primary) 8%,var(--surface)); }.level-takeaway span { display:block; color:var(--primary-2); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.level-takeaway strong { display:block; margin-top:.3rem; }
.level-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:auto; padding-top:1.5rem; }
.level-lesson { display:grid; align-content:center; padding:2.2rem; background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 40%); }
.lesson-flow { display:flex; align-items:center; gap:.55rem; }.lesson-flow > i { color:var(--primary-2); font-style:normal; }.lesson-node { flex:1; min-height:128px; display:flex; flex-direction:column; justify-content:center; padding:1rem; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.lesson-node span { color:var(--primary-2); font-size:1.5rem; }.lesson-node strong { margin:.55rem 0 .2rem; }.lesson-node small { color:var(--muted); line-height:1.4; }
.state-board { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }.state-card { padding:1.2rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.state-card span { color:var(--primary-2); font-size:.7rem; font-weight:800; text-transform:uppercase; }.state-card strong { display:block; margin:.5rem 0; font-size:1.2rem; }.state-card p { margin:0; color:var(--muted); }.state-arrow { display:grid; gap:.35rem; color:var(--primary-2); text-align:center; font-size:1.4rem; }.state-arrow small { color:var(--muted); font-size:.62rem; text-transform:uppercase; }
.mini-yaml { margin:1rem 0 0; padding:1rem; overflow:auto; border:1px solid var(--line); border-radius:12px; background:#050c15; color:#b9f6e4; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.architecture-lesson { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.architecture-side { padding:1rem; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.architecture-side > span { color:var(--primary-2); font-size:.7rem; font-weight:800; text-transform:uppercase; }.architecture-side h3 { margin:.35rem 0 .8rem; }.architecture-side ul { display:grid; gap:.55rem; margin:0; padding:0; list-style:none; }.architecture-side li { padding:.5rem .65rem; border-radius:8px; background:var(--bg); }.architecture-side li small { display:block; color:var(--muted); }
.deep-timeline { display:grid; gap:.55rem; counter-reset:deep-step; }.deep-step { position:relative; display:grid; grid-template-columns:32px 1fr; gap:.7rem; padding:.65rem; border:1px solid var(--line); border-radius:11px; background:var(--surface); counter-increment:deep-step; }.deep-step::before { content:counter(deep-step); display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--primary-2); background:var(--bg); font-weight:800; }.deep-step strong,.deep-step small { display:block; }.deep-step small { color:var(--muted); }
.term-bridge { display:grid; grid-template-columns:260px 1fr; gap:2rem; align-items:center; margin-top:1rem; padding:1.4rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); }.term-bridge h3 { margin:0; }.term-list { display:flex; flex-wrap:wrap; gap:.55rem; }.term-chip { padding:.55rem .75rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--bg); }.term-chip b { color:var(--text); }.term-chip i { margin:0 .3rem; color:var(--primary-2); font-style:normal; }
.mental-model { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:stretch; gap:1rem; }
.mental-model article, .concept-grid article { padding:1.35rem; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 60%,transparent)); }
.mental-model article span { color:var(--primary-2); font:800 .75rem ui-monospace,monospace; }.mental-model article h3 { margin:.6rem 0 .3rem; }.mental-model article p { margin:0; color:var(--muted); font-size:.88rem; }
.mental-model > i, .object-chain > i { align-self:center; color:var(--primary-2); font-style:normal; }
.note { margin-top:1rem; padding:1rem 1.15rem; border-left:3px solid var(--primary-2); border-radius:0 10px 10px 0; background:color-mix(in srgb,var(--primary) 8%,var(--surface)); color:var(--muted); }.note strong { color:var(--text); }
.explorer-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); gap:1rem; }
.cluster-map, .detail-panel, .journey-card, .object-detail { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-soft); box-shadow:var(--shadow); }
.cluster-map { padding:1rem; }.map-zone { display:grid; gap:.65rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:rgba(13,29,50,.72); }
.edge-zone { grid-template-columns:repeat(3,1fr); margin-bottom:.75rem; }.map-columns { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }.control-zone,.node-zone { grid-template-columns:1fr 1fr; }.zone-label { grid-column:1/-1; margin:0; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.component { min-height:78px; display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:.6rem; padding:.65rem; text-align:left; color:var(--text); border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; font-weight:730; }
.component > span { grid-row:1/3; display:grid; place-items:center; width:38px; height:38px; color:var(--primary-2); border-radius:10px; background:color-mix(in srgb,var(--primary) 12%,var(--bg)); font:800 .8rem ui-monospace,monospace; }.component small { color:var(--muted); font-size:.7rem; font-weight:500; }.component:hover,.component.active { border-color:var(--primary-2); background:color-mix(in srgb,var(--primary) 8%,var(--surface-2)); }.component:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 40%,transparent); outline-offset:2px; }
.map-caption { margin:.8rem 0 0; color:var(--muted); font-size:.72rem; text-align:center; }.map-caption span { display:inline-block; width:8px; height:8px; margin:0 .3rem; border-radius:50%; background:var(--primary-2); }.map-caption span:nth-child(2) { background:var(--warm); }
.detail-panel { padding:1.5rem; }.detail-top { display:flex; justify-content:space-between; align-items:center; }.detail-top > span { display:grid; place-items:center; width:48px; height:48px; border-radius:13px; background:color-mix(in srgb,var(--primary) 14%,var(--surface)); color:var(--primary-2); font:800 .82rem ui-monospace,monospace; }.detail-top p { margin:0; color:var(--primary-2); font-size:.72rem; font-weight:800; text-transform:uppercase; }.detail-panel h3 { margin:1.25rem 0 .3rem; font-size:1.45rem; }.detail-panel > p { color:var(--muted); }.detail-panel dl { margin:1.5rem 0; }.detail-panel dl div { padding:1rem 0; border-top:1px solid var(--line); }.detail-panel dt { color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; }.detail-panel dd { margin:.25rem 0 0; }.text-link { color:var(--primary-2); font-weight:700; text-underline-offset:3px; }
.journey-tabs { display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.75rem; }.journey-tabs button { flex:0 0 auto; padding:.6rem .9rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; background:transparent; cursor:pointer; }.journey-tabs button[aria-selected="true"] { color:var(--text); border-color:var(--primary); background:color-mix(in srgb,var(--primary) 15%,transparent); }
.journey-card { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }.journey-visual { min-height:470px; display:grid; place-items:center; padding:2rem; background:radial-gradient(circle at center,color-mix(in srgb,var(--primary) 12%,transparent),transparent 62%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,24px 24px,24px 24px; }.flow-nodes { width:min(100%,440px); display:flex; flex-direction:column; gap:.7rem; }.flow-node { position:relative; display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--muted); transition:.25s ease; }.flow-node:not(:last-child)::after { content:"↓"; position:absolute; left:28px; bottom:-20px; z-index:3; color:var(--line); }.flow-node b { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--bg); color:var(--muted); }.flow-node.reached { color:var(--text); border-color:color-mix(in srgb,var(--primary) 52%,var(--line)); }.flow-node.active { transform:translateX(8px); border-color:var(--primary-2); box-shadow:0 0 28px color-mix(in srgb,var(--primary) 18%,transparent); }.flow-node.active b { color:var(--primary-2); }
.journey-content { padding:2rem; }.journey-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; }.progress { height:5px; margin:.8rem 0 2rem; overflow:hidden; border-radius:5px; background:var(--line); }.progress span { display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); transition:width .25s ease; }.journey-content h3 { font-size:1.65rem; margin-bottom:.6rem; }.journey-content > p:not(.eyebrow) { min-height:74px; color:var(--muted); }.journey-content pre { min-height:60px; overflow:auto; padding:1rem; border:1px solid var(--line); border-radius:10px; background:#050c15; color:#b9f6e4; white-space:pre-wrap; }.journey-controls { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }.icon-button { width:44px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:transparent; cursor:pointer; }
.object-chain { display:flex; align-items:stretch; gap:.6rem; overflow-x:auto; padding:.2rem .2rem 1rem; }.object-chain button { flex:1 0 145px; padding:1rem; color:var(--text); text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; }.object-chain button.active { border-color:var(--primary-2); }.object-chain strong,.object-chain small { display:block; }.object-chain small { color:var(--muted); }.object-detail { padding:1.3rem; margin-bottom:1rem; }.object-detail span { color:var(--primary-2); font-size:.7rem; font-weight:800; text-transform:uppercase; }.object-detail h3 { margin:.35rem 0; }.object-detail p { margin:0; color:var(--muted); }
.concept-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.concept-grid article p { margin:0; color:var(--muted); font-size:.87rem; }.concept-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:1rem; border-radius:11px; background:color-mix(in srgb,var(--primary) 12%,var(--bg)); color:var(--primary-2); font-size:1.2rem; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }.command-list,.myth-list { display:grid; gap:.65rem; }.command-list button { display:grid; grid-template-columns:1fr auto; gap:.1rem 1rem; padding:.9rem 1rem; color:var(--text); text-align:left; border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; }.command-list code { color:var(--primary-2); }.command-list span { color:var(--muted); font-size:.75rem; }.command-list b { grid-row:1/3; grid-column:2; align-self:center; color:var(--muted); font-size:.7rem; }.command-list button:hover b { color:var(--text); }
details { border:1px solid var(--line); border-radius:11px; background:var(--surface); } summary { padding:.9rem 1rem; cursor:pointer; font-weight:730; } details p { margin:0; padding:0 1rem 1rem; color:var(--muted); }
.reference-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.reference-grid a { min-height:145px; display:flex; flex-direction:column; padding:1.15rem; text-decoration:none; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.reference-grid a:hover { transform:translateY(-2px); border-color:var(--primary-2); }.reference-grid span { color:var(--primary-2); font-size:.7rem; font-weight:800; text-transform:uppercase; }.reference-grid strong { margin:.45rem 0; }.reference-grid small { margin-top:auto; color:var(--muted); }
footer { display:flex; align-items:center; gap:.8rem; padding:2rem 0; border-top:1px solid rgba(255,255,255,.07); color:var(--muted); } footer p { margin:0; } footer a { margin-left:auto; color:var(--primary-2); }
#toast { position:fixed; z-index:100; right:1rem; bottom:1rem; translate:0 150%; padding:.7rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); box-shadow:var(--shadow); transition:translate .25s; } #toast.show { translate:0; }
@media (max-width:900px) { nav { display:none; }.hero { min-height:auto; grid-template-columns:1fr; gap:2rem; }.hero-orbit { width:min(100%,520px); margin:auto; }.level-picker { grid-template-columns:1fr 1fr; }.level-panel { grid-template-columns:1fr; }.level-copy { border-right:0; border-bottom:1px solid var(--line); }.term-bridge { grid-template-columns:1fr; gap:1rem; }.mental-model { grid-template-columns:1fr 1fr; }.mental-model > i { display:none; }.explorer-layout,.journey-card,.two-column { grid-template-columns:1fr; }.concept-grid,.reference-grid { grid-template-columns:1fr 1fr; }.journey-visual { min-height:390px; } }
@media (max-width:600px) { .topbar { min-height:64px; padding-inline:1rem; }.brand small,.theme-control { display:none; }.hero,.section,footer { width:min(100% - 1.5rem,1180px); }.hero { padding:4rem 0; }.hero-orbit { transform:scale(.9); }.hero-facts { gap:1.4rem; }.section { padding:4rem 0; }.section-heading { display:block; }.level-picker { grid-template-columns:1fr; }.level-button { min-height:82px; }.level-picker::before { display:none; }.level-status { grid-template-columns:1fr; }.level-panel { min-height:0; }.level-copy,.level-lesson { padding:1.25rem; }.lesson-flow { flex-direction:column; align-items:stretch; }.lesson-flow > i { transform:rotate(90deg); text-align:center; }.lesson-node { min-height:95px; }.state-board,.architecture-lesson { grid-template-columns:1fr; }.state-arrow { transform:rotate(90deg); }.term-bridge { padding:1rem; }.mental-model,.map-columns,.edge-zone,.control-zone,.node-zone,.concept-grid,.reference-grid { grid-template-columns:1fr; }.zone-label { grid-column:auto; }.journey-content { padding:1.25rem; }.journey-visual { min-height:350px; padding:1.25rem; }.reference-grid a { min-height:120px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }