:root {
  --bg: #f7f8fc;
  --ink: #1f2540;
  --muted: #5b6382;
  --indigo: #5b6cff;
  --coral: #ff7a6b;
  --mint: #3ec9a7;
  --sun: #ffc94d;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
main { text-align: center; padding: 1.5rem; position: relative; z-index: 1; }
h1 {
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 1.05;
  margin: 1.25rem 0 .5rem;
  letter-spacing: -.02em;
}
p { font-size: clamp(1.15rem, 3.5vw, 1.6rem); color: var(--muted); margin: 0; }

.dice {
  width: 84px; height: 84px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(91, 108, 255, .22), inset 0 0 0 3px var(--indigo);
  position: relative;
  transform: rotate(-8deg);
}
.dice span {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--indigo);
}
.dice span:nth-child(1) { top: 16px; left: 16px; }
.dice span:nth-child(2) { top: 16px; right: 16px; }
.dice span:nth-child(3) { top: 35px; left: 35px; background: var(--coral); }
.dice span:nth-child(4) { bottom: 16px; left: 16px; }
.dice span:nth-child(5) { bottom: 16px; right: 16px; }

.shape { position: absolute; opacity: .55; }
.s1 { width: 120px; height: 120px; border-radius: 50%; background: var(--sun); top: -30px; left: -30px; }
.s2 { width: 90px; height: 90px; border-radius: 24px; background: var(--mint); bottom: 8%; left: 8%; transform: rotate(18deg); }
.s3 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 86px solid var(--coral); top: 12%; right: 9%; transform: rotate(14deg); }
.s4 { width: 150px; height: 150px; border-radius: 50%; border: 18px solid var(--indigo); bottom: -50px; right: -40px; opacity: .25; }

@media (prefers-reduced-motion: no-preference) {
  .dice { animation: wobble 4s ease-in-out infinite; }
  @keyframes wobble { 50% { transform: rotate(8deg) translateY(-6px); } }
}