#gp{
  --gp-base:https://www.dark3d.org/hornet/;

  --gp-ink:#0b0c0e; --gp-line:#33363b;
  --gp-grey:#8b9098; --gp-bone:#e9e4da; --gp-gold:#d9b45f;

  background:var(--gp-ink); color:var(--gp-bone);
  font:16px/1.55 "DejaVu Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  -webkit-font-smoothing:antialiased;
}
#gp *{box-sizing:border-box}
/* a host page can style bare img, p, h1, h2, dl. Reset the ones this block uses, or a
   host theme leaks in as red borders and wrong colours. preview.sh is the harness that
   proves it still holds */
#gp img{border:0; display:block; max-width:100%}
#gp p,#gp h1,#gp h2,#gp dl,#gp dt,#gp dd{margin:0; padding:0; font-family:inherit;
                                  text-transform:none; font-style:normal}
#gp button{font-family:inherit; text-transform:none}

/* ---------- parallax stage ---------- */
#gp .gp-stage{position:relative; min-height:100svh; overflow:hidden;
              display:grid; place-items:center; padding:12vh 5vw}
#gp .gp-plane{position:absolute; inset:-24% -12%; pointer-events:none; will-change:transform}
/* the grid and the two fields get their image from the script, which builds every
   URL out of --gp-base. Nothing here hardcodes a host. */
#gp .gp-ghost,#gp .gp-circ{background-position:center; background-size:140% auto;
                           background-repeat:no-repeat}
#gp .gp-scrim{background:radial-gradient(66% 60% at 50% 45%,
              rgba(11,12,14,.92), rgba(11,12,14,0) 72%)}

#gp .gp-hero{position:relative; z-index:2; text-align:center; max-width:52rem}
#gp .gp-mark{width:clamp(64px,9vw,120px); display:block; margin:0 auto 2.2rem}
/* the hero lockup is one h1 so the document has a top level heading, and the kicker
   rides inside it: the heading reads DARK3D WARDRIVING HARDWARE HORNET to a reader that
   cannot see the type. Both children are spans, so both need display:block to keep the
   margins they had as paragraphs. */
#gp .gp-lockup{margin:0; font-weight:400}
#gp .gp-h1{display:block; font-size:clamp(2.6rem,9vw,6rem); letter-spacing:.22em; margin:0 0 .6rem;
           font-weight:700; text-indent:.22em; line-height:1.05; color:var(--gp-bone)}
#gp .gp-kicker{display:block; color:var(--gp-gold); letter-spacing:.42em;
               font-size:clamp(.62rem,1.5vw,.8rem); margin:0 0 1.4rem}
#gp .gp-sub{color:var(--gp-grey); font-size:clamp(.95rem,2.2vw,1.15rem);
            margin:0 auto 2.6rem; max-width:38rem}
#gp .gp-cta{display:inline-block; text-transform:none; border:1px solid var(--gp-gold);
            color:var(--gp-gold); background:none;
            padding:.85rem 2.2rem; text-decoration:none; letter-spacing:.24em; font-size:.75rem}
#gp .gp-cta:hover{background:var(--gp-gold); color:var(--gp-ink)}
#gp .gp-cta.gp-solid{background:var(--gp-gold); color:var(--gp-ink); font-weight:700}
#gp .gp-cta.gp-solid:hover{background:var(--gp-bone); border-color:var(--gp-bone)}
#gp .gp-ctarow{display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center}
#gp .gp-copy .gp-ctarow{justify-content:flex-start; margin-top:2rem}
/* closing band, so the last thing on the page is the ask */
#gp .gp-close{position:relative; text-align:center; padding:16vh 6vw; overflow:hidden}
#gp .gp-close h2{margin:0 0 1rem}
#gp .gp-close p{color:var(--gp-grey); max-width:34rem; margin:0 auto 2.4rem}

/* ---------- board sections ---------- */
#gp .gp-board{position:relative; min-height:100svh; display:grid; align-items:center;
              gap:clamp(2rem,5vw,5rem); padding:14vh 6vw; overflow:hidden;
              grid-template-columns:1fr}
@media(min-width:900px){
  #gp .gp-board{grid-template-columns:1fr 1fr}
  #gp .gp-board.gp-mirror .gp-art{order:2}
}
/* a veil over the parallax planes in the reading sections. The hero has its own scrim
   and the boards had nothing, so body copy sat straight on the circuit texture. Sits at
   z-index 1: above the planes, which are z-index auto, and below the content at 2 and 3,
   so the art and copy are untouched. */
#gp .gp-board::after,#gp .gp-close::after{content:""; position:absolute; inset:0;
                    background:rgba(11,12,14,.5); pointer-events:none; z-index:1}

#gp .gp-art{position:relative; z-index:3; perspective:1800px}
#gp .gp-art::before{content:""; position:absolute; z-index:-1; left:10%; right:10%;
                    bottom:-1.5%; height:10%; border-radius:50%;
                    background:radial-gradient(50% 50% at 50% 50%,
                    rgba(0,0,0,.8), rgba(0,0,0,0) 72%)}
/* the ratio is the rendered image's, not the board's: the render carries a margin */
#gp .gp-flip{position:relative; transform-style:preserve-3d; margin-inline:auto;
             width:min(100%, calc(66svh * 1110 / 1800)); aspect-ratio:1110 / 1800}
#gp .gp-flip.gp-eased{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
/* no filter on a face. A filter flattens the 3D context, backface-visibility stops
   working, and the front shows through the back. Hence the shadow element above. */
#gp .gp-flip img{position:absolute; inset:0; width:100%; height:100%; display:block;
                 backface-visibility:hidden; -webkit-backface-visibility:hidden}
#gp .gp-flip .gp-back{transform:rotateY(180deg)}
#gp .gp-ctl{position:absolute; left:50%; bottom:-3.4rem; transform:translateX(-50%);
            display:flex; gap:.6rem; white-space:nowrap}
#gp .gp-spin{background:none; border:1px solid var(--gp-line); color:var(--gp-grey);
             font:inherit; font-size:.68rem; letter-spacing:.24em; padding:.6rem 1.4rem;
             cursor:pointer}
#gp .gp-spin:hover:enabled{border-color:var(--gp-gold); color:var(--gp-gold)}
#gp .gp-spin[aria-pressed=true]{border-color:var(--gp-gold); color:var(--gp-gold)}
#gp .gp-spin:disabled{opacity:.45; cursor:default}
/* .gp-ctl is absolute and hangs 3.4rem past .gp-art. In one column .gp-copy starts
   2rem below, so REV B1 was painted over the buttons and ate the taps: only the top
   few pixels of each button were live. Give the row its own strip, and put .gp-art
   above the copy so an overlap can never swallow a tap again. */
@media(max-width:899px){
  #gp .gp-board{row-gap:6rem}
  #gp .gp-spin{min-height:44px}
}
/* overlays sit over the card but outside the 3D context, so they cannot interfere with
   preserve-3d, and cross fade in. Only one is ever up */
#gp .gp-pane{position:absolute; inset:0; opacity:0; pointer-events:none;
             transition:opacity .45s ease}
#gp .gp-pane img{width:100%; height:100%; object-fit:contain; display:block}
#gp .gp-art.gp-showing .gp-flip{opacity:0; transition:opacity .3s ease}
#gp .gp-art[data-gp-pane=case] .gp-pane-case{opacity:1}
#gp .gp-art[data-gp-pane=size] .gp-pane-size{opacity:1}

#gp .gp-copy{position:relative; z-index:2}
#gp h2{font-size:clamp(1.8rem,4.5vw,3rem); letter-spacing:.12em; color:var(--gp-bone);
       font-weight:700; margin:.2rem 0 1rem}
#gp .gp-copy h2{font-size:clamp(1.8rem,4.5vw,3rem); letter-spacing:.12em; margin:.2rem 0 1rem;
                color:var(--gp-bone); font-weight:700}
#gp .gp-copy p{color:var(--gp-grey); max-width:34rem}
#gp .gp-copy p + p{margin-top:1.05rem}
#gp .gp-rev{color:var(--gp-gold); letter-spacing:.4em; font-size:.7rem; margin:0}
/* the theirs/ours table. Its own element rather than a dl: two equal columns with a
   spine down the middle. Full --gp-line on every rule, not a faded one: at 55 percent
   over #0b0c0e the separators composited to about #212327 and read as nothing at all,
   so the text looked like it was floating. Every selector is under #gp, so a host page
   cannot reach table, th or td here. */
#gp .gp-vs{width:100%; border-collapse:collapse; margin:2rem 0 0; font-size:.85rem;
           table-layout:fixed}
#gp .gp-vs th,#gp .gp-vs td{width:50%; text-align:left; vertical-align:top;
                            padding:.7rem 1.1rem;
                            border-bottom:1px solid var(--gp-line)}
#gp .gp-vs th{font-weight:400; letter-spacing:.2em; font-size:.68rem; padding-top:0}
#gp .gp-vs th.gp-them{color:var(--gp-grey)}
#gp .gp-vs th.gp-us{color:var(--gp-gold)}
#gp .gp-vs th:first-child,#gp .gp-vs td:first-child{padding-left:0}
#gp .gp-vs th:last-child,#gp .gp-vs td:last-child{padding-right:0;
                            border-left:1px solid var(--gp-line)}
#gp .gp-vs td:first-child{color:var(--gp-grey)}
#gp .gp-vs td:last-child{color:var(--gp-bone)}
#gp .gp-vs tr:last-child th,#gp .gp-vs tr:last-child td{border-bottom:0}
#gp .gp-spec{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.4rem; margin:2rem 0 0;
             border-top:1px solid var(--gp-line); padding-top:1.4rem; font-size:.85rem}
#gp .gp-spec dt{color:var(--gp-grey); letter-spacing:.14em}
#gp .gp-spec dd{margin:0; color:var(--gp-bone)}

#gp .gp-foot{position:relative; z-index:2; text-align:center; padding:8vh 6vw;
             color:var(--gp-grey); font-size:.75rem; letter-spacing:.2em;
             border-top:1px solid var(--gp-line)}

@media(prefers-reduced-motion:reduce){ #gp .gp-plane{transform:none !important} }