.oa-panel {
  --oa-ink: #2d3428;
  --oa-muted: #626653;
  --oa-olive: #526147;
  --oa-rust: #874936;
  --oa-line: #d9d1c0;
  color: var(--oa-ink);
}

.oa-panel .oa-card {
  display: grid;
  grid-template-columns: clamp(150px, 23%, 242px) minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--oa-line);
  background: #faf7ef;
}

.oa-panel .oa-art {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 190px;
  padding: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 39%, #ede8d7, #e2dbca);
  border-inline-end: 1px solid var(--oa-line);
}

.oa-panel .oa-art svg {
  width: min(100%, 212px);
  height: auto;
  stroke-width: 1.6;
}

.oa-panel .oa-body {
  min-width: 0;
  align-self: center;
  padding: 22px clamp(18px, 4vw, 36px);
}

.oa-panel .oa-body h3 {
  margin: 0;
  color: var(--oa-ink);
  font: 600 clamp(23px, 3vw, 33px)/1.22 var(--serif, Georgia, serif);
}

.oa-panel .oa-description {
  max-width: 62ch;
  margin: 7px 0 15px;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.65;
}

.oa-panel .oa-readout,
.oa-panel .oa-tea-readout,
.oa-panel .oa-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.oa-panel .oa-readout,
.oa-panel .oa-tea-readout {
  gap: 12px;
  min-height: 28px;
  margin-block: 6px 12px;
}

.oa-panel .oa-controls .button,
.oa-panel .oa-controls select {
  min-height: 42px;
}

.oa-panel .oa-controls select {
  padding: 7px 12px;
  border: 1px solid #c5c9b7;
  background: #fbf8ef;
  color: var(--oa-olive);
  font-size: 13px;
}

.oa-panel .oa-controls button:disabled,
.oa-panel .oa-controls select:disabled {
  cursor: default;
  opacity: .62;
}

.oa-panel .oa-controls button[aria-pressed="true"] {
  border-color: #7b8b72;
  background: #e9ede1;
}

.oa-panel .oa-numbers {
  color: var(--oa-olive);
  font: 600 22px/1 var(--serif, Georgia, serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oa-panel .oa-status,
.oa-panel .oa-phase {
  margin: 0;
  color: var(--oa-olive);
  font-size: 13px;
  line-height: 1.55;
}

.oa-panel .oa-status:empty {
  display: none;
}

.oa-panel .oa-readout progress {
  width: min(108px, 100%);
  height: 4px;
  color: var(--oa-olive);
  accent-color: var(--oa-olive);
}

.oa-panel .oa-cord {
  stroke: #ac8b73;
  stroke-width: 1.8px;
}

.oa-panel .oa-bead {
  fill: #9e7b61;
  stroke: #e8ddcd;
  stroke-width: 1px;
  transition: fill .18s ease;
}

.oa-panel .oa-bead-passed,
.oa-panel .oa-master-bead {
  fill: var(--oa-rust);
  stroke: #f3e5ce;
}

.oa-panel .oa-bead-latest {
  fill: #56382c;
  stroke: #f5e5bf;
  stroke-width: 1.8px;
}

.oa-panel .oa-tassel {
  stroke: #744e40;
  stroke-width: 1.4px;
}

.oa-panel .oa-art--breath {
  background: radial-gradient(ellipse at center, #e6ecde, #dce5d7);
}

.oa-panel .oa-art--breath svg {
  z-index: 1;
  width: 42px;
  color: #43533b;
}

.oa-panel .oa-breath-outline,
.oa-panel .oa-breath-ring {
  position: absolute;
  width: 118px;
  aspect-ratio: 1;
  border: 1px solid #6e836255;
  border-radius: 50%;
}

.oa-panel .oa-breath-ring {
  transform: scale(.73);
  background: #c4d3b7;
  transition: transform .4s ease, background-color .4s ease;
}

.oa-panel .oa-art--breath[data-phase="in"] .oa-breath-ring,
.oa-panel .oa-art--breath[data-phase="out"] .oa-breath-ring {
  transition-duration: 4s;
}

.oa-panel .oa-art--breath[data-phase="in"] .oa-breath-ring {
  transform: scale(1.12);
  background: #cbd8be;
}

.oa-panel .oa-art--breath[data-phase="out"] .oa-breath-ring {
  transform: scale(.73);
  background: #b9c8ac;
}

.oa-panel .oa-art--tea {
  background: radial-gradient(ellipse at 47% 50%, #eddfca, #e4d4bc);
}

.oa-panel .oa-hearth-line {
  stroke: #846957;
}

.oa-panel .oa-hearth-coals {
  fill: #8e6650;
  stroke: none;
}

.oa-panel .oa-pot {
  fill: #65715c;
  stroke: #3e4c3a;
}

.oa-panel .oa-pot-line {
  stroke: #3e4c3a;
}

.oa-panel .oa-cup {
  fill: #a77f65;
  stroke: #765743;
}

.oa-panel .oa-cup-top {
  fill: #d9b79a;
  stroke: #765743;
}

.oa-panel .oa-fire {
  transform-origin: center bottom;
  transform-box: fill-box;
  fill: #d09364;
  stroke: none;
  opacity: .2;
  transition: opacity .35s ease;
}

.oa-panel .oa-art--tea:is([data-stage="warming"], [data-stage="warm"], [data-stage="steeping"]) .oa-fire {
  opacity: .95;
  animation: oa-embers 1.6s ease-in-out infinite alternate;
}

.oa-panel .oa-steam {
  stroke: #7a7769;
  opacity: 0;
  transition: opacity .45s ease;
}

.oa-panel .oa-art--tea:is([data-stage="warm"], [data-stage="steeping"], [data-stage="ready"]) .oa-steam-pot,
.oa-panel .oa-art--tea[data-stage="served"] .oa-steam-cup {
  opacity: .82;
}

.oa-panel .oa-art--tea[data-stage="served"] .oa-cup-top {
  fill: #8b4f30;
}

.oa-panel .oa-tea-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oa-panel .oa-tea-steps li {
  padding: 4px 10px;
  border: 1px solid var(--oa-line);
  color: #6d6658;
  font-size: 11px;
}

.oa-panel .oa-tea-steps li[aria-current="step"] {
  border-color: #7e8d76;
  background: #e6eadf;
  color: var(--oa-olive);
}

.oa-panel .oa-tea-steps .oa-tea-step-done {
  border-color: #becab5;
  color: var(--oa-olive);
}

@keyframes oa-embers {
  to { transform: scale(.91, .84); opacity: .7; }
}

@media (max-width: 580px) {
  .oa-panel .oa-card { grid-template-columns: 1fr; }
  .oa-panel .oa-art {
    height: 125px;
    min-height: 0;
    border-inline-end: 0;
    border-block-end: 1px solid var(--oa-line);
  }
  .oa-panel .oa-art svg { max-height: 106px; }
  .oa-panel .oa-breath-outline,
  .oa-panel .oa-breath-ring { width: 82px; }
  .oa-panel .oa-body { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .oa-panel *,
  .oa-panel *::before,
  .oa-panel *::after {
    animation: none !important;
    transition: none !important;
  }
  .oa-panel .oa-breath-ring { transform: none !important; }
}