/* ==========================================================================
   rizkybayuu.github.io - Overview Stylesheet
   Fonts: Atkinson Hyperlegible (UI) & JetBrains Mono (Technical/Title)
   ========================================================================== */

:root {
  --font-ui: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-text-main: #f5f5f7;
  --color-text-dim: rgba(245, 245, 247, 0.72);
  --color-text-sub: rgba(245, 245, 247, 0.55);
  --mx: 50%;
  --my: 50%;

  /* Linear, unconstrained rem typography scale - strictly zero clamp, zero threshold */
  --scale-title: 3.85rem;
  --scale-welcome: calc(var(--scale-title) * 0.45);
  --scale-sub: calc(var(--scale-title) * 0.28);
  --scale-gap: calc(var(--scale-title) * 0.12);
  --sub-motion-distance: calc(var(--scale-sub) * 1.6);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(255, 111, 94, 0.4);
  color: #ffffff;
}

button,
.nav-link,
.nav-back-btn,
.constellation-node,
.constellation-svg {
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
  color: var(--color-text-main);
  font-family: var(--font-ui);
  touch-action: none;
}

/* --- Background Layers --- */
#bg-base {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 0;
}

#bg-sunset {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.8s cubic-bezier(0.25, 1, 0.5, 1);
  background:
    radial-gradient(ellipse 140% 100% at calc(100% - var(--mx) * 0.45) calc(100% - var(--my) * 0.35), rgba(80, 25, 100, 0.2) 0%, rgba(20, 8, 40, 0.1) 50%, transparent 75%),
    linear-gradient(180deg,
      #040308 0%,
      #0a0614 25%,
      #16081a 48%,
      #2a0b1c 68%,
      #45141a 84%,
      #6b2518 96%,
      #8c3a22 100%
    );
}

#bg-sunset.active {
  opacity: 1;
  animation: skyPaletteShift 32s ease-in-out infinite alternate;
}

/* Meteor Layer - Glowing Shooting Stars Effect */
#bg-meteors {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

#bg-meteors.active {
  opacity: 1;
}

/* Twinkling Starfield - low opacity, random phase twinkle */
#bg-starfield {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in;
}

#bg-starfield.active {
  opacity: 1;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: starTwinkle var(--star-dur, 3s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
  transition: filter 0.3s ease;
}

@keyframes starTwinkle {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: var(--star-peak, 0.3);
  }
}

.meteor {
  position: absolute;
  top: -160px;
  width: 2px;
  height: 90px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 230, 200, 0) 0%, rgba(255, 230, 200, 0.55) 45%, #ffffff 100%);
  filter: drop-shadow(0 0 8px rgba(255, 215, 175, 0.95));
  pointer-events: none;
  transform: rotate(45deg);
  animation: meteorFall 4s linear forwards;
}

/* Dynamic Sunset, Purple, and Dusk Blue Palette with Natural Lightness Shifts (Cerah ke Sedikit Gelap) */
@keyframes skyPaletteShift {
  0% {
    filter: hue-rotate(0deg) brightness(1.08); /* Sunset Amber - Cerah Hangat */
  }
  28% {
    filter: hue-rotate(-30deg) brightness(0.96); /* Twilight Coral & Magenta */
  }
  55% {
    filter: hue-rotate(-70deg) brightness(0.86); /* Deep Amethyst Purple - Sedikit lebih gelap/redup */
  }
  80% {
    filter: hue-rotate(-100deg) brightness(0.93); /* Dusk Twilight Blue - Transisi kembali cerah */
  }
  100% {
    filter: hue-rotate(0deg) brightness(1.08); /* Kembali ke Cerah Sunset */
  }
}

/* --- Centered App Viewport --- */
#app {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

/* Navigation - Fixed top, minimal, transparent */
.site-nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: auto;
  padding: 0.9rem 2rem;
}

.nav-list {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
  opacity: 0.7;
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-main);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-link:hover {
  color: var(--color-text-main);
  opacity: 1;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link.active {
  color: var(--color-text-main);
  opacity: 1;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 255, 255, 0.45);
}

.nav-link.active::after {
  transform: scaleX(1);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 14px rgba(255, 255, 255, 0.5);
}

/* Back button in nav - centered when active */
.nav-back-btn {
  display: none;
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
  opacity: 0.7;
  padding: 0;
  white-space: nowrap;
}

.nav-back-btn:hover {
  color: var(--color-text-main);
  opacity: 1;
}

/* Mode swap: hide 4 links, show back button centered */
.site-nav.nav-back-mode {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-nav.nav-back-mode .nav-list {
  display: none;
}

.site-nav.nav-back-mode .nav-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}

/* Responsive & Touch Treatment for Mobile / Android */
@media (max-width: 600px) {
  .site-nav {
    padding: 0.75rem 0.5rem;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .nav-list {
    gap: clamp(0.75rem, 3.5vw, 1.25rem);
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .nav-link {
    font-size: clamp(0.82rem, 2.5vw, 0.92rem);
    letter-spacing: 0.05em;
    padding: 0.35rem 0.2rem;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-back-btn {
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.5rem;
    margin: 0 auto;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Touch feedback for touchscreen/Android devices */
@media (hover: none) and (pointer: coarse) {
  .nav-link:active,
  .nav-back-btn:active {
    opacity: 1;
    transform: scale(0.96);
  }
}

/* --- View System --- */
.view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.4s cubic-bezier(0,0,0.2,1), transform 0.4s cubic-bezier(0,0,0.2,1), visibility 0.4s;
  pointer-events: none;
  box-sizing: border-box;
}

.view.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 10;
}

.view.leaving {
  display: flex;
  opacity: 0;
  visibility: visible;
  transform: translateY(-28px);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.4,0,1,1), transform 0.32s cubic-bezier(0.4,0,1,1);
}



#hero-view {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Content Card */
.content-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 60rem;
  padding: 0 1.5rem;
  gap: var(--scale-gap); /* Proportional lockup gap - scales purely with rem */
}

/* Fixed text slots to prevent any vertical or horizontal layout shifts */
.text-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  position: relative;
}

.line-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Type Caret Indicator (Sleek straight line bar, perfectly centered, blinks independently) */
.type-caret {
  display: inline-block;
  border-radius: 2px;
  background-color: var(--color-text-main);
  animation: caret-pulse 0.85s steps(2, start) infinite;
}

@keyframes caret-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Slot 1: Welcome */
.slot-welcome {
  height: calc(var(--scale-welcome) * 1.35);
}

#text-welcome {
  font-family: var(--font-ui);
  font-size: var(--scale-welcome);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text-dim);
  white-space: pre;
}

#caret-welcome {
  height: calc(var(--scale-welcome) * 0.95);
  width: calc(var(--scale-welcome) * 0.08);
  margin-left: calc(var(--scale-welcome) * 0.2);
}

/* Slot 2: Main Title (rizkybayuu.github.io) */
.slot-title {
  height: calc(var(--scale-title) * 1.25);
}

#text-title {
  font-family: var(--font-mono);
  font-size: var(--scale-title);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-main);
  white-space: pre;
  display: inline-block;
}

#caret-title {
  height: calc(var(--scale-title) * 0.92);
  width: calc(var(--scale-title) * 0.06);
  margin-left: calc(var(--scale-title) * 0.12);
}

/* Slot 3: Subtitle (animates down-to-up into center, and center-to-up when leaving, uncropped) */
.slot-sub {
  height: calc(var(--scale-sub) * 1.45);
  overflow: visible; /* no clipping so animation glides freely without cropping */
}

#text-sub {
  font-family: var(--font-ui);
  font-size: var(--scale-sub);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-sub);
  white-space: pre;
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--sub-motion-distance));
}

#text-sub.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out; /* Cepat/tajam masuk, perlahan berhenti */
}

#text-sub.leaving {
  opacity: 0;
  transform: translateY(calc(-1 * var(--sub-motion-distance)));
  transition: opacity 0.42s ease-in, transform 0.42s ease-in; /* Perlahan di awal, tajam menghilang */
}

/* Responsive Hero Typography for Mobile / Android */
@media (max-width: 768px) {
  :root {
    --scale-title: clamp(1.55rem, 6.8vw, 2.75rem);
    --scale-welcome: calc(var(--scale-title) * 0.48);
    --scale-sub: calc(var(--scale-title) * 0.35);
    --scale-gap: calc(var(--scale-title) * 0.2);
    --sub-motion-distance: calc(var(--scale-sub) * 1.6);
  }

  .content-card {
    padding: 0 1rem;
  }
}

/* --- Click Ripple Interactions --- */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-wave 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.click-ripple.left {
  background: radial-gradient(circle, rgba(255, 185, 95, 0.45) 0%, rgba(230, 90, 60, 0.2) 40%, transparent 75%);
  border: 1px solid rgba(255, 200, 130, 0.35);
}

.click-ripple.right {
  background: radial-gradient(circle, rgba(185, 130, 255, 0.45) 0%, rgba(100, 70, 220, 0.2) 40%, transparent 75%);
  border: 1px solid rgba(200, 160, 255, 0.35);
}

@keyframes ripple-wave {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}

@keyframes meteorFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(45deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(-100vh - 420px), calc(100vh + 420px), 0) rotate(45deg);
    opacity: 0;
  }
}

/* --- Work View (Locked Fullscreen, Zero Scroll) --- */
#work-view,
#skills-view,
#connect-view,
#hire-view {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.8rem 2.5rem 1.5rem;
  overflow: hidden;
}

@media (max-width: 600px) {
  #work-view,
  #skills-view,
  #connect-view,
  #hire-view {
    padding: 3rem 0.5rem 1rem 0.5rem;
  }
}

.work-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Work Header */
.work-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.work-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.work-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--color-text-dim);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.work-back-btn:hover {
  color: var(--color-text-main);
  border-color: rgba(255, 140, 70, 0.5);
  background: rgba(255, 140, 70, 0.1);
  transform: translateX(-2px);
}

.work-heading-group {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.work-heading {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-main);
  margin: 0;
  text-transform: uppercase;
}

.work-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #ff9d66;
  opacity: 0.85;
}

/* ─── Constellation Map ────────────────────────────────────────── */
.constellation-map {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.02) 0%, rgba(10, 5, 18, 0.45) 70%, transparent 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.55);
}

.constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  will-change: opacity;
  transform: translateZ(0);
}

.constellation-line {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
  transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
}

.constellation-line.active {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2;
}

/* Constellation Nodes - GPU accelerated & contained */
.constellation-node {
  position: absolute;
  transform: translate(-50%, -50%) translateZ(0);
  cursor: pointer;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  contain: layout style;
  transition: opacity 0.3s ease,
              left 0.5s cubic-bezier(0.22, 1, 0.3, 1),
              top 0.5s cubic-bezier(0.22, 1, 0.3, 1);
}

.node-ring {
  width: var(--node-base, 3.1rem);
  height: var(--node-base, 3.1rem);
  border-radius: 50%;
  padding: 2px;
  background: rgba(14, 8, 22, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), inset 0 0 6px rgba(255, 255, 255, 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: width, height, border-radius;
  transform: translateZ(0);
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-radius 0.35s ease,
              border-color 0.25s ease;
}

.node-thumb {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  filter: brightness(0.95) contrast(1.05);
  transition: filter 0.25s ease, border-radius 0.35s ease;
}

/* Hover focus: the circle itself becomes a rounded rectangle, in place */
.constellation-node.is-hovered {
  z-index: 10;
}

.constellation-node.is-closing {
  pointer-events: none;
}

.constellation-node.is-hovered .node-ring {
  border-radius: 0.9rem;
  border-color: #ffffff;
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.9),
    0 0 32px rgba(255, 255, 255, 0.4),
    inset 0 0 6px rgba(255, 255, 255, 0.35);
}

.constellation-node.is-hovered .node-thumb {
  filter: brightness(1.08) contrast(1.08);
}

/* While one node is focused, the rest of the constellation dims */
.constellation-map.map-hovering .constellation-node:not(.is-hovered) {
  opacity: 0.22;
}

.constellation-map.map-hovering .constellation-svg {
  opacity: 0.2;
}

/* Floating caption — bare text, no wrapper. Position is set inline by
   script.js layout() (left/right/top/bottom/text-align/max-width); CSS only
   owns the base geometry and the hidden → shown fade. */
.node-info {
  position: absolute;
  width: max-content;
  max-width: 25rem;
  text-align: left;
  color: #ffffff;
  font-family: var(--font-ui);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease 0.05s;
}

.node-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.node-desc {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  opacity: 0.88;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* Reveal on hover (CSS hover) and on the open box (.is-hovered). */
.constellation-node:hover .node-info,
.constellation-node.is-hovered .node-info {
  opacity: 1;
}

.constellation-node.is-hovered .node-info {
  pointer-events: auto;
  cursor: pointer;
}

/* =============================================================================
   Category detail submenu — opened by clicking the star under the pointer.
   The constellation fades to nothing first, then this panel enters; on the way
   back the panel leaves first and only then does the constellation return.
   Panel geometry mirrors the map area (position: absolute; inset: 0), so the
   layout underneath never reflows.
   ========================================================================== */
#work-detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

body.detail-open #work-detail {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

/* Return trip: the map waits for the panel to get out of the way. */
#work-view .constellation-map {
  transition: opacity 0.4s ease 0.32s, transform 0.5s ease 0.32s;
}

body.detail-open #work-view .constellation-map {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
  transition-delay: 0s, 0s;
}

.wd-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wd-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 157, 102, 0.45);
  background: rgba(255, 157, 102, 0.08);
  color: #ffd9c2;
  font: 600 0.95rem/1 var(--font-ui, sans-serif);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.wd-back:hover {
  background: rgba(255, 157, 102, 0.2);
  border-color: rgba(255, 157, 102, 0.85);
  transform: translateX(-2px);
}

.wd-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.wd-kicker {
  margin: 0 0 0.45rem;
  font: 700 0.78rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.wd-title {
  margin: 0;
  font-size: 2.35rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.wd-blurb {
  margin: 0.45rem 0 0;
  max-width: 48rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

.wd-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  text-align: right;
}

.wd-count {
  font: 600 0.82rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.wd-hint {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.38);
}

/* Category switcher — jump between stars without going back */
.wd-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wd-chip {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  font: 600 0.82rem/1 var(--font-ui, sans-serif);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.wd-chip:hover {
  color: #fff;
  border-color: var(--accent);
}

.wd-chip[aria-current="true"] {
  color: #12101a;
  background: var(--accent);
  border-color: var(--accent);
}

.wd-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.9rem 0.9rem 2rem 0;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(255, 157, 102, 0.45) transparent;
}

.wd-body::-webkit-scrollbar {
  width: 8px;
}

.wd-body::-webkit-scrollbar-thumb {
  background: rgba(255, 157, 102, 0.4);
  border-radius: 99px;
}

/* --- Per-category arrangements ------------------------------------------- */
.wd-body.layout-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: auto;
}

.wd-body.layout-rail .wd-card {
  flex: 0 0 clamp(168px, 18vw, 224px);
}

.wd-body.layout-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  align-content: start;
}

.wd-body.layout-grid.is-compact {
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.wd-body.layout-tech {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  align-content: start;
  align-items: start;
}

.wd-body.layout-cinema {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  align-items: start;
}

.wd-body.layout-cinema .wd-card:not(:first-child) {
  grid-column: 2;
}

.wd-body.layout-audio {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-content: start;
  align-items: start;
}

/* --- Cards --------------------------------------------------------------- */
.wd-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(10, 5, 18, 0.42));
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.wd-card.playable {
  cursor: pointer;
}

.wd-card.playable:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.wd-card.open {
  border-color: var(--accent);
}

.wd-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(12, 6, 20, 0.6));
}

.shape-vertical .wd-media { aspect-ratio: 9 / 16; }
.shape-portrait .wd-media { aspect-ratio: 4 / 5; }
.shape-square .wd-media { aspect-ratio: 1 / 1; }
.shape-poster .wd-media { aspect-ratio: 2 / 3; }
.shape-wide .wd-media { aspect-ratio: 16 / 9; }

.wd-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd-card.open .wd-thumb,
.wd-card.open .wd-plate {
  visibility: hidden;
}

/* Plate art stands in for the pieces whose source platform cannot be
   thumbnailed (Instagram / TikTok): the category's own Drive thumbnail, dimmed,
   plus the platform initials — never a broken image icon. */
.wd-plate {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background-image: var(--plate-img, none);
  background-size: cover;
  background-position: center;
}

.wd-card.no-thumb .wd-plate {
  display: flex;
}

.wd-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 4, 14, 0.55), rgba(8, 4, 14, 0.92));
}

.wd-glyph {
  position: relative;
  font: 700 1.5rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 0 22px rgba(0, 0, 0, 0.8);
}

.wd-num {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  font: 700 0.66rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.wd-embed {
  position: absolute;
  inset: 0;
  display: none;
  background: #06030b;
}

.wd-card.open .wd-embed {
  display: block;
}

.wd-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.wd-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem 0.9rem;
}

.wd-p {
  align-self: flex-start;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font: 700 0.6rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wd-p[data-p="instagram"] { border-color: rgba(224, 140, 255, 0.5); color: #e8c0ff; }
.wd-p[data-p="tiktok"]    { border-color: rgba(127, 209, 255, 0.45); color: #c4e8ff; }
.wd-p[data-p="drive"]     { border-color: rgba(255, 196, 107, 0.45); color: #ffdfb0; }
.wd-p[data-p="soundcloud"]{ border-color: rgba(255, 143, 177, 0.5); color: #ffc6d8; }
.wd-p[data-p="github"]    { border-color: rgba(255, 255, 255, 0.32); color: #ffffff; }
.wd-p[data-p="doc"]       { border-color: rgba(154, 166, 255, 0.5); color: #d2d8ff; }
.wd-p[data-p="blendkit"]  { border-color: rgba(192, 123, 255, 0.5); color: #e0c4ff; }
.wd-p[data-p="web"]       { border-color: rgba(255, 157, 102, 0.5); color: #ffd6bb; }

.wd-t {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.wd-d {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.wd-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}

.wd-act {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.48rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
  font: 600 0.85rem/1 var(--font-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wd-act:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  color: #fff;
}

.wd-act.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #12101a;
}

.wd-act.primary:hover {
  color: #12101a;
  box-shadow: 0 0 18px var(--accent);
}

.wd-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  padding: 0 0.3rem 0.3rem;
}

.wd-strip img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.78;
  transition: opacity 0.25s ease;
}

.wd-strip a:hover img {
  opacity: 1;
}

/* Published-asset list (Procedural Modeling) */
.wd-assets {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.wd-asset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.wd-asset:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}

.wd-asset .n {
  font: 700 0.66rem/1 ui-monospace, SFMono-Regular, monospace;
  color: var(--accent);
}

@media (max-width: 900px) {
  .wd-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .wd-title {
    font-size: 1.55rem;
  }

  .wd-body.layout-cinema {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-body.layout-cinema .wd-card:not(:first-child) {
    grid-column: 1;
  }
}

/* Show nav bar with fade-in */
.nav-bar-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease-in 0.2s;
}

/* ==========================================================================
   Instagram Gallery — "3D Motion Graphics" detail view
   The five embeds and nothing else: no panel, no kicker, no titles, no chips.
   1 large centre embed, 2 stacked on each side. Everything is vh-clamped so
   the whole composition — sides 84vh, centre 86vh — always fits the screen:
   no page scroll, no scrolling inside any embed.
   ========================================================================== */
#work-detail.ig-clean {
  padding: 0;
}

/* Hide all head elements (including back button in corner) */
#work-detail.ig-clean .wd-head,
#work-detail .wd-head {
  display: none !important;
}

#work-detail.ig-clean .wd-titles,
#work-detail .wd-titles {
  display: none !important;
}

.wd-body.layout-instagram-gallery {
  --ig-gap: clamp(14px, 2.2vh, 26px);
  /* side column: two embeds + gap must stay inside 84vh; ratio 4:5 */
  --ig-side-w: min(226px, calc((84vh - 124px - var(--ig-gap)) * 4 / 20));
  /* centre embed stays clear of top/bottom edges: 86vh budget; ratio 4:5 */
  --ig-center-w: min(432px, calc((86vh - 64px) * 4 / 5));
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: var(--ig-gap);
  row-gap: var(--ig-gap);
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  padding: 0;
  scrollbar-gutter: auto;
}

.wd-body.layout-instagram-gallery .wd-item {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* 2 left • 1 centre (spans both rows) • 2 right */
.wd-body.layout-instagram-gallery .wd-item:nth-child(1) { grid-area: 1 / 1; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(2) { grid-area: 2 / 1; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(3) { grid-area: 1 / 2 / span 2 / span 1; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(4) { grid-area: 1 / 3; }
.wd-body.layout-instagram-gallery .wd-item:nth-child(5) { grid-area: 2 / 3; }

.wd-body.layout-instagram-gallery .wd-embed-wrap {
  border: none;
  border-radius: 14px;
  box-shadow: none;
  background: #000;
  min-height: 0;
  overflow: hidden; /* Crop Instagram chrome */
  position: relative;
}

.wd-body.layout-instagram-gallery .wd-embed-frame {
  position: absolute;
  top: -58px; /* Hide Instagram header (logo/username) */
  left: 0;
  width: 100%;
  height: calc(100% + 128px); /* Extend to also hide footer (like/comment/share) */
  border: none;
}

/* 9:16 media + the embed's top strip (~62px) = exact fit, zero scroll */
.wd-body.layout-instagram-gallery .wd-item:not(:nth-child(3)) .wd-embed-wrap {
  width: var(--ig-side-w);
  height: calc(var(--ig-side-w) * 16 / 9); /* Pure video ratio */
}

.wd-body.layout-instagram-gallery .wd-item:nth-child(3) .wd-embed-wrap {
  width: var(--ig-center-w);
  height: calc(var(--ig-center-w) * 16 / 9); /* Pure video ratio */
}

/* Nothing lifts or glows here; the embeds just sit there. */
.wd-body.layout-instagram-gallery .wd-item:hover .wd-embed-wrap,
.wd-body.layout-instagram-gallery .wd-item.wd-naked:hover .wd-embed-wrap {
  transform: none;
  border: none;
  box-shadow: none;
}

/* ==========================================================================
   Instagram Gallery · 16:9 — "VFX & Dynamics" detail view
   Same treatment as the 4:5 gallery above: bare embeds, no panel, no Instagram
   chrome, title + description under each, no page scroll, no scrolling inside
   any embed. Only two things differ:
     · left · centre · right — one landscape window per column (3 items),
       centre is 1.55x a side, the row is vertically centred in the viewport;
     · the window is a hard 16:9 crop.
   Widths come from fr tracks, so the three columns always fill the container
   exactly (never overflow) and the 16:9 height follows from the width.
   ========================================================================== */
.wd-body.layout-instagram-gallery-wide {
  --ig-budget: calc(100vh - 90px);
  --ig-info-h: 78px; /* title + description block reserve */
  --ig-gap: clamp(20px, 3.4vh, 48px);
  /* Instagram's own embed chrome, measured from the live iframe DOM (54/154px)
     and kept in rem so it tracks the page's rem scale. */
  --ig-head: 3.375rem;  /* 54px  — logo / username bar */
  --ig-foot: 9.625rem;  /* 154px — caption, action bar, comment box */
  --ig-crop-b: 0.5rem;  /* 8px — rounding guard only, NOT a design crop */
  display: grid;
  /* left · centre · right. centre = 1.55x side (the --ig-ratio of the 4:5
     gallery); fr units must be literal numbers, so the knob lives here. */
  grid-template-columns: 1fr 1.55fr 1fr;
  column-gap: var(--ig-gap);
  row-gap: var(--ig-gap);
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
  scrollbar-gutter: auto;
}

/* stretch to the track so the wraps get a definite width to take 16:9 from */
.wd-body.layout-instagram-gallery-wide .wd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.wd-body.layout-instagram-gallery-wide .wd-embed-wrap {
  width: 100%;
  aspect-ratio: 16 / 9; /* the landscape window itself */
  border: none;
  border-radius: 14px;
  box-shadow: none;
  background: #000;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  position: relative;
}

.wd-body.layout-instagram-gallery-wide .wd-embed-frame {
  position: absolute;
  left: 0;
  width: 100%;
  border: none;
}

/* Instagram source: the emᴃed renders a fixed 4:5 media box (measured, 54px
   header + width*1.25 media + 154px footer) inside a 16:9 window. To show the
   centred band of that media with no chrome:
     overflow to hide above+below the window = (1.25W − 0.5625W) / 2 = 0.34375W
     0.34375W as a % of the window height (0.5625W) = 61.11%
     iframe height must cover the whole document: (1.25W + 208px) / 0.5625W
     = 222.3% + 54px + 154px, so the page inside never scrolls either. */
.wd-body.layout-instagram-gallery-wide .wd-item.p-instagram .wd-embed-frame {
  top: calc(-1 * var(--ig-head) - 61.11%);
  height: calc(222.3% + var(--ig-head) + var(--ig-foot));
}

/* TikTok's player sizes the video itself inside the box it is given, and its
   embed endpoint refuses this network (HTTP 503), so its inner geometry could
   not be measured — it gets the bare 16:9 box and no invented crop. */
.wd-body.layout-instagram-gallery-wide .wd-item.p-tiktok .wd-embed-frame {
  top: 0;
  height: 100%;
}

/* Item descriptions below embed — title + description, same scale as the 4:5
   gallery. */
.wd-body.layout-instagram-gallery-wide .wd-item-info {
  display: block;
  padding: 0;
  margin-top: 0.6rem;
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.wd-body.layout-instagram-gallery-wide .wd-item-info h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 0.25rem 0;
  line-height: 1.25;
}

.wd-body.layout-instagram-gallery-wide .wd-item-info p {
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-text-dim);
  margin: 0;
}

.wd-body.layout-instagram-gallery-wide .wd-item:hover .wd-embed-wrap,
.wd-body.layout-instagram-gallery-wide .wd-item.wd-naked:hover .wd-embed-wrap {
  transform: none;
  border: none;
  box-shadow: none;
}

/* Small screens: three landscape windows side by side would be unreadable, so
   they stack full width and the body scrolls instead of cropping. */
@media (max-width: 900px) {
  .wd-body.layout-instagram-gallery-wide {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow-y: auto;
  }
}


/* ==========================================================================
   BARE FAMILY — one naked treatment for every non-reference detail layout.
   No panel, no "n pieces", no rounded rectangle. Each item's window follows
   its own --aspect (set inline from catalog.js); tall media never hard-crops
   because the viewport scrolls naturally. Captions float bare underneath.
   ========================================================================== */
.wd-body.layout-instagram-gallery-uniform,
.wd-body.layout-mixed-procedural,
.wd-body.layout-audio-bare,
.wd-body.layout-tech-bare,
.wd-body.layout-design-bare,
.wd-body.layout-video-bare {
  --bare-h: clamp(16rem, 44vh, 27rem);      /* media height budget */
  --bare-gap: clamp(1.5rem, 4vh, 3.2rem);
  /* Instagram embed chrome, measured from the live iframe DOM (rem-scaled). */
  --ig-head: 3.375rem;  /* 54px logo/username bar */
  --ig-foot: 9.625rem;  /* 154px caption/actions/comment box */
  --ig-crop-b: 0.5rem;  /* 8px rounding guard, not a design crop */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: var(--bare-gap);
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(1rem, 3vh, 2.4rem) clamp(0.5rem, 1.5vw, 2rem) 2.4rem;
}

.wd-body.layout-instagram-gallery-uniform .wd-item,
.wd-body.layout-mixed-procedural .wd-item,
.wd-body.layout-audio-bare .wd-item,
.wd-body.layout-tech-bare .wd-item,
.wd-body.layout-design-bare .wd-item,
.wd-body.layout-video-bare .wd-item {
  --ia: var(--aspect, 4 / 5);
  width: clamp(var(--min-w, 240px), calc(var(--bare-h) * var(--ia)), min(92vw, 36rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: none;
}

.wd-body.layout-instagram-gallery-uniform .wd-embed-wrap,
.wd-body.layout-mixed-procedural .wd-embed-wrap,
.wd-body.layout-audio-bare .wd-embed-wrap,
.wd-body.layout-tech-bare .wd-embed-wrap,
.wd-body.layout-design-bare .wd-embed-wrap,
.wd-body.layout-video-bare .wd-embed-wrap {
  width: 100%;
  height: auto;                 /* inherited definite height vetoes aspect-ratio */
  aspect-ratio: var(--aspect, 4 / 5);
  border: none;
  border-radius: 14px;
  box-shadow: none;
  background: #000;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  position: relative;
}

.wd-body.layout-instagram-gallery-uniform .wd-embed-frame,
.wd-body.layout-mixed-procedural .wd-embed-frame,
.wd-body.layout-audio-bare .wd-embed-frame,
.wd-body.layout-tech-bare .wd-embed-frame,
.wd-body.layout-design-bare .wd-embed-frame,
.wd-body.layout-video-bare .wd-embed-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Trim Instagram's own chrome (logo bar + action row) so the media sits
   edge-to-edge. Scrolling is left enabled, so a mismatched ratio degrades
   to an internal scrollbar instead of silently cropping content. */
.wd-body.layout-instagram-gallery-uniform .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-mixed-procedural .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-audio-bare .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-tech-bare .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-design-bare .wd-item.p-instagram .wd-embed-frame,
.wd-body.layout-video-bare .wd-item.p-instagram .wd-embed-frame {
  top: calc(-1 * var(--ig-head));
  height: calc(100% + var(--ig-head) + var(--ig-foot) + var(--ig-crop-b));
}

/* Force-fill (opt-in `fill` in catalog.js): Instagram paints the post's media
   at its native ratio and never crops it, so pointing a taller window at a
   shorter media can only ever letterbox it. --ig-fill = media aspect / window
   aspect (0.8 / 0.5625 = 1.4222 for a 4:5 post in a 9:16 window) + a 2% guard;
   the iframe is that much wider than the window and pulled back by half the
   overflow, so the media overflows on BOTH axes and the window shows its
   centred crop. The header trim above still applies, so the media starts flush
   at the window top. scrolling="no" (set in script.js) drops the embed's own
   scrollbar, which would otherwise thin the media by ~15px. */
.wd-body.layout-instagram-gallery-uniform .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-mixed-procedural .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-audio-bare .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-tech-bare .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-design-bare .wd-item.fill-ig .wd-embed-frame,
.wd-body.layout-video-bare .wd-item.fill-ig .wd-embed-frame {
  width: calc(var(--ig-fill, 1.45) * 100%);
  left: calc((1 - var(--ig-fill, 1.45)) * 50%);
}

/* Captions: bigger, floating, centred — no card, no border. */
.wd-body.layout-instagram-gallery-uniform .wd-item-info,
.wd-body.layout-mixed-procedural .wd-item-info,
.wd-body.layout-audio-bare .wd-item-info,
.wd-body.layout-tech-bare .wd-item-info,
.wd-body.layout-design-bare .wd-item-info,
.wd-body.layout-video-bare .wd-item-info {
  display: block;
  padding: 0;
  margin-top: 0.65rem;
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.wd-body.layout-instagram-gallery-uniform .wd-item-info h3,
.wd-body.layout-mixed-procedural .wd-item-info h3,
.wd-body.layout-audio-bare .wd-item-info h3,
.wd-body.layout-tech-bare .wd-item-info h3,
.wd-body.layout-design-bare .wd-item-info h3,
.wd-body.layout-video-bare .wd-item-info h3 {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 0.35rem 0;
  line-height: 1.3;
}

.wd-body.layout-instagram-gallery-uniform .wd-item-info p,
.wd-body.layout-mixed-procedural .wd-item-info p,
.wd-body.layout-audio-bare .wd-item-info p,
.wd-body.layout-tech-bare .wd-item-info p,
.wd-body.layout-design-bare .wd-item-info p,
.wd-body.layout-video-bare .wd-item-info p {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-text-dim);
  margin: 0;
}

/* Text-only items (no embed source): naked centred block, no panel. */
.wd-body.layout-mixed-procedural .wd-item.wd-text-card,
.wd-body.layout-audio-bare .wd-item.wd-text-card,
.wd-body.layout-tech-bare .wd-item.wd-text-card,
.wd-body.layout-design-bare .wd-item.wd-text-card,
.wd-body.layout-video-bare .wd-item.wd-text-card {
  width: min(92vw, 34rem);
  text-align: center;
  padding: 0.5rem 0;
}
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-t,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-t,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-t,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-t,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-t {
  font-size: 1.55rem;
}
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-d,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-d,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-d,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-d,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-d {
  font-size: 1.15rem;
  margin: 0.4rem 0 0.9rem;
}
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-act,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-act,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-act,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-act,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-act {
  font-size: 1.05rem;
}
/* Status badge ("Upcoming" / "This site") on text-only cards. */
.wd-body.layout-mixed-procedural .wd-item.wd-text-card .wd-tag,
.wd-body.layout-audio-bare .wd-item.wd-text-card .wd-tag,
.wd-body.layout-tech-bare .wd-item.wd-text-card .wd-tag,
.wd-body.layout-design-bare .wd-item.wd-text-card .wd-tag,
.wd-body.layout-video-bare .wd-item.wd-text-card .wd-tag {
  display: inline-block;
  margin: 0.3rem 0 0.95rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 157, 102, 0.45);
  background: rgba(255, 157, 102, 0.08);
  color: #ffd6bb;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Local media (no remote embed): plain image window. */
.wd-body.layout-mixed-procedural .wd-local-wrap,
.wd-body.layout-audio-bare .wd-local-wrap,
.wd-body.layout-tech-bare .wd-local-wrap,
.wd-body.layout-design-bare .wd-local-wrap,
.wd-body.layout-video-bare .wd-local-wrap {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.wd-body.layout-mixed-procedural .wd-local-img,
.wd-body.layout-audio-bare .wd-local-img,
.wd-body.layout-tech-bare .wd-local-img,
.wd-body.layout-design-bare .wd-local-img,
.wd-body.layout-video-bare .wd-local-img {
  display: block;
  width: 100%;
  aspect-ratio: var(--aspect, 4 / 5);
  object-fit: cover;
}

.wd-local-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.wd-local-link:hover .wd-local-img {
  opacity: 0.92;
  transform: scale(1.015);
}
.wd-local-img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.wd-item-info .wd-acts {
  justify-content: center;
  margin-top: 0.65rem;
}

/* Published-asset links (BlendKit): naked rows, no boxes. */
.wd-body.layout-mixed-procedural .wd-asset-header {
  margin: 0.6rem auto 1rem;
  width: min(92vw, 56rem);
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
}
.wd-body.layout-mixed-procedural .wd-asset-header strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

.wd-body.layout-mixed-procedural .wd-assets {
  width: min(92vw, 56rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem 1rem;
  margin: 0.2rem auto 0;
}
.wd-body.layout-mixed-procedural .wd-asset {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.25s ease;
}
.wd-body.layout-mixed-procedural .wd-asset:hover {
  background: transparent;
  border: none;
  color: #fff;
}
.wd-body.layout-mixed-procedural .wd-asset .n {
  color: var(--accent, #c07bff);
  font: 700 0.7rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.14em;
}

/* BlendKit blocks iframing, so each published asset shows the real render
   from their public CDN (square preview) and links out to the live viewer. */
.wd-asset-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.wd-asset-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}

.wd-asset-meta > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

/* Nothing lifts or glows in the bare family. */
.wd-body.layout-instagram-gallery-uniform .wd-item:hover .wd-embed-wrap,
.wd-body.layout-mixed-procedural .wd-item:hover .wd-embed-wrap,
.wd-body.layout-audio-bare .wd-item:hover .wd-embed-wrap,
.wd-body.layout-tech-bare .wd-item:hover .wd-embed-wrap,
.wd-body.layout-design-bare .wd-item:hover .wd-embed-wrap,
.wd-body.layout-video-bare .wd-item:hover .wd-embed-wrap {
  transform: none;
  border: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  .wd-body.layout-instagram-gallery-uniform,
  .wd-body.layout-mixed-procedural,
  .wd-body.layout-audio-bare,
  .wd-body.layout-tech-bare,
  .wd-body.layout-design-bare,
  .wd-body.layout-video-bare {
    --bare-h: clamp(13rem, 40vh, 20rem);
    gap: clamp(1.2rem, 3vh, 2rem);
    align-content: start;
  }
}

/* ------------------------------------------------------------------
   TikTok embeds — force the player into the 16:9 window.
   TikTok's /embed/v2/ player ONLY renders a fixed portrait card
   (~323x560) and completely ignores how wide its iframe is. So we
   render the iframe at that exact card size, then zoom it so the card
   fills the window width. The 16:9 window therefore shows the centre
   band of the card (cover crop — the video is cropped top/bottom).
   ------------------------------------------------------------------ */
.wd-item.p-tiktok .wd-embed-wrap {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.wd-item.p-tiktok .wd-embed-wrap .wd-embed-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 325px;
  height: 560px;
  margin-left: -162.5px;
  margin-top: -280px;
  border: 0;
  transform: scale(var(--tt-zoom, 1));
  transform-origin: center center;
}

/* ==========================================================================
   SIDE STRIP + STACKED COLUMN (Code & Systems)
   An item with a `strip` carries `wd-has-side`: the extra embeds sit in a
   column BESIDE the main embed, as tall as it is, so every frame keeps 16:9
   while being roughly twice the size it gets in a row underneath. Items
   sharing `col: 'name'` stack top/bottom inside `.wd-col`, which leaves the
   wide strip item the horizontal room it needs.
   ========================================================================== */
.wd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bare-gap, 2rem);
}

.wd-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
}

.wd-body .wd-item.wd-has-side {
  width: auto;
  max-width: none;
}

.wd-body .wd-item.wd-has-side .wd-embed-wrap {
  flex: none;
  width: calc(var(--bare-h, 22rem) * var(--aspect, 9 / 16));
  height: var(--bare-h, 22rem);
  border-radius: 10px;
  overflow: hidden;
}

.wd-body .wd-item.wd-has-side .wd-strip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: auto;
  height: var(--bare-h, 22rem);
  margin-top: 0;
  gap: 0.5rem;
  padding: 0;
}

.wd-body .wd-item.wd-has-side .wd-strip-cell {
  --side-h: calc((var(--bare-h, 22rem) - 1rem) / 3);
  height: var(--side-h);
  width: calc(var(--side-h) * 16 / 9);
  flex: none;
  aspect-ratio: auto;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(14, 8, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
}

.wd-body .wd-item.wd-has-side .wd-strip-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.wd-body .wd-item.wd-has-side .wd-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.88;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, filter 0.25s ease;
}

.wd-body .wd-item.wd-has-side .wd-strip-link:hover .wd-strip-img {
  opacity: 1;
  transform: scale(1.05);
  filter: brightness(1.12);
}

.wd-body .wd-item.wd-has-side .wd-strip-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.wd-body .wd-item.wd-has-side .wd-item-info {
  width: 100%;
}

@media (max-width: 900px) {
  .wd-body .wd-item.wd-has-side {
    width: 100%;
  }
  .wd-media-row {
    flex-direction: column;
  }
  .wd-body .wd-item.wd-has-side .wd-embed-wrap {
    width: 100%;
  }
  .wd-body .wd-item.wd-has-side .wd-strip {
    flex-direction: row;
    width: 100%;
    height: auto;
  }
  .wd-body .wd-item.wd-has-side .wd-strip-cell {
    height: auto;
    width: auto;
    flex: 1 1 0;
    aspect-ratio: 16 / 9;
  }
}



/* Naked Embeds & Dark Mode Rules */
.wd-item.wd-naked {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.wd-item.wd-naked .wd-embed-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(var(--accent-rgb, 255, 157, 102), 0.12);
}

.wd-embed-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  color-scheme: dark !important;
}

.wd-item-info {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wd-item-info .wd-t {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.wd-item-info .wd-d {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-sub);
}


/* Placeholder display area (Skills / Connect / Hire) */

.work-display-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 1rem 0;
  box-sizing: border-box;
}

.card-category-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ff9d66;
  background: rgba(255, 120, 60, 0.12);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Placeholder Views */
.coming-soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.5rem 2rem;
  background: rgba(14, 8, 22, 0.65);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(220, 95, 55, 0.16);
  border-radius: 12px;
  max-width: 28rem;
  text-align: center;
}

.coming-soon-text {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.5;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  #text-sub {
    transform: none !important;
    opacity: 1 !important;
  }
  .type-caret {
    animation: none !important;
    opacity: 1 !important;
  }
  /* Stars stay visible at their low peak opacity without twinkling */
  .star {
    animation: none !important;
    opacity: var(--star-peak, 0.3) !important;
  }
}

/* Initially hide nav bar until welcome typing completes */
.nav-bar-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

/* Show nav bar with fade-in */
.nav-bar-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease-in 0.2s;
}

/* ============================================================ Skills View */
/* Progress bar design: level + score prominent, visual feedback */

.skills-craft,
.skills-software,
.skills-tools,
.skills-languages {
  width: 100%;
  margin-bottom: 2rem;
}

.skills-craft > h2,
.skills-software > h2,
.skills-tools > h2,
.skills-languages > h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1.2rem 0;
  color: var(--color-text-main);
}

.craft-categories,
.software-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.4rem;
  width: 100%;
}

.craft-category,
.software-category,
.tools-category,
.languages-category {
  padding: 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--card-accent-rgb), 0.15);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(12, 6, 20, 0.6));
  box-sizing: border-box;
  transition: border-color 320ms ease, box-shadow 320ms ease;
}

.craft-category:hover,
.software-category:hover,
.tools-category:hover,
.languages-category:hover {
  border-color: rgba(var(--card-accent-rgb), 0.35);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb), 0.12);
}

.craft-category > h3,
.software-category > h3,
.tools-category > h3,
.languages-category > h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.8rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(var(--card-accent-rgb), 0.2);
  color: var(--color-text-main);
}

.craft-category[data-service="true"] > h3 {
  border-bottom: 1px dashed rgba(var(--card-accent-rgb), 0.2);
}

/* Skill bar: name | level + score + progress track */
.skill-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(var(--card-accent-rgb), 0.1);
}

.skill-bar:last-child {
  border-bottom: none;
}

.skill-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.skill-bar-name {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-main);
  flex: 1;
  line-height: 1.3;
}

.skill-bar-meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  white-space: nowrap;
}

.skill-bar-level {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(var(--card-accent-rgb), 0.1);
  color: rgba(var(--card-accent-rgb), 0.9);
}

.skill-bar-level[data-level="advanced"] {
  background: rgba(255, 100, 100, 0.15);
  color: #ff6464;
}

.skill-bar-level[data-level="intermediate"] {
  background: rgba(255, 180, 0, 0.15);
  color: #ffb400;
}

.skill-bar-level[data-level="beginner"] {
  background: rgba(100, 150, 255, 0.15);
  color: #6496ff;
}

.skill-bar-score {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--card-accent);
  font-variant-numeric: tabular-nums;
}

.skill-bar-wpm {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--card-accent);
  font-weight: 700;
}

/* Progress track + fill */
.skill-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--card-accent-rgb), 0.1);
  overflow: hidden;
  box-sizing: border-box;
}

.skill-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--card-accent-rgb), 0.6), var(--card-accent));
  box-shadow: 0 0 12px rgba(var(--card-accent-rgb), 0.4);
  animation: fillGrow 800ms ease-out;
}

@keyframes fillGrow {
  from {
    width: 0% !important;
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* =============================================================================
   Skills View: Bare & Transparent (Constellation-Style)
   Top-to-Bottom Vertical Touch Typing Meter
   ============================================================================= */

.skills-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

.skills-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem 3.5rem 1rem;
  box-sizing: border-box;
}

.skills-overview-content {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  max-width: 72rem;
  box-sizing: border-box;
}

/* --- Bare Compact Typing Section (Left Info, Right Score, Bottom Horizontal Gauge) --- */
.skills-typing-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.35rem;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.skills-typing-compact:hover,
.skills-typing-compact.is-hovered {
  backdrop-filter: brightness(1.35) blur(10px);
  -webkit-backdrop-filter: brightness(1.35) blur(10px);
  background: rgba(255, 111, 94, 0.04);
  border-color: rgba(255, 111, 94, 0.32);
  box-shadow: 0 0 32px rgba(255, 111, 94, 0.22),
              inset 0 0 20px rgba(255, 255, 255, 0.03);
  transform: translateY(-3px);
}

.skills-typing-compact:active {
  transform: translateY(-1px) scale(0.99);
}

.typing-click-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9d66;
  opacity: 0.65;
  transition: opacity 0.3s ease, color 0.3s ease;
  margin-top: 0.25rem;
  pointer-events: none;
}

.skills-typing-compact:hover .typing-click-hint,
.skills-typing-compact.is-hovered .typing-click-hint {
  opacity: 1;
  color: #ffb188;
}

.typing-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.typing-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.2rem;
  flex-shrink: 0;
}

.typing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff8a7a;
  text-transform: uppercase;
  white-space: nowrap;
}

.typing-title {
  font-family: var(--font-mono);
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.typing-sub {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-dim);
  margin: 0;
  white-space: nowrap;
}

.typing-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.35rem;
  flex-shrink: 0;
}

.typing-score-cluster {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
}

.typing-big-num {
  font-family: var(--font-mono);
  font-size: 3.8rem;
  font-weight: 800;
  color: #ff7e6e;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255, 111, 94, 0.45);
}

.typing-big-unit {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.typing-status-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9d66;
  background: rgba(255, 157, 102, 0.12);
  border: 1px solid rgba(255, 157, 102, 0.3);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Horizontal Progress Gauge */
.typing-bottom-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.55rem;
}

.typing-scale {
  position: relative;
  width: 100%;
  height: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-dim);
}

.typing-scale .scale-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0.75;
}

.typing-scale .scale-mark[style*="left: 0%"] {
  transform: translateX(0);
}

.typing-scale .scale-mark[style*="left: 100%"] {
  transform: translateX(-100%);
}

.typing-scale .scale-mark.is-current {
  color: #ff8a7a;
  font-weight: 800;
  font-size: 0.92rem;
  opacity: 1;
  text-shadow: 0 0 12px rgba(255, 111, 94, 0.6);
}

.typing-track {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.typing-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5238, #ff8a7a);
  box-shadow: 0 0 16px rgba(255, 111, 94, 0.6);
}

.typing-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ff5238;
  box-shadow: 0 0 14px #ff5238;
  z-index: 2;
}

.typing-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-dim);
  opacity: 0.8;
  margin-top: 0.35rem;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .skills-typing-compact {
    padding: 1.15rem 0.85rem;
    gap: 1rem;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .typing-top-row {
    align-items: flex-end;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
  }
  .typing-left-col {
    flex: 1 1 auto;
    min-width: 0;
  }
  .typing-right-col {
    flex: 0 0 auto;
  }
  .typing-title {
    font-size: clamp(1.4rem, 6vw, 1.85rem);
    white-space: normal;
  }
  .typing-sub {
    font-size: 0.82rem;
    white-space: normal;
  }
  .typing-big-num {
    font-size: 2.5rem;
  }
  .typing-big-unit {
    font-size: 0.95rem;
  }
  .typing-status-pill {
    font-size: 0.62rem;
    padding: 0.2rem 0.6rem;
  }
  .typing-scale {
    font-size: 0.72rem;
  }
  .typing-scale .scale-mark.is-current {
    font-size: 0.85rem;
  }
  .typing-meta {
    white-space: normal;
    text-align: center;
  }
}

/* --- Donut Cards Grid (Craft, Software, Language beneath Typing) --- */
.skills-donuts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.skills-donut-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 1.35rem 1.25rem 1.15rem 1.25rem;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Glowing rounded rectangle on hover, identical to bare typing hover */
.skills-donut-card:hover,
.skills-donut-card.is-hovered {
  backdrop-filter: brightness(1.35) blur(10px);
  -webkit-backdrop-filter: brightness(1.35) blur(10px);
  background: rgba(var(--card-accent-rgb, 255, 157, 102), 0.04);
  border-color: rgba(var(--card-accent-rgb, 255, 157, 102), 0.32);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 255, 157, 102), 0.22),
              inset 0 0 20px rgba(255, 255, 255, 0.03);
  transform: translateY(-3px);
}

.skills-donut-card:active {
  transform: translateY(-1px) scale(0.99);
}

.donut-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  width: 100%;
}

.donut-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--card-accent, #ff9d66);
  text-transform: uppercase;
  white-space: nowrap;
}

.donut-kicker svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.donut-card-title {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

.donut-card-sub {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--color-text-dim);
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.donut-visual-wrap {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0.9rem auto 0.75rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.donut-hole-trigger {
  pointer-events: all;
  cursor: default;
}

.donut-slice {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1),
              filter 0.25s ease,
              opacity 0.25s ease;
  transform-origin: 90px 90px;
  outline: none;
}

.donut-slice:hover,
.donut-slice.is-hovered {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px currentColor) brightness(1.28);
}

.donut-center-info {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.donut-center-score {
  font-family: var(--font-mono);
  font-size: 2.85rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.45);
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
  user-select: none;
}

/* Dynamic Single Status Strip */
.donut-dynamic-strip {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.donut-dyn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

.donut-dyn-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.donut-dyn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--strip-accent, var(--card-accent, #ff9d66));
  box-shadow: 0 0 8px var(--strip-accent, var(--card-accent, #ff9d66));
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.donut-dyn-title {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

.donut-dyn-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.donut-dyn-level {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--strip-accent, var(--card-accent, #ff9d66));
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.donut-dyn-score {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  transition: color 0.25s ease;
}

.donut-dyn-desc {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(245, 245, 247, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}

.donut-card-action {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0;
  border-top: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-accent, #ff9d66);
  opacity: 0.65;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.skills-donut-card:hover .donut-card-action,
.skills-donut-card.is-hovered .donut-card-action {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 960px) {
  .skills-donuts-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
  }
}

/* =============================================================================
   Dedicated Skills Detail Panel (#skills-detail)
   Layered over skills view, matching constellation detail architecture
   ============================================================================= */

#skills-detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: none;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s ease;
  padding: 1.5rem 1.5rem 3rem 1.5rem;
  box-sizing: border-box;
}

body.skills-detail-open #skills-detail {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* Centered content wrapper: vertically centered on spacious viewports,
   naturally aligned to top when zoomed in or on short viewports to prevent clipping */
.sd-content-wrapper {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 46rem;
  box-sizing: border-box;
}

.sd-content-wrapper.sd-detail-wide {
  max-width: 76rem;
  width: 100%;
}

.sd-content-wrapper.sd-detail-wide .sd-head {
  max-width: 58rem;
}

#skills-view .skills-display-area {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.skills-detail-open #skills-view .skills-display-area {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.sd-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto 1.6rem auto;
  gap: 1.15rem;
}

.sd-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.sd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff8a7a;
  text-transform: uppercase;
}

.sd-title {
  font-family: var(--font-mono);
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--color-text-main);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 0 24px rgba(255, 111, 94, 0.35);
}

.sd-blurb {
  font-family: var(--font-ui);
  font-size: 1.02rem;
  color: var(--color-text-dim);
  max-width: 34rem;
  line-height: 1.5;
  margin: 0;
}

/* Stats Badges */
.sd-stats-cluster {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.35rem;
}

.sd-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  min-width: 6.5rem;
}

.sd-stat-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 800;
  color: #ff7e6e;
  line-height: 1;
}

.sd-stat-unit {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-dim);
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
}

.sd-stat-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: rgba(245, 245, 247, 0.55);
  margin-top: 0.2rem;
}

/* Proof Link Button */
.sd-proof-wrap {
  margin-top: 0.35rem;
}

.sd-proof-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 111, 94, 0.22), rgba(255, 157, 102, 0.14));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 126, 110, 0.6);
  color: #fff4f0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255, 111, 94, 0.28), 0 0 16px rgba(255, 111, 94, 0.15);
  transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.sd-proof-btn svg {
  color: #ff9d66;
}

/* Strictly NO solid colors on hover - pure brightness boost, border brightening, and soft glow */
.sd-proof-btn:hover {
  filter: brightness(1.28);
  border-color: #ffa194;
  box-shadow: 0 6px 28px rgba(255, 111, 94, 0.42), 0 0 28px rgba(255, 157, 102, 0.28);
  transform: translateY(-2px);
}

.sd-arrow-icon {
  transition: transform 0.25s ease;
}

.sd-proof-btn:hover .sd-arrow-icon {
  transform: translate(2px, -2px);
}

/* Live 60 WPM Simulator Stage */
.sd-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.sd-sim-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 111, 94, 0.08);
  box-sizing: border-box;
  gap: 1.25rem;
}

.sd-sim-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.95rem;
}

.sd-sim-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ff9d66;
}

.sd-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ffaa;
  box-shadow: 0 0 10px #00ffaa;
  animation: pulseGreen 1.5s infinite ease-in-out;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.sd-telemetry {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sd-telemetry-badge {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
}

.sd-telem-val {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
}

.sd-telem-lbl {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-text-dim);
}

/* 2-line visible window with smooth autoscrolling and zero horizontal layout shift */
.sd-typing-stage {
  --line-h: 2.6rem;
  height: calc(2 * var(--line-h));
  max-height: calc(2 * var(--line-h));
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.sd-typing-text-flow {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  line-height: var(--line-h);
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* In-place monospace spans with zero DOM restructuring */
.type-char {
  display: inline;
  position: relative;
  box-sizing: border-box;
}

.type-char.pending {
  color: rgba(255, 255, 255, 0.22);
}

.type-char.done {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Active underscore cursor directly beneath the character */
.type-char.active {
  color: #ffffff;
  border-bottom: 2.5px solid #ff7e6e;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.85);
  animation: underscorePulse 0.8s ease-in-out infinite alternate;
}

@keyframes underscorePulse {
  0% {
    border-bottom-color: #ff7e6e;
    box-shadow: 0 3px 6px -1px rgba(255, 126, 110, 0.6);
  }
  100% {
    border-bottom-color: rgba(255, 126, 110, 0.35);
    box-shadow: 0 3px 6px -1px rgba(255, 126, 110, 0.15);
  }
}

/* In-place typo indication without inserting or deleting spans */
.type-char.typo {
  color: #ff5238;
  border-bottom: 2.5px solid #ff5238;
  text-shadow: 0 0 10px rgba(255, 82, 56, 0.85);
}

.sd-sim-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.85rem;
}

.sd-sim-footnote {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-dim);
  line-height: 1.4;
  opacity: 0.75;
}

/* --- Detail Grid & Cards (Craft, Software, Language) --- */
.sd-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  width: 100%;
  box-sizing: border-box;
}

.sd-grid-lang {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-detail-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.15rem 1.25rem;
  box-sizing: border-box;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: backdrop-filter 0.3s ease,
              -webkit-backdrop-filter 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s ease;
}

.sd-detail-card:hover {
  backdrop-filter: brightness(1.25) blur(16px);
  -webkit-backdrop-filter: brightness(1.25) blur(16px);
  border-color: rgba(var(--field-accent-rgb, 255, 157, 102), 0.38);
  box-shadow: 0 0 28px rgba(var(--field-accent-rgb, 255, 157, 102), 0.16);
  transform: translateY(-2px);
}

.sd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.6rem;
}

.sd-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.sd-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sd-card-title {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.25;
  text-align: left;
}

.sd-card-score-pill {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.18rem 0.5rem;
  border-radius: 8px;
  flex-shrink: 0;
}

.sd-card-score-val {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
}

.sd-card-score-lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-dim);
}

.sd-card-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sd-card-bars .skill-bar {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0;
  border-bottom: none;
}

.sd-card-bars .skill-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  text-align: left;
}

.sd-card-bars .skill-bar-name {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-text-main);
  text-align: left;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sd-card-bars .skill-bar-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
}

.sd-card-bars .skill-bar-level {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-dim);
}

.sd-card-bars .skill-bar-score {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}

.sd-card-bars .skill-bar-track {
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.sd-card-bars .skill-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--field-accent-rgb, 255, 157, 102), 0.7), var(--field-accent, #ff9d66));
  box-shadow: 0 0 10px rgba(var(--field-accent-rgb, 255, 157, 102), 0.5);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.sd-lang-card {
  gap: 0.85rem;
}

.sd-lang-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sd-lang-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--field-accent, #00e5ff);
  letter-spacing: 0.04em;
}

.sd-lang-blurb {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-text-dim);
  margin: 0;
}

@media (max-width: 900px) {
  .sd-grid-lang {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #skills-detail {
    padding: 1rem 0.75rem 2.5rem 0.75rem;
  }
  .sd-head {
    gap: 0.9rem;
    margin-bottom: 1.35rem;
  }
  .sd-title {
    font-size: 1.65rem;
  }
  .sd-blurb {
    font-size: 0.92rem;
  }
  .sd-stats-cluster {
    gap: 0.5rem;
  }
  .sd-stat-pill {
    padding: 0.5rem 0.75rem;
    min-width: 5rem;
  }
  .sd-stat-num {
    font-size: 1.35rem;
  }
  .sd-proof-btn {
    font-size: 0.78rem;
    padding: 0.65rem 1.1rem;
    width: 100%;
    justify-content: center;
  }
  .sd-sim-panel {
    padding: 1.1rem 1rem;
    border-radius: 14px;
    gap: 1rem;
  }
  .sd-sim-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
  .sd-typing-stage {
    --line-h: 2.1rem;
    height: calc(2 * var(--line-h));
    max-height: calc(2 * var(--line-h));
  }
  .sd-typing-text-flow {
    font-size: 1.15rem;
    line-height: var(--line-h);
  }
  .skills-display-area {
    padding: 1rem 0.5rem 3rem 0.5rem;
  }
  .skills-overview-content {
    gap: 1.2rem;
    width: 100%;
    margin: 0 auto;
  }
  .skills-donuts-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
  }
  .skills-donut-card {
    padding: 1.15rem 0.85rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .donut-card-sub {
    white-space: normal;
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .donut-dynamic-strip {
    padding: 0.65rem 0.75rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .donut-dyn-desc {
    white-space: normal;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.35;
  }
  .donut-visual-wrap {
    width: 144px;
    height: 144px;
  }
  .donut-center-score {
    font-size: 2rem;
  }
  .sd-grid-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .sd-detail-card {
    padding: 1.1rem 1rem;
  }
}

/* =============================================================================
   Connect View: Bare, Transparent & Interactive Brand Cards
   ============================================================================= */

.connect-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

.connect-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem 3.5rem 1rem;
  box-sizing: border-box;
}

.connect-overview-content {
  width: 100%;
  max-width: 72rem;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Connect Header */
.connect-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.connect-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00e5ff;
}

.connect-hero-title {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.connect-hero-blurb {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-dim);
  max-width: 44rem;
  margin: 0;
  line-height: 1.45;
}

/* Sections & Kickers */
.connect-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.connect-section-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding-left: 0.35rem;
  opacity: 0.85;
}

/* Grid Layouts */
.connect-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.connect-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  width: 100%;
  box-sizing: border-box;
}

/* Standard Bare Card */
.connect-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 1.35rem 1.35rem;
  box-sizing: border-box;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.connect-card:hover {
  backdrop-filter: brightness(1.35) blur(14px);
  -webkit-backdrop-filter: brightness(1.35) blur(14px);
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.04);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.35);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 255, 255, 255), 0.22),
              inset 0 0 20px rgba(255, 255, 255, 0.02);
  transform: translateY(-3px);
}

.connect-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.connect-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.connect-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 0;
}

.connect-brand-row .connect-card-title {
  margin: 0;
}

.connect-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--card-accent-rgb, 255, 255, 255), 0.28);
  color: var(--card-accent);
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.08);
  white-space: nowrap;
  max-width: 100%;
  flex-shrink: 0;
}

.connect-card-title {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.2rem 0 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.connect-card-handle {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--card-accent);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connect-card-blurb {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--color-text-dim);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.connect-card-action-wrap {
  margin-top: auto;
  padding-top: 0.3rem;
}

.connect-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
  box-sizing: border-box;
}

.connect-action-btn:hover {
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.16);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.45);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(var(--card-accent-rgb, 255, 255, 255), 0.25);
  transform: translateY(-1px);
}

.connect-copy-btn.is-copied {
  background: rgba(46, 204, 113, 0.2) !important;
  border-color: rgba(46, 204, 113, 0.5) !important;
  color: #2ecc71 !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.3) !important;
}

/* Unified Instagram Card */
.connect-card-instagram {
  gap: 1.25rem;
}

.connect-card-instagram:hover {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.05), rgba(64, 93, 230, 0.05));
  border-color: rgba(225, 48, 108, 0.4);
  box-shadow: 0 0 35px rgba(225, 48, 108, 0.22),
              0 0 60px rgba(64, 93, 230, 0.12),
              inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.connect-ig-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 0.95rem;
}

.connect-ig-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.connect-ig-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(225, 48, 108, 0.45);
  flex-shrink: 0;
}

.connect-ig-titles {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.connect-ig-main-blurb {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--color-text-dim);
  max-width: 34rem;
  line-height: 1.42;
  margin: 0;
}

.connect-ig-profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.05rem;
  width: 100%;
  box-sizing: border-box;
}

.connect-ig-profile-item {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.15rem 1.15rem;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.connect-ig-profile-item:hover {
  background: rgba(var(--profile-accent-rgb), 0.08);
  border-color: rgba(var(--profile-accent-rgb), 0.45);
  box-shadow: 0 0 24px rgba(var(--profile-accent-rgb), 0.25);
  transform: translateY(-3px);
}

.connect-ig-prof-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.connect-ig-prof-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid;
  flex-shrink: 0;
}

.connect-ig-prof-titlegroup {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.connect-ig-prof-name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connect-ig-prof-handle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--profile-accent);
}

.connect-ig-prof-arrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dim);
  margin-left: auto;
  transition: transform 0.25s ease, color 0.25s ease;
}

.connect-ig-profile-item:hover .connect-ig-prof-arrow {
  color: #ffffff;
  transform: translate(2px, -2px);
}

.connect-ig-prof-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.connect-ig-prof-blurb {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-text-dim);
  line-height: 1.38;
  margin: 0;
  flex: 1;
}

.connect-ig-prof-action {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--profile-accent);
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0.95;
}

/* Centered Card in 3-column Grid (Fiverr on Row 2) */
.connect-card-center {
  grid-column: 2;
  grid-row: 2;
}

/* Connect Media Queries */
@media (max-width: 1024px) {
  .connect-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .connect-display-area {
    padding: 1rem 0.5rem 3rem 0.5rem;
  }
  .connect-grid-3,
  .connect-grid-4,
  .connect-ig-profiles-grid {
    grid-template-columns: 1fr;
  }
  .connect-card-center {
    grid-column: auto;
    grid-row: auto;
  }
  .connect-card {
    padding: 1.15rem 1.1rem;
  }
  .connect-ig-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* =============================================================================
   Hire Me View: Client Onboarding, Availability & Services
   ============================================================================= */

.hire-container {
  position: relative;
  width: 100%;
  max-width: 76rem;
  height: 100%;
  max-height: calc(100vh - 4.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: none;
  box-sizing: border-box;
}

.hire-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem 1rem 3.5rem 1rem;
  box-sizing: border-box;
}

.hire-overview-content {
  width: 100%;
  max-width: 72rem;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  box-sizing: border-box;
}

/* Hero & Availability */
.hire-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding-bottom: 0.5rem;
}

.hire-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-cyan, #00f2fe);
}

.hire-hero-title {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(0, 242, 254, 0.25);
}

.hire-hero-blurb {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-dim);
  max-width: 44rem;
  margin: 0 auto;
  line-height: 1.5;
}

.hire-status-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hire-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  box-sizing: border-box;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.hire-status-tag svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.hire-status-tag.is-available {
  background: rgba(63, 185, 80, 0.08);
  border-color: rgba(63, 185, 80, 0.28);
  box-shadow: 0 0 16px rgba(63, 185, 80, 0.12);
}

.hire-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 10px #3fb950, 0 0 16px rgba(63, 185, 80, 0.6);
  animation: pulseHireDot 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseHireDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.hire-status-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #3fb950;
}

/* Sections & Grids */
.hire-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.hire-section-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding-left: 0.35rem;
  opacity: 0.85;
}

/* Compact Toggle Card (1 Card with 5 Toggles) */
.hire-compact-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hire-compact-card {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: 100%;
  max-width: 48rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 1.35rem 1.45rem;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 56, 189, 248), 0.1),
              inset 0 0 20px rgba(255, 255, 255, 0.015);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.hire-toggles-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.35rem;
  box-sizing: border-box;
  overflow-x: auto;
}

.hire-toggle-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0.55rem 0.75rem;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.hire-toggle-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.hire-toggle-btn.active {
  color: #ffffff;
  background: rgba(var(--tab-accent-rgb, 255, 255, 255), 0.16);
  border-color: rgba(var(--tab-accent-rgb, 255, 255, 255), 0.4);
  box-shadow: 0 0 16px rgba(var(--tab-accent-rgb, 255, 255, 255), 0.25);
}

.hire-toggle-icon {
  display: inline-flex;
  align-items: center;
  color: var(--tab-accent);
}

.hire-channel-container {
  width: 100%;
}

.hire-channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  animation: hireChannelFade 0.25s ease-out;
}

@keyframes hireChannelFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hire-channel-action-box {
  margin-top: 0.35rem;
}

/* Horizontal Auto-Scrolling Works Showcase */
.hire-showcase-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hire-marquee-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-dim);
  opacity: 0.75;
  padding-right: 0.35rem;
}

.hire-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0.5rem 0 1rem 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}

.hire-marquee-wrapper.is-dragging {
  cursor: grabbing;
}

.hire-marquee-track {
  display: flex;
  gap: 1.15rem;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.hire-showcase-card {
  display: flex;
  flex-direction: column;
  width: 250px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.hire-showcase-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(225, 48, 108, 0.5);
  box-shadow: 0 0 24px rgba(225, 48, 108, 0.25),
              inset 0 0 16px rgba(255, 255, 255, 0.03);
}

.hire-showcase-media {
  position: relative;
  width: 100%;
  height: 180px;
  background: #0d0e15;
  overflow: hidden;
}

.hire-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  transition: transform 0.4s ease;
}

.hire-showcase-card:hover .hire-showcase-img {
  transform: scale(1.06);
}

.hire-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 14, 21, 0.85) 0%, transparent 60%);
  pointer-events: none;
}

.hire-showcase-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.hire-showcase-info {
  padding: 0.9rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.hire-showcase-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hire-showcase-desc {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--color-text-dim);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.hire-showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #e1306c;
  margin-top: 0.45rem;
  opacity: 0.9;
}

/* Actions in cards (Email, WhatsApp, Fiverr: perfectly symmetrical 50/50) */
.hire-split-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-split-actions .connect-action-btn {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
}

.hire-split-actions .hire-primary-action {
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.14);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.4);
  color: #ffffff;
  font-weight: 800;
}

.hire-split-actions .hire-primary-action:hover {
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.24);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.65);
  box-shadow: 0 0 18px rgba(var(--card-accent-rgb, 255, 255, 255), 0.35);
  transform: translateY(-1px);
}

.hire-split-actions .hire-copy-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text-dim);
  font-weight: 700;
}

.hire-split-actions .hire-copy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.hire-copy-btn.is-copied {
  border-color: rgba(63, 185, 80, 0.6) !important;
  color: #3fb950 !important;
  background: rgba(63, 185, 80, 0.14) !important;
  box-shadow: 0 0 14px rgba(63, 185, 80, 0.25);
}

.hire-dual-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-dual-actions .connect-action-btn {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 1rem;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Services 2x2 Grid */
.hire-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 1.35rem 1.4rem;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              backdrop-filter 0.35s ease,
              -webkit-backdrop-filter 0.35s ease,
              transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.hire-service-card:hover {
  backdrop-filter: brightness(1.35) blur(14px);
  -webkit-backdrop-filter: brightness(1.35) blur(14px);
  background: rgba(var(--card-accent-rgb, 255, 255, 255), 0.04);
  border-color: rgba(var(--card-accent-rgb, 255, 255, 255), 0.35);
  box-shadow: 0 0 32px rgba(var(--card-accent-rgb, 255, 255, 255), 0.2),
              inset 0 0 20px rgba(255, 255, 255, 0.02);
  transform: translateY(-3px);
}

.hire-service-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.hire-service-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.35);
}

.hire-service-subtitle {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hire-service-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.hire-service-blurb {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--color-text-dim);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.hire-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.hire-service-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
}

/* Workflow 4-Step Grid */
.hire-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-step-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.15rem 1.1rem;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.hire-step-item:hover {
  border-color: rgba(0, 242, 254, 0.3);
  background: rgba(0, 242, 254, 0.025);
  transform: translateY(-2px);
}

.hire-step-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.hire-step-index {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-accent-cyan, #00f2fe);
}

.hire-step-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
}

.hire-step-title {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.hire-step-desc {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-dim);
  line-height: 1.42;
  margin: 0;
}

/* Principles Grid */
.hire-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.hire-principle-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.1rem;
  box-sizing: border-box;
}

.hire-principle-title {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.hire-principle-desc {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-dim);
  line-height: 1.42;
  margin: 0;
}

/* Hire Me Media Queries */
@media (max-width: 1024px) {
  .hire-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .hire-display-area {
    padding: 1rem 0.5rem 3rem 0.5rem;
  }
  .hire-hero-title {
    font-size: 1.7rem;
  }
  .hire-status-strip {
    gap: 0.45rem;
    margin-top: 0.65rem;
  }
  .hire-status-tag {
    font-size: 0.68rem;
    padding: 0.3rem 0.65rem;
    gap: 0.38rem;
  }
  .hire-grid-3,
  .hire-grid-2,
  .hire-services-grid,
  .hire-workflow-grid,
  .hire-principles-grid {
    grid-template-columns: 1fr;
  }
  .hire-split-actions,
  .hire-dual-actions {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .hire-compact-card {
    padding: 1.1rem 0.95rem;
    border-radius: 16px;
  }
  .hire-toggles-bar {
    gap: 0.35rem;
    padding: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hire-toggles-bar::-webkit-scrollbar {
    display: none;
  }
  .hire-toggle-btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem;
  }
}