:root{
    color-scheme: dark;
    /* DA V2 — motorsport HUD. Palette from design-system/tokens. */
    --bg:#0d0d0d; --panel:#141414; --raised:#1c1c1c; --hover:#262626;
    --ink:#f0ede8; --ink-dim:rgba(240,237,232,.55); --ink-faint:rgba(240,237,232,.30);
    --accent:#E8500A; --accent-bright:#ff6e25; --accent-amber:#FF8A1F; --accent-soft:rgba(232,80,10,.12);
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
    --c-data:#3B82F6; --c-compute:#A855F7; --c-widget:#E8500A; --c-logic:#F59E0B; --c-doc:#FACC15; --c-iter:#06B6D4;
    --t-number:#9c958b; --t-boolean:#3B82F6; --t-string:#E8500A; --t-color:#EF4444; --t-vector:#E91E63; --t-table:#22C55E;
    /* Expression-editor syntax colours (mirror the app DS `syntax.*` bucket). */
    --syn-fn:#06B6D4; --syn-number:#FF8A1F; --syn-string:#22C55E; --syn-channel:#3B82F6; --syn-output:#E8500A; --syn-constant:#A855F7; --syn-component:#E91E63;
    --sh-md:0 4px 8px rgba(0,0,0,.40); --sh-lg:0 12px 24px rgba(0,0,0,.48); --glow:0 0 16px rgba(232,80,10,.45);
    --r:4px; --r-sm:2px;
    --font-display:'Rajdhani','Segoe UI',system-ui,sans-serif;
    --font-body:'Space Grotesk','Segoe UI',Roboto,system-ui,sans-serif;
    --font-mono:'Space Mono','JetBrains Mono',ui-monospace,Consolas,monospace;
    --maxw:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font-body); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    background-image:
      radial-gradient(ellipse 90% 55% at 50% -8%, rgba(232,80,10,.08), transparent 60%),
      radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:auto, 24px 24px;
    background-attachment:fixed;
  }
  a{color:var(--accent-bright); text-decoration:none}
  a:hover{color:var(--accent-amber); text-decoration:underline; text-underline-offset:3px}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:2}

  /* ===== Top strip ===== */
  .topstrip{border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(20,20,20,.7),transparent); backdrop-filter:blur(6px)}
  .topstrip .wrap{display:flex; align-items:center; justify-content:space-between; height:54px}
  .topstrip .logo{height:21px; width:auto; display:block}
  .topstrip .tag{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.18em; text-transform:uppercase}

  /* ===== Hero ===== */
  header.hero{padding:64px 0 46px; border-bottom:1px solid var(--line)}
  .hero .eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
  .hero h1{font-family:var(--font-display); font-weight:700; font-size:clamp(46px,8vw,104px); line-height:.92; margin:0; text-transform:uppercase; letter-spacing:.005em}
  .hero h1 .thin{color:var(--ink-faint); font-weight:500}
  .hero .lede{max-width:60ch; margin:20px 0 0; color:var(--ink-dim); font-size:18px}
  .entry{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px}
  .entry.three{grid-template-columns:repeat(3,1fr)}
  @media (max-width:920px){.entry.three{grid-template-columns:1fr 1fr}}
  @media (max-width:720px){.entry,.entry.three{grid-template-columns:1fr}}
  .entry a{display:block; padding:22px 24px; border:1px solid var(--line-2); border-radius:var(--r); color:var(--ink); background:linear-gradient(180deg,var(--raised),var(--panel)); transition:border-color .16s,transform .16s,box-shadow .16s}
  .entry a:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--sh-lg); text-decoration:none}
  .entry .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
  .entry h3{font-family:var(--font-display); font-weight:600; font-size:26px; margin:.3em 0 .25em; text-transform:uppercase; letter-spacing:.01em}
  .entry h3::before{content:none}
  .entry p{margin:0; color:var(--ink-dim); font-size:14.5px; max-width:none}
  .hero>.wrap>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero .eyebrow{animation-delay:.02s}.hero h1{animation-delay:.08s}.hero .lede{animation-delay:.16s}.hero .entry{animation-delay:.24s}
  @keyframes rise{from{transform:translateY(14px)} to{transform:none}}
  @media (prefers-reduced-motion:reduce){.hero>.wrap>*{animation:none}}

  /* ===== Layout w/ sticky TOC ===== */
  .layout{display:grid; grid-template-columns:250px 1fr; gap:54px; padding:44px 0 90px}
  .toc{position:sticky; top:20px; align-self:start; max-height:calc(100vh - 40px); overflow:auto}
  .toc .toc-head{display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); padding:0 0 11px; border-bottom:1px solid var(--line); margin-bottom:8px}
  .toc-toggle{display:none}
  .toc nav{display:flex; flex-direction:column; gap:1px}
  .toc .grp{font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:15px 0 5px; padding:0 12px}
  .toc a{display:flex; gap:10px; align-items:baseline; padding:6px 12px; border-radius:var(--r-sm); color:var(--ink-dim); font-size:13.5px; border-left:2px solid transparent; transition:background .14s,color .14s,border-color .14s}
  .toc a .n{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); min-width:14px}
  .toc a:hover{background:var(--raised); color:var(--ink); text-decoration:none}
  .toc a.active{color:var(--accent-bright); background:var(--accent-soft); border-left-color:var(--accent)}
  .toc a.active .n{color:var(--accent-bright)}
  main{min-width:0}

  /* ===== Part banners & sections ===== */
  .partbar{margin:6px 0 28px; padding:26px 28px; border:1px solid var(--line-2); border-radius:var(--r); background:linear-gradient(120deg,rgba(232,80,10,.10),transparent 68%); position:relative; overflow:hidden}
  .partbar::after{content:""; position:absolute; inset:0 0 0 auto; width:3px; background:var(--accent)}
  .partbar .k{font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
  .partbar h2{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(30px,5vw,52px); margin:.12em 0 .12em; line-height:.96; letter-spacing:.01em}
  .partbar p{margin:0; color:var(--ink-dim); max-width:70ch}
  .partbar.wiki{background:linear-gradient(120deg,rgba(168,85,247,.12),transparent 68%)}
  .partbar.wiki::after{background:var(--c-compute)} .partbar.wiki .k{color:var(--c-compute)}
  .partbar.appx{background:linear-gradient(120deg,rgba(59,130,246,.10),transparent 68%)}
  .partbar.appx::after{background:var(--c-data)} .partbar.appx .k{color:var(--c-data)}

  section{scroll-margin-top:20px; padding:14px 0 38px; border-bottom:1px solid var(--line)}
  .sec-h{display:flex; align-items:baseline; gap:15px; margin:0 0 16px}
  .sec-h .idx{font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.08em; padding-top:6px}
  .sec-h h2{font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(24px,3.4vw,36px); margin:0; line-height:1.02}
  h3{font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:.01em; text-transform:uppercase; margin:30px 0 10px}
  h3::before{content:"// "; color:var(--accent); font-family:var(--font-mono); font-weight:400; font-size:.7em}
  p{margin:0 0 14px; max-width:74ch}
  .muted{color:var(--ink-dim)}
  ul{margin:0 0 16px; padding-left:0; list-style:none; max-width:78ch}
  ul li{position:relative; padding-left:22px; margin:7px 0}
  ul li::before{content:"›"; position:absolute; left:4px; top:-1px; color:var(--accent); font-weight:700}
  strong{color:#fff; font-weight:600}
  code{font-family:var(--font-mono); font-size:.82em; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-sm); padding:.1em .42em; color:var(--accent-amber); overflow-wrap:anywhere}

  /* ===== Steps (tutorial) ===== */
  .steps{list-style:none; counter-reset:step; padding:0; margin:8px 0 0; max-width:none}
  .steps>li{position:relative; padding:0 0 28px 56px; margin:0; border-left:1px solid var(--line-2); margin-left:17px}
  .steps>li::before{counter-increment:step; content:counter(step); position:absolute; left:-18px; top:-3px; width:35px; height:35px; border-radius:var(--r-sm); background:var(--raised); border:1px solid var(--accent); color:var(--accent); font-family:var(--font-display); font-weight:700; font-size:17px; display:grid; place-items:center; box-shadow:var(--glow)}
  .steps>li:last-child{border-left-color:transparent; padding-bottom:4px}
  .steps h3{margin:1px 0 8px; font-size:19px}
  .steps h3::before{content:none}
  .step-key{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-left:8px; text-transform:none}

  /* ===== Screenshot figures ===== */
  figure.shot{margin:14px 0 6px; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:var(--panel); box-shadow:var(--sh-md)}
  figure.shot img{display:block; width:100%; height:auto}
  figure.shot img.missing{min-height:200px; border:0; background:repeating-linear-gradient(45deg,#141414,#141414 12px,#101010 12px,#101010 24px); color:var(--ink-faint); font-family:var(--font-mono); font-size:13px; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px}
  figure.shot figcaption{padding:9px 14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-dim); font-family:var(--font-mono)}
  figure.shot figcaption b{color:var(--accent); font-weight:400}

  /* ===== Pre / diagrams ===== */
  pre{font-family:var(--font-mono); font-size:12.5px; line-height:1.5; color:#d6d2cb; background:#0a0a0a; border:1px solid var(--line-2); border-radius:var(--r); padding:20px 22px; overflow-x:auto; margin:0 0 22px; position:relative; box-shadow:inset 0 0 50px rgba(0,0,0,.5)}
  pre.diagram{color:#b8b2a8}
  pre code{background:none; border:0; padding:0; color:inherit; font-size:inherit}
  pre::before{content:attr(data-label); position:absolute; top:9px; right:14px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}

  /* ===== Tables ===== */
  .table-wrap{overflow-x:auto; margin:0 0 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
  table{border-collapse:collapse; width:100%; font-size:14px}
  thead th{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-2); background:var(--raised); white-space:nowrap}
  tbody td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top}
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover{background:rgba(255,255,255,.02)}

  /* ===== Badges / kbd / callout ===== */
  .pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 9px; color:var(--ink-dim); white-space:nowrap; text-transform:uppercase; letter-spacing:.04em}
  .legend{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
  .syn-legend{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:9px 18px; margin:0 0 22px}
  .syn-legend .row{display:flex; align-items:baseline; gap:10px; font-size:14px; color:var(--ink-dim)}
  .syn-legend code{font-family:var(--font-mono); font-size:13px; min-width:58px; display:inline-block}
  kbd{font-family:var(--font-mono); font-size:12px; color:var(--ink); background:var(--raised); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:var(--r-sm); padding:2px 7px; white-space:nowrap}
  .callout{border:1px solid var(--line-2); border-left:3px solid var(--accent); background:linear-gradient(180deg,var(--accent-soft),transparent 70%); border-radius:var(--r); padding:14px 18px; margin:4px 0 22px; color:var(--ink-dim); font-size:14.5px}
  .callout strong{color:var(--accent-amber)}
  .callout.tip::before{content:"TIP"; display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--accent); margin-bottom:5px}
  .callout.note::before{content:"NOTE"; display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--accent); margin-bottom:5px}

  /* ===== Channel reference ===== */
  .chan-nav{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 26px}
  .chan-nav a{display:inline-flex; align-items:baseline; gap:6px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:5px 9px; transition:border-color .14s,color .14s}
  .chan-nav a:hover{border-color:var(--accent); color:var(--ink); text-decoration:none}
  .chan-nav a .n{font-size:10px; color:var(--ink-faint)}
  .fresh-dot{display:inline-block; width:.58em; height:.58em; border-radius:50%; background:#F59E0B; box-shadow:0 0 5px rgba(245,158,11,.7); vertical-align:-.02em}
  .fresh-tag{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 5px; vertical-align:1px}
  /* Game availability — brand logos (mirror the Controls page in the app).
     iRacing is the colour webp ; Assetto Corsa is an alpha silhouette PNG
     recoloured via CSS mask (red = supported, amber = partial). Mask URLs are
     relative to THIS stylesheet, i.e. assets/graph-editor/. */
  img.game-logo{height:13px; width:auto; max-width:58px; vertical-align:middle; display:inline-block}
  .game-logo.ac{display:inline-block; vertical-align:middle; width:46px; height:13px; background-color:#EF4444; -webkit-mask:url(assetto-corsa.png) center/contain no-repeat; mask:url(assetto-corsa.png) center/contain no-repeat}
  .game-partial{cursor:help; white-space:nowrap}
  .game-partial .game-logo.ac{background-color:var(--accent-amber)}
  .game-partial .star{color:var(--accent-amber); font-family:var(--font-mono); font-size:10px; vertical-align:top; margin-left:1px}

  /* ===== Socket dots ===== */
  .s{display:inline-block; width:9px; height:9px; border-radius:var(--r-sm); box-shadow:0 0 5px currentColor}
  .s-number{background:var(--t-number); color:var(--t-number)}
  .s-boolean{background:var(--t-boolean); color:var(--t-boolean)}
  .s-string{background:var(--t-string); color:var(--t-string)}
  .s-color{background:var(--t-color); color:var(--t-color)}
  .s-vector{background:var(--t-vector); color:var(--t-vector)}
  .s-table{background:var(--t-table); color:var(--t-table)}
  .s-any{background:conic-gradient(from 0deg,var(--t-number),var(--t-boolean),var(--t-string),var(--t-color),var(--t-vector),var(--t-number)); box-shadow:none}
  /* properties.html — `trigger` (event socket, properties mode only) */
  .s-trigger{background:var(--accent-amber); color:var(--accent-amber)}

  /* ===== Node cards (wiki illustrations) — mirror the editor's nodes ===== */
  figure.nodecard{margin:0; max-width:210px}
  .node{width:100%; max-width:210px; border:1px solid var(--line-2); border-radius:var(--r); background:linear-gradient(180deg,var(--raised),var(--panel)); box-shadow:var(--sh-md)}
  .node.hd-data{border-top:2px solid var(--c-data)} .node.hd-compute{border-top:2px solid var(--c-compute)}
  .node.hd-widget{border-top:2px solid var(--c-widget)} .node.hd-logic{border-top:2px solid var(--c-logic)}
  .node.hd-doc{border-top:2px solid var(--c-doc)}
  .node-hd{display:flex; align-items:center; gap:9px; padding:7px 13px; border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.02em; color:var(--ink)}
  .node-hd .glyph{font-family:var(--font-mono); color:var(--accent); font-size:13px; min-width:16px; text-align:center}
  .node-io{display:grid; grid-template-columns:1fr 1fr; gap:2px 0; padding:9px 0; min-height:32px}
  .port{display:block; position:relative; font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); padding:3px 14px; white-space:nowrap; overflow:visible}
  .col.out .port{text-align:right}
  .port .s{position:absolute; top:50%; transform:translateY(-50%)}
  .col.in .port .s{left:-5px}
  .col.out .port .s{right:-5px}
  .port em{color:var(--ink-faint); font-style:normal}

  /* ===== Wiki entries ===== */
  .wiki-node{display:grid; grid-template-columns:210px 1fr; gap:24px; align-items:start; padding:20px 0; border-bottom:1px solid var(--line); scroll-margin-top:20px}
  .wiki-node:last-of-type{border-bottom:0}
  .wiki-node .desc h4{font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:.01em; text-transform:uppercase; margin:0 0 7px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
  .wiki-node .desc p{margin:0 0 8px; font-size:14.5px}
  .wiki-node .io{font-family:var(--font-mono); font-size:12px; color:var(--ink-dim)}
  .wiki-node .io b{color:var(--accent); font-weight:400}
  .tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:2px 7px; color:var(--ink-dim)}
  .tag.edit{color:var(--accent-amber); border-color:rgba(232,80,10,.4)}
  @media (max-width:680px){.wiki-node{grid-template-columns:1fr; gap:14px} figure.nodecard,.node{max-width:240px}}

  /* ===== Function browser (expressions.html) — search + category chips ===== */
  .fn-toolbar{position:sticky; top:0; z-index:5; background:rgba(13,13,13,.94); backdrop-filter:blur(8px); padding:12px 0; margin:0 0 6px; border-bottom:1px solid var(--line)}
  .fn-search{width:100%; max-width:520px; display:block; font-family:var(--font-mono); font-size:14px; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); padding:10px 14px; outline:none; transition:border-color .14s}
  .fn-search:focus{border-color:var(--accent)}
  .fn-search::placeholder{color:var(--ink-faint)}
  .fn-chips{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px}
  .fn-chip{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); background:none; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:5px 10px; cursor:pointer; transition:border-color .14s,color .14s,background .14s}
  .fn-chip:hover{border-color:var(--accent); color:var(--ink)}
  .fn-chip.active{color:var(--accent-bright); border-color:var(--accent); background:var(--accent-soft)}
  .fn-count{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.08em; text-transform:uppercase}
  .fn-group{margin:6px 0 4px}
  .fn-group>h3{margin:22px 0 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .fn{display:grid; grid-template-columns:minmax(170px,280px) 1fr; gap:18px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line)}
  .fn-sig{font-family:var(--font-mono); font-size:13.5px; color:var(--accent-amber); background:none; border:0; padding:0}
  .fn-sum{margin:0; font-size:14.5px; color:var(--ink-dim); max-width:none}
  .fn-sum code{font-size:.85em}
  .fn-empty{font-family:var(--font-mono); font-size:13px; color:var(--ink-faint); padding:22px 0}
  @media (max-width:680px){.fn{grid-template-columns:1fr; gap:4px}}

  /* ===== reveal — transform-only; content ALWAYS visible ===== */
  .reveal{opacity:1}
  .js .reveal{animation:reveal .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes reveal{from{transform:translateY(12px)} to{transform:none}}
  @media (prefers-reduced-motion:reduce){.js .reveal{animation:none}}

  footer{padding:36px 0 70px; color:var(--ink-faint); font-size:12.5px; font-family:var(--font-mono); letter-spacing:.04em}
  footer .wrap{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center}

  @media (max-width:920px){
    .layout{grid-template-columns:1fr; gap:0; padding:24px 0 70px}
    .toc{position:static; max-height:none; margin-bottom:22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
    .toc-toggle{display:inline-flex; background:none; border:1px solid var(--line-2); color:var(--ink-dim); border-radius:var(--r-sm); font-family:var(--font-mono); font-size:11px; padding:3px 9px; cursor:pointer; letter-spacing:.1em}
    .js .toc nav{display:none}
    .js .toc.open nav{display:flex}
  }