body {
   margin: 0;
   padding: 0;
   background-color: #000;
   font-family: Arial, sans-serif;
}

/* Main Menu Styles */
.main-menu {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 20px;
   background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

.menu-header {
   text-align: center;
   margin-bottom: 50px;
   color: white;
}

.menu-header h1 {
   font-size: 3.5em;
   margin: 0 0 20px 0;
   background: linear-gradient(45deg, #4CAF50, #45a049, #66bb6a);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-shadow: 0 0 30px rgba(76, 175, 80, 0.3);
}

.menu-header p {
   font-size: 1.2em;
   color: #aaa;
   margin: 0;
}

.menu-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 25px;
   max-width: 1200px;
   width: 100%;
}

.menu-item {
   background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
   border: 2px solid #333;
   border-radius: 12px;
   padding: 30px;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.menu-item:hover:not(.coming-soon) {
   transform: translateY(-5px);
   border-color: #4CAF50;
   box-shadow: 0 10px 25px rgba(76, 175, 80, 0.2);
   background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
}

.menu-item.coming-soon {
   opacity: 0.6;
   cursor: not-allowed;
}

.menu-item.coming-soon:hover {
   transform: none;
   border-color: #555;
   box-shadow: none;
}

.menu-icon {
   font-size: 3em;
   margin-bottom: 15px;
}

.menu-item h3 {
   color: white;
   margin: 0 0 10px 0;
   font-size: 1.4em;
}

.menu-item p {
   color: #bbb;
   margin: 0 0 20px 0;
   line-height: 1.4;
}

.menu-status {
   position: absolute;
   top: 15px;
   right: 15px;
   padding: 5px 10px;
   border-radius: 20px;
   font-size: 0.8em;
   font-weight: bold;
}

.menu-item:not(.coming-soon) .menu-status {
   background-color: #4CAF50;
   color: white;
}

.menu-item.coming-soon .menu-status {
   background-color: #666;
   color: #ccc;
}

/* Visualization View Styles */
.visualization-view {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.view-header {
   background-color: #1a1a1a;
   padding: 15px 20px;
   display: flex;
   align-items: center;
   gap: 20px;
   border-bottom: 2px solid #333;
}

.back-button {
   padding: 8px 16px;
   background-color: #666;
   border: none;
   color: white;
   cursor: pointer;
   border-radius: 4px;
   transition: background-color 0.3s ease;
}

.back-button:hover {
   background-color: #777;
}

.view-header h2 {
   color: white;
   margin: 0;
   font-size: 1.5em;
}

.container {
   position: relative;
   height: calc(100vh - 120px - 15px - 10px - 60px); /* Subtract additional height for header */
   padding: 0;
   margin-left: 15px; /* 15px from left edge */
   margin-top: 10px; /* 5px from top to prevent label cutoff */
   margin-bottom: 15px; /* 15px from control panel */
   box-sizing: border-box;
}

.bars-container {
   position: relative;
   width: calc(100% - 60px); /* Make room for y-axis */
   height: 100%;
   display: flex;
   align-items: flex-end;
   gap: 2px;
   margin-left: 60px; /* Space for y-axis */
}

#canvas {
   position: absolute;
   top: 0;
   left: 60px; /* Align with the bars container */
   pointer-events: none;
   z-index: 10;
   width: calc(100% - 60px); /* Match bars container width */
   height: 100%;
}

.bar-container {
   flex: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end; /* Align bars to bottom */
   align-items: center;
   position: relative;
}

.bar {
   width: 100%;
   background-color: transparent;
   transition: height 0.3s ease;
   border: 2px solid transparent; /* Changed to transparent for dynamic coloring */
   box-sizing: border-box;
   will-change: height, border-color, box-shadow;
   position: relative;
   z-index: 5;
}

.value-label {
   color: white;
   font-size: 10px;
   position: absolute;
   top: 0;
   transform: translateY(-100%);
   z-index: 12;
   text-shadow: 1px 1px 1px black;
}

.axes-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 20;
}

.y-axis {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 60px;
   border-right: 2px solid #555;
}

.x-axis {
   position: absolute;
   left: 60px;
   bottom: 0;
   height: 2px;
   width: calc(100% - 60px);
   background-color: #555;
}

.axis-label {
   position: absolute;
   color: #aaa;
   font-size: 12px;
}

.y-label {
   right: 10px;
   transform: translateY(50%);
}

.controls {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #1a1a1a;
   padding: 20px;
   display: flex;
   justify-content: center;
   gap: 20px;
   align-items: center;
   z-index: 20; /* Place controls above all other elements */
}

.control-group {
   display: flex;
   align-items: center;
   gap: 10px;
   color: white;
}

button {
   padding: 8px 16px;
   background-color: #4CAF50;
   border: none;
   color: white;
   cursor: pointer;
   border-radius: 4px;
}

button:hover {
   background-color: #45a049;
}

input[type="range"] {
   width: 100px;
}

.emoji-pointer {
   position: absolute;
   bottom: -30px; /* Position below the x-axis */
   font-size: 24px;
   z-index: 30;
   text-align: center;
   width: 100%;
   animation: bounce 0.5s infinite alternate;
   pointer-events: none;
}

@keyframes bounce {
   from { transform: translateY(0); }
   to { transform: translateY(-5px); }
}

/* Add styles for highlighting */
.highlight {
   z-index: 15;
   position: relative;
}

/* Add performance hints where appropriate */
.bar, .bar-container, #canvas {
   will-change: transform;
}

/* Neural Network Visualization Styles */
.current-digit-display {
   color: #eee;
   font-size: 1.2em;
}

.nn-container {
   flex-grow: 1;
   display: flex;
   position: relative;
   overflow: hidden;
}

#nnCanvas {
   flex-grow: 1;
   display: block;
   width: 100%;
   height: 100%;
}

#nnCanvas:active {
   cursor: grabbing;
}

.confidence-panel {
   width: 300px;
   background: rgba(26, 26, 26, 0.95);
   border-left: 2px solid #333;
   padding: 20px;
   overflow-y: auto;
   backdrop-filter: blur(10px);
}

.confidence-panel h3 {
   color: white;
   margin: 0 0 20px 0;
   text-align: center;
   font-size: 1.1em;
   border-bottom: 1px solid #333;
   padding-bottom: 10px;
}

.confidence-bars {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.confidence-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px;
   border-radius: 6px;
   transition: all 0.3s ease;
   background: rgba(255, 255, 255, 0.05);
}

.confidence-item.predicted {
   background: rgba(76, 175, 80, 0.2);
   border: 1px solid #4CAF50;
   transform: scale(1.02);
}

.digit-label {
   color: white;
   font-weight: bold;
   font-size: 1.1em;
   width: 20px;
   text-align: center;
}

.confidence-bar {
   flex: 1;
   height: 20px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   overflow: hidden;
   position: relative;
}

.confidence-fill {
   height: 100%;
   background: linear-gradient(90deg, #4CAF50, #66bb6a);
   border-radius: 10px;
   transition: width 0.5s ease;
   position: relative;
}

.confidence-fill::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   animation: shimmer 2s infinite;
}

@keyframes shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
}

.confidence-value {
   color: #aaa;
   font-size: 0.9em;
   min-width: 35px;
   text-align: right;
}

.nn-controls {
   background-color: #1a1a1a;
   padding: 15px 20px;
   display: flex;
   align-items: center;
   gap: 30px;
   border-top: 2px solid #333;
   flex-wrap: wrap;
}

.nn-controls .control-group {
   display: flex;
   align-items: center;
   gap: 10px;
}

.nn-controls button {
   padding: 8px 16px;
   background: linear-gradient(135deg, #333, #444);
   border: 1px solid #555;
   color: white;
   cursor: pointer;
   border-radius: 6px;
   transition: all 0.3s ease;
   font-size: 0.9em;
}

.nn-controls button:hover {
   background: linear-gradient(135deg, #444, #555);
   border-color: #4CAF50;
   transform: translateY(-1px);
}

.nn-controls button:active {
   transform: translateY(0);
}

.nn-controls button.active {
   background: linear-gradient(135deg, #4CAF50, #45a049);
   border-color: #66bb6a;
}

.nn-controls label {
   color: #ccc;
   font-size: 0.9em;
}

.nn-controls input[type="range"] {
   width: 100px;
}

.nn-controls span {
   color: #4CAF50;
   font-weight: bold;
   min-width: 30px;
}

/* Network layer labels */
.layer-label {
   position: absolute;
   color: white;
   font-size: 0.9em;
   background: rgba(0, 0, 0, 0.7);
   padding: 4px 8px;
   border-radius: 4px;
   pointer-events: none;
   z-index: 100;
}

/* Responsive Design */
@media (max-width: 1200px) {
   .confidence-panel {
      width: 250px;
   }
}

@media (max-width: 768px) {
   .menu-header h1 {
       font-size: 2.5em;
   }
   
   .menu-grid {
       grid-template-columns: 1fr;
       gap: 20px;
   }
   
   .menu-item {
       padding: 20px;
   }
   
   .view-header {
       padding: 10px 15px;
       flex-direction: column;
       align-items: flex-start;
       gap: 10px;
   }
   
   .controls {
       flex-direction: column;
       gap: 15px;
       padding: 15px;
   }
   
   .nn-container {
      flex-direction: column;
      height: auto;
   }
   
   #nnCanvas {
      height: 400px;
   }
   
   .confidence-panel {
      width: 100%;
      height: 200px;
      border-left: none;
      border-top: 2px solid #333;
   }
   
   .confidence-bars {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px;
   }
   
   .confidence-item {
      flex-direction: column;
      flex: 1;
      min-width: 60px;
      text-align: center;
   }
   
   .confidence-bar {
      width: 100%;
      height: 15px;
   }
   
   .nn-controls {
      flex-direction: column;
      gap: 15px;
   }
}