/* entry popup: centered card on desktop, bottom sheet on phones */
.pop{padding:0;border:0;background:transparent;max-width:none;max-height:none;color:var(--ink);overflow:visible}
.pop::backdrop{background:rgba(14,11,12,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pop-in{position:relative;width:min(800px,calc(100vw - 32px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:290px minmax(0,1fr);background:var(--card);border-radius:30px;
  box-shadow:0 60px 120px -40px rgba(20,8,6,.7),0 0 0 1px var(--line)}
.pop-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(140deg,rgba(217,166,58,.85),transparent 30%,transparent 70%,rgba(217,166,58,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pop-art{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--g3) 22%,var(--bg)),var(--bg));min-height:100%}
.pop-art .orb{position:absolute;width:300px;aspect-ratio:1;left:50%;top:40%;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 38% 34%,#FFD1E6 0%,#FF7DB8 40%,#FF3E9D 70%,rgba(209,10,117,.85) 100%);filter:blur(16px);opacity:.85}
.pop-art img{position:absolute;bottom:0;left:50%;translate:-50% 0;height:92%;width:auto;max-width:none}
.pop-body{padding:34px 34px 22px;display:flex;flex-direction:column;gap:12px}
.pop-pre{margin:0;font-family:var(--hand);font-weight:500;font-size:19px;color:var(--g-text)}
.pop-h{margin:0;font-size:clamp(32px,3.4vw,44px);line-height:1.04;font-weight:900;letter-spacing:-.025em;text-wrap:balance}
.pop-h:focus{outline:none}
.pop-h .gold{display:inline-block;padding-bottom:.06em}
.pop-p{margin:0 0 6px;color:var(--dim);font-size:16px;text-wrap:pretty}
.pop.deep .pop-intro{display:none}
.pop.done .pop-later{display:none}
.pop-later{align-self:center;color:var(--dim);font-weight:600}
.pop-x{position:absolute;z-index:3;top:14px;inset-inline-end:14px;background:color-mix(in srgb,var(--card) 85%,transparent)}
.pop-grip{display:none}
@media (prefers-reduced-motion:no-preference){
 .pop[open] .pop-in{animation:popIn .36s var(--ease)}
 .pop[open]::backdrop{animation:fadeIn .3s ease}
 .pop.sheet[open] .pop-in{animation:sheetIn .38s var(--ease)}
 .pop.closing .pop-in{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .18s ease,transform .18s ease}
}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes sheetIn{from{transform:translateY(100%)}}
/* phones: a sheet from the bottom, not modal. The page above stays visible and scrolls */
.pop.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;z-index:80}
.pop.sheet .pop-in{width:100%;max-height:72vh;max-height:72dvh;grid-template-columns:1fr;border-radius:26px 26px 0 0;box-shadow:0 -30px 60px -20px rgba(20,8,6,.45),0 0 0 1px var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.pop.sheet .pop-art{display:none}
.pop.sheet .pop-body{padding:12px 18px 14px;gap:10px}
.pop.sheet .pop-grip{display:block;width:44px;height:5px;border-radius:5px;background:var(--line);align-self:center;margin-bottom:2px}
.pop.sheet .pop-h{font-size:30px;padding-inline-end:48px}
.pop.sheet .pop-pre{font-size:17px;padding-inline-end:48px}
.pop.sheet .pop-x{top:10px;inset-inline-end:10px}
.pop.sheet .af-step{gap:11px}
@media (max-width:700px){.pop:not(.sheet) .pop-in{grid-template-columns:1fr}.pop:not(.sheet) .pop-art{display:none}}

/* debug strip on the demo page */
.dbg{position:relative;z-index:6;margin:0 auto;max-width:1280px;font-size:13px;color:var(--dim);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;border:1px dashed color-mix(in srgb,var(--g2) 70%,transparent);border-radius:14px;padding:6px 14px}
.dbg b{color:var(--ink)}
.dbg .linkbtn{font-size:13px;min-height:36px}