:root{
    --bg:#0d1117;
    --bg-2:#0a0d12;
    --panel:#141a21;
    --panel-2:#1b232c;
    --panel-3:#1f2932;
    --line:#2a333d;
    --line-soft:#1e262e;
    --text:#e7ebf0;
    --text-muted:#8b96a3;
    --text-dim:#5b6673;
    --amber:#ffb703;
    --teal:#2dd4bf;
    --mono:'JetBrains Mono', ui-monospace, monospace;
    --sans:'IBM Plex Sans', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      linear-gradient(var(--bg) 0%, var(--bg) 100%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 32px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 32px);
    background-color:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  ::selection{ background:var(--amber); color:#0d1117; }
  a{ color:var(--teal); }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg-2); }
  ::-webkit-scrollbar-thumb{ background:#2c363f; border-radius:6px; }

  .app{ display:flex; min-height:100vh; }

  /* SIDEBAR */
  .sidebar{
    width:320px; flex:0 0 320px;
    background:var(--bg-2);
    border-right:1px solid var(--line);
    height:100vh; position:sticky; top:0;
    display:flex; flex-direction:column;
    z-index:40;
  }
  .brand{
    padding:20px 20px 16px; border-bottom:1px solid var(--line-soft);
  }
  .brand-mark{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--amber);
    text-transform:uppercase; display:flex; align-items:center; gap:8px; margin-bottom:6px;
  }
  .brand-mark::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(255,183,3,0.18); }
  .brand h1{ font-size:17px; margin:0; font-weight:600; letter-spacing:-.01em; }
  .brand p{ margin:4px 0 0; font-size:12.5px; color:var(--text-muted); }

  .search-wrap{ padding:14px 16px; border-bottom:1px solid var(--line-soft); }
  .search-box{
    display:flex; align-items:center; gap:8px;
    background:var(--panel); border:1px solid var(--line); border-radius:6px;
    padding:8px 10px;
  }
  .search-box span{ font-family:var(--mono); color:var(--text-dim); font-size:13px; }
  .search-box input{
    background:none; border:none; outline:none; color:var(--text);
    font-family:var(--mono); font-size:13px; width:100%;
  }
  .search-box input::placeholder{ color:var(--text-dim); }

  .nav-scroll{ flex:1; overflow-y:auto; padding:10px 10px 24px; }
  .nav-cat{ margin-bottom:4px; }
  .nav-cat-head{
    display:flex; align-items:center; gap:9px; width:100%;
    background:none; border:none; cursor:pointer; text-align:left;
    padding:9px 10px; border-radius:6px; color:var(--text);
    font-family:var(--sans); font-size:13px; font-weight:600;
  }
  .nav-cat-head:hover{ background:var(--panel); }
  .nav-cat-head .dot{ width:8px; height:8px; border-radius:2px; flex:0 0 auto; background:var(--c); }
  .nav-cat-head .count{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text-dim); }
  .nav-cat-head .chev{ font-family:var(--mono); font-size:10px; color:var(--text-dim); transition:transform .15s; }
  .nav-cat.open .chev{ transform:rotate(90deg); }
  .nav-roles{ display:none; padding:2px 0 8px 10px; border-left:1px dashed var(--line); margin-left:14px; }
  .nav-cat.open .nav-roles{ display:block; }
  .nav-role-btn{
    display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
    color:var(--text-muted); font-family:var(--sans); font-size:12.6px; padding:6px 10px;
    border-radius:5px; line-height:1.35;
  }
  .nav-role-btn:hover{ background:var(--panel); color:var(--text); }
  .nav-role-btn.active{ background:var(--panel-2); color:var(--text); box-shadow:inset 2px 0 0 var(--c); }
  .nav-role-btn.hidden{ display:none; }
  .nav-cat.hidden{ display:none; }

  .sidebar-foot{
    border-top:1px solid var(--line-soft); padding:12px 18px; font-family:var(--mono);
    font-size:10.5px; color:var(--text-dim); letter-spacing:.03em;
  }

  .nav-toggle{ display:none; }
  .scrim{ display:none; }

  /* MAIN */
  .main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }
  .main-content{ flex:1; padding:36px 44px 0; max-width:980px; }

  .site-footer{
    margin-top:40px; padding:16px 44px; border-top:1px solid var(--line-soft);
    display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; justify-content:space-between;
    font-family:var(--sans); font-size:12.5px; color:var(--text-muted);
  }
  .site-footer{
	margin-top:auto;
    padding:16px 44px; border-top:1px solid var(--line-soft);
    display:flex; flex-wrap:wrap; gap:16px 16px; align-items:center; justify-content:space-between;
    font-family:var(--sans); font-size:12.5px; color:var(--text-muted);
  }
  .footer-links{ display:flex; gap:16px; }
  .footer-links a{ color:var(--text-muted); text-decoration:none; }
  .footer-links a:hover{ color:var(--teal); }
  .crumbs{
    font-family:var(--mono); font-size:11.5px; color:var(--text-dim); letter-spacing:.03em;
    margin-bottom:22px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .crumbs button{
    background:none; border:none; color:var(--text-muted); font-family:var(--mono);
    font-size:11.5px; cursor:pointer; padding:0;
  }
  .crumbs button:hover{ color:var(--amber); }
  .crumbs .sep{ color:var(--line); }
  .crumbs .current{ color:var(--amber); }

  .hero{ padding-bottom:8px; }
  .hero-eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--amber); margin-bottom:14px; display:flex; align-items:center; gap:10px;
  }
  .hero-eyebrow .line{ height:1px; flex:1; background:linear-gradient(90deg, var(--amber), transparent); }
  .hero h2{
    font-size:clamp(28px,4vw,42px); line-height:1.08; margin:0 0 16px; letter-spacing:-.02em; font-weight:700;
  }
  .hero-sub{ color:var(--text-muted); font-size:15.5px; max-width:640px; margin:0 0 28px; }
  .stat-row{ display:flex; gap:28px; flex-wrap:wrap; margin-bottom:40px; }
  .stat{ font-family:var(--mono); }
  .stat b{ display:block; font-size:26px; color:var(--text); font-weight:700; }
  .stat span{ font-size:11px; color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase; }

  .cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
  .cat-card{
    background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--c);
    border-radius:8px; padding:18px 18px 16px; cursor:pointer; text-align:left;
    font-family:var(--sans); color:var(--text); transition:transform .12s, border-color .12s;
  }
  .cat-card:hover{ transform:translateY(-2px); border-color:var(--c); }
  .cat-card .tag{ font-family:var(--mono); font-size:10.5px; color:var(--c); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; display:block; }
  .cat-card h3{ margin:0 0 8px; font-size:16.5px; font-weight:600; }
  .cat-card p{ margin:0 0 12px; font-size:13px; color:var(--text-muted); line-height:1.5; }
  .cat-card .n{ font-family:var(--mono); font-size:11px; color:var(--text-dim); }

  .cat-header{ margin-bottom:26px; }
  .cat-header .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c); margin-bottom:8px; display:block; }
  .cat-header h2{ margin:0 0 8px; font-size:30px; font-weight:700; letter-spacing:-.01em; }
  .cat-header p{ margin:0; color:var(--text-muted); max-width:620px; }
  .role-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:22px; padding-bottom:24px }
  .role-card{
    background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px 16px 14px;
    cursor:pointer; text-align:left; color:var(--text); font-family:var(--sans);
  }
  .role-card:hover{ border-color:var(--c); }
  .role-card h4{ margin:0 0 6px; font-size:14.5px; font-weight:600; }
  .role-card p{ margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.5; }
  .role-card .go{ font-family:var(--mono); font-size:10.5px; color:var(--c); margin-top:10px; display:block; }

  .spec-head{ border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:28px; }
  .spec-head .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c); margin-bottom:10px; display:block; }
  .spec-head h2{ margin:0 0 14px; font-size:clamp(24px,3.4vw,34px); font-weight:700; letter-spacing:-.015em; line-height:1.12; }
  .spec-head .scope{ font-size:15px; color:var(--text-muted); max-width:700px; margin:0; }

  .section{ margin-bottom:38px; }
  .section-label{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-dim); display:flex; align-items:center; gap:10px; margin-bottom:18px;
  }
  .section-label .let{ color:var(--c); }
  .section-label .line{ height:1px; flex:1; background:var(--line); }

  .scope-details-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:14px; }
  .scope-box{ background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:14px; }
  .scope-box h5{ margin:0 0 6px; font-family:var(--mono); font-size:11.5px; color:var(--c); text-transform:uppercase; letter-spacing:.05em; }
  .scope-box p{ margin:0; font-size:13px; color:var(--text-muted); line-height:1.45; }

  .flow{ display:flex; flex-direction:column; max-width:640px; }
  .flow-node{ display:flex; gap:14px; align-items:flex-start; }
  .flow-num{
    font-family:var(--mono); font-size:11px; font-weight:700; color:var(--bg);
    background:var(--c); width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px;
  }
  .flow-box{
    background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--c);
    border-radius:6px; padding:11px 14px; font-size:13.5px; color:var(--text); flex:1;
  }
  .flow-connector{ width:26px; display:flex; justify-content:center; position:relative; height:22px; }
  .flow-connector i{ width:2px; height:100%; background:var(--c); opacity:.55; display:block; }
  .flow-connector::after{
    content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
    border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--c);
    opacity:.55;
  }

  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    font-family:var(--mono); font-size:12px; color:var(--text); background:var(--panel-2);
    border:1px solid var(--line); padding:6px 11px; border-radius:5px;
  }

  .cert-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .cert-badge{
    font-family:var(--mono); font-size:12.5px; color:var(--text); background:var(--panel-2);
    border:1px solid var(--c); border-radius:5px; padding:9px 14px; 
  }
  .cert-arrow{ color:var(--c); font-family:var(--mono); padding:0 10px; opacity:.7; }

  .res-list{ display:flex; flex-direction:column; gap:8px; }
  .res-item{
    display:flex; gap:12px; align-items:baseline; padding:10px 14px; background:var(--panel);
    border:1px solid var(--line-soft); border-radius:6px; font-size:13.5px;
  }
  .res-item .marker{ color:var(--c); font-family:var(--mono); font-size:12px; }

  .pivot-text{ font-size:14px; color:var(--text-muted); max-width:700px; margin:0 0 12px; }

  .nav-buttons{ display:flex; gap:12px; margin-top:44px; padding-top:24px; padding-bottom:24px ; border-top:1px solid var(--line-soft); }
  .nav-buttons.top{ margin-top:0; margin-bottom:28px; padding-top:0; border-top:none; }
  .nav-buttons button{
    font-family:var(--mono); font-size:12px; background:var(--panel); border:1px solid var(--line);
    color:var(--text-muted); padding:10px 16px; border-radius:6px; cursor:pointer;
  }
  .nav-buttons button:hover{ color:var(--text); border-color:var(--text-dim); }

  .empty-search{ color:var(--text-dim); font-size:13.5px; padding:30px 0; font-family:var(--mono); }

  @media (max-width:900px){
    .sidebar{
      position:fixed; left:0; top:0; height:100vh; transform:translateX(-104%);
      transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.5);
    }
    .sidebar.open{ transform:translateX(0); }
    .nav-toggle{
      display:flex; align-items:center; gap:8px; position:fixed; top:16px; left:16px; z-index:30;
      background:var(--panel); border:1px solid var(--line); color:var(--text);
      font-family:var(--mono); font-size:12px; padding:9px 13px; border-radius:6px; cursor:pointer;
    }
    .scrim.open{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35; }
    .main-content{ padding:80px 20px 0; }
    .site-footer{ padding:16px 20px 60px; flex-direction:column; align-items:flex-start; gap:10px; }
  }