.pd-fam{padding-block:clamp(64px,8vw,120px) clamp(48px,6vw,88px);position:relative}.pd-rows{--pd-i:0;--peel:48px;margin-block-start:clamp(28px,4vw,52px);position:relative}.pd-plate{display:none}.pd-list{gap:16px;display:grid;position:relative}.pd-row{--k:.24;--peel-t:.72s;isolation:isolate;border-radius:var(--r-l);gap:22px;padding:12px 12px 52px;display:grid;position:relative}.pd-row:after,.pd-plate:before,.pd-rim{content:"";border-radius:inherit;pointer-events:none;clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--peel) * var(--k)), calc(100% - var(--peel) * var(--k)) 100%, 0 100%);transition:clip-path var(--peel-t) var(--ease-out), opacity .45s var(--ease-out);position:absolute;inset:0}[dir=rtl] .pd-row:after,[dir=rtl] .pd-plate:before,[dir=rtl] .pd-rim{clip-path:polygon(0 0, 100% 0, 100% 100%, calc(var(--peel) * var(--k)) 100%, 0 calc(100% - var(--peel) * var(--k)))}.pd-row:after,.pd-plate:before{z-index:-1;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}.pd-rim{background:radial-gradient(300px circle at var(--rx,-400px) var(--ry,-400px), var(--card-rim), transparent 70%);opacity:0;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.pd-rows[data-in] .pd-row[data-on]>.pd-rim,.pd-rows[data-in]>.pd-plate>.pd-rim{opacity:1}.pd-flap{--pd-sx:-5px;z-index:1;width:var(--peel);height:var(--peel);transform:scale(var(--k));transform-origin:100% 100%;filter:drop-shadow(var(--pd-sx) -5px 7px color-mix(in srgb, var(--text) 30%, transparent));transition:transform var(--peel-t) var(--ease-out);pointer-events:none;position:absolute;inset-block-end:0;inset-inline-end:0}[dir=rtl] .pd-flap{--pd-sx:5px;transform-origin:0 100%}.pd-flap-under{color:var(--signal-ink);background:linear-gradient(135deg, color-mix(in srgb, var(--signal) 74%, var(--card)) 0%, var(--signal) 30%, color-mix(in srgb, var(--signal) 78%, var(--text)) 49.4%, transparent 50%);border-start-start-radius:14px;display:block;position:absolute;inset:0}[dir=rtl] .pd-flap-under{transform:scaleX(-1)}.pd-flap-under svg{opacity:0;transition:opacity .2s linear;position:absolute;inset-block-start:17%;inset-inline-start:17%}[dir=rtl] .pd-flap-under svg{inset-inline:auto 17%}.pd-row[data-on]{--k:1;--peel-t:.42s}.pd-row[data-on]>.pd-flap svg{opacity:1;transition-delay:.12s}.pd-row:active{--k:0;--peel-t:.13s}.pd-fig{width:100%;max-width:calc(var(--pd-native,9999px) / .84);transform-origin:50% 100%;transition:scale .78s var(--ease-in-out);order:-1;justify-self:center;position:relative}.js .pd-row:not([data-on]) .pd-fig{scale:.9}.pd-row[data-on] .pd-fig{transition:scale .6s var(--ease-out)}.pd-row[data-on]:active .pd-fig{transition:scale var(--t-press) var(--ease-out);scale:.985}.pd-fig .pd-box{aspect-ratio:16/11;border-radius:calc(var(--r-l) - 10px);width:100%;box-shadow:var(--shadow-card)}.pd-fig figcaption{clip-path:inset(0 round 999px);transition:opacity .28s var(--ease-in) .16s, clip-path .46s var(--ease-in-out), translate .46s var(--ease-in-out)}.js .pd-row:not([data-on]) .pd-fig figcaption{opacity:0;clip-path:inset(0 100% 0 0 round 999px);translate:calc(var(--dir) * -10px) 0}[dir=rtl].js .pd-row:not([data-on]) .pd-fig figcaption{clip-path:inset(0 0 0 100% round 999px)}.pd-row[data-on] .pd-fig figcaption{transition:opacity .22s var(--ease-out) .3s, clip-path .42s var(--ease-out) .3s, translate .42s var(--ease-out) .3s}.pd-copy,.pd-detail{padding-inline:8px}.pd-copy{justify-items:start;gap:12px;display:grid}.pd-count{font-size:var(--fs-small);color:var(--text-muted);align-items:center;gap:12px;font-weight:600;display:flex}.pd-count .pd-num{transition:fill .52s var(--ease-out);flex:none}.pd-row[data-on] .pd-count .pd-num{fill:var(--signal);transition-duration:var(--t-control)}.js .pd-row[data-on] .pd-num.in circle{animation:90ms linear backwards pd-reprint;animation-delay:calc(.14s + var(--c) * 30ms)}.pd-name{margin-block-start:2px;font-size:clamp(28px,3vw,44px)}.pd-link{outline:none}.pd-link:after{content:"";z-index:2;border-radius:var(--r-l);position:absolute;inset:0}.pd-link:focus-visible:after{outline:2px solid var(--signal);outline-offset:3px}.pd-text{max-width:54ch;color:var(--text-muted)}.pd-go{align-items:center;gap:12px;min-height:44px;margin-block-start:4px;font-size:15px;font-weight:650;display:inline-flex}.pd-go-dot{border:1px solid var(--line);width:40px;height:40px;color:var(--text);transition:background-color .52s var(--ease-out), color .52s var(--ease-out), border-color .52s var(--ease-out), scale var(--t-press) var(--ease-out);background:0 0;border-radius:50%;flex:none;place-items:center;display:grid;position:relative;overflow:hidden}.pd-go-dot svg{grid-area:1/1}.pd-go-dot svg+svg{transform:translate(-36px)}.pd-row[data-on] .pd-go-dot{background:var(--btn);color:var(--btn-ink);transition-duration:var(--t-control), var(--t-control), var(--t-control), var(--t-press);border-color:#0000}.pd-row[data-on] .pd-go-dot svg{transition:transform .42s var(--ease-out);transform:translate(36px)}.pd-row[data-on] .pd-go-dot svg+svg{transform:none}.pd-row:active .pd-go-dot{scale:.9}.pd-detail{align-content:start;gap:18px;display:grid}.pd-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-block-end:10px;font-size:12px;font-weight:650}[dir=rtl] .pd-label{letter-spacing:0;font-size:13px}.pd-makers{flex-wrap:wrap;gap:12px 16px;display:flex}.pd-makers li{justify-items:start;gap:8px;display:grid}.pd-makers b{font-size:14px;font-weight:650}.pd-uses{gap:7px;font-size:14.5px;line-height:1.45;display:grid}[dir=rtl] .pd-uses{line-height:1.7}.pd-uses li{grid-template-columns:6px minmax(0,1fr);gap:10px;display:grid}.pd-uses li:before{content:"";background:var(--signal);border-radius:50%;width:6px;height:6px;margin-block-start:.55em}[dir=rtl] .pd-uses li:before{margin-block-start:.75em}@media (min-width:640px) and (max-width:1023.98px){.pd-row{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;column-gap:22px;padding:14px 14px 54px}.pd-copy{grid-area:1/1;padding-inline-start:12px}.pd-fig{transform-origin:50%;order:0;grid-area:1/2}.pd-fig .pd-box{aspect-ratio:5/4}.pd-detail{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:22px;padding-block-start:22px;padding-inline:12px}}@media (min-width:1024px){.pd-rows{--pd-fig:clamp(290px, 29vw, 400px);--pd-pad:clamp(26px, 2.6vw, 36px)}.pd-list{grid-auto-rows:1fr;gap:0}.pd-plate{--k:.24;--peel-t:.72s;isolation:isolate;height:calc(100% / var(--pd-n,5));border-radius:var(--r-l);filter:drop-shadow(0 22px 26px color-mix(in srgb, var(--text) 12%, transparent));translate:0 calc(var(--pd-i) * 100%);transition:translate .62s var(--ease-out);display:block;position:absolute;inset-block-start:0;inset-inline:0}.js .pd-rows>.pd-plate[data-rise]{transition:opacity var(--t-enter) var(--ease-out), translate .62s var(--ease-out);transform:none}.pd-rows[data-in]>.pd-plate{--k:1;--peel-t:.42s}.pd-rows:has(.pd-link:focus-visible)>.pd-plate{--k:1;--peel-t:.42s}.pd-rows[data-in]>.pd-plate .pd-flap svg{opacity:1;transition-delay:.12s}.pd-rows:has(.pd-link:focus-visible)>.pd-plate .pd-flap svg{opacity:1;transition-delay:.12s}@media (hover:none){.pd-rows>.pd-plate{--k:1;--peel-t:.42s}.pd-rows>.pd-plate .pd-flap svg{opacity:1}}.pd-rows:has(.pd-row:active)>.pd-plate{--k:0;--peel-t:.13s}.pd-plate:after{content:"";background:var(--signal);width:4px;box-shadow:0 0 0 4px var(--signal-soft);border-radius:4px;position:absolute;inset-block:36%;inset-inline-start:14px}.pd-row{grid-template-columns:minmax(0, 1fr) clamp(220px, 22vw, 300px) var(--pd-fig);column-gap:var(--pd-pad);padding:clamp(28px, 2.8vw, 38px) var(--pd-pad);align-items:center;padding-inline-end:max(var(--pd-pad), calc(var(--peel) + 4px))}.pd-row:after,.pd-row>.pd-rim,.pd-row>.pd-flap{display:none}.pd-row[data-on]{z-index:2}.pd-copy,.pd-detail{padding-inline:0}.pd-detail{gap:20px}.pd-fig{width:var(--pd-fig);transform-origin:100%;order:0;justify-self:end}[dir=rtl] .pd-fig{transform-origin:0%}.pd-row:not([data-on]) .pd-fig,.js .pd-row:not([data-on]) .pd-fig{scale:.72}.pd-fig .pd-box{aspect-ratio:5/4;border-radius:var(--r-m)}}@keyframes pd-reprint{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.pd-row:after,.pd-rim,.pd-fig,.pd-row[data-on] .pd-fig,.pd-fig figcaption,.pd-row[data-on] .pd-fig figcaption,.pd-go-dot,.pd-row[data-on] .pd-go-dot,.pd-row[data-on] .pd-go-dot svg,.pd-count .pd-num{transition:none}.js .pd-row[data-on] .pd-num.in circle{animation:none}.pd-plate,.pd-flap,.pd-rim{display:none}.pd-row:after,[dir=rtl] .pd-row:after{clip-path:none}.pd-row .pd-fig,.js .pd-row:not([data-on]) .pd-fig,.pd-row[data-on]:active .pd-fig{scale:1}.pd-row .pd-fig figcaption,.js .pd-row:not([data-on]) .pd-fig figcaption,[dir=rtl].js .pd-row:not([data-on]) .pd-fig figcaption{opacity:1;clip-path:none;translate:0}.pd-row:active .pd-go-dot{scale:1}.pd-row:hover .pd-link:after{box-shadow:inset 0 0 0 1.5px var(--signal)}}
