/* ZNano: bytes, frames and constrained-system workflows. */
.xn-page{--xn-green:#8ad9bb}
.xn-page h1 em{font-style:normal;color:var(--cyan)}
.xn-page h3{font-size:20px;line-height:1.35;letter-spacing:-.025em}
.xn-page .copy{color:var(--muted);line-height:1.75}
.xn-page section[id],.xn-page #custom-payload{scroll-margin-top:95px}
.xn-hero{background:radial-gradient(ellipse at 80% 30%,#0e293280,transparent 58%);border-bottom:1px solid var(--line)}
.xn-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding-block:84px 66px}
.xn-page h1{font-size:clamp(43px,5.1vw,74px);line-height:1.02;letter-spacing:-.055em}
.xn-hero .lead{font-size:18px;max-width:550px;margin-top:28px}
.xn-hero .hero-support{margin-bottom:28px;color:var(--muted);line-height:1.7}
.xn-hero .button{font-size:12px;padding:14px 17px}
.xn-payload{background:linear-gradient(150deg,#10232d,#0a1118);border-color:#355361;padding:28px}
.xn-payload .zc-figure-top{font-size:9px;letter-spacing:.09em}
.xn-bytes{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:23px 0 0;min-width:0}
.xn-bytes span{display:grid;place-items:center;aspect-ratio:1.22;border:1px solid #375567;background:#172e3d;color:#bce8f8;font:12px ui-monospace,SFMono-Regular,monospace;border-radius:3px}
.xn-bytes .xn-byte-1,.xn-bytes .xn-byte-4{background:#223c4a;color:#7fb9c9}
.xn-bytes .xn-byte-2{background:#173b44;color:#9ed9db}
.xn-bytes .xn-byte-5{background:#264335;color:#c3e6c5}
.xn-engine{display:flex;flex-direction:column;align-items:center;margin:16px auto}
.xn-stem{height:15px;width:1px;background:#466f80}
.xn-engine strong{font-size:18px;letter-spacing:.16em;padding:12px 24px;border:1px solid #518597;background:#132c39;border-radius:4px;box-shadow:0 0 0 5px #142430}
.xn-engine small{display:block;font-size:8px;letter-spacing:.1em;color:var(--muted);text-align:center;margin-top:5px}
.xn-payload-out{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted)}
.xn-compact{display:flex;width:44%;gap:4px;transform-origin:left}
.xn-compact i{height:21px;flex:1;background:var(--cyan);border-radius:2px;opacity:.8}
.xn-network{display:flex;align-items:center;justify-content:space-between;border-block:1px solid #253d4c;margin:23px 0 0;padding:16px 0;font-size:9px;letter-spacing:.1em;color:var(--muted)}
.xn-network b{color:var(--xn-green);font-weight:500}
.xn-restored span{border-color:#315a50}
.xn-payload figcaption{margin-top:20px}
.xn-payload figcaption strong,.xn-payload figcaption span{display:block}
.xn-payload figcaption strong{font-size:13px;color:var(--xn-green);font-weight:500}
.xn-payload figcaption span{font-size:10px;color:var(--muted);line-height:1.6;margin-top:8px}
.xn-signature{font-size:clamp(27px,3.3vw,44px);text-align:center;letter-spacing:-.04em;line-height:1.2;margin:45px 0 0;font-weight:500}
.xn-fleet{padding:32px}
.xn-equation{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:23px;align-items:center;margin:40px 0}
.xn-equation strong{font-size:clamp(28px,3.5vw,45px);letter-spacing:-.05em;font-weight:500}
.xn-equation span{display:block;font-size:12px;color:var(--muted);margin-top:10px}
.xn-equation>b{color:#627586;font-weight:400}
.xn-fleet-control{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-block:1px solid var(--line);padding:17px 0}
.xn-fleet-control>span{font-size:12px;color:var(--muted);margin-right:auto}
.xn-fleet-control button,.xn-frame-buttons button{background:#111b25;color:var(--muted);font:inherit;font-size:12px;border:1px solid #314552;padding:11px 16px;border-radius:4px;cursor:pointer}
.xn-fleet-control button[aria-pressed=true],.xn-frame-buttons button[aria-pressed=true]{color:var(--cyan);border-color:#568d9e;background:#142e3b}
.xn-traffic{margin-top:30px}
.xn-traffic>div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:24px}
.xn-traffic span{font-size:13px;color:var(--muted)}
.xn-traffic strong{font-size:21px;font-weight:500}
.xn-traffic i{grid-column:1/-1;display:block;height:20px;border-radius:2px;transform-origin:left}
.xn-raw-bar{background:repeating-linear-gradient(90deg,#455b6c 0,#455b6c 18px,transparent 18px,transparent 22px)}
.xn-compressed-bar{width:43.68%;background:repeating-linear-gradient(90deg,#47d5ff 0,#47d5ff 18px,transparent 18px,transparent 22px)}
.xn-flow{list-style:none;padding:0;margin:0}
.xn-flow li{position:relative;border:1px solid #314957;padding:20px;border-radius:5px;background:#0f1922;min-width:0}
.xn-flow small,.xn-flow strong,.xn-flow span{display:block}
.xn-flow small{font-size:9px;letter-spacing:.09em;color:var(--cyan)}
.xn-flow strong{font-size:18px;margin:22px 0 10px;font-weight:500}
.xn-flow span{font-size:12px;color:var(--muted);line-height:1.5}
.xn-pipeline .xn-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.xn-pipeline li+li:before{content:'';width:25px;height:1px;position:absolute;left:-26px;top:50%;background:#4f8091}
.xn-contexts{margin-top:35px}
.xn-tags{display:flex;flex-wrap:wrap;gap:10px}
.xn-tags span{padding:9px 14px;border:1px solid #243745;border-radius:3px;font-size:12px;color:#bdcdd7}
.xn-benchmark{background:linear-gradient(150deg,#0f1c26,#080d12);border-block:1px solid #244354}
.xn-benchmark .zc-section{border:0}
.xn-metrics{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:25px;margin:46px 0 34px}
.xn-metrics strong{color:var(--cyan);font-size:clamp(33px,4.1vw,56px);letter-spacing:-.055em;font-weight:500;white-space:nowrap}
.xn-metrics strong span{font-size:.55em;margin-left:3px}
.xn-metrics p{font-size:13px;color:var(--muted);line-height:1.6;margin-top:12px}
.xn-range-track{height:5px;background:#253a48;margin:60px 0 18px;position:relative;border-radius:3px}
.xn-range-band{position:absolute;left:23.46%;width:67.39%;height:100%;background:var(--cyan);transform-origin:left}
.xn-range-mean{position:absolute;left:56.32%;top:-12px;height:26px;width:1px;background:#e4f7ff}
.xn-range-mean b{position:absolute;bottom:32px;transform:translateX(-50%);font-size:12px;font-weight:500;color:#d4edf6;white-space:nowrap}
.xn-range-labels{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted)}
.xn-range figcaption{color:var(--muted);font-size:12px;margin-top:27px;line-height:1.6}
.xn-verification{display:flex;gap:45px;align-items:center;margin-top:35px;flex-wrap:wrap}
.xn-verification>div{display:flex;gap:17px;align-items:center}
.xn-verification strong{color:var(--xn-green);font-size:29px;letter-spacing:-.03em;font-weight:500}
.xn-verification span{font-size:11px;color:var(--muted);line-height:1.7}
.xn-verification a{margin-left:auto;font-size:12px}
.xn-deploy{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.xn-deploy article{border:1px solid var(--line);background:#0c131b;padding:26px}
.xn-deploy h3{min-height:55px}
.xn-deploy .eyebrow{font-size:10px}
.xn-deploy .xn-flow li{margin-top:18px;text-align:center;padding:15px;font-size:13px}
.xn-deploy .xn-flow li+li:before{content:'';position:absolute;left:50%;top:-19px;width:1px;height:18px;background:#427184}
.xn-two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.xn-records{display:grid;gap:8px;margin-top:24px}
.xn-records>div{display:grid;grid-template-columns:90px repeat(4,1fr);gap:7px;align-items:center}
.xn-records span{font-size:10px;color:var(--muted);font-family:monospace}
.xn-records i{height:18px;background:#305063;border-radius:2px}
.xn-records i:nth-child(3){background:#366366}
.xn-records i:nth-child(4){background:#6c8986}
.xn-batch-output{display:flex;align-items:center;justify-content:center;gap:15px;border-top:1px solid var(--line);margin-top:24px;padding-top:20px;font-size:13px}
.xn-batch-output span{color:var(--cyan);font-size:23px}
.xn-frame-buttons{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:24px 0}
.xn-frame-buttons button{padding:12px 0;font-family:monospace}
.xn-select .copy{font-size:14px}
.xn-frame-output{display:flex;align-items:center;flex-direction:column;border:1px solid #3f7283;background:#112731;padding:21px;gap:12px}
.xn-frame-output>span{font-size:9px;letter-spacing:.12em;color:var(--muted)}
.xn-frame-output strong{font:23px monospace;color:var(--cyan)}
.xn-frame-output small{color:var(--muted);font-size:11px}
.xn-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin:38px 0}
.xn-chips>div{padding:28px 15px;border:1px solid #35505e;outline:1px dashed #2d4351;outline-offset:5px;background:linear-gradient(135deg,#142633,#0b131c);text-align:center;border-radius:4px}
.xn-chips span{font-size:9px;letter-spacing:.1em;color:var(--muted)}
.xn-chips strong{display:block;font:28px monospace;color:#c7e7f2;margin-top:14px}
.xn-host{gap:60px;margin-top:55px}
.xn-host dl{margin:0}
.xn-host dl>div{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}
.xn-host dt{font-size:13px;color:var(--muted)}
.xn-host dd{font-size:31px;letter-spacing:-.04em;color:var(--cyan);margin:0}
.xn-host dd span{font-size:14px}
.xn-host .copy{font-size:14px}
.xn-live .demo-panel{border:1px solid #365868;box-shadow:none;background:linear-gradient(140deg,#11212c,#0b1118);padding:38px}
.xn-live .demo-panel>h2{max-width:730px}
.xn-live .demo-controls-grid{margin-top:25px}
.xn-live .stream-visual{margin-top:28px}
.xn-live .result-grid{grid-template-columns:repeat(3,1fr);margin-top:25px}
.xn-live .result-box{min-width:0}
.xn-live .result-box strong{font-size:20px;overflow-wrap:anywhere}
.xn-live .stream-node strong{font-size:12px;overflow-wrap:anywhere}
.xn-live .demo-secondary{margin-top:40px;padding-top:35px;border-top:1px solid #2a4655}
.xn-live .demo-secondary h2{font-size:30px}
.xn-live .stream-log{max-height:280px;overflow:auto}
.xn-live .lane-track{position:relative;overflow:hidden}
.xn-usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.xn-usecases article{padding:24px;border-top:1px solid #2c4655;background:#0b131a}
.xn-usecases h3{font-size:18px;margin-top:23px}
.xn-usecases p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:0}
.xn-trace{display:block;width:100%;height:3px;background:repeating-linear-gradient(90deg,#47d5ff 0,#47d5ff 5px,transparent 5px,transparent 12px);opacity:.6;transform-origin:left}
.xn-evidence-links{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.xn-evidence-links a{display:block;border-block:1px solid var(--line);padding:25px 0}
.xn-evidence-links h3{font-size:18px;display:flex;justify-content:space-between;gap:10px}
.xn-evidence-links h3 span{color:var(--cyan)}
.xn-evidence-links p{font-size:13px;color:var(--muted);line-height:1.7}
.xn-history{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;margin-top:50px}
.xn-history>div:last-child{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:12px 20px}
.xn-history>div:last-child strong{font-size:36px;letter-spacing:-.04em;font-weight:500;color:#b5cbd5}
.xn-history>div:last-child span{font-size:12px;color:var(--muted);align-self:center;line-height:1.6}
.xn-scrambling{border-top:1px solid var(--line);margin-top:35px;padding-top:22px;color:var(--muted);font-size:13px;line-height:1.8}
.xn-scrambling summary{cursor:pointer;color:#bdcdd7}
.xn-scrambling a{color:var(--cyan)}
.xn-final .zc-section-head{max-width:850px}
.xn-related{display:flex;flex-wrap:wrap;gap:22px;margin-top:38px;font-size:12px;color:var(--muted)}
/* Conceptual diagrams loop; completed simulator totals remain static and truthful. */
.xn-page .zc-motion-ready .xn-compact{animation:xn-compact 7s ease-in-out infinite}
.xn-page .zc-motion-ready .xn-restored span{animation:xn-recover 7s ease-in-out infinite;animation-delay:calc(var(--i)*.035s)}
.xn-page .zc-motion-ready .xn-compressed-bar,.xn-page .zc-motion-ready .xn-range-band{animation:xn-bar 7s ease-in-out infinite}
.xn-page .zc-motion-ready .xn-flow li{animation:xn-route 7s ease-in-out infinite;animation-delay:calc(var(--i,0)*.6s)}
.xn-page .zc-motion-ready .xn-records>div{animation:xn-record 7s ease-in-out infinite;animation-delay:calc(var(--i)*.25s)}
.xn-page .zc-motion-ready .xn-trace{animation:xn-bar 7s ease-in-out infinite;animation-delay:calc(var(--i)*.25s)}
@keyframes xn-compact{0%,10%,100%{transform:scaleX(1);opacity:.4}40%,85%{transform:scaleX(.6);opacity:1}}
@keyframes xn-recover{0%,25%,100%{opacity:.28}55%,88%{opacity:1}}
@keyframes xn-bar{0%,10%,100%{transform:scaleX(.65);opacity:.6}40%,85%{transform:scaleX(1);opacity:1}}
@keyframes xn-route{0%,10%,100%{border-color:#314957;background:#0f1922}40%,75%{border-color:#568798;background:#17313e}}
@keyframes xn-record{0%,10%,100%{opacity:.4;transform:translateX(-4px)}40%,85%{opacity:1;transform:none}}
@keyframes xn-live-packet{0%,8%{left:0;opacity:0}12%{opacity:1}65%{left:calc(100% - 32px);opacity:1}75%,100%{left:calc(100% - 32px);opacity:0}}
@media(max-width:1050px){.xn-hero-grid{gap:35px}
.xn-payload{padding:22px}
.xn-equation{gap:15px}
.xn-metrics{gap:18px}
.xn-metrics strong{font-size:38px}
.xn-deploy article{padding:21px}
.xn-deploy h3{font-size:18px}
.xn-verification{gap:25px}
.xn-live .demo-panel{padding:28px}
.xn-history{gap:35px}
.xn-frame-buttons{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.xn-hero-grid{grid-template-columns:1fr;padding-block:48px;gap:40px}
.xn-page h1{font-size:clamp(47px,9vw,68px)}
.xn-payload{padding:27px}
.xn-bytes span{font-size:13px}
.xn-equation{grid-template-columns:1fr auto 1fr;gap:23px}
.xn-equation>b:nth-of-type(2){display:none}
.xn-equation strong{font-size:35px}
.xn-pipeline .xn-flow{grid-template-columns:1fr;gap:20px}
.xn-pipeline li+li:before{height:20px;width:1px;left:50%;top:-21px}
.xn-flow strong{margin-top:12px}
.xn-pipeline li{display:grid;grid-template-columns:1fr 1.2fr;gap:10px 20px;align-items:center}
.xn-pipeline li small{grid-row:1/3}
.xn-pipeline li strong{margin:0}
.xn-pipeline li span{grid-column:2}
.xn-metrics{grid-template-columns:1fr 1fr}
.xn-metrics>div:first-child{grid-column:1/-1}
.xn-metrics strong{font-size:46px}
.xn-deploy{grid-template-columns:1fr;gap:18px}
.xn-deploy h3{min-height:0}
.xn-deploy .xn-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.xn-deploy .xn-flow li{margin:0;font-size:12px}
.xn-deploy .xn-flow li+li:before{height:1px;width:15px;left:-16px;top:50%}
.xn-two{grid-template-columns:1fr}
.xn-chips{gap:17px}
.xn-chips>div{padding:20px 5px}
.xn-chips span{font-size:7px}
.xn-chips strong{font-size:22px}
.xn-host{gap:30px;margin-top:40px}
.xn-live .demo-panel{padding:25px}
.xn-live .result-grid{grid-template-columns:1fr 1fr}
.xn-live .stream-visual{grid-template-columns:1fr}
.xn-live .stream-node{padding:12px}
.xn-live .lane-head{gap:10px;flex-wrap:wrap}
.xn-live .lane-head strong{font-size:12px}
.xn-live .demo-secondary{display:block}
.xn-live .demo-secondary .actions{margin-top:22px}
.xn-usecases{grid-template-columns:1fr 1fr;gap:20px}
.xn-evidence-links{grid-template-columns:1fr;gap:0}
.xn-history{grid-template-columns:1fr}
.xn-history>div:last-child{grid-template-columns:1fr 1.4fr}
.xn-verification a{margin-left:0}
.xn-frame-buttons{grid-template-columns:repeat(8,1fr)}}
@media(max-width:430px){.xn-page .zc-section{padding-block:55px}
.xn-page .zc-diagram{padding:20px}
.xn-payload .zc-figure-top{font-size:8px;gap:8px}
.xn-bytes{gap:4px}
.xn-bytes span{font-size:10px}
.xn-hero .actions{flex-direction:column;align-items:stretch}
.xn-hero .button{justify-content:center;text-align:center}
.xn-payload-out{flex-direction:column;align-items:flex-start;gap:12px}
.xn-compact{width:44%;align-self:center}
.xn-equation strong{font-size:29px}
.xn-equation span{font-size:11px}
.xn-fleet-control>span{flex-basis:100%;margin-bottom:5px}
.xn-fleet-control button{padding:10px 9px;font-size:11px}
.xn-traffic span{font-size:11px}
.xn-traffic strong{font-size:19px}
.xn-range-labels{font-size:9px}
.xn-range-labels>span:nth-child(2){text-align:center;max-width:160px}
.xn-metrics strong{font-size:36px}
.xn-verification{gap:20px}
.xn-deploy .xn-flow li{padding:12px 7px}
.xn-frame-buttons{grid-template-columns:repeat(4,1fr)}
.xn-chips{grid-template-columns:repeat(3,1fr);gap:20px}
.xn-live .demo-panel{padding:18px}
.xn-live .result-box strong{font-size:16px}
.xn-live .result-box{padding:13px}
.xn-live .result-box>span{font-size:10px}
.xn-usecases{grid-template-columns:1fr}
.xn-live .actions{align-items:stretch;flex-direction:column}
.xn-records>div{grid-template-columns:72px repeat(4,1fr);gap:5px}
.xn-history>div:last-child strong{font-size:31px}
.xn-pipeline li{grid-template-columns:1fr 1.2fr;gap:10px}
.xn-pipeline li strong{font-size:16px}}
/* Balanced first screen: compact byte rows and one centered encode path. */
.xn-hero-grid{padding-block:65px 55px;gap:60px}
.xn-page h1{font-size:clamp(43px,4.55vw,64px);line-height:1.04}
.xn-payload .xn-bytes span{aspect-ratio:auto;height:30px}
.xn-payload-out{flex-direction:column;align-items:center;gap:11px;text-align:center}
.xn-compact{width:50%;transform-origin:center}
.xn-network{margin-top:19px;padding-block:13px}
.xn-engine{margin-block:12px}
.xn-payload .xn-bytes{margin-top:18px}
.xn-payload figcaption{margin-top:17px}
@media(max-width:760px){.xn-hero-grid{padding-block:45px;gap:35px}.xn-page h1{font-size:clamp(43px,8vw,60px)}.xn-payload .xn-bytes span{height:32px}}
@media(max-width:430px){.xn-payload .xn-bytes span{height:28px}.xn-compact{width:50%}.xn-payload-out{align-items:center}}