.vipcalc__wrap {
  --accent: #a88eea;
  --accent-dim: rgba(168, 142, 234, 0.38);
  --accent-faint: rgba(168, 142, 234, 0.12);
  --gold: #e8ba72;
  --gold-dim: rgba(232, 186, 114, 0.32);
  --gold-faint: rgba(232, 186, 114, 0.10);
  --bg-0: #17171c;
  --bg-1: #202329;
  --bg-2: #272b33;
  --line: rgba(255, 255, 255, 0.07);
  --line-bright: rgba(255, 255, 255, 0.14);
  --line-faint: rgba(255, 255, 255, 0.035);
  --fg: #f0f1f4;
  --fg-dim: #b9bdc6;
  --fg-faint: #8f94a1;
  --fg-ghost: #636a76;
  --green: #73e89a;
  --red: #e5766e;
  --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, monospace;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  margin: -8px 0 -8px calc((100% - 100vw) / 2);
  overflow-x: hidden;
  overscroll-behavior-x: none;
  padding: 0;
  color: var(--fg);
  font-family: var(--sans);
  font-feature-settings: "zero";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #252525;
  & * {
    box-sizing: border-box;
    margin: 0;
  }
  &[data-accent="cyan"] {
    --accent: #66d9e8;
    --accent-dim: rgba(102, 217, 232, 0.38);
    --accent-faint: rgba(102, 217, 232, 0.12);
  }
  &[data-accent="lime"] {
    --accent: #78e28e;
    --accent-dim: rgba(120, 226, 142, 0.38);
    --accent-faint: rgba(120, 226, 142, 0.12);
  }
  &[data-accent="violet"] {
    --accent: #a88eea;
    --accent-dim: rgba(168, 142, 234, 0.38);
    --accent-faint: rgba(168, 142, 234, 0.12);
  }
  &[data-accent="amber"] {
    --accent: #e8ba72;
    --accent-dim: rgba(232, 186, 114, 0.38);
    --accent-faint: rgba(232, 186, 114, 0.12);
  }
  &[data-accent="magenta"] {
    --accent: #e987bb;
    --accent-dim: rgba(233, 135, 187, 0.38);
    --accent-faint: rgba(233, 135, 187, 0.12);
  }
  &::before {
    content: none;
  }
}

.page__section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 30px 14px 40px;
}

.page__container {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.calculator__wrapper {
  border-radius: 16px;
}

.app__root {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 960px;
  overflow-x: clip;
  margin: 0 auto;
}

.controls__root {
  position: relative;
  display: grid;
  grid-template-columns: 128px 128px;
  justify-content: center;
  width: 100%;
  min-width: 0;
  gap: 18px 10px;
  align-items: end;
  justify-items: center;
  margin-bottom: 20px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)), var(--bg-1);
  @media (min-width: 381px) {
    grid-template-columns: 140px 140px;
    gap: 18px 24px;
  }
  @media (min-width: 700px) {
    grid-template-columns: 304px 128px 128px;
    gap: 18px 20px;
    padding: 14px 32px;
  }
  @media (min-width: 900px) {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    gap: 18px 52px;
    align-items: start;
    justify-content: center;
    padding: 14px 28px;
  }
  @media (min-width: 1180px) {
    grid-template-columns: max-content max-content max-content;
    gap: 18px 52px;
  }
  &::before,
  &::after {
    content: none;
  }
  &::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
  }
  &::after {
    right: -1px;
    bottom: -1px;
    border-top: 0;
    border-left: 0;
  }
}

.controls__side {
  display: contents;
  @media (min-width: 900px) {
    display: contents;
  }
}

.controls__side_left {
  @media (min-width: 900px) {
    grid-row: 1;
  }
}

.controls__side_right {
  @media (min-width: 900px) {
    grid-row: 1;
  }
}

.controls__group {
  display: grid;
  grid-template-rows: 18px 26px;
  gap: 8px;
  align-items: center;
  justify-items: center;
  min-width: 0;
  flex-shrink: 0;
  @media (min-width: 381px) {
    grid-template-rows: 18px 28px;
  }
  > *:last-child {
    align-self: stretch;
    display: flex;
    align-items: center;
    min-width: 0;
  }
}

.controls__label {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
  max-width: none;
  color: var(--fg-dim);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1.2;
  white-space: nowrap;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--accent-dim);
  }
}

.controls__field {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  @media (min-width: 381px) {
    height: 28px;
    font-size: 15px;
  }
  @media (min-width: 900px) {
    width: 120px;
  }
  &:hover {
    border-color: var(--line-bright);
  }
  &:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-faint);
  }
}

.controls__group_format {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 266px;
  @media (min-width: 381px) {
    width: 304px;
  }
  @media (min-width: 700px) {
    grid-column: 1;
    width: 100%;
  }
  @media (min-width: 900px) {
    grid-column: 1;
    width: auto;
  }
}

.controls__group_rake {
  grid-column: 1;
  grid-row: 2;
  width: 128px;
  @media (min-width: 381px) {
    width: 140px;
  }
  @media (min-width: 700px) {
    grid-column: 2;
    grid-row: 1;
    width: 128px;
  }
  @media (min-width: 900px) {
    grid-column: 2;
    transform: none;
  }
  > *:last-child {
    align-self: start;
  }
}

.controls__group_rakeback {
  grid-column: 2;
  grid-row: 2;
  width: 128px;
  @media (min-width: 381px) {
    width: 140px;
  }
  @media (min-width: 700px) {
    grid-column: 3;
    grid-row: 1;
    width: 128px;
  }
  @media (min-width: 900px) {
    grid-column: 3;
    transform: none;
  }
  > *:last-child {
    align-self: start;
  }
}

.controls__unit {
  color: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.format__chips {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  @media (min-width: 381px) {
    gap: 4px;
  }
  @media (min-width: 900px) {
    gap: 3px;
    overflow: visible;
    width: auto;
  }
  &::-webkit-scrollbar {
    display: none;
  }
}

.format__chip {
  flex: 0 0 auto;
  min-width: 27px;
  height: 26px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-0);
  color: var(--fg-dim);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  @media (min-width: 381px) {
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
  }
  @media (min-width: 900px) {
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
  }
  @media (min-width: 1180px) {
    min-width: 34px;
    padding: 0 11px;
  }
  &:hover {
    border-color: var(--line-bright);
    background: var(--bg-1);
    color: var(--fg);
  }
  &[aria-pressed="true"] {
    border-color: var(--accent-dim);
    background: var(--accent-faint);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-dim);
  }
}

.range__slider {
  width: 100%;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
  box-shadow: none;
  cursor: pointer;
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
  @media (min-width: 381px) {
    height: 28px;
  }
  @media (min-width: 900px) {
    min-width: 0;
  }
  &:hover {
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }
  &:focus {
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none;
  }
  &::-webkit-slider-runnable-track {
    height: 2px;
    border: 0;
    border-radius: 1px;
    background: var(--line-bright);
  }
  &::-moz-range-track {
    height: 2px;
    border: 0;
    border-radius: 1px;
    background: var(--line-bright);
  }
  &::-webkit-slider-thumb {
    width: 17px;
    height: 17px;
    margin-top: -7.5px;
    border: 2px solid var(--bg-1);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-dim);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    appearance: none;
    -webkit-appearance: none;
    &:hover {
      transform: scale(1.1);
      box-shadow: 0 0 0 3px var(--gold-faint);
    }
  }
  &::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border: 2px solid var(--bg-1);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-dim);
    cursor: pointer;
  }
}

.range__value {
  display: inline-block;
  min-width: 34px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.number__input {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  gap: 3px;
  width: 128px;
  min-width: 0;
  height: 26px;
  @media (min-width: 381px) {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    width: 140px;
    height: 28px;
  }
  @media (min-width: 900px) {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    width: 128px;
    height: 28px;
  }
}

.number__field {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 3px 5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
  @media (min-width: 381px) {
    height: 28px;
    padding: 4px 6px;
  }
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
  }
}

.number__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0);
  color: var(--fg-faint);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  pointer-events: auto;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
  @media (min-width: 381px) {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  &:hover {
    border-color: var(--accent-dim);
    background: var(--accent-faint);
    color: var(--accent);
  }
  &:active {
    transform: scale(0.9);
  }
}

.table__container {
  position: relative;
  container-type: inline-size;
  height: 620px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-1);
  --pod__card-width: 88px;
  --pod__card-height: 74px;
  --pod__card-half-width: 44px;
  --pod__card-half-height: 37px;
  --pod__x-right: min(120px, calc(50% - 45px));
  --pod__x-left: calc(0px - var(--pod__x-right));
  --pod__y-top: -196px;
  --pod__y-bottom: 196px;
  --pod__y-one: 86px;
  --pod__y-two-a: -89px;
  --pod__y-two-b: 89px;
  --pod__y-three-a: -124px;
  --pod__y-three-b: 0px;
  --pod__y-three-c: 124px;
  --pod__y-four-a: -123px;
  --pod__y-four-b: -41px;
  --pod__y-four-c: 41px;
  --pod__y-four-d: 123px;
  @media (min-width: 460px) {
    --pod__card-width: 108px;
    --pod__card-half-width: 54px;
    --pod__x-right: min(150px, calc(50% - 70px));
    --pod__x-left: calc(0px - var(--pod__x-right));
    --pod__y-top: -174px;
    --pod__y-bottom: 174px;
    --pod__y-one: 74px;
    --pod__y-two-a: -74px;
    --pod__y-two-b: 74px;
    --pod__y-three-a: -102px;
    --pod__y-three-b: 0px;
    --pod__y-three-c: 102px;
    --pod__y-four-a: -126px;
    --pod__y-four-b: -42px;
    --pod__y-four-c: 42px;
    --pod__y-four-d: 126px;
  }
  @media (min-width: 700px) {
    height: min(620px, calc(100svh + 70px));
    --pod__y-top: max(-174px, calc(-50svh + 48px));
    --pod__y-bottom: min(174px, calc(50svh - 48px));
    --pod__y-one: min(74px, calc(25svh - 39px));
    --pod__y-two-a: max(-74px, calc(-25svh + 39px));
    --pod__y-two-b: min(74px, calc(25svh - 39px));
    --pod__y-three-a: max(-102px, calc(-31svh + 41px));
    --pod__y-three-b: 0px;
    --pod__y-three-c: min(102px, calc(31svh - 41px));
  }
  @media (min-width: 900px) {
    height: 560px;
    padding: 20px;
    --pod__card-width: 128px;
    --pod__card-height: 80px;
    --pod__card-half-width: 64px;
    --pod__card-half-height: 40px;
    --pod__x-right: clamp(260px, 31cqw, 330px);
    --pod__x-left: calc(0px - var(--pod__x-right));
    --pod__y-top: -179px;
    --pod__y-bottom: 179px;
    --pod__y-one: 0px;
    --pod__y-two-a: -79px;
    --pod__y-two-b: 79px;
    --pod__y-three-a: -110px;
    --pod__y-three-b: 0px;
    --pod__y-three-c: 110px;
    --pod__y-four-a: -153px;
    --pod__y-four-b: -51px;
    --pod__y-four-c: 51px;
    --pod__y-four-d: 153px;
    & [data-pod-total="2"][data-pod-index="0"],
    & [data-pod-total="3"][data-pod-index="0"],
    & [data-pod-total="4"][data-pod-index="0"],
    & [data-pod-total="5"][data-pod-index="0"],
    & [data-pod-total="6"][data-pod-index="0"],
    & [data-pod-total="7"][data-pod-index="0"],
    & [data-pod-total="8"][data-pod-index="0"],
    & [data-pod-total="9"][data-pod-index="0"],
    & [data-pod-total="10"][data-pod-index="0"] { --pod__x: 0px; --pod__y: -182px; }
    & [data-pod-total="2"][data-pod-index="1"] { --pod__x: 0px; --pod__y: 182px; }
    & [data-pod-total="3"][data-pod-index="1"] { --pod__x: 246.219173px; --pod__y: 120.699366px; }
    & [data-pod-total="3"][data-pod-index="2"] { --pod__x: -246.219173px; --pod__y: 120.699366px; }
    & [data-pod-total="4"][data-pod-index="1"] { --pod__x: 292px; --pod__y: 0px; }
    & [data-pod-total="4"][data-pod-index="2"] { --pod__x: 0px; --pod__y: 182px; }
    & [data-pod-total="4"][data-pod-index="3"] { --pod__x: -292px; --pod__y: 0px; }
    & [data-pod-total="5"][data-pod-index="1"] { --pod__x: 275.047403px; --pod__y: -76.703029px; }
    & [data-pod-total="5"][data-pod-index="2"] { --pod__x: 157.787121px; --pod__y: 175.614325px; }
    & [data-pod-total="5"][data-pod-index="3"] { --pod__x: -157.787121px; --pod__y: 175.614325px; }
    & [data-pod-total="5"][data-pod-index="4"] { --pod__x: -275.047403px; --pod__y: -76.703029px; }
    & [data-pod-total="6"][data-pod-index="1"] { --pod__x: 246.219173px; --pod__y: -120.699366px; }
    & [data-pod-total="6"][data-pod-index="2"] { --pod__x: 246.219173px; --pod__y: 120.699366px; }
    & [data-pod-total="6"][data-pod-index="3"] { --pod__x: 0px; --pod__y: 182px; }
    & [data-pod-total="6"][data-pod-index="4"] { --pod__x: -246.219173px; --pod__y: 120.699366px; }
    & [data-pod-total="6"][data-pod-index="5"] { --pod__x: -246.219173px; --pod__y: -120.699366px; }
    & [data-pod-total="7"][data-pod-index="1"] { --pod__x: 218.480883px; --pod__y: -146.136573px; }
    & [data-pod-total="7"][data-pod-index="2"] { --pod__x: 283.283482px; --pod__y: 55.649212px; }
    & [data-pod-total="7"][data-pod-index="3"] { --pod__x: 113.109829px; --pod__y: 181.973429px; }
    & [data-pod-total="7"][data-pod-index="4"] { --pod__x: -113.109829px; --pod__y: 181.973429px; }
    & [data-pod-total="7"][data-pod-index="5"] { --pod__x: -283.283482px; --pod__y: 55.649212px; }
    & [data-pod-total="7"][data-pod-index="6"] { --pod__x: -218.480883px; --pod__y: -146.136573px; }
    & [data-pod-total="8"][data-pod-index="1"] { --pod__x: 194.560023px; --pod__y: -161.163279px; }
    & [data-pod-total="8"][data-pod-index="2"] { --pod__x: 292px; --pod__y: 0px; }
    & [data-pod-total="8"][data-pod-index="3"] { --pod__x: 194.560023px; --pod__y: 161.163279px; }
    & [data-pod-total="8"][data-pod-index="4"] { --pod__x: 0px; --pod__y: 182px; }
    & [data-pod-total="8"][data-pod-index="5"] { --pod__x: -194.560023px; --pod__y: 161.163279px; }
    & [data-pod-total="8"][data-pod-index="6"] { --pod__x: -292px; --pod__y: 0px; }
    & [data-pod-total="8"][data-pod-index="7"] { --pod__x: -194.560023px; --pod__y: -161.163279px; }
    & [data-pod-total="9"][data-pod-index="1"] { --pod__x: 174.515099px; --pod__y: -170.181673px; }
    & [data-pod-total="9"][data-pod-index="2"] { --pod__x: 286.710234px; --pod__y: -43.560225px; }
    & [data-pod-total="9"][data-pod-index="3"] { --pod__x: 246.219173px; --pod__y: 120.699366px; }
    & [data-pod-total="9"][data-pod-index="4"] { --pod__x: 87.974429px; --pod__y: 182px; }
    & [data-pod-total="9"][data-pod-index="5"] { --pod__x: -87.974429px; --pod__y: 182px; }
    & [data-pod-total="9"][data-pod-index="6"] { --pod__x: -246.219173px; --pod__y: 120.699366px; }
    & [data-pod-total="9"][data-pod-index="7"] { --pod__x: -286.710234px; --pod__y: -43.560225px; }
    & [data-pod-total="9"][data-pod-index="8"] { --pod__x: -174.515099px; --pod__y: -170.181673px; }
    & [data-pod-total="10"][data-pod-index="1"] { --pod__x: 157.787121px; --pod__y: -175.614325px; }
    & [data-pod-total="10"][data-pod-index="2"] { --pod__x: 275.047403px; --pod__y: -76.703029px; }
    & [data-pod-total="10"][data-pod-index="3"] { --pod__x: 275.047403px; --pod__y: 76.703029px; }
    & [data-pod-total="10"][data-pod-index="4"] { --pod__x: 157.787121px; --pod__y: 175.614325px; }
    & [data-pod-total="10"][data-pod-index="5"] { --pod__x: 0px; --pod__y: 182px; }
    & [data-pod-total="10"][data-pod-index="6"] { --pod__x: -157.787121px; --pod__y: 175.614325px; }
    & [data-pod-total="10"][data-pod-index="7"] { --pod__x: -275.047403px; --pod__y: 76.703029px; }
    & [data-pod-total="10"][data-pod-index="8"] { --pod__x: -275.047403px; --pod__y: -76.703029px; }
    & [data-pod-total="10"][data-pod-index="9"] { --pod__x: -157.787121px; --pod__y: -175.614325px; }
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.008) 3px, rgba(255, 255, 255, 0.008) 4px);
    mix-blend-mode: overlay;
  }
}

.table__label {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 3;
  color: var(--fg-faint);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.table__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  @media (min-width: 900px) {
    display: block;
  }
}

.table__ring {
  fill: rgba(0, 0, 0, 0);
  stroke: var(--line);
  stroke-width: 1;
}

.table__ring_outer {
  stroke: var(--line-bright);
  stroke-dasharray: 2 4;
}

.table__ring_mid {
  stroke-dasharray: 1 3;
}

.hub__root {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  @media (min-width: 900px) {
    gap: 14px;
  }
}

.hub__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  @media (min-width: 900px) {
    font-size: 35px;
    gap: 5px;
  }
}

.hub__minus {
  color: var(--gold);
}

.hub__slider {
  width: 196px;
  pointer-events: auto;
  @media (min-width: 381px) {
    width: 232px;
  }
  @media (min-width: 900px) {
    width: 220px;
  }
}

[data-seats="7"] .hub__slider,
[data-seats="8"] .hub__slider,
[data-seats="9"] .hub__slider,
[data-seats="10"] .hub__slider {
  width: clamp(112px, 34vw, 132px);
  @media (min-width: 900px) {
    width: 220px;
  }
}

.hub__input {
  width: 56px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.10);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: auto;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  @media (min-width: 900px) {
    width: 64px;
    height: 44px;
    font-size: 35px;
  }
  &:hover {
    border-color: var(--gold-dim);
    background: var(--gold-faint);
  }
  &:focus {
    outline: 0;
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.18);
    box-shadow: 0 0 0 3px var(--gold-faint);
  }
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
  }
}

.hub__value_unit {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  @media (min-width: 900px) {
    font-size: 14px;
  }
}

.hub__sub {
  display: none;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.pod__card {
  position: absolute;
  left: calc(50% + var(--pod__x, 0px) - var(--pod__card-half-width) + 1px);
  top: calc(50% + var(--pod__y, 0px) - var(--pod__card-half-height) + 1px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: var(--pod__card-width);
  padding: 8px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-0);
  cursor: pointer;
  transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  @media (min-width: 460px) {
    padding: 8px 10px;
  }
  @media (min-width: 900px) {
    padding: 10px 12px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: rgba(0, 0, 0, 0);
    transition: background 200ms ease;
  }
  &:hover {
    border-color: var(--line-bright);
    background: var(--bg-2);
    transform: translateY(-1px);
  }
  &:hover::before {
    background: var(--accent-dim);
  }
}

.pod__card_vip {
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, var(--gold-faint), var(--bg-0) 80%);
  box-shadow: 0 0 0 1px var(--gold-dim), 0 8px 24px var(--gold-faint);
  &::before {
    background: var(--gold);
  }
}

.pod__card_best {
  border-color: var(--accent-dim);
  animation: softPulse 2600ms ease-in-out infinite;
  &::before {
    background: var(--accent);
  }
}

.pod__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.pod__badge {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.pod__badge_vip {
  border-color: var(--gold-dim);
  background: var(--gold-faint);
  color: var(--gold);
}

.pod__badge_best {
  border-color: var(--accent-dim);
  background: var(--accent-faint);
  color: var(--accent);
}

.pod__idx {
  color: var(--fg-faint);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.pod__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  width: 100%;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  @media (min-width: 460px) {
    font-size: 19px;
  }
}

.pod__value_unit {
  color: var(--fg-faint);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

.pod__value_positive {
  color: var(--green);
}

.pod__value_negative {
  color: var(--red);
}

.pod__value_vip {
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
}

.pod__bar {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--line);
}

.pod__barfill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--pod__barfill-width, 0%);
  background: var(--fg-ghost);
  transform-origin: left center;
}

.pod__barfill_positive {
  background: var(--green);
}

.pod__barfill_negative {
  right: 50%;
  left: auto;
  background: var(--red);
  transform-origin: right center;
}

.pod__barfill_vip {
  right: 0;
  left: 0;
  background: var(--gold);
}

.table__warning {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
}

.tweaks__panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 100;
  display: none;
  padding: 16px;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  background: var(--bg-1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.50);
  font-family: var(--mono);
  @media (min-width: 760px) {
    right: 24px;
    bottom: 24px;
    left: auto;
    width: 260px;
  }
}

.tweaks__panel_visible {
  display: block;
}

.tweaks__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  &::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-dim);
  }
}

.tweaks__row {
  margin-bottom: 14px;
  &:last-child {
    margin-bottom: 0;
  }
}

.tweaks__label {
  margin-bottom: 6px;
  color: var(--fg-faint);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.swatch__row {
  display: flex;
  gap: 6px;
}

.swatch__item {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
  &:hover {
    border-color: var(--line-bright);
    transform: scale(1.08);
  }
}

.swatch__item_cyan {
  --swatch__item-color: #66d9e8;
  background: #66d9e8;
}

.swatch__item_lime {
  --swatch__item-color: #78e28e;
  background: #78e28e;
}

.swatch__item_violet {
  --swatch__item-color: #a88eea;
  background: #a88eea;
}

.swatch__item_amber {
  --swatch__item-color: #e8ba72;
  background: #e8ba72;
}

.swatch__item_magenta {
  --swatch__item-color: #e987bb;
  background: #e987bb;
}

.swatch__item_active {
  &::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid var(--swatch__item-color);
    border-radius: 6px;
  }
}

.option__row {
  display: flex;
  gap: 4px;
}

.option__button {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-0);
  color: var(--fg-dim);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
  &:hover {
    border-color: var(--line-bright);
    color: var(--fg);
  }
}

.option__button_active {
  border-color: var(--accent-dim);
  background: var(--accent-faint);
  color: var(--accent);
}

[data-pod-total="2"][data-pod-index="0"],
[data-pod-total="3"][data-pod-index="0"],
[data-pod-total="4"][data-pod-index="0"],
[data-pod-total="5"][data-pod-index="0"],
[data-pod-total="6"][data-pod-index="0"],
[data-pod-total="7"][data-pod-index="0"],
[data-pod-total="8"][data-pod-index="0"],
[data-pod-total="9"][data-pod-index="0"],
[data-pod-total="10"][data-pod-index="0"] { --pod__x: 0px; --pod__y: var(--pod__y-top); }
[data-pod-total="2"][data-pod-index="1"],
[data-pod-total="4"][data-pod-index="2"],
[data-pod-total="6"][data-pod-index="3"],
[data-pod-total="8"][data-pod-index="4"],
[data-pod-total="10"][data-pod-index="5"] { --pod__x: 0px; --pod__y: var(--pod__y-bottom); }
[data-pod-total="3"][data-pod-index="1"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-one); }
[data-pod-total="3"][data-pod-index="2"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-one); }
[data-pod-total="4"][data-pod-index="1"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-one); }
[data-pod-total="4"][data-pod-index="3"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-one); }
[data-pod-total="5"][data-pod-index="1"],
[data-pod-total="6"][data-pod-index="1"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-two-a); }
[data-pod-total="5"][data-pod-index="2"],
[data-pod-total="6"][data-pod-index="2"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-two-b); }
[data-pod-total="5"][data-pod-index="3"],
[data-pod-total="6"][data-pod-index="4"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-two-b); }
[data-pod-total="5"][data-pod-index="4"],
[data-pod-total="6"][data-pod-index="5"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-two-a); }
[data-pod-total="7"][data-pod-index="1"],
[data-pod-total="8"][data-pod-index="1"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-three-a); }
[data-pod-total="7"][data-pod-index="2"],
[data-pod-total="8"][data-pod-index="2"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-three-b); }
[data-pod-total="7"][data-pod-index="3"],
[data-pod-total="8"][data-pod-index="3"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-three-c); }
[data-pod-total="7"][data-pod-index="4"],
[data-pod-total="8"][data-pod-index="5"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-three-c); }
[data-pod-total="7"][data-pod-index="5"],
[data-pod-total="8"][data-pod-index="6"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-three-b); }
[data-pod-total="7"][data-pod-index="6"],
[data-pod-total="8"][data-pod-index="7"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-three-a); }
[data-pod-total="9"][data-pod-index="1"],
[data-pod-total="10"][data-pod-index="1"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-four-a); }
[data-pod-total="9"][data-pod-index="2"],
[data-pod-total="10"][data-pod-index="2"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-four-b); }
[data-pod-total="9"][data-pod-index="3"],
[data-pod-total="10"][data-pod-index="3"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-four-c); }
[data-pod-total="9"][data-pod-index="4"],
[data-pod-total="10"][data-pod-index="4"] { --pod__x: var(--pod__x-right); --pod__y: var(--pod__y-four-d); }
[data-pod-total="9"][data-pod-index="5"],
[data-pod-total="10"][data-pod-index="6"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-four-d); }
[data-pod-total="9"][data-pod-index="6"],
[data-pod-total="10"][data-pod-index="7"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-four-c); }
[data-pod-total="9"][data-pod-index="7"],
[data-pod-total="10"][data-pod-index="8"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-four-b); }
[data-pod-total="9"][data-pod-index="8"],
[data-pod-total="10"][data-pod-index="9"] { --pod__x: var(--pod__x-left); --pod__y: var(--pod__y-four-a); }

[data-fill="0"] { --pod__barfill-width: 0%; }
[data-fill="1"] { --pod__barfill-width: 1%; }
[data-fill="2"] { --pod__barfill-width: 2%; }
[data-fill="3"] { --pod__barfill-width: 3%; }
[data-fill="4"] { --pod__barfill-width: 4%; }
[data-fill="5"] { --pod__barfill-width: 5%; }
[data-fill="6"] { --pod__barfill-width: 6%; }
[data-fill="7"] { --pod__barfill-width: 7%; }
[data-fill="8"] { --pod__barfill-width: 8%; }
[data-fill="9"] { --pod__barfill-width: 9%; }
[data-fill="10"] { --pod__barfill-width: 10%; }
[data-fill="11"] { --pod__barfill-width: 11%; }
[data-fill="12"] { --pod__barfill-width: 12%; }
[data-fill="13"] { --pod__barfill-width: 13%; }
[data-fill="14"] { --pod__barfill-width: 14%; }
[data-fill="15"] { --pod__barfill-width: 15%; }
[data-fill="16"] { --pod__barfill-width: 16%; }
[data-fill="17"] { --pod__barfill-width: 17%; }
[data-fill="18"] { --pod__barfill-width: 18%; }
[data-fill="19"] { --pod__barfill-width: 19%; }
[data-fill="20"] { --pod__barfill-width: 20%; }
[data-fill="21"] { --pod__barfill-width: 21%; }
[data-fill="22"] { --pod__barfill-width: 22%; }
[data-fill="23"] { --pod__barfill-width: 23%; }
[data-fill="24"] { --pod__barfill-width: 24%; }
[data-fill="25"] { --pod__barfill-width: 25%; }
[data-fill="26"] { --pod__barfill-width: 26%; }
[data-fill="27"] { --pod__barfill-width: 27%; }
[data-fill="28"] { --pod__barfill-width: 28%; }
[data-fill="29"] { --pod__barfill-width: 29%; }
[data-fill="30"] { --pod__barfill-width: 30%; }
[data-fill="31"] { --pod__barfill-width: 31%; }
[data-fill="32"] { --pod__barfill-width: 32%; }
[data-fill="33"] { --pod__barfill-width: 33%; }
[data-fill="34"] { --pod__barfill-width: 34%; }
[data-fill="35"] { --pod__barfill-width: 35%; }
[data-fill="36"] { --pod__barfill-width: 36%; }
[data-fill="37"] { --pod__barfill-width: 37%; }
[data-fill="38"] { --pod__barfill-width: 38%; }
[data-fill="39"] { --pod__barfill-width: 39%; }
[data-fill="40"] { --pod__barfill-width: 40%; }
[data-fill="41"] { --pod__barfill-width: 41%; }
[data-fill="42"] { --pod__barfill-width: 42%; }
[data-fill="43"] { --pod__barfill-width: 43%; }
[data-fill="44"] { --pod__barfill-width: 44%; }
[data-fill="45"] { --pod__barfill-width: 45%; }
[data-fill="46"] { --pod__barfill-width: 46%; }
[data-fill="47"] { --pod__barfill-width: 47%; }
[data-fill="48"] { --pod__barfill-width: 48%; }
[data-fill="49"] { --pod__barfill-width: 49%; }
[data-fill="50"] { --pod__barfill-width: 50%; }
[data-fill="51"] { --pod__barfill-width: 51%; }
[data-fill="52"] { --pod__barfill-width: 52%; }
[data-fill="53"] { --pod__barfill-width: 53%; }
[data-fill="54"] { --pod__barfill-width: 54%; }
[data-fill="55"] { --pod__barfill-width: 55%; }
[data-fill="56"] { --pod__barfill-width: 56%; }
[data-fill="57"] { --pod__barfill-width: 57%; }
[data-fill="58"] { --pod__barfill-width: 58%; }
[data-fill="59"] { --pod__barfill-width: 59%; }
[data-fill="60"] { --pod__barfill-width: 60%; }
[data-fill="61"] { --pod__barfill-width: 61%; }
[data-fill="62"] { --pod__barfill-width: 62%; }
[data-fill="63"] { --pod__barfill-width: 63%; }
[data-fill="64"] { --pod__barfill-width: 64%; }
[data-fill="65"] { --pod__barfill-width: 65%; }
[data-fill="66"] { --pod__barfill-width: 66%; }
[data-fill="67"] { --pod__barfill-width: 67%; }
[data-fill="68"] { --pod__barfill-width: 68%; }
[data-fill="69"] { --pod__barfill-width: 69%; }
[data-fill="70"] { --pod__barfill-width: 70%; }
[data-fill="71"] { --pod__barfill-width: 71%; }
[data-fill="72"] { --pod__barfill-width: 72%; }
[data-fill="73"] { --pod__barfill-width: 73%; }
[data-fill="74"] { --pod__barfill-width: 74%; }
[data-fill="75"] { --pod__barfill-width: 75%; }
[data-fill="76"] { --pod__barfill-width: 76%; }
[data-fill="77"] { --pod__barfill-width: 77%; }
[data-fill="78"] { --pod__barfill-width: 78%; }
[data-fill="79"] { --pod__barfill-width: 79%; }
[data-fill="80"] { --pod__barfill-width: 80%; }
[data-fill="81"] { --pod__barfill-width: 81%; }
[data-fill="82"] { --pod__barfill-width: 82%; }
[data-fill="83"] { --pod__barfill-width: 83%; }
[data-fill="84"] { --pod__barfill-width: 84%; }
[data-fill="85"] { --pod__barfill-width: 85%; }
[data-fill="86"] { --pod__barfill-width: 86%; }
[data-fill="87"] { --pod__barfill-width: 87%; }
[data-fill="88"] { --pod__barfill-width: 88%; }
[data-fill="89"] { --pod__barfill-width: 89%; }
[data-fill="90"] { --pod__barfill-width: 90%; }
[data-fill="91"] { --pod__barfill-width: 91%; }
[data-fill="92"] { --pod__barfill-width: 92%; }
[data-fill="93"] { --pod__barfill-width: 93%; }
[data-fill="94"] { --pod__barfill-width: 94%; }
[data-fill="95"] { --pod__barfill-width: 95%; }
[data-fill="96"] { --pod__barfill-width: 96%; }
[data-fill="97"] { --pod__barfill-width: 97%; }
[data-fill="98"] { --pod__barfill-width: 98%; }
[data-fill="99"] { --pod__barfill-width: 99%; }
[data-fill="100"] { --pod__barfill-width: 100%; }

@keyframes softPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--accent-faint);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
  }
}