/* ===================== OPTIMIZED COMPONENT STYLES ===================== */

/* Host element */
:host {
  display: block;
  width: 100%;
  height: 100%;
}

/* Custom utility classes */
.border-3 {
  border-width: 3px;
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.shadow-cyan-500\/30 {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

/* ===================== RESPONSIVE DESIGN ===================== */

/* Tablet and below */
@media (max-width: 840px) {
  .w-\[800px\] {
    width: 100%;
    max-width: 800px;
  }

  .h-\[600px\] {
    height: 60vw;
    max-height: 600px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .absolute.top-5.right-5 {
    inset: 0.625rem 0.625rem auto 0.625rem;
  }

  .absolute.top-5.right-5 button {
    width: 100%;
    justify-content: center;
  }
}
