*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#000;color:#fff}
body{margin:0;overflow:hidden}
main{height:100vh;height:100dvh;min-height:300px;position:relative}
header{position:absolute;top:max(28px,env(safe-area-inset-top));left:20px;right:20px;text-align:center;z-index:1}
h1{font-size:clamp(20px,3vw,28px);font-weight:400;line-height:1.2;margin:0 0 20px;letter-spacing:-.5px}
#comment{color:#a7a7a7;font-size:clamp(16px,2.5vw,20px);line-height:1.45;max-width:650px;margin:0 auto;min-height:58px}
#count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(150px,32vmin,310px);font-weight:400;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums;padding-right:.055em;max-width:94vw}
.controls{position:absolute;left:9%;right:9%;bottom:max(35px,env(safe-area-inset-bottom));display:flex;justify-content:space-between}
button{width:65px;height:65px;border:1px solid #404040;border-radius:50%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:51px;line-height:1;display:grid;place-items:center;padding:0 0 5px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .1s,transform .1s}
button:hover{background:#171717}button:active{transform:scale(.94)}button:disabled{opacity:.2;cursor:default}button:focus-visible{outline:2px solid #fff;outline-offset:6px}
#confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none}.piece{position:absolute;top:-15px;width:7px;height:11px;animation:fall 1.7s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(600deg);opacity:.1}}
@media(max-height:450px){header{top:15px}h1{margin-bottom:9px;font-size:18px}#comment{font-size:14px;min-height:0}#count{font-size:38vh;top:55%}.controls{bottom:20px}button{width:48px;height:48px;font-size:37px}}
@media(prefers-reduced-motion:reduce){button{transition:none}.piece{display:none}}