.fx-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(55, 210, 180, 0.14), transparent 42%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #191d21;
  background-size: auto, 26px 26px, 26px 26px, auto;
  color: #f5f5f5;
  font-family: var(--sans);
}

.fx-stage.light {
  background:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    #f4f4f1;
  background-size: 26px 26px;
  color: #111;
}

.fx-art {
  position: relative;
  width: min(78%, 430px);
  max-width: 100%;
  color: inherit;
  --b: #aeb4b9;
  --c: #20262b;
  --d: #111315;
}

.fx-center { text-align: center; }
.fx-mono { font-family: var(--mono); }
.fx-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--b);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fx-title {
  font-size: clamp(24px, 5vw, 44px);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.fx-big {
  font-size: clamp(42px, 9vw, 88px);
  line-height: 0.86;
  font-weight: 950;
  letter-spacing: -0.08em;
  font-variant-numeric: tabular-nums;
}

.fx-muted { color: var(--b); }
.fx-accent { color: var(--a); }

/* Shared keyframes */
@keyframes fxType { 0%, 14% { width: 0; } 62%, 100% { width: var(--chars, 24ch); } }
@keyframes fxCaret { 50% { border-color: transparent; } }
@keyframes fxPop { 0%, 12% { opacity: 0; transform: translateY(28px) scale(.78) rotate(-2deg); } 28%, 74% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } 92%, 100% { opacity: 0; transform: translateY(-18px) scale(.92); } }
@keyframes fxRise { 0%, 16% { opacity: 0; transform: translateY(112%); } 34%, 78% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(-112%); } }
@keyframes fxSweep { 0%, 18% { transform: scaleX(0); transform-origin: left; } 34%, 66% { transform: scaleX(1); transform-origin: left; } 84%, 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes fxSlideX { 0%, 14% { opacity: 0; transform: translateX(calc(var(--dir, -1) * 74px)); } 32%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes fxGrowX { 0%, 20% { transform: scaleX(0); } 46%, 82% { transform: scaleX(var(--w, 1)); } 100% { transform: scaleX(0); } }
@keyframes fxGrowY { 0%, 18% { transform: scaleY(0); } 42%, 82% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
@keyframes fxFadePulse { 0%, 24% { opacity: .2; filter: blur(6px); } 44%, 78% { opacity: 1; filter: blur(0); } 100% { opacity: .2; filter: blur(6px); } }
@keyframes fxFlashA { 0%, 45% { opacity: 1; } 52%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fxFlashB { 0%, 45% { opacity: 0; } 52%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxWhite { 0%, 45%, 56%, 100% { opacity: 0; } 49% { opacity: 1; } }
@keyframes fxPushA { 0%, 36%, 100% { transform: translateX(0) scale(1); } 56%, 78% { transform: translateX(-28%) scale(.92); } }
@keyframes fxPushB { 0%, 36%, 100% { transform: translateX(100%) scale(1.06); } 56%, 78% { transform: translateX(0) scale(1); } }
@keyframes fxBlurA { 0%, 34%, 100% { opacity: 1; filter: blur(0); transform: scale(1); } 54%, 80% { opacity: 0; filter: blur(14px); transform: scale(1.28); } }
@keyframes fxBlurB { 0%, 34%, 100% { opacity: 0; filter: blur(14px); transform: scale(.76); } 54%, 80% { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes fxLiquid { 0%, 30%, 100% { clip-path: circle(0% at 0% 50%); } 58%, 82% { clip-path: circle(132% at 0% 50%); } }
@keyframes fxHard { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fxDrift { to { background-position: 56px 28px, 56px 28px; } }
@keyframes fxFloat { 0%, 100% { transform: translate(0, 0) scale(.72); opacity: .34; } 50% { transform: translate(var(--dx, 24px), var(--dy, -34px)) scale(1.18); opacity: 1; } }
@keyframes fxScan { from { transform: translateY(-42%); } to { transform: translateY(42%); } }
@keyframes fxCursor { 0%, 12%, 100% { transform: translate(18%, 58%); } 34%, 44% { transform: translate(58%, 72%); } 64%, 74% { transform: translate(82%, 38%); } }
@keyframes fxRing { 0%, 30%, 100% { opacity: 0; transform: translate(52%, 58%) scale(.4); } 34% { opacity: 1; transform: translate(52%, 58%) scale(.4); } 46% { opacity: 0; transform: translate(52%, 58%) scale(1.2); } }
@keyframes fxZoom { 0%, 20%, 100% { opacity: 0; transform: translateY(26px) scale(.82); } 42%, 76% { opacity: 1; transform: translateY(0) scale(1); } 94% { opacity: 0; transform: translateY(-16px) scale(1.14); } }
@keyframes fxScroll { 0%, 16% { transform: translateY(0); } 84%, 100% { transform: translateY(-48%); } }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxDash { 0%, 18% { stroke-dashoffset: var(--len, 620); } 54%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--len, 620); } }
@keyframes fxStrike { 0%, 22% { transform: scaleX(0); } 44%, 82% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes fxFlip { 0%, 18% { transform: rotateY(0); } 42%, 78% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes fxMarker { 0%, 20% { width: 0; } 44%, 78% { width: var(--w, 62%); } 100% { width: 0; } }
@keyframes fxSlam { 0%, 16% { opacity: 0; filter: blur(10px); transform: translateX(-70px) skewX(-12deg); } 34%, 78% { opacity: 1; filter: blur(0); transform: translateX(0) skewX(-7deg); } 100% { opacity: 0; transform: translateX(70px) skewX(-7deg); } }

/* Pattern: type */
.fx-type .typewriter {
  width: var(--chars, 24ch);
  overflow: hidden;
  border-right: 3px solid var(--a);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 900;
  animation: fxType 3.2s steps(24) infinite, fxCaret .75s step-end infinite;
}

.fx-pop-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fx-pop-words span,
.fx-chip {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: #f3f0e8;
  color: #121416;
  font-weight: 950;
  animation: fxPop 2.8s cubic-bezier(.2, 1.3, .3, 1) infinite;
  animation-delay: calc(var(--i) * .11s);
}

.fx-mask {
  display: grid;
  gap: 8px;
  text-transform: uppercase;
}

.fx-mask span {
  display: block;
  overflow: hidden;
}

.fx-mask b {
  display: block;
  font-weight: 950;
  animation: fxRise 3.1s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-delay: calc(var(--i) * .12s);
}

.fx-highlight {
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.14;
  font-weight: 950;
}

.fx-highlight span {
  position: relative;
  display: inline-block;
  margin: 0 3px 8px;
  padding: 0 3px;
}

.fx-highlight span::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 2px;
  height: .42em;
  border-radius: 4px;
  background: var(--a);
  opacity: .9;
  transform: scaleX(0);
  animation: fxSweep 3.8s infinite;
  animation-delay: calc(var(--i) * .28s);
}

/* Pattern: lists */
.fx-list {
  display: grid;
  gap: 9px;
  width: 100%;
}

.fx-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f3f0e8;
  color: #121416;
  font-weight: 900;
  animation: fxSlideX 3.4s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-fill-mode: both;
  animation-delay: calc(var(--i) * .13s);
}

.fx-row i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--a);
  color: #071410;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
}

.fx-row small {
  color: #666;
  font-family: var(--mono);
  font-size: 10px;
}

.fx-row.dark {
  background: rgba(255, 255, 255, .08);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, .12);
}

.fx-row.dark i { background: #f5f5f5; color: #111; }
.fx-row.dark small { color: #999; }

.fx-check .check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  animation: fxPop 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .18s);
}

.fx-strike {
  position: relative;
}

.fx-strike::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 4px;
  border-radius: 6px;
  background: #f5f5f5;
  transform: scaleX(0);
  animation: fxStrike 3.2s cubic-bezier(.16, 1, .3, 1) infinite;
}

/* Pattern: deck / cards */
.fx-deck {
  width: 260px;
  height: 160px;
}

.fx-deck .card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f3f0e8;
  color: #121416;
  font-size: 24px;
  font-weight: 950;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
  animation: fxPop 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-delay: calc(var(--i) * .12s);
}

.fx-deck .card:nth-child(1) { transform: translateX(-58px) rotate(-9deg); background: #f6efe1; }
.fx-deck .card:nth-child(2) { transform: translateY(-8px); background: #dff8f0; }
.fx-deck .card:nth-child(3) { transform: translateX(58px) rotate(9deg); background: #ffe4a8; }

.fx-flip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(82px, 1fr));
  gap: 12px;
  perspective: 900px;
  width: 100%;
}

.fx-flip {
  position: relative;
  height: 86px;
  transform-style: preserve-3d;
  animation: fxFlip 3.6s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-delay: calc(var(--i) * .16s);
}

.fx-flip::before,
.fx-flip::after {
  content: attr(data-front);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 8px;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-weight: 950;
  text-align: center;
}

.fx-flip::after {
  content: attr(data-back);
  background: var(--a);
  color: #071410;
  transform: rotateY(180deg);
}

.fx-zoom-card {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 170px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    #1d252b;
  background-size: 22px 22px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .34);
  animation: fxZoom 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

/* Pattern: compare / transitions */
.fx-compare {
  position: relative;
  width: min(430px, 88%);
  height: 190px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: #15171a;
}

.fx-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(28px, 6vw, 46px);
  font-weight: 950;
}

.fx-scene.a { background: #1b2025; color: #f3f0e8; }
.fx-scene.b { background: var(--a); color: #071410; }

.fx-flash .fx-scene.a { animation: fxFlashA 3s infinite; }
.fx-flash .fx-scene.b { animation: fxFlashB 3s infinite; }
.fx-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: fxWhite 3s infinite;
}

.fx-push .fx-scene.a { animation: fxPushA 3.4s cubic-bezier(.16, 1, .3, 1) infinite; }
.fx-push .fx-scene.b { transform: translateX(100%); animation: fxPushB 3.4s cubic-bezier(.16, 1, .3, 1) infinite; }
.fx-blur .fx-scene.a { animation: fxBlurA 3.2s infinite; }
.fx-blur .fx-scene.b { opacity: 0; animation: fxBlurB 3.2s infinite; }
.fx-liquid .fx-scene.b { clip-path: circle(0% at 0% 50%); animation: fxLiquid 3.6s cubic-bezier(.16, 1, .3, 1) infinite; }
.fx-hard .fx-scene.a, .fx-hard .fx-scene.b { animation: fxHard 1.2s steps(1, end) infinite; }
.fx-hard .fx-scene.b { animation-delay: .6s; }

/* Pattern: backgrounds */
.fx-bg-label {
  position: relative;
  z-index: 2;
  font-size: clamp(32px, 7vw, 54px);
  font-weight: 950;
  letter-spacing: -0.06em;
}

.fx-grid-drift {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: fxDrift 4s linear infinite;
}

.fx-particle,
.fx-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  color: var(--a);
  box-shadow: 0 0 22px currentColor;
  left: var(--x);
  top: var(--y);
  animation: fxFloat 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.23s);
}

.fx-scanline {
  position: absolute;
  inset: -60% 0;
  background: linear-gradient(transparent, transparent 46%, rgba(255,255,255,.5) 49%, rgba(255,255,255,.08) 53%, transparent 58%, transparent);
  animation: fxScan 2.6s linear infinite;
}

/* Pattern: UI */
.fx-window {
  position: relative;
  width: min(430px, 88%);
  height: 190px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #0f1215;
  box-shadow: 0 22px 50px rgba(0,0,0,.34);
}

.fx-window.light {
  background: #f4f4f4;
  color: #111;
  border-color: rgba(0,0,0,.12);
}

.fx-bar {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
}

.fx-window.light .fx-bar { background: #e7e7e7; border-bottom-color: rgba(0,0,0,.1); }
.fx-dot { width: 10px; height: 10px; border-radius: 50%; background: #f5f5f5; opacity: .9; }
.fx-dot:nth-child(2) { opacity: .55; }
.fx-dot:nth-child(3) { opacity: .3; }

.fx-body {
  display: grid;
  grid-template-columns: 92px 1fr;
  height: calc(100% - 32px);
}

.fx-side { border-right: 1px solid rgba(255,255,255,.08); padding: 12px; }
.fx-window.light .fx-side { border-right-color: rgba(0,0,0,.08); }
.fx-main { padding: 14px; }
.fx-line { height: 10px; margin-bottom: 9px; border-radius: 8px; background: rgba(255,255,255,.14); }
.fx-window.light .fx-line { background: rgba(0,0,0,.14); }
.fx-line:nth-child(2n) { width: 72%; }

.fx-cursor {
  position: absolute;
  z-index: 4;
  width: 18px;
  height: 18px;
  clip-path: polygon(0 0, 0 100%, 35% 72%, 55% 100%, 72% 89%, 51% 62%, 100% 62%);
  background: #f5f5f5;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation: fxCursor 4s cubic-bezier(.4,0,.2,1) infinite;
}

.fx-click {
  position: absolute;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 2px solid #f5f5f5;
  border-radius: 50%;
  opacity: 0;
  animation: fxRing 4s ease-out infinite;
}

.fx-code {
  width: min(430px, 88%);
  height: 190px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0e1115;
  font-family: var(--mono);
  font-size: 12px;
}

.fx-code-lines { padding: 16px; animation: fxScroll 5s linear infinite; }
.fx-code-line { display: grid; grid-template-columns: 26px 1fr; gap: 10px; min-height: 21px; color: #d5d5d5; }
.fx-code-line span:first-child { color: rgba(255,255,255,.28); }
.fx-code-line b { color: #fff; font-weight: 800; }
.fx-code-line i { color: #999; font-style: normal; }

.fx-lens {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  border: 2px solid #f5f5f5;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 45%), rgba(255,255,255,.08);
  box-shadow: 0 16px 38px rgba(0,0,0,.42);
  animation: fxCursor 4s cubic-bezier(.16,1,.3,1) infinite;
}

/* Pattern: charts */
.fx-bars {
  display: grid;
  gap: 10px;
  width: 100%;
}

.fx-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr 42px;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
}

.fx-bar-fill {
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5f5f5, #777);
  transform: scaleX(0);
  transform-origin: left;
  animation: fxGrowX 4s cubic-bezier(.16,1,.3,1) infinite;
  animation-delay: calc(var(--i) * .12s);
}

.fx-svg {
  width: 100%;
  height: 190px;
  overflow: visible;
}

.fx-svg path,
.fx-svg line {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 620);
  stroke-dashoffset: var(--len, 620);
  animation: fxDash 4s ease-in-out infinite;
}

.fx-chart-label {
  margin-top: 10px;
  color: #f5f5f5;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.fx-column-set {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 130px;
}

.fx-column {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #f5f5f5, #666);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: fxGrowY 3.4s cubic-bezier(.16,1,.3,1) infinite;
  animation-delay: calc(var(--i) * .1s);
}

.fx-gauge {
  position: relative;
  width: 230px;
  height: 126px;
  overflow: hidden;
}

.fx-gauge::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 230px;
  border: 22px solid rgba(255,255,255,.14);
  border-bottom-color: transparent;
  border-radius: 50%;
}

.fx-needle {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 92px;
  height: 5px;
  border-radius: 5px;
  background: #f5f5f5;
  transform-origin: left center;
  animation: fxNeedle 3.2s cubic-bezier(.16,1,.3,1) infinite;
}

@keyframes fxNeedle { 0%, 18% { transform: rotate(198deg); } 54%, 82% { transform: rotate(332deg); } 100% { transform: rotate(198deg); } }

.fx-wheel {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #f5f5f5, #777, #222, #bdbdbd, #f5f5f5);
  animation: fxSpin 5s linear infinite;
}

.fx-wheel::before {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background: #101114;
}

.fx-wheel::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f5f5f5;
  font-size: 26px;
  font-weight: 950;
}

/* Specials */
.fx-quote {
  width: min(390px, 86%);
  padding-left: 22px;
  border-left: 4px solid var(--a);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.14;
  font-weight: 950;
  animation: fxFadePulse 3.4s ease-in-out infinite;
}

.fx-quote small {
  display: block;
  margin-top: 12px;
  color: var(--b);
  font-family: var(--mono);
  font-size: 12px;
}

.fx-neon {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
}

.fx-neon strong {
  color: #f5f5f5;
  font-size: clamp(56px, 12vw, 96px);
  font-style: italic;
  font-weight: 1000;
  line-height: .86;
  text-shadow: 0 0 24px rgba(255,255,255,.34);
  animation: fxZoom 2.8s cubic-bezier(.16,1,.3,1) infinite;
}

.fx-slam {
  display: grid;
  place-items: center;
  width: 380px;
  max-width: 88%;
  height: 190px;
  overflow: hidden;
  border-radius: 10px;
  background: #050608;
}

.fx-slam strong {
  color: #fff;
  font-size: clamp(30px, 7vw, 46px);
  font-style: italic;
  font-weight: 950;
  animation: fxSlam 2.6s cubic-bezier(.16,1,.3,1) infinite;
}

.fx-doc {
  position: relative;
  width: 360px;
  max-width: 88%;
  min-height: 180px;
  padding: 22px 26px;
  border-radius: 8px;
  background: #fff;
  color: #14181c;
  box-shadow: 0 20px 45px rgba(0,0,0,.24);
  transform: rotate(-2deg);
  animation: fxFadePulse 4s ease-in-out infinite;
}

.fx-doc .fx-line { background: #d7dbe0; }
.fx-doc-marker {
  position: absolute;
  left: 70px;
  top: 64px;
  width: 0;
  height: 18px;
  border-radius: 5px;
  background: rgba(0,0,0,.22);
  transform: rotate(-2deg);
  animation: fxMarker 3.6s cubic-bezier(.16,1,.3,1) infinite;
}

.fx-sticky {
  display: grid;
  place-items: center;
  width: 220px;
  height: 150px;
  padding: 18px;
  background: #f5f5f5;
  color: #111;
  font-weight: 950;
  box-shadow: 0 18px 38px rgba(0,0,0,.3);
  transform: rotate(-3deg);
  animation: fxPop 3.2s cubic-bezier(.2,1.3,.3,1) infinite;
}

.fx-spot {
  position: relative;
  width: min(390px, 86%);
  height: 190px;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
}

.fx-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 70px, rgba(0,0,0,.86) 120px);
  animation: fxFadePulse 3.4s ease-in-out infinite;
}

.fx-spot strong {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 34px;
}

/* Preserve reference palette through the hosted component shell. */
.fx-stage {
  --a: var(--fx-accent, #37d2b4);
}

.fx-pop-words span,
.fx-chip,
.fx-row i,
.fx-check .check,
.fx-highlight span::before,
.fx-scene.b,
.fx-wheel::after,
.fx-needle,
.fx-doc-marker {
  background: var(--a);
}

.fx-row i,
.fx-check .check,
.fx-wheel::after {
  color: #071410;
}

.fx-type .typewriter {
  border-right-color: var(--a);
}

.fx-bar-fill,
.fx-column {
  background: linear-gradient(90deg, var(--a), #67a7ff);
}

.fx-svg path,
.fx-svg line {
  stroke: var(--a);
  filter: drop-shadow(0 0 10px var(--a));
}

.fx-particle,
.fx-node {
  color: var(--a);
}

.fx-particle:nth-child(2n),
.fx-node:nth-child(2n) {
  color: #ffbf47;
}

.fx-particle:nth-child(3n),
.fx-node:nth-child(3n) {
  color: #ff5a6f;
}

.fx-quote {
  border-left-color: var(--a);
}

.fx-tag,
.fx-muted {
  color: rgba(243, 240, 232, 0.74);
}

.fx-flip::after,
.fx-scene.b {
  color: #071410;
}

.fx-lens,
.fx-click {
  border-color: var(--a);
}

.fx-scanline {
  background: linear-gradient(transparent, transparent 46%, var(--a) 49%, rgba(255,255,255,.08) 53%, transparent 58%, transparent);
}

.fx-neon strong {
  color: #24ff66;
  text-shadow: 0 0 20px rgba(36, 255, 102, 0.6);
}

.fx-sticky {
  background: #f3f0e8;
  color: #121416;
}

.fx-doc-marker {
  background: rgba(255, 207, 64, 0.68);
}

/* Aesthetic refinement pass: optical centering, readable type, consistent rhythm. */
.fx-stage {
  --ink: #f3f0e8;
  --muted: #aeb4b9;
  color: var(--ink);
}

.canvas-card-content .fx-art,
.fx-lib-preview-fit .fx-art,
.fx-art {
  width: min(88%, 430px);
  margin-inline: auto;
  text-wrap: balance;
}

.fx-art {
  padding: 2px;
}

.fx-title {
  font-size: clamp(30px, 7vw, 54px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.fx-big {
  font-size: clamp(48px, 11vw, 96px);
}

.fx-tag {
  min-height: 24px;
  padding: 0 9px;
  font-size: 10px;
}

.fx-pop-words {
  gap: 12px;
  max-width: 100%;
}

.fx-pop-words span,
.fx-chip {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.fx-mask {
  gap: 10px;
}

.fx-highlight {
  max-width: 100%;
  font-size: clamp(26px, 5.4vw, 42px);
  line-height: 1.16;
}

.fx-highlight span {
  margin: 0 4px 9px;
}

.fx-list {
  gap: 10px;
}

.fx-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.fx-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-row i {
  width: 32px;
  height: 32px;
}

.fx-deck {
  width: 280px;
  height: 170px;
}

.fx-deck .card {
  border-radius: 12px;
  font-size: 26px;
}

.fx-flip-grid {
  gap: 12px;
}

.fx-flip {
  height: 96px;
}

.fx-flip::before,
.fx-flip::after {
  border-radius: 10px;
}

.fx-zoom-card {
  min-height: 182px;
  padding: 18px;
  border-radius: 12px;
}

.fx-compare {
  height: 200px;
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
}

.fx-scene {
  font-size: clamp(34px, 8vw, 58px);
  letter-spacing: -0.06em;
}

.fx-bg-label {
  max-width: 92%;
  font-size: clamp(38px, 9vw, 64px);
  line-height: 0.94;
  text-align: center;
}

.fx-window,
.fx-code {
  height: 200px;
  border-radius: 12px;
}

.fx-body {
  grid-template-columns: 96px 1fr;
}

.fx-main,
.fx-side {
  padding: 14px;
}

.fx-line {
  height: 11px;
  margin-bottom: 10px;
}

.fx-bar-row {
  grid-template-columns: 84px minmax(0, 1fr) 46px;
  font-size: 12px;
}

.fx-bar-fill {
  height: 20px;
}

.fx-svg {
  height: 200px;
}

.fx-chart-label {
  margin-top: 12px;
  font-size: 12px;
}

.fx-column-set {
  gap: 12px;
  height: 140px;
}

.fx-gauge {
  width: 250px;
  height: 140px;
}

.fx-needle {
  width: 100px;
}

.fx-wheel {
  width: 180px;
  height: 180px;
}

.fx-quote {
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.16;
}

.fx-neon strong {
  font-size: clamp(64px, 16vw, 112px);
}

.fx-slam {
  width: 400px;
  height: 200px;
}

.fx-slam strong {
  font-size: clamp(34px, 9vw, 58px);
  text-align: center;
}

.fx-doc {
  width: 370px;
  min-height: 190px;
  padding: 24px 28px;
}

.fx-sticky {
  width: 230px;
  height: 156px;
  font-size: 18px;
  text-align: center;
}

.fx-spot {
  width: min(410px, 88%);
  height: 200px;
}

.fx-spot strong {
  padding: 0 24px;
  font-size: 38px;
  text-align: center;
}

/* Delayed layers must hold their authored first frame before entering. */
.fx-stage *,
.fx-stage *::before,
.fx-stage *::after {
  animation-fill-mode: both !important;
}

/* Content-first templates */
@keyframes fxContentIn {
  0%, 18% { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(5px); }
  38%, 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes fxMetricIn {
  0%, 18% { opacity: 0; transform: translateY(18px) scale(.9); }
  42%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fxLineIn {
  0%, 22% { opacity: 0; transform: translateX(-24px); }
  44%, 100% { opacity: 1; transform: translateX(0); }
}

.fx-hero-title,
.fx-title-subtitle,
.fx-quote-emphasis,
.fx-caption-card,
.fx-active-caption,
.fx-single-stat,
.fx-stat-delta,
.fx-metric-trio,
.fx-step-flow,
.fx-lower-third {
  width: min(92%, 540px);
  color: var(--ink, #f3f0e8);
}

.fx-hero-title,
.fx-title-subtitle {
  display: grid;
  gap: 12px;
  text-align: left;
}

.fx-hero-title.align-center,
.fx-title-subtitle.align-center {
  text-align: center;
}

.fx-kicker,
.fx-caption-label,
.fx-hero-title small,
.fx-title-subtitle small {
  color: rgba(243, 240, 232, 0.76);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fx-hero-title strong,
.fx-title-subtitle strong {
  display: block;
  max-width: 100%;
  font-size: clamp(36px, 8vw, 78px);
  line-height: .98;
  font-weight: 950;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  animation: fxContentIn 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.fx-hero-title strong mark {
  padding: 0 .08em;
  background: transparent;
  color: var(--a);
}

.fx-title-subtitle strong {
  font-size: clamp(32px, 7vw, 64px);
}

.fx-hero-title small,
.fx-title-subtitle small {
  color: var(--muted, #aeb4b9);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  animation: fxLineIn 3.8s cubic-bezier(.16, 1, .3, 1) .18s infinite;
}

.fx-caption-card {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  border-left: 4px solid var(--a);
  border-radius: 8px;
  background: rgba(32, 38, 43, .92);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.fx-caption-card strong,
.fx-caption-card b {
  display: block;
  font-size: clamp(22px, 4.2vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.fx-caption-card strong { animation: fxContentIn 3.6s cubic-bezier(.16, 1, .3, 1) infinite; }
.fx-caption-card b { color: var(--a); animation: fxContentIn 3.6s cubic-bezier(.16, 1, .3, 1) .14s infinite; }

.fx-active-caption {
  display: grid;
  gap: 5px;
  padding: 22px 24px;
  border-radius: 8px;
  background: #f3f0e8;
  color: #121416;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.fx-active-caption span,
.fx-active-caption strong {
  display: block;
  font-size: clamp(22px, 4.2vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.fx-active-caption strong { animation: fxContentIn 3.6s cubic-bezier(.16, 1, .3, 1) .12s infinite; }
.fx-active-caption mark { padding: 0 .1em; border-radius: 4px; background: var(--a); color: #071410; }

.fx-quote-emphasis {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 28px 26px 24px;
  border: 1px solid rgba(243, 240, 232, .14);
  border-radius: 10px;
  background: rgba(32, 38, 43, .9);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.fx-quote-mark {
  position: absolute;
  top: 8px;
  right: 18px;
  color: var(--a);
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  opacity: .76;
}

.fx-quote-emphasis strong {
  max-width: 100%;
  font-size: clamp(24px, 4.8vw, 42px);
  line-height: 1.16;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  animation: fxContentIn 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.fx-quote-emphasis mark { padding: 0 .08em; border-radius: 4px; background: rgba(55, 210, 180, 0.22); color: var(--a); }
.fx-quote-emphasis small { color: var(--muted, #aeb4b9); font-family: var(--mono); font-size: 11px; animation: fxLineIn 3.8s cubic-bezier(.16, 1, .3, 1) .2s infinite; }

.fx-single-stat,
.fx-stat-delta {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
}

.fx-single-stat > span,
.fx-stat-delta > span {
  color: var(--muted, #aeb4b9);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fx-single-stat strong,
.fx-stat-delta strong {
  display: flex;
  align-items: baseline;
  color: var(--a);
  font-size: clamp(64px, 14vw, 116px);
  font-weight: 950;
  line-height: .84;
  letter-spacing: 0;
  animation: fxMetricIn 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.fx-single-stat strong small,
.fx-stat-delta strong small {
  margin-left: 6px;
  color: #f3f0e8;
  font-size: .38em;
}

.fx-single-stat b,
.fx-stat-delta b {
  color: #f3f0e8;
  font-family: var(--mono);
  font-size: 12px;
  animation: fxLineIn 3.8s cubic-bezier(.16, 1, .3, 1) .18s infinite;
}

.fx-stat-delta b { padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.fx-stat-delta .trend-up { color: #a7e35b; }
.fx-stat-delta .trend-down { color: #ff5a6f; }
.fx-stat-delta .trend-flat { color: #ffbf47; }

.fx-metric-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fx-metric-cell {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 18px 13px;
  border-top: 3px solid var(--a);
  background: rgba(255, 255, 255, .07);
  animation: fxMetricIn 3.8s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .12s) infinite;
}

.fx-metric-cell small {
  color: var(--muted, #aeb4b9);
  font-family: var(--mono);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.fx-metric-cell strong { color: #f3f0e8; font-size: clamp(22px, 4vw, 34px); line-height: 1; overflow-wrap: anywhere; }

.fx-step-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.fx-step-caption {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  color: var(--muted, #aeb4b9);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
}

.fx-step-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px 12px;
  border-radius: 8px;
  background: #f3f0e8;
  color: #121416;
  animation: fxMetricIn 3.8s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .14s) infinite;
}

.fx-step-item i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--a);
  color: #071410;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
}

.fx-step-item strong { font-size: 15px; line-height: 1.12; overflow-wrap: anywhere; }
.fx-step-item small { color: #666; font-family: var(--mono); font-size: 10px; overflow-wrap: anywhere; }
.fx-step-arrow { color: var(--a); font-size: 22px; font-weight: 900; text-align: center; }

.fx-lower-third {
  display: grid;
  align-self: end;
  gap: 5px;
  margin-bottom: 18px;
  padding: 15px 18px;
  border-left: 4px solid var(--a);
  background: rgba(17, 19, 21, .9);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .3);
  transform: translateY(26px);
  animation: fxLineIn 3.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

.fx-lower-third span { color: var(--a); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fx-lower-third strong { font-size: 24px; line-height: 1; overflow-wrap: anywhere; }
.fx-lower-third small { color: var(--muted, #aeb4b9); font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .fx-metric-trio { grid-template-columns: 1fr; }
  .fx-step-flow { grid-template-columns: 1fr; }
  .fx-step-caption { grid-column: 1; }
  .fx-step-arrow { transform: rotate(90deg); }
}

/* Language-aware effect typography: Chinese needs line-height, English needs less compression. */
.fx-stage,
.fx-stage * {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root:lang(zh-CN) .fx-art {
  letter-spacing: 0.01em;
}

:root:lang(en) .fx-art {
  letter-spacing: 0;
}

:root:lang(zh-CN) .fx-title,
:root:lang(zh-CN) .fx-big,
:root:lang(zh-CN) .fx-bg-label,
:root:lang(zh-CN) .fx-scene,
:root:lang(zh-CN) .fx-slam strong,
:root:lang(zh-CN) .fx-neon strong {
  line-height: 1.02;
  letter-spacing: -0.028em;
}

:root:lang(en) .fx-title,
:root:lang(en) .fx-big,
:root:lang(en) .fx-bg-label,
:root:lang(en) .fx-scene,
:root:lang(en) .fx-slam strong,
:root:lang(en) .fx-neon strong {
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.fx-pop-words span,
.fx-chip {
  line-height: 1.12;
}

.fx-row {
  line-height: 1.25;
}

.fx-row span,
.fx-row small,
.fx-code-line,
.fx-quote,
.fx-quote small,
.fx-doc,
.fx-sticky,
.fx-lower-third,
.fx-step-item,
.fx-step-caption {
  overflow-wrap: anywhere;
}

.fx-highlight {
  line-height: 1.22;
}

.fx-quote {
  line-height: 1.22;
}

.fx-quote small {
  line-height: 1.55;
}

.fx-code-line {
  line-height: 1.55;
}

.fx-chart-label,
.fx-bar-row,
.fx-tag {
  line-height: 1.35;
}

:root:lang(zh-CN) .fx-tag,
:root:lang(zh-CN) .fx-chart-label,
:root:lang(zh-CN) .fx-bar-row {
  letter-spacing: 0.04em;
}

:root:lang(en) .fx-tag,
:root:lang(en) .fx-chart-label,
:root:lang(en) .fx-bar-row {
  letter-spacing: 0.08em;
}