:root {
  color-scheme: dark;
}

html,
body {
  min-height: 100%;
}

body {
  background-image: radial-gradient(circle at top left, rgba(34, 211, 238, 0.09), transparent 45%);
}

a {
  transition: color 180ms ease;
}

[data-accordion-trigger] {
  cursor: pointer;
}

main li {
  list-style-type: disc;
  margin-left: 1rem;
}

main section,
main article {
  min-width: 0;
}

iframe {
  width: 100%;
  aspect-ratio: 16 / 9; /* Keeps the iframe at a 16:9 ratio */
  border: none;
}

.hero-3d-scene {
  perspective: 1000px;
  perspective-origin: center;
}

.tag-cloud-sphere {
  position: relative;
  transform-style: preserve-3d;
  animation: rotateSphere 8s infinite linear;
}

@keyframes rotateSphere {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.tag-item {
  font-size: xx-large;
  color: var(--color-cyan-300);
  opacity: 0.5;
  position: absolute;
  transform: translate3d(var(--x), var(--y), var(--z));
  backface-visibility: hidden;
}
/* ── Slide-out aside for viewports narrower than xl ──────────────── */

.aside-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 49;
}

.aside-backdrop.aside-open {
  display: block;
}

.aside-toggle-btn {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 48;
  background: rgb(8 145 178 / 0.18);
  border: 1px solid rgb(8 145 178 / 0.4);
  border-left: none;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.75rem 0.4rem;
  color: rgb(103 232 249);
  cursor: pointer;
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 180ms ease;
}

.aside-toggle-btn:hover {
  background: rgb(8 145 178 / 0.35);
}

@media not all and (min-width: 1280px) {
  [data-slide-aside] {
    display: block !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    max-height: 100% !important;
    background-color: rgb(2 6 23);
    border-right: 1px solid rgb(30 41 59);
    padding: 3rem 1rem 1.5rem;
    transform: translateX(-100%);
    transition: transform 300ms ease;
    z-index: 50;
    overflow-y: auto;
  }

  [data-slide-aside].aside-open {
    transform: translateX(0);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.6);
  }
}

@media (min-width: 1280px) {
  .aside-toggle-btn,
  .aside-backdrop {
    display: none !important;
  }
}