:root{color-scheme:dark;--color-navy:#080e29;--color-pink:#ff279c;--color-surface:#0d1633;--color-text:#f5f6fc;--color-muted:#a7b2cd;--color-border:#263250;--font-sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"SFMono-Regular",Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--color-navy);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a,button,input{outline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--color-pink)}button,input{font:inherit}.shell{width:min(1180px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;top:-80px;left:16px;padding:12px;background:var(--color-pink);color:var(--color-navy);z-index:3}.skip:focus{top:12px}.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border)}.brand{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:750;letter-spacing:-1px}.brand span{font-weight:400;color:var(--color-muted);margin-left:-8px}.header nav{display:flex;align-items:center;gap:34px;font-size:14px}.header nav>a:first-child{color:var(--color-muted)}.nav-connect span{color:var(--color-pink);padding-left:8px}.header a:hover,footer>a:last-child:hover{color:var(--color-pink)}.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:82px;padding-bottom:86px}.eyebrow{font-family:var(--font-mono);font-size:11px;line-height:1.7;letter-spacing:1.6px;text-transform:uppercase;color:var(--color-muted);margin:0 0 24px}.hero .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow>span{width:6px;height:6px;background:var(--color-pink);display:block}.hero h1{font-size:clamp(48px,5.6vw,76px);font-weight:600;line-height:1.04;letter-spacing:-3.8px;margin:0 0 27px}.hero h1 em{font-style:normal;color:var(--color-pink)}.intro{font-size:17px;line-height:1.8;color:var(--color-muted);max-width:425px;margin-bottom:32px}.button{display:inline-flex;gap:38px;align-items:center;background:var(--color-pink);color:var(--color-navy);font-size:14px;font-weight:750;padding:17px 22px;border-radius:4px;transition:background .15s,transform .15s}.button:hover{background:#ff5bb4;transform:translateY(-2px)}.button span{font-size:21px;font-weight:400}.quiet{color:var(--color-muted)}.hero-note{font-size:11px;margin-top:19px}.graph-panel{margin:25px 0 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;overflow:hidden;transform:rotate(-1.5deg)}.panel-label{display:flex;align-items:center;gap:9px;padding:19px 20px;border-bottom:1px solid var(--color-border);font-size:12px;color:var(--color-muted)}.tiny-mark{color:var(--color-pink);font-size:17px}.sample{margin-left:auto;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:1px}.graph{width:100%;height:auto;display:block}.node rect{fill:#101c3d;stroke:#405079}.node circle{fill:#9eafcf}.node text{fill:#ecf1ff;font-family:var(--font-mono);font-size:15px}.node.selected rect{fill:#281331;stroke:var(--color-pink)}.node.selected circle{fill:var(--color-pink)}.node.selected text{fill:#ff9bce}.edge-label{fill:#a7b2cd;font:10px var(--font-mono)}.legend text{fill:#a7b2cd;font:10px var(--font-mono)}figcaption{display:flex;align-items:center;gap:15px;padding:21px 23px;background:#111c3c;border-top:1px solid var(--color-border)}.code-icon{font:22px var(--font-mono);color:var(--color-pink)}figcaption strong{display:block;font-size:12px;font-weight:550}figcaption div>span{display:block;font-size:11px;color:var(--color-muted);margin-top:6px}.caption-arrow{margin-left:auto;color:var(--color-pink);font-size:24px}.workflow{border-top:1px solid var(--color-border);padding-block:60px 70px}.section-heading .eyebrow{margin-bottom:13px}h2{font-size:34px;letter-spacing:-1.2px;font-weight:550;margin:0;line-height:1.2}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px}.steps article+article{border-left:1px solid var(--color-border);padding-left:34px}.step-number{font:10px var(--font-mono);letter-spacing:1.3px;color:var(--color-pink)}h3{font-size:17px;line-height:1.5;font-weight:550;margin:19px 0 12px}.steps p,.connect p{color:var(--color-muted);font-size:14px;line-height:1.8;margin:0}.connect{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-block:1px solid var(--color-border);padding-block:52px;align-items:center}.connect .eyebrow{font-size:10px;margin-bottom:12px}.connect h2{margin-bottom:17px}.connection-details label{font:10px var(--font-mono);letter-spacing:1.2px;color:var(--color-muted)}.endpoint-row{display:flex;border:1px solid #405079;border-radius:4px;margin:12px 0;overflow:hidden;background:var(--color-surface)}.endpoint-row input{width:100%;min-width:0;padding:16px 13px;border:0;background:transparent;color:var(--color-text);font:12px var(--font-mono)}.endpoint-row button{border:0;border-left:1px solid #405079;background:var(--color-surface);color:var(--color-pink);padding:0 18px;cursor:pointer;font-size:12px;white-space:nowrap}.endpoint-row button:hover{background:#1c2848}.endpoint-row button span{margin-left:9px}.connection-details p{font-size:11px;line-height:1.7}.connection-details #copy-status{color:var(--color-pink);min-height:18px;margin-top:7px}.evidence-note{display:flex;gap:18px;padding-block:26px 42px;align-items:flex-start;color:var(--color-muted)}.evidence-note>span{color:var(--color-pink);font-size:20px}.evidence-note p{font-size:11px;line-height:1.8;margin:1px 0 0;max-width:760px}footer{display:flex;align-items:center;padding-block:25px 34px;border-top:1px solid var(--color-border);gap:30px}.footer-brand{font-size:17px}footer p{font-size:11px;color:var(--color-muted)}footer>a:last-child{font-size:11px;margin-left:auto}footer>a:last-child span{color:var(--color-pink);margin-left:5px}
@media(min-width:1450px){.hero{padding-top:100px;padding-bottom:110px}.hero h1{font-size:80px}}
@media(max-width:900px){.shell{width:calc(100% - 48px)}.hero{gap:25px;padding-block:60px}.hero h1{font-size:57px}.intro{font-size:15px}.graph-panel{transform:none}h2{font-size:28px}.steps{gap:22px}.steps article+article{padding-left:20px}.connect{gap:24px}.desktop-break{display:none}}
@media(max-width:650px){.shell{width:calc(100% - 36px)}.header{height:83px}.brand{font-size:19px}.brand img{width:26px;height:26px}.header nav{gap:0}.header nav>a:first-child{display:none}.nav-connect{font-size:11px}.hero{grid-template-columns:1fr;gap:25px;padding-block:48px}.hero h1{font-size:64px;letter-spacing:-3.5px}.intro{max-width:440px;font-size:16px}.hero .eyebrow{font-size:10px}.graph-panel{max-width:500px;width:100%;margin:12px auto 0}.workflow{padding-block:39px}.steps{grid-template-columns:1fr;gap:26px;margin-top:34px}.steps article+article{padding-left:0;padding-top:25px;border-left:0;border-top:1px solid var(--color-border)}.steps h3{margin:12px 0 7px}.connect{grid-template-columns:1fr;padding-block:35px;gap:28px}.endpoint-row input{font-size:11px;padding-inline:10px}.endpoint-row button{padding-inline:12px}.evidence-note{padding-bottom:28px}footer{gap:15px;flex-wrap:wrap}footer p{order:3;width:100%;margin:0}h2{font-size:28px}.panel-label{font-size:11px}}
[hidden]{display:none!important}
.graph-panel{transform:none;box-shadow:0 20px 70px #02061666}
.graph-stage{position:relative;aspect-ratio:550/460;background:radial-gradient(ellipse at 55% 45%,#182447 0%,#0d1633 65%);overflow:hidden}
.graph-stage>.graph{width:100%;height:100%;object-fit:contain}
.graph-canvas{cursor:grab;touch-action:pan-y}
.graph-canvas.is-dragging{cursor:grabbing}
.graph-canvas:focus-visible{outline:2px solid var(--color-pink);outline-offset:-4px}
.graph-toolbar{display:flex;align-items:center;gap:8px;min-height:57px;padding:8px 15px;border-top:1px solid #26325088}
.graph-toolbar>span{font:10px/1.6 var(--font-mono);color:var(--color-muted);margin-right:auto;max-width:68%}
.graph-toolbar button{flex-shrink:0;min-height:34px;padding:6px 10px;border:1px solid #405079;border-radius:4px;background:#101c3d;color:var(--color-text);font-size:11px;cursor:pointer}
.graph-toolbar button:hover{border-color:var(--color-pink);color:var(--color-pink)}
@media(max-width:400px){.graph-toolbar{gap:6px;padding-inline:10px}.graph-toolbar>span{font-size:9px}.graph-toolbar button{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

.brand-block{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.build-number{align-self:flex-end;color:var(--color-muted);font:500 10px/1 var(--font-mono);letter-spacing:.05em}.build-number[hidden]{display:none}
.hero h1 em{font-style:italic}
.code-icon{white-space:nowrap;flex-shrink:0}
@media(max-width:650px){.header nav{gap:12px}}
@media(max-width:400px){.header .nav-connect{display:none}}

.footer-identity{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.maker-credit{display:inline-flex;align-items:center;gap:7px;min-height:36px;white-space:nowrap;color:var(--color-muted);font-size:12px}
.maker-credit img{display:block;flex-shrink:0}
.maker-credit strong{color:var(--color-text);font-size:14px;font-weight:650;letter-spacing:-.3px}
.maker-credit:hover,.maker-credit:hover strong{color:var(--color-pink)}
.graph-site-footer{width:min(1932px,calc(100% - 68px))}
@media(max-width:850px){.site-footer{flex-wrap:wrap;gap:16px 24px}.site-footer p{order:3;width:100%;margin:0}}
@media(max-width:650px){.footer-identity{gap:12px}.maker-credit{gap:5px;font-size:11px}.maker-credit img{width:24px;height:24px}.maker-credit strong{font-size:13px}.graph-site-footer{width:calc(100% - 28px)}}
@media(max-width:400px){.site-footer{column-gap:12px}.footer-identity{flex-direction:column;align-items:flex-start;gap:4px}}

/* Shared control geometry. Feature styles own layout, not dropdown indicators. */
:root {
  --color-control: #101A34;
  --color-control-border: #405079;
  --control-radius: 6px;
  --control-height: 40px;
  --control-padding-inline: 12px;
  --chevron-size: 16px;
  --chevron-inset: 12px;
  --chevron-gap: 8px;
  --select-padding-end: calc(var(--chevron-inset) + var(--chevron-size) + var(--chevron-gap));
}
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-pink);
  outline-offset: 3px;
}
select:not([multiple]):not([size]),
select:not([multiple]):is([size="0"], [size="1"]) {
  appearance: none;
  color-scheme: dark;
  min-height: var(--control-height);
  border: 1px solid var(--color-control-border);
  border-radius: var(--control-radius);
  padding: 10px var(--select-padding-end) 10px var(--control-padding-inline);
  font: 12px/1.4 var(--font-sans);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  background-color: var(--color-control);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f6fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right var(--chevron-inset) center;
  background-size: var(--chevron-size) var(--chevron-size);
  background-repeat: no-repeat;
  cursor: pointer;
}
select:not(:disabled):hover { border-color: var(--color-muted); }
select:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width:650px), (pointer:coarse) {
  :root { --control-height: 44px; }
}
@media (forced-colors:active) {
  select:not([multiple]):not([size]),
  select:not([multiple]):is([size="0"], [size="1"]) {
    appearance: auto;
    background-image: none;
  }
}