@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap");:root{--ink:#20213a;--muted:#777893;--purple:#6c4cf1;--purple-dark:#5638d8;--surface:#ffffff;--background:#f2f1ff}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{background:var(--background);color:var(--ink);font-family:DM Sans,sans-serif}button{font:inherit}.pageShell{align-items:center;background:radial-gradient(circle at 15% 15%,rgba(166,151,255,.35),transparent 27rem),radial-gradient(circle at 90% 85%,rgba(112,224,211,.22),transparent 24rem),var(--background);display:flex;justify-content:center;min-height:100vh;padding:24px}.card{background:var(--surface);border:1px solid rgba(108,76,241,.08);border-radius:32px;box-shadow:0 24px 70px rgba(74,64,143,.14);max-width:440px;padding:48px 32px 34px;text-align:center;width:100%}.eyebrow{color:var(--purple);font-size:.72rem;font-weight:700;letter-spacing:.2em;margin-bottom:14px}h1{font-family:Space Grotesk,sans-serif;font-size:clamp(2.4rem,8vw,3.3rem);letter-spacing:-.07em;line-height:1;margin:0}.intro{color:var(--muted);font-size:1rem;margin:18px 0 30px}.dieArea{align-items:center;display:flex;justify-content:center;min-height:190px}.die{background:linear-gradient(145deg,#8068fa,#5d40e7);border:8px solid #a496ff;border-radius:30px;box-shadow:0 18px 30px rgba(94,65,229,.3),inset 0 2px 2px rgba(255,255,255,.3);display:grid;grid-gap:12px;gap:12px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:158px;padding:21px;width:158px}.pip{align-self:center;background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(54,32,152,.2);height:22px;justify-self:center;width:22px}.dieRolling{animation:shake .13s linear infinite}@keyframes shake{0%{transform:rotate(-6deg) translate(-2px,1px)}50%{transform:rotate(6deg) translate(2px,-1px)}to{transform:rotate(-6deg) translate(-2px,1px)}}.result{color:var(--ink);font-family:Space Grotesk,sans-serif;font-size:1.25rem;font-weight:600;margin:25px 0 20px}.rollButton{background:var(--purple);border:0;border-radius:14px;box-shadow:0 8px 18px rgba(108,76,241,.25);color:white;cursor:pointer;font-size:1rem;font-weight:700;padding:16px 28px;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;width:100%}.rollButton:hover:not(:disabled){background:var(--purple-dark);box-shadow:0 10px 22px rgba(108,76,241,.35);transform:translateY(-2px)}.rollButton:focus-visible{outline:3px solid #b8adff;outline-offset:3px}.rollButton:disabled{cursor:not-allowed;opacity:.72}.rollCount{color:var(--muted);font-size:.82rem;margin:18px 0 0}@media (max-width:420px){.card{border-radius:24px;padding:38px 24px 28px}}