/* A rounded solid titanium perimeter. These quads rotate with the existing rotor;
   no extra animation loop, image, canvas or WebGL layer is needed. */
.access-key-stage{--key-depth:clamp(5px,.65vw,8px);--key-radius-x:3.4%;--key-radius-y:5.83984%;--key-half-depth:calc(var(--key-depth)/2)}
.key-front{transform:translateZ(var(--key-half-depth))}
.key-back{transform:rotateY(180deg) translateZ(var(--key-half-depth))}
.key-metal-core{border:0;border-radius:var(--key-radius-x) / var(--key-radius-y);background:none;transform:none;pointer-events:none}
.key-metal-core::before,.key-metal-core::after{inset:0;border:1px solid #aeb4b7;border-radius:inherit;background:#292d2f;box-shadow:inset 0 0 0 1px #080a0c;transform:translateZ(calc(var(--key-half-depth) - .35px))}
.key-metal-core::after{border-color:#717b81;background:#202426;transform:translateZ(calc(.35px - var(--key-half-depth)))}
.key-edge{position:absolute;display:block;pointer-events:none;backface-visibility:visible;
  background:linear-gradient(180deg,#b2b9bd 0%,#727c82 12%,#343b40 29%,#22282c 62%,#616b72 87%,#a0a9ae 100%);
  box-shadow:inset 0 1px 0 #eef4f566,inset 0 -1px 0 #050809b3}
.key-edge-top,.key-edge-bottom{left:var(--key-radius-x);width:calc(100% - 2 * var(--key-radius-x));height:var(--key-depth);margin-top:calc(-1 * var(--key-half-depth));transform:rotateX(90deg)}
.key-edge-top{top:0;background:linear-gradient(180deg,#dde1e3,#8e989f 16%,#4f595f 42%,#808b93 80%,#c1c9ce)}
.key-edge-bottom{top:100%;background:linear-gradient(180deg,#828b91,#414a50 15%,#171e23 55%,#4c575e 85%,#8e999f)}
.key-edge-left,.key-edge-right{top:var(--key-radius-y);height:calc(100% - 2 * var(--key-radius-y));width:var(--key-depth);margin-left:calc(-1 * var(--key-half-depth));transform:rotateY(90deg);background:linear-gradient(90deg,#b2b9bd,#727c82 12%,#343b40 29%,#22282c 62%,#616b72 87%,#a0a9ae)}
.key-edge-left{left:0}.key-edge-right{left:100%}
.key-edge-arc{left:calc(var(--corner-x) + var(--arc-x) * var(--key-radius-x));top:calc(var(--corner-y) + var(--arc-y) * var(--key-radius-y));width:calc(.196035 * var(--key-radius-x) + .15px);height:var(--key-depth);transform:translate(-50%,-50%) rotateZ(var(--arc-angle)) rotateX(90deg)}
/* The shadow belongs to the scene, not the metal faces, so it never flips over text. */
.key-card-scene::before{content:"";position:absolute;left:10%;right:8%;bottom:8px;height:15%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse,#000b 0%,#0006 35%,transparent 72%);transform:rotate(-5deg)}
@media(forced-colors:active){.key-edge{background:CanvasText;box-shadow:none}.key-metal-core::before,.key-metal-core::after{background:Canvas;border-color:CanvasText}.key-card-scene::before{display:none}}

/* Angle-led softbox reflection and a fine, cool titanium rim. The face itself
   stays overflow-visible so the existing physical edge geometry is preserved. */
.key-front-button::after,#access-key-back::after{display:none}
.key-optics{position:absolute;inset:1px;border-radius:var(--key-radius-x) / var(--key-radius-y);overflow:hidden;pointer-events:none;z-index:4;box-shadow:inset 0 0 0 1px #e8f4ff38}
.key-optics::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(120deg,#ecf7ff80,transparent 26%,transparent 65%,#9fc5df55) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.key-specular{position:absolute;inset:-12% -35%;background:linear-gradient(110deg,transparent 24%,#d3e7fa04 35%,#dcefff1b 44%,#f1f9ff29 48%,#d9ebff0d 53%,transparent 63%);pointer-events:none;transform:translateX(-14%);opacity:.7}
.access-key-stage.is-moving .key-specular{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.key-specular{display:none}.key-optics{box-shadow:inset 0 0 0 1px #e8f4ff30}}
@media(forced-colors:active){.key-optics{display:none}}

/* The controller already computes the facing normal for focus/accessibility.
   Explicitly hide the away-facing surface so WebKit cannot composite its
   promoted descendants through the card. The separate edge mesh stays intact. */
.key-face[aria-hidden="true"] { visibility: hidden; }