:root {
  --bg: #15110c;
  --card: #1f1a13;
  --line: #342b20;
  --text: #f3e9da;
  --dim: #a8906a;
  --amber: #ffbe46;
  --green: #34d399;
  --red: #f87171;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  padding: 24px 16px 64px;
  max-width: 920px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
h2 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #c9b696; }
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
button {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--amber); color: #241a08; font-weight: 650; cursor: pointer;
}
button#stop { background: transparent; color: var(--text); }
button:disabled { opacity: .4; cursor: not-allowed; }
label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #c9b696; }
input[type=range] { width: 120px; accent-color: var(--amber); }
.level { width: 76px; height: 8px; border-radius: 99px; background: #2a2218; overflow: hidden; }
.level::after { content: ""; display: block; height: 100%; width: var(--fill, 0%); background: var(--amber); transition: width .08s linear; }

.verdict-card {
  margin: 20px 0 12px; padding: 22px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--card);
}
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; background: #2d251a; color: #c9b696;
}
.badge[data-tone=warm], .verdict[data-tone=warm] { color: var(--amber); }
.badge[data-tone=hot], .verdict[data-tone=hot] { color: #ffd98a; }
.badge[data-tone=done] { background: #10351f; color: var(--green); }
.verdict { margin-top: 10px; font-size: clamp(26px, 6vw, 44px); font-weight: 700; letter-spacing: -.02em; }
.verdict[data-tone=done] { color: var(--green); }
.sub { margin-top: 6px; color: #b8a583; font-size: 14px; min-height: 20px; }

canvas { width: 100%; height: 220px; border: 1px solid var(--line); border-radius: 14px; background: #19140e; }

.grid {
  display: grid; gap: 1px; margin: 12px 0 24px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.grid > div { background: var(--card); padding: 12px 14px; }
dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #a3906f; }
dd { margin: 4px 0 0; font: 600 20px/1.1 ui-monospace, monospace; }

.explain { margin-top: 20px; color: #ccbb9c; }
.explain p { margin: 0 0 10px; max-width: 70ch; }
.explain strong { color: var(--text); }
.log { font: 12px/1.7 ui-monospace, monospace; color: #b8a583; max-height: 220px; overflow: auto; }