* {
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 0;
  margin: 0;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/* Layout Classes */
.main-container {
  background-color: #000000;
  color: #ffffff;
  height: 100vh;
  width: 100vw;
}

.circle-container {
  position: relative;
  width: 452px;
  height: 452px;
  background-color: #000000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Flexbox Layouts */
.flex-center {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

.flex-column-center {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

.flex-row-center {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

/* Component Containers */
.control-container {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  gap: 32px;
}

.connector {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

.focus-area {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
}

.focus-area-small {
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  width: 128px;
  height: 128px;
}

/* Dimensions */
.w-128 { width: 128px; }
.h-128 { height: 128px; }
.w-208 { width: 208px; }
.h-80 { height: 80px; }
.w-94 { width: 94px; }
.w-54 { width: 54px; }
.w-96 { width: 96px; }
.w-12 { width: 12px; }
.h-12 { height: 12px; }
.w-4 { width: 4px; }
.h-64 { height: 64px; }
.w-48 { width: 48px; }
.h-48 { height: 48px; }
.w-32 { width: 32px; }
.h-32 { height: 32px; }
.w-24 { width: 24px; }
.h-24 { height: 24px; }

/* Colors */
.text-white { color: #ffffff; }
.text-gray { color: #9ca3af; }
.text-blue { color: #afd3ff; }
.bg-blue-500 { background-color: #60a5fa; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-gray-500 { background-color: #6b7280; }

/* Typography */
.text-36 { font-size: 36px; }
.text-28 { font-size: 28px; }
.text-20 { font-size: 20px; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }

/* Spacing */
.mb-8 { margin-bottom: 8px; }
.mt-8 { margin-top: 8px; }
.mb-32 { margin-bottom: 32px; }

/* Border Radius */
.rounded-full { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
.rounded-24 { border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; }

/* Text Alignment */
.text-center { text-align: center; }

/* Transitions */
.transition-all {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

/* Focus States */
.focus-active {
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  -webkit-box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  -moz-box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.focus-inactive {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/* Shadows */
.shadow-default {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-focus {
  box-shadow: 0 10px 15px -3px rgba(48, 128, 255, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 10px 15px -3px rgba(48, 128, 255, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 10px 15px -3px rgba(48, 128, 255, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Glow Effect */
.glow-effect {
  box-shadow: 
    0 0 20px rgba(29, 78, 216, 0.6),
    0 0 40px rgba(29, 78, 216, 0.4),
    0 0 60px rgba(29, 78, 216, 0.2),
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 
    0 0 20px rgba(29, 78, 216, 0.6),
    0 0 40px rgba(29, 78, 216, 0.4),
    0 0 60px rgba(29, 78, 216, 0.2),
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 
    0 0 20px rgba(29, 78, 216, 0.6),
    0 0 40px rgba(29, 78, 216, 0.4),
    0 0 60px rgba(29, 78, 216, 0.2),
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Power Focus Effect */
.power-focus {
  transform: scale(1.05) !important;
  -webkit-transform: scale(1.05) !important;
  -moz-transform: scale(1.05) !important;
  -ms-transform: scale(1.05) !important;
  -o-transform: scale(1.05) !important;
  border: 2px solid rgba(29, 78, 216, 0.8) !important;
  -webkit-border: 2px solid rgba(29, 78, 216, 0.8) !important;
  -moz-border: 2px solid rgba(29, 78, 216, 0.8) !important;
  transition: all 0.3s ease !important;
  -webkit-transition: all 0.3s ease !important;
  -moz-transition: all 0.3s ease !important;
  -o-transition: all 0.3s ease !important;
}

/* Gradients */
.gradient-line {
  background: linear-gradient(to bottom, #60a5fa 0%, #3b82f6 50%, transparent 100%);
  background: -webkit-linear-gradient(top, #60a5fa 0%, #3b82f6 50%, transparent 100%);
  background: -moz-linear-gradient(top, #60a5fa 0%, #3b82f6 50%, transparent 100%);
  background: -o-linear-gradient(top, #60a5fa 0%, #3b82f6 50%, transparent 100%);
}

/* Status Element */
.status-element {
  margin-top: 16px;
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  width: 50%;
}
