/* ============================================================== Learn ====
   The articles under /learn. Each one is built like a product page rather
   than a blog post: a film for a hero, a chapter switcher that floats, a board
   that plays along as you scroll, and working widgets in the middle of the
   text. Everything here sits on the site's own tokens -- paper, ink, one
   accent, glass, the 22px corner and the one easing -- and only adds the
   pieces an article needs. style.css stays the source of truth.
   ========================================================================= */

.lx { --lx-read: 690px; --lx-wide: 1140px; --lx-nav-top: 92px; }
@media (max-width: 640px) { .lx { --lx-nav-top: 72px; } }

/* Reading progress: one accent hairline across the very top of the window. */
.lx-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none;
}
.lx-progress i {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--read, 0));
}

/* ------------------------------------------------------------------ hero */

.lx-hero { position: relative; padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem); }
.lx-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.lx-crumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.9rem; font-weight: 450; color: var(--ink-soft); margin-bottom: 1.4rem; }
.lx-crumb a { color: var(--accent); }
.lx-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lx-crumb span[aria-hidden] { color: var(--ink-faint); }

.lx-title {
  font-size: clamp(2.9rem, 6.2vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
  font-weight: 500;
  max-width: 12ch;
  text-wrap: balance;
}
.lx-title em { font-style: normal; color: var(--ink-faint); }
.lx-dek { margin-top: 1.6rem; max-width: 34rem; font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-soft); font-weight: 400; letter-spacing: -0.008em; }
.lx-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 2rem; font-size: 0.88rem; color: var(--ink-faint); font-weight: 500; }
.lx-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lx-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Word-by-word entrance, only once the script has split the words. */
.lx-js .lx-split .lx-w {
  display: inline-block;
  opacity: 0; transform: translateY(0.38em); filter: blur(10px);
  animation: lxWord 1.1s var(--ease) forwards;
  animation-delay: calc(0.08s + var(--w) * 70ms);
}
@keyframes lxWord { to { opacity: 1; transform: none; filter: none; } }
.lx-js .lx-rise { opacity: 0; transform: translateY(16px); filter: blur(6px); animation: lxWord 1s var(--ease) forwards; animation-delay: var(--d, 0.5s); }

/* The hero stage: the board on a sheet of glass, tilted back a little, and
   settling flat as the page scrolls -- the shot every launch film opens on. */
.lx-stage-wrap { position: relative; perspective: 1400px; }
.lx-stage-wrap::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  filter: blur(30px); opacity: 0.7;
}
.lx-stage {
  position: relative; padding: clamp(10px, 1.4vw, 16px);
  transform: rotateX(calc((1 - var(--p, 1)) * 14deg)) rotateY(calc((1 - var(--p, 1)) * -10deg)) scale(calc(0.94 + var(--p, 1) * 0.06));
  transform-origin: 50% 60%;
  transition: transform 0.12s linear;
  will-change: transform;
}
.lx-js .lx-stage { opacity: 0; animation: lxStage 1.4s var(--ease) 0.35s forwards; }
@keyframes lxStage { from { opacity: 0; translate: 0 40px; filter: blur(14px); } to { opacity: 1; translate: 0 0; filter: none; } }
.lx-stage .cb { border-radius: 14px; }

/* The move readout floating off the board's corner. */
.lx-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.85rem; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
}
.lx-chip b { font-variant-numeric: tabular-nums; font-weight: 650; }
.lx-chip small { color: var(--ink-faint); font-weight: 500; font-size: 0.8rem; }
.lx-chip--tl { top: -18px; left: -22px; }
.lx-chip--br { bottom: -18px; right: -22px; }
.lx-chip .lx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.lx-chip [data-film-san] { display: inline-block; min-width: 4.2ch; }
.lx-chip .is-tick { animation: lxTick 0.5s var(--ease); }
@keyframes lxTick { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }
@media (max-width: 640px) { .lx-chip--tl { left: -6px; top: -14px; } .lx-chip--br { right: -6px; bottom: -14px; } }

@media (max-width: 900px) {
  .lx-hero-grid { grid-template-columns: 1fr; }
  .lx-stage-wrap { max-width: 520px; width: 100%; margin-inline: auto; }
}

/* --------------------------------------------------------- chapter nav */

.lx-chapnav {
  position: sticky; top: var(--lx-nav-top); z-index: 30;
  display: flex; justify-content: center;
  padding: 0 1rem; margin: 0 0 1rem;
  pointer-events: none;
}
.lx-chapnav .lx-seg { pointer-events: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lx-chapnav .lx-seg::-webkit-scrollbar { display: none; }
.lx-chapnav .lx-seg {
  background: var(--glass-fill); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 14px; padding: 4px;
}
.lx-chapnav .lx-seg button { padding: 0.5rem 0.95rem; font-size: 0.84rem; }

/* ------------------------------------------------------------- prose */

.lx-body { position: relative; }
.lx-chapter { padding: clamp(3.5rem, 8vw, 7rem) 0 0; scroll-margin-top: 140px; }
.lx-read { width: min(100% - 2.5rem, var(--lx-read)); margin-inline: auto; }
.lx-wide { width: min(100% - 2.5rem, var(--lx-wide)); margin-inline: auto; }

.lx-num {
  display: block; font-size: clamp(3.4rem, 7vw, 5.6rem); font-weight: 650; letter-spacing: -0.06em;
  line-height: 0.9; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, transparent);
  margin-bottom: 1rem; font-variant-numeric: tabular-nums;
}
.lx-prose h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -0.042em; margin-bottom: 1.4rem; text-wrap: balance; }
.lx-prose h3 { font-size: 1.36rem; letter-spacing: -0.024em; margin: 2.4rem 0 0.8rem; }
.lx-prose p, .lx-prose li { font-size: 1.12rem; line-height: 1.72; color: var(--ink-soft); letter-spacing: -0.006em; }
.lx-prose p + p { margin-top: 1.15rem; }
.lx-prose strong { color: var(--ink); font-weight: 600; }
.lx-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.lx-prose a:hover { text-decoration-color: var(--accent); }
.lx-prose ul, .lx-prose ol { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.lx-prose ul li, .lx-prose ol li { position: relative; padding-left: 1.6rem; }
.lx-prose ul li::before { content: ""; position: absolute; left: 0.2rem; top: 0.78em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lx-prose ol { counter-reset: lxol; }
.lx-prose ol li { counter-increment: lxol; padding-left: 2.2rem; }
.lx-prose ol li::before { content: counter(lxol); position: absolute; left: 0; top: 0.18em; width: 1.5rem; height: 1.5rem; border-radius: 7px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: var(--paper); background: var(--ink); }
.lx-prose .lx-lede { font-size: 1.32rem; line-height: 1.55; color: var(--ink); font-weight: 500; letter-spacing: -0.016em; }
.lx-prose code, .lx-san { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); white-space: nowrap; }

/* A key point, set apart on glass. */
.lx-note { margin: 2.2rem 0 0; padding: 1.4rem 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.lx-note svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.8; margin-top: 0.15rem; }
.lx-note p { margin: 0; font-size: 1.02rem; color: var(--ink); }

/* The scroll-lit statement: dim words that light as the page passes them. */
.lx-statement { padding: clamp(4rem, 10vw, 8rem) 0 0; }
.lx-statement p {
  font-size: clamp(1.9rem, 4.1vw, 3.5rem); line-height: 1.12; letter-spacing: -0.04em; font-weight: 650;
  text-wrap: balance;
}
.lx-statement .lx-sw { color: color-mix(in srgb, var(--ink) 18%, transparent); transition: color 0.45s var(--ease-soft); }
.lx-statement .lx-sw.is-lit { color: var(--ink); }
.lx-statement .lx-sw.is-accent.is-lit { color: var(--accent); }

/* Count-up figures. */
.lx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin-top: 2.6rem; border-top: 1px solid var(--line); }
.lx-stat { padding: 1.5rem 1.4rem 0.2rem 0; }
.lx-stat + .lx-stat { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.lx-stat b { display: block; font-size: clamp(2rem, 3.3vw, 2.9rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.lx-stat > span { display: block; margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; max-width: 24ch; }
@media (max-width: 640px) {
  .lx-stat + .lx-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ------------------------------------------------- shared Apple controls */

.lx-seg {
  --n: 2; --i: 0;
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.lx-seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 8px;
  background: var(--paper-raised);
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.04);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
  pointer-events: none;
}
[data-theme="dark"] .lx-seg-thumb { background: #3a3a42; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.lx-seg button {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 0.42rem 0.9rem; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-soft); white-space: nowrap; border-radius: 8px;
  transition: color 0.3s var(--ease-soft);
}
.lx-seg button[aria-pressed="true"], .lx-seg button[aria-current="true"] { color: var(--ink); }

/* The iOS switch. */
.lx-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 0.85rem 1rem; }
.lx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.lx-switch .lx-track {
  flex: none; position: relative; width: 51px; height: 31px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  transition: background 0.35s var(--ease);
}
.lx-switch .lx-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
  transition: transform 0.4s var(--ease);
}
.lx-switch input:checked + .lx-track { background: var(--ok); }
.lx-switch input:checked + .lx-track::after { transform: translateX(20px); }
.lx-switch input:focus-visible + .lx-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.lx-switch-text { display: grid; gap: 0.1rem; }
.lx-switch-text b { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.012em; }
.lx-switch-text small { font-size: 0.84rem; color: var(--ink-faint); line-height: 1.35; }
.lx-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.45rem; vertical-align: 0.05em; }

/* The iOS slider: a thin track, a filled run up to the thumb, a big white knob. */
.lx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; --v: 50%; }
.lx-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--v), color-mix(in srgb, var(--ink) 14%, transparent) var(--v)); }
.lx-range::-moz-range-track { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.lx-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
.lx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 0 0 0.5px rgba(0,0,0,.08); transition: transform 0.2s var(--ease); }
.lx-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 3px 8px rgba(0,0,0,.18), 0 0 0 0.5px rgba(0,0,0,.08); }
.lx-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.lx-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* Inset grouped list, as in Settings. */
.lx-group {
  border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
  border: 1px solid var(--glass-edge);
}
[data-theme="dark"] .lx-group { background: rgba(255,255,255,.05); }
.lx-group > * + * { border-top: 1px solid var(--line); }
.lx-group-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); margin: 0 0 0.5rem 1rem; letter-spacing: -0.005em; }
.lx-option {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; border: 0; background: none; text-align: left; cursor: pointer;
  font-size: 0.98rem; font-weight: 500; letter-spacing: -0.012em; color: var(--ink);
  transition: background 0.2s var(--ease-soft);
}
.lx-option:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lx-option .lx-check { width: 18px; height: 18px; flex: none; stroke: var(--accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.45s var(--ease); }
.lx-option[aria-checked="true"] .lx-check { stroke-dashoffset: 0; }
.lx-option.is-right { color: var(--ok); }
.lx-option.is-right .lx-check { stroke: var(--ok); stroke-dashoffset: 0; }
.lx-option.is-wrong { color: var(--danger); }
.lx-option:disabled { cursor: default; }

/* ------------------------------------------------------------- widgets */

.lx-widget { margin: clamp(2.6rem, 5vw, 3.8rem) auto 0; padding: clamp(1rem, 2vw, 1.6rem); position: relative; }
.lx-widget-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem; margin-bottom: clamp(1rem, 2vw, 1.4rem); padding: 0.2rem 0.3rem 0; }
.lx-widget-title { display: grid; gap: 0.15rem; }
.lx-widget-title small { font-size: 0.8rem; font-weight: 600; color: var(--accent); letter-spacing: -0.005em; }
.lx-widget-title b { font-size: 1.22rem; font-weight: 650; letter-spacing: -0.026em; line-height: 1.2; }
.lx-widget-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.lx-widget-grid--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .lx-widget-grid, .lx-widget-grid--even { grid-template-columns: 1fr; } }
.lx-board { width: 100%; max-width: 560px; margin-inline: auto; }
.lx-board .cb { border-radius: 12px; }
.lx-panel { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.lx-panel p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.lx-status { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); min-height: 1.6em; }
.lx-status.is-ok { color: var(--ok); }
.lx-status.is-err { color: var(--danger); }
.lx-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lx-caption { font-size: 0.84rem; color: var(--ink-faint); margin-top: 0.8rem; text-align: center; }

/* Drill progress: one bar per move of yours, filled as you play it. */
.lx-pips { display: flex; gap: 5px; }
.lx-pips i { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; position: relative; }
.lx-pips i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.lx-pips i.is-done::after { transform: scaleX(1); }
.lx-pips i.is-miss::after { background: var(--danger); transform: scaleX(1); }

.lx-movelist { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; font-size: 0.95rem; font-variant-numeric: tabular-nums; min-height: 1.6em; }
.lx-movelist span { padding: 0.1rem 0.35rem; border-radius: 6px; color: var(--ink-soft); font-weight: 500; animation: lxTick 0.4s var(--ease); }
.lx-movelist span.n { color: var(--ink-faint); padding-right: 0; }
.lx-movelist span.is-you { color: var(--ink); font-weight: 650; }
.lx-movelist span.is-now { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }

.cb.lx-shake { animation: lxShake 0.42s var(--ease-soft); }
@keyframes lxShake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }

/* The success sheet that rises inside a widget. */
.lx-done {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: 14px;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  animation: lxDone 0.7s var(--ease);
}
.lx-done svg { width: 34px; height: 34px; }
.lx-done circle { fill: var(--ok); }
.lx-done path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: lxDraw 0.6s var(--ease) 0.25s forwards; }
.lx-done b { display: block; font-size: 1rem; letter-spacing: -0.014em; }
.lx-done span { font-size: 0.9rem; color: var(--ink-soft); }
@keyframes lxDone { from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(6px); } }
@keyframes lxDraw { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------ scrolly */

.lx-scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.6rem, 5vw, 4rem); }
.lx-scrolly-stage { position: sticky; top: calc(var(--lx-nav-top) + 70px); align-self: start; }
.lx-scrolly-stage .lx-stage { --p: 1; }
.lx-scrolly-steps { padding: 6vh 0 30vh; }
.lx-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; filter: blur(1px); transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.lx-step.is-active { opacity: 1; filter: none; }
.lx-step .lx-step-k { font-size: 0.86rem; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 0.6rem; }
.lx-step h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.034em; line-height: 1.08; margin-bottom: 0.9rem; }
.lx-step p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); }
.lx-scrolly-caption { display: flex; justify-content: space-between; align-items: center; margin-top: 1.1rem; padding: 0 0.3rem; font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; }
.lx-scrolly-caption .lx-san-now { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .lx-scrolly { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lx-scrolly-stage { top: calc(var(--lx-nav-top) + 52px); z-index: 2; width: min(82%, 40vh); margin-inline: auto; }
  .lx-scrolly-stage .lx-stage { padding: 6px; }
  .lx-scrolly-caption { margin-top: 0.5rem; font-size: 0.82rem; }
  .lx-scrolly-steps { padding-top: 4vh; }
  .lx-step { min-height: 52vh; }
  .lx-step { opacity: 0; filter: none; }
  .lx-step.is-active { opacity: 1; }
  .lx-scrolly-stage .lx-stage { background: var(--glass-solid); }
}

/* ---------------------------------------------------- mini static board */

.lx-mini { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 10px; overflow: hidden; width: 100%; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.lx-mini i { position: relative; background: var(--sq-light); }
.lx-mini i.d { background: var(--sq-dark); }
.lx-mini i.hl::before { content: ""; position: absolute; inset: 0; background: rgba(212, 194, 83, 0.62); }
.lx-mini img { position: absolute; inset: 2%; width: 96%; height: 96%; }

/* ------------------------------------------------------------- finder */

.lx-finder-controls { display: grid; gap: 1.2rem; }
.lx-ctl-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.45rem; }
.lx-ctl-label output { font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }
.lx-finder .lx-seg { width: 100%; }
.lx-result { display: grid; grid-template-columns: 150px 1fr; gap: 1.2rem; align-items: center; padding: 1rem; border-radius: 16px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lx-result.is-swap { animation: lxSwap 0.6s var(--ease); }
@keyframes lxSwap { from { opacity: 0; transform: translateY(10px); filter: blur(8px); } }
.lx-result h4 { font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.1; }
.lx-result p { font-size: 0.95rem; margin-top: 0.4rem; color: var(--ink-soft); line-height: 1.55; }
.lx-result .lx-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.lx-result .btn { margin-top: 0.9rem; }
.lx-alt { margin-top: 0.8rem; font-size: 0.88rem; color: var(--ink-faint); }
.lx-alt a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .lx-result { grid-template-columns: 1fr; } .lx-result .lx-mini { max-width: 200px; } }

/* --------------------------------------------------------------- tree */

.lx-tree svg { width: 100%; height: auto; display: block; overflow: visible; }
.lx-tree .edge { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.1s var(--ease), stroke 0.3s; transition-delay: calc(var(--k) * 70ms); }
.lx-tree.is-in .edge { stroke-dashoffset: 0; }
.lx-tree .edge.on { stroke: var(--accent); stroke-width: 2; }
.lx-tree .node { cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--k) * 70ms + 200ms); }
.lx-tree.is-in .node { opacity: 1; transform: none; }
.lx-tree .node rect { fill: var(--paper-raised); stroke: var(--glass-edge); stroke-width: 1; transition: fill 0.3s, stroke 0.3s; }
[data-theme="dark"] .lx-tree .node rect { fill: #1d1d23; }
.lx-tree .node text { font: 600 13px var(--sans); fill: var(--ink); letter-spacing: -0.01em; }
.lx-tree .node text.sub { font-weight: 500; font-size: 11px; fill: var(--ink-faint); }
.lx-tree .node:hover rect { stroke: var(--ink-faint); }
.lx-tree .node.on rect { fill: var(--ink); stroke: var(--ink); }
.lx-tree .node.on text { fill: var(--paper); }
.lx-tree .node.on text.sub { fill: color-mix(in srgb, var(--paper) 70%, transparent); }
.lx-tree .node:focus-visible { outline: none; }
.lx-tree .node:focus-visible rect { stroke: var(--accent); stroke-width: 2; }

/* ------------------------------------------------------------ flash card */

.lx-flash { perspective: 1200px; }
.lx-card { position: relative; transform-style: preserve-3d; transition: transform 0.8s var(--ease); min-height: 100%; }
.lx-card.is-flipped { transform: rotateY(180deg); }
.lx-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lx-face--back { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; align-content: center; gap: 0.8rem; padding: 1.4rem; border-radius: 16px; background: color-mix(in srgb, var(--paper-raised) 92%, transparent); border: 1px solid var(--glass-edge); }
.lx-face--back .big { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.lx-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.lx-grade { display: grid; gap: 0.1rem; padding: 0.7rem 0.4rem; border-radius: 12px; border: 1px solid var(--glass-edge); background: var(--glass-fill); cursor: pointer; text-align: center; transition: transform 0.2s var(--ease), border-color 0.2s; }
.lx-grade:hover { border-color: var(--ink-faint); }
.lx-grade:active { transform: scale(0.97); }
.lx-grade b { font-size: 0.95rem; }
.lx-grade small { font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.lx-timeline { position: relative; height: 58px; margin-top: 0.4rem; }
.lx-timeline .axis { position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line-strong); }
.lx-timeline .tick { position: absolute; top: 30px; font-size: 0.72rem; color: var(--ink-faint); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.lx-timeline .rev { position: absolute; top: 16px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); animation: lxPop 0.5s var(--ease); }
.lx-timeline .rev.is-lapse { background: var(--danger); }
@keyframes lxPop { from { transform: scale(0); } }

/* ------------------------------------------------------------- charts */

.lx-chart { position: relative; }
.lx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.lx-chart .lx-grid line { stroke: var(--line); stroke-width: 1; }
.lx-chart .axis-label { font: 500 11px var(--sans); fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.lx-chart .series { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lx-chart .ghost { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.55; }
.lx-chart .area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.lx-chart .cross { stroke: var(--ink-faint); stroke-width: 1; }
.lx-chart .knob { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.lx-tip {
  position: absolute; pointer-events: none; z-index: 2;
  padding: 0.45rem 0.65rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  background: var(--glass-solid); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  transform: translate(-50%, calc(-100% - 12px)); transition: opacity 0.2s;
  font-variant-numeric: tabular-nums;
}
.lx-tip small { display: block; color: var(--ink-faint); font-weight: 500; font-size: 0.74rem; }
.lx-readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; }
.lx-readout { padding: 0.9rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lx-readout b { display: block; font-size: 1.9rem; font-weight: 650; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.lx-readout span { display: block; font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.4rem; font-weight: 500; }
.lx-readout .up { color: var(--ok); }
.lx-readout .down { color: var(--danger); }

/* Bars (Woodpecker cycles): grow on reveal. */
.lx-bars { display: grid; gap: 0.7rem; }
.lx-bar { display: grid; grid-template-columns: 5.5rem 1fr 4.2rem; gap: 0.8rem; align-items: center; font-size: 0.9rem; font-weight: 600; }
.lx-bar span:first-child { color: var(--ink-soft); }
.lx-bar .t { height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 5%, transparent); overflow: hidden; }
.lx-bar .t i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease); transition-delay: calc(var(--k) * 140ms); }
.lx-bars.is-in .lx-bar .t i { transform: scaleX(1); }
.lx-bar output { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- eval replay */

.lx-evalwrap { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.lx-evalbar { position: relative; border-radius: 6px; overflow: hidden; background: #2a2a30; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.lx-evalbar i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 50%); background: #f4f2ee; transition: height 0.7s var(--ease); }
.lx-evalbar b { position: absolute; left: 0; right: 0; font-size: 9.5px; font-weight: 700; text-align: center; z-index: 1; font-variant-numeric: tabular-nums; }
.lx-evalbar b.top { top: 5px; color: #f4f2ee; }
.lx-evalbar b.bot { bottom: 5px; color: #2a2a30; }
.lx-class { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 650; font-size: 1.05rem; letter-spacing: -0.016em; }
.lx-class i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 0.78rem; font-weight: 800; }
.lx-ctrls { display: flex; gap: 0.4rem; align-items: center; }
.lx-ctrls .icon-btn { width: 40px; height: 40px; }
.lx-ctrls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lx-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.82rem; color: var(--ink-soft); font-weight: 500; }
.lx-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.lx-legend i { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 0.6rem; font-weight: 800; }
.lx-evalgraph svg { cursor: pointer; }
.lx-evalgraph .zero { stroke: var(--line-strong); stroke-width: 1; }
.lx-evalgraph .white-area { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.lx-evalgraph .line { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; }
.lx-evalgraph .lx-gdot { stroke: var(--paper); stroke-width: 2; }
.lx-evalgraph .cursor { stroke: var(--accent); stroke-width: 1.5; }

/* --------------------------------------------------------------- loop */

.lx-loop { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 760px) { .lx-loop { grid-template-columns: 1fr; } }
.lx-loop svg { width: 100%; max-width: 380px; margin-inline: auto; display: block; overflow: visible; }
.lx-loop .lx-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.lx-loop .lx-arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.lx-loop .stop circle { fill: var(--paper-raised); stroke: var(--glass-edge); stroke-width: 1; transition: fill 0.4s, stroke 0.4s; }
[data-theme="dark"] .lx-loop .stop circle { fill: #1d1d23; }
.lx-loop .stop text { font: 650 14px var(--sans); fill: var(--ink); text-anchor: middle; letter-spacing: -0.01em; }
.lx-loop .stop.on circle { fill: var(--ink); stroke: var(--ink); }
.lx-loop .stop.on text { fill: var(--paper); }
.lx-loop-copy .lx-loop-k { font-size: 0.86rem; font-weight: 650; color: var(--accent); }
.lx-loop-copy h3 { font-size: 1.7rem; letter-spacing: -0.034em; margin: 0.3rem 0 0.7rem; }
.lx-loop-copy p { font-size: 1.04rem; line-height: 1.65; color: var(--ink-soft); min-height: 5.2em; }
.lx-loop-copy .is-swap { animation: lxSwap 0.6s var(--ease); }

/* ---------------------------------------------------------- comparison */

.lx-table { width: 100%; border-collapse: collapse; margin-top: 1.6rem; font-size: 0.98rem; }
.lx-table th, .lx-table td { text-align: left; padding: 0.85rem 0.8rem 0.85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lx-table th { font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; }
.lx-table td:first-child { font-weight: 600; color: var(--ink); }
.lx-table td { color: var(--ink-soft); }
.lx-tablewrap { overflow-x: auto; }

/* Meter: five dots for difficulty and the like. */
.lx-meter { display: inline-flex; gap: 3px; vertical-align: middle; }
.lx-meter i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.lx-meter i.on { background: var(--accent); }

/* ---------------------------------------------------------- the lineup */

.lx-lineup { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.2rem 1.4rem 3rem; margin: -1.2rem -1.4rem -1.8rem; scroll-padding-inline: 1.4rem; scrollbar-width: none; }
.lx-lineup::-webkit-scrollbar { display: none; }
.lx-lineup-card { scroll-snap-align: start; padding: 1rem; display: grid; gap: 0.9rem; align-content: start; }
.lx-lineup-card h4 { font-size: 1.2rem; letter-spacing: -0.026em; }
.lx-lineup-card p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.lx-lineup-card .row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-faint); font-weight: 500; }
.lx-lineup-card a.more { font-size: 0.9rem; font-weight: 600; color: var(--accent); }
.lx-lineup-card a.more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- FAQ */

.lx-faq { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.lx-faq details { border-bottom: 1px solid var(--line); }
.lx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.018em; }
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.4s var(--ease); }
.lx-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.lx-faq details p { padding: 0 0 1.3rem; font-size: 1.04rem; color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }
.lx-faq details[open] p { animation: lxSwap 0.5s var(--ease); }

/* --------------------------------------------------------------- finale */

.lx-finale { padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.lx-cta { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.lx-cta::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -15%; top: -40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent); filter: blur(20px); pointer-events: none; }
.lx-cta h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); letter-spacing: -0.046em; line-height: 1; text-wrap: balance; }
.lx-cta h2 span { color: var(--ink-faint); }
.lx-cta p { margin-top: 1.1rem; font-size: 1.08rem; color: var(--ink-soft); max-width: 40ch; line-height: 1.6; }
.lx-cta .lx-actions { margin-top: 1.8rem; }
.lx-cta-visual { position: relative; }
@media (max-width: 860px) { .lx-cta { grid-template-columns: 1fr; } .lx-cta-visual { max-width: 380px; } }

.lx-related { padding-bottom: clamp(4rem, 8vw, 6rem); }
.lx-related h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.036em; margin-bottom: 1.4rem; }

/* ----------------------------------------------------------- hub + cards */

.lx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.2rem; }
.lx-card-link { display: grid; grid-template-rows: auto 1fr; overflow: hidden; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.lx-card-link:hover { transform: translateY(-4px); }
.lx-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: var(--paper-raised); border-bottom: 0; }
.lx-cover::before { content: none; }
.lx-card-link:nth-child(even) .lx-cover { background: var(--paper-raised); }
.lx-cover .lx-mini { position: relative; width: 52%; transform: none; border-radius: 6px; overflow: hidden; box-shadow: none; transition: transform 0.9s var(--ease); }
.lx-card-link:hover .lx-cover .lx-mini { transform: scale(1.03); }
.lx-cover-tag { position: absolute; top: 14px; left: 14px; padding: 0.2rem 0.5rem; font-size: 0.72rem; font-weight: 500; border-radius: 6px; background: color-mix(in srgb, var(--paper) 82%, transparent); border: 0; }
.lx-card-body { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: 0.55rem; align-content: start; }
.lx-card-body h3 { font-size: 1.32rem; letter-spacing: -0.03em; line-height: 1.15; }
.lx-card-body p { display: none; }
.lx-card-body .lx-card-meta { font-size: 0.82rem; color: var(--ink-faint); font-weight: 500; margin-top: 0.3rem; }

.lh-hero { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); text-align: center; }
.lh-hero .lx-title { margin-inline: auto; max-width: 14ch; }
.lh-hero .lx-dek { margin-inline: auto; }
.lh-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); overflow: hidden; margin-bottom: 1.2rem; }
.lh-feature .lx-cover { aspect-ratio: auto; min-height: 380px; border-bottom: 0; border-right: 1px solid var(--glass-edge); }
.lh-feature .lx-cover .lx-mini { width: 54%; }
.lh-feature .lx-card-body { padding: clamp(1.6rem, 3.5vw, 3rem); align-content: center; }
.lh-feature .lx-card-body h3 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.042em; line-height: 1.02; }
.lh-feature .lx-card-body p { font-size: 1.05rem; }
@media (max-width: 860px) { .lh-feature { grid-template-columns: 1fr; } .lh-feature .lx-cover { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--glass-edge); } }
.lh-filter { display: flex; justify-content: center; margin: 0 0 2rem; }
.lh-section { padding-bottom: clamp(4rem, 8vw, 6rem); }

/* ------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lx-js .lx-split .lx-w, .lx-js .lx-rise, .lx-js .lx-stage { animation: none; opacity: 1; transform: none; filter: none; }
  .lx-stage { transform: none !important; }
  .lx-step { opacity: 1; filter: none; }
  .lx-tree .edge { stroke-dashoffset: 0; transition: none; }
  .lx-tree .node { opacity: 1; transform: none; transition: none; }
  .lx-bar .t i { transform: none; transition: none; }
  .lx-card { transition: none; }
}

/* --------------------------------------------- homepage: the Learn teaser */

.learn-teaser .lx-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.learn-teaser-more { display: flex; justify-content: center; margin-top: 2.2rem; }

/* On a wide screen the lineup is a grid; the sideways swipe is for phones. */
@media (min-width: 900px) {
  .lx-lineup { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); overflow: visible; margin: 0; padding: 0; }
}

/* Flashcards: the card holds its height so the back face has room, and the
   timeline's end labels stay inside the axis. */
.lx-card { min-height: 16rem; }
.lx-face--back { overflow: auto; }
.lx-timeline .tick.is-first { transform: none; }
.lx-timeline .tick.is-last { transform: translateX(-100%); white-space: nowrap; }

/* Scenes move cards sideways mid-animation (storm, hscroll, lineups); clip
   rather than hide, so the page never scrolls sideways on a phone and the
   sticky stages keep their scrolling ancestor. */
main.lx { overflow-x: clip; }