/* ============================================================
   ARTHA v2 — Three.js generative hero overrides
   Loaded AFTER style.css to override v1 hero treatment.
   ============================================================ */

/* Full-bleed canvas behind everything in the hero */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* v2 backdrop is just a vignette + noise, not auroras (WebGL handles color) */
.hero-backdrop.hero-backdrop-v2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-backdrop.hero-backdrop-v2 .vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(10,8,6,0.55) 80%, rgba(10,8,6,0.9) 100%);
}

/* Hero content rides above the canvas */
.hero-inner {
  position: relative;
  z-index: 3;
}

/* Hide body-level atmosphere behind hero so canvas is the clean stage.
   Atmosphere keeps working for the rest of the page since hero is overflow:hidden.
   We simply dim what leaks through. */
.hero .atmosphere { display: none; }

/* Eyebrow gets a subtle chip on v2 */
.hero-inner .eyebrow {
  background: rgba(10,8,6,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Add a faint scanline shimmer over the canvas for cinematic CRT feel */
.hero-canvas::after { content: none; }

/* Loading state: while Three.js imports, canvas is invisible → show a subtle
   radial gradient so the hero never flashes black. */
.hero-canvas:not(.ready) {
  background: radial-gradient(ellipse at 50% 40%, #2a1810 0%, #0a0806 70%);
}
.hero-canvas.ready {
  animation: canvasFadeIn 1.2s var(--ease-out) both;
}
@keyframes canvasFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Performance fallback — reduced motion disables the shader loop entirely */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas { display: none; }
  .hero-backdrop.hero-backdrop-v2 .vignette {
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255,107,53,0.18), transparent 50%),
      radial-gradient(ellipse at 70% 70%, rgba(60,232,255,0.08), transparent 50%),
      var(--obsidian);
  }
}

/* ============================================================
   BUILT ON ARTHA — product-gallery mockups
   Inline SVG only. All text classes resolve here, not in SVG
   attributes, so var(--serif) / var(--mono) reach into the SVG
   via CSS inheritance.
   ============================================================ */

.builtonartha .section-lede {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--bone-dim);
  margin-top: 24px;
}

.builtonartha-grid {
  display: flex;
  flex-direction: column;
  gap: 128px;
}

.mockup {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}

.mockup-label {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: baseline;
  max-width: 820px;
}
.mockup-num {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 48px;
  color: var(--bone-faint);
  line-height: 1;
}
.mockup-label h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 70, "wght" 500;
  color: var(--bone);
  margin: 0 0 8px;
  line-height: 1.1;
}
.mockup-label-kind {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
  color: var(--bone-faint);
  font-size: 0.7em;
  letter-spacing: 0;
}
.mockup-label p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--bone-dim);
  margin: 0;
  max-width: 520px;
}

/* The frame — desktop variant */
.mockup-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--obsidian);
  box-shadow:
    0 1px 0 rgba(244,237,224,0.06) inset,
    0 30px 80px -30px rgba(0,0,0,0.72),
    0 60px 140px -60px rgba(122,45,14,0.22);
  isolation: isolate;
}
.mockup-frame-desktop {
  aspect-ratio: 1280 / 800;
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
}
.mockup-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mockup-caption {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--bone-dim);
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
  line-height: 1.55;
}

.mockup-placeholder {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 48px 0;
  border-top: 1px dashed rgba(244,237,224,0.10);
  border-bottom: 1px dashed rgba(244,237,224,0.10);
  opacity: 0.66;
}
.mockup-placeholder-label {
  display: contents;
}
.mockup-placeholder h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-variation-settings: "opsz" 144, "SOFT" 70, "wght" 500;
  color: var(--bone);
  margin: 0 0 6px;
}
.mockup-placeholder p {
  font-size: 15px;
  color: var(--bone-faint);
  margin: 0;
  max-width: 640px;
}

/* ============================================================
   Mockup 01 — DECK (desktop) internal SVG text classes
   Prefix m01- so future mockups can scope their own type ramp
   ============================================================ */

.m01-url {
  font-family: var(--mono);
  font-size: 12px;
  fill: rgba(244,237,224,0.42);
  letter-spacing: 0.01em;
}
.m01-brand {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 600;
  font-size: 18px;
  fill: var(--bone);
  letter-spacing: -0.01em;
}
.m01-brand-dim {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 14px;
  fill: var(--bone-faint);
}
.m01-tenant {
  font-family: var(--serif);
  font-size: 14px;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500;
  fill: var(--bone);
}
.m01-tenant-sub {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--bone-faint);
  letter-spacing: 0.02em;
}
.m01-tenant-glyph {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 700;
  font-size: 14px;
  fill: #ff8c42;
}

.m01-nav-item {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 450;
  fill: var(--bone-dim);
  letter-spacing: 0.005em;
}
.m01-nav-active { fill: var(--bone); font-weight: 600; }
.m01-nav-count  {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--bone-faint);
}
.m01-nav-section {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: var(--bone-faint);
  text-transform: uppercase;
}
.m01-foot {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--bone-faint);
  letter-spacing: 0.02em;
}

.m01-crumb {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--bone-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.m01-page-title {
  font-family: var(--serif);
  font-size: 42px;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500;
  letter-spacing: -0.02em;
  fill: var(--bone);
}
.m01-page-sub {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 15px;
  fill: var(--bone-dim);
}

.m01-kpi-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  fill: var(--bone-faint);
  text-transform: uppercase;
}
.m01-kpi-num {
  font-family: var(--serif);
  font-size: 36px;
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 500;
  letter-spacing: -0.02em;
  fill: var(--bone);
}
.m01-kpi-unit {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 20px;
  fill: var(--bone-faint);
}
.m01-kpi-curr {
  font-family: var(--serif);
  font-size: 24px;
  fill: var(--bone-faint);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
}
.m01-kpi-delta-up   { font-family: var(--mono); font-size: 11px; fill: #3ce8ff; }
.m01-kpi-delta-down { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); }
.m01-kpi-delta-sub  { font-family: var(--mono); font-size: 11px; fill: var(--bone-faint); }

.m01-panel-title {
  font-family: var(--serif);
  font-size: 16px;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500;
  letter-spacing: -0.01em;
  fill: var(--bone);
}

.m01-chip {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--bone-dim);
  letter-spacing: 0.04em;
}
.m01-chip-active  { fill: #ff8c42; }
.m01-chip-primary { fill: #ffd9b8; letter-spacing: 0.06em; }

.m01-axis {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--bone-faint);
  letter-spacing: 0.02em;
}
.m01-tip {
  font-family: var(--mono);
  font-size: 11px;
  fill: #ffd9b8;
  letter-spacing: 0.02em;
}
.m01-legend {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--bone-dim);
  letter-spacing: 0.04em;
}

.m01-th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  fill: var(--bone-faint);
  text-transform: uppercase;
}
.m01-row {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--bone);
  letter-spacing: 0.01em;
}
.m01-row-sub {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--bone-faint);
  letter-spacing: 0.02em;
}
.m01-row-warn { fill: #ff8c42; }
.m01-mono {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--bone);
}
.m01-mono-sm {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--bone-dim);
  letter-spacing: 0.02em;
}
.m01-state      { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.m01-state-ok   { fill: #3ce8ff; }
.m01-state-warn { fill: #ff8c42; }

.m01-settle-sub {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--bone-faint);
  letter-spacing: 0.02em;
}
.m01-amt {
  font-family: var(--mono);
  font-size: 12px;
  fill: #3ce8ff;
  letter-spacing: 0.02em;
}

/* Reduce motion: no hover bleed on the mockup frame */
@media (prefers-reduced-motion: reduce) {
  .mockup-frame { box-shadow: 0 20px 60px -20px rgba(0,0,0,0.8); }
}

/* Narrow screens — label above frame, placeholder stacks */
@media (max-width: 720px) {
  .mockup-label,
  .mockup-placeholder { grid-template-columns: 48px 1fr; gap: 16px; }
  .mockup-num { font-size: 32px; }
  .builtonartha-grid { gap: 80px; }
}

/* ============================================================
   Mobile phone-frame variant (used by m02 Relay, m04 Praan)
   iPhone 15-proportional: 390×844 @3x = 19.5:9
   ============================================================ */
.mockup-frame-mobile {
  aspect-ratio: 390 / 844;
  max-width: 400px;
  width: 100%;
  margin-inline: auto;
  border-radius: 44px;
  background: #050403;
  box-shadow:
    0 0 0 1.5px rgba(244,237,224,0.10) inset,
    0 1px 0 rgba(244,237,224,0.14) inset,
    0 40px 100px -30px rgba(0,0,0,0.82),
    0 70px 140px -60px rgba(122,45,14,0.22);
  padding: 0;
}
.mockup-frame-mobile svg {
  border-radius: 44px;
}

/* ============================================================
   Mockup 02 — RELAY (mobile) · agent-to-agent settlement
   ============================================================ */
.m02-status        { font-family: var(--mono); font-size: 13px; fill: var(--bone); letter-spacing: 0.02em; }
.m02-app-brand     { font-family: var(--serif); font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 600; font-size: 17px; fill: var(--bone); letter-spacing: -0.01em; }
.m02-app-brand-dim { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 12px; fill: var(--bone-faint); }
.m02-crumb         { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; fill: var(--bone-faint); text-transform: uppercase; }
.m02-kicker        { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; fill: #3ce8ff; text-transform: uppercase; }
.m02-kicker-dim    { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; fill: var(--bone-faint); text-transform: uppercase; }
.m02-headline      { font-family: var(--serif); font-size: 22px; font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500; letter-spacing: -0.02em; fill: var(--bone); }
.m02-headline-sub  { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 13px; fill: var(--bone-dim); }
.m02-price         { font-family: var(--serif); font-size: 54px; font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 500; letter-spacing: -0.03em; fill: var(--bone); }
.m02-price-curr    { font-family: var(--serif); font-size: 28px; font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400; fill: var(--bone-faint); }
.m02-price-unit    { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 17px; fill: var(--bone-faint); }
.m02-card-title    { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; fill: var(--bone-faint); text-transform: uppercase; }
.m02-agent-name    { font-family: var(--mono); font-size: 11px; fill: var(--bone); letter-spacing: 0.02em; }
.m02-agent-role    { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 11px; fill: var(--bone-faint); }
.m02-agent-bid     { font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; }
.m02-bid-ask       { fill: #3ce8ff; }
.m02-bid-propose   { fill: #ff8c42; }
.m02-panel-title   { font-family: var(--serif); font-size: 14px; font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500; fill: var(--bone); }
.m02-hash          { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); letter-spacing: 0.02em; }
.m02-sig-label     { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; fill: var(--bone-faint); text-transform: uppercase; }
.m02-sig-val       { font-family: var(--mono); font-size: 10px; fill: var(--bone-dim); letter-spacing: 0.02em; }
.m02-cleared       { font-family: var(--mono); font-size: 9px; fill: #3ce8ff; letter-spacing: 0.18em; text-transform: uppercase; }
.m02-row-title     { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 12px; fill: var(--bone-dim); }
.m02-row-meta      { font-family: var(--mono); font-size: 10px; fill: var(--bone-faint); letter-spacing: 0.02em; }
.m02-row-amt       { font-family: var(--mono); font-size: 12px; fill: #3ce8ff; letter-spacing: 0.02em; }
.m02-foot          { font-family: var(--mono); font-size: 9px; fill: var(--bone-faint); letter-spacing: 0.14em; text-transform: uppercase; }

/* ============================================================
   Mockup 03 — VAULT (desktop) · autonomous treasury
   ============================================================ */
.m03-url            { font-family: var(--mono); font-size: 12px; fill: rgba(244,237,224,0.42); letter-spacing: 0.01em; }
.m03-brand          { font-family: var(--serif); font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 600; font-size: 18px; fill: var(--bone); letter-spacing: -0.01em; }
.m03-brand-dim      { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 14px; fill: var(--bone-faint); }
.m03-parent         { font-family: var(--serif); font-size: 14px; font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 600; fill: var(--bone); letter-spacing: -0.01em; }
.m03-parent-sub     { font-family: var(--mono); font-size: 10px; fill: var(--bone-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.m03-entity         { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 450; fill: var(--bone-dim); }
.m03-entity-active  { fill: var(--bone); font-weight: 600; }
.m03-entity-ccy     { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; fill: var(--bone-faint); text-transform: uppercase; }
.m03-entity-bal     { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); letter-spacing: 0.01em; }
.m03-entity-flag    { font-family: var(--mono); font-size: 10px; font-weight: 700; fill: #3ce8ff; letter-spacing: 0.1em; }
.m03-nav-section    { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; fill: var(--bone-faint); text-transform: uppercase; }
.m03-foot           { font-family: var(--mono); font-size: 10px; fill: var(--bone-faint); letter-spacing: 0.02em; }

.m03-crumb          { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.m03-page-title     { font-family: var(--serif); font-size: 42px; font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500; letter-spacing: -0.02em; fill: var(--bone); }
.m03-page-sub       { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 15px; fill: var(--bone-dim); }

.m03-kpi-label      { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; fill: var(--bone-faint); text-transform: uppercase; }
.m03-kpi-num        { font-family: var(--serif); font-size: 32px; font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 500; letter-spacing: -0.02em; fill: var(--bone); }
.m03-kpi-curr       { font-family: var(--serif); font-size: 22px; fill: var(--bone-faint); font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400; }
.m03-kpi-unit       { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 18px; fill: var(--bone-faint); }
.m03-kpi-delta-up   { font-family: var(--mono); font-size: 11px; fill: #3ce8ff; }
.m03-kpi-delta-down { font-family: var(--mono); font-size: 11px; fill: #ff8c42; }
.m03-kpi-delta-sub  { font-family: var(--mono); font-size: 11px; fill: var(--bone-faint); }

.m03-panel-title    { font-family: var(--serif); font-size: 16px; font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 500; letter-spacing: -0.01em; fill: var(--bone); }
.m03-rule-when      { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); letter-spacing: 0.02em; }
.m03-rule-then      { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 12px; fill: var(--bone); }
.m03-rule-meta      { font-family: var(--mono); font-size: 10px; fill: var(--bone-faint); letter-spacing: 0.02em; }
.m03-rule-fired     { font-family: var(--mono); font-size: 10px; fill: #3ce8ff; letter-spacing: 0.1em; text-transform: uppercase; }

.m03-fx-ccy         { font-family: var(--serif); font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 600; font-size: 17px; letter-spacing: 0.04em; fill: var(--bone); }
.m03-fx-rate        { font-family: var(--mono); font-size: 10px; fill: var(--bone-faint); letter-spacing: 0.02em; }
.m03-fx-flow        { font-family: var(--mono); font-size: 11px; fill: #3ce8ff; letter-spacing: 0.02em; }

.m03-feed-title     { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; fill: var(--bone-faint); text-transform: uppercase; }
.m03-feed-time      { font-family: var(--mono); font-size: 10px; fill: var(--bone-faint); letter-spacing: 0.02em; }
.m03-feed-msg       { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 12px; fill: var(--bone-dim); }

.m03-chip           { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); letter-spacing: 0.04em; }
.m03-chip-active    { fill: #3ce8ff; }
.m03-chip-primary   { fill: #ffd9b8; letter-spacing: 0.06em; }

/* ============================================================
   Mockup 04 — PRAAN (mobile) · creator royalties ledger
   Fraunces-forward, softer — artistic register
   ============================================================ */
.m04-status         { font-family: var(--mono); font-size: 13px; fill: var(--bone); letter-spacing: 0.02em; }
.m04-kicker         { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em; fill: var(--bone-faint); text-transform: uppercase; }
.m04-creator        { font-family: var(--serif); font-size: 14px; font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500; fill: var(--bone); letter-spacing: -0.005em; }
.m04-wordmark       { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400; font-size: 64px; letter-spacing: -0.04em; fill: var(--bone); }
.m04-wordmark-dot   { fill: #ff8c42; }
.m04-poem           { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 13px; fill: var(--bone-dim); }
.m04-card-title     { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; fill: var(--bone-faint); text-transform: uppercase; }
.m04-dust-num       { font-family: var(--serif); font-size: 58px; font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 500; letter-spacing: -0.03em; fill: var(--bone); }
.m04-dust-curr      { font-family: var(--serif); font-size: 28px; font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400; fill: var(--bone-faint); }
.m04-dust-unit      { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 17px; fill: var(--bone-faint); }
.m04-threshold      { font-family: var(--mono); font-size: 10px; fill: var(--bone-dim); letter-spacing: 0.04em; }
.m04-cadence        { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 12px; fill: var(--bone-dim); }
.m04-cadence-next   { font-family: var(--mono); font-size: 10px; fill: #3ce8ff; letter-spacing: 0.12em; text-transform: uppercase; }
.m04-track-title    { font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400; font-size: 15px; fill: var(--bone); letter-spacing: -0.005em; }
.m04-track-meta     { font-family: var(--mono); font-size: 10px; fill: var(--bone-faint); letter-spacing: 0.04em; }
.m04-track-amt      { font-family: var(--mono); font-size: 12px; fill: var(--bone); letter-spacing: 0.01em; }
.m04-track-amt-new  { fill: #ff8c42; }
.m04-track-plays    { font-family: var(--mono); font-size: 10px; fill: var(--bone-dim); letter-spacing: 0.02em; }
.m04-foot-label     { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; fill: var(--bone-faint); text-transform: uppercase; }
.m04-foot-hash      { font-family: var(--mono); font-size: 10px; fill: var(--bone-dim); letter-spacing: 0.02em; }