@font-face{font-family:DM;src:url('../buddy_arrival_02/assets/fonts/dm-sans-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:Instrument;src:url('../buddy_arrival_02/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');font-style:italic;font-display:swap}
:root{--vvh:100dvh;--vvt:0px;--ink:#e2ebe8;--dim:#7f948c;--mint:#cdf5dd;--bg:#0b1116;font-family:DM,system-ui,sans-serif;color:var(--ink);background:var(--bg);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);-webkit-font-smoothing:antialiased}
main{position:fixed;left:0;top:var(--vvt);width:100%;height:var(--vvh);overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#111a21 0%,var(--bg) 62%)}
#stage{position:absolute;inset:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
header{position:absolute;left:0;right:0;top:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:11px;color:var(--dim);z-index:2;pointer-events:none}
header a{pointer-events:auto;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
header a:hover{color:#d9ede2}
header a:focus-visible{outline:2px solid #b9e8d5;outline-offset:5px}
.brand{font-size:9px;letter-spacing:.2em;color:#bedbcf}
h1{position:absolute;left:20px;top:60px;margin:0;font-weight:400;font-size:24px;line-height:1.1;letter-spacing:-.03em;color:#c3d1cb;z-index:2;pointer-events:none}
h1 em{font-family:Instrument,Georgia,serif;font-style:italic;color:#b7ddcf;font-weight:400;letter-spacing:0}
.composer{position:absolute;left:16px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;gap:8px;z-index:3;max-width:560px;margin:0 auto}
.composer input{flex:1;min-width:0;height:54px;border-radius:27px;border:1px solid #cfeadd24;background:#121a20e8;color:#eaf5ef;font:500 17px/1 DM,system-ui,sans-serif;padding:0 22px;outline:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s;caret-color:#cdf5dd}
.composer input::placeholder{color:#6f857c}
.composer input:focus{border-color:#a9e6cf70;box-shadow:0 0 0 4px #a9e6cf14}
.composer input.demo{color:#a3c4b6}
.composer button{width:54px;height:54px;flex:0 0 54px;border-radius:50%;border:0;background:var(--mint);color:#0b1116;font-size:22px;cursor:pointer;transition:transform .15s}
.composer button:active{transform:scale(.94)}
.composer button:focus-visible{outline:2px solid #abefd8;outline-offset:4px}
.tips{position:absolute;left:21px;top:92px;margin:0;font-size:11px;letter-spacing:.08em;color:var(--dim);transition:opacity .9s;pointer-events:none;z-index:2}
.tips.gone{opacity:0}
.count{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));margin:0;text-align:center;font-size:11px;letter-spacing:.1em;color:var(--dim);pointer-events:none;z-index:2;font-variant-numeric:tabular-nums}
.hit{position:absolute;left:0;top:0;width:80px;height:80px;border:0;background:transparent;border-radius:50%;pointer-events:none;z-index:1;padding:0;margin:0;transform:translate(-50%,-50%)}
.hit:focus-visible{outline:1px dotted #abefd899;outline-offset:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:700px){header{padding:0 32px;height:72px}h1{font-size:30px;left:32px;top:74px}.tips{left:33px;top:114px;font-size:12px}.composer{bottom:36px}.count{bottom:104px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}