:root{
    /* Palette taken from the app itself — AppTheme.pas, DarkTheme. TColor is
       $00BBGGRR, so those constants appear here byte-swapped into RGB. */
    --bg:#101010;                /* BG      */
    --bg-elev:#181818;           /* Panel   */
    --bg-well:#141414;
    --bg-inset:#0b1620;          /* SpecGradTop — the spectrum well */
    --border:#303030;            /* Border  */
    --border-strong:#444444;     /* BtnBorderNorm */
    --text:#cccccc;              /* Text    */
    --text-dim:#9a9a9a;
    --text-faint:#808080;        /* VfoTxInaText (TextDim #666 is too dim for body copy) */
    --accent:#80ff40;            /* SpecLine — the signal trace */
    --accent-strong:#ccff80;     /* FreqHover */
    --accent-ink:#10300c;        /* BtnActive */
    --amber:#ffaa00;             /* Amber / SpecVfoCursor / SpecAgcColor */
    --green:#00ff00;             /* FreqActive — the frequency readout */
    --red:#cc0000;               /* MeterOvr */
    /* spectrum well */
    --spec-top:#0b1620; --spec-bot:#1f4f6c;   /* SpecGradTop / SpecGradBot */
    --spec-grid:#245668;                      /* SpecGrid */
    --spec-label:#d9c9a8;                     /* SpecLabelText */
    --spec-fill:#00c864;                      /* SpecGradR/G/B under the trace */
    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Roboto Mono", "Liberation Mono", monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --content-w: 1180px;
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    /* AppTheme.pas, LightTheme — warm parchment, dark-green readouts. */
    --bg:#f0eee8; --bg-elev:#e8e6e0; --bg-well:#e2e0d8; --bg-inset:#e8e4d8;
    --border:#b8b4ac; --border-strong:#a8a4a0;
    --text:#181410; --text-dim:#5a544c; --text-faint:#6a6359;   /* TextDim #706860, a touch darker to clear AA on cards */
    --accent:#006400; --accent-strong:#003a00; --accent-ink:#f0eee8;
    --amber:#904000; --green:#006820; --red:#aa1010;
    --spec-top:#e8e4d8; --spec-bot:#d0ccbe;
    --spec-grid:#b8b4a4; --spec-label:#404038; --spec-fill:#0a5000;
    color-scheme: light;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      /* AppTheme.pas, LightTheme — warm parchment, dark-green readouts. */
      --bg:#f0eee8; --bg-elev:#e8e6e0; --bg-well:#e2e0d8; --bg-inset:#e8e4d8;
      --border:#b8b4ac; --border-strong:#a8a4a0;
      --text:#181410; --text-dim:#5a544c; --text-faint:#6a6359;   /* TextDim #706860, a touch darker to clear AA on cards */
      --accent:#006400; --accent-strong:#003a00; --accent-ink:#f0eee8;
      --amber:#904000; --green:#006820; --red:#aa1010;
      --spec-top:#e8e4d8; --spec-bot:#d0ccbe;
      --spec-grid:#b8b4a4; --spec-label:#404038; --spec-fill:#0a5000;
      color-scheme: light;
    }
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-sans); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-image:
      linear-gradient(color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    background-attachment: fixed;
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  h1,h2,h3{ font-family:var(--font-mono); font-weight:700; letter-spacing:-0.01em; text-wrap:balance; margin:0; }
  p{ margin:0; }
  a{ color:inherit; }
  .wrap{ max-width:var(--content-w); margin:0 auto; padding:0 28px; }
  .eyebrow{
    font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .eyebrow::before{ content:""; width:20px; height:1px; background:var(--accent); display:inline-block; }
  .lede{ color:var(--text-dim); max-width:62ch; font-size:1.05rem; line-height:1.75; }
  code{ font-family:var(--font-mono); font-size:0.92em; color:var(--accent-strong); }
  section{ padding:96px 0; border-bottom:1px solid var(--border); }
  section:last-of-type{ border-bottom:none; }

  ::selection{ background:color-mix(in srgb, var(--accent) 35%, transparent); color:var(--text); }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom:1px solid var(--border);
  }
  .nav-row{ display:flex; align-items:center; gap:28px; height:64px; }
  .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-weight:700; font-size:1.05rem; letter-spacing:0.02em; text-decoration:none; margin-right:auto; }
  .brand img{ width:26px; height:26px; border-radius:5px; display:block; }
  .nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
  .nav-links a{ text-decoration:none; color:var(--text-dim); font-size:0.9rem; position:relative; padding:4px 0; }
  .nav-links a:hover{ color:var(--text); }
  .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--accent); transition:right .2s ease; }
  .nav-links a:hover::after{ right:0; }
  .btn{
    font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.02em; text-decoration:none;
    padding:9px 16px; border-radius:3px; border:1px solid var(--border-strong); color:var(--text);
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .btn:hover{ border-color:var(--accent); color:var(--accent-strong); }
  .btn-solid{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
  .btn-solid:hover{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-ink); }
  .theme-toggle{ width:38px; height:38px; padding:0; justify-content:center; cursor:pointer; background:transparent; }
  .theme-icon{ display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .theme-icon-moon{ display:none; }
  .theme-toggle[aria-pressed="true"] .theme-icon-sun{ display:none; }
  .theme-toggle[aria-pressed="true"] .theme-icon-moon{ display:block; }
  @media (max-width: 1080px){ .nav-links{ display:none; } }
  @media (max-width: 640px){
    .nav-row{ gap:10px; }
    .repo-nav{ display:none; }
  }

  /* ---------- LANGUAGE SUGGESTION ---------- */
  .language-suggestion{
    position:fixed; left:50%; bottom:22px; z-index:60; transform:translateX(-50%);
    width:min(680px, calc(100% - 32px)); padding:14px 14px 14px 18px;
    display:flex; align-items:center; gap:16px;
    /* Match VFO_OVERLAY_ALPHA (210/255) used by the panadapter flags. */
    background:color-mix(in srgb, var(--bg-elev) 82.35%, transparent);
    border:1px solid var(--border-strong); box-shadow:0 12px 36px rgba(0,0,0,.32);
    backdrop-filter:blur(12px); font-size:.92rem;
  }
  .language-suggestion > span{ flex:1; }
  .language-suggestion-close{
    width:34px; height:34px; flex:none; padding:0; border:0; border-radius:3px;
    background:transparent; color:var(--text-dim); cursor:pointer;
    font:400 1.5rem/1 var(--font-sans);
  }
  .language-suggestion-close:hover{ color:var(--accent-strong); background:var(--bg-well); }
  @media (max-width:640px){
    .language-suggestion{ bottom:12px; align-items:stretch; flex-wrap:wrap; gap:10px; padding:14px; }
    .language-suggestion > span{ flex-basis:calc(100% - 44px); align-self:center; }
    .language-suggestion .btn{ order:3; flex:1; justify-content:center; }
  }

  /* ---------- HERO ---------- */
  .hero{ padding:72px 0 88px; border-bottom:1px solid var(--border); }
  .hero-top{ display:flex; flex-direction:column; gap:22px; max-width:980px; }
  .hero h1{
    font-size:clamp(2.65rem, 6vw, 5.4rem); line-height:1.02;
    font-variant-numeric:tabular-nums;
  }
  .hero h1 span{ color:var(--accent); }
  .hero .lede{ font-size:1.15rem; max-width:64ch; }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }

  .scope-frame{
    margin-top:52px; border:1px solid var(--border-strong);
    background-color: var(--bg-inset);
    background-repeat:no-repeat;
    background-image:
      linear-gradient(to right, var(--accent) 2px, transparent 2px),
      linear-gradient(to bottom, var(--accent) 2px, transparent 2px),
      linear-gradient(to left, var(--accent) 2px, transparent 2px),
      linear-gradient(to bottom, var(--accent) 2px, transparent 2px),
      linear-gradient(to right, var(--accent) 2px, transparent 2px),
      linear-gradient(to top, var(--accent) 2px, transparent 2px),
      linear-gradient(to left, var(--accent) 2px, transparent 2px),
      linear-gradient(to top, var(--accent) 2px, transparent 2px);
    background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px;
    background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
    padding:6px;
  }
  .scope-topbar{ display:flex; justify-content:space-between; align-items:center; padding:6px 12px 12px; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); letter-spacing:0.06em; }
  .scope-topbar b{ color:var(--accent); font-weight:600; }
  #scope{ display:block; width:100%; height:340px; }
  @media (max-width:640px){ #scope{ height:220px; } }

  /* gap-based dividers, so a wrapped row keeps its rule on both axes */
  /* Fixed column counts, as in the features grid: six cards divide evenly by
     3, 2 and 1, so the last row is never left ragged. */
  .highlights{ display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--border); border-top:none; gap:1px; background:var(--border); }
  @media (max-width:1080px){ .highlights{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .highlights{ grid-template-columns:1fr; } }
  .hl{ padding:22px; background:var(--bg); display:flex; flex-direction:column; gap:8px; }
  .hl b{ font-family:var(--font-mono); font-size:0.98rem; line-height:1.35; color:var(--accent); letter-spacing:-0.01em; text-wrap:balance; }
  .hl span{ font-size:0.85rem; line-height:1.6; color:var(--text-faint); }

  /* ---------- SECTION HEADS ---------- */
  .sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
  .sec-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }

  /* ---------- FEATURES GRID ---------- */
  /* Fixed column counts (not auto-fit): the card count is a multiple of each,
     so the last row is always full — a ragged row shows as bare gap colour. */
  .feature-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
  @media (max-width:1080px){ .feature-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }
  .feature-card{ background:var(--bg-elev); padding:28px 26px; display:flex; flex-direction:column; gap:10px; transition:background .15s ease; }
  .feature-card:hover{ background:var(--bg-well); }
  .f-tag{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.14em; color:var(--text-faint); text-transform:uppercase; }
  .feature-card:hover .f-tag{ color:var(--accent); }
  .feature-card h3{ font-family:var(--font-sans); font-size:1.05rem; font-weight:700; letter-spacing:0; }
  .feature-card p{ color:var(--text-dim); font-size:0.92rem; line-height:1.6; }

  /* ---------- ARCHITECTURE ---------- */
  .arch-note{ margin-bottom:56px; }
  .arch{ max-width:900px; margin:0 auto; }
  .arch-tier{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
  .arch-node{ display:flex; flex-direction:column; }
  .arch-box{ border:1px solid var(--border-strong); background:var(--bg-elev); padding:12px 16px; font-family:var(--font-mono); font-size:0.82rem; text-align:center; min-width:140px; }
  .arch-box small{ display:block; margin-top:4px; color:var(--text-faint); font-size:0.68rem; font-weight:400; }
  .arch-stub{ width:2px; height:22px; background:var(--border-strong); margin:0 auto; }
  .arch-bus{ height:2px; background:var(--border-strong); margin:0 auto; max-width:820px; }
  .arch-core{ border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg-elev)); padding:18px 24px; font-family:var(--font-mono); font-weight:700; text-align:center; margin:0 auto; width:fit-content; color:var(--accent-strong); }
  .arch-core small{ display:block; margin-top:6px; color:var(--text-dim); font-weight:400; font-size:0.72rem; letter-spacing:0.04em; }

  /* ---------- HARDWARE ---------- */
  .hw-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:24px; }
  .hw-card{
    padding:28px 26px; background-color:var(--bg-elev); background-repeat:no-repeat;
    background-image:
      linear-gradient(to right, var(--border-strong) 2px, transparent 2px),
      linear-gradient(to bottom, var(--border-strong) 2px, transparent 2px),
      linear-gradient(to left, var(--border-strong) 2px, transparent 2px),
      linear-gradient(to bottom, var(--border-strong) 2px, transparent 2px),
      linear-gradient(to right, var(--border-strong) 2px, transparent 2px),
      linear-gradient(to top, var(--border-strong) 2px, transparent 2px),
      linear-gradient(to left, var(--border-strong) 2px, transparent 2px),
      linear-gradient(to top, var(--border-strong) 2px, transparent 2px);
    background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
    background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  }
  .hw-card h3{ font-family:var(--font-sans); font-size:1.25rem; margin-bottom:6px; }
  .hw-card .hw-sub{ font-family:var(--font-mono); font-size:0.74rem; color:var(--accent); letter-spacing:0.06em; margin-bottom:16px; display:block; }
  .hw-card p{ color:var(--text-dim); font-size:0.94rem; line-height:1.7; }
  .hw-card ul{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
  .hw-card li{ font-size:0.88rem; color:var(--text-dim); padding-left:16px; position:relative; }
  .hw-card li::before{ content:""; position:absolute; left:0; top:0.55em; width:6px; height:6px; background:var(--accent); }

  /* ---------- CAT ---------- */
  .cat-facts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
  .cat-fact{ font-family:var(--font-mono); font-size:0.82rem; color:var(--text-dim); border:1px solid var(--border); padding:9px 14px; display:flex; align-items:center; gap:8px; }
  .cat-fact b{ color:var(--green); font-variant-numeric:tabular-nums; }

  /* ---------- BUILD ---------- */
  .build-panel{ border:1px solid var(--border); }
  .tabs{ display:flex; border-bottom:1px solid var(--border); }
  .tab-btn{
    font-family:var(--font-mono); font-size:0.82rem; padding:13px 22px; background:none; border:none; color:var(--text-faint);
    cursor:pointer; border-right:1px solid var(--border); letter-spacing:0.03em;
  }
  .tab-btn[aria-selected="true"]{ color:var(--accent); background:var(--bg-elev); }
  .tab-btn:hover{ color:var(--text); }
  .tab-panel{ display:none; padding:24px 26px; background:var(--bg-elev); }
  .tab-panel.active{ display:block; }
  pre{
    margin:0; font-family:var(--font-mono); font-size:0.88rem; color:var(--green);
    background:var(--bg-inset); border:1px solid var(--border); padding:16px 18px; overflow-x:auto; line-height:1.6;
  }
  pre .c{ color:var(--text-faint); }
  .build-note{ padding:20px 26px; border-top:1px solid var(--border); background:var(--bg-well); }
  .build-note p{ color:var(--text-dim); font-size:0.88rem; margin-bottom:12px; }

  /* ---------- FOOTER ---------- */
  footer{ padding:0; }
  .status-bar{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding:22px 0 40px; }
  .status-left{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.82rem; color:var(--text-faint); }
  .status-dot{ width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 6px var(--green); flex:none; }
  .status-mid{ font-family:var(--font-mono); font-size:0.8rem; color:var(--text-faint); }
  .status-mid a{ color:var(--text-dim); text-decoration:none; border-bottom:1px dotted var(--border-strong); }
  .status-mid a:hover{ color:var(--accent); border-color:var(--accent); }
  .status-right{ font-family:var(--font-mono); font-size:0.76rem; color:var(--text-faint); }

  .fade-in{ animation:fadeIn .8s ease both; }
  .fade-in.d2{ animation-delay:.12s; }
  .fade-in.d3{ animation-delay:.22s; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }