html,body{height:100%;margin:0;background-color:#0b2434;display:grid;place-items:center;font-family:Inter,Arial,sans-serif}#root{width:clamp(320px,90vw,420px);aspect-ratio:1 / 1}main{background-color:#f5f5f5;border-radius:12px;height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:1rem;box-shadow:0 8px 20px #00000040;overflow:hidden}.title{font-size:40px;margin:0}.instructions{font-family:Inter,sans-serif;font-weight:400;margin-top:0;text-align:center}.dice-container{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.dice-container button{background-color:#fff;border:none;box-shadow:0 2px 2px #00000026;border-radius:8px;color:#00f;width:60px;height:60px;place-items:center;font-size:1.5rem;font-weight:700;cursor:pointer}button{font-family:Inter,sans-serif}.roll-button{width:auto;white-space:nowrap;padding:6px 21px;height:50px;background-color:#5035ff;border:none;border-radius:12px;color:#fff;margin-top:1.5rem;font-size:1.1rem}.dice-container button.held{background-color:#59e391}.dice-container button.notHeld{background-color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.total-seconds-div{background-color:#59e391;padding:6px 10px;border-radius:12px;border:none}.pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:8px;box-sizing:border-box}.pip{width:10px;height:10px;border-radius:50%;background-color:#000;opacity:0;transition:opacity .2s;margin:auto}.pip.visible{opacity:1}