/* "The keys" (assets/art/gov-keys.js): beside "Using AI should not mean handing your operations to a vendor." */
.has-art-gov-keys .v5-stakes-a { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); column-gap: clamp(40px, 4vw, 80px); align-items: center; }
.has-art-gov-keys .v5-stakes-a > * { grid-column: 1 / -1; }
.has-art-gov-keys .v5-stakes-a > :first-child { grid-column: 1; grid-row: 1; }
.has-art-gov-keys .v5-stakes-a > .gk-stage { grid-column: 2; grid-row: 1; align-self: center; }
.has-art-gov-keys .v5-stakes-a > .v5-aside { grid-row: 2; }
.gk-label { margin: 0 0 14px; font-size: 16.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
.gk-svg { display: block; width: 100%; height: auto; overflow: hidden; }
@media (max-width: 900px) { .has-art-gov-keys .v5-stakes-a { display: block !important; } .gk-stage { display: none; } }

/* Drawing */
.gk-plate rect { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.5; }
.gk-plate text { fill: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.gk-hook { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.gk-ring { fill: none; stroke: var(--muted); stroke-width: 4; }
.gk-bow { fill: var(--raised); stroke: var(--turquoise); stroke-width: 2.5; }
.gk-hole { fill: var(--ground); stroke: var(--turquoise); stroke-width: 1.5; }
.gk-blade { fill: var(--raised); stroke: var(--turquoise); stroke-width: 2; stroke-linejoin: round; }
.gk-string { fill: none; stroke: var(--faint); stroke-width: 1.3; stroke-dasharray: 3 3; }
.gk-tag path { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.5; transition: stroke 0.5s ease, fill 0.5s ease; }
.gk-tag circle { fill: var(--ground); stroke: var(--faint); stroke-width: 1; }
.gk-tag text { fill: var(--ink); font-size: 16px; font-weight: 500; }
.gk-spark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.gk-sleeve { fill: #2c2b28; stroke: var(--line-strong); stroke-width: 1.5; }
.gk-cuff { fill: #3a3935; stroke: var(--line-strong); stroke-width: 1.5; }
.gk-vendor { fill: var(--muted); font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gk-palm, .gk-finger, .gk-thumb { fill: #b9b2a5; stroke: #8f887c; stroke-width: 1.5; }
.gk-finger { transform-box: fill-box; transform-origin: 0 50%; }
.gk-thumb { transform-box: fill-box; transform-origin: 0 50%; }
.gk-hand-in { transform: translateX(-320px); }
.gk-ring-set { transform-box: view-box; transform-origin: 236px 68px; }
.gk-huh { fill: var(--muted); font-size: 24px; font-weight: 700; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.gk-still { fill: var(--turquoise); font-size: 16px; font-weight: 600; opacity: 0; }

/* Timeline (8 seconds, replayed every 10 while in view): reach, close on nothing, tug, withdraw, glint. */
.gk-svg.play .gk-hand-in { animation: gk-reach 8s var(--ease) both; }
.gk-svg.play .gk-finger { animation: gk-close 8s ease both; animation-delay: calc(var(--n) * 0.04s); }
.gk-svg.play .gk-thumb { animation: gk-thumb 8s ease both; }
.gk-svg.play .gk-ring-set { animation: gk-jingle 8s ease both; }
.gk-svg.play .gk-spark { animation: gk-spark 0.8s ease both; animation-delay: calc(5.9s + var(--n) * 0.16s); }
.gk-svg.play .gk-tag path { stroke: var(--turquoise); transition-delay: calc(5.8s + var(--n) * 0.16s); }
.gk-svg.play .gk-blade, .gk-svg.play .gk-bow { animation: gk-flash 0.7s ease both; animation-delay: calc(5.85s + var(--n) * 0.16s); }
.gk-svg.play .gk-huh { animation: gk-huh 8s ease both; }
.gk-svg.play .gk-still { opacity: 1; transition: opacity 0.6s ease 6.8s; }
@keyframes gk-reach {
  0% { transform: translateX(-320px); }
  22%, 30% { transform: translateX(0); }
  36% { transform: translateX(-9px); } 40% { transform: translateX(1px); } 44% { transform: translateX(-11px); } 49%, 56% { transform: translateX(0); }
  72%, 100% { transform: translateX(-330px); }
}
@keyframes gk-close { 0%, 27% { transform: scaleX(1); } 33%, 100% { transform: scaleX(0.3); } }
@keyframes gk-thumb { 0%, 27% { transform: rotate(0); } 33%, 100% { transform: translate(6px, 5px) rotate(16deg) scaleX(0.75); } }
@keyframes gk-jingle { 0%, 35% { transform: rotate(0); } 39% { transform: rotate(1.2deg); } 43% { transform: rotate(-0.9deg); } 47% { transform: rotate(0.5deg); } 51%, 100% { transform: rotate(0); } }
@keyframes gk-huh { 0%, 36% { opacity: 0; transform: translateY(6px) scale(0.6); } 41%, 54% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes gk-flash { 0%, 100% { stroke: var(--turquoise); } 40% { stroke: #ffffff; } }
@keyframes gk-spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 45% { opacity: 1; transform: scale(1.15) rotate(45deg); } 100% { opacity: 0; transform: scale(0) rotate(90deg); } }

/* Finished still (reduced motion): the closed hand short of the ring, the keys lit. */
.gk-svg.done .gk-hand-in { transform: translateX(-12px); }
.gk-svg.done .gk-finger { transform: scaleX(0.3); }
.gk-svg.done .gk-thumb { transform: translate(6px, 5px) rotate(16deg) scaleX(0.75); }
.gk-svg.done .gk-tag path { stroke: var(--turquoise); }
.gk-svg.done .gk-spark { opacity: 0.9; transform: scale(0.8); }
.gk-svg.done .gk-still { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gk-svg *, .gk-svg { animation: none !important; transition: none !important; } }