.depth,.holo{--holo-a:#ff7a2e;--holo-b:#2dd4bf;--floor:rgb(0 0 0/0.62);--glare:rgb(255 255 255/0.13);position:relative;isolation:isolate}[data-theme=light] .depth,[data-theme=light] .holo{--holo-a:#ea580c;--holo-b:#0d9488;--floor:rgb(70 44 20/0.26);--glare:rgb(255 255 255/0.6)}.tilt-floor{position:absolute;z-index:-1;inset:12% 6% -5%;border-radius:28px;background:radial-gradient(closest-side,var(--floor),transparent);filter:blur(16px);opacity:calc(var(--on, 0) * .95);transform:translate3d(calc(var(--ry, 0) * -1.8px),calc(12px + var(--rx, 0) * 1.4px),0);pointer-events:none}.depth-card,.holo-card{transform-origin:50% 50%;transition:box-shadow .42s var(--ease-out-quint),border-color .3s var(--ease-out-quint)}.depth-edge,.depth-grid,.holo-edge,.holo-foil,.holo-glare,.holo-glitter{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.holo-foil{background-image:repeating-linear-gradient(115deg,var(--holo-a) 0,var(--holo-b) 10%,var(--holo-a) 20%);background-image:repeating-linear-gradient(115deg in oklch,var(--holo-a) 0,var(--holo-b) 10%,var(--holo-a) 20%);background-size:220% 220%;background-position:var(--px,30%) var(--py,20%);mix-blend-mode:screen;opacity:calc(.05 + var(--on, 0) * .15);-webkit-mask-image:radial-gradient(120% 110% at var(--px,20%) var(--py,0),#000 0,rgb(0 0 0/.45) 42%,transparent 82%);mask-image:radial-gradient(120% 110% at var(--px,20%) var(--py,0),#000 0,rgb(0 0 0/.45) 42%,transparent 82%)}[data-theme=light] .holo-foil{mix-blend-mode:multiply;opacity:calc(.04 + var(--on, 0) * .16)}.holo-glitter{background-image:radial-gradient(circle at 30% 40%,rgb(255 255 255/.95) 0 .7px,transparent 1.4px),radial-gradient(circle at 70% 70%,color-mix(in oklab,var(--holo-b) 70%,white) 0 .7px,transparent 1.4px),radial-gradient(circle at 50% 10%,color-mix(in oklab,var(--holo-a) 70%,white) 0 .6px,transparent 1.3px);background-size:23px 23px,31px 31px,17px 17px;background-position:calc(var(--nx, 0) * -10px) calc(var(--ny, 0) * -10px),calc(var(--nx, 0) * 6px) calc(var(--ny, 0) * 6px),0 0;opacity:calc(var(--on, 0) * .75);-webkit-mask-image:radial-gradient(circle 190px at var(--px,50%) var(--py,50%),#000,transparent 72%);mask-image:radial-gradient(circle 190px at var(--px,50%) var(--py,50%),#000,transparent 72%)}[data-theme=light] .holo-glitter{background-image:radial-gradient(circle at 30% 40%,var(--holo-a) 0 .7px,transparent 1.4px),radial-gradient(circle at 70% 70%,var(--holo-b) 0 .7px,transparent 1.4px),radial-gradient(circle at 50% 10%,rgb(202 138 4) 0 .6px,transparent 1.3px);opacity:calc(var(--on, 0) * .55)}.holo-glare{background:radial-gradient(circle 340px at var(--px,50%) var(--py,50%),var(--glare),transparent 62%);opacity:var(--on,0)}.depth-edge,.holo-edge{padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.holo-edge{background:radial-gradient(circle 280px at var(--px,22%) var(--py,0),var(--holo-a),var(--holo-b) 45%,transparent 78%);background:radial-gradient(circle 280px at var(--px,22%) var(--py,0) in oklch,var(--holo-a),var(--holo-b) 45%,transparent 78%);opacity:calc(.22 + var(--on, 0) * .78)}.depth-card:hover{border-color:color-mix(in oklab,var(--accent) 34%,transparent);box-shadow:var(--bevel-top),var(--shadow-2),var(--shadow-glow)}.depth-edge{background:radial-gradient(circle 240px at var(--px,50%) var(--py,0),var(--accent),transparent 72%);opacity:var(--on,0)}.depth-grid{inset:-14px;background-image:radial-gradient(var(--line-strong) 1px,transparent 1.3px);background-size:15px 15px;opacity:.55;transform:translate3d(calc(var(--nx, 0) * -8px),calc(var(--ny, 0) * -8px),0);-webkit-mask-image:radial-gradient(60% 75% at 100% 0,#000,transparent 75%);mask-image:radial-gradient(60% 75% at 100% 0,#000,transparent 75%)}.depth-num{position:absolute;top:.25rem;right:1rem;font-size:4.5rem;font-weight:700;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1px var(--line-strong);pointer-events:none;transform:translate3d(calc(var(--nx, 0) * -16px),calc(var(--ny, 0) * -12px),0);transition:-webkit-text-stroke-color .5s var(--ease-out-quint)}.depth-card:hover .depth-num{-webkit-text-stroke-color:color-mix(in oklab,var(--accent) 55%,transparent)}.depth-icon{display:grid;place-items:center;width:2.875rem;height:2.875rem;flex-shrink:0;border-radius:12px;border:1px solid var(--line-strong);color:var(--accent);background:linear-gradient(160deg,var(--glass-strong),var(--bg-elev));box-shadow:var(--bevel-top),0 1px 0 var(--line-strong),0 2px 0 var(--line-strong),0 3px 0 var(--line),0 4px 0 var(--line),0 12px 18px -8px rgb(0 0 0/.45);transform:translate3d(calc(var(--nx, 0) * 6px),calc(var(--ny, 0) * 6px - var(--on, 0) * 3px),0);transition:background .5s var(--ease-out-quint),color .5s var(--ease-out-quint),border-color .5s var(--ease-out-quint),box-shadow .5s var(--ease-out-quint)}.depth-card:hover .depth-icon{border-color:transparent;color:var(--accent-ink);background:linear-gradient(160deg,var(--accent-hi),var(--accent) 58%,var(--accent-lo));box-shadow:inset 0 1px 0 rgb(255 255 255/.3),0 1px 0 var(--accent-lo),0 2px 0 var(--accent-lo),0 3px 0 color-mix(in oklab,var(--accent-lo) 80%,black),0 4px 0 color-mix(in oklab,var(--accent-lo) 70%,black),0 16px 26px -10px color-mix(in oklab,var(--accent) 65%,transparent)}.depth-bar{position:absolute;left:12%;right:12%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:scaleX(var(--on,0));pointer-events:none}