/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

/* Lesson pages, on the home's tokens (home.css): section tabs under the nav, the lesson index on the left, the lesson
   with its shader behind the title, the explanation, the sandbox and the way to the next lesson. */
.lesson-page { background: var(--ink); }
.lesson-page main, .lesson-page .foot { z-index: auto; }
/* The classroom spans the window, so the bar does too: logo, tabs and index start on the same gutter. */
.lesson-page .nav { padding-inline: var(--gutter); }
.lesson-page .foot .wrap { width: calc(100% - 2 * var(--gutter)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The section tabs ── */
.tabs { position: sticky; z-index: 50; top: 68px; margin-top: 68px; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 var(--gutter);
  background: rgba(5, 4, 3, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.tabs-back { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); transition: border-color .3s; }
.tabs-back:hover { border-color: var(--gold); }
.tabs-back svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.tabs-row { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent); }
.tabs-row::-webkit-scrollbar { display: none; }
.tabs-row a { position: relative; flex: none; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--muted); white-space: nowrap; transition: color .3s, background .3s; }
.tabs-row a small { font: 500 10px/1 var(--mono); color: var(--quiet); }
.tabs-row a:hover { color: var(--cream); }
.tabs-row a.on { color: var(--cream); background: rgba(232, 200, 154, .07); }
.tabs-row a.on small { color: var(--gold); }
.tabs-row a.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -9px; height: 2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 14px rgba(232, 200, 154, .7); }
.tabs-lessons { display: none; flex: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tabs-lessons i { width: 12px; height: 8px; border-top: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); position: relative; }
.tabs-lessons i::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 1.5px; background: var(--gold); }

/* ── The room: index and lesson ── */
.room { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: calc(100svh - 122px); }
.index { position: sticky; top: 122px; height: calc(100svh - 122px); overflow-y: auto; border-right: 1px solid var(--line); background: rgba(10, 8, 6, .6); scrollbar-width: thin; }
.index-head { padding: var(--s6) var(--gutter) var(--s5); border-bottom: 1px solid var(--line); }
.index-head h2, .drawer .index-head h2 { margin-top: 12px; font: 300 26px/1.15 var(--sans); color: var(--cream); letter-spacing: -.01em; }
/* the list text starts at the gutter: the link's 14 px padding sits inside it */
.index-list { list-style: none; padding: var(--s2) calc(var(--gutter) - 14px) var(--s5); }
.index-list a { position: relative; display: grid; grid-template-columns: 38px 1fr; align-items: center; padding: 13px 14px; border-radius: 12px; font-size: 15.5px; color: var(--muted);
  border: 1px solid transparent; transition: color .3s, background .3s, border-color .3s; }
.index-list .n { font: 500 12px/1 var(--mono); color: var(--quiet); transition: color .3s; }
.index-list a:hover { color: var(--cream); }
.index-list a:hover .n { color: var(--gold); }
.index-list a.on { color: var(--cream); background: rgba(232, 200, 154, .08); border-color: var(--line-2); }
.index-list a.on .n { color: var(--gold); }
.index-list a.on::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 12px rgba(232, 200, 154, .8); }

.lesson { min-width: 0; padding: 0 var(--gutter) var(--s9); transition: opacity .28s var(--ease), filter .28s var(--ease), transform .28s var(--ease); }
.lesson.leaving { opacity: 0; filter: blur(10px); transform: translateY(8px); }
.lesson > * { max-width: 920px; margin-left: auto; margin-right: auto; }

/* The lesson's shader runs behind its title, fading into the page. */
.lhero { position: relative; max-width: none; margin: 0 calc(-1 * var(--gutter)); padding: var(--section-y) var(--gutter) clamp(var(--s7), 5.6vw, 80px); overflow: hidden; isolation: isolate; }
.lhero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .5;
  -webkit-mask: radial-gradient(120% 90% at 85% 30%, #000 20%, transparent 75%); mask: radial-gradient(120% 90% at 85% 30%, #000 20%, transparent 75%); }
/* the veil over the shader fades out at its foot, so the page background continues without a seam */
.lhero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 4, 3, .92) 25%, rgba(5, 4, 3, .35) 70%, rgba(5, 4, 3, .1));
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.lhero-in { max-width: 920px; margin: 0 auto; }
.kicker.live { display: inline-flex; align-items: center; gap: 10px; }
.kicker.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.lnum { margin-top: var(--head-gap); font: 200 clamp(84px, 11vw, 150px)/.9 var(--sans); letter-spacing: -.04em;
  background: linear-gradient(180deg, #f6e2bf, #c99a62); -webkit-background-clip: text; background-clip: text; color: transparent; animation: rise 1s var(--ease) both; }
.ltitle { margin-top: 8px; font: 300 clamp(48px, 6.6vw, 92px)/1 var(--sans); letter-spacing: -.03em; color: var(--cream); }
.ldesc { margin-top: var(--lead-gap); max-width: 680px; font: 300 clamp(20px, 2vw, 26px)/1.4 var(--sans); color: var(--muted); }

/* ── Note, explanation ── */
.note { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); margin-top: var(--s2); margin-bottom: var(--s7); padding: var(--s1) 0 var(--s1) var(--s5); border-left: 1px solid var(--line-2); }
.note b { font: 500 11px/2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.note p { font-size: 18px; line-height: 1.7; color: var(--text); }
.note em, .explain em { color: var(--gold); font-style: normal; }
.explain { font-size: 18px; line-height: 1.78; color: rgba(239, 230, 216, .78); }
.explain > * + * { margin-top: var(--s5); }
.explain > p:first-child em:only-child { display: block; font: 400 clamp(26px, 2.8vw, 36px)/1.25 var(--sans); letter-spacing: -.01em; color: var(--cream); }
.explain strong { color: var(--cream); font-weight: 500; }
.explain code { font: 400 .84em/1 var(--mono); color: #ffe2b4; background: rgba(232, 200, 154, .1); border: 1px solid rgba(232, 200, 154, .16); border-radius: 6px; padding: 3px 6px; }
.explain .gold { color: var(--gold); }
.explain ul { padding-left: 22px; } .explain li + li { margin-top: 8px; } .explain li::marker { color: var(--gold); }
.explain .toolbox, .explain .ref-block { position: relative; padding: 26px 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.explain .toolbox-label, .explain .ref-block-label { display: block; margin-bottom: 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.explain .statement-hero { font: 300 clamp(22px, 2.3vw, 28px)/1.45 var(--sans); color: var(--cream); }
.explain .statement { font: 300 clamp(26px, 2.8vw, 36px)/1.2 var(--sans); color: var(--gold); }
.explain .supernova { height: 1px; margin: 44px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 22px rgba(232, 200, 154, .55); opacity: .7; }
.explain .try-it { display: flex; gap: 16px; align-items: baseline; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(232, 200, 154, .05); }
.explain .try-it > span:not(.try-it-icon) { min-width: 0; overflow-wrap: anywhere; }
.explain .try-it-icon { flex: none; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #f3dcb6, #d7ad78); color: #1b130c; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.explain .pulse-block { position: relative; padding: 28px; border-radius: 20px; border: 1px solid var(--line-2); background: radial-gradient(80% 120% at 100% 0%, rgba(212, 165, 116, .12), transparent 60%), var(--panel); }
.explain .pulse-label { font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; }
.explain .pulse-card-name { margin: 14px 0 6px; font: 300 30px/1 var(--sans); letter-spacing: .08em; color: var(--cream); }
.explain .tier-epic .pulse-card-name { color: var(--gold); }
.explain pre { margin: 16px 0 0; padding: 18px 20px; border-radius: 14px; background: #070605; border: 1px solid var(--line); font: 400 13px/1.7 var(--mono); color: #c7b8a5; overflow-x: auto; }
.explain .pulse-hint { margin-top: 14px; font-size: 15.5px; color: var(--muted); }
.explain .use { margin-top: 12px; height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); transition: border-color .3s, background .3s; }
.explain .use:hover { border-color: var(--gold); background: rgba(232, 200, 154, .08); }
.explain .rv, .note.rv { transition-duration: .8s; }

/* ── The sandbox ── */
.sandbox { margin-top: var(--s8); scroll-margin-top: 140px; }
.sb-label { margin-bottom: var(--s4); }
.sb { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); border-radius: 24px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; box-shadow: 0 50px 120px rgba(0, 0, 0, .5); }
.sb-code { display: grid; grid-template-rows: 44px minmax(0, 1fr) auto; min-width: 0; border-right: 1px solid var(--line); }
.status { margin-left: auto; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.status.bad { color: #ff8f7a; border-color: rgba(255, 120, 100, .5); }
.ed { position: relative; min-height: 360px; }
.ed-hl, .ed-ta { position: absolute; inset: 0; margin: 0; padding: var(--card-pad); border: 0; font: 400 13.5px/1.75 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
.ed-hl { color: #c7b8a5; pointer-events: none; }
.ed-ta { width: 100%; height: 100%; resize: none; background: transparent; color: transparent; caret-color: var(--gold); outline: none; }
.ed-ta::selection { background: rgba(232, 200, 154, .25); color: transparent; }
.ed-hl .kw { font-style: normal; color: var(--gold); } .ed-hl .fn { font-style: normal; color: var(--cream); } .ed-hl .bi { font-style: normal; color: #a99780; }
.ed-hl .nu { font-style: normal; color: #e9b98a; } .ed-hl .cm { font-style: italic; color: rgba(239, 230, 216, .35); }
.ed-hl .pill { font-weight: 500; color: #ffe2b4; background: rgba(232, 200, 154, .16); border-radius: 4px; box-shadow: 0 0 0 2px rgba(232, 200, 154, .16); }
.ed-hl .pill.hot { animation: hot .6s var(--ease); }
.err { display: none; margin: 0; padding: var(--s3) var(--card-pad); border-top: 1px solid rgba(255, 120, 100, .35); background: rgba(120, 30, 20, .25); color: #ffb3a3; font: 400 12px/1.6 var(--mono); white-space: pre-wrap; max-height: 140px; overflow: auto; }
.err.show { display: block; }
/* WoGL Why under the error: what happened and how to fix it (with an account), or how to get it (without). */
.why { display: none; border-top: 1px solid rgba(232, 200, 154, .22); background: linear-gradient(180deg, rgba(232, 200, 154, .07), rgba(232, 200, 154, .02)); }
.why.show { display: block; }
.why-in { display: grid; gap: 8px; padding: 16px 24px 18px; }
.why-k { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.why-in small { font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.why-in p { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.why-in p code { font: 400 12.5px/1 var(--mono); color: #ffe2b4; background: rgba(232, 200, 154, .12); padding: 1px 5px; border-radius: 4px; }
.why-hint { color: var(--muted) !important; }
.why-in.locked { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
.why-in.locked .why-k { grid-column: 1 / -1; }
.why-in.locked p { color: var(--muted); }
.sb-view { position: relative; min-height: 420px; }
.sb-view canvas { position: absolute; inset: 0; }
.sb-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: var(--s6); align-items: end; padding: var(--card-pad); border-top: 1px solid var(--line); }
.sb-btns { display: flex; gap: 10px; }
.engine { grid-column: span 2; color: var(--muted); font-size: 15.5px; }

/* ── To the next lesson ── */
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin-top: var(--s8); }
.pn { display: grid; gap: var(--s2); padding: var(--card-pad); border-radius: 20px; border: 1px solid var(--line); background: var(--panel); transition: border-color .4s, transform .5s var(--ease); }
.pn:hover { border-color: var(--line-2); transform: translateY(-2px); }
.pn.next { text-align: right; }
.pn small { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pn b { font: 300 26px/1.1 var(--sans); color: var(--cream); }
.pn span { font-size: 13.5px; color: var(--quiet); }

/* ── The lessons on a phone: a drawer ── */
.drawer { margin: auto 0 0; width: 100%; max-width: none; max-height: 82svh; padding: 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 26px 26px 0 0;
  background: #0a0807; color: var(--text); overflow: auto; }
.drawer[open] { animation: drawer .45s var(--ease); }
.drawer::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes drawer { from { transform: translateY(40px); opacity: 0; } }
.lesson-page .foot { padding: var(--s6) 0; }
.lesson-page .foot-line { margin-top: 0; }

@media (max-width: 1080px) { .room { grid-template-columns: 270px minmax(0, 1fr); } }
@media (max-width: 980px) {
  .room { grid-template-columns: minmax(0, 1fr); }
  .index { display: none; }
  .tabs-lessons { display: inline-flex; }
  .sb { grid-template-columns: minmax(0, 1fr); }
  /* Canvas, then sliders, then code: the canvas stays in view while a slider moves. */
  .sb-view { order: -1; min-height: 300px; border-bottom: 1px solid var(--line); }
  .sb-controls { order: 0; grid-template-columns: minmax(0, 1fr); gap: var(--s5); border-top: 0; border-bottom: 1px solid var(--line); }
  .sb-code { order: 1; border-right: 0; }
  .ed { min-height: 320px; }
  .engine { grid-column: auto; }
}
@media (max-width: 640px) {
  .tabs { top: 60px; margin-top: 60px; gap: 8px; }
  .room, .index { min-height: calc(100svh - 114px); }
  .note { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding-left: var(--s4); }
  .explain { font-size: 16.5px; }
  .ed-hl, .ed-ta { font-size: 12px; }
  .pnav { grid-template-columns: minmax(0, 1fr); }
  .pn.next { text-align: left; }
  .sb-btns .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson { transition: none; }
  .lnum, .kicker.live i { animation: none; }
}