:where(.kbb-ratio-calculator-container.kbb-rec, .kbb-ratio-calculator-container.kbb-rec *) {
  box-sizing: border-box !important;
}

.kbb-ratio-calculator-container.kbb-rec {
  --kbb-ink: #2b2119;
  --kbb-muted: #6f5f51;
  --kbb-line: #6b5745;
  --kbb-line-soft: #b99d7a;
  --kbb-shell: #faf2e8;
  --kbb-title-a: #fff8ed;
  --kbb-title-b: #f6e4c9;
  --kbb-paper: #fffdf7;
  --kbb-field: #fff7e8;
  --kbb-chip: #faecd4;
  --kbb-green: #e3efd2;
  --kbb-blue: #dfeef8;
  --kbb-warn: #f5dfbd;
  --kbb-shadow: rgba(82, 65, 50, 0.22);
  width: min(940px, 100%) !important;
  max-width: 940px !important;
  margin: 0 auto 28px !important;
  padding: 0 !important;
  color: var(--kbb-ink) !important;
  font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background:
    linear-gradient(rgba(107, 87, 69, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 87, 69, .035) 1px, transparent 1px),
    var(--kbb-shell) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  border: 2px solid var(--kbb-line) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--kbb-shadow) !important;
  overflow: hidden !important;
}

.kbb-rec__title {
  display: grid !important;
  gap: 8px !important;
  padding: 20px 24px 18px !important;
  margin: 0 !important;
  color: var(--kbb-ink) !important;
  background: linear-gradient(135deg, var(--kbb-title-a) 0%, var(--kbb-title-b) 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.kbb-rec__eyebrow,
.kbb-rec__title p,
.kbb-rec__panel-head p,
.kbb-rec__hint,
.kbb-rec__formula p,
.kbb-rec__status {
  margin: 0 !important;
}

.kbb-rec__eyebrow {
  width: fit-content !important;
  padding: 4px 9px !important;
  color: #4a392b !important;
  background: rgba(255, 255, 255, .42) !important;
  border: 1px solid rgba(107, 87, 69, .45) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

.kbb-rec__title h2 {
  margin: 0 !important;
  color: var(--kbb-ink) !important;
  font-size: clamp(25px, 3vw, 34px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

.kbb-rec__title p:not(.kbb-rec__eyebrow) {
  max-width: 720px !important;
  color: #5e4c3e !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
  letter-spacing: -.018em !important;
}

.kbb-rec__body {
  display: block !important;
  padding: 14px !important;
  border-top: 2px solid var(--kbb-line) !important;
  background: rgba(255, 249, 239, .72) !important;
}

.kbb-rec__modebar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}

.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode,
.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action {
  appearance: none !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border: 2px solid var(--kbb-line) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(82, 65, 50, .16) !important;
  color: var(--kbb-ink) !important;
  background: var(--kbb-title-a) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 34px !important;
  letter-spacing: -.018em !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode.is-active,
.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode[aria-selected="true"] {
  background: var(--kbb-green) !important;
  color: var(--kbb-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 2px 2px 0 rgba(82, 65, 50, .16) !important;
}

.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action--sample {
  background: var(--kbb-green) !important;
}

.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode:hover,
.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action:hover,
.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode:focus-visible,
.kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action:focus-visible {
  background: var(--kbb-chip) !important;
  color: var(--kbb-ink) !important;
  outline: 2px solid #2b2119 !important;
  outline-offset: 2px !important;
}

.kbb-rec__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.kbb-rec__panel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 294px !important;
  padding: 12px !important;
  background: rgba(255, 253, 247, .96) !important;
  border: 2px solid var(--kbb-line) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(82, 65, 50, .14) !important;
  color: var(--kbb-ink) !important;
}

.kbb-rec__panel-head {
  display: grid !important;
  gap: 4px !important;
  min-height: 47px !important;
  margin: 0 0 10px !important;
}

.kbb-rec__panel-head h3 {
  margin: 0 !important;
  color: var(--kbb-ink) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}

.kbb-rec__panel-head p,
.kbb-rec__hint,
.kbb-rec__formula p,
.kbb-rec__status {
  color: var(--kbb-muted) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -.012em !important;
}

.kbb-rec__mode-panel,
.kbb-rec__result-panel {
  display: grid !important;
  gap: 10px !important;
}

.kbb-rec__mode-panel[hidden],
.kbb-rec__result-panel[hidden],
.kbb-rec__compat-button {
  display: none !important;
}

.kbb-rec__field-grid,
.kbb-rec__season-grid,
.kbb-rec__compare-grid {
  display: grid !important;
  gap: 8px !important;
}

.kbb-rec__field-grid--two,
.kbb-rec__season-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.kbb-rec__field {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.kbb-rec__label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #3c3027 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

.kbb-rec__label em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 20px !important;
  padding: 0 6px !important;
  color: #4d3827 !important;
  background: var(--kbb-chip) !important;
  border: 1px solid rgba(107, 87, 69, .5) !important;
  border-radius: 0 !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.kbb-ratio-calculator-container.kbb-rec input[type="number"] {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  color: var(--kbb-ink) !important;
  -webkit-text-fill-color: var(--kbb-ink) !important;
  background: var(--kbb-field) !important;
  border: 2px solid var(--kbb-line) !important;
  border-radius: 0 !important;
  box-shadow: inset 2px 2px 0 rgba(107, 87, 69, .08) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  font-variation-settings: "wght" 950 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 38px !important;
  letter-spacing: -.015em !important;
}

.kbb-ratio-calculator-container.kbb-rec input[type="number"]::placeholder {
  color: #aa9b8e !important;
  -webkit-text-fill-color: #aa9b8e !important;
  font-weight: 650 !important;
  opacity: 1 !important;
}

.kbb-ratio-calculator-container.kbb-rec input[type="number"]:focus {
  outline: 2px solid #2b2119 !important;
  outline-offset: 2px !important;
  background: #fffaf1 !important;
}

.kbb-rec__season-card {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--kbb-line-soft) !important;
  border-radius: 0 !important;
  background: rgba(250, 236, 212, .42) !important;
}

.kbb-rec__season-card legend {
  padding: 0 4px !important;
  color: var(--kbb-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.kbb-rec__actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}

.kbb-rec__status {
  min-height: 18px !important;
  margin-top: 6px !important;
  color: #5f4a36 !important;
}

.kbb-rec__hero {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  min-height: 126px !important;
  padding: 14px 12px !important;
  color: var(--kbb-ink) !important;
  background: var(--kbb-blue) !important;
  border: 2px solid var(--kbb-line) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55) !important;
  text-align: center !important;
}

.kbb-rec__hero span,
.kbb-rec__metric-card span,
.kbb-rec__formula span {
  color: #5a493b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
}

.kbb-rec__hero strong {
  color: var(--kbb-ink) !important;
  font-size: clamp(46px, 6vw, 64px) !important;
  font-weight: 950 !important;
  font-variation-settings: "wght" 950 !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

.kbb-rec__hero small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  margin-top: 6px !important;
  padding: 3px 9px !important;
  color: var(--kbb-ink) !important;
  background: rgba(255, 253, 247, .82) !important;
  border: 1px solid rgba(107, 87, 69, .55) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.kbb-rec__rating-scale {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.kbb-rec__rating-chip {
  display: grid !important;
  justify-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding: 7px 4px !important;
  color: var(--kbb-ink) !important;
  background: rgba(250, 236, 212, .62) !important;
  border: 1px solid rgba(107, 87, 69, .45) !important;
  border-radius: 0 !important;
  text-align: center !important;
}

.kbb-rec__rating-chip span {
  color: #644d39 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.kbb-rec__rating-chip strong {
  color: var(--kbb-ink) !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.kbb-rec__rating-chip.is-active {
  background: var(--kbb-green) !important;
  border-color: var(--kbb-line) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5) !important;
}

.kbb-rec__compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.kbb-rec__metric-card {
  display: grid !important;
  gap: 5px !important;
  align-content: center !important;
  min-height: 84px !important;
  padding: 10px !important;
  color: var(--kbb-ink) !important;
  background: var(--kbb-blue) !important;
  border: 2px solid var(--kbb-line) !important;
  border-radius: 0 !important;
  text-align: center !important;
}

.kbb-rec__metric-card--wide {
  grid-column: 1 / -1 !important;
  background: var(--kbb-green) !important;
}

.kbb-rec__metric-card strong {
  color: var(--kbb-ink) !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 950 !important;
  font-variation-settings: "wght" 950 !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

#ratio-change.positive {
  color: #2f6f38 !important;
}

#ratio-change.negative {
  color: #9a382e !important;
}

.kbb-rec__formula {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 12px !important;
  padding: 10px 12px !important;
  color: var(--kbb-ink) !important;
  background: rgba(255, 248, 237, .72) !important;
  border: 1px dashed rgba(107, 87, 69, .65) !important;
  border-radius: 0 !important;
}

.kbb-rec__formula div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.kbb-rec__formula strong {
  color: var(--kbb-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.kbb-rec__formula p {
  color: #5c4b3d !important;
}

body[data-scheme="dark"] .kbb-ratio-calculator-container.kbb-rec,
body[data-scheme="inverse"] .kbb-ratio-calculator-container.kbb-rec,
.kbb-ratio-calculator-container.kbb-rec.dark-mode {
  --kbb-ink: #f7ead9;
  --kbb-muted: #d4c4b3;
  --kbb-line: #c9aa7d;
  --kbb-line-soft: #8f765c;
  --kbb-shell: #201811;
  --kbb-title-a: #302317;
  --kbb-title-b: #49361f;
  --kbb-paper: #2a2018;
  --kbb-field: #241b14;
  --kbb-chip: #4a3623;
  --kbb-green: #37472c;
  --kbb-blue: #263e4d;
  --kbb-warn: #514029;
  --kbb-shadow: rgba(0, 0, 0, .35);
  color: var(--kbb-ink) !important;
  background:
    linear-gradient(rgba(235, 205, 160, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235, 205, 160, .055) 1px, transparent 1px),
    var(--kbb-shell) !important;
  border-color: var(--kbb-line) !important;
}

body[data-scheme="dark"] .kbb-rec__title,
body[data-scheme="inverse"] .kbb-rec__title,
.kbb-rec.dark-mode .kbb-rec__title {
  background: linear-gradient(135deg, #302317 0%, #49361f 100%) !important;
}

body[data-scheme="dark"] .kbb-rec__eyebrow,
body[data-scheme="inverse"] .kbb-rec__eyebrow,
.kbb-rec.dark-mode .kbb-rec__eyebrow {
  color: #f7ead9 !important;
  background: #3a2a1d !important;
  border-color: rgba(237, 204, 155, .62) !important;
}

body[data-scheme="dark"] .kbb-rec__title h2,
body[data-scheme="inverse"] .kbb-rec__title h2,
body[data-scheme="dark"] .kbb-rec__panel-head h3,
body[data-scheme="inverse"] .kbb-rec__panel-head h3,
body[data-scheme="dark"] .kbb-rec__metric-card strong,
body[data-scheme="inverse"] .kbb-rec__metric-card strong,
body[data-scheme="dark"] .kbb-rec__hero strong,
body[data-scheme="inverse"] .kbb-rec__hero strong,
body[data-scheme="dark"] .kbb-rec__rating-chip strong,
body[data-scheme="inverse"] .kbb-rec__rating-chip strong,
body[data-scheme="dark"] .kbb-rec__formula strong,
body[data-scheme="inverse"] .kbb-rec__formula strong,
.kbb-rec.dark-mode .kbb-rec__title h2,
.kbb-rec.dark-mode .kbb-rec__panel-head h3,
.kbb-rec.dark-mode .kbb-rec__metric-card strong,
.kbb-rec.dark-mode .kbb-rec__hero strong,
.kbb-rec.dark-mode .kbb-rec__rating-chip strong,
.kbb-rec.dark-mode .kbb-rec__formula strong {
  color: var(--kbb-ink) !important;
  -webkit-text-fill-color: var(--kbb-ink) !important;
}

body[data-scheme="dark"] .kbb-rec__title p:not(.kbb-rec__eyebrow),
body[data-scheme="inverse"] .kbb-rec__title p:not(.kbb-rec__eyebrow),
body[data-scheme="dark"] .kbb-rec__panel-head p,
body[data-scheme="inverse"] .kbb-rec__panel-head p,
body[data-scheme="dark"] .kbb-rec__hint,
body[data-scheme="inverse"] .kbb-rec__hint,
body[data-scheme="dark"] .kbb-rec__status,
body[data-scheme="inverse"] .kbb-rec__status,
body[data-scheme="dark"] .kbb-rec__formula p,
body[data-scheme="inverse"] .kbb-rec__formula p,
.kbb-rec.dark-mode .kbb-rec__title p:not(.kbb-rec__eyebrow),
.kbb-rec.dark-mode .kbb-rec__panel-head p,
.kbb-rec.dark-mode .kbb-rec__hint,
.kbb-rec.dark-mode .kbb-rec__status,
.kbb-rec.dark-mode .kbb-rec__formula p {
  color: var(--kbb-muted) !important;
  -webkit-text-fill-color: var(--kbb-muted) !important;
}

body[data-scheme="dark"] .kbb-rec__body,
body[data-scheme="inverse"] .kbb-rec__body,
.kbb-rec.dark-mode .kbb-rec__body {
  background: rgba(34, 25, 18, .88) !important;
  border-top-color: var(--kbb-line) !important;
}

body[data-scheme="dark"] .kbb-rec__panel,
body[data-scheme="inverse"] .kbb-rec__panel,
.kbb-rec.dark-mode .kbb-rec__panel {
  background: rgba(42, 32, 24, .96) !important;
  border-color: var(--kbb-line) !important;
}

body[data-scheme="dark"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode,
body[data-scheme="inverse"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode,
body[data-scheme="dark"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action,
body[data-scheme="inverse"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action,
.kbb-rec.dark-mode button.kbb-rec__mode,
.kbb-rec.dark-mode button.kbb-rec__action {
  color: var(--kbb-ink) !important;
  -webkit-text-fill-color: var(--kbb-ink) !important;
  background: #3a2a1d !important;
  border-color: var(--kbb-line) !important;
}

body[data-scheme="dark"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode.is-active,
body[data-scheme="inverse"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode.is-active,
body[data-scheme="dark"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action--sample,
body[data-scheme="inverse"] .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action--sample,
.kbb-rec.dark-mode button.kbb-rec__mode.is-active,
.kbb-rec.dark-mode button.kbb-rec__action--sample {
  background: var(--kbb-green) !important;
}

body[data-scheme="dark"] .kbb-rec__label,
body[data-scheme="inverse"] .kbb-rec__label,
body[data-scheme="dark"] .kbb-rec__label em,
body[data-scheme="inverse"] .kbb-rec__label em,
body[data-scheme="dark"] .kbb-rec__hero span,
body[data-scheme="inverse"] .kbb-rec__hero span,
body[data-scheme="dark"] .kbb-rec__metric-card span,
body[data-scheme="inverse"] .kbb-rec__metric-card span,
body[data-scheme="dark"] .kbb-rec__formula span,
body[data-scheme="inverse"] .kbb-rec__formula span,
body[data-scheme="dark"] .kbb-rec__rating-chip span,
body[data-scheme="inverse"] .kbb-rec__rating-chip span,
.kbb-rec.dark-mode .kbb-rec__label,
.kbb-rec.dark-mode .kbb-rec__label em,
.kbb-rec.dark-mode .kbb-rec__hero span,
.kbb-rec.dark-mode .kbb-rec__metric-card span,
.kbb-rec.dark-mode .kbb-rec__formula span,
.kbb-rec.dark-mode .kbb-rec__rating-chip span {
  color: #ead7bd !important;
  -webkit-text-fill-color: #ead7bd !important;
}

body[data-scheme="dark"] .kbb-rec__label em,
body[data-scheme="inverse"] .kbb-rec__label em,
.kbb-rec.dark-mode .kbb-rec__label em {
  background: var(--kbb-chip) !important;
  border-color: rgba(237, 204, 155, .45) !important;
}

body[data-scheme="dark"] .kbb-ratio-calculator-container.kbb-rec input[type="number"],
body[data-scheme="inverse"] .kbb-ratio-calculator-container.kbb-rec input[type="number"],
.kbb-rec.dark-mode input[type="number"] {
  color: var(--kbb-ink) !important;
  -webkit-text-fill-color: var(--kbb-ink) !important;
  background: var(--kbb-field) !important;
  border-color: var(--kbb-line) !important;
}

body[data-scheme="dark"] .kbb-rec__season-card,
body[data-scheme="inverse"] .kbb-rec__season-card,
.kbb-rec.dark-mode .kbb-rec__season-card {
  background: rgba(74, 54, 35, .42) !important;
  border-color: var(--kbb-line-soft) !important;
}

body[data-scheme="dark"] .kbb-rec__season-card legend,
body[data-scheme="inverse"] .kbb-rec__season-card legend,
.kbb-rec.dark-mode .kbb-rec__season-card legend {
  color: var(--kbb-ink) !important;
}

body[data-scheme="dark"] .kbb-rec__hero,
body[data-scheme="inverse"] .kbb-rec__hero,
body[data-scheme="dark"] .kbb-rec__metric-card,
body[data-scheme="inverse"] .kbb-rec__metric-card,
body[data-scheme="dark"] .kbb-rec__rating-chip,
body[data-scheme="inverse"] .kbb-rec__rating-chip,
body[data-scheme="dark"] .kbb-rec__formula,
body[data-scheme="inverse"] .kbb-rec__formula,
.kbb-rec.dark-mode .kbb-rec__hero,
.kbb-rec.dark-mode .kbb-rec__metric-card,
.kbb-rec.dark-mode .kbb-rec__rating-chip,
.kbb-rec.dark-mode .kbb-rec__formula {
  border-color: var(--kbb-line) !important;
  color: var(--kbb-ink) !important;
}
body[data-scheme="dark"] .kbb-rec__formula,
body[data-scheme="inverse"] .kbb-rec__formula,
.kbb-rec.dark-mode .kbb-rec__formula {
  background: #2a2018 !important;
}

body[data-scheme="dark"] .kbb-rec__rating-chip,
body[data-scheme="inverse"] .kbb-rec__rating-chip,
.kbb-rec.dark-mode .kbb-rec__rating-chip {
  background: rgba(74, 54, 35, .56) !important;
}

body[data-scheme="dark"] .kbb-rec__rating-chip.is-active,
body[data-scheme="inverse"] .kbb-rec__rating-chip.is-active,
.kbb-rec.dark-mode .kbb-rec__rating-chip.is-active {
  background: var(--kbb-green) !important;
}

body[data-scheme="dark"] .kbb-rec__hero small,
body[data-scheme="inverse"] .kbb-rec__hero small,
.kbb-rec.dark-mode .kbb-rec__hero small {
  color: var(--kbb-ink) !important;
  -webkit-text-fill-color: var(--kbb-ink) !important;
  background: #3a2a1d !important;
  border-color: rgba(237, 204, 155, .62) !important;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .kbb-ratio-calculator-container.kbb-rec {
    --kbb-ink: #f7ead9;
    --kbb-muted: #d4c4b3;
    --kbb-line: #c9aa7d;
    --kbb-line-soft: #8f765c;
    --kbb-shell: #201811;
    --kbb-title-a: #302317;
    --kbb-title-b: #49361f;
    --kbb-paper: #2a2018;
    --kbb-field: #241b14;
    --kbb-chip: #4a3623;
    --kbb-green: #37472c;
    --kbb-blue: #263e4d;
    --kbb-shadow: rgba(0, 0, 0, .35);
  }
}

@media (max-width: 760px) {
  .kbb-ratio-calculator-container.kbb-rec {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 22px !important;
    box-shadow: 3px 3px 0 rgba(82, 65, 50, .18) !important;
  }

  .kbb-rec__title {
    padding: 18px 16px 16px !important;
  }

  .kbb-rec__body {
    padding: 12px !important;
  }

  .kbb-rec__layout {
    grid-template-columns: 1fr !important;
  }

  .kbb-rec__panel {
    min-height: 0 !important;
    padding: 11px !important;
  }

  .kbb-rec__panel-head {
    min-height: 0 !important;
  }

  .kbb-rec__field-grid--two,
  .kbb-rec__season-grid,
  .kbb-rec__compare-grid {
    grid-template-columns: 1fr !important;
  }

  .kbb-rec__rating-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kbb-rec__formula {
    grid-template-columns: 1fr !important;
  }

  .kbb-rec__formula div {
    justify-content: flex-start !important;
  }
}

@media (max-width: 380px) {
  .kbb-rec__title {
    padding: 16px 13px 14px !important;
  }

  .kbb-rec__body {
    padding: 10px !important;
  }

  .kbb-rec__modebar,
  .kbb-rec__actions {
    gap: 6px !important;
  }

  .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__mode,
  .kbb-ratio-calculator-container.kbb-rec button.kbb-rec__action {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    line-height: 32px !important;
  }

  .kbb-rec__actions {
    grid-template-columns: 1fr !important;
  }

  .kbb-rec__hero strong {
    font-size: 44px !important;
  }
}