:root {
  color-scheme: light;
  --paper: #fafbf9;
  --white: #fff;
  --ink: #101820;
  --body: #39454d;
  --muted: #65727a;
  --quiet: #879197;
  --line: #dfe4e1;
  --line-strong: #cbd3cf;
  --blue: #1559c7;
  --blue-soft: #e9f0fb;
  --green: #14784f;
  --dot-pink: #eb4e78;
  --dot-orange: #ed813d;
  --dot-yellow: #eabb36;
  --dot-green: #21a870;
  --dot-cyan: #18a9c2;
  --dot-blue: #326fe0;
  --dot-violet: #8955c5;
  --sans: "Manrope", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1240px;
  --gutter: clamp(22px, 5vw, 72px);
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { min-width: 320px; margin: 0; background: var(--paper); }
body, button, a { font-family: var(--sans); }
button { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--ink); background: #cce4ff; }
:focus-visible { outline: 3px solid #135cc7; outline-offset: 4px; }
.wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 12px; padding: 12px 16px; transform: translateY(-150%); color: #fff; background: var(--ink); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

/* Navigation */
.topbar { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid transparent; background: rgb(250 251 249 / 94%); transition: border-color .2s ease, background-color .2s ease; }
.topbar.is-scrolled { border-color: var(--line); background: rgb(250 251 249 / 97%); }
@supports (backdrop-filter: blur(10px)) { .topbar { backdrop-filter: blur(10px); } }
.topbar-inner { min-height: 76px; display: flex; align-items: center; gap: 34px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -.075em; }
.wordmark img { width: 34px; height: 34px; object-fit: contain; }
.wordmark-suffix { color: var(--quiet); font-weight: 500; }
.desktop-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 38px); margin-left: auto; }
.desktop-nav a, .footer-inner nav a { min-height: 44px; display: inline-flex; align-items: center; color: #536068; text-decoration: none; font-size: 12px; font-weight: 600; transition: color .18s ease; }
.desktop-nav a:hover, .footer-inner nav a:hover { color: var(--blue); }
.nav-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 17px; border: 1px solid var(--ink); color: #fff; background: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.nav-cta:hover { color: var(--ink); background: transparent; }
.nav-cta span, .button span, .text-link span { display: inline-block; transition: transform .18s ease; }
.nav-cta:hover span, .button:hover span, .text-link:hover span { transform: translate(2px, -2px); }
.mobile-menu-toggle, .mobile-menu { display: none; }

/* Controls */
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 19px; border: 1px solid transparent; text-decoration: none; font-size: 13px; font-weight: 700; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.button:active, .nav-cta:active { transform: translateY(1px); }
.button-primary { color: #fff; background: var(--ink); border-color: var(--ink); }
.button-primary:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.button-secondary { color: var(--ink); background: transparent; border-color: var(--line-strong); }
.button-secondary:hover { background: #fff; border-color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: 12px; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Home / editorial hero */
.hero { overflow: hidden; padding: 66px 0 0; }
.hero-inner { position: relative; }
.eyebrow { margin: 0; color: #627078; font-size: 11px; font-weight: 700; letter-spacing: .055em; }
.hero-eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 31px; }
.eyebrow-mark { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: var(--dot-blue); box-shadow: 10px 0 0 var(--dot-cyan), 20px 0 0 var(--dot-green); margin-right: 20px; }
.hero-heading-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); align-items: end; gap: 50px; }
.hero h1 { max-width: 900px; margin: 0; font-size: clamp(62px, 8.25vw, 118px); line-height: .91; letter-spacing: -.092em; font-weight: 700; }
.hero-aside { max-width: 370px; padding: 0 0 7px; }
.hero-aside>p { margin: 0 0 22px; color: var(--body); font-size: 15px; line-height: 1.68; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-thesis { margin: clamp(42px, 6vw, 70px) 0 0; font-size: clamp(18px, 2.4vw, 25px); letter-spacing: -.045em; }
.hero-thesis strong { font-weight: 700; }
.hero-figure { margin: 15px 0 0; }
.hero-field-wrap { position: relative; height: clamp(260px, 37vw, 438px); isolation: isolate; overflow: hidden; }
.hero-field-wrap::before { position: absolute; z-index: -1; inset: 7% 7% 10%; content: ""; opacity: .26; background-image: radial-gradient(circle, var(--dot-blue) 1.3px, transparent 1.6px), radial-gradient(circle, var(--dot-cyan) 1.3px, transparent 1.6px), radial-gradient(circle, var(--dot-green) 1.3px, transparent 1.6px), radial-gradient(circle, var(--dot-yellow) 1.3px, transparent 1.6px), radial-gradient(circle, var(--dot-orange) 1.3px, transparent 1.6px), radial-gradient(circle, var(--dot-pink) 1.3px, transparent 1.6px), radial-gradient(circle, var(--dot-violet) 1.3px, transparent 1.6px); background-size: 30px 30px; background-position: 0 0, 5px 5px, 10px 10px, 15px 15px, 20px 20px, 25px 25px, 30px 30px; mask-image: radial-gradient(ellipse at 50% 53%, #000 8%, transparent 72%); }
.hero-field-wrap.has-dot-svg::before { opacity: 0; }
.dot-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dot-svg .sample-dot { transform-box: fill-box; transform-origin: center; transition: transform .22s ease, opacity .2s ease; }
.dot-svg .sample-dot.is-near { transform: scale(1.8); }
.dot-svg .ghost-dot { opacity: .2; }
.dot-svg .change-mark { opacity: 0; transition: opacity .2s ease; }
[data-dot-mode="compare"] .dot-svg .change-mark, [data-dot-mode="verify"] .dot-svg .change-mark { opacity: 1; }
.hero-field-wrap .dot-svg circle { transition: transform .65s cubic-bezier(.2,.75,.18,1), opacity .35s ease; }
.hero-field-wrap.is-settling .dot-svg .sample-dot { transform: translate(var(--offset-x), var(--offset-y)); opacity: .35; animation: dot-align .9s cubic-bezier(.2,.75,.18,1) both; animation-delay: calc(var(--dot-index) * 1.2ms); }
@keyframes dot-align { to { transform: translate(0, 0); opacity: var(--dot-opacity, .92); } }
.field-axis { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; color: #647178; font: 9px var(--mono); }
.field-axis i { width: 3px; height: 3px; display: block; background: #7d8990; }
.field-axis-x { right: 9%; bottom: 9%; left: 9%; justify-content: space-between; border-top: 1px solid #9caaa9; padding-top: 8px; }
.field-axis-y { top: 12%; bottom: 15%; left: 5%; flex-direction: column; justify-content: space-between; border-left: 1px solid #9caaa9; padding-left: 7px; }
.field-measure { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; color: var(--blue); font: 10px var(--mono); }
.field-measure-a { top: 29%; left: 25%; }
.field-measure-b { right: 22%; bottom: 27%; flex-direction: column; gap: 2px; }
.field-cross { font-size: 17px; line-height: 1; }
.field-rule { width: clamp(38px, 7vw, 95px); height: 1px; background: var(--blue); transform-origin: left center; animation: rule-draw .8s .35s ease-out both; }
.field-measure-b .field-rule { width: 1px; height: clamp(28px, 5vw, 62px); transform-origin: center top; }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.field-label { position: absolute; top: -21px; left: 19px; white-space: nowrap; }
.field-measure-b .field-label { top: auto; left: 12px; }
.field-selection { position: absolute; z-index: 1; top: 24%; left: 35%; width: 31%; height: 49%; border: 1px solid rgb(21 89 199 / 60%); opacity: .88; }
.field-selection::before, .field-selection::after { position: absolute; content: ""; background: var(--blue); }
.field-selection::before { top: 50%; right: 0; left: 0; height: 1px; opacity: .3; }
.field-selection::after { top: 0; bottom: 0; left: 50%; width: 1px; opacity: .3; }
.selection-corner { position: absolute; z-index: 1; width: 7px; height: 7px; border-color: var(--blue); border-style: solid; }
.corner-one { top: -1px; left: -1px; border-width: 2px 0 0 2px; }.corner-two { top: -1px; right: -1px; border-width: 2px 2px 0 0; }.corner-three { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }.corner-four { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.selection-label { position: absolute; top: -21px; left: -1px; color: var(--blue); font: 8px var(--mono); letter-spacing: .04em; }
.pixel-readout { position: absolute; z-index: 3; top: 26%; right: 4%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line-strong); background: rgb(250 251 249 / 93%); }
.readout-swatch { width: 19px; height: 19px; background: #1463f3; border: 1px solid rgb(0 0 0 / 10%); }
.pixel-readout span:last-child { display: grid; gap: 3px; }
.pixel-readout small { color: var(--muted); font: 7px var(--mono); letter-spacing: .06em; }
.pixel-readout code, .field-origin, .field-dimensions { color: var(--ink); font: 10px var(--mono); }
.field-origin, .field-dimensions { position: absolute; z-index: 2; bottom: 13%; color: #47555d; font-size: 9px; }
.field-origin { left: 10%; }.field-dimensions { right: 10%; }
.field-crosshair { position: absolute; z-index: 4; top: 45%; left: 48%; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; background: rgb(250 251 249 / 40%); box-shadow: 0 0 0 5px rgb(21 89 199 / 9%); animation: crosshair-in .55s .5s cubic-bezier(.18,.8,.32,1.2) both; }
.field-crosshair.is-following { top: var(--pointer-y,45%); left: var(--pointer-x,48%); transform: translate(-50%,-50%); animation:none; }
.field-crosshair::before, .field-crosshair::after { position: absolute; content: ""; background: var(--blue); }
.field-crosshair::before { width: 42px; height: 1px; }.field-crosshair::after { width: 1px; height: 42px; }
.field-crosshair i { z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }
.field-crosshair b { position: absolute; inset: -3px; border: 1px solid rgb(21 89 199 / 30%); border-radius: 50%; }
@keyframes crosshair-in { from { opacity: 0; transform: translate(13px, -10px) scale(.65); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
.hero-figure figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.hero-sequence { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 38px); border-bottom: 1px solid var(--line); color: #68757c; font-size: 10px; }
.sequence-chaos { width: 52px; height: 22px; position: relative; display: inline-block; }
.sequence-chaos b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--dot-pink); }.sequence-chaos b:nth-child(1){top:2px;left:4px}.sequence-chaos b:nth-child(2){top:14px;left:18px;background:var(--dot-yellow)}.sequence-chaos b:nth-child(3){top:3px;left:31px;background:var(--dot-cyan)}.sequence-chaos b:nth-child(4){top:13px;left:44px;background:var(--dot-violet)}.sequence-chaos b:nth-child(5){top:8px;left:25px;background:var(--dot-green)}
.sequence-measure { width: 47px; height: 20px; display: inline-block; border: 1px solid var(--blue); position: relative; }.sequence-measure::before,.sequence-measure::after{position:absolute;content:"";background:var(--blue)}.sequence-measure::before{top:50%;left:-6px;width:57px;height:1px;opacity:.45}.sequence-measure::after{top:-5px;left:50%;width:1px;height:28px;opacity:.45}

/* Sections and shared editorial layout */
.section-space { padding-block: clamp(88px, 12vw, 164px); }
.handoff { border-top: 1px solid var(--line); background: #f2f5f2; }
.section-intro { max-width: 720px; }
.section-intro .eyebrow, .tools-heading .eyebrow { margin-bottom: 22px; }
.section-intro h2, .tools-heading h2, .validation-intro h2 { margin: 0; font-size: clamp(42px, 6.2vw, 80px); line-height: .99; letter-spacing: -.075em; font-weight: 650; }
.section-intro h2 span { color: #3c596c; }
.section-intro>p:last-child, .tools-heading>p:last-child { max-width: 570px; margin: 24px 0 0; color: var(--body); font-size: 15px; line-height: 1.75; }
.handoff-intro { max-width: 790px; }
.handoff-visual { height: clamp(185px, 26vw, 280px); position: relative; margin-top: 54px; border-block: 1px solid var(--line-strong); overflow: hidden; }
.handoff-visual::before { position:absolute;inset:0;content:"";opacity:.25;background:linear-gradient(to right,transparent 49.9%,#aab7b4 50%,transparent 50.1%),linear-gradient(to bottom,transparent 49.9%,#aab7b4 50%,transparent 50.1%);background-size:80px 80px;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); }
.handoff-track { position: absolute; right: 3%; bottom: 17px; left: 3%; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #59666d; font: 9px var(--mono); }
.handoff-track span { padding: 6px 8px; background: var(--paper); }
.handoff-track i { height: 1px; flex: 1; background: #9ca9a7; }
.handoff-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 26px; }
.handoff-notes p { display: grid; grid-template-columns: 36px 1fr; column-gap: 11px; row-gap: 6px; margin: 0; }
.handoff-notes .note-index { grid-row: span 2; color: var(--blue); font: 10px var(--mono); }
.handoff-notes strong { font-size: 13px; }.handoff-notes p>span:last-child{max-width:270px;color:var(--muted);font-size:12px;line-height:1.6}
.tools-section { background: var(--white); border-block: 1px solid var(--line); }
.tools-heading { display: grid; grid-template-columns: 1fr minmax(270px,.7fr); column-gap: 48px; align-items: end; margin-bottom: 64px; }
.tools-heading .eyebrow { grid-column: 1/-1; }.tools-heading h2 { grid-column: 1; }.tools-heading>p:last-child { grid-column: 2; grid-row: 2; margin: 0 0 6px; }
.tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: clamp(34px,7vw,95px); }
.tool-item { min-width: 0; display: grid; grid-template-columns: minmax(145px,.72fr) minmax(0,1.28fr); align-items: center; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.tool-item:nth-child(5) { grid-column: 1/-1; grid-template-columns: minmax(240px,.72fr) minmax(0,1.28fr); }
.tool-copy { align-self: center; }
.tool-index { color: var(--blue); font: 10px var(--mono); }
.tool-copy h3 { margin: 12px 0 9px; font-size: 20px; letter-spacing: -.05em; }
.tool-copy h3 code { font: 600 19px var(--mono); letter-spacing: -.07em; }
.tool-copy p { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.tool-visual { min-width: 0; height: 178px; position: relative; isolation: isolate; margin: 0; overflow: hidden; background: #f7f8f6; }
.tool-visual::before { position: absolute; z-index: -1; inset: 12% 8%; content: ""; opacity: .35; background-image: radial-gradient(circle,#3280c9 1.5px,transparent 1.8px),radial-gradient(circle,#26aa88 1.5px,transparent 1.8px),radial-gradient(circle,#e6aa37 1.5px,transparent 1.8px),radial-gradient(circle,#df6680 1.5px,transparent 1.8px),radial-gradient(circle,#8269c8 1.5px,transparent 1.8px);background-size:24px 24px;background-position:0 0,5px 5px,10px 10px,15px 15px,20px 20px;mask-image:radial-gradient(ellipse,#000 4%,transparent 75%); }
.tool-visual.has-dot-svg::before { opacity: 0; }
.tool-visual .dot-svg { opacity: .96; }
.diagram-bound { position:absolute;top:28%;left:24%;width:51%;height:43%;border:1px solid var(--blue); }
.diagram-bound::before,.diagram-bound::after {position:absolute;content:"";background:var(--blue);opacity:.42}.diagram-bound::before{top:50%;right:0;left:0;height:1px}.diagram-bound::after{top:0;bottom:0;left:50%;width:1px}
.diagram-width,.diagram-height,.diagram-crop-label { position:absolute;color:var(--blue);font:9px var(--mono); }.diagram-width{top:19%;left:42%}.diagram-height{top:44%;right:12%;writing-mode:vertical-rl}
.diagram-sampler { position:absolute;top:44%;left:54%;width:27px;height:27px;border:1px solid var(--blue);border-radius:50%;box-shadow:0 0 0 5px rgb(21 89 199 / 12%); }.diagram-sampler::before,.diagram-sampler::after{position:absolute;content:"";background:var(--blue)}.diagram-sampler::before{top:50%;left:-8px;width:41px;height:1px}.diagram-sampler::after{top:-8px;left:50%;width:1px;height:41px}
.diagram-color { position:absolute;right:7%;bottom:15%;display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid var(--line-strong);background:var(--white);color:var(--ink);font:8px var(--mono) }.diagram-color i { width:11px;height:11px;background:#1463f3; }
.diagram-crop { position:absolute;top:22%;left:31%;width:43%;height:55%;border:1px solid var(--blue); }.diagram-crop b{position:absolute;width:6px;height:6px;border:1px solid var(--blue);background:var(--paper)}.diagram-crop b:nth-child(1){top:-3px;left:-3px}.diagram-crop b:nth-child(2){top:-3px;right:-3px}.diagram-crop b:nth-child(3){right:-3px;bottom:-3px}.diagram-crop b:nth-child(4){bottom:-3px;left:-3px}.diagram-crop-label{top:12%;left:31%;}
.diagram-compare { position:absolute;top:0;right:0;bottom:0;left:50%;border-left:1px dashed #687c96; }.diagram-compare i {position:absolute;top:32%;left:24%;width:27%;height:32%;border:1px solid var(--blue)}.diagram-compare i:first-child{transform:translate(-7px,-5px);border-color:#e85d79;opacity:.85}.diagram-compare b {position:absolute;right:8%;bottom:13%;padding:5px 6px;background:white;border:1px solid var(--line);color:var(--blue);font:8px var(--mono)}
.diagram-before {position:absolute;top:29%;left:34%;width:23%;height:33%;border:1px dashed #e27964;transform:translate(7px,5px)}.diagram-verify-state{position:absolute;right:6%;bottom:10%;display:flex;align-items:center;gap:6px;color:var(--green);background:var(--white);padding:5px 7px;font-size:8px}.diagram-verify-state i{font-style:normal}
.diagram-verify-state code{color:#59666d;font:7px var(--mono);white-space:nowrap}.dot-svg .ghost-dot{transform-box:fill-box;transform-origin:center}
.diagram-bound,.diagram-width,.diagram-height,.diagram-sampler,.diagram-color,.diagram-crop,.diagram-crop-label,.diagram-compare,.diagram-before,.diagram-verify-state{transition:opacity .3s ease,transform .42s cubic-bezier(.2,.75,.18,1)}
.js-ready .tool-item:not(.is-visible) .diagram-bound,.js-ready .tool-item:not(.is-visible) .diagram-width,.js-ready .tool-item:not(.is-visible) .diagram-height,.js-ready .tool-item:not(.is-visible) .diagram-sampler,.js-ready .tool-item:not(.is-visible) .diagram-color,.js-ready .tool-item:not(.is-visible) .diagram-crop,.js-ready .tool-item:not(.is-visible) .diagram-crop-label,.js-ready .tool-item:not(.is-visible) .diagram-compare,.js-ready .tool-item:not(.is-visible) .diagram-before,.js-ready .tool-item:not(.is-visible) .diagram-verify-state{opacity:0;transform:translateY(5px)}
.tool-item.is-visible .diagram-bound,.tool-item.is-visible .diagram-width,.tool-item.is-visible .diagram-height,.tool-item.is-visible .diagram-sampler,.tool-item.is-visible .diagram-color,.tool-item.is-visible .diagram-crop,.tool-item.is-visible .diagram-crop-label,.tool-item.is-visible .diagram-compare,.tool-item.is-visible .diagram-before,.tool-item.is-visible .diagram-verify-state{opacity:1;transform:translateY(0)}
.tool-item.is-visible [data-dot-system="measure"] .diagram-bound{animation:measure-frame .48s cubic-bezier(.2,.75,.18,1) both}
.tool-item.is-visible [data-dot-system="sample"] .diagram-sampler{animation:sample-pixel .54s cubic-bezier(.2,.75,.18,1) both}
.tool-item.is-visible [data-dot-system="crop"] .diagram-crop{animation:crop-select .5s cubic-bezier(.2,.75,.18,1) both}
.tool-item.is-visible [data-dot-system="verify"] .ghost-dot{animation:verify-align .72s cubic-bezier(.2,.75,.18,1) both;animation-delay:calc(var(--ghost-index)*.18ms)}
@keyframes measure-frame{from{opacity:0;transform:scale(.94);transform-origin:center}to{opacity:1;transform:scale(1)}}
@keyframes sample-pixel{from{opacity:0;transform:translate(-15px,9px) scale(.75)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes crop-select{from{opacity:.2;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes verify-align{from{opacity:.42;transform:translate(-5px,3px)}70%{opacity:.24;transform:translate(0,0)}to{opacity:0;transform:translate(0,0)}}
.capabilities-section { background: #f4f6f3; }
.capability-layout { display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:clamp(55px,10vw,145px);align-items:start; }
.capability-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px; }
.capability-list span { min-height:60px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line-strong);color:#3d4950;font-size:13px;line-height:1.5; }
.capability-list span::before { width:7px;height:7px;flex:none;border-radius:50%;content:"";background:var(--dot-blue);box-shadow:8px 0 0 rgb(24 169 194 / 75%);margin-right:6px; }
.capability-list span:nth-child(3n+2)::before { background:var(--dot-green);box-shadow:8px 0 0 rgb(234 187 54 / 75%); }
.capability-list p { grid-column:1/-1;max-width:600px;margin:17px 0 0;color:var(--muted);font-size:11px;line-height:1.65; }

/* Validation is presented as two separate studies. */
.validation-section { background: var(--white);border-block:1px solid var(--line); }
.validation-layout { display:grid;grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr);gap:clamp(42px,8vw,110px);align-items:start; }
.validation-intro { position:sticky;top:115px; }
.validation-intro .eyebrow { margin-bottom:22px; }.validation-intro h2 { font-size:clamp(40px,5.1vw,66px); }
.validation-intro>p:not(.eyebrow) { max-width:345px;margin:22px 0;color:var(--muted);font-size:13px;line-height:1.7; }
.validation-intro .text-link { margin-top:8px; }
.validation-groups { display:grid;gap:28px; }
.validation-group { min-width:0;padding:20px 0 16px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line); }
.validation-group-head { display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px; }
.validation-group-head>div>span { color:#68757d;font:9px var(--mono);letter-spacing:.025em; }
.validation-group-head h3 { margin:7px 0 0;font-size:17px;letter-spacing:-.04em; }
.validation-group-head>a { min-height:36px;display:inline-flex;align-items:center;color:var(--blue);font-size:10px;font-weight:700;text-decoration:none;white-space:nowrap; }
.validation-group-head>a:hover { text-decoration:underline;text-underline-offset:4px; }
.metric-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
.metric-grid article { min-height:148px;display:flex;flex-direction:column;align-items:flex-start;padding:15px 16px 14px 0;border-top:1px solid var(--line);position:relative; }
.metric-grid article:nth-child(odd) { padding-right:15px; }.metric-grid article:nth-child(even) { padding-left:18px;border-left:1px solid var(--line); }
.metric-grid article::before { position:absolute;top:-2px;left:0;width:20px;height:2px;content:"";background:var(--dot-blue); }.metric-grid article:nth-child(2)::before{background:var(--dot-green)}.metric-grid article:nth-child(3)::before{background:var(--dot-orange)}.metric-grid article:nth-child(4)::before{background:var(--dot-violet)}
.metric-grid article strong { display:flex;align-items:baseline;gap:4px;font-size:35px;line-height:1;letter-spacing:-.08em;font-weight:650;font-variant-numeric:tabular-nums; }
.metric-grid article strong small { color:var(--muted);font:11px var(--mono);letter-spacing:0; }
.metric-grid article p { max-width:250px;margin:10px 0 7px;color:#39464e;font-size:11px;line-height:1.5; }
.metric-grid article>a { margin-top:auto;color:#64717a;font-size:9px;line-height:1.45;text-decoration:none; }.metric-grid article>a:hover{color:var(--blue);text-decoration:underline}
.cohort-caveat { margin:11px 0 0;color:#68757c;font-size:10px;line-height:1.65; }
.codex-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--line); }
.codex-metrics>div { min-height:106px;padding:12px 8px 10px 0; }.codex-metrics>div+div{padding-left:10px;border-left:1px solid var(--line)}
.codex-metrics strong { display:block;font-size:24px;line-height:1;letter-spacing:-.075em;font-weight:650;font-variant-numeric:tabular-nums; }
.codex-metrics span { display:block;margin-top:9px;color:#58656d;font-size:9px;line-height:1.45; }

/* Compatibility and preview */
.agents-section { background:#f2f5f2; }
.agent-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.65fr);gap:clamp(50px,10vw,150px);align-items:center; }
.agent-status { max-width:450px;padding:24px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong); }
.agent-badge { display:flex;align-items:center;gap:13px; }.agent-badge img{width:42px;height:42px}.agent-badge>span{display:grid;gap:3px}.agent-badge b{font-size:15px}.agent-badge small{color:var(--muted);font-size:10px}.agent-badge>i{width:27px;height:27px;display:grid;place-items:center;margin-left:auto;border:1px solid #a6c7b5;border-radius:50%;color:var(--green);font-style:normal;font-size:12px}
.agent-status>p { margin:17px 0 0;color:var(--muted);font-size:12px;line-height:1.7; }
.preview-cta { min-height:210px;position:relative;display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:26px;margin-block:100px 116px;padding:36px clamp(24px,5vw,64px);border-block:1px solid var(--line-strong);overflow:hidden; }
.preview-dots { width:64px;height:64px;position:relative;display:grid;grid-template-columns:repeat(3,9px);grid-template-rows:repeat(3,9px);place-content:center;gap:6px; }
.preview-dots i { width:9px;height:9px;border-radius:50%;background:var(--dot-blue); }.preview-dots i:nth-child(2),.preview-dots i:nth-child(6){background:var(--dot-cyan)}.preview-dots i:nth-child(3),.preview-dots i:nth-child(7){background:var(--dot-green)}.preview-dots i:nth-child(4){background:var(--dot-yellow)}.preview-dots i:nth-child(5){background:var(--dot-orange)}
.preview-cta .eyebrow { margin-bottom:8px; }.preview-cta h2{margin:0;font-size:clamp(25px,3vw,37px);letter-spacing:-.065em}.preview-cta>div:nth-child(2)>p:last-child{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.site-footer { border-top:1px solid var(--line); }
.footer-inner { min-height:106px;display:flex;align-items:center;gap:34px; }.footer-mark{font-size:15px}.footer-mark img{width:28px;height:28px}.footer-inner nav{display:flex;gap:clamp(13px,2.2vw,28px);margin-left:auto}.footer-inner nav a{font-size:10px}.footer-inner>p{margin:0;color:var(--muted);font-size:10px}

/* Reveal only after JavaScript has observed the section. */
.js-ready [data-reveal] { opacity:1;transform:none;transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.2,1); }
.js-ready [data-reveal].is-visible { opacity:1;transform:translateY(0); }
.js-ready [data-reveal="tool"] { transition-delay:calc(var(--reveal-index,0) * 55ms); }
.hero-eyebrow { animation:editorial-in .48s .04s both ease-out; }.hero h1{animation:editorial-in .58s .11s both cubic-bezier(.2,.7,.2,1)}.hero-aside{animation:editorial-in .5s .2s both ease-out}.hero-thesis{animation:editorial-in .45s .28s both ease-out}.hero-figure{animation:editorial-in .55s .25s both ease-out}
@keyframes editorial-in { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:translateY(0); } }

/* Shared docs shell: intentionally quieter than marketing. */
.doc-shell { width:min(1180px,calc(100% - var(--gutter) * 2));display:grid;grid-template-columns:210px minmax(0,760px);gap:clamp(50px,8vw,115px);align-items:start;padding-block:66px 112px; }
.doc-sidebar { position:sticky;top:108px;max-height:calc(100vh - 130px);overflow:auto;padding-right:18px;border-right:1px solid var(--line); }
.doc-sidebar h2 { margin:0 0 16px;color:#6c777d;font-size:9px;font-weight:700;letter-spacing:.07em; }
.doc-sidebar nav { display:grid;gap:2px; }
.doc-sidebar a { min-height:36px;display:flex;align-items:center;padding:7px 10px;color:#58646b;text-decoration:none;font-size:11px;line-height:1.4;transition:color .15s ease,background-color .15s ease; }
.doc-sidebar a:hover { color:var(--ink);background:#f0f3f0; }
.doc-sidebar a[aria-current="page"],.doc-sidebar a[aria-current="location"] { color:#164a8f;background:#edf3fb;font-weight:700; }
.doc-main { min-width:0; }.doc-main>.eyebrow { margin-bottom:15px;color:var(--blue);font-size:10px;letter-spacing:.055em; }
.doc-main h1 { max-width:760px;margin:0;font-size:clamp(42px,6vw,70px);line-height:1.02;letter-spacing:-.075em;font-weight:650; }
.doc-lede { max-width:710px;margin:20px 0 0;color:#4e5b62;font-size:16px;line-height:1.75; }
.doc-nav { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin-top:38px;border-top:1px solid var(--line-strong); }
.doc-nav a { min-width:0;min-height:96px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:17px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none; }
.doc-nav a:hover b { color:var(--blue); }
.doc-nav b { font-size:14px;line-height:1.35; }
.doc-nav a>span { max-width:32ch;color:#58646b;font-size:11px;line-height:1.55; }
.doc-content { max-width:720px;margin-top:46px;color:#354149;font-size:14px;line-height:1.8; }
.doc-content h2 { margin:42px 0 12px;color:var(--ink);font-size:25px;line-height:1.2;letter-spacing:-.055em;scroll-margin-top:105px; }
.doc-content h2:first-child { margin-top:0; }.doc-content h3{margin:27px 0 9px;color:var(--ink);font-size:17px;letter-spacing:-.035em;scroll-margin-top:105px}
.doc-content p { margin:12px 0; }.doc-content a{color:#1559ad;text-decoration-thickness:1px;text-underline-offset:3px}.doc-content a:hover{color:#0e3973}
.doc-content ul,.doc-content ol{padding-left:21px}.doc-content li{padding-left:4px;margin:6px 0}
.doc-content code,.doc-content pre,.doc-content kbd { font-family:var(--mono); }
.doc-content code { padding:2px 5px;color:#293944;background:#eef1ef;font-size:.88em;overflow-wrap:anywhere; }
.doc-content pre { position:relative;overflow:auto;margin:18px 0;padding:19px 56px 19px 18px;border:1px solid #27343c;color:#ecf2f1;background:#16232b;font-size:12px;line-height:1.7;tab-size:2; }
.doc-content pre code { padding:0;color:inherit;background:transparent;font-size:inherit;overflow-wrap:normal; }
.code-copy { min-width:54px;min-height:34px;position:absolute;top:8px;right:8px;padding:0 8px;border:1px solid #58666e;color:#e7efed;background:#263840;cursor:pointer;font:10px var(--mono);transition:background-color .15s ease,border-color .15s ease; }
.code-copy:hover { border-color:#91a6ab;background:#32464f; }
.doc-note,.doc-content blockquote { margin:22px 0;padding:14px 17px;border-left:2px solid var(--dot-blue);color:#3d4a51;background:#f1f4f1;font-size:12px;line-height:1.7; }
.doc-content details { margin:16px 0;border-block:1px solid var(--line); }.doc-content details+details{border-top:0}.doc-content summary{min-height:50px;display:flex;align-items:center;cursor:pointer;color:var(--ink);font-weight:700}.doc-content details[open] summary{color:var(--blue)}.doc-content details>p,.doc-content details>ul{padding-inline:5px 15px}
.doc-content table { width:100%;border-collapse:collapse;margin:20px 0;font-size:12px;line-height:1.55; }
.doc-content th,.doc-content td { padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top; }
.doc-content th { color:var(--ink);background:#f1f4f1;font-weight:700; }
.doc-links { display:flex;flex-wrap:wrap;gap:12px;margin-top:25px; }.doc-links a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--line-strong);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none}.doc-links a:first-child{border-color:var(--ink);color:white;background:var(--ink)}.doc-links a:hover{border-color:var(--blue);color:var(--blue)}.doc-links a:first-child:hover{color:white;background:var(--blue)}
.doc-sidebar a:focus-visible,.doc-content a:focus-visible,.footer-inner a:focus-visible{outline-offset:2px}
.not-found { min-height:70vh;padding-block:120px; }.not-found h1{margin:18px 0;font-size:clamp(48px,8vw,90px);line-height:.98;letter-spacing:-.085em}.not-found .doc-lede{margin-bottom:24px}

/* Purpose-built mobile navigation and layouts. */
@media (max-width: 980px) {
  .wrap { width:min(var(--wrap),calc(100% - 48px)); }
  .hero-heading-row { grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);gap:30px; }
  .hero h1 { font-size:clamp(62px,9vw,91px); }
  .tool-grid { column-gap:38px; }.tool-item { grid-template-columns:minmax(120px,.68fr) minmax(0,1.32fr);gap:12px; }
  .validation-layout { grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);gap:45px; }
  .doc-shell { grid-template-columns:190px minmax(0,1fr);gap:55px; }
}
@media (max-width: 740px) {
  html { scroll-padding-top:78px; }
  .wrap { width:calc(100% - 40px); }
  .topbar-inner { min-height:68px;gap:12px; }.wordmark{font-size:17px}.wordmark img{width:31px;height:31px}
  .desktop-nav,.topbar-inner>.nav-cta{display:none}.mobile-menu-toggle{width:46px;height:46px;display:grid;align-content:center;justify-items:center;gap:5px;margin-left:auto;padding:0;border:1px solid var(--line-strong);background:transparent;cursor:pointer;}
  .mobile-menu-toggle span{width:17px;height:1px;display:block;background:var(--ink);transition:transform .18s ease}.mobile-menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.mobile-menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .mobile-menu{position:absolute;top:100%;right:0;left:0;display:grid;padding:8px 20px 20px;border-bottom:1px solid var(--line-strong);background:var(--paper);opacity:0;transform:translateY(-7px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}.mobile-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.mobile-menu>a:not(.mobile-menu-cta){min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:#35424a;text-decoration:none;font-size:13px;font-weight:600}.mobile-menu>a>span{color:var(--quiet);font:10px var(--mono)}.mobile-menu-cta{min-height:46px;display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:0 13px;color:white;background:var(--ink);text-decoration:none;font-size:12px;font-weight:700}.mobile-menu-cta span{font-size:16px}
  .hero { padding-top:44px; }.hero-eyebrow{margin-bottom:23px;font-size:10px}.hero-heading-row{grid-template-columns:1fr;gap:19px}.hero h1{font-size:clamp(53px,11.3vw,78px);line-height:.96}.hero-aside{max-width:550px}.hero-aside>p{margin-bottom:17px;font-size:14px;line-height:1.65}.hero-thesis{margin-top:45px;font-size:19px}.hero-field-wrap{height:clamp(255px,70vw,340px)}
  .hero-field-wrap::before{inset:10% 3%}.field-axis-x{right:4%;left:7%}.field-axis-y{left:3%}.field-selection{top:27%;left:31%;width:36%;height:42%}.field-measure-a{top:25%;left:19%}.field-measure-b{right:15%;bottom:25%}.pixel-readout{top:12%;right:2%;padding:6px}.field-dimensions{right:5%;bottom:12%}.field-origin{left:8%;bottom:12%}.field-label{font-size:8px}.field-crosshair{top:46%;left:47%;width:25px;height:25px}.field-crosshair::before{width:35px}.field-crosshair::after{height:35px}
  .hero-figure figcaption{font-size:9px}.hero-sequence{min-height:74px;gap:10px;font-size:8px}.sequence-chaos{transform:scale(.82)}.sequence-measure{transform:scale(.82)}
  .section-space{padding-block:84px}.section-intro h2,.tools-heading h2{font-size:clamp(43px,9vw,62px)}.section-intro>p:last-child,.tools-heading>p:last-child{font-size:14px}.handoff-visual{height:205px;margin-top:37px}.handoff-track{right:1%;left:1%;gap:3px;font-size:7px}.handoff-track span{padding:5px 3px}.handoff-notes{grid-template-columns:1fr;gap:16px;margin-top:21px}.handoff-notes p{grid-template-columns:31px 80px 1fr}.handoff-notes .note-index{grid-row:auto}.handoff-notes p>span:last-child{max-width:none}
  .tools-heading{display:block;margin-bottom:38px}.tools-heading>p:last-child{max-width:520px;margin-top:18px}.tool-grid{grid-template-columns:1fr;}.tool-item,.tool-item:nth-child(5){grid-column:auto;grid-template-columns:minmax(120px,.75fr) minmax(0,1.25fr);gap:15px;padding-block:19px}.tool-copy h3{font-size:18px}.tool-copy h3 code{font-size:16px}.tool-copy p{font-size:11px}.tool-visual{height:142px}.diagram-width,.diagram-height,.diagram-crop-label{font-size:8px}
  .capability-layout{grid-template-columns:1fr;gap:37px}.capability-list span{min-height:54px;font-size:12px}.validation-layout{grid-template-columns:1fr;gap:39px}.validation-intro{position:static}.validation-intro h2{font-size:clamp(43px,9vw,62px)}.validation-intro>p:not(.eyebrow){max-width:500px}.validation-groups{gap:24px}.validation-group-head h3{font-size:15px}.metric-grid article{min-height:137px}.metric-grid article strong{font-size:31px}.codex-metrics strong{font-size:20px}.codex-metrics span{font-size:8px}
  .agent-layout{grid-template-columns:1fr;gap:35px}.agent-status{max-width:none}.preview-cta{grid-template-columns:52px minmax(0,1fr);gap:15px;margin-block:68px 75px;padding:27px 6px}.preview-dots{width:48px;height:48px;transform:scale(.78);transform-origin:left center}.preview-cta h2{font-size:26px}.preview-cta>div:nth-child(2)>p:last-child{max-width:330px;font-size:11px}.preview-cta>.button{grid-column:2;justify-self:start;min-height:47px}.footer-inner{min-height:0;flex-wrap:wrap;gap:11px;padding-block:20px}.footer-inner nav{gap:10px;margin-left:auto}.footer-inner nav a{font-size:9px}.footer-inner>p{order:3;width:100%;font-size:9px}
  .doc-shell{width:calc(100% - 40px);display:block;padding-block:39px 76px}.doc-sidebar{position:relative;top:auto;max-height:none;overflow:visible;margin-bottom:31px;padding:0 0 10px;border-right:0;border-bottom:1px solid var(--line)}.doc-sidebar h2{margin-bottom:9px}.doc-sidebar nav{display:flex;gap:6px;overflow-x:auto;padding:0 0 5px;scrollbar-width:thin}.doc-sidebar a{min-height:38px;flex:none;padding:7px 10px;border:1px solid #d4dbd6!important;background:#fff!important;font-size:10px;white-space:nowrap}.doc-sidebar a[aria-current=page],.doc-sidebar a[aria-current=location]{color:#174c91!important;border-color:#92a9c7!important}.doc-main h1{font-size:clamp(42px,9vw,62px)}.doc-lede{font-size:16px}.doc-nav{grid-template-columns:1fr}.doc-content{margin-top:35px;font-size:15px}.doc-content h2{font-size:23px}.doc-content pre{padding:16px 50px 16px 12px;font-size:12px}.doc-content table{font-size:13px}.not-found{min-height:70vh;padding-block:90px}
}
@media (max-width: 430px) {
  .wrap { width:calc(100% - 36px); }.hero{padding-top:38px}.hero h1{font-size:clamp(49px,11.4vw,63px)}.hero-actions{gap:8px}.button{min-height:48px;padding-inline:14px;font-size:12px}.button-secondary{gap:8px}.hero-field-wrap{height:258px}.field-axis{font-size:8px}.field-axis-y{top:13%;bottom:16%}.field-selection{top:30%;left:28%;width:41%;height:38%}.field-measure-a{top:25%;left:12%}.field-measure-b{right:11%;bottom:23%}.field-measure{font-size:8px}.pixel-readout{top:9%;right:0;gap:6px}.pixel-readout small{font-size:6px}.pixel-readout code{font-size:9px}.field-crosshair{top:46%;left:47%}.hero-figure figcaption span:last-child{max-width:155px;text-align:right}.hero-sequence{gap:7px;font-size:7px}.sequence-chaos,.sequence-measure{flex:none}
  .tool-item,.tool-item:nth-child(5){grid-template-columns:minmax(108px,.72fr) minmax(0,1.28fr);gap:9px}.tool-copy h3 code{font-size:14px}.tool-copy p{font-size:10px}.tool-visual{height:125px}.tool-visual .dot-svg{transform:scale(1.04)}.diagram-color{right:3%;font-size:7px}.diagram-verify-state{right:2%;gap:4px;font-size:7px}
  .capability-list{column-gap:13px}.capability-list span{font-size:10px}.metric-grid article{min-height:139px;padding-top:13px}.metric-grid article:nth-child(even){padding-left:11px}.metric-grid article strong{font-size:28px}.metric-grid article p{font-size:10px}.metric-grid article>a{font-size:8px}.validation-group{padding-top:15px}.validation-group-head{gap:9px}.validation-group-head>div>span{font-size:8px}.validation-group-head h3{font-size:13px}.validation-group-head>a{font-size:9px}.codex-metrics>div{padding-right:4px}.codex-metrics>div+div{padding-left:5px}.codex-metrics strong{font-size:17px}.codex-metrics span{font-size:7px}.cohort-caveat{font-size:9px}.agent-status{padding:20px 3px}.preview-cta{grid-template-columns:42px minmax(0,1fr);gap:11px}.preview-cta h2{font-size:23px}.preview-dots{transform:scale(.68)}.footer-inner nav{gap:7px}.footer-inner nav a{font-size:8px}.doc-content table{display:block;overflow-x:auto}
}
@media (max-width: 740px) {
  html:not(.js-ready) .mobile-menu { position:static;opacity:1;transform:none;pointer-events:auto; }
  html:not(.js-ready) .mobile-menu-toggle { display:none; }
}
/* Art direction pass: pixel instrument, evolving inspection scene, and one shared tool field. */
.home-page .hero { padding-top:38px; }
.home-page .hero-eyebrow { margin-bottom:24px; }
.home-page .hero-heading-row { grid-template-columns:minmax(0,1.3fr) minmax(265px,.7fr);gap:46px; }
.home-page .hero h1 { max-width:870px;font-size:clamp(65px,7.45vw,104px);line-height:.9;letter-spacing:-.098em; }
.home-page .hero-aside { max-width:365px; }
.home-page .hero-aside>p { font-size:14px;line-height:1.7; }
.home-page .hero-thesis { margin-top:39px;font-size:clamp(19px,2.2vw,24px); }
.home-page .hero-figure { margin-top:12px; }
.home-page [data-reveal] { opacity:1;transform:none; }
.home-page [data-reveal].is-visible { animation:editorial-in .38s both ease-out; }
.home-page .hero [data-reveal] { animation:none; }
.hero-field-wrap { height:clamp(320px,31vw,390px);background:linear-gradient(145deg,#172832,#0f1a20 76%);border:1px solid #34444b; }
.hero-field-wrap::before { inset:0;opacity:.62;background-image:radial-gradient(circle,#ed4e78 1.4px,transparent 1.8px),radial-gradient(circle,#ed813d 1.4px,transparent 1.8px),radial-gradient(circle,#eabb36 1.4px,transparent 1.8px),radial-gradient(circle,#21a870 1.4px,transparent 1.8px),radial-gradient(circle,#18a9c2 1.4px,transparent 1.8px),radial-gradient(circle,#326fe0 1.4px,transparent 1.8px),radial-gradient(circle,#8955c5 1.4px,transparent 1.8px);background-size:26px 26px;background-position:0 0,4px 4px,8px 8px,12px 12px,16px 16px,20px 20px,24px 24px;mask-image:radial-gradient(ellipse at 50% 50%,#000 24%,transparent 81%); }
.hero-field-wrap::after { position:absolute;z-index:-1;inset:0;content:"";opacity:.15;background-image:linear-gradient(to right,#afc0c6 1px,transparent 1px),linear-gradient(to bottom,#afc0c6 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse,#000 10%,transparent 78%); }
.hero-field-wrap.has-dot-svg::before { opacity:0; }
.hero-field-wrap.has-dot-svg::after { opacity:.15; }
.hero-field-wrap .dot-svg .sample-dot { filter:drop-shadow(0 2px 2px rgb(0 0 0 / 22%)); }
.hero-field-wrap .dot-svg .ghost-layer { opacity:0;transition:opacity .28s ease,transform .5s cubic-bezier(.2,.7,.2,1); }
.hero-field-wrap .dot-svg .ghost-dot { transform-box:fill-box;transform-origin:center; }
.hero-field-wrap[data-dot-phase="compare"] .dot-svg .ghost-layer { opacity:.72; }
.hero-field-wrap[data-dot-phase="resolve"] .dot-svg .ghost-layer { opacity:.18;transform:translate(-6px,4px); }
.hero-field-wrap[data-dot-phase="settle"] .dot-svg .ghost-layer { opacity:.08;transform:translate(-6px,4px); }
.hero-field-wrap.is-settling .dot-svg .sample-dot,.hero-field-wrap[data-dot-phase="gather"] .dot-svg .sample-dot { animation:dot-arrive .76s cubic-bezier(.18,.74,.16,1) both;animation-delay:calc(var(--dot-index)*.35ms); }
.hero-field-wrap[data-dot-phase="disperse"] .dot-svg .sample-dot { animation:dot-release .62s cubic-bezier(.45,0,.7,.5) both;animation-delay:calc(var(--dot-index)*.16ms); }
@keyframes dot-arrive { from{opacity:.2;transform:translate(var(--offset-x),var(--offset-y)) scale(.72)}to{opacity:var(--dot-opacity,1);transform:translate(0,0) scale(1)} }
@keyframes dot-release { from{opacity:var(--dot-opacity,1);transform:translate(0,0) scale(1)}to{opacity:.5;transform:translate(var(--offset-x),var(--offset-y)) scale(.78)} }
.hero-plane-labels { position:absolute;z-index:3;top:18px;right:4%;left:4%;display:grid;grid-template-columns:1fr 1fr;align-items:center;color:#c2cccd;font:9px var(--mono);letter-spacing:.08em; }
.hero-plane-labels span { display:flex;align-items:center;gap:9px; }.hero-plane-labels span:last-child{justify-self:end}.hero-plane-labels b{color:#75868e;font-weight:400}.hero-plane-labels>i{position:absolute;top:50%;left:50%;width:28px;height:1px;background:#67777b}
.hero-field-wrap[data-dot-phase="compare"]::before,.hero-field-wrap[data-dot-phase="resolve"]::before { opacity:.28; }
.hero-field-wrap[data-dot-phase="compare"]::after,.hero-field-wrap[data-dot-phase="resolve"]::after { opacity:.3; }
.field-axis { color:#a7b5b9; }.field-axis-x{border-color:#6e7d82}.field-axis-y{border-color:#6e7d82}.field-axis i{background:#9cabad}
.field-origin,.field-dimensions { color:#a9b5b8; }
.field-selection { top:27%;left:35%;width:29%;height:46%;border-color:#9fc5ff;opacity:0;transform:scale(.97);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1); }
.field-selection::before,.field-selection::after { background:#9fc5ff;opacity:.5; }
.selection-corner { border-color:#b9d7ff; }.selection-label{color:#b9d7ff}
.hero-field-wrap[data-dot-phase="measure"] .field-selection,.hero-field-wrap[data-dot-phase="compare"] .field-selection,.hero-field-wrap[data-dot-phase="resolve"] .field-selection,.hero-field-wrap[data-dot-phase="settle"] .field-selection { opacity:1;transform:scale(1); }
.hero-field-wrap[data-dot-phase="measure"] .field-selection { animation:selection-in .5s cubic-bezier(.16,.8,.2,1) both; }
@keyframes selection-in { from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1} }
.field-crosshair { top:45%;left:47%;opacity:0;border-color:#eef5ff;background:rgb(111 157 217 / 18%);box-shadow:0 0 0 7px rgb(65 128 207 / 18%);transition:opacity .24s ease,top .52s cubic-bezier(.2,.8,.25,1),left .52s cubic-bezier(.2,.8,.25,1); }
.field-crosshair::before,.field-crosshair::after,.field-crosshair i{background:#e9f2ff}.field-crosshair b{border-color:rgb(186 214 249 / 50%)}
.hero-field-wrap[data-dot-phase="acquire"] .field-crosshair,.hero-field-wrap[data-dot-phase="measure"] .field-crosshair,.hero-field-wrap[data-dot-phase="compare"] .field-crosshair,.hero-field-wrap[data-dot-phase="resolve"] .field-crosshair,.hero-field-wrap[data-dot-phase="settle"] .field-crosshair { opacity:1; }
.hero-field-wrap[data-dot-phase="acquire"] .field-crosshair { animation:target-lock .62s cubic-bezier(.2,.8,.25,1) both; }
@keyframes target-lock { from{top:18%;left:74%;transform:scale(.62);opacity:0}to{top:45%;left:47%;transform:scale(1);opacity:1} }
.field-measure { color:#cae0ff; }.field-rule{background:#90b9f4}.field-measure-b .field-rule{background:#90b9f4}
.field-label { opacity:0;transition:opacity .22s ease,transform .22s ease;transform:translateY(4px); }
.hero-field-wrap[data-dot-phase="measure"] .field-label,.hero-field-wrap[data-dot-phase="compare"] .field-label,.hero-field-wrap[data-dot-phase="resolve"] .field-label,.hero-field-wrap[data-dot-phase="settle"] .field-label{opacity:1;transform:translateY(0)}
.hero-field-wrap[data-dot-phase="settle"] .field-measure-a .field-label,.hero-field-wrap[data-dot-phase="settle"] .field-measure-b .field-label{opacity:.7}
.pixel-readout { top:23%;right:5%;color:#f3f6f4;border-color:#5f7179;background:#14242c;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .3s ease; }
.pixel-readout small{color:#a7b4b8}.pixel-readout code{color:#f4f6f4}.readout-swatch{box-shadow:0 0 16px rgb(45 112 255 / 40%)}
.hero-field-wrap[data-dot-phase="measure"] .pixel-readout,.hero-field-wrap[data-dot-phase="compare"] .pixel-readout,.hero-field-wrap[data-dot-phase="resolve"] .pixel-readout,.hero-field-wrap[data-dot-phase="settle"] .pixel-readout{opacity:1;transform:translateY(0)}
.field-vector { position:absolute;z-index:3;top:58%;right:22%;display:flex;align-items:center;gap:8px;color:#ff9aa5;font:10px var(--mono);opacity:0;transform:translateX(-8px);transition:opacity .24s ease,transform .4s ease; }