:root {
  --bg-top: #f7efe4;
  --bg-bottom: #dbeafe;
  --ink: #1f2a44;
  --accent: #e4572e;
  --accent-soft: #ffd6c2;
  --panel: rgba(255, 255, 255, 0.74);
  --line: #213547;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(228, 87, 46, 0.25), transparent 38%),
    radial-gradient(circle at 85% 20%, rgba(59, 130, 246, 0.24), transparent 42%),
    linear-gradient(165deg, var(--bg-top), var(--bg-bottom));
}

.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 28px;
  display: grid;
  gap: 16px;
}

.app-header {
  text-align: center;
}

.app-header h1 {
  margin: 0;
  letter-spacing: 0.04em;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
}

.app-header p {
  margin: 8px 0 0;
}

.controls,
.counts {
  background: var(--panel);
  border: 1px solid rgba(31, 42, 68, 0.16);
  border-radius: 16px;
  padding: 12px;
  backdrop-filter: blur(4px);
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #dc2626);
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

#stopButton {
  background: linear-gradient(135deg, #64748b, #334155);
}

#resetButton {
  background: linear-gradient(135deg, #0284c7, #0369a1);
}

#tickRange {
  width: 220px;
}

.diagram {
  position: relative;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 42, 68, 0.2);
  padding: 12px;
  overflow: hidden;
}

#arrowLayer {
  width: 100%;
  height: auto;
  display: block;
}

.arrow {
  fill: none;
  stroke: var(--line);
  stroke-width: 4;
  marker-end: url(#arrowHead);
}

.states {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.state {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #334155;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 120ms linear, color 120ms linear, box-shadow 120ms linear;
}

.state-a {
  left: 30%;
}

.state-b {
  left: 70%;
}

.state.active {
  background: var(--accent);
  color: #fff7ed;
  border-color: #7f1d1d;
  box-shadow: 0 0 0 9px rgba(228, 87, 46, 0.18);
}

.probability-inputs {
  position: absolute;
  inset: 0;
}

.prob {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 42, 68, 0.25);
  border-radius: 10px;
  padding: 6px 8px;
  transform: translate(-50%, -50%);
}

.prob input {
  width: 100%;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(31, 42, 68, 0.35);
}

.prob input[readonly] {
  background: rgba(148, 163, 184, 0.18);
  color: #334155;
}

.counts {
  display: grid;
  gap: 6px;
}

.counts h2 {
  margin: 0 0 4px;
}

.count-row {
  font-size: 1.05rem;
}

@media (max-width: 760px) {
  .state {
    width: 84px;
    height: 84px;
    font-size: 1.5rem;
  }

  .prob {
    min-width: 88px;
    font-size: 0.78rem;
    padding: 5px 6px;
  }

  #tickRange {
    width: 180px;
  }
}