/* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root{
    --bg:            #16171b;
    --bg-raised:     #1c1e23;
    --panel:         #1f2127;
    --panel-2:       #24262d;
    --border:        #2c2e36;
    --border-soft:   #24262d;
    --text:          #e8e8ea;
    --text-dim:      #a2a4ad;
    --text-faint:    #6c6e78;

    /* socket colors — lifted straight from Blender's node editor */
    --sock-shader:   #6bc46d;  /* green  */
    --sock-value:    #a1a1a1;  /* grey   */
    --sock-vector:   #6d6dc9;  /* purple */
    --sock-color:    #c9c93a;  /* yellow */
    --sock-image:    #c9c93a;  /* yellow */

    --cat-shader:    #6bc46d;
    --cat-compositor:#9d6dd6;
    --accent-pink:   #ff4fa3;
    --cat-install:   #dba8ec;
    --cat-modifiers: #5b8fe0;
    --cat-materials: #c2645f;
    --cat-assets:    #2fae8c;
    --cat-roadmap:   #d4af37;
    --cat-tutorials: #a6a6f2;
    --cat-faq:       #a13a3a;
    --cat-contact:   #e0559a;

    /* shader nodegroup subcategories (outliner sub-tree) */
    --sub-color:      #d9c14a;
    --sub-core:       #6bc46d;
    --sub-dynamic:    #e8794a;
    --sub-mapping:    #5b8fe0;
    --sub-normals:    #6d6dc9;
    --sub-shaders:    #9d6dd6;
    --sub-texturing:  #c2645f;
    --sub-utilities:  #2fae8c;

    --radius: 5px;
    --sidebar-w: 272px;
    --imgpanel-w: 300px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  /* dark, subtle scrollbars everywhere (sidebar + page) */
  *{
    scrollbar-width: thin;
    scrollbar-color: #35373f transparent;
  }
  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background:#35373f;
    border-radius:8px;
    border:2px solid transparent;
    background-clip:padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background:#454852; background-clip:padding-box; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-size:15px;
    line-height:1.65;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--text);
    margin:0 0 .5em 0;
  }
  code, .mono{ font-family:'JetBrains Mono',monospace; }
  a{ color:inherit; }
  p{ margin:0 0 1em 0; color:var(--text-dim); }

  /* subtle node-editor dot grid, used behind hero + sidebar header */
  .dotgrid{
    background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 18px 18px;
  }

  /* ============================================================
     LAYOUT SHELL
     ============================================================ */
  .shell{
    min-height:100vh;
  }

  /* ---------------- SIDEBAR ---------------- */
  .sidebar{
    position:fixed;
    top:0; left:0; bottom:0;
    width:var(--sidebar-w);
    background:var(--bg-raised);
    border-right:1px solid var(--border);
    overflow-y:auto;
    z-index:40;
    transition:transform .25s ease;
    scrollbar-width:none; /* Firefox: hide scrollbar entirely */
  }
  .sidebar::-webkit-scrollbar{ display:none; } /* Chrome/Safari/Edge: hide scrollbar entirely */
  .sidebar-head{
    padding:26px 22px 20px 22px;
    border-bottom:1px solid var(--border);
  }
  .sidebar-head .mark{
    display:flex; align-items:center; gap:9px;
    text-decoration:none; color:inherit;
  }
  .sidebar-head .mark .brand-logo{
    display:block;
    max-width:100%;
    height:auto;
  }
  .sidebar-head .sub{
    margin-top:6px; font-size:12px; color:var(--text-faint);
    font-family:'JetBrains Mono',monospace;
  }

  /* ---------------- SIDEBAR SEARCH ---------------- */
  .sidebar-search{ padding:14px 22px 4px 22px; }
  .sidebar-search input{
    /* reset native OS/browser search-field chrome (Firefox/Safari/some
       Windows Chrome builds otherwise render this as a plain white system
       text field, ignoring the background/border below) */
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    width:100%;
    background-color:var(--panel);
    background-image:none;
    box-shadow:none;
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    padding:9px 11px;
    outline:none;
  }
  .sidebar-search input::placeholder{ color:var(--text-faint); opacity:1; }
  .sidebar-search input:focus{ border-color:var(--accent-pink); }
  /* hide the native search-field icon/clear-button chrome across engines
     so nothing native peeks through the reset above */
  .sidebar-search input::-webkit-search-cancel-button,
  .sidebar-search input::-webkit-search-decoration{
    -webkit-appearance:none;
    appearance:none;
  }

  .search-hide{ display:none !important; }
  .search-no-results{
    display:none;
    padding:8px 10px 4px 10px;
  }
  .search-no-results.show{ display:block; }

  /* cross-page results (from window.SEARCH_INDEX) — matches in categories
     this page didn't load, shown right below the search box */
  .search-cross-results{
    display:none;
    padding:2px 12px 10px 12px;
    border-bottom:1px solid var(--border);
    margin-bottom:4px;
  }
  .search-cross-results.show{ display:block; }
  .search-cross-results .nav-empty{ padding:7px 10px; }
  .cross-result{
    display:flex; align-items:center; gap:9px;
    padding:8px 10px;
    border-radius:var(--radius);
    text-decoration:none;
    color:var(--text-dim);
  }
  .cross-result:hover{ background:var(--panel-2); color:var(--text); }
  .cross-result .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
  .cross-result-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .cross-result-name{ font-size:13px; color:inherit; }
  .cross-result-cat{
    font-family:'JetBrains Mono',monospace;
    font-size:10px; color:var(--text-faint);
  }

  .nav-group{ padding:2px 12px 2px 12px; }
  .nav-group-label{
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size:14.5px; letter-spacing:0; text-transform:uppercase;
    color:var(--text-dim);
    padding:14px 10px 14px 10px;
    display:flex; align-items:center; gap:7px;
    width:100%;
    background:none; border:none;
    cursor:pointer;
    text-align:left;
    text-decoration:none;
    border-radius:var(--radius);
  }
  .nav-group-label:hover{ color:var(--text); background:var(--panel-2); }
  .nav-group-label .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
  .nav-group-label .chevron{
    flex:none; transition:transform .15s ease; opacity:.7;
  }
  .nav-group-label.collapsed .chevron{ transform:rotate(-90deg); }
  .nav-group-label .group-count{
    margin-left:auto;
    color:var(--text-faint);
    font-size:10px;
    opacity:.7;
  }

  /* a category that ISN'T the current page: single row, links out to that
     category's own page (index.html for install, "<key>.html" otherwise) */
  .nav-group-label.nav-external .external-arrow{
    margin-left:auto; flex:none; opacity:.45;
  }
  .nav-group-label.nav-external:hover .external-arrow{ opacity:.8; }

  /* the current page's own category row in the sidebar */
  .nav-group-label.current-page{ color:var(--text); }

  .nav-group-links{
    display:grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .28s ease;
  }
  .nav-group-links .links-inner{
    overflow:hidden;
    min-height:0;
    display:flex; flex-direction:column;
  }
  .nav-group-links.collapsed{
    grid-template-rows: 0fr;
  }

  .nav-link{
    display:flex; align-items:center; gap:9px;
    padding:10px 10px 10px 10px;
    margin:0;
    border-radius:var(--radius);
    font-size:13.5px;
    color:var(--text-dim);
    text-decoration:none;
    cursor:pointer;
    border-left:2px solid transparent;
    transition:background .12s ease, color .12s ease, border-color .12s ease;
  }
  .nav-link .stub{
    width:6px; height:6px; border-radius:50%; flex:none; opacity:.65;
  }
  .nav-link:hover{ background:var(--panel-2); color:var(--text); }
  .nav-link.active{
    background:var(--panel-2);
    color:var(--text);
    border-left:2px solid var(--accent-active, #6bc46d);
  }
  .nav-link.active .stub{ opacity:1; }

  .nav-empty{
    padding:7px 10px 10px 10px;
    font-size:12px;
    font-style:italic;
    color:var(--text-faint);
  }

  /* ---------------- NESTED SUBGROUPS (outliner sub-tree, e.g. Shader Nodes > Color) ---------------- */
  .nav-subgroup{ padding-left:8px; }
  .nav-subgroup-label{
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size:12.5px; letter-spacing:0; text-transform:uppercase;
    color:var(--text-dim);
    padding:9px 10px 9px 22px;
    display:flex; align-items:center; gap:7px;
    width:100%;
    background:none; border:none;
    cursor:pointer;
    text-align:left;
    border-radius:var(--radius);
  }
  .nav-subgroup-label:hover{ color:var(--text); background:var(--panel-2); }
  .nav-subgroup-label .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
  .nav-subgroup-label .chevron{
    width:8px; height:8px; flex:none; transition:transform .15s ease; opacity:.6;
  }
  .nav-subgroup-label.collapsed .chevron{ transform:rotate(-90deg); }
  .nav-subgroup-label .group-count{
    margin-left:auto;
    color:var(--text-faint);
    font-size:9.5px;
    opacity:.7;
  }
  .nav-subgroup-links{
    display:grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .22s ease;
  }
  .nav-subgroup-links .links-inner{
    overflow:hidden;
    min-height:0;
    display:flex; flex-direction:column;
  }
  .nav-subgroup-links.collapsed{
    grid-template-rows: 0fr;
  }
  .nav-link.sub-link{ padding-left:32px; font-size:13px; }
  .nav-subgroup .nav-empty{ padding-left:22px; }

  .sidebar-foot{
    padding:16px 22px 26px 22px;
    font-size:11.5px; color:var(--text-faint);
    border-top:1px solid var(--border);
    margin-top:10px;
  }

  /* mobile sidebar toggle */
  .sidebar-toggle{
    display:none;
    position:fixed; top:14px; left:14px; z-index:60;
    background:var(--panel-2); border:1px solid var(--border);
    color:var(--text); width:38px; height:38px; border-radius:var(--radius);
    align-items:center; justify-content:center; cursor:pointer;
  }
  .sidebar-scrim{
    display:none;
    position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:35;
  }

  /* ---------------- MAIN COLUMN ---------------- */
  .main-col{
    margin-left:var(--sidebar-w);
  }

  /* Hero */
  .hero{
    padding:64px 48px 46px 48px;
    border-bottom:1px solid var(--border);
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse 70% 100% at 88% -10%, rgba(255,79,163,.16), transparent 55%),
      radial-gradient(ellipse 60% 90% at 8% 110%, rgba(157,109,214,.12), transparent 60%),
      linear-gradient(155deg, var(--bg-raised) 0%, var(--bg) 55%, #1a1520 100%);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 40% 60% at 95% 5%, rgba(255,79,163,.10), transparent 65%),
      linear-gradient(90deg, transparent 0%, rgba(255,79,163,.03) 100%);
    pointer-events:none;
  }
  .hero-inner{ max-width:760px; position:relative; }
  .hero-eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-faint);
    display:flex; align-items:center; gap:8px;
    margin-bottom:16px;
  }
  .eyebrow-home-link{
    color:var(--text-faint); text-decoration:none; margin-left:2px;
  }
  .eyebrow-home-link:hover{ color:var(--text); text-decoration:underline; }

  /* compact variant of .hero used on per-category pages (everything except
     the homepage) — same look, less vertical padding since there's no
     full brand pitch to make room for */
  .hero.hero-compact{ padding:44px 48px 34px 48px; }

  /* ---------------- HOMEPAGE CARD GRID ---------------- */
  .home-section{ padding:12px 48px 64px 48px; }
  .home-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:14px;
    margin-top:20px;
  }
  .home-card{
    display:block;
    padding:18px 20px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--panel);
    text-decoration:none;
    color:inherit;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .home-card:hover{
    border-color:var(--card-accent, var(--accent-pink));
    background:var(--panel-2);
    transform:translateY(-2px);
  }
  .home-card-head{
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
  }
  .home-card-head .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
  .home-card h3{
    font-size:15.5px; margin:0; font-family:'Space Grotesk',sans-serif;
  }
  .home-card p{
    font-size:13px; color:var(--text-dim); margin:0; line-height:1.55;
  }
  .hero h1{
    font-size:48px; line-height:1.1; margin-bottom:14px;
    font-weight:700;
    color:var(--accent-pink);
    text-shadow: 0 0 28px rgba(255,79,163,.35);
  }
  .hero p.lead{
    font-size:15.5px; color:var(--text-dim); max-width:560px;
  }
  .hero-legend{
    display:flex; flex-wrap:wrap; gap:18px;
    margin-top:26px; padding-top:22px; border-top:1px solid var(--border);
  }
  .legend-item{
    display:flex; align-items:center; gap:7px;
    font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:13px; letter-spacing:0; color:var(--text-dim);
  }
  .legend-item .dot{ width:8px; height:8px; border-radius:50%; }

  /* ---------------- NODE ARTICLE ---------------- */
  .node-article{
    padding:52px 48px 10px 48px;
    border-bottom:1px solid var(--border);
    display:grid;
    grid-template-columns: 1fr var(--imgpanel-w);
    gap:44px;
    align-items:start;
    scroll-margin-top:20px;
  }
  .node-article:last-of-type{ border-bottom:none; }

  .node-main{ max-width:640px; min-width:0; }

  .node-kicker{
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
  }
  .cat-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size:11.5px; letter-spacing:0; text-transform:uppercase;
    padding:4px 9px; border-radius:3px;
    border:1px solid var(--border);
    color:var(--text-dim);
  }
  .cat-badge .dot{ width:6px; height:6px; border-radius:50%; }
  .node-path{
    font-family:'Fredoka',sans-serif; font-weight:500;
    font-size:12.5px; letter-spacing:0; color:var(--text-faint);
  }

  .node-main h2{
    font-size:25px; margin-bottom:6px; display:flex; align-items:center; gap:10px;
  }
  .node-tagline{
    font-size:14px; color:var(--text-faint); font-style:italic; margin-bottom:18px;
  }
  .node-desc{ font-size:14.5px; }

  .section-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-faint);
    margin:30px 0 14px 0;
    display:flex; align-items:center; gap:8px;
  }
  .section-label::after{
    content:""; flex:1; height:1px; background:var(--border);
  }

  .socket-row{
    display:grid;
    grid-template-columns: 16px 1fr;
    gap:10px;
    padding:12px 0;
    border-top:1px solid var(--border-soft);
  }
  .socket-row:first-of-type{ border-top:none; }
  .socket-dot-col{ padding-top:5px; }
  .socket-dot{
    width:9px; height:9px; border-radius:50%;
    box-shadow:0 0 0 3px var(--panel);
  }
  .socket-name-row{
    display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:3px;
  }
  .socket-name{ font-weight:600; font-size:14px; color:var(--text); }
  .socket-desc{ font-size:13.5px; color:var(--text-dim); margin:0; }

  .outputs-list{ margin-top:2px; }

  .node-note{
    margin-top:22px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-left:2px solid var(--sock-image);
    border-radius:var(--radius);
    background:var(--panel-2);
    font-size:12.5px;
    color:var(--text-dim);
  }
  .node-note strong{ color:var(--text); }

  /* ---------------- IMAGE PANEL (per node) ---------------- */
  .node-images{
    position:sticky; top:20px;
    display:flex; flex-direction:column; gap:16px;
  }
  .img-slot{
    border:1px dashed var(--border);
    border-radius:var(--radius);
    background:var(--panel);
    aspect-ratio: 4 / 3;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px;
    color:var(--text-faint);
    text-align:center;
    padding:14px;
    overflow:hidden;
  }
  .img-slot svg{ opacity:.55; }
  .img-slot .slot-label{
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
  }
  .img-slot .slot-hint{
    font-size:10.5px; color:var(--text-faint); max-width:180px;
  }
  .img-slot.has-image{
    border-style:solid;
    padding:0;
    aspect-ratio:auto;
    display:block;
  }
  .img-slot.has-image img{
    display:block; width:100%; height:auto;
  }
  .img-caption{
    font-size:11.5px; color:var(--text-faint); text-align:center; margin-top:-8px;
  }

  /* ---------------- EMPTY PAGE (category with no published entries yet) ---------------- */
  .empty-page{
    padding:52px 48px; max-width:640px;
  }
  .empty-page p{ font-size:14.5px; }

  /* ---------------- RESPONSIVE ---------------- */
  @media (max-width: 980px){
    .node-article{ grid-template-columns:1fr; }
    .node-images{ position:static; flex-direction:row; overflow-x:auto; }
    .img-slot{ min-width:220px; aspect-ratio:4/3; }
  }
  @media (max-width: 760px){
    .sidebar{ transform:translateX(-100%); }
    .sidebar.open{ transform:translateX(0); }
    .sidebar-toggle{ display:flex; }
    .sidebar-scrim.open{ display:block; }
    .main-col{ margin-left:0; width:100%; }
    .hero{ padding:80px 22px 34px 22px; }
    .node-article{ padding:38px 22px; gap:28px; }
    .node-images{ flex-direction:column; }
    .home-section{ padding:8px 22px 44px 22px; }
  }