.dm-decision {
  --dmd-ink: #ececea;
  --dmd-body: #b4b4b0;
  --dmd-muted: #82827f;
  --dmd-line: rgba(255, 255, 255, 0.08);
  --dmd-line-strong: rgba(255, 255, 255, 0.16);
  --dmd-card: #141518;
  --dmd-accent: #ff9ffc;
  --dmd-violet: #b4a1ff;
  --dmd-ok: #4ade80;
  --dmd-warn: #f5c26b;
  --dmd-bad: #ff8a7a;
  --dmd-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  display: grid;
  gap: 18px;
  padding: clamp(14px, 2.4vw, 24px);
  color: var(--dmd-ink);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.dm-decision *,
.dm-decision *::before,
.dm-decision *::after { box-sizing: border-box; }

.dm-decision :where(button, input, output) { font: inherit; color: inherit; margin: 0; }

.dmd-controls { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: center; }
.dmd-label { grid-column: 1 / -1; font: 12px var(--dmd-mono); color: var(--dmd-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.dmd-slider-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dmd-slider { flex: 1; min-width: 0; accent-color: var(--dmd-accent); height: 24px; cursor: pointer; }
.dmd-value { font: 600 28px var(--dmd-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 3.4ch; }
.dmd-presets { display: flex; gap: 6px; }
.dmd-preset { padding: 6px 12px; border: 1px solid var(--dmd-line-strong); border-radius: 999px; background: transparent; font: 12px var(--dmd-mono); color: var(--dmd-body); cursor: pointer; transition: border-color 200ms, color 200ms, background 200ms; }
.dmd-preset:hover { color: var(--dmd-ink); border-color: rgba(255, 255, 255, 0.3); }
.dmd-preset[aria-pressed="true"] { background: rgb(255 159 252 / 0.14); border-color: var(--dmd-accent); color: var(--dmd-ink); }
.dmd-preset:focus-visible, .dmd-slider:focus-visible { outline: 1px solid var(--dmd-accent); outline-offset: 3px; }

.dmd-chart { border: 1px solid var(--dmd-line); border-radius: 12px; background: var(--dmd-card); padding: 12px 12px 10px; }
.dmd-axis-cap { font: 11px var(--dmd-mono); color: var(--dmd-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.dmd-svg { display: block; width: 100%; height: auto; }
.dmd-axis { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.dmd-tick { font: 11px var(--dmd-mono); fill: var(--dmd-muted); }
.dmd-zone { fill: rgb(82 39 255 / 0.16); transition: x 160ms ease, width 160ms ease; }
.dmd-line { stroke: var(--dmd-accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dmd-dot { stroke-width: 1.5; cursor: pointer; transition: fill 200ms, stroke 200ms, r 200ms; }
.dmd-dot.is-refund { fill: var(--dmd-ink); stroke: var(--dmd-ink); }
.dmd-dot.is-human { fill: #101112; stroke: rgba(255, 255, 255, 0.7); }
.dmd-dot.is-wrong { fill: var(--dmd-bad); stroke: var(--dmd-bad); }
.dmd-dot.is-extra { fill: var(--dmd-warn); stroke: var(--dmd-warn); }
.dmd-dot.is-selected { r: 9; stroke: var(--dmd-accent); stroke-width: 2.5; }
.dmd-dot:focus-visible { outline: none; stroke: var(--dmd-accent); stroke-width: 3; }

.dmd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: var(--dmd-muted); }
.dmd-key { display: inline-flex; align-items: center; gap: 6px; }
.dmd-key i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid; }
.dmd-key .is-refund { background: var(--dmd-ink); border-color: var(--dmd-ink); }
.dmd-key .is-human { background: #101112; border-color: rgba(255, 255, 255, 0.7); }
.dmd-key .is-wrong { background: var(--dmd-bad); border-color: var(--dmd-bad); }
.dmd-key .is-extra { background: var(--dmd-warn); border-color: var(--dmd-warn); }

.dmd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--dmd-line); border: 1px solid var(--dmd-line); border-radius: 12px; overflow: hidden; }
.dmd-stat { display: grid; gap: 2px; padding: 12px 14px; background: var(--dmd-card); transition: background 200ms; }
.dmd-stat span { font: 11px var(--dmd-mono); color: var(--dmd-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dmd-stat b { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dmd-stat small { font-size: 12px; color: var(--dmd-muted); }
.dmd-stat.is-bad b { color: var(--dmd-bad); }
.dmd-stat.is-warn b { color: var(--dmd-warn); }

.dmd-haiku { margin: 0; display: grid; gap: 2px; padding: 10px 14px; border: 1px dashed var(--dmd-line-strong); border-radius: 12px; font-size: 13px; color: var(--dmd-body); }
.dmd-haiku b { font: 11px var(--dmd-mono); color: var(--dmd-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400; }

.dmd-detail { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--dmd-line); border-radius: 12px; background: var(--dmd-card); }
.dmd-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dmd-detail-head b { font: 600 13px var(--dmd-mono); }
.dmd-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--dmd-line-strong); font: 11px var(--dmd-mono); color: var(--dmd-muted); }
.dmd-message { margin: 0; padding-left: 12px; border-left: 2px solid var(--dmd-violet); color: var(--dmd-ink); font-size: 15px; }
.dmd-facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.dmd-facts dt { font: 11px var(--dmd-mono); color: var(--dmd-muted); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.dmd-facts dd { margin: 0; color: var(--dmd-body); }
.dmd-facts .dmd-mono { font-family: var(--dmd-mono); color: var(--dmd-ink); }
.dmd-facts .dmd-ok { color: var(--dmd-ok); }
.dmd-facts .dmd-bad { color: var(--dmd-warn); }

@media (max-width: 640px) {
  .dmd-controls { grid-template-columns: 1fr; }
  .dmd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmd-facts { grid-template-columns: 1fr; gap: 2px; }
  .dmd-facts dd { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .dmd-zone, .dmd-dot, .dmd-stat, .dmd-preset { transition: none; }
}