:root{font-family:Arial,Helvetica,sans-serif;color:#292923;background:#f5f3ee;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-width:280px}
main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) 12px max(28px,env(safe-area-inset-bottom));gap:0}
header{text-align:center;margin-bottom:25px}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,5vw,30px);font-weight:400;letter-spacing:-.6px;margin:0 0 10px}
header p{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#77776e;margin:0}
.disc-wrap{width:min(100%,620px,67svh);perspective:1200px}
#disc{display:block;width:100%;height:auto;overflow:visible;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 10px 15px #302d1b14);transition:transform .22s ease,opacity .22s ease;border-radius:50%;-webkit-tap-highlight-color:transparent}
#disc:active{cursor:grabbing}
#disc:focus-visible{outline:2px solid #68695f;outline-offset:5px}
#disc.flipping{transform:rotateY(90deg);opacity:.3}
#disc text{pointer-events:none;font-family:Arial,Helvetica,sans-serif}
#instruction{font-size:11px;color:#85857c;letter-spacing:.2px;margin:22px 0 25px;text-align:center}
button{display:flex;align-items:center;gap:13px;border:1px solid #d5d4cb;background:#fbfaf7;border-radius:999px;padding:14px 21px;font:12px Arial,Helvetica,sans-serif;letter-spacing:.3px;color:#34352d;cursor:pointer;min-height:48px;transition:background .2s,transform .2s}
button:hover{background:#fff;transform:translateY(-1px)}
button:focus-visible{outline:2px solid #68695f;outline-offset:4px}
button svg{width:18px;height:18px}
button span{margin-left:18px;color:#77786e;font-size:15px}
@media(max-width:400px){main{padding-left:5px;padding-right:5px}.disc-wrap{width:100%}header{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}