html,body{margin:0;padding:0;height:100dvh;display:flex;justify-content:center;align-items:center}a{text-decoration:none}#app{padding:8px;height:100dvh;width:100dvw;max-width:1280px;max-height:720px;box-sizing:border-box;display:flex;flex-direction:column;position:relative;margin:0 auto;border:1px #cacaca solid}#points{text-align:center;font-size:48px}#timing-labels{position:relative;margin-bottom:25px}#timing-labels>p{position:absolute;text-align:center;left:0;right:0;top:-40px;animation:myAnimation 1s}#options{display:flex;height:15dvh;gap:4px}#settings-all-rules{display:flex;flex-wrap:wrap}.language-toggler{display:block;color:#000;font-size:1.2rem;margin:4px 0}.language-toggler.active{color:#2d2dff}.settings-rule{padding:4px;margin:4px 0;border:1px #cacaca solid;width:100%;background-color:#efebe9;display:flex}.settings-rule.active{background-color:#f0f4c3}.settings-rule h4,.settings-rule p{margin:0}.option{width:100%;height:100%;border:1px black solid;font-size:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px}.spacer{flex:1}.overlay{position:absolute;inset:0;background-color:#f7f7f7;z-index:100;display:none;overflow:scroll}.modal-header{position:sticky;top:0;width:100%;z-index:101;padding-top:8px}.modal-close-btn{position:static;display:inline-block;margin-right:8px}.modal-content{padding:8px}kbd.key{display:inline-block;padding:.25em .5em;font-family:monospace,monospace;font-size:.9em;color:#333;background:#f7f7f7;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 -1px #ccc;-webkit-user-select:none;user-select:none;pointer-events:none}@media (hover: none) and (pointer: coarse){kbd.key{display:none}#app{max-height:100dvh;border:none}}#progress-bar-outer{width:100%;height:12px}#progress-bar-inner{width:0%;height:100%;background-color:#7fffd4}#current-rules span{padding:4px 12px;margin:4px;border:1px black solid;white-space:nowrap;display:inline-block}@keyframes myAnimation{0%{transform:translateY(0)}to{transform:translateY(-30px)}}