/* =============================================================================
   PRISM LANDING — landing-only look and motion (landing-fx.css), on top of the
   shared theme (css/shared/theme.css). js/landing/scroll-fx.js adds .lp-fx to
   <html>; js/landing/hero-3d.js adds .lp-3d when the live 3D hero runs.
============================================================================= */
:root { --lp-nav: 64px; --lp-accent: #5cc8f2; }
.lp-compare-cta .lp-btn-primary { animation: none; }

.lp-hero-h1, .lp-section-h2, .lp-tradeoffs-h2, .lp-final-h2 { font-weight: 700; letter-spacing: -0.02em; }
.lp-hero-sub { font-style: normal; color: #b8c4d6; }

/* ─── Gentle fade-in as sections arrive (landing.css .lp-anim) ──────────────── */
.lp-anim { transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }

.lp-compare-cta .lp-btn-primary { animation: none; }

/* ─── One spacing scale for every section ───────────────────────────────────── */
.lp-framework, .lp-failures, .lp-how, .lp-roadmap, .lp-compare, .lp-final { padding: 6rem 0 !important; }
.lp-section-h2 { margin-bottom: 1rem; }
.lp-section-sub { margin-bottom: 3rem; color: #b8c4d6; }

/* ─── Framework: the letter is the graphic ──────────────────────────────────── */
.lp-framework .lp-fw-card {
  align-items: flex-start;
  text-align: left;
  gap: 0.75rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 12px;
  background: var(--lp-surface);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-framework .lp-fw-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(3,8,20,0.4); border-color: rgba(92,200,242,0.45); }
.lp-framework .lp-fw-letter {
  font-family: var(--lp-mono);
  font-size: var(--fs-2xxl);
  font-weight: 600;
  line-height: 1;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--lp-accent);
}
.lp-framework .lp-fw-body strong { color: #f1f5f9; }
.lp-framework .lp-fw-body span { color: #a9b6c9; }

/* ─── Failure modes: solid cards, no icons ──────────────────────────────────── */
.lp-fail-card { background: var(--lp-surface) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; }
.lp-fail-card:hover { transform: translateY(-3px); }

/* ─── How it works: numbers instead of icon boxes ───────────────────────────── */
.lp-how-num {
  display: block;
  font-family: var(--lp-mono);
  font-size: var(--t-display);
  font-weight: 500;
  color: var(--lp-accent);
  margin-bottom: 1rem;
}

/* ─── Roadmap ───────────────────────────────────────────────────────────────── */
.lp-rm-intro { max-width: 680px; margin: 0 auto 3rem; text-align: center; color: #b8c4d6; line-height: 1.75; font-size: var(--t-heading); }
.lp-rm-intro p + p { margin-top: 1rem; }
.lp-rm-cols { list-style: none; counter-reset: rm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0 0 3rem; }
.lp-rm-cols li { counter-increment: rm; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.12); }
.lp-rm-cols li::before { content: counter(rm, decimal-leading-zero); display: block; font-family: var(--lp-mono); font-size: var(--t-small); color: var(--lp-accent); margin-bottom: 0.6rem; }
.lp-rm-cols strong { display: block; font-size: var(--t-subtitle); color: #f1f5f9; margin-bottom: 0.4rem; }
.lp-rm-cols p { font-size: var(--t-body); color: #a9b6c9; line-height: 1.6; }
.lp-rm-cta { text-align: center; }
.lp-rm-cta p { margin-top: 1rem; font-size: var(--t-body); color: #8a9ab3; }

/* ─── Comparison: icons in every cell, the PRISM column raised ────────────────── */
.lp-compare .lp-compare-table {
  max-width: 980px;
  margin: 0 auto;
  background: transparent !important;
  border: none;
  box-shadow: none !important;
  overflow: visible;
}
.lp-compare .lp-compare-table table { border-collapse: separate; border-spacing: 0; }
.lp-compare .lp-compare-table th,
.lp-compare .lp-compare-table td {
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: var(--t-heading);
  vertical-align: middle;
}
.lp-compare .lp-compare-table thead th {
  background: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a9ab3;
}
.lp-compare .lp-compare-table tbody td:first-child { color: #e2e8f0; font-weight: 500; }
.lp-compare .lp-compare-table td.cmp-others,
.lp-compare .lp-compare-table td.cmp-prism { white-space: nowrap; }
.lp-compare .lp-compare-table td.cmp-others { color: #8a9ab3; text-decoration: none; }
.lp-compare .lp-compare-table td.cmp-others > span:last-child,
.lp-compare .lp-compare-table td.cmp-prism > span:last-child { vertical-align: middle; }
.lp-compare .lp-compare-table td.cmp-prism::before { display: none; }

/* The PRISM column: one raised, softly lit panel */
.lp-compare .lp-compare-table .col-prism,
.lp-compare .lp-compare-table td.cmp-prism {
  background: linear-gradient(180deg, rgba(92,200,242,0.09), rgba(92,200,242,0.05));
  border-left: 1px solid rgba(92,200,242,0.28);
  border-right: 1px solid rgba(92,200,242,0.28);
  color: #f1f5f9;
  font-weight: 600;
}
.lp-compare .lp-compare-table thead th.col-prism {
  border-top: 1px solid rgba(92,200,242,0.28);
  border-radius: 14px 14px 0 0;
  color: var(--lp-accent);
  font-size: var(--t-body);
}
.lp-compare .lp-compare-table tbody tr:last-child td { border-bottom: none; }
.lp-compare .lp-compare-table tbody tr:last-child td.cmp-prism {
  border-bottom: 1px solid rgba(92,200,242,0.28);
  border-radius: 0 0 14px 14px;
}
.lp-compare .lp-compare-table tbody tr:hover { transform: none; box-shadow: none; background: none; }
.lp-compare .lp-compare-table tbody tr:hover td { background-color: rgba(255,255,255,0.025); }
.lp-compare .lp-compare-table tbody tr:hover td.cmp-prism { background: rgba(92,200,242,0.12); }

/* Round icon badges */
.cmp-ic {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 0.7rem;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.cmp-ic--yes { color: #04121c; background: var(--lp-accent); box-shadow: 0 0 0 4px rgba(92,200,242,0.14); }
.cmp-ic--no { color: #8a9ab3; background: rgba(255,255,255,0.06); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .lp-compare .lp-compare-table th, .lp-compare .lp-compare-table td { padding: 0.8rem 0.7rem; font-size: var(--t-body); }
  .lp-compare .lp-compare-table td.cmp-others, .lp-compare .lp-compare-table td.cmp-prism { white-space: normal; }
}

/* ─── Trade-offs list: plain markers, readable contrast ─────────────────────── */
.lp-tradeoffs-list li { color: #cbd5e1; }
.lp-tradeoffs-list li::before { content: ''; width: 12px; height: 1px; background: var(--lp-accent); flex-shrink: 0; }
.lp-tp { background: var(--lp-surface) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; }

/* ─── Small screens ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .lp-rm-cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .lp-framework, .lp-failures, .lp-how, .lp-roadmap, .lp-compare, .lp-final { padding: 4rem 0 !important; }
}

/* =============================================================================
   HERO 3D — live system scene (js/landing/hero-3d.js) with a light frame.
   Only active once the script adds .lp-3d; otherwise the card above stays.
============================================================================= */
.lp-hero3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lp-3d .lp-hero3d { opacity: 1; }
.lp-hero3d canvas { display: block; }
/* Keep the headline readable while the light shows through behind it */
.lp-3d .lp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14,22,38,0.75) 0%, rgba(14,22,38,0.35) 35%, transparent 60%);
}

/* The right half is reserved from the first paint so nothing jumps when the
   3D scene arrives; its frame only shows once the scene is running. */
.lp-hero-hud {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  align-self: center;
  min-height: clamp(380px, 56vh, 600px);
  pointer-events: none;
  --tone: var(--lp-ok-green);
}
/* Poster: a still of the live scene (static/img/landing/hero-poster.webp, 15 KB),
   painted with the page so the hero is never empty. The live scene crossfades
   in over it; without WebGL or with reduced motion the poster simply stays. */
.lp-hero-hud::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: url('../../img/landing/hero-poster.webp') center / 100% auto no-repeat;
  -webkit-mask-image: radial-gradient(closest-side at 50% 52%, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 52%, #000 62%, transparent 100%);
  transition: opacity 0.35s ease;
}
.lp-3d .lp-hero-hud::before { opacity: 0; }
@media (max-width: 1023px) { .lp-hero-hud { display: none; } }
.lp-hero-hud[data-tone="warn"] { --tone: var(--lp-warn-yellow); }
.lp-hero-hud[data-tone="bad"]  { --tone: var(--lp-fail-red); }
.lp-hud-c { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255,255,255,0.22); }
.lp-hud-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.lp-hud-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.lp-hud-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.lp-hud-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.lp-hud-phase {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--lp-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  color: var(--tone);
  transition: color 0.5s ease;
}

/* =============================================================================
   LANDING SECTIONS on the shared theme (css/shared/theme.css): sections are
   see-through so the ambient light shows, separated by a faint line of light.
============================================================================= */
.prism-theme .lp-hero,
.prism-theme .lp-framework,
.prism-theme .lp-failures,
.prism-theme .lp-how,
.prism-theme .lp-roadmap,
.prism-theme .lp-compare,
.prism-theme .lp-final { background: transparent !important; }
.prism-theme main > section + section { border-top: none !important; position: relative; }
.prism-theme main > section + section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
}
.prism-theme .lp-grid-bg { opacity: 0.35; }
.prism-theme .lp-hero-glow { opacity: 0.6; }

/* =============================================================================
   SECTION GRAPHICS — small live SVG scenes so every section carries the hero's
   light and motion (markup in landing.html, all animation here).
============================================================================= */
.lp-viz { display: block; width: 100%; height: auto; overflow: visible; }
.lp-viz * { vector-effect: non-scaling-stroke; }

/* ── Failure cards: graphic on top ─────────────────────────────────────────── */
.lp-fail-card { flex-direction: column; gap: 0.9rem; padding: 1.2rem 1.3rem 1.3rem !important; }
.lp-fail-card .lp-viz {
  height: 64px;
  padding: 0.4rem 0.2rem;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 120%, rgba(92,200,242,0.07), transparent 70%), rgba(255,255,255,0.02);
}
.lp-fail-card--red .lp-viz { background: radial-gradient(ellipse at 50% 120%, rgba(248,113,113,0.12), transparent 70%), rgba(255,255,255,0.02); }
.lp-fail-card--orange .lp-viz { background: radial-gradient(ellipse at 50% 120%, rgba(251,146,60,0.12), transparent 70%), rgba(255,255,255,0.02); }
.lp-fail-card--yellow .lp-viz { background: radial-gradient(ellipse at 50% 120%, rgba(251,191,36,0.11), transparent 70%), rgba(255,255,255,0.02); }

/* single point of failure */
.lp-viz-spof .lk { stroke: rgba(92,200,242,0.55); stroke-width: 2; }
.lp-viz-spof .lk-dead { stroke: rgba(248,113,113,0.45); stroke-dasharray: 4 5; }
.lp-viz-spof .flow { fill: #5cc8f2; filter: drop-shadow(0 0 4px #5cc8f2); }
.lp-viz-spof .nd { fill: #1e2b44; stroke: rgba(92,200,242,0.6); stroke-width: 1.5; }
.lp-viz-spof .nd-down { fill: rgba(248,113,113,0.18); stroke: #f87171; }
.lp-viz-spof .nd-off { stroke: rgba(148,163,184,0.35); fill: #161f31; }
.lp-viz-spof .ring { fill: none; stroke: #f87171; stroke-width: 1.5; transform-origin: 110px 32px; animation: lp-ring 1.6s ease-out infinite; }
.lp-viz-spof .xx { stroke: #fecaca; stroke-width: 2; stroke-linecap: round; }
@keyframes lp-ring { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }

/* database saturation */
.lp-viz-sat .gauge { fill: rgba(255,255,255,0.06); }
.lp-viz-sat .gauge-fill { fill: #fb923c; transform-origin: 10px 32px; animation: lp-fill 3.2s ease-in infinite; }
.lp-viz-sat .db { fill: rgba(251,146,60,0.12); stroke: #fb923c; stroke-width: 1.5; animation: lp-hot 3.2s ease-in infinite; }
@keyframes lp-fill { 0% { transform: scaleX(0.15); fill: #fbbf24; } 70% { fill: #fb923c; } 85%, 100% { transform: scaleX(1); fill: #f87171; } }
@keyframes lp-hot { 0%, 60% { stroke: #fb923c; } 85%, 100% { stroke: #f87171; filter: drop-shadow(0 0 6px #f87171); } }

/* queue overload */
.lp-viz-queue .qb { fill: #fb923c; transform-box: fill-box; transform-origin: bottom; animation: lp-queue 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); opacity: 0.85; }
@keyframes lp-queue { 0% { transform: scaleY(0.15); } 60%, 100% { transform: scaleY(calc(0.3 + var(--i) * 0.1)); } }

/* latency spike, throughput collapse: the line draws itself */
.lp-viz-lat .base, .lp-viz-drop .base { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.lp-viz-lat .line, .lp-viz-drop .line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-draw 3.4s ease-in-out infinite; }
.lp-viz-lat .line { stroke: #fbbf24; filter: drop-shadow(0 0 4px rgba(251,191,36,0.6)); }
.lp-viz-drop .line { stroke: #f87171; filter: drop-shadow(0 0 4px rgba(248,113,113,0.6)); }
@keyframes lp-draw { 0% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* replica lag */
.lp-viz-lag .track { fill: rgba(255,255,255,0.06); }
.lp-viz-lag .bar { transform-origin: 10px 0; }
.lp-viz-lag .bar-p { fill: #5cc8f2; animation: lp-lag-p 3s ease-in-out infinite; }
.lp-viz-lag .bar-r { fill: #fbbf24; animation: lp-lag-r 3s ease-in-out infinite; }
@keyframes lp-lag-p { 0% { transform: scaleX(0.1); } 70%, 100% { transform: scaleX(1); } }
@keyframes lp-lag-r { 0% { transform: scaleX(0.05); } 70%, 100% { transform: scaleX(0.55); } }

/* ── How it works: a scene per step, and a beam between them ──────────────── */
.lp-how-step .lp-viz { width: 180px; height: 90px; margin: 0 auto 0.6rem; }
.lp-viz .b { fill: #1e2b44; stroke: rgba(92,200,242,0.7); stroke-width: 1.5; }
.lp-viz .lk { stroke: rgba(92,200,242,0.45); stroke-width: 2; }
.lp-viz-design .b { transform-box: fill-box; transform-origin: center; animation: lp-pop 4.5s ease-in-out infinite; }
.lp-viz-design .b2 { animation-delay: 0.5s; }
.lp-viz-design .b3 { animation-delay: 1s; }
.lp-viz-design .lk { stroke-dasharray: 42; stroke-dashoffset: 42; animation: lp-wire 4.5s ease-in-out infinite 0.4s; }
.lp-viz-design .lk2 { animation-delay: 0.9s; }
@keyframes lp-pop { 0% { transform: scale(0); opacity: 0; } 12%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes lp-wire { 0%, 10% { stroke-dashoffset: 42; } 30%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.lp-viz-sim .flow { stroke: #5cc8f2; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 10; animation: lp-flow 0.7s linear infinite; filter: drop-shadow(0 0 3px #5cc8f2); }
.lp-viz-sim .hot { stroke: #fbbf24; animation: lp-glowb 1.4s ease-in-out infinite; }
@keyframes lp-flow { to { stroke-dashoffset: -10; } }
@keyframes lp-glowb { 50% { filter: drop-shadow(0 0 6px #fbbf24); } }
.lp-viz-score .trk { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 6; }
.lp-viz-score .arc { fill: none; stroke: #34d399; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 100px 50px; animation: lp-score 4s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(52,211,153,0.5)); }
.lp-viz-score text { fill: #f1f5f9; font-family: var(--lp-mono); font-size: var(--t-metric); font-weight: 600; }
@keyframes lp-score { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 6; } 100% { stroke-dashoffset: 6; opacity: 0.4; } }
.lp-how-conn-line {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(92,200,242,0.1), rgba(92,200,242,0.9), rgba(92,200,242,0.1));
  background-size: 200% 100%;
  animation: lp-beam 2.4s linear infinite;
}
@keyframes lp-beam { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Roadmap path ──────────────────────────────────────────────────────────── */
.lp-rm-path { max-width: 1040px; margin: -0.5rem auto 3rem; }
.lp-rm-path svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-rm-path .rm-glow { fill: none; stroke: url(#lp-rm-grad); stroke-width: 10; opacity: 0.18; filter: blur(6px); }
.lp-rm-path .rm-line { fill: none; stroke: url(#lp-rm-grad); stroke-width: 2.5; stroke-linecap: round; }
.lp-rm-path .rm-pulse { fill: #e0f7ff; filter: drop-shadow(0 0 8px #5cc8f2) drop-shadow(0 0 16px #5cc8f2); }
.lp-rm-path .ph-halo { fill: rgba(92,200,242,0.12); transform-box: fill-box; transform-origin: center; animation: lp-halo 3s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s); }
.lp-rm-path .ph-dot { fill: #0e1626; stroke: #5cc8f2; stroke-width: 2.5; }
.lp-rm-path .ph-n { fill: #5cc8f2; font-family: var(--lp-mono); font-size: var(--t-small); }
.lp-rm-path .ph-t { fill: #cbd5e1; font-size: var(--t-body); font-weight: 600; }
@keyframes lp-halo { 50% { transform: scale(1.5); opacity: 0.4; } }

/* Roadmap steps: compact cards */
.lp-rm-cols li { padding: 1.2rem 1.3rem; border-top: none; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: var(--lp-surface); }

/* ── Framework letters glow ───────────────────────────────────────────────── */
.lp-framework .lp-fw-letter { text-shadow: 0 0 18px rgba(92,200,242,0.55); }
.lp-framework .lp-fw-card { position: relative; overflow: hidden; }
.lp-framework .lp-fw-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(92,200,242,0.10) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  transition: background-position 0.8s ease;
  pointer-events: none;
}
.lp-framework .lp-fw-card:hover::before { background-position: -20% 0; }

/* ── Trade-off panel bars grow in ──────────────────────────────────────────── */
.lp-tp-bar { transform-origin: 0 50%; }
.lp-fx .lp-tp.lp-anim:not(.lp-visible) .lp-tp-bar { transform: scaleX(0); }
.lp-fx .lp-tp.lp-visible .lp-tp-bar { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.8,.2,1) 0.3s; }

/* ── Final call to action: slow beams of light ─────────────────────────────── */
.lp-final { position: relative; overflow: hidden; }
.lp-beams { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-final-inner { position: relative; z-index: 1; }
.lp-beams i {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 120px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  background: linear-gradient(90deg, transparent, #2563eb 30%, #5cc8f2 55%, transparent);
  animation: lp-sweep 14s ease-in-out infinite alternate;
}
.lp-beams i:nth-child(1) { top: 18%; transform: rotate(-8deg); }
.lp-beams i:nth-child(2) { top: 48%; transform: rotate(6deg); opacity: 0.3; animation-duration: 18s; background: linear-gradient(90deg, transparent, #0e7490 35%, #5cc8f2 60%, transparent); }
.lp-beams i:nth-child(3) { top: 72%; transform: rotate(-3deg); opacity: 0.22; animation-duration: 22s; }
@keyframes lp-sweep { from { translate: -8% 0; } to { translate: 8% 0; } }

@media (max-width: 760px) {
  .lp-rm-path .ph-t { font-size: var(--t-display); }
  .lp-rm-path .ph-n { font-size: var(--t-display); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-viz *, .lp-rm-path *, .lp-beams i, .lp-how-conn-line { animation: none !important; }
  .lp-viz-lat .line, .lp-viz-drop .line { stroke-dashoffset: 0; }
  .lp-viz-score .arc { stroke-dashoffset: 6; }
}
.prism-theme .lp-logos { background: transparent !important; }