/* ============================================================
   SITE FX - shared "wow" pieces used across the content pages.
   Builds on ranks/rank-pages.css. Everything is scoped to
   .rankpage and prefixed fx-. A page picks its identity by
   setting --fx / --fx-bright / --fx-dim / --fx-line on .rankpage
   (defaults to the rank gold) and drops the pieces it wants in.
   ============================================================ */
.rankpage {
  --fx: var(--rk-accent);
  --fx-bright: var(--rk-accent-bright);
  --fx-dim: var(--rk-accent-dim);
  --fx-line: var(--rk-accent-line);
  --fx-red: #ff5c48; --fx-red-dim: rgba(255, 92, 72, 0.12); --fx-red-line: rgba(255, 92, 72, 0.48); --fx-red-soft: #ffb8ad;
  --fx-green: #5fe39a; --fx-green-dim: rgba(95, 227, 154, 0.12); --fx-green-line: rgba(95, 227, 154, 0.5);
}

/* ---- Hero: light sweep across the title ---- */
.fx-sweep { position: relative; display: inline-block; }
.fx-sweep::after {
  content: ""; position: absolute; inset: -6px -12px;
  background: linear-gradient(100deg, transparent 30%, rgba(255,248,220,0.55) 50%, transparent 70%);
  background-size: 240% 100%; mix-blend-mode: overlay;
  animation: fx-sweep 6.5s ease-in-out infinite; pointer-events: none;
}
@keyframes fx-sweep { 0%, 55% { background-position: 140% 0; opacity: 0; } 60% { opacity: 1; } 100% { background-position: -40% 0; opacity: 0; } }

/* ---- Hero: drifting motes ---- */
.fx-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-motes span {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--fx) 55%, transparent 75%);
  opacity: 0; animation: fx-mote 14s linear infinite;
}
@keyframes fx-mote { 0% { transform: translate3d(0,0,0); opacity: 0; } 10% { opacity: 0.55; } 70% { opacity: 0.35; } 100% { transform: translate3d(40px,-420px,0); opacity: 0; } }
.fx-motes span:nth-child(1)  { left: 6%;  animation-delay: 0s;    animation-duration: 15s; }
.fx-motes span:nth-child(2)  { left: 14%; animation-delay: 3.1s;  animation-duration: 12s; width: 2px; height: 2px; }
.fx-motes span:nth-child(3)  { left: 23%; animation-delay: 6.4s;  animation-duration: 17s; }
.fx-motes span:nth-child(4)  { left: 31%; animation-delay: 1.7s;  animation-duration: 13s; width: 4px; height: 4px; }
.fx-motes span:nth-child(5)  { left: 40%; animation-delay: 8.2s;  animation-duration: 16s; width: 2px; height: 2px; }
.fx-motes span:nth-child(6)  { left: 52%; animation-delay: 4.5s;  animation-duration: 14s; }
.fx-motes span:nth-child(7)  { left: 61%; animation-delay: 10.3s; animation-duration: 12.5s; width: 2px; height: 2px; }
.fx-motes span:nth-child(8)  { left: 70%; animation-delay: 2.6s;  animation-duration: 18s; width: 4px; height: 4px; }
.fx-motes span:nth-child(9)  { left: 79%; animation-delay: 7.1s;  animation-duration: 13.5s; }
.fx-motes span:nth-child(10) { left: 86%; animation-delay: 5.5s;  animation-duration: 15.5s; width: 2px; height: 2px; }
.fx-motes span:nth-child(11) { left: 93%; animation-delay: 9.6s;  animation-duration: 16.5s; }
.fx-motes span:nth-child(12) { left: 47%; animation-delay: 11.8s; animation-duration: 14.5s; }

/* ---- Hero: scan line ---- */
.fx-scan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-scan::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: -2px;
  background: linear-gradient(180deg, transparent, var(--fx) 40%, var(--fx) 60%, transparent);
  box-shadow: 0 0 18px var(--fx-line); opacity: 0.6; animation: fx-scan 13s linear infinite;
}
@keyframes fx-scan { 0% { left: -2px; opacity: 0; } 5% { opacity: 0.6; } 95% { opacity: 0.6; } 100% { left: 100%; opacity: 0; } }

/* ---- Hero crest: orbit rings ---- */
.rankpage .rk-hero-badge.fx-badge { width: clamp(200px, 26vw, 320px); }
.fx-orbit { position: absolute; inset: -9%; border-radius: 50%; border: 1px dashed var(--fx-line); animation: fx-spin 48s linear infinite; pointer-events: none; }
.fx-orbit.o2 {
  inset: -1%; border: 2px solid transparent;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--fx) 86%, transparent 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: fx-spin 11s linear infinite reverse; opacity: 0.8;
}
.fx-orbit.o1::before, .fx-orbit.o1::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--fx-bright); box-shadow: 0 0 10px 2px var(--fx-line); top: 50%; left: -3px; margin-top: -3px; }
.fx-orbit.o1::after { left: auto; right: -3px; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.rankpage .rk-hero-badge.fx-badge svg { position: relative; z-index: 1; }
.rankpage .rk-hero-badge.fx-badge::before { background: radial-gradient(circle, var(--fx-dim) 0%, transparent 62%); }

/* ---- Toolbar buttons (shared look) ---- */
.fx-btn { padding: 0.72rem 1.05rem; font: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; }
.fx-btn:hover { color: var(--fx-bright); border-color: var(--fx-line); }

/* ---- Spotlight panel with rotating conic border ---- */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fx-rotate { to { --fx-angle: 360deg; } }
.fx-spot {
  position: relative; z-index: 2; margin: -1.6rem 0 2.6rem; padding: 2px; border-radius: 16px;
  background: conic-gradient(from var(--fx-angle, 0deg), var(--fx-dim) 0%, var(--fx-bright) 12%, var(--fx-dim) 28%, var(--fx-dim) 55%, #fff 66%, var(--fx-dim) 80%, var(--fx-dim) 100%);
  animation: fx-rotate 9s linear infinite;
  box-shadow: 0 0 60px var(--fx-dim), 0 24px 60px rgba(0,0,0,0.5);
}
.fx-spot.is-flush { margin-top: 0; }
.fx-spot-inner {
  position: relative; overflow: hidden; border-radius: 14px; padding: 2.1rem 2.3rem 2rem;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, var(--fx-dim), transparent 70%), linear-gradient(180deg, #1c1f28 0%, #12141b 100%);
}
.fx-spot-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 75%);
}
.fx-spot-head { position: relative; text-align: center; margin-bottom: 1.5rem; }
.fx-kicker { display: inline-flex; align-items: center; gap: 0.9rem; margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fx); }
.fx-kicker::before, .fx-kicker::after { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--fx)); }
.fx-kicker::after { background: linear-gradient(90deg, var(--fx), transparent); }
.fx-spot-head h2 {
  margin: 0 0 0.5rem; font-family: "Cinzel", serif; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(175deg, #fff 10%, var(--fx) 55%, color-mix(in srgb, var(--fx) 55%, #000) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fx-spot-head p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.fx-spot-head p a { color: var(--accent); }
/* numbered question / doctrine cards inside a spotlight */
.fx-qs { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.fx-q { position: relative; display: block; text-decoration: none; padding: 1.4rem 1.4rem 1.3rem 5.2rem; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--fx-line); border-radius: 12px; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.fx-q::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.7s ease; pointer-events: none; }
.fx-q:hover { transform: translateY(-4px) scale(1.01); border-color: var(--fx-bright); box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 30px var(--fx-dim); text-decoration: none; }
.fx-q:hover::after { transform: translateX(100%); }
.fx-q-num { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); font-family: "Cinzel", serif; font-weight: 800; font-size: 2.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--fx-line); text-shadow: 0 0 22px var(--fx-dim); }
.fx-q:hover .fx-q-num { -webkit-text-stroke-color: var(--fx-bright); }
.fx-q h3 { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.fx-q p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.fx-q p em, .fx-q h3 em { font-style: normal; color: var(--fx-bright); }
.fx-verdict { position: relative; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.3rem; padding: 1.05rem 1.3rem; background: rgba(0,0,0,0.28); border: 1px solid var(--line); border-radius: 12px; }
.fx-verdict p { margin: 0; flex: 1; min-width: 260px; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.fx-verdict p strong { color: var(--text); }

/* ---- Rubber stamp ---- */
.fx-stamp {
  flex: 0 0 auto; display: inline-block; padding: 0.45rem 0.9rem;
  font-family: "Cinzel", serif; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fx-red); border: 2px solid var(--fx-red); outline: 1px solid var(--fx-red-line); outline-offset: 3px; border-radius: 6px;
  transform: rotate(-4deg); box-shadow: inset 0 0 0 1px rgba(255,92,72,0.25), 0 0 18px rgba(255,92,72,0.18); opacity: 0.92;
  -webkit-mask-image: radial-gradient(ellipse at 40% 60%, #000 55%, rgba(0,0,0,0.75) 100%); mask-image: radial-gradient(ellipse at 40% 60%, #000 55%, rgba(0,0,0,0.75) 100%);
}
.fx-stamp.is-green { color: var(--fx-green); border-color: var(--fx-green); outline-color: var(--fx-green-line); box-shadow: inset 0 0 0 1px rgba(95,227,154,0.25), 0 0 18px rgba(95,227,154,0.18); transform: rotate(4deg); }
.fx-stamp.is-gold { color: var(--fx-bright); border-color: var(--fx); outline-color: var(--fx-line); box-shadow: inset 0 0 0 1px var(--fx-dim), 0 0 18px var(--fx-dim); }

/* ---- Stat strip (hard numbers) ---- */
.fx-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin: -1.4rem 0 2.6rem; }
.fx-stat { --c: var(--fx); position: relative; display: block; text-decoration: none; padding: 1rem 0.8rem 0.9rem; text-align: center; font: inherit; cursor: pointer; background: linear-gradient(180deg, var(--rk-panel-2), var(--rk-panel)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.fx-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); }
.fx-stat:hover, .fx-stat.is-active { transform: translateY(-3px); border-color: var(--c); text-decoration: none; }
.fx-stat.is-active { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, var(--rk-panel-2)), var(--rk-panel)); }
.fx-stat-value { display: block; font-family: "Cinzel", serif; font-weight: 800; font-size: 1.75rem; line-height: 1.1; color: var(--c); text-shadow: 0 0 20px color-mix(in srgb, var(--c) 35%, transparent); }
.fx-stat-value small { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05em; }
.fx-stat-label { display: block; margin-top: 0.25rem; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fx-stat.is-red { --c: var(--fx-red); }
.fx-stat.is-green { --c: var(--fx-green); }
.fx-stat.is-grey { --c: #c3c9d6; }

/* ---- Two-column layout with sticky index ---- */
.fx-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2.2rem; align-items: start; }
.fx-index { position: sticky; top: 1.2rem; }
.fx-index-title { margin: 0 0 0.7rem; font-family: "Cinzel", serif; font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fx); }
.fx-index ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.fx-index li[hidden] { display: none; }
.fx-index li a { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.6rem 0.42rem 1rem; margin-left: -1px; font-size: 0.86rem; color: var(--muted); text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.fx-index li a .n { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.76rem; color: var(--fx); opacity: 0.6; min-width: 1.6rem; flex: 0 0 auto; }
.fx-index li a .d { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-left: auto; background: var(--c, var(--fx)); box-shadow: 0 0 8px var(--c, var(--fx)); }
.fx-index li a:hover { color: var(--text); background: rgba(255,255,255,0.03); text-decoration: none; }
.fx-index li a.is-active { color: var(--fx-bright); border-left-color: var(--fx); background: var(--fx-dim); }
.fx-index li a.is-active .n { opacity: 1; }
.fx-index-foot { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--muted); opacity: 0.75; }

/* ---- Rail ledger of expandable entries ---- */
.fx-rail { position: relative; padding-left: 4.4rem; }
.fx-rail::before { content: ""; position: absolute; left: 1.55rem; top: 1.4rem; bottom: 1.4rem; width: 2px; background: linear-gradient(180deg, transparent, var(--fx-line) 8%, var(--fx-line) 92%, transparent); }
.rankpage .fx-entry { --c: var(--fx); --c-dim: var(--fx-dim); --c-line: var(--fx-line); position: relative; margin: 0 0 1rem; background: linear-gradient(180deg, var(--rk-panel-2), var(--rk-panel)); border: 1px solid var(--line); border-radius: 12px; overflow: visible; transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.6s ease, transform 0.6s ease; }
.rankpage .fx-entry.is-red { --c: var(--fx-red); --c-dim: var(--fx-red-dim); --c-line: var(--fx-red-line); }
.rankpage .fx-entry.is-green { --c: var(--fx-green); --c-dim: var(--fx-green-dim); --c-line: var(--fx-green-line); }
.rankpage .fx-entry.is-grey { --c: #c3c9d6; --c-dim: rgba(195,201,214,0.10); --c-line: rgba(195,201,214,0.4); }
.fx-reveal .fx-entry { opacity: 0; transform: translateY(18px); }
.fx-reveal .fx-entry.is-in { opacity: 1; transform: none; }
.rankpage .fx-entry[open] { border-color: var(--c-line); box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
.rankpage .fx-entry:target { border-color: var(--c); box-shadow: 0 0 0 3px var(--c-dim), 0 14px 40px rgba(0,0,0,0.4); }
.fx-node { position: absolute; left: -4.4rem; top: 0.55rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; font-family: "Cinzel", serif; font-weight: 800; font-size: 1rem; letter-spacing: 0.03em; color: var(--c); background: radial-gradient(circle at 35% 30%, #2b2f3b, #14161d); border: 1px solid var(--c-line); border-radius: 50%; box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--line); transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; z-index: 1; }
.fx-node svg { width: 20px; height: 20px; }
.rankpage .fx-entry[open] .fx-node, .rankpage .fx-entry:hover .fx-node { border-color: var(--c); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--c-line), 0 0 22px var(--c-dim); transform: scale(1.06); }
.rankpage .fx-entry > summary { display: block; list-style: none; cursor: pointer; border-radius: 12px; padding: 0; font: inherit; color: inherit; background: none; border: 0; }
.rankpage .fx-entry > summary::-webkit-details-marker { display: none; }
.rankpage .fx-entry > summary::before { content: none; }
.fx-head { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.05rem 3.2rem 1.05rem 1.3rem; }
.fx-head::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 600; color: var(--c); line-height: 1; }
.rankpage .fx-entry[open] .fx-head::after { content: "\2212"; }
.fx-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; color: var(--c); background: var(--c-dim); border: 1px solid var(--c-line); border-radius: 10px; }
.fx-ico svg { width: 20px; height: 20px; }
.fx-head-text { flex: 1; min-width: 0; }
.fx-head h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.35; transition: color 0.18s ease; font-family: "Inter", sans-serif; letter-spacing: 0; text-transform: none; }
.rankpage .fx-entry > summary:hover h3, .rankpage .fx-entry[open] h3 { color: var(--c); }
.fx-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.fx-tag { padding: 0.12rem 0.55rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--line); white-space: nowrap; }
.fx-tag.is-c { color: var(--c); background: var(--c-dim); border-color: var(--c-line); }
.fx-tag.is-red { color: var(--fx-red); background: var(--fx-red-dim); border-color: var(--fx-red-line); }
.fx-tag.is-green { color: var(--fx-green); background: var(--fx-green-dim); border-color: var(--fx-green-line); }
.fx-tag.is-ban { color: #fff; background: rgba(226,69,43,0.55); border-color: var(--fx-red); }
.rankpage .fx-body { margin: 0 1.3rem 1.25rem; padding: 1rem 1.2rem; font-size: 0.96rem; color: var(--muted); line-height: 1.65; background: rgba(0,0,0,0.24); border-left: 2px solid var(--c-line); border-radius: 0 10px 10px 0; }
.rankpage .fx-body p { margin: 0 0 0.8rem; }
.rankpage .fx-body > :last-child { margin-bottom: 0; }
.rankpage .fx-body strong { color: var(--text); }
.rankpage .fx-body a { color: var(--accent); }
.rankpage .fx-body a:hover { text-decoration: underline; }
.rankpage .fx-body ul, .rankpage .fx-body ol { margin: 0.4rem 0 0.9rem; padding-left: 1.3rem; }
.rankpage .fx-body li { margin-bottom: 0.55rem; }
.rankpage .fx-body li:last-child { margin-bottom: 0; }
.rankpage .fx-body .cmd { font-weight: 600; }
.rankpage .fx-body code { font-family: Consolas, Menlo, monospace; font-size: 0.88em; color: var(--fx-bright); background: rgba(0,0,0,0.35); padding: 0.1rem 0.4rem; border-radius: 4px; }
.fx-define { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 1rem; margin: 0 0 1rem; background: var(--c-dim, var(--fx-dim)); border: 1px solid var(--c-line, var(--fx-line)); border-radius: 8px; }
.fx-define svg { flex: 0 0 auto; margin-top: 2px; color: var(--c, var(--fx)); width: 18px; height: 18px; }
.fx-define p { margin: 0; font-size: 0.93rem; }
.fx-warn { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.85rem 1rem; margin: 0 0 0.9rem; color: var(--fx-red-soft); background: var(--fx-red-dim); border: 1px solid var(--fx-red-line); border-radius: 8px; }
.fx-warn svg { flex: 0 0 auto; color: var(--fx-red); margin-top: 2px; width: 18px; height: 18px; }
.fx-warn p { margin: 0; font-size: 0.92rem; }
.fx-warn strong { color: #ffd4cc; }
.fx-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; margin: 0 0 1rem; }
.fx-sub-card { position: relative; padding: 0.9rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 8px; }
.fx-sub-card::before { content: attr(data-n); position: absolute; right: 0.7rem; top: 0.4rem; font-family: "Cinzel", serif; font-weight: 800; font-size: 1.6rem; color: var(--c-dim, var(--fx-dim)); line-height: 1; }
.fx-sub-card h4 { margin: 0 0 0.35rem; font-size: 0.92rem; font-weight: 700; color: var(--text); padding-right: 1.4rem; }
.fx-sub-card p { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.fx-steps { list-style: none; counter-reset: fxs; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; }
.fx-steps li { counter-increment: fxs; position: relative; padding: 0.8rem 0.9rem 0.8rem 2.8rem; font-size: 0.9rem; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 8px; line-height: 1.5; margin: 0; }
.fx-steps li::before { content: counter(fxs); position: absolute; left: 0.75rem; top: 0.7rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-family: "Cinzel", serif; font-weight: 800; font-size: 0.8rem; color: var(--c, var(--fx)); background: var(--c-dim, var(--fx-dim)); border: 1px solid var(--c-line, var(--fx-line)); border-radius: 50%; }
.fx-empty { display: none; padding: 1.4rem 1.2rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; font-size: 0.95rem; }
.fx-empty.is-shown { display: block; }

/* ---- Generic scroll reveal for cards ---- */
.fx-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fx-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-sweep::after, .fx-motes span, .fx-scan::before, .fx-orbit, .fx-spot, .rk-hero-badge::before { animation: none; }
  .fx-motes, .fx-scan { display: none; }
  .fx-reveal .fx-entry, .fx-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fx-q, .fx-q::after, .fx-stat { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1060px) {
  .fx-layout { grid-template-columns: 1fr; }
  .fx-index { position: static; }
  .fx-index ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-left: 0; gap: 0.15rem; }
  .fx-index li a { border-left: 2px solid var(--line); margin-left: 0; }
  .fx-index-foot { display: none; }
}
@media (max-width: 900px) {
  .fx-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  .fx-spot-inner { padding: 1.5rem 1.1rem 1.4rem; }
  .fx-qs { grid-template-columns: 1fr; }
  .fx-q { padding-left: 4.4rem; }
  .fx-rail { padding-left: 3.4rem; }
  .fx-rail::before { left: 1.1rem; }
  .fx-node { left: -3.4rem; width: 2.4rem; height: 2.4rem; font-size: 0.82rem; }
  .fx-node svg { width: 16px; height: 16px; }
  .fx-head { padding: 0.9rem 2.6rem 0.9rem 1rem; gap: 0.7rem; }
  .rankpage .fx-body { margin: 0 0.9rem 1rem; padding: 0.85rem 0.9rem; }
  .fx-strip { grid-template-columns: repeat(2, 1fr) !important; }
}