@font-face{font-family:Switzer;src:url('/assets/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box}
:root{color-scheme:dark;--ground:#000;--ink:#f7f6f1;--star-opacity:.65}
html{background:var(--ground);color:var(--ink);font-family:Switzer,sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0;min-width:240px}
main{position:relative;min-height:100svh;text-align:center;overflow:hidden}
#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:var(--star-opacity)}
.wordmark{position:absolute;top:max(32px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);height:11px;width:auto;color:var(--ink);opacity:.72;z-index:2}
/* The resting mark is deliberately large enough to carry the empty canvas. */
.pebble-anchor{position:absolute;left:50%;top:50%;width:clamp(148px,18vw,192px);height:clamp(148px,18vw,192px);transform:translate(-50%,-50%);z-index:3}
#pebble{display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;border-radius:50%;-webkit-tap-highlight-color:transparent}
#pebble:not(:disabled){cursor:pointer}
#pebble img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#pebble:focus-visible{outline:2px solid var(--ink);outline-offset:14px}
body[data-state="idle"] #pebble{animation:weightless 8s ease-in-out infinite alternate;will-change:transform}
@keyframes weightless{0%{transform:translate3d(-10px,12px,0) rotate(-4deg)}50%{transform:translate3d(5px,-10px,0) rotate(1deg)}100%{transform:translate3d(12px,5px,0) rotate(4deg)}}
h1{position:absolute;top:50%;left:24px;right:24px;transform:translateY(-50%);margin:0;font-size:clamp(32px,5.8vw,76px);line-height:1.12;letter-spacing:.035em;text-transform:uppercase;font-weight:700;outline:none}
body[data-state="idle"] h1,body[data-state="flying"] h1{opacity:0;visibility:hidden}
body[data-state="revealed"] h1{animation:arrive 850ms cubic-bezier(.16,1,.3,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(calc(-50% + 12px))}to{opacity:1;transform:translateY(-50%)}}
body[data-state="static"] .pebble-anchor{top:27%}
body[data-state="static"] h1{top:57%}
body[data-parked] .pebble-anchor{position:fixed;left:auto;top:max(28px,env(safe-area-inset-top));right:max(32px,env(safe-area-inset-right));width:72px;height:72px;transform:none}
body[data-parked] #pebble{animation:corner-drift 10s ease-in-out infinite;will-change:transform}
@keyframes corner-drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(-5px,4px,0) rotate(-3deg)}55%{transform:translate3d(3px,7px,0) rotate(2deg)}80%{transform:translate3d(5px,-3px,0) rotate(3deg)}}
body[data-parked] #pebble:focus-visible{outline:none}
@media(max-width:600px){.wordmark{height:10px;top:max(28px,env(safe-area-inset-top))}h1{font-size:clamp(24px,7.4vw,36px);left:20px;right:20px}body[data-parked] .pebble-anchor{top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:48px;height:48px}}
@media(max-height:420px){.pebble-anchor{width:112px;height:112px}h1{font-size:42px}.wordmark{top:20px}}
@media(prefers-reduced-motion:reduce){body[data-state="idle"] #pebble,body[data-parked] #pebble,body[data-state="revealed"] h1{animation:none}}