/* Products as a 3D experience (products3d.js): a tall wrapper with a sticky stage, the pen and its pack in the middle */
.pr-scroll { position: relative; height: 400vh; margin: 0 calc(-1 * var(--pad)); }
.pr-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #e9e3d6 0%, #ddd5c5 70%, #d2c9b8 100%); }
.pr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pr-cap { position: absolute; left: var(--pad); top: 76px; display: grid; gap: 4px; z-index: 2; pointer-events: none; }
.pr-cap b { font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: 6px; } .pr-cap em { font-style: normal; color: var(--mute); font-size: 14px; margin-top: 10px; }
.pr-dots { position: absolute; right: var(--pad); top: 50%; translate: 0 -50%; display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; z-index: 2; }
.pr-dots li { width: 8px; height: 8px; border-radius: 50%; background: rgba(20, 20, 20, .2); transition: background .3s, transform .3s; } .pr-dots li.on { background: #141414; transform: scale(1.4); }
@media (max-width: 760px) { .pr-cap { top: 96px; } .pr-scroll { height: 340vh; } }