/* Generated by npm run design:build. Edit canonical sources, then regenerate. */
/* Source: src/lib/styles/tokens/colors.css */
/* Colors — near-black page, off-white ink, neon purple reel accents. */
:root {
  --color-wallet-cutout: #101015;
  --color-text-primary: #f7f7f8;
  --color-page: #030307;
  --color-text-muted: #898990;
  --color-border-subtle: #ffffff0c;
  --color-focus: #cda6ff;
  --color-brand: #f9f9fa;
  --color-wallet-border: #ffffff1a;
  --color-reel-surface: #06030d;
  --color-reel-leading-border: #210a45;
  --color-reel-trailing-border: #030107;
  --color-reel-inset-border: #6518c25e;
  --color-reel-inset-border-top: #731fe487;
  --color-reel-selected-border: #c284ff66;
  --color-selection-border: #f6e7ff;
  --color-pointer-fill: #d7a1ff;
  --color-pointer-stroke: #fcf2ff;
  --color-icon-muted: #92929c;
  --color-change-positive: #19c784;
  --color-change-negative: #f17983;
  --color-stat-divider: #ffffff06;
  --color-text-emphasis: #fff;
  --color-action-primary-text: #09090c;
  --color-action-primary-surface: #f7f7f8;
  --color-action-primary-border: #fff;
  --color-dialog-border: #ffffff20;
  --color-dialog-surface: #0c0c13;
  --color-dialog-backdrop: #000a;
  --color-dialog-text: #a4a4ae;
  --color-action-primary-hover: #e3e3e8;
  --color-icon-hover-surface: #ffffff08;
  --color-recording-wave: #f0645a;
  --color-notice-danger: #ff8f8f;
  --color-spinner-track: #ffffff24;
}

/* Source: src/lib/styles/tokens/typography.css */
/* Type — system sans only; traxer.fun ships no webfont. Sizes carry compact (<=389px) and desktop (>=601px) steps. */
:root {
  --font-family-body: Arial, Helvetica, sans-serif;
  --font-size-case-title: 32px;
  --font-size-brand: 32px;
  --line-height-solid: 1;
  --font-weight-brand: 750;
  --tracking-brand: -1.5px;
  --font-size-label: 14px;
  --line-height-tight: 1.2;
  --font-weight-semibold: 600;
  --tracking-case-title: 2.7px;
  --font-size-description: 13px;
  --line-height-body: 1.5;
  --font-weight-medium: 500;
  --tracking-description: 1.1px;
  --font-size-token-title: 21px;
  --tracking-token-title: -.3px;
  --font-size-body: 16px;
  --font-size-value: 18px;
  --line-height-label: 1.4;
  --line-height-value: 1.25;
  --tracking-value: -.25px;
  --font-size-dialog-title: 24px;
  --line-height-dialog: 1.6;
  --font-size-dialog-body: 15px;
  --font-size-case-title-desktop: 38px;
  --font-size-case-title-compact: 28px;
  --font-size-caption-compact: 10px;
  --tracking-description-compact: .9px;
  --font-size-token-title-compact: 19px;
  --font-size-label-compact: 12px;
}

/* Source: src/lib/styles/tokens/spacing.css */
/* Space scale and named product spacing that keeps the reference geometry. */
:root {
  --space-xl: 24px;
  --space-sm: 8px;
  --space-lg: 16px;
  --space-xs: 4px;
  --space-md: 12px;
  --space-3xl: 48px;
  --space-2xl: 32px;
  --space-heading-top: 30px;
  --space-machine-top: 64px;
  --space-machine-edge: 20px;
  --space-token-overview-gap: 13px;
  --space-token-close-reserve: 58px;
  --space-token-inset: 14px;
  --space-change-inset: 6px;
  --space-token-stats-top: 22px;
  --space-token-stats-divider: 22px;
  --space-heading-top-desktop: 35px;
  --space-machine-top-desktop: 42px;
  --space-page-compact: 20px;
  --space-heading-top-compact: 25px;
  --space-machine-bottom-compact: 18px;
  --space-token-overview-gap-compact: 10px;
  --space-token-close-reserve-compact: 54px;
  --space-token-inset-compact: 10px;
  --space-heading-top-short: 22px;
  --space-wallet-inline: 13px;
  --space-action-gap: 10px;
  --space-action-inline: 18px;
  --space-dialog-viewport: 40px;
  --space-dialog-top: 28px;
  --space-dialog-text-bottom: 22px;
  --space-feedback-bottom: 22px;
  --space-feedback-reserve: 88px;
  --space-pill-text-block: 5.5px;
}

/* Source: src/lib/styles/tokens/sizes.css */
/* Control, icon and screen sizes. 44px is the minimum touch target; the page column is capped at 600px. */
:root {
  --size-icon: 24px;
  --size-spin-swipe-hand: 80px;
  --size-spin-swipe-hand-mobile: 64px;
  --size-spin-swipe-travel: 21.5%;
  --size-spin-swipe-travel-mobile: 34%;
  --size-wallet-height: 38px;
  --size-icon-wallet: 18px;
  --size-target-min: 44px;
  --size-icon-close: 20px;
  --size-action-height: 52px;
  --size-icon-buy: 22px;
  --size-spin-height: 56px;
  --size-page-max: 600px;
  --size-header-height: 52px;
  --size-token-avatar: 56px;
  --size-result-max: 440px;
  --size-token-avatar-compact: 48px;
  --size-page-min: 320px;
  --size-dialog-max: 370px;
  --size-pill-height: 48px;
  --size-pill-control: 32px;
  --size-preset-height: 40px;
  --size-icon-pill: 16px;
  --size-wave-height: 20px;
  --size-wave-bar: 3px;
  --size-wave-bar-1: 10px;
  --size-wave-bar-2: 16px;
  --size-wave-bar-3: 20px;
  --size-wave-bar-4: 14px;
  --size-busy-dot: 4px;
  --size-feedback-idle: 280px;
  --size-feedback-active: 544px;
  --size-feedback-viewport-gap: 48px;
  --size-feedback-input-max: 95px;
}

/* Source: src/lib/styles/tokens/radius-border.css */
/* Radii and border widths. Reel geometry uses two-axis percentage radii to keep the capsule cards elliptical. */
:root {
  --border-width-focus: 2px;
  --focus-offset: 5px;
  --border-width-thin: 1px;
  --radius-pill: 24px;
  --radius-dialog: 24px;
  --radius-reel-viewport: 8% / 48%;
  --radius-reel-card: 19% / 49%;
  --radius-reel-inset: 12% / 7%;
  --radius-circle: 50%;
  --radius-selection: 20% / 15%;
  --radius-capsule-sheen: 20%;
  --radius-trade-panel: 20px;
  --radius-action: 16px;
  --border-width-spinner: 1.5px;
}

/* Source: src/lib/styles/tokens/effects.css */
/* Gradients, shadows, filters, masks and opacity states. Compound values are single theme values, not composed at use site. */
:root {
  --filter-spin-swipe-echo: brightness(.55) sepia(1) saturate(8) hue-rotate(225deg); /* @kind other */
  --opacity-spin-swipe-echo-near: .4; /* @kind other */
  --opacity-spin-swipe-echo-middle: .26; /* @kind other */
  --opacity-spin-swipe-echo-far: .14; /* @kind other */
  --opacity-spin-swipe-visible: 1; /* @kind other */
  --gradient-wallet-surface: linear-gradient(150deg, #111117, #08080e); /* @kind other */
  --shadow-wallet: inset 0 1px 2px #ffffff06, 0 0 0 1px #ffffff03;
  --gradient-capsule-aura: radial-gradient(ellipse at 50% 62%, #5014c426, #23095712 46%, transparent 72%); /* @kind other */
  --mask-capsule-housing: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(transparent, #000 3%, #000 90%, transparent); /* @kind other */
  --gradient-reel-card: linear-gradient(180deg, #030208 0%, #160c2c 11%, #19112b 29%, #0a0615 66%, #09040f 83%, #140629 100%); /* @kind other */
  --shadow-reel-card: inset 6px 0 16px #0009, inset -7px 0 18px #000, 6px 0 4px #000c;
  --gradient-reel-inset: linear-gradient(155deg, #674a9833 2%, transparent 26%, #00000024 68%); /* @kind other */
  --shadow-reel-inset: 0 -4px 13px #5c19d018;
  --gradient-reel-shade: linear-gradient(180deg, #0004, transparent 25%, transparent 75%, #0007); /* @kind other */
  --filter-coin: drop-shadow(0 7px 12px #0006); /* @kind other */
  --gradient-reel-selected: linear-gradient(180deg, #1e063f, #5915a5 30%, #430987 73%, #1b042f); /* @kind other */
  --gradient-reel-selected-inset: linear-gradient(150deg, #c48aff25, #832dff19); /* @kind other */
  --filter-coin-selected: drop-shadow(0 0 17px #b570ff66); /* @kind other */
  --gradient-reel-glass: linear-gradient(90deg, #05010ac9, transparent 13%, transparent 85%, #05010ac9), linear-gradient(180deg, #0301089c, transparent 15%, transparent 83%, #05010980); /* @kind other */
  --shadow-selection: 0 0 3px 1px #fff, 0 0 9px 3px #b849ff, 0 0 32px 5px #821fffaa, inset 0 0 6px 1px #d97fff, inset 0 0 22px 2px #871affaa;
  --gradient-selection-surface: linear-gradient(140deg, #bc7aff14, transparent 50%); /* @kind other */
  --opacity-selection-spinning: .22; /* @kind other */
  --shadow-selection-spinning: 0 0 8px #b849ff, inset 0 0 8px #b849ff;
  --filter-pointer: drop-shadow(0 0 3px #e6c0ff) drop-shadow(0 0 10px #b028ff) drop-shadow(0 0 21px #7b00ff); /* @kind other */
  --shadow-capsule-sheen: 0 26px 85px -44px #8c14ff88;
  --gradient-trade-surface: linear-gradient(150deg, #12121c, #0c0c14 75%); /* @kind other */
  --shadow-trade-surface: 0 0 0 1px #ffffff02;
  --opacity-icon-disabled: .35; /* @kind other */
  --shadow-action-primary: 0 1px 8px #ffffff05;
  --opacity-action-disabled: .55; /* @kind other */
  --opacity-trade-busy: .45; /* @kind other */
  --shadow-dialog: 0 24px 100px #0009;
  --filter-dialog-backdrop: blur(8px); /* @kind other */
  --shadow-selection-winner: 0 0 8px 2px #fff, 0 0 30px 8px #b849ff, 0 0 60px 10px #821fffaa, inset 0 0 25px #ad49ff;
  --shadow-selection-mobile: 0 0 2px 1px #fff, 0 0 7px 2px #b849ff, 0 0 20px 3px #821fffaa, inset 0 0 7px #d97fff;
  --opacity-pill-disabled: .42; /* @kind other */
  --opacity-wave-dip: .3; /* @kind other */
  --opacity-busy-dip: .25; /* @kind other */
}

/* Source: src/lib/styles/tokens/motion.css */
/* Durations, easings and the transform/filter states the three idle pulses interpolate between. */
:root {
  --motion-spin: 2000ms; /* @kind other */
  --motion-spin-swipe: 900ms; /* @kind other */
  --motion-spin-swipe-lifetime: 1100ms; /* @kind other */
  --motion-spin-swipe-echo-near: 60ms; /* @kind other */
  --motion-spin-swipe-echo-middle: 120ms; /* @kind other */
  --motion-spin-swipe-echo-far: 180ms; /* @kind other */
  --ease-spin-swipe: cubic-bezier(.32, 0, .2, 1); /* @kind other */
  --transform-spin-swipe-start: translate3d(0, 0, 0); /* @kind other */
  --transform-spin-swipe-end: translate3d(-100%, 0, 0); /* @kind other */
  --transform-spin-swipe-arrive: translateY(-8%) scale(.9); /* @kind other */
  --transform-spin-swipe-contact: scale(.94); /* @kind other */
  --transform-spin-swipe-lift: translateY(-10%) scale(1.02); /* @kind other */
  --motion-selection: 350ms; /* @kind other */
  --motion-winner: 650ms; /* @kind other */
  --ease-winner: ease-out; /* @kind other */
  --motion-control: 180ms; /* @kind other */
  --motion-button-spin: 1200ms; /* @kind other */
  --motion-glow: 3600ms; /* @kind other */
  --ease-pulse: ease-in-out; /* @kind other */
  --motion-breathe: 3000ms; /* @kind other */
  --ease-breathe: cubic-bezier(.45, 0, .55, 1); /* @kind other */
  --motion-heartbeat: 2800ms; /* @kind other */
  --transform-action-pressed: scale(.985); /* @kind other */
  --transform-button-spin: rotate(360deg); /* @kind other */
  --filter-glow-rest: brightness(.94) saturate(1); /* @kind other */
  --filter-glow-peak: brightness(1.24) saturate(1.16); /* @kind other */
  --transform-breathe-rest: scale(.965); /* @kind other */
  --transform-breathe-peak: scale(1.008); /* @kind other */
  --transform-heartbeat-rest: scale(.99); /* @kind other */
  --transform-heartbeat-first: scale(1.012); /* @kind other */
  --transform-heartbeat-recoil: scale(.986); /* @kind other */
  --transform-heartbeat-second: scale(1.007); /* @kind other */
  --filter-heartbeat-rest: brightness(1); /* @kind other */
  --filter-heartbeat-first: brightness(1.24); /* @kind other */
  --filter-heartbeat-recoil: brightness(.98); /* @kind other */
  --filter-heartbeat-second: brightness(1.15); /* @kind other */
  --motion-wave: 720ms; /* @kind other */
  --motion-wave-delay-2: 90ms; /* @kind other */
  --motion-wave-delay-3: 180ms; /* @kind other */
  --motion-wave-delay-4: 270ms; /* @kind other */
  --motion-busy: 1100ms; /* @kind other */
  --motion-busy-delay-2: 180ms; /* @kind other */
  --motion-busy-delay-3: 360ms; /* @kind other */
  --motion-spinner: 800ms; /* @kind other */
  --motion-pill-width: 400ms; /* @kind other */
  --ease-pill: cubic-bezier(.25, .1, .25, 1); /* @kind other */
}

/* Source: src/lib/styles/tokens/layers.css */
/* Stacking order inside the capsule. The reel cards themselves take 4-10 via --reel-depth. */
:root {
  --z-capsule-aura: -1; /* @kind other */
  --z-reel-glass: 20; /* @kind other */
  --z-reel-selection: 21; /* @kind other */
  --z-reel-pointer: 30; /* @kind other */
  --z-spin-swipe: 40; /* @kind other */
  --z-feedback-dock: 80; /* @kind other */
}

/* Source: src/lib/styles/dictionary/system.css */
/* Shared base, control and typography dictionary. Button owns wallet-balance, spin-button and primary-button; ActionLink owns buy-button; IconButton owns token-close and dialog-close. This file is also the single root reset, focus and reduced-motion owner. */
:root {
  color-scheme: dark;
  font-family: var(--font-family-body);
  color: var(--color-text-primary);
  background: var(--color-page);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-width: var(--size-page-min);
}
button, input {
  font: inherit;
}
button, a {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: wait;
}
button:focus-visible, a:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
.icon-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.brand {
  color: var(--color-brand);
  text-decoration: none;
  font-size: var(--font-size-brand);
  line-height: var(--line-height-solid);
  font-weight: var(--font-weight-brand);
  letter-spacing: var(--tracking-brand);
  white-space: nowrap;
}
.wallet-balance {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--size-wallet-height);
  min-height: var(--size-target-min);
  padding: 0 var(--space-wallet-inline);
  border: var(--border-width-thin) solid var(--color-wallet-border);
  border-radius: var(--radius-pill);
  background: var(--gradient-wallet-surface);
  box-shadow: var(--shadow-wallet);
  font-size: var(--font-size-label);
  font-variant-numeric: tabular-nums;
}
.wallet-balance .icon {
  width: var(--size-icon-wallet);
  height: var(--size-icon-wallet);
}
.case-heading {
  text-align: center;
}
h1 {
  font-size: var(--font-size-case-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-case-title);
}
.case-description {
  font-size: var(--font-size-description);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-description);
  color: var(--color-text-muted);
}
.trade-panel {
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-trade-panel);
  background: var(--gradient-trade-surface);
  box-shadow: var(--shadow-trade-surface);
}
.token-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: grid;
  place-items: center;
  width: var(--size-target-min);
  height: var(--size-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-icon-muted);
}
.token-close .icon {
  width: var(--size-icon-close);
  height: var(--size-icon-close);
}
.token-close:disabled {
  opacity: var(--opacity-icon-disabled);
}
.token-avatar {
  border-radius: var(--radius-circle);
}
.token-identity {
  overflow-wrap: anywhere;
}
.token-identity h2 {
  font-size: var(--font-size-token-title);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-token-title);
}
.token-identity p {
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-tight);
}
.token-change {
  font-size: var(--font-size-value);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-change-positive);
  overflow-wrap: anywhere;
}
.token-change.is-negative {
  color: var(--color-change-negative);
}
.token-stats > div + div {
  border-left: var(--border-width-thin) solid var(--color-stat-divider);
}
.token-stats dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  white-space: nowrap;
}
.token-stats dd {
  font-size: var(--font-size-value);
  line-height: var(--line-height-value);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-value);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.buy-button, .primary-button, .spin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-action-gap);
  width: 100%;
  min-height: var(--size-action-height);
  padding: var(--space-md) var(--space-action-inline);
  border-radius: var(--radius-action);
  font-size: var(--font-size-value);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  transition: background var(--motion-control), opacity var(--motion-control), transform var(--motion-control);
}
.buy-button, .primary-button {
  text-decoration: none;
  overflow-wrap: anywhere;
  text-align: center;
  border: var(--border-width-thin) solid var(--color-action-primary-border);
  background: var(--color-action-primary-surface);
  color: var(--color-action-primary-text);
  box-shadow: var(--shadow-action-primary);
}
.buy-button .icon, .primary-button .icon {
  width: var(--size-icon-buy);
  height: var(--size-icon-buy);
}
.buy-slogan {
  line-height: var(--line-height-tight);
  white-space: nowrap;
}
.spin-button {
  min-height: var(--size-spin-height);
  margin-top: var(--space-md);
  border: var(--border-width-thin) solid var(--color-action-primary-border);
  background: var(--color-action-primary-surface);
  color: var(--color-action-primary-text);
  box-shadow: var(--shadow-action-primary);
}
.spin-button .icon {
  color: currentColor;
}
.buy-button[href]:active, .primary-button:active:enabled, .spin-button:active:enabled {
  transform: var(--transform-action-pressed);
}
.buy-button[aria-disabled="true"], .primary-button:disabled, .spin-button:disabled {
  opacity: var(--opacity-action-disabled);
}
.trade-panel[aria-busy="true"] .token-overview, .trade-panel[aria-busy="true"] .token-stats {
  opacity: var(--opacity-trade-busy);
}
.spin-button:disabled .icon {
  animation: button-spin var(--motion-button-spin) linear infinite;
}
.noscript-message {
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  text-align: center;
  font-size: var(--font-size-label);
  line-height: var(--line-height-body);
}
.buy-dialog {
  width: min(var(--size-dialog-max), calc(100% - var(--space-dialog-viewport)));
  max-height: calc(100svh - var(--space-dialog-viewport));
  padding: var(--space-dialog-top) var(--space-xl) var(--space-xl);
  border: var(--border-width-thin) solid var(--color-dialog-border);
  border-radius: var(--radius-dialog);
  background: var(--color-dialog-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-dialog);
  text-align: center;
}
.buy-dialog::backdrop {
  background: var(--color-dialog-backdrop);
  backdrop-filter: var(--filter-dialog-backdrop);
}
.dialog-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: grid;
  place-items: center;
  width: var(--size-target-min);
  height: var(--size-target-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-icon-muted);
  border-radius: var(--radius-circle);
}
.buy-dialog form > img {
  display: block;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-circle);
}
.buy-dialog h2 {
  margin: 0;
  font-size: var(--font-size-dialog-title);
}
.buy-dialog p {
  margin: var(--space-md) 0 var(--space-dialog-text-bottom);
  color: var(--color-dialog-text);
  line-height: var(--line-height-dialog);
  font-size: var(--font-size-dialog-body);
}
.dialog-balance {
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  color: var(--color-dialog-text);
  font-size: var(--font-size-label);
}
.dialog-balance strong {
  color: var(--color-text-emphasis);
  font-size: var(--font-size-value);
}
.settings-fields {
  text-align: left;
}
.settings-label {
  color: var(--color-dialog-text);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}
.amount-field {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--size-action-height);
  padding: 0 var(--space-lg);
  border: var(--border-width-thin) solid var(--color-wallet-border);
  border-radius: var(--radius-action);
  background: var(--gradient-wallet-surface);
  box-shadow: var(--shadow-wallet);
  cursor: text;
  transition: border-color var(--motion-control);
}
.amount-field:focus-within {
  outline: var(--border-width-focus) solid var(--color-focus);
  outline-offset: 0;
}
/* Custom validity marks the field itself; the native message stays the only wording. */
.amount-field:has(.amount-input:invalid) {
  border-color: var(--color-notice-danger);
}
.amount-symbol, .amount-currency {
  color: var(--color-text-muted);
  line-height: var(--line-height-value);
}
.amount-symbol {
  font-size: var(--font-size-value);
}
.amount-currency {
  font-size: var(--font-size-label);
}
/* Zero width keeps the field from inheriting the input's default intrinsic size. */
.amount-input {
  flex: 1;
  align-self: stretch;
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-value);
  line-height: var(--line-height-value);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-value);
  font-variant-numeric: tabular-nums;
}
.preset-button {
  flex: 1;
  width: 0;
  min-width: 0;
  min-height: var(--size-preset-height);
  padding: 0 var(--space-sm);
  border: var(--border-width-thin) solid var(--color-wallet-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-dialog-text);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-variant-numeric: tabular-nums;
  transition: background var(--motion-control), color var(--motion-control), border-color var(--motion-control);
}
.preset-button[aria-pressed="true"] {
  border-color: var(--color-action-primary-border);
  background: var(--color-action-primary-surface);
  color: var(--color-action-primary-text);
  font-weight: var(--font-weight-semibold);
}
.preset-button:active {
  transform: var(--transform-action-pressed);
}
@keyframes button-spin {
  to {
    transform: var(--transform-button-spin);
  }
}
@media (hover: hover) {
  .buy-button[href]:hover, .primary-button:hover:enabled {
    background: var(--color-action-primary-hover);
  }
  .spin-button:hover:enabled {
    background: var(--color-action-primary-hover);
    color: var(--color-action-primary-text);
  }
  .token-close:hover:enabled {
    color: var(--color-text-emphasis);
    background: var(--color-icon-hover-surface);
  }
  .preset-button:hover {
    color: var(--color-text-emphasis);
    background: var(--color-icon-hover-surface);
  }
  .preset-button[aria-pressed="true"]:hover {
    background: var(--color-action-primary-hover);
    color: var(--color-action-primary-text);
  }
}
@media (min-width: 601px) {
  h1 {
    font-size: var(--font-size-case-title-desktop);
  }
  .case-description {
    font-size: var(--font-size-label);
  }
}
@media (max-width: 389px) {
  .amount-field {
    padding: 0 var(--space-md);
  }
  .preset-button {
    padding: 0 var(--space-xs);
    font-size: var(--font-size-label-compact);
  }
  h1 {
    font-size: var(--font-size-case-title-compact);
  }
  .case-description {
    font-size: var(--font-size-caption-compact);
    letter-spacing: var(--tracking-description-compact);
  }
  .token-identity h2 {
    font-size: var(--font-size-token-title-compact);
  }
  .token-identity p {
    font-size: var(--font-size-label);
  }
  .token-change {
    font-size: var(--font-size-body);
  }
  .token-stats dt {
    font-size: var(--font-size-label-compact);
  }
  .token-stats dd {
    font-size: var(--font-size-body);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.icon-wallet-cutout {
  fill: var(--color-wallet-cutout);
}

/* The 44px target sits in a 52px header; keep its focus ring inside the viewport. */
.wallet-balance:focus-visible {
  outline-offset: 0;
}

/* Source: src/lib/styles/dictionary/roulette.css */
/* Capsule dictionary: original appearance, responsive geometry and all three idle pulses. Card width is scoped to the viewport. Capsule supplies only --reel-offset-x (px), --reel-scale-x (.9–1), and --reel-depth (integer 4–10). */
.machine-stage::before {
  content: "";
  z-index: var(--z-capsule-aura);
  pointer-events: none;
  background: var(--gradient-capsule-aura);
}
.machine {
  position: relative;
  width: 100%;
  aspect-ratio: 2001 / 786;
  container-type: inline-size;
  isolation: isolate;
}
.machine-housing {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  mask-image: var(--mask-capsule-housing);
  mask-composite: intersect;
}
.reel-viewport {
  touch-action: pan-y pinch-zoom;
  user-select: none;
  position: absolute;
  inset: 15.4% 8.55% 20.1% 8.55%;
  overflow: hidden;
  border-radius: var(--radius-reel-viewport);
  background: var(--color-reel-surface);
  isolation: isolate;
  --card-width: 21.5%;
}
.machine[data-can-drag="true"] .reel-viewport { cursor: grab; }
.machine[data-motion="dragging"] .reel-viewport { cursor: grabbing; }
.reel {
  position: absolute;
  inset: 0;
}
.reel-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--card-width);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  background: var(--gradient-reel-card);
  border-radius: var(--radius-reel-card);
  border-left: var(--border-width-thin) solid var(--color-reel-leading-border);
  border-right: 8px solid var(--color-reel-trailing-border);
  box-shadow: var(--shadow-reel-card);
  transform: translate3d(var(--reel-offset-x, 0px), 0, 0) scaleX(var(--reel-scale-x, 1));
  z-index: var(--reel-depth, 4);
}
.reel-card::before {
  content: "";
  position: absolute;
  inset: 8% 5% 9%;
  border: var(--border-width-thin) solid var(--color-reel-inset-border);
  border-top-color: var(--color-reel-inset-border-top);
  border-radius: var(--radius-reel-inset);
  background: var(--gradient-reel-inset);
  box-shadow: var(--shadow-reel-inset);
}
.reel-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gradient-reel-shade);
  pointer-events: none;
}
.coin {
  position: relative;
  width: 78%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  filter: var(--filter-coin);
  user-select: none;
}
.reel-card.is-selected {
  background: var(--gradient-reel-selected);
}
.reel-card.is-selected::before {
  border-color: var(--color-reel-selected-border);
  background: var(--gradient-reel-selected-inset);
}
.reel-card.is-selected .coin {
  filter: var(--filter-coin-selected);
}
.reel-glass {
  position: absolute;
  z-index: var(--z-reel-glass);
  inset: 0;
  pointer-events: none;
  background: var(--gradient-reel-glass);
  border-radius: inherit;
}
.selection-frame {
  position: absolute;
  z-index: var(--z-reel-selection);
  top: 8%;
  bottom: 9%;
  left: 50%;
  width: 20%;
  transform: translateX(-50%);
  pointer-events: none;
  border: 3px solid var(--color-selection-border);
  border-radius: var(--radius-selection);
  box-shadow: var(--shadow-selection);
  background: var(--gradient-selection-surface);
  transition: opacity var(--motion-selection), box-shadow var(--motion-selection);
}
.machine[data-state="spinning"] .selection-frame {
  opacity: var(--opacity-selection-spinning);
  box-shadow: var(--shadow-selection-spinning);
}
.pointer {
  position: absolute;
  width: 4.4%;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-reel-pointer);
  overflow: visible;
  fill: var(--color-pointer-fill);
  stroke: var(--color-pointer-stroke);
  stroke-width: 2.4;
  stroke-linejoin: round;
  filter: var(--filter-pointer);
}
.pointer-top {
  top: 3.5%;
}
.pointer-bottom {
  bottom: 7%;
  transform: translateX(-50%) rotate(180deg);
}
.machine-sheen {
  position: absolute;
  inset: 5% 10% 10%;
  border-radius: var(--radius-capsule-sheen);
  pointer-events: none;
  z-index: var(--z-capsule-aura);
  box-shadow: var(--shadow-capsule-sheen);
}
.machine[data-state="won"] .selection-frame {
  animation: winner-pulse var(--motion-winner) var(--ease-winner);
}
.machine[data-state="won"] .pointer {
  animation: pointer-flash var(--motion-winner) var(--ease-winner);
}
/* The overlay shares the glass bounds without inheriting its clipping. Each
   copy's width equals one card at the corresponding reel breakpoint, so its
   -100% translation always swipes from the right card to its neighbour. */
.spin-swipe {
  position: absolute;
  inset: 15.4% 8.55% 20.1%;
  z-index: var(--z-spin-swipe);
  pointer-events: none;
  user-select: none;
  animation: spin-swipe-lifetime var(--motion-spin-swipe-lifetime) linear both;
}
.spin-swipe-copy {
  position: absolute;
  top: 45%;
  left: 85%;
  width: var(--size-spin-swipe-travel);
  animation: spin-swipe-travel var(--motion-spin-swipe) var(--ease-spin-swipe) both;
}
.spin-swipe-hand {
  display: block;
  width: var(--size-spin-swipe-hand);
  height: auto;
  transform-origin: 22% 12%;
  animation: spin-swipe-contact var(--motion-spin-swipe) var(--ease-spin-swipe) both;
  animation-delay: inherit;
}
.spin-swipe-echo {
  filter: var(--filter-spin-swipe-echo);
}
.spin-swipe-echo-near {
  opacity: var(--opacity-spin-swipe-echo-near);
  animation-delay: var(--motion-spin-swipe-echo-near);
}
.spin-swipe-echo-middle {
  opacity: var(--opacity-spin-swipe-echo-middle);
  animation-delay: var(--motion-spin-swipe-echo-middle);
}
.spin-swipe-echo-far {
  opacity: var(--opacity-spin-swipe-echo-far);
  animation-delay: var(--motion-spin-swipe-echo-far);
}
@keyframes spin-swipe-lifetime {
  0%, 99% { visibility: visible; }
  100% { visibility: hidden; }
}
@keyframes spin-swipe-travel {
  0%, 24% { transform: var(--transform-spin-swipe-start); }
  76%, 100% { transform: var(--transform-spin-swipe-end); }
}
@keyframes spin-swipe-contact {
  0% { opacity: 0; transform: var(--transform-spin-swipe-arrive); }
  14% { opacity: var(--opacity-spin-swipe-visible); transform: none; }
  24% { opacity: var(--opacity-spin-swipe-visible); transform: var(--transform-spin-swipe-contact); }
  40%, 76% { opacity: var(--opacity-spin-swipe-visible); transform: none; }
  100% { opacity: 0; transform: var(--transform-spin-swipe-lift); }
}
@keyframes winner-pulse {
  35% {
    box-shadow: var(--shadow-selection-winner);
  }
}
@keyframes pointer-flash {
  35% {
    fill: var(--color-text-emphasis);
  }
}
@media (max-width: 600px) {
  .machine {
    aspect-ratio: 1.78;
  }
  .machine-housing {
    object-fit: fill;
  }
  .reel-viewport {
    inset: 15.4% 8.55% 20.1%;
    --card-width: 34%;
  }
  .reel-card {
    border-right-width: 4px;
  }
  .selection-frame {
    width: 31.5%;
    border-width: 2px;
    box-shadow: var(--shadow-selection-mobile);
  }
  .pointer {
    width: 6.5%;
  }
  .pointer-top {
    top: 5.5%;
  }
  .pointer-bottom {
    bottom: 8.5%;
  }
  .spin-swipe-copy {
    width: var(--size-spin-swipe-travel-mobile);
  }
  .spin-swipe-hand {
    width: var(--size-spin-swipe-hand-mobile);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spin-swipe { display: none; }
  .spin-swipe, .spin-swipe-copy, .spin-swipe-hand { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-pulse="glow"] .machine {
    animation: capsule-glow var(--motion-glow) var(--ease-pulse) infinite;
  }
  [data-pulse="breathe"] .machine {
    animation: capsule-breathe var(--motion-breathe) var(--ease-breathe) infinite;
    will-change: transform;
  }
  [data-pulse="heartbeat"] .machine {
    animation: capsule-heartbeat var(--motion-heartbeat) var(--ease-pulse) infinite;
    will-change: transform;
  }
  [data-pulse] .machine { animation-play-state: paused; }
  .machine[data-state="idle"][data-can-drag="true"] { animation-play-state: running; }
}
@keyframes capsule-glow {
  0%, 100% {
    filter: var(--filter-glow-rest);
  }
  50% {
    filter: var(--filter-glow-peak);
  }
}
@keyframes capsule-breathe {
  0%, 100% {
    transform: var(--transform-breathe-rest);
  }
  50% {
    transform: var(--transform-breathe-peak);
  }
}
@keyframes capsule-heartbeat {
  0%, 46%, 100% {
    transform: var(--transform-heartbeat-rest);
    filter: var(--filter-heartbeat-rest);
  }
  12% {
    transform: var(--transform-heartbeat-first);
    filter: var(--filter-heartbeat-first);
  }
  21% {
    transform: var(--transform-heartbeat-recoil);
    filter: var(--filter-heartbeat-recoil);
  }
  32% {
    transform: var(--transform-heartbeat-second);
    filter: var(--filter-heartbeat-second);
  }
}

/* Source: src/lib/styles/dictionary/feedback.css */
/* Feedback composer dictionary: input pill, recording pill, round pill controls, notice, busy dots, wave and spinner. TextArea owns feedback-input; Button owns pill-button, send-button and stop-button. Placement lives in layout.css. */
.feedback-dock {
  transition: width var(--motion-pill-width) var(--ease-pill);
}
.feedback-pill {
  border: var(--border-width-thin) solid var(--color-wallet-border);
  border-radius: var(--radius-pill);
  background: var(--gradient-wallet-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-wallet);
}
.feedback-input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
  line-height: var(--line-height-body);
  resize: none;
}
.feedback-input::placeholder {
  color: var(--color-icon-muted);
}
.feedback-dock[data-state="idle"] .feedback-input {
  text-align: center;
}
.feedback-pill.is-danger .feedback-input::placeholder {
  color: var(--color-notice-danger);
}
.feedback-notice {
  border: var(--border-width-thin) solid var(--color-wallet-border);
  border-radius: var(--radius-pill);
  background: var(--gradient-wallet-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
  line-height: var(--line-height-body);
  text-align: center;
  overflow-wrap: anywhere;
}
.feedback-notice.is-danger {
  color: var(--color-notice-danger);
}
.pill-button, .send-button, .stop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-pill-control);
  height: var(--size-pill-control);
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-text-primary);
  transition: background var(--motion-control), opacity var(--motion-control);
}
.pill-button svg, .send-button svg, .stop-button svg {
  width: var(--size-icon-pill);
  height: var(--size-icon-pill);
}
.send-button, .stop-button {
  background: var(--color-action-primary-surface);
  color: var(--color-action-primary-text);
}
.pill-button:disabled, .send-button:disabled, .stop-button:disabled {
  opacity: var(--opacity-pill-disabled);
  cursor: not-allowed;
}
.feedback-input:disabled {
  cursor: wait;
}
.recording-status {
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
}
.feedback-pill[data-state="failed"] .recording-status strong {
  color: var(--color-notice-danger);
}
.recording-elapsed {
  color: var(--color-text-muted);
  font-size: var(--font-size-label-compact);
  font-variant-numeric: tabular-nums;
}
.recording-wave i {
  width: var(--size-wave-bar);
  height: var(--size-wave-bar-1);
  border-radius: var(--radius-pill);
  background: var(--color-recording-wave);
  animation: recording-wave var(--motion-wave) var(--ease-pulse) infinite;
}
.recording-wave i:nth-child(2) {
  height: var(--size-wave-bar-2);
  animation-delay: var(--motion-wave-delay-2);
}
.recording-wave i:nth-child(3) {
  height: var(--size-wave-bar-3);
  animation-delay: var(--motion-wave-delay-3);
}
.recording-wave i:nth-child(4) {
  height: var(--size-wave-bar-4);
  animation-delay: var(--motion-wave-delay-4);
}
.busy-dots i {
  width: var(--size-busy-dot);
  height: var(--size-busy-dot);
  border-radius: var(--radius-pill);
  background: currentColor;
  animation: busy-dot var(--motion-busy) var(--ease-pulse) infinite;
}
.busy-dots i:nth-child(2) {
  animation-delay: var(--motion-busy-delay-2);
}
.busy-dots i:nth-child(3) {
  animation-delay: var(--motion-busy-delay-3);
}
.input-spinner {
  width: var(--size-icon-pill);
  height: var(--size-icon-pill);
  border: var(--border-width-spinner) solid var(--color-spinner-track);
  border-top-color: var(--color-text-primary);
  border-radius: var(--radius-circle);
  animation: input-spin var(--motion-spinner) linear infinite;
}
@keyframes recording-wave {
  50% {
    opacity: var(--opacity-wave-dip);
  }
}
@keyframes busy-dot {
  50% {
    opacity: var(--opacity-busy-dip);
  }
}
@keyframes input-spin {
  to {
    transform: var(--transform-button-spin);
  }
}
@media (hover: hover) {
  .pill-button:hover:enabled {
    background: var(--color-icon-hover-surface);
    color: var(--color-text-emphasis);
  }
  .send-button:hover:enabled, .stop-button:hover:enabled {
    background: var(--color-action-primary-hover);
  }
}