/* Quiz V1 (learn pages): theme pages, dashboard, quiz overlay, session end, onboarding, sign-in, profile, settings.
   Colours from the Design canvas: ink #101828, CTA #C1121F, found blue #2E7CF6, mistakes orange #F28C28,
   medal gold #F5B301 (one kind of medal), rank badges navy. Manrope comes from content.css. */
:root {
  --lx-ink: #101828; --lx-ink-2: #475467; --lx-muted: #667085; --lx-line: #E4E7EC; --lx-line-2: #F2F4F7; --lx-tile: #F5F7FA;
  --lx-cta: #C1121F; --lx-cta-dark: #A50F1A; --lx-blue: #2E7CF6; --lx-blue-2: #1D5FD0; --lx-blue-ink: #1A4FA3; --lx-blue-soft: #EAF2FE;
  --lx-orange: #F28C28; --lx-orange-ink: #9A4A06; --lx-orange-soft: #FFF4E8; --lx-orange-line: #F7C99B;
  /* Answer feedback only (right / wrong at a glance); found progress stays blue and "My mistakes" orange. */
  --lx-green: #12B76A; --lx-green-2: #079455; --lx-green-ink: #05603A; --lx-green-soft: #E3F8EC; --lx-green-line: #75E0A7;
  --lx-red: #F04438; --lx-red-ink: #B42318; --lx-red-soft: #FEECEB; --lx-red-line: #FDA29B;
  --lx-gold: #F5B301; --lx-danger: #B42318;
  --lx-spring: cubic-bezier(.34, 1.56, .64, 1); --lx-out: cubic-bezier(.2, .8, .2, 1);
}
.lx-locked, .lx-locked body { overflow: hidden; }
.lx-offscreen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-learn] [hidden], .lx-runner [hidden], .lx-modal [hidden], .lx-sheet [hidden] { display: none !important; }

/* Buttons, links, inputs */
.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--lx-tile); color: var(--lx-ink); font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s var(--lx-out), background .2s, box-shadow .2s; }
.lx-btn:active:not(:disabled) { transform: scale(.97); }
.lx-btn:focus-visible, .lx-link:focus-visible, .lx-choice:focus-visible, .lx-level:focus-visible, .lx-option:focus-visible, .lx-chip:focus-visible, .lx-tcard:focus-visible { outline: 3px solid rgba(46, 124, 246, .45); outline-offset: 2px; }
.lx-btn--primary { background: var(--lx-cta); color: #fff; box-shadow: 0 6px 16px rgba(193, 18, 31, .22); }
.lx-btn--primary:hover { background: var(--lx-cta-dark); color: #fff; }
.lx-btn--primary:disabled { background: #D0D5DD; box-shadow: none; cursor: default; }
.lx-btn--ghost { background: #fff; color: var(--lx-ink); box-shadow: inset 0 0 0 1.5px #D0D5DD; }
.lx-btn--ghost:hover { background: var(--lx-tile); color: var(--lx-ink); }
.lx-btn--outline { background: transparent; color: var(--lx-ink); box-shadow: inset 0 0 0 1.5px var(--lx-ink); min-height: 44px; font-size: 15px; }
.lx-btn--outline:hover { background: #fff; color: var(--lx-ink); }
.lx-btn--danger { background: var(--lx-danger); color: #fff; }
.lx-btn--danger:hover { background: #912018; color: #fff; }
.lx-btn--danger:disabled { background: #FDA29B; cursor: default; }
.lx-btn--big { min-height: 54px; padding: 0 28px; font-size: 17px; }
.lx-btn--small { min-height: 40px; padding: 0 16px; font-size: 14px; }
.lx-btn--block { display: flex; width: 100%; }
.lx-link { border: 0; background: none; padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 700; color: var(--lx-ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lx-link:hover { color: var(--lx-ink); }
.lx-link:disabled { color: var(--lx-muted); text-decoration: none; cursor: default; }
.lx-icon-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--lx-line); background: #fff; color: var(--lx-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; text-decoration: none; }
.lx-icon-btn--plain { border-color: transparent; background: transparent; }
.lx-icon-btn--plain:hover { background: var(--lx-tile); }
.lx-icon-btn[aria-pressed="true"] .lx-wave { opacity: 0; }
.lx-input { width: 100%; height: 52px; border-radius: 14px; border: 1.5px solid #D0D5DD; padding: 0 16px; font: 500 16px var(--font, 'Manrope', sans-serif); color: var(--lx-ink); background: #fff; box-sizing: border-box; }
.lx-input:focus { outline: none; border: 2px solid var(--lx-ink); padding: 0 15.5px; }
.lx-label-text, .lx-form label { font-size: 14px; font-weight: 700; }
.lx-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FEF3F2; color: var(--lx-danger); font-size: 14px; font-weight: 700; line-height: 1.45; }
.lx-fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lx-muted); }
.lx-fine a { color: var(--lx-ink-2); }
.lx-kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-muted); }
.lx-kicker--orange { color: var(--lx-orange-ink); }
.lx-eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--lx-muted); }
.lx-loading { color: var(--lx-muted); font-weight: 700; }

/* Medals, bars, chips */
.lx-medal, .lx-rank { flex-shrink: 0; display: inline-block; vertical-align: middle; }
/* Earned rank pins (art.js data-tilt, driven by ui/tilt.js): tilt toward the mouse, lift, glare, numerals in parallax. */
[data-tilt] { overflow: visible; transform: perspective(260px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0px)) scale(var(--tilt-scale, 1)); transition: transform .5s var(--lx-spring), filter .4s var(--lx-out); }
[data-tilt].is-tilting { --tilt-lift: -4px; --tilt-scale: 1.06; transition: transform .14s var(--lx-out), filter .3s var(--lx-out); filter: drop-shadow(0 10px 10px rgba(16, 24, 40, .2)); }
[data-tilt] .aa-glare { opacity: 0; transform: translate(var(--glare-x, 0px), var(--glare-y, 0px)); transition: opacity .3s, transform .14s var(--lx-out); }
[data-tilt].is-tilting .aa-glare { opacity: 1; }
[data-tilt] .aa-num { transform: translate(var(--num-x, 0px), var(--num-y, 0px)); transition: transform .14s var(--lx-out); }
[data-tilt].is-tapped { animation: aa-wobble .75s var(--lx-out); }
[data-tilt].is-tapped .aa-glare { animation: aa-glint .75s var(--lx-out); }
.lx-bar { display: block; width: 100%; height: 8px; border-radius: 999px; background: #EAECF0; overflow: hidden; }
.lx-bar--thin { height: 6px; }
.lx-bar--big { height: 12px; }
.lx-bar__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--lx-blue); transition: width .9s var(--lx-out), background .2s; }
/* Blue to gold is a distant hue change: quick, and only once the fill has arrived */
.lx-bar__fill.is-done { background: var(--medal, var(--lx-gold)); transition: width .9s var(--lx-out), background .2s .75s; }
/* Rolling digits (fx.js rollTo): only the digits that change move, the last one first */
/* Its own line box with a set line height, so rolling cells (1lh) and the still characters share one baseline */
[data-roll] { display: inline-block; font-variant-numeric: tabular-nums; line-height: 1.3; }
.lx-end__text h1 [data-roll] { line-height: 1.1; }
.fx-roll { display: inline-block; height: 1.3em; height: 1lh; overflow: hidden; vertical-align: top; }
.fx-roll__col { display: flex; flex-direction: column; }
.fx-roll__col > span { display: block; height: 1.3em; height: 1lh; text-align: center; }
.lx-end__text h1 .fx-roll, .lx-end__text h1 .fx-roll__col > span { height: 1.1em; height: 1lh; }
.lx-bar__fill--ink { background: var(--lx-ink); }
.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lx-line); background: #fff; color: var(--lx-ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; }
a.lx-chip:hover { border-color: #98A2B3; color: var(--lx-ink); }
.lx-chip--soft { border-color: transparent; background: var(--lx-tile); }
.lx-chip--found { border: 0; background: var(--lx-blue-soft); color: var(--lx-blue-ink); padding: 7px 12px; }
.lx-chip--mistake { padding: 4px 10px; font-size: 13px; font-weight: 600; border-color: var(--lx-orange-line); }
.lx-chip--toggle { min-height: 40px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lx-chip--toggle[aria-pressed="true"] { background: var(--lx-blue-2); border-color: var(--lx-blue-2); color: #fff; }
.lx-title-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px 5px 5px; border-radius: 999px; background: #FEF3D6; color: #7A4100; font-size: 13px; font-weight: 700; }
.lx-title-chip svg { width: 20px; height: 20px; padding: 4.5px; border-radius: 999px; background: #C46E00; box-sizing: border-box; }

/* Header additions */
.lx-header-user { position: relative; display: flex; align-items: center; }
.lx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--lx-ink); color: #fff; font-size: 14px; font-weight: 800; border: 0; flex-shrink: 0; }
.lx-avatar--btn { cursor: pointer; font-family: inherit; }
.lx-avatar--btn[aria-expanded="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lx-blue); }
.lx-avatar--md { width: 44px; height: 44px; }
.lx-avatar--lg { width: 52px; height: 52px; font-size: 18px; }
.lx-avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.lx-avatar--photo { padding: 0; overflow: hidden; background: var(--lx-line); }
.lx-avatar--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.lx-header-login { padding: 9px 14px; border-radius: 999px; color: var(--lx-ink); font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1.5px #D0D5DD; white-space: nowrap; }
.lx-header-login:hover { color: var(--lx-ink); background: #fff; }
.lx-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 340px; background: #fff; border: 1px solid var(--lx-line); border-radius: 20px; box-shadow: 0 20px 40px rgba(16, 24, 40, .16); padding: 14px; display: flex; flex-direction: column; gap: 4px; animation: lx-rise .25s var(--lx-out); }
.lx-menu__who { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.lx-menu__name { font-size: 16px; font-weight: 800; }
.lx-menu__name--lg { font-size: 19px; }
.lx-menu__email { font-size: 13px; color: var(--lx-ink-2); word-break: break-all; }
.lx-menu__rank { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--lx-tile); text-align: left; font: inherit; color: var(--lx-ink); cursor: pointer; }
.lx-menu__rank > div { flex: 1; min-width: 0; }
.lx-menu__rank--card { background: #fff; border: 1px solid var(--lx-line); border-radius: 16px; padding: 12px 14px; color: var(--lx-muted); }
.lx-menu__rank--card > div { color: var(--lx-ink); }
.lx-menu__rankname { font-size: 14px; font-weight: 800; }
.lx-menu__rank--card .lx-menu__rankname { font-size: 16px; }
.lx-menu__ranksub { font-size: 12px; color: var(--lx-ink-2); }
.lx-menu__rank--card .lx-menu__ranksub { font-size: 13px; }
.lx-menu__all { font-size: 12px; font-weight: 800; color: var(--lx-ink-2); }
.lx-menu > a, .lx-menu > button:not(.lx-menu__rank) { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--lx-ink); text-decoration: none; cursor: pointer; text-align: left; }
.lx-menu > a:hover, .lx-menu > button:hover { background: var(--lx-tile); color: var(--lx-ink); }
.lx-menu > a span { font-size: 13px; color: var(--lx-muted); }
.lx-menu__logout { color: var(--lx-danger) !important; }

/* Sheets and modals */
.lx-sheet, .lx-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lx-sheet__backdrop, .lx-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); animation: lx-fade .25s; }
.lx-sheet__panel, .lx-modal__panel { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 50px rgba(16, 24, 40, .25); animation: lx-rise .35s var(--lx-out); box-sizing: border-box; }
.lx-modal__panel { width: min(480px, 100%); padding: 28px; }
.lx-modal__close, .lx-sheet__close { position: absolute; right: 10px; top: 10px; }
.lx-sheet__grip { display: none; align-self: center; width: 40px; height: 5px; border-radius: 999px; background: #D0D5DD; }
.lx-sheet__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.lx-sheet__intro { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-sheet__nav { display: flex; flex-direction: column; border-top: 1px solid var(--lx-line); }
.lx-sheet__nav a, .lx-sheet__nav button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border: 0; border-bottom: 1px solid var(--lx-line-2); background: none; padding: 0; font: inherit; font-size: 16px; font-weight: 700; color: var(--lx-ink); text-decoration: none; text-align: left; cursor: pointer; }
.lx-sheet__nav span { font-size: 14px; color: var(--lx-muted); }
.lx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: center; }
.lx-stat { background: var(--lx-tile); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lx-stat b { font-size: 18px; }
.lx-stat span { font-size: 11px; font-weight: 700; color: var(--lx-ink-2); }
.lx-ranklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lx-ranklist__row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--lx-line-2); }
.lx-ranklist__row > div { flex: 1; min-width: 0; }
.lx-ranklist__row.is-current { background: var(--lx-tile); border: 2px solid var(--lx-ink); padding: 7px 9px; }
.lx-ranklist__name { font-size: 15px; font-weight: 800; color: var(--lx-ink-2); }
.lx-ranklist__row.is-earned .lx-ranklist__name { color: var(--lx-ink); }
.lx-ranklist__need { font-size: 12px; color: var(--lx-ink-2); }
.lx-ranklist__state { font-size: 12px; font-weight: 800; color: var(--lx-ink-2); }
.lx-ranklist__row.is-current .lx-ranklist__state { color: var(--lx-ink); }

/* Toast, notices, dev bar */
.lx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2000; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 14px; background: var(--lx-ink); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba(16, 24, 40, .25); animation: lx-rise .3s var(--lx-out); transition: opacity .4s; }
.lx-toast--error { background: var(--lx-danger); }
.lx-toast--success { background: var(--lx-blue-ink); }
.lx-toast.is-out { opacity: 0; }
.lx-notice { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--lx-orange-soft); color: var(--lx-orange-ink); font-size: 14px; font-weight: 700; }
.lx-devbar { position: fixed; left: 12px; bottom: 12px; z-index: 3000; padding: 6px 10px; border-radius: 10px; background: #FFF8DB; border: 1px solid #F5D565; color: #6B4E00; font: 600 12px/1.4 var(--font, sans-serif); box-shadow: 0 4px 12px rgba(16, 24, 40, .12); }
.lx-devbar button, .lx-devbar a { font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0 2px; }
.lx-locked .lx-devbar { display: none; }

/* ---------- Theme page ---------- */
.lx-theme { padding: 20px 0 40px; }
.lx-theme__hero { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.lx-theme__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.lx-theme h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.lx-medals { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: 15px; font-weight: 700; color: var(--lx-ink-2); }
.lx-medals span { margin-left: 8px; }
.lx-theme__meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* "i" buttons: the explanations live in a native popover (site/learn.mjs infoButton), the page shows what people act on */
.lx-info { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 1.5px solid #98A2B3; background: #FFFFFF; color: var(--lx-ink-2); font: 800 13px/1 Georgia, 'Times New Roman', serif; font-style: italic; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; }
.lx-info:hover, .lx-info:focus-visible { border-color: var(--lx-ink); color: var(--lx-ink); }
.lx-info__pop { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; box-sizing: border-box; margin: auto; padding: 20px 22px 18px; border: 0; border-radius: 20px; background: #FFFFFF; color: var(--lx-ink); box-shadow: 0 24px 60px rgba(16, 24, 40, .25); font-size: 15px; line-height: 1.55; text-align: left; }
.lx-info__pop::backdrop { background: rgba(16, 24, 40, .35); }
.lx-info__pop p { margin: 0 0 10px; color: var(--lx-ink-2); }
.lx-info__pop .lx-info__title { margin-bottom: 8px; font-size: 17px; font-weight: 800; color: var(--lx-ink); }
.lx-info__close { display: block; margin: 14px 0 0 auto; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--lx-ink); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.lx-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lx-level { text-align: left; font: inherit; color: var(--lx-ink); background: #fff; border: 1px solid var(--lx-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: transform .2s var(--lx-spring), box-shadow .2s, border-color .2s; }
.lx-level.is-next { border: 2px solid var(--lx-ink); padding: 13px; box-shadow: 0 10px 24px rgba(16, 24, 40, .08); }
.lx-level__go { margin-top: auto; width: 100%; }
.lx-level__top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-muted); }
.lx-level__name { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.lx-level__stack { display: inline-flex; align-items: center; }
.lx-level__stack .lx-medal + .lx-medal { margin-left: -5px; }
/* Theme page cards: the level's medals on top, large, and the cards as tall as the 3D body beside them */
.lx-theme__main .lx-levels { flex: 1; }
.lx-level__medals { min-height: 66px; display: flex; align-items: flex-end; }
.lx-level__medals .lx-level__stack .lx-medal + .lx-medal { margin-left: -14px; }
.lx-level__prize { font-size: 13px; font-weight: 800; color: #8A5A00; margin-top: -4px; }
.lx-level__status { font-size: 13px; color: var(--lx-ink-2); }
.lx-rule { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-start__hint { margin: -6px 0 0; font-size: 14px; color: var(--lx-muted); }
.lx-start__hint[hidden] { display: none; }
.lx-theme__visual { flex: 1 1 340px; min-width: 0; display: flex; }
/* 3D explorer (ui/explore.js, site/learn.mjs exploreFigure): theme pages and atlas pages. */
.lx-explore-wrap { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lx-explore-wrap figcaption { font-size: 13px; color: var(--lx-ink-2); text-align: center; }
.lx-explore__info { position: absolute; top: 14px; right: 14px; z-index: 5; }
.lx-explore { position: relative; flex: 1; min-height: 440px; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #FFFFFF 0%, #EEF1F5 100%); user-select: none; -webkit-user-select: none; }
/* Only the live body takes the finger: the poster still lets the page scroll. */
.lx-explore.is-live { touch-action: none; }
.lx-explore canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; z-index: 1; }
.lx-explore canvas:active { cursor: grabbing; }
.lx-explore.is-pointing canvas { cursor: pointer; }
.lx-explore__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; box-sizing: border-box; transition: opacity .5s; }
.lx-explore.is-live .lx-explore__poster { opacity: 0; pointer-events: none; }
.lx-explore__loading { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4; display: none; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 700; color: var(--lx-ink-2); box-shadow: 0 6px 16px rgba(16, 24, 40, .1); }
.lx-explore__loading .lx-spinner { width: 18px; height: 18px; border-width: 2.5px; }
.lx-explore.is-loading .lx-explore__loading { display: inline-flex; }
.lx-explore__go { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--lx-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(16, 24, 40, .22); }
.lx-explore__go:hover { background: #1D2939; }
.lx-explore.is-loading .lx-explore__go, .lx-explore.is-live .lx-explore__go { display: none; }
.lx-explore__ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.lx-explore__ui .lx-layers, .lx-explore__ui .lx-tool, .lx-explore__card { pointer-events: auto; }
.lx-explore__ui .lx-layers { left: 14px; top: 14px; }
.lx-explore__ui .lx-tool { left: 14px; bottom: 14px; width: 44px; padding: 0; justify-content: center; }
.lx-explore__ui .lx-tool span { display: none; }
.lx-explore__card { position: absolute; right: 14px; bottom: 14px; left: 72px; max-width: 360px; margin-left: auto; padding: 14px 40px 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 28px rgba(16, 24, 40, .14); display: flex; flex-direction: column; gap: 2px; animation: lx-rise .3s var(--lx-out); }
.lx-explore__card strong { font-size: 16px; font-weight: 800; color: var(--lx-ink); }
.lx-explore__card em { font-size: 13px; color: var(--lx-muted); }
.lx-explore__card p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--lx-ink-2); }
.lx-explore__card a { margin-top: 6px; display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 800; color: var(--lx-cta); text-decoration: none; }
.lx-explore__close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--lx-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lx-explore__close svg { width: 16px; height: 16px; }
.lx-explore__error { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; color: var(--lx-red-ink); text-align: center; cursor: pointer; }
.lx-inside { margin-top: 56px; }
.lx-inside__head { display: flex; align-items: center; gap: 10px; }
.lx-inside h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.lx-sub { margin: 6px 0 0; font-size: 15px; color: var(--lx-ink-2); }
.lx-lists { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lx-list { border: 1px solid var(--lx-line); border-radius: 18px; padding: 18px; }
.lx-list h3 { margin: 0; font-size: 16px; font-weight: 800; }
.lx-list h3 span { color: var(--lx-muted); font-weight: 600; }
.lx-list ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.lx-list li { display: flex; align-items: center; gap: 8px; }
.lx-list__name { font-weight: 600; color: var(--lx-ink); text-decoration: none; }
a.lx-list__name:hover { color: var(--lx-blue); text-decoration: underline; text-underline-offset: 3px; }
.lx-dot { width: 20px; height: 20px; border-radius: 999px; background: #D0D5DD; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .3s; }
.lx-list li.is-found .lx-dot { background: var(--lx-blue); }
.lx-related { margin: 48px 0 8px; display: flex; flex-wrap: wrap; gap: 32px; }
.lx-related > div { flex: 1 1 320px; }
.lx-related h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }

/* ---------- Hub (static) and dashboard ---------- */
.lx-hub { padding: 8px 0 24px; }
.lx-hub__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding: 24px; border-radius: 24px; background: var(--lx-tile); }
.lx-hub__head > div:first-child { flex: 1 1 420px; }
.lx-hub__head h2 { margin: 6px 0 8px; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.lx-hub__head p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lx-ink-2); }
.lx-hub__cta { display: flex; align-items: center; gap: 12px; }
.lx-resume { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.lx-resume h2 { margin: 0; font-size: 17px; font-weight: 800; }
.lx-resume__grid { margin-top: 0; padding-bottom: 0; }
.lx-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; padding-bottom: 8px; }
.lx-tcard { text-decoration: none; color: var(--lx-ink); border: 1px solid var(--lx-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: #fff; transition: transform .2s var(--lx-spring), box-shadow .2s; }
.lx-tcard:hover { color: var(--lx-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 24, 40, .08); }
.lx-tcard__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lx-tcard__top strong { font-size: 16px; font-weight: 800; }
.lx-tcard__medals { display: inline-flex; gap: 1px; flex-shrink: 0; }
.lx-tcard__status { font-size: 13px; color: var(--lx-ink-2); }
.lx-dash-on main > :not(.lx-hub) { display: none; }
.lx-dash-on .lx-hub { padding: 0; }
.lx-dash { padding-top: 28px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.lx-dash__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.lx-dash__title { flex: 1 1 100%; order: -2; }
.lx-dash h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.lx-dash__side { flex: 1 1 300px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lx-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--lx-blue-soft); }
.lx-banner div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--lx-ink-2); }
.lx-banner strong { color: var(--lx-ink); font-size: 15px; }
.lx-continue { border: 1px solid var(--lx-line); border-radius: 20px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.lx-continue__info { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lx-continue__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lx-continue__title { font-size: 20px; font-weight: 800; }
.lx-continue__medals { display: inline-flex; gap: 2px; }
.lx-continue__bar { display: flex; align-items: center; gap: 12px; }
.lx-continue__bar span { font-size: 14px; font-weight: 700; color: var(--lx-blue-ink); white-space: nowrap; }
.lx-continue__note { font-size: 13px; color: var(--lx-ink-2); }
.lx-themes__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lx-themes__head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.lx-themes__head p { margin: 4px 0 0; font-size: 14px; color: var(--lx-ink-2); max-width: 520px; }
.lx-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--lx-line); border-radius: 999px; padding: 9px 14px; flex: 0 1 300px; color: var(--lx-muted); }
.lx-search input { border: 0; outline: none; font: 500 15px var(--font, sans-serif); color: var(--lx-ink); width: 100%; background: transparent; }
.lx-search:focus-within { border-color: var(--lx-ink); }
.lx-group { margin-top: 12px; border-top: 1px solid var(--lx-line); }
.lx-group__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--lx-ink); text-align: left; font-size: 18px; font-weight: 800; }
.lx-group__toggle svg { transition: transform .25s; transform: rotate(180deg); }
.lx-group__toggle[aria-expanded="false"] svg { transform: none; }
.lx-group__meta { font-weight: 600; color: var(--lx-muted); font-size: 15px; }
.lx-group .lx-tgrid { margin-top: 0; padding-bottom: 20px; }
.lx-empty { margin: 0 0 16px; color: var(--lx-ink-2); font-size: 14px; }
.lx-rankcard { border: 1px solid var(--lx-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.lx-rankcard__head { display: flex; align-items: center; gap: 14px; }
.lx-rankcard__name { font-size: 22px; font-weight: 800; margin-top: 2px; }
.lx-rankcard__next { font-size: 13px; color: var(--lx-ink-2); margin-top: 2px; }
.lx-rankcard__next b { color: var(--lx-ink); }
.lx-rankrow { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; }
.lx-rankrow span { display: flex; justify-content: center; }
.lx-titles { border-top: 1px solid var(--lx-line); padding-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-mistakes { border: 1px solid var(--lx-orange-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #FFF7EF; scroll-margin-top: 90px; }
.lx-mistakes__title { font-size: 18px; font-weight: 800; margin-top: 2px; }
.lx-mistakes__text { font-size: 13px; line-height: 1.45; color: var(--lx-ink-2); margin-top: 4px; }

/* ---------- Leaderboard (ui/leaderboard.js): page, pinned row, dashboard card ---------- */
.lx-page--leaderboard .lx-shell { max-width: 720px; }
.lx-shell.lx-shell--bare { background: transparent; box-shadow: none; padding: 0; }
.lx-lbpage { display: flex; flex-direction: column; gap: 16px; }
.lx-lbpage__intro { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-lbpage__intro b { color: var(--lx-ink); }
.lx-lbpage__foot, .lx-lb__more { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lx-muted); }
.lx-lb__empty { margin: 0; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--lx-line); color: var(--lx-ink-2); }
.lx-banner--muted { background: var(--lx-line-2); }
.lx-lb { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--lx-line); border-radius: 16px; overflow: hidden; }
.lx-lbrow { display: grid; grid-template-columns: 32px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-top: 1px solid var(--lx-line-2); box-sizing: border-box; }
.lx-lbrow:first-child { border-top: 0; }
.lx-lbrow.is-you { background: var(--lx-blue-soft); box-shadow: inset 4px 0 0 var(--lx-blue); }
.lx-lbrow.is-hidden { background: var(--lx-line-2); box-shadow: inset 4px 0 0 var(--lx-muted); }
.lx-lbrow__pos { font-size: 16px; font-weight: 800; color: var(--lx-ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.lx-lbrow--top1 .lx-lbrow__pos { color: #A86F00; }
.lx-lbrow--top2 .lx-lbrow__pos { color: #5E6875; }
.lx-lbrow--top3 .lx-lbrow__pos { color: #7A4A26; }
.lx-lbrow__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lx-lbrow__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 800; color: var(--lx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-you { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--lx-blue-2); padding: 2px 8px; border-radius: 999px; }
.lx-lbrow.is-hidden .lx-you { background: var(--lx-muted); }
.lx-lbrow__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--lx-ink-2); }
.lx-lbrow__rank { font-weight: 700; }
.lx-lbrow__chip { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lx-lbrow__score { display: flex; align-items: center; justify-content: center; }
.lx-lbrow__score b { font-weight: 800; }
.lx-lb__pin { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 12px 28px rgba(16, 24, 40, .18); animation: lx-rise .25s var(--lx-out); }
.lx-lbcard { border: 1px solid var(--lx-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.lx-lbcard h2.lx-kicker { margin: 0; font-size: 12px; line-height: 1.4; letter-spacing: .06em; }
.lx-lbcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--lx-ink-2); }
.lx-lbcard__empty { margin: 0; font-size: 13px; line-height: 1.45; color: var(--lx-ink-2); }
.lx-lbcard .lx-btn { align-self: flex-start; }
.lx-lbcard__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-muted); }
.lx-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; }
.lx-podium__place { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.lx-podium__name { max-width: 100%; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-podium__place.is-you .lx-podium__name { color: var(--lx-blue-2); }
.lx-podium__total { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; color: var(--lx-ink-2); }
.lx-podium__step { width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; border-radius: 10px 10px 4px 4px; font-size: 15px; font-weight: 800; color: #fff; }
.lx-podium__place--1 .lx-podium__step { height: 56px; background: linear-gradient(180deg, #E8B53F, #C8922A); }
.lx-podium__place--2 .lx-podium__step { height: 40px; background: linear-gradient(180deg, #BFC6D1, #98A2B3); }
.lx-podium__place--3 .lx-podium__step { height: 30px; background: linear-gradient(180deg, #D9965B, #B26B35); }
.lx-lbmini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lx-lbmini__row { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 12px; }
.lx-lbmini__row.is-you { background: var(--lx-blue-soft); }
.lx-lbmini__pos { font-weight: 800; color: var(--lx-ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.lx-lbmini__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-lbmini__total { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lx-lbmini__gap { text-align: center; color: var(--lx-muted); line-height: 1; letter-spacing: .2em; }
.lx-set-row--photo { flex-wrap: wrap; justify-content: flex-start; padding-top: 12px; padding-bottom: 12px; }
.lx-set-row--photo .lx-set-row__text { flex: 1 1 160px; }
.lx-photo-actions { display: flex; align-items: center; gap: 12px; }
#photo, #leaderboard { scroll-margin-top: 90px; }

/* ---------- Quiz overlay ---------- */
.lx-runner { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #fff; color: var(--lx-ink); font-family: var(--font, 'Manrope', sans-serif); animation: lx-fade .3s; }
.lx-run-top { display: flex; align-items: center; gap: 20px; padding: 12px 32px; border-bottom: 1px solid var(--lx-line); }
.lx-run-title { display: flex; flex-direction: column; min-width: 0; }
.lx-run-title strong { font-size: 16px; font-weight: 800; }
.lx-run-title span { font-size: 13px; color: var(--lx-muted); white-space: nowrap; }
.lx-run-progress { flex: 1 1 280px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.lx-segs { flex-grow: 1; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 4px; }
.lx-seg { height: 8px; border-radius: 999px; background: #EAECF0; position: relative; overflow: hidden; }
.lx-seg::after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: var(--seg, var(--lx-blue)); transition: transform .45s var(--lx-out); }
.lx-seg.is-current { background: var(--lx-ink); }
.lx-seg.is-right { --seg: var(--lx-green); }
.lx-seg.is-wrong { --seg: var(--lx-red); }
.lx-seg.is-right::after, .lx-seg.is-wrong::after { transform: scaleX(1); }
.lx-run-count { font-size: 14px; font-weight: 700; color: var(--lx-ink-2); white-space: nowrap; }
.lx-run-main { flex: 1; min-height: 0; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 32px 32px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "stage prompt" "stage panel" "stage actions"; gap: 16px 24px; }
.lx-prompt { grid-area: prompt; border: 1px solid var(--lx-line); border-radius: 20px; padding: 20px; }
.lx-prompt.is-in { animation: lx-rise .45s var(--lx-out); }
.lx-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-ink-2); background: var(--lx-tile); padding: 4px 10px; border-radius: 999px; }
.lx-prompt__eyebrow { display: none; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-muted); }
.lx-prompt h2 { margin: 12px 0 0; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.lx-prompt__sub { margin: 6px 0 0; font-size: 14px; color: var(--lx-ink-2); }
.lx-prompt__sub:empty { display: none; }
.lx-stage { grid-area: stage; position: relative; min-height: 0; border-radius: 24px; background: radial-gradient(120% 90% at 50% 30%, #FFFFFF 0%, #EEF1F5 100%); overflow: hidden; touch-action: none; }
.lx-stage canvas, .lx-end__body canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.lx-stage.is-picking canvas { cursor: pointer; }
/* First-visit coach card over the 3D stage (ui/coach.js): lets the drag through, only the button takes clicks. */
.lx-coach { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; animation: lx-rise .45s var(--lx-out) .3s both; }
.lx-coach.is-out { animation: lx-coach-out .35s var(--lx-out) forwards; }
.lx-coach__card { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 280px; padding: 18px 22px 16px; border-radius: 22px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(16, 24, 40, .18); text-align: center; color: var(--lx-ink); }
.lx-coach__card strong { font-size: 17px; font-weight: 800; margin-top: 6px; }
.lx-coach__card > span { font-size: 14px; color: var(--lx-ink-2); }
.lx-coach__ok { pointer-events: auto; margin-top: 12px; min-height: 40px; padding: 0 22px; font-size: 15px; }
.lx-coach__demo { position: relative; width: 150px; height: 84px; color: var(--lx-blue); }
.lx-coach__arc { position: absolute; left: 9px; top: 0; }
.lx-coach__hand { position: absolute; left: 53px; top: 30px; transform-origin: 40% 30%; animation: lx-coach-drag 2.4s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(16, 24, 40, .2)); }
.lx-coach__dot { position: absolute; left: 63px; top: 30px; width: 22px; height: 22px; border-radius: 999px; background: rgba(46, 124, 246, .25); box-shadow: 0 0 0 6px rgba(46, 124, 246, .12); animation: lx-coach-dot 2.4s ease-in-out infinite; }
@keyframes lx-coach-drag { 0%, 100% { transform: translateX(-34px) rotate(-8deg); } 50% { transform: translateX(34px) rotate(8deg); } }
@keyframes lx-coach-dot { 0%, 100% { transform: translateX(-34px); opacity: .9; } 50% { transform: translateX(34px); opacity: .9; } }
@keyframes lx-coach-out { to { opacity: 0; transform: scale(.96); } }
.lx-stage__hint { position: absolute; right: 20px; bottom: 24px; font-size: 13px; color: var(--lx-muted); pointer-events: none; transition: opacity .6s; }
.lx-stage__loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; font-weight: 700; color: var(--lx-muted); background: var(--lx-tile); transition: opacity .4s; text-align: center; padding: 24px; }
.lx-stage__loading.is-done { opacity: 0; pointer-events: none; }
.lx-problem { display: flex; flex-direction: column; gap: 14px; align-items: center; max-width: 360px; color: var(--lx-ink); }
.lx-problem p { margin: 0; }
.lx-problem div { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lx-spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid #D0D5DD; border-top-color: var(--lx-blue); animation: lx-spin .8s linear infinite; }
.lx-layers { position: absolute; left: 20px; top: 20px; z-index: 3; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--lx-line); box-shadow: 0 6px 16px rgba(16, 24, 40, .06); }
.lx-layers__btn { border: 0; background: transparent; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 800; color: var(--lx-ink-2); cursor: pointer; transition: background .2s, color .2s; min-height: 36px; }
.lx-layers__btn[aria-pressed="true"] { background: var(--lx-ink); color: #fff; }
.lx-layers.is-nudge { animation: lx-nudge .9s var(--lx-spring) 2; }
.lx-tool { position: absolute; left: 20px; bottom: 20px; z-index: 3; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lx-line); background: #fff; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--lx-ink); }
.lx-selcount { position: absolute; left: 50%; bottom: 16px; z-index: 3; transform: translateX(-50%); background: var(--lx-ink); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; animation: lx-rise .3s var(--lx-out); }
.lx-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.lx-label { position: absolute; transform: translate(-50%, -100%); padding: 7px 11px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; background: var(--lx-ink); box-shadow: 0 8px 20px rgba(16, 24, 40, .18); animation: lx-label-in .45s var(--lx-spring) both; transition: opacity .2s; }
.lx-label::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.lx-label--right { background: var(--lx-green-2); }
.lx-label--wrong { background: var(--lx-red-ink); }
.lx-label--pick { background: var(--lx-blue-2); }
.lx-label--unknown { background: var(--lx-muted); }
.lx-label--peek { background: #667085; }
.lx-panel { grid-area: panel; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 6px; }
.lx-options { display: flex; flex-direction: column; gap: 8px; }
.lx-options:empty { display: none; }
.lx-option { text-align: left; border: 1.5px solid var(--lx-line); background: #fff; border-radius: 14px; min-height: 56px; padding: 12px 16px; font: inherit; font-weight: 700; font-size: 16px; color: var(--lx-ink); cursor: pointer; display: flex; align-items: center; gap: 12px; animation: lx-rise .4s var(--lx-out) both; transition: border-color .15s, background .2s, transform .15s; }
.lx-option:hover:not(:disabled) { border-color: #98A2B3; }
.lx-option:active:not(:disabled) { transform: scale(.98); }
.lx-option:disabled { cursor: default; }
/* Answered: the options nobody chose close (runner.js foldAway, FOLD_MS); the negative margin takes the gap away too */
.lx-option.is-folded { height: 0 !important; min-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: -8px; opacity: 0; overflow: hidden; pointer-events: none; animation: none; transition: height .34s var(--lx-out), min-height .34s var(--lx-out), padding .34s var(--lx-out), margin .34s var(--lx-out), border-width .34s var(--lx-out), opacity .14s; }
.lx-option.is-right { border-color: var(--lx-green); background: var(--lx-green-soft); color: var(--lx-green-ink); box-shadow: inset 0 0 0 2px var(--lx-green); animation: lx-pop-sm .4s var(--lx-out); }
/* Function questions: answers toggle; after Check, a right answer not picked stays green but dashed */
.lx-option--multi[aria-pressed="true"]:not(:disabled) { border-color: var(--lx-blue); background: var(--lx-blue-soft); color: var(--lx-blue-ink); box-shadow: inset 0 0 0 2px var(--lx-blue); }
.lx-option.is-right.is-missed { background: #FFFFFF; border-style: dashed; box-shadow: none; animation: none; }
.lx-option.is-wrong { border-color: var(--lx-red); background: var(--lx-red-soft); color: var(--lx-red-ink); box-shadow: inset 0 0 0 2px var(--lx-red); animation: lx-shake .35s ease-out; }
/* Rings stay inside the button: the scrolling answer panel would cut anything drawn outside. */
.lx-panel .lx-option:focus-visible { outline-offset: -4px; }
kbd { font: 700 11px var(--font, sans-serif); border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; opacity: .65; }
.lx-option kbd { color: var(--lx-muted); }
.lx-typeit { display: block; grid-column: 1 / -1; }
.lx-typeit input { width: 100%; box-sizing: border-box; min-height: 56px; padding: 0 16px; border: 1.5px solid var(--lx-line); border-radius: 14px; background: #fff; font: inherit; font-size: 17px; font-weight: 700; color: var(--lx-ink); }
.lx-typeit input:focus { outline: none; border-color: var(--lx-blue); box-shadow: inset 0 0 0 1.5px var(--lx-blue); }
.lx-typeit.is-right input { border-color: var(--lx-green); background: var(--lx-green-soft); color: var(--lx-green-ink); box-shadow: inset 0 0 0 2px var(--lx-green); }
.lx-typeit.is-wrong input { border-color: var(--lx-red); background: var(--lx-red-soft); color: var(--lx-red-ink); box-shadow: inset 0 0 0 2px var(--lx-red); text-decoration: line-through; }
.lx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lx-feedback { border-radius: 20px; padding: 20px; background: var(--lx-green-soft); display: flex; flex-direction: column; gap: 14px; }
.lx-feedback.is-in { animation: lx-rise .45s var(--lx-out); }
.lx-feedback.is-wrong { background: var(--lx-red-soft); }
.lx-feedback__head { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.lx-feedback__icon { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--lx-green); color: #fff; animation: lx-pop .5s var(--lx-spring); }
.lx-feedback.is-wrong .lx-feedback__icon { background: var(--lx-red); }
.lx-feedback strong { color: var(--lx-green-ink); font-weight: 800; }
.lx-feedback.is-wrong strong { color: var(--lx-red-ink); }
.lx-runner.is-answered.is-right [data-next] { background: var(--lx-green-2); }
.lx-runner.is-answered.is-right [data-next]:hover { background: var(--lx-green-ink); }
/* The mark that pops where you tapped (or on the structure), and a soft green / red glow on the stage edge. */
.lx-burst { position: absolute; z-index: 3; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--lx-green); box-shadow: 0 0 0 5px rgba(18, 183, 106, .2), 0 8px 18px rgba(16, 24, 40, .18); pointer-events: none; }
.lx-burst svg { width: 28px; height: 28px; }
.lx-burst.is-wrong { background: var(--lx-red); box-shadow: 0 0 0 5px rgba(240, 68, 56, .2), 0 8px 18px rgba(16, 24, 40, .18); }
.lx-burst::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--lx-green); }
.lx-burst.is-wrong::after { border-color: var(--lx-red); }
.lx-burst.is-in { animation: lx-burst-pop 1.1s var(--lx-out) forwards; }
.lx-burst.is-in::after { animation: lx-burst-ring .7s var(--lx-out) forwards; }
.lx-stage.is-flash-right { animation: lx-flash-right .9s var(--lx-out); }
.lx-stage.is-flash-wrong { animation: lx-flash-wrong .9s var(--lx-out); }
.lx-feedback p { margin: 0; font-size: 16px; line-height: 1.5; }
.lx-tip { background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 14px !important; }
.lx-progress-box { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.lx-progress-box__row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.lx-progress-box__row > span { color: var(--lx-ink-2); }
.lx-progress-box__note { font-size: 13px; color: var(--lx-ink-2); }
/* The level box sits at the foot of the answer panel for every question, then moves with the answer */
.lx-progress-box--live { margin-top: auto; flex-shrink: 0; border: 1px solid var(--lx-line); }
.lx-progress-box--live b { display: inline-flex; align-items: center; gap: 8px; }
.lx-found-pill { padding: 2px 8px; border-radius: 999px; background: var(--lx-green-soft); color: var(--lx-green-ink); font-size: 12px; font-weight: 800; line-height: 1.4; }
.lx-found-pill.is-in { animation: lx-drop .35s var(--lx-out) .2s both; }
@keyframes lx-drop { from { opacity: 0; transform: translateY(-6px); } }
.lx-feedback__link { font-size: 15px; font-weight: 700; color: var(--lx-blue-ink); }
.lx-actions { grid-area: actions; display: flex; flex-direction: column; gap: 6px; }
.lx-btn--run { border-radius: 14px; min-height: 56px; font-size: 17px; }
.lx-btn--run kbd { border-color: rgba(255, 255, 255, .6); color: #fff; }
.lx-actions__skip { align-self: center; }
.lx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 950; }

/* ---------- Session end ---------- */
.lx-runner.is-end .lx-run-top, .lx-runner.is-end .lx-run-main { display: none; }
.lx-end { position: relative; flex: 1; overflow-y: auto; width: 100%; max-width: 1280px; margin: 0 auto; padding: 68px 32px 64px; box-sizing: border-box; display: flex; flex-direction: column; }
/* A short summary sits in the middle of the screen, not on its top edge (auto margins never clip a long one) */
.lx-end > .lx-end__grid { margin-block: auto; }
/* The close button sits in the top margin, its right edge on the cards' edge (not touching their corner) */
.lx-end__close { position: absolute; right: 32px; top: 14px; z-index: 5; }
.lx-end__grid { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.lx-end__summary { flex: 999 1 560px; min-width: 0; background: var(--lx-tile); border-radius: 24px; padding: 32px; display: flex; flex-wrap: wrap; gap: 24px; box-sizing: border-box; }
.lx-end__body { position: relative; flex: 1 1 260px; min-width: 0; min-height: 460px; border-radius: 20px; overflow: hidden; touch-action: none; }
.lx-end__text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.lx-end__text h1 { margin: 8px 0 0; font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.lx-end__sub p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-end__sub b { color: var(--lx-ink); }
/* Session outcomes: one line per kind (found, reviewed, to review, level check), the structures as chips under it */
.lx-outcomes { display: flex; flex-direction: column; gap: 16px; }
.lx-outcome { display: flex; flex-direction: column; gap: 8px; animation: lx-rise .4s var(--lx-out) both; }
.lx-outcome__head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--lx-ink-2); }
.lx-outcome__head b { color: var(--lx-ink); font-size: 15px; }
.lx-outcome__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lx-outcome__list li { background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.lx-row__dot { width: 10px; height: 10px; border-radius: 3px; background: #98A2B3; flex-shrink: 0; }
.lx-outcome.is-new .lx-row__dot { background: var(--lx-blue); }
.lx-outcome.is-miss .lx-row__dot { background: var(--lx-orange); }
.lx-outcome.is-check .lx-row__dot { background: transparent; box-shadow: inset 0 0 0 2px #98A2B3; }
.lx-outcome.is-check .lx-outcome__list li { background: transparent; box-shadow: inset 0 0 0 1px var(--lx-line); }
.lx-saving { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 160px; color: var(--lx-ink-2); font-weight: 700; text-align: center; }
.lx-end__side { flex: 1 1 380px; min-width: 0; border: 1px solid var(--lx-line); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(16, 24, 40, .08); box-sizing: border-box; }
.lx-next { display: flex; flex-direction: column; gap: 16px; }
.lx-next__level { background: var(--lx-tile); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.lx-next__level p { margin: 0; font-size: 14px; color: var(--lx-ink-2); }
.lx-next__level--tile { width: 100%; text-align: left; box-sizing: border-box; }
.lx-next__row { display: flex; gap: 10px; }
.lx-next__row > * { flex: 1; }
/* End screen extras (ui/end-extras.js): still to find, place on the leaderboard, reminder, iPhone app QR */
.lx-tofind { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.lx-tofind .lx-tofind__head { color: var(--lx-ink); }
.lx-tofind__list { margin: 0; padding: 0; list-style: none; gap: 6px; }
.lx-tofind__list .lx-chip { padding: 5px 10px; font-size: 13px; background: #fff; }
.lx-end__extras { display: flex; flex-direction: column; gap: 10px; }
.lx-end__extras:empty { display: none; }
.lx-remind { background: var(--lx-tile); }
.lx-remind__row { display: flex; flex-direction: row !important; align-items: center; gap: 14px !important; }
.lx-appqr { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--lx-line); color: var(--lx-ink); text-decoration: none; }
.lx-appqr:hover { border-color: #98A2B3; color: var(--lx-ink); }
.lx-appqr img { flex-shrink: 0; width: 84px; height: 84px; }
.lx-appqr > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--lx-ink-2); }
.lx-appqr strong { color: var(--lx-ink); font-size: 15px; }
.lx-rankup { border-radius: 24px; background: var(--lx-ink); color: #fff; padding: 20px 24px; display: flex; align-items: center; gap: 18px; animation: lx-rise .6s var(--lx-out) .4s both; }
.lx-rankup .lx-rank { flex-shrink: 0; animation: aa-flip 1s var(--lx-out) .9s backwards; }
/* In the medal ceremony the rank comes after the medal has landed */
.lx-medal-end .lx-rankup { animation-delay: 1.5s; }
.lx-medal-end .lx-rankup .lx-rank { animation-delay: 1.9s; }
.lx-rankup__kicker { font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--lx-gold); }
.lx-rankup__title { font-size: 24px; font-weight: 800; margin-top: 2px; }
.lx-rankup__sub { font-size: 14px; color: #D0D5DD; margin-top: 4px; }
.lx-medal-end { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; max-width: 1080px; margin: auto; padding-top: 24px; }
.lx-medal-end__hero { flex: 1 1 420px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.lx-medal-end__hero h1 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
.lx-medal-end__sub { margin: 0; font-size: 18px; color: var(--lx-ink-2); }
.lx-medal-end__side { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; }
.lx-medal-end__also { margin: 0; font-size: 14px; color: var(--lx-ink-2); }
.lx-medal-stage { position: relative; width: 180px; height: 180px; perspective: 600px; display: flex; justify-content: center; }
.lx-medal-big { filter: drop-shadow(0 16px 24px rgba(16, 24, 40, .22)); animation: lx-medal-drop 1s cubic-bezier(.25, .8, .25, 1) both; }
.lx-medal-count { position: absolute; right: -6px; bottom: 6px; min-width: 52px; padding: 6px 12px; border-radius: 999px; background: var(--lx-ink); color: #FFE27A; font-size: 22px; font-weight: 800; line-height: 1; text-align: center; box-shadow: 0 8px 18px rgba(16, 24, 40, .25); animation: lx-medal-count .5s var(--lx-spring) 1.1s both; }
@keyframes lx-medal-count { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lx-medal-count { animation: none; } }
.lx-shine { position: absolute; top: 36%; left: 50%; width: 58.7%; height: 58.7%; transform: translateX(-50%); border-radius: 50%; overflow: hidden; pointer-events: none; }
.lx-shine::before { content: ''; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); transform: rotate(20deg); animation: lx-shine 1.2s ease-in-out 1.1s 1; }

/* ---------- Sign-in ---------- */
.lx-page { background: var(--lx-tile); padding: 32px 16px 64px; min-height: 60vh; }
.lx-shell { max-width: 480px; margin: 0 auto; background: #fff; border-radius: 28px; padding: 32px; box-shadow: 0 10px 30px rgba(16, 24, 40, .06); box-sizing: border-box; }
.lx-page--onboarding .lx-shell, .lx-page--account .lx-shell { max-width: 720px; }
.lx-page--account .lx-shell { background: transparent; box-shadow: none; padding: 0; }
.lx-auth { position: relative; display: flex; flex-direction: column; gap: 14px; }
.lx-auth__title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.lx-auth--gate .lx-auth__title { font-size: 28px; line-height: 1.2; letter-spacing: -.01em; padding-right: 32px; }
.lx-auth__intro { margin: 0; font-size: 16px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-auth__intro b { color: var(--lx-ink); }
.lx-auth__back { margin-left: -10px; }
.lx-auth__badge { width: 56px; height: 56px; border-radius: 16px; background: var(--lx-blue-soft); color: var(--lx-blue-2); display: inline-flex; align-items: center; justify-content: center; }
.lx-auth__note { margin: 0; font-size: 14px; color: var(--lx-ink-2); }
.lx-auth__links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lx-auth__links .lx-link { font-size: 15px; padding: 8px 0; }
.lx-auth__leave { align-self: center; margin-top: 4px; }
.lx-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.lx-perks li { display: flex; gap: 10px; align-items: flex-start; }
.lx-perks__icon { color: var(--lx-blue); flex-shrink: 0; margin-top: 1px; }
.lx-google { display: flex; flex-direction: column; gap: 14px; }
.lx-google__btn { min-height: 44px; display: flex; justify-content: center; }
.lx-or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--lx-muted); }
.lx-or span { flex-grow: 1; height: 1px; background: var(--lx-line); }
.lx-form { display: flex; flex-direction: column; gap: 8px; }
.lx-form .lx-btn { margin-top: 6px; border-radius: 999px; }
.lx-hintbox { padding: 14px 16px; border-radius: 14px; background: var(--lx-tile); font-size: 13px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-hintbox--new { font-size: 14px; margin-top: 8px; }
.lx-hintbox a { font-weight: 800; color: var(--lx-ink); }
.lx-code { border: 0; padding: 0; margin: 10px 0 0; }
.lx-code legend { font-size: 14px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.lx-code__boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.lx-code__box { height: 60px; width: 100%; box-sizing: border-box; text-align: center; border-radius: 14px; border: 1.5px solid #D0D5DD; font: 800 26px var(--font, sans-serif); color: var(--lx-ink); background: #fff; padding: 0; }
.lx-code__box:focus { outline: none; border: 2px solid var(--lx-ink); }
.lx-code__box:disabled { background: var(--lx-tile); }
.lx-code.is-wrong .lx-code__boxes { animation: lx-shake .4s; }

/* ---------- Onboarding ---------- */
.lx-onb { display: flex; flex-direction: column; gap: 18px; }
.lx-onb__top { display: flex; align-items: center; gap: 12px; }
.lx-onb__top .lx-icon-btn { margin-left: -10px; }
.lx-steps { flex-grow: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lx-steps span { height: 6px; border-radius: 999px; background: #EAECF0; transition: background .3s; }
.lx-steps span.is-on { background: var(--lx-ink); }
.lx-onb h1 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.lx-onb__intro { margin: 8px 0 18px; font-size: 16px; color: var(--lx-ink-2); }
.lx-onb__body { animation: lx-rise .35s var(--lx-out); }
.lx-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lx-choice { text-align: left; font: inherit; font-size: 15px; font-weight: 700; color: var(--lx-ink); background: #fff; border: 1px solid var(--lx-line); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; transition: background .15s, border-color .15s; }
.lx-choice:hover { border-color: #98A2B3; }
.lx-choice__dot { width: 20px; height: 20px; border-radius: 999px; border: 2px solid #D0D5DD; box-sizing: border-box; flex-shrink: 0; transition: border .2s var(--lx-spring); }
.lx-choice[aria-checked="true"] { background: var(--lx-blue-soft); border: 2px solid var(--lx-blue); padding: 13px 15px; }
.lx-choice[aria-checked="true"] .lx-choice__dot { border: 6px solid var(--lx-blue); }
.lx-onb__foot { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lx-onb__cta { min-width: 220px; }
.lx-onb__note { margin: 0; font-size: 13px; color: var(--lx-muted); }

/* ---------- Settings ---------- */
.lx-settings { display: flex; flex-direction: column; gap: 20px; }
.lx-settings__head { display: flex; align-items: center; gap: 8px; }
.lx-settings__head h1, .lx-settings__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.lx-set h2 { margin: 0 4px 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--lx-muted); }
.lx-set__box { background: #fff; border-radius: 16px; border: 1px solid var(--lx-line); overflow: hidden; }
.lx-set-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 14px; border: 0; border-top: 1px solid var(--lx-line-2); background: #fff; font: inherit; color: var(--lx-ink); text-align: left; text-decoration: none; box-sizing: border-box; }
.lx-set__box > .lx-set-row:first-child { border-top: 0; }
button.lx-set-row, a.lx-set-row { cursor: pointer; }
button.lx-set-row:hover, a.lx-set-row:hover { background: #FCFCFD; color: var(--lx-ink); }
.lx-set-row__text { min-width: 0; }
.lx-set-row__label { font-size: 15px; font-weight: 700; }
.lx-set-row__value { font-size: 13px; color: var(--lx-ink-2); overflow-wrap: anywhere; }
.lx-set-row--plain { font-size: 15px; font-weight: 700; }
.lx-set-row--danger { font-size: 15px; font-weight: 700; color: var(--lx-danger); }
.lx-row-chevron { color: #98A2B3; flex-shrink: 0; display: inline-flex; }
.lx-switch { width: 50px; height: 30px; border-radius: 999px; border: 0; background: #D0D5DD; position: relative; flex-shrink: 0; cursor: pointer; transition: background .2s; }
.lx-switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: left .25s var(--lx-spring); }
.lx-switch[aria-checked="true"] { background: var(--lx-blue-2); }
.lx-switch[aria-checked="true"] span { left: 23px; }
.lx-settings__logout { align-self: center; font-size: 15px; font-weight: 800; color: var(--lx-ink); }
.lx-editor { display: flex; flex-direction: column; gap: 12px; }
.lx-editor__actions { display: flex; gap: 10px; }
.lx-confirm { padding: 12px 14px; background: #FEF3F2; border-top: 1px solid var(--lx-line-2); }
.lx-confirm p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.lx-confirm div { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-delete { background: #fff; border-radius: 28px; padding: 24px; box-shadow: 0 10px 30px rgba(16, 24, 40, .06); }
.lx-delete__body { display: flex; flex-direction: column; gap: 14px; }
.lx-delete__icon { width: 56px; height: 56px; border-radius: 16px; background: #FEF3F2; color: var(--lx-danger); display: inline-flex; align-items: center; justify-content: center; }
.lx-delete h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.lx-delete__lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--lx-ink-2); }
.lx-delete__list { margin: 0; padding: 14px 16px 14px 34px; background: var(--lx-tile); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.lx-input--confirm { font-weight: 700; letter-spacing: .08em; }
.lx-delete__foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }

@keyframes lx-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lx-fade { from { opacity: 0; } }
@keyframes lx-pop { 40% { transform: scale(1.06); } }
@keyframes lx-pop-sm { 40% { transform: scale(1.025); } }
@keyframes aa-wobble { 0% { transform: perspective(260px); } 25% { transform: perspective(260px) rotateY(18deg) rotateX(-6deg) translateY(-5px) scale(1.08); } 55% { transform: perspective(260px) rotateY(-12deg) rotateX(4deg) translateY(-3px) scale(1.05); } 80% { transform: perspective(260px) rotateY(5deg) translateY(-1px) scale(1.02); } 100% { transform: perspective(260px); } }
@keyframes aa-glint { 0% { opacity: 0; transform: translate(-22px, -16px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(22px, 16px); } }
@keyframes aa-flip { 0% { opacity: 0; transform: perspective(260px) rotateY(-200deg) scale(.5); } 40% { opacity: 1; } 100% { transform: perspective(260px) rotateY(0deg) scale(1); } }
@keyframes lx-burst-pop { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.05); } 32% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.95); } }
@keyframes lx-burst-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
@keyframes lx-flash-right { 0% { box-shadow: inset 0 0 0 0 rgba(18, 183, 106, 0); } 25% { box-shadow: inset 0 0 0 3px rgba(18, 183, 106, .6), inset 0 0 36px rgba(18, 183, 106, .16); } 100% { box-shadow: inset 0 0 0 0 rgba(18, 183, 106, 0); } }
@keyframes lx-flash-wrong { 0% { box-shadow: inset 0 0 0 0 rgba(240, 68, 56, 0); } 25% { box-shadow: inset 0 0 0 3px rgba(240, 68, 56, .6), inset 0 0 36px rgba(240, 68, 56, .16); } 100% { box-shadow: inset 0 0 0 0 rgba(240, 68, 56, 0); } }
@keyframes lx-shake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-1.5px); } }
@keyframes lx-label-in { from { opacity: 0; transform: translate(-50%, -70%) scale(.7); } }
@keyframes lx-nudge { 30% { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 4px rgba(46, 124, 246, .25); } }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@keyframes lx-medal-drop { 0% { opacity: 0; transform: translateY(-90px) rotateY(-360deg) scale(.7); } 35% { opacity: 1; } 100% { transform: none; } }
@keyframes lx-shine { to { left: 130%; } }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 860px) {
  .lx-header-login { display: none; }
  .site-header__row:has(.lx-avatar) .site-header__cta { display: none; }
  .lx-header-user { margin-left: auto; }
  .lx-theme h1 { font-size: 32px; }
  .lx-levels { grid-template-columns: 1fr; }
  /* Phones: compact cards again, the medals back in the top corner */
  .lx-level { position: relative; }
  .lx-level__medals { position: absolute; top: 14px; right: 14px; min-height: 0; }
  .lx-level__medals svg { width: 20px; height: 25px; }
  .lx-level__medals .lx-level__stack .lx-medal + .lx-medal { margin-left: -5px; }
  .lx-level { flex-direction: column; }
  .lx-explore { min-height: 340px; }
  .lx-hub__head { padding: 20px; }
  .lx-hub__cta { width: 100%; }
  .lx-hub__cta .lx-btn { flex: 1; }
  .lx-dash { padding-top: 20px; gap: 20px; }
  .lx-dash h1 { font-size: 28px; }
  .lx-dash__side { max-width: none; order: -1; }
  .lx-dash__main { order: 0; }
  .lx-continue .lx-btn { width: 100%; }
  .lx-tgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .lx-search { flex: 1 1 100%; }

  .lx-run-top { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
  .lx-run-title { display: none; }
  .lx-run-progress { flex: 1; }
  .lx-segs { gap: 3px; }
  .lx-seg { height: 6px; }
  .lx-run-count { font-size: 13px; }
  .lx-run-main { padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "prompt" "stage" "panel" "actions"; background: var(--lx-tile); }
  .lx-prompt { border: 0; border-radius: 0; padding: 0 20px 14px; background: #fff; border-bottom: 1px solid var(--lx-line); }
  .lx-tag { display: none; }
  .lx-prompt__eyebrow { display: block; }
  .lx-prompt h2 { margin-top: 4px; font-size: 24px; line-height: 1.2; }
  .lx-prompt__sub { font-size: 13px; margin-top: 4px; }
  .lx-stage { border-radius: 0; background: var(--lx-tile); min-height: 220px; }
  .lx-layers { left: 12px; top: 12px; }
  .lx-layers__btn { font-size: 12px; padding: 8px 10px; }
  .lx-tool { left: 12px; bottom: 12px; width: 44px; padding: 0; justify-content: center; }
  .lx-tool span, .lx-stage__hint { display: none; }
  .lx-panel { background: #fff; border-top: 1px solid var(--lx-line); padding: 12px 16px 0; max-height: 46dvh; }
  .lx-panel:has(.lx-options:empty):has(.lx-feedback[hidden]) { display: none; }
  .lx-actions { background: #fff; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); gap: 4px; }
  .lx-runner:not(.is-answered) .lx-actions { border-top: 1px solid var(--lx-line); }
  .lx-runner:not(.is-answered) .lx-panel + .lx-actions { border-top: 0; }
  .lx-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-options:has(.lx-option--multi) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lx-option--multi { min-height: 46px; }
  .lx-runner:not(.is-answered) .lx-progress-box--live { display: none; }
  .lx-option { min-height: 56px; padding: 0 14px; font-size: 15px; }
  .lx-option kbd, .lx-btn--run kbd { display: none; }
  .lx-runner.is-answered .lx-panel, .lx-runner.is-answered .lx-actions { background: var(--lx-green-soft); }
  .lx-runner.is-answered .lx-panel { border-top: 4px solid var(--lx-green); animation: lx-rise .3s var(--lx-out); }
  .lx-runner.is-answered.is-wrong .lx-panel, .lx-runner.is-answered.is-wrong .lx-actions { background: var(--lx-red-soft); }
  .lx-runner.is-answered.is-wrong .lx-panel { border-top-color: var(--lx-red); }
  .lx-burst { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .lx-runner.is-answered .lx-options { display: none; }
  .lx-feedback { background: transparent !important; padding: 4px 0 0; gap: 10px; animation: none; }
  .lx-feedback__head { font-size: 19px; }
  .lx-feedback__icon { width: 30px; height: 30px; }
  .lx-feedback p { font-size: 14px; }
  .lx-progress-box { padding: 10px 12px; }
  .lx-btn--run { border-radius: 999px; min-height: 52px; }

  .lx-end { padding: 0 0 32px; }
  .lx-end > .lx-end__grid { margin-block: 0; }
  .lx-end__close { right: 8px; top: 8px; }
  .lx-end__grid { gap: 0; }
  .lx-end__summary { border-radius: 0; padding: 24px 20px; flex-direction: column; gap: 16px; }
  .lx-end__body { min-height: 240px; flex: 0 0 240px; }
  .lx-end__text h1 { font-size: 34px; }
  .lx-end__side { border: 0; border-radius: 0; box-shadow: none; padding: 24px 20px; }
  .lx-medal-end { padding: 36px 20px 0; gap: 24px; }
  .lx-medal-end__hero h1 { font-size: 32px; }
  .lx-medal-end__sub { font-size: 16px; }
  .lx-medal-stage { width: 132px; height: 132px; }
  .lx-medal-big { width: 132px; height: 132px; }
  .lx-rankup { padding: 18px; gap: 14px; border-radius: 20px; }
  .lx-rankup .lx-rank { width: 64px; height: 64px; }
  .lx-rankup__title { font-size: 22px; }
  .lx-rankup__sub { font-size: 13px; }

  .lx-page { padding: 0; background: #fff; }
  .lx-shell { border-radius: 0; box-shadow: none; padding: 20px 20px 32px; }
  .lx-page--account, .lx-page--leaderboard { background: var(--lx-tile); }
  .lx-page--account .lx-shell, .lx-page--leaderboard .lx-shell.lx-shell--bare { padding: 16px; }
  .lx-lbrow { grid-template-columns: 26px 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .lx-lbrow__name { font-size: 15px; }
  .lx-lbrow__score svg { width: 36px; height: auto; }
  .lx-onb h1 { font-size: 28px; }
  .lx-onb__intro { font-size: 15px; margin-bottom: 10px; }
  .lx-choices { grid-template-columns: 1fr; gap: 8px; }
  .lx-choices--many .lx-choice { padding: 11px 14px; }
  .lx-choices--many .lx-choice[aria-checked="true"] { padding: 10px 13px; }
  .lx-onb__foot { align-items: stretch; position: sticky; bottom: 0; background: #fff; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .lx-onb__cta { width: 100%; }
  .lx-onb__note { text-align: center; }
  .lx-delete { border-radius: 0; box-shadow: none; padding: 0; background: transparent; }

  .lx-sheet { align-items: flex-end; padding: 0; }
  .lx-sheet__panel { width: 100%; max-height: calc(100dvh - 56px); border-radius: 24px 24px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); animation: lx-sheet-up .35s var(--lx-out); }
  .lx-sheet__grip { display: block; }
  .lx-sheet--ranks .lx-sheet__panel { height: calc(100dvh - 56px); }
  .lx-modal { padding: 0; align-items: flex-end; }
  .lx-modal__panel { width: 100%; border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); animation: lx-sheet-up .35s var(--lx-out); }
}
@media (max-width: 560px) {
  .lx-explore__card { left: 14px; bottom: 66px; max-width: none; }
  .lx-explore__ui .lx-layers__btn { font-size: 12px; padding: 7px 9px; }
}
@keyframes lx-sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .lx-runner *, .lx-runner *::before, .lx-runner *::after, [data-learn] *, .lx-sheet *, .lx-modal *, [data-tilt], [data-tilt] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* My mistakes under the themes (main column of the dashboard): chips and button on one line when there is room */
.lx-dash__main > .lx-mistakes { margin-top: 24px; }
@media (min-width: 861px) { .lx-dash__main > .lx-mistakes .lx-btn { align-self: flex-start; } }
/* Dashboard headings: the hub's big section titles (hub.css .qh-section h2) must not apply inside the dashboard */
.lx-dash .lx-resume h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.lx-dash .lx-themes__head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }

/* Rank card: hovering (or focusing) a rank badge shows how many medals that rank takes */
.lx-rankrow__item { position: relative; display: inline-flex; }
.lx-ranktip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; transform: translate(-50%, 4px); display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--lx-ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-align: center; box-shadow: 0 8px 20px rgba(16, 24, 40, .18); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; }
.lx-ranktip b { font-size: 13px; font-weight: 800; }
.lx-ranktip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--lx-ink); }
.lx-rankrow__item:hover .lx-ranktip { opacity: 1; transform: translate(-50%, 0); }
.lx-rankrow__item:first-child .lx-ranktip { left: 0; transform: translate(0, 4px); }
.lx-rankrow__item:first-child:hover .lx-ranktip { transform: translate(0, 0); }
.lx-rankrow__item:first-child .lx-ranktip::after { left: 16px; }
.lx-rankrow__item:last-child .lx-ranktip { left: auto; right: 0; transform: translate(0, 4px); }
.lx-rankrow__item:last-child:hover .lx-ranktip { transform: translate(0, 0); }
.lx-rankrow__item:last-child .lx-ranktip::after { left: auto; right: 11px; }