.grain {
  position: relative;
}
.grain:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#n)" opacity="0.07"/></svg>');
  mix-blend-mode: soft-light;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
:root {
  --text: #e7ecf3;
  --muted: #9ca8be;
  --card: rgba(15, 20, 34, 0.75);
  --accent: #2563eb;
}

.section {
  padding: 80px 0;
}

.section .container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
}

.section .muted {
  color: var(--muted);
  font-size: 0.95rem;
}

.section input[type="number"] {
  width: 100%;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--text), transparent 86%);
  background: color-mix(in oklab, var(--card), transparent 20%);
  color: var(--text);
  padding: 10px 12px;
}

.section label {
  font-size: 0.85rem;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}

.section .card {
  background: color-mix(in oklab, var(--card), transparent 12%);
  border-radius: 14px;
}

.section .btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), white 25%));
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.25);
}

.section .btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.35);
}

.section .footnote {
  color: var(--muted);
  font-size: 0.8rem;
}

.section details {
  background: color-mix(in oklab, var(--card), transparent 30%);
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
}

.section details + details {
  margin-top: 12px;
}

.section details summary {
  color: var(--text);
}