

:root {
  
  --px-ground: var(--bg, #0a0a09);
  --px-panel: #12110e;
  --px-panel-sheen: linear-gradient(180deg, rgba(255, 238, 196, 0.045) 0, rgba(255, 238, 196, 0) 180px);
  --px-panel-bg: var(--px-panel-sheen), var(--px-panel);
  --px-panel-line: rgba(230, 201, 124, 0.15);
  --px-panel-hi: inset 0 1px 0 rgba(255, 240, 205, 0.075);
  --px-panel-drop: 0 1px 0 rgba(0, 0, 0, 0.5), 0 30px 60px -38px rgba(0, 0, 0, 0.95);
  --px-panel-shadow: var(--px-panel-hi), var(--px-panel-drop);
  --px-well: #0c0b09;
  --px-well-line: rgba(255, 255, 255, 0.065);
  --px-well-in: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  --px-row-hover: rgba(255, 240, 205, 0.035);
  --px-rule: rgba(255, 255, 255, 0.075);
  --px-rule-gilt: rgba(230, 201, 124, 0.22);

  
  --px-ink: #f3eee2;
  --px-ink-2: #dcd5c5;
  --px-muted: #a7a08f;   
  --px-faint: #8a8273;   

  
  --px-gilt: #e6c97c;
  --px-gold: #c9a961;
  --px-gold-deep: #6e5730;
  --px-metal: linear-gradient(180deg, #f3dd9e 0%, #dcbc70 42%, #b48f47 100%);
  --px-metal-hover: linear-gradient(180deg, #f8e7b6 0%, #e6c77e 42%, #c19c52 100%);
  --px-metal-ink: #16120a;
  --px-metal-edge: inset 0 1px 0 rgba(255, 250, 230, 0.55), inset 0 -1px 0 rgba(80, 58, 20, 0.45), 0 10px 24px -14px rgba(230, 201, 124, 0.55);
  --px-gilt-wash: rgba(230, 201, 124, 0.09);
  --px-gilt-wash-2: rgba(230, 201, 124, 0.16);
  --px-gilt-line: rgba(230, 201, 124, 0.55);

  
  --px-side-a: #e6c97c;
  --px-side-a-rgb: 230, 201, 124;
  --px-side-a-ink: #16120a;
  --px-side-b: #b9c2ce;
  --px-side-b-rgb: 185, 194, 206;
  --px-side-b-ink: #0e1116;
  --px-up: #7fd1a0;
  --px-up-rgb: 127, 209, 160;
  --px-down: #e88a70;
  --px-down-rgb: 232, 138, 112;

  
  --px-ingot-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%), #0e0d0b;
  --px-ingot-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 1px 0 rgba(255, 244, 214, 0.08), 0 1px 0 rgba(0, 0, 0, 0.6);
  --px-ingot-best-bg: linear-gradient(180deg, rgba(243, 221, 158, 0.2), rgba(230, 201, 124, 0.08));
  --px-ingot-best-edge: inset 0 0 0 1px rgba(230, 201, 124, 0.62), inset 0 1px 0 rgba(255, 244, 214, 0.22), 0 0 0 3px rgba(230, 201, 124, 0.07);

  
  --px-display: "Sora", "Inter", "Segoe UI", system-ui, sans-serif;
  --px-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --px-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --px-t-hero: clamp(34px, 4.6vw, 54px);
  --px-t-title: clamp(22px, 2.2vw, 28px);
  --px-t-panel: 17px;
  --px-t-eyebrow: 11px;

  
  --px-r-panel: 18px;
  --px-r-well: 12px;
  --px-r-chip: 10px;
  --px-r-ctl: 10px;
  --px-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}


:root[data-theme="light"] {
  --px-ground: var(--bg, #f4f5f8);
  --px-panel: #ffffff;
  --px-panel-sheen: linear-gradient(180deg, rgba(201, 169, 97, 0.06) 0, rgba(201, 169, 97, 0) 160px);
  --px-panel-line: rgba(16, 19, 26, 0.1);
  --px-panel-hi: inset 0 1px 0 #ffffff;
  --px-panel-drop: 0 1px 2px rgba(16, 19, 26, 0.06), 0 22px 44px -32px rgba(16, 19, 26, 0.28);
  --px-well: #f5f3ee;
  --px-well-line: rgba(16, 19, 26, 0.08);
  --px-well-in: inset 0 1px 2px rgba(16, 19, 26, 0.06);
  --px-row-hover: rgba(167, 132, 58, 0.06);
  --px-rule: rgba(16, 19, 26, 0.08);
  --px-rule-gilt: rgba(167, 132, 58, 0.3);
  --px-ink: #12141a;
  --px-ink-2: #2b2f3a;
  --px-muted: #5a5f6d;
  --px-faint: #6e7380;
  --px-gilt: #8a6720;
  --px-gold: #9c7a2f;
  --px-gilt-wash: rgba(201, 169, 97, 0.12);
  --px-gilt-wash-2: rgba(201, 169, 97, 0.2);
  --px-gilt-line: rgba(156, 122, 47, 0.6);
  --px-side-a: #8a6720;
  --px-side-a-rgb: 138, 103, 32;
  --px-side-a-ink: #ffffff;
  --px-side-b: #4f5d71;
  --px-side-b-rgb: 79, 93, 113;
  --px-side-b-ink: #ffffff;
  --px-up: #1d8650;
  --px-up-rgb: 29, 134, 80;
  --px-down: #b24f2d;
  --px-down-rgb: 178, 79, 45;
  --px-ingot-bg: linear-gradient(180deg, #ffffff, #f6f4ef);
  --px-ingot-edge: inset 0 0 0 1px rgba(16, 19, 26, 0.14), 0 1px 0 rgba(16, 19, 26, 0.04);
  --px-ingot-best-bg: linear-gradient(180deg, #fbf3dc, #f3e6c1);
  --px-ingot-best-edge: inset 0 0 0 1px rgba(156, 122, 47, 0.65), 0 0 0 3px rgba(201, 169, 97, 0.12);
}



:where(.mk, .dk, .page-clubhouse, .fp-page, .ft-page) { font-variant-numeric: tabular-nums; }
:where(.mk, .dk, .page-clubhouse) ::selection { background: rgba(230, 201, 124, 0.32); color: inherit; }


@keyframes px-tick-up { 0% { background-color: rgba(var(--px-up-rgb), 0.28); } 100% { background-color: transparent; } }
@keyframes px-tick-down { 0% { background-color: rgba(var(--px-down-rgb), 0.28); } 100% { background-color: transparent; } }
.px-tick-up { animation: px-tick-up 900ms var(--px-ease) 1; }
.px-tick-down { animation: px-tick-down 900ms var(--px-ease) 1; }

@media (prefers-reduced-motion: reduce) {
  .px-tick-up, .px-tick-down { animation: none; }
}
