/* Fonts are self-hosted (SIL Open Font License); no request goes to a third party. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin.woff2) format("woff2")}
  :root{
    --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#EDF1F6;
    --ink:#121A26; --muted:#556173; --faint:#5F6978;
    --line:#DCE2EA; --line-strong:#C7D0DB;
    --brand:#1A4378; --brand-soft:#E2E9F3; --brand-ink:#1A4378; --on-brand:#FFFFFF;
    --signal:#12705F; --signal-soft:#DCEFEA;
    --logo:#1A4378;
    --code-bg:#111823; --code-ink:#E6E9EE; --code-line:#253042;
    --code-key:#8FB4EA; --code-str:#86CBA8; --code-com:#8A95A9;
    --radius:14px;
    --shadow:0 1px 2px rgba(12,24,44,.05), 0 10px 26px -14px rgba(12,24,44,.22);
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0C1119; --surface:#131A25; --surface-2:#18212E;
      --ink:#E7EBF1; --muted:#9BA6B6; --faint:#818C9D;
      --line:#222C3A; --line-strong:#2E3A4B;
      --brand:#7FA6DE; --brand-soft:#1A2940; --brand-ink:#A8C3EA; --on-brand:#0C1119;
      --signal:#4CC3B0; --signal-soft:#15302C;
      --logo:#E7EBF1;
      --code-bg:#0A0F16; --code-line:#1F2937;
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0C1119; --surface:#131A25; --surface-2:#18212E;
    --ink:#E7EBF1; --muted:#9BA6B6; --faint:#818C9D;
    --line:#222C3A; --line-strong:#2E3A4B;
    --brand:#7FA6DE; --brand-soft:#1A2940; --brand-ink:#A8C3EA; --on-brand:#0C1119;
    --signal:#4CC3B0; --signal-soft:#15302C;
    --logo:#E7EBF1;
    --code-bg:#0A0F16; --code-line:#1F2937;
    color-scheme:dark;
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif; font-weight:700; line-height:1.1; text-wrap:balance; margin:0}
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
  .wrap{max-width:1080px; margin:0 auto; padding-inline:20px}
  .mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

  /* header */
  header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
    background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--line)}
  .site .wrap{display:flex; align-items:center; gap:22px; height:64px}
  .logo{display:block; width:92px; height:46px; background:var(--logo);
    -webkit-mask:url("assets/klug-logo.png") left center/contain no-repeat;
            mask:url("assets/klug-logo.png") left center/contain no-repeat}
  .site nav{margin-left:auto; display:flex; gap:26px; font-size:14px; color:var(--muted)}
  .site nav a{text-decoration:none}
  .site nav a:hover{color:var(--ink)}
  .theme-btn{border:1px solid var(--line-strong); background:var(--surface); color:var(--muted);
    width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; display:grid; place-items:center}
  .theme-btn:hover{color:var(--ink); border-color:var(--brand)}
  @media (max-width:720px){ .site nav{display:none} .theme-btn{margin-left:auto} }

  /* hero */
  .hero{padding-block:64px 44px; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
  .hero > div{min-width:0}
  .eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--brand-ink); display:inline-flex; align-items:center; gap:10px; margin-bottom:20px}
  .eyebrow::before{content:""; width:24px; height:1.5px; background:var(--brand)}
  .hero h1{font-size:clamp(34px,5.2vw,54px); letter-spacing:-.025em}
  .hero h1 em{font-style:normal; color:var(--brand-ink)}
  .lede{font-size:clamp(16px,2vw,18.5px); color:var(--muted); max-width:44ch; margin:22px 0 0}
  .pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
  .pill{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; padding:6px 12px; border-radius:99px;
    border:1px solid var(--line-strong); background:var(--surface); color:var(--muted)}
  .pill b{color:var(--ink)}
  @media (max-width:820px){ .hero{grid-template-columns:1fr; gap:32px; padding-block:44px 32px} }

  /* code card */
  .code{background:var(--code-bg); color:var(--code-ink); border-radius:var(--radius); border:1px solid var(--code-line);
    overflow:hidden; box-shadow:var(--shadow)}
  .code .bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--code-line);
    font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--code-com)}
  .code .dot{width:10px; height:10px; border-radius:50%; background:#2B3547}
  .code .bar span:last-child{margin-left:auto}
  .code pre{margin:0; padding:16px 18px; overflow-x:auto; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; line-height:1.75}
  .k{color:var(--code-key)} .s{color:var(--code-str)} .c{color:var(--code-com)}

  /* sections */
  section{padding-block:56px}
  hr.divider{border:0; border-top:1px solid var(--line); margin:0}
  .kicker{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
  .sec-head h2{font-size:clamp(24px,3.4vw,32px); letter-spacing:-.02em}
  .sec-head p{color:var(--muted); margin:10px 0 0; max-width:60ch; font-size:15.5px}
  .sec-head{margin-bottom:30px}

  /* grid */
  .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  @media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .grid{grid-template-columns:1fr} }
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
    display:flex; flex-direction:column; gap:10px; position:relative}
  .card .ic{width:36px; height:36px; border-radius:10px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center}
  .card .ic svg{width:19px; height:19px}
  .card h3{font-size:17.5px; letter-spacing:-.01em}
  .card .id{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; color:var(--faint); margin-top:-4px; overflow-wrap:anywhere}
  .card p{margin:0; font-size:14px; color:var(--muted); flex:1}
  .plats{display:flex; flex-wrap:wrap; gap:6px}
  .plat{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; padding:3px 8px; border-radius:6px;
    background:var(--signal-soft); color:var(--signal); font-weight:500}
  .badge{position:absolute; top:16px; right:16px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px;
    letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:99px; background:var(--brand); color:var(--on-brand); font-weight:700}
  .status{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; color:var(--faint); display:flex; align-items:center; gap:6px}
  .status::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--signal)}
  .status.dev::before{background:var(--faint)}
  .legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:20px; font-size:12.5px; color:var(--muted)}
  .legend span{display:inline-flex; align-items:center; gap:7px}
  .legend i{width:9px; height:9px; border-radius:50%; display:inline-block}

  /* flagship */
  .flagship{background:var(--surface-2); border-block:1px solid var(--line)}
  .flag-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
  .flag-grid > div{min-width:0}
  @media (max-width:860px){ .flag-grid{grid-template-columns:1fr; gap:28px} }
  .flagship h2{font-size:clamp(26px,3.6vw,36px); letter-spacing:-.02em}
  .flagship p{color:var(--muted); font-size:15.5px; margin:16px 0 0; max-width:60ch}
  .flagship p strong{color:var(--ink); font-weight:600}
  .feat{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px}
  .feat li{position:relative; padding-left:26px; font-size:14.5px}
  .feat li::before{content:""; position:absolute; left:0; top:8px; width:13px; height:8px;
    border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg)}

  /* approach */
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
  @media (max-width:780px){ .grid3{grid-template-columns:1fr; gap:22px} }
  .grid3 h3{font-size:18px; margin-bottom:8px}
  .grid3 p{color:var(--muted); font-size:14.5px; margin:0}

  footer{border-top:1px solid var(--line); padding-block:32px 44px; color:var(--muted); font-size:13.5px}
  footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
  footer .logo{width:72px; height:36px}
  footer a{color:inherit; text-decoration:underline; text-underline-offset:3px}
  footer a:hover{color:var(--ink)}
  a.home{display:inline-flex; text-decoration:none}

  /* ---------- detail pages ---------- */
  .back{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--muted); text-decoration:none}
  .back:hover{color:var(--ink)}
  .xhero{padding-block:48px 30px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
  .xhero > div{min-width:0}
  .xicon{width:62px; height:62px; border-radius:16px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center}
  .xicon svg{width:32px; height:32px}
  .xhero h1{font-size:clamp(32px,5vw,46px); letter-spacing:-.025em}
  .xhero .xid{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; color:var(--faint); margin-top:8px; overflow-wrap:anywhere}
  .xhero .tag{font-size:clamp(16px,2.1vw,18.5px); color:var(--muted); margin:14px 0 0; max-width:56ch}
  .metarow{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; align-items:center}
  .metarow .status{padding:4px 10px; border:1px solid var(--line-strong); border-radius:7px}
  @media (max-width:640px){ .xhero{grid-template-columns:1fr} }
  .layout{display:grid; grid-template-columns:1fr 220px; gap:44px; padding-block:40px 20px; align-items:start}
  .layout > article{min-width:0}
  @media (max-width:860px){ .layout{grid-template-columns:1fr} .toc{display:none} }
  .toc{position:sticky; top:92px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px}
  .toc .lbl{color:var(--faint); letter-spacing:.1em; text-transform:uppercase; font-size:11px; margin-bottom:12px}
  .toc a{display:block; color:var(--muted); text-decoration:none; padding:5px 0 5px 14px; border-left:2px solid var(--line)}
  .toc a:hover{color:var(--ink); border-color:var(--brand)}
  article > section{padding-block:0; margin-bottom:42px; scroll-margin-top:84px}
  article h2{font-size:22px; letter-spacing:-.015em; margin-bottom:14px}
  article p{color:var(--muted); margin:0 0 14px; max-width:68ch}
  article p strong{color:var(--ink); font-weight:600}
  .subh{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:22px 0 10px}
  article .code{margin-bottom:14px}
  .table-wrap{overflow-x:auto}
  table.t{width:100%; border-collapse:collapse; font-size:14px}
  table.t td{padding:11px 16px 11px 0; border-bottom:1px solid var(--line); vertical-align:top}
  table.t td:first-child{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; color:var(--brand-ink); white-space:nowrap}
  table.t td:last-child{color:var(--muted)}
  table.req td:first-child{color:var(--muted); width:150px; white-space:normal}
  table.req td:last-child{color:var(--ink)}
  .platlist{display:flex; flex-wrap:wrap; gap:10px}
  .platbig{display:flex; align-items:center; gap:9px; padding:11px 15px; border:1px solid var(--line); border-radius:11px; background:var(--surface); font-size:14px}
  .platbig i{width:9px; height:9px; border-radius:50%; background:var(--signal)}
  .platbig small{color:var(--faint); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px}
  .note{background:var(--brand-soft); border-radius:12px; padding:14px 16px; font-size:14.5px; color:var(--ink); max-width:68ch}
  .note a{color:var(--brand-ink)}
  a.card{text-decoration:none; transition:border-color .15s ease, transform .15s ease}
  a.card:hover{border-color:var(--brand); transform:translateY(-2px)}
  .card .more{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--brand-ink)}
  @media (prefers-reduced-motion:reduce){ a.card, a.card:hover{transition:none; transform:none} }

  .btn{display:inline-block; background:var(--brand); color:var(--on-brand); text-decoration:none; font-weight:600;
    font-size:15px; padding:11px 18px; border-radius:10px}
  .btn:hover{filter:brightness(1.08)}

  /* ---------- diagram ---------- */
  .diagram{margin:8px 0 24px; padding:22px 20px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink)}
  .diagram svg{display:block; width:100%; max-width:760px; height:auto; margin:0 auto; font-family:"IBM Plex Sans",system-ui,sans-serif}
  .diagram .hl{stroke:var(--brand)}
  .diagram figcaption{margin-top:14px; font-size:13.5px; color:var(--muted); max-width:68ch}

  /* ---------- streaming server band on the overview ---------- */
  .serverband{background:var(--brand); color:var(--on-brand)}
  .serverband .kicker{color:var(--on-brand); opacity:.75}
  .serverband h2{color:var(--on-brand)}
  .serverband .sec-head p, .serverband .grid3 p{color:var(--on-brand); opacity:.85}
  .serverband .grid3 h3{color:var(--on-brand)}
  .serverband .btn{background:var(--on-brand); color:var(--brand)}
  .serverband .diagram{background:transparent; border-color:color-mix(in srgb,var(--on-brand) 30%,transparent); color:var(--on-brand)}
  .serverband .diagram .hl{stroke:var(--on-brand)}
  .serverband .diagram figcaption{color:var(--on-brand); opacity:.8}

  /* ---------- contact ---------- */
  .contact{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
    display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between}
  .contact h2{font-size:clamp(22px,3vw,28px); letter-spacing:-.02em}
  .contact p{margin:8px 0 0; color:var(--muted); max-width:52ch}
  .mailrow{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
  .mail{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:15px; padding:10px 14px; border-radius:10px;
    background:var(--brand-soft); color:var(--brand-ink); user-select:all; overflow-wrap:anywhere}
  .copybtn{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:10px;
    padding:10px 14px; font:600 14px "IBM Plex Sans",system-ui,sans-serif; cursor:pointer}
  .copybtn:hover{border-color:var(--brand)}

  /* ---------- FAQ ---------- */
  .faq{border-top:1px solid var(--line); max-width:820px}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer; list-style:none; padding:18px 36px 18px 0; position:relative;
    font-weight:600; font-size:16.5px; color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
    font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:400; font-size:20px; color:var(--muted)}
  .faq details[open] summary::after{content:"–"}
  .faq summary:hover{color:var(--brand)}
  .faq details p{margin:0 0 18px; color:var(--muted); font-size:15px; max-width:70ch}

  /* ---------- accessibility ---------- */
  .skip-link{position:absolute; left:16px; top:-60px; z-index:100; background:var(--brand); color:var(--on-brand);
    padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none}
  .skip-link:focus{top:12px}
  main:focus{outline:none}
  @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important} }

  .a11y-btn{position:fixed; left:16px; bottom:16px; z-index:60; width:48px; height:48px; border-radius:50%;
    border:2px solid var(--on-brand); background:var(--brand); color:var(--on-brand); cursor:pointer;
    display:grid; place-items:center; box-shadow:var(--shadow); padding:0}
  .a11y-btn svg{width:26px; height:26px}
  .a11y-panel{position:fixed; left:16px; bottom:74px; z-index:60; width:250px; max-width:calc(100vw - 32px);
    background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:14px; max-height:calc(100vh - 100px); overflow:auto}
  .a11y-panel[hidden]{display:none}
  .a11y-panel h2{font-size:15px; margin:0 0 10px; letter-spacing:0}
  .a11y-panel button{display:block; width:100%; text-align:left; margin:0 0 6px; padding:9px 12px; border-radius:8px;
    border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; cursor:pointer}
  .a11y-panel button:hover{border-color:var(--brand)}
  .a11y-panel button[aria-pressed="true"]{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
  .a11y-panel a{display:block; margin-top:8px; font-size:13px; color:var(--brand-ink)}

  html.a11y-z1 body{zoom:1.12} html.a11y-z2 body{zoom:1.25} html.a11y-z3 body{zoom:1.4}
  html.a11y-zm1 body{zoom:.9}
  html.a11y-gray header.site, html.a11y-gray main, html.a11y-gray footer{filter:grayscale(1)}
  html.a11y-links a{text-decoration:underline!important; text-underline-offset:3px}
  html.a11y-font body *:not(pre):not(pre *):not(code):not(.mono):not(.xid):not(svg *){
    font-family:Verdana,Tahoma,Arial,sans-serif!important; letter-spacing:.01em!important}
  :root.a11y-contrast:not(.x){
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --ink:#000000; --muted:#000000; --faint:#1A1A1A;
    --line:#000000; --line-strong:#000000; --brand:#002A66; --brand-soft:#FFFFFF; --brand-ink:#002A66;
    --on-brand:#FFFFFF; --signal:#004D40; --logo:#002A66}