/* Learn home (Phase 0) — new front door, mobile-first.
 * Scoped under .lh so it never collides with landing.css / crossword.css.
 * The nav (_nav.html) keeps its own styling from landing.css. */

.lh {
    --lh-ink: #1b2a4a;
    --lh-muted: #5b6577;
    --lh-faint: #98a0b0;
    --lh-line: #e7e3d8;
    --lh-blue: #24527e;
    --lh-teal: #0f766e;
    --lh-teal-bg: #dcefec;
    --lh-card: #ffffff;
    --lh-surface: #faf8f2;

    --lh-def-bg: #e4f1e6;  --lh-def-fg: #2a7d4f;
    --lh-ind-bg: #fbe9d4;  --lh-ind-fg: #c06a1c;
    --lh-fod-bg: #e7eef9;  --lh-fod-fg: #2f6db0;

    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px 48px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--lh-ink);
    -webkit-font-smoothing: antialiased;
}

.lh a { text-decoration: none; color: inherit; }

/* ===== Hero ===== */
.lh-hero { padding: 26px 4px 8px; }
.lh-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--lh-blue); margin-bottom: 8px;
}
.lh-h1 {
    margin: 0; font-size: 28px; line-height: 1.18; letter-spacing: -0.5px; font-weight: 700;
    color: var(--lh-ink);
}
.lh-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--lh-muted); }
.lh-sub b { color: var(--lh-ink); font-weight: 600; }

/* ===== Dissection ===== */
.lh-dissection {
    position: relative;
    margin: 18px 0 4px; background: var(--lh-card);
    border: 1px solid var(--lh-line); border-radius: 18px; padding: 22px 18px;
    box-shadow: 0 12px 34px rgba(27,42,74,0.07);
    overflow: hidden;
    /* Steady box: one height for the whole card so stepping beats / switching
     * cards never resizes it (the reserved caption + tray heights below do the
     * rest). Tour cards sink their nav to the bottom; the single-screen menu +
     * narrative cards centre their content. */
    display: flex; flex-direction: column; min-height: 432px;
}
.lh-dissection:not(.is-menu):not(.is-narrative) > .lh-dots { margin-top: auto; }
.lh-dissection.is-menu,
.lh-dissection.is-narrative { justify-content: center; }
.lh-diss-label {
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lh-diss-left { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lh-faint); }
.lh-eye { color: var(--lh-blue); font-size: 11px; }
.lh-type {
    font-size: 12px; font-weight: 600; color: var(--lh-teal);
    background: var(--lh-teal-bg); padding: 3px 11px; border-radius: 20px;
}
.lh-emoji {
    flex: 0 0 46px; font-size: 34px; line-height: 1; height: 48px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.5);
    transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.lh-emoji.show { opacity: 1; transform: scale(1); }
.lh-clue { font-size: 23px; line-height: 1.6; text-align: center; color: var(--lh-ink); }
.lh-w {
    display: inline-block; padding: 2px 6px; border-radius: 6px;
    transition: background .45s, color .45s, opacity .55s ease, transform .55s ease;
}
.lh-enum { color: var(--lh-faint); }
/* Per-letter spans (needed so the hidden reveal can address single letters). */
.lh-l { transition: background .3s, color .3s; border-radius: 3px; }
.lh-l.is-hot { background: var(--lh-teal-bg); color: var(--lh-teal); }
/* A letter in flight from the clue text into the grid (hidden reveal). */
.lh-fly {
    position: absolute; display: flex; align-items: center; justify-content: center;
    font-size: 23px; font-weight: 700; color: var(--lh-teal);
    background: var(--lh-teal-bg); border-radius: 8px; z-index: 6;
    box-shadow: 0 8px 18px rgba(15,118,110,0.28); will-change: transform;
}
.lh-w.is-def { background: var(--lh-def-bg); color: var(--lh-def-fg); }
.lh-w.is-ind { background: var(--lh-ind-bg); color: var(--lh-ind-fg); }
.lh-w.is-fodder { background: var(--lh-fod-bg); color: var(--lh-fod-fg); }
/* Spotlight: dim the rest, lift the word being discussed. */
.lh-clue.is-focusing .lh-w:not(.is-focus) { opacity: .26; }
.lh-w.is-focus { transform: scale(1.09); }
/* Brief emphasis pulse used by the double-definition reveal. */
.lh-w.is-pulse { transform: scale(1.16); }

/* Fixed height + vertical centring so the card never reflows between beats.
 * Flex centres a SINGLE inner wrapper — the sentence text must live inside it,
 * or flex would treat each text run + <b> as separate items and break the flow. */
.lh-caption {
    min-height: 148px; display: flex; align-items: center; justify-content: center;
    margin: 16px 0 6px;
}
.lh-caption-text {
    font-size: 17px; line-height: 1.5; text-align: center;
    color: #2a3552; font-weight: 500;
}
.lh-caption-text b { font-weight: 700; color: var(--lh-ink); }

/* Answer row: emoji | crossword grid | balancing spacer (keeps grid centred) */
.lh-answer-row {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 18px 0 6px;
}
.lh-row-spacer { flex: 0 0 46px; }

/* Crossword-style answer grid — always visible, empty until the letters land */
.lh-grid { display: flex; gap: 7px; }
.lh-cell {
    width: 44px; height: 48px; display: flex; align-items: center; justify-content: center;
    font-size: 23px; font-weight: 700; color: var(--lh-ink);
    background: #fff; border: 2px solid #c4ccd8; border-radius: 5px;
    transition: background .4s, border-color .4s, color .4s;
}
.lh-cell.is-filled {
    background: var(--lh-def-bg); border-color: #aed7ba; color: var(--lh-def-fg);
}

/* Fodder tray — loose letters that fly into the grid */
.lh-tray {
    display: flex; justify-content: center; gap: 7px; min-height: 48px;
    margin: 12px 0 4px; opacity: 0; transition: opacity .45s ease;
}
.lh-tray.show { opacity: 1; }
.lh-tile {
    width: 44px; height: 48px; display: flex; align-items: center; justify-content: center;
    font-size: 23px; font-weight: 600; border-radius: 8px;
    position: relative; will-change: transform;
}
.lh-tile.is-fodder { background: var(--lh-fod-bg); color: var(--lh-fod-fg); }
.lh-tile.is-inner { background: #fbe3da; color: #c0502a; }
.lh-tile.is-cut { background: #fcebeb; color: #a32d2d; z-index: 4; }
.lh-tile.is-shuffling {
    background: var(--lh-teal-bg); color: var(--lh-teal); z-index: 3;
    box-shadow: 0 8px 18px rgba(15,118,110,0.28);
}
/* '+' separator between charade pieces in the tray */
.lh-sep {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 48px; font-size: 22px; font-weight: 500; color: var(--lh-faint);
}
/* Gap between the outer and inner groups in a container tray. */
.lh-gap { width: 16px; }

/* Progress dots — one per clue type in the looping deck. */
.lh-dots { display: flex; justify-content: center; gap: 7px; min-height: 8px; margin-top: 14px; }
.lh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lh-line); transition: all .3s; }
.lh-dot.active { width: 20px; border-radius: 4px; background: var(--lh-teal); }

/* ===== Menu hub (first page: the three ways in) ===== */
/* The hub is self-contained: heading + a looping explainer + the three buttons.
 * No clue, grid, tray, label or Next/Restart — just the entry points. */
.lh-dissection.is-menu .lh-diss-label,
.lh-dissection.is-menu .lh-clue,
.lh-dissection.is-menu .lh-answer-row,
.lh-dissection.is-menu .lh-tray,
.lh-dissection.is-menu .lh-controls { display: none; }
/* Reserve the longest explainer's height so the looping beats don't jump. */
.lh-dissection.is-menu .lh-caption { min-height: 88px; margin: 6px 0 14px; }

/* Heading moved inside the card — shown on the hub only. */
.lh-menu-head { display: none; }
.lh-dissection.is-menu .lh-menu-head { display: block; text-align: center; margin-bottom: 4px; }
.lh-menu-head .lh-h1 { margin: 0; font-size: 22px; line-height: 1.2; }
.lh-menu-head .lh-sub { margin: 8px 0 0; font-size: 14.5px; }

.lh-menu { display: none; }
.lh-dissection.is-menu .lh-menu {
    display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px;
}
.lh-menu-opt {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 14px; border-radius: 14px; text-align: left;
    font: inherit; color: inherit; cursor: pointer;
    background: var(--lh-card); border: 1px solid var(--lh-line);
    opacity: .62;
    transition: opacity .55s ease, background .55s ease, border-color .55s ease,
                box-shadow .55s ease, transform .55s ease, filter .12s ease;
}
.lh-menu-opt:hover { border-color: #c9cfdb; }
.lh-menu-opt:active { filter: brightness(.98); }
.lh-menu-opt-icon { font-size: 22px; flex: 0 0 auto; }
.lh-menu-opt-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lh-menu-opt-title { font-size: 16px; font-weight: 600; }
.lh-menu-opt-sub { font-size: 12.5px; color: var(--lh-muted); line-height: 1.35; }
.lh-menu-opt-chev { color: var(--lh-faint); font-size: 22px; line-height: 1; }
/* All three buttons are visually equal so the moving spotlight is the ONLY
 * emphasis. The option being explained comes to full strength (the others
 * dim), tints, lifts and rings — in sync with the caption. */
.lh-menu-opt.is-active {
    opacity: 1; background: var(--lh-teal-bg);
    border-color: var(--lh-teal); box-shadow: 0 8px 20px rgba(15,118,110,0.22);
    transform: translateY(-2px);
}
.lh-menu-opt.is-active .lh-menu-opt-title { color: var(--lh-teal); }

/* ===== Narrative card (orientation) — an onboarding card, not an empty box.
 * A single focal emoji in a soft halo leads, the copy sits beneath it, then the
 * controls: clear hierarchy, balanced whitespace, one thing to look at. ===== */
.lh-dissection.is-narrative .lh-diss-label,
.lh-dissection.is-narrative .lh-clue,
.lh-dissection.is-narrative .lh-grid,
.lh-dissection.is-narrative .lh-row-spacer,
.lh-dissection.is-narrative .lh-tray { display: none; }

/* Stack + reorder so the emoji hero sits above the copy (it's after it in DOM). */
.lh-dissection.is-narrative { display: flex; flex-direction: column; text-align: center; }
.lh-dissection.is-narrative .lh-answer-row { order: 1; margin: 14px 0 2px; }
.lh-dissection.is-narrative .lh-caption { order: 2; min-height: 96px; margin: 8px 0 6px; }
.lh-dissection.is-narrative .lh-dots { order: 3; }
.lh-dissection.is-narrative .lh-controls { order: 4; }

/* The focal emoji: big, centred, in a tinted halo. */
.lh-dissection.is-narrative .lh-emoji {
    flex: 0 0 auto; width: 96px; height: 96px; margin: 0 auto; font-size: 46px;
    border-radius: 50%; background: var(--lh-teal-bg);
    box-shadow: 0 10px 26px rgba(15,118,110,0.18);
}
.lh-dissection.is-narrative .lh-caption-text { font-size: 18px; line-height: 1.5; color: var(--lh-ink); }
.lh-dissection.is-narrative .lh-caption-text b { color: var(--lh-teal); }

/* ===== Title beat — announces the next device ===== */
/* A full-card beat: the device name, a tagline, "N of M", and a signature
 * motion previewing the trick. Clue / caption / grid / tray hide while it
 * shows; the pill, dots and controls stay put so the card keeps its shape. */
.lh-title { display: none; }
.lh-dissection.is-title .lh-clue,
.lh-dissection.is-title .lh-caption,
.lh-dissection.is-title .lh-answer-row,
.lh-dissection.is-title .lh-tray { display: none; }
.lh-dissection.is-title .lh-title {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; min-height: 300px; text-align: center;
    animation: lh-title-in .45s ease both;
}
@keyframes lh-title-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.lh-title-stage {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 96px; margin-bottom: 18px;
}
.lh-title-name {
    font-size: 30px; font-weight: 700; color: var(--lh-ink); line-height: 1.15;
    animation: lh-title-in .5s ease .55s both;
}
.lh-title-tag {
    margin-top: 8px; font-size: 16px; color: var(--lh-muted);
    animation: lh-title-in .5s ease .8s both;
}
.lh-title-step {
    margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    color: var(--lh-teal); background: var(--lh-teal-bg); padding: 3px 11px; border-radius: 20px;
    animation: lh-title-in .5s ease 1s both;
}
.lh-title-hint {
    margin-top: 12px; font-size: 13px; color: var(--lh-faint);
    animation: lh-title-in .5s ease 1.3s both;
}

/* Every motion below LOOPS (the beat is user-paced, so the trick replays
 * until the reader taps Next). Each cycle: play the move, hold the finished
 * state, ease back to the start. --lh-cycle is the shared period. */
.lh-title-stage { --lh-cycle: 3.2s; }

/* Stage atoms: small letter tiles, tile groups, word chips. */
.lh-tg { display: inline-flex; gap: 4px; position: relative; }
.lh-tt {
    width: 32px; height: 36px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; border-radius: 7px;
    background: var(--lh-fod-bg); color: var(--lh-fod-fg);
    position: relative; will-change: transform;
}
.lh-tt.is-hot { background: var(--lh-teal-bg); color: var(--lh-teal); }
.lh-tt.is-dim { background: var(--lh-surface); color: var(--lh-faint); }
.lh-tt.is-cut { background: #fcebeb; color: #a32d2d; }
.lh-tplus { font-size: 22px; font-weight: 500; color: var(--lh-faint); margin: 0 4px; }
.lh-tarrow { font-size: 24px; color: var(--lh-faint); margin: 0 8px; }
.lh-tword {
    display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
    border-radius: 9px; font-size: 18px; font-weight: 700; white-space: nowrap;
    background: var(--lh-fod-bg); color: var(--lh-fod-fg);
}

/* scatter (anagram): the tiles fly apart, then settle back into order. */
@keyframes lh-scatter {
    0%, 8%   { transform: none; }
    26%      { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
    44%      { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
    64%, 100% { transform: none; }
}
[data-motion="scatter"] .lh-tt { animation: lh-scatter var(--lh-cycle) cubic-bezier(.4,0,.2,1) .2s infinite both; }
[data-motion="scatter"] .lh-tt:nth-child(1) { --sx: 60px;  --sy: -26px; --sr: 18deg; }
[data-motion="scatter"] .lh-tt:nth-child(2) { --sx: -40px; --sy: 22px;  --sr: -12deg; }
[data-motion="scatter"] .lh-tt:nth-child(3) { --sx: 90px;  --sy: 18px;  --sr: 25deg; }
[data-motion="scatter"] .lh-tt:nth-child(4) { --sx: -80px; --sy: -20px; --sr: -22deg; }
[data-motion="scatter"] .lh-tt:nth-child(5) { --sx: 30px;  --sy: 30px;  --sr: 9deg; }
[data-motion="scatter"] .lh-tt:nth-child(6) { --sx: -100px; --sy: 8px;  --sr: 16deg; }
[data-motion="scatter"] .lh-tt:nth-child(7) { --sx: -20px; --sy: -30px; --sr: -20deg; }

/* mirror (reversal): rendered in final order, each tile starts at its
 * mirrored position (so the row reads backwards) and slides home. */
@keyframes lh-mirror {
    0%, 22%   { transform: translateX(calc((var(--n) - 1 - 2 * var(--i)) * 36px)); }
    52%, 82%  { transform: none; }
    100%      { transform: translateX(calc((var(--n) - 1 - 2 * var(--i)) * 36px)); }
}
[data-motion="mirror"] .lh-tt { animation: lh-mirror var(--lh-cycle) cubic-bezier(.65,0,.35,1) .1s infinite both; }

/* drop (deletion): the cut tile lifts, tips and falls away, then fades back. */
@keyframes lh-drop {
    0%        { transform: none; opacity: 0; }
    12%, 34%  { transform: none; opacity: 1; }
    46%       { transform: translateY(-14px) rotate(-8deg); opacity: 1; }
    68%, 100% { transform: translateY(70px) rotate(28deg); opacity: 0; }
}
[data-motion="drop"] .lh-tt.is-cut { animation: lh-drop var(--lh-cycle) ease-in .2s infinite both; }

/* emerge (hidden word): a grey row; the hidden run lights up and lifts. */
@keyframes lh-emerge {
    0%, 20%   { background: var(--lh-surface); color: var(--lh-faint); transform: none; }
    40%       { background: var(--lh-teal-bg); color: var(--lh-teal); transform: none; }
    58%, 82%  { background: var(--lh-teal-bg); color: var(--lh-teal); transform: translateY(-12px) scale(1.08); }
    100%      { background: var(--lh-surface); color: var(--lh-faint); transform: none; }
}
[data-motion="emerge"] .lh-tt.is-hot {
    animation: lh-emerge var(--lh-cycle) ease infinite both;
    animation-delay: calc(.15s + var(--i) * .06s);
}

/* shrink (conventions): the letters that don't survive collapse away. */
@keyframes lh-shrink {
    0%, 25%   { width: 32px; opacity: 1; transform: none; margin-left: 0; }
    52%, 80%  { width: 0; opacity: 0; transform: scale(.4); margin-left: -4px; }
    100%      { width: 32px; opacity: 1; transform: none; margin-left: 0; }
}
[data-motion="shrink"] .lh-tt.is-gone { animation: lh-shrink var(--lh-cycle) ease-in-out .2s infinite both; overflow: hidden; }
[data-motion="shrink"] .lh-tt.is-kept { background: var(--lh-teal-bg); color: var(--lh-teal); }

/* join (charade): the two pieces slide in from either side and click together. */
@keyframes lh-join-left  { 0% { transform: translateX(-90px); opacity: 0; } 25% { opacity: 1; } 40%, 82% { transform: none; opacity: 1; } 100% { transform: translateX(-90px); opacity: 0; } }
@keyframes lh-join-right { 0% { transform: translateX(90px);  opacity: 0; } 25% { opacity: 1; } 40%, 82% { transform: none; opacity: 1; } 100% { transform: translateX(90px);  opacity: 0; } }
@keyframes lh-plus-out   { 0%, 30% { opacity: 1; width: 22px; } 44%, 84% { opacity: 0; width: 0; margin: 0; } 100% { opacity: 1; width: 22px; } }
[data-motion="join"] .lh-tg-left  { animation: lh-join-left var(--lh-cycle) cubic-bezier(.34,1.3,.64,1) .1s infinite both; }
[data-motion="join"] .lh-tg-right { animation: lh-join-right var(--lh-cycle) cubic-bezier(.34,1.3,.64,1) .1s infinite both; }
[data-motion="join"] .lh-tplus { display: inline-block; text-align: center; animation: lh-plus-out var(--lh-cycle) ease .1s infinite both; }

/* insert (container): the outer word parts and the inner word drops into the gap. */
@keyframes lh-open-a { 0%, 18% { transform: translateX(calc(var(--n) * 18px)); } 42%, 82% { transform: none; } 100% { transform: translateX(calc(var(--n) * 18px)); } }
@keyframes lh-open-b { 0%, 18% { transform: translateX(calc(var(--n) * -18px)); } 42%, 82% { transform: none; } 100% { transform: translateX(calc(var(--n) * -18px)); } }
@keyframes lh-fall-in { 0%, 34% { transform: translateY(-56px); opacity: 0; } 56%, 82% { transform: none; opacity: 1; } 100% { transform: translateY(-56px); opacity: 0; } }
[data-motion="insert"] .lh-tg-outer-a { animation: lh-open-a var(--lh-cycle) cubic-bezier(.4,0,.2,1) .1s infinite both; }
[data-motion="insert"] .lh-tg-outer-b { animation: lh-open-b var(--lh-cycle) cubic-bezier(.4,0,.2,1) .1s infinite both; }
[data-motion="insert"] .lh-tg-inner { animation: lh-fall-in var(--lh-cycle) cubic-bezier(.34,1.3,.64,1) .1s infinite both; }
[data-motion="insert"] .lh-tg-inner .lh-tt { background: #fbe3da; color: #c0502a; }

/* flip (cryptic definition) + flip2 (double definition): a card turns over. */
.lh-tflip {
    position: relative; width: 64px; height: 64px; perspective: 600px;
    display: inline-block;
}
.lh-tflip-card { width: 112px; height: 52px; }
.lh-tface {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 30px; font-weight: 700;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--lh-fod-bg); color: var(--lh-fod-fg);
}
.lh-tface-word { font-size: 17px; }
.lh-tface-back { transform: rotateY(180deg); background: var(--lh-teal-bg); color: var(--lh-teal); }
/* The card keeps turning the same way: 0 -> 180 (hold) -> 360, so the loop
 * joins seamlessly and the front face is back for the next cycle. */
@keyframes lh-flip-front { 0%, 22% { transform: rotateY(0); } 42%, 78% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes lh-flip-back  { 0%, 22% { transform: rotateY(180deg); } 42%, 78% { transform: rotateY(360deg); } 100% { transform: rotateY(540deg); } }
[data-motion="flip"] .lh-tface-front,
[data-motion="flip2"] .lh-tface-front { animation: lh-flip-front var(--lh-cycle) cubic-bezier(.4,0,.2,1) .2s infinite both; }
[data-motion="flip"] .lh-tface-back,
[data-motion="flip2"] .lh-tface-back { animation: lh-flip-back var(--lh-cycle) cubic-bezier(.4,0,.2,1) .2s infinite both; }
[data-motion="flip2"] .lh-tflip-card .lh-tface { animation-delay: calc(.2s + var(--i) * .3s); }

/* swap (synonym): the clue word is there; its stand-in arrives beside it. */
@keyframes lh-arrive { 0%, 28% { opacity: 0; transform: translateX(-10px) scale(.9); } 48%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-10px) scale(.9); } }
[data-motion="swap"] .lh-tarrow { animation: lh-arrive var(--lh-cycle) ease .2s infinite both; }
[data-motion="swap"] .lh-tword-to {
    background: var(--lh-teal-bg); color: var(--lh-teal);
    animation: lh-arrive var(--lh-cycle) cubic-bezier(.34,1.3,.64,1) .5s infinite both;
}

/* pick (letter selection): the first letter of each word lights up and hops
 * up; the answer row above fills in step with it. */
.lh-tstack { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lh-tg-words { gap: 8px; }
.lh-tword-pick { height: 36px; padding: 0 12px; font-size: 16px; }
.lh-tw-first { display: inline-block; border-radius: 4px; padding: 0 2px; margin-right: 1px; }
@keyframes lh-hop {
    0%, 18%   { transform: none; background: transparent; color: inherit; }
    32%       { transform: translateY(-9px); background: var(--lh-teal-bg); color: var(--lh-teal); }
    44%, 80%  { transform: none; background: var(--lh-teal-bg); color: var(--lh-teal); }
    100%      { transform: none; background: transparent; color: inherit; }
}
@keyframes lh-fill-tile { 0%, 28% { background: var(--lh-surface); color: transparent; } 46%, 80% { background: var(--lh-teal-bg); color: var(--lh-teal); } 100% { background: var(--lh-surface); color: transparent; } }
[data-motion="pick"] .lh-tw-first { animation: lh-hop var(--lh-cycle) ease infinite both; animation-delay: calc(.2s + var(--i) * .25s); }
[data-motion="pick"] .lh-tg-target .lh-tt { animation: lh-fill-tile var(--lh-cycle) ease infinite both; animation-delay: calc(.35s + var(--i) * .25s); }

/* split (how a cryptic works): one phrase parts along a seam into its two halves. */
.lh-tsplit { display: flex; align-items: flex-start; gap: 0; }
.lh-thalf { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lh-thalf .lh-tword { font-size: 16px; height: 38px; padding: 0 12px; }
.lh-thalf-right .lh-tword { background: var(--lh-def-bg); color: var(--lh-def-fg); }
.lh-ttag { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lh-faint); }
.lh-tseam { width: 2px; height: 38px; background: var(--lh-line); border-radius: 1px; margin: 0; }
@keyframes lh-part-left  { 0%, 20% { transform: translateX(6px); } 44%, 82% { transform: translateX(-6px); } 100% { transform: translateX(6px); } }
@keyframes lh-part-right { 0%, 20% { transform: translateX(-6px); } 44%, 82% { transform: translateX(6px); } 100% { transform: translateX(-6px); } }
@keyframes lh-seam { 0%, 20% { opacity: 0; transform: scaleY(0); } 44%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scaleY(0); } }
@keyframes lh-tag-in { 0%, 34% { opacity: 0; } 50%, 82% { opacity: 1; } 100% { opacity: 0; } }
[data-motion="split"] .lh-thalf-left  { animation: lh-part-left var(--lh-cycle) cubic-bezier(.4,0,.2,1) .2s infinite both; }
[data-motion="split"] .lh-thalf-right { animation: lh-part-right var(--lh-cycle) cubic-bezier(.4,0,.2,1) .2s infinite both; }
[data-motion="split"] .lh-tseam { animation: lh-seam var(--lh-cycle) ease .2s infinite both; }
[data-motion="split"] .lh-ttag { animation: lh-tag-in var(--lh-cycle) ease .2s infinite both; }

@media (prefers-reduced-motion: reduce) {
    .lh-title-stage *, .lh-title-stage,
    .lh-dissection.is-title .lh-title, .lh-title-name, .lh-title-tag, .lh-title-step, .lh-title-hint {
        animation-duration: .01s !important; animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
    }
}

/* ===== Player controls (user-paced Next / Restart) ===== */
.lh-controls { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.lh-ctrl {
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    padding: 9px 18px; border-radius: 10px; border: 1px solid var(--lh-line);
    background: #fff; color: var(--lh-muted);
    transition: filter .12s ease, background .12s ease, color .12s ease, opacity .12s ease;
}
.lh-ctrl:active { transform: scale(.98); }
.lh-ctrl-restart:hover { background: var(--lh-surface); }
.lh-ctrl-next { margin-left: auto; background: var(--lh-teal); border-color: var(--lh-teal); color: #fff; }
.lh-ctrl-next:hover { filter: brightness(1.12); }
.lh-ctrl[disabled] { opacity: .45; cursor: default; }

/* ===== Two-path CTAs ===== */
.lh-ctas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px;
}
.lh-cta {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 66px; padding: 10px; border-radius: 14px; text-align: center;
    transition: transform .12s ease, filter .12s ease;
}
.lh-cta:active { transform: scale(0.985); }
.lh-cta-title { font-size: 16px; font-weight: 600; }
.lh-cta-sub { font-size: 11.5px; opacity: .85; }
/* Higher specificity than `.lh a` so the white text actually applies. */
.lh a.lh-cta-learn { background: var(--lh-teal); color: #fff; }
.lh a.lh-cta-learn:hover { filter: brightness(1.16); }
.lh a.lh-cta-hone { background: var(--lh-blue); color: #fff; }
.lh a.lh-cta-hone:hover { filter: brightness(1.08); }

/* ===== Where to start ===== */
.lh-where {
    display: flex; align-items: center; gap: 12px; margin: 14px 0 4px;
    background: var(--lh-fod-bg); border-radius: 14px; padding: 13px 14px;
}
.lh-where-icon { font-size: 20px; color: var(--lh-blue); }
.lh-where-text { flex: 1; display: flex; flex-direction: column; }
.lh-where-title { font-size: 14.5px; font-weight: 600; color: var(--lh-fod-fg); }
.lh-where-sub { font-size: 12.5px; color: var(--lh-fod-fg); opacity: .85; }
.lh-where-chev { color: var(--lh-blue); font-size: 22px; line-height: 1; }

/* ===== Section labels ===== */
.lh-section-label { font-size: 13px; color: var(--lh-faint); margin: 22px 0 14px; }

/* ===== Journey ===== */
.lh-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.lh-steps::before {
    content: ""; position: absolute; left: 18px; top: 16px; bottom: 16px;
    width: 2px; background: var(--lh-line);
}
.lh-step {
    position: relative; display: flex; align-items: center; gap: 13px; padding: 7px 0;
}
.lh-step-dot {
    z-index: 1; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    background: var(--lh-ink); color: #fff; border: 1px solid var(--lh-line);
}
.lh-step-dot.lh-locked { background: var(--lh-surface); color: var(--lh-faint); }
.lh-step-text { flex: 1; display: flex; flex-direction: column; }
.lh-step-title { font-size: 15px; font-weight: 600; color: var(--lh-muted); }
.lh-step-sub { font-size: 12.5px; color: var(--lh-faint); }
.lh-step-now .lh-step-title { color: var(--lh-ink); }
.lh-step-now .lh-step-dot { background: var(--lh-teal); }
.lh-step-badge {
    font-size: 11.5px; font-weight: 600; color: var(--lh-teal);
    background: var(--lh-teal-bg); padding: 3px 10px; border-radius: 20px;
}

/* ===== Explore ===== */
.lh-explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lh-explore-card {
    display: flex; flex-direction: column; gap: 4px; padding: 14px;
    background: var(--lh-card); border: 1px solid var(--lh-line); border-radius: 14px;
    transition: border-color .12s ease;
}
.lh-explore-card:hover { border-color: #c9cfdb; }
.lh-explore-icon { font-size: 22px; }
.lh-explore-title { font-size: 14.5px; font-weight: 600; margin-top: 4px; }
.lh-explore-sub { font-size: 12.5px; color: var(--lh-muted); line-height: 1.4; }

/* ===== Coming-soon stub ===== */
.lh-soon { margin-top: 18px; }
.lh-soon-text {
    font-size: 15px; line-height: 1.5; color: var(--lh-muted); text-align: center;
    margin: 0 0 14px;
}
.lh-soon .lh-cta { min-height: 64px; }

@media (min-width: 600px) {
    .lh-h1 { font-size: 32px; }
}