.pn{position:relative;--pn-size: 3in;width:var(--pn-size);max-width:100%;aspect-ratio:1 / 1;transform:rotate(var(--tilt)) translate(var(--dx),var(--dy));perspective:1100px;perspective-origin:50% 25%;transition:transform .4s cubic-bezier(.22,.61,.36,1)}.pn__paper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;overflow:hidden;border-radius:2px 2px 3px 3px;transform-origin:50% var(--pivot);transform:rotateX(var(--bend)) rotateY(var(--skew)) scaleY(1.02);backface-visibility:hidden;background-image:linear-gradient(to bottom,#0000000f,#00000008 7%,#00000002 13%,#ffffff0d 26%,#ffffff24 66%,#ffffff3d),linear-gradient(var(--sheen),rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 48%,rgba(0,0,0,.05) 100%),linear-gradient(to bottom,var(--face),var(--deep) 190%);box-shadow:inset 0 -1px #ffffff8c,inset -1px 0 #ffffff2e}.pn__grain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;opacity:.4;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E")}.pn__cast{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2px;transform-origin:50% var(--pivot);background:#2e241c99;-webkit-mask-image:linear-gradient(to bottom,transparent 9%,rgba(0,0,0,.3) 38%,#000 100%);mask-image:linear-gradient(to bottom,transparent 9%,rgba(0,0,0,.3) 38%,#000 100%);transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .4s ease}.pn__cast--near{z-index:1;opacity:.3;transform:rotateX(var(--bend)) rotateY(var(--skew)) translate(2px,calc(3px * var(--lift))) scale(1.004);filter:blur(3px)}.pn__cast--far{z-index:0;opacity:.2;transform:rotateX(var(--bend)) rotateY(var(--skew)) translate(calc(5px * var(--lift)),calc(13px * var(--lift))) scale(1.02);filter:blur(calc(9px + 5px * var(--lift)))}.pn__content{position:relative;z-index:1;padding:17px 16px 20px;width:100%;color:var(--ink)}.pn__title{margin:0 0 9px;font-family:var(--font-sans);font-size:clamp(1.06rem,1rem + .24vw,1.2rem);font-weight:700;line-height:1.15;letter-spacing:.01em}.pn__body{margin:0;font-family:var(--font-sans);font-size:clamp(.9rem,.86rem + .2vw,1.01rem);line-height:1.42;color:color-mix(in srgb,var(--ink) 88%,transparent)}.pn__pin{position:absolute;z-index:4;top:-7px;left:50%;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#fff0 46%),radial-gradient(circle at 62% 68%,#2c2c30,#6a6a72 60%,#3a3a40);box-shadow:0 3px 4px #261e1866,inset 0 -1px 2px #00000080}.pn:hover .pn__paper,.pn:focus-within .pn__paper{transform:rotateX(calc(var(--bend) * .35)) rotateY(calc(var(--skew) * .35)) scaleY(1.01)}.pn:hover .pn__cast,.pn:focus-within .pn__cast{opacity:.28}.pn-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min, 210px),1fr));gap:var(--gap, 44px);align-items:start}@media(prefers-reduced-motion:reduce){.pn,.pn__paper,.pn__cast{transition:none}.pn:hover .pn__paper,.pn:focus-within .pn__paper{transform:rotateX(var(--bend)) rotateY(var(--skew)) scaleY(1.02)}.pn:hover .pn__cast,.pn:focus-within .pn__cast{opacity:inherit}}