/* =========================================
   financial-amortization-npv-calculator.html
   ========================================= */
/* ═══════════════════════════════════
       DESIGN TOKENS — Vercel-inspired
    ═══════════════════════════════════ */
    :root {
      --color-bg:        #FAFAFA;
      --color-surface:   #FFFFFF;
      --color-border:    #E5E7EB;
      --color-border-2:  #D1D5DB;
      --color-text-1:    #0A0A0A;
      --color-text-2:    #374151;
      --color-text-3:    #6B7280;
      --color-text-4:    #9CA3AF;
      --color-accent:    #0070F3;
      --color-accent-hv: #0051CC;
      --color-success:   #10B981;
      --color-warn:      #F59E0B;
      --color-danger:    #EF4444;
      --color-tag-bg:    #EFF6FF;
      --color-tag-text:  #1D4ED8;
      --radius-sm:       6px;
      --radius-md:       10px;
      --radius-lg:       16px;
      --shadow-sm:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md:       0 4px 16px rgba(0,0,0,.08);
      --shadow-lg:       0 12px 40px rgba(0,0,0,.10);
      --font-sans:       'Inter', system-ui, -apple-system, sans-serif;
      --font-display:    'Outfit', 'Inter', sans-serif;
      --transition:      150ms cubic-bezier(.4,0,.2,1);
    }

    /* ═══════════════ RESET / BASE ═══════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--font-sans);
      background: var(--color-bg);
      color: var(--color-text-2);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    /* ═══════════════ NAV ═══════════════ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-border);
    }
    .nav-inner {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 24px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .nav-logo {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--color-text-1);
      text-decoration: none;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    .nav-logo span { color: var(--color-accent); }
    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--color-accent);
      color: #fff;
      font-size: .8rem;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      transition: background var(--transition), transform var(--transition);
      white-space: nowrap;
    }
    .nav-cta:hover { background: var(--color-accent-hv); transform: translateY(-1px); }
    .breadcrumb {
      font-size: .75rem;
      color: var(--color-text-3);
    }
    .breadcrumb a { color: var(--color-text-3); text-decoration: none; }
    .breadcrumb a:hover { color: var(--color-accent); }
    .breadcrumb span { margin: 0 4px; }

    /* ═══════════════ HERO ═══════════════ */
    .hero {
      max-width: 1120px;
      margin: 0 auto;
      padding: 64px 24px 48px;
      text-align: center;
      display: block;
      min-height: auto;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--color-tag-bg);
      color: var(--color-tag-text);
      font-size: .72rem;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 99px;
      border: 1px solid #BFDBFE;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 20px;
    }
    .hero-badge::before { content: "⚡"; }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 900;
      color: var(--color-text-1);
      line-height: 1.12;
      letter-spacing: -0.03em;
      margin-bottom: 16px;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--color-accent);
    }
    .hero-sub {
      font-size: 1.05rem;
      color: var(--color-text-3);
      max-width: 600px;
      margin: 0 auto 28px;
    }
    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }
    .hero-tag {
      font-size: .72rem;
      font-weight: 500;
      color: var(--color-text-3);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      padding: 4px 10px;
      border-radius: 99px;
    }

    /* ═══════════════ CALCULATOR CARD ═══════════════ */
    .calc-wrapper {
      max-width: 880px;
      margin: 0 auto 80px;
      padding: 0 24px;
    }

    .calc-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    /* Mode Toggle */
    .mode-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--color-border);
    }
    .mode-btn {
      padding: 16px 24px;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      font-family: var(--font-sans);
      font-size: .875rem;
      font-weight: 600;
      color: var(--color-text-3);
      cursor: pointer;
      transition: all var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .mode-btn:first-child { border-right: 1px solid var(--color-border); }
    .mode-btn.active {
      color: var(--color-accent);
      border-bottom-color: var(--color-accent);
      background: rgba(0,112,243,.03);
    }
    .mode-btn:hover:not(.active) { color: var(--color-text-1); background: rgba(0,0,0,.02); }

    /* Panel */
    .panel { display: none; padding: 32px; }
    .panel.active { display: block; }

    /* Form Grid */
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .field.full { grid-column: 1 / -1; }

    label {
      font-size: .8rem;
      font-weight: 600;
      color: var(--color-text-1);
      letter-spacing: .01em;
    }
    label .hint {
      font-weight: 400;
      color: var(--color-text-4);
      margin-left: 4px;
    }

    input[type="number"], input[type="text"] {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--color-border-2);
      border-radius: var(--radius-sm);
      font-family: var(--font-sans);
      font-size: .9rem;
      color: var(--color-text-1);
      background: var(--color-bg);
      transition: border-color var(--transition), box-shadow var(--transition);
      outline: none;
    }
    input[type="number"]:focus, input[type="text"]:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px rgba(0,112,243,.12);
      background: var(--color-surface);
    }
    input[type="number"]::placeholder, input[type="text"]::placeholder { color: var(--color-text-4); }

    /* Cash flows list */
    .cf-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 4px;
    }
    .cf-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cf-row .period-badge {
      font-size: .72rem;
      font-weight: 700;
      color: var(--color-text-3);
      background: var(--color-border);
      border-radius: var(--radius-sm);
      padding: 6px 8px;
      min-width: 40px;
      text-align: center;
      flex-shrink: 0;
    }
    .cf-row input { flex: 1; }
    .cf-remove {
      background: none;
      border: 1px solid var(--color-border-2);
      border-radius: var(--radius-sm);
      color: var(--color-text-3);
      width: 32px;
      height: 36px;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
      flex-shrink: 0;
    }
    .cf-remove:hover { background: #FEF2F2; border-color: var(--color-danger); color: var(--color-danger); }

    .add-cf-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--color-bg);
      border: 1px dashed var(--color-border-2);
      border-radius: var(--radius-sm);
      font-size: .8rem;
      font-weight: 600;
      color: var(--color-text-3);
      cursor: pointer;
      transition: all var(--transition);
      margin-top: 8px;
    }
    .add-cf-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(0,112,243,.03); }

    /* Action buttons */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 28px;
      background: var(--color-accent);
      color: #fff;
      font-family: var(--font-sans);
      font-size: .9rem;
      font-weight: 700;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all var(--transition);
      letter-spacing: -0.01em;
    }
    .btn-primary:hover { background: var(--color-accent-hv); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,112,243,.35); }
    .btn-primary:active { transform: translateY(0); }

    .btn-ghost {
      padding: 12px 20px;
      background: transparent;
      color: var(--color-text-3);
      font-family: var(--font-sans);
      font-size: .875rem;
      font-weight: 500;
      border: 1px solid var(--color-border-2);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all var(--transition);
    }
    .btn-ghost:hover { background: var(--color-bg); color: var(--color-text-1); border-color: var(--color-text-3); }

    .btn-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 28px;
      flex-wrap: wrap;
    }

    /* ═══════════════ RESULTS ═══════════════ */
    .results { margin-top: 28px; display: none; }
    .results.visible { display: block; }

    .results-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .results-header h2 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--color-text-1);
      letter-spacing: -0.02em;
    }
    .export-btn {
      padding: 7px 14px;
      background: var(--color-bg);
      border: 1px solid var(--color-border-2);
      border-radius: var(--radius-sm);
      font-size: .78rem;
      font-weight: 600;
      color: var(--color-text-3);
      cursor: pointer;
      transition: all var(--transition);
    }
    .export-btn:hover { background: var(--color-surface); color: var(--color-text-1); }

    /* KPI chips */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    .kpi-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 18px 16px;
      text-align: center;
    }
    .kpi-label {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--color-text-4);
      margin-bottom: 6px;
    }
    .kpi-value {
      font-family: var(--font-display);
      font-size: 1.55rem;
      font-weight: 900;
      color: var(--color-text-1);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .kpi-value.positive { color: var(--color-success); }
    .kpi-value.negative { color: var(--color-danger); }
    .kpi-value.neutral  { color: var(--color-warn); }
    .kpi-sub { font-size: .7rem; color: var(--color-text-4); margin-top: 4px; }

    /* Step-by-step NPV breakdown */
    .steps-table-wrapper {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .82rem;
    }
    thead th {
      background: var(--color-bg);
      padding: 12px 16px;
      text-align: left;
      font-weight: 700;
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--color-text-3);
      border-bottom: 1px solid var(--color-border);
    }
    thead th:not(:first-child) { text-align: right; }
    tbody tr { border-bottom: 1px solid var(--color-border); transition: background var(--transition); }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: rgba(0,112,243,.025); }
    tbody td { padding: 12px 16px; color: var(--color-text-2); }
    tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
    tbody td:first-child { font-weight: 600; color: var(--color-text-1); }
    .td-positive { color: var(--color-success) !important; font-weight: 600; }
    .td-negative { color: var(--color-danger) !important; }
    .td-muted    { color: var(--color-text-4) !important; }

    /* Divider inside panel */
    .divider {
      border: none;
      border-top: 1px solid var(--color-border);
      margin: 28px 0;
    }

    /* ═══════════════ CONTENT SECTION ═══════════════ */
    .content-section {
      max-width: 860px;
      margin: 0 auto 100px;
      padding: 0 24px;
    }

    /* Section heading */
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--color-accent);
      margin-bottom: 12px;
    }

    .content-section h2 {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
      font-weight: 800;
      color: var(--color-text-1);
      line-height: 1.2;
      letter-spacing: -0.025em;
      margin-bottom: 16px;
    }

    .content-section h3 {
      font-family: var(--font-sans);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--color-text-1);
      margin: 32px 0 10px;
      letter-spacing: -0.01em;
    }

    .content-section p {
      font-size: .95rem;
      color: var(--color-text-2);
      margin-bottom: 16px;
      line-height: 1.75;
    }

    .content-section ul, .content-section ol {
      padding-left: 22px;
      margin-bottom: 16px;
    }
    .content-section li {
      font-size: .93rem;
      color: var(--color-text-2);
      margin-bottom: 6px;
      line-height: 1.65;
    }

    /* Formula block */
    .formula-block {
      background: #F8FAFC;
      border: 1px solid var(--color-border);
      border-left: 3px solid var(--color-accent);
      border-radius: var(--radius-sm);
      padding: 16px 20px;
      font-size: .88rem;
      font-family: 'Courier New', monospace;
      color: var(--color-text-1);
      margin: 16px 0 24px;
      overflow-x: auto;
      line-height: 1.7;
    }

    /* Callout box */
    .callout {
      background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
      border: 1px solid #BFDBFE;
      border-radius: var(--radius-md);
      padding: 24px 28px;
      margin: 32px 0;
    }
    .callout h4 {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 800;
      color: var(--color-text-1);
      margin-bottom: 8px;
      letter-spacing: -0.015em;
    }
    .callout p { font-size: .88rem; margin-bottom: 0; }
    .callout a {
      color: var(--color-accent);
      font-weight: 600;
      text-decoration: none;
    }
    .callout a:hover { text-decoration: underline; }

    /* CTA banner */
    .cta-banner {
      background: linear-gradient(135deg, #0A0A0A 0%, #1F2937 100%);
      border-radius: var(--radius-lg);
      padding: 48px 40px;
      text-align: center;
      margin: 48px 0;
    }
    .cta-banner h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: 12px;
    }
    .cta-banner p { color: #9CA3AF; font-size: .95rem; margin-bottom: 28px; }
    .cta-banner .btn-primary {
      font-size: 1rem;
      padding: 14px 36px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #3B82F6 0%, #0070F3 100%);
      box-shadow: 0 0 32px rgba(59,130,246,.4);
    }
    .cta-banner .btn-primary:hover { background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); }
    .cta-services {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-top: 20px;
    }
    .cta-tag {
      font-size: .72rem;
      font-weight: 500;
      color: rgba(255,255,255,.5);
      background: rgba(255,255,255,.07);
      padding: 4px 10px;
      border-radius: 99px;
      border: 1px solid rgba(255,255,255,.1);
    }

    /* FAQ accordion */
    .faq-list { margin: 20px 0; }
    .faq-item {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      margin-bottom: 8px;
      overflow: hidden;
      transition: box-shadow var(--transition);
    }
    .faq-item:hover { box-shadow: var(--shadow-sm); }
    .faq-question {
      width: 100%;
      background: var(--color-surface);
      border: none;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-sans);
      font-size: .9rem;
      font-weight: 600;
      color: var(--color-text-1);
      transition: background var(--transition);
    }
    .faq-question:hover { background: var(--color-bg); }
    .faq-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--color-bg);
      border: 1px solid var(--color-border-2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      flex-shrink: 0;
      transition: transform var(--transition), background var(--transition);
    }
    .faq-item.open .faq-icon {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: #fff;
      transform: rotate(45deg);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 350ms ease;
    }
    .faq-item.open .faq-answer { max-height: 600px; }
    .faq-answer-inner {
      padding: 0 20px 20px;
      font-size: .88rem;
      color: var(--color-text-2);
      line-height: 1.7;
      border-top: 1px solid var(--color-border);
    }

    /* Content separator */
    .content-divider {
      border: none;
      border-top: 1px solid var(--color-border);
      margin: 48px 0;
    }

    /* Footer */
    .footer {
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      padding: 32px 24px;
      text-align: center;
    }
    .footer p { font-size: .8rem; color: var(--color-text-4); }
    .footer a { color: var(--color-accent); text-decoration: none; }
    .footer a:hover { text-decoration: underline; }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--color-text-1);
      color: #fff;
      font-size: .82rem;
      font-weight: 600;
      padding: 12px 20px;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-lg);
      z-index: 9999;
      opacity: 0;
      transform: translateY(10px);
      transition: all 300ms ease;
      pointer-events: none;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    /* Responsive */
    @media (max-width: 640px) {
      .panel { padding: 20px; }
      .hero { padding: 40px 20px 32px; }
      .cta-banner { padding: 32px 24px; }
      .nav-inner { padding: 0 16px; }
      .breadcrumb { display: none; }
    }

    /* Print — export table nicely */
    @media print {
      .nav, .hero-badge, .btn-row, .cta-banner, .footer { display: none; }
      .calc-card, .content-section { box-shadow: none; border: none; }
    }


/* =========================================
   genetics-punnett-square-hardy-weinberg-simulator.html
   ========================================= */
/* ============================================
     ROOT & DESIGN TOKENS
  ============================================ */
  :root {
    --bg: #ffffff;
    --bg-subtle: #fafafa;
    --bg-muted: #f4f4f5;
    --surface: #ffffff;
    --border: #e4e4e7;
    --border-strong: #d1d1d6;
    --text-primary: #09090b;
    --text-secondary: #52525b;
    --text-muted: #71717a;
    --text-placeholder: #a1a1aa;
    --accent: #18181b;
    --accent-hover: #3f3f46;
    --accent-light: #f4f4f5;
    --success: #16a34a;
    --success-bg: #f0fdf4;
    --success-border: #bbf7d0;
    --info: #0ea5e9;
    --info-bg: #f0f9ff;
    --info-border: #bae6fd;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-border: #fed7aa;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --max-w: 1160px;
  }

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

  html { scroll-behavior: smooth; font-size: 16px; }

  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ============================================
     HEADER / NAV
  ============================================ */
  .site-header {
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
  }
  .logo-mark {
    width: 32px; height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
  }
  .logo-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .logo-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
  }
  .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: background 0.18s, transform 0.14s;
    white-space: nowrap;
  }
  .header-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

  /* ============================================
     BREADCRUMB
  ============================================ */
  .breadcrumb-bar {
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
    padding: 10px 24px;
  }
  .breadcrumb-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
  }
  .breadcrumb-inner a { color: var(--text-muted); text-decoration: none; }
  .breadcrumb-inner a:hover { color: var(--text-primary); text-decoration: underline; }
  .breadcrumb-sep { color: var(--border-strong); }
  .breadcrumb-current { color: var(--text-secondary); font-weight: 500; }

  /* ============================================
     HERO SECTION
  ============================================ */
  .hero {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 64px 24px 48px;
    text-align: center;
    display: block;
    min-height: auto;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-light);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 24px;
    letter-spacing: 0.01em;
  }
  .hero-badge-dot {
    width: 6px; height: 6px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s ease infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
  }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 16px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero h1 span { color: var(--text-muted); }
  .hero-desc {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.65;
  }
  .hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
  }
  .pill {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
  }

  /* ============================================
     TOOL CARD — DUAL-TOGGLE DASHBOARD
  ============================================ */
  .tool-wrapper {
    max-width: var(--max-w);
    margin: 0 auto 64px;
    padding: 0 24px;
  }
  .tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  /* Tab Toggle */
  .tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
    padding: 6px 6px 0;
    gap: 2px;
  }
  .tab-btn {
    flex: 1;
    max-width: 300px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
    letter-spacing: 0.01em;
  }
  .tab-btn.active {
    color: var(--text-primary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom-color: transparent;
    position: relative;
    top: 1px;
  }
  .tab-btn:not(.active):hover { color: var(--text-secondary); background: var(--bg-muted); }

  /* Panel Content */
  .panel { display: none; padding: 32px; }
  .panel.active { display: block; }

  /* ============================================
     PUNNETT SQUARE PANEL
  ============================================ */
  .panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .panel-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
  }

  .input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
  @media (max-width: 560px) { .input-grid { grid-template-columns: 1fr; } }

  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .form-input {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    letter-spacing: 0.04em;
  }
  .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(24,24,27,0.08);
  }
  .form-input::placeholder { color: var(--text-placeholder); font-weight: 400; }
  .form-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.18s, transform 0.14s, box-shadow 0.18s;
    letter-spacing: -0.01em;
  }
  .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  .btn-primary:active { transform: translateY(0); }
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
  }
  .btn-secondary:hover { background: var(--bg-muted); border-color: var(--border-strong); }

  .btn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }

  /* Punnett Output */
  .output-section { animation: fadeIn 0.3s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .output-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .punnett-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    background: var(--bg-subtle);
  }
  .punnett-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 200px;
    font-family: var(--font-mono);
    font-size: 14px;
  }
  .punnett-table th, .punnett-table td {
    border: 1px solid var(--border);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    min-width: 70px;
  }
  .punnett-table th {
    background: var(--bg-muted);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 10px 14px;
  }
  .punnett-table th.corner {
    background: var(--bg-muted);
    color: var(--text-placeholder);
    font-size: 11px;
  }
  .punnett-table td {
    padding: 14px;
    transition: background 0.15s;
    cursor: default;
    font-weight: 500;
    color: var(--text-primary);
  }
  .punnett-table td:hover { background: var(--bg-muted); }
  .punnett-table td.homozygous-dom { color: #16a34a; }
  .punnett-table td.heterozygous { color: #0ea5e9; }
  .punnett-table td.homozygous-rec { color: #dc2626; }

  /* Ratio Grid */
  .ratio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
  }
  .ratio-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
  }
  .ratio-genotype {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  .ratio-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 4px;
  }
  .ratio-pct {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
  }

  .phenotype-bar-wrap { margin-bottom: 24px; }
  .pheno-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .pheno-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 130px; font-family: var(--font-mono); }
  .pheno-bar-bg { flex: 1; height: 8px; background: var(--bg-muted); border-radius: 99px; overflow: hidden; }
  .pheno-bar-fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
  .pheno-pct { font-size: 12px; color: var(--text-muted); min-width: 40px; text-align: right; }

  /* Error */
  .error-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13px;
    color: #b91c1c;
    margin-bottom: 16px;
    animation: fadeIn 0.2s ease;
  }
  .info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13px;
    color: #0369a1;
    margin-bottom: 16px;
  }

  /* ============================================
     HARDY-WEINBERG PANEL
  ============================================ */
  .hw-mode-toggle {
    display: flex;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 3px;
    width: fit-content;
    margin-bottom: 24px;
  }
  .hw-mode-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.01em;
  }
  .hw-mode-btn.active {
    background: var(--bg);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
  }

  .hw-inputs { margin-bottom: 20px; }
  .hw-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .hw-field { display: flex; flex-direction: column; gap: 6px; }
  .hw-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .hw-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  /* HW Results */
  .hw-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .hw-result-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  .hw-result-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
  .hw-result-sym {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hw-result-val {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .hw-result-label {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .steps-section {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
  }
  .steps-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .step-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
  }
  .step-num {
    width: 22px; height: 22px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .step-content { flex: 1; }
  .step-eq {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 6px 10px;
    margin-top: 5px;
    display: inline-block;
    letter-spacing: 0.04em;
  }
  .step-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  /* Equilibrium test */
  .eq-test {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  .eq-test.pass { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
  .eq-test.fail { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); }

  /* ============================================
     DIVIDER
  ============================================ */
  .divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
  }

  /* ============================================
     CONTENT SECTION
  ============================================ */
  .content-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 64px 24px 80px;
  }
  .content-wrap h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 3.5vw, 26px);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin: 48px 0 16px;
    scroll-margin-top: 80px;
  }
  .content-wrap h2:first-of-type { margin-top: 0; }
  .content-wrap h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    margin: 28px 0 10px;
  }
  .content-wrap p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 16px;
  }
  .content-wrap strong { color: var(--text-primary); font-weight: 600; }
  .content-wrap a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .content-wrap a:hover { color: var(--text-secondary); }
  .content-wrap ul, .content-wrap ol {
    padding-left: 20px;
    margin-bottom: 16px;
  }
  .content-wrap li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 6px;
  }
  .content-wrap li strong { color: var(--text-primary); }

  /* Callout box */
  .callout {
    border-left: 3px solid var(--accent);
    background: var(--bg-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 16px 20px;
    margin: 24px 0;
  }
  .callout-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .callout p { margin: 0; font-size: 14px; }

  .service-box {
    background: var(--text-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 36px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
  }
  .service-box::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
  }
  .service-box h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .service-box p { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.65; margin-bottom: 20px; }
  .service-box .btn-white {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    transition: background 0.18s, transform 0.14s;
  }
  .service-box .btn-white:hover { background: #f4f4f5; transform: translateY(-1px); }

  /* Formula display */
  .formula-block {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 20px 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 2;
  }

  /* Condition table */
  .conditions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
  }
  .conditions-table th {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .conditions-table td {
    border: 1px solid var(--border);
    padding: 12px 14px;
    color: var(--text-secondary);
    vertical-align: top;
    line-height: 1.5;
  }
  .conditions-table tr:hover td { background: var(--bg-subtle); }
  .conditions-table .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
  }
  .badge-green { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
  .badge-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

  /* FAQ */
  .faq-list { margin: 20px 0; }
  .faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
    background: var(--bg);
    transition: background 0.15s;
    gap: 12px;
  }
  .faq-q:hover { background: var(--bg-subtle); }
  .faq-icon {
    width: 20px; height: 20px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.22s, border-color 0.18s;
  }
  .faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--accent); color: var(--accent); }
  .faq-a {
    display: none;
    padding: 0 18px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    background: var(--bg);
  }
  .faq-item.open .faq-a { display: block; }

  /* ============================================
     FOOTER CTA BANNER
  ============================================ */
  .cta-banner {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    padding: 60px 24px;
    text-align: center;
  }
  .cta-inner { max-width: 560px; margin: 0 auto; }
  .cta-banner h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .cta-banner p {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.65;
  }
  .cta-btn-group { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: var(--radius-sm);
    transition: background 0.18s, transform 0.14s, box-shadow 0.18s;
  }
  .cta-btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
  .cta-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.18s, color 0.18s, background 0.18s;
  }
  .cta-btn-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-muted); }

  /* Footer */
  .site-footer {
    border-top: 1px solid var(--border);
    padding: 24px;
    text-align: center;
  }
  .footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-inner a { color: var(--text-muted); text-decoration: none; }
  .footer-inner a:hover { color: var(--text-primary); }

  /* Responsive */
  @media (max-width: 640px) {
    .panel { padding: 20px; }
    .hero { padding: 40px 16px 32px; }
    .tool-wrapper { padding: 0 16px; }
    .content-wrap { padding: 40px 16px 60px; }
    .service-box { padding: 24px; }
  }


/* =========================================
   truth-table-generator.html
   ========================================= */
/* ================================================================
           DESIGN TOKENS — matches variables.css
        ================================================================ */
        :root {
            --primary: #2563EB;
            --primary-light: #60A5FA;
            --primary-gradient: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            --accent-pink: #60A5FA;
            --accent-purple: #3B82F6;
            --accent-cyan: #93C5FD;
            --accent-orange: #F59E0B;
            --bg-body: #F8F9FA;
            --bg-glass: rgba(255,255,255,0.8);
            --bg-glass-strong: rgba(255,255,255,0.95);
            --bg-card: #ffffff;
            --border-glass: rgba(0,0,0,0.05);
            --border-color: rgba(0,0,0,0.08);
            --text-primary: #111827;
            --text-heading: #000000;
            --text-main: #374151;
            --text-secondary: #6B7280;
            --text-muted: #9CA3AF;
            --font-base: 'Inter', system-ui, sans-serif;
            --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', 'Courier New', monospace;
            --shadow-premium:
                0 4px 6px -1px rgba(0,0,0,0.03),
                0 10px 15px -3px rgba(0,0,0,0.03),
                inset 0 1px 1px rgba(255,255,255,1);
            --shadow-lg: 0 25px 60px -12px rgba(0,0,0,0.08);
            --blur-glass: 20px;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 32px;
            --radius-xl: 48px;
            --transition-fast: 0.2s ease-out;
            --transition-base: 0.45s cubic-bezier(0.165,0.84,0.44,1);
        }

        /* ================================================================
           RESET & BASE
        ================================================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        body {
            font-family: var(--font-base);
            background: var(--bg-body);
            color: var(--text-main);
            line-height: 1.65;
            min-height: 100vh;
        }
        img { max-width: 100%; display: block; }
        a { color: var(--accent-purple); text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* ================================================================
           HEADER
        ================================================================ */
        .main-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(248,249,250,0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border-color);
        }
        .header-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 2rem;
            height: 68px;
            display: flex;
            align-items: center;
            gap: 2rem;
        }
        .header-logo img { height: 44px; width: auto; }
        .main-nav { flex: 1; }
        .nav-list { list-style: none; display: flex; align-items: center; gap: 0.25rem; }
        .nav-link {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-secondary);
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            transition: color var(--transition-fast), background var(--transition-fast);
        }
        .nav-link:hover, .nav-link.active { color: var(--primary); background: rgba(37,99,235,0.07); text-decoration: none; }
        .header-actions { margin-left: auto; }
        .btn-primary-sm {
            display: inline-flex;
            align-items: center;
            padding: 0.6rem 1.4rem;
            background: var(--primary-gradient);
            color: #fff;
            font-size: 0.875rem;
            font-weight: 700;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
            box-shadow: 0 4px 14px rgba(37,99,235,0.35);
        }
        .btn-primary-sm:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,0.5); text-decoration: none; }
        .mobile-menu-toggle { display: none; }

        /* ================================================================
           SKIP NAV
        ================================================================ */
        .skip-nav {
            position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
            background: var(--accent-purple); color: #fff;
            padding: 0.5rem 1.25rem; border-radius: 8px; font-weight: 600;
            z-index: 9999; transition: top 0.2s ease;
        }
        .skip-nav:focus { top: 1rem; }

        /* ================================================================
           BREADCRUMB
        ================================================================ */
        .breadcrumb-bar {
            max-width: 1200px;
            margin: 1.5rem auto 0;
            padding: 0 2rem;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .breadcrumb-bar a { color: var(--accent-purple); font-weight: 600; }
        .breadcrumb-sep { margin: 0 0.5rem; }

        /* ================================================================
           HERO / TOOL HEADER
        ================================================================ */
        #tool-main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2.5rem 2rem 4rem;
        }
        .tool-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        .tool-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(37,99,235,0.08);
            border: 1px solid rgba(37,99,235,0.18);
            color: var(--accent-purple);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.35rem 0.9rem;
            border-radius: 999px;
            margin-bottom: 1.25rem;
        }
        .tool-header h1 {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 5vw, 3.25rem);
            font-weight: 900;
            color: var(--text-heading);
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 1rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .tool-header p {
            font-size: 1.1rem;
            color: var(--text-secondary);
            max-width: 640px;
            margin: 0 auto 1.5rem;
            line-height: 1.75;
        }
        .tool-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .tool-meta-item { display: flex; align-items: center; gap: 0.4rem; }
        .dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }

        /* ================================================================
           TOOL LAYOUT
        ================================================================ */
        .tool-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.75rem;
        }

        /* ================================================================
           GLASS CARD
        ================================================================ */
        .glass-card {
            background: var(--bg-glass);
            backdrop-filter: blur(var(--blur-glass));
            -webkit-backdrop-filter: blur(var(--blur-glass));
            border: 1px solid rgba(255,255,255,0.7);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-premium);
            overflow: hidden;
        }
        .card-body { padding: 2rem; }

        /* ================================================================
           TABS
        ================================================================ */
        .tabs-bar {
            display: flex;
            gap: 0;
            border-bottom: 2px solid rgba(37,99,235,0.12);
            padding: 0 2rem;
            background: rgba(255,255,255,0.5);
        }
        .tab-btn {
            padding: 1rem 1.5rem;
            background: none;
            border: none;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
            font-family: var(--font-base);
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text-secondary);
            cursor: pointer;
            transition: color var(--transition-fast), border-color var(--transition-fast);
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .tab-btn.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); }
        .tab-btn:hover:not(.active) { color: var(--text-main); }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* ================================================================
           INPUT AREA
        ================================================================ */
        .input-label {
            display: block;
            font-weight: 700;
            font-size: 0.8rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 0.6rem;
        }
        .expression-input {
            width: 100%;
            padding: 1rem 1.25rem;
            font-family: var(--font-mono);
            font-size: 1.05rem;
            font-weight: 500;
            background: #fff;
            border: 2px solid rgba(37,99,235,0.25);
            border-radius: var(--radius-md);
            color: var(--text-heading);
            transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
            outline: none;
        }
        .expression-input:hover { border-color: rgba(37,99,235,0.4); }
        .expression-input:focus {
            border-color: var(--accent-purple);
            box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
        }
        .expression-input.error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.1); }
        .expression-input.success { border-color: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.1); }

        /* operator quick-insert chips */
        .op-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }
        .op-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.3rem 0.75rem;
            background: rgba(37,99,235,0.07);
            border: 1px solid rgba(37,99,235,0.18);
            border-radius: 999px;
            font-family: var(--font-mono);
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--accent-purple);
            cursor: pointer;
            transition: background var(--transition-fast), transform var(--transition-fast);
            user-select: none;
        }
        .op-chip:hover { background: rgba(37,99,235,0.15); transform: translateY(-1px); }
        .op-chip-label { font-family: var(--font-base); font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }

        /* action buttons */
        .action-row {
            display: flex;
            gap: 0.75rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }
        .btn-generate {
            flex: 1;
            min-width: 160px;
            padding: 0.9rem 2rem;
            background: var(--primary-gradient);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-family: var(--font-base);
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
            box-shadow: 0 4px 14px rgba(37,99,235,0.35);
            letter-spacing: 0.02em;
        }
        .btn-generate:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,99,235,0.5); }
        .btn-generate:active { transform: translateY(0); }
        .btn-clear {
            padding: 0.9rem 1.5rem;
            background: transparent;
            color: var(--accent-purple);
            border: 2px solid rgba(37,99,235,0.3);
            border-radius: var(--radius-md);
            font-family: var(--font-base);
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .btn-clear:hover { background: rgba(37,99,235,0.07); border-color: var(--accent-purple); }
        .btn-export {
            padding: 0.9rem 1.5rem;
            background: transparent;
            color: var(--text-secondary);
            border: 2px solid rgba(0,0,0,0.1);
            border-radius: var(--radius-md);
            font-family: var(--font-base);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: none;
        }
        .btn-export:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
        .btn-export.visible { display: inline-flex; align-items: center; gap: 0.5rem; }

        /* examples bar */
        .examples-row {
            margin-top: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }
        .examples-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
        .example-pill {
            padding: 0.25rem 0.7rem;
            background: rgba(0,0,0,0.04);
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 999px;
            font-family: var(--font-mono);
            font-size: 0.78rem;
            color: var(--text-main);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .example-pill:hover { background: rgba(37,99,235,0.1); color: var(--accent-purple); border-color: rgba(37,99,235,0.25); }

        /* ================================================================
           ERROR / STATUS
        ================================================================ */
        .status-bar {
            margin-top: 1rem;
            padding: 0.75rem 1.25rem;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 600;
            display: none;
        }
        .status-bar.error { display: flex; align-items: center; gap: 0.5rem; background: rgba(239,68,68,0.08); color: #dc2626; border: 1px solid rgba(239,68,68,0.2); }
        .status-bar.success { display: flex; align-items: center; gap: 0.5rem; background: rgba(34,197,94,0.08); color: #16a34a; border: 1px solid rgba(34,197,94,0.2); }

        /* ================================================================
           RESULT SUMMARY CHIPS
        ================================================================ */
        .result-summary {
            display: none;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        .result-summary.visible { display: flex; }
        .summary-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 1rem;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .chip-vars { background: rgba(37,99,235,0.1); color: var(--accent-purple); border: 1px solid rgba(37,99,235,0.2); }
        .chip-rows { background: rgba(147,197,253,0.2); color: #1e40af; border: 1px solid rgba(147,197,253,0.4); }
        .chip-tautology { background: rgba(34,197,94,0.12); color: #15803d; border: 1px solid rgba(34,197,94,0.25); }
        .chip-contradiction { background: rgba(239,68,68,0.1); color: #b91c1c; border: 1px solid rgba(239,68,68,0.2); }
        .chip-contingency { background: rgba(245,158,11,0.1); color: #92400e; border: 1px solid rgba(245,158,11,0.2); }

        /* ================================================================
           TRUTH TABLE
        ================================================================ */
        .table-wrapper {
            overflow-x: auto;
            border-radius: var(--radius-md);
            border: 1px solid rgba(37,99,235,0.1);
            background: #fff;
        }
        .truth-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.875rem;
        }
        .truth-table thead tr {
            background: var(--primary-gradient);
        }
        .truth-table thead th {
            padding: 0.85rem 1rem;
            text-align: center;
            color: #fff;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            white-space: nowrap;
            border-right: 1px solid rgba(255,255,255,0.15);
        }
        .truth-table thead th:last-child { border-right: none; }
        .truth-table thead th.th-result {
            background: rgba(0,0,0,0.25);
            font-size: 0.82rem;
        }
        .truth-table thead th.th-var { background: rgba(255,255,255,0.12); }
        .truth-table tbody tr {
            transition: background var(--transition-fast);
        }
        .truth-table tbody tr:nth-child(even) { background: rgba(37,99,235,0.025); }
        .truth-table tbody tr:hover { background: rgba(37,99,235,0.06); }
        .truth-table tbody td {
            padding: 0.75rem 1rem;
            text-align: center;
            font-family: var(--font-mono);
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-main);
            border-right: 1px solid rgba(0,0,0,0.04);
        }
        .truth-table tbody td:last-child { border-right: none; }
        .truth-table tbody td.td-result { font-weight: 700; }

        .val-true {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            padding: 0.2rem 0.5rem;
            border-radius: 999px;
            background: rgba(34,197,94,0.12);
            color: #15803d;
            font-weight: 700;
            font-size: 0.8rem;
        }
        .val-false {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            padding: 0.2rem 0.5rem;
            border-radius: 999px;
            background: rgba(239,68,68,0.1);
            color: #dc2626;
            font-weight: 700;
            font-size: 0.8rem;
        }
        .td-result .val-true, .td-result .val-false { width: 56px; font-size: 0.85rem; }

        /* ================================================================
           EMPTY STATE
        ================================================================ */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-muted);
        }
        .empty-icon {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            opacity: 0.6;
        }
        .empty-state h3 { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
        .empty-state p { font-size: 0.9rem; }

        /* ================================================================
           EQUIVALENCY TAB
        ================================================================ */
        .equiv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
        @media (max-width: 640px) { .equiv-grid { grid-template-columns: 1fr; } }
        .equiv-vs {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 900;
            color: var(--text-muted);
        }
        .equiv-result {
            margin-top: 1.5rem;
            padding: 1.25rem 1.5rem;
            border-radius: var(--radius-md);
            font-size: 1rem;
            font-weight: 700;
            display: none;
        }
        .equiv-result.visible { display: block; }
        .equiv-result.equiv-yes { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: #15803d; }
        .equiv-result.equiv-no  { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #b91c1c; }

        /* ================================================================
           CONTENT / GUIDE SECTIONS
        ================================================================ */
        .content-section {
            background: rgba(255,255,255,0.75);
            border: 1px solid rgba(255,255,255,0.5);
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            box-shadow: 0 8px 32px rgba(0,0,0,0.04);
        }
        .content-section + .content-section { margin-top: 1.75rem; }

        .section-eyebrow {
            display: inline-block;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--accent-purple);
            margin-bottom: 0.75rem;
        }
        .content-section h2 {
            font-family: var(--font-heading);
            font-size: clamp(1.35rem, 3vw, 1.75rem);
            font-weight: 800;
            color: var(--text-heading);
            margin-bottom: 1.25rem;
            letter-spacing: -0.02em;
        }
        .content-section h3 {
            font-family: var(--font-heading);
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-heading);
            margin: 1.75rem 0 0.75rem;
        }
        .content-section h4 {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-main);
            margin: 1.25rem 0 0.5rem;
        }
        .content-section p { color: var(--text-main); line-height: 1.8; margin-bottom: 1rem; }
        .content-section p:last-child { margin-bottom: 0; }
        .content-section strong { color: var(--text-heading); }
        .content-section code {
            font-family: var(--font-mono);
            font-size: 0.875em;
            background: rgba(37,99,235,0.08);
            color: var(--accent-purple);
            padding: 0.15em 0.45em;
            border-radius: 5px;
        }

        /* operator table */
        .op-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.25rem 0;
            font-size: 0.875rem;
        }
        .op-table th {
            background: rgba(37,99,235,0.08);
            color: var(--text-heading);
            font-weight: 700;
            text-align: left;
            padding: 0.7rem 1rem;
            border-bottom: 2px solid rgba(37,99,235,0.15);
        }
        .op-table td {
            padding: 0.65rem 1rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            color: var(--text-main);
            vertical-align: middle;
        }
        .op-table tr:hover td { background: rgba(37,99,235,0.03); }
        .op-table td code { font-size: 0.9rem; }

        /* highlight box */
        .highlight-box {
            background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(147,197,253,0.08) 100%);
            border-left: 4px solid var(--accent-purple);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            padding: 1.25rem 1.5rem;
            margin: 1.25rem 0;
        }
        .highlight-box p { margin: 0; font-size: 0.95rem; }

        /* keyword list */
        .kw-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 1rem 0;
        }
        .kw-tag {
            padding: 0.3rem 0.8rem;
            background: rgba(37,99,235,0.07);
            border: 1px solid rgba(37,99,235,0.15);
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--accent-purple);
        }

        /* HOW-TO STEPS */
        .how-steps { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; margin-top: 1.5rem; }
        @media (max-width: 640px) { .how-steps { grid-template-columns: 1fr; } }
        .how-step {
            background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(37,99,235,0.02) 100%);
            border: 1px solid rgba(37,99,235,0.15);
            border-left: 4px solid var(--accent-purple);
            border-radius: var(--radius-md);
            padding: 1.25rem;
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            transition: box-shadow var(--transition-fast), transform var(--transition-fast);
        }
        .how-step:hover { box-shadow: 0 8px 24px rgba(37,99,235,0.12); transform: translateY(-2px); }
        .step-num {
            min-width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-gradient);
            color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 800;
            font-size: 1rem;
            box-shadow: 0 4px 10px rgba(37,99,235,0.35);
        }
        .how-step h4 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--text-heading); }
        .how-step p { margin: 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

        /* FAQ */
        .faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1rem; margin-top: 1.5rem; }
        .faq-item {
            background: linear-gradient(135deg, rgba(147,197,253,0.06) 0%, rgba(37,99,235,0.04) 100%);
            border: 1px solid rgba(37,99,235,0.12);
            border-left: 4px solid var(--accent-cyan);
            border-radius: var(--radius-md);
            overflow: hidden;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }
        .faq-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,99,235,0.1); }
        .faq-q {
            width: 100%;
            background: none;
            border: none;
            padding: 1.1rem 1.25rem;
            text-align: left;
            font-family: var(--font-base);
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-heading);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }
        .faq-q::after { content: '+'; font-size: 1.3rem; color: var(--accent-purple); flex-shrink: 0; }
        .faq-q[aria-expanded="true"]::after { content: '−'; }
        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .faq-item.open .faq-a { max-height: 400px; }
        .faq-a p {
            padding: 0 1.25rem 1.1rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.7;
            margin: 0;
        }

        /* ================================================================
           FOOTER
        ================================================================ */
        .main-footer {
            background: rgba(255,255,255,0.7);
            border-top: 1px solid rgba(0,0,0,0.06);
            margin-top: 5rem;
        }
        .footer-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 2rem 2rem;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2rem;
        }
        .footer-brand p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; margin-top: 0.75rem; }
        .footer-col h4 { font-size: 0.875rem; font-weight: 700; color: var(--text-heading); margin-bottom: 0.75rem; }
        .footer-col a { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; transition: color var(--transition-fast); }
        .footer-col a:hover { color: var(--accent-purple); text-decoration: none; }
        .footer-bottom {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.25rem 2rem;
            border-top: 1px solid rgba(0,0,0,0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
        .footer-legal a { color: var(--text-muted); transition: color var(--transition-fast); }
        .footer-legal a:hover { color: var(--accent-purple); text-decoration: none; }

        /* ================================================================
           RESPONSIVE
        ================================================================ */
        @media (max-width: 900px) {
            .footer-inner { grid-template-columns: 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 640px) {
            .header-container { padding: 0 1.25rem; }
            .main-nav { display: none; }
            #tool-main { padding: 1.5rem 1.25rem 3rem; }
            .card-body { padding: 1.25rem; }
            .tabs-bar { padding: 0 1.25rem; overflow-x: auto; }
            .content-section { padding: 1.5rem; }
            .footer-inner { grid-template-columns: 1fr; padding: 2rem 1.25rem 1.5rem; }
            .how-steps { grid-template-columns: 1fr; }
        }

        /* ================================================================
           ANIMATIONS
        ================================================================ */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .anim-in { animation: fadeInUp 0.45s ease-out both; }
        .anim-in-d1 { animation-delay: 0.1s; }
        .anim-in-d2 { animation-delay: 0.2s; }
        .anim-in-d3 { animation-delay: 0.3s; }

        /* loading pulse */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .loading { animation: pulse 1s ease-in-out infinite; }

        /* ================================================================
           PRINT
        ================================================================ */
        @media print {
            .main-header, .main-footer, .tabs-bar, .action-row, .op-chips, .examples-row, .faq-list { display: none !important; }
            body { background: #fff; }
            .glass-card { box-shadow: none; border: 1px solid #ccc; }
        }


/* =========================================
   kinematics-solver.html
   ========================================= */
:root {
  --primary:#2563EB;--primary-light:#60A5FA;--primary-gradient:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%);
  --accent-purple:#2563EB;--accent-cyan:#93C5FD;
  --bg-body:#F8F9FA;--bg-glass:rgba(255,255,255,0.8);--bg-card:#ffffff;
  --border-color:rgba(0,0,0,0.08);--text-heading:#000000;--text-main:#374151;
  --text-secondary:#6B7280;--text-muted:#9CA3AF;
  --font-base:'Inter',system-ui,sans-serif;--font-heading:'Outfit','Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono','Courier New',monospace;
  --shadow-premium:0 4px 6px -1px rgba(0,0,0,0.03),0 10px 15px -3px rgba(0,0,0,0.03),inset 0 1px 1px rgba(255,255,255,1);
  --shadow-lg:0 25px 60px -12px rgba(0,0,0,0.08);--blur-glass:20px;
  --radius-sm:12px;--radius-md:20px;--radius-lg:32px;
  --transition-fast:0.2s ease-out;--transition-base:0.45s cubic-bezier(0.165,0.84,0.44,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{padding-top:80px;font-family:var(--font-base);background:var(--bg-body);color:var(--text-main);line-height:1.65;min-height:100vh}
img{max-width:100%;display:block}
a{color:var(--accent-purple);text-decoration:none}
a:hover{text-decoration:underline}

/* HEADER */
.main-header{position:fixed;top:0;z-index:100;border-bottom:1px solid var(--border-color)}
.main-header::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:rgba(248,249,250,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-container{max-width:1280px;margin:0 auto;padding:0 2rem;height:68px;display:flex;align-items:center;gap:2rem}
.header-logo img{height:44px;width:auto}
.main-nav{flex:1}
.nav-list{list-style:none;display:flex;align-items:center;gap:0.25rem}
.nav-link{font-size:0.875rem;font-weight:600;color:var(--text-secondary);padding:0.5rem 0.75rem;border-radius:8px;transition:color var(--transition-fast),background var(--transition-fast)}
.nav-link:hover,.nav-link.active{color:var(--primary);background:rgba(37,99,235,0.07);text-decoration:none}
.header-actions{margin-left:auto}
.btn-primary-sm{display:inline-flex;align-items:center;padding:0.6rem 1.4rem;background:var(--primary-gradient);color:#fff;font-size:0.875rem;font-weight:700;border-radius:999px;border:none;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 4px 14px rgba(37,99,235,0.35)}
.btn-primary-sm:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,0.5);text-decoration:none}
.skip-nav{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--accent-purple);color:#fff;padding:0.5rem 1.25rem;border-radius:8px;font-weight:600;z-index:9999;transition:top 0.2s ease}
.skip-nav:focus{top:1rem}

/* BREADCRUMB */
.breadcrumb-bar{max-width:1200px;margin:1.5rem auto 0;padding:0 2rem;font-size:0.85rem;color:var(--text-secondary)}
.breadcrumb-bar a{color:var(--accent-purple);font-weight:600}
.breadcrumb-sep{margin:0 0.5rem}

/* MAIN */
#tool-main{max-width:1200px;margin:0 auto;padding:2.5rem 2rem 4rem}
.tool-header{text-align:center;margin-bottom:3rem}
.tool-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(37,99,235,0.08);border:1px solid rgba(37,99,235,0.18);color:var(--accent-purple);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0.35rem 0.9rem;border-radius:999px;margin-bottom:1.25rem}
.tool-header h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.25rem);font-weight:900;line-height:1.1;letter-spacing:-0.03em;margin-bottom:1rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tool-header p{font-size:1.1rem;color:var(--text-secondary);max-width:640px;margin:0 auto 1.5rem;line-height:1.75}
.tool-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;font-size:0.82rem;color:var(--text-muted)}
.dot-sep{width:4px;height:4px;border-radius:50%;background:var(--text-muted)}
.tool-layout{display:grid;grid-template-columns:1fr;gap:1.75rem}

/* GLASS CARD */
.glass-card{background:var(--bg-glass);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));border:1px solid rgba(255,255,255,0.7);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);overflow:hidden}
.card-body{padding-top:80px;padding:2rem}

/* TABS */
.tabs-bar{display:flex;gap:0;border-bottom:2px solid rgba(37,99,235,0.12);padding:0 2rem;background:rgba(255,255,255,0.5)}
.tab-btn{padding:1rem 1.5rem;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;font-family:var(--font-base);font-size:0.875rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast);white-space:nowrap}
.tab-btn.active{color:var(--accent-purple);border-bottom-color:var(--accent-purple)}
.tab-btn:hover:not(.active){color:var(--text-main)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* MODE TOGGLE */
.mode-toggle-bar{padding:1.25rem 2rem;background:rgba(255,255,255,0.5);border-bottom:1px solid rgba(37,99,235,0.1);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.mode-toggle-label{font-size:0.8rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-secondary)}
.toggle-group{display:inline-flex;background:rgba(37,99,235,0.07);border:1px solid rgba(37,99,235,0.15);border-radius:999px;padding:3px}
.toggle-btn{padding:0.4rem 1.1rem;background:transparent;border:none;border-radius:999px;font-family:var(--font-base);font-size:0.82rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.toggle-btn.active{background:var(--primary-gradient);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,0.3)}

/* VARIABLE GRID */
.variable-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:900px){.variable-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.variable-grid{grid-template-columns:1fr 1fr}}
.var-field{display:flex;flex-direction:column;gap:0.45rem}
.var-label{display:flex;align-items:center;justify-content:space-between;gap:0.4rem}
.var-symbol{font-family:var(--font-heading);font-size:1rem;font-weight:800;color:var(--text-heading)}
.var-name{font-size:0.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em}
.var-unit-badge{font-family:var(--font-mono);font-size:0.68rem;font-weight:500;color:var(--accent-purple);background:rgba(37,99,235,0.08);border:1px solid rgba(37,99,235,0.15);padding:0.1rem 0.45rem;border-radius:999px}
.var-input{width:100%;padding:0.85rem 1rem;font-family:var(--font-mono);font-size:1rem;font-weight:600;background:#fff;border:2px solid rgba(37,99,235,0.2);border-radius:var(--radius-sm);color:var(--text-heading);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;text-align:center}
.var-input:hover{border-color:rgba(37,99,235,0.4)}
.var-input:focus{border-color:var(--accent-purple);box-shadow:0 0 0 4px rgba(37,99,235,0.12)}
.var-input.solved{border-color:#22c55e;background:rgba(34,197,94,0.05);box-shadow:0 0 0 4px rgba(34,197,94,0.1);color:#15803d}
.var-input.error-field{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,0.1)}
.var-placeholder{font-size:0.7rem;color:var(--text-muted);text-align:center}

/* ACTIONS */
.action-row{display:flex;gap:0.75rem;flex-wrap:wrap}
.btn-solve{flex:1;min-width:160px;padding:0.9rem 2rem;background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-base);font-size:0.95rem;font-weight:700;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 4px 14px rgba(37,99,235,0.35)}
.btn-solve:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,0.5)}
.btn-reset{padding:0.9rem 1.5rem;background:transparent;color:var(--accent-purple);border:2px solid rgba(37,99,235,0.3);border-radius:var(--radius-md);font-family:var(--font-base);font-size:0.95rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast)}
.btn-reset:hover{background:rgba(37,99,235,0.07);border-color:var(--accent-purple)}
.btn-copy{padding:0.9rem 1.5rem;background:transparent;color:var(--text-secondary);border:2px solid rgba(0,0,0,0.1);border-radius:var(--radius-md);font-family:var(--font-base);font-size:0.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:none}
.btn-copy:hover{border-color:var(--accent-purple);color:var(--accent-purple)}
.btn-copy.visible{display:inline-flex;align-items:center;gap:0.5rem}

/* STATUS */
.status-bar{margin-top:1rem;padding:0.75rem 1.25rem;border-radius:var(--radius-sm);font-size:0.875rem;font-weight:600;display:none}
.status-bar.error{display:flex;align-items:center;gap:0.5rem;background:rgba(239,68,68,0.08);color:#dc2626;border:1px solid rgba(239,68,68,0.2)}

/* PRESETS */
.presets-row{margin-bottom:1.25rem;display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.presets-label{font-size:0.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em}
.preset-pill{padding:0.25rem 0.75rem;background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.08);border-radius:999px;font-size:0.78rem;font-weight:600;color:var(--text-main);cursor:pointer;transition:all var(--transition-fast)}
.preset-pill:hover{background:rgba(37,99,235,0.1);color:var(--accent-purple);border-color:rgba(37,99,235,0.25)}

/* SOLUTION */
.solution-panel{display:none}
.solution-panel.visible{display:block}
.solution-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.solution-title{font-family:var(--font-heading);font-size:1.1rem;font-weight:800;color:var(--text-heading)}
.solution-chips{display:flex;gap:0.5rem;flex-wrap:wrap}
.sol-chip{padding:0.3rem 0.8rem;border-radius:999px;font-size:0.78rem;font-weight:700}
.chip-eq{background:rgba(37,99,235,0.1);color:var(--accent-purple);border:1px solid rgba(37,99,235,0.2)}
.chip-solved{background:rgba(34,197,94,0.12);color:#15803d;border:1px solid rgba(34,197,94,0.25)}
.steps-list{display:flex;flex-direction:column;gap:0.75rem}
.step-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.25rem;background:rgba(255,255,255,0.9);border:1px solid rgba(37,99,235,0.08);border-left:4px solid rgba(37,99,235,0.3);border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:box-shadow var(--transition-fast)}
.step-item:hover{box-shadow:0 4px 16px rgba(37,99,235,0.1)}
.step-item.step-final{border-left-color:#22c55e;background:rgba(34,197,94,0.04)}
.step-num-circle{min-width:28px;height:28px;border-radius:50%;background:var(--primary-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.78rem;box-shadow:0 3px 8px rgba(37,99,235,0.3);flex-shrink:0}
.step-item.step-final .step-num-circle{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);box-shadow:0 3px 8px rgba(34,197,94,0.3)}
.step-label{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.3rem}
.step-math{font-family:var(--font-mono);font-size:0.95rem;font-weight:600;color:var(--text-heading);line-height:1.6}
.step-math em{font-style:normal;color:var(--accent-purple)}
.step-math .val-highlight{color:#15803d;font-weight:800}
.step-note{margin-top:0.25rem;font-size:0.8rem;color:var(--text-secondary);line-height:1.5}
.answer-box{margin-top:1rem;padding:1.25rem 1.5rem;background:linear-gradient(135deg,rgba(34,197,94,0.08) 0%,rgba(34,197,94,0.04) 100%);border:2px solid rgba(34,197,94,0.3);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.answer-label{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#15803d}
.answer-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:800;color:#15803d}

/* AXIS DIVIDER */
.axis-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}
.axis-divider::before,.axis-divider::after{content:'';flex:1;height:1px;background:rgba(37,99,235,0.12)}
.axis-label{font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-purple);background:rgba(37,99,235,0.08);border:1px solid rgba(37,99,235,0.18);padding:0.25rem 0.75rem;border-radius:999px}

/* EMPTY STATE */
.empty-state{text-align:center;padding:3.5rem 2rem;color:var(--text-muted)}
.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:0.5}
.empty-state h3{font-size:1rem;color:var(--text-secondary);margin-bottom:0.4rem}
.empty-state p{font-size:0.875rem}

/* EQ REFERENCE */
.eq-ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
@media(max-width:640px){.eq-ref-grid{grid-template-columns:1fr}}
.eq-card{background:linear-gradient(135deg,rgba(37,99,235,0.05) 0%,rgba(37,99,235,0.02) 100%);border:1px solid rgba(37,99,235,0.12);border-left:4px solid var(--accent-purple);border-radius:var(--radius-sm);padding:1rem 1.25rem}
.eq-name{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:0.35rem}
.eq-formula{font-family:var(--font-mono);font-size:0.95rem;font-weight:700;color:var(--text-heading);margin-bottom:0.3rem}
.eq-missing{font-size:0.75rem;color:var(--text-secondary)}
.eq-missing strong{color:var(--accent-purple)}

/* CONTENT */
.content-section{background:rgba(255,255,255,0.75);border:1px solid rgba(255,255,255,0.5);border-radius:var(--radius-lg);padding:2.5rem;box-shadow:0 8px 32px rgba(0,0,0,0.04)}
.content-section+.content-section{margin-top:1.75rem}
.section-eyebrow{display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-purple);margin-bottom:0.75rem}
.content-section h2{font-family:var(--font-heading);font-size:clamp(1.35rem,3vw,1.75rem);font-weight:800;color:var(--text-heading);margin-bottom:1.25rem;letter-spacing:-0.02em}
.content-section h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--text-heading);margin:1.75rem 0 0.75rem}
.content-section p{color:var(--text-main);line-height:1.8;margin-bottom:1rem}
.content-section p:last-child{margin-bottom:0}
.content-section strong{color:var(--text-heading)}
.content-section code{font-family:var(--font-mono);font-size:0.875em;background:rgba(37,99,235,0.08);color:var(--accent-purple);padding:0.15em 0.45em;border-radius:5px}
.content-section ul,.content-section ol{padding-left:1.5rem;margin-bottom:1rem}
.content-section li{margin-bottom:0.5rem;color:var(--text-main);line-height:1.75}
.highlight-box{background:linear-gradient(135deg,rgba(37,99,235,0.06) 0%,rgba(147,197,253,0.08) 100%);border-left:4px solid var(--accent-purple);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1.25rem 1.5rem;margin:1.25rem 0}
.highlight-box p{margin:0;font-size:0.95rem}
.cta-box{background:linear-gradient(135deg,rgba(37,99,235,0.07) 0%,rgba(59,130,246,0.05) 100%);border:1px solid rgba(37,99,235,0.2);border-radius:var(--radius-md);padding:1.5rem 2rem;margin:1.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.cta-box-text h4{font-family:var(--font-heading);font-size:1.05rem;font-weight:800;color:var(--text-heading);margin:0 0 0.35rem}
.cta-box-text p{margin:0;font-size:0.875rem;color:var(--text-secondary)}
.cta-box-btn{white-space:nowrap;padding:0.75rem 1.75rem;background:var(--primary-gradient);color:#fff;border-radius:999px;font-size:0.875rem;font-weight:700;box-shadow:0 4px 14px rgba(37,99,235,0.35);transition:transform var(--transition-fast),box-shadow var(--transition-fast);display:inline-block}
.cta-box-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,0.5);text-decoration:none}
.kw-list{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1rem 0}
.kw-tag{padding:0.3rem 0.8rem;background:rgba(37,99,235,0.07);border:1px solid rgba(37,99,235,0.15);border-radius:999px;font-size:0.78rem;font-weight:600;color:var(--accent-purple)}
.how-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.5rem}
@media(max-width:640px){.how-steps{grid-template-columns:1fr}}
.how-step{background:linear-gradient(135deg,rgba(37,99,235,0.06) 0%,rgba(37,99,235,0.02) 100%);border:1px solid rgba(37,99,235,0.15);border-left:4px solid var(--accent-purple);border-radius:var(--radius-md);padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;transition:box-shadow var(--transition-fast),transform var(--transition-fast)}
.how-step:hover{box-shadow:0 8px 24px rgba(37,99,235,0.12);transform:translateY(-2px)}
.step-num{min-width:36px;height:36px;border-radius:50%;background:var(--primary-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;box-shadow:0 4px 10px rgba(37,99,235,0.35);flex-shrink:0}
.how-step h4{margin:0 0 0.4rem;font-size:0.95rem;color:var(--text-heading)}
.how-step p{margin:0;font-size:0.875rem;color:var(--text-secondary);line-height:1.6}

/* FAQ */
.faq-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.5rem}
.faq-item{background:linear-gradient(135deg,rgba(147,197,253,0.06) 0%,rgba(37,99,235,0.04) 100%);border:1px solid rgba(37,99,235,0.12);border-left:4px solid var(--accent-cyan);border-radius:var(--radius-md);overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.faq-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,0.1)}
.faq-q{width:100%;background:none;border:none;padding:1.1rem 1.25rem;text-align:left;font-family:var(--font-base);font-size:0.95rem;font-weight:700;color:var(--text-heading);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-q::after{content:'+';font-size:1.3rem;color:var(--accent-purple);flex-shrink:0}
.faq-q[aria-expanded="true"]::after{content:'\2212'}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1)}
.faq-item.open .faq-a{max-height:400px}
.faq-a p{padding:0 1.25rem 1.1rem;font-size:0.9rem;color:var(--text-secondary);line-height:1.7;margin:0}

/* TABLE */
.kin-table{width:100%;border-collapse:collapse;font-size:0.875rem;margin:1.25rem 0}
.kin-table th{background:rgba(37,99,235,0.08);color:var(--text-heading);font-weight:700;text-align:left;padding:0.7rem 1rem;border-bottom:2px solid rgba(37,99,235,0.15)}
.kin-table td{padding:0.7rem 1rem;border-bottom:1px solid rgba(0,0,0,0.05);color:var(--text-main);vertical-align:middle}
.kin-table tr:hover td{background:rgba(37,99,235,0.03)}
.kin-table td code{font-size:0.9rem}

/* FOOTER */
.main-footer{background:rgba(255,255,255,0.7);border-top:1px solid rgba(0,0,0,0.06);margin-top:5rem}
.footer-inner{max-width:1200px;margin:0 auto;padding:3rem 2rem 2rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.footer-brand p{font-size:0.875rem;color:var(--text-secondary);line-height:1.7;margin-top:0.75rem}
.footer-col h4{font-size:0.875rem;font-weight:700;color:var(--text-heading);margin-bottom:0.75rem}
.footer-col a{display:block;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.5rem;transition:color var(--transition-fast)}
.footer-col a:hover{color:var(--accent-purple);text-decoration:none}
.footer-bottom{max-width:1200px;margin:0 auto;padding:1.25rem 2rem;border-top:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:0.82rem;color:var(--text-muted)}
.footer-legal{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer-legal a{color:var(--text-muted);transition:color var(--transition-fast)}
.footer-legal a:hover{color:var(--accent-purple);text-decoration:none}

/* ANIMATIONS */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.anim-in{animation:fadeInUp 0.45s ease-out both}
.anim-in-d1{animation-delay:0.1s}
.anim-in-d2{animation-delay:0.2s}
.anim-in-d3{animation-delay:0.3s}

/* RESPONSIVE */
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:640px){.header-container{padding:0 1.25rem}.main-nav{display:none}#tool-main{padding:1.5rem 1.25rem 3rem}.card-body{padding-top:80px;padding:1.25rem}.mode-toggle-bar{padding:1rem 1.25rem}.tabs-bar{padding:0 1.25rem;overflow-x:auto}.content-section{padding:1.5rem}.footer-inner{grid-template-columns:1fr;padding:2rem 1.25rem 1.5rem}.how-steps{grid-template-columns:1fr}.cta-box{flex-direction:column}}
@media print{.main-header,.main-footer,.tabs-bar,.action-row,.mode-toggle-bar,.presets-row,.faq-list{display:none!important}body{padding-top:80px;background:#fff}.glass-card{box-shadow:none;border:1px solid #ccc}}


/* =========================================
   stoichiometry-equation-balancer.html
   ========================================= */
:root {
  --primary:#2563EB;--primary-light:#60A5FA;
  --primary-gradient:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%);
  --accent-green:#10B981;--accent-green-bg:rgba(16,185,129,0.08);
  --accent-amber:#F59E0B;--accent-amber-bg:rgba(245,158,11,0.08);
  --accent-red:#EF4444;--accent-red-bg:rgba(239,68,68,0.08);
  --bg-body:#F8F9FA;--bg-glass:rgba(255,255,255,0.85);--bg-card:#ffffff;
  --border-color:rgba(0,0,0,0.08);--text-heading:#000000;--text-main:#374151;
  --text-secondary:#6B7280;--text-muted:#9CA3AF;
  --font-base:'Inter',system-ui,sans-serif;
  --font-heading:'Outfit','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --shadow-premium:0 4px 6px -1px rgba(0,0,0,0.03),0 10px 15px -3px rgba(0,0,0,0.03),inset 0 1px 1px rgba(255,255,255,1);
  --shadow-lg:0 25px 60px -12px rgba(0,0,0,0.08);
  --radius-sm:12px;--radius-md:20px;--radius-lg:32px;
  --transition-fast:0.2s ease-out;--transition-base:0.45s cubic-bezier(0.165,0.84,0.44,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{padding-top:80px;font-family:var(--font-base);background:var(--bg-body);color:var(--text-main);line-height:1.65;min-height:100vh}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.skip-nav{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:0.5rem 1.25rem;border-radius:8px;font-weight:600;z-index:9999;transition:top 0.2s ease}
.skip-nav:focus{top:1rem}

/* HEADER */
.main-header{position:fixed;top:0;z-index:100;border-bottom:1px solid var(--border-color)}
.main-header::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:rgba(248,249,250,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-container{max-width:1280px;margin:0 auto;padding:0 2rem;height:68px;display:flex;align-items:center;gap:2rem}
.header-logo img{height:44px;width:auto}
.main-nav{flex:1}
.nav-list{list-style:none;display:flex;align-items:center;gap:0.25rem}
.nav-link{font-size:0.875rem;font-weight:600;color:var(--text-secondary);padding:0.5rem 0.75rem;border-radius:8px;transition:color var(--transition-fast),background var(--transition-fast)}
.nav-link:hover,.nav-link.active{color:var(--primary);background:rgba(37,99,235,0.07);text-decoration:none}
.header-actions{margin-left:auto}
.btn-primary-sm{display:inline-flex;align-items:center;padding:0.6rem 1.4rem;background:var(--primary-gradient);color:#fff;font-size:0.875rem;font-weight:700;border-radius:999px;border:none;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 4px 14px rgba(37,99,235,0.35);text-decoration:none}
.btn-primary-sm:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,0.5);text-decoration:none}
@media(max-width:768px){.main-nav{display:none}.header-container{padding:0 1.25rem}}

/* BREADCRUMB */
.breadcrumb-bar{max-width:1200px;margin:1.5rem auto 0;padding:0 2rem;font-size:0.85rem;color:var(--text-secondary)}
.breadcrumb-bar a{color:var(--primary);font-weight:600}
.breadcrumb-sep{margin:0 0.5rem}

/* MAIN */
#tool-main{max-width:1200px;margin:0 auto;padding:2.5rem 2rem 4rem}

/* TOOL HEADER */
.tool-header{text-align:center;margin-bottom:3rem}
.tool-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(37,99,235,0.08);border:1px solid rgba(37,99,235,0.18);color:var(--primary);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0.35rem 0.9rem;border-radius:999px;margin-bottom:1.25rem}
.tool-header h1{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.25rem);font-weight:900;line-height:1.1;letter-spacing:-0.03em;margin-bottom:1rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tool-header p{font-size:1.1rem;color:var(--text-secondary);max-width:680px;margin:0 auto 1.5rem;line-height:1.75}
.tool-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;font-size:0.82rem;color:var(--text-muted)}
.dot-sep{width:4px;height:4px;border-radius:50%;background:var(--text-muted);display:inline-block}

/* GLASS CARD */
.glass-card{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.7);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);overflow:hidden}
.card-header{padding:1.5rem 2rem 0}
.card-header-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;padding:1.5rem 2rem 0}
.card-header h2,.card-header-row h2{font-family:var(--font-heading);font-size:1.15rem;font-weight:800;color:var(--text-heading);letter-spacing:-0.02em;display:flex;align-items:center;gap:0.6rem}
.icon-pill{width:32px;height:32px;border-radius:10px;background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-pill svg{color:#fff}
.card-body{padding-top:80px;padding:1.5rem 2rem 2rem}
.tool-layout{display:grid;grid-template-columns:1fr;gap:1.75rem}

/* INPUT */
.input-section{display:flex;flex-direction:column;gap:1.25rem}
.eq-input{width:100%;font-family:var(--font-mono);font-size:1.05rem;font-weight:500;color:var(--text-heading);background:#fff;border:2px solid var(--border-color);border-radius:var(--radius-md);padding:1.1rem 1.5rem;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);letter-spacing:0.01em}
.eq-input::placeholder{color:var(--text-muted);font-weight:400}
.eq-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,0.10)}
.eq-input.error{border-color:var(--accent-red);box-shadow:0 0 0 4px rgba(239,68,68,0.10)}
.input-hint{font-size:0.82rem;color:var(--text-muted);display:flex;align-items:flex-start;gap:0.4rem;line-height:1.6}
.example-chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.example-chip{font-family:var(--font-mono);font-size:0.78rem;font-weight:500;color:var(--primary);background:rgba(37,99,235,0.07);border:1px solid rgba(37,99,235,0.15);border-radius:999px;padding:0.3rem 0.8rem;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast);user-select:none}
.example-chip:hover{background:rgba(37,99,235,0.14);transform:translateY(-1px)}

.btn-balance{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;width:100%;padding:1rem 2rem;background:var(--primary-gradient);color:#fff;font-family:var(--font-base);font-size:1rem;font-weight:700;border-radius:var(--radius-md);border:none;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 4px 14px rgba(37,99,235,0.35);letter-spacing:0.01em}
.btn-balance:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,0.45)}
.btn-balance:disabled{opacity:0.6;cursor:not-allowed;transform:none}

.error-msg{background:var(--accent-red-bg);border:1px solid rgba(239,68,68,0.25);border-radius:var(--radius-sm);padding:0.9rem 1.25rem;font-size:0.9rem;color:#b91c1c;display:flex;align-items:flex-start;gap:0.6rem}

/* RESULTS */
#results-section{display:none}
#results-section.visible{display:flex;flex-direction:column;gap:1.75rem}

.balanced-eq-display{background:linear-gradient(135deg,rgba(37,99,235,0.04) 0%,rgba(59,130,246,0.06) 100%);border:1.5px solid rgba(37,99,235,0.15);border-radius:var(--radius-md);padding:1.75rem 2rem;text-align:center}
.eq-label{font-size:0.78rem;font-weight:700;color:var(--primary);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.75rem}
.eq-string{font-family:var(--font-mono);font-size:clamp(1rem,3vw,1.45rem);font-weight:600;color:var(--text-heading);line-height:1.5;word-break:break-word}
.coeff{color:var(--primary);font-weight:800}

.atom-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border-color)}
.atom-table{width:100%;border-collapse:collapse;font-size:0.88rem}
.atom-table th{background:rgba(37,99,235,0.06);color:var(--text-secondary);font-size:0.78rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)}
.atom-table td{padding:0.65rem 1rem;border-bottom:1px solid rgba(0,0,0,0.04);font-family:var(--font-mono);font-size:0.9rem}
.atom-table tr:last-child td{border-bottom:none}
.atom-table .check-ok{color:var(--accent-green);font-weight:700}
.atom-table .check-fail{color:var(--accent-red);font-weight:700}
.atom-table tr:hover td{background:rgba(37,99,235,0.03)}

.molar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.molar-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem 1.5rem;box-shadow:var(--shadow-premium)}
.molar-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem}
.molar-formula{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--text-heading)}
.molar-total{font-size:0.9rem;font-weight:700;color:var(--primary);font-family:var(--font-mono)}
.molar-breakdown{font-size:0.8rem;color:var(--text-secondary);line-height:1.9}
.molar-row{display:flex;justify-content:space-between;gap:0.5rem}
.molar-divider{border:none;border-top:1px solid var(--border-color);margin:0.6rem 0}

.lr-inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin:1.25rem 0}
.lr-input-group label{display:block;font-size:0.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:0.4rem;font-family:var(--font-mono)}
.lr-input{width:100%;font-family:var(--font-mono);font-size:0.9rem;color:var(--text-heading);background:#fff;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:0.65rem 1rem;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.lr-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.10)}

.btn-green{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.75rem;background:var(--accent-green);color:#fff;font-size:0.9rem;font-weight:700;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 4px 12px rgba(16,185,129,0.3)}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,185,129,0.4)}
.btn-green:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.lr-result{margin-top:1.25rem;border-radius:var(--radius-md);padding:1.25rem 1.5rem;display:none}
.lr-result.show{display:block}
.lr-result.has-data{background:var(--accent-amber-bg);border:1.5px solid rgba(245,158,11,0.25)}
.lr-result h4{font-size:0.95rem;font-weight:800;color:var(--text-heading);margin-bottom:0.6rem}
.lr-summary{font-size:0.88rem;color:var(--text-secondary);line-height:1.9}
.lr-highlight{color:var(--accent-amber);font-weight:700;font-family:var(--font-mono)}
.lr-excess{color:var(--accent-green);font-weight:600;font-family:var(--font-mono)}
.lr-error{background:var(--accent-red-bg);border:1px solid rgba(239,68,68,0.25);color:#b91c1c}

.yield-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.25rem}
.yield-select{flex:1;min-width:160px;font-family:var(--font-mono);font-size:0.9rem;color:var(--text-heading);background:#fff;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:0.65rem 1rem;outline:none;cursor:pointer;transition:border-color var(--transition-fast)}
.yield-select:focus{border-color:var(--primary)}
.yield-result{width:100%;margin-top:1rem;background:var(--accent-green-bg);border:1.5px solid rgba(16,185,129,0.25);border-radius:var(--radius-md);padding:1.25rem 1.5rem;display:none}
.yield-result.show{display:block}
.yield-result h4{font-size:0.95rem;font-weight:800;color:var(--text-heading);margin-bottom:0.5rem}
.yield-value{font-family:var(--font-mono);font-size:1.6rem;font-weight:800;color:var(--accent-green)}
.yield-steps{font-size:0.85rem;color:var(--text-secondary);line-height:1.9;margin-top:0.6rem;font-family:var(--font-mono)}

.copy-btn{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:600;color:var(--text-secondary);background:transparent;border:1px solid var(--border-color);border-radius:8px;padding:0.4rem 0.85rem;cursor:pointer;transition:all var(--transition-fast)}
.copy-btn:hover{color:var(--primary);border-color:var(--primary);background:rgba(37,99,235,0.05)}
.copy-btn.copied{color:var(--accent-green);border-color:var(--accent-green)}

/* SEO CONTENT */
.seo-content{max-width:860px;margin:5rem auto 0}
.seo-content h2{font-family:var(--font-heading);font-size:clamp(1.4rem,3vw,2rem);font-weight:900;color:var(--text-heading);letter-spacing:-0.025em;margin:2.5rem 0 1rem;line-height:1.2}
.seo-content h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:800;color:var(--text-heading);margin:2rem 0 0.75rem;letter-spacing:-0.015em}
.seo-content p{font-size:1rem;color:var(--text-main);line-height:1.85;margin-bottom:1.1rem}
.seo-content ul,.seo-content ol{padding-left:1.5rem;margin-bottom:1.1rem}
.seo-content li{font-size:1rem;color:var(--text-main);line-height:1.85;margin-bottom:0.4rem}
.seo-content strong{color:var(--text-heading);font-weight:700}
.seo-content code{font-family:var(--font-mono);font-size:0.88em;background:rgba(37,99,235,0.07);color:var(--primary);border-radius:5px;padding:0.1em 0.4em}
.seo-content a{color:var(--primary);font-weight:600}
.seo-divider{border:none;border-top:1px solid var(--border-color);margin:2.5rem 0}

.info-callout{background:rgba(37,99,235,0.05);border-left:4px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1rem 1.5rem;margin:1.5rem 0}
.info-callout p{color:var(--text-main);margin:0;font-size:0.95rem}

.cta-box-dark{background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%);border-radius:var(--radius-lg);padding:2.5rem;text-align:center;margin:3rem 0;color:#fff !important}
.cta-box-dark h3{font-family:var(--font-heading);font-size:1.5rem;font-weight:900;margin-bottom:0.75rem;color:#fff !important}
.cta-box-dark p{color:rgba(255,255,255,0.95) !important;font-size:0.97rem;max-width:520px;margin:0 auto 1.5rem;line-height:1.75}
.cta-box-dark a{display:inline-flex;align-items:center;gap:0.5rem;padding:0.9rem 2.25rem;background:#fff;color:var(--primary);font-weight:800;font-size:0.95rem;border-radius:999px;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 4px 14px rgba(0,0,0,0.2);text-decoration:none}
.cta-box-dark a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);text-decoration:none}

.faq-list{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.5rem}
.faq-item{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-premium)}
.faq-q{width:100%;text-align:left;padding:1.2rem 1.5rem;font-size:0.97rem;font-weight:700;color:var(--text-heading);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background var(--transition-fast)}
.faq-q:hover{background:rgba(37,99,235,0.03)}
.faq-q[aria-expanded="true"]{color:var(--primary)}
.faq-chevron{flex-shrink:0;transition:transform 0.3s ease}
.faq-q[aria-expanded="true"] .faq-chevron{transform:rotate(180deg)}
.faq-a{display:none;padding:0 1.5rem 1.25rem;font-size:0.93rem;color:var(--text-secondary);line-height:1.8}
.faq-a.open{display:block;max-height:none;overflow:visible}

/* FOOTER */
.main-footer{background:rgba(255,255,255,0.7);border-top:1px solid var(--border-color);margin-top:2rem}
.footer-bottom{max-width:1200px;margin:0 auto;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:0.82rem;color:var(--text-muted)}
.footer-legal{display:flex;gap:1.25rem}
.footer-legal a{color:var(--text-muted);transition:color var(--transition-fast)}
.footer-legal a:hover{color:var(--primary);text-decoration:none}

@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.anim-in{animation:fadeInUp 0.45s ease-out both}
.result-anim{animation:slideIn 0.4s ease-out both}

@media(max-width:640px){
  #tool-main{padding:1.5rem 1.25rem 3rem}
  .card-body{padding-top:80px;padding:1.25rem 1.25rem 1.5rem}
  .card-header,.card-header-row{padding:1.25rem 1.25rem 0}
  .molar-grid{grid-template-columns:1fr}
  .balanced-eq-display{padding:1.25rem}
  .cta-box{flex-direction:column}
  .cta-box-dark{padding:1.75rem 1.25rem}
}


/* =========================================
   matrix-operations-solver.html
   ========================================= */
:root {
            --color-bg:#fafafa;--color-surface:#ffffff;--color-surface-2:#f4f4f5;
            --color-border:#e4e4e7;--color-border-strong:#d1d1d6;
            --color-text:#09090b;--color-text-secondary:#52525b;--color-text-muted:#a1a1aa;
            --color-primary:#2563eb;--color-primary-hover:#1d4ed8;
            --color-primary-light:#eff6ff;--color-primary-border:#bfdbfe;
            --color-accent:#7c3aed;--color-success:#059669;--color-success-light:#ecfdf5;
            --color-warning:#d97706;--color-warning-light:#fffbeb;
            --color-error:#dc2626;--color-error-light:#fef2f2;
            --color-cta-bg:#1e1b4b;--color-cta-border:#3730a3;
            --color-cta-text:#e0e7ff;--color-cta-accent:#818cf8;
            --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;
            --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
            --shadow-md:0 4px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
            --shadow-lg:0 10px 40px rgba(0,0,0,.09),0 2px 8px rgba(0,0,0,.04);
            --font-sans:'Inter',system-ui,-apple-system,sans-serif;
            --font-display:'Outfit','Inter',sans-serif;
            --font-mono:'JetBrains Mono','Fira Code',monospace;
            --transition:150ms cubic-bezier(.4,0,.2,1);
        }
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
        body{padding-top:80px;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}

        /* NAVBAR */
        .navbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
        .navbar-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px}
        .navbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
        .navbar-brand-logo{width:32px;height:32px;background:var(--color-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;font-family:var(--font-display)}
        .navbar-brand-text{font-size:14px;font-weight:600;color:var(--color-text)}
        .navbar-links{display:flex;align-items:center;gap:4px;list-style:none}
        .navbar-links a{font-size:13px;font-weight:500;color:var(--color-text-secondary);text-decoration:none;padding:6px 12px;border-radius:var(--radius-sm);transition:all var(--transition)}
        .navbar-links a:hover{color:var(--color-text);background:var(--color-surface-2)}
        .navbar-cta{font-size:13px;font-weight:600;color:#fff;background:var(--color-primary);text-decoration:none;padding:7px 16px;border-radius:var(--radius-sm);transition:background var(--transition)}
        .navbar-cta:hover{background:var(--color-primary-hover)}

        /* HERO */
        .tool-header{max-width:1200px;margin:0 auto;padding:56px 24px 40px}
        .breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-muted);margin-bottom:24px}
        .breadcrumb a{color:var(--color-text-muted);text-decoration:none;transition:color var(--transition)}
        .breadcrumb a:hover{color:var(--color-primary)}
        .breadcrumb-sep{opacity:.5}
        .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--color-primary-light);color:var(--color-primary);border:1px solid var(--color-primary-border);margin-bottom:16px}
        .badge-dot{width:5px;height:5px;border-radius:50%;background:var(--color-primary);animation:pulse 2s infinite}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
        .tool-header h1{font-family:var(--font-display);font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--color-text);margin-bottom:14px}
        .tool-header h1 span{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .tool-header-desc{font-size:16px;color:var(--color-text-secondary);max-width:640px;line-height:1.7;margin-bottom:28px}
        .tool-header-meta{display:flex;align-items:center;flex-wrap:wrap;gap:20px;font-size:13px;color:var(--color-text-muted)}
        .meta-item{display:flex;align-items:center;gap:6px}

        /* TOOL CARD */
        .tool-card{max-width:1200px;margin:0 auto;padding:0 24px 56px}
        .tool-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
        .tool-panel-header{padding:20px 28px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
        .tool-panel-title{font-size:14px;font-weight:600;color:var(--color-text)}

        /* TABS */
        .op-tabs{display:flex;gap:4px;flex-wrap:wrap}
        .op-tab{padding:6px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--color-text-secondary);border:1px solid transparent;cursor:pointer;transition:all var(--transition);background:none;font-family:var(--font-sans)}
        .op-tab:hover{color:var(--color-text);background:var(--color-surface-2)}
        .op-tab.active{color:var(--color-primary);background:var(--color-primary-light);border-color:var(--color-primary-border)}

        /* TOOL BODY */
        .tool-body{padding-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:0}
        @media(max-width:768px){.tool-body{padding-top:80px;grid-template-columns:1fr}}
        .tool-input-section{padding:28px;border-right:1px solid var(--color-border)}
        @media(max-width:768px){.tool-input-section{border-right:none;border-bottom:1px solid var(--color-border)}}
        .tool-output-section{padding:28px;background:#fafafa}

        /* DIMENSION SELECTOR */
        .section-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px}
        .dim-controls{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
        .dim-group{display:flex;flex-direction:column;gap:6px}
        .dim-group label{font-size:12px;font-weight:500;color:var(--color-text-secondary)}
        .dim-group select{padding:7px 28px 7px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--color-text);background:var(--color-surface);cursor:pointer;transition:border-color var(--transition);outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
        .dim-group select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
        .dim-sep{font-size:18px;font-weight:300;color:var(--color-text-muted);padding-top:20px}

        /* MATRIX GRID */
        .matrix-container{display:flex;flex-direction:column;gap:20px;margin-bottom:24px}
        .matrix-wrap{display:flex;flex-direction:column;gap:8px}
        .matrix-label{font-size:12px;font-weight:600;color:var(--color-text-secondary);display:flex;align-items:center;gap:6px}
        .matrix-label-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;font-size:11px;font-weight:700;background:var(--color-primary);color:#fff}
        .matrix-bracket-wrap{display:flex;align-items:center;gap:4px}
        .matrix-bracket{display:flex;flex-direction:column;justify-content:stretch;font-size:28px;font-weight:200;color:var(--color-text-secondary);line-height:1;user-select:none}
        .matrix-grid{display:inline-grid;gap:6px}
        .matrix-cell{width:60px;height:44px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--color-text);text-align:center;background:var(--color-surface);outline:none;transition:all var(--transition);padding:0 6px}
        .matrix-cell:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);background:var(--color-primary-light)}
        .matrix-cell::placeholder{color:var(--color-text-muted);font-size:12px}

        /* BUTTONS */
        .controls-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
        .btn-solve{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition);outline:none}
        .btn-solve:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.3)}
        .btn-solve:active{transform:translateY(0)}
        .btn-solve:disabled{opacity:.7;cursor:not-allowed;transform:none}
        .btn-clear,.btn-sample{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:none;color:var(--color-text-secondary);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition);outline:none}
        .btn-clear:hover,.btn-sample:hover{background:var(--color-surface-2);color:var(--color-text)}

        /* OUTPUT */
        .output-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
        .output-title{font-size:13px;font-weight:600;color:var(--color-text);display:flex;align-items:center;gap:8px}
        .output-status{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted)}
        .output-status.ready{background:var(--color-success)}
        .output-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;text-align:center;gap:12px;color:var(--color-text-muted)}
        .output-placeholder-icon{width:56px;height:56px;border-radius:var(--radius-lg);background:var(--color-surface-2);display:flex;align-items:center;justify-content:center}
        .output-placeholder p{font-size:14px;max-width:200px;line-height:1.5}
        .output-content{min-height:280px}

        /* RESULT */
        .result-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;margin-bottom:16px}
        .result-box.success{border-color:#a7f3d0;background:var(--color-success-light)}
        .result-box.error{border-color:#fca5a5;background:var(--color-error-light)}
        .result-box.warning{border-color:#fde68a;background:var(--color-warning-light)}
        .result-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-success);margin-bottom:8px}
        .result-box.error .result-label{color:var(--color-error)}
        .result-box.warning .result-label{color:var(--color-warning)}
        .result-value{font-family:var(--font-mono);font-size:28px;font-weight:600;color:var(--color-text);letter-spacing:-.01em}
        .result-value.small{font-size:14px}
        .result-note{font-size:12px;color:var(--color-text-secondary);margin-top:6px}

        /* STEPS */
        .steps-section{margin-top:16px}
        .steps-toggle{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--color-primary);cursor:pointer;background:none;border:none;padding:0;outline:none;margin-bottom:12px;font-family:var(--font-sans)}
        .steps-toggle:hover{opacity:.75}
        .steps-toggle-icon{transition:transform var(--transition)}
        .steps-toggle.open .steps-toggle-icon{transform:rotate(90deg)}
        .steps-body{padding-top:80px;display:flex;flex-direction:column;gap:12px}
        .steps-body.hidden{display:none}
        .step-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px}
        .step-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
        .step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:10px;font-weight:700;flex-shrink:0}
        .step-title{font-size:12px;font-weight:600;color:var(--color-text)}
        .step-body{padding-top:80px;font-size:12px;color:var(--color-text-secondary);line-height:1.6}
        .step-math{font-family:var(--font-mono);font-size:12px;color:var(--color-text);background:var(--color-surface-2);border-radius:var(--radius-sm);padding:8px 12px;margin-top:6px;overflow-x:auto;white-space:pre;line-height:1.8}
        .step-matrix-display{font-family:var(--font-mono);font-size:12px;line-height:1.8;color:var(--color-text);background:var(--color-surface-2);border-radius:var(--radius-sm);padding:10px 12px;margin-top:6px;overflow-x:auto;white-space:pre}

        /* RESULT MATRIX */
        .result-matrix{display:inline-flex;align-items:center;gap:4px;margin:10px 0}
        .result-matrix-bracket{font-size:36px;font-weight:200;color:var(--color-text-secondary);line-height:1}
        .result-matrix-grid{display:grid;gap:4px 12px}
        .result-matrix-cell{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--color-text);text-align:right;min-width:54px}

        /* CTA */
        .cta-section{max-width:1200px;margin:0 auto;padding:0 24px 56px}
        .cta-card{background:var(--color-cta-bg);border:1px solid var(--color-cta-border);border-radius:var(--radius-xl);padding:48px 40px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
        @media(max-width:640px){.cta-card{grid-template-columns:1fr;padding:32px 24px}}
        .cta-card::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 70%)}
        .cta-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-cta-accent);margin-bottom:12px}
        .cta-headline{font-family:var(--font-display);font-size:clamp(22px,3vw,32px);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
        .cta-body{padding-top:80px;font-size:15px;color:var(--color-cta-text);line-height:1.7;max-width:480px;margin-bottom:24px;opacity:.9}
        .cta-features{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
        .cta-feature{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-cta-text);opacity:.85}
        .cta-feature-dot{width:6px;height:6px;border-radius:50%;background:var(--color-cta-accent);flex-shrink:0}
        .cta-actions{display:flex;gap:12px;flex-wrap:wrap}
        .btn-cta-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#fff;color:var(--color-cta-bg);border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:all var(--transition)}
        .btn-cta-primary:hover{background:#e0e7ff;transform:translateY(-1px)}
        .btn-cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:all var(--transition)}
        .btn-cta-secondary:hover{background:rgba(255,255,255,.14)}
        .cta-trust{margin-top:20px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--color-cta-text);opacity:.6}

        /* SEO CONTENT */
        .seo-content{max-width:900px;margin:0 auto;padding:0 24px 80px}
        .seo-content h2{font-family:var(--font-display);font-size:clamp(20px,2.5vw,26px);font-weight:800;color:var(--color-text);letter-spacing:-.02em;margin:48px 0 16px;line-height:1.2}
        .seo-content h3{font-size:17px;font-weight:700;color:var(--color-text);margin:32px 0 12px;line-height:1.3}
        .seo-content p{font-size:15px;color:var(--color-text-secondary);line-height:1.8;margin-bottom:16px}
        .seo-content strong{color:var(--color-text);font-weight:600}
        .seo-content ul,.seo-content ol{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
        .seo-content li{font-size:15px;color:var(--color-text-secondary);line-height:1.7}
        .seo-content li strong{color:var(--color-text)}
        .seo-divider{border:none;border-top:1px solid var(--color-border);margin:48px 0}
        .info-box{border-radius:var(--radius-md);padding:20px 22px;margin:24px 0;border-left:3px solid}
        .info-box.blue{background:var(--color-primary-light);border-color:var(--color-primary)}
        .info-box.purple{background:#f5f3ff;border-color:#7c3aed}
        .info-box.green{background:var(--color-success-light);border-color:var(--color-success)}
        .info-box p{margin-bottom:0}
        .info-box-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);margin-bottom:6px}
        .info-box.purple .info-box-label{color:#7c3aed}
        .info-box.green .info-box-label{color:var(--color-success)}
        .formula-block{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px 20px;margin:16px 0;font-family:var(--font-mono);font-size:14px;color:var(--color-text);overflow-x:auto;white-space:pre;line-height:1.8}

        /* FAQ */
        .faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:8px}
        .faq-question{padding:18px 20px;font-size:15px;font-weight:600;color:var(--color-text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;transition:background var(--transition);background:none;border:none;width:100%;text-align:left;font-family:var(--font-sans)}
        .faq-question:hover{background:var(--color-surface-2)}
        .faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--color-text-secondary);transition:all var(--transition)}
        .faq-item.open .faq-icon{background:var(--color-primary);color:#fff;transform:rotate(45deg)}
        .faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s ease}
        .faq-answer.open{max-height:500px;padding:0 20px 18px}
        .faq-answer p{font-size:14px;color:var(--color-text-secondary);line-height:1.7;margin:0}

        /* TABLE */
        .compare-table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0}
        .compare-table th{background:var(--color-surface-2);padding:12px 16px;text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary);border:1px solid var(--color-border)}
        .compare-table td{padding:12px 16px;border:1px solid var(--color-border);color:var(--color-text-secondary);vertical-align:top}
        .compare-table td:first-child{font-weight:600;color:var(--color-text)}
        .compare-table tr:hover td{background:var(--color-surface-2)}

        /* FOOTER */
        .footer{border-top:1px solid var(--color-border);background:var(--color-surface)}
        .footer-inner{max-width:1200px;margin:0 auto;padding:32px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
        .footer-brand{font-size:13px;font-weight:600;color:var(--color-text-secondary)}
        .footer-links{display:flex;align-items:center;gap:20px;list-style:none}
        .footer-links a{font-size:13px;color:var(--color-text-muted);text-decoration:none;transition:color var(--transition)}
        .footer-links a:hover{color:var(--color-primary)}

        /* ANIMATIONS */
        .solving-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
        @keyframes spin{to{transform:rotate(360deg)}}
        @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
        .fade-in{animation:fadeIn .25s ease forwards}
        @media(max-width:600px){.navbar-links{display:none}.matrix-cell{width:50px;height:40px;font-size:13px}.cta-card{padding:28px 20px}.tool-input-section,.tool-output-section{padding:20px}}


/* =========================================
   index.html
   ========================================= */
:root {
            --primary: #2563EB;
            --primary-gradient: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            --accent-purple: #3B82F6;
            --accent-cyan: #93C5FD;
            --bg-body: #F8F9FA;
            --bg-glass: rgba(255,255,255,0.85);
            --border-color: rgba(0,0,0,0.08);
            --text-heading: #000000;
            --text-main: #374151;
            --text-secondary: #6B7280;
            --text-muted: #9CA3AF;
            --font-base: 'Inter', system-ui, sans-serif;
            --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
            --shadow-premium: 0 4px 6px -1px rgba(0,0,0,0.03), 0 10px 15px -3px rgba(0,0,0,0.03), inset 0 1px 1px rgba(255,255,255,1);
            --radius-md: 20px;
            --radius-lg: 32px;
            --transition-fast: 0.2s ease-out;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--font-base); background: var(--bg-body); color: var(--text-main); min-height: 100vh; }
        a { color: var(--accent-purple); text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* HEADER */
        .main-header {
            position: sticky; top: 0; z-index: 100;
            background: rgba(248,249,250,0.92);
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border-color);
        }
        .header-container {
            max-width: 1280px; margin: 0 auto; padding: 0 2rem;
            height: 68px; display: flex; align-items: center; gap: 2rem;
        }
        .header-logo img { height: 44px; width: auto; }
        .main-nav { flex: 1; }
        .nav-list { list-style: none; display: flex; align-items: center; gap: 0.25rem; }
        .nav-link {
            font-size: 0.875rem; font-weight: 600; color: var(--text-secondary);
            padding: 0.5rem 0.75rem; border-radius: 8px;
            transition: color var(--transition-fast), background var(--transition-fast);
        }
        .nav-link:hover, .nav-link.active { color: var(--primary); background: rgba(37,99,235,0.07); text-decoration: none; }
        .btn-primary-sm {
            display: inline-flex; align-items: center;
            padding: 0.6rem 1.4rem;
            background: var(--primary-gradient); color: #fff;
            font-size: 0.875rem; font-weight: 700; border-radius: 999px; border: none;
            cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
            box-shadow: 0 4px 14px rgba(37,99,235,0.35);
        }
        .btn-primary-sm:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,0.5); text-decoration: none; }
        @media (max-width: 640px) { .main-nav { display: none; } .header-container { padding: 0 1.25rem; } }

        /* BREADCRUMB */
        .breadcrumb-bar {
            max-width: 1200px; margin: 1.5rem auto 0; padding: 0 2rem;
            font-size: 0.85rem; color: var(--text-secondary);
        }
        .breadcrumb-bar a { color: var(--accent-purple); font-weight: 600; }
        .breadcrumb-sep { margin: 0 0.5rem; }

        /* HERO */
        .page-hero {
            max-width: 1200px; margin: 0 auto;
            padding: 3rem 2rem 2rem;
            text-align: center;
        }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 0.5rem;
            background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.18);
            color: var(--accent-purple); font-size: 0.75rem; font-weight: 700;
            letter-spacing: 0.07em; text-transform: uppercase;
            padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1.25rem;
        }
        .page-hero h1 {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 5vw, 3.25rem);
            font-weight: 900; letter-spacing: -0.03em; line-height: 1.1;
            margin-bottom: 1rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .page-hero p {
            font-size: 1.1rem; color: var(--text-secondary);
            max-width: 580px; margin: 0 auto;
            line-height: 1.75;
        }

        /* GRID */
        .tools-grid {
            max-width: 1200px; margin: 3rem auto;
            padding: 0 2rem 4rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        /* TOOL CARD */
        .tool-card {
            background: var(--bg-glass);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.7);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-premium);
            padding: 2rem;
            display: flex; flex-direction: column; gap: 1rem;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
            position: relative;
            overflow: hidden;
        }
        .tool-card::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, transparent 60%);
            pointer-events: none;
        }
        .tool-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(37,99,235,0.12); }
        .tool-card-icon {
            width: 52px; height: 52px; border-radius: 14px;
            background: var(--primary-gradient);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 6px 16px rgba(37,99,235,0.35);
            flex-shrink: 0;
        }
        .tool-card-icon svg { color: #fff; fill: #fff; }
        .tool-card h2 {
            font-family: var(--font-heading);
            font-size: 1.25rem; font-weight: 800; color: var(--text-heading);
            letter-spacing: -0.02em;
        }
        .tool-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; flex: 1; }
        .tool-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
        .tool-tag {
            padding: 0.2rem 0.65rem; border-radius: 999px;
            background: rgba(37,99,235,0.07); border: 1px solid rgba(37,99,235,0.15);
            font-size: 0.72rem; font-weight: 600; color: var(--accent-purple);
            letter-spacing: 0.03em;
        }
        .tool-cta {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: var(--primary-gradient); color: #fff;
            font-size: 0.875rem; font-weight: 700; border-radius: var(--radius-md);
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
            box-shadow: 0 4px 12px rgba(37,99,235,0.3);
            align-self: flex-start;
        }
        .tool-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,0.45); text-decoration: none; }

        /* COMING SOON CARD */
        .tool-card.coming-soon { opacity: 0.65; pointer-events: none; }
        .coming-badge {
            position: absolute; top: 1.25rem; right: 1.25rem;
            padding: 0.25rem 0.7rem; border-radius: 999px;
            background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.3);
            font-size: 0.7rem; font-weight: 700; color: #92400e; letter-spacing: 0.05em;
        }

        /* FOOTER */
        .main-footer { background: rgba(255,255,255,0.7); border-top: 1px solid rgba(0,0,0,0.06); margin-top: 2rem; }
        .footer-bottom {
            max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem;
            display: flex; align-items: center; justify-content: space-between;
            gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-muted);
        }
        .footer-legal { display: flex; gap: 1.25rem; }
        .footer-legal a { color: var(--text-muted); transition: color var(--transition-fast); }
        .footer-legal a:hover { color: var(--accent-purple); text-decoration: none; }

        @keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
        .anim-in { animation: fadeInUp 0.45s ease-out both; }
        .anim-d1 { animation-delay: 0.08s; }
        .anim-d2 { animation-delay: 0.16s; }
        .anim-d3 { animation-delay: 0.24s; }

/* FIX: Remove underline on header navigation links */
.main-header a:hover {
    text-decoration: none !important;
}
.main-nav a:hover,
.shift-pane a:hover,
.pane-card:hover {
    text-decoration: none !important;
}

/* === Header Right Group Alignment Fix (mobile) === */
.header-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

@media (max-width: 1024px) {
    /* Cancel the old margin-left:auto that splits search from buttons */
    .header-actions {
        margin-left: 0 !important;
        margin-right: 0 !important;
        order: 2 !important;
    }
    .mobile-search-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 1 !important;
        margin: 0 0 0 16px !important;
    }
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 3 !important;
        margin: 0 !important;
    }
}


/* === Classes Header Fix: alignment + mobile drawer === */

/* ── 1. Right-group is always a flex row ── */
.header-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

/* ── 2. Header container: logo LEFT, right-group RIGHT ── */
@media (max-width: 1024px) {
    .main-header .header-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 1rem !important;
    }

    /* Force logo to always be first (left) */
    .main-header .header-logo-wrapper {
        order: 0 !important;
        flex-shrink: 0 !important;
    }

    /* .main-nav is absolute — pulled out of flex flow */
    .main-header .main-nav {
        order: 999 !important;
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--bg-glass, rgba(255,255,255,0.97)) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1rem !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-8px) !important;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
        z-index: 999 !important;
        display: flex !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
    }

    .main-header .main-nav.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* nav-list inside the drawer: vertical column */
    .main-header .nav-list {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        position: static !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .main-header .nav-list.active {
        display: flex !important;
    }

    /* right-group: always last (right side of header) */
    .main-header .header-right-group {
        order: 1 !important;
        margin-left: auto !important;
        gap: 12px !important;
    }

    /* Items inside right-group — left to right: Search, Get Started, Hamburger */
    .mobile-search-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 1 !important;
        margin: 0 0 0 16px !important;
    }
    .header-actions {
        order: 2 !important;
        margin: 0 !important;
    }
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 3 !important;
        margin: 0 !important;
    }
}

/* =========================================================
   EMERGENCY HEADER FIX FOR TOOLS PAGES
   Forces layout correctness without affecting the rest of the site
   ========================================================= */

/* Remove any weird body padding pushing the header down */
body {
    padding-top: 0 !important;
}

/* Force header to stick to the exact top and take up flow space normally */
.main-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* DESKTOP LAYOUT (Un-merge the nav links and fix right group) */
@media (min-width: 1025px) {
    .main-header .container.header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 80px !important;
        padding: 0 24px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
    
    .main-header .main-nav {
        display: flex !important;
        flex: 1 !important;
        justify-content: center !important;
        position: static !important; /* Override mobile drawer absolute */
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
    }
    
    .main-header .nav-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 32px !important; /* This fixes the merged/squished links */
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    .main-header .nav-item {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .main-header .nav-link {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        padding: 8px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    .main-header .header-right-group {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 0 !important;
    }
    
    /* Hide mobile hamburger on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* MOBILE LAYOUT */
@media (max-width: 1024px) {
    .main-header .container.header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
        padding: 0 16px !important;
    }
    
    .main-header .header-right-group {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    
    /* Allow the mobile drawer script to show/hide the menu properly */
    .main-header .nav-list {
        gap: 16px !important;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .header-actions .btn, .header-actions .btn-primary, .header-actions .btn-primary-sm {
        padding: 0.6rem 1.25rem !important;
        font-size: 0.85rem !important;
    }
}
@media (max-width: 400px) {
    .header-actions .btn, .header-actions .btn-primary, .header-actions .btn-primary-sm {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.75rem !important;
    }
}

/* EMERGENCY MOBILE HEADER OVERFLOW FIX */
@media (max-width: 991px) {
    .main-header .header-container {
        padding: 0 10px !important; /* reduce side padding to give more room */
    }
    .main-header .header-logo-wrapper {
        flex-shrink: 1 !important; /* allow logo wrapper to shrink */
        min-width: 0 !important;
    }
    .main-header .header-logo img {
        max-width: 100% !important; /* ensure logo image scales down */
        height: auto !important;
        max-height: 36px !important;
    }
    .main-header .header-right-group {
        gap: 8px !important; /* reduce gap between search, button, hamburger */
        flex-shrink: 1 !important; /* allow right group to shrink if needed */
    }
    .mobile-search-trigger {
        margin: 0 4px !important; /* reduce huge left margin */
    }
    /* Drastically reduce button size on mobile to guarantee it fits */
    .main-header .header-actions .btn, 
    .main-header .header-actions .btn-primary, 
    .main-header .header-actions .btn-primary-sm {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
        letter-spacing: -0.2px !important;
        white-space: nowrap !important;
    }
}