:root{font-family:system-ui,sans-serif;background:#0f172a;color:#f8fafc}*{box-sizing:border-box}body{margin:0}main{max-width:760px;margin:auto;padding:16px}header,nav,.setting{display:flex;align-items:center;justify-content:space-between;gap:10px}h1{font-size:26px}section{background:#1e293b;border-radius:16px;padding:18px;margin-top:16px}button,select{background:#334155;color:#fff;border:0;border-radius:9px;padding:12px;font:inherit;cursor:pointer}button.active,.roll{background:#2563eb}nav button{flex:1}select{display:block;width:100%;margin:10px 0}.dice{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.die{border-radius:14px;width:110px;height:110px;padding:10px;display:flex;flex-direction:column;justify-content:space-between}.die strong{font-size:26px;text-align:center}.die small{color:inherit}.roll{width:100%;font-size:22px;font-weight:700;padding:22px}.setting{border-bottom:1px solid #475569;padding:12px 0;flex-wrap:wrap}.setting label{display:flex;gap:6px;align-items:center}.chart{height:270px;margin:16px 0}@media(max-width:430px){main{padding:10px}.die{width:92px;height:92px}.setting input[type=range]{width:115px}}