.nav { height: 108px; }
.suk-keylogo { --key: 57px; display: block; flex: none; }
.suk-keylogo__keys { display: flex; align-items: center; gap: calc(var(--key) * .18); }
.suk-key {
  position: relative;
  display: block;
  width: var(--key);
  height: var(--key);
  flex: none;
  border-radius: calc(var(--key) * .22);
  background: linear-gradient(145deg, #fff, #e3e5df);
  box-shadow: 4px 5px 10px #cfd0ca, -4px -4px 9px #fff, inset 0 -3px 0 #c9cdc3, inset 0 1px 0 #fff;
  transform-origin: 50% 85%;
  transition: transform .17s ease, box-shadow .17s ease;
  touch-action: manipulation;
}
.suk-key__face {
  position: absolute;
  inset: 5px 6px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--key) * .15);
  background: linear-gradient(145deg, #ebeee7, #fcfcfa);
  box-shadow: inset 1px 1px 3px #9da5965e, inset -1px -1px 3px #fff;
}
.suk-key svg { display: block; width: 70%; height: 70%; fill: #3a4541; }
.suk-key--s { background: linear-gradient(145deg, #239d7b, #0a4a3b); box-shadow: 4px 5px 10px #cfd0ca, -4px -4px 9px #fff, inset 0 -3px 0 #073f31, inset 0 1px 0 #72c9ad; }
.suk-key--s .suk-key__face { background: linear-gradient(145deg, #107458, #259f7d); box-shadow: inset 1px 1px 3px #00372970, inset -1px -1px 3px #6bccab60; }
.suk-key--s svg { fill: #f0faf5; }
.suk-key--labs { width: calc(var(--key) * 1.8); }
.suk-key--labs svg { width: 68%; height: auto; }
.logo-motion { display: grid; place-items: center; width: 32px; height: 44px; flex: none; padding: 0; border: 0; background: transparent; color: #626760; cursor: pointer; }
.logo-motion[hidden] { display: none; }
.logo-motion svg { width: 15px; height: 15px; }
.logo-motion:hover { color: var(--suk-spruce); }
.logo-motion .motion-play { display: none; }
.logo-motion[data-paused="true"] .motion-play { display: block; }
.logo-motion[data-paused="true"] .motion-pause { display: none; }
.suk-key.is-down { transform: translateY(3px); box-shadow: 1px 2px 4px #bec4b8, -1px -1px 3px #fff, inset 0 -1px 0 #abb5a3; }
.suk-key--s.is-down { box-shadow: 1px 2px 4px #bec4b8, -1px -1px 3px #fff, inset 0 -1px 0 #073f31; }
.suk-key.is-pulsing { animation: suk-key-press .54s cubic-bezier(.22,.65,.3,1); }
@keyframes suk-key-press {
  0%, 100% { transform: translateY(0); }
  28%, 48% { transform: translateY(4px); box-shadow: 1px 1px 3px #cfd0ca, -1px -1px 3px #fff, inset 0 -1px 0 #00000018; }
  75% { transform: translateY(-1px); }
}
@media(max-width: 1000px) { .suk-keylogo { --key: 48px; } .nav-links { gap: 23px; } }
@media(max-width: 700px) { .nav { height: 86px; } .suk-keylogo { --key: 38px; } .suk-key__face { inset: 4px 4px 7px; } .nav-links { gap: 8px; } }
@media(max-width: 350px) { .suk-keylogo { --key: 34px; } .nav-contact { gap: 0; min-width: 24px; min-height: 44px; justify-content: center; border: 0; } .nav-contact span { display: none; } }
@media(prefers-reduced-motion: reduce) { .suk-key { transition: none!important; } .suk-key.is-pulsing { animation: none!important; } .suk-key.is-down { transform: none!important; } }