:root{--bg:#fbf7ef;--fg:#2b2a33;--muted:#6b6877;--a:#e8604c;--b:#f2b441;--c:#3aa6a0}
@media (prefers-color-scheme:dark){:root{--bg:#17161d;--fg:#f3efe6;--muted:#a19eae}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.5rem;background:var(--bg);color:var(--fg);font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5}
main{text-align:center;max-width:34rem}
h1{margin:1.25rem 0 .5rem;font-size:clamp(2.25rem,9vw,3.75rem);line-height:1.1;letter-spacing:-.02em}
p{margin:0;font-size:clamp(1.05rem,3.6vw,1.3rem);color:var(--muted)}
.dice{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:.4rem;width:4.5rem;height:4.5rem}
.dice span{border-radius:30%}
.dice span:nth-child(1){background:var(--a)}
.dice span:nth-child(2){background:var(--b);border-radius:50%}
.dice span:nth-child(3){background:var(--c);border-radius:50%}
.dice span:nth-child(4){background:var(--a);opacity:.55}