/*
  LN6: the immersive lesson blocks (scene, explore, sort, build, estimate, calculator, memory, trace, listen,
  wordbyword, constellation, habit, poll, story, reveal), "Try it today" and "Go deeper", the sound switch, screen
  transitions and the celebrations of each look. Colours come from the world (worlds.css) and the look (teen.css, kids.css);
  every block works light and dark, on a phone, right to left, and with less motion (at the end of this file).
*/

/* ---------- Shared ---------- */
[data-ln-block], .ln-end, .ln-quiz .ln-screen { position: relative; }
.ln-x.is-live > .ln-x-static, .ln-x.is-live .ln-x-static { display: none; }
/* The blocks' own display rules never beat "hidden". */
:is(.ln-x, .ln-wbw, .ln-scene, .ln-habit, .ln-today, .ln-listen-bar) [hidden] { display: none !important; }
.ln-x-live { display: grid; gap: 14px; }
.ln-x-list { display: grid; gap: 6px; padding-inline-start: 1.2em; list-style: disc; color: var(--ln-ink-2); }
.ln-x-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ln-x-count { display: inline-flex; align-items: baseline; gap: 4px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ln-ink-2); background: color-mix(in srgb, var(--w-accent) 12%, var(--ln-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-accent) 25%, transparent); justify-self: start; }
.ln-x-count b { font-size: 18px; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.ln-x-hintbtn { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.ln-feedback.is-hint { display: grid; background: color-mix(in srgb, var(--w-glow) 22%, var(--ln-card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-glow) 70%, transparent); }
.ln-feedback.is-hint b { color: var(--ln-ink); }
.ln-feedback.is-hint b::before { content: "💡 "; }
.ln-hint-text { font-weight: 600; }
.ln-opt.is-out { opacity: .45; text-decoration: line-through; animation: none; }
.ln-btn--big { min-height: 56px; padding: 14px 28px; font-size: 17px; }

/* ---------- The sound switch in the lesson bar ---------- */
.ln-player-bar { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "close title sound read" "segs segs segs segs"; }
.ln-sound { grid-area: sound; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--ln-card); box-shadow: var(--ln-shadow); color: var(--ln-muted); }
.ln-sound svg { width: 20px; height: 20px; fill: currentColor; }
.ln-sound .ln-sound-on { display: none; }
.ln-sound.is-on { color: var(--w-ink); }
.ln-sound.is-on .ln-sound-on { display: block; }
.ln-sound.is-on .ln-sound-off { display: none; }

/* ---------- Screen transitions: the screen's parts arrive one after another, from the way the learner is going ---------- */
.ln-player.is-live .ln-screen.is-current .ln-screen-in > * { animation: ln-arrive .55s var(--ln-ease) both; }
.ln-player.is-live .ln-screen.is-current .ln-screen-in > :nth-child(2) { animation-delay: 60ms; }
.ln-player.is-live .ln-screen.is-current .ln-screen-in > :nth-child(3) { animation-delay: 120ms; }
.ln-player.is-live .ln-screen.is-current .ln-screen-in > :nth-child(n+4) { animation-delay: 170ms; }
.ln-player[data-going="back"].is-live .ln-screen.is-current .ln-screen-in > * { animation-name: ln-arrive-back; }
@keyframes ln-arrive { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
@keyframes ln-arrive-back { from { opacity: 0; transform: translateY(-10px); filter: blur(3px); } }

/* ---------- Celebrations ---------- */
.ln-cele { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.ln-cele i { position: absolute; left: 50%; top: 45%; width: 10px; height: 10px; border-radius: 2px; background: hsl(var(--h) 90% 60%); opacity: 0; animation: ln-fly 1.25s var(--ln-ease) forwards; }
.ln-cele--star i { width: 16px; height: 16px; border-radius: 0; background: hsl(calc(var(--h) / 6 + 35) 100% 58%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ln-cele--star i:nth-child(3n) { background: hsl(calc(var(--h) / 4 + 300) 90% 70%); border-radius: 50%; clip-path: none; width: 9px; height: 9px; }
.ln-cele--spark i { width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(#22d3ee, #8b5cf6); }
@keyframes ln-fly { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 60px)) rotate(var(--r)) scale(1); } }
.ln-cele-still { position: absolute; top: 8px; inset-inline-end: 10px; font-size: 30px; color: #ffb020; }
.ln-cele-pop { position: absolute; top: 10px; inset-inline-end: 14px; z-index: 6; padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 15px; pointer-events: none; animation: ln-float 1.4s var(--ln-ease) forwards; }
.ln-cele-xp { color: #12081f; background: linear-gradient(135deg, #22d3ee, #a3e635); box-shadow: 0 0 24px -4px #22d3ee; }
.ln-cele-streak { top: 52px; color: #fff; background: linear-gradient(135deg, #f97316, #ec4899); box-shadow: 0 0 24px -4px #f97316; animation-delay: .12s; }
.ln-cele-pop.is-still { animation: none; }
@keyframes ln-float { 0% { opacity: 0; transform: translateY(12px) scale(.8); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.is-glowing { animation: ln-glow 1.7s var(--ln-ease); border-radius: 20px; }
@keyframes ln-glow { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-glow) 55%, transparent), 0 0 46px 6px color-mix(in srgb, var(--w-glow) 40%, transparent); } }

/* ---------- Scene ---------- */
.ln-screen--scene .ln-screen-in { max-width: 1040px; }
.ln-screen--scene .ln-screen-kind { display: none; }
.ln-scene-stage { --px: 0; --py: 0; position: relative; aspect-ratio: 16 / 9; min-height: 340px; max-height: 72vh; width: 100%; border-radius: 30px; overflow: hidden; background: var(--w-deep); box-shadow: var(--ln-shadow-lift), 0 40px 80px -40px color-mix(in srgb, var(--w-deep) 80%, transparent); isolation: isolate; }
.ln-sc-art { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; display: block; }
.ln-sc-l { transform: translate(calc(var(--px) * var(--d) * -26px), calc(var(--py) * var(--d) * -14px)); transition: transform .9s var(--ln-ease); }
.ln-sc-own .ln-sc-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ln-sc-clouds .ln-sc-cloud { animation: ln-drift 70s linear infinite alternate; }
.ln-sc-clouds .ln-sc-cloud:nth-child(2) { animation-duration: 90s; animation-direction: alternate-reverse; }
@keyframes ln-drift { to { transform: translateX(90px); } }
.ln-sc-star { animation: ln-twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
@keyframes ln-twinkle { 50% { opacity: .15; } }
.ln-sc-mote { animation: ln-mote 9s linear infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes ln-mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translate(-160px, -40px); opacity: 0; } }
.ln-sc-firefly { animation: ln-firefly 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes ln-firefly { 0%, 100% { opacity: .1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(14px, -18px); } }
.ln-sc-sway { animation: ln-sway 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ln-sway { 50% { transform: rotate(2.4deg); } }
.ln-sc-wave { animation: ln-wave 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.6s); }
@keyframes ln-wave { 50% { transform: translateX(-50px); } }
.ln-sc-glint { animation: ln-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.ln-sc-shimmer { animation: ln-twinkle 4s ease-in-out infinite; }
.ln-sc-flicker { animation: ln-flicker 3.4s ease-in-out infinite; }
@keyframes ln-flicker { 30% { opacity: .7; } 55% { opacity: 1; } 70% { opacity: .85; } }
.ln-sc-window { animation: ln-flicker 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.ln-sc-mist { animation: ln-drift 40s ease-in-out infinite alternate; }
.ln-sc-rain { animation: ln-rain .9s linear infinite; animation-delay: calc(var(--i) * -.45s); }
.ln-sc-rain + .ln-sc-rain { animation-duration: 1.3s; opacity: .6; }
@keyframes ln-rain { from { transform: translate(0, 0); } to { transform: translate(-40px, 320px); } }
.ln-sc-steam { animation: ln-steam 3s ease-in-out infinite; }
@keyframes ln-steam { 0% { opacity: 0; transform: translateY(6px); } 50% { opacity: .5; } 100% { opacity: 0; transform: translateY(-12px); } }
.ln-sc-shoot { stroke-dasharray: 0 400; animation: ln-shoot 9s ease-in infinite; }
@keyframes ln-shoot { 0%, 82% { stroke-dasharray: 0 400; opacity: 0; } 86% { opacity: 1; } 100% { stroke-dasharray: 160 400; stroke-dashoffset: -220; opacity: 0; } }
.ln-scene-veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--w-deep) 30%, transparent) 55%, color-mix(in srgb, #000 70%, var(--w-deep)) 100%); pointer-events: none; }
.ln-scene-copy { position: absolute; inset: auto 0 0 0; padding: clamp(18px, 4vw, 44px); display: grid; gap: 10px; justify-items: start; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.ln-scene-place { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--w-glow); }
.ln-scene-title { font-family: var(--ln-display); font-weight: 600; font-size: clamp(32px, 5vw, 58px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.ln-scene-line { font-size: clamp(17px, 2vw, 22px); line-height: 1.45; max-width: 46ch; color: rgba(255, 255, 255, .92); }
.ln .ln-scene-go { margin-top: 6px; background: rgba(255, 255, 255, .94); color: var(--w-deep); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .14); }
.ln-scene-go:hover { transform: translateY(-2px); }
.ln-scene-title:focus { outline: none; }
.ln-scene.is-entering .ln-sc-art { transform: scale(1.18); filter: brightness(1.15); transition: transform .55s var(--ln-ease), filter .55s; }
.ln-scene.is-entering .ln-scene-copy { opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; }
.ln-player.is-live .ln-screen--scene.is-current .ln-scene-copy > * { animation: ln-arrive .8s var(--ln-ease) both; }
.ln-player.is-live .ln-screen--scene.is-current .ln-scene-copy > :nth-child(2) { animation-delay: .25s; }
.ln-player.is-live .ln-screen--scene.is-current .ln-scene-copy > :nth-child(3) { animation-delay: .5s; }
.ln-player.is-live .ln-screen--scene.is-current .ln-scene-copy > :nth-child(4) { animation-delay: .8s; }
@media (max-width: 640px) {
  .ln-scene-stage { aspect-ratio: 4 / 5; max-height: 76vh; border-radius: 24px; }
  /* A tall phone shows a slice of the wide art, around the place's own centre of interest (--focus). */
  .ln-sc-art { top: -6%; left: calc(50% - var(--focus, .5) * 180%); width: 180%; height: 112%; }
  .ln-scene--desert { --focus: .62; }
}

/* ---------- Explore a picture ---------- */
.ln-explore-stage { position: relative; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--ln-card); box-shadow: var(--ln-shadow-lift); user-select: none; -webkit-user-select: none; }
/* The stage is a .ln-pic-frame (player.css): exactly the drawn picture, at most 56vh tall (LN11). */
.ln-explore-stage { --pic-max-h: 56vh; }
.ln-explore-stage:focus-visible { outline: 3px solid var(--w-accent); outline-offset: 3px; }
.ln-explore-lens { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--w-accent), inset 0 0 22px rgba(255, 255, 255, .5); pointer-events: none; }
.ln-explore-mark { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; background: var(--ln-good); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 10px color-mix(in srgb, var(--ln-good) 35%, transparent); animation: ln-found .6s var(--ln-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); }
@keyframes ln-found { from { transform: scale(.2); opacity: 0; } }
.ln-explore-miss { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; animation: ln-ripple .7s ease-out forwards; }
@keyframes ln-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ln-explore-glow { position: absolute; width: var(--r); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--w-glow) 65%, transparent), transparent 70%); pointer-events: none; animation: ln-breathe-glow 1.8s ease-in-out infinite; }
@keyframes ln-breathe-glow { 50% { opacity: .35; } }
.ln-found-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; counter-reset: f; }
.ln-found { counter-increment: f; position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; padding-inline-start: 52px; border-radius: 16px; background: var(--ln-card); box-shadow: var(--ln-shadow); animation: ln-pop .4s var(--ln-ease); }
.ln-found::before { content: counter(f); position: absolute; inset-inline-start: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; background: var(--ln-good); }
.ln-found img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: var(--w-soft); }
.ln-found b { display: block; font-size: 16px; }
.ln-found p { font-size: 14.5px; color: var(--ln-ink-2); margin-top: 2px; }

/* ---------- Sort into buckets ---------- */
.ln-sort-tray { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--w-accent) 6%, transparent) 0 10px, transparent 10px 20px), var(--ln-card-2); box-shadow: inset 0 0 0 2px dashed var(--ln-line-2); border: 2px dashed var(--ln-line-2); transition: opacity .3s; }
.ln-sort-tray.is-empty { opacity: .55; }
.ln-sort-trayhead { justify-self: start; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ln-muted); }
.ln-sort-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.ln-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; text-align: start; color: var(--ln-ink); background: var(--ln-card); box-shadow: var(--ln-shadow), inset 0 0 0 1.5px var(--ln-line-2); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .18s var(--ln-ease), box-shadow .2s, background .2s; }
.ln-chip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--ln-shadow-lift), inset 0 0 0 2px var(--w-accent); }
.ln-chip img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--w-soft); pointer-events: none; }
.ln-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--w-accent) 16%, var(--ln-card)); box-shadow: 0 0 0 3px var(--w-accent), var(--ln-shadow-lift); transform: translateY(-3px) rotate(-1deg); }
.ln-chip.is-dragging { opacity: .35; }
.ln-chip.is-right { background: var(--ln-good-soft); box-shadow: inset 0 0 0 2px var(--ln-good); cursor: default; }
.ln-chip.is-right::after { content: "✓"; margin-inline-start: 4px; color: var(--ln-good); font-weight: 900; }
.ln-chip.is-wrong { background: var(--ln-bad-soft); box-shadow: inset 0 0 0 2px var(--ln-bad); }
.ln-chip.is-back { animation: ln-shake .45s; }
.ln-chip:disabled { cursor: default; }
.ln-chip-why { flex-basis: 100%; font-size: 13.5px; color: var(--ln-ink-2); padding: 2px 6px 6px; }
.ln-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg) scale(1.05); box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .45), 0 0 0 3px var(--w-accent); opacity: .95; }
.ln-sort-buckets { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.ln-sort-buckets--2 { --n: 2; }
.ln-sort-buckets--3 { --n: 3; }
.ln-sort-buckets--4 { --n: 4; }
.ln-bucket { display: grid; align-content: start; gap: 8px; min-height: 170px; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--w-accent) calc(10% + var(--i) * 5%), var(--ln-card)), var(--ln-card)); box-shadow: var(--ln-shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--w-accent) 30%, transparent); transition: box-shadow .2s, transform .2s; }
.ln-bucket.is-over { transform: scale(1.02); box-shadow: 0 0 0 3px var(--w-accent), var(--ln-shadow-lift); }
.ln-bucket-head { display: grid; justify-items: start; gap: 2px; padding: 10px 12px; border-radius: 16px; text-align: start; background: var(--w-deep); color: #fff; }
.ln-bucket-head b { font-family: var(--ln-display); font-size: 19px; font-weight: 600; }
.ln-bucket-head small { font-size: 12.5px; color: rgba(255, 255, 255, .78); line-height: 1.35; }
.ln-bucket-head img { width: 48px; height: 48px; object-fit: contain; }
.ln-bucket-n { font-size: 11px; font-weight: 900; color: var(--w-glow); letter-spacing: .1em; }
.ln-bucket-items { display: flex; flex-direction: column; gap: 6px; }
.ln-bucket-items .ln-chip { width: 100%; }
@media (max-width: 640px) {
  .ln-sort-buckets, .ln-sort-buckets--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-sort-buckets--3 .ln-bucket:last-child { grid-column: 1 / -1; }
  .ln-bucket { min-height: 120px; }
}

/* ---------- Build in order ---------- */
.ln-build-preview { min-height: 74px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 16px 20px; border-radius: 22px; text-align: center; font-family: var(--ln-display); font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--ln-ink); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--w-glow) 30%, transparent), transparent 70%), var(--ln-card); box-shadow: var(--ln-shadow-lift), inset 0 0 0 1.5px color-mix(in srgb, var(--w-accent) 25%, transparent); transition: box-shadow .4s; }
.ln-build-preview.ln-build-arabic, .ln-build-arabic { font-family: var(--ln-arabic); font-size: clamp(52px, 9vw, 92px); line-height: 1.3; color: var(--w-ink); }
.ln-build-preview.is-right { box-shadow: 0 0 0 3px var(--ln-good), 0 0 50px -6px color-mix(in srgb, var(--ln-good) 60%, transparent); }
.ln-build-step { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 12px; background: var(--ln-line); position: relative; }
.ln-build-step.is-on { background: var(--w-soft); box-shadow: inset 0 0 0 2px var(--w-accent); }
.ln-build-step img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.ln-build-step + .ln-build-step::before { content: ""; position: absolute; inset-inline-end: 100%; width: 8px; height: 2px; background: var(--w-accent); }
.ln-build-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; counter-reset: s; }
.ln-slot { counter-increment: s; position: relative; min-width: 70px; min-height: 58px; display: grid; place-items: center; border-radius: 16px; border: 2px dashed var(--ln-line-2); background: var(--ln-card-2); transition: border-color .2s, transform .2s; }
.ln-slot::before { content: counter(s); position: absolute; top: -9px; inset-inline-start: 8px; padding: 0 6px; font-size: 11px; font-weight: 900; color: var(--w-ink); background: var(--ln-paper); border-radius: 6px; }
.ln-slot.is-over { border-color: var(--w-accent); transform: scale(1.05); }
.ln-slot:has(.ln-chip) { border-style: solid; border-color: transparent; }
.ln-slot .ln-chip { width: 100%; justify-content: center; }
.ln-build-line--steps .ln-slot { min-width: 96px; min-height: 104px; }
.ln-build-line--steps .ln-chip, .ln-build-tray .ln-chip:has(img) { flex-direction: column; padding: 8px; font-size: 13px; }
.ln-build-line--steps .ln-chip img, .ln-build-tray .ln-chip:has(img) img { width: 70px; height: 70px; }
.ln-build-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px; border-radius: 20px; background: var(--ln-card-2); box-shadow: inset 0 0 0 1px var(--ln-line); min-height: 76px; }
.ln-build-tray.is-done { display: none; }
.ln-chip--letter { min-width: 64px; min-height: 64px; justify-content: center; font-family: var(--ln-arabic); font-size: 34px; font-weight: 400; line-height: 1; padding: 6px 12px; }
.ln-chip.is-shown { box-shadow: inset 0 0 0 2px var(--w-accent); }
.ln-build-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.ln-build-meaning { font-family: var(--ln-display); font-size: 19px; font-weight: 600; }

/* ---------- Estimate ---------- */
.ln-est-value { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ln-est-value small { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ln-muted); }
.ln-est-value b { font-family: var(--ln-display); font-size: clamp(56px, 10vw, 96px); line-height: 1; font-weight: 600; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.ln-est-value span { font-size: 22px; font-weight: 700; color: var(--ln-ink-2); }
.ln-est-track { --at: .5; position: relative; padding: 18px 0 26px; }
.ln-est-track input[type="range"] { width: 100%; height: 44px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.ln-est-track input[type="range"]::-webkit-slider-runnable-track { height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--w-accent) calc(var(--at) * 100%), var(--ln-line-2) 0); }
.ln-est-track input[type="range"]::-moz-range-track { height: 14px; border-radius: 999px; background: var(--ln-line-2); }
.ln-est-track input[type="range"]::-moz-range-progress { height: 14px; border-radius: 999px; background: var(--w-accent); }
.ln-est-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--w-accent), 0 6px 18px rgba(0, 0, 0, .3); }
.ln-est-track input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--w-accent), 0 6px 18px rgba(0, 0, 0, .3); }
.ln-est-track input:focus-visible { outline: 3px solid var(--w-accent); outline-offset: 6px; border-radius: 999px; }
[dir="rtl"] .ln-est-track input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--w-accent) calc(var(--at) * 100%), var(--ln-line-2) 0); }
/* The right number's bubble sits above the slider, clear of the thumb, with room made for it (LR13); it moves along its
   point by --at, so it never runs off the track at either end. */
.ln-est-track:has(.ln-est-truth:not([hidden])) { padding-top: 46px; }
.ln-est-truth { position: absolute; top: 2px; inset-inline-start: calc(var(--at) * 100%); transform: translateX(calc(var(--at) * -100%)); padding: 4px 10px; border-radius: 10px; font-weight: 900; font-size: 15px; color: #fff; background: var(--ln-good); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .4); animation: ln-pop .5s var(--ln-ease); white-space: nowrap; }
[dir="rtl"] .ln-est-truth { transform: translateX(calc(var(--at) * 100%)); }
.ln-est-truth::after { content: ""; position: absolute; left: calc(var(--at) * 100%); top: 100%; width: 3px; height: 38px; margin-left: -1.5px; background: var(--ln-good); }
[dir="rtl"] .ln-est-truth::after { left: auto; right: calc(var(--at) * 100%); margin: 0 -1.5px 0 0; }
.ln-est-ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ln-muted); }
.ln-est-off { font-weight: 700; }

/* ---------- Calculator ---------- */
.ln-calc-live { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.ln-calc-inputs { display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: var(--ln-card); box-shadow: var(--ln-shadow); grid-row: span 3; }
.ln-calc-field { display: grid; gap: 5px; }
.ln-calc-label { font-size: 14px; font-weight: 700; color: var(--ln-ink-2); }
.ln-calc-box { display: flex; align-items: center; border-radius: 14px; background: var(--ln-card-2); box-shadow: inset 0 0 0 1.5px var(--ln-line-2); transition: box-shadow .2s; }
.ln-calc-box:focus-within { box-shadow: inset 0 0 0 2.5px var(--w-accent); }
.ln-calc-unit { padding-inline-start: 14px; font-weight: 800; color: var(--w-ink); }
.ln-calc-box input, .ln-calc-box select { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; border: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 700; color: var(--ln-ink); font-variant-numeric: tabular-nums; }
.ln-calc-box input:focus, .ln-calc-box select:focus { outline: none; }
.ln-calc-hint { font-size: 12.5px; color: var(--ln-muted); }
.ln-calc-result { display: grid; gap: 4px; padding: 22px; border-radius: 24px; color: #fff; text-align: center; background: radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--w-glow) 45%, transparent), transparent 70%), linear-gradient(160deg, var(--w-deep), color-mix(in srgb, var(--w-deep) 70%, #000)); box-shadow: var(--ln-shadow-lift); }
.ln-calc-result small { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--w-glow); }
.ln-calc-result b { font-family: var(--ln-display); font-size: clamp(36px, 5vw, 52px); font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ln-calc-result.is-new b { animation: ln-pop .4s var(--ln-ease); }
.ln-calc-steps { display: grid; gap: 4px; counter-reset: c; }
.ln-calc-step { counter-increment: c; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 10px; padding: 10px 14px; border-radius: 14px; background: var(--ln-card); box-shadow: inset 0 0 0 1px var(--ln-line); font-size: 14.5px; }
.ln-calc-step::before { content: counter(c); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--w-soft); color: var(--w-deep); }
.ln-calc-step b { font-variant-numeric: tabular-nums; }
.ln-calc-step small { grid-column: 2 / -1; color: var(--ln-muted); font-size: 12.5px; }
.ln-calc-why { grid-column: 1 / -1; font-size: 14.5px; color: var(--ln-ink-2); padding: 12px 16px; border-radius: 14px; border-inline-start: 4px solid var(--w-accent); background: var(--ln-card); }
@media (max-width: 760px) { .ln-calc-live { grid-template-columns: minmax(0, 1fr); } .ln-calc-inputs { grid-row: auto; } }

/* ---------- Memory pairs ---------- */
.ln-mem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; perspective: 900px; width: min(100%, 600px); justify-self: center; }
.ln-mem-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.ln-mem-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-mem-card { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; transform-style: preserve-3d; transition: transform .5s var(--ln-ease); }
.ln-mem-card > span { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; gap: 4px; padding: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ln-mem-back { background: conic-gradient(from 45deg, color-mix(in srgb, var(--w-accent) 70%, var(--w-deep)) 0 25%, var(--w-deep) 0 50%, color-mix(in srgb, var(--w-accent) 70%, var(--w-deep)) 0 75%, var(--w-deep) 0) 0 0 / 28px 28px; box-shadow: var(--ln-shadow), inset 0 0 0 4px color-mix(in srgb, var(--w-glow) 60%, transparent); }
.ln-mem-back::after { content: "✦"; font-size: 28px; color: var(--w-glow); text-shadow: 0 0 16px var(--w-glow); }
.ln-mem-front { transform: rotateY(180deg); background: var(--ln-card); box-shadow: var(--ln-shadow), inset 0 0 0 2px var(--w-accent); }
.ln-mem-front img { width: 70%; aspect-ratio: 1; object-fit: contain; }
.ln-mem-text { font-weight: 800; font-size: 18px; text-align: center; }
.ln-mem-front .ln-mem-text:only-child { font-size: clamp(22px, 4vw, 34px); }
.ln-mem-text:lang(ar), .ln-mem-front .ln-mem-text:only-child { font-family: var(--ln-arabic), var(--ln-display); }
.ln-mem-card.is-up { transform: rotateY(180deg); }
.ln-mem-card.is-matched .ln-mem-front { background: var(--ln-good-soft); box-shadow: 0 0 0 3px var(--ln-good), 0 0 30px -6px var(--ln-good); }
.ln-mem-card.is-matched { animation: ln-matched .6s var(--ln-ease); }
@keyframes ln-matched { 40% { transform: rotateY(180deg) scale(1.08); } }
.ln-mem-card:focus-visible { outline: 3px solid var(--w-accent); outline-offset: 3px; }

/* ---------- Trace a letter ---------- */
.ln-trace-pad { --trace-fill: color-mix(in srgb, var(--w-accent) 10%, transparent); --trace-guide: color-mix(in srgb, var(--w-accent) 80%, var(--ln-ink)); --trace-ink: var(--w-accent); position: relative; width: min(460px, 100%); aspect-ratio: 6 / 5; justify-self: center; border-radius: 28px; overflow: hidden; background: linear-gradient(var(--ln-line) 1px, transparent 1px) 0 0 / 100% 25%, var(--ln-card); box-shadow: var(--ln-shadow-lift), inset 0 0 0 2px color-mix(in srgb, var(--w-accent) 25%, transparent); touch-action: none; }
.ln-trace-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ln-trace-ink { cursor: crosshair; }
.ln-trace-pad.is-done { box-shadow: 0 0 0 4px var(--ln-good), 0 0 50px -8px var(--ln-good); }
.ln-trace-pad::after { content: var(--letter, ""); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ln-arabic); font-size: calc(var(--trace-size, 1) * min(52vw, 230px)); line-height: 1; color: var(--w-ink); opacity: 0; clip-path: inset(0 0 0 100%); pointer-events: none; }
.ln-trace-pad.is-showing::after { animation: ln-show-letter 1.8s var(--ln-ease) forwards; }
@keyframes ln-show-letter { 0% { opacity: .9; clip-path: inset(0 0 0 100%); } 70% { opacity: .9; clip-path: inset(0 0 0 0); } 100% { opacity: .35; clip-path: inset(0 0 0 0); } }
.ln-trace-meter { --p: 0; position: absolute; top: 12px; inset-inline-end: 12px; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--ln-good) calc(var(--p) * 360deg), var(--ln-line) 0); -webkit-mask: radial-gradient(circle, transparent 12px, #000 13px); mask: radial-gradient(circle, transparent 12px, #000 13px); }
.ln-trace-name { text-align: center; font-family: var(--ln-display); font-size: 22px; font-weight: 600; }
.ln-trace-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ln-trace-status { text-align: center; font-weight: 700; color: var(--w-ink); min-height: 1.5em; }
.ln-trace-big { font-family: var(--ln-arabic); font-size: 120px; text-align: center; color: var(--w-ink); }

/* ---------- Listen ---------- */
.ln-listen-bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 22px; background: linear-gradient(135deg, var(--w-deep), color-mix(in srgb, var(--w-deep) 60%, var(--w-accent))); color: #fff; box-shadow: var(--ln-shadow-lift); }
.ln-listen-play { position: relative; display: flex; align-items: center; gap: 12px; padding: 0; }
.ln-listen-icon { width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); display: grid; place-items: center; transition: transform .2s; }
.ln-listen-icon::before { content: ""; margin-inline-start: 5px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--w-deep); }
[dir="rtl"] .ln-listen-icon::before { margin-inline-start: 0; margin-inline-end: 5px; transform: scaleX(-1); }
.ln-listen-play:hover .ln-listen-icon { transform: scale(1.06); }
.ln-listen-waves { display: flex; align-items: center; gap: 4px; height: 36px; }
.ln-listen-waves i { width: 5px; height: 30%; border-radius: 3px; background: var(--w-glow); opacity: .6; }
.ln-listen.is-playing .ln-listen-waves i { animation: ln-wavebar .9s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 1ms); }
.ln-listen.is-playing .ln-listen-waves i:nth-child(2) { animation-delay: -.2s; }
.ln-listen.is-playing .ln-listen-waves i:nth-child(3) { animation-delay: -.45s; }
.ln-listen.is-playing .ln-listen-waves i:nth-child(4) { animation-delay: -.1s; }
.ln-listen.is-playing .ln-listen-waves i:nth-child(5) { animation-delay: -.6s; }
@keyframes ln-wavebar { 50% { height: 100%; opacity: 1; } }
.ln-listen-caption { font-weight: 800; font-size: 17px; }
.ln-listen .ln-opt .ln-opt-text { font-size: 1.05em; }
.ln-listen .ln-opt .ln-opt-text:only-child { font-family: var(--ln-arabic), var(--ln-display); }
.ln-listen .ln-opts { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.ln-listen .ln-opts .ln-opt { justify-content: center; font-size: 28px; min-height: 84px; }

/* ---------- Word by word ---------- */
.ln-wbw { margin: 0; padding: 26px; border-radius: 26px; background: var(--ln-card); box-shadow: var(--ln-shadow-lift); display: grid; gap: 14px; position: relative; overflow: hidden; }
.ln-wbw::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--w-accent), var(--w-glow), var(--w-accent)); }
.ln-wbw-verse { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 10px; font-family: var(--ln-quran); font-size: clamp(30px, 4.4vw, 44px); line-height: 2; color: var(--ln-ink); }
.ln-wbw-w { font: inherit; color: inherit; padding: 0 8px; border-radius: 14px; transition: background .3s, color .3s, box-shadow .3s, transform .3s; }
.ln-wbw-w:hover { background: color-mix(in srgb, var(--w-accent) 10%, transparent); }
.ln-wbw-w.is-seen { color: var(--w-ink); }
.ln-wbw-w.is-current { background: color-mix(in srgb, var(--w-glow) 35%, transparent); color: var(--ln-ink); box-shadow: 0 0 0 2px var(--w-accent), 0 10px 30px -10px color-mix(in srgb, var(--w-glow) 90%, transparent); transform: translateY(-3px); }
.ln-wbw.is-lighting .ln-wbw-w:not(.is-current):not(.is-seen) { opacity: .45; }
.ln-wbw-mark, .ln-wbw .ln-ayah-n { font-size: .7em; color: var(--w-ink); }
.ln-wbw-tools { display: flex; justify-content: center; }
.ln-wbw-card { display: grid; justify-items: center; gap: 4px; padding: 18px; border-radius: 20px; text-align: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--w-glow) 25%, transparent), transparent 70%), var(--ln-card-2); box-shadow: inset 0 0 0 1px var(--ln-line); animation: ln-pop .35s var(--ln-ease); }
.ln-wbw-n { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ln-muted); }
.ln-wbw-ar { font-family: var(--ln-quran); font-size: 44px; line-height: 1.6; color: var(--w-ink); }
.ln-wbw-tr { font-style: italic; color: var(--ln-ink-2); }
.ln-wbw-mean { font-family: var(--ln-display); font-size: 22px; font-weight: 600; }
.ln-wbw-root { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; margin-top: 4px; padding: 8px 14px; border-radius: 999px; background: var(--ln-card); box-shadow: inset 0 0 0 1px var(--ln-line-2); }
.ln-wbw-root small { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink); }
.ln-wbw-letters { font-family: var(--ln-arabic); font-size: 24px; letter-spacing: .3em; }
.ln-wbw-rootmean { font-size: 14px; color: var(--ln-ink-2); }
.ln-wbw-list { display: grid; gap: 6px; font-size: 15px; }
.ln-wbw-list [lang="ar"] { font-family: var(--ln-quran); font-size: 22px; }
.ln-wbw.is-live .ln-wbw-list { display: none; }
.ln-wbw-en { margin-top: 0; }
.ln-wbw-note { font-size: 14.5px; color: var(--ln-muted); }
.ln-wbw .ln-ref { text-align: center; }

/* ---------- Constellation ---------- */
.ln-stars-sky { position: relative; aspect-ratio: 16 / 9; min-height: 300px; border-radius: 28px; overflow: hidden; background: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 64%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 24% 84%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 38%, #fff 50%, transparent 51%), radial-gradient(ellipse at 30% 110%, color-mix(in srgb, var(--w-accent) 40%, transparent), transparent 60%), radial-gradient(ellipse at 80% -10%, color-mix(in srgb, var(--w-glow) 25%, transparent), transparent 55%), linear-gradient(180deg, #060a22, color-mix(in srgb, var(--w-deep) 70%, #060a22)); box-shadow: var(--ln-shadow-lift), inset 0 0 80px rgba(0, 0, 0, .5); }
.ln-stars-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ln-stars-lines polyline { fill: none; stroke: color-mix(in srgb, var(--w-glow) 80%, #fff); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 100; opacity: .8; transition: stroke-dasharray 1.2s var(--ln-ease); filter: drop-shadow(0 0 1px var(--w-glow)); vector-effect: non-scaling-stroke; }
.ln-stars.is-complete .ln-stars-lines polyline { stroke-width: 2.6; }
.ln-star { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 6px; color: #fff; }
.ln-star i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 10px 2px rgba(255, 255, 255, .25); animation: ln-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); transition: transform .4s var(--ln-ease), background .4s, box-shadow .4s; }
.ln-star span { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; opacity: .7; white-space: nowrap; text-shadow: 0 1px 8px #000; }
.ln-star:hover i, .ln-star:focus-visible i { transform: scale(1.4); }
.ln-star:focus-visible { outline: 2px solid var(--w-glow); outline-offset: 2px; border-radius: 12px; }
.ln-star.is-lit i { background: var(--w-glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-glow) 30%, transparent), 0 0 30px 10px color-mix(in srgb, var(--w-glow) 55%, transparent); animation: none; transform: scale(1.25); }
.ln-star.is-lit span { opacity: 1; }
.ln-star.is-open i { transform: scale(1.6); }
.ln-stars-card { display: grid; justify-items: center; gap: 6px; padding: 20px; border-radius: 22px; text-align: center; color: #fff; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--w-glow) 35%, transparent), transparent 65%), linear-gradient(160deg, var(--w-deep), #0a0f2a); box-shadow: var(--ln-shadow-lift); animation: ln-pop .4s var(--ln-ease); }
.ln-stars-ar { font-family: var(--ln-arabic); font-size: clamp(40px, 6vw, 56px); line-height: 1.5; color: var(--w-glow); text-shadow: 0 0 24px color-mix(in srgb, var(--w-glow) 50%, transparent); }
.ln-stars-card h3 { font-family: var(--ln-display); font-size: 24px; font-weight: 600; }
.ln-stars-sub { font-weight: 700; color: var(--w-glow); }
.ln-stars-card p { max-width: 56ch; color: rgba(255, 255, 255, .86); font-size: 15px; }
.ln-stars-card .ln-btn--plain { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); min-height: 42px; }
.ln-stars-why { font-style: italic; }
/* On wider screens the card opens over the sky's corner, so the sky stays in view. */
@media (min-width: 760px) {
  .ln-stars.is-live .ln-stars-card { position: absolute; inset-inline-end: 16px; bottom: 16px; z-index: 3; width: min(360px, 48%); padding: 16px 18px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--w-glow) 30%, transparent), transparent 65%), color-mix(in srgb, #070b22 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .ln-stars.is-live .ln-stars-ar { font-size: 40px; }
  .ln-stars.is-live .ln-stars-card p { font-size: 14px; }
}
@media (max-width: 640px) { .ln-stars-sky { aspect-ratio: 3 / 4; } .ln-star span { font-size: 11px; } }

/* ---------- Habit challenge ---------- */
.ln-habit { display: grid; gap: 12px; padding: 24px; border-radius: 28px; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--w-accent) 28%, transparent), transparent 60%), linear-gradient(170deg, color-mix(in srgb, var(--w-deep) 92%, #000), var(--w-deep)); color: #fff; box-shadow: var(--ln-shadow-lift); text-align: center; justify-items: center; overflow: hidden; }
.ln-habit-kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--w-glow); }
.ln-habit-do { font-family: var(--ln-display); font-size: clamp(22px, 3vw, 30px); font-weight: 600; line-height: 1.25; max-width: 30ch; }
.ln-habit-art { width: min(460px, 100%); }
.ln-hp { width: 100%; height: auto; overflow: visible; }
.ln-hp-ground { fill: color-mix(in srgb, var(--w-accent) 22%, transparent); stroke: color-mix(in srgb, var(--w-glow) 60%, transparent); stroke-width: 2; stroke-dasharray: 5 6; }
.ln-hp-line { fill: none; stroke: color-mix(in srgb, var(--w-glow) 50%, transparent); stroke-width: 2; stroke-dasharray: 4 6; }
.ln-hp-trunk { fill: none; stroke: color-mix(in srgb, var(--w-glow) 45%, #6b4a2b); stroke-width: 9; stroke-linecap: round; }
.ln-hp-u { transition: opacity .6s, transform .8s var(--ln-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); opacity: .28; transform: scale(.78); transform-box: fill-box; transform-origin: 50% 80%; }
.ln-hp-u.is-on { opacity: 1; transform: none; }
.ln-hp-petal { fill: rgba(255, 255, 255, .3); }
.ln-hp-u.is-on .ln-hp-petal { fill: #ff8fb1; }
.ln-hp-u.is-on:nth-of-type(2n) .ln-hp-petal { fill: #ffd166; }
.ln-hp-u.is-on:nth-of-type(3n) .ln-hp-petal { fill: #b5a8ff; }
.ln-hp-heart { fill: var(--w-glow); }
.ln-hp-stem { fill: none; stroke: #8ad08a; stroke-width: 3; }
.ln-hp-leaf { fill: rgba(255, 255, 255, .25); }
.ln-hp-leaf2 { fill: rgba(255, 255, 255, .25); }
.ln-hp-u.is-on .ln-hp-leaf { fill: #5fbf72; }
.ln-hp-u.is-on .ln-hp-leaf2 { fill: #a8e6a1; }
.ln-hp-lamp { fill: color-mix(in srgb, var(--w-deep) 70%, #000); stroke: var(--w-glow); stroke-width: 2; }
.ln-hp-flame { fill: rgba(255, 255, 255, .2); }
.ln-hp-halo { fill: var(--w-glow); opacity: 0; }
.ln-hp-u.is-on .ln-hp-flame { fill: var(--w-glow); }
.ln-hp-u.is-on .ln-hp-halo { opacity: .22; }
.ln-hp-star { fill: rgba(255, 255, 255, .35); }
.ln-hp-u.is-on .ln-hp-star { fill: var(--w-glow); }
.ln-hp-shadow { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .25); }
.ln-hp-moon { fill: rgba(255, 255, 255, .2); }
.ln-hp-u.is-on .ln-hp-moon { fill: #fff6d6; filter: drop-shadow(0 0 8px var(--w-glow)); }
.ln-hp-sun { fill: var(--w-glow); }
.ln-hp-ray { stroke: var(--w-glow); stroke-width: 7; stroke-linecap: round; }
.ln-habit.is-complete .ln-hp-u { animation: ln-bloom 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes ln-bloom { 50% { filter: drop-shadow(0 0 10px var(--w-glow)); } }
.ln-habit-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ln-habit-days li { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); }
.ln-habit-days li.is-done { background: var(--w-glow); color: var(--w-deep); }
.ln-habit-days li.is-done span::after { content: " ✓"; }
.ln-habit-days li.is-today { box-shadow: 0 0 0 2px #fff; color: #fff; }
.ln-habit-days li.is-missed { opacity: .45; }
.ln-habit-live { justify-items: center; }
.ln-habit-tip { font-size: 16px; color: rgba(255, 255, 255, .9); padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); max-width: 46ch; }
.ln-habit-tip::before { content: "✦ "; color: var(--w-glow); }
.ln .ln-habit-go { background: #fff; color: var(--w-deep); }
.ln-habit-go:disabled { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; opacity: 1; }
.ln-habit-status { font-weight: 800; color: var(--w-glow); }
.ln-habit .ln-note { color: rgba(255, 255, 255, .7); }
.ln-habit-why { font-size: 15px; color: rgba(255, 255, 255, .8); max-width: 52ch; }

/* ---------- Poll ---------- */
.ln-poll-opts { display: grid; gap: 10px; }
.ln-poll-opt { --share: 0; position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 14px 18px; border-radius: 18px; overflow: hidden; text-align: start; font-weight: 700; font-size: 16px; background: var(--ln-card); box-shadow: var(--ln-shadow), inset 0 0 0 1.5px var(--ln-line-2); transition: transform .2s var(--ln-ease), box-shadow .2s; isolation: isolate; }
.ln-poll-opt:hover:not(:disabled) { transform: translateX(4px); box-shadow: var(--ln-shadow-lift), inset 0 0 0 2px var(--w-accent); }
[dir="rtl"] .ln-poll-opt:hover:not(:disabled) { transform: translateX(-4px); }
.ln-poll-opt img { width: 48px; height: 48px; object-fit: contain; }
.ln-poll-text { flex: 1; }
.ln-poll-bar { position: absolute; inset: 0; z-index: -1; transform-origin: left; transform: scaleX(0); background: color-mix(in srgb, var(--w-accent) 18%, transparent); transition: transform 1s var(--ln-ease); }
[dir="rtl"] .ln-poll-bar { transform-origin: right; }
.ln-poll.has-totals .ln-poll-bar { transform: scaleX(var(--share)); }
.ln-poll-pct { font-variant-numeric: tabular-nums; color: var(--w-ink); }
.ln-poll-opt.is-mine { box-shadow: 0 0 0 3px var(--w-accent), var(--ln-shadow-lift); }
.ln-poll-opt.is-mine .ln-poll-bar { background: color-mix(in srgb, var(--w-accent) 34%, transparent); }
.ln-poll-opt:disabled { cursor: default; }
.ln-poll-results { display: grid; gap: 8px; }
.ln-poll-head { font-size: 14px; font-weight: 700; color: var(--ln-muted); }
.ln-poll-why { padding: 14px 16px; border-radius: 16px; background: var(--ln-card); border-inline-start: 4px solid var(--w-accent); color: var(--ln-ink-2); font-size: 15.5px; }

/* ---------- Story book ---------- */
.ln-book-live { display: grid; gap: 12px; perspective: 1400px; }
.ln-book-page { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 20px; padding: 18px; border-radius: 28px; background: linear-gradient(90deg, var(--ln-card) 49.6%, color-mix(in srgb, var(--ln-ink) 8%, var(--ln-card)) 50%, var(--ln-card) 50.4%); box-shadow: var(--ln-shadow-lift), inset 0 0 0 1px var(--ln-line); transform-origin: left center; min-height: 300px; }
[dir="rtl"] .ln-book-page { transform-origin: right center; }
.ln-book-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; background: var(--w-soft); }
.ln-book-pic[hidden] + .ln-book-text { grid-column: 1 / -1; }
.ln-book-text { font-family: var(--ln-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; font-weight: 600; padding: 8px; }
.ln-w { border-radius: 6px; transition: background .15s, color .15s; }
.ln-w.is-reading { background: var(--w-glow); color: var(--w-deep); box-shadow: 0 0 0 3px var(--w-glow); }
.ln-w.is-read { color: var(--w-ink); }
.ln-book-page.is-turning-on { animation: ln-turn .5s var(--ln-ease); }
.ln-book-page.is-turning-back { animation: ln-turn-back .5s var(--ln-ease); }
@keyframes ln-turn { 50% { transform: rotateY(-70deg); opacity: .2; } }
@keyframes ln-turn-back { 50% { transform: rotateY(70deg); opacity: .2; } }
.ln-book-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ln-book-where { flex: 1; text-align: center; font-weight: 700; color: var(--ln-muted); }
.ln-book-read[aria-pressed="true"] { background: var(--w-glow); color: var(--w-deep); }
.ln-book-end { display: grid; gap: 12px; padding: 20px; border-radius: 24px; background: color-mix(in srgb, var(--w-accent) 10%, var(--ln-card)); }
.ln-book-choices { display: grid; gap: 8px; }
.ln-book-choices .is-picked { box-shadow: 0 0 0 3px var(--w-accent), var(--ln-shadow); }
.ln-book-reply { padding: 14px 18px; border-radius: 18px 18px 18px 4px; background: var(--ln-card); box-shadow: var(--ln-shadow); font-size: 17px; animation: ln-pop .35s var(--ln-ease); }
.ln-book-reply::before { content: "🐱 "; }
.ln-book-static { display: grid; gap: 8px; margin-bottom: 12px; }
.ln-book-static img { max-width: 360px; border-radius: 16px; }
@media (max-width: 640px) { .ln-book-page { grid-template-columns: minmax(0, 1fr); background: var(--ln-card); } }

/* ---------- Reveal ---------- */
.ln-reveal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; perspective: 1000px; }
.ln-reveal-card { position: relative; display: grid; min-height: 170px; border-radius: 22px; text-align: center; }
.ln-reveal-card--flip { transform-style: preserve-3d; transition: transform .6s var(--ln-ease); }
.ln-reveal-card--flip > span { grid-area: 1 / 1; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ln-reveal-front { color: #fff; background: radial-gradient(circle at 30% 0%, color-mix(in srgb, var(--w-glow) 40%, transparent), transparent 60%), linear-gradient(150deg, var(--w-deep), color-mix(in srgb, var(--w-deep) 55%, var(--w-accent))); box-shadow: var(--ln-shadow); font-weight: 700; font-size: 17px; }
.ln-reveal-front small { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--w-glow); }
.ln-reveal-back { background: var(--ln-card); box-shadow: var(--ln-shadow), inset 0 0 0 2px var(--w-accent); color: var(--ln-ink); font-size: 16px; font-weight: 600; }
.ln-reveal-back img { max-width: 120px; max-height: 100px; object-fit: contain; }
.ln-reveal-card--flip .ln-reveal-back { transform: rotateY(180deg); }
.ln-reveal-card--flip.is-flipped { transform: rotateY(180deg); }
.ln-reveal-card--tap { overflow: hidden; }
.ln-reveal-card--tap > span { grid-area: 1 / 1; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; border-radius: inherit; }
.ln-reveal-card--tap .ln-reveal-front { z-index: 1; transition: transform .6s var(--ln-ease); }
.ln-reveal-card--tap.is-revealed .ln-reveal-front { transform: translateY(-101%); }
.ln-reveal-scratch { display: grid; gap: 8px; padding: 14px; background: var(--ln-card); box-shadow: var(--ln-shadow); }
.ln-reveal-q { font-weight: 700; }
.ln-reveal-pad { position: relative; min-height: 130px; border-radius: 16px; overflow: hidden; display: grid; }
.ln-reveal-pad .ln-reveal-back { display: grid; place-items: center; padding: 16px; font-family: var(--ln-display); font-size: clamp(28px, 4vw, 40px); color: var(--w-ink); background: radial-gradient(circle, color-mix(in srgb, var(--w-glow) 35%, transparent), transparent 70%), var(--ln-card-2); box-shadow: none; }
.ln-reveal-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity .4s; }
.ln-reveal-pad canvas.is-gone { opacity: 0; }
.ln-reveal-now { justify-self: start; min-height: 40px; }

/* ---------- "Try it today" and "Go deeper" ---------- */
.ln-today { position: relative; display: grid; gap: 12px; padding: 22px 24px; border-radius: 26px; color: var(--ln-ink); background: linear-gradient(135deg, color-mix(in srgb, var(--w-glow) 38%, var(--ln-card)), var(--ln-card) 70%); box-shadow: var(--ln-shadow-lift), inset 0 0 0 1.5px color-mix(in srgb, var(--w-accent) 35%, transparent); overflow: hidden; }
.ln-today::after { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--w-glow) 50%, transparent), transparent 70%); pointer-events: none; }
.ln-today-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--w-ink); }
.ln-today-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--w-strong); }
.ln-today-icon::before { content: ""; width: 12px; height: 7px; margin-top: -3px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }
.ln-today .ln-prose { color: var(--ln-ink); font-weight: 600; }
.ln-today-pledge { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 10px 16px; border-radius: 999px; font-weight: 800; background: var(--ln-card); box-shadow: var(--ln-shadow); cursor: pointer; }
.ln-today-pledge input { width: 22px; height: 22px; accent-color: var(--w-strong); }
.ln-today.is-pledged .ln-today-pledge { background: var(--ln-good-soft); color: var(--ln-good); }
.ln-deeper { border-radius: 20px; background: var(--ln-card); box-shadow: var(--ln-shadow); overflow: hidden; }
.ln-deeper summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 800; cursor: pointer; list-style: none; }
.ln-deeper summary::-webkit-details-marker { display: none; }
.ln-deeper-icon { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--w-soft); color: var(--w-deep); transition: transform .3s var(--ln-ease); }
.ln-deeper-icon::before { content: "+"; font-weight: 900; font-size: 18px; line-height: 1; }
.ln-deeper[open] .ln-deeper-icon { transform: rotate(45deg); }
.ln-deeper .ln-prose { padding: 0 20px 18px; padding-inline-start: 60px; font-size: 16.5px; border-top: 1px dashed var(--ln-line-2); padding-top: 14px; }
.ln-deeper[open] .ln-prose { animation: ln-pop .35s var(--ln-ease); }

/* ---------- Teens: bold and fast ---------- */
.ln--teen .ln-player.is-live .ln-screen.is-current .ln-screen-in > * { animation-duration: .32s; }
.ln--teen .ln-chip, .ln--teen .ln-poll-opt, .ln--teen .ln-bucket, .ln--teen .ln-calc-inputs, .ln--teen .ln-found { box-shadow: 0 0 0 1px rgba(139, 92, 246, .3), 0 18px 40px -24px rgba(0, 0, 0, .9); }
.ln--teen .ln-chip[aria-pressed="true"], .ln--teen .ln-poll-opt.is-mine { box-shadow: 0 0 0 2px #22d3ee, 0 0 30px -6px rgba(34, 211, 238, .6); }
.ln--teen .ln-bucket-head { background: linear-gradient(135deg, #8b5cf6, #22d3ee); color: #12081f; }
.ln--teen .ln-bucket-head small, .ln--teen .ln-bucket-n { color: rgba(18, 8, 31, .75); }
.ln--teen .ln-poll-bar { background: linear-gradient(90deg, rgba(139, 92, 246, .35), rgba(34, 211, 238, .25)); }
.ln--teen .ln-poll-pct { color: #22d3ee; }
.ln--teen .ln-est-value b, .ln--teen .ln-build-preview { color: #22d3ee; }
.ln--teen .ln-scene-title, .ln--teen .ln-habit-do { font-weight: 800; letter-spacing: -.035em; }
.ln.ln--teen .ln-scene-go, .ln.ln--teen .ln-habit-go { background: linear-gradient(135deg, #8b5cf6, #22d3ee); color: #fff; }
.ln--teen .ln-today { background: linear-gradient(135deg, rgba(139, 92, 246, .28), var(--ln-card) 70%); }

/* ---------- Kids: play first, big and bright ---------- */
.ln--kid .ln-player.is-live .ln-screen.is-current .ln-screen-in > * { animation-timing-function: cubic-bezier(.34, 1.45, .64, 1); }
.ln--kid .ln-chip { min-height: 60px; padding: 12px 20px; border-radius: 20px; font-size: 19px; }
.ln--kid .ln-chip img { width: 64px; height: 64px; }
.ln--kid .ln-chip--letter { min-width: 84px; min-height: 84px; font-size: 48px; }
.ln--kid .ln-bucket { border-radius: 28px; }
.ln--kid .ln-bucket-head { background: linear-gradient(180deg, #5aa9ff, #2b59c3); }
.ln--kid .ln-mem-grid { gap: 14px; }
.ln--kid .ln-mem-card { border-radius: 24px; }
.ln--kid .ln-mem-back { background: radial-gradient(circle at 30% 30%, #ffd84d 0 14px, transparent 15px), radial-gradient(circle at 75% 70%, #ff6fa5 0 10px, transparent 11px), linear-gradient(160deg, #5aa9ff, #2b59c3); }
.ln--kid .ln-mem-back::after { content: "?"; font-size: 44px; font-weight: 900; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.ln--kid .ln-mem-text { font-size: 22px; }
.ln--kid .ln-listen-icon { width: 84px; height: 84px; }
.ln--kid .ln-listen .ln-opts .ln-opt { font-size: 44px; min-height: 110px; }
.ln--kid .ln-trace-pad { border-radius: 36px; --trace-ink: #ff6fa5; }
.ln--kid .ln-explore-mark { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 18px; background: #ffb020; }
.ln--kid .ln-explore-mark::after { content: "★"; position: absolute; top: -14px; inset-inline-end: -10px; color: #ffb020; font-size: 20px; }
.ln--kid .ln-found::before { background: #ffb020; }
.ln--kid .ln-x-count { font-size: 17px; background: #fff3d6; }
.ln--kid .ln-x-count b { font-size: 24px; color: #ff6fa5; }
.ln--kid .ln-book-text { font-size: clamp(26px, 3.4vw, 36px); }
.ln--kid .ln-book-page { border-radius: 36px; }
.ln--kid .ln-poll-opt, .ln--kid .ln-reveal-card { border-radius: 26px; font-size: 19px; }
.ln--kid .ln-today { border-radius: 32px; }
.ln--kid .ln-today-icon { background: #ffb020; }
.ln.ln--kid .ln-scene-go, .ln.ln--kid .ln-habit-go { background: linear-gradient(180deg, #ffc23d, #ff9f1a); color: #2b2100; box-shadow: 0 6px 0 #d97a00, 0 14px 26px -10px rgba(217, 122, 0, .8); }
.ln--kid .ln-est-value b { color: #ff6fa5; }
.ln--kid .ln-wbw-w.is-current { background: #ffd84d; }

/* ---------- Dark ---------- */
html[data-theme="dark"] .ln-ghost { box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .8), 0 0 0 3px var(--w-accent); }
html[data-theme="dark"] .ln-today { background: linear-gradient(135deg, color-mix(in srgb, var(--w-glow) 18%, var(--ln-card)), var(--ln-card) 70%); }
html[data-theme="dark"] .ln-calc-step::before { background: color-mix(in srgb, var(--w-accent) 25%, var(--ln-card)); color: var(--w-ink); }
html[data-theme="dark"] .ln-deeper-icon { background: color-mix(in srgb, var(--w-accent) 25%, var(--ln-card)); color: var(--w-ink); }

/* ---------- Less motion: nothing slides, flies, drifts or flips; the states still change ---------- */
@media (prefers-reduced-motion: reduce) {
  .ln-player.is-live .ln-screen.is-current .ln-screen-in > *, .ln-player.is-live .ln-screen--scene.is-current .ln-scene-copy > * { animation: none; }
  .ln-sc-l, .ln-sc-art { transform: none !important; transition: none; }
  .ln-sc-cloud, .ln-sc-star, .ln-sc-mote, .ln-sc-firefly, .ln-sc-sway, .ln-sc-wave, .ln-sc-glint, .ln-sc-shimmer, .ln-sc-flicker, .ln-sc-window, .ln-sc-mist, .ln-sc-steam, .ln-sc-shoot, .ln-sc-rain, .ln-star i, .ln-explore-glow, .ln-listen.is-playing .ln-listen-waves i, .ln-habit.is-complete .ln-hp-u { animation: none !important; }
  .ln-cele i, .ln-cele-pop, .is-glowing, .ln-explore-mark, .ln-explore-miss, .ln-mem-card.is-matched, .ln-book-page, .ln-chip.is-back, .ln-calc-result.is-new b, .ln-found, .ln-wbw-card, .ln-stars-card, .ln-est-truth { animation: none !important; }
  .ln-mem-card, .ln-reveal-card--flip, .ln-reveal-card--tap .ln-reveal-front, .ln-hp-u, .ln-poll-bar, .ln-stars-lines polyline, .ln-chip { transition: none; }
  .ln-mem-card.is-up { transform: none; }
  .ln-mem-card.is-up .ln-mem-back { visibility: hidden; }
  .ln-mem-card.is-up .ln-mem-front { transform: none; }
  .ln-reveal-card--flip.is-flipped { transform: none; }
  .ln-reveal-card--flip.is-flipped .ln-reveal-front { visibility: hidden; }
  .ln-reveal-card--flip.is-flipped .ln-reveal-back { transform: none; }
  .ln-trace-pad.is-showing::after { animation: none; opacity: .5; clip-path: none; }
  .ln-scene.is-entering .ln-sc-art { transform: none; }
}

/* =====================================================================================================================
   LD2-C: blocks as objects, not forms. Cards that turn over, a cover you lift, tiles on a line, baskets that take what
   you drop, threads between pairs, a word dropped into its gap, true and false as two big cards, a pin of light on the
   picture, a notebook page; "Pray along", "Listen and follow" and the terms' meanings. Every part below is dressed by
   the world and the look (teens and kids at the end of this part), works light and dark, right to left and on a phone,
   and keeps still with less motion.
   ===================================================================================================================== */
:root {
  /* An eight-point star, the pattern on the back of every card (two squares, one turned). */
  --ln-star-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='-5 -5 56 56'%3E%3Cg fill='none' stroke='white' stroke-opacity='.08' stroke-width='1.2'%3E%3Crect x='14' y='14' width='18' height='18'/%3E%3Crect x='14' y='14' width='18' height='18' transform='rotate(45 23 23)'/%3E%3Ccircle cx='23' cy='23' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reveal and flashcards: cards you turn over ---------- */
.ln-reveal-count { justify-self: start; }
.ln-reveal-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; counter-reset: card; }
.ln-reveal-grid.is-single { grid-template-columns: minmax(0, 520px); justify-content: center; }
.ln-reveal-card { counter-increment: card; min-height: 210px; border-radius: 24px; cursor: pointer; }
.ln-reveal-card:focus-visible, .ln-flash:focus-visible { outline: 3px solid var(--w-accent); outline-offset: 4px; }
.ln-reveal-front, .ln-flash-front {
  color: #fff;
  background: radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--w-glow) 38%, transparent), transparent 60%), var(--ln-star-tile), linear-gradient(155deg, color-mix(in srgb, var(--w-deep) 88%, var(--w-accent)), var(--w-deep));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-glow) 30%, transparent), inset 0 0 0 7px color-mix(in srgb, var(--w-deep) 70%, transparent), inset 0 0 0 8px color-mix(in srgb, var(--w-glow) 22%, transparent), 0 5px 0 color-mix(in srgb, var(--w-deep) 70%, #000), 0 18px 34px -18px color-mix(in srgb, var(--w-deep) 85%, transparent);
  font-family: var(--ln-display); font-weight: 600; font-size: 19px; line-height: 1.3; text-wrap: balance;
}
.ln-reveal-front { position: relative; }
.ln-reveal-front::before { content: counter(card); position: absolute; top: 14px; inset-inline-start: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--ln-sans, sans-serif); color: var(--w-deep); background: var(--w-glow); }
.ln-reveal-grid.is-single .ln-reveal-front::before { display: none; }
.ln-reveal-front .ln-reveal-how { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 11px; border-radius: 999px; font-family: var(--ln-sans, sans-serif); font-size: 11px; letter-spacing: .12em; color: var(--w-glow); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ln-reveal-card--flip .ln-reveal-how::before { content: "↻"; font-size: 14px; letter-spacing: 0; }
.ln-reveal-card--tap .ln-reveal-how::before { content: "⌃"; font-size: 13px; letter-spacing: 0; }
.ln-reveal-pic { width: min(100%, 220px); max-height: 120px; object-fit: contain; border-radius: 14px; padding: 6px; background: color-mix(in srgb, #fff 92%, var(--w-soft)); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.ln-reveal-card.has-pic { min-height: 280px; }
.ln-reveal-back, .ln-flash-back {
  color: var(--ln-ink); font-size: 16.5px; font-weight: 600; line-height: 1.45;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--w-glow) 22%, transparent), transparent 70%), var(--ln-card);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ln-gold) 55%, transparent), inset 0 0 0 7px var(--ln-card), inset 0 0 0 8px color-mix(in srgb, var(--ln-gold) 30%, transparent), 0 5px 0 color-mix(in srgb, var(--ln-ink) 10%, transparent), 0 18px 34px -20px rgba(0, 0, 0, .4);
}
.ln-reveal-back { position: relative; }
.ln-reveal-card.is-revealed .ln-reveal-back::after { content: "✓"; position: absolute; top: 12px; inset-inline-end: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: var(--ln-good); }
.ln-reveal-card--flip { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ln-reveal-card--flip:hover:not(.is-flipped) { transform: translateY(-4px) rotateX(4deg); }
/* A cover to lift: it rises a little at a touch, then slides away to show what is under it. */
.ln-reveal-card--tap .ln-reveal-front { transition: transform .65s cubic-bezier(.2, .8, .2, 1); }
.ln-reveal-card--tap .ln-reveal-front::after { content: ""; position: absolute; bottom: 10px; left: 50%; width: 46px; height: 5px; margin-left: -23px; border-radius: 4px; background: color-mix(in srgb, var(--w-glow) 70%, transparent); }
.ln-reveal-card--tap:not(.is-revealed):hover .ln-reveal-front { transform: translateY(-14px); }
.ln-reveal-card--tap .ln-reveal-back { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ln-gold) 45%, transparent), inset 0 10px 24px -14px rgba(0, 0, 0, .35); }
.ln-reveal-scratch { border-radius: 24px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ln-gold) 45%, transparent), var(--ln-shadow); }
.ln-reveal-pad { border-radius: 18px; min-height: 150px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ln-gold) 40%, transparent); }
/* Flashcards share the look. */
.ln-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; counter-reset: card; }
.ln-flash { counter-increment: card; min-height: 180px; border-radius: 24px; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ln-flash:hover:not(.is-flipped) { transform: translateY(-4px) rotateX(4deg); }
.ln-flash.is-flipped:hover { transform: rotateY(180deg); }
.ln-flash span { padding: 22px 18px; }
/* Both faces in one cell, so the card grows to the longer one (never cut off on a phone). */
.ln-practice.is-live .ln-flash { display: grid; }
.ln-practice.is-live .ln-flash > span { position: relative; inset: auto; grid-area: 1 / 1; }
.ln-flash-front::after { bottom: 12px; inset-inline-end: 16px; color: var(--w-glow); opacity: .9; font-size: 18px; }
.ln-flash-front::before { content: counter(card); position: absolute; top: 14px; inset-inline-start: 16px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--ln-sans, sans-serif); color: var(--w-deep); background: var(--w-glow); }
@media (max-width: 640px) {
  .ln-reveal-grid:not(.is-single), .ln-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ln-reveal-card, .ln-flash { min-height: 168px; border-radius: 20px; }
  .ln-reveal-card.has-pic { min-height: 236px; }
  .ln-reveal-front, .ln-flash-front { font-size: 15.5px; }
  .ln-reveal-card > span, .ln-flash span { padding: 38px 12px 14px; }
  .ln-reveal-back, .ln-flash-back { font-size: 14px; }
  .ln-reveal-front .ln-reveal-how { font-size: 9.5px; padding: 4px 8px; }
  .ln-reveal-pic { max-height: 84px; }
}

/* ---------- Choice: tiles that lift when picked and send out a ring of light when right ---------- */
.ln .ln-screen .ln-opt { transition: transform .18s var(--ln-ease), box-shadow .2s, background .2s; }
.ln .ln-screen .ln-opt.is-picked:not(:disabled) { transform: translateY(-3px); }
.ln .ln-screen .ln-opt.is-right::after { animation: ln-right-light .9s var(--ln-ease); }
@keyframes ln-right-light { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ln-good) 55%, transparent); } 70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--ln-good) 0%, transparent); } }
.ln .ln-screen .ln-opt.has-pic img { transition: transform .4s var(--ln-ease); }
.ln .ln-screen .ln-opt.has-pic:hover:not(:disabled) img { transform: scale(1.03); }

/* True or false: two big cards, a tick and a cross. */
.ln .ln-screen .ln-opts--tf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ln .ln-player--stage .ln-layout--do .ln-opts--tf .ln-opt, .ln .ln-screen .ln-opts--tf .ln-opt { min-height: 140px; flex-direction: column; justify-content: center; gap: 6px; font-family: var(--ln-display); font-weight: 600; font-size: 22px; }
.ln .ln-screen .ln-opts--tf .ln-opt .ln-opt-text::before { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; font-family: var(--ln-sans, sans-serif); font-size: 26px; font-weight: 900; transition: background .2s, color .2s, transform .3s var(--ln-ease); }
.ln .ln-screen .ln-opts--tf .ln-opt[data-key="1"] .ln-opt-text::before { content: "✓"; color: var(--ln-good); background: color-mix(in srgb, var(--ln-good) 12%, var(--ln-card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ln-good) 40%, transparent); }
.ln .ln-screen .ln-opts--tf .ln-opt[data-key="0"] .ln-opt-text::before { content: "✕"; color: var(--ln-bad); background: color-mix(in srgb, var(--ln-bad) 10%, var(--ln-card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ln-bad) 35%, transparent); }
.ln .ln-screen .ln-opts--tf .ln-opt.is-picked .ln-opt-text::before { transform: scale(1.12); }
.ln .ln-screen .ln-opts--tf .ln-opt.is-picked[data-key="1"] .ln-opt-text::before, .ln .ln-screen .ln-opts--tf .ln-opt.is-right[data-key="1"] .ln-opt-text::before { color: #fff; background: var(--ln-good); }
.ln .ln-screen .ln-opts--tf .ln-opt.is-picked[data-key="0"] .ln-opt-text::before, .ln .ln-screen .ln-opts--tf .ln-opt.is-right[data-key="0"] .ln-opt-text::before { color: #fff; background: var(--ln-bad); }

/* Fill the gap: a slot in the sentence; the picked word drops into it; word tiles under it. */
.ln-gap { min-width: 4.5ch; padding: 0 .35em; margin: 0 .1em; border-radius: 10px; border-bottom: 3px solid var(--w-accent); background: color-mix(in srgb, var(--w-accent) 12%, transparent); text-align: center; line-height: 1.25; }
.ln-gap.is-filled { color: var(--w-ink); background: color-mix(in srgb, var(--w-glow) 30%, var(--ln-card)); border-bottom-color: var(--w-strong); }
.ln-gap.is-new { animation: ln-gap-in .38s var(--ip-ease-spring, cubic-bezier(.34, 1.4, .64, 1)); }
@keyframes ln-gap-in { from { transform: translateY(-10px) scale(.9); opacity: .2; } }
.ln-gap.is-right, .ln-gap.is-shown { color: var(--ln-good-ink, var(--ln-good)); background: var(--ln-good-soft); border-bottom-color: var(--ln-good); }
.ln-gap.is-shown { border-bottom-style: dashed; }
.ln .ln-screen .ln-qbox--fillgap .ln-opts:not(.ln-opts--pics) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ln .ln-screen .ln-qbox--fillgap .ln-opts:not(.ln-opts--pics) .ln-opt { width: auto; min-width: 110px; justify-content: center; font-family: var(--ln-display); font-weight: 600; font-size: 20px; padding: 14px 22px; }
.ln .ln-player--stage .ln-layout--do .ln-qbox--fillgap .ln-opts:not(.ln-opts--pics) .ln-opt::before { position: absolute; top: -10px; inset-inline-start: -8px; width: 24px; height: 24px; font-size: 11px; }

/* ---------- Ordering: cards on a line, numbered as they stand ---------- */
.ln-order { position: relative; gap: 10px; }
.ln-order::before { content: ""; position: absolute; top: 26px; bottom: 26px; inset-inline-start: 29px; width: 3px; border-radius: 3px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--w-accent) 70%, transparent) 0 6px, transparent 6px 12px); }
.ln-order-item { position: relative; gap: 14px; min-height: 64px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--ln-card); box-shadow: inset 0 0 0 1.5px var(--ln-line-2), 0 4px 0 color-mix(in srgb, var(--ln-ink) 8%, transparent); transition: box-shadow .2s, background .2s; }
.ln-order-item::before { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: var(--w-glow); background: var(--w-deep); box-shadow: 0 0 0 4px var(--ln-card); }
.ln-order-body { order: 1; font-size: 16px; }
.ln-order-body img { width: 72px; height: 72px; border-radius: 14px; padding: 4px; box-shadow: inset 0 0 0 1px var(--ln-line); }
.ln-order-move { order: 2; width: 38px; height: 38px; border-radius: 50%; color: var(--w-ink); background: color-mix(in srgb, var(--w-accent) 10%, var(--ln-card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-accent) 35%, transparent); transition: transform .15s, background .15s; }
.ln-order-move:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--w-accent) 22%, var(--ln-card)); }
.ln-order-handle { order: 3; font-size: 20px; padding: 6px 2px 6px 6px; cursor: grab; }
.ln-order-item.is-right { background: var(--ln-good-soft); box-shadow: inset 0 0 0 2.5px var(--ln-good), 0 4px 0 color-mix(in srgb, var(--ln-good) 45%, transparent); }
.ln-order-item.is-right::before { content: "✓"; color: #fff; background: var(--ln-good); }
.ln-order-item.is-wrong { box-shadow: inset 0 0 0 2.5px var(--ln-bad), 0 4px 0 color-mix(in srgb, var(--ln-bad) 40%, transparent); }
.ln-order-item.is-wrong::before { color: #fff; background: var(--ln-bad); }
@media (max-width: 640px) {
  .ln-order::before { inset-inline-start: 25px; }
  .ln-order-item { gap: 10px; padding: 10px; }
  .ln-order-item::before { width: 28px; height: 28px; font-size: 13px; }
  .ln-order-body { font-size: 15px; }
  .ln-order-body img { width: 54px; height: 54px; }
  .ln-order-move { width: 36px; height: 36px; }
  .ln-order-handle { display: none; }
}

/* ---------- Matching: threads between the pairs ---------- */
.ln-matchgrid { position: relative; column-gap: clamp(40px, 8vw, 96px); }
.ln-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.ln-thread { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .9; stroke-dasharray: 600; animation: ln-thread-draw .5s var(--ln-ease) both; }
.ln-thread.is-right { stroke: var(--ln-good) !important; stroke-width: 3.5; }
.ln-thread.is-wrong { stroke: var(--ln-bad) !important; stroke-dasharray: 6 6; animation: none; }
@keyframes ln-thread-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.ln-match-col { position: relative; z-index: 1; gap: 10px; }
.ln-match-item { min-height: 58px; border-radius: 16px; font-size: 15.5px; box-shadow: inset 0 0 0 1.5px var(--ln-line-2), 0 4px 0 color-mix(in srgb, var(--ln-ink) 7%, transparent); transition: transform .15s var(--ln-ease), box-shadow .2s, background .2s; }
.ln-match-item:hover:not(:disabled) { transform: translateY(-2px); }
/* Each card's knot, where its thread ties on (on the side facing the other column). */
.ln-match-item::after { content: ""; position: absolute; top: 50%; inset-inline-end: -7px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--ln-card); box-shadow: inset 0 0 0 2.5px var(--ln-line-2); transform: none; }
.ln-match-right::after, .ln-match-right.is-paired::after { inset-inline-end: auto; inset-inline-start: -7px; }
.ln-match-item.is-picked { transform: translateY(-3px); background: color-mix(in srgb, var(--w-accent) 10%, var(--ln-card)); box-shadow: inset 0 0 0 3px var(--w-accent), 0 10px 24px -12px color-mix(in srgb, var(--w-deep) 60%, transparent); }
.ln-match-item.is-picked::after { background: var(--w-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-accent) 30%, transparent); }
.ln-match-item.is-paired { box-shadow: inset 0 0 0 2.5px var(--pair, var(--w-accent)), 0 4px 0 color-mix(in srgb, var(--pair, var(--w-accent)) 35%, transparent); }
.ln-match-item.is-paired::after { background: var(--pair, var(--w-accent)); box-shadow: none; transform: none; }
.ln-match-item.is-right { box-shadow: inset 0 0 0 2.5px var(--ln-good); }
.ln-match-item.is-wrong { box-shadow: inset 0 0 0 2.5px var(--ln-bad); }
@media (max-width: 640px) {
  .ln-matchgrid { column-gap: 30px; }
  .ln-match-item { min-height: 52px; font-size: 13.5px; padding: 10px; }
}

/* ---------- Tap the spot: the picture as a plate, a pin of light where you tap ---------- */
.ln-tap-stage { width: fit-content; max-width: 100%; margin-inline: auto; }
.ln-tap-stage img { width: auto; max-width: 100%; max-height: min(56vh, 520px); }
.ln-tap-stage { border-radius: 22px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ln-gold) 40%, transparent), 0 18px 40px -24px rgba(0, 0, 0, .45); background: var(--w-soft); }
.ln-tap-marker { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--w-strong); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--w-accent), 0 8px 18px rgba(0, 0, 0, .35); transition: left .18s var(--ln-ease), top .18s var(--ln-ease); }
.ln-tap-marker::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--w-accent); animation: ln-ripple 1.6s ease-out infinite; }
.ln-tap-marker.is-right { background: var(--ln-good); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ln-good), 0 0 30px 6px color-mix(in srgb, var(--ln-good) 60%, transparent); }
.ln-tap-marker.is-right::after, .ln-tap-marker.is-wrong::after { display: none; }
.ln-tap-marker.is-wrong { background: var(--ln-bad); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ln-bad); }
.ln-tap-answer { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ln-good) 20%, transparent), 0 0 34px color-mix(in srgb, var(--ln-good) 50%, transparent); }

/* ---------- Sort: baskets that take what you drop in ---------- */
.ln-bucket { position: relative; padding: 0; gap: 0; overflow: hidden; border-radius: 20px 20px 30px 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--w-accent) calc(8% + var(--i) * 4%), var(--ln-card)), var(--ln-card) 70%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--w-accent) 32%, transparent), inset 0 -18px 30px -24px color-mix(in srgb, var(--w-deep) 55%, transparent), 0 14px 26px -18px color-mix(in srgb, var(--w-deep) 70%, transparent); }
.ln-bucket-head { position: relative; border-radius: 0; padding: 12px 14px 18px; padding-inline-end: 48px; }
/* The rim: a woven band under the label. */
.ln-bucket-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--w-glow) 55%, transparent) 0 8px, transparent 8px 12px), color-mix(in srgb, var(--w-deep) 70%, #000); }
/* How many the basket holds, on its rim. */
.ln-bucket-head[data-count]:not([data-count="0"])::before { content: attr(data-count); }
.ln-bucket-head::before { position: absolute; top: 12px; inset-inline-end: 12px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: var(--w-deep); background: var(--w-glow); }
.ln-bucket-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 11.5px; color: var(--w-deep); background: rgba(255, 255, 255, .9); letter-spacing: 0; }
.ln-bucket-items { min-height: 120px; padding: 12px 10px 16px; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--w-accent) 5%, transparent) 0 6px, transparent 6px 12px); }
.ln-bucket-items:empty::before { content: ""; display: block; height: 76px; margin: 4px; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--w-accent) 30%, transparent); }
.ln-bucket.is-over { transform: translateY(-4px) scale(1.02); box-shadow: inset 0 0 0 3px var(--w-accent), 0 0 0 6px color-mix(in srgb, var(--w-accent) 20%, transparent), 0 22px 40px -20px color-mix(in srgb, var(--w-deep) 70%, transparent); }
.ln-bucket.is-taken { animation: ln-basket-dip .42s var(--ln-ease); }
@keyframes ln-basket-dip { 35% { transform: translateY(5px) scaleY(.98); } 70% { transform: translateY(-2px); } }
.ln-bucket-items .ln-chip { animation: ln-chip-in .3s var(--ln-ease); }
@keyframes ln-chip-in { from { transform: translateY(-14px); opacity: 0; } }
.ln-sort-tray { border-radius: 22px; }
@media (max-width: 640px) {
  .ln-bucket-head { padding: 10px 10px 16px; padding-inline-end: 40px; }
  .ln-bucket-head b { font-size: 16px; }
  .ln-bucket-items { min-height: 90px; padding: 10px 8px 14px; }
  .ln-bucket-items:empty::before { height: 54px; }
}

/* ---------- Build: the pieces on one line, joined ---------- */
.ln-slot { border-radius: 18px; }
.ln-slot + .ln-slot::after { content: ""; position: absolute; top: 50%; inset-inline-end: calc(100% + 1px); width: 8px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: color-mix(in srgb, var(--w-accent) 60%, transparent); }
.ln-slot:has(.ln-chip) .ln-chip { animation: ln-chip-in .3s var(--ln-ease); }

/* ---------- A scenario's choices and a conversation's replies ---------- */
.ln-choice-list { gap: 10px; }
.ln-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 14px 18px; padding-inline-end: 56px; border-radius: 18px; font-size: 16px; box-shadow: inset 0 0 0 1.5px var(--ln-line-2), 0 4px 0 color-mix(in srgb, var(--ln-ink) 7%, transparent); }
.ln-choice::after { content: "→"; position: absolute; inset-inline-end: 16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--w-ink); background: color-mix(in srgb, var(--w-accent) 12%, var(--ln-card)); transition: transform .2s var(--ln-ease); }
[dir="rtl"] .ln-choice::after { content: "←"; }
.ln-choice:hover:not(:disabled)::after { transform: translateX(3px); }
[dir="rtl"] .ln-choice:hover:not(:disabled)::after { transform: translateX(-3px); }
.ln-choice.is-right::after { content: "✓"; color: #fff; background: var(--ln-good); }
.ln-choice.is-wrong::after { content: "✕"; color: #fff; background: var(--ln-bad); }
.ln-reply { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-accent) 40%, transparent), 0 3px 0 color-mix(in srgb, var(--w-accent) 25%, transparent); transition: transform .15s var(--ln-ease); }
.ln-reply:hover { transform: translateY(-2px); }

/* ---------- Reflection: a page of a notebook ---------- */
.ln-reflect textarea {
  min-height: 190px; padding: 6px 18px 18px; padding-inline-start: 58px; border: 0; border-radius: 6px 20px 20px 6px; line-height: 34px; font-size: 17px;
  background: linear-gradient(90deg, transparent 44px, color-mix(in srgb, var(--ln-bad) 35%, transparent) 44px 46px, transparent 46px), repeating-linear-gradient(180deg, transparent 0 33px, color-mix(in srgb, var(--w-accent) 28%, transparent) 33px 34px), color-mix(in srgb, #fffaf0 86%, var(--ln-card));
  background-attachment: local; box-shadow: inset 0 0 0 1px var(--ln-line), -4px 0 0 color-mix(in srgb, var(--w-deep) 75%, transparent), 0 18px 34px -22px rgba(0, 0, 0, .4);
}
[dir="rtl"] .ln-reflect textarea { border-radius: 20px 6px 6px 20px; background: linear-gradient(270deg, transparent 44px, color-mix(in srgb, var(--ln-bad) 35%, transparent) 44px 46px, transparent 46px), repeating-linear-gradient(180deg, transparent 0 33px, color-mix(in srgb, var(--w-accent) 28%, transparent) 33px 34px), color-mix(in srgb, #fffaf0 86%, var(--ln-card)); box-shadow: inset 0 0 0 1px var(--ln-line), 4px 0 0 color-mix(in srgb, var(--w-deep) 75%, transparent), 0 18px 34px -22px rgba(0, 0, 0, .4); }
.ln-reflect textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--w-accent), -4px 0 0 var(--w-deep), 0 18px 34px -22px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .ln-reflect textarea { background: linear-gradient(90deg, transparent 44px, color-mix(in srgb, var(--ln-bad) 45%, transparent) 44px 46px, transparent 46px), repeating-linear-gradient(180deg, transparent 0 33px, rgba(255, 255, 255, .09) 33px 34px), var(--ln-card-2); }

/* ---------- Compare: columns with their own heads ---------- */
.ln-compare-wrap { border-radius: 22px; box-shadow: inset 0 0 0 1px var(--ln-line), 0 18px 34px -24px rgba(0, 0, 0, .35); }
.ln-compare thead th { padding: 14px; font-family: var(--ln-display); font-weight: 600; font-size: 16px; letter-spacing: 0; }
.ln-compare thead th + th { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .15); }
.ln-compare td { font-size: 15px; }

/* ---------- Posture and "Pray along": the position, its words, then your turn ---------- */
.ln-journey-block.is-stepped .ln-pose figure { border-radius: 24px; box-shadow: inset 0 0 0 1px var(--ln-line), 0 18px 40px -26px rgba(0, 0, 0, .45); transition: box-shadow .3s; }
/* The owner's art is drawn on white: it sits on a light plate in every look and theme. */
.ln-journey-block.is-stepped .ln-pose img { background: #fff; }
.ln-pray-hear { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 44px; }
.ln-pray-icon { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--w-strong); }
.ln-pray-icon::before { content: ""; position: absolute; top: 6px; inset-inline-start: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
[dir="rtl"] .ln-pray-icon::before { transform: scaleX(-1); }
.ln-posture.is-hearing .ln-pose.is-current .ln-pray-hear { box-shadow: inset 0 0 0 2px var(--w-accent); }
.ln-pray { display: grid; gap: 8px; }
.ln-pray-words[hidden] { display: none; }
.ln-pray-words { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border-radius: 22px; text-align: center; background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--w-glow) 28%, transparent), transparent 70%), var(--ln-card-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ln-gold) 45%, transparent); }
.ln-pray-line { display: grid; gap: 4px; padding: 6px 10px; border-radius: 16px; opacity: .55; transition: opacity .3s, background .3s; }
.ln-pray-line.is-saying { opacity: 1; background: color-mix(in srgb, var(--w-glow) 30%, transparent); }
.ln-pray-line.is-said { opacity: .9; }
.ln-pray-ar, .ln-pray-tr { justify-self: stretch; width: 100%; }
.ln-pray-ar { text-align: center; font-family: var(--ln-arabic); font-size: clamp(24px, 3vw, 32px); line-height: 1.8; color: var(--w-ink); }
.ln-pray-tr { font-style: italic; font-size: 15px; color: var(--ln-ink-2); }
.ln-pray-turn { min-height: 1.4em; text-align: center; font-weight: 800; color: var(--w-ink); }
.ln-pray-turn:empty { display: none; }
.ln-posture.is-your-turn .ln-pose.is-current figure { box-shadow: 0 0 0 3px var(--w-accent), 0 0 0 10px color-mix(in srgb, var(--w-accent) 18%, transparent); animation: ln-turn-breathe 2.2s ease-in-out infinite; }
@keyframes ln-turn-breathe { 50% { box-shadow: 0 0 0 3px var(--w-accent), 0 0 0 16px color-mix(in srgb, var(--w-accent) 8%, transparent); } }
.ln .ln-pray-go[aria-pressed="true"] { color: #fff; background: var(--w-strong); }

/* ---------- "Listen and follow": the ayah lit as the reciter recites it ---------- */
.ln-follow-tools { display: flex; justify-content: center; margin: 6px 0 2px; }
.ln-follow-go { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; }
.ln-follow-icon { flex: none; width: 20px; height: 16px; background: linear-gradient(currentColor, currentColor) 0 50% / 3px 40% no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 3px 100% no-repeat, linear-gradient(currentColor, currentColor) 100% 50% / 3px 65% no-repeat; }
.ln .is-following .ln-follow-go { color: #fff; background: var(--w-strong); }
.ln-ayah { border-radius: 12px; transition: background .4s, color .4s, box-shadow .4s; }
.ln-ayah.is-reciting, .ln-wbw-verse.is-reciting, .ln-verse-ar.is-reciting { background: color-mix(in srgb, var(--ln-gold) 24%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ln-gold) 24%, transparent); border-radius: 12px; }
.ln-ayah.is-recited { color: var(--w-ink); }
.ln-verse-en p[data-ayah] { transition: opacity .4s; }
.is-following .ln-verse-en p[data-ayah]:not(.is-reciting) { opacity: .55; }

/* ---------- Term meanings: a quiet underline, a small card ---------- */
.ln-term { display: inline; padding: 0 1px; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; border-radius: 4px; cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--w-accent) 85%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ln-term:hover, .ln-term.is-open { background: color-mix(in srgb, var(--w-glow) 30%, transparent); text-decoration-style: solid; }
.ln-term:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }
.ln-screen-in:has(> .ln-term-card) { position: relative; }
.ln-term-card { position: absolute; z-index: 30; display: grid; gap: 6px; padding: 16px 18px 14px; border-radius: 18px; text-align: start; color: var(--ln-ink); background: var(--ln-card); box-shadow: 0 0 0 1px var(--ln-line), inset 0 3px 0 color-mix(in srgb, var(--w-accent) 70%, transparent), 0 24px 50px -18px rgba(0, 0, 0, .5); animation: ln-term-in .22s var(--ln-ease); }
.ln-term-card::before { content: ""; position: absolute; top: -7px; left: calc(var(--arrow, 50%) - 7px); width: 14px; height: 14px; transform: rotate(45deg); background: var(--ln-card); box-shadow: -1px -1px 0 var(--ln-line); }
.ln-term-card.is-above::before { top: auto; bottom: -7px; box-shadow: 1px 1px 0 var(--ln-line); }
@keyframes ln-term-in { from { opacity: 0; transform: translateY(6px); } }
.ln-term-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-inline-end: 26px; }
.ln-term-name { font-family: var(--ln-display); font-weight: 600; font-size: 21px; line-height: 1.2; outline: none; }
.ln-term-ar { font-family: var(--ln-arabic); font-size: 24px; line-height: 1.4; color: var(--w-ink); }
.ln-term-say { font-style: italic; font-size: 14px; color: var(--ln-muted); }
.ln-term-mean { font-size: 15.5px; line-height: 1.5; color: var(--ln-ink-2); }
.ln-term-tools { display: flex; margin-top: 4px; }
.ln .ln-term-keep { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.ln-term-keep[aria-pressed="true"] { color: var(--w-ink); box-shadow: inset 0 0 0 1.5px var(--w-accent); }
.ln-term-close { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ln-muted); background: transparent; }
.ln-term-close:hover { background: var(--ln-line); color: var(--ln-ink); }

/* ---------- Constellation: names stay inside the sky on narrow screens (moved in by discover.js) ---------- */
.ln-star span { transform: translateX(var(--nudge, 0)); }
.ln-stars-sky.is-crowded .ln-star span { max-width: 110px; white-space: normal; text-align: center; line-height: 1.2; }
.ln-stars-sky.is-crowded .ln-star:nth-of-type(even) span { order: -1; }
.ln-stars-sky.is-crowded .ln-star.is-name-above span { order: -1; }
.ln-stars-sky.is-crowded .ln-star.is-name-below span { order: 0; }
@media (max-width: 640px) {
  .ln-star { padding: 4px; gap: 4px; }
  .ln-star span { width: max-content; max-width: 84px; white-space: normal; overflow-wrap: normal; hyphens: none; text-align: center; line-height: 1.15; font-size: 10.5px; }
  /* Every other name above its star, so close neighbours do not run into each other (discover.js swaps one that still would). */
  .ln-star:nth-of-type(even) span { order: -1; }
  .ln-star.is-name-above span { order: -1; }
  .ln-star.is-name-below span { order: 0; }
  /* The sky turned down the phone: each name beside its star, the star itself on its point. */
  .ln-stars-sky.is-turned .ln-star { grid-auto-flow: column; align-items: center; transform: translate(-13px, -50%); }
  [dir="rtl"] .ln-stars-sky.is-turned .ln-star { transform: translate(calc(-100% + 13px), -50%); }
  .ln-stars-sky.is-turned .ln-star span, .ln-stars-sky.is-turned .ln-star:nth-of-type(even) span { order: 0; max-width: none; white-space: nowrap; text-align: start; }
  .ln-stars-sky.is-turned .ln-star.is-name-start { transform: translate(calc(-100% + 13px), -50%); }
  [dir="rtl"] .ln-stars-sky.is-turned .ln-star.is-name-start { transform: translate(-13px, -50%); }
  .ln-stars-sky.is-turned .ln-star.is-name-start span { order: -1; text-align: end; }
}

/* ---------- Teens: printed stickers, hard edges and neon ---------- */
.ln--teen .ln-reveal-front, .ln--teen .ln-flash-front { background: var(--ln-star-tile), linear-gradient(135deg, #2b1458, #12081f 70%); box-shadow: inset 0 0 0 2px #8b5cf6, 6px 6px 0 #22d3ee; font-weight: 800; letter-spacing: -.01em; }
.ln--teen .ln-reveal-front::before, .ln--teen .ln-flash-front::before { border-radius: 6px; color: #12081f; background: #22d3ee; }
.ln--teen .ln-reveal-back, .ln--teen .ln-flash-back { box-shadow: inset 0 0 0 2px var(--ln-ink), 6px 6px 0 #8b5cf6; }
.ln--teen .ln-reveal-card, .ln--teen .ln-flash, .ln--teen .ln-reveal-card > span, .ln--teen .ln-flash span { border-radius: 14px; }
.ln--teen .ln-order-item, .ln--teen .ln-match-item, .ln--teen .ln-choice { border-radius: 12px; box-shadow: inset 0 0 0 2px var(--ln-line-2), 4px 4px 0 color-mix(in srgb, #8b5cf6 45%, transparent); }
.ln--teen .ln-order-item::before { border-radius: 8px; color: #12081f; background: #22d3ee; }
.ln--teen .ln-order::before { background: repeating-linear-gradient(180deg, #8b5cf6 0 6px, transparent 6px 12px); }
.ln--teen .ln-match-item.is-picked { box-shadow: inset 0 0 0 3px #22d3ee, 4px 4px 0 #8b5cf6; }
.ln--teen .ln-match-item.is-paired { box-shadow: inset 0 0 0 2.5px var(--pair), 4px 4px 0 color-mix(in srgb, var(--pair) 45%, transparent); }
.ln--teen .ln-thread { stroke-width: 3.5; }
.ln--teen .ln-bucket { border-radius: 14px; box-shadow: inset 0 0 0 2px #8b5cf6, 6px 6px 0 color-mix(in srgb, #22d3ee 60%, transparent); }
.ln--teen .ln-bucket-head::after { background: repeating-linear-gradient(90deg, #22d3ee 0 8px, transparent 8px 12px), #12081f; }
.ln--teen .ln-bucket-head::before { color: #12081f; background: #22d3ee; border-radius: 6px; }
.ln--teen .ln-gap { border-radius: 6px; }
.ln--teen .ln-opts--tf .ln-opt .ln-opt-text::before { border-radius: 10px; }
.ln--teen .ln-pray-words { border-radius: 12px; }
.ln--teen .ln-term-card { border-radius: 12px; box-shadow: inset 0 0 0 2px #8b5cf6, 5px 5px 0 #22d3ee; }
.ln--teen .ln-reflect textarea { border-radius: 4px 12px 12px 4px; }

/* ---------- Kids: chunky toys that press down ---------- */
.ln--kid .ln-reveal-front, .ln--kid .ln-flash-front { font-weight: 800; font-size: 21px; background: radial-gradient(circle at 18% 22%, #ffd84d 0 9px, transparent 10px), radial-gradient(circle at 84% 78%, #ff6fa5 0 7px, transparent 8px), var(--ln-star-tile), linear-gradient(160deg, #5aa9ff, #2b59c3); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 7px 0 #1d3f94, 0 16px 26px -12px rgba(29, 63, 148, .7); }
.ln--kid .ln-reveal-front::before, .ln--kid .ln-flash-front::before { width: 32px; height: 32px; font-size: 15px; color: #2b59c3; background: #fff; }
.ln--kid .ln-reveal-front .ln-reveal-how { color: #fff; font-size: 12.5px; background: rgba(255, 255, 255, .18); }
.ln--kid .ln-reveal-back, .ln--kid .ln-flash-back { font-size: 19px; background: #fff7e6; color: #2b2100; box-shadow: inset 0 0 0 4px #ffcf6e, 0 7px 0 #f0b84a; }
.ln--kid .ln-reveal-card, .ln--kid .ln-flash, .ln--kid .ln-reveal-card > span, .ln--kid .ln-flash span { border-radius: 30px; }
.ln--kid .ln-reveal-card:active:not(.is-flipped) { transform: translateY(5px); }
.ln--kid .ln-reveal-card > span, .ln--kid .ln-flash span { padding-top: 56px; }
.ln--kid .ln-opts--tf .ln-opt .ln-opt-text::before { width: 68px; height: 68px; font-size: 36px; }
.ln--kid .ln-gap { border-radius: 14px; border-bottom-width: 4px; background: #fff3d6; }
.ln--kid .ln-order-item, .ln--kid .ln-match-item, .ln--kid .ln-choice { border-radius: 24px; min-height: 68px; font-size: 18px; box-shadow: inset 0 0 0 3px #ffe2a3, 0 6px 0 #ffcf6e; }
.ln--kid .ln-order-item::before { width: 38px; height: 38px; font-size: 17px; color: #fff; background: #ff9f0a; }
.ln--kid .ln-order::before { width: 4px; background: repeating-linear-gradient(180deg, #ffb020 0 8px, transparent 8px 14px); }
.ln--kid .ln-order-move { width: 46px; height: 46px; font-size: 20px; background: #fff3d6; color: #9a5b00; }
.ln--kid .ln-match-item.is-picked { box-shadow: inset 0 0 0 4px #ff9f0a, 0 6px 0 #d97a00; }
.ln--kid .ln-match-item.is-paired { box-shadow: inset 0 0 0 4px var(--pair), 0 6px 0 color-mix(in srgb, var(--pair) 50%, transparent); }
.ln--kid .ln-thread { stroke-width: 5; }
.ln--kid .ln-bucket { border-radius: 26px 26px 40px 40px; background: linear-gradient(180deg, hsl(calc(200 + var(--i) * 70) 90% 93%), #fff); box-shadow: inset 0 0 0 4px hsl(calc(200 + var(--i) * 70) 80% 72%), 0 8px 0 hsl(calc(200 + var(--i) * 70) 60% 62%); }
.ln--kid .ln-bucket-head { background: hsl(calc(215 + var(--i) * 70) 70% 42%); }
.ln--kid .ln-bucket-head::after { height: 9px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 10px, transparent 10px 16px), hsl(calc(215 + var(--i) * 70) 70% 32%); }
/* The bucket's number on white, readable on every colour (it was pink on blue). */
.ln--kid .ln-bucket-n { width: 28px; height: 28px; border-radius: 50%; font-size: 15px; color: #1d3f94; background: #fff; }
.ln--kid .ln-bucket-head::before { color: #2b2100; background: #ffd84d; }
.ln--kid .ln-tap-marker { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: #ff9f0a; }
.ln--kid .ln-term-card, .ln--kid .ln-pray-words { border-radius: 26px; }
.ln--kid .ln-term-name { font-weight: 800; font-size: 24px; }
.ln--kid .ln-term-mean { font-size: 18px; }
.ln--kid .ln-reflect textarea { font-size: 20px; line-height: 40px; background: linear-gradient(90deg, transparent 44px, rgba(255, 111, 165, .5) 44px 47px, transparent 47px), repeating-linear-gradient(180deg, transparent 0 39px, #ffd58a 39px 40px), #fffaf0; }
html[data-theme="dark"] .ln--kid .ln-bucket { background: linear-gradient(180deg, hsl(calc(215 + var(--i) * 70) 40% 26%), var(--ln-card)); box-shadow: inset 0 0 0 4px hsl(calc(215 + var(--i) * 70) 50% 45%), 0 8px 0 hsl(calc(215 + var(--i) * 70) 50% 22%); }
html[data-theme="dark"] .ln--kid .ln-reveal-back, html[data-theme="dark"] .ln--kid .ln-flash-back { background: #2a2416; color: #fff3d6; box-shadow: inset 0 0 0 4px #8a6420, 0 7px 0 #5c4210; }
html[data-theme="dark"] .ln--kid .ln-order-item, html[data-theme="dark"] .ln--kid .ln-match-item, html[data-theme="dark"] .ln--kid .ln-choice { box-shadow: inset 0 0 0 3px #3a4a7c, 0 6px 0 #2a3866; }
html[data-theme="dark"] .ln--kid .ln-gap { background: #3a3220; }
html[data-theme="dark"] .ln--kid .ln-x-count { background: #3a3220; color: #fff3d6; }
html[data-theme="dark"] .ln--kid .ln-reflect textarea { background: linear-gradient(90deg, transparent 44px, rgba(255, 111, 165, .5) 44px 47px, transparent 47px), repeating-linear-gradient(180deg, transparent 0 39px, rgba(255, 255, 255, .1) 39px 40px), var(--ln-card-2); }

/* ---------- Dark ---------- */
html[data-theme="dark"] .ln-reveal-pic { background: #f3efe6; }
html[data-theme="dark"] .ln-gap.is-filled { background: color-mix(in srgb, var(--w-glow) 22%, var(--ln-card)); }
html[data-theme="dark"] .ln-match-item::after { background: var(--ln-card-2); }

/* ---------- Less motion: the cards still turn and fill, but nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .ln-reveal-card--flip:hover, .ln-flash:hover, .ln-reveal-card--tap:hover .ln-reveal-front, .ln .ln-screen .ln-opt.is-picked, .ln-match-item:hover, .ln-match-item.is-picked, .ln-choice:hover::after, .ln-reply:hover, .ln-bucket.is-over, .ln .ln-screen .ln-opt.has-pic:hover img { transform: none !important; }
  .ln-flash { transition: none; }
  .ln-flash.is-flipped { transform: none; }
  .ln-flash.is-flipped .ln-flash-front { visibility: hidden; }
  .ln-flash.is-flipped .ln-flash-back { transform: none; }
  .ln-reveal-card--tap .ln-reveal-front { transition: opacity .12s; }
  .ln-reveal-card--tap.is-revealed .ln-reveal-front { transform: none; opacity: 0; }
  .ln .ln-screen .ln-opt.is-right::after, .ln-gap.is-new, .ln-thread, .ln-tap-marker::after, .ln-bucket.is-taken, .ln-bucket-items .ln-chip, .ln-slot:has(.ln-chip) .ln-chip, .ln-posture.is-your-turn .ln-pose.is-current figure, .ln-term-card { animation: none !important; }
  .ln-tap-marker, .ln-order-move, .ln-pray-line, .ln-ayah, .ln .ln-screen .ln-opts--tf .ln-opt .ln-opt-text::before { transition: none; }
}