body{
  font-family:Arial, sans-serif;
  background:#111;
  color:white;
  text-align:center;
  margin:0;
}
header{padding:20px;}
.bookmark{
  background:#ff4500;
  padding:12px;
  font-weight:bold;
  max-width:700px;
  margin:auto;
  border-radius:6px;
}
.stove{
  max-width:500px;
  margin:40px auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}
.plate{
  width:170px;
  height:170px;
  background:black;
  border-radius:50%;
  border:8px solid #333;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:0.3s;
  padding:6px;
  box-sizing:border-box;
}
.plate.active{
  box-shadow:
    0 0 10px #ff4500,
    0 0 30px #ff4500,
    inset 0 0 20px #ff4500;
}
@keyframes blinkRed {
  0% { box-shadow: 0 0 10px red, 0 0 20px red inset; }
  50% { box-shadow: 0 0 30px red, 0 0 10px red inset; }
  100% { box-shadow: 0 0 10px red, 0 0 20px red inset; }
}
.plate.finished {
  animation: blinkRed 1s infinite;
}
.timer{font-size:24px;margin-bottom:6px;}
input{width:50px;text-align:center;margin-bottom:6px;border-radius:4px;padding:2px;}
.btn-group{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.plate button{
  padding:4px;
  font-size:14px;
  min-width:32px;
  min-height:32px;
  border-radius:50%;
  text-align:center;
  border:none;
  background:#ff4500;
  color:white;
  cursor:pointer;
}
.plate button:hover{background:#ff6600;}
button.reset-all{
  margin-top:20px;
  padding:6px 12px;
  font-size:16px;
  border-radius:6px;
}
.stats{
  margin-top:30px;
  background:#1a1a1a;
  padding:15px;
  border-radius:8px;
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
  font-size:18px;
}
footer{margin-top:40px;opacity:0.7;font-size:14px;}