@font-face{font-family:Fredoka;src:url(Fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
:root{--bg-top:#1a1530;--bg-bot:#2a1f55;--cell:#342a66;--ink:#f2eeff;--muted:#cfc7ee;--accent:#a78bfa;--gold:#ffd166;--pink:#f25f8b;--tile-top:#fff4e0;--tile-bot:#f6dfb8;--tile-ink:#2a1e3f}
*{box-sizing:border-box}
html{background:var(--bg-top)}
body{margin:0;min-height:100vh;font:400 1.0625rem/1.6 Fredoka,ui-rounded,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg-top),var(--bg-bot)) fixed}
a{color:var(--gold);text-underline-offset:.2em}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--tile-ink);padding:.5rem 1rem;z-index:9}
.skip:focus{left:0}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.25rem}
header.site{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
header.site img{height:2.25rem;width:auto;display:block}
nav a{margin-left:1.25rem;text-decoration:none;color:var(--muted);font-weight:500}
nav a:hover,nav a[aria-current]{color:var(--ink)}
.hero{text-align:center;padding:2.5rem 0 3rem}
.hero img.logo{width:min(20rem,80%);height:auto}
h1{font-weight:500;font-size:clamp(1.9rem,6vw,2.9rem);line-height:1.15;margin:1.5rem 0 .75rem}
h2{font-weight:500;font-size:1.5rem;margin:2.5rem 0 .5rem}
h3{font-weight:500;font-size:1.15rem;margin:1.5rem 0 .25rem}
.lede{font-size:1.25rem;color:var(--muted);max-width:32rem;margin:0 auto 1.75rem}
.badge{display:inline-flex;align-items:center;gap:.6rem;background:#000;color:#fff;border:1.5px solid #8b86a0;border-radius:12px;padding:.55rem 1.1rem;text-decoration:none;font-weight:500}
.badge small{display:block;font-size:.7rem;line-height:1;opacity:.85}
.badge b{display:block;font-size:1.35rem;line-height:1.1;font-weight:600}
.note{font-size:.9rem;color:var(--muted);margin-top:.75rem}
.tiles{display:flex;justify-content:center;gap:.4rem;margin:0;padding:0;list-style:none}
.tiles li{width:2.6rem;height:2.9rem;display:grid;place-items:center;border-radius:.6rem;font-weight:600;font-size:1.5rem;color:var(--tile-ink);background:linear-gradient(180deg,var(--tile-top),var(--tile-bot));box-shadow:0 3px 0 #8f82cf,0 8px 16px rgba(0,0,0,.35)}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:1.5rem 0;padding:0;list-style:none}
.cards li{background:var(--cell);border-radius:18px;padding:1.1rem 1.25rem;box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.cards strong{display:block;font-weight:600;color:var(--gold);margin-bottom:.15rem}
.shots{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin:1.5rem 0}
.shot{aspect-ratio:9/19.5;border-radius:22px;background:var(--cell);border:2px dashed #5a4da0;display:grid;place-items:center;color:var(--muted);font-size:.85rem;text-align:center;padding:.5rem}
article{padding:1.5rem 0 3rem}
article ul{padding-left:1.25rem}
article li{margin:.3rem 0}
.updated{color:var(--muted);font-size:.95rem}
footer{border-top:1px solid #3d3377;margin-top:2rem;padding:1.5rem 0 2.5rem;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
footer a{color:var(--muted)}
@media (max-width:40rem){.shots{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}.shot{flex:0 0 min(70%,15rem);scroll-snap-align:center}}
@media (max-width:30rem){nav a{margin-left:.9rem}}
@media (prefers-reduced-motion:no-preference){.badge{transition:transform .15s}.badge:hover{transform:translateY(-2px)}}
header.site>a{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:1.25rem}
header.site img{height:2.25rem;width:2.25rem;border-radius:.6rem}
.hero img.logo{border-radius:2rem;box-shadow:0 16px 40px rgba(0,0,0,.4)}
/* Wordmark: tiles as in the app's home screen (staggered rows, tilted, drop in, then bob) */
.wordmark{margin:0;--s:clamp(2.6rem,13vw,4.4rem);display:flex;flex-direction:column;gap:calc(var(--s)*.14);align-items:center;font-size:var(--s)}
.wm-row{display:flex;gap:calc(var(--s)*.12);margin:0;padding:0;list-style:none}
.wm-row.r0{transform:translateX(calc(var(--s)*-.2))}
.wm-row.r1{transform:translateX(calc(var(--s)*.2))}
.wm-row li{position:relative;width:var(--s);height:var(--s);rotate:var(--tilt)}
.wm-row li::before{content:"";position:absolute;inset:0;border-radius:calc(var(--s)*.2);background:linear-gradient(180deg,#c98f4a,#6e4e29);transform:translateY(calc(var(--s)*.045));box-shadow:0 calc(var(--s)*.023) calc(var(--s)*.03) rgba(0,0,0,.18)}
.wm-row li span{position:absolute;inset:0;display:grid;place-items:center;border-radius:calc(var(--s)*.2);color:var(--tile-ink);font-weight:600;font-size:calc(var(--s)*.54);line-height:1;background:linear-gradient(180deg,var(--tile-top),var(--tile-bot));transform:translateY(calc(var(--s)*-.045))}
.wm-row li span::after{content:"";position:absolute;inset:calc(var(--s)*.03);border-radius:calc(var(--s)*.17);padding:calc(var(--s)*.018);background:linear-gradient(180deg,rgba(255,255,255,.75),transparent 50%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tagline{font-size:1.4rem;font-weight:500;margin:2rem 0 .5rem}
.lede{margin-top:0}
.store{display:inline-block;line-height:0}
.store img{height:3.1rem;width:auto}
@media (prefers-reduced-motion:no-preference){
.wm-row li{animation:drop .55s cubic-bezier(.2,.9,.3,1.25) both,bob 4.8s ease-in-out infinite;animation-delay:calc(var(--i)*.07s),calc(.7s + var(--i)*.6s)}
@keyframes drop{from{transform:translateY(-220%);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
@keyframes bob{50%{transform:translateY(calc(var(--s)*-.06))}}}
strong,b{font-weight:500}