*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:light dark}body{min-height:100dvh}#app{max-width:80ch;margin-inline:auto;padding:2rem}.coin-flipper{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:1.5rem;text-align:center}.coin-flipper h1{font-size:2rem}.coin-container{perspective:800px}.coin{background:none;border:none;cursor:pointer;padding:0;outline-offset:8px;border-radius:50%;transition:transform .15s ease}.coin:hover:not(:disabled){transform:scale(1.05)}.coin:active:not(:disabled){transform:scale(.95)}.coin:disabled{cursor:default}.coin-inner{width:200px;height:200px;position:relative;transform-style:preserve-3d;transition:transform 1s ease-in-out}.coin-face{position:absolute;width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;backface-visibility:hidden;background:linear-gradient(145deg,#f5d76e,#c9a030);color:#7a5c00;box-shadow:0 4px 15px #0003,inset 0 2px 4px #fff6,inset 0 -2px 4px #0000001a;border:4px solid #b8942a;-webkit-user-select:none;user-select:none}.coin-tails{transform:rotateY(180deg);background:linear-gradient(145deg,#e8c84a,#b8892a)}.coin-result{font-size:1.5rem;font-weight:600;min-height:2.25rem}@media(prefers-color-scheme:dark){.coin-face{background:linear-gradient(145deg,#d4a843,#a07820);color:#4a2c00;border-color:#8a6a1a;box-shadow:0 4px 15px #0006,inset 0 2px 4px #fff3,inset 0 -2px 4px #0003}.coin-tails{background:linear-gradient(145deg,#c49833,#907018)}}@media(max-width:400px){.coin-inner{width:160px;height:160px}.coin-face{font-size:3rem}}