/*
  Islamic Portal Learn. Everything lives under .ln so the host sites' styles (Bootstrap on the Website, the Kids
  site's own) do not reach in and these do not reach out. Three looks (.ln--adult, .ln--teen, .ln--kid) on one set
  of parts; each world's colours come from worlds.css through [data-world]. Light and dark follow the host's
  html[data-theme="dark"]; the teen look is dark unless the host is light.
*/

@font-face { font-family: "Learn Display"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format("woff2"); }
@font-face { font-family: "Learn Display"; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/fraunces-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Learn Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Learn Quran"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/amiri-quran-arabic.woff2) format("woff2"); }
@font-face { font-family: "Learn Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-naskh-arabic.woff2) format("woff2"); }

/* ---------- Tokens ---------- */
.ln {
  --ln-ink: #161b26;
  --ln-ink-2: #3c4456;
  --ln-muted: #687083;
  --ln-paper: #f6f4ef;
  --ln-card: #ffffff;
  --ln-card-2: #fbfaf7;
  --ln-line: rgba(22, 27, 38, .10);
  --ln-line-2: rgba(22, 27, 38, .18);
  --ln-good: #0e7552;
  --ln-good-soft: #e3f5ec;
  --ln-bad: #c2413b;
  --ln-bad-soft: #fbe9e7;
  /* LD2-0: the words on a feedback fill, a hint and a second try (amber), and the ink of each for text (AA). */
  --ln-good-ink: #0a5a3f;
  --ln-on-good: #ffffff;
  --ln-try: #b7791f;
  --ln-try-soft: #fdf3e1;
  --ln-try-ink: #7a4f0f;
  --ln-try-strong: #8a5a14;
  --ln-on-try: #ffffff;
  --ln-gold: #c9a24a;
  --ln-r: 18px;
  --ln-r-s: 12px;
  --ln-shadow: 0 1px 2px rgba(16, 20, 32, .06), 0 8px 28px -12px rgba(16, 20, 32, .22);
  --ln-shadow-lift: 0 2px 4px rgba(16, 20, 32, .08), 0 22px 48px -18px rgba(16, 20, 32, .38);
  --ln-display: "Learn Display", "Fraunces", Georgia, "Times New Roman", serif;
  --ln-sans: "Learn Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ln-quran: "Learn Quran", "Amiri Quran", "Amiri", serif;
  --ln-arabic: "Learn Arabic", "Noto Naskh Arabic", "Amiri", serif;
  --ln-max: 1240px;
  --ln-ease: cubic-bezier(.2, .8, .2, 1);

  color: var(--ln-ink);
  background: var(--ln-paper);
  font-family: var(--ln-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;
}
html[data-theme="dark"] .ln, .ln--teen {
  --ln-ink: #eef0f6;
  --ln-ink-2: #c8cddc;
  --ln-muted: #98a0b4;
  --ln-paper: #0d1018;
  --ln-card: #161a25;
  --ln-card-2: #1b2030;
  --ln-line: rgba(255, 255, 255, .09);
  --ln-line-2: rgba(255, 255, 255, .17);
  --ln-good: #3ccf95;
  --ln-good-soft: rgba(60, 207, 149, .12);
  --ln-bad: #ff7a70;
  --ln-bad-soft: rgba(255, 122, 112, .12);
  --ln-good-ink: #8fe8c2;
  --ln-on-good: #04140d;
  --ln-try: #f0b54a;
  --ln-try-soft: rgba(240, 181, 74, .14);
  --ln-try-ink: #f6c76e;
  --ln-try-strong: #f0b54a;
  --ln-on-try: #2a1a00;
  --ln-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --ln-shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 52px -18px rgba(0, 0, 0, .8);
}
html:not([data-theme="dark"]) .ln--teen.ln--light-host {
  --ln-ink: #161b26;
}
/*
  LD2-0: the depth scale. z0 paper, z1 a card (a 1 px line and a soft shadow), z2 lifted off the world (its shadow
  tinted with the world's deep colour, so it is worked out again inside any element of another world), z3 the sheet and
  side panels (a light edge on top; --ln-z3-blur goes in their backdrop-filter).
*/
.ln, .ln [data-world] {
  --ln-z0: none;
  --ln-z1: 0 0 0 1px var(--ln-line), 0 1px 2px rgba(16, 20, 32, .06), 0 8px 24px -14px rgba(16, 20, 32, .24);
  --ln-z2: 0 2px 4px rgba(0, 0, 0, .10), 0 18px 40px -20px color-mix(in srgb, var(--w-deep, #161b26) 60%, transparent), 0 44px 90px -30px color-mix(in srgb, var(--w-deep, #161b26) 30%, transparent);
  --ln-z3: 0 -1px 0 rgba(255, 255, 255, .55), 0 -20px 44px -22px rgba(0, 0, 0, .38);
  --ln-z3-blur: blur(16px) saturate(1.2);
}
html[data-theme="dark"] :is(.ln, .ln [data-world]), .ln--teen, .ln--teen [data-world] {
  --ln-z1: 0 0 0 1px var(--ln-line), 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --ln-z3: 0 -1px 0 rgba(255, 255, 255, .14), 0 -20px 44px -22px rgba(0, 0, 0, .8);
}

/* Resets with no weight of their own (:where), so every Learn part below wins over them and over the host's. */
:where(.ln) *, :where(.ln) *::before, :where(.ln) *::after { box-sizing: border-box; }
:where(.ln) :where(img, svg) { max-width: 100%; }
:where(.ln) a { color: inherit; text-decoration: none; }
:where(.ln) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
:where(.ln) :where(ul, ol) { list-style: none; }
:where(.ln) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.ln) button { cursor: pointer; border: 0; background: none; padding: 0; }
.ln :focus-visible { outline: 3px solid var(--w-accent, #f29a3f); outline-offset: 3px; border-radius: 6px; }
/* Arrows written as text (Next →, ← Back) point the reading way in Arabic and Urdu. */
[dir="rtl"] .ln-dir { display: inline-block; transform: scaleX(-1); }
.ln .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ln-main { position: relative; z-index: 1; padding-bottom: 72px; }
.ln-main > section, .ln-main > div:not(.ln-player), .ln-main > nav { max-width: var(--ln-max); margin-inline: auto; padding-inline: 20px; }
.ln [dir="rtl"], .ln[dir="rtl"] { text-align: start; }

/* ---------- The shell: the page is Learn's alone (a host's Learn shell, or Learn on its own) ---------- */
/* EXPERIENCE.md §3b: inside the Website and the Kids site a Learn page has no website header, menus or footer; the bar
   below is the one bar, and the page fills the screen in the look's own paper. */
.ln-standalone, .ln-shell { margin: 0; background: #f6f4ef; }
html[data-theme="dark"] :is(.ln-standalone, .ln-shell), :is(.ln-standalone, .ln-shell):has(> .ln--teen) { background: #0d1018; }
:is(.ln-standalone, .ln-shell):has(> .ln--kid) { background: #fff8ec; }
html[data-theme="dark"] :is(.ln-standalone, .ln-shell):has(> .ln--kid) { background: #121a33; }
/* LH1: in a host's shell the service bar sits above (--ln-above, set by the host), so the page fills the rest. */
:is(.ln-standalone, .ln-shell) > .ln { min-height: calc(100vh - var(--ln-above, 0px)); min-height: calc(100dvh - var(--ln-above, 0px)); }

/* ---------- Learn bar ---------- */
.ln-bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ln-paper) 82%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid var(--ln-line); view-transition-name: ln-bar; }
.ln-bar::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--w-accent, #f29a3f) 30%, var(--w-glow, #ffd27a) 70%, transparent); opacity: .55; pointer-events: none; }
.ln-bar-in { max-width: var(--ln-max); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; }
.ln-bar-home { display: flex; align-items: center; gap: 9px; flex: none; white-space: nowrap; letter-spacing: -.01em; }
.ln-bar-star { width: 26px; height: 26px; fill: var(--w-accent, #f29a3f); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--w-accent, #f29a3f) 50%, transparent)); transition: transform .6s var(--ln-ease); }
.ln-bar-home:hover .ln-bar-star { transform: rotate(45deg) scale(1.08); }
/* The mark (LH1): "Learning Hub" over a small "by Islamic Portal". */
.ln-bar-brand { display: grid; line-height: 1.08; color: var(--ln-ink-2); }
.ln-bar-brand b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ln-ink); }
.ln-bar-brand small { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--ln-muted); }
.ln[dir="rtl"] .ln-bar-brand small { font-size: 12px; letter-spacing: 0; }
.ln-bar-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.ln-bar-links::-webkit-scrollbar { display: none; }
.ln .ln-bar-link { display: block; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ln-ink-2); white-space: nowrap; transition: background .2s, color .2s; }
.ln-bar-link:hover { background: var(--ln-line); color: var(--ln-ink); }
.ln .ln-bar-link[aria-current="page"] { background: var(--ln-ink); color: var(--ln-paper); }
/* LD3: a visitor's one call to act in the bar, set apart from the places. */
.ln .ln-bar-start { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 14px; font-weight: 750; white-space: nowrap; color: var(--w-ink, #8c5925); background: color-mix(in srgb, var(--w-accent, #f29a3f) 13%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-accent, #f29a3f) 55%, transparent); transition: background .2s, color .2s; }
.ln-bar-start svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ln-bar-start:hover { background: color-mix(in srgb, var(--w-accent, #f29a3f) 24%, transparent); }
.ln .ln-bar-start[aria-current="page"] { color: #fff; background: var(--w-strong, #b8641f); box-shadow: none; }
html[data-theme="dark"] .ln .ln-bar-start:not([aria-current]), .ln--teen .ln-bar-start:not([aria-current]) { color: var(--w-glow, #ffd27a); }

/* Search: a field in the bar on wide screens, at the top of the menu on smaller ones. */
.ln-find { position: relative; display: flex; align-items: center; }
.ln-bar-in > .ln-find { flex: 0 1 210px; }
.ln-find svg { position: absolute; inset-inline-start: 12px; width: 16px; height: 16px; fill: none; stroke: var(--ln-muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.ln .ln-find input { width: 100%; height: 38px; padding: 0 12px; padding-inline-start: 36px; border-radius: 999px; border: 1px solid var(--ln-line-2); background: color-mix(in srgb, var(--ln-card) 70%, transparent); font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.ln .ln-find input::placeholder { color: var(--ln-muted); }
.ln .ln-find input:focus { outline: none; border-color: var(--w-accent, #f29a3f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-accent, #f29a3f) 22%, transparent); background: var(--ln-card); }
.ln-menu-panel .ln-find { margin: 4px 4px 6px; }
@media (min-width: 1101px) {
  .ln-menu-panel .ln-find { display: none; }
}
@media (max-width: 1100px) {
  .ln-bar-in > .ln-find { display: none; }
}

.ln-bar-who { flex: none; }
.ln-who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; padding: 4px 10px 4px 4px; border: 1px solid var(--ln-line-2); border-radius: 999px; }
.ln-who-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--w-accent, #f29a3f), var(--w-deep, #3b2a6b)); color: #fff; font-size: 13px; }
.ln .ln-who--ask { padding: 8px 14px; background: var(--ln-ink); color: var(--ln-paper); border: 0; }
.ln-who-short { display: none; }

/* Every place in the bar fits from 1280 to 1920 px: the bar may run wider than the page, and on narrower desktops the
   places tighten, search gives way to the menu's search, and "Sign in" is short. */
.ln-bar-in { max-width: max(var(--ln-max), min(1480px, 100vw)); }
@media (max-width: 1480px) {
  .ln .ln-bar-link { padding: 8px 10px; }
  .ln-bar-in { gap: 10px; }
  .ln-bar-in > .ln-find { flex-basis: 170px; }
}
@media (max-width: 1360px) {
  .ln-who-long { display: none; }
  .ln-who-short { display: inline; }
}
@media (max-width: 1220px) {
  .ln .ln-bar-link { padding: 7px 9px; font-size: 13.5px; }
  .ln .ln-bar-start { padding: 7px 10px; font-size: 13.5px; }
}
@media (max-width: 1020px) {
  .ln .ln-bar-start span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ln .ln-bar-start { padding: 8px; }
}
/* On phones the places fold under the brand, the whole width, in as many rows as they need: none cut off. */
@media (max-width: 640px) {
  .ln-bar-in { flex-wrap: wrap; row-gap: 6px; }
  .ln .ln-bar-links { order: 5; flex: 1 0 100%; flex-wrap: wrap; justify-content: center; gap: 4px; overflow: visible; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .ln .ln-bar-link { padding: 6px 10px; font-size: 13.5px; }
}

/* The menu: light or dark, the language, signing out, and the one quiet way back to the site. */
.ln-menu { position: relative; flex: none; }
.ln .ln-menu > summary { list-style: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--ln-ink-2); cursor: pointer; transition: background .2s, color .2s; }
.ln-menu > summary::-webkit-details-marker { display: none; }
.ln-menu > summary:hover { background: var(--ln-line); color: var(--ln-ink); }
.ln .ln-menu[open] > summary { background: var(--ln-ink); color: var(--ln-paper); }
.ln-menu > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ln-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); width: 296px; max-width: calc(100vw - 20px); padding: 8px; border-radius: 18px; background: var(--ln-card); border: 1px solid var(--ln-line); box-shadow: var(--ln-shadow-lift); display: grid; gap: 2px; transform-origin: top right; }
[dir="rtl"] .ln-menu-panel { transform-origin: top left; }
@media (prefers-reduced-motion: no-preference) {
  .ln-menu[open] .ln-menu-panel { animation: ln-menu-in .2s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes ln-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.ln .ln-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; text-align: start; color: var(--ln-ink); }
.ln-menu-item:hover { background: var(--ln-line); }
.ln-menu-item > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--w-accent, #f29a3f); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ln-menu-item > span { flex: 1; }
.ln-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--ln-line-2); transition: background .2s; }
.ln-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
[aria-pressed="true"] > .ln-switch { background: var(--w-accent, #f29a3f); }
[aria-pressed="true"] > .ln-switch::after { transform: translateX(16px); }
[dir="rtl"] [aria-pressed="true"] > .ln-switch::after { transform: translateX(-16px); }
.ln-menu-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px; padding: 10px; border-block: 1px solid var(--ln-line); }
.ln .ln-menu-langs a { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ln-line-2); font-size: 13.5px; font-weight: 600; color: var(--ln-ink-2); }
.ln .ln-menu-langs a:hover { border-color: var(--ln-ink-2); color: var(--ln-ink); }
.ln .ln-menu-langs a[aria-current="true"] { background: var(--ln-ink); border-color: transparent; color: var(--ln-paper); }
.ln .ln-menu-out { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: var(--ln-card-2); color: var(--ln-muted); font-size: 12.5px; }
.ln-menu-out b { display: block; font-size: 14px; font-weight: 700; color: var(--ln-ink-2); }
.ln-menu-out:hover { background: var(--ln-line); }
.ln-menu-out:hover b { color: var(--ln-ink); }
[dir="rtl"] .ln-flip { transform: scaleX(-1); }

/* ---------- Moving between Learn pages: one app, never a blank reload ---------- */
/* Cross-document view transitions: the bar (and a lesson's own bar) stay where they are while the page underneath
   fades up into place. Only between Learn pages (both sides carry this stylesheet); none for reduced motion. */
@view-transition { navigation: auto; }
.ln:not(.ln--focus) .ln-main { view-transition-name: ln-main; }
.ln-player-bar { view-transition-name: ln-player-bar; }
::view-transition-group(ln-bar), ::view-transition-group(ln-player-bar) { animation-duration: .28s; }
::view-transition-old(ln-main), ::view-transition-old(root) { animation: ln-page-out .14s ease-in both; }
::view-transition-new(ln-main), ::view-transition-new(root) { animation: ln-page-in .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ln-page-out { to { opacity: 0; } }
@keyframes ln-page-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Buttons, badges, chips, ring ---------- */
.ln-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 14px; font-weight: 700; font-size: 15px; letter-spacing: -.005em; transition: transform .2s var(--ln-ease), box-shadow .2s, background .2s; position: relative; }
.ln-btn:hover { transform: translateY(-1px); }
.ln-btn:active { transform: translateY(1px) scale(.99); }
.ln .ln-btn--primary { background: linear-gradient(135deg, var(--w-strong), color-mix(in srgb, var(--w-accent) 50%, var(--w-deep))); color: #fff; box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--w-accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ln .ln-btn--ghost { background: rgba(255, 255, 255, .12); color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.ln .ln-btn--plain { background: var(--ln-card); color: var(--ln-ink); box-shadow: inset 0 0 0 1px var(--ln-line-2); }
.ln-btn--big { min-height: 58px; padding: 16px 28px; font-size: 17px; border-radius: 18px; }
.ln-btn[disabled], .ln-btn.is-disabled { opacity: .45; pointer-events: none; }
.ln-btn-sub { font-weight: 500; opacity: .85; font-size: 13px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln .ln-link { font-weight: 700; color: var(--w-ink); white-space: nowrap; }
.ln-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ln-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; background: rgba(255, 255, 255, .9); color: #1d2230; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.ln-badge--free { background: #12805c; color: #fff; }
.ln-badge--adv { background: #1d2230; color: #f2dfa7; }
.ln-badge--done { background: var(--ln-gold); color: #1d1607; }
.ln-badge--you { background: var(--w-glow); color: var(--w-deep); }
.ln-badge--diploma { background: var(--w-glow); color: var(--w-deep); }
.ln-badge--lock { background: rgba(0, 0, 0, .55); color: #fff; }
.ln .ln-chip-btn { display: block; width: 100%; text-align: start; padding: 13px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: inherit; font-weight: 650; font-size: 14.5px; transition: background .2s, transform .2s; }
.ln-chip-btn:hover { background: rgba(255, 255, 255, .18); transform: translateX(3px); }
.ln-ring { position: relative; display: inline-grid; place-items: center; width: 54px; height: 54px; flex: none; }
.ln-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ln-ring circle { fill: none; stroke-width: 3.4; }
.ln-ring-track { stroke: currentColor; opacity: .15; }
.ln-ring-fill { stroke: var(--w-accent); stroke-linecap: round; transition: stroke-dasharray .8s var(--ln-ease); }
.ln-ring b { font-size: 13px; font-weight: 800; }
.ln-ring small { font-size: 9px; opacity: .7; }

/* ---------- Scenes ---------- */
.ln-scene-wrap { position: relative; overflow: hidden; }
.ln-scene { display: block; width: 100%; height: 100%; }
img.ln-scene { object-fit: cover; }
/* Gentle motion on live scenes (heroes, featured panels) and on a card's scene while it is hovered: the light breathes,
   motes drift up, the emblem floats. Never when the learner asks for less motion (the rule at the end stops it all). */
.ln-dp-breathe, .ln-dp-float, .ln-dp-mote { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ln-scene.is-live .ln-dp-breathe { animation: ln-dp-breathe 7s ease-in-out infinite; }
  .ln-scene.is-live .ln-dp-float { animation: ln-dp-float 6s ease-in-out infinite; }
  .ln-scene.is-live .ln-dp-mote { animation: ln-dp-mote 9s linear infinite; animation-delay: var(--d, 0s); }
}
@keyframes ln-dp-breathe { 50% { transform: scale(1.12); opacity: .9; } }
@keyframes ln-dp-float { 50% { transform: translateY(-6px); } }
@keyframes ln-dp-mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translate(18px, -90px); opacity: 0; } }

/* ---------- Home hero ---------- */
.ln-hero { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.ln-main > .ln-hero { max-width: none; padding: 0; }
.ln-hero-art { position: absolute !important; inset: 0; z-index: -2; }
.ln-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--w-deep) 92%, transparent) 0%, color-mix(in srgb, var(--w-deep) 62%, transparent) 46%, transparent 78%), linear-gradient(0deg, color-mix(in srgb, var(--w-deep) 80%, transparent), transparent 40%); }
[dir="rtl"] .ln-hero::after { transform: scaleX(-1); }
.ln-hero-in { max-width: var(--ln-max); margin: 0 auto; padding: clamp(30px, 5vw, 60px) 20px clamp(44px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.ln-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--w-glow); display: flex; align-items: center; gap: 10px; }
.ln-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.ln-hero-title { font-family: var(--ln-display); font-weight: 600; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.025em; margin: 12px 0 12px; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.ln-hero-sub { font-size: clamp(15.5px, 1.4vw, 18px); max-width: 58ch; color: rgba(255, 255, 255, .86); }
.ln-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ln-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.ln-stats b { display: block; font-family: var(--ln-display); font-size: 30px; line-height: 1; color: #fff; }
/* Search: filters the paths on this page as you type, and opens every course on Enter. */
.ln-search { display: flex; align-items: center; gap: 10px; max-width: 560px; margin-top: 22px; padding: 6px 6px 6px 16px; border-radius: 18px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 18px 40px -24px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .2s, box-shadow .2s; }
.ln-search:focus-within { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 2px var(--w-glow), 0 18px 40px -24px rgba(0, 0, 0, .7); }
.ln-search > svg { width: 20px; height: 20px; fill: rgba(255, 255, 255, .8); flex: none; }
.ln .ln-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 550; padding: 9px 0; outline: none; }
.ln-search input::placeholder { color: rgba(255, 255, 255, .72); }
.ln .ln-search-go { flex: none; padding: 10px 14px; border-radius: 13px; background: var(--w-glow); color: var(--w-deep); font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.ln-hero-card { background: color-mix(in srgb, var(--w-deep) 55%, rgba(10, 12, 20, .5)); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 22px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.ln-card-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--w-glow); }
.ln .ln-continue { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); transition: background .2s, transform .2s; color: #fff; }
.ln-continue:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.ln-continue b { display: block; font-size: 16px; line-height: 1.25; }
.ln-continue small { display: block; font-size: 13px; opacity: .78; margin-top: 2px; }
.ln-continue .ln-ring-fill { stroke: var(--w-glow); }
.ln-continue .ln-ring b { display: inline; font-size: 13px; line-height: 1; }
.ln-continue .ln-ring small { display: inline; margin: 0; font-size: 9px; }
.ln-quickstart { display: grid; gap: 8px; }
.ln .ln-quickstart .ln-chip-btn { display: flex; align-items: center; }
.ln-chip-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-end: 12px; border-radius: 10px; background: color-mix(in srgb, var(--w-glow) 20%, transparent); flex: none; }
.ln-emblem { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ln-chip-ico .ln-emblem { stroke: var(--w-glow); }
.ln-howto { display: grid; gap: 10px; }
.ln-howto li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; }
.ln-howto span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--w-strong); color: #fff; font-weight: 900; }
.ln-streak { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .24); font-size: 13px; }
.ln-streak-flame { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--w-accent), var(--w-glow)); }
.ln-streak-flame .ln-emblem { stroke: var(--w-deep); }
.ln-streak-n { flex: 1; }
.ln-streak-n b { font-size: 20px; font-family: var(--ln-display); margin-inline-end: 4px; }
.ln-streak-days { display: flex; gap: 5px; }
.ln-streak-days i { width: 12px; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.ln-streak-days i.on { background: var(--w-glow); box-shadow: 0 0 10px var(--w-glow); }

/* ---------- Continue where you left off: a rail over the hero's foot ---------- */
.ln-main > .ln-rail { position: relative; z-index: 2; margin-top: -34px; }
.ln-rail-title { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 8px; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ln-rail-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 10px; scrollbar-width: thin; }
.ln .ln-rail-card { position: relative; scroll-snap-align: start; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 18px; background: var(--ln-card); box-shadow: var(--ln-shadow-lift); transition: transform .3s var(--ln-ease); }
.ln-rail-card:hover { transform: translateY(-3px); }
.ln-rail-art { width: 88px; height: 66px; border-radius: 13px; }
.ln-rail-body { min-width: 0; display: grid; gap: 1px; }
.ln-rail-body small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--w-ink); }
.ln-rail-body b { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-rail-body span { font-size: 12.5px; color: var(--ln-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-rail-card .ln-ring { width: 44px; height: 44px; }
.ln-rail-card .ln-ring b { font-size: 11px; }

/* ---------- Section heads ---------- */
.ln-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 20px; margin: 40px 0 16px; }
.ln-sec-head h2 { font-family: var(--ln-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.1; display: flex; align-items: center; gap: 12px; }
.ln-sec-count { font-family: var(--ln-sans); font-size: 13px; font-weight: 800; letter-spacing: 0; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--w-accent, #f29a3f) 16%, transparent); color: var(--w-ink, var(--ln-ink-2)); }
.ln-sec-head p { grid-column: 1; color: var(--ln-muted); max-width: 70ch; font-size: 15px; }
.ln-sec-head > .ln-link { grid-row: 1; grid-column: 2; }
.ln-sec-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

/* ---------- Featured worlds: one large panel and two beside it ---------- */
.ln-feature-grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, minmax(200px, 1fr)); gap: 14px; }
.ln .ln-feature { position: relative; display: flex; align-items: flex-end; min-height: 200px; border-radius: 26px; overflow: hidden; color: #fff; isolation: isolate; background: var(--w-deep); box-shadow: var(--ln-shadow-lift); transition: transform .4s var(--ln-ease), box-shadow .4s; }
.ln-feature:hover { transform: translateY(-4px); }
.ln .ln-feature--lead { grid-row: span 2; min-height: 420px; }
.ln-feature-art { position: absolute !important; inset: 0; z-index: -2; }
.ln-feature-art .ln-scene { transition: transform 1.6s var(--ln-ease); }
.ln-feature:hover .ln-feature-art .ln-scene { transform: scale(1.05); }
.ln-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--w-deep) 94%, transparent) 8%, color-mix(in srgb, var(--w-deep) 30%, transparent) 55%, transparent); }
.ln-feature-body { display: grid; gap: 6px; padding: 20px 22px; width: 100%; }
.ln-feature-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--w-glow); }
.ln-feature-title { font-family: var(--ln-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.ln-feature--lead .ln-feature-title { font-size: clamp(28px, 3.6vw, 44px); }
.ln-feature-sum { color: rgba(255, 255, 255, .84); max-width: 52ch; font-size: 15px; }
.ln-feature .ln-beads i { background: rgba(255, 255, 255, .2); }
.ln-feature .ln-beads i::after { background: var(--w-glow); }
.ln-feature-go { justify-self: start; margin-top: 4px; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 800; background: var(--w-glow); color: var(--w-deep); }

/* ---------- Essentials route: stations along a dotted line ---------- */
.ln-route-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0; overflow-x: auto; padding: 8px 2px 14px; scroll-snap-type: x proximity; counter-reset: stop; }
.ln-route-strip li { position: relative; scroll-snap-align: start; padding-top: 40px; counter-increment: stop; }
.ln-route-strip li::before { content: counter(stop); position: absolute; top: 0; inset-inline-start: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--ln-card); box-shadow: inset 0 0 0 2.5px var(--w-accent, #f29a3f), 0 4px 12px -4px rgba(0, 0, 0, .3); color: var(--ln-ink); z-index: 1; }
.ln-route-strip li::after { content: ""; position: absolute; top: 14px; inset-inline-start: 36px; inset-inline-end: 0; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--ln-line-2) 0 7px, transparent 7px 12px); }
.ln-route-strip li:last-child::after { display: none; }
.ln-route-strip li.is-done::before { content: "✓"; background: var(--ln-good); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ln-good) 25%, transparent); }
.ln-route-strip li.is-done::after { background: var(--ln-good); }
.ln-route-strip a, .ln-route-strip span { display: block; margin-inline-end: 10px; padding: 12px 14px; border-radius: 16px; background: var(--ln-card); box-shadow: var(--ln-shadow); height: 100%; transition: transform .2s, box-shadow .2s; border-top: 3px solid var(--w-accent, #f29a3f); }
.ln-route-strip a:hover { transform: translateY(-3px); box-shadow: var(--ln-shadow-lift); }
.ln-route-strip small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--w-ink, #8c5925); }
.ln-route-strip b { display: block; font-size: 14.5px; line-height: 1.3; margin-top: 3px; }
.ln-route-strip em { display: block; font-style: normal; font-size: 12px; color: var(--ln-muted); margin-top: 4px; }
.ln-route-strip .is-coming span { background: transparent; box-shadow: none; border: 1.5px dashed var(--ln-line-2); }

/* ---------- Paths map: posters of each world, in rows that never leave one card alone ---------- */
.ln-map-sec { position: relative; }
.ln-path-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ln-path-grid > * { grid-column: span 2; }
/* The last row: one card left takes the whole row (a wide panel); two left take half each. */
.ln-path-grid > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
.ln-path-grid > :nth-child(3n+1):nth-last-child(2), .ln-path-grid > :nth-child(3n+1):nth-last-child(2) + * { grid-column: span 3; }
.ln .ln-path-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; border-radius: var(--ln-r); overflow: hidden; color: #fff; isolation: isolate; background: var(--w-deep); box-shadow: var(--ln-shadow); transition: transform .35s var(--ln-ease), box-shadow .35s; }
.ln-path-card:hover { transform: translateY(-4px); box-shadow: var(--ln-shadow-lift), 0 0 0 2px color-mix(in srgb, var(--path, var(--w-accent)) 70%, transparent); }
.ln-path-art { position: absolute !important; inset: 0; z-index: -2; }
.ln-path-art .ln-scene { transition: transform 1.2s var(--ln-ease); }
.ln-path-card:hover .ln-path-art .ln-scene { transform: scale(1.06); }
.ln-path-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--w-deep) 96%, transparent) 20%, color-mix(in srgb, var(--w-deep) 55%, transparent) 54%, transparent 80%); }
.ln-path-badges { position: absolute; top: 12px; inset-inline-start: 12px; inset-inline-end: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.ln-path-body { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 15px; }
.ln-path-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--w-glow); }
.ln-path-emblem { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--path, var(--w-accent)) 60%, rgba(0, 0, 0, .35)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ln-path-emblem .ln-emblem { width: 15px; height: 15px; stroke: #fff; }
.ln-path-title { font-family: var(--ln-display); font-weight: 600; font-size: 22px; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.ln-path-sum { color: rgba(255, 255, 255, .82); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ln-path-stops { display: none; }
.ln-path-opt { font-size: 12px; color: rgba(255, 255, 255, .78); }
.ln-beads { display: flex; gap: 4px; margin: 7px 0 2px; }
.ln-beads i { flex: 1; height: 6px; border-radius: 4px; background: var(--ln-line); position: relative; overflow: hidden; }
.ln-path-card .ln-beads i { background: rgba(255, 255, 255, .2); }
.ln-beads i::after { content: ""; position: absolute; inset: 0; width: calc(var(--f, 0) * 100%); background: var(--w-accent); border-radius: inherit; }
.ln-path-card .ln-beads i::after { background: var(--w-glow); }
.ln-beads i.is-done::after { width: 100%; background: linear-gradient(90deg, var(--w-accent), var(--w-glow)); box-shadow: 0 0 8px var(--w-glow); }
.ln-beads i.is-coming { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.ln-path-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .76); padding-top: 4px; }
.ln-path-done { color: var(--w-glow); }
/* A card alone on its row becomes a wide panel: text on one side, the scene open on the other, its first courses named. */
.ln .ln-path-grid > :nth-child(3n+1):last-child { min-height: 250px; }
.ln-path-grid > :nth-child(3n+1):last-child .ln-path-body { max-width: 60%; }
.ln-path-grid > :nth-child(3n+1):last-child::after { background: linear-gradient(90deg, color-mix(in srgb, var(--w-deep) 96%, transparent) 30%, color-mix(in srgb, var(--w-deep) 40%, transparent) 70%, transparent); }
[dir="rtl"] .ln-path-grid > :nth-child(3n+1):last-child::after { transform: scaleX(-1); }
.ln-path-grid > :nth-child(3n+1):last-child .ln-path-stops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ln-path-stops span { font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.ln-path-stops span.is-done { background: color-mix(in srgb, var(--w-glow) 30%, transparent); }

/* ---------- A group of paths as its own band ---------- */
.ln-map-sec--group { margin-top: 48px; padding: 0 20px 22px; border-radius: 28px; overflow: hidden; color: #fff; background: var(--w-deep); isolation: isolate; }
.ln-map { max-width: var(--ln-max); margin: 0 auto; padding: 0 20px; }
.ln-map-sec--group .ln-band-art { position: absolute !important; inset: 0; opacity: .75; z-index: -2; }
.ln-map-sec--group::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--w-deep) 20%, transparent), color-mix(in srgb, var(--w-deep) 85%, transparent) 55%, var(--w-deep)); z-index: -1; }
.ln-map-sec--group > * { position: relative; }
.ln-map-sec--group .ln-sec-head { padding-top: 30px; margin-top: 0; }
.ln-map-sec--group .ln-sec-head p { color: rgba(255, 255, 255, .84); }
.ln-map-sec--group .ln-sec-count { background: rgba(255, 255, 255, .16); color: #fff; }
.ln-map-sec--group .ln-link { color: var(--w-glow); }
.ln-map-sec--group .ln-path-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 40px -24px rgba(0, 0, 0, .8); }
.ln-coming-band { padding: 18px; border-radius: 16px; background: rgba(0, 0, 0, .25); font-weight: 600; }
.ln-no-match { margin: 30px 0; padding: 22px; border-radius: 18px; text-align: center; font-weight: 650; color: var(--ln-ink-2); background: var(--ln-card); box-shadow: var(--ln-shadow); }

/* ---------- Diplomas: framed on a trophy shelf ---------- */
.ln-trophy-shelf { position: relative; padding: 18px 18px 0; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--w-glow, #ffd27a) 22%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--ln-card) 60%, transparent), var(--ln-card)); box-shadow: inset 0 0 0 1px var(--ln-line); }
.ln-trophy-shelf .ln-diploma-row { position: relative; padding-bottom: 34px; }
.ln-trophy-shelf::after { content: ""; position: absolute; inset: auto 0 0; height: 28px; border-radius: 0 0 24px 24px; background: linear-gradient(180deg, #a77b4b, #7a5430 60%, #5d3f23); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 10px 20px -10px rgba(0, 0, 0, .5); pointer-events: none; }
html[data-theme="dark"] .ln-trophy-shelf::after, .ln--teen .ln-trophy-shelf::after { background: linear-gradient(180deg, #5b4330, #3a2a1c 60%, #2a1e14); }
.ln-trophy-shelf--small { padding: 12px 12px 0; }
.ln-diploma-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 240px); gap: 16px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x proximity; }
.ln-diploma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.ln-diploma-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ln-ease); }
.ln-diploma-card:hover { transform: translateY(-6px) rotate(-.6deg); }
.ln-dip-paper { position: relative; aspect-ratio: 1.414; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; background: linear-gradient(160deg, #fffdf6, #f3ead6); color: #2a2418; box-shadow: var(--ln-shadow), inset 0 0 0 6px #fffdf6, inset 0 0 0 7.5px var(--w-accent), inset 0 0 0 10px #fffdf6, inset 0 0 0 11px color-mix(in srgb, var(--w-deep) 60%, transparent); overflow: hidden; }
.ln-trophy-shelf .ln-dip-paper { box-shadow: 0 16px 18px -12px rgba(0, 0, 0, .55), inset 0 0 0 6px #fffdf6, inset 0 0 0 7.5px var(--w-accent), inset 0 0 0 10px #fffdf6, inset 0 0 0 11px color-mix(in srgb, var(--w-deep) 60%, transparent); }
.ln-dip-paper::before { content: ""; position: absolute; inset: 0; background: var(--w-pattern); opacity: .5; }
.ln-dip-paper::after { content: ""; position: absolute; inset: -50% -20%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%); transform: translateX(-70%); transition: transform 1s var(--ln-ease); pointer-events: none; }
.ln-diploma-card:hover .ln-dip-paper::after { transform: translateX(70%); }
.ln-dip-seal { width: 38px; height: 38px; position: relative; }
.ln-dip-seal svg { width: 100%; height: 100%; fill: var(--w-accent); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.ln-dip-kind { position: relative; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--w-accent) 55%, #000); }
.ln-dip-title { position: relative; font-family: var(--ln-display); font-weight: 600; font-size: 15.5px; line-height: 1.2; color: var(--w-deep); }
.ln-dip-pips { position: relative; display: flex; gap: 4px; }
.ln-dip-pips i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--w-accent); }
.ln-dip-pips i.on { background: var(--w-accent); }
.ln-dip-state { font-size: 13.5px; font-weight: 700; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ln-trophy-shelf .ln-dip-state { justify-content: center; }
.ln-dip-state small { color: var(--ln-muted); font-weight: 600; }
.ln-diploma-card.is-earned .ln-dip-paper { box-shadow: var(--ln-shadow-lift), inset 0 0 0 6px #fffdf6, inset 0 0 0 7.5px var(--ln-gold), inset 0 0 0 10px #fffdf6, inset 0 0 0 11px var(--ln-gold); }
.ln-diploma-card.is-earned .ln-dip-state { color: var(--ln-good); }
.ln-diploma-card.is-ready .ln-dip-state { color: var(--w-ink); }

/* ---------- Empty and not found ---------- */
.ln-empty { text-align: center; padding: 60px 20px; display: grid; justify-items: center; gap: 12px; }
.ln-empty h1, .ln-empty h2 { font-family: var(--ln-display); font-weight: 600; font-size: clamp(26px, 4vw, 40px); }
.ln-empty p { color: var(--ln-muted); }
.ln-empty-art { width: min(560px, 100%); aspect-ratio: 2.2; border-radius: 24px; margin-bottom: 10px; box-shadow: var(--ln-shadow); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ln .ln-rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ln-ease), transform .6s var(--ln-ease); }
  .ln .ln-rise.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ln *, .ln *::before, .ln *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 980px) {
  .ln-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln .ln-path-grid > * { grid-column: span 1; min-height: 280px; }
  .ln-path-grid > * .ln-path-body { max-width: none !important; }
  .ln-path-grid > *::after { background: linear-gradient(0deg, color-mix(in srgb, var(--w-deep) 96%, transparent) 20%, color-mix(in srgb, var(--w-deep) 55%, transparent) 54%, transparent 80%) !important; transform: none !important; }
  .ln-path-grid > * .ln-path-stops { display: none !important; }
  .ln .ln-path-grid > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
  .ln-feature-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .ln .ln-feature--lead { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
}
@media (max-width: 860px) {
  .ln-hero-in { grid-template-columns: 1fr; }
  .ln-hero::after { background: linear-gradient(0deg, color-mix(in srgb, var(--w-deep) 94%, transparent) 30%, color-mix(in srgb, var(--w-deep) 40%, transparent)); }
  .ln-sec-head { grid-template-columns: 1fr; }
  .ln-sec-head > .ln-link { grid-row: auto; grid-column: 1; }
  .ln-bar-home span { display: none; }
  .ln-bar-in { gap: 8px; padding-inline: 12px; }
  /* The places scroll sideways: their edges fade, so it shows there is more. */
  .ln-bar-links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 18px), transparent); padding-inline: 4px; }
  /* The name stays for screen readers; the dot shows its first letter. */
  .ln-who-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ln .ln-who--ask { font-size: 12.5px; padding: 8px 12px; }
  .ln-who-long { display: none; }
  .ln-who-short { display: inline; }
}
@media (max-width: 620px) {
  .ln-main > section, .ln-main > div:not(.ln-player), .ln-map { padding-inline: 14px; }
  .ln-hero-actions .ln-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 10px 16px; }
  .ln-stats b { font-size: 24px; }
  .ln-stats { gap: 6px 18px; margin-top: 16px; }
  .ln .ln-search-go { display: none; }
  .ln-path-grid { grid-template-columns: 1fr; gap: 12px; }
  .ln .ln-path-grid > * { grid-column: 1 / -1; min-height: 230px; }
  .ln-feature-grid { grid-template-columns: 1fr; }
  .ln .ln-feature--lead { min-height: 300px; }
  .ln .ln-feature { min-height: 190px; }
  .ln-rail-row { grid-auto-columns: 86%; }
  .ln-sec-head { margin-top: 30px; }
}

/* Words over a bright world's art (the kids' sky, the garden) stay readable. */
.ln :is(.ln-path-kicker, .ln-path-title, .ln-feature-kicker, .ln-feature-title, .ln-next-body small, .ln-me-path-body small) { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.ln-note { font-size: 13px; color: var(--ln-muted); }