:root {
  --tool-green: #b7dc69;
  --tool-ink: #f4f6f0;
  --tool-muted: #92978d;
  --tool-panel: rgba(22, 24, 20, .91);
  --tool-border: rgba(183, 220, 105, .18);
}

.tool-body { min-width: 320px; overflow-x: hidden; background: #0e100d; }
.tool-body .dash-bg { filter: grayscale(.65) saturate(.65); }
.tool-page { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 122px 0 72px; }
.tool-hero { position: relative; max-width: 790px; margin-bottom: 28px; }
.tool-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: #8f9589; text-decoration: none; font-size: .78rem; font-weight: 700; }
.tool-back:hover { color: var(--tool-green); }
.tool-eyebrow { margin: 0; color: var(--tool-green); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.tool-hero h1 { margin: 8px 0 10px; color: var(--tool-ink); font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.055em; }
.tool-hero > p:last-child { max-width: 680px; margin: 0; color: var(--tool-muted); font-size: clamp(.92rem, 1.4vw, 1.08rem); line-height: 1.6; }

.tool-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 18px; align-items: stretch; }
.tool-card { min-width: 0; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--tool-border); border-radius: 22px; background: linear-gradient(145deg, rgba(183,220,105,.045), transparent 38%), var(--tool-panel); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.22); backdrop-filter: blur(16px); }
.tool-card-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.tool-card-head h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -.03em; }
.tool-card-head p { margin: 5px 0 0; color: var(--tool-muted); font-size: .77rem; }
.tool-step { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(183,220,105,.2); border-radius: 10px; color: var(--tool-green); background: rgba(183,220,105,.07); font-size: .68rem; font-weight: 900; }

.tool-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(0,0,0,.2); }
.tool-segment button { min-height: 39px; padding: 0 14px; border: 0; border-radius: 9px; color: #777d72; background: transparent; font-size: .76rem; font-weight: 800; }
.tool-segment button:hover { border: 0; color: #e6e9e2; }
.tool-segment button.is-selected { color: #172016; background: var(--tool-green); box-shadow: 0 4px 18px rgba(183,220,105,.12); }

.tool-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.tool-field { display: grid; gap: 7px; min-width: 0; }
.tool-field--wide { grid-column: 1 / -1; }
.tool-field > span, .tool-field legend { color: #cfd3ca; font-size: .72rem; font-weight: 700; }
.tool-input-wrap { position: relative; }
.tool-input-wrap input, .tool-field select { width: 100%; height: 49px; padding: 0 48px 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; outline: 0; color: #f4f6f0; background: rgba(8,10,7,.55); font: inherit; font-size: .88rem; transition: border-color .18s, box-shadow .18s; }
.tool-field select { padding-right: 36px; color-scheme: dark; }
.tool-input-wrap input:focus, .tool-field select:focus { border-color: rgba(74,114,176,.55); box-shadow: 0 0 0 3px rgba(74,114,176,.08); }
.tool-input-wrap span { position: absolute; top: 50%; right: 14px; translate: 0 -50%; color: #656b61; font-size: .66rem; font-weight: 800; text-transform: uppercase; pointer-events: none; }
.tool-field small { color: #676d63; font-size: .64rem; line-height: 1.4; }
.tool-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
[hidden] { display: none !important; }
.tool-error { min-height: 18px; margin: 14px 0 0; color: #f09b83; font-size: .7rem; }
.tool-actions { display: flex; gap: 9px; margin-top: 18px; }
.tool-submit, .tool-reset { min-height: 46px; padding: 0 18px; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.tool-submit { flex: 1; border: 0; color: #172016; background: var(--tool-green); box-shadow: 0 10px 24px rgba(183,220,105,.1); }
.tool-submit:hover { border: 0; background: #c7e888; transform: translateY(-1px); }
.tool-reset { color: #9ca198; background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.09); }

.tool-result { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.tool-result::after { content: ''; position: absolute; width: 330px; height: 330px; right: -170px; bottom: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(183,220,105,.12), transparent 68%); pointer-events: none; }
.tool-result-label { margin: 0; color: var(--tool-green); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tool-result-main { display: flex; align-items: end; gap: 10px; margin: 18px 0 7px; }
.tool-result-main output { color: #fff; font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 800; line-height: .78; letter-spacing: -.07em; }
.tool-result-main span { color: #777d72; font-size: .83rem; font-weight: 700; }
.tool-result-title { margin: 5px 0 24px; color: #dfe4da; font-size: 1rem; font-weight: 700; }
.tool-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: auto; }
.tool-stat { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.025); }
.tool-stat span { display: block; color: #73796e; font-size: .63rem; }
.tool-stat output, .tool-stat strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #e7eae3; font-size: .92rem; }
.tool-scale { margin: 4px 0 22px; }
.tool-scale-track { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg,#7b8caf 0 20%,#8eb35c 20% 43%,#ceb867 43% 66%,#bd745f 66% 100%); }
.tool-scale-marker { --position: 45%; position: absolute; top: 50%; left: clamp(0%, var(--position), 100%); width: 16px; height: 16px; border: 3px solid #161914; border-radius: 50%; background: #fff; translate: -50% -50%; box-shadow: 0 0 0 2px rgba(255,255,255,.16); }
.tool-scale-labels { display: flex; justify-content: space-between; margin-top: 7px; color: #62685e; font-size: .57rem; }
.tool-result-note { margin: 18px 0 0; color: #6f756b; font-size: .66rem; line-height: 1.5; }

.macro-plan { margin: 2px 0 20px; padding: 18px; border: 1px solid rgba(183,220,105,.13); border-radius: 16px; background: rgba(7,9,6,.28); }
.macro-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.macro-plan-head > span { color: #dfe4da; font-size: .82rem; font-weight: 800; }
.macro-plan-head output { color: #7f8778; font-size: .72rem; font-weight: 700; text-align: right; }
.macro-rings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.macro-ring { --ring-color: var(--tool-green); position: relative; display: grid; place-items: center; width: min(100%, 104px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--share) * 1%), rgba(255,255,255,.075) 0); box-shadow: 0 0 28px color-mix(in srgb, var(--ring-color) 11%, transparent); }
.macro-ring::before { content: ''; position: absolute; inset: 8px; border-radius: inherit; background: #171a15; box-shadow: inset 0 0 18px rgba(0,0,0,.34); }
.macro-ring div { position: relative; z-index: 1; text-align: center; }
.macro-ring output { display: block; color: #f2f4ee; font-size: 1rem; font-weight: 800; line-height: 1; }
.macro-ring span { display: block; margin-top: 6px; color: #858c80; font-size: .7rem; font-weight: 700; }
.macro-ring--protein { --ring-color: #cf6b63; }
.macro-ring--carbs { --ring-color: #d3bf74; }
.macro-ring--fat { --ring-color: #8da9c7; }

.tool-table-wrap { margin-top: 17px; overflow-x: auto; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; }
.tool-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: .7rem; }
.tool-table th, .tool-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.055); text-align: left; }
.tool-table tr:last-child td { border-bottom: 0; }
.tool-table th { color: #72786e; background: rgba(0,0,0,.15); font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.tool-table td { color: #cbd0c6; }
.tool-table td:last-child { color: var(--tool-green); font-weight: 700; }

.tool-signup { display: flex; align-items: center; gap: 15px; margin: 18px 0; padding: 17px 19px; border: 1px solid rgba(183,220,105,.22); border-radius: 16px; background: linear-gradient(90deg,rgba(183,220,105,.08),rgba(183,220,105,.025)); }
.tool-signup-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; color: #172016; background: var(--tool-green); font-size: .78rem; font-weight: 900; }
.tool-signup p { flex: 1; margin: 0; color: #a5aa9f; font-size: .78rem; }
.tool-signup strong { color: #f2f4ee; }
.tool-signup a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 0 16px; flex: 0 0 auto; border-radius: 999px; color: #172016; background: var(--tool-green); text-decoration: none; font-size: .7rem; font-weight: 800; }
.tool-signup a:hover { color: #172016; background: #c7e888; }

.tool-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.tool-info-grid article { min-width: 0; padding: 22px; border: 1px solid rgba(255,255,255,.075); border-radius: 17px; background: rgba(20,22,18,.77); }
.tool-info-grid h2, .tool-info-grid h3 { margin: 0 0 8px; color: #e9ece5; font-size: .92rem; }
.tool-info-grid p, .tool-info-grid li { color: #80867c; font-size: .72rem; line-height: 1.6; }
.tool-info-grid p { margin: 0; }
.tool-info-grid ul { margin: 0; padding-left: 17px; }
.tool-switcher { margin-top: 38px; }
.tool-switcher > p { margin: 0 0 11px; color: #676d63; font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.tool-switcher-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-switcher a { padding: 8px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #92988e; background: rgba(255,255,255,.025); text-decoration: none; font-size: .68rem; }
.tool-switcher a:hover, .tool-switcher a[aria-current="page"] { color: #172016; border-color: var(--tool-green); background: var(--tool-green); }

@media (max-width: 900px) {
  .tool-page { width: min(100% - 28px, 720px); padding-top: 104px; }
  .tool-shell { grid-template-columns: 1fr; }
  .tool-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .tool-page { width: min(100% - 24px, 540px); padding-bottom: 50px; }
  .tool-hero { margin-bottom: 20px; }
  .tool-card { padding: 18px; border-radius: 17px; }
  .tool-fields { grid-template-columns: 1fr; }
  .tool-field--wide { grid-column: auto; }
  .tool-result-grid { grid-template-columns: 1fr 1fr; }
  .tool-signup { align-items: flex-start; flex-wrap: wrap; padding: 15px; }
  .tool-signup p { flex: 1 1 calc(100% - 48px); font-size: .72rem; }
  .tool-signup a { width: 100%; }
  .tool-actions { flex-direction: column; }
  .tool-reset { order: 2; }
  .macro-plan { padding: 15px 10px; }
  .macro-rings { gap: 7px; }
  .macro-ring { width: min(100%, 82px); }
  .macro-ring::before { inset: 7px; }
  .macro-ring output { font-size: .84rem; }
  .macro-ring span { font-size: .62rem; }
}

@media (max-width: 390px) {
  .tool-result-grid { grid-template-columns: 1fr; }
  .tool-result-main output { font-size: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-submit, .tool-back { transition: none; }
}

/* Light "home-v2" theme for calculators, shared by the public tool pages and the nutrition page. */
.home-v2 .tool-back { color: var(--v2-copy); }
.home-v2 .tool-back:hover { color: var(--v2-purple); }
.home-v2 .tool-eyebrow { color: var(--v2-copy); }
.home-v2 .tool-hero h1 { color: var(--v2-ink); }
.home-v2 .tool-hero > p:last-child { color: var(--v2-copy); }
.home-v2 .tool-card { border: 0; background: var(--v2-paper); box-shadow: 0 6px 18px rgba(46, 81, 130, .16); backdrop-filter: none; }
.home-v2 .tool-card-head h2 { color: var(--v2-ink); }
.home-v2 .tool-card-head p { color: var(--v2-copy); }
.home-v2 .tool-step { color: var(--v2-action); background: var(--v2-soft); border: 0; }
.home-v2 .tool-segment { border: 0; background: var(--v2-soft); }
.home-v2 .tool-segment button { color: var(--v2-copy); }
.home-v2 .tool-segment button:hover { color: var(--v2-ink); }
.home-v2 .tool-segment button.is-selected { color: #fff; background: var(--v2-action); }
.home-v2 .tool-field > span, .home-v2 .tool-field legend { color: var(--v2-ink); }
.home-v2 .tool-input-wrap input, .home-v2 .tool-field select { color: var(--v2-ink); background: var(--v2-soft); border: 0; }
.home-v2 .tool-field select { color-scheme: light; }
.home-v2 .tool-input-wrap input:focus, .home-v2 .tool-field select:focus { box-shadow: 0 0 0 2px var(--v2-action); }
.home-v2 .tool-input-wrap span { color: var(--v2-copy); }
.home-v2 .tool-field small { color: var(--v2-copy); }
.home-v2 .tool-submit { color: #fff; background: var(--v2-action); border: 0; box-shadow: none; }
.home-v2 .tool-submit:hover { background: #3a5f98; }
.home-v2 .tool-reset { color: var(--v2-copy); background: var(--v2-soft); border: 0; }
.home-v2 .tool-result-label { color: var(--v2-action); }
.home-v2 .tool-result-main output { color: var(--v2-ink); }
.home-v2 .tool-result-main span { color: var(--v2-copy); }
.home-v2 .tool-result-title { color: var(--v2-ink); }
.home-v2 .tool-stat { border: 0; background: var(--v2-soft); }
.home-v2 .tool-stat span { color: var(--v2-copy); }
.home-v2 .tool-stat output, .home-v2 .tool-stat strong { color: var(--v2-ink); }
/* Goal cards are buttons: the selected one sets the calories behind the daily macros. */
.tool-stat--goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; width: 100%; font: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; transition: box-shadow .15s ease, background-color .15s ease; }
.tool-stat--goal span { grid-column: 1 / -1; }
.tool-stat--goal::after { content: "Apply"; padding: 3px 9px; border-radius: 999px; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.tool-stat--goal[aria-pressed="true"]::after { content: "Applied \2713"; }
.tool-stat--goal:focus-visible { outline: 3px solid #5b4a9e; outline-offset: 2px; }
.home-v2 .tool-stat--goal::after { color: var(--v2-action); background: #fff; }
.home-v2 .tool-stat--goal:hover { box-shadow: inset 0 0 0 2px var(--v2-outline); }
.home-v2 .tool-stat--goal.is-active { background: #fff; box-shadow: inset 0 0 0 2px var(--v2-action); }
.home-v2 .tool-stat--goal.is-active::after { color: #fff; background: var(--v2-action); }
.tool-result-basis { margin: -16px 0 22px; font-size: .78rem; line-height: 1.45; }
.home-v2 .tool-result-basis { color: var(--v2-copy); }
@media (prefers-reduced-motion: reduce) { .tool-stat--goal { transition: none; } }
.home-v2 .tool-result-note { color: var(--v2-copy); }
.home-v2 .macro-plan { border: 0; background: var(--v2-soft); }
.home-v2 .macro-plan-head > span { color: var(--v2-ink); }
.home-v2 .macro-plan-head output { color: var(--v2-copy); }
.home-v2 .macro-ring { background: conic-gradient(var(--ring-color) calc(var(--share) * 1%), #bed3f0 0); box-shadow: none; }
.home-v2 .macro-ring::before { background: var(--v2-paper); box-shadow: none; }
.home-v2 .macro-ring output { color: var(--v2-ink); }
.home-v2 .macro-ring span { color: var(--v2-copy); }
.home-v2 .tool-table-wrap { border: 0; }
.home-v2 .tool-table th { color: var(--v2-copy); background: var(--v2-soft); }
.home-v2 .tool-table td { color: var(--v2-ink); border-bottom-color: var(--v2-outline); }
.home-v2 .tool-table td:last-child { color: var(--v2-action); }
.home-v2 .tool-signup { border: 0; background: var(--v2-soft); }
.home-v2 .tool-signup-icon { color: #fff; background: var(--v2-purple); }
.home-v2 .tool-signup p { color: var(--v2-copy); }
.home-v2 .tool-signup strong { color: var(--v2-ink); }
.home-v2 .tool-signup a { color: #fff; background: var(--v2-purple); }
.home-v2 .tool-signup a:hover { background: #4a3c81; }
.home-v2 .tool-info-grid article { border: 0; background: var(--v2-paper); box-shadow: 0 4px 14px rgba(46, 81, 130, .12); }
.home-v2 .tool-info-grid h2, .home-v2 .tool-info-grid h3 { color: var(--v2-ink); }
.home-v2 .tool-info-grid p, .home-v2 .tool-info-grid li { color: var(--v2-copy); }
.home-v2 .tool-switcher > p { color: var(--v2-copy); }
.home-v2 .tool-switcher a { color: var(--v2-copy); background: var(--v2-soft); border: 0; }
.home-v2 .tool-switcher a:hover, .home-v2 .tool-switcher a[aria-current="page"] { color: #fff; background: var(--v2-action); }
.home-v2 .tool-error { color: #a13f2c; }

/* Body fat from tape measurements (Hero Hub Nutrition), read live under the profile fields. */
.tool-bodyfat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--v2-soft, #e4eefb); }
.tool-bodyfat > span { color: var(--v2-copy, #3a5c87); font-size: .78rem; font-weight: 700; }
.tool-bodyfat output { color: var(--v2-ink, #1f3a5f); font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tool-bodyfat small { flex-basis: 100%; color: var(--v2-copy, #3a5c87); font-size: .7rem; line-height: 1.4; }

/* Daily target (Hero Hub Nutrition): the calories to eat, with the adjustment wheel right beside them. */
.macro-plan--target .macro-plan-head { flex-wrap: wrap; margin-bottom: 12px; }
.daily-target { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.daily-target__value { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.daily-target__value output { color: var(--v2-ink, #1f3a5f); font-size: clamp(2.1rem, 4vw, 2.6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.daily-target__value span { color: var(--v2-copy, #3a5c87); font-size: .8rem; font-weight: 700; }
.daily-target__source { margin: 10px 0 0; color: var(--v2-copy, #3a5c87); font-size: .8rem; line-height: 1.45; }
.daily-target__adjust { margin: 4px 0 0; color: var(--v2-ink, #1f3a5f); font-size: .8rem; font-weight: 700; line-height: 1.45; }
.daily-target__adjust[hidden] { display: none; }
.daily-target__adjust button { padding: 0; border: 0; color: var(--v2-action, #4a72b0); background: none; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.macro-plan--target .macro-rings { margin-top: 18px; }

/* Calorie adjustment: the ± button opens a wheel of percentages under it, with no disc behind it: the steps float
   on a dotted orbit around a navy hub that previews the calories of the step under the pointer. Increases sit on
   the right half, decreases on the left, and the rest of the result card fades back while the wheel is open. */
.carb-adjust { position: relative; z-index: 6; }
.carb-adjust__toggle {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 11px; border: 2px solid var(--v2-ink, #1f3a5f); border-radius: 999px;
  color: var(--v2-ink, #1f3a5f); background: var(--v2-paper, #fff); box-shadow: 3px 3px 0 var(--v2-ink, #1f3a5f);
  font: inherit; font-size: 1.15rem; font-weight: 900; line-height: 1; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.carb-adjust__toggle:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--v2-ink, #1f3a5f); }
.carb-adjust.is-adjusted .carb-adjust__toggle { color: #fff; background: var(--v2-action, #4a72b0); font-size: .82rem; }
.carb-adjust.is-open .carb-adjust__toggle { color: #fff; background: var(--v2-ink, #1f3a5f); }
.carb-adjust__toggle:focus-visible, .carb-adjust__wheel button:focus-visible { outline: 3px solid var(--v2-purple, #5b4a9e); outline-offset: 3px; }
.carb-adjust__wheel {
  --wheel-shift: 0px; position: absolute; top: calc(100% + 14px); left: 50%; width: 216px; height: 216px; margin-left: -108px; border-radius: 50%;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(var(--wheel-shift)) scale(.55); transform-origin: calc(50% - var(--wheel-shift)) -14px;
  transition: opacity .18s ease, transform .3s cubic-bezier(.2, 1.3, .4, 1), visibility 0s linear .3s;
}
.carb-adjust__wheel::before { content: ""; position: absolute; inset: 30px; border: 2px dashed var(--v2-outline, #a9c4ea); border-radius: 50%; pointer-events: none; }
.carb-adjust.is-open .carb-adjust__wheel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(var(--wheel-shift)) scale(1); transition-delay: 0s; }
.carb-adjust__center {
  position: absolute; inset: 62px; display: grid; place-content: center; margin: 0; border: 3px solid var(--v2-paper, #fff); border-radius: 50%;
  background: var(--v2-ink, #1f3a5f); box-shadow: 4px 5px 0 rgba(31, 58, 95, .28); text-align: center;
}
.carb-adjust__center strong { color: #fff; font-size: 1.05rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.carb-adjust__center small { margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.carb-adjust__wheel button {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0;
  border: 2px solid var(--v2-ink, #1f3a5f); border-radius: 50%; color: #fff; background: var(--v2-action, #4a72b0); box-shadow: 2px 3px 0 var(--v2-ink, #1f3a5f);
  font: inherit; font-size: .72rem; font-weight: 900; cursor: pointer;
  transform: rotate(var(--angle)) translate(30px) rotate(calc(var(--angle) * -1)) scale(.4);
  transition: transform .3s cubic-bezier(.2, 1.3, .4, 1) calc(var(--i) * 24ms), background .15s ease;
}
.carb-adjust__wheel button[data-carb-step^="-"] { color: var(--v2-ink, #1f3a5f); background: var(--v2-paper, #fff); }
.carb-adjust__wheel button:hover, .carb-adjust__wheel button:focus-visible { color: #fff; background: #3a5f98; }
.carb-adjust__wheel button[aria-pressed="true"] { color: #fff; background: var(--v2-ink, #1f3a5f); }
.carb-adjust.is-open .carb-adjust__wheel button { transform: rotate(var(--angle)) translate(78px) rotate(calc(var(--angle) * -1)) scale(1); }
.carb-adjust.is-open .carb-adjust__wheel button:hover { transform: rotate(var(--angle)) translate(78px) rotate(calc(var(--angle) * -1)) scale(1.12); transition-delay: 0s; }
/* While the wheel is open, the result card fades back so the floating steps stay easy to read. */
.tool-result::before { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(244, 248, 254, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.tool-result.has-carb-wheel::before { opacity: 1; visibility: visible; transition-delay: 0s; }
.tool-result.has-carb-wheel .daily-target { position: relative; z-index: 6; }
@media (prefers-reduced-motion: reduce) {
  .carb-adjust__toggle, .carb-adjust__wheel, .carb-adjust__wheel button, .tool-result::before { transition: none; }
}