/* The Academy: XP, the orbit map, the curriculum and lesson pages. Also loaded on the home page for its preview. */
.xp { width: 100%; max-width: 460px; padding: 18px 20px; display: grid; gap: 10px; }
.xp__top { display: flex; align-items: baseline; justify-content: space-between; }
.xp__rank { font-size: 1.7rem; line-height: 1; }
.xp__bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.xp__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--doppler); box-shadow: 0 0 14px rgba(255, 181, 74, .6); transition: width 1.2s var(--ease); }
.xp__sub { margin: 0; }
.orbit-map { position: relative; aspect-ratio: 1.1; width: 100%; }
.orbit-map svg { width: 100%; height: 100%; overflow: visible; }
.orbit-map .orb-ring { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.orbit-map .orb-label { font: 500 11px var(--font-mono); letter-spacing: .14em; fill: var(--dim); text-transform: uppercase; }
.orbit-map .planet { cursor: pointer; }
.orbit-map .planet circle { fill: #1a1a26; stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; transition: r .3s var(--ease), fill .3s; }
.orbit-map .planet.done circle { fill: var(--gold); stroke: var(--corona); filter: drop-shadow(0 0 6px rgba(255, 181, 74, .9)); }
.orbit-map .planet.next circle { fill: var(--blue); stroke: #dff1ff; filter: drop-shadow(0 0 8px rgba(124, 196, 255, .9)); }
.orbit-map .planet:hover circle, .orbit-map .planet:focus-visible circle { fill: var(--corona); }
.orbit-map .planet:focus-visible { outline: none; }
.orbit-map .core { fill: #000; stroke: rgba(255, 233, 194, .7); stroke-width: 1.4; filter: drop-shadow(0 0 18px rgba(255, 160, 70, .55)); }
.orbit-tip {
  position: absolute; z-index: 3; pointer-events: none; padding: 10px 14px; border-radius: 12px; max-width: 260px;
  background: rgba(14, 14, 21, .95); border: 1px solid var(--line-2); font-size: .84rem; line-height: 1.4; opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .15s;
}
.orbit-tip.is-on { opacity: 1; }
.orbit-tip small { display: block; font: 500 .66rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }

/* ---------- Academy hub ---------- */
.academy-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.academy-hero .display { font-size: clamp(3rem, 6.6vw, 6.2rem); margin: 18px 0 22px; }
.xp--big { max-width: 560px; margin-top: 28px; padding: 22px 24px; }
.xp--big .xp__rank { font-size: 2.2rem; }
@media (max-width: 1000px) { .academy-hero__grid { grid-template-columns: 1fr; } .academy-hero .orbit-map { max-width: 600px; margin: 0 auto; } }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.how__steps li { display: grid; gap: 10px; align-content: start; }
.how__n { font-size: 3rem; line-height: 1; color: var(--gold-2); }
.how__steps h3 { margin: 0; font: 500 1.2rem/1.3 var(--font-sans); }
.how__steps p { margin: 0; color: var(--text-2); font-size: .95rem; }
.how__steps a { color: var(--gold-2); }
@media (max-width: 1000px) { .how__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .how__steps { grid-template-columns: 1fr; } }
.orbits { display: grid; gap: clamp(36px, 5vw, 64px); }
.orbit-block { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 20px clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: calc(var(--nav-h) + 20px); }
.orbit-block__head { display: flex; gap: 18px; align-items: flex-start; position: sticky; top: calc(var(--nav-h) + 24px); }
.orbit-block__n { font-size: 4.6rem; line-height: .8; color: var(--gold-2); min-width: 1.4em; }
.orbit-block__head .h3 { margin: 10px 0 8px; font-size: 1.7rem; }
.orbit-block__head .muted { margin: 0; font-size: .95rem; }
.lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lesson-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; }
.lesson-card__num { font-size: .8rem; color: var(--dim); letter-spacing: .06em; }
.lesson-card__body { display: grid; gap: 4px; }
.lesson-card__title { font: 400 1.5rem/1.15 var(--font-serif); color: var(--text); }
.lesson-card__dek { font-size: .92rem; color: var(--muted); }
.lesson-card__meta { display: grid; justify-items: end; gap: 6px; font-size: .74rem; color: var(--muted); }
.lesson-card__done { display: none; width: 26px; height: 26px; border-radius: 50%; place-items: center; background: radial-gradient(circle at 30% 25%, #ffe9c2, #ffb54a 60%, #ff7a3d); color: #2a1604; }
.lesson-card__done .i { width: 14px; height: 14px; stroke-width: 2.4; }
.lesson-card.is-done { border-color: rgba(255, 181, 74, .35); }
.lesson-card.is-done .lesson-card__done { display: grid; }
.lesson-card.is-next { border-color: rgba(124, 196, 255, .45); box-shadow: 0 0 0 1px rgba(124, 196, 255, .15), 0 20px 50px -30px rgba(124, 196, 255, .6); }
.lesson-card.is-next .lesson-card__num { color: var(--blue); }
@media (max-width: 900px) { .orbit-block { grid-template-columns: 1fr; } .orbit-block__head { position: static; } }
@media (max-width: 560px) { .lesson-card { grid-template-columns: 1fr auto; } .lesson-card__num { display: none; } }
.ranks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ranks li { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: grid; gap: 6px; }
.ranks li b { font: 400 1.5rem/1.1 var(--font-serif); }
.ranks li span { font: 500 .72rem/1.2 var(--font-mono); color: var(--muted); letter-spacing: .08em; }
.ranks li small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.ranks li.is-here { border-color: rgba(255, 181, 74, .5); background: rgba(255, 181, 74, .07); }
.ranks li.is-past b { color: var(--gold-2); }
@media (max-width: 1100px) { .ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ranks { grid-template-columns: 1fr 1fr; } }
.academy-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.academy-more .card { display: grid; gap: 8px; align-content: start; }
.academy-more__t { font-size: 1.5rem; line-height: 1.15; color: var(--text); }
@media (max-width: 1000px) { .academy-more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .academy-more { grid-template-columns: 1fr; } }

/* ---------- Lesson pages ---------- */
.lesson__progress { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 2px; pointer-events: none; }
.lesson__progress span { display: block; height: 100%; width: 0; background: var(--doppler); box-shadow: 0 0 10px rgba(255, 181, 74, .8); }
.lesson__hero { padding-bottom: clamp(30px, 4vw, 54px); }
.lesson__hero .page-hero__orb { opacity: .35; right: -22vw; top: 2vw; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-2); }
.lesson__title { font-size: clamp(2.6rem, 6vw, 5rem) !important; line-height: .98; margin: 18px 0 20px !important; text-wrap: balance; }
.lesson__meta { margin-top: 22px; gap: 10px 22px; font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.lesson__meta > span { display: inline-flex; align-items: center; gap: 7px; }
.lesson__meta .i { width: 15px; height: 15px; }
.lesson__status { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.lesson__status.is-done { color: #2a1604; background: var(--gold-2); border-color: var(--gold-2); }
.lesson__layout { display: grid; gap: 28px; padding-bottom: clamp(60px, 8vw, 110px); }
.lesson__body { font-size: 1.1rem; line-height: 1.75; }
.lesson__body > p:first-child::first-letter { float: left; font: 400 4.4em/.8 var(--font-serif); margin: .06em .1em 0 0; color: var(--gold-2); }
.lesson__box { padding: clamp(20px, 3vw, 30px); }
.lesson__takeaways { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lesson__takeaways li { position: relative; padding-left: 28px; color: var(--text); }
.lesson__takeaways li::before { content: ''; position: absolute; left: 0; top: .6em; width: 14px; height: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.do-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.do-list label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; cursor: pointer; color: var(--text); }
.do-list input { position: absolute; opacity: 0; pointer-events: none; }
.do-list__box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: all .2s; margin-top: 2px; }
.do-list__box .i { width: 15px; height: 15px; stroke-width: 2.6; }
.do-list input:checked + .do-list__box { background: var(--gain); border-color: var(--gain); color: #04140d; }
.do-list input:checked ~ span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.do-list input:focus-visible + .do-list__box { outline: 2px solid var(--gold); outline-offset: 2px; }
.quiz { display: grid; gap: 22px; padding: clamp(22px, 3vw, 34px); }
.quiz__head p { margin: 8px 0 0; }
.quiz__q { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.quiz__q legend { font: 500 1.08rem/1.45 var(--font-sans); color: var(--text); margin-bottom: 12px; padding: 0; }
.quiz__q legend .mono { color: var(--gold-2); font-size: .8rem; margin-right: 8px; }
.quiz__opts { display: grid; gap: 8px; }
.quiz__opt { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .2s, background .2s; }
.quiz__opt:hover { border-color: var(--line-2); }
.quiz__opt input { margin: 3px 0 0; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.quiz__opt:has(input:checked) { border-color: rgba(255, 181, 74, .55); background: rgba(255, 181, 74, .06); }
.quiz__opt.is-right { border-color: rgba(63, 224, 165, .6) !important; background: rgba(63, 224, 165, .08) !important; }
.quiz__opt.is-wrong { border-color: rgba(255, 107, 107, .6) !important; background: rgba(255, 107, 107, .07) !important; }
.quiz__why { margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(124, 196, 255, .06); border: 1px solid rgba(124, 196, 255, .2); font-size: .92rem; color: var(--text-2); }
.quiz__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.quiz__result { margin: 0; font-size: .95rem; }
.quiz__result.is-ok { color: var(--gain); }
.quiz__result.is-err { color: var(--gold-2); }
.lesson__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lesson__pager .card { display: grid; gap: 6px; }
.lesson__pager-next { text-align: right; }
.lesson__pager-title { font: 400 1.35rem/1.2 var(--font-serif); color: var(--text); }
@media (max-width: 640px) { .lesson__pager { grid-template-columns: 1fr; } .lesson__pager-next { text-align: left; } }