*,:before,:after{box-sizing:border-box;touch-action:none}:root{--bg:#f8f8f2;--text:black;--fill:#878787;--highlight:white;--shadow:black}:root[data-theme=dark]{--bg:#1e1e1e;--text:#f8f8f2;--fill:#53535b;--highlight:black;--shadow:black}html{background-color:var(--bg)}body{overscroll-behavior:none;margin:0;font-family:Times New Roman,Times,serif;font-size:24px;overflow:hidden}img{-webkit-touch-callout:none;-webkit-user-drag:none}.header{justify-content:space-between;display:flex}h1{margin:0;font-size:clamp(1rem,6vh,2.5rem)}.dark-mode-button{all:unset;aspect-ratio:1;text-align:center;min-width:1em;font-size:clamp(1rem,6vh,2.5rem)}.dark-mode-button-icon{transition:all .1s}.dark-mode-button:hover .dark-mode-button-icon{transform:scale(1.1)}.dark-mode-button:active .dark-mode-button-icon{transform:scale(.5)}.game button{all:unset;border:2px solid var(--text);box-shadow:3px 3px 0 var(--shadow);background-color:var(--highlight);border-radius:3px;padding:8px;transition:all .1s}.game button:hover{box-shadow:5px 5px 0 var(--shadow);transform:translate(-2px,-2px)}.game button:active{box-shadow:none;transform:translate(3px,3px)}.app{color:var(--text);width:100%;min-height:100dvh;padding-inline:20px;padding-top:calc(env(safe-area-inset-top) + 20px);padding-bottom:calc(env(safe-area-inset-bottom) + 20px);background-color:#0000;flex-direction:column;margin:0;display:flex}.game{flex-direction:column;flex:auto;justify-content:space-between;align-items:center;gap:4px;padding:clamp(4px,5vh,200px);display:flex}.fraction{flex-direction:column;flex:none;align-items:center;display:flex}.fraction-top{margin:0}.fraction-bottom{border-top:2px solid var(--text);margin:0}.result{flex:none;min-height:1.5em;font-weight:700}.shape-area{flex:1 1 0;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.shape{border:3px solid var(--text);box-sizing:content-box;position:relative;overflow:hidden}.guess-fill{background-color:var(--fill);position:absolute;bottom:0}.answer-fill{position:absolute;bottom:0}