:root{color-scheme:dark;--ink: #e6e8ee;--dim: #7b8191}*{box-sizing:border-box}html,body{height:100%;margin:0;background:radial-gradient(ellipse at 50% 40%,#0e1218,#05060a 55%,#020305);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;font-weight:300;letter-spacing:.02em;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}#stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}#record{position:fixed;left:50%;bottom:calc(10vh + env(safe-area-inset-bottom,0));transform:translate(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#ffffff0a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform .25s ease,background .25s ease,border-color .25s ease;z-index:3}#record:hover{background:#ffffff14}#record:active{transform:translate(-50%) scale(.96)}#record .dot{width:14px;height:14px;border-radius:50%;background:#e84a4a;box-shadow:0 0 #e84a4a99;transition:transform .4s ease,background .2s ease,box-shadow .4s ease}#record.active{border-color:#e84a4a99}#record.active .dot{transform:scale(.6);border-radius:3px;background:#ff6b6b;animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{0%{box-shadow:0 0 #e84a4a8c}70%{box-shadow:0 0 0 18px #e84a4a00}to{box-shadow:0 0 #e84a4a00}}#hint{position:fixed;left:50%;bottom:calc(3vh + env(safe-area-inset-bottom,0));transform:translate(-50%);font-size:11px;color:var(--dim);letter-spacing:.18em;text-transform:lowercase;z-index:3;pointer-events:none}#status{position:fixed;top:3vh;left:50%;transform:translate(-50%);font-size:11px;color:var(--dim);letter-spacing:.22em;text-transform:lowercase;z-index:3;pointer-events:none;max-width:min(86vw,720px);text-align:center;white-space:normal;line-height:1.5}@media (prefers-reduced-motion: reduce){#record .dot,#record.active .dot{animation:none}}