.pack-stage{-webkit-user-select:none;user-select:none;width:100%;height:100%;min-height:280px;position:relative;overflow:hidden}@media (min-width:768px){.pack-stage{min-height:340px}}.pack-stage canvas{opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity .45s;position:absolute;inset:0}.pack-stage[data-ready=true] canvas{opacity:1}.pack-still{pointer-events:none;max-width:none;transition:opacity .45s;position:absolute;top:0;left:0}.pack-stage[data-ready=true] .pack-still{opacity:0!important}.pack-label{opacity:0;pointer-events:none;color:#f4eee0;white-space:nowrap;will-change:transform, opacity;direction:ltr;align-items:center;gap:7px;font-size:13px;font-weight:700;line-height:1;display:flex;position:absolute;top:0;left:0}@media (min-width:420px){.pack-label{font-size:15px}}.pack-label-dot{background:#e3b04b;border-radius:50%;flex:none;width:7px;height:7px;box-shadow:0 0 0 3px #e3b04b2e}.pack-label-line{background:repeating-linear-gradient(90deg,#e3b04bbf 0 3px,#0000 3px 7px);flex:auto;min-width:10px;height:1px}.pack-label-text{direction:rtl}.pack-grab{cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;margin:0;padding:0;position:absolute}.pack-grab[data-dragging=true]{cursor:grabbing}.pack-grab:focus-visible{outline-offset:-6px;outline:2px solid #e3b04b}.pack-grab[hidden]{display:none}.pack-hint{color:#f7dc92;white-space:nowrap;pointer-events:none;opacity:0;direction:rtl;align-items:center;gap:5px;font-size:14px;font-weight:800;line-height:1;transition:opacity .3s;display:flex;position:absolute;top:0;left:0;transform:translate(-22%,9px)}.pack-stage[data-ready=true] .pack-hint{opacity:1}.pack-stage .pack-hint[data-hidden=true]{opacity:0}.pack-hint svg{flex:none;width:15px;height:15px}@media (prefers-reduced-motion:reduce){.pack-stage canvas,.pack-still,.pack-hint{transition:none}}
.packshow{gap:1.25rem;display:grid}@media (min-width:56rem){.packshow{grid-template-columns:repeat(2,minmax(0,1fr))}}.packshow-card{border:1px solid var(--nk-line);background:radial-gradient(80% 70% at 50% 35%, #e3b04b17, transparent 70%), var(--nk-raised);border-radius:1.5rem;margin:0;display:grid;overflow:hidden}.packshow-stage{height:300px;position:relative}@media (min-width:48rem){.packshow-stage{height:380px}}.packshow-card figcaption{border-top:1px solid var(--nk-line);align-items:center;gap:.5rem;padding:.9rem 1.25rem 1.1rem;font-weight:800;display:flex}.packshow-card figcaption svg{color:var(--nk-gold)}.packshow-done{color:#f7dc92;font-family:var(--font-display);animation:packshow-in .5s var(--ease-out-expo) both;font-size:1.15rem;font-weight:900}.packshow-again{border:1px solid var(--nk-gold);color:var(--nk-gold);animation:packshow-in .5s var(--ease-out-expo) both;border-radius:999px;align-items:center;gap:.4rem;margin-inline-start:auto;padding:.35rem .9rem;font-size:.85rem;font-weight:800;display:inline-flex}.packshow-again:hover{background:var(--nk-gold);color:var(--nk-bg)}.packshow-card figcaption{min-height:3.6rem}@keyframes packshow-in{0%{opacity:0;transform:translateY(10px)}}.packhome{align-items:center;gap:1rem;display:grid}@media (min-width:56rem){.packhome{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem}}.packhome-stage{height:300px;position:relative}@media (min-width:48rem){.packhome-stage{height:420px}}@media (prefers-reduced-motion:reduce){.packshow-done,.packshow-again{animation:none}}
