body.landing {
  color-scheme: dark;
  --paper: #16191e;
  --ink: #f3f6f6;
  --muted: #b7c4c9;
  --line: #ffffff26;
  --accent: #82fae9;
  --surface: #1d242b;
  background: var(--paper);
  color: var(--ink);
}
.landing :focus-visible { outline-color: var(--accent); }
.landing .skip { background: var(--surface); z-index: 4; }
.landing .brand > span { background: transparent; color: var(--accent); width: auto; }
.landing .button { border-radius: 7px; }
.landing .button-main { background: var(--accent); border-color: transparent; color: #112724; }
.landing .button-main:hover { background: #b6fff4; }
.landing .button-quiet { border-color: var(--line); }
.landing .button-quiet:hover { background: var(--surface); }
.landing .eyebrow { color: var(--accent); letter-spacing: .14em; }

.landing-hero { overflow: clip; }
.hero-stage { min-height: 490px; position: relative; isolation: isolate; display: grid; align-items: center; }
.hero-world {
  position: absolute; inset: -26px -8% -10px 37%; pointer-events: none;
  background: radial-gradient(ellipse at 56% 48%, #2a4149, #202b32 30%, transparent 69%);
}
.hero-world::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--paper), transparent 41%);
}
.hero-world canvas { display: block; width: 100%; height: 100%; }
.landing-copy { position: relative; z-index: 1; padding-block: 56px; max-width: 650px; pointer-events: none; }
.landing-copy :is(p,h1,a) { pointer-events: auto; width: fit-content; }
.hero-kicker { display: flex; gap: 10px; align-items: center; }
.hero-kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 15px currentColor;
}
.landing-copy h1 {
  margin: 16px 0 20px; font-size: clamp(35px, 6.35vw, 83px);
  font-weight: 800; letter-spacing: -.067em; line-height: 1.02;
}
.landing-copy h1 em { color: var(--accent); font-style: normal; white-space: nowrap; }
.chatgpt-label { display: inline-flex; align-items: center; gap: 9px; }
.chatgpt-label img { display: block; flex: none; }
.landing-copy h1 .chatgpt-label { gap: clamp(9px, 1.5vw, 18px); }
.landing-copy h1 .chatgpt-label img { width: clamp(24px, 3vw, 32px); height: auto; }
.landing-lead { max-width: 38ch; color: var(--muted); font-size: clamp(15px, 1.65vw, 19px); }
.landing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 19px; margin-top: 24px; }
.landing-text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 800; text-underline-offset: 5px; }
.landing-facts { margin-top: 13px; color: var(--muted); font-size: 12px; }
.landing-facts span { margin-inline: 4px; }
.hero-guide {
  position: fixed; z-index: 5;
  right: max(14px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
  width: clamp(150px, 14vw, 188px); margin: 0; pointer-events: none;
}
.hero-guide .host-surface { position: relative; aspect-ratio: 1; }
.hero-guide .host-surface::before {
  content: ''; position: absolute; inset: 0 9% 14%; pointer-events: none;
  background: radial-gradient(ellipse at 52% 46%, #0b131cfa, #101a24df 30%, #14202955 57%, transparent 74%);
}
.hero-guide :is(img, video) {
  position: relative; width: 100%; height: auto; display: block; pointer-events: none; mix-blend-mode: screen;
  mask-image: linear-gradient(to bottom, transparent, black 8%, black 66%, transparent 98%),
              radial-gradient(ellipse 50% 64% at 50% 48%, black 66%, transparent);
  mask-composite: intersect;
}
.hero-guide video { position: absolute; inset: 0; height: 100%; opacity: 0; }
.hero-guide.is-speaking img { opacity: 0; }
.hero-guide.is-speaking video { opacity: 1; }
.hero-guide figcaption { position: relative; display: grid; justify-items: center; margin-top: -13px; }
.hero-guide :is(.presenter-portrait-grip, .presenter-move) {
  position: absolute; pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
  -webkit-user-select: none;
}
.hero-guide .presenter-portrait-grip { inset: 8% 15% 12%; }
.hero-guide .presenter-move {
  isolation: isolate; inset: 0 0 auto auto; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; padding: 0; background: transparent; color: var(--accent);
}
.hero-guide .presenter-move::before {
  content: ''; position: absolute; inset: 8px; border: 1px solid #82fae959;
  border-radius: 50%; background: #111923f2; z-index: -1;
}
.hero-guide.is-moving :is(.presenter-portrait-grip, .presenter-move) { cursor: grabbing; }
.guide-trigger {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 9px; border: 0; background: transparent; color: var(--accent);
  font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; pointer-events: auto;
}
.guide-trigger::before {
  content: ''; position: absolute; z-index: -1; inset: 7px 0; border-radius: 30px;
  border: 1px solid #82fae959; background: #111923f2;
}
.guide-trigger:hover::before { background: #22403e; }
.intro-status {
  position: absolute; inset: auto 0 calc(100% - 4px); padding: 5px 7px; border-radius: 5px;
  background: #0e151eeb; color: var(--ink); font-size: 12px; line-height: 1.35;
  text-align: center;
}
.planet-toggle {
  position: absolute; top: 17px; right: 0; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 7px; background: #16191ee8;
  color: var(--muted); font-size: 12px;
}
.learning-path {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line); list-style: none; margin-block: 0; padding: 0;
}
.learning-path li { display: flex; gap: 12px; padding: 17px 12px 17px 0; font-size: 14px; font-weight: 800; }
.learning-path li > span, .lesson-list li > span { color: var(--accent); font: 12px/1.7 monospace; }
.learning-path small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }

.landing-depth { position: relative; isolation: isolate; overflow: clip; }
.landing-content { position: relative; }
.deep-sky {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 54% 30% at 98% 18%, #295d643d, transparent),
    radial-gradient(ellipse 50% 33% at 2% 63%, #41426e42, transparent),
    radial-gradient(ellipse 48% 28% at 99% 93%, #2d4d7555, transparent),
    linear-gradient(180deg, transparent, #141924 24%, #151c29 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 6%, black 94%, transparent);
}
.sky-stars, .sky-worlds { position: absolute; inset: -95px 0; }
.sky-far {
  background-image:
    radial-gradient(circle at 13% 19%, #b7e3f575 .65px, transparent 1.15px),
    radial-gradient(circle at 83% 59%, #c5e7ff82 .6px, transparent 1.2px),
    radial-gradient(circle at 39% 81%, #b7cfef57 .65px, transparent 1.2px),
    radial-gradient(circle at 79% 12%, #a4c7df7a .65px, transparent 1.25px),
    radial-gradient(circle at 61% 35%, #c4d5ee61 .5px, transparent 1.05px),
    radial-gradient(circle at 18% 63%, #c4d5ee54 .55px, transparent 1.1px);
  background-size: 211px 127px, 193px 151px, 149px 233px, 257px 173px, 137px 181px, 229px 139px;
  transform: translateY(var(--sky-far, 0px));
}
.sky-near {
  background-image:
    radial-gradient(circle at 19% 23%, #c2fffdce 1px, #82faf246 1.7px, transparent 4px),
    radial-gradient(circle at 73% 58%, #d8e4ffe3 .9px, #a3b5ff3d 1.6px, transparent 4.5px),
    radial-gradient(circle at 78% 24%, #d6e9ffa3 .7px, transparent 2px),
    radial-gradient(circle at 57% 88%, #a4f4ffbf .85px, #82e4ff37 1.7px, transparent 3px);
  background-size: 469px 373px, 577px 487px, 397px 313px, 509px 419px;
  transform: translateY(var(--sky-near, 0px));
  animation: sky-shimmer 6s ease-in-out infinite alternate paused;
}
.sky-worlds { transform: translateY(var(--sky-worlds, 0px)); }
.sky-world { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.sky-surface {
  position: absolute; z-index: 1; inset: 0; overflow: hidden; border-radius: inherit; background: inherit;
}
.sky-surface::before, .sky-surface::after { content: ''; position: absolute; }
.sky-surface::before {
  inset: -8% -56%; transform: translateX(17%) rotate(-16deg);
  background: var(--clouds);
  animation: sky-rotation var(--rotation-time, 28s) ease-in-out infinite alternate paused;
}
.sky-surface::after {
  inset: 0;
  background: radial-gradient(ellipse at 24% 23%, #e2f7ff18, transparent 49%),
              radial-gradient(ellipse at 95% 90%, #0c101be6, transparent 72%);
  box-shadow: inset 4px 2px 12px #a8edf419;
}
.sky-world.is-visible .sky-surface::before, .sky-near.is-visible { animation-play-state: running; }
.is-motion-paused .sky-world .sky-surface::before, .is-motion-paused .sky-near { animation-play-state: paused; }
@keyframes sky-rotation {
  to { transform: translateX(-18%) rotate(-16deg); }
}
@keyframes sky-shimmer {
  from { opacity: .56; }
  to { opacity: 1; }
}
.sky-world-teal {
  --clouds: radial-gradient(ellipse at 37% 42%, #9ee5dd46, transparent 23%),
    radial-gradient(ellipse at 57% 63%, #6ebebf34, transparent 18%),
    repeating-linear-gradient(0deg, transparent 0 12%, #5aa6a32b 13% 14%, #77bcba20 15% 19%, transparent 21% 26%);
  width: clamp(140px, 29vw, 390px); top: 11%; right: clamp(-125px, -7vw, -33px);
  border: 1px solid #84cdd15c;
  background:
    radial-gradient(ellipse at 9% 23%, #59989e61, transparent 65%),
    radial-gradient(ellipse at 72% 79%, #111825 25%, transparent 66%),
    #192b3a;
  box-shadow: -12px -9px 55px #54ced225, inset 7px 4px 22px #8de4e23b, inset -25px -19px 65px #111821;
}
.sky-world-ringed {
  --rotation-time: 22s;
  --clouds: radial-gradient(ellipse at 45% 29%, #a6a7e65e, transparent 24%),
    radial-gradient(ellipse at 63% 55%, #809be846, transparent 20%),
    repeating-linear-gradient(0deg, transparent 0 12%, #9eb0eb27 14% 17%, transparent 19% 28%);
  width: clamp(130px, 23vw, 300px); top: 45%; left: clamp(-110px, -7vw, -28px);
  border: 1px solid #9e9dcc57;
  background: radial-gradient(ellipse at 31% 18%, #566486, #303853 42%, #1d2338 67%, #161b28 90%);
  box-shadow: -8px -4px 60px #8596de30, inset 4px 3px 16px #9fabe133;
}
.sky-world-ringed::before, .sky-world-ringed::after {
  content: ''; position: absolute; inset: 39% -37%; border-radius: 50%; transform: rotate(-24deg);
  border: 1px solid #b8c2eb68; box-shadow: 0 0 0 6px #8495d333, 0 0 0 10px #8495d321;
}
.sky-world-ringed::before { z-index: 0; clip-path: inset(-12px -12px 50% -12px); }
.sky-world-ringed::after { z-index: 2; clip-path: inset(50% -12px -12px -12px); }
.sky-world-blue {
  --rotation-time: 18s;
  --clouds: radial-gradient(ellipse at 37% 38%, #96d4f866, transparent 26%),
    radial-gradient(ellipse at 60% 59%, #739dd96b, transparent 19%);
  width: clamp(85px, 12vw, 150px); top: 77%; right: clamp(8px, 6vw, 98px);
  border: 1px solid #80b6dc59;
  background: radial-gradient(ellipse at 30% 20%, #4c73959c, #253950 48%, #172132 76%);
  box-shadow: 0 0 46px #63acdc36, inset 2px 3px 13px #91c6eb3a;
}
.landing-section { padding-block: clamp(32px, 5.4vw, 64px); border-bottom: 1px solid var(--line); }
.landing-section h2 { margin: 10px 0 16px; font-size: clamp(27px, 4.5vw, 53px); text-wrap: balance; }
.landing-section p:not(.eyebrow) { max-width: 65ch; color: var(--muted); }
.landing-section :is(h2,h3,summary,p,a) { text-shadow: 0 1px 7px #10141d; }
.landing-section .button-main { text-shadow: none; }
.lesson-list {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(16px, 3.4vw, 42px);
  margin: 26px 0 0; padding: 0; list-style: none;
}
.lesson-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start;
  gap: 6px 16px; min-width: 0; padding-block: 16px; border-top: 1px solid var(--line);
}
.lesson-list h3 { margin-bottom: 5px; font-size: clamp(16px, 2vw, 20px); }
.lesson-list p { font-size: 14px; }
.lesson-list a {
  grid-column: 2; justify-self: start; display: inline-flex; gap: 7px; align-items: center;
  min-height: 44px; color: var(--accent); font-weight: 800; font-size: 13px; text-underline-offset: 4px;
}
.test-note { margin-top: 11px; padding: 14px 17px; border-left: 2px solid var(--accent); background: var(--surface); font-size: 14px; }
.test-note strong { display: block; margin-bottom: 3px; }
.next-level {
  padding-inline: clamp(18px, 4vw, 44px);
  background: linear-gradient(100deg, #17252ad4, #203e43aa);
}
.course-questions details { border-top: 1px solid var(--line); }
.course-questions summary { min-height: 44px; padding-block: 12px; font-weight: 800; cursor: pointer; }
.course-questions details p { padding-bottom: 16px; }
.start-course { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; border-bottom: 0; }
.landing .footer span:first-child { color: var(--muted); }
.landing .footer { flex-wrap: wrap; row-gap: 6px; }
.landing .footer small { font-size: inherit; }
.landing .footer a { text-underline-offset: 4px; }

@media (max-width: 720px) {
  .landing .wrap { width: calc(100% - 32px); }
  .hero-stage { display: block; min-height: auto; }
  .hero-world { inset: -28px -16px auto; height: 300px; }
  .hero-world::after { background: linear-gradient(0deg, var(--paper), transparent 67%); }
  .landing-copy { padding-block: clamp(180px, 50vw, 245px) 24px; }
  .landing-copy h1 { font-size: clamp(35px, 8.8vw, 55px); margin: 12px 0 15px; }
  .landing-actions { gap: 4px 14px; margin-top: 18px; }
  .landing-facts { margin-top: 8px; }
  .hero-guide { width: 150px; }
  .planet-toggle { top: 8px; left: 0; right: auto; }
  .learning-path { grid-template-columns: 1fr; }
  .learning-path li { padding-block: 9px; }
  .learning-path li + li { border-top: 1px solid var(--line); }
}
@media (max-width: 510px) {
  .lesson-list { grid-template-columns: 1fr; }
  .sky-world-teal { top: 13%; right: -55px; }
  .sky-world-ringed { top: 51%; left: -50px; }
  .sky-world-blue { top: 81%; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-stars, .sky-worlds { transform: none; }
  .sky-world .sky-surface::before, .sky-near { animation: none; }
}