/* Homepage shortcut to /trending/: a space-bar style keycap. Colours follow the active theme's accent (--acc / --acc2 / --acc-ink). */
.kc-row{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.keycap{--kc-top:var(--acc,#F5B544);--kc-side:color-mix(in srgb,var(--acc2,#e9a52c) 62%,#000);--kc-lift:7px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:min(780px,100%);min-height:clamp(62px,16vw,88px);padding:0 30px;border-radius:18px;
  font:inherit;font-weight:700;font-size:clamp(16px,4.2vw,19px);letter-spacing:.01em;line-height:1.15;text-align:center;
  color:var(--acc-ink,#1c1300);text-decoration:none;-webkit-tap-highlight-color:transparent;user-select:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--kc-top) 72%,#fff) 0%,var(--kc-top) 55%,color-mix(in srgb,var(--kc-top) 88%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(0,0,0,.12),
    0 var(--kc-lift) 0 var(--kc-side),0 calc(var(--kc-lift) + 2px) 3px rgba(0,0,0,.28),0 calc(var(--kc-lift) + 10px) 26px rgba(0,0,0,.38);
  transform:translateY(0);transition:transform .14s cubic-bezier(.3,.7,.4,1),box-shadow .14s cubic-bezier(.3,.7,.4,1),filter .14s}
.keycap:before{content:"";position:absolute;inset:5px 9px 9px;border-radius:13px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 60%);opacity:.7}
.keycap span{position:relative}
.keycap:hover{--kc-lift:9px;transform:translateY(-2px);filter:brightness(1.03)}
.keycap:active,.keycap.is-pressed{--kc-lift:1px;transform:translateY(6px);filter:brightness(.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 3px rgba(0,0,0,.14),0 1px 0 var(--kc-side),0 2px 3px rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.28)}
.keycap:focus-visible{outline:3px solid #fff;outline-offset:6px}
.kc-hint{font-size:13px;color:#d9d3c9;margin:0}
.kc-hint kbd{font:inherit;font-weight:600;padding:1px 7px;border:1px solid rgba(255,255,255,.45);border-bottom-width:2px;border-radius:5px}
@media (hover:none){.kc-hint{display:none}}
@media (max-width:480px){.kc-row{align-items:stretch}.keycap{width:100%;padding:0 18px;border-radius:15px}}
@media (prefers-reduced-motion:reduce){.keycap{transition:none}.keycap:hover{transform:none}.keycap:active,.keycap.is-pressed{transform:translateY(3px)}}
/* v2: big, bold, shiny label in the theme's display font (same as the hero headline). Dark bronze fill keeps contrast on the gold cap; a slow light sweep runs across the letters. */
.keycap .kc-label{font-family:var(--fd,inherit);font-weight:var(--hw,800);text-transform:var(--hcase,none);font-size:clamp(14px,3.85vw,28px);letter-spacing:.02em;line-height:1.1;white-space:nowrap;
  background:linear-gradient(100deg,#2b1900 0%,#4a2e04 38%,#a86f12 46%,#ffe7a3 50%,#a86f12 54%,#4a2e04 62%,#2b1900 100%);background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#2b1900;
  filter:drop-shadow(0 1px 0 rgba(255,246,214,.6)) drop-shadow(0 -1px 0 rgba(90,55,0,.25));animation:kc-shine 5s ease-in-out infinite}
@keyframes kc-shine{0%,30%{background-position:100% 0}75%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.keycap .kc-label{animation:none;background-position:50% 100%;background-image:linear-gradient(180deg,#3a2302,#2b1900)}}
@media (forced-colors:active){.keycap .kc-label{-webkit-text-fill-color:currentColor;background:none}}/* Classic uses Syne, a very wide uppercase face: smaller size and no extra tracking so the label stays on one line from 360px up. */
html[data-theme=classic] .keycap .kc-label{font-size:clamp(12px,3.35vw,26px);letter-spacing:0}
@media (max-width:480px){.keycap{padding:0 14px}}
html:not([data-theme=classic]) .keycap{width:min(600px,100%)}html:not([data-theme=classic]) .keycap .kc-label{font-size:clamp(16px,5.2vw,28px)}