.stamp-field {
  position: relative;
  height: 172px;
  overflow: hidden;
  border: 1px solid #cfd9e7;
  border-radius: 3px;
  background: #f3f6fa;
}
.stamp-track {
  position: absolute;
  inset: 80px 0 12px;
  border-block: 1px solid #b9c4d3;
  background: repeating-linear-gradient(90deg, #e0e6ee 0 12px, #d8e0eb 13px 15px);
}
.stamp-paper {
  position: absolute;
  top: 84px;
  width: 88%;
  height: 72px;
  translate: -50% 0;
  border: 1px solid #c7c5be;
  background: #fffdf4;
  box-shadow: 0 2px 3px #17274224;
}
.stamp-paper::before, .stamp-paper::after {
  content: '';
  position: absolute;
  inset: 15px 10% auto;
  height: 35px;
  background: repeating-linear-gradient(#d8d5c9 0 1px, transparent 1px 10px);
}
.stamp-paper::after { inset-inline: 8% 55%; opacity: .4; }
.stamp-box {
  position: absolute;
  z-index: 1;
  inset: 17px 42%;
  border: 1px dashed #8e887a;
  background: #fffdf4;
}
.stamp-tool {
  position: absolute;
  z-index: 2;
  top: 21px;
  left: 50%;
  width: 38px;
  height: 15px;
  translate: -50% 0;
  border: 1px solid #2c3b4e;
  border-radius: 2px;
  background: #5a6d85;
}
.stamp-tool span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 20px;
  height: 19px;
  translate: -50% 0;
  border-radius: 5px 5px 0 0;
  background: #3e4c60;
}
.stamp-field[data-stamp="descending"] .stamp-tool { translate: -50% 76px; transition: translate .32s ease-in; }
.stamp-field[data-stamp="landed"] .stamp-tool { translate: -50% 55px; transition: translate .14s ease-out; }
.stamp-imprint {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(20px, 7cqw, 29px);
  aspect-ratio: 1;
  translate: -50% -50%;
  rotate: -9deg;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: #9d3432;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
}
.stamp-imprint[data-hit] { color: var(--green); }

.measure-cups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.measure-cup { display: flex; flex-direction: column; justify-content: end; align-items: center; min-width: 0; }
.measure-vessel {
  position: relative;
  isolation: isolate;
  width: min(80%, 84px);
  height: calc(var(--capacity) * 24px);
  overflow: hidden;
  border: 2px solid #8aa4c4;
  border-top: 1px solid #c3d2e7;
  border-radius: 2px 2px 12px 12px;
  background: #f4f8fe;
}
.measure-water {
  position: absolute;
  inset: auto 0 0;
  height: var(--water);
  border-top: 1px solid #568eca;
  background: linear-gradient(100deg, #a4c8f1, #7eafe8);
  transition: height .22s ease-out;
}
.measure-cup[data-empty-cup] .measure-water { border-top-width: 0; }
.measure-ticks { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
.measure-ticks i { width: 15px; height: 1px; background: #516b8d; }
.measure-level { margin: 7px 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.measure-actions, .measure-pour { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.measure-actions { width: 100%; }
.measure-pour { margin-top: 9px; }
.measure-pour .lab-button { background: #f2f6fc; }

.verify-here {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.verify-here:focus-visible { outline-color: white; }
.verify-lamp {
  width: 23px;
  height: 23px;
  margin: 19px auto;
  border: 1px solid #86919c;
  border-radius: 50%;
  background: #ced4db;
  box-shadow: inset 0 1px 4px #44556c54, 0 0 0 5px #edf0f3;
}
.verify-lamp[data-on] { border-color: #227447; background: #4fba78; box-shadow: inset 0 1px 4px #fff6, 0 0 0 5px #e0f1e7; }
.primary[data-light="on"] { border-color: #227447; background: #227447; }
.primary[data-light="off"] { border-color: #aeb8c5; background: #e4e8ee; color: #42526a; }
.primary[data-light="off"]:hover { background: #d8dfe8; }

@media (prefers-reduced-motion: reduce) {
  .measure-water { transition: none; }
}