/* Local Tailwind CSS with essential utilities */
:root {
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246/0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
}

/* Layout and positioning */
body{/* Reset body margin for full screen elements */margin:0;}body{/* Existing body styles placeholder */}
.fixed{position:fixed;}
.w-full{width:100%}

/* Z-index */
.z-50{z-index:50};

/* Background colors */
.bg-black{background-color:#000}
.bg-gray-900{background-color:#111827}

/* Opacity */
.bg-opacity-80{--tw-bg-opacity:0.8}
.bg-opacity-95{--tw-bg-opacity:0.95}

/* Border radius */
.rounded-md{border-radius:0.375rem}

/* Backdrop filters */
.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
.backdrop-blur-custom{backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);}
.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}

.blur{--tw-blur:blur(8px)}

/* Text colors */
.text-white{--tw-text-opacity:1;color:#fff}
.text-gray-300{--tw-text-opacity:1;color:#d1d5db}
.text-gray-400{--tw-text-opacity:1;color:#9ca3af}

/* Text alignment */
.text-center{text-align:center}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}

/* Flexbox */
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.items-baseline{align-items:baseline}
.space-x-4 > * + *{margin-left:1rem}

/* Spacing */
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.pb-3{padding-bottom:0.75rem}
.pt-2{padding-top:0.5rem}
.ml-4{margin-left:1rem}

/* Font weights */
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}

/* Transforms */
.hover\:transform:hover{-webkit-transform:var(--tw-transform);transform:var(--tw-transform)}
.transform{-webkit-transform:var(--tw-transform);transform:var(--tw-transform)}
.-translate-y-2{--tw-translate-y:-0.5rem;-webkit-transform:translateY(var(--tw-translate-y)) translateX(var(--tw-translate-x)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translateY(var(--tw-translate-y)) translateX(var(--tw-translate-x)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

/* Miscellaneous */
*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246/0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  --tw-border-opacity: 1;
  --tw-ring-opacity: 1;
  --tw-fill-opacity: 1;
  --tw-stroke-opacity: 1;
  --tw-shadow-opacity: 1;
  --tw-backdrop-opacity: 1;
  --tw-ring-opacity: 1;
}

/* Transitions */
.transition-all, .hover\:transform {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Hover effects */
.hover\:text-white:hover{--tw-text-opacity:1;color:#fff}
.hover\:bg-gray-700:hover{background-color:#374151}

/* Responsive classes */
@media (min-width: 768px) {
  .md\:hidden{display:none}
}

/* Special for your layout */
.h-20{height:5rem}
.max-w-7xl{max-width:80rem}
.max-w-4xl{max-width:56rem}
.mx-auto{margin-left:auto;margin-right:auto}