:root{
    --ink:#0E1417; --ink-2:#111A1E; --panel:#151F23; --inset:#0C1417;
    --line:#23323A; --line-soft:#1A262C;
    --text:#E7EEF0; --muted:#8FA1A8; --faint:#5E727A;
    --brass:#C9A24B; --brass-dim:#8A6E2E; --brass-ink:#1A1305;
    --live:#5BB6C2; --bad:#D9707F;
    --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --maxw:1160px;
  }

  /* ---- themes: each sets the full token contract; vault (=:root) is default ---- */
  [data-theme="daylight"]{
    --ink:#EEF1F5; --ink-2:#E7ECF2; --panel:#FFFFFF; --inset:#F4F7FA; --line:#D6DEE6; --line-soft:#E4EAF0;
    --text:#16202B; --muted:#5A6B7A; --faint:#8A98A6;
    --brass:#9A6B12; --brass-dim:#7A540C; --brass-ink:#FFFFFF; --live:#0E8FA0; --bad:#C8344C; }
  [data-theme="signet"]{
    --ink:#15110B; --ink-2:#1C1610; --panel:#201A12; --inset:#15100A; --line:#34291B; --line-soft:#251E14;
    --text:#EFE4D2; --muted:#A2906F; --faint:#766753;
    --brass:#D8B24A; --brass-dim:#9A7E2A; --brass-ink:#241803; --live:#8FB36A; --bad:#D9663F; }
  [data-theme="aurora"]{
    --ink:#0B0E22; --ink-2:#11152E; --panel:#161B3A; --inset:#0E1129; --line:#262C50; --line-soft:#1A1F3D;
    --text:#DDE1F4; --muted:#8086B0; --faint:#565C86;
    --brass:#8B8CF0; --brass-dim:#5557B8; --brass-ink:#0B0E22; --live:#46D6C4; --bad:#F06AA8; }
  [data-theme="carbon"]{
    --ink:#0D0F11; --ink-2:#15181B; --panel:#16191C; --inset:#101316; --line:#262B30; --line-soft:#1B2025;
    --text:#DCE0E4; --muted:#7A828C; --faint:#565E66;
    --brass:#6AA0FF; --brass-dim:#3E6FCB; --brass-ink:#06122B; --live:#9BD17A; --bad:#E76A7E; }
  [data-theme="daylight"]{ color-scheme:light; }

  *{ box-sizing:border-box; }
  html{ color-scheme:dark; scroll-behavior:smooth; }
  body{ margin:0; background:var(--ink); color:var(--text); font-family:var(--sans);
        font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
        background-image:
          linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 38%),
          radial-gradient(900px 480px at 78% -8%, color-mix(in srgb, var(--brass) 10%, transparent), transparent 60%); }
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .mono{ font-family:var(--mono); }
  .eyebrow{ font-family:var(--mono); text-transform:uppercase; font-size:11px;
            letter-spacing:.22em; color:var(--brass); }
  .muted{ color:var(--muted); }

  /* ---------- top bar ---------- */
  header.bar{ position:sticky; top:0; z-index:20; backdrop-filter:blur(9px);
              background:color-mix(in srgb, var(--ink) 78%, transparent);
              border-bottom:1px solid var(--line-soft); }
  .bar-in{ display:flex; align-items:center; gap:14px; height:64px; }
  .mark{ display:flex; align-items:center; gap:11px; }
  .seal{ width:30px; height:30px; display:grid; place-items:center; border-radius:7px;
         background:linear-gradient(145deg, var(--brass), var(--brass-dim));
         color:var(--brass-ink); box-shadow:0 3px 16px rgba(201,162,75,.28); }
  .wordmark{ font-family:var(--mono); font-weight:700; letter-spacing:.16em; font-size:15px; }
  .wordmark b{ color:var(--brass); font-weight:700; }
  nav.top{ margin-left:18px; display:flex; gap:26px; flex:1; }
  nav.top a{ font-size:14px; color:var(--muted); transition:color .15s; }
  nav.top a:hover{ color:var(--text); }
  .btn{ font-family:var(--sans); font-size:14px; cursor:pointer; border-radius:8px;
        padding:9px 16px; border:1px solid var(--line); background:transparent; color:var(--text);
        transition:border-color .15s, background .15s, transform .06s; }
  .btn:hover{ border-color:var(--faint); background:var(--ink-2); }
  .btn:active{ transform:translateY(1px); }
  .btn.brass{ background:var(--brass); border-color:var(--brass); color:var(--brass-ink); font-weight:650; }
  .btn.brass:hover{ filter:brightness(1.06); background:var(--brass); }
  .btn.sm{ padding:6px 12px; font-size:13px; }

  /* ---------- hero ---------- */
  .hero{ padding:88px 0 64px; }
  .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
  h1.lede{ font-size:clamp(34px,4.4vw,56px); line-height:1.04; letter-spacing:-.022em;
           font-weight:800; margin:18px 0 0; text-wrap:balance; }
  h1.lede em{ font-style:normal; color:var(--brass); }
  .sub{ font-size:18px; color:var(--muted); max-width:46ch; margin:22px 0 0; }
  .hero-cta{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
  .trust{ margin-top:30px; display:flex; gap:22px; flex-wrap:wrap; color:var(--faint);
          font-family:var(--mono); font-size:12px; }
  .trust span{ display:flex; align-items:center; gap:7px; }
  .chk{ color:var(--brass); }

  /* ---------- status rail (the product's actual shape) ---------- */
  .rail{ border:1px solid var(--line); border-radius:14px; background:
         linear-gradient(180deg, var(--panel), var(--inset)); padding:18px; }
  .rail-h{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 14px;
           border-bottom:1px solid var(--line-soft); }
  .rail-h .ttl{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); }
  .env{ display:flex; align-items:center; gap:12px; padding:13px 6px; border-bottom:1px solid var(--line-soft); }
  .env:last-child{ border-bottom:0; }
  .dot{ width:8px; height:8px; border-radius:50%; background:var(--live);
        box-shadow:0 0 0 4px rgba(91,182,194,.14); flex:none; }
  .dot.idle{ background:var(--faint); box-shadow:0 0 0 4px rgba(94,114,122,.12); }
  .env .name{ font-family:var(--mono); font-size:13px; flex:1; }
  .env .val{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
  .tagpill{ font-family:var(--mono); font-size:10.5px; padding:2px 9px; border-radius:999px;
            border:1px solid var(--line); color:var(--muted); }
  .tagpill.ro{ color:var(--brass); border-color:color-mix(in srgb,var(--brass) 45%,transparent); }

  /* ---------- section frame ---------- */
  section{ padding:62px 0; border-top:1px solid var(--line-soft); }
  .sec-head{ max-width:64ch; }
  .sec-head h2{ font-size:clamp(24px,2.6vw,32px); letter-spacing:-.015em; font-weight:750;
                margin:12px 0 0; text-wrap:balance; }
  .sec-head p{ color:var(--muted); margin:12px 0 0; }

  .cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:34px; }
  .card{ border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:22px;
         transition:border-color .18s, transform .18s; }
  .card:hover{ border-color:var(--brass-dim); transform:translateY(-2px); }
  .card .ix{ font-family:var(--mono); font-size:11px; color:var(--brass); letter-spacing:.12em; }
  .card h3{ font-size:18px; margin:14px 0 8px; letter-spacing:-.01em; }
  .card p{ color:var(--muted); font-size:14.5px; margin:0; }

  /* ---------- security band ---------- */
  .band{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
         background:linear-gradient(180deg, var(--ink-2), var(--ink)); }
  .band-in{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding:46px 0; }
  .stat .n{ font-family:var(--mono); font-size:30px; color:var(--text); letter-spacing:-.01em;
            font-variant-numeric:tabular-nums; }
  .stat .l{ color:var(--muted); font-size:14px; margin-top:6px; }

  /* ---------- downloads teaser ---------- */
  .dl{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:34px; }
  .dlcard{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:var(--panel);
           display:flex; align-items:center; gap:18px; }
  .dlcard .ic{ width:42px; height:42px; border-radius:9px; display:grid; place-items:center; flex:none;
               border:1px solid var(--line); color:var(--brass); font-family:var(--mono); font-weight:700; }
  .dlcard .nm{ font-weight:650; }
  .dlcard .meta{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:3px; }
  .ver{ font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:6px; margin-left:auto;
        border:1px solid color-mix(in srgb,var(--brass) 40%,transparent); color:var(--brass); }

  /* ---------- divider label between the two mockups ---------- */
  .specimen{ display:flex; align-items:center; gap:16px; padding:54px 0 6px; }
  .specimen .ln{ flex:1; height:1px; background:var(--line); }
  .specimen .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
                  color:var(--faint); }

  /* ---------- portal app shell ---------- */
  .app{ border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:22px;
        box-shadow:0 24px 60px rgba(0,0,0,.36); }
  .app-bar{ display:flex; align-items:center; gap:12px; padding:14px 20px; background:var(--panel);
            border-bottom:1px solid var(--line); }
  .app-bar .ctx{ margin-left:8px; }
  .app-bar .ctx .who{ font-weight:650; font-size:15px; }
  .app-bar .ctx .sub{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
  .pill{ font-family:var(--mono); font-size:11px; padding:3px 11px; border-radius:999px; border:1px solid var(--line); }
  .pill.ok{ color:var(--live); border-color:color-mix(in srgb,var(--live) 45%,transparent); }
  .pill.plan{ color:var(--brass); border-color:color-mix(in srgb,var(--brass) 45%,transparent); }
  .app-body{ display:grid; grid-template-columns:300px 1fr; background:var(--inset); min-height:520px; }
  .side{ border-right:1px solid var(--line); padding:20px; background:var(--panel); }
  .side .grp{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
              color:var(--faint); margin:20px 0 10px; }
  .side .grp:first-child{ margin-top:0; }
  .navrow{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; color:var(--muted);
           font-size:14px; cursor:pointer; }
  .navrow.on{ background:color-mix(in srgb,var(--brass) 12%,transparent); color:var(--text);
              border:1px solid color-mix(in srgb,var(--brass) 32%,transparent); }
  .navrow:hover:not(.on){ background:var(--ink-2); color:var(--text); }
  .main{ padding:24px 26px; overflow:auto; }
  .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .kpi{ border:1px solid var(--line); border-radius:11px; padding:15px 16px; background:var(--panel); }
  .kpi .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
  .kpi .v{ font-family:var(--mono); font-size:20px; margin-top:8px; font-variant-numeric:tabular-nums; }
  .kpi .v.brass{ color:var(--brass); }

  .panel{ border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-top:20px; }
  .panel-h{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px;
            border-bottom:1px solid var(--line-soft); }
  .panel-h h4{ margin:0; font-size:15px; letter-spacing:-.005em; }
  .panel-h .hint{ font-family:var(--mono); font-size:11px; color:var(--faint); }
  .panel-b{ padding:18px; }

  .keyrow{ display:flex; align-items:center; gap:12px; }
  .keybox{ flex:1; font-family:var(--mono); font-size:12.5px; background:var(--inset); border:1px solid var(--line);
           border-radius:9px; padding:11px 13px; color:var(--muted); letter-spacing:.04em; white-space:nowrap;
           overflow:hidden; text-overflow:ellipsis; }
  .field{ margin-top:14px; }
  .field label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
                color:var(--faint); display:block; margin-bottom:7px; }
  .field .inp{ display:flex; gap:10px; }
  input.txt, textarea.txt{ flex:1; font-family:var(--mono); font-size:13px; background:var(--inset); color:var(--text);
             border:1px solid var(--line); border-radius:9px; padding:10px 12px; outline:none; }
  input.txt:focus, textarea.txt:focus{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(201,162,75,.18); }

  table{ width:100%; border-collapse:collapse; }
  th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
      color:var(--faint); font-weight:500; padding:10px 12px; border-bottom:1px solid var(--line); }
  td{ padding:12px; border-bottom:1px solid var(--line-soft); font-size:14px; }
  tr:last-child td{ border-bottom:0; }
  td .uid{ font-family:var(--mono); font-size:13px; }
  .role{ font-family:var(--mono); font-size:11px; padding:2px 9px; border-radius:6px; border:1px solid var(--line); color:var(--muted); }
  .role.admin{ color:var(--brass); border-color:color-mix(in srgb,var(--brass) 42%,transparent); }
  .sdot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--live); margin-right:7px; }
  .sdot.off{ background:var(--bad); }
  .linkbtn{ background:none; border:0; color:var(--muted); font-family:var(--sans); font-size:13px; cursor:pointer; padding:4px 8px; border-radius:6px; }
  .linkbtn:hover{ color:var(--text); background:var(--ink-2); }
  .linkbtn.danger:hover{ color:var(--bad); }

  /* releases list */
  .rel{ display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--line-soft); }
  .rel:last-child{ border-bottom:0; }
  .rel .rv{ font-family:var(--mono); font-size:13px; color:var(--brass); width:78px; flex:none; }
  .rel .rn{ flex:1; }
  .rel .rn .note{ color:var(--muted); font-size:13.5px; margin-top:3px; }
  .rel .rd{ font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:6px; }

  footer{ border-top:1px solid var(--line-soft); padding:40px 0; color:var(--faint); font-size:13px; }
  .foot-in{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }

  /* ---------- toast notifications ---------- */
  #toasts { position:fixed; top:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:60; }
  .toast { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brass);
           border-radius:9px; padding:11px 15px; font-size:13px; max-width:360px;
           box-shadow:0 8px 24px rgba(0,0,0,.3); color:var(--text); }
  .toast.err { border-left-color:var(--bad); }

  /* ---- theme swatch switcher (shared) ---- */
  .swatches{ display:flex; align-items:center; gap:7px; }
  .sw{ width:18px; height:18px; border-radius:50%; border:2px solid transparent; cursor:pointer;
       padding:0; background:transparent; position:relative; transition:transform .12s; }
  .sw i{ position:absolute; inset:2px; border-radius:50%; }
  .sw:hover{ transform:scale(1.12); }
  .sw.on{ border-color:var(--text); }

  /* ---------- 3-up grid (the component trio) ---------- */
  .trio { grid-template-columns:repeat(3,1fr); }

  @media (max-width:880px){
    .hero-grid,.cards,.dl,.band-in,.trio{ grid-template-columns:1fr; }
    .app-body{ grid-template-columns:1fr; }
    .side{ border-right:0; border-bottom:1px solid var(--line); }
    .kpis{ grid-template-columns:repeat(2,1fr); }
    nav.top{ display:none; }
  }
  @media (prefers-reduced-motion:no-preference){
    .reveal{ opacity:0; transform:translateY(12px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
    .reveal.d1{ animation-delay:.06s; } .reveal.d2{ animation-delay:.14s; }
    .reveal.d3{ animation-delay:.22s; } .reveal.d4{ animation-delay:.3s; }
    @keyframes rise{ to{ opacity:1; transform:none; } }
    .dot{ animation:pulse 2.4s ease-in-out infinite; }
    @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(91,182,194,.14); } 50%{ box-shadow:0 0 0 6px rgba(91,182,194,.05); } }
  }