:root{
  --blue:#2D7FF9;--blue-d:#1B5FCC;--green:#22B573;--green-d:#139A5B;
  --yellow:#FFC93C;--yellow-d:#F5A800;--red:#EF4444;--ink:#1F2A44;--muted:#5B6783;
  --bg:#F3F8FF;--card:#fff;--line:#E3ECFA;--r:22px;--sh:0 10px 30px rgba(45,127,249,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Cairo','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;color:var(--ink);line-height:1.75;
  background:radial-gradient(900px 500px at 100% -10%,#DDEBFF 0,transparent 60%),radial-gradient(800px 500px at -10% 30%,#E0F8EA 0,transparent 55%),var(--bg);
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--yellow-d);outline-offset:2px}
.skip{position:absolute;top:-60px;right:10px;background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:10px;z-index:999}
.skip:focus{top:10px}
h1,h2,h3{line-height:1.35}

/* header */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;padding:.6rem clamp(.8rem,3vw,2rem);
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:900;font-size:1.3rem;color:var(--blue-d)}
.logo-mark{display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--green));
  border-radius:18px;box-shadow:0 8px 20px rgba(45,127,249,.3);width:64px;height:64px;font-size:2rem}
.logo-mark.sm{width:40px;height:40px;font-size:1.3rem;border-radius:13px}
.nav{display:flex;gap:.15rem;margin-inline-start:auto}
.nav a{padding:.45rem .7rem;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--muted);white-space:nowrap;transition:.2s}
.nav a:hover{background:#EAF2FF;color:var(--blue-d)}
.nav a.active{background:var(--blue);color:#fff;box-shadow:0 6px 14px rgba(45,127,249,.3)}
.top-actions{display:flex;align-items:center;gap:.4rem}
.pts-chip{display:flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,#FFF3C4,#FFE08A);padding:.3rem .8rem;border-radius:999px;font-weight:800;border:2px solid #FFD25E}
.pts-chip small{font-size:.75rem;color:#8a6200}
.pts-chip.bump{animation:pop .5s}
.icon-btn{width:42px;height:42px;border-radius:12px;background:#EAF2FF;font-size:1.2rem;transition:.2s}
.icon-btn:hover{background:#D7E7FF}
.menu-btn{display:none}
.scrim{display:none}

main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:1.5rem clamp(.9rem,3vw,2rem) 3rem;outline:none}
.page{animation:fadeUp .5s both}
.page-head{text-align:center;margin-bottom:1.5rem}
.page-head h1{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--blue-d)}
.page-head p{color:var(--muted);max-width:640px;margin:.3rem auto 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.3rem;border-radius:14px;font-weight:800;transition:.2s;border:2px solid transparent;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;box-shadow:0 8px 18px rgba(34,181,115,.35)}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;box-shadow:0 8px 18px rgba(45,127,249,.3)}
.btn-yellow{background:linear-gradient(135deg,var(--yellow),var(--yellow-d));color:#4a3400}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--blue-d)}
.btn-danger{background:#fff;border-color:#FFC9C9;color:#C42B2B}
.btn-done{background:#E6F7EE;color:var(--green-d);cursor:default}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-xl{padding:.9rem 1.8rem;font-size:1.15rem;border-radius:18px}
.pulse{animation:pulse 2s infinite}

/* cards */
.card{background:var(--card);border-radius:var(--r);padding:1.2rem;box-shadow:var(--sh);border:1px solid var(--line)}
.center{text-align:center}
.grid{display:grid;gap:1rem}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.section{margin-top:2.4rem}
.section>h2{font-size:1.6rem;color:var(--blue-d);margin-bottom:1rem;text-align:center}
.pts{display:inline-block;background:#FFF3C4;color:#8a6200;font-weight:800;padding:.1rem .6rem;border-radius:999px;font-size:.85rem}
.tag{display:inline-block;background:var(--cb,#E6F0FF);color:var(--cc,#2D7FF9);font-weight:800;font-size:.78rem;padding:.05rem .6rem;border-radius:999px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:1rem 0}
.logo-lg{display:flex;align-items:center;gap:1rem}
.logo-lg h1{font-size:clamp(2.6rem,6vw,4rem);font-weight:900;background:linear-gradient(90deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.slogan{margin:.6rem 0;font-size:1.2rem;font-weight:700;color:var(--green-d)}
.welcome{font-size:1.6rem;margin:.4rem 0;color:var(--ink)}
.lead{color:var(--muted);font-size:1.05rem;max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.hero-art svg{width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(45,127,249,.18))}
.kid{animation:bob 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
.kid:nth-child(2){animation-delay:.4s}.kid:nth-child(3){animation-delay:.8s}
.heart{animation:float 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sun{animation:pulse 3s infinite;transform-box:fill-box;transform-origin:center}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.stat{text-align:center;padding:1.2rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.stat .ic{font-size:2rem}
.stat .num{display:block;font-size:2rem;font-weight:900;color:var(--blue-d)}
.stat span.l{color:var(--muted);font-weight:700}
.note{text-align:center;color:var(--muted);font-size:.8rem;margin-top:.6rem}

/* challenge card */
.ch{position:relative;display:flex;flex-direction:column;gap:.4rem;transition:.25s}
.ch:hover{transform:translateY(-4px)}
.ch-ic{width:68px;height:68px;border-radius:20px;background:var(--cb);display:grid;place-items:center;font-size:2.2rem}
.ch h3{font-size:1.1rem}
.ch p{color:var(--muted);font-size:.93rem;flex:1}
.ch-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.ch.is-done{opacity:.85;background:#F5FCF8}
.ch.is-daily{border:2px solid var(--yellow);box-shadow:0 10px 30px rgba(255,201,60,.35)}
.ribbon{position:absolute;top:12px;inset-inline-end:12px;background:var(--yellow);color:#4a3400;font-weight:800;font-size:.78rem;padding:.1rem .7rem;border-radius:999px}
.flash{animation:flash 1.4s}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1rem 0}
.chip{padding:.4rem 1rem;border-radius:999px;background:#fff;border:2px solid var(--line);font-weight:700;color:var(--muted);transition:.2s}
.chip:hover{border-color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.progress{height:14px;border-radius:999px;background:#E3ECFA;overflow:hidden}
.progress>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--yellow));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.prog-row{display:flex;align-items:center;gap:.8rem;justify-content:center;margin:.5rem auto 1rem;max-width:520px}
.prog-row .progress{flex:1}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty .big{font-size:3rem}

/* quiz */
.quiz-top{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.quiz-top .progress{flex:1;min-width:160px}
.q-card{max-width:760px;margin:0 auto}
.q-text{font-size:1.4rem;margin-bottom:1rem}
.opts{display:grid;gap:.7rem}
.opt{display:flex;align-items:center;gap:.8rem;text-align:start;padding:.9rem 1rem;border-radius:16px;background:#F5F9FF;border:2px solid var(--line);font-weight:700;transition:.2s}
.opt:hover:not(:disabled){border-color:var(--blue);transform:translateX(-4px);background:#EAF2FF}
.opt:disabled{cursor:default}
.letter{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-weight:900;color:var(--blue-d)}
.opt.ok{background:#E6F7EE;border-color:var(--green);animation:pop .5s}
.opt.ok .letter{background:var(--green);color:#fff;border-color:var(--green)}
.opt.bad{background:#FFEBEB;border-color:var(--red);animation:shake .45s}
.opt.bad .letter{background:var(--red);color:#fff;border-color:var(--red)}
.fb{margin-top:1rem;padding:1rem;border-radius:16px;animation:fadeUp .4s both}
.fb.good{background:#E6F7EE;border:1px solid #B7E8CE}
.fb.bad{background:#FFF4E5;border:1px solid #FFD9A0}
.fb.mid{background:#FFF9E0;border:1px solid #FFE79A}
.fb p{margin:.4rem 0 .8rem}
.big-ic{font-size:4rem}
.mini-stats{display:flex;justify-content:center;gap:2rem;margin:1rem 0 1.4rem}
.mini-stats div{display:flex;flex-direction:column}
.mini-stats b{font-size:1.6rem;color:var(--blue-d)}
.mini-stats span{color:var(--muted);font-size:.85rem}
.ring{position:relative;width:170px;height:170px;margin:0 auto 1rem}
.ring svg{transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;font-weight:900;color:var(--blue-d)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1rem}

/* adventure */
.map{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.node{position:relative;text-align:center;padding:1.3rem;border-radius:var(--r);background:#fff;border:2px solid var(--line);box-shadow:var(--sh);transition:.25s}
.node .n{position:absolute;top:10px;inset-inline-start:12px;background:var(--blue);color:#fff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.node .ic{font-size:3rem}
.node p{color:var(--muted);font-size:.9rem;margin:.3rem 0 .8rem}
.node.locked{filter:grayscale(1);opacity:.6}
.node.done{border-color:var(--green);background:#F5FCF8}
.node.open{border-color:var(--yellow);animation:pulse 2.4s infinite}
.stage-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.stage-head h2{color:var(--blue-d)}
.say{background:#EAF2FF;border-radius:18px;padding:.9rem 1.1rem;margin:.6rem 0 1rem;font-weight:700}
.meter{display:flex;align-items:center;gap:.8rem;margin:.6rem 0}
.meter .progress{flex:1;height:18px}
.actor{font-size:3.4rem;transition:.3s}
.tasks,.tools{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}
.task,.tool{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border-radius:14px;background:#fff;border:2px solid var(--line);font-weight:700;transition:.2s}
.task:hover,.tool:hover{border-color:var(--blue)}
.task.sel,.tool.sel{background:var(--blue);color:#fff;border-color:var(--blue);transform:scale(1.05)}
.task.warn{border-color:var(--red);background:#FFEBEB;animation:shake .45s}
.stus{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}
.stu{padding:1rem;border-radius:18px;background:#fff;border:2px dashed #B9D2FA;text-align:center;cursor:pointer;transition:.2s}
.stu:hover{border-color:var(--blue);background:#F5F9FF}
.stu .av{font-size:2.6rem}
.stu small{display:block;color:var(--muted);margin-bottom:.5rem}
.stu .slot{min-height:44px;display:flex;flex-direction:column;gap:.3rem}
.room.tidy{animation:pop .6s}
.msgbox{padding:.8rem 1rem;border-radius:14px;background:#FFF9E0;font-weight:700;margin:.6rem 0}
.msgbox.bad{background:#FFEBEB}
.garden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1rem 0}
.gi{position:relative;padding:1rem .6rem;border-radius:18px;background:linear-gradient(#E7F9EE,#CDEFD9);border:2px solid #B7E8CE;text-align:center;transition:.25s;font-weight:700}
.gi:hover:not(.fixed){transform:translateY(-3px);border-color:var(--green)}
.gi .e{font-size:2.8rem;display:block}
.gi.fixed{background:linear-gradient(#FFFBE0,#FFEEA8);border-color:var(--yellow);cursor:default}
.gi.fixed .e{animation:pop .6s}
.gi.shake{animation:shake .45s;border-color:var(--red)}
.gi .need{font-size:.75rem;color:var(--muted);display:block}
.fin{max-width:640px;margin:0 auto;text-align:center}
.poster{margin:1rem auto;padding:1rem;border-radius:18px;background:linear-gradient(135deg,#E6F0FF,#DDF7E6);border:3px dashed var(--blue);max-width:420px}

/* wall */
.banner{padding:.9rem 1.2rem;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;text-align:center;font-weight:800;font-size:1.15rem;margin-bottom:1rem;min-height:3.4rem;display:grid;place-items:center}
.compose textarea,.compose input,.field,select.field{width:100%;padding:.7rem .9rem;border-radius:14px;border:2px solid var(--line);background:#F9FBFF;resize:vertical}
.compose textarea:focus,.compose input:focus,.field:focus{border-color:var(--blue);outline:none}
.compose .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.6rem}
.compose .row input{flex:1;min-width:150px}
.emojis{display:flex;gap:.3rem;flex-wrap:wrap}
.emo{width:42px;height:42px;border-radius:12px;font-size:1.4rem;background:#F5F9FF;border:2px solid var(--line)}
.emo.on{border-color:var(--blue);background:#E6F0FF;transform:scale(1.1)}
.count{color:var(--muted);font-size:.8rem}
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:1.2rem 0 .8rem}
.post{display:flex;gap:.9rem;animation:fadeUp .4s both}
.post .av{flex:none;width:52px;height:52px;border-radius:50%;background:#E6F0FF;display:grid;place-items:center;font-size:1.7rem}
.post .b{flex:1;min-width:0}
.post .meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.post .meta small{color:var(--muted)}
.post p{margin:.2rem 0 .5rem;overflow-wrap:anywhere}
.like{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .8rem;border-radius:999px;background:#FFF0F0;border:2px solid #FFD0D0;font-weight:800;color:#C42B2B}
.like.on{background:var(--red);color:#fff;border-color:var(--red);animation:pop .4s}
.del{color:var(--muted);font-size:.85rem;margin-inline-start:.6rem;text-decoration:underline}
.posts{display:grid;gap:.8rem}

/* points */
.level-card{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.level-card .lv{font-size:3.6rem}
.level-card .info{flex:1;min-width:220px}
.level-card h2{color:var(--blue-d)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}
.rule{text-align:center;padding:1rem;border-radius:18px;background:#F5F9FF}
.rule b{display:block;font-size:1.6rem;color:var(--green-d)}
.lb{display:grid;gap:.5rem}
.lb-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .9rem;border-radius:14px;background:#F5F9FF}
.lb-row.me{background:#FFF3C4;border:2px solid var(--yellow)}
.lb-row .rk{width:34px;text-align:center;font-weight:900}
.lb-row .nm{flex:1;font-weight:700}
.lb-row .bar{flex:1.2;height:10px;border-radius:99px;background:#E3ECFA;overflow:hidden}
.lb-row .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green))}
.log{display:grid;gap:.4rem;list-style:none}
.log li{display:flex;gap:.6rem;align-items:center;padding:.4rem .6rem;border-radius:12px;background:#F9FBFF}
.log li b{margin-inline-start:auto;color:var(--green-d)}
.mini-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.mini-badges span{font-size:2rem;background:#FFF3C4;border-radius:14px;width:54px;height:54px;display:grid;place-items:center}

/* learn */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}
.panel{animation:fadeUp .4s both}
.big-def{font-size:1.3rem;text-align:center;max-width:760px;margin:0 auto;font-weight:700}
ul.ticks{list-style:none;display:grid;gap:.6rem}
ul.ticks li{padding:.6rem .9rem;border-radius:14px;background:#F5F9FF}
ul.ticks li::before{content:'✅ '}
.info-card{text-align:center}
.info-card .i{font-size:2.6rem}
.info-card h3{color:var(--blue-d)}
.info-card p{color:var(--muted);font-size:.93rem}
.table-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:#fff;min-width:480px}
th,td{padding:.75rem 1rem;text-align:center;border-bottom:1px solid var(--line)}
th{background:var(--blue);color:#fff}
th.g{background:var(--green)}
td:first-child{font-weight:800;background:#F5F9FF}
.quote{max-width:640px;margin:0 auto;text-align:center;padding:2rem 1rem;border-radius:var(--r);background:linear-gradient(135deg,#FFF3C4,#FFE9A6)}
.quote q{display:block;font-size:1.6rem;font-weight:800;color:#5a4200;quotes:'«' '»'}
.quote small{display:block;margin-top:.6rem;color:#8a6200;font-weight:700}
.qband{margin-top:2.4rem}

/* achievements */
.profile{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.profile .av{font-size:3.4rem;width:90px;height:90px;border-radius:50%;background:#E6F0FF;display:grid;place-items:center}
.profile .f{flex:1;min-width:230px;display:grid;gap:.5rem}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.bd{text-align:center;position:relative}
.bd .i{font-size:3.2rem;transition:.3s}
.bd.locked .i{filter:grayscale(1) opacity(.4)}
.bd.got{border:2px solid var(--yellow);background:linear-gradient(#fff,#FFF9E0)}
.bd.got .i{animation:pop .6s}
.bd p{color:var(--muted);font-size:.88rem;margin:.2rem 0 .6rem}
.bd .st{font-size:.8rem;font-weight:800;color:var(--muted)}

/* misc UI */
.footer{text-align:center;padding:2rem 1rem;color:var(--muted);display:grid;gap:.4rem;justify-items:center;border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.credit{margin-top:.8rem;padding:.8rem 1.6rem;border-radius:18px;background:linear-gradient(135deg,#E6F0FF,#DDF7E6);border:1px solid var(--line);display:grid;gap:.1rem;color:var(--ink)}
.credit strong{font-size:1.15rem;color:var(--blue-d)}
.credit span{font-weight:700;color:var(--green-d)}
.toasts{position:fixed;bottom:18px;inset-inline:0;display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:300;pointer-events:none;padding:0 1rem}
.toast{background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:fadeUp .35s both;max-width:520px;text-align:center}
.toast.ok{background:var(--green-d)}.toast.gold{background:linear-gradient(135deg,var(--yellow-d),#E58A00);color:#3d2900}.toast.err{background:#C42B2B}
.toast.out{opacity:0;transform:translateY(10px);transition:.3s}
.modal-ov{position:fixed;inset:0;background:rgba(20,30,60,.5);display:grid;place-items:center;padding:1rem;z-index:400;opacity:0;transition:.25s}
.modal-ov.show{opacity:1}
.modal{background:#fff;border-radius:26px;padding:1.6rem;max-width:440px;width:100%;text-align:center;transform:scale(.9);transition:.25s;max-height:92vh;overflow:auto}
.modal-ov.show .modal{transform:scale(1)}
.m-icon{font-size:3.2rem}
.m-body{margin:.6rem 0 1rem;color:var(--muted);display:grid;gap:.6rem}
.m-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:350;overflow:hidden}
.cf{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:fall linear forwards}
.badge-pop{position:fixed;inset:0;z-index:380;display:grid;place-items:center;background:rgba(20,30,60,.45);animation:fadeIn .3s both}
.badge-pop .bp{background:#fff;border-radius:28px;padding:2rem 2.4rem;text-align:center;animation:pop .6s both;border:4px solid var(--yellow);max-width:90vw}
.badge-pop .bp .i{font-size:5rem;animation:spin 1s}
.badge-pop h3{color:var(--blue-d);font-size:1.5rem}

/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.12)}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes spin{from{transform:rotate(-200deg) scale(.3)}to{transform:none}}
@keyframes flash{0%,100%{box-shadow:var(--sh)}30%{box-shadow:0 0 0 8px rgba(255,201,60,.6)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* responsive */
@media (max-width:1100px){
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .menu-btn{display:inline-block}
  .nav{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(290px,82vw);background:#fff;flex-direction:column;padding:5rem 1rem 1rem;gap:.3rem;
    transform:translateX(100%);transition:.3s;z-index:70;box-shadow:-10px 0 30px rgba(0,0,0,.15);margin:0;overflow:auto}
  .nav a{font-size:1.05rem;padding:.7rem 1rem}
  .menu-open .nav{transform:translateX(0)}
  .menu-open .scrim{display:block;position:fixed;inset:0;background:rgba(20,30,60,.4);z-index:40}
  .top-actions{margin-inline-start:auto}
  .brand{order:-1}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center}
  .logo-lg{justify-content:center}
  .lead{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-art{order:-1;max-width:380px;margin:0 auto}
}
@media (max-width:520px){
  .pts-chip small{display:none}
  .q-text{font-size:1.2rem}
  .post .av{width:42px;height:42px;font-size:1.4rem}
  .brand-name{display:none}
}