/*
 * dpe.combycode.com — landing styles.
 *
 * Source design: Flowkit project landing/dpe-promo-concept.json, screen
 * "dpe-dark" (flow node concept-02). Sections 1-3 below are carried over from
 * that screen as-is so the page can be re-synced from the design; section 4 is
 * site-only (links, focus, mobile nav) and has no counterpart in the design.
 */

/* 1. Tokens (kit theme, the subset the screen uses) ----------------------- */
:root {
  color-scheme: dark;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading-body: 1.6;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-md: 10px;
  --mobile-heading: 36px;

  --d2-bg: #050a10;
  --d2-panel: #0a131e;
  --d2-raised: #101e2b;
  --d2-ink: #edf6fc;
  --d2-muted: #8da3b7;
  --d2-cyan: #35d7f2;
  --d2-border: #1a3041;
  --d2-green: #70deae;
  --d2-glow: rgba(11, 172, 223, 0.13);
  --d2-grid: rgba(84, 160, 200, 0.07);
  --d2-width: 1280px;
  --d2-display: 78px;
  --d2-h2: 48px;
  --d2-hero: 680px;
  --d2-map: 560px;
  --d2-gap: 64px;
  --d2-section: 96px;
  --d2-radius: 5px;
  --d2-track: -0.05em;
  --d2-shadow: 0 0 90px rgba(23, 158, 227, 0.13);
  --d2-one: 1px;
  --d2-grid-size: 32px;
  --d2-title-mobile: 48px;
  --d2-node-border: #37718a;
  --d2-wire: #23495e;
  --d2-node-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), inset 0 0 18px rgba(53, 215, 242, 0.025);
}

/* 2. Kit base ------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--d2-bg);
  color: var(--d2-ink);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
a { color: inherit; }
button { font: inherit; }

/* 3. Screen "dpe-dark" ---------------------------------------------------- */
.dpe-dark{background:var(--d2-bg);color:var(--d2-ink);font-family:var(--font-sans);overflow:hidden}.dpe-dark a{text-decoration:none}.dpe-dark-nav,.dpe-dark-hero,.dpe-dark-section,.dpe-dark-facts,.dpe-dark-footer{max-width:var(--d2-width);margin:auto}.dpe-dark-nav{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) 0;border-bottom:var(--d2-one) solid var(--d2-border)}.dpe-dark-logo{font-size:var(--text-2xl);font-weight:850;letter-spacing:var(--d2-track)}.dpe-dark-logo>span:last-child{color:var(--d2-cyan)}.dpe-dark-nav-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--d2-muted);letter-spacing:.12em}.dpe-dark-nav nav{margin-left:auto;display:flex;gap:var(--space-6);font-size:var(--text-sm)}.dpe-dark-link{border:var(--d2-one) solid var(--d2-border);padding:var(--space-2) var(--space-4);border-radius:var(--d2-radius);font-size:var(--text-sm)}.dpe-dark-hero{display:grid;grid-template-columns: .94fr 1.06fr;min-height:var(--d2-hero);align-items:center;gap:var(--space-5)}.dpe-dark-hero-copy{padding:var(--space-7) 0;position:relative;z-index:1}.dpe-dark-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.13em;color:var(--d2-cyan);margin:0 0 var(--space-5)}.dpe-dark h1{font-size:var(--d2-display);font-weight:760;line-height:1.02;letter-spacing:var(--d2-track);margin:0}.dpe-dark-cyan{color:var(--d2-cyan)}.dpe-dark-lead{max-width:85%;font-size:var(--text-lg);line-height:1.7;color:var(--d2-muted);margin:var(--space-5) 0 var(--space-6)}.dpe-dark-actions{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}.dpe-dark-primary{display:inline-flex;gap:var(--space-6);align-items:center;padding:var(--space-4) var(--space-5);background:var(--d2-cyan);color:var(--d2-bg);font-weight:700;border-radius:var(--d2-radius)}.dpe-dark-secondary{font-size:var(--text-sm);color:var(--d2-ink)}.dpe-dark-install{margin-top:var(--space-5);display:flex;gap:var(--space-3);font-size:var(--text-sm);color:var(--d2-muted)}.dpe-dark-install>span{color:var(--d2-cyan)}.dpe-dark-install code{font-family:var(--font-mono)}.dpe-dark-map{height:var(--d2-map);position:relative;background:radial-gradient(ellipse at center,var(--d2-glow),transparent 70%),linear-gradient(var(--d2-grid) var(--d2-one),transparent var(--d2-one)),linear-gradient(90deg,var(--d2-grid) var(--d2-one),transparent var(--d2-one));background-size:100% 100%,var(--d2-grid-size) var(--d2-grid-size),var(--d2-grid-size) var(--d2-grid-size);border:var(--d2-one) solid var(--d2-border);border-radius:var(--radius-md);box-shadow:var(--d2-shadow)}.dpe-dark-map-title{position:absolute;top:var(--space-4);left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--d2-ink)}.dpe-dark-map-title>span:last-child{color:var(--d2-muted)}.dpe-dark-wires{position:absolute;inset:0;width:100%;height:100%;color:var(--d2-cyan)}.dpe-dark-node{position:absolute;width:28%;height:11%;transform:translateX(-50%);padding:var(--space-3);background:linear-gradient(120deg,var(--d2-raised),var(--d2-panel));border:var(--d2-one) solid var(--d2-node-border);border-radius:var(--radius-md);box-shadow:var(--d2-node-shadow)}.dpe-dark-node-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-sm)}.dpe-dark-node-top i{width:var(--space-1);height:var(--space-1);border-radius:50%;background:var(--d2-cyan)}.dpe-dark-node small{display:block;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--d2-muted);margin-top:var(--space-1);white-space:nowrap}.dpe-dark-n1{left:50%;top:8%}.dpe-dark-n2{left:50%;top:26.4%}.dpe-dark-n3{left:20.3%;top:50%}.dpe-dark-n4{left:79.7%;top:50%}.dpe-dark-n5{left:50%;top:75.9%}.dpe-dark-map-foot{position:absolute;bottom:var(--space-2);left:0;right:0;display:flex;gap:var(--space-3);justify-content:center;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--d2-muted)}.dpe-dark-map-foot>span:nth-child(2){color:var(--d2-cyan)}.dpe-dark-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--d2-one) solid var(--d2-border);border-bottom:var(--d2-one) solid var(--d2-border);padding:var(--space-6) 0;gap:var(--space-5)}.dpe-dark-facts div{display:flex;align-items:center;gap:var(--space-4)}.dpe-dark-facts strong{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--d2-ink)}.dpe-dark-facts div>span{color:var(--d2-muted);font-size:var(--text-sm)}.dpe-dark-section{padding:var(--d2-section) 0}.dpe-dark-section-head{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:var(--d2-gap);margin-bottom:var(--space-7)}.dpe-dark h2{font-size:var(--d2-h2);line-height:1.15;letter-spacing:var(--d2-track);font-weight:650;margin:0}.dpe-dark-section-head>p{color:var(--d2-muted);font-size:var(--text-lg);margin:0;max-width:90%}.dpe-dark-screenshot{border:var(--d2-one) solid var(--d2-border);border-radius:var(--radius-md);overflow:hidden;background:var(--d2-panel);box-shadow:var(--d2-shadow)}.dpe-dark-shot-bar{display:flex;justify-content:space-between;padding:var(--space-4) var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--d2-muted)}.dpe-dark-shot-bar>span:first-child{color:var(--d2-cyan)}.dpe-dark-screenshot img{display:block;width:100%}.dpe-dark-features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7);margin:var(--space-7) 0 var(--space-6)}.dpe-dark h3{font-size:var(--text-xl);letter-spacing:-.02em;margin:var(--space-3) 0;font-weight:600}.dpe-dark article p{color:var(--d2-muted);font-size:var(--text-md);margin:0;line-height:1.7}.dpe-dark-features small{color:var(--d2-cyan);font-family:var(--font-mono);font-size:var(--text-sm)}.dpe-dark-textlink{color:var(--d2-cyan)}.dpe-dark-note{font-size:var(--text-sm);color:var(--d2-muted)}.dpe-dark-runtime{background:var(--d2-panel);border-block:var(--d2-one) solid var(--d2-border)}.dpe-dark-runtime-grid{display:grid;grid-template-columns:1fr 1fr;border-left:var(--d2-one) solid var(--d2-border);border-top:var(--d2-one) solid var(--d2-border)}.dpe-dark-runtime-grid article{padding:var(--space-6);border-right:var(--d2-one) solid var(--d2-border);border-bottom:var(--d2-one) solid var(--d2-border)}.dpe-dark-symbol{color:var(--d2-cyan);font-family:var(--font-mono);font-size:var(--text-2xl)}.dpe-dark-runtime-grid code{display:block;margin-top:var(--space-5);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--d2-cyan)}.dpe-dark-usecases{display:grid;grid-template-columns:1fr 1fr;gap:var(--d2-gap);margin-top:var(--space-7)}.dpe-dark-usecases article{border-top:var(--d2-one) solid var(--d2-border);padding-top:var(--space-5)}.dpe-dark-usecases article>span{color:var(--d2-cyan);font-family:var(--font-mono);font-size:var(--text-xs)}.dpe-dark-start{display:grid;grid-template-columns:1fr 1fr;gap:var(--d2-gap);border-top:var(--d2-one) solid var(--d2-border);align-items:center}.dpe-dark-start>div>p:not(.dpe-dark-eyebrow){color:var(--d2-muted);max-width:80%;margin:var(--space-5) 0}.dpe-dark-terminal{border:var(--d2-one) solid var(--d2-border);background:var(--d2-panel);border-radius:var(--radius-md);padding:var(--space-6);min-width:0}.dpe-dark-terminal>p{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--d2-cyan);border-bottom:var(--d2-one) solid var(--d2-border);padding-bottom:var(--space-4);margin:0}.dpe-dark-terminal pre{font-family:var(--font-mono);line-height:1.9;font-size:var(--text-md);white-space:pre-wrap;overflow-wrap:anywhere}.dpe-dark-footer{display:flex;justify-content:space-between;border-top:var(--d2-one) solid var(--d2-border);padding:var(--space-6) 0;color:var(--d2-muted);font-size:var(--text-sm)}@media(max-width:1350px){.dpe-dark-nav,.dpe-dark-hero,.dpe-dark-section,.dpe-dark-facts,.dpe-dark-footer{margin-inline:var(--space-6)}.dpe-dark h1{font-size:clamp(var(--d2-title-mobile),5.5vw,var(--d2-display))}.dpe-dark-nav-label{display:none}.dpe-dark-node small{white-space:normal}}@media(max-width:750px){.dpe-dark-nav,.dpe-dark-hero,.dpe-dark-section,.dpe-dark-facts,.dpe-dark-footer{margin-inline:var(--space-5)}.dpe-dark-nav{justify-content:space-between}.dpe-dark-nav nav{display:none}.dpe-dark-hero,.dpe-dark-section-head,.dpe-dark-usecases,.dpe-dark-start,.dpe-dark-runtime-grid,.dpe-dark-features{grid-template-columns:1fr;gap:var(--space-6)}.dpe-dark h1{font-size:var(--d2-title-mobile)}.dpe-dark h2{font-size:var(--mobile-heading)}.dpe-dark-lead{max-width:100%}.dpe-dark-map{height:var(--d2-map);margin-bottom:var(--space-7)}.dpe-dark-node{width:44%}.dpe-dark-n3{left:24%}.dpe-dark-n4{left:76%}.dpe-dark-node-top{font-size:var(--text-xs)}.dpe-dark-map-title{flex-direction:column;font-size:var(--text-xs)}.dpe-dark-n1{top:13%}.dpe-dark-map-foot{font-size:var(--text-xs);gap:var(--space-1)}.dpe-dark-facts{grid-template-columns:1fr 1fr}.dpe-dark-facts div{align-items:start;flex-direction:column;gap:var(--space-1)}.dpe-dark-section{padding:var(--space-7) 0}.dpe-dark-section-head>p{max-width:100%}.dpe-dark-shot-bar{flex-direction:column;gap:var(--space-2)}.dpe-dark-footer{flex-direction:column;gap:var(--space-3)}}@media(max-width:750px){.dpe-dark-n1{top:8%}.dpe-dark-n3{left:24%}.dpe-dark-n4{left:76%}.dpe-dark-map-title>span:last-child{display:none}.dpe-dark-node small{white-space:nowrap}}
.dpe-dark-wires-mobile{display:none}
.dpe-dark-tracks{fill:none;stroke:var(--d2-wire);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dpe-dark-packets{fill:none;stroke:var(--d2-cyan);stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 var(--space-2) var(--d2-cyan))}
.dpe-dark-packet{stroke-dasharray:2 98;animation:dpe-dark-transmit 6s linear infinite}
.dpe-dark-packet-right{animation-delay:-3s}
.dpe-dark-node::before,.dpe-dark-node::after{content:"";position:absolute;left:50%;width:var(--space-2);height:var(--space-2);border:var(--d2-one) solid var(--d2-node-border);background:var(--d2-panel);border-radius:50%;transform:translate(-50%,-50%)}
.dpe-dark-node::before{top:0}
.dpe-dark-node::after{top:100%}
.dpe-dark-node-top i{background:var(--d2-green)}
@keyframes dpe-dark-transmit{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(max-width:750px){.dpe-dark-wires-desktop{display:none}.dpe-dark-wires-mobile{display:block}}
@media(prefers-reduced-motion:reduce){.dpe-dark-packet{animation:none;stroke-dasharray:none;opacity:.25}}

.dpe-dark-packet-left{animation-delay:-1.5s}
.dpe-dark-packet-right{animation-delay:-4.5s}

.dpe-dark-n2::after{display:none}
.dpe-dark-route-ports{position:absolute;inset:0;pointer-events:none}
.dpe-dark-route-ports::before,.dpe-dark-route-ports::after{content:"";position:absolute;top:50%;width:var(--space-2);height:var(--space-2);border:var(--d2-one) solid var(--d2-node-border);background:var(--d2-panel);border-radius:50%;transform:translate(-50%,-50%)}
.dpe-dark-route-ports::before{left:0}
.dpe-dark-route-ports::after{left:100%}

/* 4. Site-only additions -------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.dpe-dark section[id] { scroll-margin-top: var(--space-5); }

.dpe-dark a { transition: color 0.15s, border-color 0.15s, filter 0.15s; }
.dpe-dark-nav nav a:hover,
.dpe-dark-secondary:hover,
.dpe-dark-footer a:hover { color: var(--d2-cyan); }
.dpe-dark-link:hover { border-color: var(--d2-node-border); color: var(--d2-cyan); }
.dpe-dark-primary:hover { filter: brightness(1.1); }
.dpe-dark-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.dpe-dark a:focus-visible {
  outline: 2px solid var(--d2-cyan);
  outline-offset: 3px;
  border-radius: var(--d2-radius);
}

.dpe-dark-screenshot { margin: 0; }
.dpe-dark-screenshot img { height: auto; }
.dpe-dark-footer nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }

.dpe-skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--d2-cyan);
  color: var(--d2-bg);
  border-radius: var(--d2-radius);
  font-size: var(--text-sm);
  font-weight: 700;
}
.dpe-skip:focus { top: var(--space-4); }

/* The design drops the whole nav below 750px, which leaves no way to reach
   the docs from the header on a phone. Keep the docs link; drop the rest. */
.dpe-dark-nav-group { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.dpe-dark-nav-group nav { margin-left: 0; }
@media (max-width: 750px) {
  .dpe-dark-nav-group nav { display: flex; }
  .dpe-dark-nav-group nav a:not(.dpe-nav-docs) { display: none; }
}

/* 404 page */
.dpe-notfound {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dpe-notfound p:not(.dpe-dark-eyebrow) { color: var(--d2-muted); font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-6); }
.dpe-notfound .dpe-dark-primary { align-self: flex-start; }