/* Scoped to the wheel component. No global resets, fonts or external assets. */
.axion-wheel {
  --axw-bg: #fff;
  --axw-panel: #fafafa;
  --axw-ink: #111;
  --axw-muted: #686868;
  --axw-line: #d8d8d8;
  --axw-grid: #eeeeec;
  --axw-sector-a: #fcfcfa;
  --axw-sector-b: #eeeeec;
  --axw-selected: #e0e0dd;
  --axw-scan: #00000005;
  --axw-red: #ed1f3a;
  --axw-edge: #a90f25;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  color: var(--axw-ink);
  background: var(--axw-bg);
  border: 1px solid var(--axw-line);
  box-shadow: 8px 8px 0 var(--axionai-border, #dededb), 0 24px 60px #0000000b;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  line-height: 1.5;
  text-align: left;
  box-sizing: border-box;
  container-type: inline-size;
}
.axion-wheel *, .axion-wheel *::before, .axion-wheel *::after { box-sizing: border-box; }
.axion-wheel p { margin: 0; }
.axion-wheel button, .axion-wheel input { font: inherit; }
.axion-wheel button { -webkit-tap-highlight-color: transparent; }
.axion-wheel [hidden] { display: none !important; }
[data-axion-theme="dark"] .axion-wheel, .axion-wheel[data-theme="dark"] {
  --axw-bg: #090909;
  --axw-panel: #0d0d0d;
  --axw-ink: #f1f1ef;
  --axw-muted: #a0a09b;
  --axw-line: #333;
  --axw-grid: #202020;
  --axw-sector-a: #171717;
  --axw-sector-b: #242424;
  --axw-selected: #3a3a37;
  --axw-scan: #ffffff04;
  box-shadow: 8px 8px 0 var(--axionai-border, #282828), 0 24px 60px #0004;
}
.axion-wheel .axw-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 54px; padding: 12px 22px; border-bottom: 1px solid var(--axw-line);
  font-size: 11px; letter-spacing: .1em;
}
.axion-wheel .axw-status { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; white-space: nowrap; }
.axion-wheel .axw-status i { width: 6px; height: 6px; background: var(--axw-ink); opacity: .6; }
.axion-wheel[data-state="spinning"] .axw-status i { opacity: 1; }
.axion-wheel .axw-screen { display: grid; grid-template-columns: minmax(0, 1fr) 190px; }
.axion-wheel .axw-stage {
  padding: 22px 24px 20px; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background-image: linear-gradient(var(--axw-grid) 1px, transparent 1px), linear-gradient(90deg, var(--axw-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
}
.axion-wheel .axw-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 3px, var(--axw-scan) 3px 4px);
}
.axion-wheel .axw-stage-caption { align-self: flex-start; font-size: 9px; letter-spacing: .12em; color: var(--axw-muted); }
.axion-wheel .axw-mechanism { width: min(100%, 470px); aspect-ratio: 1; position: relative; margin: 12px auto 10px; }
.axion-wheel .axw-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.axion-wheel .axw-frame { fill: var(--axw-bg); stroke: var(--axw-line); stroke-width: 1; }
.axion-wheel .axw-disc-back { fill: var(--axw-panel); stroke: var(--axw-line); stroke-width: 1; }
.axion-wheel .axw-tick { stroke: var(--axw-muted); stroke-width: 1; opacity: .58; }
.axion-wheel .axw-rotor { transform-origin: 50% 50%; transform-box: view-box; }
.axion-wheel[data-state="spinning"] .axw-rotor { will-change: transform; }
.axion-wheel .axw-sector { stroke: var(--axw-line); stroke-width: 1; stroke-linejoin: round; }
.axion-wheel .axw-sector--0 { fill: var(--axw-sector-a); }
.axion-wheel .axw-sector--1 { fill: var(--axw-sector-b); }
.axion-wheel .axw-sector.is-selected { fill: var(--axw-selected); stroke: var(--axw-ink); stroke-width: 1.4; }
.axion-wheel .axw-sector-value { fill: var(--axw-ink); font: 500 34px/1 ui-monospace, Consolas, monospace; letter-spacing: -2px; }
.axion-wheel .axw-sector-caption { fill: var(--axw-muted); font: 8px/1 ui-monospace, Consolas, monospace; letter-spacing: 1.5px; }
.axion-wheel .axw-inner-ring { fill: var(--axw-panel); stroke: var(--axw-line); stroke-width: 1; }
.axion-wheel .axw-pointer { fill: var(--axw-ink); stroke: var(--axw-bg); stroke-width: 2; }
.axion-wheel .axw-spin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 25%; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1px solid var(--axw-edge);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  background: linear-gradient(155deg, #fa4056 0%, var(--axw-red) 48%, #cf1630 100%);
  color: #fff; font-size: clamp(13px, 2.1cqw, 20px); font-weight: 600; line-height: 1;
  letter-spacing: .08em; cursor: pointer; z-index: 3;
  box-shadow: inset 0 1px 1px #ffffff75, inset 0 -3px 0 #900b2055, 0 5px 0 var(--axw-edge), 0 9px 15px #0003;
  transition: box-shadow 160ms ease, filter 160ms ease;
}
.axion-wheel .axw-spin:hover:not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 1px 1px #ffffff80, inset 0 -3px 0 #900b2055, 0 5px 0 var(--axw-edge), 0 11px 20px #0004; }
.axion-wheel .axw-spin:active:not(:disabled) { box-shadow: inset 0 1px 1px #ffffff75, inset 0 -1px 0 #900b2055, 0 2px 0 var(--axw-edge), 0 4px 8px #0003; }
.axion-wheel .axw-spin:disabled { cursor: wait; color: #fff; opacity: 1; }
.axion-wheel:not([data-enhanced]) .axw-spin:disabled { cursor: default; }
.axion-wheel .axw-spin-icon { display: block; width: 23%; height: 23%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.axion-wheel .axw-spin:focus-visible { outline: 2px solid var(--axw-ink); outline-offset: 9px; }
.axion-wheel .axw-values { color: var(--axw-muted); font-size: 10px; letter-spacing: .06em; line-height: 1.8; text-align: center; overflow-wrap: anywhere; }
.axion-wheel .axw-panel { background: var(--axw-panel); border-left: 1px solid var(--axw-line); padding: 30px 22px 24px; display: flex; flex-direction: column; gap: 25px; }
.axion-wheel .axw-label { display: block; font-size: 9px; font-weight: 400; letter-spacing: .13em; color: var(--axw-muted); margin-bottom: 12px; }
.axion-wheel .axw-result, .axion-wheel .axw-stat { border-bottom: 1px solid var(--axw-line); padding-bottom: 23px; }
.axion-wheel .axw-result-value { display: block; font-size: clamp(36px, 5.5cqw, 54px); font-weight: 400; line-height: 1; letter-spacing: -.06em; margin: 22px 0; min-height: 1em; }
.axion-wheel .axw-result-note { display: block; color: var(--axw-muted); font-size: 8px; letter-spacing: .08em; line-height: 1.7; }
.axion-wheel .axw-stat strong { display: block; font-size: 24px; color: var(--axw-ink); font-weight: 400; line-height: 1.2; letter-spacing: -.03em; }
.axion-wheel .axw-description { color: var(--axw-muted); font: 10px/1.85 ui-monospace, Consolas, monospace; margin-top: auto; }
.axion-wheel .axw-footer { display: flex; align-items: stretch; justify-content: space-between; border-top: 1px solid var(--axw-line); min-height: 54px; }
.axion-wheel .axw-quiet { display: inline-flex; gap: 10px; align-items: center; padding: 12px 22px; color: var(--axw-muted); font-size: 10px; cursor: pointer; }
.axion-wheel .axw-quiet input { margin: 0; width: 14px; height: 14px; accent-color: var(--axw-ink); }
.axion-wheel .axw-quiet:focus-within { outline: 2px solid var(--axw-ink); outline-offset: -5px; }
.axion-wheel .axw-reset {
  appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  border: 0; border-left: 1px solid var(--axw-line); border-radius: 0;
  padding: 12px 22px; min-width: 190px; background: var(--axw-panel); color: var(--axw-ink);
  font-size: 10px; letter-spacing: .05em; line-height: 1.5; cursor: pointer;
}
.axion-wheel .axw-reset span { font-size: 19px; line-height: 1; }
.axion-wheel .axw-reset:hover:not(:disabled) { background: var(--axw-ink); color: var(--axw-bg); }
.axion-wheel .axw-reset:focus-visible { outline: 2px solid var(--axw-ink); outline-offset: -5px; }
.axion-wheel .axw-reset:disabled { color: var(--axw-muted); opacity: .65; cursor: default; }
.axion-wheel .axw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; }
.axion-wheel .axw-fallback { padding: 16px 22px; border-top: 1px solid var(--axw-line); font-size: 12px; }
@container (max-width: 620px) {
  .axion-wheel .axw-screen { grid-template-columns: minmax(0, 1fr); }
  .axion-wheel .axw-topbar { padding-inline: 14px; min-height: 48px; font-size: 9px; }
  .axion-wheel .axw-status { font-size: 8px; }
  .axion-wheel .axw-stage { padding: 16px 14px; }
  .axion-wheel .axw-mechanism { max-width: 380px; margin-top: 10px; }
  .axion-wheel .axw-panel { border-left: 0; border-top: 1px solid var(--axw-line); display: grid; grid-template-columns: 1.25fr .7fr 1fr; padding: 0; gap: 0; }
  .axion-wheel .axw-result, .axion-wheel .axw-stat { min-width: 0; padding: 16px 12px; border-bottom: 0; border-right: 1px solid var(--axw-line); }
  .axion-wheel .axw-stat:last-of-type { border-right: 0; }
  .axion-wheel .axw-label { font-size: 8px; margin-bottom: 12px; letter-spacing: .06em; }
  .axion-wheel .axw-result-value { font-size: 32px; margin: 0; }
  .axion-wheel .axw-result-note { display: none; }
  .axion-wheel .axw-stat strong { font-size: 21px; }
  .axion-wheel .axw-description { grid-column: 1 / -1; border-top: 1px solid var(--axw-line); padding: 12px 14px; min-height: 60px; }
  .axion-wheel .axw-reset { min-width: 132px; padding-inline: 14px; gap: 14px; }
  .axion-wheel .axw-quiet { padding-inline: 14px; font-size: 9px; }
  .axion-wheel .axw-values { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .axion-wheel .axw-spin { transition: none; }
}

.axion-wheel[data-reduced="true"] .axw-spin { transition: none; }

/* Product hero placement: retain the shared GetDeliver type and spacing tokens. */
.axion-frequenta-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.axion-frequenta-hero__copy,
.axion-frequenta-hero__wheel { min-width: 0; }
.axion-frequenta-hero__wheel { padding-right: 8px; }
@media (max-width: 1099px) {
  .axion-frequenta-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .axion-frequenta-hero__wheel { width: 100%; max-width: 620px; margin-inline: auto; }
}