/* TypingKeyboard — styles from the user's component <style> block, VERBATIM.
   accentColor defaults: #8b5cf6 · secondaryAccent: #a855f7 (component defaults).
   Scoped under #services (additive isolation rule) — selector prefix only. */

#services .tk-container * { transform-style: preserve-3d; }
#services .tk-container {
  width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  font-family: sans-serif; font-weight: bolder;
  color: rgba(255,255,251,0.7);
  text-transform: uppercase; letter-spacing: 2px;
}
#services .tk-main {
  width: 800px; height: 600px;
  position: relative; cursor: pointer;
  transform: scale(0.8);
  transform-origin: center center;
}
#services .tk-flex { display: flex; justify-content: center; align-items: center; }
#services .tk-face { position: absolute; }

/* Keyboard body */
#services .tk-keyboard {
  width: 500px; height: 160px;
  /* EDIT (user round 2): mirrored orientation — screen extends RIGHT.
     The component's useEffect sets this transform inline (rotateZ(-35deg));
     CSS !important is the only non-invasive way to flip the viewing angle
     while the component file stays untouched. Same isometric depth. */
  transform: perspective(10000px) rotateX(50deg) rotateZ(35deg) !important;
}
#services .tk-keyboard__front { width: 500px; height: 25px; transform: rotateX(-90deg) translateZ(80px); background-color: #9C9C9C; }
#services .tk-keyboard__back  { width: 500px; height: 25px; transform: rotateX(90deg) translateZ(80px); background-color: #FFFFFB; }
#services .tk-keyboard__top   {
  display: flex; flex-direction: column; justify-content: space-around;
  width: 500px; height: 160px;
  transform: rotateY(0deg) translateZ(12.5px);
  background-image: linear-gradient(to bottom, color-mix(in srgb, #8b5cf6 40%, white), color-mix(in srgb, #1a1919 80%, white));
}
#services .tk-keyboard__bottom {
  width: 500px; height: 160px;
  transform: rotateY(180deg) translateZ(12.5px);
  background-color: #EAE7E5;
}
#services .tk-keyboard__right { width: 25px; height: 160px; transform: rotateY(90deg) translateZ(250px); background-color: #FFFFFB; }
#services .tk-keyboard__left  { width: 25px; height: 160px; transform: rotateY(90deg) translateZ(-250px); background-color: #EAE7E5; }

/* Screen */
#services .tk-screen {
  width: 303px; height: 240px;
  transform: translateZ(100px) translateY(-200px) translateZ(50px) rotateX(270deg);
  background-color: #8b5cf6;
  border-radius: 10px; padding: 16px;
  font-size: 14px; line-height: 1.5;
  word-wrap: break-word; white-space: pre-wrap; overflow: hidden;
  text-transform: none; letter-spacing: 1px; color: #fff;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  box-shadow:
    0 0 5px color-mix(in srgb, #8b5cf6 80%, transparent),
    0 0 10px color-mix(in srgb, #8b5cf6 70%, transparent),
    0 0 15px color-mix(in srgb, #8b5cf6 60%, transparent),
    0 0 20px color-mix(in srgb, #8b5cf6 50%, transparent),
    0 0 40px color-mix(in srgb, #8b5cf6 40%, transparent),
    0 0 60px color-mix(in srgb, #8b5cf6 30%, transparent);
  animation: tk-screen-flicker 1s ease-in alternate infinite;
}
@keyframes tk-screen-flicker {
  0%, 90%, 96% { background-color: #8b5cf6; }
  93%, 100%    { background-color: color-mix(in srgb, #8b5cf6 80%, black); }
}

/* Keys container */
#services .tk-keys {
  display: flex; justify-content: space-between;
  width: 100%;
  transform: translateZ(4px);
  padding: 0 2px;
}

/* Individual key — depth is 8px */
#services .tk-key { width: 30px; height: 27px; transition: .05s ease; }
#services .tk-key--w2 { width: 60px; }
#services .tk-key--w3 { width: 90px; }
#services .tk-key--w6 { width: 195px; }

#services .tk-key__front { width: 30px; height: 8px; transform: rotateX(-90deg) translateZ(13.5px); background-color: #838383; }
#services .tk-key__front--w2 { width: 60px; }
#services .tk-key__front--w3 { width: 90px; }
#services .tk-key__front--w6 { width: 195px; }

#services .tk-key__back { width: 30px; height: 8px; transform: rotateX(90deg) translateZ(13.5px); background-color: #FFFFFB; }
#services .tk-key__back--w2 { width: 60px; }
#services .tk-key__back--w3 { width: 90px; }
#services .tk-key__back--w6 { width: 195px; }

#services .tk-key__top {
  width: 30px; height: 27px;
  transform: rotateY(0deg) translateZ(4px);
  background-color: #FFFFFB;
  background-image: linear-gradient(to bottom, color-mix(in srgb, #8b5cf6 30%, white), #FFFFFB);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.12), 0 -1px 2px rgba(0,0,0,0.08);
}
#services .tk-key__top--w2 { width: 60px; }
#services .tk-key__top--w3 { width: 90px; }
#services .tk-key__top--w6 { width: 195px; }

#services .tk-key__bottom { width: 30px; height: 27px; transform: rotateY(180deg) translateZ(4px); background-color: #838383; }
#services .tk-key__bottom--w2 { width: 60px; }
#services .tk-key__bottom--w3 { width: 90px; }
#services .tk-key__bottom--w6 { width: 195px; }

#services .tk-key__right { width: 8px; height: 27px; transform: rotateY(90deg) translateZ(15px); background-color: #838383; }
#services .tk-key__right--w2 { transform: rotateY(90deg) translateZ(30px); }
#services .tk-key__right--w3 { transform: rotateY(90deg) translateZ(45px); }
#services .tk-key__right--w6 { transform: rotateY(90deg) translateZ(97.5px); }

#services .tk-key__left {
  width: 8px; height: 27px;
  transform: rotateY(90deg) translateZ(-15px);
  background-image: linear-gradient(to bottom, #c4c4c4, #b8b8b8);
}
#services .tk-key__left--w2 { transform: rotateY(90deg) translateZ(-30px); }
#services .tk-key__left--w3 { transform: rotateY(90deg) translateZ(-45px); }
#services .tk-key__left--w6 { transform: rotateY(90deg) translateZ(-97.5px); }

/* Accent colors */
#services .tk-face--b1 { background: #8b5cf6; }
#services .tk-face--b2 { background-image: linear-gradient(to bottom, color-mix(in srgb, #8b5cf6 80%, black), #8b5cf6); }
#services .tk-face--b3 { background-color: color-mix(in srgb, #8b5cf6 60%, black); }

#services .tk-face--o1 { background: #a855f7; }
#services .tk-face--o2 { background-image: linear-gradient(to bottom, color-mix(in srgb, #a855f7 80%, black), #a855f7); }
#services .tk-face--o3 { background-color: color-mix(in srgb, #a855f7 60%, black); }

/* Pressed state */
#services .tk-key--down {
  display: flex; justify-content: center; align-items: center;
  transform: translateZ(-5px);
  transition: .05s ease;
}
#services .tk-key--down > .tk-key__top {
  background: color-mix(in srgb, #a855f7 80%, white) !important;
}

/* typing screen auto-follow: inner content layer scrolls up inside the fixed screen */
.tk-screen__content {
  display: block;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}