/* Reader analytics page. Page prefix: an-.
   Shared parts (ui-win, ui-head, ui-chip, ui-tag, soon, av, mini-deck)
   come from /assets/site/site.css. Panel UI uses px and reflows with
   container queries; slides and capability fragments scale with container
   units. Loops animate transform and opacity only and stop off screen. */

.an-who{display:grid;min-width:0}
.an-who b{font-weight:500;font-size:15px;line-height:1.3;color:var(--paper)}
.an-who span{font-size:13px;line-height:1.35;color:var(--muted)}
.an-chiprow{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Hero: the reading report ---------- */
.an-dash{container-name:an-dash;--seg:15px}
.an-dash .ui-win{overflow:hidden}
.an-dash .an-who > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-dash-body{display:grid;grid-template-columns:minmax(0,1fr) 204px;grid-template-areas:"stats stats" "rows last";gap:14px;padding:16px}
.an-stats{grid-area:stats;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.an-stat{display:flex;flex-direction:column;gap:7px;min-width:0;padding:12px 16px 13px;font-size:13px;line-height:1.25;color:var(--muted)}
.an-stat + .an-stat{border-left:1px solid var(--line)}
.an-stat b{font:600 28px/1 var(--display);letter-spacing:-.03em;color:var(--paper)}

.an-rows{grid-area:rows;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.an-row{position:relative;isolation:isolate;flex:1;display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"av who track" "av who st";align-items:center;column-gap:12px;row-gap:7px;padding:10px 10px}
.an-row + .an-row{border-top:1px solid var(--line)}
.an-row.is-latest::before{content:"";position:absolute;inset:4px 0;z-index:-1;border-radius:12px;background:linear-gradient(90deg,rgba(183,168,255,.1),rgba(183,168,255,0) 80%);box-shadow:inset 2px 0 0 var(--lav)}
.an-row .av{grid-area:av}
.an-row .an-who{grid-area:who}
.an-track{grid-area:track;display:flex;gap:3px;align-self:end}
.an-track i{position:relative;width:var(--seg);height:20px;overflow:hidden;border-radius:4px;background:rgba(183,168,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.an-track i::before{content:"";position:absolute;inset:0;background:var(--lav);opacity:var(--a);transform-origin:50% 100%}
.an-track i.empty{background:none;box-shadow:none;border:1px dashed rgba(183,168,255,.24)}
.an-track i.empty::before{content:none}
.an-st{grid-area:st;align-self:start;justify-self:end;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}
.an-row:first-child .an-st{color:var(--paper)}
.an-row.is-latest .an-st{color:var(--lav)}

.an-lastcard{grid-area:last;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border-radius:16px;background:linear-gradient(180deg,rgba(123,92,255,.18),rgba(123,92,255,.04));box-shadow:inset 0 0 0 1px rgba(183,168,255,.26)}
.an-lastcard-k{margin:0;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
.an-lastcard-who{display:flex;align-items:center;gap:10px;min-width:0}
.an-lastcard-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.an-lastcard-pg{font-size:13px;line-height:1.3;color:var(--paper)}
.an-prog{position:relative;display:block;height:4px;overflow:hidden;border-radius:4px;background:rgba(183,168,255,.14)}
.an-prog i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--lav));transform-origin:0 50%;transform:scaleX(.42)}

/* Emma's page 3, a paper slide that scales as one picture */
.an-slide{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:8px;background:var(--paper);container-type:inline-size;box-shadow:0 22px 40px -22px rgba(0,0,0,.9)}
.an-slide-eb{position:absolute;left:7cqw;top:8cqw;font:500 max(6.5px,4.2cqw)/1 var(--sans);letter-spacing:.12em;color:var(--violet)}
.an-slide-t{position:absolute;left:7cqw;top:17cqw;width:53cqw;font:600 max(8px,7cqw)/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.an-slide-rings{position:absolute;right:6cqw;bottom:8cqw;width:31cqw;aspect-ratio:1}
.an-slide-rings i{position:absolute;bottom:0;left:50%;border-radius:50%}
.an-slide-rings i:nth-child(1){width:100%;height:100%;margin-left:-50%;background:rgba(183,168,255,.38)}
.an-slide-rings i:nth-child(2){width:66%;height:66%;margin-left:-33%;background:rgba(183,168,255,.85)}
.an-slide-rings i:nth-child(3){width:34%;height:34%;margin-left:-17%;background:var(--violet)}
.an-slide-n{position:absolute;right:6cqw;top:7cqw;font:500 max(6.5px,3.8cqw)/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.5)}

@container an-dash (max-width:589px){
  .an-dash{--seg:12px}
  .an-dash-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"stats" "last" "rows";gap:12px;padding:12px}
  .an-stat{padding:10px 12px 11px}
  .an-stat b{font-size:24px}
  .an-lastcard{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-areas:"k k" "slide who" "slide meta" "prog prog";column-gap:14px;row-gap:10px;align-items:center}
  .an-lastcard-k{grid-area:k}
  .an-lastcard-who{grid-area:who;align-self:end}
  .an-slide{grid-area:slide}
  .an-lastcard-meta{grid-area:meta;flex-direction:column;align-items:flex-start;align-self:start}
  .an-prog{grid-area:prog}
  .an-row{flex:none;padding:10px 6px}
}

/* ---------- Who opened it: the opens timeline ---------- */
.an-opens{container-name:an-opens;--tcol:46px}
.an-opens-body{padding:6px 20px 16px}
.an-day{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font:500 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lav)}
.an-day::after{content:"";flex:1;height:1px;background:var(--line)}
.an-tl{position:relative;list-style:none;margin:0;padding:0}
.an-tl::before{content:"";position:absolute;left:calc(var(--tcol) + 18.5px);top:24px;bottom:24px;width:1px;background:linear-gradient(var(--lav),rgba(183,168,255,.3));transform-origin:50% 0}
.an-ev{position:relative;isolation:isolate;display:grid;grid-template-columns:var(--tcol) 14px 32px minmax(0,1fr) auto;grid-template-areas:"time node av who chips";align-items:center;column-gap:12px;row-gap:8px;padding:12px 0}
.an-ev.is-latest::before{content:"";position:absolute;inset:4px -10px;z-index:-1;border-radius:14px;background:linear-gradient(90deg,rgba(123,92,255,.16),rgba(123,92,255,.04));box-shadow:inset 0 0 0 1px rgba(183,168,255,.22)}
.an-time{grid-area:time;font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--paper)}
.an-node{grid-area:node;position:relative;width:14px;height:14px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 2px var(--lav)}
.an-ev.is-again .an-node{background:var(--lav)}
.an-ev.is-latest .an-node{background:var(--violet);box-shadow:0 0 0 3px rgba(123,92,255,.3)}
.an-ev .av{grid-area:av}
.an-ev .an-who{grid-area:who}
.an-ev .an-chiprow{grid-area:chips;flex-wrap:nowrap}
.an-who .an-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.an-who .an-visit{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px rgba(183,168,255,.26);font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap}
.an-who .an-visit.is-again{background:var(--lav);box-shadow:none;color:var(--night)}
.an-who .an-loc{display:flex;align-items:center;gap:5px;margin-top:3px}
.an-pin{flex:none;width:13px;height:13px;fill:none;stroke:var(--lav);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

@container an-opens (max-width:519px){
  .an-opens-body{padding:4px 16px 12px}
  .an-ev{grid-template-columns:var(--tcol) 14px 28px minmax(0,1fr);grid-template-areas:"time node av who" ". . . chips";column-gap:10px}
  .an-ev .av{width:28px;height:28px;font-size:12px}
  .an-ev .an-chiprow{flex-wrap:wrap}
  .an-tl::before{left:calc(var(--tcol) + 16.5px)}
}

/* ---------- Time on every page: Sarah's attention strip ---------- */
.an-attn{container:an-attn / inline-size}
.an-attn-win .ui-head{padding:16px 20px}
.an-attn-win .ui-title{flex-wrap:wrap;column-gap:10px;row-gap:4px}
.an-attn-sub{font:400 14px/1.3 var(--sans);letter-spacing:0;color:var(--muted)}
.an-attn-total{display:inline-flex;align-items:baseline;gap:8px;font-size:14px;color:var(--muted)}
.an-attn-total b{font:600 24px/1 var(--display);letter-spacing:-.02em;color:var(--paper)}
.an-pages{--bar:176px;--head:56px;list-style:none;margin:0;padding:22px 20px 22px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.an-pg{position:relative;display:grid;grid-template-rows:var(--bar) auto auto;row-gap:12px;min-width:0}
.an-pg-bar{position:relative;isolation:isolate;display:block;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,rgba(183,168,255,0),rgba(183,168,255,.05))}
.an-pg-bar i{--from:scaleY(0);position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * (100% - var(--head)));border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,rgba(183,168,255,.62),rgba(183,168,255,.12));box-shadow:inset 0 2px 0 var(--lav);transform-origin:50% 100%}
.an-pg.is-top .an-pg-bar i{background:linear-gradient(180deg,var(--lav),var(--violet));box-shadow:inset 0 2px 0 #fff}
.an-pg.is-top .an-pg-bar::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-12px;height:calc(100% - var(--head) + 40px);z-index:-1;background:radial-gradient(closest-side,rgba(123,92,255,.55),transparent);opacity:.7}
.an-pg-time{position:absolute;left:0;right:0;top:calc((var(--bar) - var(--head)) * (1 - var(--h)) + var(--head) - 8px);transform:translateY(-100%);display:flex;flex-direction:column;align-items:center;gap:7px;font:600 15px/1 var(--display);letter-spacing:-.01em;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.an-thumb{display:block;overflow:hidden;border-radius:6px;box-shadow:0 14px 30px -16px rgba(0,0,0,.85)}
.an-thumb svg{width:100%;height:auto}
.an-pg.is-top .an-thumb{box-shadow:0 0 0 2px var(--lav),0 0 0 6px rgba(183,168,255,.16),0 14px 30px -16px rgba(0,0,0,.85)}
.an-pg-name{display:flex;justify-content:center;align-items:baseline;gap:6px;min-width:0;font-size:14px;line-height:1.3;color:var(--paper);white-space:nowrap}
.an-pg-n{color:var(--muted);font-variant-numeric:tabular-nums}

@container an-attn (max-width:639px){
  .an-attn-win .ui-head{padding:14px 16px}
  .an-pages{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
  .an-pg{grid-template-columns:76px minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"thumb name time" "thumb bar bar";column-gap:14px;row-gap:9px;align-items:center}
  .an-thumb{grid-area:thumb}
  .an-pg-name{grid-area:name;justify-content:flex-start}
  .an-pg-time{grid-area:time;position:static;transform:none;flex-direction:row;gap:8px;font-size:14px}
  .an-pg-bar{grid-area:bar;height:8px;border-radius:4px;background:rgba(183,168,255,.1)}
  .an-pg-bar i{--from:scaleX(0);top:0;right:auto;width:calc(var(--h) * 100%);height:auto;border-radius:4px;box-shadow:none;background:var(--lav);transform-origin:0 50%}
  .an-pg.is-top .an-pg-bar i{background:linear-gradient(90deg,var(--violet),var(--lav))}
  .an-pg.is-top .an-pg-bar::after{display:none}
}

/* ---------- How far they read: two compositions ----------
   Scroll depth (a phone on a stage, with the per-page list) next to the
   interaction heatmap preview (a report window over a paper slide), which
   carries a coming-soon pill. */
.an-eyes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 20px}
.an-eye{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:18px;min-width:0;margin:0}
.an-eye-depth{grid-column:1 / span 5}
.an-eye-heat{grid-column:6 / -1}
@media (max-width:899px){
  .an-eyes{grid-template-columns:minmax(0,1fr)}
  .an-eye-heat,.an-eye-depth{grid-column:1 / -1;width:100%;max-width:640px;justify-self:center}
}
.an-eye-cap{max-width:40em;font-size:16px;line-height:1.55;color:var(--muted)}
@supports (grid-template-rows:subgrid){
  .an-eye{grid-row:span 2;grid-template-rows:subgrid}
}
.an-eye-cap b{font-weight:500;color:var(--paper)}
.an-stage{display:flex;flex-direction:column;justify-content:center;border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9);background:
  radial-gradient(60% 64% at 50% 44%,rgba(123,92,255,.17),transparent 72%),
  linear-gradient(180deg,rgba(183,168,255,.05),rgba(183,168,255,0) 40%),
  var(--night-2)}

/* Heatmap preview (coming soon): soft lavender-violet spots over Traction. The slide scales as one
   picture (cqw); the spots are radial gradients that breathe. */
.an-heat{container-name:an-heat}
.an-heat .ui-win{display:flex;flex-direction:column;height:100%}
.an-heat-body{flex:1;display:grid;align-content:center;gap:16px;padding:18px}
.an-hslide{position:relative;isolation:isolate;aspect-ratio:16 / 10;overflow:hidden;border-radius:12px;background:var(--paper);container-type:inline-size;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.an-hs-eb{position:absolute;left:7cqw;top:7cqw;font:500 max(7.5px,2cqw)/1 var(--sans);letter-spacing:.12em;color:var(--violet)}
.an-hs-big{position:absolute;left:6cqw;top:15cqw;font:600 21cqw/.9 var(--display);letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
.an-hs-big em{margin-left:.6cqw;font-style:normal;color:var(--violet)}
.an-hs-lbl{position:absolute;left:7cqw;top:38cqw;width:38cqw;font:500 max(8px,2.6cqw)/1.4 var(--sans);color:var(--ink-2)}
.an-hs-stats{position:absolute;left:60cqw;top:13cqw;width:30cqw;display:grid;gap:3.6cqw}
.an-hs-stat{display:block;padding-top:1.8cqw;border-top:1px solid rgba(18,15,46,.14);font:400 max(7.5px,2.3cqw)/1.35 var(--sans);color:var(--ink-2)}
.an-hs-stat b{display:block;margin-bottom:.8cqw;font:600 5.6cqw/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.an-hs-mono{position:absolute;left:7cqw;bottom:6cqw;width:3.6cqw;height:3.6cqw;color:var(--violet)}
.an-hs-n{position:absolute;right:6cqw;top:7cqw;font:500 max(7.5px,2cqw)/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.5)}
.an-spot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--d) * 1cqw);height:calc(var(--d) * 1cqw);margin:calc(var(--d) * -.5cqw) 0 0 calc(var(--d) * -.5cqw);opacity:var(--h);pointer-events:none}
.an-spot b{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(106,72,245,.6),rgba(123,92,255,.4) 36%,rgba(183,168,255,.2) 66%,rgba(183,168,255,0))}
.an-hs-tag{position:absolute;left:41cqw;top:6.5cqw;display:inline-flex;align-items:center;height:max(16px,4.2cqw);padding:0 max(7px,1.6cqw);border-radius:999px;background:var(--night);font:500 max(7.5px,1.9cqw)/1 var(--sans);color:var(--paper);white-space:nowrap;box-shadow:0 8px 20px -10px rgba(18,15,46,.6)}
.an-heat-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;font-size:13px;line-height:1.3;color:var(--muted)}
.an-scale{display:inline-grid;grid-template-columns:auto 120px auto;align-items:center;gap:10px}
.an-scale i{height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(183,168,255,.2),var(--lav) 55%,var(--violet))}

/* Scroll depth: Emma's phone scrolls down Market; the fold marks the deepest
   point. The phone screen is a picture, one unit (--u) is 1/200 of its width. */
.an-depth{container-name:an-depth;background:radial-gradient(70% 60% at 24% 30%,rgba(123,92,255,.2),transparent 70%),var(--night-2);flex-direction:row;align-items:center;justify-content:center;gap:clamp(16px,5cqw,28px);padding:28px clamp(16px,5cqw,28px)}
.an-ph{flex:none;width:clamp(120px,38cqw,200px);aspect-ratio:9 / 18.6;padding:3.4%;border-radius:15% / 7.4%;background:#1B1744;border:1px solid rgba(183,168,255,.28);box-shadow:0 40px 70px -30px rgba(0,0,0,.85)}
.an-ph-view{--u:calc(100cqw / 200);position:relative;height:100%;overflow:hidden;border-radius:12% / 5.8%;background:var(--paper);container-type:inline-size}
.an-ph-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:calc(var(--u) * 26);padding:0 calc(var(--u) * 16) 0 calc(var(--u) * 20);font:600 calc(var(--u) * 9.5)/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.an-ph-island{position:absolute;left:50%;top:calc(var(--u) * 7);width:calc(var(--u) * 56);height:calc(var(--u) * 16);margin-left:calc(var(--u) * -28);border-radius:99px;background:var(--night)}
.an-ph-bat{width:calc(var(--u) * 16);height:calc(var(--u) * 8);border-radius:calc(var(--u) * 2.5);background:rgba(18,15,46,.62)}
.an-ph-page{position:absolute;left:0;right:0;top:calc(var(--u) * 26);bottom:0;overflow:hidden}
.an-ph-scroll{position:relative;display:flex;flex-direction:column;gap:calc(var(--u) * 13);padding:calc(var(--u) * 12) calc(var(--u) * 16) 0;transform:translateY(calc(var(--u) * -214))}
.an-ph-eb{font:500 calc(var(--u) * 8.5)/1 var(--sans);letter-spacing:.12em;color:var(--violet)}
.an-ph-t{margin-top:calc(var(--u) * -4);font:600 calc(var(--u) * 15.5)/1.14 var(--display);letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere}
.an-ph-art{position:relative;flex:none;height:calc(var(--u) * 104);overflow:hidden;border-radius:calc(var(--u) * 12);background:var(--violet)}
.an-ph-art i{position:absolute;bottom:calc(var(--u) * -30);left:50%;border-radius:50%}
.an-ph-art i:nth-child(1){width:calc(var(--u) * 150);height:calc(var(--u) * 150);margin-left:calc(var(--u) * -75);background:rgba(183,168,255,.35)}
.an-ph-art i:nth-child(2){width:calc(var(--u) * 100);height:calc(var(--u) * 100);margin-left:calc(var(--u) * -50);background:rgba(183,168,255,.75)}
.an-ph-art i:nth-child(3){width:calc(var(--u) * 50);height:calc(var(--u) * 50);margin-left:calc(var(--u) * -25);background:var(--paper)}
.an-ph-art.is-alt{background:var(--lav)}
.an-ph-art.is-alt i:nth-child(3){background:var(--violet)}
.an-ph-lines{display:grid;gap:calc(var(--u) * 7)}
.an-ph-lines i{height:calc(var(--u) * 5);border-radius:9px;background:rgba(18,15,46,.2)}
.an-ph-lines i:nth-child(2){width:92%}
.an-ph-lines i:nth-child(3){width:96%}
.an-ph-lines i:last-child{width:58%}
.an-ph-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u) * 8);height:calc(var(--u) * 78)}
.an-ph-figs i{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u) * 4);padding:0 calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:rgba(123,92,255,.08);font:500 calc(var(--u) * 8.5)/1.2 var(--sans);font-style:normal;color:var(--ink-2)}
.an-ph-figs b{font:600 calc(var(--u) * 20)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.an-ph-figs i:last-child b{color:var(--violet)}
.an-ph-card{display:grid;gap:calc(var(--u) * 8);padding:calc(var(--u) * 14);border-radius:calc(var(--u) * 12);box-shadow:inset 0 0 0 1px rgba(18,15,46,.12)}
.an-ph-card i{height:calc(var(--u) * 6);border-radius:9px;background:rgba(123,92,255,.55)}
.an-ph-card i + i{width:66%;background:rgba(18,15,46,.2)}
/* The page is read as 1000 units long. At the deepest point (scrolled 214
   units) the bottom of the screen sits at 62% of it; the fold marks that line. */
.an-ph-fold{position:absolute;left:0;right:0;top:calc(var(--u) * 608);height:0;border-top:calc(var(--u) * 1.6) dashed var(--violet)}
.an-ph-fold b{position:absolute;right:calc(var(--u) * 10);bottom:calc(var(--u) * 5);padding:calc(var(--u) * 4) calc(var(--u) * 7);border-radius:99px;background:var(--violet);font:600 max(7.5px,calc(var(--u) * 9))/1 var(--sans);color:#fff}
.an-ph-bar{position:absolute;right:calc(var(--u) * 3);top:calc(var(--u) * 30);bottom:calc(var(--u) * 6);width:calc(var(--u) * 3)}
.an-ph-bar i{position:absolute;left:0;right:0;top:0;height:41%;border-radius:9px;background:rgba(18,15,46,.4);transform:translateY(51%)}
.an-depth-list{flex:1;min-width:0;max-width:236px}
.an-depth-list .ui-k{margin:0}
.an-depth-who{display:flex;align-items:center;gap:9px;margin:12px 0 14px;font:500 15px/1.3 var(--sans);color:var(--paper)}
.an-depth-list ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.an-depth-list li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:8px 12px 8px 10px;border-radius:12px;background:rgba(183,168,255,.05);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.3;color:var(--paper)}
.an-depth-list li.is-latest{background:linear-gradient(90deg,rgba(123,92,255,.18),rgba(123,92,255,.05));box-shadow:inset 0 0 0 1px rgba(183,168,255,.36)}
.an-depth-list li.is-off{background:none;box-shadow:inset 0 0 0 1px rgba(183,168,255,.12);color:var(--muted)}
.an-depth-list li b{font:600 14px/1 var(--display);color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.an-depth-list li.is-latest b{color:var(--lav)}
.an-depth-list li.is-off b{font:400 13px/1.2 var(--sans);color:var(--muted)}
.an-dl-name{display:flex;align-items:center;gap:8px;min-width:0}
.an-mp{position:relative;display:block;width:18px;height:26px;overflow:hidden;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(183,168,255,.55)}
.an-mp i{position:absolute;left:0;right:0;top:0;height:calc(var(--v,0) * 100%);background:rgba(183,168,255,.6)}
.is-latest .an-mp i{background:linear-gradient(180deg,var(--lav),var(--violet))}
.is-off .an-mp{box-shadow:inset 0 0 0 1px rgba(183,168,255,.24)}
@container an-depth (max-width:369px){
  .an-depth{flex-direction:column;gap:22px;padding:24px 16px}
  .an-ph{width:46cqw}
  .an-depth-list{width:100%;max-width:none}
}

/* ---------- Where they stopped: reach by page ---------- */
.an-drop{container-name:an-drop}
.an-drop-body{padding:14px 20px 20px}
.an-grid{--lab:92px;position:relative;isolation:isolate;display:grid;grid-template-columns:var(--lab) repeat(7,minmax(0,1fr));grid-template-rows:auto 76px repeat(3,46px);align-items:center}
.an-band{position:absolute;inset:0 2px;z-index:-1;grid-column:5;grid-row:1 / -1;border-radius:12px;background:linear-gradient(180deg,rgba(123,92,255,.2),rgba(123,92,255,.04));box-shadow:inset 0 0 0 1px rgba(183,168,255,.22)}
.an-gl{font-size:13px;line-height:1.2;color:var(--muted)}
.an-gl-top{align-self:start;padding-top:8px}
.an-gh{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:8px 0 10px;font-size:13px;line-height:1.2;color:var(--muted);text-align:center}
.an-gh b{font:600 14px/1 var(--display);color:var(--paper)}
.an-gh span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-gh.is-drop,.an-gh.is-drop b{color:var(--lav)}
.an-reach{grid-column:2 / -1;align-self:stretch;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.an-reach i{position:relative}
.an-rf{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v) * 50px);background:linear-gradient(180deg,rgba(183,168,255,.42),rgba(183,168,255,.06));box-shadow:inset 0 2px 0 var(--lav);transform-origin:50% 100%}
.an-reach i:first-child .an-rf{border-top-left-radius:6px}
.an-reach b{position:absolute;left:0;right:0;bottom:calc(var(--v) * 50px + 6px);font:600 13px/1 var(--display);color:var(--paper);text-align:center}
.an-lane-who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--paper)}
.an-lane{position:relative;grid-column:2 / -1;align-self:stretch}
.an-lane-line{position:absolute;top:50%;left:calc(100% / 14);width:calc((var(--stop) - 1) * 100% / 7);height:3px;margin-top:-1.5px;border-radius:3px;transform-origin:0 50%}
.an-lane.is-end .an-lane-line{background:linear-gradient(90deg,var(--violet),var(--lav))}
.an-lane.is-stop .an-lane-line{background:rgba(183,168,255,.6)}
.an-lane-dots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;justify-items:center}
.an-lane-dots i{width:9px;height:9px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 2px var(--lav)}
.an-lane-dots i.off{background:none;box-shadow:inset 0 0 0 1px rgba(183,168,255,.24)}
.an-lane-end{position:absolute;top:50%;left:calc((var(--stop) - .5) * 100% / 7);display:grid;place-items:center;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%}
.an-lane.is-end .an-lane-end{background:var(--violet);box-shadow:0 0 0 4px rgba(123,92,255,.22)}
.an-lane.is-end .an-lane-end::before{content:"";width:8px;height:4.5px;margin-top:-2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.an-lane.is-stop .an-lane-end{background:var(--night-2);box-shadow:inset 0 0 0 2px var(--lav)}
.an-lane.is-stop .an-lane-end::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--lav)}
.an-legend{list-style:none;margin:14px 0 0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;border-top:1px solid var(--line);font-size:14px;line-height:1.3;color:var(--muted)}
.an-legend li{display:flex;align-items:center;gap:8px}
.an-legend b{font-weight:500;color:var(--paper)}
.an-legend i{flex:none;width:12px;height:12px;border-radius:50%}
.an-legend .is-end i{background:var(--violet)}
.an-legend .is-stop i{box-shadow:inset 0 0 0 2px var(--lav)}

@container an-drop (max-width:559px){
  .an-drop-body{padding:12px 14px 16px}
  .an-grid{--lab:52px}
  .an-gl{font-size:12px}
  .an-gh span,.an-lane-who > span:last-child{display:none}
  .an-legend{flex-direction:column;gap:9px}
}

/* ---------- Second visits and new readers ---------- */
.an-fwd{container-name:an-fwd}
.an-canvas{position:relative;border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9);background:
  radial-gradient(60% 55% at 30% 34%,rgba(123,92,255,.18),transparent 72%),
  radial-gradient(rgba(183,168,255,.12) 1px,transparent 1.5px) 0 0 / 20px 20px,
  var(--night)}
.an-fwd-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:18px 20px 0}
.an-fwd-body{padding:20px}
.an-fwd-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.an-fnode{display:flex;flex-direction:column;gap:14px;min-width:0;padding:14px;border-radius:16px;background:var(--night-3);box-shadow:inset 0 0 0 1px var(--line-2),0 24px 50px -30px rgba(0,0,0,.9)}
.an-fnode.is-s{box-shadow:inset 0 0 0 1px rgba(183,168,255,.42),0 0 0 4px rgba(123,92,255,.12),0 24px 50px -30px rgba(0,0,0,.9)}
.an-fnode-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;max-width:100%;height:24px;padding:0 9px;border-radius:999px;background:rgba(183,168,255,.08);font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
.an-fnode-tag.is-back{background:rgba(183,168,255,.16);color:var(--paper)}
.an-fnode-tag svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--lav);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.an-fnode-who{display:flex;align-items:center;gap:10px;min-width:0}
.an-fnode-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.3;color:var(--muted)}
.an-fnode-foot b{font:600 13px/1.3 var(--display);color:var(--paper);white-space:nowrap}
.an-visits{margin-top:18px;padding:14px 16px 16px;border-radius:14px;background:rgba(18,15,46,.78);box-shadow:inset 0 0 0 1px var(--line)}
.an-visits .ui-k{margin:0 0 12px}
.an-visits ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.an-visits ol::before{content:"";position:absolute;left:6.5px;top:6px;width:calc(50% + 8px);height:1px;background:linear-gradient(90deg,var(--lav),rgba(183,168,255,.5))}
.an-visits li{position:relative;display:grid;grid-template-columns:13px minmax(0,1fr);gap:10px;align-items:start}
.an-vdot{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 2px var(--lav)}
.an-visits li.is-back .an-vdot{background:var(--lav);box-shadow:0 0 0 4px rgba(183,168,255,.18)}
.an-vtext{display:grid;gap:3px;min-width:0;font-size:13px;line-height:1.3;color:var(--muted)}
.an-vtext b{font-weight:500;font-size:14px;color:var(--paper)}

@container an-fwd (max-width:499px){
  .an-fwd-top{padding:14px 14px 0}
  .an-fwd-body{padding:16px 14px 14px}
  .an-fwd-stage{grid-template-columns:minmax(0,1fr);gap:12px}
  .an-fnode{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who tag" "foot foot";align-items:center;gap:12px}
  .an-fnode-who{grid-area:who}
  .an-fnode-tag{grid-area:tag;align-self:center}
  .an-fnode-foot{grid-area:foot}
}
@container an-fwd (max-width:359px){
  .an-fnode{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "who" "foot"}
  .an-fnode-tag{justify-self:start}
}

/* ---------- Alerts: a lock screen with three notifications ---------- */
.an-lock{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:30px 24px 30px;border-radius:28px;border:1px solid var(--line-2);box-shadow:0 60px 100px -50px rgba(0,0,0,.9);background:
  radial-gradient(90% 70% at 16% 0%,rgba(123,92,255,.55),transparent 62%),
  radial-gradient(80% 70% at 100% 100%,rgba(183,168,255,.2),transparent 60%),
  linear-gradient(165deg,#241B6A,var(--night-2) 72%)}
.an-lock::before,.an-lock::after{content:"";position:absolute;z-index:-1;left:50%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(183,168,255,.13);pointer-events:none}
.an-lock::before{top:36%;width:150%;aspect-ratio:1;margin-left:-75%}
.an-lock::after{top:52%;width:110%;aspect-ratio:1;margin-left:-55%}
.an-lock-time{font:600 clamp(44px,13cqw,72px)/1 var(--display);letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.an-notes{list-style:none;width:100%;max-width:440px;margin:26px 0 0;padding:0;display:grid;gap:10px}
.an-note{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;padding:13px 14px;border-radius:18px;background:rgba(18,15,46,.92);box-shadow:inset 0 0 0 1px rgba(183,168,255,.2),0 20px 40px -24px rgba(0,0,0,.9)}
.an-note.is-new{box-shadow:inset 0 0 0 1px rgba(183,168,255,.48),0 0 0 4px rgba(123,92,255,.16),0 20px 40px -24px rgba(0,0,0,.9)}
.an-note-app{width:38px;height:38px;border-radius:10px}
.an-note-main{display:grid;gap:3px;min-width:0}
.an-note-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;line-height:1.3;color:var(--muted)}
.an-note-top b{font-weight:500;color:var(--paper)}
.an-note-top span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.an-note-t{font:600 15px/1.35 var(--display);letter-spacing:-.015em;color:var(--paper)}
.an-note-d{font-size:13px;line-height:1.4;color:var(--muted)}
@container (max-width:419px){
  .an-lock{padding:24px 14px 18px;border-radius:22px}
  .an-notes{margin-top:20px}
  .an-note{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:12px}
  .an-note-app{width:32px;height:32px;border-radius:8px}
}

/* ---------- FAQ: the reader notice ---------- */
.faq-a .an-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px;border-radius:14px;background:rgba(183,168,255,.07);box-shadow:inset 0 0 0 1px rgba(183,168,255,.22);color:var(--paper)}
.an-notice-k{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--lav);font:500 13px/1 var(--sans);color:var(--night);white-space:nowrap}

/* ---------- Capability fragments (sized with --q from .cap-visual) ---------- */
.an-cv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--q) * 16);padding:calc(var(--q) * 20)}
.an-cv .av{box-shadow:0 0 0 calc(var(--q) * 2) var(--night-2)}

.an-cv-chip{display:inline-flex;align-items:center;gap:calc(var(--q) * 9);height:calc(var(--q) * 36);padding:0 calc(var(--q) * 16) 0 calc(var(--q) * 13);border-radius:999px;background:rgba(183,168,255,.12);box-shadow:inset 0 0 0 1px rgba(183,168,255,.32);font:500 calc(var(--q) * 14)/1 var(--sans);color:var(--paper);white-space:nowrap}
.an-cv-pages{display:flex;gap:calc(var(--q) * 6)}
.an-cv-pages i{position:relative;width:calc(var(--q) * 30);height:calc(var(--q) * 20);border-radius:calc(var(--q) * 4);background:rgba(183,168,255,.55)}
.an-cv-pages i.is-last{background:var(--paper);box-shadow:0 0 0 calc(var(--q) * 2) var(--violet)}
.an-cv-pages i.off{background:none;border:1px dashed rgba(183,168,255,.3)}
.an-cv-cap{font:500 calc(var(--q) * 13)/1 var(--sans);color:var(--muted)}

.an-cv-lang{gap:calc(var(--q) * 10)}
.an-cv-lrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--q) * 12);width:calc(var(--q) * 260);padding:calc(var(--q) * 10) calc(var(--q) * 12);border-radius:calc(var(--q) * 14);background:rgba(18,15,46,.88);box-shadow:inset 0 0 0 1px var(--line-2)}
.an-cv-lrow.is-on{box-shadow:inset 0 0 0 1px rgba(183,168,255,.5),0 0 0 calc(var(--q) * 4) rgba(123,92,255,.14)}
.an-cv-lrow.is-idle{background:none;box-shadow:inset 0 0 0 1px rgba(183,168,255,.16)}
.an-cv-lrow.is-idle .an-cv-lname{color:var(--muted)}
.an-cv-none{font-size:calc(var(--q) * 12);line-height:1.2;color:var(--muted);white-space:nowrap}
.an-cv-code{display:grid;place-items:center;width:calc(var(--q) * 38);height:calc(var(--q) * 28);border-radius:calc(var(--q) * 8);background:rgba(183,168,255,.14);font:600 calc(var(--q) * 12)/1 var(--display);letter-spacing:.06em;color:var(--paper)}
.an-cv-lrow.is-on .an-cv-code{background:var(--violet)}
.an-cv-lname{font:500 calc(var(--q) * 14)/1.2 var(--sans);color:var(--paper)}
.an-cv-avs{display:flex}
.an-cv-avs .av{width:calc(var(--q) * 28);height:calc(var(--q) * 28);font-size:calc(var(--q) * 12)}
.an-cv-avs .av + .av{margin-left:calc(var(--q) * -7)}

.an-cv-dev svg{width:calc(var(--q) * 280);height:auto}

.an-cv-time{gap:calc(var(--q) * 14)}
.an-cv-trow{display:grid;grid-template-columns:auto minmax(0,1fr) calc(var(--q) * 62);align-items:center;gap:calc(var(--q) * 12);width:calc(var(--q) * 270)}
.an-cv-trow .av{width:calc(var(--q) * 30);height:calc(var(--q) * 30);font-size:calc(var(--q) * 12)}
.an-cv-tbar{position:relative;height:calc(var(--q) * 10);overflow:hidden;border-radius:99px;background:rgba(183,168,255,.1)}
.an-cv-tbar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--lav));transform-origin:0 50%;transform:scaleX(var(--w))}
.an-cv-trow b{font:600 calc(var(--q) * 13)/1 var(--display);color:var(--paper);text-align:right;white-space:nowrap}

.an-cv-decks{gap:calc(var(--q) * 8)}
.an-cv-deck{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(var(--q) * 12);width:calc(var(--q) * 290);padding:calc(var(--q) * 9) calc(var(--q) * 12);border-radius:calc(var(--q) * 12);background:rgba(18,15,46,.88);box-shadow:inset 0 0 0 1px var(--line)}
.an-cv-deck.is-on{box-shadow:inset 0 0 0 1px rgba(183,168,255,.48),0 0 0 calc(var(--q) * 4) rgba(123,92,255,.12)}
.an-cv-deck:not(.is-on) .mini-deck{opacity:.7}
.an-cv-dtext{display:grid;gap:calc(var(--q) * 4);min-width:0}
.an-cv-dname{overflow:hidden;font:500 calc(var(--q) * 13)/1.2 var(--sans);color:var(--paper);white-space:nowrap;text-overflow:ellipsis}
.an-cv-dst{display:inline-flex;align-items:center;gap:calc(var(--q) * 6);font-size:calc(var(--q) * 12);line-height:1.2;color:var(--muted);white-space:nowrap}
.an-cv-deck.is-on .an-cv-dst{color:var(--lav)}

.an-cv-clean{gap:calc(var(--q) * 8)}
.an-cv-crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--q) * 12);width:calc(var(--q) * 270);padding:calc(var(--q) * 11) calc(var(--q) * 14);border-radius:calc(var(--q) * 12);background:rgba(18,15,46,.88);box-shadow:inset 0 0 0 1px var(--line)}
.an-cv-crow i{width:calc(var(--q) * 10);height:calc(var(--q) * 10);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--q) * 2) rgba(183,168,255,.4)}
.an-cv-crow.is-on{box-shadow:inset 0 0 0 1px rgba(183,168,255,.48),0 0 0 calc(var(--q) * 4) rgba(123,92,255,.12)}
.an-cv-crow.is-on i{background:var(--violet);box-shadow:none}
.an-cv-cname{font:500 calc(var(--q) * 13)/1.2 var(--sans);color:var(--paper);white-space:nowrap}
.an-cv-crow.is-off .an-cv-cname{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(183,168,255,.45)}
.an-cv-state{font:500 calc(var(--q) * 12)/1 var(--sans);color:var(--muted);white-space:nowrap}
.an-cv-crow.is-on .an-cv-state{color:var(--lav)}

/* ---------- Entrances: section visuals assemble when they reveal ---------- */
.js .an-opens .an-ev{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(250ms + var(--k) * 260ms)}
.js .an-opens .an-tl::before{transform:scaleY(0);transition:transform 1.1s var(--ease) .2s}
.js .is-in .an-opens .an-ev{opacity:1;transform:none}
.js .is-in .an-opens .an-tl::before{transform:none}

.js .an-pg-bar i{transform:var(--from);transition:transform .9s var(--ease);transition-delay:calc(300ms + var(--k) * 90ms)}
.js .an-pg-time{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(800ms + var(--k) * 90ms)}
.js .an-attn.is-in .an-pg-bar i{transform:none}
.js .an-attn.is-in .an-pg-time{opacity:1}

.js .an-rf{transform:scaleY(0);transition:transform .7s var(--ease);transition-delay:calc(250ms + var(--k) * 70ms)}
.js .an-reach b{opacity:0;transition:opacity .4s var(--ease);transition-delay:calc(650ms + var(--k) * 70ms)}
.js .an-lane-line{transform:scaleX(0);transition:transform 1s var(--ease);transition-delay:calc(500ms + var(--k) * 300ms)}
.js .an-lane-end{opacity:0;transform:scale(.4);transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:calc(1300ms + var(--k) * 300ms)}
.js .is-in .an-rf,.js .is-in .an-lane-line{transform:none}
.js .is-in .an-reach b{opacity:1}
.js .is-in .an-lane-end{opacity:1;transform:none}

.js .an-fnode,.js .an-visits{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .an-fnode.is-d{transition-delay:.7s}
.js .an-visits{transition-delay:1s}
.js .is-in .an-fnode,.js .is-in .an-visits{opacity:1;transform:none}

.js .an-note{opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(350ms + var(--k) * 450ms)}
.js .is-in .an-note{opacity:1;transform:none}

.js .an-spot b{opacity:0;transform:scale(.55);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(300ms + var(--k) * 160ms)}
.js .an-hs-tag{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:1.2s}
.js .is-in .an-spot b,.js .is-in .an-hs-tag{opacity:1;transform:none}
.js .an-depth-list li{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .an-depth-list li:nth-child(2){transition-delay:.12s}
.js .an-depth-list li:nth-child(3){transition-delay:.24s}
.js .an-depth-list li:nth-child(4){transition-delay:.36s}
.js .is-in .an-depth-list li{opacity:1;transform:none}

/* ---------- Loops (paused off screen by site.js, static under reduced motion) ---------- */
@keyframes an-grow{from{transform:scaleY(0)}}
@keyframes an-glow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes an-breathe{0%,100%{transform:scale(.95)}50%{transform:scale(1.05)}}
/* Emma scrolls in two moves to the deepest point, rests, then the replay starts over */
@keyframes an-phs{0%,10%{transform:translateY(0)}32%,44%{transform:translateY(calc(var(--u) * -118))}64%,90%{transform:translateY(calc(var(--u) * -214))}97%,100%{transform:translateY(0)}}
@keyframes an-phbar{0%,10%{transform:translateY(0)}32%,44%{transform:translateY(28%)}64%,90%{transform:translateY(51%)}97%,100%{transform:translateY(0)}}
@keyframes an-fold{0%,62%{opacity:0}68%,90%{opacity:1}95%,100%{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .an-row{animation:intro .7s var(--ease) both;animation-delay:calc(520ms + var(--r) * 160ms)}
  .an-track i::before{animation:an-grow .5s var(--ease) both;animation-delay:calc(760ms + var(--r) * 160ms + var(--t) * 60ms)}
  .an-pg.is-top .an-pg-bar::after{animation:an-glow 3.2s ease-in-out infinite}
  .an-spot{animation:an-breathe 5.6s ease-in-out infinite;animation-delay:calc(var(--k) * -1.3s)}
  .an-ph-scroll{animation:an-phs 9s var(--ease) infinite}
  .an-ph-bar i{animation:an-phbar 9s var(--ease) infinite}
  .an-ph-fold{animation:an-fold 9s linear infinite}
}

@media (prefers-reduced-motion:reduce){
  .js .an-opens .an-ev,.js .an-fnode,.js .an-visits,.js .an-note,.js .an-pg-time,.js .an-reach b,.js .an-lane-end,.js .an-spot b,.js .an-hs-tag,.js .an-depth-list li{opacity:1;transform:none}
  .js .an-opens .an-tl::before,.js .an-pg-bar i,.js .an-rf,.js .an-lane-line{transform:none}
}