* { font-family: 'Instrument Sans', sans-serif; }
    h1, h2 { font-weight: 300 !important; }
    .brand-title { font-weight: 500; }
    html { scroll-behavior: smooth; }

    :root {
      --navy: #1e3a5f;
      --blue: #2563eb;
      --teal: #0891b2;
      --green: #059669;
      --amber: #d97706;
      --red: #dc2626;
    }

    /* ── Scroll fade-in ── */
    .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* ── Card hover ── */
    .card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
    .card-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.13); }

    /* ── Effect badges ── */
    .badge-positive { background: #d1fae5; color: #065f46; }
    .badge-negative { background: #fee2e2; color: #991b1b; }
    .badge-mixed    { background: #fef3c7; color: #92400e; }
    .badge-unknown  { background: #f1f5f9; color: #64748b; }

    /* ── Effect border left ── */
    .border-positive { border-left: 4px solid #059669; }
    .border-negative { border-left: 4px solid #dc2626; }
    .border-mixed    { border-left: 4px solid #d97706; }
    .border-unknown  { border-left: 4px solid #94a3b8; }

    /* ── Missing field highlight ── */
    .missing { background: #fffbeb; border: 1px dashed #f59e0b; color: #92400e; padding: 2px 6px; border-radius: 4px; font-style: italic; font-size: 0.8rem; }

    /* ── Tabs ── */
    .tab-btn { padding: 0.5rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.15s; border: 1.5px solid transparent; }
    .tab-btn.active { background: #1e3a5f; color: white; }
    .tab-btn:not(.active) { color: #64748b; border-color: #e2e8f0; }
    .tab-btn:not(.active):hover { border-color: #94a3b8; color: #1e293b; }

    /* ── Chip filters ── */
    .chip { padding: 0.3rem 0.875rem; border-radius: 0.4rem; border: 1.5px solid #e2e8f0; font-size: 0.8125rem; cursor: pointer; transition: all 0.15s; background: white; color: #475569; white-space: nowrap; }
    .chip:hover { border-color: #1e3a5f; color: #1e3a5f; }
    .chip.active { background: #1e3a5f; border-color: #1e3a5f; color: white; }

    /* ── Drop zone ── */
    .drop-zone { border: 2px dashed #cbd5e1; border-radius: 0.75rem; transition: all 0.2s; }
    .drop-zone.drag-over { border-color: #2563eb; background: #eff6ff; }

    /* ── Modal ── */
    .modal-wrap { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 200; overflow-y: auto; padding: 1.5rem; }
    .modal-wrap.open { display: flex; align-items: flex-start; justify-content: center; }
    .modal-box { background: white; border-radius: 1rem; width: 100%; max-width: 900px; box-shadow: 0 24px 64px rgba(0,0,0,0.2); margin: auto; }

    /* ── Form inputs ── */
    .inp { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; }
    .inp:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
    .lbl { display: block; font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }

    /* ── Radio group ── */
    .radio-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .radio-opt { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; cursor: pointer; font-size: 0.8125rem; color: #475569; transition: all 0.15s; }
    .radio-opt:hover { border-color: #94a3b8; }
    .radio-opt input { accent-color: #1e3a5f; }
    .radio-opt.selected { border-color: #1e3a5f; background: #f0f4ff; color: #1e3a5f; font-weight: 500; }

    /* ── Checkbox pills (multi-select) ── */
    .check-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .check-opt { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; cursor: pointer; font-size: 0.8125rem; color: #475569; transition: all 0.15s; background: white; }
    .check-opt:hover { border-color: #94a3b8; }
    .check-opt input { accent-color: #1e3a5f; }
    .check-opt.selected { border-color: #1e3a5f; background: #f0f4ff; color: #1e3a5f; font-weight: 500; }

    /* ── Spinner ── */
    .spin { width: 22px; height: 22px; border: 3px solid #e2e8f0; border-top-color: #2563eb; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Toast ── */
    #toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; transform: translateY(1rem); opacity: 0; transition: all 0.25s; pointer-events: none; }
    #toast.show { transform: translateY(0); opacity: 1; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }

    /* ── Gradient hero ── */
    .hero-gradient { background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 60%, #0891b2 100%); }

    /* ── Section divider ── */
    .section-dot { width: 10px; height: 10px; border-radius: 50%; background: #2563eb; display: inline-block; }

    /* ── Template visual ── */
    .template-col { border-radius: 0.75rem; padding: 1.25rem; height: 100%; }

    /* ── Sticky nav shadow on scroll ── */
    #navbar { transition: box-shadow 0.2s; }
    #navbar.scrolled { box-shadow: 0 1px 16px rgba(0,0,0,0.1); }

    /* ── Design-space map ── */
    #design-map, #compare { scroll-margin-top: 4rem; }
    .feature-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; background: white; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; }
    .feature-field { flex: 1 1 210px; max-width: 320px; }
    .feature-field label { display: block; font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
    .feature-action { height: 2.5rem; padding: 0 0.9rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; background: white; color: #475569; font-size: 0.8rem; font-weight: 600; transition: all 0.15s; }
    .feature-action:hover { border-color: #1e3a5f; color: #1e3a5f; background: #f8fafc; }
    .feature-action.primary { border-color: #1e3a5f; background: #1e3a5f; color: white; }
    .feature-action.primary:hover { background: #162d4a; color: white; }
    .feature-action:disabled { opacity: 0.45; cursor: not-allowed; }
    .map-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-left: auto; color: #64748b; font-size: 0.75rem; }
    .map-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
    .map-legend i { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; display: inline-block; }
    .map-scroll { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 0.75rem; background: white; padding: 1rem; }
    .design-map-grid { display: grid; gap: 0.4rem; min-width: 720px; }
    .map-corner { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 0.4rem 0.35rem 0; color: #94a3b8; font-size: 0.65rem; font-weight: 700; line-height: 1.25; text-align: right; text-transform: uppercase; letter-spacing: 0.04em; }
    .map-column-label { display: flex; align-items: flex-end; justify-content: center; min-height: 2.75rem; padding: 0.25rem; color: #475569; font-size: 0.72rem; font-weight: 700; line-height: 1.2; text-align: center; }
    .map-row-label { display: flex; align-items: center; justify-content: flex-end; padding-right: 0.55rem; color: #334155; font-size: 0.78rem; font-weight: 700; line-height: 1.2; text-align: right; }
    .map-cell { min-height: 3.6rem; border: 1px solid #dbe3ec; border-radius: 0.55rem; display: flex; align-items: center; justify-content: center; color: #1e293b; font-size: 0.95rem; font-weight: 800; transition: transform 0.15s, box-shadow 0.15s; }
    button.map-cell:not(.empty):hover { transform: translateY(-2px); box-shadow: 0 9px 18px -12px rgba(15, 23, 42, 0.65); }
    .map-cell.empty { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f1f5f9 6px, #f1f5f9 12px); border-style: dashed; border-color: #cbd5e1; color: #94a3b8; font-size: 0.62rem; letter-spacing: 0.08em; }
    .map-cell.selected { box-shadow: 0 0 0 2px #1e3a5f; }
    .map-total { display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 0.7rem; font-weight: 700; }
    .map-study-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; width: 100%; padding: 0.7rem 0; border-top: 1px solid #f1f5f9; text-align: left; }
    .map-study-row:first-child { border-top: 0; }
    .map-study-row:hover .map-study-title { color: #1e3a5f; }
    .map-study-id { color: #94a3b8; font-size: 0.7rem; font-weight: 700; }
    .map-study-title { color: #334155; font-size: 0.82rem; font-weight: 600; line-height: 1.35; }

    /* ── Pairwise comparison ── */
    .comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
    .compare-card { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 0.85rem; background: white; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
    .compare-card-header { padding: 1rem; border-bottom: 1px solid #e2e8f0; }
    .compare-section { padding: 0.85rem 1rem 1rem; border-top: 1px solid #f1f5f9; }
    .compare-section:first-of-type { border-top: 0; }
    .compare-section-title { margin-bottom: 0.5rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
    .compare-field { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; margin: 0 -0.4rem; padding: 0.42rem 0.4rem; border-radius: 0.4rem; border-left: 3px solid transparent; }
    .compare-field.same { opacity: 0.5; }
    .compare-field.diff { background: #fffbeb; border-left-color: #d97706; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .compare-label { color: #94a3b8; font-size: 0.7rem; font-weight: 600; line-height: 1.35; }
    .compare-value { min-width: 0; color: #334155; font-size: 0.8rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
    .compare-empty { padding: 2.5rem 1rem; border: 1px dashed #cbd5e1; border-radius: 0.75rem; color: #94a3b8; text-align: center; font-size: 0.85rem; }

    /* ── "?" tooltip icon ── */
    .tip {
      display: inline-flex; align-items: center; justify-content: center;
      width: 14px; height: 14px; margin-left: 0.35rem; border-radius: 50%;
      background: #e2e8f0; color: #64748b; font-size: 0.6rem; font-weight: 700;
      cursor: help; vertical-align: middle; position: relative;
    }
    .tip:hover, .tip:focus { background: #1e3a5f; color: #fff; outline: none; }
    .tip-warn { background: #fef3c7; color: #92400e; }
    .tip-warn:hover, .tip-warn:focus { background: #d97706; color: #fff; }
    .tip::after {
      content: attr(data-tip-text);
      position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%);
      background: #1e293b; color: #fff; padding: 0.5rem 0.7rem; border-radius: 0.4rem;
      font-size: 0.72rem; font-weight: 500; line-height: 1.4; white-space: normal;
      width: max-content; max-width: 220px; text-align: left;
      opacity: 0; pointer-events: none; transition: opacity 0.15s;
      z-index: 40; text-transform: none; letter-spacing: normal;
    }
    .tip:hover::after, .tip:focus::after { opacity: 1; }

    @media (max-width: 860px) {
      .comparison-grid { grid-template-columns: 1fr; }
      .map-legend { width: 100%; margin-left: 0; }
    }
    @media (max-width: 520px) {
      .compare-field { grid-template-columns: 1fr; gap: 0.15rem; }
      .feature-field { max-width: none; }
    }