.shell-nav{position:fixed;top:0;left:0;right:0;z-index:2000;background:rgba(26,26,46,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.06)}
.shell-nav.scrolled{background:rgba(15,15,26,0.96);box-shadow:0 4px 30px rgba(0,0,0,0.5)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:64px}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:17px;color:#f0f0f0}
.nav-brand .brand-icon{width:34px;height:34px;background:linear-gradient(135deg,#7DB6B1,#5a9e98);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#0f0f1a}
.nav-brand span{color:#7DB6B1}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{padding:8px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;color:#9ca3af}
.nav-link:hover{color:#f0f0f0;background:rgba(255,255,255,0.04)}
.nav-cta{padding:8px 24px;border-radius:8px;background:linear-gradient(135deg,#7DB6B1,#5a9e98);color:#0f0f1a;text-decoration:none;font-size:14px;font-weight:700;display:inline-block}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(125,182,177,0.25)}
.nav-progress{position:absolute;bottom:-2px;left:0;height:2px;background:linear-gradient(90deg,#7DB6B1,#a3d4cf);width:0%;transition:width 0.1s linear}
.breadcrumbs{display:flex;align-items:center;gap:8px;padding:80px 32px 8px;max-width:1280px;margin:0 auto;font-size:13px;color:#6b7280}
.breadcrumbs a{color:#9ca3af;text-decoration:none}
.breadcrumbs a:hover{color:#7DB6B1}
.breadcrumbs .current{color:#f0f0f0;font-weight:600}
.breadcrumbs .separator{margin:0 2px}
.shell-nav{position:fixed;top:0;left:0;right:0;z-index:2000;background:rgba(26,26,46,0.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.06)}.shell-nav.scrolled{background:rgba(15,15,26,0.96);box-shadow:0 4px 30px rgba(0,0,0,0.5)}.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:64px}.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:17px;color:#f0f0f0}.nav-brand .brand-icon{width:34px;height:34px;background:linear-gradient(135deg,#7DB6B1,#5a9e98);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#0f0f1a}.nav-brand span{color:#7DB6B1}.nav-links{display:flex;align-items:center;gap:4px}.nav-link{padding:8px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;color:#9ca3af}.nav-link:hover{color:#f0f0f0;background:rgba(255,255,255,0.04)}.nav-cta{padding:8px 24px;border-radius:8px;background:linear-gradient(135deg,#7DB6B1,#5a9e98);color:#0f0f1a;text-decoration:none;font-size:14px;font-weight:700;display:inline-block}.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(125,182,177,0.25)}.nav-progress{position:absolute;bottom:-2px;left:0;height:2px;background:linear-gradient(90deg,#7DB6B1,#a3d4cf);width:0%;transition:width 0.1s linear}.breadcrumbs{display:flex;align-items:center;gap:8px;padding:80px 32px 8px;max-width:1280px;margin:0 auto;font-size:13px;color:#6b7280}.breadcrumbs a{color:#9ca3af;text-decoration:none}.breadcrumbs a:hover{color:#7DB6B1}.breadcrumbs .current{color:#f0f0f0;font-weight:600}.breadcrumbs .separator{margin:0 2px}
/* ===== Global Styles ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      background-attachment: fixed;
      color: #333;
      line-height: 1.6;
      padding-bottom: 60px;
    }

    /* ===== Navigation ===== */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: rgba(30, 30, 50, 0.85);
      backdrop-filter: blur(10px);
      padding: 15px 20px;
      z-index: 1000;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    }

    nav ul {
      list-style: none;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 25px;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      font-size: 15px;
      transition: color 0.3s ease;
      padding: 5px 10px;
    }

    nav a:hover {
      color: #a78bfa;
    }

    /* ===== Main Title ===== */
    h1 {
      text-align: center;
      color: white;
      font-size: 2.8em;
      font-weight: 700;
      margin-top: 100px;
      margin-bottom: 50px;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    /* ===== Card Styles ===== */
    section {
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 20px;
      opacity: 0;
      transform: translateY(30px);
      animation: revealCard 0.6s ease forwards;
    }

    @keyframes revealCard {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      padding: 35px;
      margin-bottom: 25px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    .card h2 {
      color: #667eea;
      font-size: 2em;
      margin-bottom: 20px;
      font-weight: 700;
    }

    .card h3 {
      color: #764ba2;
      font-size: 1.5em;
      margin-top: 30px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    /* ===== Learning Outcomes ===== */
    .learning-outcomes {
      background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
      border-left: 4px solid #667eea;
      padding: 20px;
      margin: 25px 0;
      border-radius: 8px;
    }

    .learning-outcomes h3 {
      color: #667eea;
      margin-top: 0;
      font-size: 1.2em;
    }

    .learning-outcomes ul {
      margin-left: 20px;
      margin-top: 10px;
    }

    .learning-outcomes li {
      margin: 8px 0;
    }

    /* ===== Canvas Styles ===== */
    canvas {
      display: block;
      margin: 20px auto;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      background: #f8fafc;
      max-width: 100%;
      height: auto;
    }

    /* ===== Controls ===== */
    .controls {
      background: #f8fafc;
      border-radius: 12px;
      padding: 25px;
      margin: 20px 0;
      border: 1px solid #e2e8f0;
    }

    .control-group {
      margin: 18px 0;
    }

    .control-group label {
      display: block;
      font-weight: 600;
      color: #475569;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .control-group input[type="range"] {
      width: 100%;
      height: 8px;
      border-radius: 5px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
    }

    .control-group input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }

    .control-group input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      cursor: pointer;
      border: none;
      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    }

    .control-group .value-display {
      display: inline-block;
      margin-left: 10px;
      font-weight: 600;
      color: #667eea;
    }

    /* ===== Buttons ===== */
    button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 12px 28px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
      font-family: 'Inter', sans-serif;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    button:active {
      transform: translateY(0);
    }

    /* ===== Stats Display ===== */
    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 20px 0;
    }

    .stat-box {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

    .stat-box .label {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 5px;
    }

    .stat-box .value {
      font-size: 24px;
      font-weight: 700;
    }

    /* ===== Key Concepts ===== */
    .key-concepts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
      margin: 25px 0;
    }

    .concept {
      background: linear-gradient(135deg, #f0f4ff 0%, #f5f3ff 100%);
      padding: 18px;
      border-radius: 10px;
      border-left: 4px solid #667eea;
    }

    .concept h4 {
      color: #667eea;
      margin-bottom: 8px;
      font-size: 1.1em;
    }

    .concept p {
      font-size: 14px;
      color: #475569;
    }

    /* ===== Formula Boxes ===== */
    .formula {
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      border: 2px solid #3b82f6;
      padding: 20px;
      margin: 20px 0;
      border-radius: 10px;
      text-align: center;
      font-size: 1.3em;
      font-weight: 600;
      color: #1e40af;
    }

    /* ===== Example Boxes ===== */
    .example {
      background: #fef3c7;
      border-left: 4px solid #f59e0b;
      padding: 20px;
      margin: 20px 0;
      border-radius: 8px;
    }

    .example h4 {
      color: #d97706;
      margin-bottom: 10px;
    }

    /* ===== Explanation Boxes ===== */
    .explanation {
      background: #f1f5f9;
      border-left: 4px solid #3b82f6;
      padding: 20px;
      margin: 20px 0;
      border-radius: 8px;
      font-style: italic;
      color: #475569;
    }

    /* ===== Calculator Sections ===== */
    .calculator {
      background: #f0fdf4;
      border: 2px solid #10b981;
      border-radius: 12px;
      padding: 25px;
      margin: 25px 0;
    }

    .calculator h4 {
      color: #059669;
      margin-bottom: 15px;
      font-size: 1.2em;
    }

    .calculator input[type="number"] {
      width: 100%;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 8px;
      font-size: 15px;
      margin: 8px 0;
      font-family: 'Inter', sans-serif;
    }

    .calculator input[type="number"]:focus {
      outline: none;
      border-color: #667eea;
    }

    .calculator-result {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin-top: 15px;
      border: 2px solid #d1d5db;
      min-height: 60px;
    }

    /* ===== Graph Container ===== */
    .graph-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      margin: 25px 0;
    }

    .graph-box {
      flex: 1;
      min-width: 280px;
      background: #f8fafc;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }

    .graph-box h4 {
      text-align: center;
      color: #667eea;
      margin-bottom: 15px;
    }

    /* ===== Quiz Styles ===== */
    .quiz-question {
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 25px;
      margin: 20px 0;
      transition: border-color 0.3s ease;
    }

    .quiz-question.correct {
      border-color: #10b981;
      background: #f0fdf4;
    }

    .quiz-question.incorrect {
      border-color: #ef4444;
      background: #fef2f2;
    }

    .quiz-question h4 {
      color: #334155;
      margin-bottom: 15px;
      font-size: 1.1em;
    }

    .quiz-options {
      margin: 15px 0;
    }

    .quiz-option {
      display: block;
      background: #f8fafc;
      padding: 12px 18px;
      margin: 10px 0;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 2px solid transparent;
    }

    .quiz-option:hover {
      background: #e0e7ff;
      border-color: #667eea;
    }

    .quiz-option input[type="radio"] {
      margin-right: 10px;
    }

    .quiz-feedback {
      margin-top: 15px;
      padding: 15px;
      border-radius: 8px;
      font-weight: 500;
      display: none;
    }

    .quiz-feedback.correct {
      background: #d1fae5;
      color: #065f46;
      display: block;
    }

    .quiz-feedback.incorrect {
      background: #fee2e2;
      color: #991b1b;
      display: block;
    }

    .quiz-progress {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #667eea;
      margin: 20px 0;
    }

    .quiz-score {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 30px;
      border-radius: 12px;
      text-align: center;
      font-size: 1.5em;
      margin: 25px 0;
      display: none;
    }

    /* ===== Responsive Design ===== */
    @media (max-width: 768px) {
      h1 {
        font-size: 2em;
        margin-top: 80px;
      }

      .card {
        padding: 25px 20px;
      }

      .card h2 {
        font-size: 1.6em;
      }

      nav ul {
        gap: 15px;
      }

      nav a {
        font-size: 14px;
      }

      .stats {
        grid-template-columns: 1fr;
      }

      .graph-container {
        flex-direction: column;
      }
    }

    /* ===== Simulation Containers ===== */
    .simulation-container {
      background: #f8fafc;
      border-radius: 12px;
      padding: 25px;
      margin: 25px 0;
      border: 1px solid #e2e8f0;
    }

    .side-by-side {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      align-items: flex-start;
    }

    .sim-box {
      flex: 1;
      min-width: 280px;
    }

    /* ===== Loading Animation ===== */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .fade-in {
      animation: fadeIn 0.5s ease-in;
    }