.realistic-shelf{--rs-stage-gap:32px;width:100%}.realistic-shelf__stage{gap:var(--rs-stage-gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.realistic-shelf__card{border-radius:20px;flex-direction:column;align-items:center;gap:16px;padding:28px 22px 36px;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 70px -30px #0006}.realistic-shelf__card--cream{background:linear-gradient(#fbf4e3 0%,#f2e7cb 100%)}.realistic-shelf__card--dark{background:linear-gradient(#1a1d26 0%,#0d0f16 100%)}.realistic-shelf__card--dusk{background:linear-gradient(#433650 0%,#261b30 100%)}.realistic-shelf__label{letter-spacing:.22em;text-transform:uppercase;text-align:center;font-family:Cinzel,Georgia,serif;font-size:12px}.realistic-shelf__card--cream .realistic-shelf__label{color:#6a5030}.realistic-shelf__card--dark .realistic-shelf__label,.realistic-shelf__card--dusk .realistic-shelf__label{color:#ecdcbd}.realistic-shelf__label small{letter-spacing:.02em;text-transform:none;opacity:.7;margin-top:3px;font-family:Georgia,serif;font-size:11px;font-style:italic;display:block}.realistic-shelf svg.realistic-shelf__svg{filter:drop-shadow(0 14px 28px #00000059);width:100%;max-width:360px;height:auto;display:block}.realistic-shelf .keycap{--lift:0px;--dx:0px;--rot:0deg;--press:1;transform:translate(var(--dx), var(--lift)) rotate(var(--rot)) scale(var(--press));transform-box:fill-box;transform-origin:50%;filter:drop-shadow(0 2px 1.5px #00000059);cursor:pointer;transition:transform .52s cubic-bezier(.34,1.3,.4,1),filter .42s}.realistic-shelf .keycap.is-lifted{filter:drop-shadow(0 14px 10px #0000008c)}.realistic-shelf .keycap.is-pressed{--press:.88;filter:drop-shadow(0 1px .5px #00000073);transition:transform 60ms ease-out,filter 60ms ease-out}.realistic-shelf .keycap-shadow{transform-box:fill-box;transform-origin:50%;opacity:0;transition:opacity .52s,transform .52s cubic-bezier(.34,1.3,.4,1)}.realistic-shelf .keycap-shadow.is-visible{opacity:.45;transform:scale(1.15)}.realistic-shelf .keycap:hover{--lift:-3px}
.hs3d{width:100%;max-width:440px;height:min(620px,82vh);margin:0 auto;position:relative}.hs3d__viewport{perspective:1500px;perspective-origin:48% 40%;position:absolute;inset:0}.hs3d__scene{width:360px;height:680px;transform:scale(var(--s,.8));transform-style:preserve-3d;margin-top:-348px;margin-left:-180px;position:absolute;top:50%;left:50%}.hs3d__rotor{transform-style:preserve-3d;transform-origin:50%;will-change:transform;position:absolute;inset:0;transform:rotateX(-5deg)rotateY(3deg)}.hs3d__body{transform-style:preserve-3d;position:absolute;inset:0}.hs3d__layer{width:360px;height:680px;position:absolute;inset:0}.hs3d__layer svg{width:360px;height:680px;display:block;overflow:visible}.hs3d__extrude svg path{stroke:#0000002e;stroke-width:.5px}.hs3d__face{filter:drop-shadow(0 18px 30px #00000073)}.hs3d__face .keycap{filter:drop-shadow(0 3px 3px #0006)}.hs3d__slot{width:0;height:0;transform-style:preserve-3d;position:absolute}.hs3d__slot>*{position:absolute;top:0;left:0}.hs3d__socket{background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%);width:132px;height:132px;box-shadow:0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent) inset;opacity:0;pointer-events:none;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;transform:translate(-50%,-50%)translateZ(2px)}.hs3d__switch{width:78px;height:78px;transform-style:preserve-3d;opacity:0;transform:translate(-50%,-50%)}.hs3d__sw-base,.hs3d__sw-top,.hs3d__sw-stem,.hs3d__sw-pins{position:absolute;top:50%;left:50%}.hs3d__sw-base{background:linear-gradient(155deg,#34384a 0%,#20222e 55%,#14151d 100%);border-radius:12px;width:78px;height:78px;margin:-39px 0 0 -39px;transform:translateZ(0);box-shadow:0 0 0 1px #00000080,inset 0 2px 1px #ffffff24,inset 0 -6px 10px #0000008c}.hs3d__sw-top{background:linear-gradient(155deg,#4a4f64 0%,#2b2e3c 70%);border-radius:9px;width:60px;height:60px;margin:-32px 0 0 -30px;transform:translateZ(7px);box-shadow:inset 0 2px 1px #ffffff2e,inset 0 -4px 8px #00000080,0 3px 6px #0006}.hs3d__sw-stem{width:30px;height:30px;margin:-15px 0 0 -15px;transform:translateZ(15px)}.hs3d__sw-stem i{background:linear-gradient(#f4d38a,#c9a057);border-radius:2px;position:absolute;top:50%;left:50%;box-shadow:0 1px 2px #00000073,inset 0 1px #ffffff59}.hs3d__sw-stem i:first-child{width:30px;height:9px;margin:-4.5px 0 0 -15px}.hs3d__sw-stem i:last-child{width:9px;height:30px;margin:-15px 0 0 -4.5px}.hs3d__sw-pins{filter:drop-shadow(0 2px 1px #0006);opacity:.9;background:linear-gradient(#b9a16a,#8a7038) 0/6px 12px no-repeat,linear-gradient(#b9a16a,#8a7038) 100%/6px 12px no-repeat;width:44px;height:12px;margin:30px 0 0 -22px;transform:translateZ(-4px)}.hs3d__cap{pointer-events:none;filter:drop-shadow(0 6px 6px #00000059);width:150px;height:150px;margin:0;transform:translate(-50%,-50%)}.hs3d__cap img{-o-object-fit:contain;object-fit:contain;-o-object-position:center bottom;object-position:center bottom;width:100%;height:100%;display:block}.hs3d__ground{filter:blur(6px);pointer-events:none;background:radial-gradient(#00000080,#0000 70%);width:60%;height:34px;position:absolute;bottom:4%;left:50%;transform:translate(-50%)}.hs3d__labels{pointer-events:none;opacity:0;transform:translateY(var(--lift,8px));font-family:Cinzel,Georgia,serif;transition:none;position:absolute;inset:0}.hs3d__lab{width:168px;position:absolute}.hs3d__lab-tag{letter-spacing:.1em;text-transform:uppercase;color:#f4e6c4;text-shadow:0 1px 6px #000000b3;font-size:12.5px;display:block}.hs3d__lab-note{letter-spacing:.01em;text-transform:none;color:#ede3c9b8;margin-top:3px;font-family:Georgia,Iowan Old Style,serif;font-size:12px;font-style:italic;display:block}.hs3d__lab-line{background:linear-gradient(90deg,#c9a057e6,#c9a05726);height:1px;position:absolute;top:9px}.hs3d__lab-dot{background:#f4d38a;border-radius:50%;width:6px;height:6px;position:absolute;top:6px;box-shadow:0 0 8px #f4d38acc}.hs3d__lab--cap{top:15%;left:56%}.hs3d__lab--sw{top:35%;left:58%}.hs3d__lab--shelf{text-align:left;top:56%;left:57%}.hs3d__lab--cap .hs3d__lab-line{width:70px;left:-70px}.hs3d__lab--cap .hs3d__lab-dot{left:-74px}.hs3d__lab--sw .hs3d__lab-line{width:86px;left:-86px}.hs3d__lab--sw .hs3d__lab-dot{left:-90px}.hs3d__lab--shelf .hs3d__lab-line{width:110px;left:-110px}.hs3d__lab--shelf .hs3d__lab-dot{left:-114px}@media (max-width:760px){.hs3d__labels{display:none}}
.kcshelf{width:100%;max-width:360px;margin:0 auto;position:relative}.kcshelf__bg{filter:drop-shadow(0 18px 26px #0006);width:100%;height:100%;display:block}.kcshelf__caps{pointer-events:none;position:absolute;inset:0}.kcshelf__cap{-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 4px 3px #0006);position:absolute}