:root{color:#15221f;background:#fff;font-family:SF Mono,Menlo,Monaco,monospace}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}.roller{width:100vw;height:100svh;overflow:hidden;background:#fff}header{position:absolute;z-index:1;top:12px;right:12px}.eyebrow{margin:0;color:#45635b;font-size:11px;font-weight:500;letter-spacing:0}.settings-button,.close-button{border:1px solid #15221f;background:#f9faf6;color:#15221f;width:42px;height:42px;border-radius:4px;font-size:22px;line-height:1}.dice-stage{display:flex;align-items:center;justify-content:center;width:100%;height:100svh;overflow:hidden;border:0;background:transparent;color:inherit}.dice-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));align-items:center;justify-items:center;gap:16px;width:100%;height:100%}.die{display:grid;width:100%;height:100%;place-items:center;color:var(--die-color);text-align:center}.die.pipped{position:relative;top:-.07em;font-family:Georgia,serif;font-size:min(calc(100vw / var(--columns)),calc(100svh / var(--rows)));line-height:1}.die.numbered{font-family:Avenir Next,Futura,sans-serif;font-size:min(calc(72vw / var(--columns)),calc(72svh / var(--rows)));font-weight:800}.rolling{animation:roll .38s cubic-bezier(.25,.75,.25,1)}@keyframes roll{50%{transform:rotate(14deg) scale(.84)}}.settings{position:fixed;z-index:2;top:0;right:0;display:flex;flex-direction:column;width:min(420px,100%);height:100svh;padding:24px;overflow-y:auto;background:#f9faf6;border-left:1px solid #15221f;transform:translate(102%);transition:transform .18s ease-out}.settings.is-open{transform:translate(0)}.settings-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid #a9b9b3}h1{margin:7px 0 0;font-family:Avenir Next,Futura,sans-serif;font-size:28px;letter-spacing:0}.die-settings{display:grid;gap:14px;padding:20px 0}fieldset{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:14px;border:1px solid #a9b9b3;border-radius:4px}legend{padding:0 5px;font-size:12px;color:#45635b}label{display:grid;gap:6px;font-size:12px}input[type=color],select{width:100%;height:38px;border:1px solid #45635b;border-radius:3px;background:#fffef9}input[type=color]{padding:3px}.remove-button{grid-column:span 2;justify-self:start;padding:0;border:0;background:transparent;color:#7d2820;font-size:12px;text-decoration:underline}.remove-button:disabled{color:#9aa6a1;cursor:not-allowed}.add-button{width:100%;padding:13px;border:1px solid #15221f;border-radius:4px;background:#15221f;color:#fffef9}.scrim{position:fixed;inset:0;z-index:1;display:none;background:#15221f4d}.scrim.is-open{display:block}@media(max-width:520px){.dice-grid{gap:1.2px}}