:root {
      --bg: #07130e; --bg-surface: #0c1c15; --bg-card: rgba(15, 33, 26, 0.94);
      --card-gradient: linear-gradient(135deg, rgba(16, 36, 29, 0.96) 0%, rgba(9, 23, 18, 0.98) 100%);
      --surface-border: rgba(47, 211, 154, 0.22); --border-subtle: rgba(255, 255, 255, 0.08);
      --gold: #f0b856; --gold-light: #fbbf24; --indigo: #00a878; --indigo-light: #7ee6c0;
      --brand: #00a878; --brand-light: #2fd39a; --brand-deep: #00795a;
      --emerald: #00a878; --emerald-light: #2fd39a; --cyan: #22d3ee; --rose: #f43f5e;
      --text-primary: #f0f7f4; --text-secondary: #a5c0b6; --text-muted: #74938a;
      --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px;
      --font: 'Assistant', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --mono: 'JetBrains Mono', monospace;
    }
    *, *::before, *::after { box-sizing: border-box; max-width: 100%; }
    body {
      background-color: var(--bg);
      color: var(--text-primary);
      font-family: var(--font);
      line-height: 1.7;
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      font-variant-numeric: tabular-nums;
    }
    .site-header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(10, 24, 19, 0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(47, 211, 154, 0.16);
      padding: 12px 20px;
    }
    .header-inner {
      max-width: 1140px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
    }
    .brand-logo {
      display: flex; align-items: center; gap: 8px;
      font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none;
    }
    .brand-logo .accent { color: var(--brand-light); }
    .nav-links { display: flex; align-items: center; gap: 14px; }
    .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
    .nav-link:hover { color: #fff; }
    .lang-btn {
      background: rgba(47, 211, 154, 0.15); border: 1px solid var(--surface-border);
      color: #7ee6c0; font-weight: 700; font-size: 0.82rem;
      padding: 4px 10px; border-radius: 6px; text-decoration: none;
    }
    .btn-launch-os {
      background: linear-gradient(135deg, var(--brand), var(--brand-light));
      color: #fff; font-weight: 800; font-size: 0.85rem;
      padding: 8px 16px; border-radius: 30px; text-decoration: none;
      display: inline-flex; align-items: center; min-height: 44px;
      box-shadow: 0 4px 14px rgba(0, 168, 120, 0.35);
    }
    .main-container { max-width: 1080px; margin: 0 auto; padding: 36px 20px 80px; }
    
    /* Hero */
    .hero { text-align: center; margin-bottom: 40px; }
    .badge-kicker {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(47, 211, 154, 0.14); border: 1px solid rgba(47, 211, 154, 0.35);
      color: #7ee6c0; font-size: 0.82rem; font-weight: 700;
      padding: 5px 16px; border-radius: 20px; margin-bottom: 14px;
    }
    h1 {
      font-size: clamp(1.9rem, 4.5vw, 2.75rem);
      font-weight: 900; line-height: 1.25; margin-bottom: 14px; letter-spacing: -0.02em;
    }
    .lead-p {
      font-size: 1.12rem; color: var(--text-secondary); max-width: 840px; margin: 0 auto 24px;
    }

    /* Jump Pills */
    .jump-nav {
      display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px;
    }
    .jump-pill {
      background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle);
      color: var(--text-secondary); font-size: 0.9rem; font-weight: 700;
      padding: 8px 18px; border-radius: 30px; text-decoration: none; transition: all 0.2s;
    }
    .jump-pill:hover, .jump-pill.active {
      background: linear-gradient(135deg, #00a878, #2fd39a); border-color: #2fd39a; color: #fff;
    }

    /* Sections */
    .section-block {
      background: var(--card-gradient); border: 1.5px solid var(--surface-border);
      border-radius: var(--radius-lg); padding: 32px; margin-bottom: 44px;
      scroll-margin-top: 80px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
      position: relative; overflow: hidden;
    }
    .section-block::before {
      content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--gold));
    }
    .section-head {
      border-bottom: 1px solid var(--border-subtle); padding-bottom: 18px; margin-bottom: 24px;
    }
    .section-tag {
      font-size: 0.82rem; font-weight: 800; color: var(--gold-light); text-transform: uppercase;
      letter-spacing: 0.05em; display: block; margin-bottom: 6px;
    }
    .section-title { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 900; color: #fff; margin: 0 0 6px; }
    .section-desc { color: var(--text-secondary); font-size: 0.98rem; margin: 0; }

    /* Diagnostic Compass Tool */
    .diagnostic-panel {
      background: rgba(5, 16, 12, 0.65); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md); padding: 24px; margin-bottom: 24px;
    }
    .diagnostic-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 16px; }
    .diag-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
    .diag-btn {
      background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);
      color: var(--text-secondary); padding: 14px 12px; border-radius: 12px;
      font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
      text-align: center; transition: all 0.2s; display: flex; flex-direction: column;
      align-items: center; gap: 8px;
    }
    .diag-btn:hover { border-color: var(--brand-light); color: #fff; background: rgba(47, 211, 154, 0.1); }
    .diag-btn.active {
      border-color: var(--brand-light); background: rgba(0, 168, 120, 0.25); color: #fff;
    }
    .diag-result {
      background: rgba(0, 168, 120, 0.1); border: 1px solid rgba(47, 211, 154, 0.3);
      border-radius: var(--radius-md); padding: 22px; transition: all 0.3s;
    }
    .diag-result h4 { color: #7ee6c0; margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; }
    .diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .diag-item-box { background: rgba(0,0,0,0.35); padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-subtle); }
    .diag-item-label { font-size: 0.78rem; font-weight: 800; color: var(--gold-light); margin-bottom: 4px; }
    .diag-item-text { font-size: 0.92rem; color: var(--text-primary); margin: 0; line-height: 1.5; }

    /* Dilemma Cards */
    .dilemma-card {
      background: rgba(5, 16, 12, 0.55); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md); padding: 24px; margin-bottom: 22px;
    }
    .dilemma-header {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
      margin-bottom: 14px;
    }
    .dilemma-num {
      flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
      background: rgba(47, 211, 154, 0.15); border: 1px solid rgba(47, 211, 154, 0.4);
      color: #7ee6c0; font-family: var(--mono); font-weight: 800;
      font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
    }
    .dilemma-title-wrap h3 { font-size: 1.22rem; font-weight: 800; color: #fff; margin: 0 0 4px; }
    .dilemma-sub { font-size: 0.88rem; color: var(--gold-light); margin: 0; font-weight: 600; }
    .comp-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.9rem; }
    .comp-table th, .comp-table td {
      border: 1px solid var(--border-subtle); padding: 10px 14px; text-align: start;
    }
    .comp-table th { background: rgba(47, 211, 154, 0.1); color: #7ee6c0; font-weight: 800; }
    .verdict-box {
      background: rgba(0, 168, 120, 0.12); border: 1px solid rgba(47, 211, 154, 0.35);
      border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 14px;
    }
    .verdict-box h5 { margin: 0 0 6px; font-size: 0.92rem; color: #7ee6c0; font-weight: 800; }
    .verdict-box p { margin: 0; font-size: 0.92rem; color: #fff; line-height: 1.55; }
    .crisis-protocol-box {
      background: rgba(244,63,94,0.08); border: 1px solid rgba(244,63,94,0.3);
      border-radius: var(--radius-sm); padding: 16px 20px; margin: 16px 0;
    }
    .crisis-protocol-box h5 { margin: 0 0 10px; font-size: 0.95rem; color: #fb7185; font-weight: 800; }
    .protocol-list { margin: 0; padding-inline-start: 22px; font-size: 0.92rem; }
    .protocol-list li { margin-bottom: 8px; line-height: 1.5; }

    /* Rules Grid */
    .iron-rules-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
      margin-bottom: 30px;
    }
    .rule-card {
      background: rgba(0,0,0,0.35); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md); padding: 20px; position: relative;
    }
    .rule-badge {
      display: inline-block; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.4);
      color: var(--gold-light); font-family: var(--mono); font-size: 0.78rem; font-weight: 800;
      padding: 2px 8px; border-radius: 6px; margin-bottom: 8px;
    }
    .rule-card h4 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: #fff; }
    .rule-card p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; }
    
    .roadmap-timeline {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
      margin-bottom: 24px;
    }
    .timeline-column {
      background: rgba(5,16,12,0.7); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md); padding: 22px;
    }
    .timeline-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .timeline-title { font-weight: 800; font-size: 1.05rem; color: #fff; }
    .timeline-badge {
      font-size: 0.75rem; font-weight: 700; background: rgba(47, 211, 154, 0.2);
      color: #7ee6c0; padding: 2px 8px; border-radius: 12px;
    }
    .timeline-list { margin: 0; padding-inline-start: 18px; font-size: 0.88rem; color: var(--text-secondary); }
    .timeline-list li { margin-bottom: 8px; line-height: 1.5; }

    /* Controls */
    .insights-controls {
      background: rgba(5,16,12,0.7); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md); padding: 20px; margin-bottom: 28px;
    }
    .search-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
    .search-input {
      flex: 1; min-width: 260px; background: rgba(0,0,0,0.4);
      border: 1.5px solid rgba(47, 211, 154, 0.3); border-radius: 10px;
      padding: 10px 16px; color: #fff; font-size: 0.95rem; font-family: inherit; outline: none;
    }
    .search-input:focus { border-color: var(--brand-light); }
    .category-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .cat-pill {
      background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle);
      color: var(--text-secondary); font-size: 0.82rem; font-weight: 700;
      padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all 0.15s;
    }
    .cat-pill:hover, .cat-pill.active {
      background: linear-gradient(135deg, #00a878, #2fd39a); border-color: #2fd39a; color: #fff;
    }

    /* Progress Tracker */
    .tracker-bar-box {
      background: rgba(0, 168, 120, 0.1); border: 1px solid rgba(47, 211, 154, 0.3);
      border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 24px;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    }
    .tracker-text { font-size: 0.92rem; font-weight: 700; color: #fff; }
    .tracker-count { color: #7ee6c0; font-family: var(--mono); font-size: 1.1rem; }
    .tracker-progress-wrap {
      flex: 1; min-width: 180px; height: 8px; background: rgba(255,255,255,0.1);
      border-radius: 10px; overflow: hidden;
    }
    .tracker-progress-fill {
      height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), #2fd39a);
      transition: width 0.3s ease;
    }

    /* Insights Grid */
    .insights-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px;
    }
    .insight-card {
      background: rgba(5,16,12,0.65); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md); padding: 22px; display: flex;
      flex-direction: column; justify-content: space-between; transition: all 0.2s;
    }
    .insight-card:hover { border-color: rgba(47, 211, 154, 0.45); transform: translateY(-2px); }
    .insight-card.done { border-color: rgba(47, 211, 154, 0.6); background: rgba(0, 168, 120, 0.08); }
    .insight-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .insight-id {
      font-family: var(--mono); font-size: 0.85rem; font-weight: 800;
      color: var(--gold-light); background: rgba(245,158,11,0.12);
      padding: 2px 8px; border-radius: 6px;
    }
    .insight-impact {
      font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 12px;
    }
    .impact-critical { background: rgba(244,63,94,0.15); color: #fb7185; border: 1px solid rgba(244,63,94,0.3); }
    .impact-high { background: rgba(245,158,11,0.15); color: var(--gold-light); border: 1px solid rgba(245,158,11,0.3); }
    .impact-mod { background: rgba(47, 211, 154, 0.15); color: #7ee6c0; border: 1px solid rgba(47, 211, 154, 0.3); }
    
    .insight-title { font-size: 1.08rem; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.4; }
    .insight-principle { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.6; }
    .insight-action {
      background: rgba(0,0,0,0.3); border-inline-start: 3px solid #2fd39a;
      padding: 10px 12px; border-radius: 4px; font-size: 0.86rem; color: #e2e8f0; margin-bottom: 16px;
    }
    .insight-action strong { color: #7ee6c0; }
    .insight-footer {
      display: flex; justify-content: space-between; align-items: center;
      border-top: 1px solid var(--border-subtle); padding-top: 12px;
    }
    .insight-cat-tag { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
    .insight-actions { display: flex; gap: 8px; align-items: center; }
    .btn-action-icon {
      background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary);
      font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 14px;
      cursor: pointer; transition: all 0.15s; font-family: inherit;
    }
    .btn-action-icon:hover { color: #fff; border-color: var(--text-secondary); }
    .btn-action-icon.done-btn.active {
      background: rgba(0, 168, 120, 0.25); border-color: #2fd39a; color: #7ee6c0;
    }

    /* Print Banner */
    .print-banner {
      background: linear-gradient(135deg, rgba(0, 168, 120, 0.18), rgba(16, 36, 29, 0.95));
      border: 1px solid var(--surface-border); border-radius: var(--radius-md);
      padding: 24px; text-align: center; margin-top: 36px;
    }
    .print-banner h4 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; color: #fff; }
    .print-banner p { margin: 0 0 18px; color: var(--text-secondary); font-size: 0.95rem; }
    .btn-print {
      background: linear-gradient(135deg, #00a878, #2fd39a); color: #fff; font-weight: 800; font-size: 0.9rem;
      padding: 10px 24px; border-radius: 30px; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(0, 168, 120, 0.35);
    }
    .btn-print:hover { background: #2fd39a; }

    /* Footer & Skip Link */
    .site-footer {
      border-top: 1px solid rgba(47, 211, 154, 0.14); padding: 44px 20px;
      font-size: 0.85rem; color: var(--text-muted); background: #06140e; text-align: center;
    }
    .skip-link {
      position: absolute; top: -48px; left: 12px; z-index: 9999; background: var(--brand);
      color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px; font-weight: 700;
      text-decoration: none; transition: top 0.15s;
    }
    .skip-link:focus-visible { top: 0; }
    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 2px solid var(--brand-light); outline-offset: 2px;
    }

    @media (max-width: 768px) {
      .main-container { padding: 24px 14px 60px; }
      .section-block { padding: 20px 16px; }
      .insights-grid { grid-template-columns: 1fr; }
      .comp-table { font-size: 0.82rem; }
      .comp-table th, .comp-table td { padding: 8px 10px; }
    }
    @media print {
      .site-header, .site-footer, .jump-nav, .insights-controls, .print-banner, .btn-action-icon, .skip-link { display: none !important; }
      body { background: #fff !important; color: #000 !important; }
      .section-block, .insight-card, .rule-card, .timeline-column { border: 1px solid #ccc !important; background: #fff !important; color: #000 !important; break-inside: avoid; }
      h1, h2, h3, h4, .section-title, .rule-card h4, .insight-title { color: #000 !important; }
      .diag-item-text, .insight-principle, .rule-card p { color: #333 !important; }
    }