.slide.tracking-slide{padding:4svh 5vw}
.tracking-slide .scene{max-width:1330px}
.tracking-lesson{cursor:pointer}
.tracking-title.headline{font-size:clamp(34px,4.2vw,62px);font-weight:700;line-height:1.1;letter-spacing:-.025em;min-height:2.2em;display:flex;align-items:center;justify-content:center;max-width:1200px;margin:0 auto}
.tracking-canvas{width:100%;max-width:1240px;margin:10px auto 0}
.tracking-svg{display:block;width:100%;max-height:66svh;overflow:visible;font-family:'Atkinson Hyperlegible Next',Arial,sans-serif}
.tracking-svg text{fill:var(--ink);font-weight:600}
.cloud{fill:#ebece5;stroke:#545a52;stroke-width:3}
.server-title{font-size:40px;font-weight:700!important}
.ai-node circle{fill:var(--paper);stroke:var(--ink);stroke-width:3.5}
.ai-node text{font-size:56px;font-weight:700!important}
.person-node{fill:var(--paper);stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.laptop-frame{fill:#e4e5df;stroke:#41473f;stroke-width:3}
.screen{fill:#fff;stroke:#a1a69b;stroke-width:1.5}
.browser-bar{stroke:#c1c5bb;stroke-width:2}
.browser-dot{fill:#858d7f}
.teracom-logo{font-size:30px;font-weight:700!important;letter-spacing:2px}
.mock-image{fill:#e2e5dc}
.mock-copy{stroke:#b7beb1;stroke-width:11;stroke-linecap:round}
.laptop-base{fill:#cbd0c4;stroke:#41473f;stroke-width:2.5}
.laptop-notch{fill:#8d9586}
.route-line{fill:none;stroke:#7a8173;stroke-width:3;stroke-linecap:round}
.packet{fill:var(--accent);stroke:var(--paper);stroke-width:3;opacity:0}
/* Animate SVG geometry so dots and lines share the same scaled viewBox. */
.measure-dot{fill:var(--accent)}
.measure-halo{fill:var(--accent);opacity:.16}
.measure-label{font-size:34px;font-weight:600!important}
.measure-connector{fill:none;stroke:#777f6f;stroke-width:2}
.question-bubble path{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.question-bubble text{font-size:39px;font-weight:600!important}
.answer-bubble path{fill:var(--ink)}
.answer-bubble text{fill:var(--paper);font-size:39px;font-weight:600}
.server-node,.ai-node,.browser-route,.ai-route,.server-measure,.person-node,.browser-measure,.conversation,.answer-bubble{opacity:0;pointer-events:none;transition:opacity .4s ease,transform .55s cubic-bezier(.2,.65,.3,1)}
.laptop-node{opacity:1;transform:translateY(-135px);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.65,.3,1)}
.person-node{transform:translate(-12px,0)}
.server-node{transform:translateY(-12px)}
.ai-node{transform:translateY(8px)}
.conversation{transform:translateY(10px)}
.answer-bubble{transform:translateY(12px)}

/* The website keeps one location once its server is introduced. */
.tracking-lesson:is([data-phase="1"],[data-phase="2"],[data-phase="4"],[data-phase="5"],[data-phase="7"]) .laptop-node{transform:none}
.tracking-lesson:is([data-phase="1"],[data-phase="2"],[data-phase="4"],[data-phase="5"],[data-phase="7"]) .server-node{opacity:1;transform:none}
.tracking-lesson:is([data-phase="1"],[data-phase="2"]) .person-node{opacity:1;transform:none}
.tracking-lesson:is([data-phase="1"],[data-phase="2"]) .browser-route{opacity:1}
.tracking-lesson[data-phase="2"] .browser-measure{opacity:1}

/* The person's question precedes AI's retrieval; the reply follows it. */
.tracking-lesson:is([data-phase="3"],[data-phase="6"]) .laptop-node{opacity:0;transform:translateY(16px)}
.tracking-lesson:is([data-phase="3"],[data-phase="6"]) .person-node{opacity:1;transform:translateY(-88px)}
.tracking-lesson:is([data-phase="3"],[data-phase="6"]) .ai-node{opacity:1;transform:translateY(178px)}
.tracking-lesson:is([data-phase="3"],[data-phase="6"]) .conversation{opacity:1;transform:none}
.tracking-lesson[data-phase="6"] .answer-bubble{opacity:1;transform:none}

/* Direct retrieval does not run the person's browser measurement. */
.tracking-lesson:is([data-phase="4"],[data-phase="5"],[data-phase="7"]) .ai-node{opacity:1;transform:none}
.tracking-lesson:is([data-phase="4"],[data-phase="5"],[data-phase="7"]) .ai-route{opacity:1}
.tracking-lesson:is([data-phase="4"],[data-phase="5"],[data-phase="7"]) .laptop-node{opacity:.24}
.tracking-lesson[data-phase="5"] .browser-measure{opacity:1}
.tracking-lesson[data-phase="5"] .browser-measure .measure-dot{fill:var(--paper);stroke:var(--ink);stroke-width:3;stroke-dasharray:4 4}
.tracking-lesson[data-phase="5"] .browser-measure .measure-halo{opacity:0}
.tracking-lesson[data-phase="7"] .server-measure{opacity:1}

/* One finite journey per manually revealed scene. */
.animate-paths[data-phase="1"] .browser-packet{animation:tracking-browser-delivery 1.2s .5s ease-in-out both}
.animate-paths:is([data-phase="4"],[data-phase="5"],[data-phase="7"]) .ai-packet{animation:tracking-ai-fetch 2.5s .4s ease-in-out both}
.animate-paths[data-phase="2"] .browser-measure .measure-halo{animation:tracking-measure-pulse 1s .2s ease-out both}
.animate-paths[data-phase="7"] .server-measure .measure-halo{animation:tracking-measure-pulse 1s 1.4s ease-out both}
@keyframes tracking-browser-delivery{0%{opacity:0;cy:248px}12%{opacity:1}88%{opacity:1}100%{opacity:0;cy:360px}}
@keyframes tracking-ai-fetch{0%{opacity:0;cx:929px}8%{opacity:1}44%,56%{opacity:1;cx:776px}92%{opacity:1}100%{opacity:0;cx:929px}}
@keyframes tracking-measure-pulse{0%{opacity:.16;r:25}45%{opacity:.32;r:40}100%{opacity:.16;r:25}}
@media(max-height:800px) and (min-width:801px){.tracking-title.headline{font-size:clamp(33px,3.8vw,54px)}.tracking-svg{max-height:64svh}.tracking-canvas{margin-top:0}}
@media(max-width:800px){.slide.tracking-slide{padding:6svh 4vw}.tracking-title.headline{font-size:clamp(30px,7.1vw,48px);min-height:3.3em}.tracking-canvas{margin-top:25px}.tracking-svg{max-height:none}}
@media(prefers-reduced-motion:reduce){.tracking-lesson *{animation:none!important;transition:none!important}.packet{display:none}}
@media print{.tracking-title.headline{font-size:35px}.tracking-svg{max-height:125mm}.packet{display:none}}
.case-screen-title{font-size:29px;font-weight:600;fill:var(--ink)}
.question-bubble text{font-size:34px}