:root{
    --bg:#0d1015; --surface:#171b22; --sunken:#232a35;
    --brand:#0f6cbd; --brand-hover:#115ea3; --accent:#479ef5;
    --fg:#f2f5f9; --fg-muted:#a6b0bf; --fg-dim:#6f7a8a;
    --border:#262d38; --radius:8px; --radius-lg:14px;
    --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
    --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
    --mono:"Cascadia Mono",Consolas,"Courier New",monospace;
    --max:1240px;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.65;
       -webkit-font-smoothing:antialiased}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  section{padding:72px 0;border-top:1px solid var(--border)}
  h2{font-family:var(--font-display);font-size:1.7rem;font-weight:600;letter-spacing:-.4px;margin-bottom:12px}
  h3{font-family:var(--font-display);font-size:1.05rem;font-weight:600;margin-bottom:6px}
  .lede{color:var(--fg-muted);max-width:62ch;margin-bottom:32px}

  /* header */
  header{position:sticky;top:0;z-index:50;background:rgba(13,16,21,.88);
         backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
  .nav{display:flex;align-items:center;justify-content:space-between;
       height:60px;max-width:var(--max);margin:0 auto;padding:0 24px}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
         font-weight:600;font-size:1rem;color:var(--fg)}
  .brand:hover{text-decoration:none}
  .nav-links{display:flex;gap:22px;align-items:center;font-size:.9rem}
  .nav-links a{color:var(--fg-muted)}
  .nav-links a:hover{color:var(--fg);text-decoration:none}

  /* hero */
  .hero{padding:76px 0 80px;text-align:center;position:relative;overflow:hidden;border-top:none}
  .hero::before{content:"";position:absolute;top:-34%;left:50%;transform:translateX(-50%);
    width:1100px;height:720px;background:radial-gradient(ellipse at center,rgba(71,158,245,.15),transparent 65%);
    pointer-events:none}
  .hero-inner{position:relative}
  .hero-mark{width:104px;height:104px;margin:0 auto 26px;display:block;
             filter:drop-shadow(0 10px 34px rgba(15,108,189,.42))}
  .hero h1{font-family:var(--font-display);font-size:clamp(2.4rem,5.6vw,4rem);
           font-weight:600;letter-spacing:-2px;line-height:1.08;margin:0 0 20px}
  .hero p{color:var(--fg-muted);font-size:1.15rem;max-width:64ch;margin:0 auto 34px}
  .hero-claim{display:block;font-family:var(--font-display);font-size:clamp(1rem,1.9vw,1.24rem);
              font-weight:600;color:var(--accent);letter-spacing:-.2px;margin:0 0 18px}
  .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:var(--radius);
       font-weight:600;font-size:.92rem;font-family:var(--font-display);transition:background .15s,border-color .15s}
  .btn:hover{text-decoration:none}
  .btn-primary{background:var(--brand);color:#fff}
  .btn-primary:hover{background:var(--brand-hover)}
  .btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--border)}
  .btn-ghost:hover{border-color:var(--fg-dim)}

  /* claims */
  .grid{display:grid;gap:18px}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .card{background:var(--surface);border:1px solid var(--border);
        border-radius:var(--radius-lg);padding:22px}
  .card p{color:var(--fg-muted);font-size:.92rem}
  .card p + p{margin-top:.7em}
  .card-accent{border-left:3px solid var(--brand)}
  /* An odd card left alone on the last row leaves a hole beside it. Letting it
     span both columns closes the row instead of drawing attention to the gap. */
  .card-wide{grid-column:1 / -1}
  /* The domain a link actually leads to, shown beside it. Horizon distributes
     no third-party artwork, so a logo is not an option here: naming the source
     does the same job without implying an endorsement nobody has given. */
  .src{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;
       border:1px solid var(--border);color:var(--fg-muted);
       font:400 .72rem/1.5 var(--mono,ui-monospace,monospace);vertical-align:middle}
  .src-links{margin-top:10px;line-height:2.1}
  .src-links a{display:inline-flex;align-items:center;gap:8px}
  .src-mark{width:17px;height:17px;flex:none;vertical-align:middle}
  /* A glyph beside each claim, so the four cards can be told apart at a
     glance rather than read in full. Drawn on the same 20px grid as the
     application's own icons. */
  .card h3{display:flex;align-items:center;gap:10px}
  .card-glyph{width:19px;height:19px;flex:none;color:var(--brand)}

  /* shots */
  figure{margin:0 0 26px}
  figure img{width:100%;height:auto;display:block;border:1px solid var(--border);
             border-radius:var(--radius-lg);background:var(--surface)}
  figcaption{color:var(--fg-dim);font-size:.85rem;margin-top:9px;text-align:center}

  /* Three across, separated by a translucent rule rather than a hard border:
     the shots are the content, the divider only has to keep them apart. */
  .shots{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;gap:0;
         align-items:start;margin:0 0 8px}
  .shots .rule{align-self:stretch;
               background:linear-gradient(180deg,transparent,rgba(255,255,255,.11) 22%,
                                          rgba(255,255,255,.11) 78%,transparent)}
  .shots figure{margin:0;padding:0 20px}
  .shots figure:first-child{padding-left:0}
  .shots figure:last-child{padding-right:0}
  .shots figcaption{text-align:left;margin-top:11px;font-size:.82rem;line-height:1.5}

  /* The thumbnail is a link to the full image, so it works with the keyboard
     and without scripts. The zoom cursor and the lift on hover are the only
     hint that there is more to see. */
  .shot-open{display:block;border-radius:var(--radius);overflow:hidden;
             border:1px solid var(--border);background:var(--surface);
             cursor:zoom-in;transition:border-color .16s ease,transform .16s ease}
  .shot-open:hover{border-color:var(--accent);transform:translateY(-2px)}
  .shot-open img{width:100%;height:auto;display:block;border:0;border-radius:0}

  /* Full size, opened by :target so no JavaScript is involved. Hidden from
     assistive technology until it is the target, since it is a duplicate of
     the thumbnail above it. */
  .lightbox{position:fixed;inset:0;z-index:60;display:none;
            align-items:center;justify-content:center;padding:34px;
            background:rgba(6,8,11,.88)}
  .lightbox:target{display:flex}
  .lightbox img{max-width:100%;max-height:calc(100vh - 68px);width:auto;
                border-radius:var(--radius-lg);border:1px solid var(--border)}
  /* The backdrop closes it, so the whole surface is the dismiss target and the
     visible cross is only there to say so. */
  .lightbox .close{position:absolute;inset:0;cursor:zoom-out}
  .lightbox .close-mark{position:absolute;top:20px;right:24px;z-index:1;
                        color:var(--fg-muted);font-size:1.6rem;line-height:1;
                        text-decoration:none}
  .lightbox .close-mark:hover{color:var(--fg)}

  /* code */
  pre{background:#0a0d11;border:1px solid var(--border);border-radius:var(--radius);
      padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:.85rem;
      color:var(--fg-muted);margin:10px 0}
  code{font-family:var(--mono);font-size:.9em}
  .step{display:flex;gap:16px;margin-bottom:22px}
  .step-n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--sunken);
          border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
          font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--accent)}
  .step-b{flex:1;min-width:0}
  .step-b p{color:var(--fg-muted);font-size:.92rem}
  .step-b .note{color:var(--fg-dim);font-size:.85rem;margin-top:8px}
  .warn{margin-top:10px;padding:11px 13px;border-radius:var(--radius);
        background:rgba(209,52,56,.09);border:1px solid rgba(209,52,56,.34);
        border-left:3px solid #e05c62;color:#f0b6b8;font-size:.88rem;line-height:1.6}
  .warn strong{color:#ff9c9f}

  /* two install tracks, divided by a translucent rule */
  .tracks{display:grid;grid-template-columns:1fr 1px 1fr;gap:0}
  .track{padding:0 44px}
  .track:first-child{padding-left:0}
  .track:last-child{padding-right:0}
  .divider{background:linear-gradient(to bottom,
            transparent,rgba(71,158,245,.28) 12%,rgba(71,158,245,.28) 88%,transparent)}
  .track-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
  .track-head h3{font-size:1.15rem;margin:0}
  .track-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
             color:var(--accent);background:rgba(71,158,245,.1);border:1px solid rgba(71,158,245,.22);
             border-radius:100px;padding:2px 9px}
  .track-lede{color:var(--fg-dim);font-size:.88rem;margin-bottom:26px}
  .kbd{font-family:var(--mono);font-size:.85em;background:var(--sunken);
       border:1px solid var(--border);border-radius:4px;padding:1px 6px;color:var(--fg)}

  /* chain */
  .chain{font-family:var(--mono);font-size:.82rem;color:var(--fg-muted);
         background:#0a0d11;border:1px solid var(--border);border-radius:var(--radius);
         padding:18px;overflow-x:auto;line-height:2}
  .chain b{color:var(--accent);font-weight:400}

  /* table */
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border)}
  th{font-family:var(--font-display);font-weight:600;color:var(--fg);font-size:.85rem}
  td{color:var(--fg-muted)}
  td:first-child{color:var(--fg);white-space:nowrap}

  footer{border-top:1px solid var(--border);padding:40px 0 56px;color:var(--fg-dim);font-size:.85rem}
  footer p{margin-bottom:10px;max-width:78ch}
  .fine{font-size:.78rem;line-height:1.7}

  @media(max-width:820px){
    .cols-3,.cols-2{grid-template-columns:1fr}
    .tracks{grid-template-columns:1fr}
    .track{padding:0}
    .track:last-child{padding-top:40px;margin-top:40px;
      border-top:1px solid rgba(71,158,245,.22)}
    .divider{display:none}
    .nav-links{display:none}
    section{padding:52px 0}
    /* A window shot three-abreast is unreadable on a phone. Stacked, the
       vertical rules become horizontal ones between each. */
    .shots{grid-template-columns:1fr}
    .shots figure{padding:0}
    .shots .rule{height:1px;margin:26px 0;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.11) 22%,
                                 rgba(255,255,255,.11) 78%,transparent)}
    .lightbox{padding:16px}
  }