:root{color-scheme:dark;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#11172c;color:#fff3df}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.45}button:focus-visible,input:focus-visible{outline:3px solid #f5c889;outline-offset:4px}[hidden]{display:none!important}#display{position:fixed;inset:0;outline:none}#cute-scene{position:absolute;inset:0;overflow:hidden;background:#101826}.welcome-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.definitions{position:absolute;width:0;height:0}.greeting{position:absolute;top:31%;left:8%;right:8%;text-align:center;z-index:2;pointer-events:none}h1{font-family:Georgia,serif;font-size:clamp(60px,9.5vw,172px);font-weight:400;letter-spacing:-.045em;line-height:1.05;margin:0;color:#f6dfb9;text-shadow:0 2px 22px #0006}h1 span{display:block;font-style:italic;font-size:.53em;letter-spacing:-.025em;line-height:1.35;color:#f8ead4}.bat-flight{position:absolute;left:0;top:var(--top);color:#05080e;width:var(--size);aspect-ratio:120/50;animation:bat-cross var(--duration) linear infinite;animation-delay:var(--delay);z-index:3}.bat-flight svg{width:100%;height:100%;animation:flap .62s ease-in-out infinite;animation-delay:var(--flap);transform-origin:50% 40%}@keyframes bat-cross{0%{transform:translate(-15vw,0) rotate(-5deg)}30%{transform:translate(25vw,-3vh) rotate(3deg)}65%{transform:translate(73vw,2vh) rotate(-3deg)}100%{transform:translate(115vw,-2vh) rotate(4deg)}}@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.38)}}

.controls{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:min(480px,calc(100% - 30px));padding:23px 24px 18px;border:1px solid #ffe4b526;border-radius:20px;background:#11162bea;box-shadow:0 15px 75px #0005;z-index:10;backdrop-filter:blur(16px)}.card-heading{display:flex;align-items:center;justify-content:space-between}.kicker{font-size:9px;letter-spacing:.25em;color:#e3bc88;margin:0 0 7px}h2{font:400 22px Georgia,serif;margin:0}.status-dot{height:8px;width:8px;border-radius:50%;background:#786e72}.status-dot.ready{background:#a7d1ae;box-shadow:0 0 12px #a7d1ae44}.intro,.hint{font-size:12px;line-height:1.65;color:#b9bdca}.intro{margin:14px 0 18px}.hint{margin:15px 0 0;font-size:11px}.volume-row{display:flex;justify-content:space-between;font-size:12px;color:#ddd8d1}output{font-variant-numeric:tabular-nums;color:#e5c495}input[type=range]{width:100%;accent-color:#eac693;margin:10px 0 4px}#status{font-size:11px;min-height:15px;color:#abb8aa;margin:7px 0 14px}button{border:1px solid #ffffff24;border-radius:9px;min-height:42px;padding:10px 12px;background:#ffffff08;color:#f3e8d7;font-size:12px}button:hover{background:#ffffff12}.primary{width:100%;background:#f2d4a9;color:#211e2e;font-size:14px;font-weight:600;border-color:#f2d4a9}.primary:hover{background:#ffe1b4}.button-row{display:flex;gap:8px;margin-top:8px}.button-row>*{flex:1}.options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;font-size:10px;color:#aaaebd}.options label{display:flex;align-items:center;gap:6px}.options button{min-height:30px;padding:5px 9px;font-size:10px}kbd{display:inline-block;font:inherit;border:1px solid #ffffff30;padding:0 5px;border-radius:4px;color:#eee3d5}#controls-tab{position:fixed;bottom:14px;right:15px;z-index:8;opacity:0;background:#10162b55;border:0;transition:opacity .2s}#controls-tab:focus-visible,body.pointer-active #controls-tab{opacity:.6}#scare{position:absolute;inset:0;background:#000;z-index:20;overflow:hidden}#scare-image{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(1.13);display:block}body[data-mode=scare] #scare-image{animation:reveal .24s ease-out both}body[data-mode=preview] #scare-image{object-fit:contain}#scare.fading{opacity:0;transition:opacity .18s linear}#close-preview{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);background:#141414df;color:#fff;border-color:#777}body[data-mode=scare]{cursor:none}body[data-mode=running] #display{cursor:none}body[data-mode=running].pointer-active #display{cursor:default}@keyframes reveal{from{transform:scale(1.02)}to{transform:scale(1.045)}}
@media(max-width:650px){.controls{bottom:12px;padding:18px}.greeting{top:32%;left:3%;right:3%}h1{font-size:clamp(52px,13vw,95px)}.button-row button{font-size:11px}.welcome-background{object-position:65% center}}
@media(prefers-reduced-motion:reduce){.bat-flight,.bat-flight svg{animation:none}.bat-flight{transform:translate(var(--rest),0)}#scare-image{animation:none!important}}

/* The regular display keeps the phone flock's approach and fan inside the moon corner. */
#display .desktop-flock{position:absolute;left:50%;top:0;width:50%;height:45%;overflow:hidden;pointer-events:none;z-index:3}
#display .desktop-bat{left:0;top:0;transform-origin:center;animation:desktop-bat-approach var(--duration) linear infinite;animation-delay:var(--delay);will-change:transform}
#display .desktop-bat svg{animation-duration:.16s}
@keyframes desktop-bat-approach{0%{transform:translate(51vw,-3vh) scale(.12) rotate(0)}45%{transform:translate(calc(32.3vw + var(--sx)),calc(20.5vh + var(--sy))) scale(.7) rotate(calc(var(--bank)*.2))}75%{transform:translate(calc(32.5vw + var(--dx)*.6),calc(24vh + var(--dy)*.6)) scale(1.8) rotate(calc(var(--bank)*.5))}100%{transform:translate(calc(32.5vw + var(--dx)*1.45),calc(27vh + var(--dy)*4)) scale(4.2) rotate(var(--bank))}}
@media(prefers-reduced-motion:reduce){#display .desktop-bat{animation:none;left:var(--rest-x);top:var(--rest-y);transform:scale(.65)}}