@property --ry{syntax:"<angle>";inherits:true;initial-value:-52deg}.c3d{--c3d-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");width:100%;container-type:inline-size}.c3d-scene{--u:min(var(--u-max,7px), calc(100cqi / 72));width:calc(var(--u) * 70);height:calc(var(--u) * 64);perspective:calc(var(--u) * 230);perspective-origin:50% 22%;user-select:none;direction:ltr;margin-inline:auto;position:relative}.c3d[data-interactive] .c3d-scene{cursor:grab;touch-action:pan-y pinch-zoom}.c3d[data-interactive] .c3d-scene:active{cursor:grabbing}.c3d:has([data-rotate]:focus-visible) .c3d-scene{outline:2px solid var(--sync);outline-offset:4px}.c3d-case{width:0;height:0;transform-style:preserve-3d;transform:rotateX(-11deg) rotateY(var(--ry));position:absolute;top:52%;left:50%}.c3d:not([data-interactive]) .c3d-case{transition:--ry .9s cubic-bezier(.22,1,.36,1)}.group:is(:hover,:focus-within) .c3d:not([data-interactive]) .c3d-case{--ry:-34deg}.c3d-f{backface-visibility:hidden;position:absolute;top:0;left:0;overflow:hidden}.c3d-f:after{content:"";opacity:var(--sh,0);pointer-events:none;background:#000;position:absolute;inset:0}.c3d-side,.c3d-side2{width:calc(var(--u) * 42);height:calc(var(--u) * 46);margin:calc(var(--u) * -23) 0 0 calc(var(--u) * -21)}.c3d-front,.c3d-back{width:calc(var(--u) * 20.5);height:calc(var(--u) * 46);margin:calc(var(--u) * -23) 0 0 calc(var(--u) * -10.25)}.c3d-top,.c3d-bot{width:calc(var(--u) * 20.5);height:calc(var(--u) * 42);margin:calc(var(--u) * -21) 0 0 calc(var(--u) * -10.25)}.c3d-side{transform:rotateY(90deg) translateZ(calc(var(--u) * 10.25));padding:calc(var(--u) * 1.2);--sh:var(--ss,.076);background:var(--c3d-grain), linear-gradient(180deg, #22252a, #111316);box-shadow:inset 0 0 0 1px #ffffff21}.c3d-pane{background:linear-gradient(100deg,#15171b,#0d0f12 45%,#0a0b0e);width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 0 0 1px #000}.c3d-pane>img,.c3d-pane>svg{width:100%;height:100%;position:absolute;inset:0}.c3d-label{padding-top:calc(var(--u) * .6);font:500 calc(var(--u) * .85) / 1 var(--font-mono);letter-spacing:.15em;color:#fff9;border-top:1px solid #fff3;justify-content:space-between;display:flex;position:absolute;bottom:2.6%;left:4.7%;right:4.7%}.c3d-edge{box-shadow:inset 0 0 calc(var(--u) * 3) #0009;position:absolute;inset:0}.c3d-glass{background:linear-gradient(113deg,#0000 16%,#ffffff1c 25%,#ffffff08 33%,#0000 33.5% 52%,#ffffff0e 57%,#0000 63%),linear-gradient(#ffffff12,#0000 26%,#0000006b);position:absolute;inset:0}.c3d-pane.is-swap:before{content:"";z-index:2;background:linear-gradient(transparent, color-mix(in srgb, var(--sync) 75%, transparent), transparent);height:16%;animation:.65s ease-out c3d-scan;position:absolute;top:0;left:0;right:0;translate:0 -110%}@keyframes c3d-scan{0%{translate:0 -100%}to{translate:0 640%}}.c3d-screw{z-index:3;width:calc(var(--u) * .95);height:calc(var(--u) * .95);background:radial-gradient(circle at 35% 30%,#a2a8b0,#2a2d33 55%,#0c0d0f);border-radius:50%;position:absolute;box-shadow:0 0 0 1px #000000b3}.c3d-front{transform:translateZ(calc(var(--u) * 21));--sh:var(--sf,.223);background:var(--c3d-grain), linear-gradient(90deg, #0d0f12, #1d2025 16%, #17191d 84%, #0b0c0f);box-shadow:inset 0 0 0 1px #ffffff17}.c3d-fans,.c3d-bloom{flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:9% 19% 5%}.c3d-fans i{aspect-ratio:1;background:radial-gradient(circle, #15171b 0 16%, transparent 17%), repeating-conic-gradient(from 8deg, #ffffff1f 0 22deg, transparent 22deg 40deg), radial-gradient(circle, color-mix(in srgb, var(--sync) 34%, #08090b), #08090b 72%);box-shadow:0 0 0 calc(var(--u) * .5) var(--sync), 0 0 calc(var(--u) * 2.8) calc(var(--u) * .7) color-mix(in srgb, var(--sync) 78%, transparent), inset 0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--sync) 65%, transparent);border-radius:50%;display:block}.c3d-mesh{border-radius:calc(var(--u) * .4);background:radial-gradient(circle, transparent 0 40%, #16181c 48%) 0 0 / calc(var(--u) * .7) calc(var(--u) * .7);box-shadow:inset 0 0 0 1px #ffffff17, inset 0 0 calc(var(--u) * 1.6) #000;position:absolute;inset:6% 9% 3%}.c3d-bloom{filter:blur(calc(var(--u) * .55));opacity:.75;mix-blend-mode:screen}.c3d-bloom i{aspect-ratio:1;border:calc(var(--u) * .9) solid var(--sync);background:radial-gradient(circle, transparent 30%, color-mix(in srgb, var(--sync) 38%, transparent) 62%, transparent 72%);border-radius:50%;display:block}.c3d-bounce{background:linear-gradient(0deg, color-mix(in srgb, var(--sync) 30%, transparent), transparent);height:22%;position:absolute;inset:auto 0 0}.c3d-led{width:calc(var(--u) * .5);height:calc(var(--u) * .5);background:var(--sync);box-shadow:0 0 calc(var(--u) * .9) var(--sync);border-radius:50%;position:absolute;top:2.3%;right:13%}.c3d-top{transform:rotateX(90deg) translateZ(calc(var(--u) * 23));background:var(--c3d-grain), linear-gradient(0deg, #2d3036, #1c1f24);box-shadow:inset 0 0 0 1px #ffffff24}.c3d-vent{border-radius:calc(var(--u) * .5);background:repeating-linear-gradient(0deg, #090a0c 0 calc(var(--u) * .5), #25282d calc(var(--u) * .5) calc(var(--u) * 1.15));position:absolute;inset:8% 15% 22%;overflow:hidden;box-shadow:0 0 0 1px #000}.c3d-vent:after{content:"";background:radial-gradient(closest-side, color-mix(in srgb, var(--sync) 42%, transparent), transparent);position:absolute;inset:0}.c3d-io{align-items:center;gap:calc(var(--u) * .9);display:flex;position:absolute;bottom:7%;left:15%;right:15%}.c3d-io b{width:calc(var(--u) * 1.7);height:calc(var(--u) * .6);border-radius:calc(var(--u) * .1);background:#08090b}.c3d-io b:first-child{width:calc(var(--u) * 1.3);height:calc(var(--u) * 1.3);box-shadow:0 0 0 calc(var(--u) * .14) var(--sync), 0 0 calc(var(--u) * .8) var(--sync);border-radius:50%}.c3d-side2{transform:rotateY(-90deg) translateZ(calc(var(--u) * 10.25));--sh:.2;background:var(--c3d-grain), linear-gradient(180deg, #1c1f23, #0f1114);place-items:center;display:grid;box-shadow:inset 0 0 0 1px #ffffff1a}.c3d-side2 span{font:700 calc(var(--u) * 2.6) var(--font-display);letter-spacing:.32em;color:#ffffff17}.c3d-back{transform:rotateY(180deg) translateZ(calc(var(--u) * 21));background:#0a0b0d}.c3d-bot{transform:rotateX(-90deg) translateZ(calc(var(--u) * 23));background:#040405}.c3d-floor{width:calc(var(--u) * 124);height:calc(var(--u) * 124);margin:calc(var(--u) * -62) 0 0 calc(var(--u) * -62);transform:rotateX(90deg) translateZ(calc(var(--u) * -23.3));background:linear-gradient(#ffffff14 1px, transparent 1px) 0 0 / 100% calc(var(--u) * 6.2), linear-gradient(90deg, #ffffff14 1px, transparent 1px) 0 0 / calc(var(--u) * 6.2) 100%;position:absolute;top:0;left:0;-webkit-mask-image:radial-gradient(closest-side,#000 22%,#0000 90%);mask-image:radial-gradient(closest-side,#000 22%,#0000 90%)}.c3d-spill{width:calc(var(--u) * 48);height:calc(var(--u) * 74);background:radial-gradient(closest-side, color-mix(in srgb, var(--sync) 60%, transparent), transparent);filter:blur(calc(var(--u) * 1.4));position:absolute;top:56%;left:50%;translate:-50% -50%}.c3d-shadow{width:calc(var(--u) * 21.5);height:calc(var(--u) * 43);filter:blur(calc(var(--u) * 1.1));opacity:.9;background:#000;position:absolute;top:50%;left:50%;translate:-50% -50%}.c3d[data-quality=lite]{content-visibility:auto;contain-intrinsic-block-size:auto 22rem;--c3d-grain:linear-gradient(transparent, transparent);margin-block:-4% -16%;padding-block:4% 16%}.c3d[data-quality=lite] .c3d-floor{background:0 0;-webkit-mask-image:none;mask-image:none}.c3d[data-quality=lite] .c3d-spill{filter:none;background:radial-gradient(closest-side, color-mix(in srgb, var(--sync) 42%, transparent), transparent)}.c3d[data-quality=lite] .c3d-shadow{filter:none;width:calc(var(--u) * 26);height:calc(var(--u) * 48);background:radial-gradient(closest-side,#000 55%,#0000)}.c3d[data-quality=lite] .c3d-bloom{display:none}.c3d:is([data-plain],[data-unlit]) .c3d-fans i{background:radial-gradient(circle, #15171b 0 16%, transparent 17%), repeating-conic-gradient(from 8deg, #ffffff1a 0 22deg, transparent 22deg 40deg), #0b0c0e;box-shadow:0 0 0 calc(var(--u) * .5) #2a2d33}.c3d:is([data-plain],[data-unlit]) :is(.c3d-bloom,.c3d-bounce,.c3d-spill),.c3d:is([data-plain],[data-unlit]) .c3d-vent:after{display:none}.c3d:is([data-plain],[data-unlit]) .c3d-led,.c3d:is([data-plain],[data-unlit]) .c3d-io b:first-child{box-shadow:none;background:#3a3e45}@media (prefers-reduced-motion:reduce){.c3d:not([data-interactive]) .c3d-case{transition:none}}