*{box-sizing:border-box}body{margin:0;background:#04102e;color:#fff;font-family:"Courier New",monospace;text-align:center;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.ticker{background:#e3192b;border-block:4px solid #ffd400;overflow:hidden;white-space:nowrap;padding:.6rem 0;box-shadow:0 0 16px #e3192b88}
.track{display:inline-flex;animation:m 22s linear infinite}.track span{font:bold 1.25rem "Courier New",monospace;color:#ffd400;text-shadow:2px 2px 0 #0a2a8a;padding-right:0}
@keyframes m{to{transform:translateX(-50%)}}
header{padding:2rem 1rem 1rem}h1{font-size:2.6rem;margin:0;color:#ffd400;text-shadow:3px 3px 0 #e3192b,0 0 18px #ffd400;letter-spacing:4px}h1 span{color:#2f7bff;text-shadow:3px 3px 0 #e3192b,0 0 18px #2f7bff}
.blink{color:#39e75f;animation:b 1s steps(2) infinite}@keyframes b{50%{opacity:0}}
main{display:grid;gap:1.2rem;padding:1rem;max-width:1100px;margin:auto}@media(min-width:700px){main{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){main{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;align-items:center;border:3px solid #2f7bff;border-radius:10px;padding:1rem;box-shadow:0 0 14px #2f7bff66,inset 0 0 14px #2f7bff33;background:#0a1d52}
.shot{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;border:2px solid #ffd400;margin-bottom:.8rem}
.card h2{color:#ffd400;margin:.2rem 0 .6rem;letter-spacing:2px}.card p{color:#d6e2ff;margin:0 0 1.2rem;line-height:1.4;flex:1}
.btn{display:inline-block;padding:.9rem 1.6rem;font:bold 1.1rem "Courier New",monospace;color:#fff;background:#e3192b;border:2px solid #ffd400;border-radius:6px;text-decoration:none;box-shadow:0 4px 0 #8a0d18;min-width:60%}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a0d18}.soon{border-color:#39e75f;box-shadow:0 0 14px #39e75f55}.off{background:#0b3d1a;color:#39e75f;border-color:#39e75f;box-shadow:none}
footer{padding:2rem;color:#6d84c4;font-size:.8rem}
body{background-color:#04102e;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(rgba(4,16,46,.88),rgba(4,16,46,.88)),url(img/hpos10i-icon.webp);background-size:auto,auto,72px 72px}
.tk{width:32px;height:32px;vertical-align:middle;margin:0 .8rem;filter:drop-shadow(0 0 4px #ffd400)}.track span{display:flex;align-items:center}
.hero{width:min(70vw,300px);height:auto;display:block;margin:0 auto .5rem;filter:drop-shadow(0 0 18px #2f7bff) drop-shadow(4px 4px 0 #e3192b);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
.mascot{width:110px;justify-self:center;align-self:center;filter:drop-shadow(0 0 10px #39e75f)}
@media(min-width:700px){.mascot.l{display:none}.mascot.r{width:260px}}@media(min-width:1000px){.mascot.r{display:none}}
footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:end;gap:.5rem}footer p{width:100%;margin:.5rem 0 0}.foot{width:90px;filter:drop-shadow(0 0 8px #ffd400)}.flip{width:120px}
@media(prefers-reduced-motion:reduce){.hero,.track{animation:none}}
html,body{cursor:url(img/pipe-cursor.svg) 2 2,url(img/pipe-cursor.png) 2 2,auto}
a,button,.btn,[role=button]{cursor:url(img/pipe-cursor.svg) 2 2,url(img/pipe-cursor.png) 2 2,pointer}
#mus{position:fixed;right:14px;bottom:14px;z-index:99;width:56px;height:56px;border-radius:50%;font-size:26px;background:#e3192b;border:3px solid #ffd400;box-shadow:0 4px 0 #8a0d18,0 0 14px #2f7bff;padding:0}#mus.on{background:#0b3d1a;border-color:#39e75f;box-shadow:0 4px 0 #062010,0 0 14px #39e75f}#mus:active{transform:translateY(3px)}