/* CodeMIRAI design system: quiet surfaces, hairline borders, one accent.
   Two themes from one set of tokens: [data-theme] is set before first paint by
   the inline boot script in <head>, so there is never a flash of the wrong one.
   Primary buttons are ink (black on light, white on dark); the violet accent
   is for focus, progress and the odd highlight. Layout is lists and tabs, not
   grids of bordered boxes. */

:root {
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* aqua dusk, light: misty blue-white, deep-sea ink, teal and sky */
  --bg: #f3f7fa;
  --bg-2: #edf3f7;
  --bg-3: #e3ecf2;
  --surface: #ffffff;
  --surface-2: #f8fbfd;
  --raise: #ffffff;
  --line: #dde6ee;
  --line-2: #c8d5e1;
  --text: #0a1a2b;
  --text-2: #3f5468;
  --text-3: #66798e;
  --accent: #0d9488;
  --accent-h: #0f766e;
  --accent-soft: rgba(13, 148, 136, .10);
  --accent-text: #0f766e;
  --ok: #059669;
  --ok-soft: rgba(5, 150, 105, .10);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, .10);
  --bad: #e11d48;
  --bad-soft: rgba(225, 29, 72, .08);
  --code-bg: #f6f9fb;
  --g1: 13, 148, 136;
  --g2: 2, 132, 199;
  --g3: 124, 58, 237;
  --c1: #0d9488;
  --c2: #0284c7;
  --c3: #7c3aed;
  --grad: linear-gradient(120deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  --btn-bg: linear-gradient(135deg, #0f766e, #0369a1);
  --btn-fg: #ffffff;
  --glow: rgba(var(--g1), .12);
  --shadow: 0 1px 2px rgba(10, 30, 50, .05), 0 10px 30px -14px rgba(10, 30, 50, .18);
  --shadow-pop: 0 24px 64px -20px rgba(10, 30, 50, .30), 0 2px 8px rgba(10, 30, 50, .06);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --top: 60px;
  color-scheme: light;
}

[data-theme="dark"] {
  /* aqua dusk, dark: a deep ocean night with teal, sky and periwinkle light */
  --bg: #060b16;
  --bg-2: #09111f;
  --bg-3: #101a2c;
  --surface: #0b1424;
  --surface-2: #0e182a;
  --raise: #172338;
  --line: #1a2639;
  --line-2: #26354f;
  --text: #e7eef8;
  --text-2: #b3c0d2;
  --text-3: #8293aa;
  --accent: #2dd4bf;
  --accent-h: #5eead4;
  --accent-soft: rgba(45, 212, 191, .13);
  --accent-text: #5eead4;
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, .10);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .10);
  --bad: #fb7185;
  --bad-soft: rgba(251, 113, 133, .10);
  --code-bg: #08101d;
  --g1: 45, 212, 191;
  --g2: 56, 189, 248;
  --g3: 167, 139, 250;
  --c1: #2dd4bf;
  --c2: #38bdf8;
  --c3: #a78bfa;
  --btn-bg: linear-gradient(135deg, #5eead4, #7dd3fc);
  --btn-fg: #04121f;
  --glow: rgba(var(--g1), .16);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-pop: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03);
  color-scheme: dark;
}

/* ------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 20px); }
body {
  margin: 0;
  font: 400 15.5px/1.6 var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.03em; color: var(--text); font-weight: 600; }
h1 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.04em; }
h2 { font-size: clamp(21px, 2.2vw, 26px); }
h3 { font-size: 17px; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
code, kbd, pre { font-family: var(--mono); }
kbd {
  display: inline-block; padding: 0 5px; font: 500 11px/18px var(--mono); color: var(--text-3);
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 5px; white-space: nowrap;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ico.sm { width: 14px; height: 14px; }
.ico .ico-fill, .ico-fill { fill: currentColor; stroke: none; }
.muted { color: var(--text-3); }
.spacer { flex: 1; }
.empty { color: var(--text-3); font-size: 14px; padding: 18px 0; }
.aside-note { margin-top: 28px; color: var(--text-3); font-size: 14px; }
.aside-note a { color: var(--text-2); font-weight: 500; }

.wrap, .container { width: min(1120px, 100% - 48px); margin-inline: auto; }
.wrap.narrow, .container.narrow { width: min(780px, 100% - 48px); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text { -webkit-text-fill-color: currentColor; color: var(--accent); }
}

/* ------------------------------------------------------------ buttons, tabs, filters */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 15px; border-radius: 10px;
  font: 500 14px/1 var(--font); letter-spacing: -.005em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .08s, opacity .15s;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { filter: brightness(1.06) saturate(1.05); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-ghost.danger:hover, .btn-danger { color: #fff; background: var(--bad); border-color: var(--bad); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; gap: 6px; border-radius: 9px; }
.btn-sm .ico { width: 16px; height: 16px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn kbd { background: transparent; border-color: color-mix(in srgb, currentColor 30%, transparent); color: inherit; opacity: .75; font-size: 10px; line-height: 15px; padding: 0 4px; }
.btn.icon-only { width: 32px; padding: 0; }

.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 0; color: var(--text-3); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-3); color: var(--text); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.sm .ico { width: 16px; height: 16px; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; justify-content: center; }
.cta.left, .hero-cta { justify-content: flex-start; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.tabbar {
  display: flex; gap: 4px; margin: 0 0 28px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  border: 0; background: none; color: var(--text-3); font: 500 14.5px var(--font); cursor: pointer;
  white-space: nowrap; text-decoration: none !important;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); }
.tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.tab-count { font: 500 11.5px/1 var(--mono); color: var(--text-3); padding: 4px 7px; border-radius: 999px; background: var(--bg-3); }
.tabpane { animation: fadeUp .25s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } }

.seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-3);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
  color: var(--text-3); font: 500 13px var(--font); cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.is-active { background: var(--raise); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 500 11.5px/1 var(--mono); color: var(--text-2); background: var(--bg-3); white-space: nowrap;
}
.pill .ico { width: 12px; height: 12px; }

.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 400 13px var(--mono); color: var(--text-3); letter-spacing: .01em; }
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 400 13px var(--mono); color: var(--text-3); }

/* course monogram: the language's own colour, quietly */
.tile {
  --size: 40px;
  display: inline-grid; place-items: center; width: var(--size); height: var(--size); flex: none;
  border-radius: calc(var(--size) * .26); font: 600 calc(var(--size) * var(--fs, .38))/1 var(--mono); letter-spacing: -.04em;
  color: var(--ink); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 26, 43, .08), 0 6px 16px -10px color-mix(in srgb, var(--cg, var(--c)) 70%, transparent);
}
[data-theme="dark"] .tile {
  color: color-mix(in srgb, var(--cg, var(--c)) 42%, #fff); background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px -12px color-mix(in srgb, var(--cg, var(--c)) 80%, transparent);
}
.tile-xs { --size: 22px; }
.tile.has-logo img { display: block; width: 62%; height: 62%; object-fit: contain; }
.tile.has-logo .lg-d, [data-theme="dark"] .tile.has-logo .lg-l { display: none; }
[data-theme="dark"] .tile.has-logo .lg-d { display: block; }
.tile-sm { --size: 32px; }
.tile-lg { --size: 48px; }
.tile-xl { --size: 56px; }

.progress { height: 4px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--grad); border-radius: inherit; transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.progress.big { height: 8px; }

/* ------------------------------------------------------------ inputs */

input, select, textarea { font: inherit; color: var(--text); }
.input-search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; width: 260px;
  border: 1px solid var(--line-2); border-radius: 10px; background: transparent; color: var(--text-3);
}
.input-search:focus-within { border-color: var(--text-3); }
.input-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; }
.select { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px;
  border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--text-3); }
.select select { appearance: none; border: 0; background: transparent; outline: 0; font: 500 13px var(--font); color: var(--text); padding-right: 4px; cursor: pointer; }
.select select option { background: var(--surface); color: var(--text); }

/* ------------------------------------------------------------ top bar */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 28px; height: var(--top); width: min(1240px, 100% - 40px); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none !important; flex: none; }
.logo-mark { width: 28px; height: 28px; display: block; }
/* the wordmark is set in the mono face: its capital I has serifs, so "MirAI"
   can't be misread as "MirAl" the way a sans-serif I would allow */
.brand-name { display: inline-flex; align-items: baseline; font: 400 17px/1 var(--mono); letter-spacing: -.06em; }
.bn-code { color: var(--text); }
.brand-name .grad-text { font-weight: 700; letter-spacing: -.05em; }
.tabs-nav { display: flex; align-self: stretch; }
.tab-link {
  position: relative; display: inline-flex; align-items: center; padding: 0 12px;
  font: 500 14px var(--font); color: var(--text-3); text-decoration: none !important; white-space: nowrap;
}
.tab-link:hover { color: var(--text); }
.tab-link[aria-current="page"] { color: var(--text); }
.tab-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.search-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 10px; width: 210px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text-3);
  font: 400 13.5px var(--font); cursor: pointer;
}
.search-btn span { flex: 1; text-align: left; }
.search-btn:hover { border-color: var(--line-2); color: var(--text-2); }
.xp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px;
  font: 500 12.5px/1 var(--mono); color: var(--text-2); border: 1px solid var(--line); text-decoration: none !important; white-space: nowrap;
}
.xp-chip:hover { border-color: var(--line-2); color: var(--text); }
.xp-chip .ico { width: 14px; height: 14px; color: var(--accent-text); }
[data-theme-toggle] .ico { display: none; }
[data-theme-pref="light"] [data-theme-toggle] .t-light,
[data-theme-pref="dark"] [data-theme-toggle] .t-dark,
[data-theme-pref="system"] [data-theme-toggle] .t-system { display: block; }

/* ------------------------------------------------------------ account */

.account { position: relative; display: flex; align-items: center; margin-left: 4px; }
.avatar-btn {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); overflow: hidden; cursor: pointer;
  display: grid; place-items: center; background: var(--bg-3); color: var(--text); font: 600 13px var(--font);
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-btn:hover { border-color: var(--text-3); }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 270px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop);
  animation: popIn .16s cubic-bezier(.2, .8, .2, 1);
}
.menu-head { padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.menu-head b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head small { display: block; color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text-2); font: 500 13.5px var(--font); cursor: pointer; text-align: left; text-decoration: none !important;
}
.menu a:hover, .menu button:hover { background: var(--bg-3); color: var(--text); }
.menu .ico { width: 16px; height: 16px; }
.menu .danger:hover { color: var(--bad); }
.sync-state { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; font: 400 12px var(--mono); color: var(--text-3); }
.sync-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.sync-state.busy i { background: var(--warn); }
.sync-state.err i { background: var(--bad); }

.modal-wrap {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 6, 12, .5); backdrop-filter: blur(4px); animation: fadeIn .15s ease;
}
.modal {
  position: relative; width: min(400px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 32px 28px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-pop);
  text-align: center; animation: popIn .2s cubic-bezier(.2, .8, .2, 1);
}
.modal .logo-mark { width: 40px; height: 40px; margin: 0 auto 18px; }
.modal h2 { font-size: 21px; margin: 0 0 6px; }
.modal > p { color: var(--text-2); font-size: 14px; margin: 0 0 22px; }
.modal-close { position: absolute; top: 12px; right: 12px; }
.oauth { display: grid; gap: 8px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 500 14px var(--font);
  cursor: pointer; text-decoration: none !important;
}
.oauth-btn:hover { background: var(--bg-3); }
.oauth-btn svg { width: 18px; height: 18px; flex: none; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-3); font: 400 12px var(--mono); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.email-form { display: grid; gap: 8px; }
.email-form input {
  height: 42px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg); outline: 0;
}
.email-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.email-form .btn { height: 42px; border-radius: 11px; }
.code-input { text-align: center; font: 500 22px var(--mono) !important; letter-spacing: .45em; }
.modal-msg { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); }
.modal-msg.err { color: var(--bad); }
.modal .fine { margin: 18px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.linkish { border: 0; background: none; padding: 0; color: var(--text-2); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.985); } }

/* ------------------------------------------------------------ footer */

.footer-brand { display: flex; align-items: center; gap: 14px; color: var(--text-3); font: 400 13px var(--mono); }
.footer-brand .logo-mark { width: 24px; height: 24px; }
.footer-brand .brand-name { font-size: 15px; }

/* ------------------------------------------------------------ home */

/* the glow is wider than a phone: clip it, or the whole page scrolls sideways */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 56px; text-align: center; }
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -300px; width: min(1200px, 140vw); height: 720px;
  transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
.display { font-size: clamp(40px, 7vw, 80px); line-height: 1; letter-spacing: -.055em; font-weight: 650; margin: 24px auto 22px; max-width: 920px; }
.lede { font-size: 17.5px; line-height: 1.6; color: var(--text-2); max-width: 620px; }
.hero .lede { margin: 0 auto; max-width: 540px; }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin: 30px 0 0; font: 400 13px var(--mono); color: var(--text-3); }
.hero-stats b { color: var(--text); font-weight: 500; }
.resume { margin: 22px auto 0; }
.resume a {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none !important;
}
.resume a:hover { border-color: var(--line-2); }
.resume small { color: var(--text-3); font: 400 12px var(--mono); }
.resume .ico { color: var(--text-3); }
.hero-demo { max-width: 780px; margin: 64px auto 0; text-align: left; }
/* grid and flex items default to min-width:auto, so the demo's long lines
   would widen the page past a phone screen; let the code scroll instead */
.hero-demo, .window { min-width: 0; }

.window { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-pop); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.dots { display: inline-flex; gap: 6px; margin-right: 12px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.window-tab { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; font: 400 12.5px var(--mono); color: var(--text-3); }
.window-tab.is-active { color: var(--text); background: var(--bg-3); }
.window-run {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px;
  background: var(--btn-bg); color: var(--btn-fg); font: 500 12.5px var(--font); text-decoration: none !important;
}
.window-run .ico { width: 12px; height: 12px; }
.window-code { margin: 0; padding: 20px 22px; font: 400 14px/1.75 var(--mono); color: var(--text); overflow-x: auto; }
.tk-k { color: #7c3aed; } .tk-f { color: #0b72c4; } .tk-s { color: #0f8a5f; }
[data-theme="dark"] .tk-k { color: #c4a5ff; } [data-theme="dark"] .tk-f { color: #74c7ff; } [data-theme="dark"] .tk-s { color: #82e3ad; }
.window-out { border-top: 1px solid var(--line); background: var(--bg-2); }
.window-out-head { padding: 12px 22px 0; font: 500 11px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.window-out pre { margin: 0; padding: 6px 22px 18px; font: 400 13.5px/1.7 var(--mono); color: var(--text-2); }

.block { padding: 72px 0 0; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.block-head h2 { margin: 0; }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 14px; font-weight: 500; white-space: nowrap; }
.more:hover { color: var(--text); text-decoration: none; }
.more .ico { width: 15px; height: 15px; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.course-grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 20px; }
.course {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; margin: 0 -12px;
  border-radius: var(--r); color: var(--text); text-decoration: none !important; transition: background .15s;
}
.course:hover { background: var(--bg-3); }
.course.has-blurb { align-items: flex-start; padding: 14px 12px 16px; }
.course-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.course-text b { font-weight: 550; font-size: 15px; letter-spacing: -.01em; }
.course-text small { color: var(--text-3); font: 400 12px var(--mono); }
.course-blurb { color: var(--text-2); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.has-blurb .course-text small { margin-top: 4px; }
/* progress shows as a hairline under the course, in its colour, once begun */
.course-bar { position: absolute; left: 66px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.course-bar i { display: block; height: 100%; width: 0; background: var(--c); border-radius: inherit; transition: width .6s cubic-bezier(.2, .7, .2, 1); }

.cert-list { display: grid; gap: 10px; }
.cert-row {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--line); color: var(--text); text-decoration: none !important; transition: border-color .15s;
  background: linear-gradient(110deg, color-mix(in srgb, var(--cg, var(--c)) 9%, transparent), transparent 55%), var(--surface);
}
.cert-row:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.cert-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.cert-text small { font: 400 12px var(--mono); color: var(--text-3); }
.cert-text b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cert-text > span { color: var(--text-2); font-size: 14px; }
.cert-row .course-bar { left: 22px; right: 22px; bottom: 0; }
.cert-go { color: var(--text-3); }
.cert-row:hover .cert-go { color: var(--text); }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.trio a { display: grid; gap: 8px; align-content: start; color: var(--text); text-decoration: none !important; }
.trio a > .ico { width: 22px; height: 22px; color: var(--text-3); margin-bottom: 4px; }
.trio b { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.trio b .ico { color: var(--text-3); transition: transform .15s; }
.trio a:hover b .ico { transform: translateX(3px); color: var(--text); }
.trio p { margin: 0; color: var(--text-2); font-size: 14.5px; }

/* ------------------------------------------------------------ page tops */

.page-top { padding: 56px 0 0; margin-bottom: 32px; }
.page-top h1 { margin: 0 0 12px; }
.page-top .lede { margin: 0; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--text-3); margin-bottom: 16px; }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--text); text-decoration: none; }
.crumbs span { color: var(--text-2); }
.crumbs .ico { width: 13px; height: 13px; opacity: .7; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.row-head h2 { margin: 0; font-size: 19px; }
.sub { margin-top: 56px; }
.sub > h2 { font-size: 19px; margin-bottom: 4px; }
.sub > .muted { margin: 0 0 18px; font-size: 14px; }
.sub > .trio { margin-top: 20px; }

/* ------------------------------------------------------------ course page */

.track-head { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 48px; align-items: start; }
.track-title { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.track-title h1 { margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 18px 0 0; padding: 0; font: 400 13px var(--mono); color: var(--text-3); }
.facts b { color: var(--text); font-weight: 500; }
.meter { text-align: center; }
.meter p { margin: 12px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.ring { position: relative; width: 116px; height: 116px; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring-bg { stroke: var(--bg-3); }
.ring-fg { stroke: var(--c, var(--accent)); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .2, 1); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; }
.ring-label b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.ring-label span { font: 400 11px var(--mono); color: var(--text-3); }
.mini-badges { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }

.modules { display: grid; gap: 44px; }
.module-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.module-n { flex: none; min-width: 24px; padding-top: 4px; font: 500 12px var(--mono); color: var(--text-3); }
.module-head > div { flex: 1; min-width: 0; }
.module-head h3 { margin: 0 0 3px; }
.module-head p { margin: 0; font-size: 14px; color: var(--text-3); }
.module-progress, .module-weight { flex: none; padding-top: 3px; font: 400 12px var(--mono); color: var(--text-3); white-space: nowrap; }
.module-weight { color: var(--text-2); }
.lessons { list-style: none; margin: 0; padding: 0 0 0 38px; columns: 2; column-gap: 32px; }
.lessons li { break-inside: avoid; }
.lessons li > a, .lessons li > span {
  display: flex; align-items: center; gap: 12px; padding: 7px 10px; margin-left: -10px; border-radius: 9px;
  color: var(--text-2); font-size: 14.5px; line-height: 1.4; text-decoration: none !important;
}
.lessons li > a:hover { background: var(--bg-3); color: var(--text); }
.lessons .is-soon > span { color: var(--text-3); }
.lessons em { margin-left: auto; font: 500 10.5px var(--mono); font-style: normal; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.tick { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
a.done .tick { background: var(--ok); border-color: var(--ok); }
a.done .tick::after { content: ""; width: 7px; height: 4px; border: 1.8px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
[data-theme="dark"] a.done .tick::after { border-color: #08130e; }

.quiz-intro { max-width: 620px; }
.quiz-intro p { color: var(--text-2); }
.quiz-best { font: 500 13px var(--mono); color: var(--ok); }

/* ------------------------------------------------------------ rows (challenges, quizzes, domains) */

.rows { display: grid; gap: 2px; }
.challenge-card, .quiz-card, .domain {
  display: flex; align-items: center; gap: 14px; padding: 12px; margin: 0 -12px; border-radius: var(--r);
  color: var(--text); text-decoration: none !important; transition: background .15s;
}
.challenge-card:hover, .quiz-card:hover, .domain:hover { background: var(--bg-3); }
.cr-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.cr-text b { font-weight: 550; font-size: 15px; letter-spacing: -.01em; }
.cr-text small { color: var(--text-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-xp { min-width: 54px; text-align: right; font: 400 12px var(--mono); color: var(--text-3); }
.row-go { color: var(--text-3); }
.row-ico { width: 32px !important; height: 32px !important; padding: 7px; border-radius: 9px; color: var(--accent-text); background: var(--accent-soft); }
.diff { display: inline-flex; align-items: center; gap: 7px; font: 400 12px var(--mono); color: var(--text-2); white-space: nowrap; }
.diff::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k, var(--text-3)); }
.diff-easy { --k: var(--ok); } .diff-medium { --k: var(--warn); } .diff-hard { --k: var(--bad); }
.cc-solved { display: none; align-items: center; gap: 4px; font: 500 12px var(--mono); color: var(--ok); white-space: nowrap; }
.cc-solved .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.cc-solved.on { display: inline-flex; }

.daily:empty { display: none; }
.daily a {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); font-size: 14px; text-decoration: none !important;
}
.daily a:hover { border-color: var(--line-2); }
.daily .ico { color: #f97316; width: 16px; height: 16px; }
.daily small { color: var(--text-3); font: 400 12px var(--mono); }

/* ------------------------------------------------------------ certifications */

.cert-top { margin-bottom: 36px; }
.cert-top .tabbar { margin: 30px 0 0; }
.cert-head { display: flex; align-items: center; gap: 18px; }
.cert-head h1 { margin: 4px 0 0; font-size: clamp(26px, 3vw, 36px); }
.overview { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: start; }
.overview .lede { margin: 0; }
.readiness { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--text-3); }
.readiness b { color: var(--text); font-weight: 500; }
.domain-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.domain-text b { font-weight: 550; font-size: 15px; }
.domain-text small { color: var(--text-3); font: 400 12px var(--mono); }
.domain .module-n { padding-top: 0; }
.domain-weight { display: inline-flex; align-items: center; gap: 12px; font: 400 12.5px var(--mono); color: var(--text-2); white-space: nowrap; }
.wbar { width: 90px; height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.wbar i { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: inherit; }

/* ------------------------------------------------------------ lesson */

.lesson-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr) 220px; width: min(1440px, 100%); margin: 0 auto; }
.lesson-side {
  position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow: auto; border-right: 1px solid var(--line);
  padding: 20px 12px 40px; scrollbar-width: thin; background: var(--bg);
}
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.side-head a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none !important; min-width: 0; }
.side-head b { display: block; font-size: 14.5px; font-weight: 600; }
.side-head small { color: var(--text-3); font: 400 11.5px var(--mono); }
.side-close { display: none; }
.side-tree details { margin-bottom: 2px; }
.side-tree summary {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 550; color: var(--text); list-style: none;
}
.side-tree summary::-webkit-details-marker { display: none; }
.side-tree summary span { font: 400 11px var(--mono); color: var(--text-3); }
.side-tree summary:hover { background: var(--bg-3); }
.side-links { display: grid; padding: 2px 0 10px 8px; }
.side-links a, .side-soon {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.35; color: var(--text-2); text-decoration: none !important;
}
.side-links a:hover { background: var(--bg-3); color: var(--text); }
.side-links a[aria-current="page"] { background: var(--bg-3); color: var(--text); font-weight: 550; }
.side-links .tick { width: 14px; height: 14px; }
.side-soon { color: var(--text-3); opacity: .7; }

.lesson { min-width: 0; padding: 32px clamp(20px, 4.5vw, 64px) 64px; }
.lesson-top { display: flex; align-items: center; gap: 12px; }
.lesson-top .crumbs { margin: 0; }
.side-open { display: none; }
.lesson h1 { margin: 18px 0 14px; font-size: clamp(30px, 3.4vw, 42px); }
.lesson-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
  font: 400 12.5px var(--mono); color: var(--text-3); max-width: 720px;
}
.lesson-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lesson-meta .ico { width: 14px; height: 14px; }

.prose { font-size: 16px; line-height: 1.75; color: var(--text-2); max-width: 720px; }
.prose > * + * { margin-top: 1.1em; }
.prose > .code, .prose > .quiz, .prose > .callout, .prose > .table-wrap, .prose > .fig { margin-top: 1.5em; }
.prose > .fig + * { margin-top: 1.5em; }
.prose > .code + *, .prose > .callout + *, .prose > .table-wrap + * { margin-top: 1.5em; }
.prose h2 { font-size: 23px; margin: 2em 0 .5em; color: var(--text); }
.prose h3 { font-size: 18px; margin: 1.7em 0 .4em; color: var(--text); }
.prose p { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 0; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--text-3); }
.prose :not(pre) > code { font-size: .86em; padding: .12em .38em; border-radius: 6px; background: var(--bg-3); color: var(--text); }
.prose blockquote { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--line-2); color: var(--text-3); }
.prose img { border-radius: var(--r); border: 1px solid var(--line); }
.prose kbd { font-size: .78em; }
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 32px -26px rgba(var(--g2), .55);
}
.prose table, .result-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td, .result-table th, .result-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th, .result-table th { background: var(--bg-2); color: var(--text); font-weight: 600; font-size: 13.5px; }
.prose th { background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 10%, var(--bg-2)), var(--bg-2)); white-space: nowrap; }
.prose tbody tr { transition: background .15s; }
.prose tbody tr:hover { background: color-mix(in srgb, var(--c1) 6%, transparent); }
.prose tbody td:first-child { color: var(--text); }
.prose tr:last-child td { border-bottom: 0; }
/* a wide table on a phone: columns keep a readable width and the table scrolls, its far edge fading */
.table-wrap.scrolls { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.table-wrap.scrolls[data-at="mid"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.table-wrap.scrolls[data-at="end"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }

/* product logos in lessons ({{az:...}} in the Markdown): beside text, in tables, and on a soft tile in headings */
.prose img.ilogo { display: inline-block; width: 1.3em; height: 1.3em; margin-right: .2em; vertical-align: -.3em; object-fit: contain; border: 0; border-radius: 0; }
.prose :is(h2, h3) img.ilogo { box-sizing: border-box; width: 1.55em; height: 1.55em; padding: .22em; margin-right: .5em; vertical-align: -.36em; border-radius: .42em; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); }
.prose img.ilogo.lg-d, [data-theme="dark"] .prose img.ilogo.lg-l { display: none; }
[data-theme="dark"] .prose img.ilogo.lg-d { display: inline-block; }

.callout { padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); font-size: 15px; color: var(--text-2); }
.callout > * + * { margin-top: .6em; }
.callout p { margin-bottom: 0; }
.callout-title { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text); font-size: 14px; }
.callout-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k, var(--accent)) 16%, transparent); }
.callout-tip { --k: var(--ok); }
.callout-warning { --k: var(--warn); }
.callout-note, .callout-info { --k: var(--accent); }
.callout-exam { --k: #0078d4; }
.wrap > .callout { margin-top: 56px; }

/* code blocks inside lessons */
.code { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--code-bg); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); }
.code-lang { font: 400 12px var(--mono); color: var(--text-3); text-transform: lowercase; }
.code-tools { display: flex; align-items: center; gap: 2px; }
.code-tools .btn { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.code-tools .btn .ico { width: 14px; height: 14px; }
.code-tools .btn-ghost { border-color: transparent; color: var(--text-3); }
.code-tools .btn-ghost:hover { color: var(--text); background: var(--bg-3); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 13.5px/1.7 var(--mono); color: var(--text); tab-size: 4; }
.code pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.code-editor { height: 260px; border-bottom: 1px solid var(--line); }
/* a fixed Output block right after an example is joined to it */
.prose > .code:has(+ .code[data-lang="output"]) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.prose > .code + .code[data-lang="output"] { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.code[data-lang="output"] { background: var(--bg-2); }
.code[data-lang="output"] .code-head { height: 30px; border-bottom: 0; }
.code[data-lang="output"] pre { padding-top: 0; color: var(--text-2); }
.code-out { border-top: 1px solid var(--line); background: var(--surface); }
.code-out-head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 14px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.code-out-head .spacer { flex: 1; }
.code-out .console { max-height: 340px; padding-top: 4px; }
.code-out iframe { width: 100%; height: 300px; border: 0; background: #fff; display: block; }

/* highlight.js tokens, both themes */
.hljs-keyword, .hljs-built_in, .hljs-selector-tag, .hljs-literal { color: #7c3aed; }
.hljs-string, .hljs-attr + .hljs-string, .hljs-template-string { color: #0f8a5f; }
.hljs-number, .hljs-symbol { color: #c2410c; }
.hljs-title, .hljs-title.function_, .hljs-function .hljs-title { color: #0b72c4; }
.hljs-comment, .hljs-quote { color: #8c8c96; font-style: italic; }
.hljs-attr, .hljs-attribute, .hljs-property { color: #b5229a; }
.hljs-tag, .hljs-name { color: #2563eb; }
.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ { color: #b45309; }
.hljs-meta { color: #64748b; }
.hljs-variable, .hljs-params { color: inherit; }
[data-theme="dark"] .hljs-keyword, [data-theme="dark"] .hljs-built_in, [data-theme="dark"] .hljs-selector-tag, [data-theme="dark"] .hljs-literal { color: #c4a5ff; }
[data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-template-string { color: #82e3ad; }
[data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-symbol { color: #ffb37a; }
[data-theme="dark"] .hljs-title, [data-theme="dark"] .hljs-title.function_ { color: #74c7ff; }
[data-theme="dark"] .hljs-comment { color: #6b6b75; }
[data-theme="dark"] .hljs-attr, [data-theme="dark"] .hljs-attribute, [data-theme="dark"] .hljs-property { color: #f39ad8; }
[data-theme="dark"] .hljs-tag, [data-theme="dark"] .hljs-name { color: #7aa7ff; }
[data-theme="dark"] .hljs-type, [data-theme="dark"] .hljs-title.class_ { color: #fbbf62; }

/* console output, shared by lessons, the playground and challenges */
.console { font: 13.5px/1.6 var(--mono); padding: 12px 16px; overflow: auto; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.console .ln { display: block; }
.console .err { color: var(--bad); }
.console .warn { color: var(--warn); }
.console .sys { color: var(--text-3); font-family: var(--font); font-size: 12.5px; }
.console .ok { color: var(--ok); }
.console .echo { color: var(--accent-text); font-weight: 500; }
.console img { display: block; max-width: 100%; margin: 8px 0; border-radius: 8px; background: #fff; }
.console table { margin: 8px 0; }
.console-hint { color: var(--text-3); font-family: var(--font); font-size: 13.5px; }
.result-table { font-family: var(--font); font-size: 13px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: block; max-width: 100%; overflow-x: auto; }
.result-table th, .result-table td { padding: 6px 12px; white-space: nowrap; }
.result-meta { font-family: var(--font); color: var(--text-3); font-size: 12.5px; margin: 2px 0 10px; }
.xml-tree { font: 13px/1.6 var(--mono); }
.xml-tree .t { color: #2563eb; } .xml-tree .a { color: #b5229a; } .xml-tree .v { color: #0f8a5f; }
[data-theme="dark"] .xml-tree .t { color: #7aa7ff; } [data-theme="dark"] .xml-tree .a { color: #f39ad8; } [data-theme="dark"] .xml-tree .v { color: #82e3ad; }
.spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.editor-loading { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--text-3); font-size: 14px; }

/* diagrams and charts in lessons: inline SVG drawn with the theme's tokens, so
   one drawing works in light and dark. Text in an SVG can't reflow, so on a
   phone the figure scrolls sideways inside its frame instead of shrinking
   its labels to nothing (the page itself never scrolls sideways). */
.fig { margin: 0; }
.fig-frame { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 18px 16px 14px; }
.fig svg { display: block; width: 100%; height: auto; min-width: 560px; }
.fig figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
.fig text { font-family: var(--font); font-size: 12.5px; fill: var(--text); }
.fig .s { font-size: 11.5px; fill: var(--text-2); }
.fig .m { font-family: var(--mono); font-size: 10.5px; fill: var(--text-3); }
.fig .h { font-size: 13.5px; font-weight: 600; }
.fig .b { fill: var(--surface-2); stroke: var(--line-2); }
.fig .g { fill: var(--bg-3); stroke: var(--line); }
.fig .a { fill: var(--accent-soft); stroke: var(--accent); }
.fig .z { fill: color-mix(in srgb, var(--az) 11%, transparent); stroke: var(--az); }
.fig .ok { fill: var(--ok-soft); stroke: var(--ok); }
.fig .wa { fill: var(--warn-soft); stroke: var(--warn); }
.fig .ba { fill: var(--bad-soft); stroke: var(--bad); }
.fig .ln { fill: none; stroke: var(--text-3); stroke-width: 1.4; }
.fig .ln.acc { stroke: var(--accent); stroke-width: 2; }
.fig .ln.azl { stroke: var(--az); stroke-width: 2; }
.fig .ln.wl { stroke: var(--warn); stroke-width: 2; }
.fig .dash { stroke-dasharray: 5 4; }
.fig .fa { fill: var(--accent); } .fig .fz { fill: var(--az); } .fig .fo { fill: var(--ok); } .fig .fw { fill: var(--warn); } .fig .ft { fill: var(--text-3); }
:root { --az: #0078d4; }
[data-theme="dark"] { --az: #4aa3ff; }

/* inline quizzes */
.quiz { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; background: var(--surface); }
.quiz-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); font-size: 15px; margin-bottom: 14px; }
.quiz-head .ico { color: var(--accent-text); }
.q { padding: 4px 0 14px; }
.q + .q { border-top: 1px solid var(--line); padding-top: 16px; }
.q-text { font-weight: 550; color: var(--text); margin-bottom: 12px; font-size: 15.5px; }
.q-opts { display: grid; gap: 8px; }
.q-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 11px; background: transparent; color: var(--text); font: 400 15px/1.45 var(--font);
  transition: border-color .12s, background .12s;
}
.q-opt:hover:not(:disabled) { border-color: var(--text-3); background: var(--bg-2); }
.q-opt .key { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 500 12px var(--mono); color: var(--text-3); background: var(--bg-3); }
.q-opt:disabled { cursor: default; }
.q-opt.right { border-color: var(--ok); background: var(--ok-soft); }
.q-opt.right .key { background: var(--ok); color: #fff; }
.q-opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.q-opt.wrong .key { background: var(--bad); color: #fff; }
.q-opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.q-why { margin-top: 10px; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; background: var(--bg-2); color: var(--text-2); }
.q-why b { color: var(--text); }

.lesson-done {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 56px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg); max-width: 720px;
}
.lesson-done b { display: block; color: var(--text); font-weight: 600; }
.lesson-done span { font-size: 14px; color: var(--text-3); }
.lesson-done.is-done { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.lesson-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; max-width: 720px; }
.pager { display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none !important; }
.pager:hover { border-color: var(--line-2); background: var(--bg-2); }
.pager small { display: block; font: 400 12px var(--mono); color: var(--text-3); }
.pager b { color: var(--text); font-size: 15px; font-weight: 550; }
.pager.next { text-align: right; }

.lesson-toc { position: sticky; top: var(--top); align-self: start; padding: 36px 20px; max-height: calc(100vh - var(--top)); overflow: auto; }
.toc-title { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 12px; }
.lesson-toc a { display: block; padding: 4px 0 4px 12px; font-size: 13.5px; color: var(--text-3); border-left: 1px solid var(--line); line-height: 1.4; }
.lesson-toc a.toc-l3 { padding-left: 24px; }
.lesson-toc a:hover, .lesson-toc a.is-active { color: var(--text); border-left-color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------ playground (IDE) */

body.app .footer { display: none; }
/* the column is capped at the screen: sized by its content, the toolbar's
   buttons made the whole IDE 13px wider than a phone */
.ide { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--top)); background: var(--bg); }
.ide-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ide-tb-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ide-toolbar .btn-ghost { border-color: transparent; color: var(--text-2); }
.ide-toolbar .btn-ghost:hover { color: var(--text); background: var(--bg-3); }
.ide-main { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(320px, 40%); min-height: 0; }
.ide.stacked .ide-main { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 1fr 38%; }
.ide.stacked .ide-panel { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); }
.ide.stacked .ide-explorer { grid-row: span 2; }
.ide-explorer { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg-2); min-height: 0; }
.ide-ex-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.ide-files { flex: 1; overflow: auto; padding: 0 6px; }
.ide-file { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: 400 13px var(--mono); cursor: pointer; text-align: left; }
.ide-file:hover { background: var(--bg-3); color: var(--text); }
.ide-file.is-active { background: var(--bg-3); color: var(--text); }
.ide-file .ico { width: 15px; height: 15px; color: var(--text-3); }
.ide-file .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide-file .acts { display: none; gap: 2px; }
.ide-file:hover .acts { display: flex; }
.ide-file .acts span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; }
.ide-file .acts span:hover { background: var(--line-2); }
.ide-file .acts .ico { width: 13px; height: 13px; }
.ide-group { padding: 10px 8px 4px; font: 500 10.5px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.ide-ex-foot { display: flex; gap: 6px; padding: 10px 12px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--line); line-height: 1.4; }
.ide-ex-foot .ico { width: 14px; height: 14px; }
.ide-editor { display: grid; grid-template-rows: 36px 1fr; min-width: 0; min-height: 0; }
.ide-tabs { display: flex; align-items: stretch; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--bg-2); scrollbar-width: none; }
.ide-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; border: 0; border-right: 1px solid var(--line); font: 400 12.5px var(--mono); color: var(--text-3); cursor: pointer; white-space: nowrap; background: none; }
.ide-tab.is-active { background: var(--bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.ide-tab .close { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; opacity: .6; }
.ide-tab .close:hover { background: var(--line-2); opacity: 1; }
.ide-tab .close .ico { width: 12px; height: 12px; }
.ide-tab.dirty .close::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); }
.ide-tab.dirty .close .ico { display: none; }
.ide-tab.dirty .close:hover::before { display: none; }
.ide-tab.dirty .close:hover .ico { display: block; }
.ide-monaco { min-height: 0; position: relative; }
.ide-panel { display: grid; grid-template-rows: 36px 1fr; border-left: 1px solid var(--line); min-height: 0; min-width: 0; background: var(--surface); }
.ide-panel-tabs { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-bottom: 1px solid var(--line); }
.ide-panel-tabs button:not(.icon-btn) { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--text-3); font: 500 12.5px var(--font); cursor: pointer; }
.ide-panel-tabs button:not(.icon-btn) .ico { width: 15px; height: 15px; }
.ide-panel-tabs button.is-active { color: var(--text); background: var(--bg-3); }
.ide-panel-body { position: relative; min-height: 0; }
.panel-pane { position: absolute; inset: 0; display: none; overflow: auto; }
.panel-pane.is-active { display: block; }
.panel-pane .console { min-height: 100%; }
.preview { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.pane-note { margin: 0; padding: 12px 16px 6px; font-size: 13px; color: var(--text-3); }
.stdin { display: block; width: calc(100% - 24px); height: calc(100% - 70px); margin: 6px 12px 12px; padding: 12px; font: 13.5px/1.6 var(--mono); border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--text); resize: none; outline: 0; }
.stdin:focus { border-color: var(--accent); }
.ide-status { display: flex; align-items: center; gap: 16px; height: 26px; padding: 0 12px; font: 400 11.5px var(--mono); color: var(--text-3); border-top: 1px solid var(--line); background: var(--bg-2); }
.ide-status span { white-space: nowrap; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 12px; }
.ai-answer { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.ai-answer pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow: auto; font-size: 13px; }
.ai-answer code { font-size: .9em; }

/* each language gets its own theme in the playground, no two alike. Two vivid
   accents (--pa, --pb) colour the crisp parts: Run, the status bar, the open
   tab and file. Two glow colours (--pg1, --pg2) light the editor from its
   corners. Glows are always colours that stay clean over the dark navy
   (blues, cyans, greens, violets, pinks, reds), because a dim yellow or orange
   turns olive-brown there; yellow and orange themes glow in partner colours.
   The panels stay plain. playground.js sets data-pal from the open file, and
   the registered properties let one theme fade into the next. */
@property --pa { syntax: '<color>'; inherits: true; initial-value: #2dd4bf; }
@property --pb { syntax: '<color>'; inherits: true; initial-value: #8b5cf6; }
@property --pg1 { syntax: '<color>'; inherits: true; initial-value: #2dd4bf; }
@property --pg2 { syntax: '<color>'; inherits: true; initial-value: #8b5cf6; }
.ide {
  --pa: #2dd4bf; --pb: #8b5cf6; --pg1: #2dd4bf; --pg2: #8b5cf6; --pfg: #04121a;
  transition: --pa .6s ease, --pb .6s ease, --pg1 .6s ease, --pg2 .6s ease;
}
.ide[data-pal="python"]     { --pa: #3b82f6; --pb: #22d3ee; --pg1: #3b82f6; --pg2: #22d3ee; --pfg: #fff; }
.ide[data-pal="javascript"] { --pa: #facc15; --pb: #fb923c; --pg1: #8b5cf6; --pg2: #f43f5e; --pfg: #1f1500; }
.ide[data-pal="web"]        { --pa: #fb7185; --pb: #f97316; --pg1: #f43f5e; --pg2: #d946ef; --pfg: #fff; }
.ide[data-pal="css"]        { --pa: #6366f1; --pb: #ec4899; --pg1: #6366f1; --pg2: #ec4899; --pfg: #fff; }
.ide[data-pal="react"]      { --pa: #22d3ee; --pb: #a78bfa; --pg1: #22d3ee; --pg2: #a78bfa; --pfg: #031a20; }
.ide[data-pal="sql"]        { --pa: #10b981; --pb: #06b6d4; --pg1: #10b981; --pg2: #06b6d4; --pfg: #fff; }
.ide[data-pal="c"]          { --pa: #94a3b8; --pb: #38bdf8; --pg1: #64748b; --pg2: #38bdf8; --pfg: #0b1220; }
.ide[data-pal="cpp"]        { --pa: #2563eb; --pb: #8b5cf6; --pg1: #2563eb; --pg2: #8b5cf6; --pfg: #fff; }
.ide[data-pal="java"]       { --pa: #ef4444; --pb: #f59e0b; --pg1: #ef4444; --pg2: #fb7185; --pfg: #fff; }
.ide[data-pal="php"]        { --pa: #818cf8; --pb: #c084fc; --pg1: #818cf8; --pg2: #c084fc; --pfg: #0b0a20; }
.ide[data-pal="xml"]        { --pa: #a3e635; --pb: #34d399; --pg1: #22c55e; --pg2: #14b8a6; --pfg: #0b1a04; }
.ide[data-pal="bootstrap"]  { --pa: #9333ea; --pb: #d946ef; --pg1: #9333ea; --pg2: #d946ef; --pfg: #fff; }
.ide[data-pal="numpy"]      { --pa: #14b8a6; --pb: #3b82f6; --pg1: #14b8a6; --pg2: #3b82f6; --pfg: #fff; }
.ide[data-pal="pandas"]     { --pa: #ec4899; --pb: #facc15; --pg1: #ec4899; --pg2: #8b5cf6; --pfg: #fff; }

.ide-monaco {
  background: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--pg1) 26%, transparent), transparent 70%),
              radial-gradient(70% 65% at 0% 100%, color-mix(in srgb, var(--pg2) 18%, transparent), transparent 70%), var(--code-bg);
}
.ide-explorer { background: linear-gradient(180deg, color-mix(in srgb, var(--pg1) 8%, var(--bg-2)), var(--bg-2) 45%); }
.ide-panel { background: radial-gradient(90% 45% at 100% 0%, color-mix(in srgb, var(--pg2) 9%, transparent), transparent 70%), var(--surface); }
.ide-tab.is-active { position: relative; box-shadow: none; background: var(--code-bg); }
.ide-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--pa), var(--pb)); }
.ide-file.is-active { background: color-mix(in srgb, var(--pg1) 16%, transparent); box-shadow: inset 2px 0 0 var(--pa); }
.ide-toolbar { position: relative; }
.ide-toolbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--pa), var(--pb)); opacity: .7; }
.ide-status { background: linear-gradient(90deg, var(--pa), var(--pb)); color: var(--pfg); border-top: 0; }
.ide-status span { opacity: .92; }
.ide [data-ide-run] { background: linear-gradient(135deg, var(--pa), var(--pb)); color: var(--pfg); box-shadow: 0 8px 22px -12px var(--pa); border-color: transparent; }
.ide [data-ide-run] kbd { color: inherit; border-color: color-mix(in srgb, var(--pfg) 30%, transparent); background: transparent; }
.ide .select { border-color: color-mix(in srgb, var(--pa) 40%, var(--line-2)); }
.ide-panel-tabs button.is-active { box-shadow: inset 0 -2px 0 var(--pa); }

/* the "your program asks for input" box */
.ask-form { text-align: left; width: min(440px, 100%); }
.ask-form h2, .ask-form > p { text-align: center; }
.ask-form label { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13.5px; color: var(--text-2); }
.ask-form input { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); outline: 0; font: 500 14px var(--mono); }
.ask-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* settings popover + menus */
.popover { position: fixed; z-index: 80; min-width: 240px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.popover h4 { margin: 4px 8px 8px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.popover label, .popover button.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; }
.popover label:hover, .popover button.menu-item:hover { background: var(--bg-3); }
.popover input[type="range"] { width: 110px; accent-color: var(--accent); }
.popover input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.popover small { color: var(--text-3); }

/* ------------------------------------------------------------ challenge page */

body.app-ish .footer { margin-top: 0; }
.challenge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); height: calc(100vh - var(--top)); }
.ch-left { overflow: auto; padding: 28px clamp(18px, 3vw, 40px) 40px; border-right: 1px solid var(--line); }
.ch-left h1 { font-size: 28px; margin-bottom: 10px; }
.ch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font: 400 12.5px var(--mono); color: var(--text-3); margin-bottom: 20px; }
.ch-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.ch-meta .ico { width: 14px; height: 14px; }
.ch-examples { display: grid; gap: 10px; margin: 22px 0; }
.example { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.example > div { padding: 10px 14px; background: var(--bg-2); }
.example > div + div { border-left: 1px solid var(--line); }
.example small { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.example pre { margin: 4px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.ch-hint, .ch-solution { border: 1px solid var(--line); border-radius: var(--r); margin-top: 10px; }
.ch-hint summary, .ch-solution summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 500; font-size: 14px; list-style: none; }
.ch-hint summary::-webkit-details-marker, .ch-solution summary::-webkit-details-marker { display: none; }
.ch-hint p { margin: 0; padding: 0 14px 14px; color: var(--text-2); font-size: 14.5px; }
.ch-solution-body { padding: 0 14px 14px; }
.ch-right { display: grid; grid-template-rows: 44px minmax(0, 1fr) minmax(140px, 36%); min-width: 0; min-height: 0; }
.ch-editor-bar { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.ch-editor-bar > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.ch-editor { min-height: 0; }
.ch-results { border-top: 1px solid var(--line); overflow: auto; padding: 12px 14px; background: var(--surface); }
.test-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; font-size: 13.5px; }
.test-row .ico { width: 18px; height: 18px; margin-top: 1px; stroke-width: 2.2; }
.test-row.pass { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.test-row.pass .ico { color: var(--ok); }
.test-row.fail { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft); }
.test-row.fail .ico { color: var(--bad); }
.test-row pre { margin: 4px 0 0; font-size: 12.5px; white-space: pre-wrap; color: var(--text-2); }
.test-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 600; }
.test-summary.all { color: var(--ok); }

/* quiz runner (quiz pages, AI generator) */
.quiz-runner { margin-top: 8px; }
.qr-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 26px; }
.qr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; font: 400 12.5px var(--mono); color: var(--text-3); }
.qr-top .progress { flex: 1; max-width: 340px; }
.qr-q { font-size: 18px; font-weight: 550; color: var(--text); margin-bottom: 18px; line-height: 1.45; letter-spacing: -.01em; }
.qr-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.qr-result { text-align: center; padding: 32px 12px 14px; }
.qr-score { font-size: 60px; font-weight: 650; letter-spacing: -.05em; line-height: 1.1; }
.qr-score.pass { color: var(--ok); } .qr-score.fail { color: var(--bad); }

/* ------------------------------------------------------------ AZ-900 exam, AI generator */

.exam-start { text-align: center; padding: 40px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.exam-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 26px 0; text-align: center; }
.exam-rules div { font-size: 13.5px; color: var(--text-3); }
.exam-rules b { display: block; font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -.03em; }
.exam-bar { position: sticky; top: var(--top); z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.exam-timer { display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--mono); padding: 6px 10px; border-radius: 9px; background: var(--bg-3); }
.exam-timer.low { color: var(--bad); background: var(--bad-soft); }
.exam-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; margin-top: 22px; }
.exam-nav button { height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 500 13px var(--mono); cursor: pointer; position: relative; }
.exam-nav button.answered { background: var(--bg-3); border-color: var(--text-3); color: var(--text); }
.exam-nav button.current { outline: 2px solid var(--accent); outline-offset: 1px; }
.exam-nav button.flagged::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.domain-bars { display: grid; gap: 12px; margin: 22px 0; text-align: left; }
.domain-bars .row { display: grid; grid-template-columns: 1fr 60px; gap: 12px; align-items: center; font-size: 14px; }
.domain-bars .row b { text-align: right; font-weight: 600; }

.exam-head { margin: -8px 0 18px; }
.exam-head h2 { margin: 8px 0 0; font-size: 22px; }
.exam-past { margin: 16px 0 0; font-size: 13.5px; }
.exam-count { font-size: 13px; }
.exam-bar .is-flagged { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.exam-legend { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 12px 0 0; font-size: 12.5px; }
.exam-legend .lg { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line-2); display: inline-block; }
.exam-legend .lg.answered { background: var(--bg-3); border-color: var(--text-3); }
.exam-legend .lg.flagged { background: var(--warn); border-color: var(--warn); border-radius: 50%; width: 8px; height: 8px; margin-left: 8px; }
.q-hint { margin: -8px 0 14px; font-size: 13.5px; color: var(--text-3); }
.yn { display: grid; gap: 8px; }
.yn-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 14px; border: 1px solid var(--line-2); border-radius: 11px; }
.yn-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.yn-btns { display: inline-flex; gap: 6px; flex: none; }
.yn-btn { height: 32px; min-width: 52px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--text-2); font: 500 13.5px var(--font); cursor: pointer; }
.yn-btn:hover:not(:disabled) { border-color: var(--text-3); color: var(--text); }
.yn-btn:disabled { cursor: default; }
.yn-btn.picked { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.yn-btn.right { border-color: var(--ok); background: var(--ok-soft); color: var(--text); }
.yn-btn.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--text); }
.v-ok { color: var(--ok) !important; } .v-bad { color: var(--bad) !important; } .v-part { color: var(--warn) !important; }
.q-study { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.rv { padding: 18px 0; border-top: 1px solid var(--line); }
.rv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rv-n { font: 500 12px var(--mono); color: var(--text-3); min-width: 22px; }
.pill.flag { color: var(--warn); background: var(--warn-soft); }
.review .row-head { margin-bottom: 4px; }
.by-group { margin: 6px 0 4px; text-align: left; }
.by-group summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-2); }
.bar-label { margin-bottom: 6px; }

.mock-row { display: flex; align-items: center; gap: 14px; padding: 12px; margin: 0 -12px; border-radius: var(--r); }
.mock-row:hover { background: var(--bg-3); }
.mock-row .module-n { padding-top: 0; }
.mock-row .cr-text small b { font-weight: 600; }
.rows.mocks { margin-top: 26px; }
.mock-acts { display: inline-flex; gap: 8px; flex: none; }

.path-head { display: flex; align-items: center; gap: 24px; margin: 28px 0 32px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.path-head > div { flex: 1; min-width: 0; }
.path-head .progress { margin: 10px 0 8px; max-width: 420px; }
.path-head p { margin: 0; }
.path-next { font-size: 15.5px; color: var(--text-2); }
.path-next b { color: var(--text); font-weight: 600; }
.path { display: grid; gap: 40px; }
.path-list { list-style: none; margin: 0; padding: 0 0 0 38px; display: grid; gap: 2px; }
.path-step { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin-left: -10px; border-radius: 10px; color: var(--text); text-decoration: none !important; }
.path-step:hover { background: var(--bg-3); }
.path-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.path-text b { font-weight: 550; font-size: 14.5px; }
.path-text small { color: var(--text-3); font-size: 12.5px; }
.path-meta { flex: none; font: 400 12px var(--mono); color: var(--text-3); white-space: nowrap; }
.path-step.done .path-meta { color: var(--ok); }
.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 18px; }
.plan-day h3 { margin: 0 0 6px; font-size: 14px; font-family: var(--mono); font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.plan-day .path-list { padding-left: 0; }

.qb { display: grid; gap: 16px; }
.qb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.qb-label { width: 120px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.qb-pick { display: grid; gap: 4px; padding-left: 136px; }
.qb-note { margin: -8px 0 0 136px; font-size: 13.5px; }
.qb-go { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.qb-go .muted { font-size: 13.5px; }
.qb-tools { display: flex; gap: 16px; margin-bottom: 4px; font-size: 13px; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14.5px; color: var(--text); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.check small { color: var(--text-3); font: 400 12px var(--mono); margin-left: 4px; }
.qb-group { border-top: 1px solid var(--line); }
.qb-group:last-child { border-bottom: 1px solid var(--line); }
.qb-group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 550; list-style: none; }
.qb-group summary::-webkit-details-marker { display: none; }
.qb-group summary small { font: 400 12px var(--mono); color: var(--text-3); white-space: nowrap; }
.qb-topics { padding: 0 0 10px 2px; }
.weak-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.weak-n { font-size: 30px; font-weight: 600; letter-spacing: -.04em; }
.weak-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--r); }
.weak-row:hover { background: var(--bg-3); }
.weak-row .cr-text small a { color: var(--text-2); }
.weak-all { margin-top: 10px; font-size: 14px; }

.ai-form { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 22px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ai-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.ai-form input, .ai-form select { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); outline: 0; }
.ai-form input:focus, .ai-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-form .btn { grid-column: 1 / -1; justify-self: start; }
.ai-status { margin: 18px 0; font-size: 14.5px; color: var(--text-2); }
.ai-status.err { padding: 14px 16px; border-radius: var(--r); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }

/* ------------------------------------------------------------ progress page */

.level-row { display: flex; align-items: center; gap: 18px; max-width: 560px; }
.level-badge { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 18px; font: 650 24px var(--font); color: #fff; background: var(--grad); }
.level-text { flex: 1; }
.level-text b { font-size: 17px; font-weight: 600; }
.level-text .progress { margin: 8px 0 6px; height: 6px; }
.level-text small { font: 400 12px var(--mono); color: var(--text-3); }
.stat-row { display: flex; flex-wrap: wrap; gap: 14px 44px; list-style: none; margin: 32px 0 40px; padding: 0; }
.stat-row b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.stat-row span { font: 400 12.5px var(--mono); color: var(--text-3); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 12px; }
.badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 10px 16px; border-radius: var(--r-lg); }
.badge:hover { background: var(--bg-2); }
.badge b { font-size: 14px; font-weight: 600; }
.badge small { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.badge .when { font: 500 11px var(--mono); color: var(--ok); }
.badge.locked .medal { filter: grayscale(1); opacity: .3; }
.medal { width: 60px; height: 60px; }
.progress-list { display: grid; gap: 2px; }
.progress-row { display: grid; grid-template-columns: 40px 1fr 180px 56px; gap: 16px; align-items: center; padding: 12px; margin: 0 -12px; border-radius: var(--r); color: var(--text); text-decoration: none !important; }
.progress-row:hover { background: var(--bg-3); }
.progress-row small { display: block; color: var(--text-3); font: 400 12px var(--mono); }
.progress-row b.pct { text-align: right; font: 500 13px var(--mono); }

/* ------------------------------------------------------------ search palette, toasts */

.palette-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding-top: 12vh; background: rgba(6, 6, 12, .45); backdrop-filter: blur(4px); animation: fadeIn .12s ease; }
.palette { width: min(620px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; animation: popIn .16s cubic-bezier(.2, .8, .2, 1); }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 54px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.palette-input input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; }
.palette-list { max-height: 50vh; overflow: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none !important; }
.palette-item.is-active { background: var(--bg-3); }
.palette-item .k { min-width: 46px; height: 22px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; font: 500 11px var(--mono); color: var(--text-2); background: var(--bg-3); }
.palette-item .k.k-tile { height: auto; padding: 0; background: none; }
.palette-item .k.k-tile .tile { --size: 28px; }
.palette-item b { font-weight: 550; }
.palette-item small { display: block; color: var(--text-3); font-size: 12.5px; }
.palette-empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 14px; }
.palette-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: grid; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 380px; padding: 12px 16px 12px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); animation: toastIn .35s cubic-bezier(.2, .8, .2, 1); }
.toast.out { animation: toastOut .25s ease forwards; }
.toast .medal { width: 44px; height: 44px; }
.toast > .ico { width: 32px; height: 32px; padding: 7px; border-radius: 9px; color: var(--bg); background: var(--text); }
.toast b { display: block; font-size: 14px; font-weight: 600; }
.toast small { color: var(--text-3); font-size: 12.5px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

.big-code { font: 650 120px/1 var(--font); letter-spacing: -.07em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.center-page { text-align: center; padding: 96px 0 40px; }
.center-page .lede { margin-inline: auto; }

/* ------------------------------------------------------------ depth and motion
   The structure stays quiet (lists and tabs, no grids of boxes); this layer is
   the atmosphere: an aurora and a grid that fades out behind page heads, a
   glow that follows the pointer along rows, gradient edges on the few things
   that deserve one, and sections that rise in as they scroll into view.
   Everything that moves stops under prefers-reduced-motion. */

:root {
  --grid-line: rgba(10, 40, 70, .06);
  --aurora-1: rgba(var(--g1), .22);
  --aurora-2: rgba(var(--g2), .17);
  --aurora-3: rgba(var(--g3), .10);
  --edge: linear-gradient(135deg, rgba(var(--g1), .55), rgba(var(--g2), .35) 45%, transparent 75%);
}
[data-theme="dark"] {
  --grid-line: rgba(255, 255, 255, .05);
  --aurora-1: rgba(var(--g3), .30);
  --aurora-2: rgba(var(--g2), .20);
  --aurora-3: rgba(var(--g3), .14);
}
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* the top bar: a gradient hairline, and a mark that tilts when you point at it */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--g1), .5) 30%, rgba(var(--g2), .5) 70%, transparent);
}
.logo-mark { filter: drop-shadow(0 4px 10px rgba(var(--g1), .35)); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.brand:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.tab.is-active::after, .tab-link[aria-current="page"]::after { background: var(--grad); box-shadow: 0 0 12px rgba(var(--g1), .55); }

/* page heads: aurora above, a fine grid fading out below it */
.page-top { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 6px; }
.page-top::before, .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 0%, #000 25%, transparent 75%);
}
.page-top::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: -230px;
  width: min(1100px, 130vw); height: 460px; transform: translateX(-50%);
  background: radial-gradient(38% 48% at 30% 52%, var(--aurora-1), transparent 70%), radial-gradient(34% 44% at 70% 42%, var(--aurora-2), transparent 70%);
}
.cert-top::after { background: radial-gradient(38% 48% at 30% 52%, color-mix(in srgb, var(--cg, var(--c)) 30%, transparent), transparent 70%), radial-gradient(34% 44% at 72% 40%, var(--aurora-1), transparent 70%); }
.track-top::after { background: radial-gradient(40% 50% at 25% 55%, color-mix(in srgb, var(--cg, var(--c)) 26%, transparent), transparent 70%), radial-gradient(34% 44% at 75% 40%, var(--aurora-2), transparent 70%); }

/* the hero: a slowly drifting aurora, the same fading grid, a shimmering headline */
.hero::before {
  width: min(1300px, 170vw); height: 860px; top: -380px;
  background: radial-gradient(30% 38% at 30% 46%, var(--aurora-1), transparent 70%),
              radial-gradient(27% 34% at 68% 40%, var(--aurora-2), transparent 70%),
              radial-gradient(22% 28% at 52% 66%, var(--aurora-3), transparent 70%);
  animation: aurora 16s ease-in-out infinite;
}
@keyframes aurora {
  0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
  50% { transform: translateX(-47%) rotate(7deg) scale(1.08); }
}
.hero .kicker {
  padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero .grad-text {
  background-image: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1)); background-size: 300% 100%;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { background-position: 300% 0; } }
[data-theme="dark"] .display { text-shadow: 0 0 60px rgba(var(--g3), .25); }
.hero-stats b { font-variant-numeric: tabular-nums; }

/* the editor in the hero: a gradient edge, a glow, and demos that type themselves */
.hero-demo .window {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box;
  box-shadow: 0 40px 90px -40px rgba(var(--g1), .55), var(--shadow-pop);
}
.window-bar .window-tab { border: 0; background: none; cursor: pointer; font-family: var(--mono); }
.window-bar .window-tab.is-active { color: var(--text); background: var(--bg-3); }
.window-run { transition: transform .15s, box-shadow .15s; }
.window-run:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(var(--g1), .7); }
.demo-pane { display: none; }
.demo-pane.is-on { display: block; }
.window-code .cl { display: block; min-height: 1.75em; white-space: pre; }
.tk-n { color: #c2410c; }
[data-theme="dark"] .tk-n { color: #ffb37a; }
.hero-demo.typing .demo-pane.is-on .cl { animation: typeIn .5s steps(28, end) both; animation-delay: calc(var(--i) * .36s + .15s); }
@keyframes typeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.window-code .ln { display: inline-block; width: 1.6em; margin-right: 1.1em; font-style: normal; text-align: right; color: var(--text-3); opacity: .55; user-select: none; }

/* under the code: what the learner types, and what the program prints */
.window-io { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); border-top: 1px solid var(--line); background: var(--bg-2); }
.window-in { border-right: 1px solid var(--line); }
.window-io .window-out { border-top: 0; background: none; }
.window-io-head { display: flex; align-items: center; gap: 7px; padding: 11px 18px 0; font: 500 10.5px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .09em; }
.window-io-head .ico { width: 13px; height: 13px; }
.window-io pre { margin: 0; padding: 6px 18px 16px; min-height: 5.6em; font: 400 13px/1.7 var(--mono); white-space: pre-wrap; word-break: break-word; }
.window-io .il, .window-io .ol { display: block; }
.window-in pre { color: var(--accent-text); }
.window-in .il:last-child::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: blink 1s steps(1) infinite; }
.window-out pre { color: var(--text-2); }
.window-out .ol b { color: var(--accent-text); font-weight: 600; }
@keyframes blink { 50% { opacity: 0; } }
.hero-demo.typing .demo-pane.is-on .il { animation: typeIn .5s steps(16, end) both; animation-delay: calc(var(--in-delay, 1.5s) + var(--j) * .6s); }
.hero-demo.typing .demo-pane.is-on .ol { animation: fadeUp .4s ease both; animation-delay: calc(var(--out-delay, 2.6s) + var(--j) * .14s); }
.hero-demo.typing .demo-pane.is-on .window-out .window-io-head::after { content: "· running"; color: var(--accent-text); animation: fadeOut .2s ease forwards; animation-delay: var(--out-delay, 2.6s); }
@keyframes fadeOut { to { opacity: 0; } }

/* every course, sliding past under the hero */
.strip { margin-top: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.strip-track { display: flex; width: max-content; animation: strip 50s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-dup { display: flex; }
.strip-item { display: inline-flex; align-items: center; gap: 10px; margin: 0 22px; color: var(--text-2); font-weight: 500; font-size: 14.5px; white-space: nowrap; text-decoration: none !important; }
.strip-item:hover { color: var(--text); }
@keyframes strip { to { transform: translateX(-50%); } }


/* rows: a soft light in the row's colour follows the pointer (app.js sets --mx/--my) */
.course:hover, .challenge-card:hover, .quiz-card:hover, .domain:hover, .mock-row:hover, .path-step:hover, .weak-row:hover, .lessons li > a:hover, .progress-row:hover {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--cg, var(--c, var(--accent))) 13%, transparent), transparent 70%), var(--bg-3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg, var(--c, var(--accent))) 16%, transparent);
}
.course { transition: background .2s, box-shadow .2s, transform .2s; }
.course:hover { transform: translateY(-1px); }
.course:hover .tile { transform: scale(1.06) rotate(-3deg); }
.tile { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

/* the certification row: an edge of light runs round it */
.cert-row {
  border: 1px solid transparent;
  background: linear-gradient(110deg, color-mix(in srgb, var(--cg, var(--c)) 9%, var(--surface)), var(--surface) 55%) padding-box,
              conic-gradient(from var(--ang), color-mix(in srgb, var(--cg, var(--c)) 75%, transparent), transparent 22%, transparent 52%, rgba(var(--g1), .6) 74%, color-mix(in srgb, var(--cg, var(--c)) 75%, transparent)) border-box;
  animation: edge 7s linear infinite;
  box-shadow: 0 20px 50px -34px color-mix(in srgb, var(--cg, var(--c)) 90%, transparent);
}
@keyframes edge { to { --ang: 360deg; } }

/* features: icons in gradient chips, lifting on hover */
.trio a { padding: 14px; margin: -14px; border-radius: var(--r-lg); transition: background .2s, transform .2s; }
.trio a:hover { background: var(--bg-2); transform: translateY(-3px); }
.trio a > .ico { width: 42px; height: 42px; padding: 10px; border-radius: 13px; color: #fff; background: var(--grad); box-shadow: 0 10px 24px -10px rgba(var(--g1), .75); }

/* buttons: ink stays ink, with a glow and a sweep of light */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 10px 24px -14px rgba(var(--g1), .9); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(var(--g2), .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-lg.btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 16px 36px -16px rgba(var(--g1), .95); }

/* how it works: three steps on a gradient line */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 8px 0 0; padding: 0; }
.steps::before { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--g1), .7), rgba(var(--g2), .7)); }
.steps li { position: relative; }
.step-ico { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 0 0 6px var(--bg), 0 12px 26px -10px rgba(var(--g1), .85); }
.step-ico .ico { width: 20px; height: 20px; }
.steps b { display: block; margin: 18px 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; }
.steps p { margin: 0; color: var(--text-2); font-size: 14.5px; }

/* sections rise in as they scroll into view (app.js adds .reveal, then .in) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* lessons: reading progress, editor-style code blocks, lit callouts */
.read-progress { position: fixed; left: 0; right: 0; top: var(--top); height: 2px; z-index: 49; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: 0 0 10px rgba(var(--g1), .6); transition: width .1s linear; }
.lesson { position: relative; isolation: isolate; }
.lesson::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: -40px; left: 0; right: 0; height: 320px;
  background: radial-gradient(45% 60% at 20% 20%, color-mix(in srgb, var(--cg, var(--c, var(--accent))) 14%, transparent), transparent 70%), radial-gradient(35% 50% at 70% 0%, var(--aurora-2), transparent 70%);
  opacity: .8;
}
.code { box-shadow: 0 1px 2px rgba(10, 10, 20, .03), 0 12px 30px -24px rgba(10, 10, 20, .35); }
.code-head { justify-content: flex-start; }
.code-head::before {
  content: ""; flex: none; width: 40px; height: 10px; margin-right: 8px;
  background: radial-gradient(circle 4.5px at 5px 5px, #ff5f57 96%, transparent), radial-gradient(circle 4.5px at 20px 5px, #febc2e 96%, transparent), radial-gradient(circle 4.5px at 35px 5px, #28c840 96%, transparent);
  opacity: .85;
}
.code[data-lang="output"] .code-head::before { display: none; }
.code-tools { margin-left: auto; }
.callout { border-left: 3px solid var(--k, var(--accent)); background: linear-gradient(90deg, color-mix(in srgb, var(--k, var(--accent)) 8%, var(--bg-2)), var(--bg-2) 65%); }
.quiz { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; }
.side-links a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
.lesson-done { border: 1px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--edge) border-box; }
.lesson-done.is-done { background: linear-gradient(var(--ok-soft), var(--ok-soft)) padding-box, linear-gradient(135deg, var(--ok), transparent 70%) border-box; }
.pager { transition: border-color .2s, background .2s, transform .2s; }
.pager:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* quiz and exam cards: the same gradient edge */
.qr-card, .exam-start { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; box-shadow: 0 30px 70px -50px rgba(var(--g1), .6); }
.qr-score.pass { text-shadow: 0 0 40px color-mix(in srgb, var(--ok) 45%, transparent); }

/* the footer: a gradient hairline above it */
.footer { position: relative; border-top: 0; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 20%, rgba(var(--g1), .45) 50%, var(--line-2) 80%, transparent); }

/* badges: medals float up a touch on hover */
.badge { transition: transform .2s, background .2s; }
.badge:hover { transform: translateY(-3px); }
.badge:not(.locked) .medal { filter: drop-shadow(0 8px 14px rgba(var(--g1), .35)); }
.level-badge { box-shadow: 0 14px 30px -12px rgba(var(--g1), .8); }

/* ------------------------------------------------------------ menus under the top-bar tabs */

.nav-item { position: relative; display: flex; }
.nav-item.has-mega { position: static; }                 /* the courses panel centres on the whole bar */
.tab-link .nav-chev { width: 13px; height: 13px; margin-left: 5px; opacity: .5; transition: transform .25s ease, opacity .2s; }
.nav-item:hover .nav-chev, .nav-item:focus-within .nav-chev { transform: rotate(180deg); opacity: .9; }
.nav-menu {
  position: absolute; top: calc(100% - 6px); left: 50%; z-index: 60; width: 350px; padding: 10px;
  background: color-mix(in srgb, var(--surface) 97%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-pop), 0 0 0 1px rgba(var(--g1), .05), 0 20px 60px -30px rgba(var(--g1), .5);
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px) scale(.98); transform-origin: top center;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* bridge the gap under the tab */
.nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.nav-menu.mega { top: calc(100% - 2px); width: min(940px, calc(100vw - 32px)); padding: 16px 16px 10px; }
.mm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 14px; }
.mm-head { padding: 8px 10px 6px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mm-link, .ml-link {
  display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 11px; color: var(--text); text-decoration: none !important;
  transition: background .15s, transform .15s;
}
.mm-link:hover, .ml-link:hover { background: radial-gradient(180px circle at var(--mx, 30%) var(--my, 50%), color-mix(in srgb, var(--cg, var(--c, var(--accent))) 16%, transparent), transparent 75%), var(--bg-3); transform: translateX(3px); }
.mm-link b, .ml-link b { display: block; font-size: 13.5px; font-weight: 550; letter-spacing: -.01em; }
.mm-link small, .ml-link small { display: block; color: var(--text-3); font-size: 12px; line-height: 1.35; }
.mm-link small { font: 400 11px var(--mono); }
.mm-foot { display: flex; align-items: center; justify-content: space-between; margin: 10px -6px 0; padding: 12px 16px 6px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 13.5px; font-weight: 500; text-decoration: none !important; }
.mm-foot:hover { color: var(--text); }
.ml-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(var(--g1), .18); }
.ml-ico .ico { width: 17px; height: 17px; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 6px; }
.mm-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font: 500 12px var(--mono); text-decoration: none !important; transition: all .15s; }
.mm-chip:hover { color: var(--text); border-color: rgba(var(--g1), .55); background: var(--accent-soft); }

/* ------------------------------------------------------------ the landing page */

.hero-split { text-align: left; padding: 72px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-split .display { font-size: clamp(40px, 5.4vw, 70px); margin: 22px 0 20px; max-width: none; }
.hero-split .lede { margin: 0; max-width: 560px; }
.hero-split .cta { margin-top: 30px; }
.hero-split .resume { margin: 18px 0 0; }
.hero-proof { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px 26px; list-style: none; margin: 36px 0 0; padding: 0; }
.hero-proof b { display: block; font-size: 26px; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-proof span { font: 400 12px var(--mono); color: var(--text-3); }
.hero-visual { position: relative; perspective: 1200px; }
.hero-visual .hero-demo { margin: 0; max-width: none; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(46px); opacity: .75; pointer-events: none; }
.orb.o1 { width: 260px; height: 260px; left: -60px; top: -50px; background: rgba(var(--g1), .55); animation: drift 14s ease-in-out infinite; }
.orb.o2 { width: 220px; height: 220px; right: -40px; top: 30%; background: rgba(var(--g2), .5); animation: drift 17s ease-in-out infinite reverse; }
.orb.o3 { width: 200px; height: 200px; left: 30%; bottom: -70px; background: rgba(var(--g3), .45); animation: drift 20s ease-in-out infinite; }
[data-theme="light"] .orb { opacity: .45; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -24px) scale(1.08); } 66% { transform: translate(-22px, 18px) scale(.95); } }
.float-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; white-space: nowrap;
  font-size: 13px; font-weight: 550; color: var(--text); background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-pop);
  transform: translate(var(--fx, 0px), var(--fy, 0px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.float-chip .ico { width: 16px; height: 16px; color: var(--accent); }
.float-chip.fc2 { right: 6%; top: -58px; animation: bob 7s ease-in-out infinite .8s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.band { padding: 20px 0 8px; }
.band-title { margin: 0 0 14px; text-align: center; font: 400 12.5px var(--mono); color: var(--text-3); letter-spacing: .02em; }
.band .strip { margin-top: 0; }

.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.04em; margin: 10px 0 12px; }
.section-head h2 code { font-size: .8em; padding: .05em .3em; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.section-head .lede { margin: 0 auto; }
.eyebrow { margin: 0; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; padding: 34px 0; }
.feature.flip .f-copy { order: 2; }
.feature h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.035em; margin: 10px 0 12px; }
.feature .f-copy > p { color: var(--text-2); font-size: 16px; margin: 0 0 18px; }
.checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 15px; }
.checks .ico { width: 18px; height: 18px; padding: 3px; margin-top: 1px; border-radius: 50%; color: var(--btn-fg); background: var(--btn-bg); stroke-width: 2.6; }
.f-visual { position: relative; }
.f-visual::before { content: ""; position: absolute; inset: 10% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--g1), .28), transparent); filter: blur(30px); }

.mock {
  position: relative; border-radius: 18px; padding: 18px; overflow: hidden;
  border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box;
  box-shadow: 0 40px 80px -50px rgba(var(--g1), .7), var(--shadow);
}
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.mk-time { display: inline-flex; align-items: center; gap: 5px; font: 400 12px var(--mono); color: var(--text-3); }
.mk-time .ico { width: 13px; height: 13px; }
.mk-code { border: 1px solid var(--line); border-radius: 12px; background: var(--code-bg); overflow: hidden; }
.mk-bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--line); font: 400 11.5px var(--mono); color: var(--text-3); }
.mk-bar .dots { margin-right: 0; }
.mk-run { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; color: var(--btn-fg); background: var(--btn-bg); font: 600 11.5px var(--font); }
.mk-run .ico { width: 11px; height: 11px; }
.mock pre { margin: 0; padding: 12px 14px; font: 400 13px/1.7 var(--mono); color: var(--text); }
.mk-out { display: grid; gap: 2px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--bg-2); font: 400 12.5px var(--mono); color: var(--text-2); }

.mock-ide { display: grid; grid-template-columns: 130px minmax(0, 1fr); padding: 0; min-height: 260px; }
.mi-side { display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--line); background: var(--bg-2); font: 400 12px var(--mono); color: var(--text-3); }
.mi-side small { padding: 0 6px 6px; font-size: 10px; letter-spacing: .08em; }
.mi-side span { padding: 5px 8px; border-radius: 6px; }
.mi-side span.on { color: var(--text); background: var(--bg-3); }
.mi-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.mi-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-2); font: 400 12px var(--mono); color: var(--text-3); }
.mi-tabs span { padding: 9px 14px; border-right: 1px solid var(--line); }
.mi-tabs span.on { color: var(--text); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
.mi-out { display: grid; gap: 3px; padding: 10px 16px 14px; border-top: 1px solid var(--line); font: 400 12px var(--mono); color: var(--text-2); }
.mi-out small { font-size: 10px; letter-spacing: .08em; color: var(--text-3); }

.mt-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); font-size: 14px; }
.mt-row .ico { color: var(--ok); stroke-width: 2.2; }
.mt-row small { margin-left: auto; font: 400 12px var(--mono); color: var(--text-3); }
.mt-sum { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; color: var(--ok); }

.mock-cert { display: flex; align-items: center; gap: 26px; }
.mc-ring { position: relative; width: 150px; height: 150px; flex: none; }
.mc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mc-ring circle { fill: none; stroke-width: 9; }
.mc-fg { stroke: url(#cm-grad); stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 46; }
.mc-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.mc-ring b { font-size: 34px; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.mc-ring small { font: 400 12px var(--mono); color: var(--text-3); }
.mc-side { display: grid; gap: 10px; min-width: 0; }
.mc-step { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-3); }
.mc-step.done { color: var(--text); }
.mc-step .ico { width: 17px; height: 17px; }
.mc-step.done .ico { color: var(--ok); }

.mp-level { display: flex; align-items: center; gap: 16px; }
.mp-level > div { flex: 1; }
.mp-level b { display: block; margin-bottom: 8px; }
.mp-level small { display: block; margin-top: 6px; font: 400 12px var(--mono); color: var(--text-3); }
.mp-badge { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 18px; font: 650 24px var(--font); color: var(--btn-fg); background: var(--btn-bg); box-shadow: 0 14px 30px -12px rgba(var(--g1), .8); }
.mp-bar { width: 84% !important; }
.mp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.mp-streak { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 14px; }
.mp-streak .ico { color: #f97316; }
.mp-medals { display: flex; gap: 8px; }
.medal-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(0, 0, 0, .4); }
.medal-dot .ico { width: 17px; height: 17px; }
.medal-dot.m0 { background: linear-gradient(135deg, #f0b27a, #b0662c); }
.medal-dot.m1 { background: linear-gradient(135deg, #e3e8f1, #8d98ae); }
.medal-dot.m2 { background: linear-gradient(135deg, #ffd96a, #c98d12); }
.medal-dot.m3 { background: linear-gradient(135deg, #99f6e4, #8b5cf6); }

/* the mock-ups come alive when they scroll into view (app.js adds .in) */
.feature.in .mk-run { animation: pressRun .5s ease .5s both; }
.feature.in .mk-out span { animation: fadeUp .4s ease both; }
.feature.in .mk-out span:nth-child(1) { animation-delay: 1s; } .feature.in .mk-out span:nth-child(2) { animation-delay: 1.25s; } .feature.in .mk-out span:nth-child(3) { animation-delay: 1.5s; }
@keyframes pressRun { 50% { transform: scale(.92); box-shadow: 0 0 0 6px rgba(var(--g1), .25); } }
.feature.in .mi-out span { animation: fadeUp .4s ease 1s both; }
@keyframes grow { from { width: 0; } }
.feature.in .mt-row { animation: slideIn .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .25s + .2s); }
.feature.in .mt-sum { animation: fadeUp .4s ease 1.3s both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px); } }
.feature.in .mc-fg { animation: dial 1.6s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes dial { from { stroke-dashoffset: 327; } }
.feature.in .mc-step { animation: fadeUp .4s ease both; }
.feature.in .mc-step:nth-child(2) { animation-delay: .4s; } .feature.in .mc-step:nth-child(3) { animation-delay: .6s; } .feature.in .mc-step:nth-child(4) { animation-delay: .8s; } .feature.in .mc-step:nth-child(5) { animation-delay: 1s; }
.feature.in .mp-bar { animation: grow 1.4s cubic-bezier(.2, .8, .2, 1) .2s both; }
.feature.in .medal-dot { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.feature.in .medal-dot.m1 { animation-delay: .15s; } .feature.in .medal-dot.m2 { animation-delay: .3s; } .feature.in .medal-dot.m3 { animation-delay: .45s; }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }

/* what we teach: five areas, each with its courses as chips */
.topics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 26px; }
.topic-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.topic-head b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.topic-head small { font: 400 11.5px var(--mono); color: var(--text-3); }
.topic-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--btn-fg); background: var(--btn-bg); box-shadow: 0 10px 22px -10px rgba(var(--g1), .8); }
.topic-ico .ico { width: 19px; height: 19px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 500; text-decoration: none !important; transition: all .2s;
}
.chip:hover { color: var(--text); transform: translateY(-2px); border-color: color-mix(in srgb, var(--cg, var(--c)) 50%, var(--line)); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cg, var(--c)) 80%, transparent); }

/* the closing call to action */
.final-cta {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  padding: 44px 48px; border-radius: 26px; border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ang), rgba(var(--g1), .8), rgba(var(--g2), .2), rgba(var(--g3), .7), rgba(var(--g1), .8)) border-box;
  animation: edge 9s linear infinite;
}
.final-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 80% at 15% 20%, rgba(var(--g1), .18), transparent 70%), radial-gradient(35% 70% at 90% 90%, rgba(var(--g3), .16), transparent 70%); }
.final-cta h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.final-cta p { margin: 0; color: var(--text-2); }
.final-cta .cta { margin: 0; }

/* every page arrives with a soft fade-up; the top bar stays put */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease both vtOut; }
::view-transition-new(root) { animation: 360ms cubic-bezier(.2, .8, .2, 1) both vtIn; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }
.topbar { view-transition-name: topbar; }
.btn { transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .2s, filter .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost:hover { border-color: rgba(var(--g1), .45); }
.reveal { transition-delay: var(--d, 0s); }

/* ------------------------------------------------------------ ambient: the page is never a blank sheet */
/* soft light pooled in the corners of every page, and a faint dot grid that fades out towards the middle */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background: radial-gradient(42vw 36vw at 0% 0%, rgba(var(--g1), .09), transparent 70%),
              radial-gradient(40vw 34vw at 100% 30%, rgba(var(--g2), .08), transparent 70%),
              radial-gradient(46vw 40vw at 30% 100%, rgba(var(--g3), .08), transparent 70%);
}
body::after {
  background-image: radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 30%, #000 85%);
  mask-image: radial-gradient(ellipse at 50% 40%, transparent 30%, #000 85%);
  opacity: .55;
}
body.app::before, body.app::after { display: none; }

/* ------------------------------------------------------------ Discord */
.btn-discord { background: #5865f2; color: #fff; border-color: transparent; box-shadow: 0 10px 26px -12px rgba(88, 101, 242, .8); }
.btn-discord:hover { background: #4752c4; color: #fff; }
.btn-discord .ico { color: #fff; }
.icon-btn.discord-btn:hover { color: #5865f2; }
.nav-item.nav-contact { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 500; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-link .ico { width: 15px; height: 15px; }

/* ------------------------------------------------------------ the crew */
.mascot { display: block; width: 72px; height: 72px; flex: none; border: 0 !important; border-radius: 0 !important; }
.mascot.bob, .crew-mate .mascot { animation: bob 5s ease-in-out infinite; }
.crew-mate:nth-child(3n+2) .mascot { animation-delay: -1.6s; }
.crew-mate:nth-child(3n) .mascot { animation-delay: -3.2s; }

/* a crewmate with something to say */
.helper { display: flex; align-items: flex-end; gap: 12px; margin: 26px 0 0; }
.helper .mascot { width: 76px; height: 76px; margin-bottom: -4px; }
.helper .bubble {
  position: relative; flex: 1; min-width: 0; padding: 12px 16px; border-radius: 16px 16px 16px 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cg, var(--c, var(--c1))) 12%, var(--surface)), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg, var(--c, var(--c1))) 22%, var(--line));
}
.helper .bubble::before {
  content: ""; position: absolute; left: -7px; bottom: 10px; width: 14px; height: 14px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--cg, var(--c, var(--c1))) 12%, var(--surface)); box-shadow: -1px 1px 0 color-mix(in srgb, var(--cg, var(--c, var(--c1))) 22%, var(--line));
}
.helper .bubble b { font-size: 13px; color: var(--text); }
.helper .bubble p { margin: 2px 0 0; color: var(--text-2); font-size: 14.5px; }
.helper-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13.5px; }
.helper.hello { max-width: 560px; }
.lesson .helper.tip { margin: 30px 0 0; }

/* home: the crew in a row */
.crew-band .section-head { margin-bottom: 30px; }
.crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; }
.crew-mate {
  display: grid; justify-items: center; width: 108px; padding: 10px 4px 12px; border-radius: 18px; text-decoration: none !important;
  transition: background .2s, transform .2s;
}
.crew-mate .mascot { width: 84px; height: 84px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.crew-mate b { margin-top: 4px; font-size: 14px; color: var(--text); }
.crew-mate small { font: 400 11.5px var(--mono); color: var(--text-3); }
.crew-mate:hover { background: color-mix(in srgb, var(--cg, var(--c)) 10%, transparent); transform: translateY(-3px); }
.crew-mate:hover .mascot { transform: scale(1.1) rotate(-4deg); }

/* home: the community band */
.community {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(88, 101, 242, .2), transparent 60%), linear-gradient(120deg, color-mix(in srgb, #5865f2 8%, var(--surface)), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #5865f2 28%, var(--line));
}
.community h2 { margin: 0 0 4px; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.03em; }
.community p { margin: 0; color: var(--text-2); }
.community-ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: #5865f2; color: #fff; box-shadow: 0 14px 30px -14px rgba(88, 101, 242, .9); }
.community-ico .ico { width: 34px; height: 34px; }

/* ------------------------------------------------------------ games: the hub */
.section-head.left { text-align: left; margin: 48px 0 18px; max-width: none; }
.section-head.left h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 6px; }
.section-head.left .lede { margin: 0; }
.game-modes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; }
.game-modes li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.game-modes b { display: block; font-size: 15.5px; }
.game-modes p { margin: 3px 0 0; color: var(--text-2); font-size: 14px; }
.gm-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 25%, transparent); }
.gm-ico .ico { width: 21px; height: 21px; }
.game-modes.compact { grid-template-columns: 1fr; gap: 0; margin-bottom: 18px; }
.game-modes.compact li { padding: 10px 0; }

.crew-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.crew-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 8px; border-radius: 16px; color: var(--text); text-decoration: none !important; transition: background .2s, box-shadow .2s, transform .2s; }
.crew-row .mascot { width: 64px; height: 64px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.crew-row:hover { transform: translateY(-1px); background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--cg, var(--c)) 13%, transparent), transparent 70%), var(--bg-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg, var(--c)) 16%, transparent); }
.crew-row:hover .mascot { transform: scale(1.08) rotate(-4deg); }
.cr-text { flex: 1; min-width: 0; display: grid; }
.cr-text b { font-size: 15.5px; }
.cr-text small { color: var(--text-2); font-size: 13.5px; }
.cr-meta { font: 400 12px var(--mono); color: var(--text-3); }
.cr-best { font: 500 12px var(--mono); color: var(--accent-text); }
.cr-best:empty { display: none; }

/* ------------------------------------------------------------ games: a course's games */
.game-head { display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.game-head .mascot { width: 128px; height: 128px; }
.game-head h1 { margin: 2px 0 6px; }
.game-head .lede { margin: 0; max-width: 620px; }
.game { padding: 26px 0 10px; }
.game-start, .game-end { display: flex; align-items: center; gap: 30px; position: relative; }
.game-start h2, .game-end h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
.game-start h2 .ico { width: 26px; height: 26px; color: var(--accent-text); }
.game-start p, .game-end p { color: var(--text-2); max-width: 560px; margin: 0 0 14px; }
.game-best { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--mono); color: var(--accent-text) !important; }
.game-end .facts { margin: 4px 0 18px; }
.new-best { color: var(--ok) !important; font-weight: 600; }

/* the crewmate beside the play, with a speech bubble */
.mate { position: relative; flex: none; width: 96px; text-align: center; }
.mate img { width: 96px; height: 96px; display: block; margin: 0 auto; }
.mate.big { width: 150px; }
.mate.big img { width: 150px; height: 150px; animation: bob 5s ease-in-out infinite; }
.mate-say {
  position: absolute; left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%); white-space: nowrap; padding: 5px 11px; border-radius: 12px;
  font: 600 12.5px var(--font); color: var(--text); background: var(--raise); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--line);
}
.mate-say:empty { display: none; }
.mate.hop img { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
.mate.shake img { animation: shake .5s ease; }
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-18px) scale(1.05, .95); } 70% { transform: translateY(0) scale(.96, 1.04); } }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-7px) rotate(-4deg); } 40%, 80% { transform: translateX(7px) rotate(4deg); } }

.quest-play { display: flex; align-items: flex-start; gap: 22px; margin-top: 22px; }
.quest-play .mate { margin-top: 34px; }
.quest-play .qr-card, .quest-play .puzzle-board { flex: 1; min-width: 0; }

/* Treasure Quest: islands along a dotted route, the ship sails from one to the next */
.quest-hud, .speed-hud, .puzzle-hud { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; font: 500 13.5px var(--mono); color: var(--text-2); }
.hearts { display: inline-flex; gap: 4px; }
.hearts .ico { width: 22px; height: 22px; color: #f43f5e; transition: transform .3s, color .3s, opacity .3s; }
.hearts .lost .ico { color: var(--text-3); opacity: .35; transform: scale(.8); }
.coins { display: inline-flex; align-items: center; gap: 6px; color: #d4a017; }
.coins .ico { width: 20px; height: 20px; }
.quest-map {
  --n: 8; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: center; height: 92px; margin-top: 14px; padding: 0 6px;
  border-radius: 20px; overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 10px, color-mix(in srgb, var(--c2) 35%, transparent) 10px 18px) center 62% / calc(100% - 80px) 2px no-repeat,
              radial-gradient(120% 120% at 50% 120%, rgba(var(--g2), .22), transparent 60%), linear-gradient(180deg, rgba(var(--g2), .06), rgba(var(--g1), .12));
  box-shadow: inset 0 0 0 1px var(--line);
}
.isle {
  justify-self: center; display: grid; place-items: center; width: 34px; height: 22px; margin-top: 30px; border-radius: 50% 50% 40% 40%;
  font: 600 11px var(--mono); color: #6b4f1d; background: linear-gradient(180deg, #f6dfa3, #e2bc69); box-shadow: 0 6px 0 -2px #2fb58f, 0 10px 14px -8px rgba(0, 0, 0, .4);
  transition: transform .3s;
}
.isle.done { background: linear-gradient(180deg, #c8f2df, #8fdcb9); color: #136f4f; }
.isle.treasure { width: 40px; height: 28px; color: #9a6a00; background: linear-gradient(180deg, #ffe7a0, #f5c542); }
.isle.treasure .ico { width: 16px; height: 16px; }
.ship {
  position: absolute; top: 4px; left: calc(6px + (100% - 12px) / var(--n) * (var(--at) + .5)); transform: translateX(-50%);
  transition: left .9s cubic-bezier(.45, .05, .2, 1); animation: sail 3s ease-in-out infinite;
}
.ship img { width: 52px; height: 52px; display: block; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
@keyframes sail { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -4px; rotate: 3deg; } }

/* Speed Run */
.speed-time { font: 700 30px/1 var(--mono); color: var(--text); min-width: 46px; }
.speed-bar { flex: 1; min-width: 120px; height: 8px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.speed-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--grad); transition: width .1s linear; }
.speed-score { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.speed-combo { color: #d4a017; min-width: 90px; }
.hurry .speed-time { color: #f43f5e; animation: pulse .5s ease-in-out infinite alternate; }
.hurry .speed-bar span { background: linear-gradient(90deg, #f43f5e, #fb923c); }
@keyframes pulse { to { transform: scale(1.08); } }
.speed-review { margin-top: 26px; }
.speed-review h3 { font-size: 17px; margin: 0 0 6px; }
.speed-review ol { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.speed-review p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }

/* Code Puzzle: lines like an editor's, dragged by their grip */
.puzzle-hud .pill { text-transform: uppercase; }
.puzzle-board { display: grid; gap: 12px; }
.puzzle-lines { list-style: none; margin: 0; padding: 8px; border-radius: 16px; background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--line); counter-reset: ln; }
.pl { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 6px; border-radius: 9px; counter-increment: ln; transition: background .15s, box-shadow .15s; }
.pl::before { content: counter(ln); width: 20px; flex: none; text-align: right; font: 400 12px var(--mono); color: var(--text-3); }
.pl code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; font: 400 13.5px/1.5 var(--mono); color: var(--text); scrollbar-width: none; }
.pl-grip { display: grid; place-items: center; width: 26px; height: 30px; flex: none; color: var(--text-3); cursor: grab; touch-action: none; border-radius: 7px; }
.pl-grip:hover { background: var(--bg-3); color: var(--text); }
.pl-grip .ico { width: 15px; height: 15px; }
.pl-move { display: inline-flex; gap: 2px; }
.pl-move button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); font-size: 10px; cursor: pointer; }
.pl-move button:hover:not(:disabled) { background: var(--bg-3); color: var(--text); }
.pl-move button:disabled { opacity: .25; cursor: default; }
.pl:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pl.dragging { background: var(--accent-soft); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.pl.drop-here { box-shadow: inset 0 2px 0 var(--accent); }
.pl.ok { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.pl.bad { background: color-mix(in srgb, #f43f5e 12%, transparent); }
.pl.locked { background: color-mix(in srgb, var(--c2) 14%, transparent); }
.pl.locked .pl-grip { cursor: default; opacity: .4; }
.puzzle-msg { margin: 0; color: var(--text-2); font-size: 14.5px; }

/* coins flying out of the treasure */
.coin-fly {
  position: absolute; left: 75px; top: 60px; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #f5c542 55%, #c98d12); animation: coin 1.2s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes coin { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* ------------------------------------------------------------ contact */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.contact-form { display: grid; gap: 16px; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(var(--g2), .6); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.field input, .field textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--text); outline: 0;
  font: 400 15px var(--font); transition: border-color .15s, box-shadow .15s;
}
.field input { height: 44px; }
.field textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.contact-form .seg { flex-wrap: wrap; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.form-status { margin: 0; font-size: 14px; color: var(--text-2); }
.form-status.ok { color: var(--ok); }
.form-status.err { color: #f43f5e; }
.form-status a { color: inherit; text-decoration: underline; }
.discord-card {
  padding: 24px; border-radius: 20px; color: var(--text);
  background: radial-gradient(120% 120% at 100% 0%, rgba(88, 101, 242, .22), transparent 60%), color-mix(in srgb, #5865f2 6%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #5865f2 28%, var(--line));
}
.discord-card .discord-big { width: 40px; height: 40px; color: #5865f2; }
.discord-card h2 { font-size: 21px; margin: 10px 0 6px; letter-spacing: -.02em; }
.discord-card p { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; }
.contact-notes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.contact-notes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.contact-notes .ico { color: var(--text-3); margin-top: 2px; }

/* ------------------------------------------------------------ /brand/: logo candidates side by side */
.brand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.brand-opt { display: grid; grid-template-columns: 34px 112px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 18px 16px; border-radius: 20px; }
.brand-opt:nth-child(odd) { background: color-mix(in srgb, var(--text) 3%, transparent); }
.brand-opt.is-live { box-shadow: inset 0 0 0 1px var(--accent); }
.bo-letter { font: 700 26px var(--mono); color: var(--accent-text); }
.bo-text b { font-size: 18px; }
.bo-text p { margin: 4px 0 10px; color: var(--text-2); max-width: 520px; }
.bo-sizes { display: flex; align-items: center; gap: 14px; }
.bo-bars { display: grid; gap: 8px; }
.bo-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; }
.bo-bar b { font: 600 16px var(--font); letter-spacing: -.02em; }
.bo-bar i { font: 700 16px var(--mono); font-style: normal; background: linear-gradient(90deg, #2dd4bf, #38bdf8, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bo-bar.dark { background: #060b16; color: #e6edf5; }
.bo-bar.light { background: #f3f7fa; color: #0a1a2b; box-shadow: inset 0 0 0 1px #dfe6ee; }
@media (max-width: 760px) {
  .brand-opt { grid-template-columns: 30px minmax(0, 1fr); }
  .brand-opt > svg { grid-column: 2; }
  .bo-text, .bo-bars { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ UI pass: page heads, courses, previews, footer */
/* page heads carry a small cloud of floating tiles, logos or crewmates, so they never open on an empty band */
.page-top .wrap { position: relative; }
.head-art { position: absolute; right: 0; top: 0; bottom: 0; width: 340px; max-height: 250px; margin: auto 0; pointer-events: none; }
.head-art .ha {
  position: absolute; left: calc((100% - var(--s)) * var(--x)); top: calc((100% - var(--s)) * var(--y));
  display: grid; place-items: center; width: var(--s); height: var(--s); animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--d) * -.8s);
}
.head-art .ha .tile { --size: var(--s); border-radius: calc(var(--s) * .28); }
.head-art .ha .mascot, .head-art .ha .ha-img { width: var(--s); height: var(--s); }
.head-art .ha-img { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .25)); }
.ha-ico {
  display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 30%; color: #fff; background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 28px -14px rgba(0, 0, 0, .6);
}
.ha-ico .ico { width: calc(var(--s) * .46); height: calc(var(--s) * .46); stroke-width: 2; }
.ha-ico .ico .ico-fill { fill: #fff; }
.page-top .lede { max-width: 640px; }
@media (max-width: 1180px) { .head-art { display: none; } }

/* course rows in the catalog: a bigger logo, a clearer name, and an arrow on hover */
.course-grid.wide .course .tile { --size: 52px; }
.course-grid.wide .course { gap: 16px; }
.course-grid.wide .course-text b { font-size: 16.5px; font-weight: 600; }
.course-grid.wide .course-blurb { font-size: 14px; }
.course-grid.wide .course-bar { left: 82px; }

/* the home previews hold real text, code, input and output */
.mk-text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.mk-text b { color: var(--text); }
.mk-text code { font-size: .9em; padding: .1em .35em; border-radius: 5px; background: var(--bg-3); color: var(--text); }
.mi-code { display: block; margin: 0; padding: 14px 16px; font: 400 12px/1.7 var(--mono); color: var(--text); white-space: pre; overflow: hidden; }
.mi-code > span { display: block; }
.mi-io { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); border-top: 1px solid var(--line); background: var(--bg-2); }
.mi-in, .mi-io .mi-out { display: grid; align-content: start; gap: 3px; padding: 10px 14px 14px; font: 400 12px var(--mono); color: var(--text-2); }
.mi-in { border-right: 1px solid var(--line); color: var(--accent-text); }
.mi-io .mi-out { border-top: 0; }
.mi-in small, .mi-io small { font-size: 10px; letter-spacing: .08em; color: var(--text-3); }
.mi-io .mi-out b { color: var(--accent-text); font-weight: 600; }
.feature.in .mi-code > span { animation: typeIn .45s steps(24, end) both; }
.feature.in .mi-code > span:nth-child(2) { animation-delay: .25s; } .feature.in .mi-code > span:nth-child(4) { animation-delay: .5s; }
.feature.in .mi-code > span:nth-child(5) { animation-delay: .75s; } .feature.in .mi-code > span:nth-child(6) { animation-delay: 1s; }
.feature.in .mi-in span { animation: typeIn .4s steps(8, end) 1.4s both; }
.feature.in .mi-io .mi-out span { animation: fadeUp .4s ease both; }
.feature.in .mi-io .mi-out span:nth-child(2) { animation-delay: 1.9s; } .feature.in .mi-io .mi-out span:nth-child(3) { animation-delay: 2.05s; } .feature.in .mi-io .mi-out span:nth-child(4) { animation-delay: 2.2s; }

/* the footer: what the site is, where everything lives, and the way to the community */
.footer { margin-top: 120px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(var(--g2), .05)); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 40px; padding: 52px 0 36px; }
.footer-about p { max-width: 360px; margin: 14px 0 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-cols b { display: block; margin-bottom: 10px; font-size: 13.5px; color: var(--text); }
.footer-cols a { display: block; padding: 5px 0; color: var(--text-3); font-size: 14px; text-decoration: none; }
.footer-cols a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px 0 34px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-grid.wide .course .tile { --size: 44px; }
  .course-grid.wide .course-bar { left: 70px; }
}

/* privacy and terms: a readable column of prose, the title lined up with it */
.legal-top .wrap { width: min(780px, 100% - 48px); }
.legal .prose { padding-bottom: 20px; }
.legal .prose h2 { margin-top: 1.8em; font-size: 20px; }
.legal-date { margin-top: 2.4em !important; color: var(--text-3); font-size: 13.5px; }
.footer-legal { display: inline-flex; gap: 18px; }
.footer-legal a { color: var(--text-3); text-decoration: none; }
.footer-legal a:hover { color: var(--text); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .lesson-layout { grid-template-columns: 256px minmax(0, 1fr); }
  .lesson-toc { display: none; }
  .search-btn { width: 34px; padding: 0; justify-content: center; border-color: transparent; background: none; }
  .search-btn span, .search-btn kbd { display: none; }
  .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* six tabs and the actions share less room: tighter tabs, no chevrons (the menus still open) */
  .topbar-inner { gap: 16px; }
  .tab-link { padding: 0 9px; }
  .tab-link .nav-chev { display: none; }
  .tab-link[aria-current="page"]::after { left: 9px; right: 9px; }
}
@media (max-width: 1060px) and (min-width: 761px) {
  .discord-btn { display: none; }
  .nav-item.nav-contact { margin-left: 0; padding-left: 0; border-left: 0; }
  .tab-link { padding: 0 7px; font-size: 13.5px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .brand-name { display: none; }
}
@media (max-width: 980px) {
  .track-head, .overview { grid-template-columns: 1fr; gap: 32px; }
  .meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; text-align: left; max-width: 420px; }
  .meter p { margin: 0; }
  .meter .mini-badges { grid-column: 1 / -1; justify-content: flex-start; margin: 0; }
  .ring { width: 92px; height: 92px; margin: 0; }
  .ring-label b { font-size: 19px; }
  .readiness { text-align: left; }
  .challenge { grid-template-columns: 1fr; height: auto; }
  .ch-left { border-right: 0; }
  .ch-right { height: 80vh; border-top: 1px solid var(--line); }
  /* explorer hidden: place editor and panel explicitly, or auto-placement
     drops the editor into a zero-width column and only the panel shows */
  .ide-main, .ide.stacked .ide-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 40%; }
  .ide-explorer { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero-split { text-align: center; }
  .hero-split .lede { margin: 0 auto; }
  .hero-split .cta, .hero-proof { justify-content: center; }
  .hero-visual { margin: 0 auto; width: min(560px, 100%); }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 30px; }
  .feature.flip .f-copy { order: 0; }
  .ide-editor { grid-column: 1; grid-row: 1; }
  .ide-panel, .ide.stacked .ide-panel { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-side { position: fixed; inset: var(--top) auto 0 0; width: min(320px, 86vw); z-index: 60; transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--shadow-pop); height: auto; }
  body.side-open .lesson-side { transform: none; }
  .side-close, .side-open { display: inline-flex; }
  .trio { grid-template-columns: 1fr; gap: 28px; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps::before { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(var(--g1), .7), rgba(var(--g2), .7)); }
  .steps li { padding-left: 68px; min-height: 48px; }
  .step-ico { position: absolute; left: 0; top: 0; }
  .steps b { margin-top: 2px; }
}
/* phones: one row of bar; the rooms are in the menu sheet (see 'symmetry' below) */
@media (max-width: 760px) {
  :root { --top: 101px; }
  .game-modes, .crew-list, .contact-layout, .field-row { grid-template-columns: 1fr; }
  .community { grid-template-columns: 1fr; text-align: left; padding: 22px; }
  .game-head { gap: 14px; }
  .game-head .mascot { width: 84px; height: 84px; }
  .game-start, .game-end { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mate.big, .mate.big img { width: 104px; height: 104px; }
  .quest-play { gap: 10px; }
  .quest-play .mate { display: none; }
  .quest-map { height: 78px; }
  .isle { width: 26px; height: 18px; font-size: 10px; }
  .ship img { width: 40px; height: 40px; }
  .crew-mate { width: 92px; }
  .crew-mate .mascot { width: 70px; height: 70px; }
  .helper .mascot { width: 60px; height: 60px; }
  .nav-item.nav-contact { margin-left: 0; padding-left: 0; border-left: 0; }
  .pl-move button { width: 30px; height: 30px; }
  .prose th, .prose td { min-width: 8.5rem; padding: 10px 13px; }
  .prose th:first-child, .prose td:first-child { min-width: 7rem; }
  .brand { height: 56px; }
  .topbar-actions { height: 56px; gap: 2px; }
  .nav-menu, .nav-chev { display: none !important; }
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-chip { border: 0; padding: 0 6px; }
  .xp-chip span { display: none; }
  .lessons { columns: 1; padding-left: 0; }
  .module-head { flex-wrap: wrap; }
  .module-progress, .module-weight { padding-top: 0; }
}
@media (max-width: 640px) {
  .wrap, .container, .wrap.narrow, .container.narrow { width: calc(100% - 32px); }
  body { font-size: 15px; }
  .hero { padding-top: 56px; padding-bottom: 40px; }
  .display { font-size: 42px; }
  .lede { font-size: 16.5px; }
  .hero-demo { margin-top: 44px; }
  .window-code { font-size: 13px; padding: 16px; }
  .window-tab:not(.is-active) { display: none; }
  .window-io { grid-template-columns: 1fr; }
  .window-in { border-right: 0; border-bottom: 1px solid var(--line); }
  .window-io pre { min-height: 0; }
  .block { padding-top: 48px; }
  .page-top { padding-top: 36px; }
  .course-grid, .course-grid.wide { grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .course { gap: 10px; padding: 10px; margin: 0 -10px; }
  .course .tile { --size: 34px; }
  .course-blurb { display: none; }
  .course-bar { left: 54px; }
  .cert-row { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .cert-go { display: none; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .input-search { width: 100%; }
  .seg { align-self: flex-start; }
  .cr-xp, .challenge-card .tile { display: none; }
  .cr-text small { white-space: normal; }
  .domain-weight .wbar { display: none; }
  .track-title { flex-direction: column; align-items: flex-start; gap: 14px; }
  .exam-rules, .ai-form { grid-template-columns: 1fr; }
  .exam-rules { gap: 14px; }
  .exam-bar { gap: 8px; flex-wrap: wrap; }
  .exam-bar .btn-sm span { display: none; }
  .qr-card { padding: 20px 16px; }
  .qr-foot { flex-wrap: wrap; }
  .yn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .yn-btns .yn-btn { flex: 1; }
  .path-head { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .path-list { padding-left: 0; }
  .path-text small { white-space: normal; }
  .plan { grid-template-columns: 1fr; }
  .qb-label { width: 100%; }
  .qb-pick { padding-left: 0; }
  .qb-note { margin-left: 0; }
  .mock-row { flex-wrap: wrap; }
  .mock-row .cr-text { flex-basis: calc(100% - 40px); }
  .mock-acts { margin-left: 38px; }
  .lesson-done { flex-direction: column; align-items: flex-start; }
  .lesson-pager { grid-template-columns: 1fr; }
  .stat-row { gap: 14px 28px; }
  .stat-row b { font-size: 24px; }
  .progress-row { grid-template-columns: 36px 1fr 50px; }
  .progress-row .progress { display: none; }
  .ide-toolbar .btn span, .ide-toolbar .btn kbd { display: none; }
  .ide-status { gap: 12px; overflow: hidden; }
  .ide-status > span:nth-child(5), .ide-status > span:nth-child(6) { display: none; }   /* Spaces, UTF-8 */
  .example { grid-template-columns: 1fr; }
  .example > div + div { border-left: 0; border-top: 1px solid var(--line); }
  /* four labelled buttons don't fit a phone-width code header: keep Run's label, icons for the rest */
  .code-tools .btn:not(.btn-primary) span { display: none; }
  .code-tools .btn:not(.btn-primary) { width: 30px; padding: 0; }
  .code-head { padding-left: 12px; }
  .modal { padding: 28px 20px 20px; }
  .hero-split { padding-top: 44px; }
  .float-chip.fc2 { right: -4px; top: -26px; }
  .hero-proof { grid-template-columns: repeat(2, auto); gap: 14px 30px; }
  .hero-proof b { font-size: 22px; }
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .feature { padding: 22px 0; }
  .feature .checks { display: none; }
  .final-cta { padding: 30px 22px; }
  .mock-ide { grid-template-columns: 1fr; }
  .mi-side { display: none; }
  .mock-cert { flex-direction: column; align-items: flex-start; }
  .section-head { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot.bob, .crew-mate .mascot, .mate.big img, .ship, .mate.hop img, .mate.shake img { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .strip-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 12px; }
  .strip-dup { display: none; }
  .orb, .float-chip { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .strip { -webkit-mask-image: none; mask-image: none; }
}

/* ------------------------------------------------------------ symmetry: laptops, tablets and phones
   Every screen size sits on one centre line: equal gutters, grids whose rows
   fill evenly, centred heads on narrow screens, controls split into equal
   parts, and nothing wider than the screen. (The hero once grew to 475px on a
   390px phone because a line of code pushed its grid track wider; overflow
   clipping hid it from the sideways-scroll check.) */
.hero-grid > * { min-width: 0; }
.menu-btn, .mnav { display: none; }

/* sixteen courses: 4 x 4 on a laptop, 2 x 8 below, never a lone last row */
.course-grid.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
@media (max-width: 1180px) { .course-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* topics: five areas in a row on a laptop; below that, rows centred so 3 + 2 stays balanced */
@media (max-width: 1180px) {
  .topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 26px; }
  .topics > .topic { flex: 0 1 calc((100% - 52px) / 3); }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-split .kicker { justify-content: center; }
  /* features: the copy centred above its preview */
  .feature .f-copy { text-align: center; max-width: 600px; margin: 0 auto; }
  .feature .f-copy > p { margin-left: auto; margin-right: auto; }
  .feature .checks { display: grid; width: fit-content; max-width: 100%; margin: 0 auto 18px; text-align: left; }
  .feature .f-visual { width: min(560px, 100%); margin: 0 auto; }
  /* a course's head: logo, title, facts and buttons on the centre line */
  .track-head { justify-items: center; }
  .track-head > div:first-child { text-align: center; }
  .track-title { justify-content: center; }
  .track-head .lede { margin-left: auto; margin-right: auto; }
  .track-head .facts, .track-head .cta { justify-content: center; }
  .helper.hello { margin-left: auto; margin-right: auto; text-align: left; }
  .meter { margin: 0 auto; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .meter .mini-badges { justify-content: center; }
  .track-top .crumbs, .cert-top .crumbs, .game-top .crumbs { justify-content: center; }
  .cert-head { justify-content: center; text-align: center; }
  .final-cta { flex-direction: column; text-align: center; justify-content: center; }
  .final-cta .cta { justify-content: center; }
  .community { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

@media (max-width: 760px) {
  :root { --top: 57px; }

  /* the top bar is one row on a phone; the rooms live in the menu sheet */
  .topbar-inner { flex-wrap: nowrap; height: 56px; gap: 8px; width: calc(100% - 24px); }
  .tabs-nav, .xp-chip, .discord-btn { display: none; }
  .topbar-actions { height: 56px; gap: 4px; margin-left: auto; }
  .menu-btn { display: inline-grid; place-items: center; }
  .menu-btn .mb-close, .menu-btn.is-open .mb-open { display: none; }
  .menu-btn.is-open .mb-close { display: block; }
  body.mnav-open { overflow: hidden; }
  .mnav:not([hidden]) {
    display: block; position: fixed; inset: var(--top) 0 0 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(90% 50% at 50% 0%, rgba(var(--g1), .1), transparent 70%), var(--bg); animation: mnavIn .22s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes mnavIn { from { opacity: 0; transform: translateY(-8px); } }
  .mnav-inner { width: calc(100% - 32px); margin: 0 auto; padding: 18px 0 36px; }
  .mnav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mnav-item {
    display: grid; justify-items: center; gap: 3px; padding: 16px 10px 14px; border-radius: 18px; text-align: center;
    color: var(--text); text-decoration: none !important; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  }
  .mnav-item[aria-current] { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .mnav-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; color: var(--btn-fg); background: var(--btn-bg); box-shadow: 0 10px 22px -12px rgba(var(--g1), .8); }
  .mnav-ico .ico { width: 21px; height: 21px; }
  .mnav-item b { font-size: 15px; font-weight: 600; }
  .mnav-item small { font-size: 12px; color: var(--text-3); }
  .mnav-head { margin: 24px 0 10px; text-align: center; font: 500 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
  .mnav-courses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .mnav-course { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 10px 2px; border-radius: 14px; color: var(--text-2); font-size: 11.5px; text-decoration: none !important; }
  .mnav-course:active, .mnav-item:active { background: var(--bg-3); }
  .mnav-course .tile { --size: 42px; }
  .mnav-course span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav-foot { display: grid; gap: 10px; margin-top: 24px; }
  .mnav-foot .btn { width: 100%; height: 46px; justify-content: center; }

  /* the hero: one centred column, nothing wider than the screen */
  .hero-split { padding: 36px 0 32px; }
  .hero-split .display { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.08; margin: 18px 0 16px; }
  .hero-split .cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin: 26px auto 0; }
  .hero-split .cta .btn { width: 100%; justify-content: center; }
  .hero-split .resume { margin: 16px auto 0; }
  .hero-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 10px; max-width: 360px; margin: 26px auto 0; }
  .hero-proof li { padding: 12px 6px; border-radius: 16px; text-align: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .float-chip { display: none; }
  .hero-visual { width: 100%; }
  .hero-visual .hero-demo { transform: none; }
  .window-code { font-size: 12.5px; padding: 14px; }

  /* landing sections */
  .topics > .topic { flex-basis: 100%; padding: 18px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .topic-head { justify-content: center; }
  .chips { justify-content: center; }
  .steps { gap: 30px; }
  .steps::before { display: none; }
  .steps li { display: grid; justify-items: center; padding-left: 0; text-align: center; }
  .step-ico { position: relative; left: auto; top: auto; }
  .steps b { margin-top: 14px; }
  .steps p { max-width: 320px; }
  .final-cta .cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .final-cta .cta .btn { width: 100%; justify-content: center; }
  .community .btn { width: 100%; max-width: 360px; justify-content: center; }

  /* page heads on the centre line */
  .page-top .wrap { text-align: center; }
  .page-top .crumbs { justify-content: center; }
  .page-top .lede { margin-left: auto; margin-right: auto; }
  .page-top .daily { display: flex; justify-content: center; }
  .cert-head, .game-head, .track-title { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .section-head.left { text-align: center; }

  /* tabs and filters span the full width in equal parts */
  .tabbar:not(:has(> :nth-child(5))) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .tabbar:not(:has(> :nth-child(5))) .tab { justify-content: center; padding: 0 6px; }
  .tabbar:has(> :nth-child(4)) .tab-count { display: none; }
  .tabbar:has(> :nth-child(5)) { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .seg { display: flex; width: 100%; align-self: stretch; }
  .seg button { flex: 1 1 auto; padding: 0 8px; }
  .toolbar { gap: 10px; }

  /* rows keep their course logo; games and helpers centre */
  .challenge-card .tile { display: inline-grid; --size: 30px; }
  .game-start, .game-end { align-items: center; text-align: center; }
  .game-start h2, .game-end h2 { justify-content: center; }
  .game-end .facts, .game-end .cta { justify-content: center; }
  .game-start p, .game-end p { margin-left: auto; margin-right: auto; }

  /* diagrams fit the screen; a tap opens one full size */
  .fig svg { min-width: 0; }
  .prose .fig { position: relative; cursor: zoom-in; }
  .prose .fig .fig-frame { padding: 12px 10px 10px; }
  .prose .fig::after {
    content: "Tap to enlarge"; position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 999px;
    font: 500 10.5px var(--mono); color: var(--text-2); background: var(--bg-3); pointer-events: none;
  }

  /* the footer: centred brand, three even link columns */
  .footer { margin-top: 72px; }
  .footer-top { text-align: center; gap: 30px; }
  .footer-about { display: grid; justify-items: center; }
  .footer-about p { margin-left: auto; margin-right: auto; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .footer-cols a { font-size: 13.5px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .mock-cert { align-items: center; }
  .mock-cert .mc-side { width: 100%; }
  .meter { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .meter .mini-badges { justify-content: center; }
  /* a certification's overview: the intro, its facts and buttons on the centre line; the long lists stay left-aligned to read */
  .overview-main > .lede, .overview-main > .facts, .overview-main > .cta { text-align: center; justify-content: center; margin-left: auto; margin-right: auto; }
  .overview-side, .readiness { text-align: center; }
  .trio a { justify-items: center; text-align: center; }
  .sub > h2, .sub > .muted, .sub > p.lede { text-align: center; }
  .game-modes li { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px 0; }
  .aside-note { text-align: center; }
}

/* a diagram opened full size (app.js, phones) */
.fig-zoom { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fig-zoom-close { position: fixed; top: 12px; right: 12px; z-index: 2; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.fig-zoom-body { height: 100%; overflow: auto; padding: 64px 16px 28px; -webkit-overflow-scrolling: touch; }
.fig-zoom-hint { position: fixed; top: 22px; left: 16px; right: 64px; z-index: 2; margin: 0; font: 500 12px var(--mono); color: var(--text-3); pointer-events: none; }
.fig-zoom .fig { width: 780px; margin: 0; }
.fig-zoom .fig svg { min-width: 0; width: 100%; }
.fig-zoom figcaption { max-width: min(560px, 100vw - 32px); }

/* how it works: three centred steps at every width, joined through their icons' centres */
.steps li { display: grid; justify-items: center; text-align: center; }
.steps p { max-width: 320px; }
.steps::before { left: 16.67%; right: 16.67%; }
@media (max-width: 860px) and (min-width: 761px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .steps::before { top: 23px; bottom: auto; left: 16.67%; right: 16.67%; width: auto; height: 2px; background: linear-gradient(90deg, rgba(var(--g1), .7), rgba(var(--g2), .7)); }
  .steps li { padding-left: 0; min-height: 0; }
  .step-ico { position: relative; left: auto; top: auto; }
  .steps b { margin-top: 18px; }
}
/* tablets: a tab row under a centred head sits centred too */
@media (max-width: 980px) and (min-width: 761px) {
  .tabbar { justify-content: center; }
}
/* the hero's code wraps under itself rather than running past the window's edge */
.window-code .cl { white-space: pre-wrap; word-break: break-word; padding-left: 2.7em; text-indent: -2.7em; }