@import url("../tokens/fonts.css");

/* ==========================================================================
   Flex — kinetic typography. Type IS the interface.
   Bone + ink + one ultramarine. Variable-font axes are the interaction
   material: weight, width, slant and grade move; boxes mostly stay put.

   Axis plumbing: four registered custom properties (--fx-wght, --fx-wdth,
   --fx-slnt, --fx-grad) feed font-variation-settings on any .fx-v element,
   so each axis transitions on its own and components can mix them.
   They do NOT inherit: set them on the .fx-v element itself.

   Motion rules: things that travel use transform/opacity; type axes move
   only on one element's hover/press/state, or in a one-shot sweep.
   Entrance animations fill BACKWARDS. Two idle loops per screen, max.
   ========================================================================== */

@property --fx-wght { syntax: "<number>"; inherits: false; initial-value: 400; }
@property --fx-wdth { syntax: "<number>"; inherits: false; initial-value: 100; }
@property --fx-slnt { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fx-grad { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --dur-press: 90ms;
  --dur-swell: 320ms;
  --dur-settle: 460ms;
  --dur-roll: 900ms;
  --dur-breathe: 900ms;
  --ease-swell: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-snap: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-breathe: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-roll: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --fx-axes: --fx-wght var(--dur-swell) var(--ease-swell), --fx-wdth var(--dur-swell) var(--ease-swell), --fx-slnt var(--dur-swell) var(--ease-swell), --fx-grad var(--dur-swell) var(--ease-swell);
  color-scheme: light;
}
[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }

.fx-v { font-variation-settings: "wght" var(--fx-wght), "wdth" var(--fx-wdth), "slnt" var(--fx-slnt), "GRAD" var(--fx-grad); }
.fx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type utilities ---------- */
.fx-display { font-family: var(--font-display); line-height: .9; margin: 0; letter-spacing: -.01em; --fx-wght: 820; --fx-wdth: 130; }
.fx-h1 { font-family: var(--font-display); font-size: clamp(40px, 6.4vw, 64px); line-height: .94; margin: 0; --fx-wght: 800; --fx-wdth: 115; letter-spacing: -.005em; text-wrap: balance; }
.fx-h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); line-height: 1; margin: 0; --fx-wght: 760; --fx-wdth: 108; text-wrap: balance; }
.fx-h3 { font-family: var(--font-display); font-size: 24px; line-height: 28px; margin: 0; --fx-wght: 720; --fx-wdth: 104; }
.fx-title { font-size: 19px; line-height: 24px; margin: 0; --fx-wght: 680; --fx-wdth: 100; }
.fx-body { font-size: 16px; line-height: 24px; color: var(--ink-soft); margin: 0; }
.fx-small { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin: 0; }
.fx-label { font-size: 11.5px; line-height: 16px; letter-spacing: .09em; text-transform: uppercase; --fx-wght: 680; --fx-wdth: 112; font-variation-settings: "wght" var(--fx-wght), "wdth" var(--fx-wdth); color: var(--ink-soft); margin: 0; }
.fx-link { color: var(--ultra-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- preview stage helpers ---------- */
.fx-stage { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.fx-stage--col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.fx-cap { width: 100%; font-size: 11.5px; line-height: 16px; letter-spacing: .09em; text-transform: uppercase; font-variation-settings: "wght" 650, "wdth" 112; color: var(--ink-soft); margin-top: var(--space-2); }
.fx-cap:first-child { margin-top: 0; }
.fx-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.fx-col { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- focus ---------- */
:where(.fx-btn, .fx-ibtn, .fx-toggle, .fx-tab, .fx-seg__opt, .fx-select__btn, .fx-menu__item, .fx-tag, .fx-card--interactive, .fx-mq__pause, .fx-nav__item, a):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

/* ---------- swell label: a ghost at peak axes reserves the width ---------- */
.fx-swell { display: inline-grid; justify-items: center; align-items: center; }
.fx-swell > * { grid-area: 1 / 1; white-space: nowrap; }
.fx-swell__ghost { visibility: hidden; font-variation-settings: "wght" var(--_gw, 780), "wdth" var(--_gd, 124); }
.fx-swell__text { transition: var(--fx-axes); }

/* ---------- icons: stroke weight is an axis too ---------- */
.fx-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--fx-stroke, 1.7); stroke-linecap: round; stroke-linejoin: round; transition: stroke-width var(--dur-swell) var(--ease-swell); }

/* ---------- entrance ---------- */
/* ONE entrance per element: a short fade with a small rise. Nothing inside an entering block
   breathes, stretches or rolls in at the same time (breathe() and rollIn skip .fx-enter descendants). */
@keyframes fx-rise { from { opacity: 0; transform: translateY(10px); } }
.fx-enter { animation: fx-rise 480ms var(--ease-swell) calc(var(--i, 0) * 60ms) backwards; }

/* ---------- breathe: one-shot weight sweep when a heading enters view ---------- */
/* The breath is weight only. It is drawn as a hairline stroke that thickens and relaxes, so glyph
   advance widths never change: no reflow, no sideways motion, no overshoot. */
@keyframes fx-breathe { 0%, 100% { -webkit-text-stroke-width: 0; } 45% { -webkit-text-stroke-width: var(--_bs, .03em); } }
.fx-breathing, .fx-ft.is-breathing .fx-ft__ch, .fx-ft.is-waving .fx-ft__ch { -webkit-text-stroke-color: currentColor; }
.fx-breathing { animation: fx-breathe var(--dur-breathe) var(--ease-breathe) var(--_bd, 0ms) backwards; }

/* ==========================================================================
   Button
   ========================================================================== */
.fx-btn {
  --_bg: transparent; --_fg: var(--ink); --_bd: var(--ink);
  --_rw: 100; --_hw: 124; --_pw: 66;
  --_rg: 560; --_hg: 780; --_pg: 860;
  --_gw: var(--_hg); --_gd: var(--_hw);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 20px; border: 1.5px solid var(--_bd); border-radius: var(--radius-pill);
  background: var(--_bg); color: var(--_fg);
  font: 15px/1 var(--font-ui); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-swell) var(--ease-swell), border-color var(--dur-swell) var(--ease-swell), color var(--dur-swell) var(--ease-swell);
}
.fx-btn .fx-swell__text { --fx-wght: var(--_rg); --fx-wdth: var(--_rw); }
.fx-btn--primary { --_bg: var(--ultra); --_fg: var(--on-ultra); --_bd: var(--ultra); }
.fx-btn--solid { --_bg: var(--invert); --_fg: var(--on-invert); --_bd: var(--invert); }
.fx-btn--outline { --_bg: transparent; }
.fx-btn--ghost { --_bd: transparent; padding: 0 14px; }
.fx-btn--danger { --_bg: transparent; --_fg: var(--alarm); --_bd: var(--alarm); }
.fx-btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; gap: 6px; }
.fx-btn--sm .fx-icon { width: 17px; height: 17px; }
.fx-btn--lg { height: 60px; padding: 0 30px; font-family: var(--font-display); font-size: 20px; --_rw: 108; --_hw: 150; --_pw: 60; --_rg: 640; --_hg: 860; --_pg: 900; }
.fx-btn--block { display: flex; width: 100%; }
@media (hover: hover) {
  .fx-btn:hover .fx-swell__text { --fx-wght: var(--_hg); --fx-wdth: var(--_hw); }
  .fx-btn:hover .fx-icon { stroke-width: 2.4; }
  .fx-btn--ghost:hover { --_bg: var(--bone-sunk); }
  .fx-btn--outline:hover { --_bg: var(--bone-raised); }
  .fx-btn--danger:hover { --_bg: var(--alarm); --_fg: var(--bone); }
}
.fx-btn:active .fx-swell__text { --fx-wdth: var(--_pw); --fx-wght: var(--_pg); transition-duration: var(--dur-press); transition-timing-function: var(--ease-snap); }
.fx-btn:active .fx-icon { stroke-width: 2.8; }
.fx-btn:disabled, .fx-btn[aria-disabled="true"] { cursor: not-allowed; --_bg: transparent; --_fg: var(--ink-soft); --_bd: var(--rule); }
.fx-btn:disabled .fx-swell__text, .fx-btn[aria-disabled="true"] .fx-swell__text { --fx-wght: 260 !important; --fx-wdth: var(--_rw) !important; }
.fx-btn--primary:disabled { --_bd: var(--rule); }
/* loading: the label breathes, a tiny idle loop that only runs while busy */
@keyframes fx-btn-busy { 0%, 100% { --fx-wght: 300; } 50% { --fx-wght: 760; } }
.fx-btn.is-loading { cursor: progress; }
.fx-btn.is-loading .fx-swell__text { animation: fx-btn-busy 1100ms var(--ease-breathe) infinite; }
.fx-btn.is-loading:disabled { --_bg: inherit; }
.fx-btn--primary.is-loading:disabled { --_bg: var(--ultra); --_fg: var(--on-ultra); --_bd: var(--ultra); }
.fx-btn--solid.is-loading:disabled { --_bg: var(--invert); --_fg: var(--on-invert); --_bd: var(--invert); }
.fx-btn--outline.is-loading:disabled { --_fg: var(--ink); --_bd: var(--ink); }

/* ==========================================================================
   IconButton
   ========================================================================== */
.fx-ibtn {
  --_s: 40px; position: relative; display: inline-grid; place-items: center; width: var(--_s); height: var(--_s); flex: none;
  border: 1.5px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; padding: 0;
  transition: background-color var(--dur-swell) var(--ease-swell), border-color var(--dur-swell) var(--ease-swell), color var(--dur-swell);
  -webkit-tap-highlight-color: transparent;
}
.fx-ibtn .fx-icon { transition: stroke-width var(--dur-swell) var(--ease-swell), transform var(--dur-swell) var(--ease-swell); }
.fx-ibtn--outline { border-color: var(--rule-strong); }
.fx-ibtn--solid { background: var(--invert); color: var(--on-invert); }
.fx-ibtn--primary { background: var(--ultra); color: var(--on-ultra); }
.fx-ibtn--sm { --_s: 32px; }
.fx-ibtn--sm .fx-icon { width: 17px; height: 17px; }
.fx-ibtn--lg { --_s: 52px; }
.fx-ibtn--lg .fx-icon { width: 24px; height: 24px; }
@media (hover: hover) {
  .fx-ibtn:hover .fx-icon { stroke-width: 2.6; }
  .fx-ibtn--ghost:hover, .fx-ibtn--outline:hover { background: var(--bone-sunk); }
  .fx-ibtn--outline:hover { border-color: var(--ink); }
}
.fx-ibtn:active .fx-icon { transform: scaleX(.78); stroke-width: 3; transition-duration: var(--dur-press); }
.fx-ibtn[aria-pressed="true"] { background: var(--invert); color: var(--on-invert); border-color: var(--invert); }
.fx-ibtn:disabled { color: var(--ink-soft); opacity: .45; cursor: not-allowed; }
.fx-ibtn__badge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ultra); color: var(--on-ultra); box-shadow: 0 0 0 2px var(--bone);
  font: 10.5px/18px var(--font-ui); font-variation-settings: "wght" 800, "wdth" 90; text-align: center;
}

/* ==========================================================================
   Toggle — the word stretches
   ========================================================================== */
.fx-toggle { position: relative; display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill); flex: none; -webkit-tap-highlight-color: transparent; }
.fx-toggle__track {
  position: relative; display: block; width: 78px; height: 34px; border-radius: var(--radius-pill);
  background: var(--bone-sunk); box-shadow: inset 0 0 0 1.5px var(--rule-strong); overflow: hidden;
  transition: background-color var(--dur-swell) var(--ease-snap), box-shadow var(--dur-swell);
}
.fx-toggle__knob {
  position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 13px; background: var(--ink);
  transform-origin: left center; transition: transform var(--dur-settle) var(--ease-swell), background-color var(--dur-swell);
}
.fx-toggle__word {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font: 13px/1 var(--font-ui); letter-spacing: .02em; pointer-events: none;
  transition: opacity 180ms var(--ease-swell), --fx-wght 460ms var(--ease-swell), --fx-wdth 460ms var(--ease-swell);
}
.fx-toggle__on { left: 4px; right: 34px; color: var(--on-ultra); opacity: 0; --fx-wght: 100; --fx-wdth: 25; }
.fx-toggle__off { left: 32px; right: 4px; color: var(--ink-soft); opacity: 1; --fx-wght: 520; --fx-wdth: 92; }
.fx-toggle[aria-checked="true"] .fx-toggle__track { background: var(--ultra); box-shadow: inset 0 0 0 1.5px var(--ultra); }
.fx-toggle[aria-checked="true"] .fx-toggle__knob { background: var(--on-ultra); transform: translateX(44px); transform-origin: right center; }
.fx-toggle[aria-checked="true"] .fx-toggle__on { opacity: 1; --fx-wght: 920; --fx-wdth: 151; }
.fx-toggle[aria-checked="true"] .fx-toggle__off { opacity: 0; --fx-wght: 100; --fx-wdth: 25; }
.fx-toggle:active .fx-toggle__knob { transform: scaleX(1.38); transition-duration: 160ms; }
.fx-toggle[aria-checked="true"]:active .fx-toggle__knob { transform: translateX(44px) scaleX(1.38); }
.fx-toggle:disabled { cursor: not-allowed; opacity: .45; }
.fx-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.fx-toggle-row__text { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.fx-toggle-row__title { font-size: 15px; line-height: 20px; font-variation-settings: "wght" 560; color: var(--ink); }
.fx-toggle-row__desc { font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }

/* ==========================================================================
   Checkbox + Radio — the label gains weight when chosen
   ========================================================================== */
.fx-check, .fx-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fx-check__input, .fx-radio__input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.fx-check__box, .fx-radio__ring {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center;
  border: 1.5px solid var(--rule-strong); background: var(--bone-raised);
  transition: background-color var(--dur-swell) var(--ease-snap), border-color var(--dur-swell) var(--ease-snap);
}
.fx-check__box { border-radius: var(--radius-s); }
.fx-radio__ring { border-radius: 50%; }
.fx-check__box svg { width: 16px; height: 16px; fill: none; stroke: var(--on-invert); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: scale(.3) rotate(-12deg); opacity: 0; transition: transform var(--dur-swell) var(--ease-swell), opacity 120ms; }
.fx-check__box .fx-check__dash { display: none; }
.fx-radio__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--on-invert); transform: scale(0); transition: transform var(--dur-swell) var(--ease-swell); }
.fx-check__text, .fx-radio__text { display: flex; flex-direction: column; font-size: 15px; line-height: 24px; color: var(--ink); }
.fx-check__label, .fx-radio__label { --fx-wght: 420; --fx-wdth: 100; transition: var(--fx-axes); }
.fx-check__desc, .fx-radio__desc { font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }
@media (hover: hover) {
  .fx-check:hover .fx-check__box, .fx-radio:hover .fx-radio__ring { border-color: var(--ink); }
  .fx-check:hover .fx-check__label, .fx-radio:hover .fx-radio__label { --fx-wght: 520; }
}
.fx-check__input:checked + .fx-check__box, .fx-check__input:indeterminate + .fx-check__box,
.fx-radio__input:checked + .fx-radio__ring { background: var(--invert); border-color: var(--invert); }
.fx-check__input:checked + .fx-check__box svg { transform: none; opacity: 1; }
.fx-check__input:indeterminate + .fx-check__box .fx-check__tick { display: none; }
.fx-check__input:indeterminate + .fx-check__box .fx-check__dash { display: block; transform: none; opacity: 1; }
.fx-radio__input:checked + .fx-radio__ring .fx-radio__dot { transform: scale(1); }
.fx-check__input:checked ~ .fx-check__text .fx-check__label,
.fx-radio__input:checked ~ .fx-radio__text .fx-radio__label { --fx-wght: 760; --fx-wdth: 106; }
.fx-check:active .fx-check__box, .fx-radio:active .fx-radio__ring { transform: scaleX(.82); transition: transform var(--dur-press); }
.fx-check__input:focus-visible + .fx-check__box, .fx-radio__input:focus-visible + .fx-radio__ring { outline: 2px solid var(--focus); outline-offset: 3px; }
.fx-check__input:disabled ~ *, .fx-radio__input:disabled ~ * { opacity: .45; }
.fx-check:has(:disabled), .fx-radio:has(:disabled) { cursor: not-allowed; }
.fx-radios { display: flex; flex-direction: column; gap: var(--space-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.fx-radios--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }
.fx-radios > legend { padding: 0; margin-bottom: var(--space-3); }

/* ==========================================================================
   TextField — the label leans in when you type
   ========================================================================== */
.fx-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fx-field__label { align-self: flex-start; font-size: 11.5px; line-height: 16px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); --fx-wght: 640; --fx-wdth: 108; transition: var(--fx-axes), color var(--dur-swell); }
.fx-field__box {
  position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 46px; padding: 0 14px;
  background: var(--bone-raised); border: 1.5px solid var(--rule-strong); border-radius: var(--radius-s);
  transition: border-color var(--dur-swell) var(--ease-swell);
}
.fx-field__box > .fx-icon { color: var(--ink-soft); }
.fx-field__line { position: absolute; left: -1.5px; right: -1.5px; bottom: -1.5px; height: 3px; background: var(--ultra); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-settle) var(--ease-swell); border-radius: 0 0 var(--radius-s) var(--radius-s); }
.fx-field__input {
  flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink);
  font: 16px/24px var(--font-ui); font-variation-settings: "wght" 440;
}
textarea.fx-field__input { height: auto; min-height: 96px; padding: 11px 0; resize: vertical; }
.fx-field__input::placeholder { color: var(--ink-soft); opacity: .85; }
.fx-field__suffix { color: var(--ink-soft); font-size: 14px; }
.fx-field__foot { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.fx-field__msg { display: flex; gap: 6px; align-items: flex-start; }
.fx-field__msg .fx-icon { width: 16px; height: 16px; margin-top: 1px; }
.fx-field__count { margin-left: auto; font-variant-numeric: tabular-nums; --fx-wght: 300; transition: --fx-wght var(--dur-swell) var(--ease-swell); }
@media (hover: hover) { .fx-field__box:hover { border-color: var(--ink); } }
.fx-field:focus-within .fx-field__box { border-color: var(--ink); }
.fx-field:focus-within .fx-field__line { transform: scaleX(1); }
.fx-field:focus-within .fx-field__label { color: var(--ultra-ink); --fx-wght: 860; --fx-wdth: 124; }
.fx-field.is-error .fx-field__box { border-color: var(--alarm); }
.fx-field.is-error .fx-field__line { background: var(--alarm); transform: scaleX(1); }
.fx-field.is-error .fx-field__label { color: var(--alarm); --fx-wght: 860; --fx-slnt: -10; --fx-wdth: 112; }
.fx-field.is-error .fx-field__msg { color: var(--alarm); font-variation-settings: "wght" 560; }
.fx-field.is-disabled { opacity: .5; }

/* ==========================================================================
   Select + Menu
   ========================================================================== */
.fx-select { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fx-select__btn {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 46px; padding: 0 12px 0 14px; text-align: left;
  background: var(--bone-raised); color: var(--ink); border: 1.5px solid var(--rule-strong); border-radius: var(--radius-s);
  font: 16px/1 var(--font-ui); cursor: pointer; transition: border-color var(--dur-swell);
}
.fx-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; --fx-wght: 520; --fx-wdth: 100; transition: var(--fx-axes); }
.fx-select__value.is-placeholder { color: var(--ink-soft); --fx-wght: 380; }
.fx-select__btn .fx-icon { transition: transform var(--dur-settle) var(--ease-swell), stroke-width var(--dur-swell); }
@media (hover: hover) { .fx-select__btn:hover { border-color: var(--ink); } .fx-select__btn:hover .fx-select__value { --fx-wdth: 108; } }
.fx-select__btn[aria-expanded="true"] { border-color: var(--ink); }
.fx-select__btn[aria-expanded="true"] .fx-icon { transform: rotate(180deg); }
.fx-select:focus-within .fx-field__label { color: var(--ultra-ink); --fx-wght: 860; --fx-wdth: 124; }

.fx-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 300px; overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--bone-raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-s); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(-6px) scaleY(.94); transform-origin: top center; pointer-events: none; visibility: hidden;
  transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit), visibility 0s linear 160ms;
}
.fx-menu--end { left: auto; right: 0; }
.fx-menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 200ms var(--ease-swell), transform var(--dur-settle) var(--ease-swell), visibility 0s; }
.fx-menu:focus { outline: none; }
.fx-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 3px;
  background: transparent; color: var(--ink); font: 15px/1 var(--font-ui); text-align: left; cursor: pointer; white-space: nowrap;
}
.fx-menu__item .fx-menu__text { flex: 1; --fx-wght: 420; --fx-wdth: 100; transition: var(--fx-axes); }
.fx-menu__item .fx-icon { width: 18px; height: 18px; color: var(--ink-soft); }
.fx-menu__item .fx-menu__tick { color: var(--ultra-ink); opacity: 0; }
.fx-menu__item.is-active { background: var(--bone-sunk); }
.fx-menu__item.is-active .fx-menu__text { --fx-wght: 640; --fx-wdth: 112; }
.fx-menu__item[aria-selected="true"] .fx-menu__text { --fx-wght: 820; }
.fx-menu__item[aria-selected="true"] .fx-menu__tick { opacity: 1; }
.fx-menu__item--danger, .fx-menu__item--danger .fx-icon { color: var(--alarm); }
.fx-menu__sep { height: 1px; margin: 6px 4px; background: var(--rule); }
.fx-menu-wrap { position: relative; display: inline-flex; }

/* ==========================================================================
   Tabs — the chosen label grows heavy, the rest thin out
   ========================================================================== */
.fx-tabs { position: relative; min-width: 0; }
.fx-tabs__list { position: relative; display: flex; gap: var(--space-5); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.fx-tabs__list::-webkit-scrollbar { display: none; }
.fx-tab {
  --_gw: 860; --_gd: 116;
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; height: 46px; padding: 0 2px; margin: 0;
  border: 0; background: none; color: var(--ink-soft); cursor: pointer; font: 16px/1 var(--font-ui);
  transition: color var(--dur-swell);
}
.fx-tab .fx-swell__text { --fx-wght: 260; --fx-wdth: 86; transition: --fx-wght var(--dur-settle) var(--ease-swell), --fx-wdth var(--dur-settle) var(--ease-swell); }
@media (hover: hover) { .fx-tab:hover .fx-swell__text { --fx-wght: 460; --fx-wdth: 96; } .fx-tab:hover { color: var(--ink); } }
.fx-tab[aria-selected="true"] { color: var(--ink); }
.fx-tab[aria-selected="true"] .fx-swell__text { --fx-wght: 860; --fx-wdth: 116; }
.fx-tab__count { font-size: 12px; line-height: 18px; min-width: 22px; padding: 0 6px; border-radius: 9px; background: var(--bone-sunk); color: var(--ink-soft); font-variation-settings: "wght" 650, "wdth" 90; text-align: center; transition: background-color var(--dur-swell), color var(--dur-swell); }
.fx-tab[aria-selected="true"] .fx-tab__count { background: var(--invert); color: var(--on-invert); }
.fx-tab:focus-visible { outline-offset: -2px; border-radius: 4px; }
.fx-tabs__bar { position: absolute; left: 0; bottom: -1px; width: 100px; height: 3px; background: var(--ink); transform-origin: left; transform: translateX(var(--_x, 0)) scaleX(var(--_s, 0)); transition: transform var(--dur-settle) var(--ease-swell); pointer-events: none; }
.fx-tabs--lg .fx-tab { height: 58px; font-family: var(--font-display); font-size: 22px; }
.fx-tabs__panel { padding-top: var(--space-5); }
.fx-tabs__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ==========================================================================
   SegmentedControl
   ========================================================================== */
.fx-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--radius-pill); background: var(--bone-sunk); max-width: 100%; }
.fx-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--_n, 2)); border-radius: var(--radius-pill); background: var(--bone-raised); box-shadow: var(--shadow-rest), 0 0 0 1px var(--rule); transform: translateX(calc(var(--_i, 0) * 100%)); transition: transform var(--dur-settle) var(--ease-swell); }
[data-theme="dark"] .fx-seg__thumb { background: #3a3832; box-shadow: none; }
.fx-seg__opt {
  --_gw: 820; --_gd: 114;
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-soft); font: 14.5px/1 var(--font-ui); cursor: pointer; white-space: nowrap;
  transition: color var(--dur-swell);
}
.fx-seg__opt .fx-icon { width: 17px; height: 17px; }
.fx-seg__opt .fx-swell__text { --fx-wght: 380; --fx-wdth: 92; transition: --fx-wght var(--dur-settle) var(--ease-swell), --fx-wdth var(--dur-settle) var(--ease-swell); }
@media (hover: hover) { .fx-seg__opt:hover { color: var(--ink); } }
.fx-seg__opt[aria-checked="true"] { color: var(--ink); }
.fx-seg__opt[aria-checked="true"] .fx-swell__text { --fx-wght: 820; --fx-wdth: 114; }
.fx-seg__opt[aria-checked="true"] .fx-icon { stroke-width: 2.4; }
.fx-seg__opt:active .fx-swell__text { --fx-wdth: 70; transition-duration: var(--dur-press); }
.fx-seg--sm .fx-seg__opt { height: 30px; padding: 0 12px; font-size: 13px; }

/* ==========================================================================
   Slider — the thumb label grows with the value
   ========================================================================== */
.fx-slider { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.fx-slider__rail { position: relative; height: 64px; overflow-x: clip; overflow-y: visible; touch-action: none; }
.fx-slider__track { position: absolute; left: 0; right: 0; bottom: 14px; height: 6px; border-radius: 3px; background: var(--bone-sunk); overflow: hidden; }
.fx-slider__fill { position: absolute; inset: 0; background: var(--ultra); transform-origin: left; transform: scaleX(var(--_p, 0)); }
.fx-slider__input { position: absolute; inset: 22px 0 0; width: 100%; height: 42px; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.fx-slider__lane { position: absolute; left: 13px; right: 13px; bottom: 17px; height: 0; pointer-events: none; }
.fx-slider__mover { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform: translateX(calc(var(--_p, 0) * 100%)); }
.fx-slider__thumb { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 13px; background: var(--ink); box-shadow: 0 0 0 3px var(--bone); transition: transform var(--dur-swell) var(--ease-swell); }
.fx-slider__bubble {
  position: absolute; left: 0; bottom: 24px; transform: translateX(-50%); padding: 3px 9px 4px; border-radius: 4px;
  background: var(--invert); color: var(--on-invert); font: 15px/20px var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: --fx-wght 200ms var(--ease-swell), --fx-wdth 200ms var(--ease-swell), transform var(--dur-swell) var(--ease-swell);
}
.fx-slider__bubble::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
.fx-slider.is-active .fx-slider__thumb { transform: scale(1.18); }
.fx-slider.is-active .fx-slider__bubble { transform: translateX(-50%) translateY(-3px) scale(1.12); }
.fx-slider__input:focus-visible ~ .fx-slider__lane .fx-slider__thumb { outline: 2px solid var(--focus); outline-offset: 4px; }
.fx-slider__ends { display: flex; justify-content: space-between; font-size: 12.5px; line-height: 16px; color: var(--ink-soft); margin-top: -8px; }
.fx-slider__ends span:first-child { font-variation-settings: "wght" 200, "wdth" 70; }
.fx-slider__ends span:last-child { font-variation-settings: "wght" 900, "wdth" 140; }

/* ==========================================================================
   Card
   ========================================================================== */
.fx-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--bone-raised); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-s); min-width: 0; }
.fx-card--flat { background: transparent; }
.fx-card--ink { background: var(--invert); color: var(--on-invert); border-color: var(--invert); }
.fx-card--ink .fx-label, .fx-card--ink .fx-card__body { color: var(--on-invert-soft); }
.fx-card--ultra { background: var(--ultra); color: var(--on-ultra); border-color: var(--ultra); }
.fx-card--ultra .fx-label, .fx-card--ultra .fx-card__body { color: var(--on-ultra); }
.fx-card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2); border-radius: var(--radius-s) var(--radius-s) 0 0; overflow: hidden; }
.fx-card__title { font-family: var(--font-display); font-size: 24px; line-height: 27px; margin: 0; --fx-wght: 720; --fx-wdth: 102; -webkit-text-stroke: 0 currentColor; transition: -webkit-text-stroke-width var(--dur-swell) var(--ease-swell); text-wrap: balance; }
.fx-card__body { font-size: 15px; line-height: 22px; color: var(--ink-soft); margin: 0; }
.fx-card__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }
.fx-card--interactive { cursor: pointer; text-decoration: none; transition: transform var(--dur-settle) var(--ease-swell), box-shadow var(--dur-settle) var(--ease-swell), border-color var(--dur-swell); }
.fx-card--interactive::after { content: ""; position: absolute; inset: 0 -6px -8px 0; z-index: -1; }
@media (hover: hover) {
  .fx-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--rule-strong); }
  .fx-card--interactive:hover .fx-card__title { -webkit-text-stroke-width: .022em; }
}
.fx-card--interactive:active { transform: translateY(-1px) scaleX(.995); transition-duration: var(--dur-press); }

/* ==========================================================================
   Badge + Tag
   ========================================================================== */
.fx-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font: 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "wght" 700, "wdth" 112; white-space: nowrap; background: var(--bone-sunk); color: var(--ink); flex: none; }
.fx-badge__dot { width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.fx-badge--ink { background: var(--invert); color: var(--on-invert); }
.fx-badge--ultra { background: var(--ultra-wash); color: var(--ultra-ink); }
.fx-badge--accent { background: var(--ultra); color: var(--on-ultra); }
.fx-badge--outline { background: transparent; box-shadow: inset 0 0 0 1.25px var(--rule-strong); color: var(--ink); }
.fx-badge--alarm { background: transparent; box-shadow: inset 0 0 0 1.25px var(--alarm); color: var(--alarm); font-variation-settings: "wght" 800, "wdth" 112, "slnt" -10; }
.fx-badge--lg { height: 28px; padding: 0 12px; font-size: 12px; }
.fx-tag {
  --_gw: 720; --_gd: 112;
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1.25px solid var(--rule-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); font: 14px/1 var(--font-ui); cursor: pointer; white-space: nowrap; flex: none;
  transition: background-color var(--dur-swell), border-color var(--dur-swell), color var(--dur-swell);
}
.fx-tag .fx-swell__text { --fx-wght: 420; --fx-wdth: 96; }
@media (hover: hover) { .fx-tag:hover { border-color: var(--ink); } .fx-tag:hover .fx-swell__text { --fx-wght: 560; --fx-wdth: 104; } }
.fx-tag[aria-pressed="true"] { background: var(--invert); border-color: var(--invert); color: var(--on-invert); }
.fx-tag[aria-pressed="true"] .fx-swell__text { --fx-wght: 720; --fx-wdth: 112; }
.fx-tag__x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; border-radius: 10px; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.fx-tag__x .fx-icon { width: 14px; height: 14px; }
@media (hover: hover) { .fx-tag__x:hover { background: var(--bone-sunk); } .fx-tag[aria-pressed="true"] .fx-tag__x:hover { background: transparent; } }
.fx-tag--static { cursor: default; }
.fx-tag.is-leaving { opacity: 0; transform: scaleX(.6); transition: opacity 180ms var(--ease-exit), transform 180ms var(--ease-exit); }

/* ==========================================================================
   Avatar
   ========================================================================== */
.fx-avatar {
  --_s: 40px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); border-radius: 50%;
  background: var(--bone-sunk); color: var(--ink); font-family: var(--font-display); font-size: calc(var(--_s) * .4); line-height: 1;
  --fx-wght: 760; --fx-wdth: var(--_aw, 110); user-select: none;
}
.fx-avatar__t { margin-top: .06em; }
.fx-avatar--ink { background: var(--invert); color: var(--on-invert); }
.fx-avatar--ultra { background: var(--ultra); color: var(--on-ultra); }
.fx-avatar--wash { background: var(--ultra-wash); color: var(--ultra-ink); }
.fx-avatar--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.fx-avatar__status { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; border-radius: 50%; background: var(--ultra); box-shadow: 0 0 0 2px var(--bone); }
.fx-avatar__status--away { background: var(--bone); box-shadow: inset 0 0 0 2px var(--ink-soft), 0 0 0 2px var(--bone); }
.fx-avatars { display: inline-flex; align-items: center; padding-left: 6px; }
.fx-avatars > .fx-avatar { margin-left: -6px; box-shadow: 0 0 0 2.5px var(--bone); transition: transform var(--dur-swell) var(--ease-swell); }
@media (hover: hover) { .fx-avatars:hover > .fx-avatar { transform: translateX(calc(var(--_k, 0) * 6px)); } }
.fx-avatars__more { font-family: var(--font-ui); font-size: 12px; --fx-wght: 760; --fx-wdth: 80; }

/* ==========================================================================
   Tooltip
   ========================================================================== */
.fx-tip {
  position: fixed; z-index: 90; left: 0; top: 0; max-width: 260px; padding: 6px 10px 7px; border-radius: var(--radius-s);
  background: var(--invert); color: var(--on-invert); box-shadow: var(--shadow-pop); pointer-events: none;
  font: 13px/18px var(--font-ui); opacity: 0; transform: translate(calc(var(--_tx, 0px) - 50%), calc(var(--_ty, 0px) + 4px)); white-space: nowrap;
  transition: opacity 140ms var(--ease-exit), transform 140ms var(--ease-exit);
  --fx-wght: 560; --fx-wdth: 100;
}
.fx-tip.is-shown { opacity: 1; transform: translate(calc(var(--_tx, 0px) - 50%), var(--_ty, 0px)); transition: opacity 160ms var(--ease-swell), transform var(--dur-swell) var(--ease-swell); }
.fx-tip kbd { margin-left: 6px; font: inherit; color: var(--on-invert-soft); }
.fx-tip--static { position: relative; display: inline-block; opacity: 1; transform: none; --fx-wght: 560; --fx-wdth: 100; }
.fx-tip--static::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); }

/* ==========================================================================
   Toast
   ========================================================================== */
.fx-toasts { position: fixed; z-index: 95; right: var(--space-5); bottom: var(--space-5); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); pointer-events: none; width: min(380px, calc(100vw - 32px)); }
.fx-toast {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; width: 100%;
  padding: 14px 10px 16px 16px; border-radius: var(--radius-s); background: var(--invert); color: var(--on-invert); box-shadow: var(--shadow-pop);
  pointer-events: auto; overflow: hidden;
}
.fx-toast > .fx-icon { margin-top: 2px; }
.fx-toast__title { font: 16px/22px var(--font-ui); --fx-wght: 760; --fx-wdth: 104; margin: 0; }
.fx-toast__msg { grid-column: 2; font-size: 14px; line-height: 20px; color: var(--on-invert-soft); margin: 0; }
.fx-toast__actions { grid-column: 2; display: flex; gap: var(--space-2); margin-top: 6px; }
.fx-toast .fx-ibtn { color: var(--on-invert); margin: -6px 0 0; grid-row: 1; grid-column: 3; }
@media (hover: hover) { .fx-toast .fx-ibtn:hover { background: rgba(127, 127, 127, .18); } }
.fx-toast .fx-btn { --_fg: var(--on-invert); --_bd: var(--on-invert-soft); }
.fx-toast--ultra { background: var(--ultra); color: var(--on-ultra); }
.fx-toast--ultra .fx-toast__msg { color: var(--on-ultra); }
.fx-toast--ultra .fx-ibtn { color: var(--on-ultra); }
.fx-toast--alarm { box-shadow: var(--shadow-pop), inset 4px 0 0 var(--alarm); }
.fx-toast--alarm .fx-toast__title { --fx-slnt: -10; --fx-wght: 860; }
.fx-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .5; transform-origin: left; transform: scaleX(var(--_t, 1)); }
@keyframes fx-toast-in { from { opacity: 0; transform: translateY(14px); } }
.fx-toast.is-entering { animation: fx-toast-in var(--dur-settle) var(--ease-swell) backwards; }
.fx-toast.is-leaving { opacity: 0; transform: translateX(30px); transition: opacity 200ms var(--ease-exit), transform 200ms var(--ease-exit); }
@media (max-width: 560px) { .fx-toasts { right: 16px; left: 16px; width: auto; align-items: stretch; bottom: 16px; } }

/* ==========================================================================
   Modal
   ========================================================================== */
.fx-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--space-4); }
.fx-modal__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 260ms var(--ease-swell); }
.fx-modal__panel {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4); width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: var(--space-6) var(--space-6) var(--space-5); background: var(--bone-raised); color: var(--ink); border-radius: var(--radius-s); box-shadow: var(--shadow-modal);
  opacity: 0; transform: translateY(16px); transition: opacity 220ms var(--ease-swell), transform var(--dur-settle) var(--ease-swell);
}
.fx-modal__panel:focus { outline: none; }
.fx-modal.is-open .fx-modal__scrim { opacity: 1; }
.fx-modal.is-open .fx-modal__panel { opacity: 1; transform: none; }
.fx-modal.is-closing .fx-modal__scrim { opacity: 0; transition-timing-function: var(--ease-exit); transition-duration: 200ms; }
.fx-modal.is-closing .fx-modal__panel { opacity: 0; transform: translateY(8px); transition: opacity 180ms var(--ease-exit), transform 200ms var(--ease-exit); }
.fx-modal__head { display: flex; flex-direction: column; gap: 6px; padding-right: 36px; }
.fx-modal__title { font-family: var(--font-display); font-size: 34px; line-height: 36px; margin: 0; --fx-wght: 780; --fx-wdth: 106; text-wrap: balance; }
.fx-modal__body { font-size: 15.5px; line-height: 23px; color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--space-4); }
.fx-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.fx-modal__close { position: absolute; top: 14px; right: 14px; }
.fx-modal-static { position: relative; inset: auto; display: block; padding: 0; }
.fx-modal-static .fx-modal__panel { opacity: 1; transform: none; }
@media (max-width: 560px) { .fx-modal__panel { padding: var(--space-5) var(--space-4) var(--space-4); } .fx-modal__title { font-size: 28px; line-height: 30px; } }

/* ==========================================================================
   Progress
   ========================================================================== */
.fx-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fx-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.fx-progress__label { font-size: 14.5px; line-height: 20px; font-variation-settings: "wght" 540; }
.fx-progress__value { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.fx-progress__track { position: relative; height: 8px; border-radius: 4px; background: var(--bone-sunk); overflow: hidden; }
.fx-progress__fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--_p, 0)); transition: transform var(--dur-roll) var(--ease-roll); }
.fx-progress--ultra .fx-progress__fill { background: var(--ultra); }
.fx-progress--sm .fx-progress__track { height: 4px; }
@keyframes fx-indet { from { transform: translateX(-100%) scaleX(.4); } to { transform: translateX(250%) scaleX(.4); } }
.fx-progress.is-indeterminate .fx-progress__fill { width: 40%; transform-origin: center; animation: fx-indet 1300ms var(--ease-breathe) infinite; }
.fx-progress__foot { font-size: 13px; line-height: 18px; color: var(--ink-soft); }

/* ==========================================================================
   Numeral — rolling reels whose digits condense while they spin
   ========================================================================== */
.fx-num { display: inline-flex; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; line-height: 1.1; --fx-wght: var(--_nw, 760); --fx-wdth: var(--_nd, 100); transition: --fx-wdth var(--dur-settle) var(--ease-swell), --fx-wght var(--dur-settle) var(--ease-swell); }
.fx-num--display { font-family: var(--font-display); }
.fx-num__d { display: inline-grid; justify-items: center; align-items: start; height: 1.1em; overflow: hidden; vertical-align: bottom; --fx-wght: var(--_nw, 760); --fx-wdth: var(--_nd, 100); transition: --fx-wdth var(--dur-settle) var(--ease-swell), --fx-wght var(--dur-settle) var(--ease-swell); }
.fx-num__d > * { grid-area: 1 / 1; }
.fx-num__g { visibility: hidden; height: 1.1em; font-variation-settings: "wght" var(--_nw, 760), "wdth" var(--_nd, 100); }
.fx-num__d.is-rolling { --fx-wdth: 50; --fx-wght: 900; transition-duration: 200ms; transition-timing-function: var(--ease-snap); }
.fx-num__reel { display: flex; flex-direction: column; transform: translateY(calc(var(--_n, 0) * -1.1em)); transition: transform var(--dur-roll) var(--ease-roll) var(--_dl, 0ms); }
.fx-num__reel > span { display: block; height: 1.1em; text-align: center; }
.fx-num__s { display: inline-block; }

/* ==========================================================================
   WeightMeter — a value shown as type weight
   ========================================================================== */
.fx-wm { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-wm__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.fx-wm__word { font-size: 14px; line-height: 20px; color: var(--ultra-ink); --fx-wght: var(--_w, 400); --fx-wdth: 108; transition: --fx-wght var(--dur-roll) var(--ease-roll); }
.fx-wm__fig { display: flex; align-items: baseline; gap: 10px; }
.fx-wm__bigwrap { display: inline-grid; }
.fx-wm__bigwrap > * { grid-area: 1 / 1; }
.fx-wm__ghost { visibility: hidden; font-variation-settings: "wght" 900, "wdth" 128; }
.fx-wm__big, .fx-wm__ghost { font-family: var(--font-display); font-size: 88px; line-height: .86; letter-spacing: -.01em; --fx-wght: var(--_w, 400); --fx-wdth: var(--_d, 100); transition: --fx-wght var(--dur-roll) var(--ease-roll), --fx-wdth var(--dur-roll) var(--ease-roll); font-variant-numeric: tabular-nums; }
.fx-wm__of { font-size: 14px; color: var(--ink-soft); }
.fx-wm__scale { display: grid; grid-template-columns: repeat(9, 1fr); align-items: end; border-top: 1px solid var(--rule); padding-top: 8px; }
.fx-wm__g { position: relative; font-family: var(--font-display); font-size: 26px; line-height: 1; text-align: center; color: var(--rule-strong); transition: color var(--dur-swell); padding-bottom: 8px; }
.fx-wm__g.is-on { color: var(--ink); }
.fx-wm__g::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; background: var(--ultra); transform: scaleX(0); transition: transform var(--dur-settle) var(--ease-swell); }
.fx-wm__g.is-here::after { transform: scaleX(1); }
.fx-wm__ticks { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.fx-wm--sm { flex-direction: row; align-items: center; gap: 8px; }
.fx-wm--sm .fx-wm__big, .fx-wm--sm .fx-wm__ghost { font-size: 22px; line-height: 1; }
.fx-wm--sm .fx-wm__bigwrap { min-width: 2.2ch; }
.fx-wm--sm .fx-wm__mini { display: inline-flex; gap: 1px; align-items: flex-end; height: 14px; }
.fx-wm__mini i { display: block; width: 3px; border-radius: 1px; background: var(--rule); transition: background-color var(--dur-swell); }
.fx-wm__mini i.is-on { background: var(--ink); }
.fx-wm__mini i.is-here { background: var(--ultra-ink); }

/* ==========================================================================
   FlexText — axis-animated text
   ========================================================================== */
.fx-ft { margin: 0; }
.fx-ft__line { display: block; }
.fx-ft__line--nowrap { white-space: nowrap; }
.fx-ft__w { display: inline-block; white-space: nowrap; }
.fx-ft__ch { display: inline-block; transition: --fx-wght 260ms var(--ease-swell), --fx-wdth 260ms var(--ease-swell), --fx-slnt 260ms var(--ease-swell); }
.fx-ft--proximity { cursor: default; touch-action: pan-y; }
@keyframes fx-wave { 0%, 100% { -webkit-text-stroke-width: 0; } 50% { -webkit-text-stroke-width: .05em; } }
.fx-ft.is-waving .fx-ft__ch { animation: fx-wave 560ms var(--ease-breathe) calc(var(--_ci, 0) * 28ms) backwards; }
.fx-ft.is-breathing .fx-ft__ch { animation: fx-breathe var(--dur-breathe) var(--ease-breathe) calc(var(--_ci, 0) * 14ms + var(--_bd, 0ms)) backwards; }

/* ==========================================================================
   Marquee — a kinetic headline strip, pausable
   ========================================================================== */
.fx-mq { position: relative; display: flex; align-items: center; overflow: hidden; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); color: var(--ink); min-width: 0; }
.fx-mq--ink { background: var(--invert); color: var(--on-invert); border-color: var(--invert); }
.fx-mq--ultra { background: var(--ultra); color: var(--on-ultra); border-color: var(--ultra); }
.fx-mq__viewport { flex: 1; min-width: 0; overflow: hidden; }
.fx-mq__track { display: flex; width: max-content; animation: fx-mq var(--_dur, 30s) linear infinite; will-change: transform; }
@keyframes fx-mq { to { transform: translateX(-50%); } }
.fx-mq__group { display: flex; align-items: center; flex: none; }
.fx-mq__item { flex: none; padding: 0 .38em; font-size: var(--_fs, 44px); line-height: 1.25; white-space: nowrap; }
.fx-mq__item--wide { font-family: var(--font-display); --fx-wght: 860; --fx-wdth: 150; }
.fx-mq__item--thin { font-family: var(--font-ui); --fx-wght: 120; --fx-wdth: 30; }
.fx-mq__item--slant { font-family: var(--font-ui); --fx-wght: 620; --fx-wdth: 151; --fx-slnt: -10; }
.fx-mq__item--outline { font-family: var(--font-display); --fx-wght: 900; --fx-wdth: 120; color: transparent; -webkit-text-stroke: 1.25px var(--ink); }
.fx-mq--ink .fx-mq__item--outline { -webkit-text-stroke-color: var(--on-invert); }
.fx-mq--ultra .fx-mq__item--outline { -webkit-text-stroke-color: var(--on-ultra); }
.fx-mq__sep { flex: none; width: calc(var(--_fs, 44px) * .42); height: calc(var(--_fs, 44px) * .42); color: var(--ultra-ink); }
.fx-mq--ink .fx-mq__sep { color: var(--on-invert); }
.fx-mq--ultra .fx-mq__sep { color: var(--on-ultra); }
.fx-mq__sep svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.fx-mq.is-paused .fx-mq__track, .fx-mq.is-offscreen .fx-mq__track { animation-play-state: paused; }
@media (hover: hover) { .fx-mq--hoverpause:hover .fx-mq__track { animation-play-state: paused; } }
.fx-mq__pause { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 10px; border-radius: 18px; border: 1.25px solid currentColor; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.fx-mq__pause .fx-icon { width: 16px; height: 16px; }

/* ==========================================================================
   Widgets
   ========================================================================== */
/* StatTile */
.fx-stat { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-5); background: var(--bone-raised); border: 1px solid var(--rule); border-radius: var(--radius-s); min-width: 0; overflow: hidden; }
.fx-stat__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.fx-stat__value { font-size: 52px; margin: 4px 0 2px; --_nw: 760; --_nd: 104; }
.fx-stat__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); }
.fx-stat__delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; min-width: 0; font-size: 13.5px; line-height: 18px; color: var(--ultra-ink); font-variation-settings: "wght" 700, "wdth" 100; white-space: nowrap; }
.fx-stat__delta .fx-icon { width: 15px; height: 15px; stroke-width: 2.4; }
.fx-stat__delta.is-down { color: var(--alarm); }
.fx-stat__delta small { flex-basis: 100%; color: var(--ink-soft); font-size: 13px; font-variation-settings: "wght" 420; }
.fx-stat__spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; flex: none; }
.fx-stat__spark i { display: block; width: 5px; border-radius: 1px; background: var(--rule-strong); transform-origin: bottom; }
.fx-stat__spark i:last-child { background: var(--ultra); }
@keyframes fx-grow { from { transform: scaleY(0); } }
.fx-stat__spark.is-in i { animation: fx-grow 700ms var(--ease-roll) calc(var(--_k, 0) * 30ms) backwards; }
.fx-stat--ink { background: var(--invert); color: var(--on-invert); border-color: var(--invert); }
.fx-stat--ink .fx-label, .fx-stat--ink .fx-stat__delta small { color: var(--on-invert-soft); }
.fx-stat--ink .fx-stat__delta { color: var(--on-invert); }
.fx-stat--ink .fx-stat__spark i { background: var(--on-invert-soft); }
.fx-stat--ink .fx-stat__spark i:last-child { background: var(--on-invert); }

/* ActivityFeed */
.fx-feed { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fx-feed__item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.fx-feed__item:first-child { border-top: 0; padding-top: 4px; }
.fx-feed__text { font-size: 14.5px; line-height: 20px; color: var(--ink-soft); margin: 0; }
.fx-feed__text b { color: var(--ink); font-weight: normal; font-variation-settings: "wght" 700; }
.fx-feed__text em { color: var(--ink); font-style: normal; font-family: var(--font-display); font-variation-settings: "wght" 640, "wdth" 104; }
.fx-feed__when { display: block; font-size: 12.5px; line-height: 18px; color: var(--ink-soft); margin-top: 2px; }
@keyframes fx-feed-in { from { opacity: 0; transform: translateY(-10px); } }
.fx-feed__item.is-new { animation: fx-feed-in var(--dur-settle) var(--ease-swell) backwards; }

/* Masthead */
.fx-mast { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1.5px solid var(--ink); min-width: 0; }
.fx-mast__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.fx-mast__row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.fx-mast__title { font-family: var(--font-display); font-size: clamp(42px, 7vw, 76px); line-height: .9; margin: 0; letter-spacing: -.01em; }
.fx-mast__deck { max-width: 560px; font-size: 18px; line-height: 26px; color: var(--ink-soft); margin: 0; font-variation-settings: "wght" 380, "opsz" 24; }
.fx-mast__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* PlanCard */
.fx-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-5) var(--space-5); background: var(--bone-raised); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-m); min-width: 0; transition: transform var(--dur-settle) var(--ease-swell), box-shadow var(--dur-settle) var(--ease-swell); }
.fx-plan::after { content: ""; position: absolute; inset: 0 -6px -8px 0; z-index: -1; }
@media (hover: hover) { .fx-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .fx-plan:hover .fx-plan__name { -webkit-text-stroke-width: .025em; } }
.fx-plan__name { font-family: var(--font-display); font-size: 26px; line-height: 28px; margin: 0; --fx-wght: 760; --fx-wdth: 112; -webkit-text-stroke: 0 currentColor; transition: -webkit-text-stroke-width var(--dur-swell) var(--ease-swell); }
.fx-plan__price { display: flex; align-items: baseline; gap: 6px; }
.fx-plan__amt { font-size: 64px; --_nw: 820; --_nd: 100; }
.fx-plan__per { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.fx-plan__list { margin: 0; padding: var(--space-4) 0 0; list-style: none; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 21px; }
.fx-plan__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.fx-plan__list .fx-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--ultra-ink); stroke-width: 2.2; }
.fx-plan .fx-btn { margin-top: auto; }
.fx-plan--featured { background: var(--ultra); color: var(--on-ultra); border-color: var(--ultra); }
.fx-plan--featured .fx-plan__per, .fx-plan--featured .fx-label { color: var(--on-ultra); }
.fx-plan--featured .fx-plan__list { border-color: rgba(246, 242, 234, .3); }
.fx-plan--featured .fx-plan__list .fx-icon { color: var(--on-ultra); }
.fx-plan--featured .fx-btn--solid { --_bg: var(--on-ultra); --_fg: #151412; --_bd: var(--on-ultra); }
.fx-plan__flag { position: absolute; top: -12px; right: var(--space-5); }
.fx-plan--featured .fx-plan__flag .fx-badge { background: var(--invert); color: var(--on-invert); }

/* Brand mark */
.fx-mark { display: block; flex: none; }
.fx-mark .m-bg { fill: var(--ultra); }
.fx-mark .m-fg { fill: var(--on-ultra); }
.fx-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.fx-lockup__name { font-family: var(--font-display); font-size: 26px; line-height: 1; --fx-wght: 820; --fx-wdth: 130; transition: var(--fx-axes); }
@media (hover: hover) { .fx-lockup:hover .fx-lockup__name { --fx-wdth: 150; --fx-wght: 900; } }

/* axis plumbing wins over any later `font:` shorthand (which resets font-variation-settings) */
.fx-v.fx-v { font-variation-settings: "wght" var(--fx-wght), "wdth" var(--fx-wdth), "slnt" var(--fx-slnt), "GRAD" var(--fx-grad); }

/* ==========================================================================
   Reduced motion: keep state, drop travel
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .fx-mq__track { animation: none !important; }
  .fx-btn.is-loading .fx-swell__text { animation: none !important; --fx-wght: 300; }
}