/* ===== Digit Lab Live Demo（仅 /projects/digit-lab/ 加载） ===== */
.digit-demo { max-width: 40rem; margin-bottom: 3rem; }
.demo-note { margin: 0 0 1.5rem; max-width: 36rem; font-size: 0.95rem; color: var(--muted); }
.demo-action-row { margin: 0 0 1.5rem; }

/* 文本式 action（语义为 button） */
.demo-start, .demo-clear {
  border: none;
  background: none;
  padding: 0.3rem 0;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}
.demo-start { font-size: 1.05rem; }
.demo-clear { font-size: 0.9rem; color: var(--muted); }
.demo-start:hover, .demo-clear:hover { color: var(--muted); }

.demo-stage {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.demo-stage[hidden] { display: none; }
#draw-canvas {
  display: block;
  width: 280px;
  max-width: 100%;
  height: 280px;
  background: #000;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  touch-action: none;
  cursor: crosshair;
}
.demo-clear-row { margin: 0.6rem 0 0; }
.demo-label {
  margin: 0 0 0.15rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.demo-digit {
  margin: 0;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}
/* 右栏压缩：rows 更紧、gap 更小，使面板底边与 280px 画布基本齐平 */
.demo-bars { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.demo-bars li {
  display: grid;
  grid-template-columns: 1rem 1fr 3rem;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.3rem;
  line-height: 1.2;
}
.bar-label { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.bar-track { height: 3px; background: var(--hairline); }
.bar-fill { display: block; width: 0; height: 100%; background: var(--text); }
.bar-pct {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.demo-bars li.winner .bar-label,
.demo-bars li.winner .bar-pct { color: var(--text); }
.demo-status {
  margin: 0;
  min-height: 1.5em;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .demo-stage { grid-template-columns: 1fr; gap: 1.5rem; }
}