:root {
  --bg: #0f172a;          /* slate-900 */
  --panel: #111827;       /* gray-900 */
  --text: #e5e7eb;        /* gray-200 */
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text);
  background: radial-gradient(1200px 800px at 70% -20%, #1f2937 0, var(--bg) 55%);
}

.wrap {
  min-height: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: 5rem 1.5rem 3rem;
  text-align: center;
}

h1 { margin: 0 0 .25rem; font-weight: 800; letter-spacing: .02em;
     font-size: clamp(1.6rem, 2.5vw + 1rem, 3rem); }
.section-title { margin: 2.5rem 0 .25rem; font-weight: 700; }
.sub { margin: 0 0 2.0rem; color: #a7b0be; }

.tick { font-size: clamp(1.2rem, 5vw + .5rem, 3.2rem); }

/* ---- SPACING TUSSEN DE BLOKKEN ---- */
.tick-group {
  margin: 0 .45em;            /* ruimte links/rechts per groep */
}

/* ---- LABELS ONDER DE BLOKKEN ---- */
.tick-label {
  display: block;
  margin-top: .35em;
  font-size: .3em;
  letter-spacing: .10em;
  text-transform: capitalize;
  color: #94a3b8;
}

/* Optische styling Flip */
.tick-flip { border-radius: .25em; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.tick-flip-panel { background-color: var(--panel); color: var(--text); }
.tick-flip-shadow { box-shadow: 0 .2em 1em rgba(0,0,0,.6); }

/* Single-value variant kan iets groter zonder padding */
.tick--single .tick-group { margin: 0 .25em; }
.tick--single .tick-label { font-size: .32em; }


.credits { margin-top: 3rem; font-size: .875rem; color: #94a3b8; }
.credits a { color: #cbd5e1; }