:root{--y:#f2c230;--bd:#26231a;--mut:#8d887c}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{background:#000;color:#fff;font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{background-image:linear-gradient(rgba(214,160,30,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(214,160,30,.11) 1px,transparent 1px);background-size:42px 42px;background-position:center 0}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 95% 65% at 50% 40%,transparent 30%,rgba(0,0,0,.78))}
.app{position:relative;z-index:1;max-width:480px;min-height:100svh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 20px max(26px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
[hidden]{display:none!important}
.progress{display:flex;gap:6px;margin-bottom:8px}
.progress b{flex:1;height:4px;border-radius:4px;background:#272418;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--y);transition:width .55s cubic-bezier(.4,0,.2,1)}
.screen{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;animation:in .45s ease both}
.screen.top{justify-content:flex-start;padding-top:54px}
.screen.out{animation:out .22s ease both}
@keyframes in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes out{to{opacity:0;transform:translateX(-26px)}}
h1{text-align:center;font-size:clamp(30px,9vw,38px);line-height:1.15;font-weight:700;letter-spacing:-.5px}
h1 span{display:block;margin-top:4px;font-size:.72em;font-weight:600}
h1 em{font-style:normal;color:var(--y)}
h2{font-size:clamp(26px,7.6vw,33px);line-height:1.22;font-weight:600;letter-spacing:-.3px;margin-bottom:34px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair figure{margin:0}
.pair img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#111;border:1.5px solid #3b3b3b;border-radius:3px}
.hoje img{border-color:#e6bb2f}
.pair figcaption{text-align:center;margin-top:14px;font-size:15px;font-weight:500;letter-spacing:.16em;color:var(--mut)}
.hoje figcaption{color:var(--y)}
.sub{text-align:center;color:var(--mut);font-size:18px;line-height:1.5}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:60px;border:0;border-radius:16px;font:700 19px "IBM Plex Sans",sans-serif;color:#171200;text-decoration:none;cursor:pointer;transition:transform .15s}
.btn:active{transform:scale(.97)}
.yellow{animation:glowY 2.2s ease-in-out infinite;background:linear-gradient(180deg,#f9de6c,#e8b92d);box-shadow:0 8px 34px rgba(240,190,40,.3)}
.green{background:linear-gradient(110deg,#5cd171 0%,#66d577 62%,#aee9bc 100%);color:#0c2a14;box-shadow:0 10px 40px rgba(80,210,110,.35);animation:up .5s ease both,glowG 2s ease-in-out .5s infinite}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.options{display:flex;flex-direction:column;gap:11px}
.opt{width:100%;min-height:63px;padding:14px 22px;border-radius:20px;border:1.5px solid var(--bd);background:#0d0c0a;color:#fff;font:400 19px/1.3 "IBM Plex Sans",sans-serif;text-align:left;cursor:pointer;transition:.2s;animation:in .4s ease both}
.opt:active,.opt.sel{background:#1c1708;border-color:var(--y);color:var(--y)}
#extra{margin-top:26px}
#extra:empty{display:none}
.notif{display:flex;align-items:center;gap:16px;padding:20px 22px;margin-bottom:12px;border:1.5px solid var(--bd);border-radius:28px;background:rgba(10,10,9,.9);overflow:hidden}
.notif div{flex:1;min-width:0}
.notif b{display:block;font-size:18px;font-weight:700}
.notif p{font-size:18px;line-height:1.25;margin-top:2px}
.ml,.sp{flex:none;display:block;width:44px;height:44px;border-radius:12px;object-fit:cover}
.tile .ml,.tile .sp{width:60px;height:60px;border-radius:16px}
.notif small{align-self:flex-start;color:var(--mut);font-size:15px}
.flow{display:flex;align-items:flex-start;justify-content:space-between;padding:30px 14px 24px;border:1.5px solid var(--bd);border-radius:28px;background:rgba(13,12,10,.92);animation:up .6s ease both}
.flow div{flex:1;text-align:center;font-size:17px;font-weight:700}
.flow small{display:block;margin-top:4px;color:var(--mut);font-size:14px;font-weight:400}
.flow .dot{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border:1.5px solid var(--bd);border-radius:50%;background:#0a0a09}
.flow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow .on{color:var(--y)}.flow .on .dot{width:66px;height:66px;margin-top:-4px;margin-bottom:10px;border:2.5px solid var(--y)}
.flow .ln{flex:none;width:36px;height:2px;margin-top:29px;background:repeating-linear-gradient(90deg,var(--y) 0 6px,transparent 6px 12px);background-size:12px 2px;opacity:.75;animation:dash .6s linear infinite}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 10px 22px;border:1.5px solid #2a2720;border-radius:26px;background:#151410;box-shadow:0 7px 0 #0c0b09;color:#fff;font:600 19px "IBM Plex Sans",sans-serif;cursor:pointer;animation:up .6s ease both,float 3s ease-in-out .6s infinite}
.tile:active{transform:translateY(4px);box-shadow:0 3px 0 #0c0b09}
.clock{padding:36px 20px 28px;border:1.5px solid var(--bd);border-radius:28px;background:rgba(13,12,10,.92);text-align:center;animation:up .6s ease both}
.clock svg{width:150px;height:150px;display:block;margin:0 auto 26px}
.clock p{color:var(--mut);font-size:19px}
.mh{transform-origin:75px 75px;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.voltar{align-self:flex-start;margin-top:28px;padding:6px 0;background:none;border:0;color:var(--mut);font:400 20px "IBM Plex Sans",sans-serif;cursor:pointer}
.lead{text-align:center;color:#9d988b;font-size:clamp(20px,5.8vw,24px);line-height:1.5;font-weight:300}
.lead b{color:#fff;font-weight:700}
button:focus-visible,a:focus-visible{outline:3px solid var(--y);outline-offset:3px}
@media(min-width:600px){.app{padding-top:40px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.feed{height:332px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.notif.drop{animation:drop .65s cubic-bezier(.2,.9,.3,1.15) both}
.notif.gone{animation:gone .5s ease both}
@keyframes drop{from{opacity:0;transform:translateY(-30px) scale(.95);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}to{opacity:1;transform:none;max-height:140px;margin-bottom:12px;padding-top:20px;padding-bottom:20px}}
@keyframes gone{to{opacity:0;transform:scale(.94)}}
.yellow span{display:inline-block;animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
@keyframes glowY{50%{box-shadow:0 8px 48px rgba(240,190,40,.6)}}
@keyframes glowG{50%{box-shadow:0 10px 54px rgba(80,210,110,.75);transform:scale(1.025)}}
@keyframes dash{to{background-position:12px 0}}
.flow .on .dot{animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(242,194,48,.5)}100%{box-shadow:0 0 0 18px rgba(242,194,48,0)}}
@keyframes float{50%{transform:translateY(-6px)}}
.opt.sel{animation:pop .3s ease!important;animation-delay:0s!important}
@keyframes pop{50%{transform:scale(1.03)}}
@keyframes beat{50%{transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}