/* ============ LIQUID MERCURY PRESENCE — Phase371 (jewel refinement) ============ */
/* L0 материал — refractive jewel орб (goo group merge) */
.lm-orbs__goo { filter: url(#mercury-goo); position: absolute; inset: 0; }
.lm-orb {
  position: absolute; width: 48%; aspect-ratio: 1; left: var(--x); top: var(--y);
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.2) 6%, transparent 16%), /* [P373] specular 5% бүдгэрүүлэв (огтолцол чимээгүй) */
    radial-gradient(circle at 72% 78%, color-mix(in srgb, var(--c) 75%, white) 0%, transparent 30%),         /* refraction caustic */
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--c) 94%, white) 0%, var(--c) 34%, color-mix(in srgb, var(--c) 55%, black) 70%, transparent 88%); /* jewel body → soft edge */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 45%, transparent);
  mix-blend-mode: screen;
  animation: orbDrift 24s cubic-bezier(.45,0,.55,1) infinite;
  will-change: transform;
}
.lm-fusion-core {
  position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%,-50%) scale(.55);
  background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--brand-primary, #c9a84c) 80%, white) 22%, transparent 62%);
  mix-blend-mode: screen; opacity: 0;
  animation: fusionBloom 24s ease-in-out infinite, chromaSplit 24s steps(1) infinite;
}
/* orbDrift — гурвуул төв рүү (--dx/--dy) зэрэг уусаж, fusion агшинд нийлнэ */
@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(var(--dx,0), var(--dy,0)) scale(1.06); }
}
@keyframes fusionBloom {
  0%,42%,58%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.55); }
  50%             { opacity: .95; transform: translate(-50%,-50%) scale(1.05); }
}
/* chroma — fusion оргилд (46–54%) богино призмэн гялбаа */
@keyframes chromaSplit {
  0%,46%,54%,100% { filter: none; }
  50%             { filter: url(#bps-chroma); }
}

/* ============ [PHASE 374 A] R-ENGINE "TYPOGRAPHIC CORE" — Cormorant нэр + ring станц чип ============ */
.lm-engine { position: absolute; inset: 0; }
/* "R-Engine" төв нэр — Cormorant Garamond (luxury serif); шошго — DM Mono. Бөмбөг/градиент УСТГАВ. */
.lm-rengine-title { font-family: 'Cormorant Garamond', 'Hoefler Text', Garamond, Georgia, serif; font-weight: 600; letter-spacing: .01em; }
.lm-rengine-sub   { font-family: 'DM Mono', ui-monospace, monospace; }
/* --re-accent: dark=алтлаг шар; light=хар хүрэл (#6b4a10) → ring/chip/particle нэг токен */
.lm-rengine { --re-accent: var(--brand-primary, #c9a84c); }
/* 7 чип = ring дээрх станц. Анхны нэг эргэлтэд нуугдах — зүү зочлоход chipReveal илрүүлнэ, дараа chipComet loop. */
.lm-chip {
  position: absolute; left: 50%; top: 50%;
  transform: translate(var(--cx), var(--cy)) translate(-50%, -50%);
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter: blur(2px);
  padding: 4px 9px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--re-accent) 28%, var(--border));
  white-space: nowrap; opacity: 0;
  /* [Phase374.2] animation КЛАСС-д (SSOT): ring-тэй ИЖИЛ гадаад CSS + ИЖИЛ pause-gate тул хэзээ ч зөрөлдөхгүй.
     delay = inline custom-prop (var). play-state inline-аар БИЧИГДЭХГҮЙ тул pause-gate ажиллана. */
  animation: chipReveal 0.5s ease-out var(--reveal-delay) both, chipComet 30s linear var(--comet-delay) infinite;
}
/* COMET SWEEP: цэг ОН=тод; ард 2 чип бүдгэрч төв рүү хөвж, 3 дахь нь 75% туулаад (25% радиус) уусна. */
/* Текст рүү хүрэхгүй: уусахдаа opacity аль хэдийн 0 + нэр z-10 тул чип АРД нь өнгөрнө. */
@keyframes chipComet {
  0%   { opacity: 1;   box-shadow: inset 0 0 0 1px var(--re-accent), 0 0 14px color-mix(in srgb, var(--re-accent) 45%, transparent); transform: translate(var(--cx), var(--cy)) translate(-50%,-50%); }
  16%  { opacity: .55; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--re-accent) 28%, var(--border)); transform: translate(calc(var(--cx)*.83), calc(var(--cy)*.83)) translate(-50%,-50%); }
  30%  { opacity: .25; transform: translate(calc(var(--cx)*.66), calc(var(--cy)*.66)) translate(-50%,-50%); }
  44%  { opacity: 0;   transform: translate(calc(var(--cx)*.5), calc(var(--cy)*.5)) translate(-50%,-50%); }
  45%  { opacity: 0;   transform: translate(var(--cx), var(--cy)) translate(-50%,-50%); }
  98.6% { opacity: 0;  transform: translate(var(--cx), var(--cy)) translate(-50%,-50%); }
  100% { opacity: 1;   box-shadow: inset 0 0 0 1px var(--re-accent), 0 0 14px color-mix(in srgb, var(--re-accent) 45%, transparent); transform: translate(var(--cx), var(--cy)) translate(-50%,-50%); }
}

/* [Phase374 Fix A] chipReveal = ЗӨВХӨН бүдэг орох fade-in (тод оргилгүй). Тод "идэвхжилт"-ийн
   ГАНЦ эх = цэг-синхрон chipComet. Өмнө нь 40% тод-flash нь ease-out цэгээс салангид шугаман
   stagger-аар тоглож, intro-д "чип цэгээс өмнө асах" алдаа үүсгэдэг байв. */
@keyframes chipReveal {
  0%   { opacity: 0; transform: translate(var(--cx), var(--cy)) translate(-50%,-50%) scale(0.82); }
  100% { opacity: .55; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--re-accent) 28%, var(--border)); transform: translate(var(--cx), var(--cy)) translate(-50%,-50%) scale(1); }
}

/* ============ STRESS CHART — Topographic Pulse + live-dot ============ */
.lm-wave path { animation: waveDrift 9s ease-in-out infinite; }
.lm-wave path:nth-child(2) { animation-duration: 12s; opacity: .55; }
.lm-wave path:nth-child(3) { animation-duration: 15s; opacity: .35; }
@keyframes waveDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-40px); } }
.lm-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success, #1f7a5c);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success, #1f7a5c) 70%, transparent);
  animation: livePulse 2.2s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success, #1f7a5c) 70%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============ SEALING + GRAIN + BBC BLUR-SLIDE ============ */
.lm-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .035; z-index: 1;
  background: var(--nebula-grain, none); mix-blend-mode: overlay;
}
.lm-bps, .lm-rengine {
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 74%, transparent 100%);
          mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 74%, transparent 100%);
}
.lm-rise {
  opacity: 1; /* base = харагдана (frozen/no-anim-safe); анимац зөвхөн нэмэлт reveal */
  animation: bbcRise 1.1s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: var(--rise-d, 0s);
}
@keyframes bbcRise {
  from { opacity: .5; filter: blur(2px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ============ [PHASE 373] KINETIC TYPOGRAPHY — "The Vogue Condensation" ============ */
/* НЭГ элемент organic reveal: манан→нягтрал + бэхэн нэвчилт. Split-ГҮЙ (a11y/reflow-safe). */
.kx-line {
  opacity: 1; /* base харагдана (frozen/no-anim safe) */
  animation: kxCondense 1.1s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: var(--kx-d, 0s);
  will-change: letter-spacing, filter, opacity;
}
@keyframes kxCondense {
  from { opacity: .5; filter: blur(10px); letter-spacing: .34em; transform: translateY(.18em); }
  60%  { opacity: 1;  filter: blur(2px);  letter-spacing: .08em; }
  to   { opacity: 1;  filter: blur(0);    letter-spacing: normal; transform: translateY(0); }
}
/* Алтан гэрэл-нэвчилт — зөвхөн TITLE дээгүүр нэг удаа гүйнэ (background-clip:text) */
.kx-title {
  background-image: linear-gradient(100deg,
    var(--on-gradient-fg, #fff) 0%, var(--on-gradient-fg, #fff) 38%,
    color-mix(in srgb, var(--brand-primary, #c9a84c) 92%, var(--on-gradient-fg, #fff)) 50%,
    var(--on-gradient-fg, #fff) 62%, var(--on-gradient-fg, #fff) 100%);
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kxCondense 1.1s cubic-bezier(.16,1,.3,1) backwards,
             kxSheen 1.5s ease-out .5s backwards;
}
@keyframes kxSheen { from { background-position: 120% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .kx-line, .kx-title { animation: none !important; opacity: 1; filter: none; letter-spacing: normal; transform: none; }
  .kx-title { background: none; -webkit-text-fill-color: currentColor; }
}

/* ============ [PHASE 376] BundleStrip — зөөлөн fade reveal + СТАТИК sheen (kxCondense scatter-ийн оронд) ============ */
/* Багц сэлгэхэд текст блок (key={i}) re-mount → kx-fade тоглоно. letter-spacing/blur SCATTER БАЙХГҮЙ (тайван). */
.kx-fade {
  opacity: 1; /* base харагдана (frozen/no-anim safe) */
  animation: kxFade .6s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes kxFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Алтан sheen — СТАТИК (kxSheen sweep + kxCondense scatter-ГҮЙ). Gold center 50%-д тогтмол; Phase 373 gold identity. */
.kx-sheen {
  background-image: linear-gradient(100deg,
    var(--on-gradient-fg, #fff) 0%, var(--on-gradient-fg, #fff) 38%,
    color-mix(in srgb, var(--brand-primary, #c9a84c) 92%, var(--on-gradient-fg, #fff)) 50%,
    var(--on-gradient-fg, #fff) 62%, var(--on-gradient-fg, #fff) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .kx-fade { animation: none; opacity: 1; transform: none; }
  .kx-sheen { background: none; -webkit-text-fill-color: currentColor; }
}

/* ============ [PHASE 378] HERO — TheaterJS typing курсор ============ */
/* Гарчиг useTheaterType-аар бичигдэх үед төгсгөлд анивчих курсор (TheaterJS demo style.css загвар).
   currentColor → bilateral (Light бараан / Dark цагаан) өвлөнө. reduced-motion → нуугдана.
   Phase 377 kx-title light override УСТГАВ — Hero одоо kx-title ашиглахгүй (typing). */
.hero-caret::after {
  content: '|';
  margin-left: .06em;
  font-weight: 400;
  color: currentColor;
  animation: heroCaretBlink .65s steps(1) infinite;
}
@keyframes heroCaretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-caret::after { animation: none; opacity: 0; } }

/* ============ [PHASE 379] FadeInChars — тэмдэгт-шатлалт opacity reveal ("текст бичигдэх") ============ */
/* fade-in-title-animation demo (GSAP/SplitText)-ийг ГАДНЫ САН/ЛИНКГҮЙ CSS болгов. Тэмдэгт бүр opacity 0→1,
   animation-delay-аар зүүнээс баруун шатлана (FadeInChars.jsx inline style). Өнгө/фонт эцгээс өвлөнө. */
.fadein-char {
  display: inline;
  opacity: 0;
  animation-name: fadeinChar;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-fill-mode: both;
}
@keyframes fadeinChar { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fadein-char { animation: none !important; opacity: 1; } }

/* ============ [PHASE 373] NEURAL MESH — чип→цөм алтан хэлхээ + дохио урсгал ============ */
.lm-mesh-line {
  stroke: color-mix(in srgb, var(--brand-primary, #c9a84c) 32%, transparent);
  stroke-width: 1;
  stroke-dasharray: 6 200; stroke-dashoffset: 206;
  animation: meshPulse 6.3s linear infinite;
}
@keyframes meshPulse { to { stroke-dashoffset: 0; } } /* дохио цөм рүү урсана */
.lm-rengine:not([data-visible]) .lm-mesh-line { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lm-mesh-line { animation: none; stroke-dasharray: none; } }

/* ============ [PHASE 374 R2] R-ENGINE BG — codepen зураасан тойрог + алтан цэг + particles ============ */
/* Зураасан тойрог + дагуу хөдлөх цэг — fast-start (2s ease-out) → удаан тасралтгүй (30s linear) */
.lm-ring {
  position: absolute; top: 50%; left: 50%; width: 340px; height: 340px;
  border: 1px solid color-mix(in srgb, var(--re-accent) 22%, transparent);
  border-radius: 50%; transform: translate(-50%, -50%);
  animation: lmRingRotate 2s ease-out 1, lmRingRotate 30s linear 2s infinite; pointer-events: none; z-index: 0;
}
/* Needle line: center → ring edge (radar зүү) */
.lm-ring::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 170px; height: 1.5px;
  background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--re-accent) 22%, transparent) 30%, var(--re-accent) 100%);
  transform-origin: 0% 50%;
  transform: translateY(-50%) rotate(-90deg);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--re-accent) 70%, transparent));
}
/* Needle tip dot at ring edge */
.lm-ring::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--re-accent); transform: translateX(-50%);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--re-accent) 75%, transparent);
}
@keyframes lmRingRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* [Phase373.6 additive] Radar sweep trail — 154° (3-chip interval) behind needle. No existing code modified. */
/* Angle math: chipComet opacity→0 at 44% of 30s = 13.2s = 360°×(13.2/30) = 158° ≈ 3×(360/7)=154° */
.lm-radar-sweep {
  position: absolute; top: 50%; left: 50%;
  width: 340px; height: 340px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--re-accent) 20%, transparent) 0deg,
    transparent 1deg,
    transparent 205deg,
    color-mix(in srgb, var(--re-accent) 2%, transparent) 207deg,
    color-mix(in srgb, var(--re-accent) 6%, transparent) 245deg,
    color-mix(in srgb, var(--re-accent) 12%, transparent) 288deg,
    color-mix(in srgb, var(--re-accent) 18%, transparent) 328deg,
    color-mix(in srgb, var(--re-accent) 20%, transparent) 360deg
  );
  animation: lmRingRotate 2s ease-out 1, lmRingRotate 30s linear 2s infinite;
  pointer-events: none; z-index: 1;
}
.lm-rengine:not([data-visible]) .lm-radar-sweep { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lm-radar-sweep { animation: none; opacity: 0; } }
/* 30 хөвж буй particle тоосонцор (codepen .particle / float-particle) */
.lm-particles { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; }
.lm-particle {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; border-radius: 50%;
  background: var(--re-accent); opacity: 0;
  transform: translate(var(--px), var(--py)) translate(-50%,-50%);
  animation: lmDriftParticle linear infinite;
}
/* [Эксперимент] particle R-Engine рүү радиаль хөвж, 88px (50% halo) дээр уусна — дотогш орохгүй */
@keyframes lmDriftParticle {
  0%   { opacity: 0;  transform: translate(var(--px), var(--py)) translate(-50%,-50%); }
  12%  { opacity: .55; }
  82%  { opacity: .5; }
  100% { opacity: 0;  transform: translate(var(--ex), var(--ey)) translate(-50%,-50%); }
}
/* viewport-gate + reduced-motion */
.lm-rengine:not([data-visible]) .lm-ring,
.lm-rengine:not([data-visible]) .lm-chip,
.lm-rengine:not([data-visible]) .lm-particle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lm-ring { animation: none; }
  .lm-particle { animation: none; opacity: .25; }
}

/* ============ PERFORMANCE — viewport-gate (ЗӨВХӨН хүнд goo/орб; текст lm-rise чөлөөтэй) ============ */
.lm-bps:not([data-visible]) .lm-orbs__goo { filter: none; }
.lm-bps:not([data-visible]) .lm-orb,
.lm-bps:not([data-visible]) .lm-fusion-core,
.lm-rengine:not([data-visible]) .lm-chip,
.lm-rengine:not([data-visible]) .lm-core,
.lm-rengine:not([data-visible]) .lm-core__ripple { animation-play-state: paused; }
.lm-bps, .lm-rengine { content-visibility: auto; }

/* ============ REDUCED-MOTION — static, утга бүхий эцсийн frame ============ */
@media (prefers-reduced-motion: reduce) {
  .lm-orb, .lm-fusion-core, .lm-chip, .lm-core, .lm-core__ripple, .lm-rise, .lm-wave path, .lm-live-dot { animation: none !important; }
  .lm-fusion-core { opacity: .9; transform: translate(-50%,-50%) scale(1); }
  .lm-chip { transform: translate(calc(var(--cx)*.12), calc(var(--cy)*.12)) scale(.5); opacity: .4; }
  .lm-core { opacity: 1; }
  .lm-rise { filter: none; transform: none; opacity: 1; }
}

/* ============ LIGHT MODE PARITY — БҮРЭН OVERRIDE (dark base хөндөхгүй) ============ */
:root:not(.dark) .lm-bps, :root:not(.dark) .lm-rengine { background: var(--surface); }
:root:not(.dark) .lm-orb {
  mix-blend-mode: multiply; opacity: .92;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.85) 0%, transparent 16%),
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--c) 32%, white) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 70%, black) 80%, transparent 92%);
  box-shadow: inset 0 0 0 1px var(--border);
}
:root:not(.dark) .lm-fusion-core {
  mix-blend-mode: normal;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary, #c9a84c) 88%, var(--foreground)) 0%, transparent 66%);
  animation: fusionBloom 24s ease-in-out infinite, chromaSplitLight 24s steps(1) infinite;
}
:root:not(.dark) .lm-core {
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--brand-primary, #c9a84c) 72%, white) 0%,
    var(--brand-primary, #c9a84c) 40%,
    color-mix(in srgb, var(--brand-primary, #c9a84c) 40%, transparent) 68%,
    transparent 80%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 38px 2px color-mix(in srgb, var(--brand-primary, #c9a84c) 38%, transparent);
}
:root:not(.dark) .lm-core__ripple { animation: coreRippleLight 6.3s ease-out infinite; }
:root:not(.dark) .lm-core__label  { color: #ffffff; }
:root:not(.dark) .lm-grain        { background: none; opacity: 0; }
@keyframes chromaSplitLight {
  0%,46%,54%,100% { filter: none; }
  50%             { filter: url(#bps-chroma-light); }
}
@keyframes coreRippleLight {
  0%,80% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary, #c9a84c) 45%, transparent); opacity: 0; }
  86%    { opacity: .6; }
  100%   { box-shadow: 0 0 0 80px transparent; opacity: 0; }
}

/* ── R-Engine light mode: --re-accent → хар хүрэл (#6b4a10); цагаан дэвсгэр дээр уншигдана ── */
:root:not(.dark) .lm-rengine { --re-accent: #6b4a10; }

/* ── Mobile/tablet: ring container-г scale → ring+chip+particle proportional жижгэрнэ ── */
@media (max-width: 479px) { .lm-ring-wrap { transform: scale(0.78); transform-origin: center top; } }
@media (max-width: 639px) and (min-width: 480px) { .lm-ring-wrap { transform: scale(0.88); transform-origin: center top; } }

/* ============ [PHASE 375] HERO — Light mode gradient давхцал устгал ============ */
/* Light mode-д Hero (#main-content) дээрх banner-gradient-animated 10-өнгийн gradient нь full-bleed
   зургийн АРД нэвт харагдаж, доорх BundleStrip-ийн gradient-тэй "давхар" мэдрэгдэж байв. Hero-д gradient
   устгаж, full-bleed зургийг ГАНЦ дэвсгэр болгов. BundleStrip-ийн .banner-gradient-animated ХЭВЭЭР
   (энэ override зөвхөн #main-content-д хамаарна). Dark mode = banners.css-д аль хэдийн transparent.
   id+class specificity тул !important шаардлагагүй. */
:root:not(.dark) #main-content.banner-gradient-animated {
  background: var(--background);
}

/* ===== [PHASE 373.6] R-ENGINE ANALYTICS — Crystal & Thread (зөвхөн локал SSOT токен) ===== */
.brm-stage-wrap { width: 100%; padding: clamp(2rem, 4vw, 4rem) 0; }
.brm-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; -moz-column-gap: 1px; column-gap: 1px; row-gap: 0; background: transparent; max-width: 80rem; margin-left: auto; margin-right: auto; align-items: stretch; }
.brm-panel { position: relative; overflow: hidden; min-height: 440px; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px) clamp(22px, 3vw, 40px); background: transparent; }
.brm-bignum { font-family: var(--font-serif, 'Spectral', Georgia, serif); font-style: italic; font-weight: 500; font-size: clamp(48px, 6vw, 64px); line-height: 1; letter-spacing: -0.01em; color: var(--foreground); }
.brm-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--success); border: 0.5px solid var(--success-border); border-radius: 20px; padding: 4px 10px; }
.brm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: brmDot 1.6s ease-out infinite; }
@keyframes brmDot { 0% { box-shadow: 0 0 0 0 var(--success-subtle); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.brm-delta { font-family: var(--font-mono, monospace); font-size: 13px; padding: 3px 9px; border-radius: 6px; align-self: center; }
.brm-delta-up { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.brm-delta-down { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }
.brm-frame { flex: 1; min-height: 0; position: relative; background: var(--surface); border: 0.5px solid var(--border); border-radius: 14px; padding: 24px 20px 18px; }
.brm-gauge-track { stroke: var(--border); stroke-width: 14; }
.brm-gauge-arc { stroke: var(--luxury-gold); stroke-width: 3; opacity: .7; transition: stroke-dashoffset 1.4s cubic-bezier(.34, 1.4, .64, 1); }
.brm-needle { transition: transform 1.5s cubic-bezier(.34, 1.56, .64, 1); }
.brm-needle-line { stroke: var(--luxury-gold); stroke-width: 1.4; }
.brm-needle-tip { fill: var(--foreground); }
.brm-needle-hub { fill: var(--luxury-gold); }
.brm-axis-label { fill: var(--text-subtle); color: var(--text-subtle); font-size: 11px; font-family: var(--font-mono, monospace); }
.brm-stream-path { stroke: var(--luxury-gold); stroke-width: 1.5; opacity: .9; stroke-dasharray: 1600; animation: brmDraw 2.2s ease-out; }
.brm-stream-glow { stroke: var(--luxury-gold); stroke-width: 3; opacity: .18; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--luxury-gold) 40%, transparent)); }
.brm-stream-head { fill: var(--foreground); animation: brmPulse 3s ease-in-out infinite; }
@keyframes brmDraw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes brmPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes brmNeedleSway {
  0%, 100% { transform: rotate(0deg); }
  22% { transform: rotate(2.2deg); }
  57% { transform: rotate(-1.6deg); }
  80% { transform: rotate(0.9deg); }
}
.brm-needle-sway { transform-origin: 200px 190px; animation: brmNeedleSway 14s ease-in-out 1.8s infinite; }
/* [Phase373.9] Join CTA */
.brm-join { margin-top: 18px; width: 100%; padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 500;
  background: color-mix(in srgb, var(--luxury-gold) 14%, transparent); color: var(--luxury-gold);
  border: 0.5px solid color-mix(in srgb, var(--luxury-gold) 35%, transparent); transition: background .3s; cursor: pointer; }
.brm-join:hover { background: color-mix(in srgb, var(--luxury-gold) 22%, transparent); }
.brm-join-locked { background: var(--surface); color: var(--text-muted); cursor: default; border-color: var(--border); text-align: center; }
/* [Phase373.9 R2] Unified single CTA strip below both cards */
.brm-stage-header { grid-column: 1 / -1; padding: 20px clamp(22px, 3vw, 40px) 14px; text-align: center; }
.brm-stage-footer { grid-column: 1 / -1; display: flex; justify-content: center; padding: 18px clamp(22px, 3vw, 40px) 24px; }
.brm-stage-footer .brm-join { width: auto; min-width: 180px; max-width: 240px; font-size: 12px; text-align: center; padding: 9px 24px; margin-top: 0; }
/* Stream Y-axis */
.brm-stream-ref { stroke: var(--border); stroke-width: 0.5; stroke-dasharray: 4 4; opacity: 0.5; }
.brm-axis-tick { stroke: var(--text-subtle); stroke-width: 1; opacity: 0.45; }
@media (max-width: 760px) {
  .brm-stage { grid-template-columns: 1fr; }
  .brm-stage-header, .brm-stage-footer { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .brm-gauge-arc, .brm-needle { transition: none; }
  .brm-stream-path, .brm-stream-head, .brm-needle-sway { animation: none; stroke-dashoffset: 0; }
}