:root{--bg: #000;--ink: #e8e2f5;--muted: #8d84a8;--violet: #b07bff;--yes: #6ee7a8;--no: #ff7b8a;--maybe: #ffc46b}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100%;background:var(--bg);color:var(--ink);overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,sans-serif}body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}@property --a{syntax: "<number>"; inherits: false; initial-value: 1;}#app{position:relative;width:600px;height:600px;flex:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app:focus{outline:none}#app:focus-visible #shell:after{content:"";position:absolute;top:157px;left:157px;width:286px;height:286px;border-radius:50%;box-shadow:0 0 0 2px #b07bff8c,0 0 28px 8px #b07bff4d;pointer-events:none}@keyframes ball-shake{0%{transform:translateZ(0) rotate(0)}15%{transform:translate3d(-7px,3px,0) rotate(-1.2deg)}32%{transform:translate3d(6px,-4px,0) rotate(1deg)}50%{transform:translate3d(-5px,-3px,0) rotate(-.8deg)}68%{transform:translate3d(4px,3px,0) rotate(.6deg)}85%{transform:translate3d(-2px,-1px,0) rotate(-.3deg)}to{transform:translateZ(0) rotate(0)}}#app[data-status=shaking]{animation:ball-shake .32s ease-in-out 2}#shell{position:absolute;top:0;right:0;bottom:0;left:0;background:url(../magic-ball.jpg) 0 0 / 600px 600px no-repeat}#liquid{position:absolute;top:157px;left:157px;width:286px;height:286px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#0b0518,#070311 58%,#04020c);box-shadow:inset 0 0 46px #000000e6,inset 0 6px 20px #b07bff2e;transition:box-shadow .26s ease}#liquid:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:radial-gradient(circle at 50% 42%,#33146b,#1b0a3c 58%,#0d0524);--a: 1;opacity:var(--a);transition:--a .4s ease;pointer-events:none}#app[data-status=shaking] #liquid:after,#app[data-status=presenting] #liquid:after,#app[data-status=settled] #liquid:after,#app[data-status=clearing][data-queued=true] #liquid:after{--a: 0}#app[data-status=shaking] #liquid:after{transition-duration:.32s}#app[data-status=settled] #liquid{box-shadow:inset 0 0 46px #000000d1,inset 0 6px 26px #b07bff52}#c{position:absolute;top:0;right:0;bottom:0;left:0;display:block}#hud{width:600px;height:91px;margin-top:-91px;text-align:center;padding:10px 2rem 0}#question{transition:opacity .55s ease;font-size:.95rem;color:var(--muted);font-style:italic;margin-bottom:.4rem}#question[hidden]{display:block;visibility:hidden}#question:before{content:"“"}#question:after{content:"”"}#answer{font-size:1.35rem;font-weight:600;letter-spacing:.01em;min-height:2.2rem;color:var(--ink);transition:color .2s ease,opacity .55s ease}#answer[data-status=clearing],#question[data-clearing=true]{opacity:0}#answer[data-status=idle],#answer[data-status=shaking],#answer[data-status=presenting]{font-size:1rem;font-weight:400;color:var(--muted)}#answer[data-tone=affirmative]{color:var(--yes)}#answer[data-tone=negative]{color:var(--no)}#answer[data-tone=noncommittal]{color:var(--maybe)}@media(prefers-reduced-motion:reduce){#liquid,#liquid:after,#question,#answer{transition:none}#app[data-status=shaking]{animation:none}}