:root {
  --mix-red: #ca685e;
  --mix-amber: #d7a85c;
  --mix-green: #8eaa72;
  --mix-violet: #9c88b8;
  --mix-surface: rgba(18, 18, 15, .92);
  --mix-line: rgba(242, 238, 229, .14);
  --mix-focus: #f1d79c;
  --mix-panel: #131310;
  --mix-secondary: #bcb3a5;
  --mix-control-line: rgba(242, 238, 229, .27);
  --mix-transition: 180ms cubic-bezier(.22, 1, .36, 1);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mix-page {
  background:
    radial-gradient(circle at 78% 9%, rgba(212, 173, 103, .12), transparent 28rem),
    linear-gradient(180deg, #080807 0%, #0c0c0a 48%, #080807 100%);
}

.mix-page .section-page__header {
  grid-template-columns: auto 1fr auto auto;
}

.mix-mobile-current {
  color: var(--page-gold-bright) !important;
}

.mix-app {
  min-height: 100vh;
  padding-top: var(--page-header);
  overflow-anchor: none;
}

.mix-shell {
  width: min(1420px, calc(100vw - 64px));
  margin: 0 auto;
  padding: 30px 0 96px;
}

.mix-title {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, .7fr);
  column-gap: 48px;
  align-items: end;
  max-width: 1320px;
  margin-bottom: 30px;
}

.mix-back-link {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 18px;
  color: var(--page-copy);
  font-size: .74rem;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mix-back-link:hover {
  color: var(--page-gold-bright);
}

.mix-wordmark {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  color: var(--page-gold);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .34em;
}

.mix-wordmark span {
  display: block;
  margin-bottom: 4px;
  color: var(--page-ivory);
  font-size: 1.1rem;
  letter-spacing: .28em;
}

.mix-title h1 {
  grid-column: 1;
  max-width: 900px;
  margin: 0;
  color: var(--page-ivory);
  font-size: clamp(3.1rem, 5.2vw, 4.7rem);
  font-weight: 610;
  letter-spacing: -.04em;
  line-height: .93;
  text-wrap: balance;
}

.mix-title h1 em {
  color: var(--page-gold-bright);
  font-weight: 420;
}

.mix-title > p:last-child {
  grid-column: 2;
  max-width: 44ch;
  margin: 0 0 4px;
  color: var(--page-copy);
  font-size: 1.04rem;
  line-height: 1.6;
}

.mix-telegram-entry {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 14px;
  color: var(--page-gold-bright);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mix-telegram-entry:hover { color: var(--page-ivory); }

/* Once a method is chosen, the active task takes priority over the page title. */
.mix-app[data-step]:not([data-step="mode"]) .mix-title {
  margin-bottom: 24px;
}

.mix-app[data-step]:not([data-step="mode"]) .mix-title h1 {
  max-width: 780px;
  font-size: 2.5rem;
  line-height: 1.05;
}

.mix-app[data-step]:not([data-step="mode"]) .mix-title h1 br {
  display: none;
}

.mix-app[data-step]:not([data-step="mode"]) .mix-title h1 em {
  margin-left: .16em;
}

.mix-app[data-step]:not([data-step="mode"]) .mix-back-link {
  margin-bottom: 8px;
}

.mix-app[data-step]:not([data-step="mix"]) .mix-compatibility,
.mix-app[data-step]:not([data-step="mix"]) .mix-ledger-note {
  display: none;
}

.mix-progress {
  display: grid;
  grid-template-columns: repeat(var(--mix-progress-count, 5), 1fr);
  max-width: 980px;
  padding: 0;
  margin: 0 0 26px;
  list-style: none;
}

.mix-progress li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--page-muted);
}

.mix-progress li[hidden] {
  display: none;
}

.mix-progress li::after {
  position: absolute;
  top: 18px;
  right: 12px;
  left: 50px;
  height: 1px;
  content: "";
  background: var(--mix-line);
}

.mix-progress li:last-child::after {
  display: none;
}

.mix-progress span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--mix-line);
  border-radius: 50%;
  background: var(--page-ink);
  font-variant-numeric: tabular-nums;
}

.mix-progress strong {
  position: relative;
  z-index: 1;
  padding-right: 10px;
  background: var(--page-ink);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mix-progress li[aria-current="step"],
.mix-progress li[data-complete="true"] {
  color: var(--page-gold-bright);
}

.mix-progress li[aria-current="step"] span {
  border-color: var(--page-gold);
  background: var(--page-gold);
  color: #100d07;
}

.mix-progress li[data-complete="true"]::after {
  background: var(--page-gold);
}

.mix-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
  align-items: start;
  gap: 24px;
}

.mix-stage-column,
.mix-ledger {
  min-width: 0;
}

.mix-stage-column {
  position: relative;
  min-height: 520px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--mix-line);
  border-radius: 16px;
  background: rgba(12, 12, 10, .9);
}

.mix-step[hidden] {
  display: none;
}

.mix-step {
  animation: mix-reveal .22s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes mix-reveal {
  from { opacity: .7; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.mix-step-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.mix-step-heading > p {
  margin: 0 0 12px;
  color: var(--page-gold);
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mix-step-heading h2 {
  margin: 0 0 12px;
  color: var(--page-ivory);
  font-size: 2.5rem;
  font-weight: 580;
  letter-spacing: -.035em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

/* A programmatically focused heading is a destination, not an input field. */
.mix-step h2[data-step-focus]:focus {
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: var(--page-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.mix-step-heading > span {
  display: block;
  max-width: 62ch;
  color: var(--page-copy);
  font-size: .94rem;
  line-height: 1.55;
}

.mix-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--mix-line);
}

.mix-mode-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.mix-mode-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.mix-mode-option > span {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  gap: 8px 18px;
  align-items: center;
  min-height: 92px;
  padding: 22px 16px;
  border: 0;
  border-bottom: 1px solid var(--mix-line);
  border-radius: 0;
  background: transparent;
  transition: background var(--mix-transition);
}

.mix-mode-option > span::after {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  border: 1px solid var(--mix-control-line);
  border-radius: 50%;
  content: "";
}

.mix-mode-option svg {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  margin: 0;
  fill: none;
  stroke: var(--mix-secondary);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mix-mode-option strong {
  grid-column: 2;
  color: var(--page-ivory);
  font-size: 1.15rem;
}

.mix-mode-option small {
  grid-column: 2;
  color: var(--page-copy);
  font-size: .9rem;
  line-height: 1.5;
}

.mix-mode-option:hover > span {
  background: rgba(242, 238, 229, .035);
}

.mix-mode-option input:checked + span {
  background: rgba(212, 173, 103, .09);
}

.mix-mode-option input:checked + span svg {
  stroke: var(--page-gold-bright);
}

.mix-mode-option input:checked + span::after {
  border-color: var(--page-gold);
  background: radial-gradient(circle, var(--page-gold) 0 4px, transparent 5px);
}

.mix-mode-option input:focus-visible + span {
  outline: 2px solid var(--mix-focus);
  outline-offset: 4px;
}

.mix-bowl-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  padding: 0;
  border: 0;
}

.mix-bowl-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.mix-bowl-option input {
  position: absolute;
  opacity: 0;
}

.mix-bowl-option > span {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--mix-line);
  border-radius: 14px;
  background: var(--mix-panel);
  overflow: hidden;
  transition: border-color var(--mix-transition), background var(--mix-transition);
}

.mix-bowl-option[data-bowl-kind="fruit"] > span {
  background: var(--mix-panel);
}

.mix-bowl-option strong {
  align-self: end;
  color: var(--page-ivory);
  font-size: 1.25rem;
}

.mix-bowl-option b {
  margin: auto 0;
  color: var(--page-gold-bright);
  font-size: 3.35rem;
  font-weight: 460;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.mix-bowl-option small {
  color: var(--page-copy);
  font-size: .875rem;
  line-height: 1.5;
}

.mix-bowl-option input:checked + span {
  border-color: var(--page-gold);
  background-color: #211e16;
}

.mix-bowl-option input:focus-visible + span {
  outline: 2px solid var(--mix-focus);
  outline-offset: 4px;
}

.mix-bowl-option input:disabled + span {
  cursor: not-allowed;
  opacity: .55;
}

.mix-fruit-base-panel {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--mix-line);
}

.mix-fruit-base-panel[hidden],
.mix-taste-story[hidden] {
  display: none;
}

.mix-fruit-base-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mix-fruit-base-choice legend {
  margin-bottom: 12px;
  padding: 0;
  color: var(--page-ivory);
  font-size: 1.05rem;
  font-weight: 650;
}

.mix-fruit-base-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 10px;
  min-width: 0;
}

.mix-fruit-base-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.mix-fruit-base-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}

.mix-fruit-base-option__surface {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px 34px 12px 12px;
  border: 1px solid var(--mix-control-line);
  border-radius: 12px;
  background: var(--mix-panel);
  transition: border-color var(--mix-transition), background var(--mix-transition);
}

.mix-fruit-base-option__surface img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.mix-fruit-base-option__surface strong {
  min-width: 0;
  color: var(--page-ivory);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mix-fruit-base-option__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mix-fruit-base-option__copy small {
  color: var(--page-gold-bright);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.3;
}

.mix-fruit-base-option__surface::after {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 17px;
  height: 17px;
  border: 1px solid var(--mix-control-line);
  border-radius: 50%;
  content: "";
}

.mix-fruit-base-option input:checked + .mix-fruit-base-option__surface {
  border-color: var(--page-gold);
  background: #211e16;
}

.mix-fruit-base-option input:checked + .mix-fruit-base-option__surface::after {
  border-color: var(--page-gold);
  background: radial-gradient(circle, var(--page-gold) 0 3px, transparent 4px);
}

.mix-fruit-base-option input:focus-visible + .mix-fruit-base-option__surface {
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}

.mix-fruit-base-option input:disabled + .mix-fruit-base-option__surface {
  cursor: not-allowed;
  opacity: .55;
}

.mix-fruit-base-prompt,
.mix-fruit-base-error {
  margin: 10px 0 0;
  color: var(--mix-secondary);
  font-size: .82rem;
  line-height: 1.5;
}

.mix-fruit-base-error {
  color: #f0b7ad;
}

.mix-fruit-base-prompt:empty,
.mix-fruit-base-error:empty {
  display: none;
}

.mix-loading,
.mix-error-state {
  padding: 22px;
  border: 1px solid var(--mix-line);
  border-radius: 14px;
  color: var(--page-copy);
}

.mix-profile-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  min-width: 0;
  max-width: 760px;
}

.mix-popular-directions {
  display: grid;
  gap: 12px;
  margin: 0 0 30px;
  padding: 0 0 28px;
  border: 0;
  border-bottom: 1px solid var(--mix-line);
}

.mix-popular-directions legend {
  padding: 0;
  color: var(--page-ivory);
  font-size: 1.05rem;
  font-weight: 720;
}

.mix-popular-directions > p {
  max-width: 65ch;
  margin: 0;
  color: var(--page-copy);
  font-size: .82rem;
  line-height: 1.5;
}

.mix-popular-direction-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.mix-popular-direction-list button {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 64px;
  padding: 11px 14px;
  border: 1px solid var(--mix-line);
  border-radius: 12px;
  background: var(--mix-panel);
  color: var(--page-ivory);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--mix-transition), background var(--mix-transition);
}

.mix-popular-direction-list button small {
  color: var(--mix-secondary);
  font-size: .72rem;
}

.mix-popular-direction-list button:hover,
.mix-popular-direction-list button[aria-pressed="true"] {
  border-color: var(--page-gold);
  background: linear-gradient(135deg, rgba(212, 173, 103, .14), rgba(143, 92, 69, .07));
}

.mix-popular-direction-list button[aria-pressed="true"] small {
  color: var(--page-gold-bright);
}

.mix-popular-direction-list button:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}

.mix-popular-directions > .mix-popular-direction-status {
  min-height: 1.35em;
  color: var(--page-gold-bright);
}

.mix-profile-controls label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.mix-profile-controls label > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
}

.mix-profile-controls strong {
  min-width: 0;
  font-size: 1.04rem;
  overflow-wrap: anywhere;
}

.mix-profile-controls output {
  color: var(--page-gold-bright);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
}

.mix-page input[type="range"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  accent-color: var(--page-gold);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.mix-page input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--page-gold) var(--range-fill, 50%), rgba(242, 238, 229, .16) var(--range-fill, 50%));
}

.mix-page input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8.5px;
  border: 2px solid #f4dba4;
  border-radius: 50%;
  background: #b98c40;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  -webkit-appearance: none;
}

.mix-page input[type="range"]:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 6px;
  border-radius: 999px;
}

.mix-page input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 4px;
  background: rgba(242, 238, 229, .16);
}

.mix-page input[type="range"]::-moz-range-progress {
  height: 5px;
  border-radius: 4px;
  background: var(--page-gold);
}

.mix-page input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #f4dba4;
  border-radius: 50%;
  background: #b98c40;
}

.mix-community-recommendations {
  position: relative;
  display: grid;
  gap: 20px;
  margin: 0 0 32px;
  padding: 26px 0 30px;
  border-block: 1px solid var(--mix-line);
  background: transparent;
  isolation: isolate;
  overflow: hidden;
}

.mix-community-recommendations[hidden] {
  display: none;
}

.mix-community-recommendations::before {
  content: none;
}

.mix-community-intro {
  display: grid;
  gap: 8px;
  max-width: 72ch;
}

.mix-community-intro p,
.mix-community-intro h3,
.mix-community-intro span,
.mix-community-status {
  margin: 0;
}

.mix-community-intro p {
  color: var(--page-gold-bright);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mix-community-intro h3 {
  color: var(--page-ivory);
  font-family: var(--page-font-display);
  font-size: 1.6rem;
  font-weight: 580;
  letter-spacing: -.025em;
  line-height: 1.04;
}

.mix-community-intro span,
.mix-community-status {
  color: var(--page-copy);
  font-size: .82rem;
  line-height: 1.55;
}

.mix-community-status {
  min-height: 1.3em;
}

.mix-community-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.mix-community-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 14px;
  min-width: 0;
  padding: 19px;
  border: 1px solid rgba(242, 238, 229, .12);
  border-radius: 14px;
  background: var(--mix-panel);
  overflow: hidden;
  transition: border-color var(--mix-transition), background var(--mix-transition);
}

.mix-community-card:hover,
.mix-community-card[data-selected="true"] {
  border-color: rgba(212, 173, 103, .62);
  background: #211e16;
}

.mix-community-card:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}

.mix-community-card__header {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.mix-community-card__match,
.mix-community-card__mapping,
.mix-community-card__review,
.mix-community-traits span {
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 750;
  line-height: 1.3;
}

.mix-community-card__match {
  padding: 6px 9px;
  border: 1px solid rgba(212, 173, 103, .4);
  background: rgba(212, 173, 103, .11);
  color: var(--page-gold-bright);
}

.mix-community-card h4 {
  margin: 0;
  color: var(--page-ivory);
  font-size: 1.16rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.mix-community-card__mapping {
  padding: 0;
  color: var(--page-copy);
}

.mix-community-card__mapping[data-adapted="true"] {
  color: #d9bd8b;
}

.mix-community-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.mix-community-traits::before {
  align-self: center;
  margin-right: 2px;
  color: var(--page-muted);
  content: "Совпало:";
  font-size: .65rem;
}

.mix-community-traits span {
  padding: 5px 8px;
  border: 1px solid rgba(111, 129, 113, .42);
  background: rgba(111, 129, 113, .1);
  color: #cbd8cd;
}

.mix-community-ingredients {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mix-community-ingredients li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid rgba(242, 238, 229, .09);
  color: var(--page-copy);
  font-size: .75rem;
  line-height: 1.4;
}

.mix-community-ingredients li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mix-community-ingredients strong {
  color: var(--page-ivory);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mix-community-card__meta {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.mix-community-card__strength,
.mix-community-card__fact,
.mix-community-card__note {
  margin: 0;
  color: var(--page-copy);
  font-size: .7rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.mix-community-card__fact strong {
  color: var(--page-ivory);
  font-weight: 760;
}

.mix-community-card__review {
  padding: 6px 9px;
  border: 1px solid rgba(228, 154, 141, .36);
  background: rgba(228, 154, 141, .09);
  color: #edb5aa;
}

.mix-community-apply,
.mix-community-more {
  min-height: 46px;
  border: 1px solid var(--page-gold);
  border-radius: 12px;
  background: transparent;
  color: var(--page-ivory);
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .02em;
  transition: background var(--page-duration-fast), color var(--page-duration-fast), transform var(--page-duration-fast);
}

.mix-community-apply {
  width: 100%;
  padding: 10px 15px;
}

.mix-community-apply:hover,
.mix-community-apply[data-selected="true"],
.mix-community-more:hover {
  background: var(--page-gold);
  color: #17140f;
}

.mix-community-apply:focus-visible,
.mix-community-more:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 4px;
}

.mix-community-more {
  justify-self: center;
  min-width: min(100%, 220px);
  padding: 11px 22px;
}

.mix-community-empty {
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(212, 173, 103, .3);
  border-radius: 14px;
  color: var(--page-copy);
  font-size: .78rem;
  line-height: 1.5;
}

.mix-community-empty strong {
  color: var(--page-ivory);
}

.mix-sourced-evidence,
.mix-manual-notice {
  position: relative;
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0 0 24px;
  padding: 22px 0;
  border-block: 1px solid var(--mix-line);
  background: transparent;
  overflow: hidden;
}

.mix-sourced-evidence[hidden],
.mix-manual-notice[hidden],
.mix-compatibility[hidden],
.mix-mobile-evidence[hidden],
.mix-presets-wrap[hidden] {
  display: none !important;
}

.mix-sourced-evidence__intro,
.mix-manual-notice {
  overflow-wrap: anywhere;
}

.mix-sourced-evidence__intro {
  display: grid;
  gap: 8px;
  max-width: 74ch;
}

.mix-sourced-evidence__intro p,
.mix-sourced-evidence__intro h3,
.mix-sourced-evidence__intro span,
.mix-manual-notice p,
.mix-manual-notice h3,
.mix-manual-notice span {
  margin: 0;
}

.mix-sourced-evidence__intro p,
.mix-manual-notice > p {
  color: var(--page-gold-bright);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mix-sourced-evidence__intro h3,
.mix-manual-notice h3 {
  color: var(--page-ivory);
  font-family: var(--page-font-display);
  font-size: 1.4rem;
  font-weight: 560;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.mix-sourced-evidence__intro span,
.mix-manual-notice > span {
  color: var(--page-copy);
  font-size: .82rem;
  line-height: 1.6;
}

.mix-manual-notice {
  gap: 9px;
  border-color: var(--mix-line);
}

.mix-sourced-evidence__result {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--mix-line);
}

.mix-sourced-evidence__result:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 4px;
}

.mix-sourced-evidence__status {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(212, 173, 103, .42);
  border-radius: 999px;
  color: var(--page-gold-bright);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

.mix-sourced-evidence__status[data-status="supported"] {
  border-color: rgba(128, 168, 128, .46);
  background: rgba(111, 129, 113, .13);
  color: #cfe0cf;
}

.mix-sourced-evidence__status[data-status="partial"] {
  background: rgba(212, 173, 103, .1);
}

.mix-sourced-evidence__status[data-status="unverified"] {
  border-color: rgba(228, 154, 141, .4);
  background: rgba(228, 154, 141, .08);
  color: #edb5aa;
}

.mix-sourced-evidence__result strong,
.mix-sourced-evidence__result p {
  margin: 0;
}

.mix-sourced-evidence__result > strong {
  color: var(--page-ivory);
  font-size: 1rem;
  line-height: 1.35;
}

.mix-sourced-evidence__result > p {
  color: var(--page-copy);
  font-size: .78rem;
  line-height: 1.55;
}

.mix-sourced-evidence__matches,
.mix-sourced-suggestion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.mix-sourced-evidence__matches:empty,
.mix-sourced-suggestions:empty {
  display: none;
}

.mix-sourced-match,
.mix-sourced-suggestion {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(242, 238, 229, .11);
  border-radius: 14px;
  background: var(--mix-panel);
  overflow-wrap: anywhere;
}

.mix-sourced-match h4,
.mix-sourced-suggestion h5,
.mix-sourced-suggestions h4,
.mix-sourced-suggestions p {
  margin: 0;
}

.mix-sourced-match h4,
.mix-sourced-suggestion h5,
.mix-sourced-suggestions h4 {
  color: var(--page-ivory);
  font-size: .96rem;
  line-height: 1.35;
}

.mix-sourced-match__mapping,
.mix-sourced-suggestion__mapping {
  width: fit-content;
  max-width: 100%;
  color: #d9bd8b;
  font-size: .67rem;
  font-weight: 740;
}

.mix-sourced-match__mapping[data-exact="true"],
.mix-sourced-suggestion__mapping[data-exact="true"] {
  color: #cfe0cf;
}

.mix-sourced-match p,
.mix-sourced-suggestion p,
.mix-sourced-suggestions > p {
  color: var(--page-copy);
  font-size: .74rem;
  line-height: 1.5;
}



.mix-sourced-suggestions {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 4px;
}

.mix-sourced-suggestion__items {
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mix-sourced-suggestion__items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  color: var(--page-copy);
  font-size: .72rem;
  line-height: 1.4;
}

.mix-sourced-suggestion__items strong {
  color: var(--page-ivory);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mix-sourced-suggestion button {
  align-self: end;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--page-gold);
  border-radius: 12px;
  background: transparent;
  color: var(--page-ivory);
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  font-weight: 760;
}

.mix-sourced-suggestion button:hover {
  background: var(--page-gold);
  color: #17140f;
}

.mix-sourced-suggestion button:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 4px;
}

.mix-presets-wrap {
  margin-bottom: 26px;
}

.mix-presets-wrap h3,
.mix-flavor-picker summary {
  margin: 0 0 12px;
  color: var(--page-copy);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mix-presets {
  display: flex;
  gap: 10px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--page-gold) transparent;
}

.mix-preset {
  flex: 0 0 min(260px, 78vw);
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--mix-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  color: var(--page-ivory);
  cursor: pointer;
  text-align: left;
}

.mix-preset strong,
.mix-preset small {
  display: block;
}

.mix-preset strong {
  margin-bottom: 7px;
  font-size: .92rem;
}

.mix-preset small {
  color: var(--page-copy);
  line-height: 1.35;
}

.mix-preset:hover,
.mix-preset[data-selected="true"] {
  border-color: var(--page-gold);
  background: rgba(212, 173, 103, .08);
}

.mix-flavor-picker {
  margin: 26px 0;
  border-block: 1px solid var(--mix-line);
}

.mix-flavor-picker summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.mix-flavor-picker summary > strong {
  min-width: 0;
  color: var(--page-ivory);
  font-size: 1.2rem;
  letter-spacing: -.015em;
  text-transform: none;
}

.mix-flavor-picker summary small {
  margin-left: 0;
  color: var(--page-copy);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.mix-flavor-picker summary::-webkit-details-marker {
  display: none;
}

.mix-flavor-picker summary span {
  color: var(--page-gold-bright);
  font-size: 1.4rem;
  transition: transform var(--page-duration-fast);
}

.mix-flavor-picker[open] summary span {
  transform: rotate(45deg);
}

.mix-flavor-picker fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 12px;
  padding: 0 0 18px;
  border: 0;
}

.mix-catalog-tools {
  display: grid;
  gap: 14px;
  padding: 4px 0 18px;
}

.mix-flavor-search {
  display: grid;
  gap: 7px;
}

.mix-flavor-search > span {
  color: var(--page-copy);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.mix-flavor-search input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid var(--mix-control-line);
  border-radius: 12px;
  background: var(--mix-panel);
  color: var(--page-ivory);
  font: inherit;
}

.mix-flavor-search input::placeholder {
  color: var(--mix-secondary);
}

.mix-flavor-search input:focus-visible {
  border-color: var(--page-gold);
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}

.mix-category-filters {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  padding: 5px 4px 8px;
}

.mix-category-filters button {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--mix-line);
  border-radius: 999px;
  background: transparent;
  color: var(--page-copy);
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  overflow-wrap: anywhere;
}

.mix-recipe-share {
  box-sizing: border-box;
  width: min(820px, 100%);
  padding: 12px 0;
  color: var(--page-copy);
  font-size: .875rem;
  line-height: 1.5;
}
.mix-recipe-share p { margin: 0 0 8px; }
.mix-recipe-share label { display: block; margin-bottom: 8px; }
.mix-recipe-share input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--mix-line);
  border-radius: 12px;
  background: var(--page-night, #080807);
  color: var(--page-ivory);
  font: inherit;
  font-size: 1rem;
}
.mix-recipe-share input:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}
[data-copy-recipe-link][hidden],
[data-recipe-share-note][hidden],
[data-recipe-share-fallback][hidden] { display: none; }

.mix-category-filters button small {
  margin-left: 6px;
  color: inherit;
  font-size: .75rem;
  opacity: 1;
}

.mix-category-filters button:hover,
.mix-category-filters button[aria-pressed="true"] {
  border-color: var(--page-gold);
  background: rgba(212, 173, 103, .1);
  color: var(--page-ivory);
}

.mix-category-filters button[aria-pressed="true"] {
  background: var(--page-gold);
  color: #17140f;
  font-weight: 650;
}

.mix-category-filters button:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}

.mix-catalog-status {
  min-height: 1.3em;
  margin: 0;
  color: var(--page-copy);
  font-size: .875rem;
  line-height: 1.45;
}

.mix-flavor-limit-status {
  min-height: 1.35em;
  margin: -5px 0 0;
  color: var(--page-gold-bright);
  font-size: .78rem;
  line-height: 1.45;
}

.mix-flavor-limit-status[data-at-limit="true"] {
  color: #e7c487;
}

.mix-flavor-card {
  position: relative;
  display: grid;
  align-content: start;
  border: 1px solid var(--mix-line);
  border-radius: 14px;
  background: var(--mix-panel);
  overflow: hidden;
  transition: border-color var(--mix-transition), background var(--mix-transition);
}

.mix-flavor-card:has(input:checked) {
  border-color: var(--page-gold);
  background: #242017;
}

.mix-flavor-card[data-unavailable="true"] {
  opacity: .62;
}

.mix-flavor-card[data-limit-disabled="true"] {
  opacity: .68;
}

.mix-flavor-card[hidden],
[data-flavor-more-wrap][hidden] {
  display: none;
}

[data-flavor-more-wrap] {
  display: flex;
  justify-content: center;
  padding: 2px 0 24px;
}

.mix-flavor-more {
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid var(--mix-control-line);
  border-radius: 12px;
  background: var(--mix-panel);
  color: var(--page-ivory);
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  transition: background var(--mix-transition), border-color var(--mix-transition);
}

.mix-flavor-more:hover {
  border-color: var(--page-gold);
  background: #211e16;
}

.mix-flavor-more:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 4px;
}

.mix-flavor-option {
  position: relative;
  display: block;
}

.mix-flavor-option input {
  position: absolute;
  opacity: 0;
}

.mix-flavor-option__surface {
  display: grid;
  grid-template-columns: minmax(128px, .85fr) minmax(0, 1.15fr);
  min-height: 214px;
  padding: 0;
  color: var(--page-copy);
  cursor: pointer;
  line-height: 1.35;
}

.mix-flavor-option__surface::after {
  position: absolute;
  z-index: 7;
  top: 13px;
  right: 13px;
  display: grid;
  width: 22px;
  height: 22px;
  border: 1px solid var(--mix-control-line);
  border-radius: 50%;
  color: transparent;
  content: "";
  place-items: center;
  font-size: .72rem;
  font-style: normal;
}

.mix-flavor-media {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 214px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(212, 173, 103, .13), transparent 55%),
    #090907;
  isolation: isolate;
  pointer-events: none;
}

.mix-flavor-media::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 82%, rgba(19, 19, 16, .35)),
    linear-gradient(180deg, transparent 60%, rgba(3, 3, 3, .35));
  content: "";
  pointer-events: none;
}

.mix-flavor-media__ambient,
.mix-flavor-media__official,
.mix-flavor-media__concept > img {
  display: block;
  width: 100%;
  height: 100%;
}

.mix-flavor-media__ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  object-fit: cover;
  opacity: .72;
  filter: saturate(1.08) contrast(1.05) brightness(.83);
  transform: scale(1.035);
}

.mix-flavor-media__official {
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 12px 3px 28px;
  object-fit: contain;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .34));
}

.mix-flavor-media[data-media-layout="cutout"] .mix-flavor-media__official {
  transform: scale(1.28);
  transform-origin: 50% 52%;
}

.mix-flavor-media[data-media-layout="cutout-wide"] {
  background:
    radial-gradient(circle at 50% 44%, rgba(212, 173, 103, .2), transparent 48%),
    #090907;
}

.mix-flavor-media[data-media-layout="cutout-wide"] .mix-flavor-media__official {
  transform: scale(1.72);
  transform-origin: 50% 51%;
}

.mix-flavor-media[data-media-layout="studio"] {
  background: #f3f0e8;
}

.mix-flavor-media[data-media-layout="studio"] .mix-flavor-media__official {
  padding: 10px 8px 28px;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .2));
}

.mix-flavor-media__concept {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 50%;
  display: block;
  width: min(100%, 205px);
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: transform var(--mix-transition);
}

.mix-flavor-media__restricted {
  position: absolute;
  z-index: 2;
  inset: 50% 16px auto;
  display: grid;
  gap: 8px;
  color: var(--page-copy);
  text-align: center;
  transform: translateY(-50%);
}

.mix-flavor-media__restricted b {
  color: var(--page-gold-bright);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mix-flavor-media__restricted small {
  font-size: .68rem;
  line-height: 1.45;
}

.mix-flavor-media__concept > img {
  object-fit: cover;
}

.mix-flavor-card:hover .mix-flavor-media__concept {
  transform: translate(-50%, -50%) scale(1.025);
}

.mix-flavor-media__label {
  position: absolute;
  top: 56%;
  right: 30%;
  left: 29%;
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #18150f;
  text-align: center;
  text-wrap: balance;
  transform: translateY(-50%);
}

/* Each label follows the blank panel in its own packaging photograph. */
.mix-flavor-media__concept:has(img[src*="fallback-package-box"]) .mix-flavor-media__label {
  top: 52%;
  right: 36%;
  left: 27%;
}

.mix-flavor-media__concept:has(img[src*="fallback-package-tin"]) .mix-flavor-media__label {
  top: 65%;
  right: 27%;
  left: 27%;
}

.mix-flavor-media__concept:has(img[src*="fallback-package-pouch"]) .mix-flavor-media__label {
  top: 60%;
  right: 33%;
  left: 33%;
}

.mix-flavor-media__label b,
.mix-flavor-media__label small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.mix-flavor-media__label b {
  font-size: clamp(.38rem, .7vw, .52rem);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  -webkit-line-clamp: 2;
}

.mix-flavor-media__label small {
  font-size: clamp(.32rem, .62vw, .44rem);
  font-weight: 700;
  line-height: 1.18;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
}

.mix-flavor-media__badge {
  position: absolute;
  z-index: 5;
  bottom: 9px;
  left: 9px;
  max-width: calc(100% - 18px);
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(7, 7, 6, .86);
  color: #ead7b2;
  font-size: .62rem;
  font-weight: 780;
  letter-spacing: .025em;
  line-height: 1.2;
}

.mix-flavor-media[data-media-kind="official"] .mix-flavor-media__badge {
  color: #d7ead8;
}

.mix-flavor-media[data-media-kind="official"][data-media-error="true"]::before,
.mix-flavor-media[data-media-kind="visualization"][data-package-error="true"]::before {
  position: absolute;
  z-index: 2;
  inset: 50% 14px auto;
  color: var(--page-copy);
  content: "Изображение временно недоступно";
  font-size: .67rem;
  line-height: 1.4;
  text-align: center;
  transform: translateY(-50%);
}

.mix-flavor-copy {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 17px 14px 14px;
  overflow-wrap: anywhere;
}

.mix-flavor-brand {
  max-width: calc(100% - 34px);
  color: var(--page-gold-bright);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mix-flavor-copy > strong {
  margin-top: 6px;
  color: var(--page-ivory);
  font-size: 1.04rem;
  line-height: 1.24;
}

.mix-flavor-canonical {
  margin-top: 2px;
  color: var(--mix-secondary);
  font-size: .74rem;
}

.mix-flavor-copy > em {
  margin-top: 8px;
  color: var(--page-copy);
  font-size: .79rem;
  font-style: normal;
  line-height: 1.4;
}

.mix-flavor-strength {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
  margin-top: 12px;
  color: var(--page-copy);
  font-size: .75rem;
  line-height: 1.35;
}

.mix-flavor-strength__value {
  color: var(--page-gold-bright);
  font-size: .92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mix-flavor-strength__note {
  color: var(--mix-secondary);
  font-size: .75rem;
}

.mix-flavor-option input:checked + .mix-flavor-option__surface::after {
  border-color: var(--page-gold);
  background:
    var(--page-gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3 3 7-7' fill='none' stroke='%2317140f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
  color: #17140f;
}

.mix-flavor-option input:focus-visible + .mix-flavor-option__surface {
  outline: 2px solid var(--mix-focus);
  outline-offset: -3px;
}

.mix-flavor-option input:disabled + .mix-flavor-option__surface {
  cursor: not-allowed;
}

.mix-flavor-option input:disabled + .mix-flavor-option__surface::after {
  content: "×";
  color: var(--page-copy);
}

.mix-flavor-card[data-limit-disabled="true"] .mix-flavor-option__surface::after {
  border-style: dashed;
  background: linear-gradient(90deg, transparent 20%, var(--page-gold) 20% 80%, transparent 80%) center / 12px 1px no-repeat;
  color: transparent;
  content: "";
}

.mix-flavor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid rgba(242, 238, 229, .07);
}

.mix-flavor-tags span {
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(242, 238, 229, .05);
  color: var(--page-copy);
  font-size: .68rem;
}

.mix-flavor-card footer {
  display: grid;
  gap: 3px;
  align-self: end;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--mix-line);
  color: var(--page-copy);
  font-size: .65rem;
  line-height: 1.4;
}

.mix-flavor-media-disclosure {
  color: #d9bd8b;
}

.mix-flavor-card footer a {
  width: fit-content;
  margin-top: 4px;
  color: var(--page-gold-bright);
  text-underline-offset: 3px;
}

.mix-empty-note {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--mix-line);
  border-radius: 12px;
  color: var(--page-copy);
  font-size: .8rem;
  line-height: 1.5;
}

.mix-empty-note strong {
  color: var(--page-ivory);
}

.mix-presets-wrap[data-empty="true"] .mix-presets {
  overflow: visible;
}

.mix-bowl-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(310px, 1.22fr);
  gap: clamp(24px, 3vw, 42px);
  align-items: center;
  margin-top: 34px;
}

.mix-bowl-workspace > * {
  min-width: 0;
}

.mix-bowl-visual {
  position: relative;
  align-self: start;
  display: grid;
  place-items: center;
  min-height: 380px;
  padding-top: 56px;
}

.mix-bowl-capacity {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  text-align: center;
  transform: translateX(-50%);
}

.mix-bowl-capacity small {
  color: var(--mix-secondary);
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mix-bowl-capacity strong {
  color: var(--page-gold-bright);
  font-size: 1.9rem;
  font-weight: 480;
}

.mix-bowl-vessel {
  --bowl-ceramic-fallback: url("/images/constructor/bowl-frame-v2.png");
  position: relative;
  isolation: isolate;
  width: min(390px, 94%);
  aspect-ratio: var(--bowl-aspect, 1286 / 1223);
  overflow: visible;
  background: radial-gradient(ellipse at 50% 74%, rgba(163, 102, 39, .16), transparent 59%);
  filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .48));
  transform: translateZ(0);
}

.mix-bowl-base-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.mix-bowl-vessel:not([data-bowl-kind="fruit"]) .mix-bowl-base-image:is(:not([src]), [src=""], [data-image-error="true"]) {
  background: var(--bowl-ceramic-fallback) center / contain no-repeat;
  color: transparent;
}

.mix-bowl-vessel[data-bowl-kind="fruit"] .mix-bowl-base-image {
  z-index: 1;
}

.mix-bowl-vessel[data-bowl-kind="fruit"] .mix-bowl-fill {
  z-index: 3;
}

.mix-bowl-vessel[data-bowl-kind="fruit"] .mix-bowl-phunnel {
  display: none;
}

.mix-bowl-vessel::after {
  position: absolute;
  z-index: 7;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 31% 20%, rgba(255, 222, 157, .12), transparent 24%),
    radial-gradient(ellipse at 77% 42%, transparent 36%, rgba(0, 0, 0, .22) 68%, transparent 71%);
  pointer-events: none;
}

.mix-bowl-pour {
  position: absolute;
  z-index: 4;
  top: -2%;
  left: 16%;
  width: 68%;
  height: 58%;
  overflow: hidden;
  pointer-events: none;
}

.mix-bowl-pour span {
  position: absolute;
  top: 0;
  width: 8px;
  height: 4px;
  border-radius: 75% 25% 68% 32%;
  background: #7f3d24;
  box-shadow: inset 1px 1px 1px rgba(255, 218, 158, .2), 0 2px 3px rgba(0, 0, 0, .42);
  opacity: 0;
  transform: translate3d(0, -14px, 0) rotate(-18deg);
}

.mix-bowl-pour span:nth-child(1) { left: 15%; }
.mix-bowl-pour span:nth-child(2) { left: 28%; width: 6px; background: #4f211b; }
.mix-bowl-pour span:nth-child(3) { left: 41%; height: 5px; background: #a24e24; }
.mix-bowl-pour span:nth-child(4) { left: 53%; width: 7px; background: #5e281d; }
.mix-bowl-pour span:nth-child(5) { left: 65%; height: 3px; background: #9b4b29; }
.mix-bowl-pour span:nth-child(6) { left: 76%; width: 5px; background: #4b2d20; }
.mix-bowl-pour span:nth-child(7) { left: 86%; height: 5px; background: #7c3422; }

.mix-bowl-vessel.is-settling .mix-bowl-pour span {
  animation: mix-bowl-crumb-drop .46s cubic-bezier(.28, .68, .38, 1) both;
}

.mix-bowl-vessel.is-settling .mix-bowl-pour span:nth-child(2) { animation-delay: 35ms; }
.mix-bowl-vessel.is-settling .mix-bowl-pour span:nth-child(3) { animation-delay: 72ms; }
.mix-bowl-vessel.is-settling .mix-bowl-pour span:nth-child(4) { animation-delay: 18ms; }
.mix-bowl-vessel.is-settling .mix-bowl-pour span:nth-child(5) { animation-delay: 94ms; }
.mix-bowl-vessel.is-settling .mix-bowl-pour span:nth-child(6) { animation-delay: 52ms; }
.mix-bowl-vessel.is-settling .mix-bowl-pour span:nth-child(7) { animation-delay: 112ms; }

.mix-bowl-fill {
  position: absolute;
  z-index: 3;
  top: var(--bowl-fill-top, 7.9%);
  left: var(--bowl-fill-left, 8.2%);
  width: var(--bowl-fill-width, 83.6%);
  height: var(--bowl-fill-height, 44.8%);
  overflow: hidden;
  border: 1px solid rgba(255, 223, 164, .14);
  border-radius: 50%;
  /* Keep independently composited, masked texture layers inside the cavity. */
  clip-path: ellipse(50% 50% at 50% 50%);
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 74%, #020202 0 12%, transparent 13%),
    radial-gradient(ellipse at 50% 55%, #191613 0, #070706 70%);
  box-shadow:
    inset 0 11px 18px rgba(0, 0, 0, .62),
    inset 0 -9px 15px rgba(0, 0, 0, .5),
    0 5px 10px rgba(0, 0, 0, .48);
  transform-origin: var(--bowl-fill-origin-x, 50%) var(--bowl-fill-origin-y, 70%);
}

.mix-bowl-fill::before,
.mix-bowl-fill::after {
  position: absolute;
  z-index: 6;
  inset: 0;
  content: "";
  pointer-events: none;
}

.mix-bowl-fill::before {
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 13%, rgba(255, 242, 213, .2), transparent 29%),
    linear-gradient(168deg, rgba(255, 255, 255, .1), transparent 31%, rgba(0, 0, 0, .22) 75%);
  box-shadow:
    inset 0 10px 18px rgba(0, 0, 0, .34),
    inset 0 -10px 18px rgba(0, 0, 0, .46);
  mix-blend-mode: screen;
}

.mix-bowl-fill::after {
  border-radius: inherit;
  background:
    radial-gradient(circle at 23% 27%, rgba(255, 245, 221, .34) 0 1px, transparent 3px),
    radial-gradient(circle at 69% 24%, rgba(255, 244, 219, .28) 0 1px, transparent 3px),
    radial-gradient(circle at 82% 58%, rgba(255, 240, 210, .2) 0 1px, transparent 3px);
  opacity: .7;
}

.mix-bowl-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  clip-path: ellipse(50% 50% at 50% 50%);
  opacity: var(--layer-opacity, 0);
  background-color: var(--layer-color, #6d432f);
  background-image:
    linear-gradient(145deg, rgba(255, 238, 207, .14), transparent 31%, rgba(0, 0, 0, .18) 78%),
    url("/images/constructor/tobacco-texture-atlas-v1.jpg");
  background-position: center, var(--texture-position, 0% 0%);
  background-size: 100% 100%, 200% 200%;
  background-repeat: no-repeat;
  background-blend-mode: soft-light, normal;
  filter: saturate(1.08) contrast(1.04) brightness(.91);
  transform-origin: var(--bowl-fill-origin-x, 50%) var(--bowl-fill-origin-y, 68%);
  -webkit-mask-image: conic-gradient(
    from -90deg at var(--bowl-fill-origin-x, 50%) var(--bowl-fill-origin-y, 68%),
    transparent 0deg var(--segment-start-angle, 0deg),
    #000 var(--segment-start-angle, 0deg) var(--segment-end-angle, 0deg),
    transparent var(--segment-end-angle, 0deg) 360deg
  );
  mask-image: conic-gradient(
    from -90deg at var(--bowl-fill-origin-x, 50%) var(--bowl-fill-origin-y, 68%),
    transparent 0deg var(--segment-start-angle, 0deg),
    #000 var(--segment-start-angle, 0deg) var(--segment-end-angle, 0deg),
    transparent var(--segment-end-angle, 0deg) 360deg
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.mix-bowl-phunnel {
  position: absolute;
  z-index: 5;
  top: 66%;
  left: 50%;
  width: 21%;
  height: 29%;
  border: 1px solid rgba(255, 210, 137, .25);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 48%, #010101 0 24%, #11100f 27% 37%, #33271f 41%, #0d0c0b 58%, #050505 74%);
  box-shadow:
    0 -3px 7px rgba(0, 0, 0, .58),
    inset 2px 2px 5px rgba(255, 220, 158, .11),
    inset -2px -3px 5px rgba(0, 0, 0, .8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mix-bowl-vessel.is-settling .mix-bowl-fill {
  animation: mix-bowl-fill-settle .54s cubic-bezier(.22, .8, .25, 1) both;
}

.mix-bowl-vessel.is-settling .mix-bowl-layer[data-change-kind="added"] {
  animation: mix-bowl-tobacco-reveal .5s cubic-bezier(.2, .82, .24, 1) both;
}

.mix-bowl-vessel.is-settling .mix-bowl-layer[data-change-kind="resized"] {
  animation: mix-bowl-tobacco-shift .46s cubic-bezier(.2, .82, .24, 1) both;
}

@keyframes mix-bowl-fill-settle {
  0% { transform: translateY(-5px) scale(1.018); }
  58% { transform: translateY(1.5px) scale(.995); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes mix-bowl-tobacco-reveal {
  0% { opacity: .08; transform: scale(.92) translateY(-5px); filter: saturate(1.22) contrast(1.08) brightness(1.08); }
  100% { opacity: var(--layer-opacity, 1); transform: scale(1) translateY(0); filter: saturate(1.08) contrast(1.04) brightness(.91); }
}

@keyframes mix-bowl-tobacco-shift {
  0% { transform: scale(1.025) translateY(-2px); filter: saturate(1.18) contrast(1.06) brightness(1.02); }
  100% { transform: scale(1) translateY(0); filter: saturate(1.08) contrast(1.04) brightness(.91); }
}

@keyframes mix-bowl-crumb-drop {
  0% { opacity: 0; transform: translate3d(0, -14px, 0) rotate(-18deg); }
  14% { opacity: .92; }
  78% { opacity: .86; }
  100% { opacity: 0; transform: translate3d(7px, 108px, 0) rotate(168deg); }
}

@supports not ((mask-image: conic-gradient(from 0deg, #000, transparent)) or (-webkit-mask-image: conic-gradient(from 0deg, #000, transparent))) {
  .mix-bowl-layer {
    display: none;
  }

  .mix-bowl-vessel:not([data-bowl-total-grams="0"]) .mix-bowl-fill {
    background: #6d432f url("/images/constructor/tobacco-texture-atlas-v1.jpg") 0 0 / 200% 200% no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mix-bowl-pour {
    display: none;
  }
}

.mix-bowl-visual > p {
  margin: 16px 0 0;
  color: var(--mix-secondary);
  font-size: .72rem;
}

.mix-role-list {
  display: grid;
  gap: 0;
  overflow-wrap: anywhere;
}

.mix-role-empty {
  padding: 30px 0;
  color: var(--page-copy);
  line-height: 1.6;
}

.mix-role-mono {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--mix-secondary);
  font-size: .82rem;
  line-height: 1.45;
}

.mix-role-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--mix-line);
}

.mix-role-marker {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--role-color, var(--page-gold));
  font-size: .78rem;
  font-weight: 760;
}

.mix-role-copy {
  min-width: 0;
  padding-right: 52px;
}

.mix-role-copy strong,
.mix-role-copy small {
  display: block;
}

.mix-role-copy strong {
  margin-bottom: 5px;
  color: var(--page-ivory);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.mix-role-copy small {
  color: var(--mix-secondary);
  font-size: .78rem;
  line-height: 1.4;
}

.mix-role-value {
  display: flex;
  grid-column: 2;
  align-items: center;
  gap: 0;
  justify-self: start;
  border: 1px solid var(--mix-control-line);
  border-radius: 12px;
  background: var(--mix-panel);
}

.mix-role-value button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--page-gold-bright);
  cursor: pointer;
  font-size: 1.2rem;
  transition: background var(--mix-transition), color var(--mix-transition);
}

.mix-role-value button:disabled,
.mix-sourced-suggestion button:disabled {
  border-color: rgba(242, 238, 229, .14);
  color: var(--page-muted);
  cursor: not-allowed;
  opacity: .55;
}

.mix-role-value button:focus-visible,
.mix-role-remove:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}

.mix-role-value output {
  min-width: 68px;
  color: var(--page-gold-bright);
  font-size: 1.16rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mix-role-row input[type="range"] {
  grid-column: 2 / -1;
}

.mix-role-remove {
  position: absolute;
  top: 13px;
  right: 0;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--mix-secondary);
  cursor: pointer;
  font-size: .7rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mix-ledger {
  position: sticky;
  top: calc(var(--page-header) + 22px);
  padding: 26px;
  border-radius: 16px;
  background: linear-gradient(160deg, #211e17, #141410 48%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .24);
}

.mix-ledger::before {
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 1px;
  content: "";
  background: rgba(212, 173, 103, .55);
}

.mix-ledger-head {
  display: grid;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mix-line);
}

.mix-ledger-head span,
.mix-ledger-total span,
.mix-compatibility > span {
  color: var(--page-gold);
  font-size: .67rem;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mix-ledger-head strong {
  color: var(--page-ivory);
  font-size: 1.2rem;
  line-height: 1.3;
}

.mix-ledger-weights {
  display: grid;
  gap: 14px;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid var(--mix-line);
}

.mix-ledger-weights div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

.mix-ledger-weights dt {
  min-width: 0;
  color: var(--page-copy);
  font-size: .88rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mix-ledger-weights dd {
  flex: 0 0 auto;
  margin: 0;
  color: var(--page-ivory);
  font-size: .88rem;
  line-height: 1.4;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mix-taste-story {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--mix-line);
  overflow-wrap: anywhere;
}

.mix-taste-story h3 {
  margin: 0;
  color: var(--page-ivory);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.mix-taste-story p {
  margin: 0;
  color: var(--page-copy);
  font-size: .87rem;
  line-height: 1.55;
}

.mix-taste-story .mix-taste-story__strength {
  color: var(--page-gold-bright);
  font-size: .84rem;
  font-weight: 600;
}

.mix-taste-story__note {
  color: var(--mix-secondary);
  font-size: .76rem;
  line-height: 1.5;
}

.mix-taste-story [data-mix-story-description]:empty,
.mix-taste-story [data-mix-story-strength]:empty,
.mix-taste-story [data-mix-story-note]:empty {
  display: none;
}

.mix-taste-story--order {
  margin: -10px 0 26px;
  padding-top: 0;
}

.mix-taste-story--success {
  max-width: 520px;
  margin: 0 auto 28px;
  padding-top: 0;
  text-align: left;
}

.mix-app[data-step="order"] [data-mix-story],
.mix-app[data-step="success"] [data-mix-story] {
  display: none;
}

.mix-ledger-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0 8px;
}

.mix-ledger-total strong {
  color: var(--page-gold-bright);
  font-size: 2.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mix-compatibility {
  display: grid;
  gap: 10px;
  padding-top: 22px;
}

.mix-mobile-evidence {
  display: none;
}

.mix-compatibility > strong {
  color: var(--page-gold-bright);
  font-size: 3rem;
  font-weight: 420;
  letter-spacing: -.04em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

.mix-compatibility[data-tone="good"] > strong {
  color: #d8c783;
}

.mix-compatibility[data-tone="caution"] > strong,
.mix-compatibility[data-tone="blocked"] > strong {
  color: #e49a8d;
}

.mix-compatibility p {
  margin: 0;
  color: var(--page-ivory);
  font-weight: 640;
  line-height: 1.4;
}

.mix-compatibility small {
  color: var(--page-copy);
}

.mix-compatibility ul {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
}

.mix-compatibility li {
  position: relative;
  padding-left: 18px;
  color: var(--page-copy);
  font-size: .8rem;
  line-height: 1.45;
}

.mix-compatibility li::before {
  position: absolute;
  top: .58em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--page-gold);
  content: "";
}

.mix-warnings li {
  color: #e2afa7;
}

.mix-warnings li::before {
  background: var(--mix-red);
}

.mix-ledger-note {
  margin: 20px 0 0;
  color: var(--mix-secondary);
  font-size: .72rem;
  line-height: 1.5;
}

.mix-app[data-mode="recommend"] .mix-ledger-note,
.mix-app[data-mode="manual"] .mix-ledger-note {
  display: none;
}

.mix-stage-actions,
.mix-next-actions {
  display: flex;
}

.mix-stage-actions[hidden],
.mix-next-actions[hidden] {
  display: none !important;
}

.mix-stage-actions {
  justify-content: flex-start;
  margin: 0 0 24px;
}

.mix-stage-actions .mix-back-button {
  min-height: 44px;
  padding-inline: 12px;
  border-radius: 10px;
  border-color: var(--mix-line);
  color: var(--page-copy);
}

.mix-next-actions {
  padding-top: 18px;
}

.mix-next-actions .mix-primary {
  width: 100%;
  min-width: 0;
  border-radius: 14px;
}

.mix-stage-actions svg,
.mix-next-actions svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mix-primary,
.mix-secondary,
.mix-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 50px;
  border-radius: 12px;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--mix-transition), border-color var(--mix-transition), color var(--mix-transition);
}

.mix-primary {
  padding: 0 26px;
  border: 1px solid var(--page-gold);
  background: var(--page-gold);
  color: #100d07;
}

.mix-primary:hover {
  background: var(--page-gold-bright);
}

.mix-primary:focus-visible,
.mix-secondary:focus-visible,
.mix-text-button:focus-visible,
.mix-flavor-picker summary:focus-visible {
  outline: 2px solid var(--mix-focus);
  outline-offset: 4px;
}

.mix-primary:active:not(:disabled),
.mix-secondary:active:not(:disabled) {
  background: #eed098;
  color: #100d07;
}

.mix-secondary {
  padding: 0 22px;
  border: 1px solid rgba(212, 173, 103, .44);
  background: transparent;
  color: var(--page-gold-bright);
}

.mix-secondary:hover {
  background: rgba(212, 173, 103, .09);
}

.mix-text-button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--page-copy);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.mix-primary:disabled,
.mix-secondary:disabled,
.mix-text-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.mix-form-status {
  min-height: 0;
  color: #e8b2a9;
  font-size: .88rem;
  line-height: 1.5;
}

.mix-form-status:not(:empty) {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(202, 104, 94, .11);
}

.mix-order-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin-bottom: 28px;
  padding: 20px 0;
  border-block: 1px solid var(--mix-line);
  color: var(--page-copy);
  line-height: 1.55;
}

.mix-order-summary strong {
  color: var(--page-ivory);
}

.mix-order-validation {
  min-height: 0;
  margin: 0;
  color: #f0b7ad;
  font-size: .84rem;
  line-height: 1.5;
}

.mix-order-validation:not(:empty) {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(228, 154, 141, .34);
  border-radius: 12px;
  background: rgba(202, 104, 94, .1);
}

.mix-order-routing-note {
  max-width: 68ch;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--mix-line);
  color: var(--page-copy);
  font-size: .78rem;
  line-height: 1.55;
}

.mix-order-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mix-order-field {
  display: grid;
  gap: 8px;
}

.mix-order-field > label {
  color: var(--page-copy);
  font-size: .76rem;
  font-weight: 710;
  letter-spacing: .06em;
}

.mix-order-fields label small {
  color: var(--page-muted);
  font-weight: 450;
}

.mix-field-wide {
  grid-column: 1 / -1;
}

.mix-order-fields input,
.mix-order-fields textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--mix-control-line);
  border-radius: 12px;
  background: var(--mix-panel);
  color: var(--page-ivory);
  font: inherit;
}

.mix-order-fields textarea {
  min-height: 92px;
  resize: vertical;
}

.mix-order-fields input:focus,
.mix-order-fields textarea:focus {
  border-color: var(--page-gold);
  outline: 2px solid var(--mix-focus);
  outline-offset: 3px;
}

.mix-order-fields input::placeholder,
.mix-order-fields textarea::placeholder {
  color: var(--mix-secondary);
}

.mix-order-fields input:user-invalid,
.mix-order-fields textarea:user-invalid {
  border-color: var(--mix-red);
}

.mix-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 24px 0;
  color: var(--page-copy);
  font-size: .82rem;
  line-height: 1.5;
}

.mix-consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--page-gold);
}

.mix-consent a {
  color: var(--page-gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mix-submit {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mix-success {
  width: 100%;
  min-width: 0;
  max-width: 700px;
  padding: 32px 0;
  text-align: center;
}

.mix-success > svg {
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  fill: none;
  stroke: var(--page-gold);
  stroke-width: 1.5;
}

.mix-success > p {
  color: var(--page-gold);
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mix-success h2 {
  margin: 8px 0 20px;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 560;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}

.mix-success [data-order-status] {
  max-width: 56ch;
  margin: 0 auto 30px;
  color: var(--page-copy);
  line-height: 1.65;
}

.mix-success [data-order-status] strong {
  display: block;
  margin-bottom: 8px;
  color: var(--page-gold-bright);
  font-size: 1.4rem;
}

.mix-success-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 520px;
  margin: 0 auto;
}

.mix-success-actions > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mix-success {
  max-width: 960px;
  text-align: left;
}

.mix-success__eyebrow {
  margin: 0;
  color: var(--page-gold-bright);
  font-size: .68rem;
  font-weight: 780;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.mix-success h2 {
  margin: 8px 0 28px;
  font-size: clamp(2.35rem, 5vw, 4.8rem);
}

.mix-client-card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 30px;
  width: 100%;
  min-width: 0;
  padding: clamp(22px, 4vw, 46px);
  overflow: hidden;
  color: var(--page-ivory);
  background:
    radial-gradient(circle at 82% 16%, rgba(212, 173, 103, .12), transparent 28rem),
    linear-gradient(145deg, rgba(23, 21, 17, .98), rgba(5, 5, 4, .99) 52%, rgba(12, 10, 7, .99));
  border: 1px solid rgba(212, 173, 103, .3);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .03);
}

.mix-client-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .01) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

.mix-client-card__header {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(212, 173, 103, .25);
  background: linear-gradient(90deg, rgba(8, 8, 7, .88), rgba(8, 8, 7, .38) 70%, transparent);
}

.mix-client-card__header p,
.mix-client-card__composition h4,
.mix-client-card__story h4,
.mix-client-card__strength > span {
  margin: 0;
  color: var(--page-gold);
  font-size: .76rem;
  font-weight: 760;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mix-client-card__header h3 {
  max-width: 13ch;
  margin: 0;
  color: #e2b860;
  font-size: clamp(2.6rem, 8vw, 6.6rem);
  font-weight: 520;
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mix-client-card__header > span {
  color: var(--page-copy);
  font-size: .82rem;
  letter-spacing: .05em;
}

.mix-client-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(212, 173, 103, .18), transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .52));
  border-block: 1px solid rgba(212, 173, 103, .12);
}

.mix-client-card__bowl {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 1.38;
}

.mix-client-card__bowl img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 28px rgba(0, 0, 0, .55));
}

.mix-client-card__fill {
  position: absolute;
  top: 16%;
  left: 50%;
  z-index: 1;
  width: 66%;
  aspect-ratio: 1.58;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .58), 0 8px 20px rgba(0, 0, 0, .45);
}

.mix-client-card__visual[data-client-card-bowl-kind="standard"] .mix-client-card__bowl {
  width: min(88%, 650px);
  aspect-ratio: 1.15;
}

.mix-client-card__visual[data-client-card-bowl-kind="standard"] .mix-client-card__fill {
  top: 11%;
  width: 72%;
  aspect-ratio: 1.7;
}

.mix-client-card__phunnel {
  position: absolute;
  top: 31%;
  left: 50%;
  z-index: 3;
  width: 22%;
  aspect-ratio: 1.8;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #020202 0 21%, #171510 22% 45%, #463721 62%, #0a0907 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .58), inset 0 2px 4px rgba(255, 255, 255, .08);
}

.mix-client-card__visual[data-client-card-bowl-kind="standard"] .mix-client-card__phunnel,
.mix-client-card__visual[data-client-card-bowl-kind="standard"] .mix-client-card__stamp {
  display: none;
}

.mix-client-card__stamp {
  position: absolute;
  right: 18%;
  bottom: 17%;
  z-index: 4;
  display: grid;
  justify-items: center;
  color: rgba(43, 28, 14, .82);
  text-shadow: 0 1px rgba(255, 210, 119, .15);
  transform: rotate(-2deg);
}

.mix-client-card__stamp b {
  font-family: Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: .75;
}

.mix-client-card__stamp small {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .22em;
}

.mix-client-card__composition,
.mix-client-card__story,
.mix-client-card__strength {
  min-width: 0;
}

.mix-client-card__composition h4,
.mix-client-card__story h4 {
  margin-bottom: 15px;
}

.mix-client-card__bar {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 14px;
  margin-bottom: 12px;
}

.mix-client-card__bar span {
  flex: var(--share) 1 0;
  min-width: 3px;
  background: var(--segment-color);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--segment-color) 28%, transparent);
}

.mix-client-card__items {
  margin: 0;
}

.mix-client-card__items > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(212, 173, 103, .22);
}

.mix-client-card__items dt {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-width: 0;
  color: #f5f1e8;
  font-size: clamp(.9rem, 2vw, 1.15rem);
  line-height: 1.35;
}

.mix-client-card__items dd {
  margin: 0;
  color: #f5f1e8;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  white-space: nowrap;
}

.mix-client-card__icon {
  display: grid;
  width: 32px;
  height: 32px;
  color: var(--segment-color);
}

.mix-client-card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mix-client-card__story {
  padding-top: 2px;
}

.mix-client-card__story p {
  max-width: 68ch;
  margin: 0;
  color: #e7e1d7;
  font-size: clamp(1rem, 2.2vw, 1.28rem);
  line-height: 1.58;
}

.mix-client-card__strength {
  display: grid;
  gap: 8px;
}

.mix-client-card__strength strong {
  color: var(--page-gold-bright);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 520;
  line-height: 1;
}

.mix-client-card__strength-scale {
  position: relative;
  height: 18px;
  margin-top: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(237, 201, 105, .9) calc(10% - 1px) 10%),
    linear-gradient(transparent 8px, rgba(237, 201, 105, .9) 8px 10px, transparent 10px);
}

.mix-client-card__strength-scale i {
  position: absolute;
  top: 1px;
  left: calc(var(--strength, 0) * 10%);
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border: 2px solid #f7d997;
  border-radius: 50%;
  background: #c98639;
  box-shadow: 0 0 0 3px rgba(201, 134, 57, .28);
}

.mix-client-card__strength small {
  display: flex;
  justify-content: space-between;
  color: var(--page-gold);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mix-client-card__tagline {
  max-width: 44ch;
  margin: 2px auto 0;
  color: #f2eee5;
  font-size: clamp(1.05rem, 2.5vw, 1.4rem);
  line-height: 1.4;
  text-align: center;
}

.mix-success__status {
  max-width: 62ch;
  margin: 26px auto;
  color: var(--page-copy);
  line-height: 1.6;
  text-align: center;
}

.mix-success__status:empty {
  display: none;
}

@media (max-width: 1180px) {
  .mix-page .section-page__header {
    grid-template-columns: auto 1fr auto;
  }

  .mix-page .section-page__book {
    display: none;
  }

  .mix-workbench {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .mix-bowl-workspace {
    grid-template-columns: 1fr;
  }

  .mix-bowl-visual {
    min-height: 360px;
  }
}

@media (max-width: 900px) {
  .mix-shell {
    width: min(100% - 40px, 760px);
    padding-top: 28px;
  }

  .mix-title {
    display: block;
    margin-bottom: 30px;
  }

  .mix-wordmark {
    top: 2px;
  }

  .mix-title h1 {
    max-width: 680px;
  }

  .mix-title > p:last-child {
    max-width: 620px;
    margin-top: 24px;
  }

  .mix-workbench {
    display: flex;
    flex-direction: column;
  }

  .mix-stage-column,
  .mix-ledger {
    width: 100%;
  }

  .mix-ledger {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    padding: 20px 24px;
  }

  .mix-app[data-step]:not([data-step="mix"]) .mix-ledger {
    order: 0;
  }

  .mix-ledger-weights,
  .mix-ledger-note {
    display: none;
  }

  .mix-ledger-head {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    gap: 4px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .mix-ledger-head span {
    font-size: .68rem;
  }

  .mix-ledger-head strong {
    font-size: 1rem;
  }

  .mix-app[data-mode="manual"] .mix-ledger {
    grid-template-columns: minmax(0, 1fr);
  }

  .mix-app[data-mode="manual"] .mix-ledger-weights {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mix-app[data-mode="manual"] .mix-ledger-total {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .mix-ledger-total {
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    padding: 0;
    border: 0;
  }

  .mix-compatibility {
    grid-column: 2;
    grid-row: 2;
    justify-items: end;
    padding: 0;
  }

  .mix-compatibility > strong {
    font-size: 2.4rem;
  }

  .mix-compatibility p,
  .mix-compatibility small,
  .mix-compatibility ul,
  .mix-compatibility > span,
  .mix-compatibility > div {
    display: none;
  }

  .mix-next-actions--ledger {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    padding-top: 16px;
  }

  .mix-app[data-mode="manual"] .mix-next-actions--ledger {
    grid-row: 4;
  }

  .mix-ledger > .mix-taste-story {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--mix-line);
    border-bottom: 0;
  }

  .mix-app[data-mode="manual"] .mix-ledger > .mix-taste-story {
    grid-row: 5;
  }

  .mix-mobile-evidence {
    display: grid;
    gap: 10px;
    margin: 26px 0;
    padding: 22px 0;
    border-block: 1px solid rgba(212, 173, 103, .3);
    background: transparent;
  }

  .mix-mobile-evidence h3 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    margin: 0;
    color: var(--page-ivory);
    font-size: 1rem;
  }

  .mix-mobile-evidence h3 strong {
    color: var(--page-gold-bright);
    font-size: 2.4rem;
    font-weight: 460;
    font-variant-numeric: tabular-nums;
  }

  .mix-mobile-evidence p,
  .mix-mobile-evidence small {
    margin: 0;
    color: var(--page-copy);
    line-height: 1.45;
  }

  .mix-mobile-evidence ul {
    display: grid;
    gap: 7px;
    padding: 0;
    margin: 2px 0 0;
    list-style: none;
  }

  .mix-mobile-evidence li {
    position: relative;
    padding-left: 16px;
    color: var(--page-copy);
    font-size: .82rem;
    line-height: 1.45;
  }

  .mix-mobile-evidence li::before {
    position: absolute;
    top: .55em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--page-gold);
    content: "";
  }

  .mix-mobile-evidence[data-tone="blocked"] h3 strong,
  .mix-mobile-evidence[data-tone="caution"] h3 strong,
  .mix-mobile-evidence .mix-warnings {
    color: #e49a8d;
  }
}

@media (max-width: 700px) {
  .mix-app {
    padding-top: 68px;
  }

  .mix-shell {
    width: min(100% - 28px, 620px);
    padding: 22px 0 72px;
  }

  .mix-back-link {
    margin-bottom: 20px;
  }

  .mix-wordmark {
    top: 1px;
    font-size: .58rem;
  }

  .mix-wordmark span {
    font-size: .86rem;
  }

  .mix-title h1 {
    font-size: clamp(2.7rem, 10vw, 3.8rem);
  }

  .mix-title > p:last-child {
    font-size: .95rem;
    margin-top: 16px;
  }

  .mix-app[data-step]:not([data-step="mode"]) .mix-title h1 {
    font-size: 1.8rem;
    line-height: 1.12;
  }

  .mix-app[data-step]:not([data-step="mode"]) .mix-title > p:last-child {
    margin-top: 10px;
    font-size: .86rem;
  }

  .mix-progress {
    gap: 4px;
    margin-bottom: 18px;
  }

  .mix-progress li {
    display: grid;
    justify-items: center;
    gap: 6px;
  }

  .mix-progress li::after {
    top: 17px;
    right: -5px;
    left: calc(50% + 20px);
  }

  .mix-progress span {
    width: 34px;
    height: 34px;
  }

  .mix-progress strong {
    max-width: 64px;
    padding: 0;
    background: transparent;
    font-size: .61rem;
    text-align: center;
  }

  .mix-stage-column {
    min-height: 0;
    padding: 24px 18px;
    border-radius: 14px;
  }

  .mix-ledger {
    padding: 17px 18px;
    border-radius: 14px;
  }

  .mix-ledger-total strong {
    font-size: 1.45rem;
  }

  .mix-step-heading {
    margin-bottom: 26px;
  }

  .mix-step-heading h2 {
    font-size: 1.9rem;
    line-height: 1.1;
  }

  .mix-community-recommendations {
    gap: 18px;
    margin-bottom: 28px;
    padding: 22px 0;
  }

  .mix-sourced-evidence,
  .mix-manual-notice {
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 0;
  }

  .mix-sourced-evidence__matches,
  .mix-sourced-suggestion-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mix-community-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mix-community-card {
    padding: 17px 15px;
  }

  .mix-mode-grid {
    grid-template-columns: 1fr;
  }

  .mix-bowl-list,
  .mix-popular-direction-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mix-bowl-option > span {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    min-height: 0;
    padding: 18px;
  }

  .mix-bowl-option strong {
    align-self: center;
  }

  .mix-bowl-option b {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    font-size: 2.55rem;
  }

  .mix-bowl-option > span > small:last-child {
    grid-column: 1;
    line-height: 1.4;
  }

  .mix-popular-directions {
    margin-bottom: 24px;
    padding-bottom: 22px;
  }

  .mix-popular-direction-list button {
    min-height: 56px;
  }

  .mix-mode-option > span {
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    column-gap: 12px;
    min-height: 0;
    padding: 20px 8px;
  }

  .mix-mode-option svg {
    grid-row: 1;
    margin: 0;
    width: 27px;
    height: 27px;
  }

  .mix-mode-option small {
    grid-column: 1 / 4;
    font-size: .88rem;
  }

  .mix-mode-option > span::after {
    grid-row: 1;
  }

  .mix-mode-option strong {
    font-size: 1.05rem;
  }

  .mix-flavor-picker fieldset {
    grid-template-columns: 1fr;
  }

  .mix-bowl-workspace {
    gap: 18px;
    margin-top: 24px;
  }

  .mix-bowl-visual {
    min-height: 330px;
  }

  .mix-bowl-vessel {
    width: min(270px, 82%);
  }

  .mix-role-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .mix-role-marker {
    width: 38px;
    height: 38px;
  }

  .mix-role-value {
    grid-column: 2;
    justify-content: flex-start;
  }

  .mix-role-row input[type="range"] {
    grid-column: 1 / -1;
  }

  .mix-role-remove {
    top: 10px;
  }

  .mix-order-fields {
    grid-template-columns: 1fr;
  }

  .mix-field-wide {
    grid-column: auto;
  }

  .mix-stage-actions {
    margin-bottom: 20px;
  }

  .mix-success {
    padding-top: 8px;
  }

  .mix-success h2 {
    margin-bottom: 20px;
  }

  .mix-client-card {
    gap: 23px;
    padding: 22px 18px;
  }

  .mix-client-card__header {
    padding-bottom: 18px;
  }

  .mix-client-card__header h3 {
    max-width: 12ch;
    font-size: clamp(2.45rem, 14vw, 4.7rem);
    line-height: .94;
  }

  .mix-client-card__visual {
    min-height: 0;
  }

  .mix-client-card__bowl {
    width: 100%;
  }

  .mix-client-card__items > div {
    gap: 10px;
  }

  .mix-client-card__items dt {
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 10px;
  }

  .mix-client-card__icon {
    width: 28px;
    height: 28px;
  }

}

@media (max-width: 390px) {
  .mix-fruit-base-option__surface {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 14px;
  }

  .mix-fruit-base-option__surface img {
    width: 40px;
    height: 40px;
  }

  .mix-app:not([data-step="success"]) .mix-shell {
    width: calc(100% - 32px);
  }

  .mix-title h1 {
    font-size: 2.52rem;
    overflow-wrap: anywhere;
    text-wrap: wrap;
  }

  .mix-progress strong {
    font-size: .55rem;
  }

  .mix-stage-column {
    padding-inline: 14px;
  }

  .mix-flavor-picker fieldset {
    grid-template-columns: 1fr;
  }

  .mix-flavor-option__surface {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    min-height: 214px;
  }

  .mix-flavor-media {
    min-height: 214px;
  }

  .mix-flavor-copy {
    padding: 15px 10px 14px;
  }

  .mix-flavor-media__badge {
    right: 6px;
    bottom: 8px;
    left: 6px;
    padding-inline: 5px;
    font-size: .6rem;
    text-align: center;
  }

  .mix-bowl-workspace,
  .mix-bowl-visual,
  .mix-role-list,
  .mix-mobile-evidence,
  .mix-sourced-evidence,
  .mix-manual-notice,
  .mix-sourced-evidence__matches,
  .mix-sourced-suggestion-list,
  .mix-sourced-match,
  .mix-sourced-suggestion {
    min-width: 0;
    width: 100%;
  }

  .mix-role-value {
    flex-wrap: wrap;
  }

  .mix-role-value button {
    width: auto;
    min-width: 44px;
    padding-inline: 8px;
  }

  .mix-app[data-mode="manual"] .mix-ledger-weights div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mix-mobile-evidence {
    overflow-wrap: anywhere;
  }

  .mix-mobile-evidence h3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .mix-bowl-visual {
    min-height: 300px;
  }

  .mix-client-card {
    padding-inline: 14px;
  }

  .mix-client-card__header h3 {
    max-width: 100%;
    font-size: clamp(2.15rem, 13vw, 3.35rem);
  }

  .mix-client-card__header > span {
    font-size: .72rem;
  }

  .mix-client-card__visual {
    margin-inline: -6px;
  }

  .mix-client-card__items dt {
    font-size: .86rem;
  }

  .mix-client-card__items dd {
    font-size: .92rem;
  }

  .mix-client-card__story p {
    font-size: .94rem;
  }
}

@media (hover: hover) {
  .mix-fruit-base-option:hover .mix-fruit-base-option__surface {
    border-color: rgba(242, 238, 229, .38);
  }

  .mix-fruit-base-option:hover input:checked + .mix-fruit-base-option__surface {
    border-color: var(--page-gold-bright);
  }

  .mix-bowl-option:hover > span,
  .mix-flavor-card:not([data-unavailable="true"]):not([data-limit-disabled="true"]):hover {
    border-color: rgba(242, 238, 229, .38);
  }

  .mix-bowl-option:has(input:checked):hover > span,
  .mix-flavor-card:has(input:checked):hover {
    border-color: var(--page-gold-bright);
  }

  .mix-role-value button:hover:not(:disabled) {
    background: rgba(212, 173, 103, .14);
  }

  .mix-role-remove:hover,
  .mix-text-button:hover {
    color: var(--page-ivory);
  }
}

@media (max-width: 520px) {
  .mix-order-summary,
  .mix-order-summary > *,
  .mix-success,
  .mix-success [data-order-status],
  .mix-success [data-order-status] > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .mix-ledger-weights dd {
    white-space: normal;
    max-width: 8ch;
  }

  .mix-primary,
  .mix-secondary {
    padding: 12px 18px;
    line-height: 1.4;
  }

  .mix-order-fields input,
  .mix-order-fields textarea,
  .mix-flavor-search input {
    min-width: 0;
    font-size: 1rem;
  }

  .mix-flavor-picker summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    padding-block: 12px;
  }

  .mix-flavor-picker summary small {
    grid-column: 1;
    grid-row: 2;
  }

  .mix-flavor-picker summary span {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .mix-page *,
  .mix-page *::before,
  .mix-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .mix-mode-option input:checked + span,
  .mix-bowl-option input:checked + span,
  .mix-flavor-option input:checked + span {
    outline: 3px solid Highlight;
  }

  .mix-bowl-layer {
    border-top: 3px solid CanvasText;
  }

  .mix-sourced-evidence__status,
  .mix-sourced-match,
  .mix-sourced-suggestion {
    border-color: CanvasText;
  }

  .mix-role-value button:disabled,
  .mix-sourced-suggestion button:disabled {
    border-color: GrayText;
    color: GrayText;
  }
}

/* The final result is an application screen; demo URLs only prefill its data. */
.mix-app[data-step="success"] .mix-title,
.mix-app[data-step="success"] .mix-progress,
.mix-app[data-step="success"] .mix-ledger { display: none; }
.mix-app[data-step="success"] .mix-shell { width: min(1080px, calc(100% - 48px)); padding: 30px 0 64px; }
.mix-app[data-step="success"] .mix-workbench { display: block; }
.mix-app[data-step="success"] .mix-stage-column { min-height: 0; padding: 0; border: 0; background: none; }
.mix-app[data-step="success"] .mix-success { max-width: none; }
.mix-success-actions[hidden], .mix-final-downloads[hidden], .mix-final-confirmation[hidden] { display: none; }
.mix-final-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.mix-final-heading h2 { margin: 7px 0 8px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.035em; line-height: 1.12; }
.mix-final-heading > div > p:last-child { color: var(--page-copy); margin: 0; font-size: 14px; }
.mix-final-heading .mix-text-button { flex-shrink: 0; font-size: 12px; }
.mix-final-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 24px; align-items: start; }
.mix-final-recipe, .mix-final-visit { min-width: 0; padding: 26px; border: 1px solid var(--mix-line); border-radius: 20px; background: linear-gradient(145deg, #191812, #10100e 65%); }
.mix-final-recipe { background: radial-gradient(ellipse at 50% 25%, #30281a, #12120f 68%); }
.mix-final-label { color: var(--page-gold); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; }
.mix-final-recipe-head { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mix-final-recipe-head h3 { margin: 6px 0; font-size: 24px; letter-spacing: -.02em; overflow-wrap: anywhere; line-height: 1.2; }
.mix-final-recipe-head p { margin: 0; font-size: 12px; color: var(--page-copy); }
.mix-final-strength { color: var(--page-gold-bright); font-size: 13px; white-space: nowrap; padding: 9px 11px; border: 1px solid var(--mix-line); border-radius: 100px; }
.mix-final-artwork { padding: 18px; border-radius: 14px; background: #090908; box-shadow: inset 0 0 32px #0006; }
.mix-final-artwork .mix-final-image-frame { width: min(100%, 220px); margin: 0 auto; border-radius: 5px; box-shadow: 0 12px 30px #0008; }
.mix-final-downloads { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; }
.mix-final-downloads a { color: var(--page-gold-bright); font-size: 12px; text-decoration: none; padding-block: 6px; }
.mix-final-downloads a:hover { text-decoration: underline; }
.mix-final-details { border-top: 1px solid var(--mix-line); border-bottom: 1px solid var(--mix-line); margin: 2px 0 12px; }
.mix-final-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 15px; font-size: 13px; padding: 16px 0; color: var(--page-ivory); }
.mix-final-details summary::-webkit-details-marker { display: none; }
.mix-final-details dl { margin: 0 0 12px; }
.mix-final-details dl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--mix-line); font-size: 13px; }
.mix-final-details dd { margin: 0; color: var(--page-gold-bright); white-space: nowrap; }
.mix-final-details p { font-size: 14px; line-height: 1.65; color: var(--page-copy); }
.mix-final-recipe > .mix-text-button { font-size: 12px; }
.mix-final-visit-head { margin-bottom: 20px; }
.mix-final-visit-head h3 { margin: 8px 0 0; font-size: 23px; font-weight: 550; letter-spacing: -.02em; }
.mix-final-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.mix-final-fields .mix-order-field { min-width: 0; }
.mix-final-fields label, .mix-final-contact legend { display: block; margin: 0 0 8px; color: var(--page-copy); font-size: 12px; font-weight: 500; }
.mix-final-fields label small { color: var(--page-muted); font-weight: 400; }
.mix-final-fields input:not([type="radio"]), .mix-final-fields textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid var(--mix-control-line); border-radius: 10px; background: #0e0e0c; color: var(--page-ivory); font: inherit; font-size: 15px; }
.mix-final-fields textarea { resize: vertical; min-height: 70px; }
.mix-final-fields input:focus, .mix-final-fields textarea:focus { outline: 2px solid var(--page-gold); outline-offset: 2px; }
.mix-final-contact { border: 0; padding: 0; margin: 0; min-width: 0; }
.mix-final-contact > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.mix-final-contact label { position: relative; margin: 0; cursor: pointer; }
.mix-final-contact input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mix-final-contact span { display: block; padding: 12px 4px; text-align: center; border: 1px solid var(--mix-control-line); border-radius: 10px; color: var(--page-copy); font-size: 13px; }
.mix-final-contact input:checked + span { background: #a3874920; color: var(--page-gold-bright); border-color: var(--page-gold); }
.mix-final-contact input:focus-visible + span { outline: 2px solid var(--page-gold); outline-offset: 2px; }
.mix-final-photo-note { margin: 18px 0; padding-left: 12px; border-left: 1px solid var(--page-gold); font-size: 13px; color: var(--page-copy); line-height: 1.55; }
.mix-final-confirm { width: 100%; min-height: 50px; justify-content: space-between; font-size: 12px; }
.mix-final-local-note { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--page-muted); }
.mix-final-confirmation { padding: 14px; border: 1px solid #727d53; border-radius: 10px; color: #d6dfbc; background: #20251a; font-size: 14px; line-height: 1.6; }
.mix-success [data-order-status]:empty { display: none; }
@media (max-width: 720px) {
  .mix-app[data-step="success"] .mix-shell { width: calc(100% - 28px); padding: 22px 0 44px; }
  .mix-final-heading { align-items: flex-start; gap: 12px; flex-direction: column; margin-bottom: 18px; }
  .mix-final-heading h2 { font-size: 28px; }
  .mix-final-heading > div > p:last-child { font-size: 13px; }
  .mix-final-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .mix-final-recipe, .mix-final-visit { padding: 19px; border-radius: 16px; }
  .mix-final-artwork { padding: 14px; }
  .mix-final-artwork .mix-final-image-frame { width: min(100%, 180px); }
  .mix-final-recipe-head h3 { font-size: 22px; }
  .mix-final-fields { gap: 15px 10px; }
  .mix-final-fields input:not([type="radio"]), .mix-final-fields textarea { font-size: 16px; padding: 10px; }
  .mix-final-contact span { font-size: 12px; }
}
.mix-final-fields .mix-field-wide { grid-column: 1 / -1; }

.mix-final-artwork[hidden] { display: none; }
.mix-final-image-frame { display: block; margin: 0 auto; padding: 0; overflow: hidden; background: #080807; }
.mix-final-image-frame img { display: block; width: 100%; height: auto; }

.mix-final-name-slot {
  box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
  margin: 0 0 16px; padding: 0; font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.2;
  height: 2.4em; min-height: 2.4em; max-height: 2.4em;
  overflow: hidden; overflow-wrap: anywhere; word-break: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.mix-final-recipe-head > div { min-width: 0; }
.mix-final-recipe-head p { margin-top: 8px; }

.mix-final-composition { margin: 18px 0 0; }
.mix-final-composition h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.mix-final-composition-bar { display: flex; gap: 3px; width: 100%; height: 7px; overflow: hidden; border-radius: 3px; }
.mix-final-composition-bar span { min-width: 0; flex-shrink: 1; }
.mix-final-composition dl { margin: 10px 0 0; }
.mix-final-composition dl > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--mix-line); font-size: 13px; line-height: 1.5; }
.mix-final-composition dt { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.mix-final-composition dt i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.mix-final-composition dt span { min-width: 0; overflow-wrap: anywhere; }
.mix-final-composition dd { margin: 0; color: var(--page-gold-bright); white-space: nowrap; }

.mix-final-artwork { padding: 0; overflow: hidden; }
.mix-final-artwork .mix-final-image-frame { width: 100%; max-width: 100%; aspect-ratio: 1402 / 1122; border-radius: 12px; box-shadow: none; }
.mix-final-image-frame img { width: 100%; height: 100%; object-fit: contain; }

/* Night portrait: one dynamic 9:16 collection, shared by screen and export. */
.mix-app[data-step="success"] .mix-shell { width: min(820px,calc(100% - 40px)); padding-top: 28px; }
.mix-app[data-step="success"] .mix-success { padding-top: 0; }
.mix-final-heading { margin-bottom: 32px; }
.mix-final-grid { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mix-final-recipe.mix-portrait {
  --portrait-ink: #f2eee5; --portrait-copy: #c9c1b4; --portrait-gold: #d4ad67; --portrait-line: #373128;
  box-sizing: border-box; container-type: inline-size; position: relative; isolation: isolate;
  display: flex; flex-direction: column; width: min(600px,100%); min-width: 0; aspect-ratio: 9 / 16;
  padding: 0; margin: 0; border: 0; border-radius: 0; overflow: hidden;
  background: #080807; color: var(--portrait-ink); font-family: "ALS Granate", "Helvetica Neue", Arial, sans-serif; font-weight: 420;
}
.mix-portrait-hero { position: relative; isolation: isolate; height: 76cqw; flex: 0 0 auto; }
.mix-portrait-brand { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 2cqw; padding-top: 4cqw; color: var(--portrait-copy); font-size: 2.45cqw; line-height: 1; font-weight: 500; letter-spacing: .65cqw; }
.mix-portrait-brand img { width: 5.5cqw; height: 5.5cqw; object-fit: contain; }
.mix-portrait-name-zone { position: relative; z-index: 2; margin: 3cqw 7cqw 0; }
.mix-portrait-name-zone > p { margin: 0 0 1.7cqw; color: var(--portrait-gold); font-size: 2.55cqw; font-weight: 500; line-height: 1.2; letter-spacing: .28cqw; }
.mix-portrait .mix-final-name-slot { box-sizing: border-box; width: 86cqw; max-width: 100%; min-width: 0; height: 14cqw; min-height: 14cqw; max-height: 14cqw; margin: 0; padding: 0; display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: normal; word-break: normal; font-size: 9cqw; font-weight: 560; line-height: 1.05; letter-spacing: -.025em; text-transform: none; background: none; color: var(--portrait-ink); -webkit-text-stroke: 0; }
.mix-portrait-name-zone > span { display: block; margin-top: 1cqw; color: var(--portrait-copy); font-size: 2.9cqw; line-height: 1.25; letter-spacing: .06em; }
.mix-portrait .mix-final-artwork { position: absolute; z-index: 0; left: 0; top: 37cqw; width: 100%; height: 39cqw; padding: 0; background: none; border-radius: 0; overflow: hidden; box-shadow: none; mask-image: none; }
.mix-portrait .mix-final-artwork .mix-final-image-frame { position: relative; width: 100%; max-width: none; height: 39cqw; margin: 0; border-radius: 0; border: 0; background: none; box-shadow: none; mask-image: none; }
.mix-portrait .mix-final-image-frame img { width: 100%; height: 100%; display: block; object-fit: contain; filter: saturate(.78) brightness(.86); }
.mix-portrait[data-bowl="pineapple"] .mix-final-artwork .mix-final-image-frame { width: 74cqw; height: 59.2cqw; margin: -14cqw 0 0 16cqw; mask-image: linear-gradient(to right,transparent,#000 9%,#000 91%,transparent); }
.mix-portrait[data-bowl="ordinary"] .mix-final-image-frame img { filter: brightness(.76); }
.mix-portrait[data-bowl="grapefruit"] .mix-final-image-frame img { filter: saturate(.58) brightness(.68); }
.mix-portrait .mix-final-composition { position: relative; z-index: 1; padding: 0 7cqw; margin: 0; }
.mix-portrait-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 3cqw; }
.mix-portrait h4 { margin: 0; color: var(--portrait-ink); font-size: 3.1cqw; font-weight: 560; line-height: 1.2; letter-spacing: -.015em; }
.mix-portrait-section-head > span { color: var(--portrait-copy); font-size: 2.65cqw; font-weight: 420; white-space: nowrap; }
.mix-portrait .mix-final-composition-bar { height: 1cqw; gap: .5cqw; margin: 2.5cqw 0 1.5cqw; border-radius: 0; }
.mix-portrait .mix-final-composition-bar span { border: 0; border-radius: 0; box-shadow: none; }
.mix-portrait .mix-final-composition dl { margin: 0; }
.mix-portrait .mix-final-composition dl > div { box-sizing: border-box; min-height: 7.2cqw; padding: 1.1cqw 0; align-items: center; grid-template-columns: minmax(0,1fr) auto; gap: 2cqw; border-bottom: .1cqw solid var(--portrait-line); font-size: 3.5cqw; font-weight: 420; line-height: 1.18; }
.mix-portrait .mix-final-composition dt { align-items: center; gap: 2.2cqw; }
.mix-portrait .mix-final-composition dt i { display: block; width: 4.7cqw; height: 4.7cqw; flex: 0 0 4.7cqw; border-radius: 0; color: var(--ingredient-color); background: none; }
.mix-portrait .mix-final-composition dt svg { display: block; width: 100%; height: 100%; }
.mix-portrait .mix-final-composition dt span { overflow-wrap: normal; }
.mix-portrait .mix-final-composition dd { font-size: 3.45cqw; font-weight: 500; color: var(--portrait-gold); font-variant-numeric: tabular-nums; }
.mix-portrait-story { margin: 2cqw 7cqw 0; }
.mix-portrait-story p { margin: 1.7cqw 0 0; max-width: 65ch; font-size: 3.5cqw; font-weight: 420; line-height: 1.3; color: var(--portrait-copy); }
.mix-portrait-strength { position: relative; margin: auto 7cqw 0; padding-top: 3cqw; border: 0; }
.mix-portrait-strength > span { display: block; font-size: 2.9cqw; line-height: 1.2; font-weight: 500; letter-spacing: .08em; color: var(--portrait-copy); }
.mix-portrait-strength > strong { position: absolute; right: 0; top: 1.5cqw; display: block; font-size: 4.6cqw; line-height: 1.2; font-weight: 560; letter-spacing: -.02em; color: var(--portrait-ink); -webkit-text-stroke: 0; font-variant-numeric: tabular-nums; }
.mix-portrait-strength-scale { position: relative; height: 2cqw; margin-top: 2.8cqw; background: linear-gradient(var(--portrait-gold),var(--portrait-gold)) center/100% .12cqw no-repeat,repeating-linear-gradient(to right,var(--portrait-line) 0 .16cqw,transparent .16cqw 10%); border-right: .16cqw solid var(--portrait-line); }
.mix-portrait-strength-scale i { position: absolute; left: calc(var(--strength,0) * 10%); top: 50%; transform: translate(-50%,-50%); width: 2.2cqw; height: 2.2cqw; border-radius: 50%; border: .24cqw solid #080807; background: var(--portrait-gold); box-shadow: 0 0 0 .12cqw var(--portrait-gold); }
.mix-portrait-strength-labels { display: flex; justify-content: space-between; margin-top: .8cqw; color: var(--portrait-copy); font-size: 2.9cqw; font-weight: 420; line-height: 1.25; letter-spacing: .02em; text-transform: lowercase; }
.mix-portrait-tagline { position: relative; z-index: 1; flex-shrink: 0; max-width: 86cqw; margin: 1.5cqw 7cqw 4cqw; padding-top: 1.5cqw; border-top: .1cqw solid var(--portrait-line); color: var(--portrait-ink); font-size: 2.9cqw; font-weight: 420; line-height: 1.3; text-align: left; }
.mix-portrait-actions { box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 0; }
.mix-portrait-actions .mix-primary,.mix-portrait-actions .mix-secondary { flex: 0 1 auto; min-height: 48px; padding: 14px 17px; font-size: 11px; white-space: normal; text-align: center; }
.mix-card-export-status { min-height: 21px; margin: 12px 0 0; font-size: 13px; line-height: 21px; color: var(--page-copy); }
.mix-card-export-status[hidden] { display: block; visibility: hidden; }
.mix-portrait-name-editor { width: min(600px,100%); margin-top: 24px; }
.mix-final-visit { box-sizing: border-box; width: min(820px,100%); margin: 72px auto 0; padding: 32px 0 0; border: 0; border-top: 1px solid var(--mix-line); border-radius: 0; background: none; }
.mix-final-visit-head h3 { font-size: clamp(24px,3vw,34px); overflow-wrap: anywhere; }
.mix-final-visit-head > p { color: var(--page-copy); font-size: 14px; line-height: 1.55; }
#mix-final-visit-title { scroll-margin-top: 108px; }
main.mix-app:focus { outline: none; }
body[data-card-preview="true"] { background: #080807; }
body[data-card-preview="true"] .section-page__header,body[data-card-preview="true"] .section-page__footer,body[data-card-preview="true"] .mix-final-heading { display: none; }
body[data-card-preview="true"] .mix-app { padding-top: 0; }
body[data-card-preview="true"] .mix-app[data-step="success"] .mix-shell { width: min(944px,100vw); padding: 0 0 64px; }
body[data-card-preview="true"] .mix-final-recipe.mix-portrait { width: 100%; }
body[data-card-preview="true"] .mix-success { padding: 0; }
body[data-card-preview="true"] .mix-portrait-actions,body[data-card-preview="true"] .mix-portrait-name-editor,body[data-card-preview="true"] .mix-final-visit { width: min(820px,calc(100% - 32px)); }
html:has(body[data-card-preview="true"]) { scrollbar-width: none; }
@media(max-width:600px) {
  .mix-app[data-step="success"] .mix-shell { width: 100%; }
  .mix-app[data-step="success"] .mix-success { padding-left: 0; padding-right: 0; }
  .mix-final-heading { margin: 0 16px 24px; }
  .mix-final-heading h2 { font-size: 28px; }
  .mix-portrait-actions,.mix-portrait-name-editor,.mix-final-visit { width: calc(100% - 32px); }
  .mix-portrait-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mix-portrait-actions .mix-primary { grid-column: 1 / -1; }
  .mix-final-fields { grid-template-columns: minmax(0,1fr); }
  .mix-final-visit { margin-top: 56px; }
}

/* Canonical supplied PNGs: intrinsic ratio, no overlays or synthesized content. */
.mix-final-recipe.mix-static-card { display: block; width: min(600px,100%); max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; aspect-ratio: 9/16; }
.mix-final-price { box-sizing: border-box; width: min(600px,100%); margin: 28px auto 0; padding: 24px; border: 1px solid var(--mix-line); border-radius: 16px; background: linear-gradient(140deg,#211d14,#11110e); }
.mix-final-price h3 { margin: 0 0 18px; color: var(--page-gold); font-size: 18px; font-weight: 500; }
.mix-final-price dl { margin: 0; }
.mix-final-price dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; font-size: 14px; line-height: 1.5; }
.mix-final-price dt { color: var(--page-copy); }
.mix-final-price dd { flex-shrink: 0; margin: 0; color: #f5eedf; text-align: right; font-variant-numeric: tabular-nums; }
.mix-final-price .mix-final-price-gift dd { color: var(--page-gold); }
.mix-final-price .mix-final-price-total { align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mix-line); }
.mix-final-price-total dt { color: var(--page-gold); font-size: 16px; }
.mix-final-price-total dd { color: var(--page-gold); font-size: clamp(24px,5vw,34px); font-weight: 500; }
.mix-static-card img { display: block; width: 100%; height: auto; max-width: 100%; margin: 0; padding: 0; object-fit: contain; border-radius: 0; filter: none; mask-image: none; }
.mix-static-card[hidden] { display: none; }
body[data-card-preview="true"] .mix-static-card { width: 100%; }

/* The photo compositor owns cavity depth, rim occlusion and the low phunnel. */
.mix-bowl-vessel:has(.mix-live-photo) { aspect-ratio:660 / 516; background:none; }
.mix-bowl-vessel:has(.mix-live-photo) > :not(.mix-live-photo) { visibility:hidden; }
.mix-bowl-vessel:has(.mix-live-photo)::after { display:none; }
.mix-live-photo { display:block; position:relative; width:100%; height:auto; z-index:8; }
[data-card-open][aria-disabled="true"], [data-card-download][aria-disabled="true"] { pointer-events:none; opacity:.5; }

html[data-telegram-mini-app="true"],
html[data-telegram-mini-app="true"] body {
  min-height: var(--tg-viewport-stable-height, 100dvh);
  background: #080807;
}

body[data-telegram-mini-app="true"] .section-page__header {
  display: none;
}

body[data-telegram-mini-app="true"] .mix-telegram-entry { display: none; }

body[data-telegram-mini-app="true"] .mix-app {
  padding-top: calc(18px + var(--odeon-tg-content-safe-top, 0px));
  padding-right: var(--odeon-tg-content-safe-right, 0px);
  padding-bottom: calc(28px + var(--odeon-tg-content-safe-bottom, 0px));
  padding-left: var(--odeon-tg-content-safe-left, 0px);
}

.mix-telegram-share {
  width: 100%;
  justify-content: space-between;
  border: 1px solid #d7b36b;
  color: #080807;
  background: #d7b36b;
}

.mix-telegram-share[hidden] { display: none; }

.mix-bowl-vessel[data-renderer="photographic"] > :not(.mix-live-photo) { visibility:hidden; }
.mix-bowl-vessel[data-renderer="photographic"]::after { display:none; }
.mix-static-card img[hidden] { display: none; }

.mix-home-note { width: min(600px,100%); margin: 0 auto 24px; color: var(--page-copy); font-size: 14px; line-height: 1.6; }
.mix-recipe-total { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0 0; color: var(--page-copy); font-size: 14px; }
.mix-recipe-total strong { color: var(--page-gold-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mix-portrait-actions .mix-save-recipe { flex-basis: 100%; background: var(--page-gold); border-color: var(--page-gold); color: #080807; }
.mix-portrait-actions > .mix-primary { background: transparent; border-color: var(--mix-control-line); color: var(--page-gold-bright); }
.mix-portrait-actions .mix-text-button { min-height: 44px; font-size: 12px; }

/* Catalog food photographs: full-color foreground, quiet packaging behind. */
.mix-flavor-media[data-media-kind="ingredient-photo"] {
  background: #090907;
  height: 270px;
  min-height: 270px;
}
.mix-flavor-media[data-media-kind="ingredient-photo"]::after { display: none; }
.mix-flavor-media__pack-back {
  position: absolute;
  z-index: 0;
  top: 24%;
  right: 5%;
  width: 58%;
  height: 65%;
  filter: none;
  opacity: 1;
}
.mix-flavor-media[data-media-kind="ingredient-photo"] .mix-flavor-media__pack-back .mix-flavor-media__official,
.mix-flavor-media__pack-back .mix-flavor-media__concept,
.mix-flavor-card:hover .mix-flavor-media__pack-back .mix-flavor-media__concept {
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  transform: none;
  filter: none;
  aspect-ratio: auto;
}
.mix-flavor-media__pack-back .mix-flavor-media__concept > img { object-fit: contain; }
.mix-flavor-media__food {
  position: absolute;
  z-index: 2;
  inset: 66px 0 0;
  mix-blend-mode: normal;
}
.mix-flavor-food {
  position: absolute;
  display: block;
  width: min(94%,190px);
  aspect-ratio: 1;
  bottom: 14px;
  left: 0;
  background-size: 400% 400%;
  background-repeat: no-repeat;
  opacity: 1;
  mix-blend-mode: normal;
}
.mix-flavor-food[hidden] { display: none; }
.mix-flavor-media__food[data-food-count="2"] .mix-flavor-food { width: min(75%,165px); }
.mix-flavor-media__food[data-food-count="2"] .mix-flavor-food:first-child { left: 0; bottom: 18%; }
.mix-flavor-media__food[data-food-count="2"] .mix-flavor-food:last-child { left: 25%; bottom: 1%; }
.mix-flavor-media__food[data-food-count="3"] .mix-flavor-food { width: min(66%,150px); }
.mix-flavor-media__food[data-food-count="3"] .mix-flavor-food:nth-child(1) { left: 0; bottom: 24%; }
.mix-flavor-media__food[data-food-count="3"] .mix-flavor-food:nth-child(2) { left: 34%; bottom: 18%; }
.mix-flavor-media__food[data-food-count="3"] .mix-flavor-food:nth-child(3) { left: 10%; bottom: 0; }
.mix-flavor-card:has([data-media-kind="ingredient-photo"]) .mix-flavor-brand {
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .04em;
}
@media (max-width: 520px) {
  .mix-flavor-option__surface:has([data-media-kind="ingredient-photo"]) { grid-template-columns: minmax(0,1fr); }
  .mix-flavor-media[data-media-kind="ingredient-photo"] { height: 270px; min-height: 270px; }
  .mix-flavor-media__pack-back { right: 5%; width: 58%; height: 65%; top: 24%; }
  .mix-flavor-media__food { width: min(100%,260px); left: 50%; right: auto; transform: translateX(-50%); }
  .mix-flavor-food { width: min(76%,190px); left: 0; bottom: 0; }
  .mix-flavor-media__food[data-food-count="2"] .mix-flavor-food { width: min(64%,165px); }
  .mix-flavor-media__food[data-food-count="3"] .mix-flavor-food { width: min(59%,150px); }
  .mix-flavor-card:has([data-media-kind="ingredient-photo"]) .mix-flavor-copy { padding: 14px 16px 16px; }
  .mix-flavor-card:has([data-media-kind="ingredient-photo"]) .mix-flavor-brand { max-width: 100%; }
}

.mix-flavor-media[data-media-kind="ingredient-photo"] > .mix-flavor-media__badge {
  top: auto;
  right: 8px;
  bottom: 5px;
  left: auto;
  max-width: calc(100% - 16px);
  padding: 2px 0;
  background: none;
  color: var(--mix-secondary);
  font-size: .56rem;
  font-weight: 400;
  letter-spacing: 0;
  text-align: right;
}

/* The exact brand name stays readable above the ingredient photograph. */
.mix-flavor-media__brand-card {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(100% - 20px);
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid #51462d;
  border-radius: 4px;
  background: #19170f;
  color: var(--page-gold-bright);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .015em;
  text-align: center;
  overflow-wrap: anywhere;
}
@media(max-width:520px) {
  .mix-flavor-media__brand-card { right: 34px; width: calc(100% - 68px); font-size: 18px; }
}

/* The selection limit disables adding, while the catalog remains readable. */
.mix-flavor-card[data-limit-disabled="true"]:not([data-unavailable="true"]) {
  opacity: 1;
}

/* The fruit-bowl gift is visible before the first selection. */
.mix-fruit-gift {
  max-width: 100%;
  margin: -8px 0 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--mix-line);
  color: var(--page-ivory);
  font-size: clamp(18px,2.2vw,23px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mix-fruit-gift em { color: var(--page-gold-bright); }
.mix-fruit-gift span { display: block; margin-top: 5px; color: var(--page-copy); font-size: 13px; line-height: 1.45; }
.mix-app[data-step="success"] .mix-fruit-gift { display: none; }
@media(max-width:700px) {
  .mix-fruit-gift { margin: 0 0 20px; padding-bottom: 14px; font-size: 18px; }
  .mix-fruit-gift span { font-size: 12px; }
}

/* Reserve the same caption rhythm across the two desktop bowl choices. */
@media (min-width: 701px) {
  .mix-bowl-option > span > small:last-child { min-height: 3em; }
}


/* ODEON MIX contest callout 2026-09-15. */
.mix-contest-callout{box-sizing:border-box;grid-column:1 / -1;width:min(820px,100%);max-width:100%;min-width:0;margin-top:12px;padding:clamp(22px,4vw,34px);border:1px solid rgba(216,178,108,.32);background:linear-gradient(135deg,rgba(216,178,108,.09),rgba(5,5,4,.92));box-shadow:0 24px 70px rgba(0,0,0,.24)}
.mix-contest-callout h3{max-width:24ch;margin:10px 0 12px;color:#f1ece1;font-size:clamp(1.55rem,3vw,2.35rem);font-weight:390;line-height:1.08;letter-spacing:-.035em}
.mix-contest-callout>p{max-width:68ch;margin:0;color:rgba(242,238,229,.72);font-size:.9rem;line-height:1.65}
.mix-contest-callout__discount{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin:22px 0;padding:16px 18px;border-block:1px solid rgba(216,178,108,.28)}
.mix-contest-callout__discount strong{color:#efcf8c;font-size:2.45rem;font-weight:360;line-height:1}
.mix-contest-callout__discount span{max-width:43ch;color:#d5cdbf;font-size:.82rem;line-height:1.5}
.mix-contest-callout ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 22px;padding:0;list-style:none}
.mix-contest-callout li{display:grid;gap:8px;align-content:start;min-height:96px;padding:14px;border:1px solid rgba(216,178,108,.2);color:#f1ece1;font-size:.76rem;line-height:1.35}
.mix-contest-callout li span{color:#d8b26c;font-size:.64rem;letter-spacing:.12em}
.mix-contest-callout .mix-secondary{display:inline-flex;width:auto}
@media(max-width:860px){.mix-contest-callout__discount{grid-template-columns:1fr;gap:8px}.mix-contest-callout ol{grid-template-columns:1fr}.mix-contest-callout li{grid-template-columns:38px minmax(0,1fr);min-height:0;align-items:center}.mix-contest-callout .mix-secondary{width:100%;justify-content:center}}