.dbbtn{position:relative;display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:11px 14px;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--tc) 60%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--tc) 26%,#241119),#1a0d13);color:var(--bone);cursor:pointer;overflow:hidden;text-align:left;font:inherit;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.dbbtn:active{transform:scale(.98)}
.dbbtn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-20deg);animation:dbshine 4s ease-in-out infinite}
@keyframes dbshine{0%,55%{left:-40%}
100%{left:130%}}
.dbi{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 35%,#12080f);color:var(--bone);box-shadow:0 0 18px color-mix(in srgb,var(--tc) 40%,transparent)}
.dbt{display:flex;flex-direction:column;min-width:0;flex:1}
.dbt b{font-size:15.5px;line-height:1.2}
.dbt small{font-size:12px;color:var(--mute);margin-top:2px}
.dbq{flex:none;font-size:20px;opacity:.9}
.dbbtn.done .dbq::before{content:"⭐ "}
.cc.done .cn::after{content:" ⭐"}

#vault{position:fixed;inset:0;z-index:200;display:none;color:var(--bone);--ox:50%;--oy:50%;clip-path:circle(0 at var(--ox) var(--oy));transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
#vault.on{display:block}
#vault.open{clip-path:circle(150vmax at var(--ox) var(--oy))}
.v-bg{position:absolute;inset:0;background:radial-gradient(120% 80% at 85% -10%,color-mix(in srgb,var(--tc) 38%,transparent),transparent 60%),radial-gradient(90% 70% at -5% 110%,color-mix(in srgb,var(--tc) 24%,transparent),transparent 60%),#0b0508;overflow:hidden}
.v-bg::before,.v-bg::after{content:"";position:absolute;inset:-50%;background-repeat:repeat}
.v-bg::before{background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff8,transparent),radial-gradient(1px 1px at 90px 80px,#fff6,transparent),radial-gradient(1.5px 1.5px at 160px 20px,#fff7,transparent),radial-gradient(1px 1px at 60px 140px,#fff5,transparent);background-size:200px 180px;animation:vdrift 90s linear infinite}
.v-bg::after{background-image:radial-gradient(2px 2px at 40px 60px,#ffd9a8aa,transparent),radial-gradient(1.5px 1.5px at 130px 120px,#fff8,transparent);background-size:300px 260px;animation:vdrift 150s linear infinite reverse;opacity:.7}
@keyframes vdrift{to{transform:translate3d(200px,180px,0)}}
.v-wrap{position:relative;height:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column}
.v-top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 10px}
.v-x{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(18,8,15,.7);color:var(--bone);font-size:16px;cursor:pointer}
.v-ttl{display:flex;align-items:center;gap:10px;min-width:0}
.v-ic{font-size:30px;filter:drop-shadow(0 0 10px var(--tc))}
.v-ttl small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tc)}
.v-ttl b{display:block;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-prog{display:flex;gap:4px;padding:0 16px}
.v-prog i{flex:1;height:4px;border-radius:2px;background:rgba(244,231,212,.16);transition:background .4s,box-shadow .4s}
.v-prog i.on{background:var(--tc)}
.v-prog i.cur{background:var(--tc);box-shadow:0 0 10px var(--tc);animation:vglow 1.6s ease-in-out infinite}
@keyframes vglow{50%{opacity:.55}}
.v-stage{position:relative;flex:1;min-height:0;overflow:hidden;perspective:1400px;margin-top:10px}
.v-slide{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:6px 16px 18px;display:flex;flex-direction:column;gap:16px;will-change:transform,opacity;-webkit-overflow-scrolling:touch}
.v-slide.in-r{animation:vinr .7s cubic-bezier(.2,.9,.25,1) both}
.v-slide.in-l{animation:vinl .7s cubic-bezier(.2,.9,.25,1) both}
.v-slide.out-l{animation:voutl .5s cubic-bezier(.6,0,.8,.4) both;pointer-events:none}
.v-slide.out-r{animation:voutr .5s cubic-bezier(.6,0,.8,.4) both;pointer-events:none}
@keyframes vinr{from{transform:translateX(105%) rotateY(-24deg) scale(.88);opacity:0;filter:blur(8px)}
to{transform:none;opacity:1;filter:none}}
@keyframes vinl{from{transform:translateX(-105%) rotateY(24deg) scale(.88);opacity:0;filter:blur(8px)}
to{transform:none;opacity:1;filter:none}}
@keyframes voutl{to{transform:translateX(-95%) rotateY(26deg) scale(.86);opacity:0;filter:blur(6px)}}
@keyframes voutr{to{transform:translateX(95%) rotateY(-26deg) scale(.86);opacity:0;filter:blur(6px)}}
.v-ph{position:relative;flex:0 0 auto;height:min(42vh,380px);border-radius:22px;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--tc) 55%,transparent);background:#0b0508;box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 44px color-mix(in srgb,var(--tc) 22%,transparent);animation:vreveal .9s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes vreveal{from{clip-path:inset(0 100% 0 0 round 22px)}
to{clip-path:inset(0 0 0 0 round 22px)}}
.v-ph .v-bk{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(26px) saturate(1.3) brightness(.55)}
.v-ph img{position:relative;display:block;width:100%;height:100%;object-fit:contain;animation:vkb 18s ease-in-out infinite alternate}
@keyframes vkb{from{transform:scale(1)}
to{transform:scale(1.09) translate(-1.2%,-1%)}}
.v-ph::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(transparent,color-mix(in srgb,var(--tc) 40%,transparent),transparent);transform:translateY(-110%);animation:vscan 1.4s .5s ease-out both;pointer-events:none}
@keyframes vscan{to{transform:translateY(330%)}}
.v-ph .v-hud{position:absolute;inset:10px;pointer-events:none;background:linear-gradient(var(--tc),var(--tc)) left top/18px 2px no-repeat,linear-gradient(var(--tc),var(--tc)) left top/2px 18px no-repeat,linear-gradient(var(--tc),var(--tc)) right top/18px 2px no-repeat,linear-gradient(var(--tc),var(--tc)) right top/2px 18px no-repeat,linear-gradient(var(--tc),var(--tc)) left bottom/18px 2px no-repeat,linear-gradient(var(--tc),var(--tc)) left bottom/2px 18px no-repeat,linear-gradient(var(--tc),var(--tc)) right bottom/18px 2px no-repeat,linear-gradient(var(--tc),var(--tc)) right bottom/2px 18px no-repeat;opacity:.85}
.v-ph .v-fig{position:absolute;left:16px;top:16px;font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;padding:6px 10px;border-radius:999px;background:rgba(10,4,8,.72);border:1px solid color-mix(in srgb,var(--tc) 55%,transparent)}
.v-ph .v-cr{position:absolute;right:16px;bottom:14px;max-width:70%;font-size:11px;padding:4px 9px;border-radius:8px;background:rgba(10,4,8,.72);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-info{display:flex;flex-direction:column;gap:11px;min-width:0}
.v-info>*{animation:vup .65s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(.3s + var(--i,0) * .1s)}
@keyframes vup{from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:none}}
.v-chips{display:flex;flex-wrap:wrap;gap:6px}
.v-chip{font-size:11.5px;padding:5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tc) 50%,transparent);background:color-mix(in srgb,var(--tc) 14%,transparent);line-height:1.2}
.v-chip.nasa{border-color:rgba(120,190,255,.5);background:rgba(60,130,220,.14)}
.v-h{margin:0;font-size:clamp(22px,6.2vw,32px);font-weight:800;line-height:1.12}
.v-l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tc);font-weight:700}
.v-d{margin:0;font-size:clamp(16px,4.4vw,19px);line-height:1.65}
.v-hint{font-size:12px;color:var(--mute)}
.v-foot{display:flex;align-items:center;gap:10px;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.v-b{min-height:50px;padding:0 20px;border-radius:15px;border:1.5px solid var(--line);background:rgba(36,17,25,.9);color:var(--bone);font:600 15px inherit;font-family:inherit;cursor:pointer;transition:transform .15s,opacity .2s}
.v-b:active{transform:scale(.97)}
.v-b[disabled]{opacity:.35;cursor:default}
.v-b.primary{flex:1;border:0;background:linear-gradient(120deg,#c4562e,#e0504a);box-shadow:0 0 24px rgba(224,80,74,.4);font-weight:700}
.v-b.primary[disabled]{box-shadow:none}
.v-cnt{font-size:13px;color:var(--mute);min-width:44px;text-align:center}
.v-slide.fact,.v-slide.end{justify-content:center;align-items:center;text-align:center}
.v-bigic{font-size:76px;animation:vfloat 3.2s ease-in-out infinite;filter:drop-shadow(0 0 24px var(--tc))}
@keyframes vfloat{50%{transform:translateY(-10px) rotate(4deg)}}
.v-fact{max-width:620px;font-size:clamp(18px,5vw,24px);line-height:1.55;font-weight:500}
.v-q{margin:0;font-size:clamp(21px,5.8vw,28px);font-weight:800;line-height:1.2}
.v-opts{display:flex;flex-direction:column;gap:10px}
.v-o{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:15px 16px;border-radius:16px;border:1.5px solid var(--line);background:rgba(36,17,25,.88);color:var(--bone);font:500 16.5px/1.35 inherit;font-family:inherit;cursor:pointer;transition:border-color .2s,background .2s,opacity .3s;animation:vup .55s both;animation-delay:calc(.3s + var(--i) * .1s)}
.v-o b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:color-mix(in srgb,var(--tc) 30%,#12080f)}
.v-o:hover{border-color:var(--tc)}
.v-o.ok{border-color:#4ade80;background:rgba(74,222,128,.16);animation:vpulse .6s}
.v-o.no{border-color:#f87171;background:rgba(248,113,113,.14);animation:vshake .45s}
.v-o.dim{opacity:.45}
.v-opts.locked .v-o{pointer-events:none}
@keyframes vpulse{50%{transform:scale(1.03)}}
@keyframes vshake{20%,60%{transform:translateX(-7px)}
40%,80%{transform:translateX(7px)}}
.v-why{padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.06);border-left:3px solid var(--tc);font-size:15px;line-height:1.55;animation:vup .5s both}
.v-why b{display:block;margin-bottom:3px}
.v-medal{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:56px;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 45%,#12080f),#12080f 70%);border:2px solid var(--tc);position:relative;animation:vpop .8s cubic-bezier(.2,1.4,.4,1) both}
.v-medal::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--tc);opacity:0;animation:vring 2.2s .6s ease-out infinite}
@keyframes vpop{from{transform:scale(0) rotate(-120deg)}
to{transform:none}}
@keyframes vring{from{opacity:.7;transform:scale(.85)}
to{opacity:0;transform:scale(1.45)}}
.v-end h3{margin:6px 0 0;font-size:clamp(24px,6.5vw,34px);font-weight:800}
.v-end p{margin:0;max-width:460px;font-size:16.5px;line-height:1.6}
.v-stats{display:flex;gap:10px;justify-content:center}
.v-stats span{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);font-size:14px}
.v-btns{display:flex;flex-direction:column;gap:10px;width:min(100%,340px);margin-top:6px}
.v-btns .v-b{width:100%}
.v-star{position:fixed;z-index:210;pointer-events:none;font-size:22px;animation:vstar 1.1s ease-out forwards}
@keyframes vstar{from{opacity:1;transform:translate(0,0) scale(.6)}
to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(160deg)}}
@media (min-width:860px){
  .v-slide.ph{flex-direction:row;align-items:center;gap:34px;padding:10px 28px 24px}
  .v-slide.ph .v-ph{flex:0 0 56%;height:min(62vh,520px)}
  .v-slide.ph .v-info{flex:1}
  .v-slide.quiz{max-width:720px;margin:0 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  #vault,#vault *{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}
  .v-ph img,.v-bg::before,.v-bg::after,.dbbtn::after{animation:none!important}
}