/* Self-hosted fonts. Inter Tight and JetBrains Mono are licensed under the SIL Open Font License 1.1; see fonts/OFL-*.txt */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(./fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(./fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(./fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(./fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(./fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#0A0A0B;color:#F4F4F5;font-family:'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.nav{position:sticky;top:0;z-index:10;background:rgba(10,10,11,.82);backdrop-filter:blur(10px);border-bottom:.5px solid #1F1F23}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.01em}
.mark{width:17px;height:17px;border:1.5px solid #F5A524;border-radius:3px;position:relative}
.mark::after{content:"";position:absolute;inset:3.5px;background:#F5A524;border-radius:1px}
.links{display:flex;gap:28px;font-size:14px;color:#A1A1AA}
.links a:hover{color:#F4F4F5}
.btn{display:inline-flex;align-items:center;font-size:14px;font-weight:500;padding:9px 16px;border-radius:8px;transition:opacity .2s}
.btn:hover{opacity:.88}
.btn-light{background:#F4F4F5;color:#0A0A0B}
.btn-amber{background:#F5A524;color:#0A0A0B}
.ghost{font-size:13px;color:#D4D4D8;padding:9px 14px;border:.5px solid #3F3F46;border-radius:8px}
.sec{padding:96px 0}
.sec-a{padding-top:88px}
.sec-b{background:#07090A;border-top:.5px solid #161B19;border-bottom:.5px solid #161B19}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;color:#71717A;margin-bottom:16px}
.amber{color:#F5A524}.green{color:#3DDC97}
.h1{font-size:clamp(36px,5.6vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.035em;margin:0 0 20px;max-width:860px}
.h1-b{color:#E6EDE9}
.h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;font-weight:600;letter-spacing:-.03em;margin:0 0 16px}
.sub{font-size:clamp(16px,1.5vw,18px);color:#A1A1AA;max-width:640px;margin:0 0 28px}
.sub b{color:#E4E4E7;font-weight:500}
.sec-b .sub{color:#9BA8A2}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cmd{display:inline-flex;gap:12px;font-size:13.5px;background:#0E1311;border:.5px solid #1E2723;border-radius:8px;padding:10px 14px;color:#C9D4CF;max-width:100%;overflow-x:auto;white-space:nowrap}
.cmd i{color:#3DDC97;font-style:normal}
.panel{margin-top:48px;border-radius:14px;display:flex;overflow:hidden;min-height:340px}
.panel-a{border:.5px solid #27272A;background:#0F0F11}
.panel-b{border:.5px solid #1E2723;background:#0B0F0D}
.map{flex:1.35;position:relative;border-right:.5px solid #27272A;padding:36px 12px 12px}
.map svg{width:100%;height:100%;display:block}
.legend{position:absolute;left:16px;top:14px;font-size:11px;color:#71717A;display:flex;gap:14px}
.legend span::before{content:"";display:inline-block;width:12px;height:2px;margin-right:6px;vertical-align:middle;background:var(--c)}
.read,.side{flex:1;padding:18px 20px;font-size:13px;color:#A1A1AA;display:flex;flex-direction:column;gap:11px}
.side{color:#7D8A84}
.hd{display:flex;justify-content:space-between;color:#71717A;font-size:11.5px;letter-spacing:.04em}
.bar{height:3px;background:#1F1F23;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:#F5A524}
.row{display:flex;justify-content:space-between;gap:10px}
.v{color:#F4F4F5}
.side .v{color:#E6EDE9}
.r{color:#FF6B6B!important}
.tag{font-size:11.5px;padding:3px 8px;border-radius:5px;border:.5px solid currentColor;align-self:flex-end}
.side .tag{align-self:flex-start}
.ok{color:#4ADE80}.okg{color:#3DDC97}.bad{color:#FF6B6B}
.foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:#52525B;font-size:11.5px;gap:8px}
.pause{font-size:11.5px;background:none;color:#A1A1AA;border:.5px solid #3F3F46;border-radius:6px;padding:4px 9px;cursor:pointer}
.pause:hover{color:#F4F4F5}
.cam{flex:1.25;border-right:.5px solid #1E2723;padding:16px;display:flex;flex-direction:column;gap:10px}
.cam svg{width:100%;height:auto;display:block;border-radius:8px}
.meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#5C6A63}
.cells{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:2px 0 6px}
.cells div{height:14px;border-radius:3px;background:#151C19;transition:background .2s}
.cells .p{background:#1F6F4E}.cells .f{background:#FF6B6B}.cells .c{outline:1px solid #E6EDE9;outline-offset:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.step{border:.5px solid #27272A;border-radius:12px;padding:24px;background:#0F0F11}
.step h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:14px 0 8px}
.step p{margin:0;color:#A1A1AA;font-size:15px}
.num{font-size:12px;color:#F5A524}
.sec-cta{border-top:.5px solid #1F1F23}
.cta-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-in .sub{margin-left:auto;margin-right:auto}
.footer{border-top:.5px solid #1F1F23;padding:28px 0}
.foot-in{display:flex;justify-content:space-between;font-size:12px;color:#52525B}
:focus-visible{outline:2px solid #F5A524;outline-offset:2px}
@media (max-width:820px){
  .links{display:none}
  .wrap{padding:0 20px}
  .sec{padding:64px 0}
  .panel{flex-direction:column;min-height:0}
  .map{height:260px;border-right:none;border-bottom:.5px solid #27272A}
  .cam{border-right:none;border-bottom:.5px solid #1E2723}
  .steps{grid-template-columns:1fr}
  .legend{font-size:10px;gap:10px}
  .foot-in{flex-direction:column;gap:6px}
  .cmd{font-size:11.5px;white-space:normal}
  .cam .meta{flex-wrap:wrap;gap:4px}
  .cam .meta>span:last-child{display:none}
}

.tag.run{color:#A1A1AA}
.logo img{display:block;height:15px;width:auto}

.sec-a{position:relative;overflow:hidden}
.sec-a>.wrap{position:relative;z-index:1}
.hero3d{position:absolute;top:0;right:0;width:64%;height:600px;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero3d canvas{display:block}
.preview-switch{position:fixed;left:16px;bottom:16px;z-index:20;display:flex;align-items:center;gap:4px;font-size:11.5px;background:rgba(17,17,19,.92);border:.5px solid #2a2a2e;border-radius:999px;padding:4px 4px 4px 12px;color:#71717A}
.preview-switch a{padding:5px 10px;border-radius:999px;color:#A1A1AA}
.preview-switch a[aria-current]{background:#F5A524;color:#0A0A0B}
@media (max-width:820px){.hero3d{width:100%;height:520px;opacity:.25}}

.sec-b{position:relative;overflow:hidden}
.sec-b>.wrap{position:relative;z-index:1}
.ml3d{position:absolute;top:0;right:0;width:62%;height:520px;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.ml3d canvas{display:block}
@media (max-width:820px){.ml3d{width:100%;height:460px;opacity:.25}}

/* Manipulation */
.violet{color:#A78BFA}
.sec-c{position:relative;overflow:hidden;background:#09080C;border-bottom:.5px solid #1A1722}
.sec-c>.wrap{position:relative;z-index:1}
.h1-c{color:#ECE9F5}
.sec-c .sub{color:#A39FB0}
.cmd-c{background:#100E15;border-color:#25212F;color:#D2CCE0}
.cmd-c i{color:#A78BFA}
.panel-c{border:.5px solid #25212F;background:#0D0B11}
.trials{flex:1.35;border-right:.5px solid #25212F;padding:16px 18px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:#8B8699}
.trials .meta{color:#625D70}
.trow{display:grid;grid-template-columns:62px 1fr 52px 58px;gap:12px;align-items:center;padding:6px 0;border-bottom:.5px solid #1A1722}
.trow.th{font-size:11px;color:#625D70;padding-top:4px}
.trow>span:nth-child(3),.trow>span:nth-child(4){text-align:right}
.trow .nm{color:#D2CCE0}
.tcells{display:grid;grid-template-columns:repeat(25,1fr);gap:3px}
.tcells i{height:12px;border-radius:2px;background:#17141E}
.tcells i.s{background:#5B4A99}.tcells i.f{background:#FF6B6B}
.trow .up{color:#A78BFA}.trow .dn{color:#FF6B6B}
.trow.bad .nm{color:#FF6B6B}
.tleg{margin-top:auto;flex-wrap:wrap}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sw.s{background:#5B4A99}.sw.f{background:#FF6B6B}
.nw{white-space:nowrap}
.side-c{color:#8B8699}
.side-c .v{color:#ECE9F5}
.bar-c i{background:#A78BFA}
.okv{color:#A78BFA}
.mp3d{position:absolute;top:0;right:0;width:62%;height:520px;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.mp3d canvas{display:block}
@media (max-width:820px){
  .mp3d{width:100%;height:460px;opacity:.25}
  .trials{border-right:none;border-bottom:.5px solid #25212F}
  .trow{grid-template-columns:48px 1fr 40px 54px;gap:8px}
  .trow.th{white-space:nowrap}
  .tcells{gap:2px}
  .trials .meta>span:last-child{display:none}
  .trials .meta:first-child>span:last-child{display:none}
}

/* metric tables (new vs baseline) */
.mrow{display:grid;grid-template-columns:1fr 62px 62px;gap:8px;align-items:baseline}
.mrow>span:nth-child(2),.mrow>span:nth-child(3){text-align:right;white-space:nowrap}
.mrow>span:nth-child(3){color:#71717A}
.side .mrow>span:nth-child(3){color:#5C6A63}
.side-c .mrow>span:nth-child(3){color:#625D70}
.mrow.mh{font-size:11px;color:#52525B;border-bottom:.5px solid #1F1F23;padding-bottom:6px;margin-bottom:-2px}
.side .mrow.mh{color:#5C6A63;border-color:#1A2320}
.side-c .mrow.mh{color:#625D70;border-color:#1A1722}
.mrow.mh>span{color:inherit!important}
.read .tag{align-self:flex-start}
.trow .nt{color:#8B8699}
.legend span{white-space:nowrap}
.pause{white-space:nowrap}
@media (max-width:820px){.tag{font-size:10.5px}.legend{gap:8px}}

/* hero + lifecycle stages */
.sec-hero{padding-bottom:88px;border-bottom:.5px solid #1F1F23}
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:64px}
.stage{border:.5px solid #27272A;border-radius:12px;padding:18px 18px 20px;background:rgba(15,15,17,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.stage span{font-size:12px;color:#F5A524}
.stage h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:10px 0 6px;color:#F4F4F5}
.stage p{margin:0;font-size:14px;color:#A1A1AA;line-height:1.5}
.sec-a2{padding-top:96px}
.cmd-a i{color:#F5A524}
.cmd-a{background:#111113;border-color:#27272A;color:#D4D4D8}
@media (max-width:980px){.stages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stages{gap:10px;margin-top:44px}.stage{padding:14px}.stage h3{font-size:15px}.stage p{font-size:13px}}
.sec-hero .sub{max-width:570px}
@media (min-width:821px){.sec-hero .hero3d{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 66%),linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 66%),linear-gradient(180deg,#000 70%,transparent)}}
.cta-alt{margin-top:16px;font-size:14px;color:#A1A1AA}
.cta-alt a{color:#F4F4F5;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#52525B}
.cta-alt a:hover{text-decoration-color:#F4F4F5}
.cta-in .sub,.cta-in .h2{text-wrap:balance}