:root {
  --bg: #0b0d0e;
  --bg-deep: #070809;
  --surface: #111416;
  --surface-2: #161a1d;
  --surface-3: #1b2023;
  --text: #f1f3f2;
  --muted: #929b98;
  --muted-2: #69726f;
  --line: #293033;
  --line-soft: rgba(220,226,223,.12);
  --accent: #d8dddb;
  --accent-2: #aeb6b3;
  --accent-dark: #171a1c;
  --headline-gradient: linear-gradient(140deg,#fff 0%,#dfe4e2 45%,#9aa39f 100%);
  --shell-wide: min(1460px, calc(100% - 36px));
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; min-height: 100vh; padding-top: 66px; background: linear-gradient(145deg,#101315 0%,var(--bg) 48%,#080a0b 100%); background-attachment: fixed; color: var(--text); font-family: var(--sans); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
.shell-wide { width: var(--shell-wide); margin-inline: auto; }
.shell { width: min(1040px,calc(100% - 36px)); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 9px 12px; background: var(--accent); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.grid-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(205,212,209,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(205,212,209,.025) 1px,transparent 1px),radial-gradient(circle at 80% 8%,rgba(180,188,185,.07),transparent 28%); background-size: 52px 52px,52px 52px,auto; }
.grid-glow::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(239,243,241,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(239,243,241,.22) 1px,transparent 1px); background-size: 52px 52px; filter: drop-shadow(0 0 7px rgba(226,233,230,.28)); -webkit-mask-image: linear-gradient(110deg,transparent 28%,rgba(0,0,0,.15) 38%,#000 48%,#000 52%,rgba(0,0,0,.15) 62%,transparent 72%); mask-image: linear-gradient(110deg,transparent 28%,rgba(0,0,0,.15) 38%,#000 48%,#000 52%,rgba(0,0,0,.15) 62%,transparent 72%); -webkit-mask-size: 240% 100%; mask-size: 240% 100%; animation: grid-light-roll 7s linear infinite; }
@keyframes grid-light-roll { from { -webkit-mask-position:145% 0; mask-position:145% 0; } to { -webkit-mask-position:-145% 0; mask-position:-145% 0; } }
body > :not(.grid-glow):not(.skip-link):not(.site-header) { position: relative; z-index: 1; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(11,13,14,.94); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.topbar { min-height: 66px; display: grid; grid-template-columns: auto minmax(0,1fr) minmax(210px,280px) auto; align-items: center; gap: clamp(16px,2.1vw,30px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-weight: 700; letter-spacing: -.025em; }
.brand-mark { display: block; width: 34px; height: 34px; flex: 0 0 34px; border: .5px solid rgba(255,255,255,.88); border-radius: 50%; overflow: hidden; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.top-search { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 14px; border: 1px solid var(--line); border-radius: 4px; background: #0d1011; color: var(--muted); font-size: 13px; }
.top-search:hover { border-color: #495154; color: var(--text); }
.top-search kbd { min-width: 22px; padding: 1px 6px; border: 1px solid #3a4245; border-radius: 3px; color: var(--accent-2); background: var(--surface-2); font: 500 11px var(--mono); text-align: center; }
.desktop-nav { justify-self: start; display: flex; align-items: center; gap: clamp(14px,1.7vw,25px); color: var(--muted); font-size: 13px; white-space: nowrap; }
.desktop-nav a { position: relative; display: grid; align-items: center; min-height: 66px; }
.desktop-nav a:hover,.desktop-nav a[aria-current="page"] { color: var(--text); }
.desktop-nav a[aria-current="page"]::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); }
.product-action { padding: 9px 13px; border: 1px solid #41494c; border-radius: 4px; font-size: 12px; }
.product-action:hover { background: var(--accent); color: var(--bg); }

.docs-layout { display: grid; grid-template-columns: 220px minmax(0,1fr) 180px; gap: 34px; align-items: start; }
.side-nav,.page-toc { position: sticky; top: 88px; max-height: calc(100vh - 106px); overflow: auto; padding: 30px 0; }
.side-nav { padding-right: 18px; border-right: 1px solid var(--line); }
.side-label,.page-toc p { margin: 0 0 10px; color: var(--muted-2); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.side-label.side-group { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.side-nav a,.page-toc a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--muted); font-size: 12px; }
.side-nav a:hover,.page-toc a:hover { color: var(--text); background: rgba(216,221,219,.04); }
.side-nav a.active { color: var(--text); border: 1px solid #4d5653; background: rgba(216,221,219,.06); }
.nav-glyph { margin-right: 8px; color: var(--accent); font-size: 9px; }
.page-toc { padding-left: 14px; }
.page-toc a { padding-inline: 0; background: none; }
.content-column { min-width: 0; padding: 30px 0 90px; }
.breadcrumbs { display: flex; gap: 9px; margin: 0 0 26px; color: var(--muted-2); font-size: 12px; }
.breadcrumbs strong { color: var(--accent-2); }

.portal-hero { min-height: 390px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; padding: clamp(32px,5vw,58px); border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(135deg,rgba(31,36,38,.97),rgba(15,18,19,.97)); overflow: hidden; }
.eyebrow,.kicker { margin: 0 0 16px; color: var(--accent-2); font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.portal-hero h1,.page-hero h1,.projects-hero h1,.article-header h1 { margin: 0; font-size: clamp(40px,4.6vw,64px); line-height: 1.02; letter-spacing: -.055em; background: var(--headline-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 9px 22px rgba(0,0,0,.38); }
.portal-hero .hero-copy > p:last-of-type { max-width: 620px; margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; font: 500 11px var(--mono); }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.button-primary:hover { background: #fff; }
.button-ghost:hover { border-color: #596164; background: rgba(255,255,255,.025); }
.terminal-card { align-self: stretch; border: 1px solid var(--line); border-radius: 4px; background: rgba(7,8,9,.78); box-shadow: none; }
.terminal-bar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); font: 400 10px var(--mono); }
.terminal-label { padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; }
.terminal-body { padding: 24px; font: 400 11px/1.7 var(--mono); }
.terminal-body p { margin: 0 0 5px; }
.prompt,.success { color: var(--accent); }
.output { color: var(--muted); padding-left: 22px; }
.code-result { display: grid; grid-template-columns: 28px 1fr auto; margin: 22px 0 0; border: 1px solid var(--line); }
.code-result > * { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.code-result > :nth-last-child(-n+3) { border-bottom: 0; }
.code-result span { color: var(--muted-2); }
.code-result strong { color: #c9cecc; font-weight: 400; }
.code-result em { color: var(--muted); font-style: normal; }

.quick-links { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 14px; }
.quick-links a { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 0 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 12px; }
.quick-links a:hover { border-color: #4b5457; background: var(--surface-2); }
.card-icon,.topic-icon { color: var(--accent-2); font: 500 12px var(--mono); }
.content-section { padding: 72px 0; border-bottom: 1px solid var(--line); }
.intro-section { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.section-copy { max-width: 720px; }
.section-copy h2,.section-heading h2 { margin: 0; font-size: clamp(30px,3.5vw,46px); line-height: 1.08; letter-spacing: -.045em; }
.section-copy > p:last-child { max-width: 700px; margin: 20px 0 0; color: var(--muted); }
.text-link { display: inline-flex; gap: 30px; color: var(--accent); font: 500 11px var(--mono); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(240px,340px); gap: 42px; align-items: end; margin-bottom: 28px; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 14px; }
.topic-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.topic-card { min-height: 112px; display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.topic-card:hover { border-color: #4b5457; background: var(--surface-2); }
.topic-card h3 { margin: 0 0 5px; font-size: 15px; }
.topic-card p { margin: 0; color: var(--muted); font-size: 12px; }
.arrow { color: var(--muted-2); }
.tutorials-section { background: transparent; }
.filter-wrap label { display: block; margin-bottom: 6px; color: var(--muted-2); font: 500 9px var(--mono); text-transform: uppercase; }
.filter-wrap input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: #0b0e0f; color: var(--text); }
.filter-wrap input:focus { border-color: #606a66; }
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { min-height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font: 400 10px var(--mono); cursor: pointer; }
.chip:hover,.chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.featured-tutorial { display: grid; grid-template-columns: 1fr 230px; min-height: 205px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.featured-tutorial:hover { border-color: #4e575a; }
.featured-copy { padding: 28px; }
.meta,.card-top,.card-bottom { display: flex; align-items: center; gap: 14px; color: var(--muted-2); font: 400 9px var(--mono); text-transform: uppercase; }
.tag { color: var(--accent); }
.featured-copy h3 { max-width: 600px; margin: 22px 0 10px; font-size: clamp(23px,2.8vw,34px); line-height: 1.12; letter-spacing: -.04em; }
.featured-copy p,.tutorial-card p { margin: 0; color: var(--muted); font-size: 12px; }
.feature-code { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 25px; border-left: 1px solid var(--line); background: #090b0c; font: 400 10px var(--mono); color: var(--muted); }
.feature-code strong { color: var(--accent); font-weight: 400; }
.tutorial-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 12px; }
.tutorial-card { min-height: 220px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.tutorial-card:hover { border-color: #4b5457; background: var(--surface-2); }
.card-top,.card-bottom { justify-content: space-between; }
.tutorial-card h3 { margin: 28px 0 9px; font-size: 17px; line-height: 1.25; letter-spacing: -.025em; }
.card-bottom { margin-top: auto; padding-top: 24px; }
.no-results { padding: 30px; border: 1px solid var(--line); text-align: center; color: var(--muted); }
.tutorial-item[hidden] { display: none; }
.practice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.practice-grid article { min-height: 160px; padding: 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.practice-grid span { color: var(--muted-2); font: 400 10px var(--mono); }
.practice-grid h3 { margin: 28px 0 7px; font-size: 15px; }
.practice-grid p { margin: 0; color: var(--muted); font-size: 12px; }

.page-main { padding: 30px 0 100px; }
.page-hero { min-height: 350px; display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 40px; align-items: center; padding: clamp(32px,5vw,52px); border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(135deg,var(--surface-2),#0e1112); }
.page-hero-copy > p:last-child { max-width: 680px; margin: 22px 0 0; color: var(--muted); }
.page-summary { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 25px; border: 1px solid var(--line); border-radius: 4px; background: rgba(7,8,9,.55); }
.page-summary > span { color: var(--muted-2); font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.page-summary strong { margin: 22px 0 12px; font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
.page-summary p { margin: 0; color: var(--muted); font-size: 12px; }
.page-section { padding: 72px 0 0; }

.projects-hero { min-height: 390px; display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; margin-top: 30px; padding: 48px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(135deg,var(--surface-2),#0e1112); }
.projects-hero-copy > p:last-child { max-width: 650px; color: var(--muted); }
.project-status,.project-empty { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.project-status { padding: 24px; }
.project-status-head { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 9px var(--mono); text-transform: uppercase; }
.project-status strong { display: block; margin-top: 22px; font: 500 38px var(--mono); }
.project-status > span { color: var(--muted); font: 400 10px var(--mono); }
.project-archive { padding-block: 72px 100px; }
.project-empty { display: grid; grid-template-columns: 72px 1fr auto; gap: 26px; align-items: center; padding: 28px; }
.project-empty-index { align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--muted-2); font: 400 11px var(--mono); }
.project-empty h3 { margin: 0 0 6px; font-size: 20px; }
.project-empty p { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; }

.article-header { padding: 55px 0 40px; border-bottom: 1px solid var(--line); }
.article-deck { max-width: 760px; color: var(--muted); font-size: 17px; }
.article-meta { display: flex; gap: 18px; margin-top: 26px; color: var(--muted-2); font: 400 9px var(--mono); text-transform: uppercase; }
.article-layout { display: grid; grid-template-columns: 210px minmax(0,760px); gap: 48px; padding: 55px 0 100px; }
.toc { position: sticky; top: 92px; align-self: start; }
.toc p { color: var(--muted-2); font: 500 9px var(--mono); text-transform: uppercase; }
.toc a { display: block; padding: 7px 0; color: var(--muted); font-size: 11px; }
.prose h2 { margin: 48px 0 14px; font-size: 28px; letter-spacing: -.035em; }
.prose h2:first-child { margin-top: 0; }
.prose p,.prose li { color: #adb4b1; }
.prose code { color: var(--accent); font-family: var(--mono); }
.code-block { margin: 20px 0; padding: 18px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; background: #080a0b; color: #d2d6d4; font: 400 12px/1.7 var(--mono); }
.callout { margin: 24px 0; padding: 18px; border-left: 2px solid var(--accent); background: var(--surface); }
.article-nav { display: flex; justify-content: space-between; margin-top: 58px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--accent); font: 500 11px var(--mono); }

.site-footer { border-top: 1px solid var(--line); background: rgba(9,11,12,.8); }
.footer-inner { min-height: 110px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; color: var(--muted); font-size: 11px; }
.footer-inner > :last-child { text-align: right; }

@media (max-width: 1180px) {
  .docs-layout { grid-template-columns: 205px minmax(0,1fr); }
  .page-toc { display: none; }
}
@media (max-width: 860px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .top-search { display: none; }
  .desktop-nav { justify-self: center; }
  .docs-layout { grid-template-columns: 1fr; }
  .side-nav { display: none; }
  .content-column { padding-top: 24px; }
  .portal-hero { grid-template-columns: 1fr; }
  .terminal-card { min-height: 250px; }
  .projects-hero { grid-template-columns: 1fr; }
  .project-status { max-width: 420px; }
  .page-hero { grid-template-columns: 1fr; }
  .page-summary { max-width: 460px; }
}
@media (max-width: 640px) {
  :root { --shell-wide: min(100% - 24px,1460px); }
  body { padding-top: 60px; }
  .desktop-nav { display: none; }
  .topbar { min-height: 60px; grid-template-columns: 1fr auto; }
  .product-action { font-size: 10px; }
  .breadcrumbs { margin-bottom: 18px; }
  .portal-hero { min-height: 0; padding: 26px 20px; }
  .portal-hero h1,.page-hero h1,.projects-hero h1,.article-header h1 { font-size: 40px; }
  .quick-links { grid-template-columns: 1fr; }
  .intro-section,.section-heading { grid-template-columns: 1fr; gap: 20px; }
  .topic-grid,.tutorial-grid,.practice-grid { grid-template-columns: 1fr; }
  .featured-tutorial { grid-template-columns: 1fr; }
  .feature-code { border-top: 1px solid var(--line); border-left: 0; }
  .content-section { padding: 55px 0; }
  .projects-hero { padding: 28px 22px; }
  .page-hero { min-height: 0; padding: 28px 22px; }
  .project-empty { grid-template-columns: 1fr; }
  .project-empty-index { min-height: 34px; place-items: start; border-right: 0; border-bottom: 1px solid var(--line); }
  .article-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
  .footer-inner { grid-template-columns: 1fr; padding-block: 30px; }
  .footer-inner > :last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }