@font-face{font-family:Boska;src:url(/fonts/Boska-BlackItalic.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--paper:#FFF8EC;--ink:#1B1712;--soft:#6E655A;--line:#E8DDCB;--tomato:#E8472A;--grass:#2C9A5A;--gold:#F6B62E}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--paper);color:var(--ink);font:500 16px/1.35 Satoshi,"Avenir Next",sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid var(--tomato);outline-offset:2px}
h1,h2,p{margin:0}
.display{font-family:Boska,Georgia,serif;font-weight:900;font-style:italic;letter-spacing:-.01em}

#app{height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.hero{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--ink);color:#fff}
.hero img,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0,transparent 26%,transparent 52%,rgba(0,0,0,.72) 100%);pointer-events:none}
.hero header,.hero .meta{position:absolute;left:0;right:0;z-index:2;padding-inline:18px}
.hero header{top:0;padding-top:calc(env(safe-area-inset-top) + 12px);display:flex;justify-content:space-between;align-items:center;font-weight:700}
.hero header button{padding:8px 0;font-weight:700}
.hero .meta{bottom:14px}
.hero .num{font-size:clamp(58px,17svh,120px);line-height:.92}
.hero h1{font-size:clamp(19px,3svh,26px);font-weight:700;line-height:1.12;max-width:26ch}
.hero .sub{font-size:14px;opacity:.86;margin-top:4px}
.play{position:absolute;z-index:3;right:18px;bottom:18px;width:60px;height:60px;background:#fff;color:var(--ink);font-weight:700;font-size:13px;border-radius:50%}

.strip{flex:none;display:flex;gap:6px;overflow-x:auto;padding:10px 18px;scrollbar-width:none;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{display:none}
.tick{position:relative;flex:none;width:46px;height:62px;overflow:hidden;background:var(--line);scroll-snap-align:center}
.tick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.75)}
.tick span{position:absolute;inset:auto 0 0;text-align:center;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.5)}
.tick.on{outline:3px solid var(--tomato);outline-offset:-3px}
.tick.on img{filter:none}
.tick.done::after{content:"";position:absolute;top:5px;right:5px;width:10px;height:10px;background:var(--grass);border-radius:50%;box-shadow:0 0 0 2px #fff}

.posts{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 18px 10px}
.posts button{position:relative;height:clamp(58px,9svh,76px);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:15px;overflow:hidden;transition:transform .12s}
.posts button:active{transform:scale(.96)}
.posts button.done{background:var(--grass);color:#fff;box-shadow:none}
.nav{flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 18px 10px;font-size:15px}
.nav button{font-weight:700;padding:8px 0}
.bar{height:5px;flex:1;margin:0 14px;background:var(--line)}
.bar i{display:block;height:100%;background:var(--tomato);transition:width .5s}

.step{position:fixed;inset:0;z-index:10;background:var(--paper);display:flex;flex-direction:column;height:100svh;padding:calc(env(safe-area-inset-top) + 12px) 18px calc(env(safe-area-inset-bottom) + 14px);gap:12px;animation:rise .22s ease-out}
@keyframes rise{from{transform:translateY(18px);opacity:0}}
.step .top{display:flex;justify-content:space-between;align-items:baseline}
.step .top button{font-weight:700;padding:8px 0}
.step h2{font-size:34px;line-height:1}
.step video{flex:1 1 0;min-height:0;width:100%;background:var(--ink);object-fit:contain}
.step textarea{flex:0 1 30svh;min-height:90px;width:100%;resize:none;border:0;box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;padding:12px;font:inherit;color:inherit}
.count{font-size:14px;color:var(--soft);text-align:right;margin-top:-8px}
.go{min-height:56px;width:100%;background:var(--ink);color:#fff;font-weight:700;font-size:17px}
.go.alt{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.go.win{background:var(--grass)}
.go:disabled{opacity:.55}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.note{color:var(--soft);font-size:15px}
.prompter{flex:1 1 0;min-height:0;overflow-y:auto;font-size:clamp(23px,3.4svh,31px);line-height:1.3;font-weight:700}
.mic{display:flex;align-items:center;gap:10px;min-height:24px;font-size:15px}
.mic i{width:12px;height:12px;background:var(--tomato);border-radius:50%;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.grid{flex:1 1 0;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;align-content:start}
.grid .tick{width:auto;height:auto;min-height:92px;aspect-ratio:3/4}
.filters{display:flex;gap:16px;font-weight:700;color:var(--soft)}
.filters button{padding:6px 0}
.filters .on{color:var(--ink);box-shadow:inset 0 -3px 0 var(--tomato)}
.toast{position:fixed;z-index:20;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom) + 18px);background:var(--ink);color:#fff;padding:14px;font-weight:700;animation:rise .2s ease-out}
.sk{background:linear-gradient(90deg,var(--line) 25%,#F4ECDD 50%,var(--line) 75%);background-size:300% 100%;animation:sk 1.3s linear infinite}
@keyframes sk{to{background-position:-300% 0}}
.fail{height:100svh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px}
.fail h1{font-size:40px;line-height:1.02}
.burst{position:fixed;z-index:30;inset:0;display:grid;place-items:center;pointer-events:none;background:rgba(44,154,90,.94);color:#fff;font-size:clamp(46px,13vw,90px);text-align:center;animation:burst 1.3s forwards}
@keyframes burst{0%{opacity:0;transform:scale(.92)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

body.login{height:100svh;overflow:hidden;background:var(--ink);color:#fff}
.login main{height:100svh;max-width:420px;margin:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding:24px 24px calc(env(safe-area-inset-bottom) + 24px)}
.login h1{font:700 clamp(40px,8svh,58px)/1 Satoshi,sans-serif;margin-bottom:auto;padding-top:8svh}
.login h1 i{font:italic 900 1.2em/1 Boska,Georgia,serif;color:var(--gold)}
#msg{min-height:24px}
#dots{display:flex;gap:12px}
#dots b{width:14px;height:14px;box-shadow:inset 0 0 0 2px #fff;border-radius:50%}
#dots b.on{background:var(--gold);box-shadow:none}
#pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#pad button{height:clamp(54px,9svh,72px);font-size:24px;font-weight:700;color:#fff;background:rgba(255,255,255,.1)}
#pad button:last-child{font-size:16px}

@media (min-width:900px){
  #app{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);grid-template-rows:1fr auto auto auto;padding:0}
  .hero{grid-row:1/5}
  .strip,.posts,.nav{grid-column:2}
  .strip{align-self:end}
  .step{left:auto;width:min(520px,45vw);box-shadow:-1px 0 0 var(--line)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}