* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: #0a0a0a;
   color: #00ff00;
   font-family: "Courier New", monospace;
   overflow-x: hidden;
   position: relative;
   min-height: 100vh;
}

.container {
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 2rem;
   position: absolute;
}

/* Language Toggle */
.language-toggle {
   position: absolute;
   top: 2rem;
   right: 2rem;
   display: flex;
   gap: 0.5rem;
   z-index: 20;
}

.lang-btn {
   background: #0a0a0a;
   color: #00ff00;
   border: 1px solid #00ff00;
   padding: 0.5rem 1rem;
   font-family: "Courier New", monospace;
   cursor: pointer;
   transition: all 0.3s;
}

.lang-btn:hover {
   background: #00ff00;
   color: #0a0a0a;
}

.lang-btn.active {
   background: #00ff00;
   color: #0a0a0a;
   box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

/* CRT Effect */
.crt-lines {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%);
   background-size: 100% 4px;
   pointer-events: none;
   z-index: 10;
}

.noise {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.05;
   z-index: 9;
   pointer-events: none;
}

.noise::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" /></svg>');
   animation: noise 0.2s infinite;
}

/* Title */
.title {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   text-align: center;
   position: relative;
   text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
   color: #00ff00;
   margin-top: 3rem;
}

/* Equation Display */
.equation-display {
   text-align: center;
   margin-bottom: 2rem;
   font-size: 1.5rem;
   position: relative;
}

#equation {
   display: block;
   margin-bottom: 0.5rem;
   color: #ffff00;
   text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
   animation: equation-pulse 3s ease-in-out infinite;
}

.equation-info {
   color: #ff00ff;
   font-size: 1.2rem;
}

/* Main Content */
.main-content {
   display: flex;
   gap: 3rem;
   margin-bottom: 2rem;
   flex-wrap: wrap;
   justify-content: center;
}

/* Squircle Showcase */
.squircle-showcase {
   position: relative;
   border: 2px solid #00ff00;
   box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

#squircle-canvas {
   display: block;
   background: #000;
   image-rendering: pixelated;
}

.scanline {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: rgba(0, 255, 0, 0.5);
   animation: scan 4s linear infinite;
}

/* Control Panel */
.control-panel {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

.terminal-window {
   background: #0a0a0a;
   border: 2px solid #00ff00;
   padding: 1rem;
   width: 350px;
   box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
}

.terminal-header {
   background: #00ff00;
   color: #000;
   padding: 0.5rem;
   margin: -1rem -1rem 1rem;
   font-weight: bold;
}

.terminal-content p {
   margin-bottom: 0.5rem;
   color: #00ff00;
}

#n-slider {
   width: 100%;
   margin-bottom: 1rem;
   cursor: pointer;
}

/* Custom slider styling */
#n-slider {
   -webkit-appearance: none;
   appearance: none;
   background: #1a1a1a;
   outline: none;
   height: 10px;
   border: 1px solid #00ff00;
}

#n-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 20px;
   height: 20px;
   background: #ff0000;
   cursor: pointer;
   border: 2px solid #00ff00;
}

.info-text {
   font-size: 0.9rem;
   line-height: 1.5;
   color: #00ffff;
}

/* Comparison Grid */
.comparison-grid {
   display: flex;
   gap: 1rem;
   justify-content: space-around;
}

.comparison-item {
   text-align: center;
}

.shape-preview {
   width: 80px;
   height: 80px;
   border: 1px solid #00ff00;
   margin-bottom: 0.5rem;
   position: relative;
   background: #0a0a0a;
}

.circle-preview::before {
   content: "";
   position: absolute;
   top: 10%;
   left: 10%;
   width: 80%;
   height: 80%;
   border: 2px solid #00ff00;
   border-radius: 50%;
}

.squircle-preview::before {
   content: "";
   position: absolute;
   top: 10%;
   left: 10%;
   width: 80%;
   height: 80%;
   border: 2px solid #00ff00;
   border-radius: 40%;
}

.square-preview::before {
   content: "";
   position: absolute;
   top: 10%;
   left: 10%;
   width: 80%;
   height: 80%;
   border: 2px solid #00ff00;
}

.label {
   font-size: 0.8rem;
   color: #ffff00;
}

/* Educational Section */
.educational-section {
   width: 100%;
   max-width: 800px;
   margin-bottom: 2rem;
}

.log-entry {
   background: #0a0a0a;
   border: 1px solid #ff0000;
   padding: 1.5rem;
   position: relative;
}

.log-header {
   color: #ff0000;
   margin-bottom: 1rem;
   font-weight: bold;
}

.log-text {
   line-height: 1.6;
   color: #00ff00;
}

/* Animations */
@keyframes noise {
   0%,
   100% {
      transform: translate(0, 0);
   }
   20% {
      transform: translate(-1%, -1%);
   }
   40% {
      transform: translate(1%, 1%);
   }
   60% {
      transform: translate(-1%, 1%);
   }
   80% {
      transform: translate(1%, -1%);
   }
}

@keyframes scan {
   0% {
      top: -2px;
   }
   100% {
      top: 100%;
   }
}

@keyframes equation-pulse {
   0%,
   100% {
      opacity: 0.8;
   }
   50% {
      opacity: 1;
      text-shadow: 0 0 15px rgba(255, 255, 0, 0.8);
   }
}