:root{--bg:#f7f8fb;--surface:#fff;--surface-2:#f6f7f9;--text:#1a1d23;--muted:#5b6472;--border:#e2e5ea;--border-strong:#cdd1d9;--accent:#0060df;--accent-strong:#0050b3;--accent-soft:#eef4ff;--primary:#0060df;--on-primary:#fff;--primary-container:#d9e6ff;--on-primary-container:#001a41;--secondary:#00696b;--secondary-container:#cff1ea;--on-secondary-container:#00201e;--tertiary:#5a4f9e;--tertiary-container:#e9e2ff;--on-tertiary-container:#1a1149;--surface-container-lowest:#fff;--surface-container-low:#f5f7fb;--surface-container:#eef1f7;--surface-container-high:#e8ecf3;--shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);--shadow-md:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.05);--shadow-lg:0 8px 24px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.06);--radius-sm:8px;--radius:10px;--radius-lg:14px;--max:1200px;--header-h:68px;--font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Top navigation */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.topbar-inner{max-width:var(--max);margin:0 auto;height:var(--header-h);padding:0 24px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:.95rem}
.brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--text);color:var(--bg);font-weight:700}
.topnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.topnav a{position:relative;color:var(--muted);font-size:.9rem;font-weight:600;padding:8px 12px;border-radius:var(--radius-sm);transition:color .3s,background .3s}
.topnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.topnav a:hover{color:var(--text);background:var(--surface-2)}
.topnav a:hover::after,.topnav a.active::after{transform:scaleX(1)}
.topnav a.active{color:var(--accent);background:var(--accent-soft);font-weight:700}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:8px}
.icon-btn,.menu-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .3s,background .3s}
.icon-btn:hover,.menu-btn:hover{border-color:var(--border-strong);background:var(--surface-2)}
.menu-btn{display:none;font-size:1.1rem}

/* Mobile menu */
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px 20px;box-shadow:var(--shadow-lg);max-height:calc(100vh - var(--header-h));overflow-y:auto;opacity:0;transform:translateY(-12px);visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease}
.mobile-menu.open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}
.mobile-menu-group+.mobile-menu-group{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.mobile-menu-group a{display:block;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;font-weight:600;transition:color .3s,background .3s}
.mobile-menu-group a:hover{color:var(--accent);background:var(--accent-soft)}
.mobile-menu-group a.active{color:var(--accent);background:var(--accent-soft);font-weight:700}
.mobile-menu-label{display:block;padding:0 12px 6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Layout */
.layout{max-width:var(--max);margin:0 auto;padding:32px 24px 72px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.sidebar-toggle{display:none;width:100%;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;color:var(--text);font-size:.9rem;font-weight:600}
.sidebar-toggle .chevron{transition:transform .3s}

/* Documentation sidebar */
.doc-sidebar{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
.doc-nav{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 16px 20px;box-shadow:var(--shadow-sm)}
.doc-group+.doc-group{margin-top:26px}
.doc-heading{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding:0 12px}
.doc-nav ul{display:flex;flex-direction:column;gap:2px}
.doc-link{display:block;padding:8px 12px;border-radius:var(--radius-sm);color:var(--muted);font-size:.9rem;font-weight:600;border-left:2px solid transparent;transition:color .3s,background .3s,border-color .3s}
.doc-link:hover{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent)}
.doc-link.active{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent);font-weight:700}




/* new navigator HTML / CSS*/

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Page container: 800px, centered */
.main-nav {
  max-width: 800px;
  margin: 0 auto;
  padding: 35px 16px 50px;
}



/* ---------- Navigation section ---------- */
.nav-section {
  margin-bottom: 24px;
}

.nav-heading {
  font-size: .72rem;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px 8px;
}

/* Horizontal, single-row, scrollable track (no wrap) */
.nav-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.nav-bar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.nav-bar ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 8px 4px;
}

.nav-bar li {
  flex-shrink: 0;
}

.nav-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* touch-friendly target */
  padding: 0 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s, background .3s, border-color .3s;
}

.nav-chip:hover {
  color: var(--text);
  background: var(--surface-container-high);
  border-color: var(--border-strong);
}

.nav-chip:active {
  transform: translateY(1px);
}

.nav-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-chip.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .main-nav {
    padding: 24px 16px 48px;
  }

  .nav-chip {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .nav-bar ul {
    gap: 8px;
  }

  .nav-chip {
    padding: 0 14px;
  }
}



/* new navigation end */

/* Main content */
.main-content{min-width:0}
.hero{background:linear-gradient(135deg,var(--primary-container),var(--bg));border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 32px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.hero .eyebrow{color:var(--on-primary-container)}
.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--accent);margin-bottom:12px;text-transform:uppercase}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.5rem);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.hero h1 span{color:var(--muted)}
.hero-text{max-width:62ch;margin:18px 0 28px;color:var(--muted);font-size:1.05rem}
.search-box{display:flex;align-items:center;max-width:640px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:border-color .3s,box-shadow .3s}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-icon{font-size:1.4rem;margin:0 10px;color:var(--muted);line-height:1}
.search-box input{flex:1;border:0;outline:0;background:transparent;min-width:0;font-size:1rem;color:var(--text);padding:8px 0}
.search-box button,.primary-btn{border:0;background-color:var(--text);background-image:linear-gradient(90deg,var(--accent) 50%,var(--text) 50%);background-size:200% 100%;background-position:100% 0;color:#fff;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600;font-size:.9rem;transition:background-position .3s ease}
.search-box button:hover,.primary-btn:hover{background-position:0 0}
.search-engines{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.search-engines button{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.8rem;padding:6px 12px;border-radius:999px;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.search-engines button:hover{color:var(--text);border-color:var(--border-strong)}
.search-engines button.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

/* Sections */
.content-section{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
#ai-tools{background:var(--tertiary-container);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 32px}
#ai-tools .eyebrow{color:var(--on-tertiary-container)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:16px}
.section-heading h2{font-size:1.6rem;letter-spacing:-.02em;font-weight:700}
.outline-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:9px 14px;cursor:pointer;font-size:.88rem;font-weight:600;transition:border-color .3s,background .3s}
.outline-btn:hover{border-color:var(--border-strong);background:var(--surface-2)}

/* Shortcuts */
.shortcut-grid{
    display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:14px;
}

 /* media query*/
 @media (max-width: 768px) {
  .shortcut-grid {
    grid-template-columns: 1fr;
  }
}
 
.shortcut-card{min-height:128px;padding:18px;background:var(--surface-container-low);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s,transform .3s}
.shortcut-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.site-icon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:700;margin-bottom:14px}
.site-icon.dark{background:#202126;color:#fff}
.site-icon.orange{background:#fff3e0;color:#b35c00}
.site-icon.red{background:#ffecec;color:#c62828}
.site-icon.purple{background:#f1ebff;color:#6d3fd0}
.site-icon.green{background:#e6f6ec;color:#1e7d3a;font-size:1.3rem}
.shortcut-card strong{font-size:.86rem}
.shortcut-card small{color:var(--muted);font-size:.75rem;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Feature banner */
.feature-banner{margin:0 0 24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow-sm)}
.feature-visual{min-height:320px;position:relative;overflow:hidden;background:var(--surface-2)}

.feature-img
{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.feature-copy {
 padding:44px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 background:var(--surface)
}

.feature-copy .eyebrow {
    color:var(--on-secondary-container)
}

.feature-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:14px}

.feature-copy p:not(.eyebrow){color:var(--muted);margin-bottom:24px;max-width:46ch}
.primary-btn{display:inline-flex;align-items:center;width:max-content}

/* Resources */
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.resource-card{background:var(--surface-container-low);border:1px solid var(--border);border-radius:var(--radius);padding:26px;min-height:200px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s}
.resource-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.resource-number{color:var(--accent);font-size:.85rem;font-weight:700;letter-spacing:.04em}
.resource-card h3{margin:16px 0 8px;font-size:1.1rem;letter-spacing:-.01em}
.resource-card p{color:var(--muted);font-size:.92rem;line-height:1.6;margin-bottom:12px}
.resource-card a{color:var(--accent);font-size:.9rem;font-weight:600;margin-top:auto;padding-top:8px;transition:color .3s ease}
.resource-card a:hover{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px}

/* Footer */
footer{background:var(--surface-container-low);border-top:1px solid var(--border);color:var(--muted)}
.footer-inner{max-width:var(--max);margin:0 auto;padding:48px 24px 32px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.footer-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer .brand{color:var(--text)}
.footer-tagline{font-size:.9rem;color:var(--muted);max-width:36ch}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-heading{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.footer-col a{font-size:.9rem;color:var(--muted);font-weight:500;width:max-content;transition:color .3s ease}
.footer-col a:hover{color:var(--accent)}
.social-links{display:flex;gap:8px;flex-wrap:wrap}
.social-links a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s ease}
.social-links a:hover{color:var(--accent);background:var(--accent-soft);border-color:var(--accent);transform:translateY(-2px)}
.social-links svg{width:20px;height:20px;fill:currentColor}
.footer-bottom{max-width:var(--max);margin:0 auto;padding:16px 24px 28px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.78rem;flex-wrap:wrap}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* Dark mode */
.dark-mode{--bg:#0f1115;--surface:#171a21;--surface-2:#1e222b;--text:#f3f4f6;--muted:#9aa2af;--border:#2a2f3a;--border-strong:#3a4050;--accent:#a6c8ff;--accent-strong:#bcd3ff;--accent-soft:#14233d;--primary:#a6c8ff;--on-primary:#00315f;--primary-container:#004494;--on-primary-container:#d9e6ff;--secondary:#6adbd2;--secondary-container:#004f49;--on-secondary-container:#cff1ea;--tertiary:#c9bfff;--tertiary-container:#3f3792;--on-tertiary-container:#e9e2ff;--surface-container-lowest:#0a0c10;--surface-container-low:#171a21;--surface-container:#1e222b;--surface-container-high:#242833;--shadow-sm:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);--shadow-md:0 4px 12px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.45);--shadow-lg:0 8px 24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.5)}
.dark-mode .topbar{background:rgba(15,17,21,.9)}
.dark-mode .site-icon.dark{background:#2a2f3a}

/* Responsive */
@media(max-width:1080px){.shortcut-grid{grid-template-columns:repeat(3,1fr)}.resource-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:992px){.layout{grid-template-columns:1fr;gap:24px}.sidebar-toggle{display:none}.doc-sidebar{display:none}.feature-banner{grid-template-columns:1fr}.feature-visual{min-height:240px}.feature-copy{padding:36px 28px}}
@media(max-width:820px){.topnav{display:none}.menu-btn{display:grid}.footer-inner{grid-template-columns:repeat(2,1fr);gap:28px}.footer-brand{grid-column:1/-1}}
@media(max-width:600px){.layout{padding:20px 16px 56px}.topbar-inner{padding:0 16px}.shortcut-grid{grid-template-columns:repeat(2,1fr)}.resource-grid{grid-template-columns:1fr}.hero{padding:24px 20px}.hero h1{font-size:clamp(2rem,8vw,2.6rem)}.section-heading{flex-direction:column;align-items:flex-start;gap:12px}.content-section{padding:20px 16px}#ai-tools{padding:20px 16px}}
@media(max-width:480px){.layout{padding:16px 14px 48px}.topbar-inner{gap:12px}.brand{font-size:.88rem;gap:8px}.shortcut-grid{grid-template-columns:1fr}.search-box button{padding:10px 14px}.feature-visual{min-height:200px}.feature-copy{padding:26px 20px}.footer-inner{grid-template-columns:1fr;gap:24px}.footer-bottom{flex-direction:column;align-items:flex-start}}
@media(max-width:400px){.topbar-inner{padding:0 12px}.brand-mark{width:28px;height:28px}.hero{padding:20px 16px}.hero h1{font-size:1.85rem}.search-box button{padding:10px 12px}.search-engines button{padding:5px 10px}.content-section{padding:18px 14px}#ai-tools{padding:18px 14px}.shortcut-card{padding:16px}.resource-card{padding:20px}.feature-copy{padding:22px 16px}.mobile-menu{padding:12px 16px 18px}.footer-inner{padding:32px 16px 24px}.footer-bottom{padding:16px 16px 24px}}

/* Smooth layout transitions on window resize */
.topbar-inner,.layout,.main-content,.doc-sidebar{transition:max-width .3s ease,padding .3s ease,gap .3s ease}
.shortcut-grid,.resource-grid,.feature-banner{transition:grid-template-columns .3s ease,gap .3s ease}