.abd-shell {
  --n-ink: #241a14;
  --n-muted: #756258;
  --n-paper: #f5ecdf;
  --n-panel: #fffaf3;
  --n-line: #ddcdbb;
  --n-spirit: #b66b2b;
  --n-spirit-deep: #78431f;
  --n-water: #3d8295;
  --n-water-deep: #20505e;
  --n-good: #3f7659;
  --n-warning: #a04c32;
  --n-shadow: #241a1420;
  --n-stage: #e9ddce;
  --n-stage-copy: #241a14;
  --n-glass: #fff8ee;

  container-type: inline-size;
  color: var(--n-ink);
}

.theme-light .abd-shell {
  --n-ink: #241a14;
  --n-muted: #756258;
  --n-paper: #f5ecdf;
  --n-panel: #fffaf3;
  --n-line: #ddcdbb;
  --n-spirit: #b66b2b;
  --n-spirit-deep: #78431f;
  --n-water: #3d8295;
  --n-water-deep: #20505e;
  --n-good: #3f7659;
  --n-warning: #a04c32;
  --n-shadow: #241a1420;
  --n-stage: #e9ddce;
  --n-stage-copy: #241a14;
  --n-glass: #fff8ee;
}

.theme-dark .abd-shell {
  --n-ink: #f7eee2;
  --n-muted: #c4b7aa;
  --n-paper: #171412;
  --n-panel: #211c19;
  --n-line: #4c4039;
  --n-spirit: #e29a51;
  --n-spirit-deep: #f0bd7d;
  --n-water: #75bdc9;
  --n-water-deep: #b0e2e5;
  --n-good: #89c39d;
  --n-warning: #ef987c;
  --n-shadow: #0009;
  --n-stage: #28211c;
  --n-stage-copy: #f7eee2;
  --n-glass: #342a23;
}

.abd-workbench {
  overflow: hidden;
  border: 1px solid var(--n-line);
  border-radius: 1.5rem;
  background: var(--n-paper);
  box-shadow: 0 1.2rem 3rem var(--n-shadow);
}

.abd-rail,
.abd-controls,
.abd-choice,
.abd-fieldset {
  display: grid;
  gap: 0.6rem;
}

.abd-rail {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--n-line);
  background: var(--n-panel);
}

.abd-presets {
  grid-column: 1 / -1;
}

.abd-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abd-choice > span,
.abd-field > span,
.abd-result-grid span,
.abd-proof-row span,
.abd-result-main > span {
  color: var(--n-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.abd-choice > span {
  grid-column: 1 / -1;
}

.abd-choice button {
  min-height: 2.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--n-line);
  border-radius: 0.65rem;
  color: var(--n-ink);
  background: var(--n-paper);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}

.abd-choice button[aria-pressed="true"] {
  border-color: var(--n-ink);
  color: var(--n-panel);
  background: var(--n-ink);
}

.abd-choice button:focus-visible,
.abd-field input:focus-visible {
  outline: 3px solid var(--n-water);
  outline-offset: 2px;
}

.abd-body {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.4fr);
}

.abd-controls {
  align-content: start;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  background: var(--n-panel);
}

.abd-fieldset {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--n-line);
}

.abd-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.abd-field strong {
  color: var(--n-spirit-deep);
  font-size: 0.95rem;
}

.abd-field input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--n-spirit);
}

.abd-field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--n-line);
  border-radius: 0.6rem;
  color: var(--n-ink);
  background: var(--n-paper);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
}

.abd-hint {
  margin: 0;
  color: var(--n-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.abd-stage {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) minmax(15rem, 1.2fr);
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 3vw, 1.8rem);
  background: var(--n-stage);
  color: var(--n-stage-copy);
}

.abd-status,
.abd-notice {
  grid-column: 1 / -1;
}

.abd-status {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.abd-status i {
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--n-good);
  box-shadow: 0 0 0.8rem var(--n-good);
}

.abd-shell[data-status="invalid"] .abd-status i,
.abd-shell[data-status="large"] .abd-status i {
  background: var(--n-warning);
  box-shadow: 0 0 0.8rem var(--n-warning);
}

.abd-status p,
.abd-notice {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.abd-illustration {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.abd-bottle {
  display: block;
  width: min(100%, 20rem);
  height: auto;
  overflow: visible;
}

.abd-bottle-outline {
  fill: var(--n-glass);
  stroke: var(--n-spirit-deep);
  stroke-width: 4;
}

.abd-bottle-neck {
  fill: var(--n-spirit);
  stroke: var(--n-spirit-deep);
  stroke-width: 4;
}

.abd-liquid {
  fill: var(--n-water);
  opacity: 0.85;
  transition: y 0.25s ease, height 0.25s ease;
}

.abd-waterline {
  fill: none;
  stroke: var(--n-water-deep);
  stroke-width: 4;
}

.abd-mark {
  stroke: var(--n-muted);
  stroke-width: 2;
}

.abd-mark-label,
.abd-bottle-label {
  fill: var(--n-stage-copy);
  font-size: 0.65rem;
  font-weight: 800;
}

.abd-bottle-label {
  fill: var(--n-water-deep);
  font-size: 1rem;
  letter-spacing: 0.12em;
}

.abd-water-caption {
  margin: -0.8rem 0 0;
  color: var(--n-water-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.abd-result-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--n-spirit-deep);
  background: var(--n-paper);
  color: var(--n-ink);
  box-shadow: 0 0.55rem 0 var(--n-spirit-deep);
}

.abd-result-main {
  display: grid;
  gap: 0.35rem;
}

.abd-result-main strong {
  color: var(--n-spirit-deep);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 0.95;
}

.abd-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.abd-result-grid div {
  display: grid;
  gap: 0.3rem;
}

.abd-result-grid strong,
.abd-proof-row strong {
  font-size: 0.98rem;
}

.abd-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--n-line);
}

.abd-proof-row span {
  display: grid;
  gap: 0.2rem;
}

.abd-notice {
  padding-top: 0.75rem;
  border-top: 1px solid var(--n-line);
  color: var(--n-muted);
}

@container (max-width: 52rem) {
  .abd-body {
    grid-template-columns: 1fr;
  }

  .abd-controls {
    border-bottom: 1px solid var(--n-line);
  }
}

@container (max-width: 35rem) {
  .abd-rail,
  .abd-stage {
    grid-template-columns: 1fr;
  }

  .abd-presets,
  .abd-status,
  .abd-notice {
    grid-column: auto;
  }

  .abd-result-grid {
    grid-template-columns: 1fr;
  }
}