/* Welcome audio button */
.wa-btn{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(36px + env(safe-area-inset-bottom,0px));z-index:46;width:52px;height:52px;border-radius:50%;border:2px solid var(--accent);background:var(--ink);color:var(--accent);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:transform .2s}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wa-btn svg{width:22px;height:22px;grid-area:1/1}
.wa-btn .wa-on{display:none}
.wa-btn.playing .wa-on{display:block}.wa-btn.playing .wa-off{display:none}
.wa-bars{position:absolute;right:-6px;top:-6px;display:none;gap:2px;align-items:end;height:16px;background:var(--accent);padding:3px 4px;border-radius:8px}
.wa-btn.playing .wa-bars{display:flex}
.wa-bars i{width:3px;background:var(--on-accent);animation:waBar .8s ease-in-out infinite alternate}
.wa-bars i:nth-child(2){animation-delay:.2s}.wa-bars i:nth-child(3){animation-delay:.4s}
@keyframes waBar{from{height:3px}to{height:10px}}
.wa-btn.hint::after{content:"Tap for sound";position:absolute;left:62px;white-space:nowrap;background:var(--accent);color:var(--on-accent);font:700 12px/1 var(--body);padding:8px 10px;letter-spacing:.04em;animation:waHint 1.6s ease-in-out infinite alternate}
@keyframes waHint{from{transform:translateX(0)}to{transform:translateX(6px)}}
@media (max-width:640px){.wa-btn{width:44px;height:44px;bottom:calc(26px + env(safe-area-inset-bottom,0px))}}

/* Christmas */
.xm-banner{background:#b3121f;color:#fff;text-align:center;font:600 13px/1.4 var(--body);letter-spacing:.04em;padding:24px max(16px,env(safe-area-inset-right,0px)) 9px max(16px,env(safe-area-inset-left,0px));position:relative;z-index:52;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 10px,transparent 10px 20px)}
.xm-lights{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:22px;z-index:61;pointer-events:none;display:flex;justify-content:space-around;overflow:hidden}
.xm-lights::before{content:"";position:absolute;left:0;right:0;top:-6px;height:14px;border-bottom:2px solid #1e3a1e;border-radius:0 0 50% 50%/0 0 100% 100%}
.xm-lights i{position:relative;top:6px;width:9px;height:14px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;animation:xmTwinkle 1.4s ease-in-out infinite alternate;box-shadow:0 0 10px 2px currentColor;background:currentColor}
.xm-lights i::before{content:"";position:absolute;top:-4px;left:2px;width:5px;height:5px;background:#1e3a1e;border-radius:1px}
@keyframes xmTwinkle{from{opacity:1}to{opacity:.35}}
.xm-snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:44}
.xm-hat{position:absolute;width:34px;left:-12px;top:-18px;transform:rotate(-18deg);pointer-events:none}
.logo{position:relative}
@media (prefers-reduced-motion:reduce){.xm-lights i,.wa-bars i,.wa-btn.hint::after{animation:none}.xm-snow{display:none}}

/* Christmas trees */
.xm-banner{display:flex;align-items:center;justify-content:center;gap:14px}
.xm-banner .xm-tree{width:22px;height:30px;flex:none}
.xm-forest{display:flex;justify-content:space-around;align-items:flex-end;gap:4px;padding:18px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));border-bottom:2px solid rgba(255,255,255,.12);background:linear-gradient(transparent 60%,rgba(255,255,255,.06))}
.xm-forest .xm-tree{width:34px;height:48px}
.xm-forest .xm-t1{width:26px;height:36px}.xm-forest .xm-t2{width:42px;height:58px}.xm-forest .xm-t3{width:30px;height:42px}
.xm-ball{animation:xmTwinkle 1.2s ease-in-out infinite alternate}
.xm-ball.b2{animation-delay:.4s}.xm-ball.b3{animation-delay:.8s}
.xm-star{animation:xmStar 2s ease-in-out infinite;transform-origin:20px 5px;transform-box:view-box}
@keyframes xmStar{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}
@media (max-width:640px){.xm-forest .xm-tree:nth-child(n+9){display:none}.xm-banner .xm-tree{width:18px;height:24px}}
@media (prefers-reduced-motion:reduce){.xm-ball,.xm-star{animation:none}}