/*
  Minerva Learn — Field Journal, precision edition.

  Editorial print meets precision instrument: warm paper and sepia ink,
  a terracotta thread for the teacher's marks, blue-black ink for the
  learner's own hand. Fraunces sets the words, Inter sets the numbers.
  The direction and the token set are written up in
  /learn/design/DIRECTION.md (source: public/design/).

  Fraunces and Inter are used under the SIL Open Font License 1.1; the
  license texts live beside the font files in /learn/fonts/.
*/
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/learn/fonts/fraunces-normal-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/learn/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/learn/fonts/inter-ui-latin.woff2") format("woff2");
  unicode-range:
    U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2009-200A, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2032-2033,
    U+2039-203A, U+2044, U+20AC, U+2116, U+2122, U+2212, U+2215, U+2248, U+2260,
    U+2264-2265;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/learn/fonts/inter-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ------------------------------------------------------------------ *
   Tokens. Every colour, radius, shadow and duration below comes from
   here; a redesign changes the tokens, not the components.
   Light = Bright: cream page, navy ink, coral accent, electric-blue hand.
   Dark = Night: deep navy, coral accent; prints (notation, boards, keys,
   drawing paper) stay light in both themes.
 * ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  /* paper */
  --lx-paper: #fff6ec;
  --lx-paper-hi: #fffaf4;
  --lx-plate: #ffffff;
  --lx-card: #ffffff;
  --lx-well: #fcebdd;
  /* ink */
  --lx-ink: #1b1f3b;
  --lx-ink-2: #3a3f5e;
  --lx-ink-3: #5c6080;
  --lx-rule: rgb(27 31 59 / 0.1);
  --lx-rule-2: rgb(27 31 59 / 0.18);
  --lx-rule-3: rgb(27 31 59 / 0.32);
  /* the teacher's coral */
  --lx-terra: #ff5a36;
  --lx-terra-ink: #bf3517;
  --lx-terra-deep: #a92e13;
  --lx-terra-wash: #ffe1d8;
  --lx-terra-glow: rgb(255 90 54 / 0.35);
  --lx-on-terra: #1b1f3b;
  /* the learner's electric-blue ink (the deep secondary) */
  --lx-hand: #2e4bff;
  --lx-hand-wash: #e3e8ff;
  /* semantic tones: on time green, early violet, late amber */
  --lx-moss: #087a54;
  --lx-moss-wash: #d6f2e6;
  --lx-slate: #6c2bff;
  --lx-slate-wash: #ebe2ff;
  --lx-ochre: #9a5c00;
  --lx-ochre-wash: #ffefc7;
  --lx-on-time: var(--lx-moss);
  --lx-early: var(--lx-slate);
  --lx-late: var(--lx-ochre);
  --lx-correct: var(--lx-moss);
  --lx-retry: var(--lx-ochre);
  --lx-focus: #2e4bff;
  /* a wish's own colour — on its sessions in the week strip, on its path,
     on its wins. Five slots (leaf, blue, amber, plum, sky), each clear of
     3:1 on the page and on a well; none is the coral of the one thing to
     do. The server gives each wish its slot (`tone`). */
  --lx-tone-0: #1e8a5a;
  --lx-tone-1: #3d63e0;
  --lx-tone-2: #a97c00;
  --lx-tone-3: #c4508a;
  --lx-tone-4: #0f8db3;
  /* prints: the page a score, a board or a keyboard is printed on */
  --lx-sheet: #ffffff;
  --lx-sheet-ink: #1b1f3b;
  --lx-sheet-soft-ink: #4a4f6e;
  --lx-sheet-tint: #fff3e6;
  --lx-sheet-line: #f0e2d2;
  --lx-sheet-hairline: rgb(27 31 59 / 0.22);
  --lx-sheet-accent: #ff5a36;
  --lx-sheet-accent-ink: #bf3517;
  --lx-wood: #f2cf9f;
  --lx-print: #fff6ec;
  --lx-sheet-shadow:
    0 0 0 1px rgb(27 31 59 / 0.08), 0 1px 2px rgb(27 31 59 / 0.06),
    0 18px 36px -26px rgb(27 31 59 / 0.45);
  --lx-guide: rgb(46 75 255 / 0.26);
  --lx-guide-soft: rgb(46 75 255 / 0.12);
  --lx-margin: rgb(255 90 54 / 0.45);
  --lx-trace: rgb(27 31 59 / 0.12);
  --lx-pen: #2e4bff;
  --lx-board-light: #fff1dc;
  --lx-board-dark: #f6c56b;
  --lx-board-hatch: rgb(27 31 59 / 0.18);
  --lx-board-last: rgb(255 90 54 / 0.3);
  --lx-board-target: rgb(27 31 59 / 0.28);
  --lx-key-white: #ffffff;
  --lx-key-white-2: #f3ece4;
  --lx-key-black: #1b1f3b;
  --lx-key-black-2: #343a63;
  --lx-key-marked: #ffd3c7;
  --lx-key-marked-black: #ff5a36;
  --lx-key-hit-ink: #ffffff;
  --lx-key-miss: #a9a6b8;
  /* the drum head */
  --lx-skin: #ffffff;
  --lx-skin-edge: #f3e4d4;
  --lx-hoop: #1b1f3b;
  /* type */
  --lx-serif:
    "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --lx-sans:
    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --lx-display: clamp(38px, 10.2vw, 60px);
  --lx-title: clamp(27px, 7.4vw, 34px);
  --lx-kicker: 11px;
  /* space: an 8-point rhythm with a 4-point half step */
  --lx-1: 4px;
  --lx-2: 8px;
  --lx-3: 12px;
  --lx-4: 16px;
  --lx-5: 24px;
  --lx-6: 32px;
  --lx-7: 40px;
  --lx-8: 48px;
  --lx-9: 64px;
  --lx-gutter: clamp(16px, 5.4vw, 40px);
  /* shape */
  --lx-radius-s: 8px;
  --lx-radius-m: 12px;
  --lx-radius-l: 16px;
  --lx-radius-xl: 24px;
  --lx-radius-pill: 999px;
  /* elevation */
  --lx-e1:
    0 0 0 1px var(--lx-rule), 0 1px 2px rgb(27 31 59 / 0.04),
    0 14px 34px -24px rgb(27 31 59 / 0.42);
  --lx-e2:
    0 0 0 1px var(--lx-rule), 0 2px 4px rgb(27 31 59 / 0.05),
    0 24px 48px -28px rgb(27 31 59 / 0.55);
  --lx-inset:
    inset 0 1px 2px rgb(27 31 59 / 0.08), inset 0 0 0 1px var(--lx-rule-2);
  --lx-lift: inset 0 1px 0 rgb(255 255 255 / 0.65);
  --lx-shadow: var(--lx-e1);
  /* motion */
  --lx-t1: 150ms;
  --lx-t2: 220ms;
  --lx-t3: 300ms;
  --lx-dur-instant: 60ms;
  --lx-dur-fast: 90ms;
  --lx-dur: 150ms;
  --lx-dur-slow: 220ms;
  --lx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lx-spring: cubic-bezier(0.25, 1.35, 0.4, 1);
  /* paper grain: inline SVG noise, multiplied into the paper */
  --lx-grain: none;

  /* legacy names kept for older markup and the server pages */
  --paper: var(--lx-paper);
  --paper-high: var(--lx-paper-hi);
  --panel: var(--lx-card);
  --ink: var(--lx-ink);
  --muted: var(--lx-ink-3);
  --line: var(--lx-rule-2);
  --line-strong: var(--lx-rule-3);
  --terra: var(--lx-terra);
  --terra-deep: var(--lx-terra-ink);
  --terra-soft: var(--lx-terra-wash);
  --on-terra: var(--lx-on-terra);
  --tint: var(--lx-well);
  --danger: var(--lx-ochre);

  font-family: var(--lx-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--lx-ink);
  background: var(--lx-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
/* Springs: a soft 6% overshoot for presses, a 4% settle for things that land. */
:root {
  --lx-settle: var(--lx-spring);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --lx-spring: linear(
      0,
      0.034 2.1%,
      0.136 4.5%,
      0.479 10.5%,
      0.751 16.3%,
      0.928 22.3%,
      1.023 28.5%,
      1.057 33.7%,
      1.06 38.7%,
      1.035 47.1%,
      1.008 58.3%,
      0.996 71.4%,
      1
    );
    --lx-settle: linear(
      0,
      0.071 3%,
      0.27 7.4%,
      0.536 12.6%,
      0.77 18.4%,
      0.927 24.5%,
      1.012 31%,
      1.04 36.9%,
      1.041 42.5%,
      1.016 54.6%,
      0.999 68.4%,
      1
    );
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --lx-paper: #12152b;
    --lx-paper-hi: #181c36;
    --lx-plate: #1e2343;
    --lx-card: #232849;
    --lx-well: #0d1022;
    --lx-ink: #fff6ec;
    --lx-ink-2: #d9d6e8;
    --lx-ink-3: #a3a6c4;
    --lx-rule: rgb(255 246 236 / 0.09);
    --lx-rule-2: rgb(255 246 236 / 0.16);
    --lx-rule-3: rgb(255 246 236 / 0.28);
    --lx-terra: #ff6b4a;
    --lx-terra-ink: #ff8a6e;
    --lx-terra-deep: #ffa48d;
    --lx-terra-wash: #3a1e27;
    --lx-terra-glow: rgb(255 107 74 / 0.42);
    --lx-on-terra: #12152b;
    --lx-hand: #9daeff;
    --lx-hand-wash: #232b57;
    --lx-moss: #4fd1a1;
    --lx-moss-wash: #133229;
    --lx-slate: #b79cff;
    --lx-slate-wash: #2a2152;
    --lx-ochre: #ffc94d;
    --lx-ochre-wash: #3a2e12;
    --lx-focus: #9daeff;
    --lx-tone-0: #3cc48a;
    --lx-tone-1: #8b9cff;
    --lx-tone-2: #e5b53b;
    --lx-tone-3: #f08bbd;
    --lx-tone-4: #3cc3e8;
    --lx-sheet: #fff9f2;
    --lx-sheet-tint: #fbeadb;
    --lx-sheet-line: #ebd8c6;
    --lx-sheet-shadow:
      0 0 0 1px rgb(0 0 0 / 0.5), 0 24px 48px -24px rgb(0 0 0 / 0.85),
      0 0 60px -30px rgb(255 107 74 / 0.25);
    --lx-board-light: #fff1dc;
    --lx-board-dark: #f6c56b;
    --lx-key-white: #fff9f2;
    --lx-key-white-2: #e9dfd3;
    --lx-skin: #2a2f55;
    --lx-skin-edge: #171b33;
    --lx-hoop: #090b18;
    --lx-e1:
      0 0 0 1px var(--lx-rule), 0 1px 2px rgb(0 0 0 / 0.3),
      0 18px 40px -26px rgb(0 0 0 / 0.9);
    --lx-e2:
      0 0 0 1px var(--lx-rule-2), 0 2px 4px rgb(0 0 0 / 0.35),
      0 28px 56px -28px rgb(0 0 0 / 0.95);
    --lx-inset:
      inset 0 1px 2px rgb(0 0 0 / 0.4), inset 0 0 0 1px var(--lx-rule-2);
    --lx-lift: inset 0 1px 0 rgb(255 255 255 / 0.05);
    --lx-grain: none;
    --lx-grain-opacity: 0.06;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --lx-paper: #12152b;
  --lx-paper-hi: #181c36;
  --lx-plate: #1e2343;
  --lx-card: #232849;
  --lx-well: #0d1022;
  --lx-ink: #fff6ec;
  --lx-ink-2: #d9d6e8;
  --lx-ink-3: #a3a6c4;
  --lx-rule: rgb(255 246 236 / 0.09);
  --lx-rule-2: rgb(255 246 236 / 0.16);
  --lx-rule-3: rgb(255 246 236 / 0.28);
  --lx-terra: #ff6b4a;
  --lx-terra-ink: #ff8a6e;
  --lx-terra-deep: #ffa48d;
  --lx-terra-wash: #3a1e27;
  --lx-terra-glow: rgb(255 107 74 / 0.42);
  --lx-on-terra: #12152b;
  --lx-hand: #9daeff;
  --lx-hand-wash: #232b57;
  --lx-moss: #4fd1a1;
  --lx-moss-wash: #133229;
  --lx-slate: #b79cff;
  --lx-slate-wash: #2a2152;
  --lx-ochre: #ffc94d;
  --lx-ochre-wash: #3a2e12;
  --lx-focus: #9daeff;
  --lx-tone-0: #3cc48a;
  --lx-tone-1: #8b9cff;
  --lx-tone-2: #e5b53b;
  --lx-tone-3: #f08bbd;
  --lx-tone-4: #3cc3e8;
  --lx-sheet: #fff9f2;
  --lx-sheet-tint: #fbeadb;
  --lx-sheet-line: #ebd8c6;
  --lx-sheet-shadow:
    0 0 0 1px rgb(0 0 0 / 0.5), 0 24px 48px -24px rgb(0 0 0 / 0.85),
    0 0 60px -30px rgb(255 107 74 / 0.25);
  --lx-board-light: #fff1dc;
  --lx-board-dark: #f6c56b;
  --lx-key-white: #fff9f2;
  --lx-key-white-2: #e9dfd3;
  --lx-skin: #2a2f55;
  --lx-skin-edge: #171b33;
  --lx-hoop: #090b18;
  --lx-e1:
    0 0 0 1px var(--lx-rule), 0 1px 2px rgb(0 0 0 / 0.3),
    0 18px 40px -26px rgb(0 0 0 / 0.9);
  --lx-e2:
    0 0 0 1px var(--lx-rule-2), 0 2px 4px rgb(0 0 0 / 0.35),
    0 28px 56px -28px rgb(0 0 0 / 0.95);
  --lx-inset:
    inset 0 1px 2px rgb(0 0 0 / 0.4), inset 0 0 0 1px var(--lx-rule-2);
  --lx-lift: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --lx-grain: none;
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* ------------------------------------------------------------------ *
   Base
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--lx-paper);
}
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--lx-ink);
  background-color: var(--lx-paper);
  /* grain is a small tile painted with the page: no blending layer to composite */
  background-image:
    var(--lx-grain),
    radial-gradient(120% 60% at 15% 0%, var(--lx-paper-hi) 0%, transparent 60%);
  background-size:
    180px 180px,
    100% 900px;
  background-repeat: repeat, no-repeat;
  font-feature-settings: "kern", "calt";
}
::selection {
  background: var(--lx-terra-wash);
  color: var(--lx-ink);
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
main {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--lx-5) var(--lx-gutter) var(--lx-9);
}
main.is-widget {
  padding: var(--lx-4) var(--lx-4) var(--lx-5);
  max-width: none;
}
main[data-display="fullscreen"],
main.is-fullscreen {
  max-width: 980px;
}

/* type */
h1,
h2,
h3 {
  font-family: var(--lx-sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-synthesis: none;
  color: var(--lx-ink);
  text-wrap: balance;
}
h1 {
  font-size: var(--lx-display);
  line-height: 1;
  letter-spacing: -0.032em;
  margin: var(--lx-2) 0 var(--lx-4);
}
h2 {
  font-size: var(--lx-title);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 var(--lx-3);
}
h3 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 var(--lx-2);
}
p {
  margin: 0 0 var(--lx-3);
  text-wrap: pretty;
}
a {
  color: var(--lx-terra-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--lx-t1) var(--lx-ease);
}
a:hover {
  color: var(--lx-terra-deep);
}
strong,
b {
  font-weight: 600;
  color: var(--lx-ink);
}
pre,
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
}
pre {
  background: var(--lx-well);
  padding: var(--lx-4);
  border-radius: var(--lx-radius-m);
  overflow: auto;
  white-space: pre-wrap;
  font-size: 13px;
}
.quiet {
  color: var(--lx-ink-3);
}
.small {
  font-size: 13.5px;
  line-height: 1.45;
}
.lx-kicker,
.lesson-meta,
.today-kicker,
.start-kicker,
.hero-kicker,
.thing-kind,
.last-time-when,
.start-here,
.lx-cards__counter,
.lx-count__label,
.end-label-kicker {
  font-family: var(--lx-sans);
  font-size: var(--lx-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.lx-kicker {
  color: var(--lx-ink-3);
  margin: 0 0 var(--lx-2);
}

/* ------------------------------------------------------------------ *
   Controls
 * ------------------------------------------------------------------ */
button {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lx-2);
  min-height: 44px;
  padding: 0 20px;
  font: 500 15px/1.2 var(--lx-sans);
  letter-spacing: -0.005em;
  color: var(--lx-ink);
  background: var(--lx-card);
  border: 1px solid var(--lx-rule-2);
  border-radius: var(--lx-radius-pill);
  box-shadow:
    var(--lx-lift),
    0 1px 2px rgb(27 31 59 / 0.05);
  cursor: pointer;
  transition:
    transform var(--lx-t1) var(--lx-spring),
    background-color var(--lx-t1) var(--lx-ease),
    border-color var(--lx-t1) var(--lx-ease),
    color var(--lx-t1) var(--lx-ease),
    box-shadow var(--lx-t2) var(--lx-ease);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button:hover {
  border-color: var(--lx-rule-3);
}
button:active {
  transform: scale(0.97);
}
button svg {
  width: 18px;
  height: 18px;
  flex: none;
}
button.primary,
.cta,
.lx-teacher__button {
  color: var(--lx-on-terra);
  background: var(--lx-terra);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 -1px 0 rgb(0 0 0 / 0.08),
    0 1px 2px rgb(90 34 12 / 0.22),
    0 10px 22px -12px var(--lx-terra-glow);
  font-weight: 560;
}
button.primary:hover,
.cta:hover,
.lx-teacher__button:hover {
  background: var(--lx-terra-ink);
  border-color: transparent;
  color: var(--lx-on-terra);
}
button.ghost,
.ghost {
  background: transparent;
  box-shadow: none;
}
button.small-button,
.small-button {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
button:disabled,
button[aria-disabled="true"] {
  opacity: 0.42;
  cursor: default;
  transform: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lx-focus);
  outline-offset: 3px;
}
.link-button {
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--lx-ink-2);
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: underline;
  text-decoration-color: var(--lx-rule-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: var(--lx-radius-s);
}
.link-button:hover {
  color: var(--lx-ink);
  text-decoration-color: var(--lx-terra);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-2) var(--lx-3);
  margin: 0;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea {
  font: 400 16px/1.45 var(--lx-sans);
  color: var(--lx-ink);
  background: var(--lx-card);
  border: 0;
  border-radius: var(--lx-radius-m);
  box-shadow: var(--lx-inset);
  padding: 11px 14px;
  min-height: 48px;
  transition: box-shadow var(--lx-t1) var(--lx-ease);
}
textarea {
  width: 100%;
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: var(--lx-ink-3);
  opacity: 0.8;
}
input[type="text"]:focus,
textarea:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1.5px var(--lx-hand),
    0 0 0 4px var(--lx-hand-wash);
}
input[type="checkbox"] {
  accent-color: var(--lx-terra);
}
.status,
.top-status {
  font-size: 14px;
  color: var(--lx-ink-3);
  margin: 0;
}
.status:empty,
.top-status:empty {
  display: none;
}
.notice {
  font-size: 14.5px;
  padding: var(--lx-3) var(--lx-4);
  border-radius: var(--lx-radius-m);
  background: var(--lx-plate);
  box-shadow: var(--lx-e1);
}
.error {
  color: var(--lx-ochre);
}
details {
  margin: var(--lx-2) 0;
}
summary {
  cursor: pointer;
  color: var(--lx-ink-2);
  font-size: 14.5px;
  min-height: 32px;
}
summary:hover {
  color: var(--lx-ink);
}

/* ------------------------------------------------------------------ *
   Masthead and session head
 * ------------------------------------------------------------------ */
.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-3);
  padding-bottom: var(--lx-3);
  margin-bottom: var(--lx-6);
  border-bottom: 1px solid var(--lx-rule-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lx-sans);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--lx-ink);
}
.brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--lx-rule);
}
.topline .link-button {
  font-size: 14px;
  min-height: 40px;
}
.account {
  display: flex;
  align-items: center;
  gap: var(--lx-3);
  min-width: 0;
}
.account-email {
  font-size: 13px;
  color: var(--lx-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand,
.topline .link-button,
.account button {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .account-email {
    display: none;
  }
}
.lesson-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lx-terra-ink);
  margin: 0 0 var(--lx-3);
}
.lesson-meta::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}
.objective {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(19px, 5vw, 22px);
  line-height: 1.38;
  letter-spacing: -0.006em;
  color: var(--lx-ink-2);
  max-width: 34em;
  margin: 0 0 var(--lx-5);
}
h1.compact {
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.04;
  margin: var(--lx-1) 0 var(--lx-3);
}
.h1-meta {
  font-family: var(--lx-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--lx-ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.5em;
  margin-inline-start: 6px;
}

/* "Last time" — the teacher's pull quote */
.last-time {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0 0 var(--lx-6);
  padding-block: var(--lx-1);
  padding-inline: var(--lx-5) 0;
}
.last-time::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--lx-hand);
}
.last-time-when {
  color: var(--lx-ink-3);
}
.last-time-dash {
  display: none;
}
.last-time-said {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(20px, 5.4vw, 24px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
   Blocks: numbered like chapters, separated by hairlines
 * ------------------------------------------------------------------ */
.blocks {
  counter-reset: lx-block;
  display: grid;
}
.block {
  position: relative;
  counter-increment: lx-block;
  padding: var(--lx-6) 0 var(--lx-7);
  border-top: 1px solid var(--lx-rule-2);
  scroll-margin-top: var(--lx-4);
}
.block:last-child {
  padding-bottom: var(--lx-6);
}
.block > p:last-child {
  margin-bottom: 0;
}
.lx-block {
  display: grid;
  gap: var(--lx-5);
}
.lx-block > * {
  margin: 0;
}
.lx-block__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--lx-3) var(--lx-3);
}
.lx-block__head::before {
  content: counter(lx-block, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--lx-sans);
  font-size: var(--lx-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-terra-ink);
}
/* The kind of practice, in the player's language (practice.mjs sets data-kicker). */
.lx-block[data-kicker] .lx-block__head::before {
  content: counter(lx-block, decimal-leading-zero) "  ·  " attr(data-kicker);
}
.lx-block__title {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}
.lx-room {
  grid-column: 2;
  grid-row: 1;
  min-height: 36px;
  padding-block: 0;
  padding-inline: 10px 12px;
  font-size: 13px;
  gap: 6px;
  color: var(--lx-ink-2);
  background: transparent;
  box-shadow: none;
}
.lx-room svg {
  width: 14px;
  height: 14px;
}
.lx-room[aria-pressed="true"] {
  background: var(--lx-ink);
  color: var(--lx-paper);
  border-color: transparent;
}
.start-here {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: 0 0 calc(var(--lx-2) * -1);
  padding-block: 6px;
  padding-inline: 10px 12px;
  border-radius: var(--lx-radius-pill);
  color: var(--lx-terra-ink);
  background: var(--lx-terra-wash);
}
.start-here::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lx-terra);
  box-shadow: 0 0 0 0 var(--lx-terra-glow);
  animation: lx-beacon 2.4s var(--lx-ease) infinite;
}
@keyframes lx-beacon {
  0% {
    box-shadow: 0 0 0 0 var(--lx-terra-glow);
  }
  70%,
  100% {
    box-shadow: 0 0 0 8px rgb(0 0 0 / 0);
  }
}
.block.is-focus .lx-block__head::before {
  color: var(--lx-terra);
}
.lx-block__last {
  display: grid;
  gap: 4px;
  padding: var(--lx-3) var(--lx-4);
  border-radius: var(--lx-radius-m);
  background: var(--lx-well);
  font-size: 14.5px;
  color: var(--lx-ink-2);
}
.lx-block__last .last-time-when {
  font-size: 10.5px;
}
.lx-block__last-line {
  color: var(--lx-ink);
}
.lx-block__show {
  display: grid;
  gap: var(--lx-5);
}
.instruction {
  font-size: 16.5px;
  color: var(--lx-ink-2);
}

/* rich text */
.lx-rich {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--lx-ink-2);
}
.lx-rich > :first-child {
  margin-top: 0;
}
.lx-rich > :last-child {
  margin-bottom: 0;
}
.lx-rich p,
.lx-rich ul,
.lx-rich ol {
  margin: 0 0 var(--lx-3);
}
.lx-rich ul,
.lx-rich ol {
  padding-inline-start: 22px;
}
.lx-rich li {
  margin: 6px 0;
  padding-inline-start: 4px;
}
.lx-rich ol {
  list-style: none;
  counter-reset: lx-li;
  padding-inline-start: 0;
}
.lx-rich ol > li {
  counter-increment: lx-li;
  position: relative;
  padding-inline-start: 30px;
}
.lx-rich ol > li::before {
  content: counter(lx-li);
  position: absolute;
  inset-inline-start: 0;
  top: 0.05em;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 1.08em;
  color: var(--lx-terra-ink);
}
.lx-rich ul > li::marker {
  color: var(--lx-terra);
}
.lx-rich em,
.lx-rich i {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 1.04em;
  letter-spacing: -0.004em;
}
.lx-rich strong {
  font-weight: 600;
}
.lx-rich__heading {
  font-family: var(--lx-sans);
  font-weight: 750;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--lx-ink);
  margin: var(--lx-5) 0 var(--lx-2);
}
.lx-math--display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--lx-2) 0;
  margin: var(--lx-2) 0 var(--lx-4);
  color: var(--lx-ink);
}
.lx-math--display .katex-display {
  margin: 0.3em 0;
}
.katex {
  font-size: 1.1em;
  color: var(--lx-ink);
}
.lx-math--fallback {
  font-size: 0.95em;
}

/* ------------------------------------------------------------------ *
   Figures: prints laid on the page
 * ------------------------------------------------------------------ */
.lx-figure {
  position: relative;
  margin: 0;
  padding: var(--lx-4);
  color: var(--lx-sheet-ink);
  background: var(--lx-sheet);
  border-radius: var(--lx-radius-l);
  box-shadow: var(--lx-sheet-shadow);
  overflow: hidden;
}
.lx-figure:has(> .lx-figure__art) {
  padding: 0;
  /* the renderers print on Field Journal paper; the frame matches it */
  background: var(--lx-print);
}
.lx-figure__art svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
}
.lx-figure--fretboard .lx-figure__art,
.lx-figure--keyboard .lx-figure__art {
  padding: var(--lx-3) var(--lx-2);
}
.lx-figure--fretboard .lx-figure__art svg,
.lx-figure--keyboard .lx-figure__art svg {
  max-width: 460px;
  margin: 0 auto;
}
.lx-figure > .lx-alt,
.lx-unknown {
  padding: var(--lx-4);
  background: var(--lx-well);
  border-radius: var(--lx-radius-m);
  color: var(--lx-ink-2);
  box-shadow: none;
}
.lx-figure:has(> .lx-alt:only-child) {
  background: var(--lx-well);
  box-shadow: none;
  color: var(--lx-ink-2);
}
.lx-alt {
  margin: 0 0 6px;
  font-size: 14.5px;
}
.lx-unknown .quiet {
  margin: 0;
}
.lx-figure--notation {
  display: grid;
  gap: var(--lx-3);
  padding: var(--lx-4) var(--lx-4) var(--lx-3);
}
.lx-notation__score {
  min-height: 60px;
  overflow-x: auto;
  color: var(--lx-sheet-ink);
}
.lx-notation__score svg {
  max-width: 100%;
}
.lx-notation__score svg path,
.lx-notation__score svg text {
  fill: currentColor;
}
.lx-notation__score .abcjs-highlight,
.lx-notation__score .abcjs-highlight path {
  fill: var(--lx-sheet-accent);
}

/* media */
.media,
.media-block img,
.media-block video {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--lx-radius-l);
  background: var(--lx-well);
}
img.media,
.media-block img {
  height: auto;
  box-shadow: var(--lx-sheet-shadow);
}
audio.media {
  background: none;
  box-shadow: none;
}
.media-block {
  display: grid;
  gap: var(--lx-2);
  margin: 0;
}
.media-slot:empty,
.media-block[data-state="empty"] .media-slot {
  display: none;
}
.media-caption {
  margin: 0;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lx-ink-3);
}
.media-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-2) var(--lx-3);
  align-items: center;
}
.media-foot .media-state {
  margin: 0;
}
.media-state {
  font-size: 13.5px;
  color: var(--lx-ink-3);
  margin: 0;
}
.media-state:empty {
  display: none;
}
.lx-media__alt {
  width: 100%;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lx-ink-2);
  background: var(--lx-well);
  border-radius: var(--lx-radius-m);
  padding: var(--lx-3) var(--lx-4);
}
.save-file {
  font-size: 13.5px;
  color: var(--lx-ink-3);
}
.save-file:hover {
  color: var(--lx-ink);
}

/* the audio player: one round button, a hairline track, tabular time */
.player {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lx-2) var(--lx-3);
  padding: var(--lx-2) var(--lx-3) var(--lx-2) var(--lx-2);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-pill);
  box-shadow: var(--lx-e1);
}
.player-play {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  flex: none;
  border-radius: 50%;
  border: 0;
  color: var(--lx-on-terra);
  background: var(--lx-terra);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    0 6px 14px -8px var(--lx-terra-glow);
}
.player-play:hover {
  background: var(--lx-terra-ink);
}
.player-play svg {
  width: 18px;
  height: 18px;
}
.player-play:not(.is-playing) svg {
  margin-left: 2px;
}
.player-track {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  min-width: 100px;
}
.player-scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  --lx-fill: 0%;
}
.player-scrub::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: var(--lx-rule-2);
}
.player-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--lx-ink);
  box-shadow: 0 0 0 3px var(--lx-plate);
}
.player-scrub::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: var(--lx-rule-2);
}
.player-scrub::-moz-range-progress {
  height: 3px;
  border-radius: 3px;
  background: var(--lx-terra);
}
.player-scrub::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--lx-ink);
}
.player-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--lx-ink-2);
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
}
.player-words {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.player-text {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--lx-ink-2);
  background: transparent;
  box-shadow: none;
  border-color: var(--lx-rule-2);
}
.player-text:hover {
  color: var(--lx-ink);
}
.player-text[aria-pressed="true"] {
  background: var(--lx-ink);
  border-color: transparent;
  color: var(--lx-paper);
}
.player-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lx-terra);
}
.lx-figure--notation .lx-notation__player {
  background: var(--lx-sheet-tint);
  box-shadow: none;
  color: var(--lx-sheet-ink);
}
.lx-figure--notation .player-time,
.lx-figure--notation .player-text {
  color: var(--lx-sheet-soft-ink);
  border-color: var(--lx-sheet-hairline);
}
.lx-figure--notation .player-text[aria-pressed="true"] {
  background: var(--lx-sheet-ink);
  color: var(--lx-sheet);
}
.lx-notation__player[data-state="playing"] .player-play {
  box-shadow: 0 0 0 6px var(--lx-terra-wash);
}

/* ------------------------------------------------------------------ *
   "Where should tomorrow start?" — the final card
 * ------------------------------------------------------------------ */
.session-end {
  position: relative;
  display: grid;
  gap: var(--lx-4);
  margin-top: var(--lx-4);
  padding: var(--lx-7) var(--lx-5) var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e2);
  overflow: hidden;
}
/* The mark that opens their line is in their ink: the line is theirs. */
.session-end::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  inset-inline-start: 16px;
  font-family: var(--lx-serif);
  font-size: 120px;
  line-height: 1;
  color: var(--lx-hand);
  pointer-events: none;
}
.end-label {
  display: block;
  font-family: var(--lx-serif);
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--lx-ink);
  margin: var(--lx-3) 0 0;
  text-wrap: balance;
}
.session-end textarea {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 36px;
  min-height: calc(36px * 3 + 4px);
  padding: 0 2px 4px;
  color: var(--lx-hand);
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    transparent 35px,
    var(--lx-rule-2) 35px,
    var(--lx-rule-2) 36px
  );
  background-size: 100% 36px;
  background-attachment: local;
  border-radius: 0;
  box-shadow: none;
  resize: none;
}
.session-end textarea:focus {
  box-shadow: none;
  background-image: linear-gradient(
    to bottom,
    transparent 35px,
    var(--lx-hand-wash) 35px,
    var(--lx-rule-3) 36px
  );
}
.session-end textarea::placeholder {
  color: var(--lx-ink-3);
  opacity: 0.7;
}
.session-end textarea[readonly] {
  color: var(--lx-ink-2);
}
.end-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-2) var(--lx-4);
}
.save-attempt {
  min-height: 48px;
  padding: 0 24px;
}
.save-attempt.is-kept:disabled,
.partial-link.is-kept:disabled {
  opacity: 1;
}
.save-attempt.is-kept:disabled {
  background: var(--lx-moss-wash);
  color: var(--lx-moss);
  box-shadow: none;
}
.save-status {
  font-size: 14px;
  color: var(--lx-ink-3);
  margin: 0;
}
.save-status:empty {
  display: none;
}
.save-status.is-kept {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lx-moss);
  font-weight: 500;
}
.save-status.is-kept::before,
.lx-keep[data-state="kept"] .lx-keep__status::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 18px no-repeat,
    var(--lx-moss);
}
.save-status.error {
  color: var(--lx-ochre);
}
.partial-link {
  font-size: 14px;
}
.remember-line {
  display: flex;
  align-items: center;
  gap: var(--lx-2);
  font-size: 14px;
  color: var(--lx-ink-2);
}
.remember-line input {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------------ *
   Library: Today, your practices, your things
 * ------------------------------------------------------------------ */
.library {
  display: grid;
  gap: var(--lx-5);
}
.library h1 {
  margin-bottom: 0;
}
.library-lede {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--lx-ink-2);
  margin: 0 0 var(--lx-2);
}
.plan-title,
.library h2 {
  font-family: var(--lx-sans);
  font-size: var(--lx-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-ink-3);
  margin: var(--lx-5) 0 0;
}
.today-card {
  position: relative;
  display: grid;
  gap: var(--lx-3);
  padding: var(--lx-5) var(--lx-5) var(--lx-4);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e2);
  overflow: hidden;
}
.today-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lx-terra-ink);
  margin: 0;
}
.today-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lx-terra);
  animation: lx-beacon 2.4s var(--lx-ease) infinite;
}
.library .today-card h2 {
  font-family: var(--lx-sans);
  font-weight: 800;
  text-transform: none;
  color: var(--lx-ink);
  font-size: clamp(28px, 7.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0;
  max-width: 14em;
}
.today-card .last-time {
  margin: 0;
}
.today-card .last-time-said {
  font-size: 18px;
}
.today-objective {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.42;
  color: var(--lx-ink-2);
  margin: 0;
}
.today-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-3);
  margin-top: var(--lx-2);
  padding-top: var(--lx-4);
  border-top: 1px solid var(--lx-rule);
}
.today-row .quiet {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.today-row .primary {
  min-height: 48px;
  padding: 0 26px;
}
.practice-list,
.things,
.plans-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.practice-list {
  display: grid;
  border-top: 1px solid var(--lx-rule-2);
}
.practice-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--lx-3);
  width: 100%;
  min-height: 64px;
  padding: var(--lx-3) var(--lx-1);
  text-align: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lx-rule-2);
  border-radius: 0;
  box-shadow: none;
}
.practice-row:hover {
  background: transparent;
}
.practice-row:active {
  transform: none;
}
.practice-row:focus-visible {
  outline-offset: -2px;
}
.practice-title {
  font-family: var(--lx-sans);
  font-weight: 750;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--lx-ink);
  transition: color var(--lx-t1) var(--lx-ease);
}
.practice-row:hover .practice-title {
  color: var(--lx-terra-ink);
}
.practice-meta {
  font-size: 13px;
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
.practice-arrow {
  color: var(--lx-terra);
  font-size: 18px;
  transition: transform var(--lx-t2) var(--lx-spring);
}
.practice-row:hover .practice-arrow {
  transform: translateX(4px);
}
.things {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--lx-3);
}
.thing {
  display: grid;
  gap: var(--lx-2);
  padding: var(--lx-4);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-l);
  box-shadow: var(--lx-e1);
}
.thing-name {
  display: grid;
  gap: 4px;
}
.thing-kind {
  color: var(--lx-terra-ink);
  font-size: 10px;
}
.thing-title {
  font-family: var(--lx-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--lx-ink);
}
.things-more summary,
.plans-line summary {
  font-size: 14px;
  color: var(--lx-ink-2);
}
.plans-list {
  display: grid;
  gap: var(--lx-2);
  margin-top: var(--lx-3);
}
.plans-list li {
  font-size: 14.5px;
  color: var(--lx-ink-2);
}
.empty {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--lx-ink-2);
  padding: var(--lx-6) var(--lx-5);
  text-align: center;
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e1);
}
/* Before the first screen: the outline of a card, in no language. It shows
   only once the wait outlasts a moment, then breathes until replaced. */
.lx-boot {
  display: grid;
  gap: var(--lx-3);
  max-width: 560px;
  animation:
    lx-fade-in 300ms var(--lx-ease) 600ms both,
    lx-breathe 1.4s var(--lx-ease) 900ms infinite alternate;
}
.lx-boot > span {
  display: block;
  height: 18px;
  border-radius: var(--lx-radius-s);
  background: var(--lx-well);
}
.lx-boot > .lx-boot__cover {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--lx-radius-xl);
}
.lx-boot > .lx-boot__title {
  height: 28px;
  width: 78%;
}
.lx-boot > .lx-boot__line {
  width: 56%;
}
main[aria-busy="true"] > .quiet {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--lx-ink-3);
  padding: var(--lx-9) 0;
  text-align: center;
  animation: lx-breathe 1.8s var(--lx-ease) infinite alternate;
}
@keyframes lx-breathe {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
main > .notice.error {
  font-family: var(--lx-serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--lx-ink);
  padding: var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow:
    var(--lx-e1),
    inset 3px 0 0 var(--lx-ochre);
}

/* ------------------------------------------------------------------ *
   Program: today's step, the days ahead, goals and stages, their words.
   One meaning per mark: coral = today / now, green check = done,
   electric blue = the learner's own words. Nothing else is tinted.
 * ------------------------------------------------------------------ */
.program-slot {
  display: grid;
}
.program {
  display: grid;
  gap: var(--lx-7);
}
/* Composed while they watched: the parts settle in, top first. */
.program[data-arrival] > * {
  animation: lx-lift-in 620ms var(--lx-ease) both;
}
.program[data-arrival] > :nth-child(2) {
  animation-delay: 90ms;
}
.program[data-arrival] > :nth-child(3) {
  animation-delay: 170ms;
}
.program[data-arrival] > :nth-child(n + 4) {
  animation-delay: 240ms;
}
.program-intro {
  display: grid;
  gap: var(--lx-3);
}
.program-intro > * {
  margin: 0;
}
.program-kicker {
  margin: 0;
}
.program-title {
  margin: 0;
}
.program-promise {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(19px, 5vw, 22px);
  line-height: 1.38;
  letter-spacing: -0.006em;
  color: var(--lx-ink-2);
  max-width: 34em;
}
.program-changed {
  display: grid;
  gap: 4px;
  padding: var(--lx-3) var(--lx-4);
  border-radius: var(--lx-radius-m);
  background: var(--lx-well);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lx-ink-2);
}
.program-changed-label,
.goal-things-label,
.goal-rest-when,
.week-weekday,
.kind-pill {
  font-family: var(--lx-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--lx-ink-3);
}
.program-section {
  display: grid;
  gap: var(--lx-4);
}
.program-section > .plan-title {
  margin: 0;
}
.program-mix {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--lx-ink-2);
  margin: 0;
  max-width: 36em;
}
.program-paused {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--lx-ink-2);
  margin: 0;
  padding: var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e1);
}

/* today's step */
.today-block {
  display: grid;
  gap: var(--lx-3);
}
.step-card {
  position: relative;
  display: grid;
  gap: var(--lx-3);
  padding: var(--lx-5) var(--lx-5) var(--lx-4);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e2);
  overflow: hidden;
}
.step-card > * {
  margin: 0;
}
.step-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-2) var(--lx-3);
}
.step-card-top > p {
  margin: 0;
}
.kind-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--lx-radius-pill);
  background: var(--lx-well);
  color: var(--lx-ink-2);
  letter-spacing: 0.12em;
}
.step-card .step-title {
  font-family: var(--lx-sans);
  font-weight: 800;
  text-transform: none;
  font-size: clamp(28px, 7.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--lx-ink);
  margin: 0;
  max-width: 15em;
}
.step-goal {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--lx-ink-3);
  margin: 0;
}
/* The goal and its stage wrap as whole names. */
.step-goal {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.28em;
}
.step-focus {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--lx-ink-2);
}
.step-card .today-row {
  margin-top: var(--lx-1);
}
.step-card .today-row > .quiet {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lx-ink-2);
}
.step-start {
  min-height: 48px;
  padding: 0 30px;
}
.daily-line {
  display: flex;
  align-items: flex-start;
  gap: var(--lx-2);
  margin: 0;
  padding: 0 var(--lx-2);
  font-size: 14px;
  line-height: 1.45;
  color: var(--lx-ink-3);
}
.daily-line:not(.is-invite) {
  font-weight: 600;
  color: var(--lx-ink-2);
}
.line-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.done-today {
  display: flex;
  align-items: center;
  gap: var(--lx-2);
  margin: 0;
  padding: 0 var(--lx-2);
  font-weight: 600;
  font-size: 15px;
  color: var(--lx-moss);
}
.done-mark {
  flex: none;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 20px no-repeat,
    var(--lx-moss);
}

/* the days ahead */
.week {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--lx-rule-2);
}
.week-day {
  border-bottom: 1px solid var(--lx-rule-2);
}
.week-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lx-3);
  width: 100%;
  min-height: 68px;
  padding: var(--lx-3) var(--lx-1);
  font: inherit;
  text-align: start;
  color: var(--lx-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
button.week-row:hover {
  background: transparent;
}
button.week-row:active {
  transform: none;
}
button.week-row:focus-visible {
  outline-offset: -2px;
}
.week-date {
  display: grid;
  justify-items: start;
  gap: 2px;
}
.week-num {
  font-family: var(--lx-sans);
  font-weight: 200;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink);
}
.week-words {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.week-title {
  font-weight: 650;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--lx-ink);
  text-wrap: balance;
  transition: color var(--lx-t1) var(--lx-ease);
}
.week-goal {
  font-size: 13px;
  line-height: 1.35;
  color: var(--lx-ink-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
button.week-row:hover .week-title {
  color: var(--lx-terra-ink);
}
button.week-row:hover .practice-arrow {
  transform: translateX(4px);
}
.week-day[data-status="done"] .week-title {
  color: var(--lx-ink-2);
}

/* goals and their stages */
.goals {
  display: grid;
  gap: var(--lx-4);
}
.goal {
  display: grid;
  gap: var(--lx-3);
  padding: var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e1);
}
.goal > * {
  margin: 0;
}
.goal-title {
  font-size: clamp(21px, 5.6vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.022em;
}
.goal-why {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--lx-ink-2);
}
.stages {
  list-style: none;
  margin: var(--lx-2) 0 0;
  padding: 0;
  display: grid;
}
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--lx-3);
  padding-bottom: var(--lx-4);
}
.stage:last-child {
  padding-bottom: 0;
}
/* One unbroken rail from each stage's ring to the next. */
.stage::before {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--lx-rule-2);
}
.stage:last-child::before {
  display: none;
}
.stage-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lx-plate);
  box-shadow: inset 0 0 0 2px var(--lx-rule-3);
}
.stage[data-state="current"] .stage-mark {
  background: radial-gradient(
    circle,
    var(--lx-terra) 0 5px,
    var(--lx-plate) 5.5px
  );
  box-shadow: inset 0 0 0 2px var(--lx-terra);
}
.stage[data-state="done"] .stage-mark {
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 20px no-repeat,
    var(--lx-moss);
  box-shadow: none;
}
.stage-words > p {
  margin: 0;
}
.stage-title {
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
  padding-top: 1px;
  color: var(--lx-ink-3);
}
.stage[data-state="current"] .stage-title {
  font-weight: 700;
  color: var(--lx-ink);
}
.stage[data-state="done"] .stage-title {
  color: var(--lx-ink-2);
}
.stage-can {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lx-ink-2);
  margin-top: 4px !important;
}
.goal-things.have-ready {
  max-width: 34em;
  margin: calc(-1 * var(--lx-2)) 0 var(--lx-5);
  padding: var(--lx-3) 0 0;
}
.goal-things {
  display: grid;
  gap: 4px;
  padding-top: var(--lx-3);
  border-top: 1px solid var(--lx-rule);
  font-size: 14px;
  line-height: 1.45;
  color: var(--lx-ink-2);
}
.goals-rest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--lx-rule-2);
}
.goal-rest {
  display: grid;
  gap: 4px;
  padding: var(--lx-4) var(--lx-1);
  border-bottom: 1px solid var(--lx-rule-2);
}
.goal-rest[data-status="done"] .goal-rest-when {
  color: var(--lx-moss);
}
.goal-rest-title {
  font-weight: 750;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--lx-ink);
}
.goal-rest-why {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lx-ink-2);
}

/* what the goals share, and ideas for later */
.threads,
.ideas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--lx-3);
}
.thread,
.idea {
  display: grid;
  align-content: start;
  gap: var(--lx-2);
  padding: var(--lx-4) var(--lx-5) var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-l);
  box-shadow: var(--lx-e1);
}
.thread > *,
.idea > * {
  margin: 0;
}
.thread h3,
.idea h3 {
  font-size: 17.5px;
  line-height: 1.25;
  letter-spacing: -0.016em;
}
.thread p,
.idea p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lx-ink-2);
}
/* The goals a thread ties together sit at the foot, level across a row. */
.thread {
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
}
.thread .thread-goals {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.28em;
  padding-top: var(--lx-3);
  border-top: 1px solid var(--lx-rule);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--lx-ink-3);
}
/* Ideas are for later: a quiet list under hairlines, two columns when there is room. */
.ideas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 0 var(--lx-6);
}
.idea {
  gap: 6px;
  padding: var(--lx-4) 0 var(--lx-5);
  background: transparent;
  border-top: 1px solid var(--lx-rule-2);
  border-radius: 0;
  box-shadow: none;
}
.idea h3 {
  font-size: 17px;
}

/* their words */
.wishes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--lx-3);
}
.wish {
  position: relative;
  padding-block: 2px;
  padding-inline: var(--lx-5) 0;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(19px, 5vw, 22px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
  text-wrap: pretty;
}
.wish::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--lx-hand);
}

/* being shaped: the wishes wait, the figure waves; the first step arrives */
.program-shaping {
  --shaping-gap: var(--lx-6);
  --shaping-move: 560ms;
  padding: var(--lx-3) 0 var(--lx-4);
}
/* Margins, not a grid gap: the first step's place opens from nothing. */
.program-shaping > :not(:first-child):not(.first-step) {
  margin-top: var(--shaping-gap);
}
.program-shaping > button {
  display: flex;
  width: fit-content;
}
.shaping-head {
  display: grid;
  gap: var(--lx-3);
}
.shaping-head > * {
  margin: 0;
}
.program-shaping h1 {
  transition:
    font-size var(--shaping-move) var(--lx-ease),
    letter-spacing var(--shaping-move) var(--lx-ease);
}
.shaping-lede {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(19px, 5vw, 22px);
  line-height: 1.38;
  color: var(--lx-ink-2);
  max-width: 30em;
  transition: font-size var(--shaping-move) var(--lx-ease);
}
.shaping-words {
  display: grid;
  gap: var(--lx-3);
  padding: var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e1);
}
.shaping-words > .lx-kicker {
  margin: 0;
}
/* Their words are read one after another while the program is shaped. */
.wishes.is-shaping .wish {
  animation: lx-read 2.8s var(--lx-ease) calc(var(--i, 0) * 0.45s) infinite
    alternate both;
}
@keyframes lx-read {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
/* Once the first step is in, the header steps back and the step leads. */
.program-shaping[data-first] h1 {
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.program-shaping[data-first] .shaping-lede {
  font-size: clamp(17px, 4.6vw, 19px);
}
.program-shaping[data-first] .wishes.is-shaping .wish {
  animation: none;
}
.first-step {
  display: grid;
  grid-template-rows: 1fr;
}
/* Room inside the clip for the card's shadow; the margins give it back. */
.first-step-clip {
  min-height: 0;
  overflow: hidden;
  padding: 2px var(--lx-4) var(--lx-8);
  margin: -2px calc(var(--lx-4) * -1) calc(var(--lx-8) * -1);
}
.first-step-card {
  margin-top: var(--shaping-gap);
}
.program-shaping[data-first="arriving"] .first-step {
  animation: lx-unfold 640ms var(--lx-ease) both;
}
.program-shaping[data-first="arriving"] .first-step-card {
  animation:
    lx-first-move 760ms var(--lx-settle) 40ms both,
    lx-fade-in 360ms var(--lx-ease) 40ms both;
}
.program-shaping[data-first="arriving"] .first-step-card > * {
  animation: lx-lift-in 520ms var(--lx-ease) 240ms both;
}
.program-shaping[data-first="arriving"] .first-step-card > :nth-child(2) {
  animation-delay: 310ms;
}
.program-shaping[data-first="arriving"] .first-step-card > :nth-child(3) {
  animation-delay: 380ms;
}
.program-shaping[data-first="arriving"] .first-step-card > :nth-child(4) {
  animation-delay: 450ms;
}
.program-shaping[data-first="arriving"] .first-step-card > :nth-child(n + 5) {
  animation-delay: 520ms;
}
.program-shaping[data-first="arriving"] .shaping-lede,
.shaping-lede[data-arrival] {
  animation: lx-fade-in 700ms var(--lx-ease) both;
}
@keyframes lx-unfold {
  from {
    grid-template-rows: 0fr;
  }
  to {
    grid-template-rows: 1fr;
  }
}
@keyframes lx-first-move {
  from {
    transform: translateY(22px) scale(0.965);
  }
  to {
    transform: none;
  }
}
@keyframes lx-lift-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lx-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.first-step-card .today-row {
  margin-top: var(--lx-1);
  min-height: 48px;
}
/* Drawn while they watch: Start takes the sign's place with a small spring. */
.first-step-foot[data-arrival="opened"] .step-start {
  animation:
    lx-start-pop 560ms var(--lx-spring) both,
    lx-fade-in 260ms var(--lx-ease) both;
}
@keyframes lx-start-pop {
  from {
    transform: scale(0.82);
  }
  to {
    transform: none;
  }
}
.shaping-note,
.preparing-note {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lx-ink-3);
  margin: 0;
}
.shaping-note:empty {
  display: none;
}
.preparing > button {
  justify-self: start;
}
.cheer-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: var(--lx-2);
  border-radius: 15px;
  box-shadow: var(--lx-e1);
  transition:
    width var(--shaping-move) var(--lx-ease),
    height var(--shaping-move) var(--lx-ease),
    border-radius var(--shaping-move) var(--lx-ease),
    margin var(--shaping-move) var(--lx-ease);
}
.program-shaping[data-first] .cheer-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin-bottom: 0;
}
.cheer-plate {
  fill: var(--lx-terra);
}
.cheer-arm {
  fill: var(--lx-sheet);
  transform-box: view-box;
}
.cheer-arm--left {
  transform-origin: 39px 72px;
  transform: rotate(-30deg);
}
.cheer-arm--right {
  transform-origin: 89px 72px;
  transform: rotate(30deg);
}
.cheer-head {
  fill: var(--lx-sheet-ink);
}
.program-shaping[data-state="building"] .cheer-arm--left,
.program-shaping[data-state="rebuilding"] .cheer-arm--left {
  animation: lx-wave-left 1.6s var(--lx-ease) infinite alternate;
}
.program-shaping[data-state="building"] .cheer-arm--right,
.program-shaping[data-state="rebuilding"] .cheer-arm--right {
  animation: lx-wave-right 1.6s var(--lx-ease) 0.8s infinite alternate;
}
@keyframes lx-wave-left {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(-12deg);
  }
}
@keyframes lx-wave-right {
  from {
    transform: rotate(30deg);
  }
  to {
    transform: rotate(12deg);
  }
}

/* The teacher's coral pencil: drawn on a sign and on the sketch alike. */
.pencil-body {
  fill: var(--lx-terra);
}
.pencil-band {
  fill: var(--lx-sheet-soft-ink);
}
.pencil-eraser {
  fill: var(--lx-key-marked);
}
.pencil-wood {
  fill: var(--lx-wood);
}
.pencil-lead {
  fill: var(--lx-sheet-ink);
}

/* "Being drawn right now": a line the pencil writes, over and over. */
.drawing-sign {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--lx-ink-2);
  white-space: nowrap;
}
.drawing-sign-mark {
  flex: none;
  width: 34px;
  height: 20px;
  overflow: visible;
}
.drawing-sign .pencil-band {
  fill: var(--lx-ink-2);
}
.drawing-sign .pencil-lead {
  fill: var(--lx-ink);
}
.drawing-sign-trail {
  fill: none;
  stroke: var(--lx-ink-3);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 110;
  stroke-dashoffset: 0;
  animation: lx-sign-trail 2.8s ease-in-out infinite;
}
.drawing-sign-pencil {
  transform: translate(24.6px, 14px);
  animation: lx-sign-pencil 2.8s ease-in-out infinite;
}
/* The pencil's point rides the line: the same stops and easing as the trail. */
@keyframes lx-sign-trail {
  0% {
    stroke-dashoffset: 101;
    opacity: 1;
  }
  10.7% {
    stroke-dashoffset: 83.3;
  }
  21.3% {
    stroke-dashoffset: 66.7;
  }
  32% {
    stroke-dashoffset: 50;
  }
  42.7% {
    stroke-dashoffset: 33.3;
  }
  53.3% {
    stroke-dashoffset: 16.7;
  }
  64%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes lx-sign-pencil {
  0% {
    transform: translate(3px, 14px);
  }
  10.7% {
    transform: translate(6.6px, 11px);
  }
  21.3% {
    transform: translate(10.2px, 14px);
  }
  32% {
    transform: translate(13.8px, 17px);
  }
  42.7% {
    transform: translate(17.4px, 14px);
  }
  53.3% {
    transform: translate(21px, 11px);
  }
  64%,
  80% {
    transform: translate(24.6px, 14px);
  }
  100% {
    transform: translate(3px, 14px);
  }
}

/* a practice being drawn: the step, the sketch, what you'll use */
.preparing {
  display: grid;
  gap: var(--lx-4);
  padding: var(--lx-2) 0 var(--lx-4);
}
.preparing > h1,
.preparing > .step-goal {
  margin: 0;
}
.preparing-focus {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(18px, 4.8vw, 20px);
  line-height: 1.42;
  letter-spacing: -0.006em;
  color: var(--lx-ink-2);
  max-width: 34em;
  margin: 0;
}
.sketch-stage {
  display: grid;
  place-items: center;
  margin-top: var(--lx-2);
  padding: var(--lx-5) var(--lx-4) var(--lx-4);
  border-radius: var(--lx-radius-xl);
  background: var(--lx-well);
  box-shadow: inset 0 0 0 1px var(--lx-rule);
}
.sketch {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  overflow: visible;
}
.sketch-sheet {
  fill: var(--lx-sheet);
  stroke: var(--lx-sheet-hairline);
  stroke-width: 0.6;
}
.sketch-sheet--under {
  fill: var(--lx-sheet-tint);
}
.sketch-shadow {
  flood-color: var(--lx-sheet-ink);
  flood-opacity: 0.16;
}
.sketch-kicker {
  fill: none;
  stroke: var(--lx-sheet-accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.sketch-num {
  font: 600 9.5px var(--lx-sans);
  letter-spacing: 0.16em;
  fill: var(--lx-sheet-accent-ink);
}
.sketch-line {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100 110;
  stroke-dashoffset: 0;
}
.sketch-title {
  stroke: var(--lx-sheet-ink);
  stroke-width: 7;
}
.sketch-text {
  stroke: var(--lx-sheet-soft-ink);
  stroke-width: 2.6;
  stroke-opacity: 0.45;
}
.sketch-step {
  transform-box: fill-box;
  transform-origin: center;
}
.sketch-step circle {
  fill: var(--lx-sheet);
  stroke: var(--lx-sheet-soft-ink);
  stroke-width: 1.3;
}
.sketch-step text {
  font: italic 400 11.5px var(--lx-serif);
  fill: var(--lx-sheet-ink);
  text-anchor: middle;
}
.sketch-dial circle {
  fill: none;
  stroke: var(--lx-sheet-hairline);
  stroke-width: 2;
}
.sketch-dial path {
  fill: none;
  stroke: var(--lx-sheet-soft-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-opacity: 0.55;
}
.sketch-arc {
  fill: none;
  stroke: var(--lx-sheet-accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 100 110;
  stroke-dashoffset: 34;
}
.sketch-pencil {
  transform: translate(300px, 52px);
}
/* One 8.4-second sheet: the pencil draws, lifts, the sketch rests, then
   fades for the next. Each part keeps the pencil's stops and easing. */
.sketch-ink {
  animation: lx-sk-ink 8.4s infinite;
}
.sketch-kicker,
.sketch-num {
  animation: lx-sk-kicker 8.4s infinite;
}
.sketch-title {
  animation: lx-sk-title 8.4s infinite;
}
.sketch-text--1 {
  animation: lx-sk-text-1 8.4s infinite;
}
.sketch-text--2 {
  animation: lx-sk-text-2 8.4s infinite;
}
.sketch-step--1 {
  animation: lx-sk-step-1 8.4s infinite;
}
.sketch-text--3 {
  animation: lx-sk-text-3 8.4s infinite;
}
.sketch-step--2 {
  animation: lx-sk-step-2 8.4s infinite;
}
.sketch-text--4 {
  animation: lx-sk-text-4 8.4s infinite;
}
.sketch-dial {
  animation: lx-sk-dial 8.4s infinite;
}
.sketch-arc {
  animation: lx-sk-arc 8.4s infinite;
}
.sketch-pencil {
  animation: lx-sk-pencil 8.4s infinite;
}
.preparing[data-state="stopped"] .sketch,
.preparing[data-state="stopped"] .sketch * {
  animation: none;
}
@keyframes lx-sk-ink {
  0%,
  90% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes lx-sk-kicker {
  0%,
  1% {
    opacity: 0;
  }
  5%,
  100% {
    opacity: 1;
  }
}
@keyframes lx-sk-title {
  0%,
  5% {
    stroke-dashoffset: 101;
  }
  17%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes lx-sk-text-1 {
  0%,
  20% {
    stroke-dashoffset: 101;
  }
  28%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes lx-sk-text-2 {
  0%,
  30% {
    stroke-dashoffset: 101;
  }
  36%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes lx-sk-step-1 {
  0%,
  39% {
    opacity: 0;
    transform: scale(0.4);
  }
  42%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes lx-sk-text-3 {
  0%,
  43% {
    stroke-dashoffset: 101;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes lx-sk-step-2 {
  0%,
  53% {
    opacity: 0;
    transform: scale(0.4);
  }
  56%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes lx-sk-text-4 {
  0%,
  57% {
    stroke-dashoffset: 101;
  }
  63%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes lx-sk-dial {
  0%,
  62% {
    opacity: 0;
  }
  67%,
  100% {
    opacity: 1;
  }
}
@keyframes lx-sk-arc {
  0%,
  67% {
    stroke-dashoffset: 101;
    animation-timing-function: linear;
  }
  79%,
  100% {
    stroke-dashoffset: 34;
  }
}
@keyframes lx-sk-pencil {
  0% {
    transform: translate(300px, 52px);
  }
  5% {
    transform: translate(60px, 66px);
  }
  17% {
    transform: translate(204px, 66px);
  }
  20% {
    transform: translate(60px, 86px);
  }
  28% {
    transform: translate(286px, 86px);
  }
  30% {
    transform: translate(60px, 98px);
  }
  36% {
    transform: translate(248px, 98px);
  }
  39%,
  42% {
    transform: translate(68px, 126px);
  }
  43% {
    transform: translate(86px, 126px);
  }
  50% {
    transform: translate(196px, 126px);
  }
  53%,
  56% {
    transform: translate(68px, 154px);
  }
  57% {
    transform: translate(86px, 154px);
  }
  63% {
    transform: translate(176px, 154px);
  }
  67% {
    transform: translate(258px, 116px);
    animation-timing-function: linear;
  }
  68.71% {
    transform: translate(271.42px, 120.1px);
    animation-timing-function: linear;
  }
  70.43% {
    transform: translate(280.25px, 131.01px);
    animation-timing-function: linear;
  }
  72.14% {
    transform: translate(281.48px, 144.99px);
    animation-timing-function: linear;
  }
  73.86% {
    transform: translate(274.67px, 157.26px);
    animation-timing-function: linear;
  }
  75.57% {
    transform: translate(262.17px, 163.64px);
    animation-timing-function: linear;
  }
  77.29% {
    transform: translate(248.24px, 161.93px);
    animation-timing-function: linear;
  }
  79% {
    transform: translate(237.65px, 152.72px);
  }
  86%,
  100% {
    transform: translate(300px, 52px);
  }
}
.preparing-ready {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-3) var(--lx-6);
  margin: 0;
  padding-top: var(--lx-4);
  border-top: 1px solid var(--lx-rule-2);
}
.preparing-ready-item {
  display: grid;
  gap: 4px;
}
.preparing-ready-item:first-child:not(:last-child) {
  flex: 1 1 14em;
}
.preparing-ready dt {
  font-family: var(--lx-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--lx-ink-3);
}
.preparing-ready dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--lx-ink);
  font-variant-numeric: tabular-nums;
}

/* the step a practice belongs to */
.step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--lx-3);
  margin: 0 0 var(--lx-2);
}
.step-head .lesson-meta {
  margin: 0;
}
.step-head .step-back {
  min-height: 36px;
  font-size: 14px;
}
.step-head + h1,
.step-head + h1.compact {
  margin-top: var(--lx-2);
}
h1 + .step-goal {
  margin: 0 0 var(--lx-4);
}

/* no program yet */
.home-invite {
  display: grid;
  gap: var(--lx-4);
  padding: var(--lx-6) var(--lx-5) var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e2);
}
.home-invite > * {
  margin: 0;
}
.home-invite .hero-mark {
  margin-bottom: 0;
}
.library .home-invite h2.invite-title,
.invite-title {
  font-family: var(--lx-sans);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--lx-ink);
  margin: 0;
}
.home-invite.is-short {
  padding: var(--lx-5);
  box-shadow: var(--lx-e1);
}
.library .home-invite.is-short h2.invite-title {
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.022em;
}
.invite-lede {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(19px, 5vw, 21px);
  line-height: 1.4;
  color: var(--lx-ink-2);
  max-width: 30em;
}
.invite-kicker {
  margin: var(--lx-2) 0 calc(var(--lx-2) * -1) !important;
}

/* ------------------------------------------------------------------ *
   Landing and sign-in
 * ------------------------------------------------------------------ */
.hero {
  display: grid;
  gap: var(--lx-3);
  padding: var(--lx-7) 0 var(--lx-6);
}
.hero-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: var(--lx-e1);
  margin-bottom: var(--lx-4);
}
.hero-kicker {
  color: var(--lx-terra-ink);
  margin: 0;
}
.hero h1 {
  font-size: clamp(44px, 12.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.036em;
  margin: 0;
}
.hero-lede {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(20px, 5.4vw, 24px);
  line-height: 1.38;
  color: var(--lx-ink-2);
  max-width: 28em;
  margin: var(--lx-2) 0 0;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--lx-radius-pill);
  font: 560 16px/1 var(--lx-sans);
  text-decoration: none;
}
.cta:active {
  transform: scale(0.98);
}
.start-card {
  display: grid;
  gap: var(--lx-4);
  padding: var(--lx-5);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e2);
}
.start-kicker {
  color: var(--lx-terra-ink);
  margin: 0;
}
.start-prompt {
  margin: 0;
  color: var(--lx-ink-2);
}
.example-line {
  position: relative;
  margin: 0;
  padding-block: var(--lx-2);
  padding-inline: var(--lx-5) 0;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(21px, 5.8vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--lx-ink);
}
.example-line::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--lx-terra);
}
.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-2) var(--lx-3);
  align-items: center;
}
.start-actions .cta {
  flex: 1 1 220px;
}
.connect-step {
  display: grid;
  gap: var(--lx-3);
  padding-top: var(--lx-4);
  border-top: 1px solid var(--lx-rule);
}
.connect-text {
  margin: 0;
  font-size: 14.5px;
  color: var(--lx-ink-2);
}
.connect-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-2);
  align-items: center;
}
.connect-address {
  flex: 1 1 220px;
  font:
    500 13.5px/1.4 ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  padding: 12px 14px;
  border-radius: var(--lx-radius-m);
  background: var(--lx-well);
  color: var(--lx-ink);
  overflow-wrap: anywhere;
}
.signin-line {
  margin: var(--lx-5) 0 0;
  font-size: 14px;
  color: var(--lx-ink-3);
}
.signin-line a {
  color: var(--lx-ink-2);
}

/* ------------------------------------------------------------------ *
   Instruments. The "do" of a block sits on a raised plate.
 * ------------------------------------------------------------------ */
.lx-do {
  display: grid;
  gap: var(--lx-4);
  padding: var(--lx-5) var(--lx-4) var(--lx-4);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e1), var(--lx-lift);
}
.lx-do > * {
  min-width: 0;
}
.lx-do__prompt {
  font-size: 16.5px;
  color: var(--lx-ink);
}
.lx-do--moves,
.lx-do--play {
  padding-top: var(--lx-4);
}

/* look for: quiet checklist chips */
.lx-lookfor {
  display: grid;
  gap: var(--lx-2);
}
.lx-lookfor .lx-kicker {
  margin: 0;
}
.lx-lookfor__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-2);
}
.lx-lookfor__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding-block: 8px;
  padding-inline: 10px 16px;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--lx-ink-2);
  border-radius: var(--lx-radius-pill);
  box-shadow: inset 0 0 0 1px var(--lx-rule-2);
  cursor: pointer;
  transition:
    background-color var(--lx-t2) var(--lx-ease),
    color var(--lx-t2) var(--lx-ease),
    box-shadow var(--lx-t2) var(--lx-ease);
}
.lx-lookfor__item:hover {
  box-shadow: inset 0 0 0 1px var(--lx-rule-3);
}
.lx-lookfor__item input,
.lx-step__row > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lx-card);
  box-shadow: inset 0 0 0 1.5px var(--lx-rule-3);
  cursor: pointer;
  transition:
    background-color var(--lx-t2) var(--lx-ease),
    box-shadow var(--lx-t2) var(--lx-ease),
    transform var(--lx-t2) var(--lx-spring);
}
.lx-lookfor__item input:checked {
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l2.9 2.8 6-6.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 20px no-repeat,
    var(--lx-moss);
  box-shadow: none;
  transform: scale(1.06);
}
.lx-lookfor__item:has(input:checked) {
  background: var(--lx-moss-wash);
  color: var(--lx-ink);
  box-shadow: none;
}
.lx-lookfor__item:has(input:focus-visible) {
  outline: 2px solid var(--lx-focus);
  outline-offset: 2px;
}
.lx-lookfor__item input:focus-visible {
  outline: none;
}

/* keep: the save row at the foot of every instrument */
.lx-keep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-2) var(--lx-4);
  padding-top: var(--lx-4);
  border-top: 1px solid var(--lx-rule);
}
.lx-keep__button {
  min-height: 48px;
  padding: 0 24px;
}
.lx-keep[data-state="saving"] .lx-keep__button {
  opacity: 0.75;
}
.lx-keep[data-state="saving"] .lx-keep__status::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: start;
  animation: lx-dots 1.2s steps(4) infinite;
}
@keyframes lx-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}
.lx-keep[data-state="kept"] .lx-keep__button,
.lx-keep[data-state="kept"] .lx-keep__button:disabled {
  opacity: 1;
  color: var(--lx-moss);
  background: var(--lx-moss-wash);
  box-shadow: none;
}
.lx-keep__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lx-ink-3);
  margin: 0;
  flex: 1 1 200px;
}
.lx-keep__status:empty {
  display: none;
}
.lx-keep[data-state="kept"] .lx-keep__status {
  color: var(--lx-ink);
}
.lx-keep[data-state="error"] .lx-keep__status,
.lx-keep__status[data-tone="error"] {
  color: var(--lx-ochre);
}

/* segmented control (compare modes) */
.lx-segmented {
  display: inline-flex;
  justify-self: start;
  padding: 3px;
  gap: 2px;
  border-radius: var(--lx-radius-pill);
  background: var(--lx-well);
  box-shadow: var(--lx-inset);
}
.lx-segmented__option {
  min-height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--lx-ink-2);
}
.lx-segmented__option[aria-pressed="true"] {
  background: var(--lx-card);
  color: var(--lx-ink);
  box-shadow: var(--lx-e1);
}

/* number fields: a well with the unit as a suffix */
.lx-number {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--lx-radius-m);
  background: var(--lx-card);
  box-shadow: var(--lx-inset);
  transition: box-shadow var(--lx-t1) var(--lx-ease);
  cursor: text;
}
.lx-number:focus-within {
  box-shadow:
    inset 0 0 0 1.5px var(--lx-hand),
    0 0 0 4px var(--lx-hand-wash);
}
.lx-number input.lx-number__input,
.lx-number input.lx-number__input:focus {
  width: 5.5em;
  min-height: 50px;
  padding: 0;
  font: 450 22px/1 var(--lx-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.lx-number__unit {
  font-size: 15px;
  font-weight: 500;
  color: var(--lx-ink-3);
}
.lx-input__formula,
.lx-cards__answer,
.lx-input__text,
.lx-compare__note {
  width: 100%;
}
.lx-input__text,
.lx-compare__note {
  min-height: 96px;
}
.lx-input__formula {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* input: choice / number / text / formula */
.lx-input {
  display: grid;
  gap: var(--lx-4);
  margin: 0;
}
.lx-input__prompt {
  font-family: var(--lx-serif);
  font-size: clamp(20px, 5.4vw, 23px);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}
.lx-input__prompt em {
  font-size: 1em;
}
.lx-input__choices {
  counter-reset: lx-choice;
  display: grid;
  gap: var(--lx-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.lx-choice {
  counter-increment: lx-choice;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding-block: 10px;
  padding-inline: 12px 16px;
  border-radius: var(--lx-radius-l);
  background: var(--lx-card);
  box-shadow: inset 0 0 0 1px var(--lx-rule-2);
  font-size: 16px;
  color: var(--lx-ink);
  cursor: pointer;
  transition:
    box-shadow var(--lx-t1) var(--lx-ease),
    background-color var(--lx-t1) var(--lx-ease),
    transform var(--lx-t1) var(--lx-spring);
}
.lx-choice:hover {
  box-shadow: inset 0 0 0 1px var(--lx-rule-3);
}
.lx-choice:active {
  transform: scale(0.99);
}
.lx-choice::before {
  content: counter(lx-choice, upper-alpha);
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--lx-ink-2);
  box-shadow: inset 0 0 0 1px var(--lx-rule-3);
  transition:
    background-color var(--lx-t1) var(--lx-ease),
    color var(--lx-t1) var(--lx-ease);
}
.lx-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lx-choice:has(input:checked) {
  box-shadow: inset 0 0 0 1.5px var(--lx-ink);
}
.lx-choice:has(input:checked)::before {
  background: var(--lx-ink);
  color: var(--lx-paper);
  box-shadow: none;
}
.lx-choice:has(input:focus-visible) {
  outline: 2px solid var(--lx-focus);
  outline-offset: 2px;
}
.lx-choice[data-state="correct"],
.lx-choice[data-state="correct"]:has(input:checked) {
  background: var(--lx-moss-wash);
  box-shadow: inset 0 0 0 1.5px var(--lx-moss);
}
.lx-choice[data-state="correct"]::before,
.lx-choice[data-state="correct"]:has(input:checked)::before {
  content: "";
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16.6l4.2 4L22.4 12' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 32px no-repeat,
    var(--lx-moss);
  box-shadow: none;
}
.lx-choice[data-state="off"],
.lx-choice[data-state="off"]:has(input:checked) {
  background: var(--lx-ochre-wash);
  box-shadow: inset 0 0 0 1px var(--lx-ochre);
}
.lx-choice[data-state="off"]::before,
.lx-choice[data-state="off"]:has(input:checked)::before {
  background: var(--lx-ochre);
  color: var(--lx-on-terra);
  box-shadow: none;
}
.lx-choice__text {
  flex: 1;
}
.lx-input--number .lx-number {
  justify-self: start;
}
.lx-input--number .lx-number input.lx-number__input {
  font-size: 30px;
  font-weight: 350;
}
.lx-input__preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: var(--lx-5) var(--lx-4) var(--lx-4);
  border-radius: var(--lx-radius-m);
  background: var(--lx-sheet);
  color: var(--lx-sheet-ink);
  box-shadow: var(--lx-sheet-shadow);
  font-size: 1.15em;
  overflow-x: auto;
}
.lx-input__preview::before {
  content: attr(data-label);
  position: absolute;
  top: 10px;
  inset-inline-start: 14px;
  font: 600 10px/1 var(--lx-sans);
  letter-spacing: 0.16em;
  color: var(--lx-sheet-soft-ink);
  opacity: 0.7;
}
.lx-input__preview:empty {
  display: none;
}
.lx-input__preview .katex {
  color: var(--lx-sheet-ink);
}
.lx-input__explanation {
  padding: var(--lx-3) var(--lx-4);
  border-radius: var(--lx-radius-m);
  background: var(--lx-well);
  font-size: 15px;
  color: var(--lx-ink-2);
}

/* ------------------------------------------------------------------ *
   Steps: a vertical timeline with drawn checks
 * ------------------------------------------------------------------ */
.lx-steps {
  display: grid;
  gap: var(--lx-4);
}
.lx-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}
.lx-step {
  position: relative;
  padding: 0 0 var(--lx-5) 0;
}
.lx-step:last-child {
  padding-bottom: var(--lx-1);
}
.lx-step::before {
  content: "";
  position: absolute;
  inset-inline-start: 15.5px;
  top: 38px;
  bottom: 4px;
  width: 1px;
  background: var(--lx-rule-2);
  transition: background-color var(--lx-t3) var(--lx-ease);
}
.lx-step:last-child::before {
  display: none;
}
.lx-step[data-state="done"]::before {
  background: var(--lx-ink-3);
}
.lx-step__row {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}
.lx-step__row > input[type="checkbox"] {
  width: 32px;
  height: 32px;
  margin: 0;
  background: var(--lx-card);
  box-shadow: inset 0 0 0 1.5px var(--lx-rule-3);
}
.lx-step__row > input[type="checkbox"]:hover {
  box-shadow: inset 0 0 0 1.5px var(--lx-ink-3);
}
.lx-step__row > input[type="checkbox"]:checked {
  background: var(--lx-ink);
  box-shadow: none;
}
.lx-step__label {
  display: block;
  padding-top: 4px;
  cursor: pointer;
}
.lx-step__number {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--lx-ink-2);
  pointer-events: none;
  transition: color var(--lx-t1) var(--lx-ease);
}
.lx-step__number::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16.6l4.2 4L22.4 12' fill='none' stroke='%23fff8ec' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 32px no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--lx-t3) var(--lx-ease);
}
.lx-step[data-state="done"] .lx-step__number {
  color: transparent;
}
.lx-step[data-state="done"] .lx-step__number::after {
  clip-path: inset(0 0 0 0);
}
.lx-step__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--lx-ink);
  transition: color var(--lx-t2) var(--lx-ease);
}
.lx-step[data-state="done"] .lx-step__text {
  color: var(--lx-ink-3);
}
.lx-step__check {
  margin-block: 6px 0;
  margin-inline: 46px 0;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--lx-ink-3);
}
.lx-step__check::before {
  content: attr(data-label) " ";
  font-family: var(--lx-sans);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-terra-ink);
  margin-inline-end: 4px;
}

/* timer: a radial dial with a terracotta arc of the time that is left */
.lx-timer {
  --lx-p: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--lx-4);
  row-gap: var(--lx-2);
  align-items: center;
  margin-block: var(--lx-3) 0;
  margin-inline: 46px 0;
  padding: var(--lx-3);
  border-radius: var(--lx-radius-l);
  background: var(--lx-paper);
  box-shadow: inset 0 0 0 1px var(--lx-rule);
}
.lx-timer__controls {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lx-2);
}
.lx-timer__controls > button:nth-of-type(2) {
  grid-row: 3;
  min-height: 36px;
  padding: 0 12px;
  border-color: transparent;
  color: var(--lx-ink-3);
}
.lx-timer__digits {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  background: var(--lx-card);
  box-shadow: 0 1px 2px rgb(27 31 59 / 0.06);
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 300 23px/1 var(--lx-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink);
}
.lx-timer__digits::before,
.lx-timer__digits::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.lx-timer__digits::before {
  inset: 0;
  background: conic-gradient(
    var(--lx-arc, var(--lx-rule-3)) calc(var(--lx-p) * 1turn),
    var(--lx-well) 0
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 4.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 4.5px)
  );
  transition: background 0.25s linear;
}
.lx-timer__digits::after {
  inset: 9px;
  background: repeating-conic-gradient(
    var(--lx-rule-3) 0 1.2deg,
    transparent 1.2deg 30deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 5px)
  );
}
.lx-timer[data-state="running"] {
  --lx-arc: var(--lx-terra);
}
.lx-timer[data-state="running"] .lx-timer__digits {
  color: var(--lx-ink);
}
.lx-timer[data-state="paused"] {
  --lx-arc: var(--lx-ochre);
}
.lx-timer[data-state="paused"] .lx-timer__digits {
  animation: lx-breathe 1.1s var(--lx-ease) infinite alternate;
}
.lx-timer[data-state="done"] {
  --lx-arc: var(--lx-moss);
  --lx-p: 1;
  background: var(--lx-moss-wash);
  box-shadow: none;
}
.lx-timer[data-state="done"] .lx-timer__digits {
  color: var(--lx-moss);
  animation: lx-chime 900ms var(--lx-ease) 1;
}
@keyframes lx-chime {
  0% {
    transform: scale(1);
  }
  18% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
.lx-timer__status {
  grid-column: 1 / -1;
  grid-row: 5;
  margin: 0;
  font-size: 13.5px;
  color: var(--lx-ink-3);
}
.lx-timer__status:empty {
  display: none;
}
.lx-timer[data-state="done"] .lx-timer__status {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--lx-moss);
}
.lx-timer[data-state="paused"] .lx-timer__status {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
}

/* ------------------------------------------------------------------ *
   Pulse: tempo readout, beat ring around a drum head, a tuner needle
   for early ← 0 → late, and a timing strip when the take is done.
 * ------------------------------------------------------------------ */
.lx-pulse {
  --lx-hit: var(--lx-terra);
  display: grid;
  justify-items: center;
  gap: var(--lx-3);
  text-align: center;
}
.lx-pulse[data-side="on"] {
  --lx-hit: var(--lx-moss);
}
.lx-pulse[data-side="early"] {
  --lx-hit: var(--lx-slate);
}
.lx-pulse[data-side="late"] {
  --lx-hit: var(--lx-ochre);
}
.lx-pulse > * {
  margin: 0;
}
.lx-pulse__face {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.lx-pulse__face > p {
  margin: 0;
}
.lx-pulse__tempo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}
.lx-pulse__bpm {
  font: 200 clamp(64px, 19vw, 88px) / 0.9 var(--lx-sans);
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink);
}
.lx-pulse__unit {
  font: 600 var(--lx-kicker) / 1 var(--lx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-terra-ink);
}
.lx-pulse__meta {
  font-size: 13.5px;
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
.lx-pulse__stage {
  --n: 4;
  position: relative;
  width: min(100%, 292px);
  aspect-ratio: 1;
  margin: var(--lx-2) 0;
}
.lx-pulse__stage::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--lx-rule-2);
}
.lx-pulse__beats {
  position: absolute;
  inset: 0;
  display: block;
}
/* each beat is a full-size layer turned to its place; the dot rides on top */
.lx-pulse__beat {
  --i: 0;
  position: absolute;
  inset: 0;
  rotate: calc(var(--i) / var(--n) * 1turn);
  pointer-events: none;
}
.lx-pulse__beat::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--lx-rule-3);
  transition:
    background-color var(--lx-t1) var(--lx-ease),
    box-shadow var(--lx-t2) var(--lx-ease),
    scale var(--lx-t1) var(--lx-spring);
}
.lx-pulse__beat--accent::before {
  background: var(--lx-plate);
  box-shadow: inset 0 0 0 2px var(--lx-terra);
}
.lx-pulse__beat[data-state="on"]::before {
  scale: 1.6;
  background: var(--lx-ink);
  box-shadow: 0 0 0 5px var(--lx-rule);
}
.lx-pulse__beat--accent[data-state="on"]::before {
  background: var(--lx-terra);
  box-shadow: 0 0 0 5px var(--lx-terra-wash);
}
.lx-pulse__pad {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  height: 66%;
  min-height: 0;
  margin: 0;
  padding: 0;
  translate: -50% -50%;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 0;
  border-radius: 50%;
  color: var(--lx-ink);
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 66%,
      var(--lx-rule) 66.5% 67%,
      transparent 67.5%
    ),
    radial-gradient(
      circle at 45% 30%,
      var(--lx-skin) 0%,
      var(--lx-skin) 38%,
      var(--lx-skin-edge) 100%
    );
  box-shadow:
    0 0 0 5px var(--lx-hoop),
    0 0 0 6px var(--lx-rule-2),
    inset 0 2px 1px rgb(255 255 255 / 0.6),
    inset 0 -12px 26px rgb(27 31 59 / 0.1),
    0 26px 36px -20px rgb(27 31 59 / 0.5);
  transition:
    transform var(--lx-t1) var(--lx-spring),
    box-shadow var(--lx-t1) var(--lx-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lx-pulse__pad:hover {
  border: 0;
}
.lx-pulse__pad::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid var(--lx-hit);
  opacity: 0;
  transform: scale(1.32);
  transition:
    transform 460ms cubic-bezier(0.1, 0.7, 0.3, 1),
    opacity 460ms ease-out;
  pointer-events: none;
}
.lx-pulse__pad:active,
.lx-pulse__pad[data-flash="hit"] {
  transform: scale(0.965);
  box-shadow:
    0 0 0 5px var(--lx-hoop),
    0 0 0 6px var(--lx-rule-2),
    inset 0 6px 14px rgb(27 31 59 / 0.16),
    inset 0 -4px 10px rgb(27 31 59 / 0.06),
    0 14px 22px -16px rgb(27 31 59 / 0.5);
  transition-duration: 40ms;
}
.lx-pulse__pad[data-flash="hit"]::after {
  opacity: 0.85;
  transform: scale(1);
  transition: none;
}
.lx-pulse__pad--listen {
  pointer-events: none;
}
.lx-pulse__pad-word {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}
.lx-pulse__pad-hint {
  font: 600 10px/1.2 var(--lx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-ink-3);
}
.lx-pulse__pad-hint:empty {
  display: none;
}
.lx-pulse[data-state="count-in"] .lx-pulse__pad-word {
  font: 200 68px / 0.9 var(--lx-sans);
  font-style: normal;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-terra);
}
.lx-pulse[data-state="count-in"] .lx-pulse__pad-hint {
  font-size: 0;
}
.lx-pulse[data-state="count-in"] .lx-pulse__pad-hint::before {
  content: attr(data-count-in);
  font-size: 10px;
}
.lx-pulse[data-state="running"] .lx-pulse__pad-hint,
.lx-pulse[data-state="count-in"] .lx-pulse__pad-hint {
  color: var(--lx-terra-ink);
}

/* the tuner: an arc of ticks, a moss band for "on time", one needle */
.lx-pulse__meter {
  --R: 230px;
  --lx-pos: 0;
  position: relative;
  width: min(100%, 300px);
  height: 86px;
  overflow: hidden;
  margin-top: var(--lx-1);
}
.lx-pulse__meter::before,
.lx-pulse__zone {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  margin-left: calc(var(--R) * -1);
  border-radius: 50%;
}
.lx-pulse__meter::before {
  background: repeating-conic-gradient(
    from -40.25deg,
    var(--lx-rule-3) 0 0.5deg,
    transparent 0.5deg 4deg
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 9px), #000 0),
    conic-gradient(from -40.5deg, #000 0 81deg, transparent 0);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 9px), #000 0)
      intersect,
    conic-gradient(from -40.5deg, #000 0 81deg, transparent 0);
}
.lx-pulse__zone {
  display: block;
  background: conic-gradient(
    from -20deg,
    var(--lx-moss-wash) 0 40deg,
    transparent 0
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 30px),
    #000 calc(100% - 30px) calc(100% - 12px),
    transparent 0
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 30px),
    #000 calc(100% - 30px) calc(100% - 12px),
    transparent 0
  );
}
.lx-pulse__meter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--lx-ink-2);
}
.lx-pulse__needle {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 2px;
  height: var(--R);
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--lx-needle, var(--lx-ink)) 0 52px,
    transparent 80px
  );
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--lx-pos) * 40deg));
  transition:
    transform var(--lx-t2) var(--lx-spring),
    opacity var(--lx-t2) var(--lx-ease);
  opacity: 0.28;
}
.lx-pulse__needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--lx-needle, var(--lx-ink));
  box-shadow: 0 0 0 3px var(--lx-plate);
}
.lx-pulse[data-side] .lx-pulse__needle {
  opacity: 1;
}
.lx-pulse[data-side="on"] {
  --lx-needle: var(--lx-moss);
}
.lx-pulse[data-side="early"] {
  --lx-needle: var(--lx-slate);
}
.lx-pulse[data-side="late"] {
  --lx-needle: var(--lx-ochre);
}
.lx-pulse__early,
.lx-pulse__late {
  position: absolute;
  bottom: 4px;
  font: 600 10px/1 var(--lx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-ink-3);
}
.lx-pulse__early {
  left: 6px;
}
.lx-pulse__late {
  right: 6px;
}
.lx-pulse__offset {
  min-height: 1.4em;
  font: 500 17px/1.3 var(--lx-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink-2);
}
.lx-pulse__offset[data-state="in"] {
  color: var(--lx-moss);
}
.lx-pulse__offset[data-state="out"] {
  color: var(--lx-needle, var(--lx-ochre));
}

/* the timing strip: one tick per tap, the moss band is "within tolerance" */
.lx-pulse__strip {
  position: relative;
  width: 100%;
  height: 76px;
  margin-top: var(--lx-2);
  border-radius: var(--lx-radius-m);
  background:
    linear-gradient(
      to bottom,
      transparent calc(25% - 0.5px),
      var(--lx-moss-wash) calc(25% - 0.5px) calc(75% + 0.5px),
      transparent 0
    ),
    var(--lx-card);
  box-shadow: var(--lx-inset);
  overflow: hidden;
}
.lx-pulse__strip::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  background: var(--lx-rule-3);
}
.lx-pulse__strip::after {
  content: attr(data-early);
  position: absolute;
  left: 10px;
  top: 6px;
  font: 600 9px/1 var(--lx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-ink-3);
}
.lx-pulse__tick {
  --t: 0;
  --o: 0;
  position: absolute;
  left: calc(10px + (100% - 20px) * var(--t));
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--lx-moss);
  top: calc(50% + min(0px, var(--o) * 38px));
  height: max(3px, calc(abs(var(--o)) * 38px));
  animation: lx-rise var(--lx-t3) var(--lx-ease) both;
  animation-delay: calc(var(--t) * 360ms);
}
@supports not (height: abs(1px)) {
  .lx-pulse__tick {
    height: max(3px, calc(max(var(--o), var(--o) * -1) * 38px));
  }
}
.lx-pulse__tick[data-state="early"] {
  background: var(--lx-slate);
}
.lx-pulse__tick[data-state="late"] {
  background: var(--lx-ochre);
}
@keyframes lx-rise {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
}
.lx-pulse__tally {
  font-size: 14px;
  font-weight: 500;
  color: var(--lx-ink-2);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.lx-pulse__tally:empty {
  display: none;
}
.lx-pulse__actions {
  justify-content: center;
}
.lx-pulse__actions .primary {
  min-width: 132px;
  min-height: 52px;
  font-size: 16px;
}
.lx-pulse[data-state="running"] .lx-pulse__actions .primary,
.lx-pulse[data-state="count-in"] .lx-pulse__actions .primary {
  background: var(--lx-ink);
  color: var(--lx-paper);
  box-shadow: none;
}
.lx-pulse[data-state="done"] .lx-pulse__actions .primary {
  color: var(--lx-ink);
  background: var(--lx-card);
  border: 1px solid var(--lx-rule-2);
  box-shadow:
    var(--lx-lift),
    0 1px 2px rgb(27 31 59 / 0.05);
}
.lx-pulse > .quiet.small:empty {
  display: none;
}
.lx-pulse .lx-keep {
  width: 100%;
  justify-content: center;
}

/* ------------------------------------------------------------------ *
   Measure and count
 * ------------------------------------------------------------------ */
.lx-measure {
  display: grid;
  gap: var(--lx-4);
}
.lx-measure__fields {
  display: grid;
  margin-top: calc(var(--lx-3) * -1);
}
.lx-measure__field:last-child {
  border-bottom: 0;
}
.lx-measure__field {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label input"
    "hint input";
  align-items: center;
  column-gap: var(--lx-4);
  row-gap: 2px;
  padding: var(--lx-3) 0;
  border-bottom: 1px solid var(--lx-rule);
}
.lx-measure__label {
  grid-area: label;
  align-self: end;
  font-size: 16px;
  font-weight: 500;
  color: var(--lx-ink);
}
.lx-measure__hint {
  grid-area: hint;
  align-self: start;
  font-size: 13px;
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
.lx-measure__field .lx-number {
  grid-area: input;
  min-height: 48px;
  padding: 0 14px;
}
.lx-measure__field .lx-number input.lx-number__input {
  width: 3.6em;
  min-height: 46px;
  text-align: end;
  font-size: 21px;
}
.lx-measure__field .lx-number__unit {
  min-width: 1.4em;
}

.lx-count {
  --lx-p: 0;
  display: grid;
  justify-items: center;
  gap: var(--lx-4);
  text-align: center;
}
.lx-count__label {
  color: var(--lx-ink-3);
  margin: 0;
}
.lx-count__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3.2vw, 28px);
}
.lx-count__value {
  position: relative;
  display: grid;
  place-content: center;
  width: clamp(140px, 41vw, 184px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--lx-card);
  box-shadow: var(--lx-e1);
}
.lx-count__value::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(
    var(--lx-count-arc, var(--lx-terra)) calc(var(--lx-p) * 1turn),
    var(--lx-well) 0
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 5.5px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 5.5px)
  );
  transition: background 0.2s linear;
}
.lx-count__digits {
  display: block;
  font: 200 clamp(58px, 17vw, 76px) / 0.9 var(--lx-sans);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink);
}
.lx-count__of {
  display: block;
  margin-top: 6px;
  font: 600 var(--lx-kicker) / 1 var(--lx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
.lx-count__step {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  font: 300 26px/1 var(--lx-sans);
  color: var(--lx-ink-2);
}
.lx-count__step--plus {
  width: 64px;
  height: 64px;
  font-size: 32px;
  color: var(--lx-on-terra);
  background: var(--lx-terra);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    0 12px 22px -12px var(--lx-terra-glow);
}
.lx-count__step--plus:hover {
  background: var(--lx-terra-ink);
  border-color: transparent;
}
.lx-count[data-state="reached"] {
  --lx-count-arc: var(--lx-moss);
}
.lx-count[data-state="reached"] .lx-count__digits {
  color: var(--lx-moss);
}
.lx-count[data-state="reached"] .lx-count__value {
  box-shadow:
    var(--lx-e1),
    0 0 0 4px var(--lx-moss-wash);
}
.lx-count .lx-keep {
  width: 100%;
  justify-content: center;
}

/* ------------------------------------------------------------------ *
   Compare: Goal / Yours, side by side or under one slider
 * ------------------------------------------------------------------ */
.lx-compare {
  display: grid;
  gap: var(--lx-4);
}
.lx-compare__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lx-3);
}
.lx-compare__side {
  display: grid;
  align-content: start;
  gap: var(--lx-2);
}
.lx-compare__side .lx-kicker {
  margin: 0;
}
.lx-compare__side:first-child .lx-kicker {
  color: var(--lx-terra-ink);
}
.lx-compare__side:last-child .lx-kicker {
  color: var(--lx-hand);
}
.lx-compare__side .media-block {
  margin: 0;
}
.lx-compare__side .media-block img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.lx-compare__side .lx-media__alt {
  display: grid;
  align-content: center;
  min-height: 160px;
  aspect-ratio: 4 / 5;
  text-align: center;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--lx-ink-3);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 9px,
      var(--lx-rule) 9px 10px
    ),
    var(--lx-well);
}
.lx-compare__slider {
  display: grid;
}
.lx-compare__stage,
.lx-compare__range,
.lx-compare__legend {
  grid-area: 1 / 1;
}
.lx-compare__stage {
  position: relative;
  border-radius: var(--lx-radius-l);
  overflow: hidden;
  background: var(--lx-well);
  box-shadow: var(--lx-sheet-shadow);
}
.lx-compare__img {
  display: block;
  width: 100%;
  height: auto;
}
.lx-compare__img--top {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--cut, 50%));
}
.lx-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cut, 50%);
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18);
  pointer-events: none;
}
.lx-compare__handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M18 16l-6 6 6 6M26 16l6 6-6 6' fill='none' stroke='%232e2619' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 44px no-repeat,
    #ffffff;
  box-shadow:
    0 0 0 1px rgb(27 31 59 / 0.1),
    0 6px 18px -6px rgb(0 0 0 / 0.45);
}
.lx-compare__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  z-index: 2;
}
.lx-compare__range:focus-visible {
  opacity: 0;
}
.lx-compare__slider:has(.lx-compare__range:focus-visible) .lx-compare__stage {
  outline: 2px solid var(--lx-focus);
  outline-offset: 3px;
}
.lx-compare__legend {
  position: relative;
  z-index: 1;
  align-self: start;
  display: flex;
  justify-content: space-between;
  gap: var(--lx-2);
  padding: var(--lx-3);
  margin: 0;
  pointer-events: none;
}
.lx-compare__legend span {
  padding: 6px 10px;
  border-radius: var(--lx-radius-pill);
  font: 600 10px/1 var(--lx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgb(26 22 18 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lx-compare__legend span:first-child {
  background: rgb(255 90 54 / 0.9);
}
.lx-compare__legend span:last-child {
  background: rgb(46 75 255 / 0.86);
}
.lx-compare__note {
  min-height: 72px;
}

/* ------------------------------------------------------------------ *
   Cards: a physical card on a small stack, turned over in 3D
 * ------------------------------------------------------------------ */
.lx-cards {
  display: grid;
  gap: var(--lx-4);
}
.lx-cards__counter {
  justify-self: center;
  color: var(--lx-ink-3);
  margin: 0;
}
.lx-card {
  position: relative;
  display: grid;
  isolation: isolate;
  perspective: 1400px;
  margin-bottom: 18px;
}
.lx-card::before,
.lx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--lx-card);
  box-shadow: var(--lx-e1);
  z-index: -1;
  transform-origin: 50% 100%;
}
.lx-card::before {
  transform: translateY(9px) scale(0.955);
  opacity: 0.8;
}
.lx-card::after {
  transform: translateY(18px) scale(0.91);
  opacity: 0.5;
  z-index: -2;
}
.lx-card__front,
.lx-card__back {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 228px;
  padding: var(--lx-6) var(--lx-5);
  text-align: center;
  border-radius: 22px;
  /* an index card: one terracotta rule under the header, faint blue lines */
  background:
    linear-gradient(
      to bottom,
      transparent 0 44px,
      var(--lx-margin) 44px 45px,
      transparent 45px
    ),
    repeating-linear-gradient(
        to bottom,
        transparent 0 31px,
        var(--lx-guide-soft) 31px 32px
      )
      0 45px / 100% calc(100% - 45px) no-repeat,
    var(--lx-card);
  box-shadow: var(--lx-e2);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform var(--lx-t3) var(--lx-settle);
}
.lx-card__back,
.lx-card__back[hidden] {
  display: grid !important;
  transform: rotateY(180deg);
  background: var(--lx-card);
  box-shadow:
    var(--lx-e2),
    inset 0 3px 0 var(--lx-terra);
}
.lx-card__back[hidden] {
  visibility: hidden;
}
.lx-card[data-state="back"] .lx-card__front {
  transform: rotateY(-180deg);
}
.lx-card[data-state="back"] .lx-card__back {
  transform: rotateY(0deg);
}
.lx-card__front .lx-card__face {
  font-family: var(--lx-serif);
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--lx-ink);
}
.lx-card__back .lx-card__face {
  font-size: 16px;
  color: var(--lx-ink-2);
  max-width: 30em;
}
.lx-card__back .lx-card__face > p:first-child {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: clamp(22px, 6vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--lx-ink);
  margin-bottom: var(--lx-3);
}
.lx-card__face strong {
  font-weight: 400;
}
.lx-cards__answer {
  text-align: center;
  font-size: 17px;
}
.lx-cards__yours {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--lx-ink-3);
}
.lx-cards > .primary {
  justify-self: center;
  min-width: 168px;
  min-height: 48px;
}
.lx-cards__rate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
  border-radius: 18px;
  background: var(--lx-well);
  box-shadow: var(--lx-inset);
}
.lx-cards__rating {
  min-height: 52px;
  flex-direction: column;
  gap: 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  color: var(--lx-ink);
}
.lx-cards__rating::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lx-tone, var(--lx-ink-3));
}
.lx-cards__rating:hover {
  background: var(--lx-card);
  box-shadow: var(--lx-e1);
}
.lx-cards__rating--again {
  --lx-tone: var(--lx-slate);
}
.lx-cards__rating--hard {
  --lx-tone: var(--lx-ochre);
}
.lx-cards__rating--good {
  --lx-tone: var(--lx-moss);
}
.lx-cards__rating[aria-pressed="true"],
.lx-cards__rating:active {
  background: var(--lx-card);
  box-shadow:
    var(--lx-e1),
    inset 0 -2px 0 var(--lx-tone);
}
.lx-cards__done {
  display: grid;
  justify-items: center;
  gap: var(--lx-2);
  padding: var(--lx-5) var(--lx-4);
  text-align: center;
}
.lx-cards__done:empty {
  display: none;
}
.lx-cards__done-title {
  font-family: var(--lx-sans);
  font-weight: 800;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ------------------------------------------------------------------ *
   Step sequencer
 * ------------------------------------------------------------------ */
.lx-seq {
  display: grid;
  gap: var(--lx-4);
  padding: var(--lx-4);
}
.lx-seq__grid {
  display: grid;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.lx-seq__row {
  display: grid;
  grid-template-columns: 56px repeat(var(--steps, 8), minmax(26px, 1fr));
  gap: 5px;
  align-items: center;
}
.lx-seq__label {
  font: 600 10px/1.1 var(--lx-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lx-sheet-soft-ink);
}
.lx-seq__cell {
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--lx-sheet-tint);
  box-shadow:
    inset 0 1px 1px rgb(27 31 59 / 0.08),
    inset 0 0 0 1px rgb(27 31 59 / 0.06);
}
.lx-seq__cell--beat {
  box-shadow:
    inset 0 1px 1px rgb(27 31 59 / 0.08),
    inset 0 0 0 1px rgb(27 31 59 / 0.2);
}
.lx-seq__cell--on {
  background: linear-gradient(to bottom, #343a63, var(--lx-sheet-ink));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 1px 2px rgb(27 31 59 / 0.3);
}
.lx-seq__cell--now {
  outline: 2px solid var(--lx-sheet-accent);
  outline-offset: 1px;
}
.lx-seq__cell--on.lx-seq__cell--now {
  background: var(--lx-sheet-accent);
}
.lx-seq .actions .quiet {
  color: var(--lx-sheet-soft-ink);
  font-variant-numeric: tabular-nums;
}
.lx-seq .actions .primary {
  min-width: 96px;
}

/* ------------------------------------------------------------------ *
   Chess: an engraved diagram from an old book — hatched dark squares
 * ------------------------------------------------------------------ */
.lx-chess {
  display: grid;
  gap: var(--lx-3);
}
.lx-chess > .quiet.small {
  margin: 0;
  font-weight: 500;
}
.lx-board {
  position: relative;
  display: grid;
  width: min(100%, 440px);
  justify-self: center;
  padding: 3px;
  background: var(--lx-sheet);
  box-shadow:
    0 0 0 2px var(--lx-sheet-ink),
    0 0 0 6px var(--lx-sheet),
    0 0 0 7px var(--lx-sheet-hairline),
    0 22px 40px -24px rgb(27 31 59 / 0.55);
  margin: 8px 0 10px;
  user-select: none;
  -webkit-user-select: none;
}
.lx-board__row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.lx-board__square {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  font-size: clamp(22px, 8vw, 38px);
  line-height: 1;
  color: var(--lx-sheet-ink);
  background: var(--lx-board-light);
  transition: background-color var(--lx-t1) var(--lx-ease);
}
.lx-board__square:active {
  transform: none;
}
.lx-board__square--dark {
  background:
    repeating-linear-gradient(
      135deg,
      var(--lx-board-hatch) 0 1px,
      transparent 1px 4.5px
    ),
    var(--lx-board-dark);
}
.lx-board__square > svg {
  width: 88%;
  height: 88%;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.35));
}
.lx-board__square--last {
  background-color: transparent;
  background-image:
    linear-gradient(var(--lx-board-last), var(--lx-board-last)),
    repeating-linear-gradient(
      135deg,
      var(--lx-board-hatch) 0 1px,
      transparent 1px 4.5px
    );
}
.lx-board__square--light.lx-board__square--last {
  background:
    linear-gradient(var(--lx-board-last), var(--lx-board-last)),
    var(--lx-board-light);
}
.lx-board__square--dark.lx-board__square--last {
  background:
    linear-gradient(var(--lx-board-last), var(--lx-board-last)),
    repeating-linear-gradient(
      135deg,
      var(--lx-board-hatch) 0 1px,
      transparent 1px 4.5px
    ),
    var(--lx-board-dark);
}
.lx-board__square--selected {
  box-shadow: inset 0 0 0 3px var(--lx-sheet-accent);
  z-index: 1;
}
.lx-board__square--target::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: var(--lx-board-target);
  pointer-events: none;
}
.lx-board__square--target:is(
    .lx-board__square--white,
    .lx-board__square--black
  )::after {
  width: 84%;
  height: 84%;
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--lx-board-target);
}
.lx-board__square[data-rank]::before,
.lx-board__square[data-file]::after {
  position: absolute;
  font: 600 9px/1 var(--lx-sans);
  color: var(--lx-sheet-soft-ink);
  opacity: 0.75;
  pointer-events: none;
}
.lx-board__square[data-rank]::before {
  content: attr(data-rank);
  left: 3px;
  top: 3px;
}
.lx-board__square[data-file]:not(.lx-board__square--target)::after {
  content: attr(data-file);
  right: 3px;
  bottom: 3px;
}
.lx-chess__promotion {
  display: flex;
  justify-content: center;
  gap: var(--lx-2);
}
.lx-chess__promo {
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: var(--lx-radius-m);
  font-size: 30px;
  background: var(--lx-sheet);
  color: var(--lx-sheet-ink);
}
.lx-chess__promo > svg {
  width: 100%;
  height: 100%;
}
.lx-chess__feedback {
  min-height: 1.3em;
  margin: 0;
  text-align: center;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--lx-ink);
}
.lx-chess__feedback:empty {
  display: none;
}
.lx-chess[data-state="done"] .lx-chess__feedback {
  color: var(--lx-moss);
}
.lx-chess__line {
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--lx-ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lx-chess__line:empty {
  display: none;
}
.lx-chess__tools {
  justify-content: center;
}

/* ------------------------------------------------------------------ *
   Keyboard: ivory and ebony, keys that go down
 * ------------------------------------------------------------------ */
.lx-figure--instrument {
  padding: var(--lx-4) var(--lx-3) var(--lx-3);
}
.lx-keys {
  display: flex;
  overflow-x: auto;
  padding: 0 2px 6px;
  user-select: none;
  -webkit-user-select: none;
  border-top: 3px solid var(--lx-sheet-ink);
  border-radius: 2px;
}
.lx-keys__slot {
  position: relative;
  flex: 1 1 0;
  min-width: 19px;
  max-width: 54px;
}
.lx-key {
  border: 0;
  border-radius: 0 0 7px 7px;
  padding: 0;
  min-height: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 60ms var(--lx-ease),
    box-shadow 60ms var(--lx-ease),
    background-color var(--lx-t1) var(--lx-ease);
}
.lx-key:active {
  transform: none;
}
.lx-key--white {
  width: calc(100% - 2px);
  margin: 0 1px;
  height: 156px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  color: var(--lx-sheet-ink);
  background: linear-gradient(
    to bottom,
    var(--lx-key-white-2) 0,
    var(--lx-key-white) 18px,
    var(--lx-key-white) 85%,
    var(--lx-key-white-2) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgb(27 31 59 / 0.14),
    inset 0 -5px 0 rgb(27 31 59 / 0.08),
    0 2px 2px rgb(27 31 59 / 0.08);
}
.lx-key--black {
  position: absolute;
  z-index: 1;
  top: 0;
  right: -31%;
  width: 62%;
  height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 9px;
  color: var(--lx-key-white);
  background: linear-gradient(
    to bottom,
    var(--lx-key-black) 0,
    var(--lx-key-black-2) 78%,
    var(--lx-key-black) 100%
  );
  box-shadow:
    inset 0 -7px 0 rgb(0 0 0 / 0.35),
    inset 1px 0 0 rgb(255 255 255 / 0.06),
    0 3px 4px rgb(0 0 0 / 0.3);
}
.lx-key--marked.lx-key--white {
  background: linear-gradient(
    to bottom,
    var(--lx-key-white-2) 0,
    var(--lx-key-marked) 22px,
    var(--lx-key-marked) 100%
  );
}
.lx-key--marked.lx-key--black {
  background: linear-gradient(to bottom, var(--lx-key-marked-black), #e04a28);
}
.lx-key__label {
  font: 600 11px/1 var(--lx-sans);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.lx-key--marked .lx-key__label {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 11px;
  background: var(--lx-sheet-accent);
  color: var(--lx-key-hit-ink);
}
.lx-key--black .lx-key__label {
  font-size: 9.5px;
}
.lx-key[data-flash="down"],
.lx-key:active {
  transform: translateY(2px);
}
.lx-key--white[data-flash="down"],
.lx-key--white:active {
  box-shadow:
    inset 0 0 0 1px rgb(27 31 59 / 0.16),
    inset 0 -2px 0 rgb(27 31 59 / 0.08),
    inset 0 6px 10px rgb(27 31 59 / 0.08);
}
.lx-key--black[data-flash="down"],
.lx-key--black:active {
  box-shadow:
    inset 0 -3px 0 rgb(0 0 0 / 0.35),
    0 1px 1px rgb(0 0 0 / 0.3);
}
.lx-key[data-flash="hit"] {
  background: var(--lx-sheet-accent) !important;
  color: var(--lx-key-hit-ink);
  transform: translateY(2px);
}
.lx-key[data-flash="miss"] {
  background: var(--lx-key-miss) !important;
  color: var(--lx-key-hit-ink);
}

/* ------------------------------------------------------------------ *
   Fretboard: a neck with real-weight strings, a nut, fret wire
 * ------------------------------------------------------------------ */
.lx-frets {
  --lx-string: #5c6080;
  --lx-wire: #b8b3c8;
  display: grid;
  gap: 0;
  overflow-x: auto;
  padding: var(--lx-2) var(--lx-1) var(--lx-1);
}
.lx-frets__row {
  display: flex;
  align-items: stretch;
  --w: 1px;
}
.lx-frets__row:nth-child(2) {
  --w: 1.25px;
}
.lx-frets__row:nth-child(3) {
  --w: 1.6px;
}
.lx-frets__row:nth-child(4) {
  --w: 2px;
}
.lx-frets__row:nth-child(5) {
  --w: 2.5px;
}
.lx-frets__row:nth-child(6) {
  --w: 3px;
}
.lx-frets__row:nth-child(7) {
  --w: 3.4px;
}
.lx-frets__row:nth-child(8) {
  --w: 3.8px;
}
.lx-frets__name {
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--lx-sans);
  color: var(--lx-sheet-soft-ink);
}
.lx-fret {
  position: relative;
  flex: 1 0 40px;
  min-width: 40px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: inset -2px 0 0 var(--lx-wire);
  background: linear-gradient(
    to bottom,
    transparent calc(50% - var(--w) / 2),
    var(--lx-string) calc(50% - var(--w) / 2) calc(50% + var(--w) / 2),
    transparent calc(50% + var(--w) / 2)
  );
  display: grid;
  place-items: center;
}
.lx-fret:active {
  transform: none;
}
.lx-fret:hover {
  border: 0;
  background-color: var(--lx-sheet-tint);
}
.lx-fret--open {
  flex: 0 0 40px;
  box-shadow: inset -6px 0 0 var(--lx-sheet-ink);
}
.lx-frets__row:first-child .lx-fret {
  border-top: 0;
}
.lx-fret--marked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--lx-sheet-ink);
  box-shadow: 0 2px 4px rgb(27 31 59 / 0.3);
}
.lx-fret--open.lx-fret--marked::after {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -12px;
  background: var(--lx-sheet);
  box-shadow: inset 0 0 0 2px var(--lx-sheet-ink);
}
.lx-fret__finger {
  position: relative;
  z-index: 1;
  color: var(--lx-sheet);
  font: 600 12px/1 var(--lx-sans);
  font-variant-numeric: tabular-nums;
}
.lx-fret[data-flash="down"]::before,
.lx-fret[data-flash="hit"]::before,
.lx-fret[data-flash="miss"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--lx-sheet-accent);
  z-index: 2;
  animation: lx-press 260ms var(--lx-ease) both;
}
.lx-fret[data-flash="miss"]::before {
  background: var(--lx-key-miss);
}
@keyframes lx-press {
  from {
    transform: scale(0.6);
    opacity: 0.4;
  }
}
.lx-frets__row--numbers {
  margin-top: 6px;
}
.lx-frets__number {
  flex: 1 0 40px;
  min-width: 40px;
  text-align: center;
  font: 500 11px/1 var(--lx-sans);
  font-variant-numeric: tabular-nums;
  color: var(--lx-sheet-soft-ink);
}
.lx-frets__row--numbers .lx-frets__number:nth-child(2) {
  flex: 0 0 40px;
}

/* play + pitch */
.lx-play,
.lx-pitch {
  display: grid;
  gap: var(--lx-3);
}
.lx-play__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.lx-play__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--lx-rule-3);
  transition:
    background-color var(--lx-t1) var(--lx-ease),
    box-shadow var(--lx-t1) var(--lx-ease),
    scale var(--lx-t2) var(--lx-spring);
}
.lx-play__dot[data-state="hit"] {
  background: var(--lx-terra);
  box-shadow: none;
  scale: 1.15;
}
.lx-play__dot[data-state="miss"] {
  background: var(--lx-ochre);
  box-shadow: none;
}
.lx-play[data-state="done"] .lx-play__dot {
  background: var(--lx-moss);
  box-shadow: none;
}
.lx-play__feedback {
  margin: 0;
  min-height: 1.4em;
  text-align: center;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: var(--lx-ink);
}
.lx-play .actions,
.lx-pitch .actions {
  justify-content: center;
}
.lx-pitch .lx-pitch__reading,
.lx-pitch__reading {
  margin: 0;
  text-align: center;
  font: 200 clamp(44px, 13vw, 60px) / 1 var(--lx-sans);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink);
}
.lx-pitch[data-state="listening"] .lx-pitch__reading {
  color: var(--lx-terra);
}
.lx-pitch[data-state="listening"] .actions .primary {
  box-shadow: 0 0 0 0 var(--lx-terra-glow);
  animation: lx-beacon 1.6s var(--lx-ease) infinite;
}
.lx-pitch > .quiet.small:empty,
.lx-play > .quiet.small:empty {
  display: none;
}

/* ------------------------------------------------------------------ *
   Capture: a tray with photo corners, tiles of what you kept,
   "Show the teacher" as the primary pill, and practice paper to draw on
 * ------------------------------------------------------------------ */
.lx-capture {
  display: grid;
  gap: var(--lx-4);
}
.lx-capture__tray {
  --c: var(--lx-terra);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lx-2);
  padding: var(--lx-7) var(--lx-4);
  border-radius: var(--lx-radius-l);
  background:
    linear-gradient(var(--c), var(--c)) top 10px left 10px / 18px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top 10px left 10px / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top 10px right 10px / 18px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top 10px right 10px / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 10px left 10px / 18px 2px
      no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 10px left 10px / 2px 18px
      no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 10px right 10px / 18px 2px
      no-repeat,
    linear-gradient(var(--c), var(--c)) bottom 10px right 10px / 2px 18px
      no-repeat,
    var(--lx-card);
  box-shadow: var(--lx-inset);
}
.lx-capture__tray:has(.lx-capture__pick:focus-visible) {
  --c: var(--lx-hand);
}
.lx-capture__pick {
  min-height: 48px;
  padding-block: 0;
  padding-inline: 16px 20px;
  font-weight: 560;
}
.lx-capture__pick::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.lx-capture__pick:first-of-type {
  color: var(--lx-paper);
  background: var(--lx-ink);
  border-color: transparent;
}
.lx-capture__pick:first-of-type:hover {
  background: var(--lx-ink-2);
}
.lx-capture__file {
  display: none;
}
.lx-capture__status {
  margin: 0;
  font-size: 14px;
  color: var(--lx-ink-3);
}
.lx-capture__status:empty {
  display: none;
}
.lx-capture[data-state="sending"] .lx-capture__status {
  position: relative;
  padding-bottom: 10px;
  color: var(--lx-ink-2);
}
.lx-capture[data-state="sending"] .lx-capture__status::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent, var(--lx-terra), transparent) 0 0 / 40%
      100% no-repeat,
    var(--lx-well);
  animation: lx-sweep 1.2s var(--lx-ease) infinite;
}
@keyframes lx-sweep {
  from {
    background-position:
      -40% 0,
      0 0;
  }
  to {
    background-position:
      140% 0,
      0 0;
  }
}
.lx-capture[data-state="error"] .lx-capture__status {
  color: var(--lx-ochre);
}
.lx-capture__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--lx-3);
}
.lx-capture__results:empty {
  display: none;
}
/* a contact print: the picture on the left, what it is and what to do on the right */
.lx-capture__card {
  margin: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-auto-rows: min-content;
  column-gap: var(--lx-4);
  row-gap: var(--lx-2);
  align-content: center;
  padding: var(--lx-3);
  border-radius: var(--lx-radius-l);
  background: var(--lx-card);
  box-shadow: var(--lx-e1);
  animation: lx-arrive var(--lx-t3) var(--lx-settle) both;
}
.lx-capture__card > :first-child {
  grid-row: 1 / span 3;
}
.lx-capture__card > :not(:first-child) {
  grid-column: 2;
}
@keyframes lx-arrive {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}
.lx-capture__preview {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--lx-sheet-shadow);
  background: var(--lx-well);
}
.lx-capture__card--drawing .lx-capture__preview {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--lx-sheet);
}
.lx-capture__kind {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: 10px;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 14px;
  text-align: center;
  color: var(--lx-ink-2);
  background:
    radial-gradient(
      circle at 50% 42%,
      var(--lx-terra-wash) 0 22%,
      transparent 23%
    ),
    var(--lx-card);
  box-shadow: var(--lx-e1);
}
.lx-capture__card figcaption {
  align-self: end;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.lx-capture__fallback {
  margin: 0;
  font-size: 14px;
  color: var(--lx-ink-2);
  background: var(--lx-well);
  border-radius: var(--lx-radius-m);
  padding: var(--lx-3) var(--lx-4);
}
.lx-teacher {
  display: grid;
  gap: var(--lx-1);
}
.lx-teacher .quiet {
  margin: 0;
}
button.lx-teacher__button {
  justify-self: start;
  min-height: 44px;
  padding-block: 0;
  padding-inline: 16px 14px;
  gap: 6px;
  font-size: 14px;
  color: var(--lx-on-terra);
  background: var(--lx-terra);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 10px 22px -12px var(--lx-terra-glow);
}
button.lx-teacher__button::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10L10 4M5 4h5v5'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10L10 4M5 4h5v5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
button.lx-teacher__button:hover {
  background: var(--lx-terra-ink);
  border-color: transparent;
}
button.lx-teacher__button:disabled {
  opacity: 1;
  color: var(--lx-moss);
  background: var(--lx-moss-wash);
  box-shadow: none;
}
button.lx-teacher__button:disabled::after {
  display: none;
}
.lx-drawing {
  display: grid;
  gap: var(--lx-3);
}
.lx-drawing__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--lx-radius-l);
  background: var(--lx-sheet);
  box-shadow: var(--lx-sheet-shadow);
  touch-action: none;
  cursor: crosshair;
}
.lx-drawing__tools {
  justify-content: flex-end;
}
.lx-drawing__tools .ghost {
  padding: 0 12px;
  border-color: transparent;
  color: var(--lx-ink-2);
}
.lx-drawing__tools .primary {
  margin-inline-start: var(--lx-1);
}
.lx-sources {
  font-size: 13px;
  color: var(--lx-ink-3);
}
.lx-sources a {
  color: var(--lx-ink-2);
}
.source-list {
  padding-inline-start: 18px;
  font-size: 13.5px;
  color: var(--lx-ink-3);
}

/* ------------------------------------------------------------------ *
   Layout at larger sizes; fullscreen rooms
 * ------------------------------------------------------------------ */
@media (min-width: 640px) {
  .lx-do {
    padding: var(--lx-6) var(--lx-6) var(--lx-5);
  }
  .session-end {
    padding: var(--lx-8) var(--lx-7) var(--lx-6);
  }
  .lx-capture__results {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  }
  .lx-key--white {
    height: 172px;
  }
  .lx-key--black {
    height: 106px;
  }
}
@media (max-width: 380px) {
  .lx-compare__pair {
    gap: var(--lx-2);
  }
  .lx-do {
    padding-inline: var(--lx-3);
  }
}
main.is-fullscreen .lx-pulse__stage {
  width: min(100%, 360px);
}
main.is-fullscreen .lx-board {
  width: min(100%, 560px);
}

/* ------------------------------------------------------------------ *
   The widget: one screen at a time.
   Inline in the chat every screen is laid out to --lx-budget (600 px, or
   the host's own limit; all of it in full screen): the practice is a deck
   of cards, the program a step with its Start and its parts one tap away.
 * ------------------------------------------------------------------ */
:root {
  --lx-budget: 600px;
}
/* The page is as tall as what it shows; the host sizes the frame to it. */
html.lx-widget body {
  min-height: 0;
}
/* In the chat the host owns the frame (Apps SDK UI guidelines): its own
   type, its own text colours, no page of ours behind the words, no custom
   face. Where the host hands over its style variables (MCP Apps) they are
   used as they are; the fallbacks are ChatGPT's own. The brand is in the
   pictures, the marks and the coral of the one thing to do. The web player
   keeps Bright and Night above. */
html.lx-widget {
  --lx-sans: var(
    --font-sans,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif
  );
  --lx-serif: var(--lx-sans);
  --lx-paper: var(--color-background-primary, #ffffff);
  --lx-paper-hi: var(--lx-paper);
  --lx-plate: var(--lx-paper);
  --lx-card: var(--lx-paper);
  --lx-well: var(--color-background-secondary, #f3f3f3);
  --lx-ink: var(--color-text-primary, #0d0d0d);
  --lx-ink-2: var(--color-text-secondary, #424242);
  /* quiet text keeps AA on the page and on a well, whatever the host's own */
  --lx-ink-3: #6b6b6b;
  --lx-rule: rgb(0 0 0 / 0.08);
  --lx-rule-2: rgb(0 0 0 / 0.14);
  --lx-rule-3: rgb(0 0 0 / 0.3);
  /* flat, as the host draws its own cards: a hairline, no cast shadow */
  --lx-e1: 0 0 0 1px var(--lx-rule-2);
  --lx-e2: 0 0 0 1px var(--lx-rule-2);
  --lx-inset: inset 0 0 0 1px var(--lx-rule-2);
  --lx-lift: 0 0 0 0 transparent;
  --lx-sheet-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
  font-family: var(--lx-sans);
  background: transparent;
}
@media (prefers-color-scheme: dark) {
  html.lx-widget:not([data-theme="light"]) {
    --lx-paper: var(--color-background-primary, #212121);
    --lx-paper-hi: var(--lx-paper);
    --lx-plate: var(--lx-paper);
    --lx-card: var(--lx-paper);
    --lx-well: var(--color-background-secondary, #2f2f2f);
    --lx-ink: var(--color-text-primary, #f3f3f3);
    --lx-ink-2: var(--color-text-secondary, #cdcdcd);
    --lx-ink-3: #a6a6a6;
    --lx-rule: rgb(255 255 255 / 0.1);
    --lx-rule-2: rgb(255 255 255 / 0.16);
    --lx-rule-3: rgb(255 255 255 / 0.32);
    --lx-terra-wash: #3d2119;
    --lx-e1: 0 0 0 1px var(--lx-rule-2);
    --lx-e2: 0 0 0 1px var(--lx-rule-2);
    --lx-inset: inset 0 0 0 1px var(--lx-rule-2);
    --lx-lift: 0 0 0 0 transparent;
    --lx-sheet-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
  }
}
html.lx-widget[data-theme="dark"] {
  --lx-paper: var(--color-background-primary, #212121);
  --lx-paper-hi: var(--lx-paper);
  --lx-plate: var(--lx-paper);
  --lx-card: var(--lx-paper);
  --lx-well: var(--color-background-secondary, #2f2f2f);
  --lx-ink: var(--color-text-primary, #f3f3f3);
  --lx-ink-2: var(--color-text-secondary, #cdcdcd);
  --lx-ink-3: #a6a6a6;
  --lx-rule: rgb(255 255 255 / 0.1);
  --lx-rule-2: rgb(255 255 255 / 0.16);
  --lx-rule-3: rgb(255 255 255 / 0.32);
  --lx-terra-wash: #3d2119;
  --lx-e1: 0 0 0 1px var(--lx-rule-2);
  --lx-e2: 0 0 0 1px var(--lx-rule-2);
  --lx-inset: inset 0 0 0 1px var(--lx-rule-2);
  --lx-lift: 0 0 0 0 transparent;
  --lx-sheet-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
}
/* no page, no grain, no glow behind the words: the chat shows through */
html.lx-widget body {
  background: none;
}
/* The teacher speaks upright in the host's face; italic stays with the
   learner's own words (a quote, their line) and an author's emphasis. */
html.lx-widget
  :is(
    .objective,
    .media-caption,
    .library-lede,
    .today-objective,
    .empty,
    .program-promise,
    .program-mix,
    .program-paused,
    .step-focus,
    .goal-why,
    .shaping-lede,
    .preparing-focus,
    .invite-lede,
    .example-line,
    .lx-hook,
    .lx-step__number,
    .lx-step__check,
    .lx-pulse__pad-word,
    .lx-media__alt,
    .lx-chess__feedback,
    .lx-play__feedback,
    .lx-capture__kind
  ),
html.lx-widget main[aria-busy="true"] > .quiet,
html.lx-widget .lx-rich ol > li::before,
html.lx-widget .lx-choice::before,
html.lx-widget .lx-timer[data-state="done"] .lx-timer__status,
html.lx-widget .lx-card__back .lx-card__face > p:first-child {
  font-style: normal;
}
html.lx-widget main[aria-busy="true"] > .quiet {
  padding: var(--lx-5) 0;
  font-size: 16px;
}
/* The one thing to do is flat, as the host's own buttons are: no glow under it. */
html.lx-widget :is(button.primary, .cta) {
  box-shadow: none;
}
/* A score's own words (its title, its tempo) are set in the host's face too. */
html.lx-widget .lx-notation__score :is(text, tspan) {
  font-family: var(--lx-sans) !important;
}
main.is-widget {
  --lx-pad: 16px;
  padding: 12px var(--lx-pad) 10px;
  /* figures share a card with words and an instrument */
  --lx-fig: calc(var(--lx-budget) * 0.34);
}
/* Full screen, the host's own controls lie over the edges (ChatGPT's
   composer over the bottom one): the page keeps clear of what it reports. */
main.is-widget[data-display="fullscreen"] {
  padding-top: calc(12px + var(--lx-safe-top, 0px));
  padding-bottom: calc(24px + var(--lx-safe-bottom, 0px));
}
main.is-widget > .top-status {
  margin: 0 0 var(--lx-2);
}

/* the bar: name, minutes, where you are */
.lx-bar {
  display: grid;
  gap: 4px;
  margin: 0 0 6px;
}
.lx-bar__line {
  display: flex;
  align-items: baseline;
  gap: var(--lx-3);
  min-width: 0;
  min-height: 20px;
}
.lx-bar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 700 14.5px/1.35 var(--lx-sans);
  letter-spacing: -0.012em;
  color: var(--lx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--lx-t2) var(--lx-ease);
}
.lx-bar__meta {
  flex: none;
  margin-block: 0;
  margin-inline: auto 0;
  font: 500 13px/1.35 var(--lx-sans);
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
.lx-bar__steps {
  display: none;
  flex: 1 1 auto;
  margin: 0;
  font: 600 11px/1.35 var(--lx-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-ink-3);
}
/* On the cover its own title says it; the bar says how many steps. */
main:has(.lx-carousel[data-slide="cover"]) .lx-bar__title {
  display: none;
}
main:has(.lx-carousel[data-slide="cover"]) .lx-bar__steps {
  display: block;
}
.lx-progress {
  display: flex;
  gap: 4px;
  margin: 0 -2px;
}
button.lx-progress__seg {
  flex: 1 1 0;
  position: relative;
  min-height: 0;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
button.lx-progress__seg:active {
  transform: none;
}
.lx-progress__seg::before {
  content: "";
  position: absolute;
  inset-inline: 2px;
  top: 5px;
  height: 4px;
  border-radius: 4px;
  background: var(--lx-rule-2);
  transition: background-color var(--lx-t2) var(--lx-ease);
}
/* Where you are, and nothing else: passed in ink, now in coral. */
.lx-progress__seg[data-state="before"]::before {
  background: var(--lx-ink-3);
}
.lx-progress__seg[data-state="current"]::before {
  background: var(--lx-terra);
}

/* the deck */
.lx-carousel {
  display: grid;
  gap: 6px;
}
.lx-stage {
  position: relative;
  margin: 0 calc(-1 * var(--lx-pad, 16px));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  transition: height var(--lx-t2) var(--lx-ease);
}
.lx-stage::-webkit-scrollbar {
  display: none;
}
.lx-track {
  display: flex;
  align-items: flex-start;
  counter-reset: lx-block;
}
.lx-slide {
  flex: 0 0 100%;
  min-width: 0;
  /* room below for the plates' shadow, which the strip would cut */
  padding: 2px var(--lx-pad, 16px) 12px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  outline: none;
}
.lx-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--lx-3);
  padding-top: 10px;
  border-top: 1px solid var(--lx-rule);
}
button.lx-nav__back {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}
button.lx-nav__back svg {
  width: 20px;
  height: 20px;
}
button.lx-nav__back:disabled {
  opacity: 0.3;
}
.lx-nav__count {
  margin: 0;
  text-align: center;
  font: 600 12px/1 var(--lx-sans);
  letter-spacing: 0.08em;
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
button.lx-nav__next {
  min-height: 44px;
  padding-block: 0;
  padding-inline: 20px 14px;
  gap: 4px;
  font-weight: 600;
}
button.lx-nav__next svg {
  width: 18px;
  height: 18px;
}
button.lx-nav__next.primary {
  min-width: 132px;
  padding-block: 0;
  padding-inline: 24px 18px;
}
button.lx-nav__next.is-quiet {
  padding: 0 4px;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--lx-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--lx-rule-3);
  text-underline-offset: 4px;
  font-weight: 500;
}

/* the cover: when, last time, what, why, what to have ready */
.lx-cover {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 6px;
}
.lx-cover > * {
  margin: 0;
}
.lx-cover > .step-head {
  margin: 0;
}
.lx-cover h1.compact {
  font-size: clamp(28px, 7.6vw, 36px);
  line-height: 1.04;
  margin: 2px 0 0;
}
.lx-cover > .last-time {
  margin: 2px 0 4px;
}
.lx-cover .last-time-said {
  font-size: 18px;
}
.lx-cover .objective {
  font-size: 17.5px;
  line-height: 1.42;
}
.lx-cover > .have-ready {
  margin: 4px 0 0;
}

/* long words fold under "More" where a card would outgrow the frame */
[data-fold="closed"] {
  max-height: 6.1em;
  max-height: calc(var(--fold-lines, 4) * 1lh);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, transparent);
}
.lx-cover .objective {
  --fold-lines: 3;
}
.program[data-layout="chat"]
  :is(.program-promise, .program-mix, .goal-why, .stage-can, .thread p, .idea p) {
  --fold-lines: 2;
}
/* a list folded (what to look for, what to have ready): its label and how
   many, one tap from the whole list */
[data-count][data-fold] {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}
[data-count][data-fold="closed"] > :not(:first-child, .lx-more) {
  display: none;
}
.goal-things[data-count][data-fold] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--lx-2);
}
.goal-things[data-count][data-fold] > :last-child {
  flex-basis: 100%;
}
button.lx-more.lx-more--chips {
  margin: 0;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--lx-radius-pill);
  box-shadow: inset 0 0 0 1px var(--lx-rule-2);
  font-size: 13px;
  color: var(--lx-ink-2);
  text-decoration: none;
}
button.lx-more {
  justify-self: start;
  min-height: 32px;
  margin-top: -6px;
  padding: 0 2px;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lx-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--lx-rule-3);
  text-underline-offset: 4px;
}
button.lx-more:hover {
  color: var(--lx-ink);
}
button.lx-more:active {
  transform: none;
}

/* a block on its card */
.lx-slide .block {
  padding: 0;
  border-top: 0;
}
/* a block's instrument on a card of its own keeps the block's number */
.lx-slide .lx-block--do {
  counter-increment: none;
}
.lx-slide .lx-block {
  gap: var(--lx-3);
}
.lx-slide .start-here {
  margin: 0 0 -2px;
}
.lx-slide .lx-block__title {
  font-size: clamp(22px, 6.1vw, 26px);
  line-height: 1.1;
}
.lx-slide .lx-block__show {
  gap: var(--lx-3);
}
.lx-slide .lx-rich {
  font-size: 15.5px;
  line-height: 1.55;
}
.lx-slide .lx-block__show > .lx-rich {
  display: grid;
}
.lx-slide .lx-block__last {
  padding: 8px 12px;
  font-size: 13.5px;
}
/* learn, then do: on a phone one after another, the instrument last */
.lx-block__learn {
  display: grid;
  gap: var(--lx-3);
  min-width: 0;
}
.lx-slide .lx-figure__art svg {
  max-height: var(--lx-fig);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
/* an engraved score grows no wider than it was engraved (and so no taller) */
.lx-slide .lx-figure--notation {
  grid-template-columns: minmax(
    0,
    min(100%, calc(var(--lx-score-w, 640px) * 1.15))
  );
  justify-content: center;
}
.lx-slide .lx-figure:has(> .lx-figure__art) {
  display: grid;
  place-items: center;
}
.lx-slide .lx-figure__art {
  width: 100%;
  display: grid;
  place-items: center;
}
.lx-slide .media-block img,
.lx-slide .media-block video,
.lx-slide img.media {
  width: auto;
  max-width: 100%;
  max-height: var(--lx-fig);
  margin: 0 auto;
  object-fit: contain;
}
.lx-slide .lx-do {
  gap: var(--lx-3);
  padding: var(--lx-4) 14px 14px;
  border-radius: 20px;
}
.lx-slide .lx-keep {
  padding-top: var(--lx-3);
}
.lx-slide .lx-keep__button {
  min-height: 44px;
}
/* look for: compact chips */
.lx-slide .lx-lookfor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.lx-slide .lx-lookfor .lx-kicker {
  margin-block: 0;
  margin-inline: 0 6px;
  font-size: 10.5px;
}
.lx-slide .lx-lookfor__list {
  display: contents;
}
.lx-slide .lx-lookfor__item {
  gap: 7px;
  min-height: 32px;
  padding-block: 5px;
  padding-inline: 7px 12px;
  font-size: 13.5px;
  line-height: 1.3;
}
.lx-slide .lx-lookfor__item input {
  width: 17px;
  height: 17px;
}
.lx-slide .lx-lookfor__item input:checked {
  background-size: 17px;
}
.lx-slide .lx-sources {
  margin: 0;
}
/* steps: one open at a time, the others one line each; a timer on one line */
.lx-slide .lx-step {
  padding-bottom: var(--lx-3);
}
.lx-slide .lx-step__text {
  font-size: 15px;
  line-height: 1.45;
}
.lx-slide .lx-step__label {
  padding-top: 5px;
}
.lx-slide .lx-step:not([data-open]) {
  padding-bottom: var(--lx-2);
}
.lx-slide .lx-step:not([data-open]) .lx-step__text > * {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.lx-slide .lx-step:not([data-open]) .lx-step__text > * + *,
.lx-slide .lx-step:not([data-open]) .lx-step__check {
  display: none;
}
.lx-slide .lx-step[data-state="todo"]:not([data-open]) .lx-step__text {
  color: var(--lx-ink-2);
}
/* a closed step's timer hides, unless it is counting (or they run together) */
.lx-slide
  .lx-steps:not([data-parallel])
  .lx-step:not([data-open])
  .lx-timer:not([data-state="running"], [data-state="paused"]) {
  display: none;
}
.lx-slide .lx-step__check {
  margin-top: 4px;
  font-size: 14px;
}
.lx-slide .lx-timer {
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 0;
  column-gap: var(--lx-3);
  margin-top: var(--lx-2);
  padding: 8px 10px;
}
.lx-slide .lx-timer__digits {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 60px;
  height: 60px;
  font-size: 15px;
}
.lx-slide .lx-timer__digits::after {
  inset: 7px;
}
.lx-slide .lx-timer__controls {
  grid-row: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--lx-3);
  row-gap: 4px;
}
.lx-slide .lx-timer__controls > button:first-of-type {
  min-height: 40px;
}
.lx-slide .lx-timer .lx-timer__status,
.lx-slide .lx-timer[data-state] .lx-timer__status {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;
  font-size: 14px;
}
/* the pulse on a card: tempo and the early/late needle beside the drum */
.lx-slide .lx-pulse {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--lx-3);
  row-gap: var(--lx-2);
}
.lx-slide .lx-pulse > * {
  grid-column: 1 / -1;
}
.lx-slide .lx-pulse__face {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.lx-slide .lx-pulse__bpm {
  font-size: 56px;
}
.lx-slide .lx-pulse__meter {
  --R: 150px;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 100%;
  height: 62px;
}
.lx-slide .lx-pulse__stage {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(46vw, 184px);
  margin: 0;
}
main[data-display="fullscreen"] .lx-slide .lx-pulse__stage {
  width: min(46vw, 300px);
}
.lx-slide .lx-pulse__pad-word {
  font-size: 28px;
}
.lx-slide .lx-pulse__pad-hint {
  font-size: 8.5px;
  letter-spacing: 0.08em;
}
/* boards, keys, necks and pictures a little smaller inline; full size in full screen */
main.is-widget:not([data-display="fullscreen"]) .lx-slide .lx-board {
  width: min(100%, calc(var(--lx-budget) * 0.46));
  margin-inline: auto;
}
main.is-widget:not([data-display="fullscreen"]) .lx-slide .lx-key--white {
  height: 120px;
}
main.is-widget:not([data-display="fullscreen"]) .lx-slide .lx-key--black {
  height: 74px;
}
main.is-widget:not([data-display="fullscreen"]) .lx-slide .lx-fret {
  height: 28px;
}
main.is-widget:not([data-display="fullscreen"])
  .lx-slide
  .lx-compare__side
  .media-block
  img {
  max-height: calc(var(--lx-budget) * 0.3);
}
.lx-slide .lx-play__feedback:empty {
  display: none;
}
.lx-slide .lx-do > .lx-figure--instrument {
  padding: 10px 8px 8px;
}
main.is-widget:not([data-display="fullscreen"]) .lx-slide :is(.lx-card__front, .lx-card__back) {
  min-height: 176px;
  padding: var(--lx-5) var(--lx-4);
}
main.is-widget:not([data-display="fullscreen"]) .lx-slide .lx-compare__side .media-block img {
  max-height: calc(var(--lx-budget) * 0.26);
}
.lx-slide .lx-compare__note {
  min-height: 56px;
}
.lx-slide .lx-room {
  min-height: 30px;
}
/* timers that run together: a closed step keeps a small one, Start only */
.lx-slide .lx-steps[data-parallel] .lx-step:not([data-open]) .lx-timer {
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 4px 8px;
  margin-top: 4px;
}
.lx-slide .lx-steps[data-parallel] .lx-step:not([data-open]) .lx-timer__digits {
  width: 44px;
  height: 44px;
  font-size: 12.5px;
}
.lx-slide .lx-steps[data-parallel] .lx-step:not([data-open]) .lx-timer__digits::after {
  inset: 5px;
}
.lx-slide .lx-steps[data-parallel] .lx-step:not([data-open]) .lx-timer__controls > button:first-of-type {
  min-height: 34px;
  padding: 0 14px;
}
.lx-slide .lx-steps[data-parallel] .lx-step:not([data-open]) .lx-timer__controls > button:nth-of-type(2) {
  display: none;
}
/* the instruments keep their own gestures; a swipe there is theirs */
.lx-slide :is(.lx-pulse__pad, .lx-board, input[type="range"]) {
  touch-action: pan-y;
}
.lx-slide :is(.lx-keys, .lx-frets, .lx-seq__grid, .lx-notation__score) {
  overscroll-behavior-x: contain;
}
/* the last card: their line for tomorrow */
.lx-slide .session-end {
  margin: 0;
  gap: var(--lx-3);
  padding: var(--lx-7) var(--lx-5) var(--lx-5);
}
.lx-slide .end-label {
  font-size: clamp(25px, 6.8vw, 30px);
}

@media (min-width: 600px) {
  /* learn on the left, do on the right */
  .lx-slide .lx-block[data-layout="split"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--lx-5);
    align-items: start;
  }
  .lx-slide .lx-block[data-layout="split"] > * {
    grid-column: 1 / -1;
  }
  /* placed in this order, the two share one row */
  .lx-slide .lx-block[data-layout="split"] > .lx-block__learn {
    grid-column: 1;
    order: 1;
  }
  .lx-slide .lx-block[data-layout="split"] > .lx-do {
    grid-column: 2;
    order: 2;
  }
  .lx-slide .lx-do {
    padding: var(--lx-5) var(--lx-4) var(--lx-4);
  }
  .lx-cover {
    max-width: 600px;
  }
}

/* the program in the chat: today first, its parts a tap away */
.program[data-layout="chat"] {
  gap: 10px;
}
.program[data-layout="chat"] .program-intro {
  gap: 2px;
}
.program[data-layout="chat"] .program-title.compact {
  font-size: clamp(21px, 5.8vw, 26px);
  line-height: 1.1;
  margin: 0;
}
.program[data-layout="chat"] .program-changed {
  margin-top: var(--lx-2);
  padding: 8px 12px;
  font-size: 13.5px;
}
.program-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--lx-radius-pill);
  background: var(--lx-well);
  box-shadow: var(--lx-inset);
  overflow-x: auto;
  scrollbar-width: none;
}
.program-tabs::-webkit-scrollbar {
  display: none;
}
button.program-tab {
  flex: 1 0 auto;
  min-height: 36px;
  padding: 0 10px;
  font-size: 13.5px;
  white-space: nowrap;
  font-weight: 550;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--lx-ink-2);
}
.program-tabs:has(> :nth-child(5)) button.program-tab {
  padding: 0 7px;
  font-size: 13px;
}
button.program-tab[aria-selected="true"] {
  background: var(--lx-card);
  color: var(--lx-ink);
  box-shadow: var(--lx-e1);
}
button.program-tab:active {
  transform: none;
}
.program-panel {
  display: grid;
  gap: var(--lx-3);
  min-width: 0;
}
.program-panel > * {
  margin: 0;
}
.program[data-layout="chat"] .today-block {
  gap: var(--lx-2);
}
.program[data-layout="chat"] .step-card {
  gap: var(--lx-2);
  padding: 14px var(--lx-4) var(--lx-3);
}
.program[data-layout="chat"] .done-today {
  font-size: 14px;
  padding: 0 var(--lx-1);
}
.program[data-layout="chat"] .done-today .done-mark {
  width: 18px;
  height: 18px;
  background-size: 16px;
}
/* the next step after today's is done: its focus waits on its own cover */
.program[data-layout="chat"] .done-today ~ .step-card .step-focus {
  -webkit-line-clamp: 2;
}
.program[data-layout="chat"] .step-card .step-title {
  font-size: clamp(22px, 6.1vw, 28px);
}
.program[data-layout="chat"] .step-card .step-start {
  min-height: 44px;
}
.program[data-layout="chat"] .step-goal {
  font-size: 13.5px;
}
.program[data-layout="chat"] .step-focus {
  font-size: 16px;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.program[data-layout="chat"] .step-card .today-row {
  margin-top: 2px;
  padding-top: 10px;
}
.program[data-layout="chat"] .daily-line {
  font-size: 13px;
}
.program[data-layout="chat"] .program-section {
  gap: var(--lx-2);
}
.program[data-layout="chat"] .plan-title {
  margin: 0;
}
/* strips: the days ahead, the goals, what they share, ideas */
.program[data-layout="chat"] :is(.week, .goals, .threads, .ideas) {
  display: flex;
  gap: 10px;
  margin: 0 calc(-1 * var(--lx-pad, 16px)) -4px;
  padding: 2px var(--lx-pad, 16px) 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--lx-pad, 16px);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-top: 0;
}
.program[data-layout="chat"] :is(.week, .goals, .threads, .ideas)::-webkit-scrollbar {
  display: none;
}
.program[data-layout="chat"] .week-day {
  flex: 0 0 136px;
  border: 0;
  scroll-snap-align: start;
}
.program[data-layout="chat"] .week-row {
  height: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 4px 8px;
  min-height: 0;
  padding: 10px 12px 12px;
  background: var(--lx-plate);
  border-radius: var(--lx-radius-l);
  box-shadow: var(--lx-e1);
}
.program[data-layout="chat"] .week-date {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.program[data-layout="chat"] .week-num {
  font-size: 22px;
}
.program[data-layout="chat"] .week-words {
  grid-column: 1 / -1;
  grid-row: 2;
}
.program[data-layout="chat"] .week-row > :is(.practice-arrow, .done-mark) {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.program[data-layout="chat"] .week-title {
  font-size: 14px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.program[data-layout="chat"] .week-goal {
  font-size: 12px;
}
.program[data-layout="chat"] .week-row .done-mark {
  width: 18px;
  height: 18px;
  background-size: 16px;
}
.program[data-layout="chat"] .week-row .practice-arrow {
  font-size: 16px;
  line-height: 1;
}
.program[data-layout="chat"] .program-promise {
  font-size: 16.5px;
  line-height: 1.4;
}
.program[data-layout="chat"] .program-mix {
  font-size: 14.5px;
  line-height: 1.45;
}
.program[data-layout="chat"] .goal {
  flex: 0 0 min(296px, 86%);
  align-content: start;
  gap: var(--lx-2);
  padding: var(--lx-4);
  scroll-snap-align: start;
}
.program[data-layout="chat"] .goal-title {
  font-size: 18.5px;
}
.program[data-layout="chat"] .goal-why {
  font-size: 14.5px;
  line-height: 1.42;
}
.program[data-layout="chat"] .stages {
  margin-top: 2px;
}
.program[data-layout="chat"] .stage {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--lx-2);
  padding-bottom: var(--lx-2);
}
.program[data-layout="chat"] .stage::before {
  inset-inline-start: 8px;
  top: 18px;
}
.program[data-layout="chat"] .stage-mark {
  width: 18px;
  height: 18px;
}
.program[data-layout="chat"] .stage[data-state="current"] .stage-mark {
  background: radial-gradient(
    circle,
    var(--lx-terra) 0 4px,
    var(--lx-plate) 4.5px
  );
}
.program[data-layout="chat"] .stage-title {
  font-size: 14px;
  line-height: 1.3;
  padding-top: 0;
}
.program[data-layout="chat"] .stage-can {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px !important;
}
.program[data-layout="chat"] .goal-things {
  padding-top: var(--lx-2);
  font-size: 13px;
}
/* a goal shows the stage it is at; "More" opens why, every stage, the things */
.program[data-layout="chat"]
  .goal[data-stages="now"]
  :is(.goal-why, .goal-things, .stage:not([data-state="current"])) {
  display: none;
}
.program[data-layout="chat"] .goal[data-stages="now"] .stage {
  padding-bottom: 0;
}
.program[data-layout="chat"] .goal[data-stages="now"] .stage::before {
  display: none;
}
.program[data-layout="chat"] .goal > .goal-more {
  margin: 0;
}
.program[data-layout="chat"] .goals-section > .plan-title {
  display: none;
}
.program[data-layout="chat"] .goals-rest {
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.program[data-layout="chat"] .goal-rest {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--lx-radius-pill);
  box-shadow: inset 0 0 0 1px var(--lx-rule-2);
}
.program[data-layout="chat"] .goal-rest-title {
  font-size: 13.5px;
  font-weight: 650;
}
.program[data-layout="chat"] .goal-rest-why {
  display: none;
}
.program[data-layout="chat"] .thread,
.program[data-layout="chat"] .idea {
  flex: 0 0 min(256px, 80%);
  gap: 6px;
  padding: 14px;
  scroll-snap-align: start;
}
.program[data-layout="chat"] .idea {
  background: var(--lx-plate);
  border-radius: var(--lx-radius-l);
  border-top: 0;
  box-shadow: var(--lx-e1);
}
.program[data-layout="chat"] .thread h3,
.program[data-layout="chat"] .idea h3 {
  font-size: 16px;
}
.program[data-layout="chat"] .thread p,
.program[data-layout="chat"] .idea p {
  font-size: 13.5px;
  line-height: 1.45;
}
.program[data-layout="chat"] .wishes {
  gap: var(--lx-2);
}
.program[data-layout="chat"] .wish {
  font-size: 18px;
}
.program[data-layout="chat"] .practice-row {
  min-height: 52px;
}
.program[data-layout="chat"] .practice-title {
  font-size: 16.5px;
}
.program[data-layout="chat"] .things {
  grid-template-columns: 1fr;
  gap: var(--lx-2);
}
.program[data-layout="chat"] .thing {
  padding: var(--lx-3);
}

/* shaping in the chat: the figure beside its title, their words compact */
.is-widget .program-shaping {
  --shaping-gap: var(--lx-4);
  padding: 0;
}
.is-widget .shaping-head {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--lx-3);
  row-gap: 2px;
  align-items: center;
}
.is-widget .shaping-head .cheer-mark {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 13px;
}
.is-widget .program-shaping[data-first] .cheer-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.is-widget .shaping-head h1 {
  font-size: clamp(23px, 6.4vw, 28px);
  line-height: 1.08;
}
.is-widget .shaping-lede {
  grid-column: 1 / -1;
  margin-top: var(--lx-2);
  font-size: 17px;
  line-height: 1.42;
}
.is-widget .program-shaping[data-first] .shaping-lede {
  font-size: 15.5px;
}
.is-widget .shaping-words {
  gap: var(--lx-2);
  padding: var(--lx-4);
}
.is-widget .shaping-words .wish {
  font-size: 18px;
}
.is-widget .program-shaping[data-first] .shaping-words {
  padding: 12px var(--lx-4);
  box-shadow: inset 0 0 0 1px var(--lx-rule);
  background: transparent;
}
/* once the step leads, their words run on as one quiet paragraph */
.is-widget .program-shaping[data-first] .wishes {
  display: block;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
}
.is-widget .program-shaping[data-first] .wish {
  display: inline;
  padding: 0;
  margin-inline-end: 10px;
  font-size: inherit;
  line-height: inherit;
}
.is-widget .program-shaping[data-first] .wish::before {
  position: static;
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-inline-end: 7px;
  vertical-align: -0.12em;
}
.is-widget .first-step-card {
  gap: var(--lx-2);
  padding: var(--lx-4) var(--lx-4) var(--lx-3);
}
.is-widget .first-step-card .step-title {
  font-size: clamp(23px, 6.4vw, 28px);
}
.is-widget .first-step-card .step-focus {
  font-size: 16px;
  line-height: 1.42;
}
.is-widget .first-step-card .today-row {
  padding-top: var(--lx-3);
}

/* a practice being drawn, in the chat */
.is-widget .preparing {
  gap: var(--lx-2);
  padding: 0;
}
.is-widget .preparing > h1.compact {
  font-size: clamp(24px, 6.6vw, 30px);
  margin: 2px 0 0;
}
.is-widget .preparing-focus {
  font-size: 16.5px;
}
.is-widget .sketch-stage {
  margin-top: var(--lx-1);
  padding: var(--lx-3);
  border-radius: 20px;
}
.is-widget .sketch {
  max-height: calc(var(--lx-budget) * 0.3);
  width: auto;
  max-width: 100%;
}
.is-widget .preparing-note {
  font-size: 14px;
}
.is-widget .preparing-ready {
  gap: var(--lx-2) var(--lx-5);
  padding-top: var(--lx-3);
}
@media (min-width: 600px) {
  .is-widget .preparing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--lx-5);
    align-items: start;
  }
  .is-widget .preparing > * {
    grid-column: 1;
  }
  .is-widget .preparing > .sketch-stage {
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: stretch;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/*
  KaTeX 0.19.1 styles (MIT, see /learn/fonts/katex-LICENSE.txt).
  Only the four fonts most formulas use are bundled: Main, Math italic and
  the first two delimiter sizes. Rarer alphabets fall back to the serif stack.
*/
@font-face{font-display:swap;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url("/learn/fonts/KaTeX_Main-Regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url("/learn/fonts/KaTeX_Math-Italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url("/learn/fonts/KaTeX_Size1-Regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url("/learn/fonts/KaTeX_Size2-Regular.woff2") format("woff2")}.katex{font:normal 1.21em KaTeX_Main,math,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.19.1"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .reflectbox{display:inline-block;transform:scaleX(-1)}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}

/* Inline, the program card ends with one quiet way into the whole program. */
.program[data-card] .program-whole {
  align-self: flex-start;
  justify-self: start;
  margin-top: var(--lx-3);
}

/* ------------------------------------------------------------------ *
   v3 home: Today, Week, Path, Wins.
   One meaning per property, on every screen. A mark's shape is the
   session's type (small dot: a quick step; large disc: hands-on; bag:
   get ready; star: the showcase), its colour the wish it belongs to,
   its fill whether it is done. An empty cell is a free day. The plate
   under a weekday is today; the bar under a cell is the day in words
   below. Coral stays with the one thing to do.
 * ------------------------------------------------------------------ */
[data-tone="0"] {
  --tone: var(--lx-tone-0);
}
[data-tone="1"] {
  --tone: var(--lx-tone-1);
}
[data-tone="2"] {
  --tone: var(--lx-tone-2);
}
[data-tone="3"] {
  --tone: var(--lx-tone-3);
}
[data-tone="4"] {
  --tone: var(--lx-tone-4);
}
.lx-glyph {
  flex: none;
  width: 24px;
  height: 24px;
  overflow: visible;
  color: var(--tone, var(--lx-ink-3));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lx-glyph[data-fill="full"] .lx-glyph__body {
  fill: currentColor;
}
.lx-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tone, var(--lx-ink-3));
}
.lx-home {
  gap: var(--lx-6);
}
.lx-home .program-section {
  gap: var(--lx-3);
}

/* today: one session, one thing to do */
.lx-today {
  display: grid;
  min-width: 0;
  background: var(--lx-plate);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-e2);
  overflow: hidden;
}
.lx-picture,
.lx-thumb,
.lx-win__art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* without a picture: a calm block in the wish's own colour */
  background: var(--lx-well);
  background: color-mix(
    in srgb,
    var(--tone, var(--lx-ink-3)) 14%,
    var(--lx-plate)
  );
}
.lx-picture {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.lx-picture[data-empty] {
  aspect-ratio: 12 / 5;
}
:is(.lx-picture, .lx-thumb, .lx-win__art) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No picture yet: the session's shape printed in two inks of the wish's
   colour, the second a little off the first. */
.lx-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lx-poster__ink--under {
  fill: color-mix(in srgb, var(--tone, var(--lx-ink-3)) 30%, var(--lx-plate));
  stroke: color-mix(in srgb, var(--tone, var(--lx-ink-3)) 30%, var(--lx-plate));
}
.lx-poster__ink--over {
  fill: color-mix(in srgb, var(--tone, var(--lx-ink-3)) 74%, var(--lx-plate));
  stroke: color-mix(in srgb, var(--tone, var(--lx-ink-3)) 74%, var(--lx-plate));
}
.lx-today__body {
  display: grid;
  gap: var(--lx-2);
  min-width: 0;
  padding: var(--lx-4);
}
.lx-today__body > * {
  margin: 0;
  min-width: 0;
}
.lx-kind {
  display: flex;
  align-items: flex-start;
  gap: var(--lx-2);
  min-width: 0;
  margin: 0;
  font: 500 13.5px/18px var(--lx-sans);
  color: var(--lx-ink-3);
}
.lx-kind .lx-glyph {
  width: 18px;
  height: 18px;
  stroke-width: 2.6;
}
/* the type, then the wish: one small line that wraps as words do */
.lx-kind__words {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lx-kind__type {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-ink);
}
/* the dot belongs to the type, so it runs the player's way, right to left too */
.lx-kind__type:not(:last-child)::after {
  content: "·";
  content: "·" / "";
  margin: 0 0.45em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--lx-ink-3);
}
.lx-kind__tag {
  display: inline-block;
  margin-inline-start: var(--lx-2);
  padding: 0 8px;
  border-radius: var(--lx-radius-pill);
  background: var(--lx-well);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  color: var(--lx-ink-2);
}
.lx-today .lx-today__title {
  margin-top: 2px;
  font: 800 clamp(25px, 7vw, 32px) / 1.08 var(--lx-sans);
  letter-spacing: -0.024em;
  text-transform: none;
  color: var(--lx-ink);
  text-wrap: balance;
}
/* Four sizes on a card and no more: a small caps label (11.5), small text
   (13.5), the body (17) and the title. The facts are small text, stronger. */
.lx-facts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lx-ink-2);
}
.lx-hook {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.42;
  color: var(--lx-ink);
  text-wrap: pretty;
}
.lx-needs {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--lx-ink-3);
}
.lx-needs__label {
  margin-inline-end: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lx-ink-2);
}
/* a list that reads as one quiet line */
.lx-needs__items {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lx-needs__items > li {
  display: inline;
}
.lx-needs__items > li + li::before {
  content: " · ";
  content: " · " / "";
}
.lx-actions {
  display: flex;
  align-items: center;
  gap: var(--lx-2);
  margin-top: var(--lx-2);
}
.lx-actions button {
  min-height: 48px;
  font-size: 15.5px;
  font-weight: 600;
}
.lx-actions .primary {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
}
.lx-actions .lx-aside {
  flex: none;
  padding: 0 24px;
}

/* a free day, or today's already done: what is next, and no demand */
.lx-today--rest .lx-today__body {
  gap: var(--lx-3);
}
.lx-today--rest .lx-actions button {
  flex: 1 1 0;
  padding: 0 var(--lx-3);
}
/* paused: the card says so, in the card's own voice, and keeps the path */
.lx-today--rest .program-paused {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.lx-today--rest .program-paused + .lx-actions {
  margin-top: 0;
}
.lx-today--rest[data-day="paused"] .lx-actions button {
  flex: 0 1 auto;
  padding: 0 28px;
}

/* a day done is named by its win; its mark, filled, leads the line */
.lx-won {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--lx-ink-2);
}
.lx-won .lx-glyph {
  width: 15px;
  height: 15px;
}
.lx-today--rest .lx-kicker {
  margin: 0;
}
.lx-today--rest .lx-event {
  padding-top: var(--lx-3);
  border-top: 1px solid var(--lx-rule);
}
.lx-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--lx-3);
  align-items: start;
  padding-top: var(--lx-3);
  border-top: 1px solid var(--lx-rule);
}
.lx-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--lx-radius-m);
}
.lx-row__words {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.lx-row__words > * {
  margin: 0;
  min-width: 0;
}
.lx-row__title {
  margin: 0;
  font: 750 17px/1.25 var(--lx-sans);
  letter-spacing: -0.012em;
  color: var(--lx-ink);
}
:is(.lx-row, .lx-day__card) .lx-facts {
  font-weight: 500;
}

/* the week */
.lx-week,
.lx-path,
.lx-wins {
  display: grid;
  gap: var(--lx-3);
  min-width: 0;
}
:is(.lx-week, .lx-path, .lx-wins) > * {
  margin: 0;
  min-width: 0;
}
:is(.lx-week, .lx-wins) .lx-tally,
.lx-season .lx-season__title {
  margin: 0;
  font: 800 clamp(24px, 6.6vw, 30px) / 1.1 var(--lx-sans);
  letter-spacing: -0.024em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink);
}
.lx-week__kept {
  margin-top: -6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lx-ink-2);
}
.lx-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
button.lx-cell {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding: 10px 0 12px;
  font: inherit;
  color: var(--lx-ink-3);
  background: transparent;
  border: 0;
  border-radius: var(--lx-radius-m);
  box-shadow: none;
}
button.lx-cell:active {
  transform: none;
}
button.lx-cell:focus-visible {
  outline-offset: -2px;
}
.lx-cell__day {
  font: 600 12px/1 var(--lx-sans);
  color: var(--lx-ink-3);
}
.lx-cell__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.lx-cell__mark .lx-glyph {
  width: 30px;
  height: 30px;
}
button.lx-cell[data-today] {
  background: var(--lx-well);
}
button.lx-cell[data-today] .lx-cell__day {
  font-weight: 800;
  color: var(--lx-ink);
}
button.lx-cell[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 16px;
  height: 3px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--lx-ink);
}
/* next week is still to be settled: the same marks, drawn lighter */
.lx-week__next {
  margin: var(--lx-1) 0 -6px;
}
.lx-strip--next button.lx-cell {
  padding-block: 6px 10px;
}
.lx-strip--next .lx-cell__mark {
  opacity: 0.8;
}
.lx-strip--next .lx-glyph {
  stroke-width: 1.6;
}
.lx-day__card {
  display: grid;
  gap: 6px;
  padding: var(--lx-3) var(--lx-4) var(--lx-4);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-l);
  box-shadow: var(--lx-e1);
}
.lx-day__card > * {
  margin: 0;
  min-width: 0;
}
.lx-day__free {
  font-size: 17px;
  font-weight: 700;
  color: var(--lx-ink-2);
}
.lx-day__card .step-start {
  justify-self: start;
  margin-top: 6px;
  padding: 0 20px;
}
.lx-event {
  display: flex;
  align-items: flex-start;
  gap: var(--lx-2);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--lx-ink-2);
}
.lx-event .lx-glyph {
  width: 20px;
  height: 20px;
}
.lx-event__words {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.lx-event__title {
  font-weight: 700;
  color: var(--lx-ink);
}
.lx-event__facts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
  font-size: 13.5px;
}
/* which colour is which wish, right under the marks */
.lx-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--lx-4);
}
.lx-legend__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--lx-ink-2);
}
.lx-legend__item .lx-dot {
  align-self: center;
}

/* the path: every wish, dated */
.lx-season {
  display: grid;
  gap: 4px;
}
.lx-season > * {
  margin: 0;
}
.lx-season__line {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--lx-ink-2);
}
.lx-wishes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--lx-3);
}
.lx-wish {
  display: grid;
  gap: var(--lx-2);
  padding: var(--lx-4);
  background: var(--lx-plate);
  border-radius: var(--lx-radius-l);
  box-shadow: var(--lx-e1);
}
.lx-wish > * {
  margin: 0;
  min-width: 0;
}
.lx-wish__role {
  display: flex;
  align-items: center;
  gap: var(--lx-2);
  font: 600 13px/1.3 var(--lx-sans);
  color: var(--lx-ink-2);
}
.lx-wish__title {
  font: 800 19px/1.2 var(--lx-sans);
  letter-spacing: -0.016em;
  color: var(--lx-ink);
}
.lx-wish[data-role="headline"] .lx-wish__title {
  font-size: 23px;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.lx-wish__because {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--lx-ink-2);
}
.lx-ladder {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
}
.lx-rung {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 10px;
}
.lx-rung:last-child {
  padding-bottom: 0;
}
/* one unbroken rail from each rung to the next */
.lx-rung::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  top: 20px;
  bottom: -1px;
  width: 2px;
  background: var(--lx-rule-2);
}
.lx-rung:last-child::before {
  display: none;
}
/* reached is filled, now is ringed with its dot, ahead is an empty ring */
.lx-rung__mark {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--lx-rule-3);
}
.lx-rung[data-state="done"] .lx-rung__mark {
  background: var(--tone, var(--lx-ink-2));
  box-shadow: none;
}
.lx-rung[data-state="current"] .lx-rung__mark {
  background: radial-gradient(
    circle,
    var(--tone, var(--lx-ink)) 0 3.5px,
    transparent 4px
  );
  box-shadow: inset 0 0 0 2px var(--tone, var(--lx-ink));
}
.lx-rung__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lx-ink-2);
}
.lx-rung[data-state="current"] .lx-rung__title {
  font-weight: 750;
  color: var(--lx-ink);
}
.lx-rung__can {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--lx-ink-2);
}
.lx-wish .lx-event {
  margin-top: 2px;
  padding-top: var(--lx-3);
  border-top: 1px solid var(--lx-rule);
}

/* the shelf: what they did, newest first */
.lx-wins__lede {
  margin-top: -4px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--lx-ink-2);
}
.lx-shelf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lx-5) var(--lx-3);
}
.lx-win {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
}
.lx-win > * {
  margin: 0;
  min-width: 0;
}
.lx-win__art {
  aspect-ratio: 4 / 3;
  margin-bottom: 6px;
  border-radius: var(--lx-radius-l);
}
.lx-win__art .lx-glyph {
  width: 44px;
  height: 44px;
  stroke-width: 1.8;
}
/* one on its way is an outline: fill is done */
.lx-shelf .lx-win[data-earned="false"] .lx-win__art {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--tone, var(--lx-rule-3));
}
.lx-shelf .lx-win[data-earned="false"] .lx-kicker {
  margin: 0;
}
.lx-win[data-earned="false"] .lx-win__title {
  color: var(--lx-ink-2);
}
.lx-win__title {
  font: 750 15px/1.28 var(--lx-sans);
  letter-spacing: -0.01em;
  color: var(--lx-ink);
}
.lx-win__date {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--lx-ink-3);
}
.lx-win__line {
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--lx-ink-2);
}
.lx-win--first {
  max-width: 440px;
}
.lx-win--first .lx-win__art {
  aspect-ratio: 16 / 9;
}
.lx-win--first .lx-win__title {
  font-size: 19px;
  line-height: 1.22;
  color: var(--lx-ink);
}

/* The first win, picked while the rest is composed, is the same card as
   today's: its foot holds the drawing sign, then Start in its place. */
.is-widget .lx-today.first-step-card,
.lx-today.first-step-card {
  gap: 0;
  padding: 0;
}
.lx-today .first-step-foot .today-row {
  margin-top: var(--lx-2);
  padding-top: 0;
  border-top: 0;
  min-height: 48px;
}
.lx-today .first-step-foot .today-row > .quiet:empty {
  display: none;
}
.lx-today .first-step-foot .step-start {
  flex: 1 1 auto;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
}

/* with room, the session's picture stands beside its words */
@media (min-width: 640px) {
  .lx-today:not(.lx-today--rest) {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  }
  .lx-today:not(.lx-today--rest) .lx-picture {
    height: 100%;
    min-height: 260px;
    aspect-ratio: auto;
  }
  .lx-today__body {
    align-content: center;
    padding: var(--lx-5);
  }
  .lx-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* the home in the chat: the host's own flat card, to the frame's edges */
.lx-home[data-layout="chat"] {
  gap: var(--lx-3);
}
.is-widget .lx-today {
  border-radius: 20px;
}
.is-widget .lx-hook {
  font-size: 17px;
}
/* An inline card never scrolls and never outgrows the frame: its cover and
   longer lines hold to a few lines, then draw in a step at a time
   (data-fit, set where the card would be too tall). Nothing is dropped. */
.lx-home[data-card="inline"] .lx-picture {
  max-height: calc(var(--lx-budget) * 0.36);
}
.lx-home[data-card="inline"]
  :is(.lx-today__title, .lx-hook, .lx-needs, .lx-changed__words) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* what changed, as one short note under the card */
.lx-home[data-card="inline"] .program-changed {
  display: block;
  margin: 0;
}
.lx-changed__words {
  margin: 0;
  -webkit-line-clamp: 2;
}
.lx-home[data-card="inline"] .lx-changed__words {
  -webkit-line-clamp: 2;
}
.lx-home[data-card="inline"] .program-changed-label {
  margin-inline-end: 6px;
}
.lx-home[data-fit] .lx-picture {
  aspect-ratio: 2 / 1;
}
.lx-home[data-fit] .lx-picture[data-empty] {
  aspect-ratio: 3 / 1;
}
.lx-home[data-fit] :is(.lx-today__title, .lx-hook, .lx-needs) {
  -webkit-line-clamp: 2;
}
.lx-home[data-fit="tight"] .lx-picture,
.lx-home[data-fit="tight"] .lx-picture[data-empty] {
  aspect-ratio: 3 / 1;
}
.lx-home[data-fit="tight"] :is(.lx-needs, .lx-changed__words) {
  -webkit-line-clamp: 1;
}
.lx-home[data-fit="tight"] .lx-today__body {
  gap: 6px;
}

/* ------------------------------------------------------------------ *
   Right to left (Arabic: <html dir="rtl">). The page mirrors through the
   logical properties above. What draws a thing in the world keeps its
   own left-to-right geometry: the keyboard, the neck, the board and its
   moves, the score and its transport, formulas, plots and diagrams, the
   step grid, the pulse's drum, tuner and strip, the timer's dial, the
   compare slider, the paper you draw on and the illustrations.
 * ------------------------------------------------------------------ */
.lx-figure__art,
.lx-notation__score,
.player,
.katex,
.lx-input__formula,
.lx-keys,
.lx-frets,
.lx-board,
.lx-chess__line,
.lx-seq__grid,
.lx-play__dots,
.lx-pitch__reading,
.lx-pulse__stage,
.lx-pulse__meter,
.lx-pulse__strip,
.lx-timer__digits,
.lx-compare__slider,
.lx-drawing__canvas,
.sketch,
.connect-address {
  direction: ltr;
}
/* A formula inside a line of Arabic stays one piece. */
.katex {
  unicode-bidi: isolate;
}
/* Arrows that say where you go point the reading way. */
[dir="rtl"] button.lx-nav__back svg,
[dir="rtl"] button.lx-nav__next svg,
[dir="rtl"] .practice-arrow,
[dir="rtl"] button.lx-teacher__button::after {
  transform: scaleX(-1);
}
[dir="rtl"] .practice-row:hover .practice-arrow,
[dir="rtl"] button.week-row:hover .practice-arrow {
  transform: translateX(-4px) scaleX(-1);
}
/* Each paragraph lies the way its own words run: an English lesson in an
   Arabic player, an Arabic one in an English player, "1 / 6" left to right. */
:is(h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption) {
  unicode-bidi: plaintext;
}
/* Arabic letters join, Devanagari and Bengali hang from one headline,
   Chinese keeps its own even rhythm: tracking would pull them apart. */
html:is([dir="rtl"], :lang(hi), :lang(bn), :lang(zh)) body * {
  letter-spacing: normal !important;
}

/* ================================================================== *
   v3 · the practice deck (one appended block; nothing above changes).
   A planned session opens on its picture, its hook, when and where, and
   what to have with a tick each. Pictures keep their box while they
   load. The last card becomes the win: a stamp lands on a print.
 * ================================================================== */

/* A picture's box is reserved from its shape before its bytes are read:
   nothing around it moves while it loads. */
.lx-block__show > .media-block > .media-slot[data-ratio],
.media-block--hero > .media-slot {
  aspect-ratio: var(--lx-ar, 16 / 9);
  width: 100%;
  overflow: hidden;
  border-radius: var(--lx-radius-l);
  background: var(--lx-well);
  box-shadow: var(--lx-sheet-shadow);
}
.lx-block__show > .media-block > .media-slot[data-ratio] > img.media,
.media-block--hero > .media-slot > img.media {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}
/* on a card a picture shares the room: no taller than a figure may be
   (the deck sets --lx-pic lower on a card that would outgrow the frame) */
.lx-slide .lx-block__show > .media-block > .media-slot[data-ratio] {
  width: min(100%, calc(var(--lx-pic, var(--lx-fig)) * var(--lx-ar)));
  margin-inline: auto;
}
.media-slot[data-loaded] > img.media {
  animation: lx-picture-in var(--lx-t3) var(--lx-ease) both;
}
@keyframes lx-picture-in {
  from {
    opacity: 0;
  }
}

/* the picture a practice opens with: always the cover's own 16:9, so every
   cover sits the same; cut at its middle when the card needs the room
   (the deck sets --lx-hero-h) */
.media-block--hero {
  gap: 0;
}
.media-block--hero > .media-slot {
  aspect-ratio: 16 / 9;
  max-height: var(--lx-hero-h, 420px);
}
/* its place is kept while it is fetched, too */
.media-block--hero > .media-slot:empty {
  display: block;
}
/* on the web page it opens the practice above its day and title */
main:not(.is-widget) > .media-block--hero {
  margin-bottom: var(--lx-5);
}
.media-block--hero > .media-foot:not(:has(a)) {
  display: none;
}

/* the cover of a planned session */
.lx-cover[data-plan] {
  gap: 8px;
  padding-top: 2px;
}
.lx-cover[data-plan] > .media-block--hero {
  margin-bottom: 4px;
}
.lx-cover[data-plan] h1.compact {
  font-size: clamp(25px, 6.9vw, 32px);
  line-height: 1.06;
  margin: 0;
}
.lx-cover__hook {
  margin: 0 0 var(--lx-3);
  max-width: 34em;
  font: 500 17px/1.4 var(--lx-sans);
  letter-spacing: -0.008em;
  color: var(--lx-ink);
  text-wrap: pretty;
}
.lx-cover__facts {
  margin: 0 0 var(--lx-3);
  font-size: 14px;
  line-height: 1.45;
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
/* the moment it hangs on has the first line; how long and where follow */
.lx-cover__fact[data-fact="when"] {
  display: block;
  font-weight: 600;
  color: var(--lx-ink-2);
}
.lx-cover__dot {
  margin-inline: 0.45em;
}
.lx-cover > .lx-cover__hook,
.lx-cover > .lx-cover__facts {
  margin: 0;
}
/* the bar's minutes are said on the cover, with when and where */
main:has(.lx-carousel[data-slide="cover"] .lx-cover[data-plan]) .lx-bar__meta {
  visibility: hidden;
}

/* what to have at hand, a tick each ("have it"): a quiet list that runs
   like a line of words, so the picture above keeps its height */
.lx-needs .lx-lookfor__list,
.lx-slide .lx-needs {
  gap: 0 14px;
}
.lx-need.lx-lookfor__item {
  gap: 7px;
  min-height: 28px;
  padding: 2px 0;
  border-radius: var(--lx-radius-s);
  background: none;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.3;
  color: var(--lx-ink-2);
}
.lx-need.lx-lookfor__item:hover {
  box-shadow: none;
  color: var(--lx-ink);
}
.lx-need.lx-lookfor__item:has(input:checked) {
  background: none;
  color: var(--lx-ink);
}
.lx-need.lx-lookfor__item input {
  width: 17px;
  height: 17px;
}
.lx-need.lx-lookfor__item input:checked {
  background-size: 17px;
}
.lx-need__note {
  margin-inline-start: -2px;
  color: var(--lx-ink-3);
}
.lx-need__note::before {
  content: "· ";
}
.lx-cover > .lx-needs {
  margin-top: 2px;
}
/* a prep session's list to get: named here, ticked on its own card */
.lx-cover__list {
  margin: 0 0 var(--lx-3);
  max-width: 34em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lx-ink-2);
}
.lx-cover > .lx-cover__list {
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--lx-rule);
}
/* a cover without a picture opens on words: its day, its goal under the title */
.lx-cover[data-plan] > .step-head {
  margin-top: 4px;
}
.lx-cover[data-plan] > .step-goal {
  margin: -2px 0 2px;
}
/* everything is here: the label says so in the tick's own green */
.lx-needs:not(:has(input:not(:checked))) > .lx-kicker {
  color: var(--lx-moss);
}

/* the win: the last card, once the session is kept */
.session-end.is-won {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.session-end.is-won::before {
  content: none;
}
main:not(.is-widget) .session-end.is-won {
  margin-top: var(--lx-7);
}
.lx-won {
  display: grid;
  justify-items: center;
  gap: 5px;
  max-width: 34em;
  margin-inline: auto;
  padding: 10px 0 2px;
  text-align: center;
}
.lx-won__mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  margin-bottom: 12px;
}
/* their own picture, or the practice's cover, as a print on the table */
.lx-won__print {
  box-sizing: border-box;
  height: 116px;
  max-width: 216px;
  aspect-ratio: var(--lx-ar, 4 / 3);
  margin: 0;
  padding: 4px;
  rotate: -2.5deg;
  background: var(--lx-sheet);
  border-radius: 7px;
  box-shadow: var(--lx-sheet-shadow);
}
.lx-won__print > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: var(--lx-well);
}
/* the stamp: a coral seal, a second ink a little off register */
.lx-stamp {
  --lx-butter: #ffd35c;
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  rotate: -9deg;
}
/* it takes only the print's corner (their own photo stays theirs), and
   print and stamp are centred together */
.lx-won__print + .lx-stamp {
  position: absolute;
  inset-inline-end: -54px;
  bottom: -18px;
  width: 78px;
  height: 78px;
}
.lx-won__mark:has(> .lx-won__print) {
  margin-bottom: 20px;
  margin-inline-end: 54px;
}
.lx-stamp > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lx-stamp__under {
  fill: var(--lx-butter);
}
.lx-stamp__ink {
  fill: var(--lx-terra);
}
.lx-stamp__ring {
  fill: none;
  stroke: rgb(255 255 255 / 0.62);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1.5 4.2;
}
.lx-stamp__check {
  fill: none;
  stroke: var(--lx-on-terra);
  stroke-width: 8.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lx-stamp__star {
  fill: var(--lx-on-terra);
  stroke: var(--lx-on-terra);
  stroke-width: 3;
  stroke-linejoin: round;
}
.lx-won__kicker {
  margin: 0;
  color: var(--lx-terra-ink);
}
.lx-won__title {
  margin: 0;
  font: 800 clamp(23px, 6.4vw, 30px) / 1.08 var(--lx-sans);
  letter-spacing: -0.028em;
  color: var(--lx-ink);
  text-wrap: balance;
}
.lx-won__title:focus {
  outline: none;
}
.lx-won__count {
  margin: 1px 0 0;
  font: 600 13.5px/1.4 var(--lx-sans);
  color: var(--lx-ink-3);
  font-variant-numeric: tabular-nums;
}
/* the count ticks up once: where it stood, then where this win puts it */
.lx-won__count[data-tick] {
  display: grid;
  justify-items: center;
}
.lx-won__count[data-tick] > span {
  grid-area: 1 / 1;
}
.lx-won__count > .lx-won__was {
  visibility: hidden;
}
.lx-won[data-state="landing"] .lx-won__count > .lx-won__was {
  animation: lx-count-out 200ms var(--lx-ease) 700ms both;
}
.lx-won[data-state="landing"] .lx-won__count[data-tick] > .lx-won__now {
  animation: lx-count-in 260ms var(--lx-spring) 700ms both;
}
@keyframes lx-count-out {
  from {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  to {
    visibility: visible;
    opacity: 0;
    transform: translateY(-7px);
  }
}
@keyframes lx-count-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}
/* their line, in their ink */
.lx-won__line {
  margin: 6px 0 0;
  font-family: var(--lx-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.34;
  letter-spacing: -0.006em;
  color: var(--lx-hand);
  text-wrap: pretty;
}
.lx-won__rows {
  display: grid;
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid var(--lx-rule-2);
  text-align: start;
}
.lx-won__row {
  display: grid;
  gap: 1px;
  padding: 8px 0;
  border-bottom: 1px solid var(--lx-rule);
}
.lx-won__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.lx-won__row > * {
  margin: 0;
}
.lx-won__row > .lx-kicker {
  margin-bottom: 2px;
}
.lx-won__try {
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--lx-ink-2);
}
.lx-won__next {
  font: 700 15.5px/1.3 var(--lx-sans);
  letter-spacing: -0.012em;
  color: var(--lx-ink);
}
.lx-won__when {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--lx-ink-3);
}

/* It lands once: one spring, well under a second; the words follow it in. */
.lx-won[data-state="landing"] .lx-stamp {
  animation:
    lx-stamp-land 620ms var(--lx-spring) 120ms both,
    lx-stamp-ink 140ms linear 120ms both;
}
.lx-won[data-state="landing"] .lx-stamp::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px solid var(--lx-terra);
  border-radius: 50%;
  opacity: 0;
  animation: lx-stamp-press 480ms var(--lx-ease) 330ms both;
}
.lx-won[data-state="landing"] .lx-won__print {
  animation: lx-won-rise 320ms var(--lx-ease) both;
}
.lx-won[data-state="landing"] > :not(.lx-won__mark) {
  animation: lx-won-rise 320ms var(--lx-ease) both;
  animation-delay: calc(300ms + var(--lx-i, 0) * 60ms);
}
.lx-won > :nth-child(3) {
  --lx-i: 1;
}
.lx-won > :nth-child(4) {
  --lx-i: 2;
}
.lx-won > :nth-child(5) {
  --lx-i: 3;
}
.lx-won > :nth-child(n + 6) {
  --lx-i: 4;
}
@keyframes lx-stamp-land {
  from {
    transform: scale(2.3) rotate(-14deg);
  }
}
@keyframes lx-stamp-ink {
  from {
    opacity: 0;
  }
}
@keyframes lx-stamp-press {
  from {
    opacity: 0.55;
    transform: scale(0.82);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes lx-won-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* Without motion the win is simply there: the stamp at rest. */
@media (prefers-reduced-motion: reduce) {
  .lx-won[data-state="landing"] *,
  .lx-won[data-state="landing"] *::after {
    animation: none !important;
  }
  .media-slot[data-loaded] > img.media {
    animation: none !important;
  }
}