*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background-color:#000}body{font-family:system-ui,-apple-system,sans-serif}.canvas{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.spot{position:absolute;transform:translate(-50%,-50%);pointer-events:none}.circle{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:transparent;border-style:solid}.circle-outer{width:100px;height:100px;border-width:3px;opacity:.8}.circle-middle{width:85px;height:85px;border-width:3px;opacity:.9}.circle-inner{width:70px;height:70px;border-width:3px;opacity:1}.spot.ripple .circle{animation:ripple .5s ease-out forwards}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}.spot.breathing .circle{animation:breathe 3s ease-in-out infinite}@keyframes breathe{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}.spot.shrinking .circle{animation:shrink .5s ease-in forwards}@keyframes shrink{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(0);opacity:0}}#root{width:100%;height:100%;margin:0;padding:0}.app{width:100%;height:100%}.start-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#888;font-size:2rem;font-weight:700;pointer-events:none;z-index:1000}.start-message.blink{animation:blink 2s ease-in-out infinite}.start-message.fade-out{animation:fadeOut .3s ease-out forwards}@keyframes blink{0%,to{opacity:.6}50%{opacity:.2}}@keyframes fadeOut{0%{opacity:.6}to{opacity:0}}