body {
    margin: 0;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Segoe UI', sans-serif; /* Friendly font */
    background-color: #1a1a24;
    color: #fff;
    display: flex;
    justify-content: center;
  }
  
  .app-container { width: 100%; max-width: 1200px; padding: 20px; }
  
  header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #ff007f; padding-bottom: 15px; margin-bottom: 20px; }
  h1 { color: #ff007f; margin: 0; text-shadow: 0 0 15px rgba(255, 0, 127, 0.6); font-size: 2rem;}
  
  nav { display: flex; gap: 10px; }
  .tab { background: #2d2d3a; color: #fff; border: 2px solid transparent; padding: 12px 20px; border-radius: 30px; cursor: pointer; font-weight: bold; transition: 0.3s; font-size: 1rem;}
  .tab:hover { background: #404052; }
  .tab.active { background: #ff007f; box-shadow: 0 0 20px rgba(255, 0, 127, 0.6); }
  
  .workspace { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
  
  .canvas-container { flex: 2; min-width: 600px; display: flex; flex-direction: column; gap: 15px; }
  
  canvas { 
    display: block; width: 100%; background: #000; border: 4px solid #404052; 
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  }
  
  .controls { flex: 1; min-width: 320px; background: #242430; padding: 25px; border-radius: 15px; border: 2px solid #404052; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
  .control-module { display: none; }
  .control-module.active { display: block; animation: fadeIn 0.4s ease-in; }
  
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  
  h2 { margin-top: 0; color: #00e5ff; font-size: 1.5rem; text-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
  
  label { display: flex; flex-direction: column; font-size: 1rem; margin-bottom: 20px; font-weight: bold; }
  .highlight { color: #ffea00; font-size: 1.2rem; text-shadow: 0 0 8px rgba(255, 234, 0, 0.5); }
  
  select, input[type="range"] { width: 100%; padding: 10px; margin-top: 8px; background: #1a1a24; color: white; border: 2px solid #404052; border-radius: 8px; font-size: 1rem; cursor: pointer;}
  input[type="range"] { accent-color: #00e5ff; }
  
  /* Lens Toggles */
  .toggle-group { display: flex; gap: 10px; margin-bottom: 20px; }
  .lens-btn { flex: 1; padding: 10px; background: #2d2d3a; color: white; border: 2px solid transparent; border-radius: 8px; cursor: pointer; font-weight: bold; }
  .lens-btn.active { background: #00e5ff; color: #000; box-shadow: 0 0 15px rgba(0, 229, 255, 0.6); }
  
  .data-readout { background: #111; padding: 15px; border-radius: 8px; color: #39ff14; border: 2px solid #39ff14; font-size: 1.2rem; text-align: center; box-shadow: inset 0 0 10px rgba(57, 255, 20, 0.2); }
  
  /* Kids Guide */
  .kids-guide { background: #242430; padding: 20px; border-radius: 12px; border: 2px dashed #00e5ff; }
  .kids-guide h3 { color: #00e5ff; margin-top: 0; text-align: center; font-size: 1.4rem; }
  .guide-flex { display: flex; gap: 15px; }
  .step { flex: 1; padding: 15px; border-radius: 8px; font-size: 0.95rem; line-height: 1.4; color: #111; }
  .box-1 { background: #ff7eb3; }
  .box-2 { background: #81ecec; }
  .box-3 { background: #ffeaa7; }
  .hidden { display: none; }