/* Scroll scenes shared by every page (annotated screen, data path). Static and readable without JS. */
.scn{position:relative;padding:clamp(56px,8vw,110px) 0}
.scn-h{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.scn-h .display,.scn-h h2{margin:0 0 14px}
.scn-h .lede{color:#a7afc1;font-size:18px;margin:0;max-width:40em}
.scn-k{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 Onest,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#a7afc1;margin-bottom:16px}
.scn-k i{width:22px;height:4px;border-radius:2px;background:linear-gradient(90deg,#4285f4,#ea4335,#fbbc05,#34a853)}
/* annotated screen */
.annot{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.annot-win{grid-column:2;grid-row:1;position:sticky;top:max(96px,calc(50vh - 240px));border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgb(255 255 255/.16),0 60px 120px -40px rgb(0 0 0/.9),0 30px 120px -60px rgb(66 133 244/.8)}
.aw-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;background:#eef0f4;border-bottom:1px solid #dfe2e8}
.aw-bar i{width:10px;height:10px;border-radius:50%}.aw-bar i:nth-child(1){background:#ff5f57}.aw-bar i:nth-child(2){background:#febc2e}.aw-bar i:nth-child(3){background:#28c840}
.aw-bar span{margin-left:12px;padding:3px 12px;border-radius:7px;background:#fff;font:500 11.5px Onest,system-ui,sans-serif;color:#5c6478}
.aw-v{position:relative;aspect-ratio:16/10;overflow:hidden}
.aw-cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.aw-cam img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.aw-ring{position:absolute;border-radius:12px;border:3px solid #4285f4;box-shadow:0 0 0 2000px rgb(8 11 19/.26),0 0 28px rgb(66 133 244/.7);opacity:0;transition:opacity .4s}
.annot.live .aw-ring{opacity:1}
.annot.live.moving .aw-ring{opacity:0;transition:opacity .2s}
.annot-notes{grid-column:1;grid-row:1;list-style:none;margin:0;padding:0;counter-reset:n}
.annot-notes li{position:relative;padding:22px 22px 22px 70px;border-radius:20px;border:1px solid rgb(255 255 255/.09);background:#101727;margin-bottom:16px;transition:opacity .4s,border-color .4s,background .4s}
.annot-notes h3{margin:0 0 6px;font:700 20px/1.25 Onest,system-ui,sans-serif;letter-spacing:-.02em;color:#f3f5fa}
.annot-notes p{margin:0;color:#a7afc1;font-size:15.5px;line-height:1.55}
.an-n{position:absolute;left:20px;top:22px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:800 14px Onest,system-ui,sans-serif;background:rgb(255 255 255/.07);color:#fff;transition:background .4s}
.annot.live .annot-notes li{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;background:transparent;border-color:transparent}
.annot.live .annot-notes li .an-n{top:50%;translate:0 -50%}
.annot.live .annot-notes li{border-radius:0;border-width:0 0 0 2px;border-color:rgb(255 255 255/.12)}.annot.live .annot-notes li.on{opacity:1;border-color:#4285f4}.annot.live .annot-notes h3{font-size:clamp(22px,2.2vw,28px)}.annot.live .annot-notes p{font-size:17px}
.annot.live .annot-notes li.on .an-n{background:#4285f4}
/* data path */
.pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;column-gap:46px;row-gap:56px;--p:1}
.pn{position:relative;padding:18px 18px 20px;border-radius:18px;background:#101727;border:1px solid rgb(255 255 255/.1);display:flex;flex-direction:column;gap:6px;transition:border-color .4s,box-shadow .4s,transform .4s}
.pn .pi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#0d1220;font-size:22px;line-height:1;margin-bottom:6px}
.pn .pi img,.pn .pi svg{width:26px;height:26px}
.pn b{font:700 17px/1.25 Onest,system-ui,sans-serif;color:#f3f5fa}
.pd{color:#a7afc1;font-size:14px;line-height:1.5}
.pn-read{--pc:#34a853}.pn-write{--pc:#4285f4}
.pn.lit{border-color:var(--pc);box-shadow:0 20px 50px -24px var(--pc)}
.pn:nth-child(5){grid-column:4;grid-row:2}.pn:nth-child(6){grid-column:3;grid-row:2}.pn:nth-child(7){grid-column:2;grid-row:2}.pn:nth-child(8){grid-column:1;grid-row:2}
.pc{position:absolute;pointer-events:none;background:rgb(255 255 255/.1);border-radius:3px}
.pc i{position:absolute;inset:0;border-radius:3px;background:var(--pc);transform-origin:0 50%;transform:scaleX(var(--f,1))}
.pc::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 45%,transparent),0 0 16px var(--pc);opacity:var(--dot,0);left:calc(var(--f,1)*100% - 6px);top:-4px}
.pn:nth-child(-n+3) .pc{left:100%;top:46px;width:46px;height:4px}
.pn:nth-child(4) .pc{left:50%;top:100%;width:4px;height:56px}
.pn:nth-child(4) .pc i{transform-origin:50% 0;transform:scaleY(var(--f,1))}
.pn:nth-child(4) .pc::after{left:-4px;top:calc(var(--f,1)*100% - 6px)}
.pn:nth-child(n+5):nth-child(-n+7) .pc{right:100%;top:46px;width:46px;height:4px}
.pn:nth-child(n+5):nth-child(-n+7) .pc i{transform-origin:100% 50%}
.pn:nth-child(n+5):nth-child(-n+7) .pc::after{left:auto;right:calc(var(--f,1)*100% - 6px)}
.pn:nth-child(8) .pc{display:none}
.pipe-leg{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px;font-size:13.5px;color:#a7afc1}
.pipe-leg span{display:inline-flex;align-items:center;gap:8px}.pipe-leg span::before{content:"";width:22px;height:4px;border-radius:2px}
.pipe-leg .lr::before{background:#34a853}.pipe-leg .lw::before{background:#4285f4}
@media(max-width:900px){
 .annot{grid-template-columns:1fr}
 .annot-win{grid-column:1;top:64px;z-index:2;box-shadow:0 0 0 1px rgb(255 255 255/.16),0 0 0 14px #080b13,0 -60px 0 14px #080b13}
 .annot.live .annot-notes li{justify-content:flex-end;padding:0 0 6vh 22px}.annot.live .annot-notes li .an-n{display:none}
 .annot-notes{grid-row:2}
 .annot.live .annot-notes li{min-height:48vh}
 .pipe{grid-template-columns:1fr;row-gap:30px}
 .pn:nth-child(n){grid-column:1;grid-row:auto}
 .pn{padding-left:76px;min-height:84px}.pn .pi{position:absolute;left:16px;top:18px}
 .pipe .pn:nth-child(n):nth-child(n) .pc{left:37px;top:100%;width:4px;height:30px;right:auto}
 .pipe .pn:nth-child(n):nth-child(n) .pc i{transform-origin:50% 0;transform:scaleY(var(--f,1))}
 .pipe .pn:nth-child(n):nth-child(n) .pc::after{left:-4px;right:auto;top:calc(var(--f,1)*100% - 6px)}
 .pn:nth-child(8) .pc{display:none}
}
@media(prefers-reduced-motion:reduce){.aw-cam,.aw-ring{transition:none}}