/* Under the hood · Quern: this page's own pieces. */
.lede{max-width:660px}
.term .tip{position:absolute;left:50%;bottom:calc(100% + 12px);width:min(290px,80vw);transform:translate(-50%,8px);padding:14px 16px;border-radius:18px;background:var(--tip);border:1px solid rgb(var(--fg) / .14);box-shadow:0 20px 50px rgb(var(--shade) / calc(.5 * var(--shade-k)));font:400 14px/1.5 var(--font-sans);color:var(--ink);opacity:0;pointer-events:none;transition:opacity 220ms ease,transform 320ms var(--ease-enter);z-index:20;text-align:left}
.b1{width:760px;height:520px;left:30%;top:0;background:radial-gradient(closest-side,rgb(var(--sage-glow) / .18),transparent);animation:drift 20s ease-in-out infinite alternate}
.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgb(var(--fg) / .04) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--fg) / .04) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%)}
.swap{animation:swap 500ms var(--ease-enter) both}
.layer{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;padding:0 22px;border-radius:18px;cursor:pointer;transition:transform 320ms var(--ease-enter),background 220ms,border-color 220ms;border:1px solid rgb(var(--fg) / .1);background:rgb(var(--fg) / .03)}
.layer:hover{transform:translateX(6px);background:rgb(var(--fg) / .06)}
.ev{animation:evin 6s var(--ease-enter) infinite}
@keyframes evin{0%{opacity:0;transform:translateY(-14px)}10%,90%{opacity:1;transform:none}100%{opacity:0}}
.grow{transform-origin:left;animation:grow 1400ms var(--ease-enter) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cell{animation:cellpop 500ms var(--ease-enter) both}
@keyframes cellpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.ring-draw{animation:ringd 2s var(--ease-enter) both}
@keyframes ringd{from{stroke-dashoffset:540}to{stroke-dashoffset:0}}
.flow{stroke-dasharray:6 8;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .grow-sc{animation:growsc linear both;animation-timeline:view();animation-range:entry 0% entry 100%;transform-origin:left}
    @keyframes growsc{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}
.bhw{position:absolute;left:50%;top:0;width:1100px;height:540px;margin-left:-550px}
.annot{position:absolute;font-size:27px;line-height:1;color:var(--ink-2);transform:rotate(-5deg);white-space:nowrap}
.tech-bh{position:absolute;right:-60px;top:40px;width:560px;height:420px;pointer-events:none}
@media (max-width:1000px){.tech-bh{display:none}}
.viz{border:1px solid transparent !important;background:radial-gradient(70% 55% at 15% 0%,rgb(var(--glow) / .08),transparent 62%) padding-box,linear-gradient(180deg,var(--surface-2),var(--surface-deep)) padding-box,linear-gradient(170deg,rgb(var(--fg) / .18),rgb(var(--fg) / .04) 40%,rgb(var(--glow) / .18)) border-box !important;border-radius:32px;box-shadow:inset 0 1px 0 rgb(var(--fg) / .07),0 30px 80px rgb(var(--shade) / calc(.35 * var(--shade-k)));position:relative;overflow:hidden}
.viz>*{position:relative}
.kpi{font-family:var(--font-display);font-weight:500;font-size:clamp(64px,8vw,112px);line-height:.88;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.iso-in{position:relative;width:300px;height:300px;transform:rotateX(57deg) rotateZ(-40deg);transform-style:preserve-3d;margin-top:120px;animation:isofloat 9s ease-in-out infinite alternate}
@keyframes isofloat{from{transform:rotateX(57deg) rotateZ(-44deg)}to{transform:rotateX(57deg) rotateZ(-36deg)}}
.slab{position:absolute;inset:0;border-radius:30px;border:1px solid;backdrop-filter:blur(2px);transition:transform 600ms var(--ease-enter),background 400ms,box-shadow 400ms,border-color 400ms}
.slab-l{position:absolute;left:22px;bottom:16px;font:500 17px/1 var(--font-display);letter-spacing:-.01em}
.chipbtn{all:unset;box-sizing:border-box;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgb(var(--fg) / .14);font:500 14px/1 var(--font-sans);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;transition:background 200ms,color 200ms,border-color 200ms}
.chipbtn:hover{background:rgb(var(--fg) / .06);color:var(--ink)}
.chipbtn--on,.chipbtn--on:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.wrapper-t{font-size:13px;line-height:1.5;color:var(--ink-3);padding:12px 14px;border-radius:16px;border:1px solid rgb(var(--fg) / .07);background:var(--frost);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.wrapper-t b{color:var(--ink);font-weight:600}
.lanes{position:relative;padding:34px 0 0}
.gridl{position:absolute;left:150px;right:30px;top:0;bottom:0}
.gridl span{position:absolute;top:0;bottom:0;border-left:1px dashed rgb(var(--fg) / .1)}
.gridl i{position:absolute;top:0;left:6px;font:400 11px/1 var(--font-mono);color:var(--ink-4);font-style:normal;white-space:nowrap}
.lane2{display:grid;grid-template-columns:150px 1fr;align-items:center;min-height:74px;padding-right:30px}
.lane2-l{display:flex;flex-direction:column;gap:3px}
.lane2-t{position:relative;height:2px;background:rgb(var(--fg) / .06);border-radius:2px}
.lane2-fill{position:absolute;left:0;top:0;height:2px;border-radius:2px}
.lane2-dot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;animation:dotp 2.4s ease-in-out infinite}
@keyframes dotp{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.lane2-v{position:absolute;top:-28px;transform:translateX(-50%);font-size:13px;white-space:nowrap}
.step3{display:flex;gap:16px;align-items:center;padding:16px 18px;margin-top:10px;border-radius:20px;border:1px solid rgb(var(--fg) / .1);background:var(--frost);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.step3 div{flex:1;display:flex;flex-direction:column;gap:3px}
.step3 b{font-size:var(--text-body);font-weight:600}
.step3 div span{font-size:var(--text-small);line-height:1.5;color:var(--ink-2b)}
.step3 em{font-style:normal;font-size:10px;color:var(--ink-4);white-space:nowrap}
.dring{position:relative;width:min(320px,100%);aspect-ratio:1}
.dring-svg{position:absolute;inset:0;width:100%;height:100%}
.rdot{position:absolute;width:5.2%;aspect-ratio:1;margin:-2.6% 0 0 -2.6%;border-radius:50%;animation:cellpop 500ms var(--ease-enter) both}
.dring-c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;align-content:center}
.lg{display:inline-block;width:12px;height:12px;border-radius:50%}
.arc-grow{animation:arcg 1.6s var(--ease-enter) .4s both}
@keyframes arcg{from{stroke-dasharray:0 213.6}to{stroke-dasharray:26.7 213.6}}
.dmatrix{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:6px}
.dmatrix i{aspect-ratio:1;border-radius:50%;background:var(--sage-400);box-shadow:0 0 6px rgb(var(--glow) / .35);animation:cellpop 400ms var(--ease-enter) both}
.donut-seg{animation:dseg 1.4s var(--ease-enter) both}
@keyframes dseg{from{opacity:0}to{opacity:1}}
.tleg{display:grid;grid-template-columns:12px 70px auto;grid-template-rows:auto 6px;column-gap:12px;row-gap:8px;align-items:center;font-size:var(--text-small);color:var(--ink-2)}
.tleg i{width:12px;height:12px;border-radius:4px}
.tbar{grid-column:1 / -1;height:6px;border-radius:3px;background:rgb(var(--fg) / .06);overflow:hidden}
.tbar b{display:block;height:100%;border-radius:3px}
.okc{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--glow) / .14);border:1px solid var(--sage-400);color:var(--accent)}
@media (max-width:640px){.gridl{left:110px;right:20px}.lane2{grid-template-columns:110px 1fr;padding-right:20px}.iso-in{width:220px;height:220px}}
.viz::before{display:none}
.micro{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.mt-track{position:relative;height:4px;border-radius:2px;background:linear-gradient(90deg,rgb(var(--glow) / .5),rgb(var(--fg) / .06) 12%)}
.mt-dot{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.mt-lab{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-4)}
.mt-lab i{font-style:normal}
.chipg{display:grid;grid-template-columns:repeat(9,8px);gap:3px}
.chipg i{height:8px;border-radius:2px;background:rgb(var(--glow) / .25)}
.chipg i:nth-child(3n+1){background:rgb(var(--glow) / .6)}
.dotsrow{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden}
.dotsrow i{width:6px;height:6px;border-radius:50%;background:var(--sage-400);box-shadow:0 0 6px rgb(var(--glow) / .4)}
.segbar{display:flex;gap:3px;height:6px;border-radius:3px;overflow:hidden}
.segbar b{display:block;height:100%}
.lane2-fill{background-size:200% 100% !important;animation:shimmer 3s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.lane2-t{height:3px !important;background:repeating-linear-gradient(90deg,rgb(var(--fg) / .10) 0 2px,transparent 2px 8px) !important}
.dring-ticks{position:absolute;inset:-2%;width:104%;height:104%;animation:spinS 60s linear infinite}
.dring-svg{filter:drop-shadow(0 0 10px rgb(var(--glow) / .35))}
.scanbox{position:relative;overflow:hidden;padding:6px;border-radius:14px}
.scanbox::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(90deg,transparent,rgb(var(--glow) / .22),transparent);animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{to{left:100%}}
.donut-seg{filter:drop-shadow(0 0 8px rgb(var(--glow) / .25))}
.slab{backdrop-filter:blur(4px)}
.ae-kpis{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ae-cap{margin-top:6px;font-size:13px;color:var(--ink-3)}
.ae-arrow{color:var(--ink-4)}
.ae-row{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.ae-l{font-size:12px;color:var(--ink-4)}
.qstrip{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px}
.qstrip i,.lg2{display:block;height:28px;border-radius:6px;animation:cellpop 450ms var(--ease-enter) both}
.lg2{width:14px;height:14px;border-radius:4px;animation:none}
.q-on{background:var(--k-4e9282)}
.q-new{background:var(--accent);box-shadow:0 0 14px rgb(var(--glow) / .7)}
.q-off{background:transparent;border:1px dashed rgb(var(--fg) / .3)}
.tbh{position:relative;flex:0 1 460px;height:400px;max-width:100%}
.tbh .bh-c{position:absolute}
.tlab{position:absolute;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:14px;border:1px solid rgb(var(--fg) / .1);background:var(--glass-3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:3}
.tlab b{font:500 14px/1.2 var(--font-display);color:var(--ink)}
.tlab span{font-size:12px;color:var(--ink-2b);white-space:nowrap}
@media (max-width:640px){.tbh{height:360px}.tlab span{white-space:normal}}
/* the layer stack: each slab's look is here, keyed by --i; site.js toggles .on and moves it */
.slab{--slab-bg:rgb(var(--fg) / calc(.035 + var(--i) * .008));--slab-bd:rgb(var(--fg) / .16);--slab-sh:0 10px 30px rgb(var(--shade) / calc(.25 * var(--shade-k)));--slab-tc:var(--ink-4);transition:transform var(--dur-screen) var(--ease-enter),background var(--dur-calm),border-color var(--dur-calm),box-shadow var(--dur-calm)}
.slab.on{--slab-bg:rgb(var(--glow) / .30);--slab-bd:var(--accent);--slab-sh:0 0 60px rgb(var(--glow) / .45);--slab-tc:var(--ink)}

/* ---------- page QA (WS03) ---------- */
/* the climb: higher levels step right on wide screens, stacked flush on phones so the words keep their width */
.step3--l2{margin-left:26%;border-color:rgb(var(--glow) / .5)}
.step3--l1{margin-left:13%}
@media (max-width:600px){.step3--l1,.step3--l2{margin-left:0}.step3{display:grid;grid-template-columns:auto 1fr;gap:4px 16px}.step3>.sg{grid-row:span 2}.step3 em{grid-column:2}}
/* the latency chart sits beside its number only where there are two columns */
.lat-chart{grid-column:1 / -1;min-width:0}
@media (min-width:900px){.lat-chart{grid-column:span 2}}
/* the layer picker: a tidy 3 x 2 grid */
.layer-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.layer-tabs .chipbtn{justify-content:center;padding:0 12px}
/* the stack names its lifted layer once, flat and large, instead of six overlapping slanted labels */
.iso-cap{position:absolute;left:26px;top:22px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.iso-cap .mono{font-size:11px;letter-spacing:.14em;color:var(--ink-4)}
.iso-cap .sg{font-size:30px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
/* the Ask evaluation: found is quiet grey, newly found is the bright accent, not found is a dashed outline */
.q-on{background:rgb(var(--fg) / .24)}
.step3>.sg{min-width:30px;text-align:center}