:root{color:#f7efe2;background:#141210;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{font:inherit}.app{background:linear-gradient(135deg,#17120f,#222831 58%,#15171a);grid-template-columns:minmax(0,1fr) 300px;min-height:100vh;display:grid}.machine{grid-template-rows:auto minmax(270px,1fr) auto auto;gap:14px;min-height:100vh;padding:22px clamp(16px,5vw,58px);display:grid}header{justify-content:space-between;gap:16px;display:flex}h1,h2,p{margin:0}h1{font-size:clamp(40px,8vw,82px);line-height:.9}p,.pill span,#meta{color:#c8bdac}.pill{text-align:right;background:#00000040;border:1px solid #ffffff29;border-radius:8px;min-width:86px;height:66px;padding:10px}.pill b,.pill span{display:block}.pill b{font-size:26px}.popper{aspect-ratio:1;cursor:pointer;filter:drop-shadow(0 28px 28px #00000073);background:0 0;border:0;border-radius:50%;place-self:center;width:min(68vw,460px);position:relative}.glass{background:radial-gradient(circle at 32% 22%,#ffffffb3,#0000 24%),radial-gradient(circle,#c9e7ec52,#11171cad 72%);border:2px solid #ffffff73;border-radius:50%;place-items:center;display:grid;position:absolute;inset:4%;box-shadow:0 0 0 14px #30241d,0 0 0 26px #bd2f2d,inset 0 -26px 50px #00000059}.dice{z-index:1;grid-template-columns:repeat(3,1fr);place-items:center;gap:12px;width:72%;display:grid}.die{aspect-ratio:1;background:#fff8eb;border-radius:16%;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:4px;width:clamp(54px,10vw,86px);padding:12%;display:grid;transform:rotate(-4deg);box-shadow:inset -8px -10px 16px #00000029,0 10px 16px #0000003d}.die:nth-child(2n){transform:rotate(6deg)}.die i{border-radius:50%}.die i.on{background:#15120f}.stem{background:linear-gradient(#eee2c9,#7d6f61);border-radius:18px;width:17%;height:28%;position:absolute;bottom:5%;left:50%;transform:translate(-50%)}.stem:before{content:"";aspect-ratio:2.3;background:linear-gradient(#f2d66d,#c83d35 55%,#7c1d1b);border-radius:999px;width:160%;position:absolute;bottom:88%;left:50%;transform:translate(-50%)}.rolling .dice{animation:.48s linear shake}.rolling .stem{animation:.52s plunge}.counts{grid-template-columns:repeat(6,1fr);justify-self:center;gap:9px;width:min(600px,100%);display:grid}.counts button{color:#f7efe2;cursor:pointer;background:#ffffff14;border:1px solid #ffffff29;border-radius:8px;height:48px;font-weight:800}.counts button.on{color:#15120f;background:#f3d26a}.read{border-top:1px solid #ffffff26;border-bottom:1px solid #ffffff26;justify-content:space-between;justify-self:center;align-items:center;gap:18px;width:min(600px,100%);min-height:70px;display:flex}#total{font-size:42px}aside{background:#00000042;border-left:1px solid #ffffff21;padding:24px 18px}ol{gap:8px;margin:18px 0 0;padding:0;list-style:none;display:grid}li{background:#ffffff12;border-radius:8px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:42px;padding:9px;display:grid}li span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}li code{color:#f3d26a}@keyframes shake{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-12px,10px)rotate(-8deg)}50%{transform:translate(10px,-8px)rotate(7deg)}75%{transform:translate(-7px,-4px)rotate(-4deg)}}@keyframes plunge{0%,to{transform:translate(-50%)translateY(0)}45%{transform:translate(-50%)translateY(20%)}}@media (width<=820px){.app{grid-template-columns:1fr}aside{border-top:1px solid #ffffff21;border-left:0}}@media (width<=540px){.machine{padding:18px 14px}.popper{width:min(88vw,420px)}.read{flex-direction:column;align-items:flex-start;padding:10px 0}}