/* ============================================================
   HUB ORBITAL — engine CSS (clone da animação do ClickUp Brain)
   Reimplementação própria a partir de spec medida (2026-07-23):
   geometrias, durações e easings 1:1 com o original; cores e
   conteúdo tematizáveis por CSS vars (tokens abaixo).

   Estrutura montada por _orbital-engine.js:
     .plo                        raiz (estado .is-inview = liga loops)
     └ .plo-wrap.plo-reveal      720px central (estado .is-rev)
       ├ .plo-stage              palco 1:1, scale(.67), margens -16.5%
       │ ├ canvas.plo-canvas     4 pontos pulsantes (rAF)
       │ ├ .plo-lane…            braços polares (trilhos + bits + chips)
       │ └ .plo-core             lockup central (logo + kicker + nome)
       ├ .plo-cv                 faixa "converge" 100vw (radar, tickers,
       │                         feed de memória, fios SVG, coração)
       ├ .plo-axes               labels dos 4 eixos (camada scale .67)
       ├ .plo-panels             4 painéis de canto + fios conectores
       │                         (estados .is-drawn/.is-settled/.is-lit)
       └ .plo-tips               tooltips dos itens (hoisted p/ FORA dos
                                 painéis — ver nota na seção 6)
   ============================================================ */

/* ---------- 0. tokens (default = valores do original) ---------- */
.plo{
  --plo-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* cor-assinatura (RGB triplet p/ compor alphas) + derivadas */
  --plo-g:66,204,119;              /* verde primário  (#42cc77) */
  --plo-g-bright:#93ecb7;          /* verde claro */
  --plo-radar-rgb:20,224,138;      /* verde do radar */
  --plo-err:#ff3b3b;               /* ✗ */
  --plo-err-glow:rgba(255,59,59,.75);

  --plo-bg:#030308;                /* fundo do palco */
  --plo-txt-hi:#eee;
  --plo-txt-mid:#b4b4b4;
  --plo-txt-low:#7b7b7b;
  --plo-border:#2a2a2a;
  --plo-chip-bg:rgba(9,11,16,.82);
  --plo-panel-bg:linear-gradient(180deg,rgba(8,20,14,.82),rgba(6,12,10,.72));
  --plo-tip-bg:rgba(4,10,8,.97);
  --plo-panel-txt:#c8e8d6;
  --plo-panel-name:#e8fff1;
  --plo-tip-desc:#dff6e8;
  --plo-backplate:3,12,8;          /* triplet do text-shadow escuro */
  --plo-logo-glow:rgba(var(--plo-g),.85);

  /* geometria (px de "stage" viram tela ×.67) */
  --plo-core-half:69px;
  --plo-ring-r:calc(var(--plo-core-half)/0.67);
  --plo-gap-top:175px;
  --plo-gap-bottom:175px;
  --plo-gap-left:150px;
  --plo-gap-right:195px;
  --plo-r-top:calc(var(--plo-ring-r) + var(--plo-gap-top));
  --plo-r-bottom:calc(var(--plo-ring-r) + var(--plo-gap-bottom));

  /* converge */
  --plo-wire:clamp(150px,19vw,340px);
  --plo-wire-out:max(146px,calc(var(--plo-wire)*0.6));
  --plo-wire-in:max(243px,var(--plo-wire));
  --plo-radar-d:clamp(297px,35.6vw,370px);

  position:relative;
  font-family:var(--plo-mono);
  -webkit-font-smoothing:antialiased;
}

/* ---------- 1. camadas ---------- */
.plo-wrap{position:relative;display:flow-root;width:100%;max-width:720px;margin-inline:auto}
/* z-index 3 (acima do converge z2): o lockup central pinta NÍTIDO por
   cima do glow/coração — sem isso o logo afunda no brilho e vira blob */
.plo-stage{
  position:relative;z-index:3;width:100%;aspect-ratio:1/1;margin-block:-16.5%;
  pointer-events:none;transform:scale(.67);transform-origin:50% 50%;
}
.plo-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.plo-axes{
  position:absolute;left:50%;top:50%;z-index:10;width:100%;aspect-ratio:1/1;
  pointer-events:none;transform:translate(-50%,-50%) scale(.67);
}

/* ---------- 2. núcleo ---------- */
.plo-core{
  position:absolute;left:50%;top:50%;z-index:3;display:flex;flex-direction:column;
  gap:2px;align-items:center;transform:translate(-50%,-50%) translateY(7px);
}
.plo-core-logo{
  width:66px;height:66px;margin-bottom:3px;
  filter:drop-shadow(0 0 6px var(--plo-logo-glow)) drop-shadow(0 0 13px rgba(var(--plo-g),.5));
}
/* variante: logo pulsando (config core.pulse) — em fase com o glow 3.2s */
.plo-core--pulse .plo-core-logo{animation:plo-logo-pulse 3.2s ease-in-out infinite}
.plo-core-logo img,.plo-core-logo svg{display:block;width:100%;height:100%}
.plo-core-k,.plo-core-v{
  color:var(--plo-txt-hi);
  text-shadow:0 0 5px rgba(var(--plo-backplate),.95),0 0 9px rgba(var(--plo-backplate),.9),0 1px 2px rgba(0,0,0,.85);
}
.plo-core-k{order:-1;font-size:16px;letter-spacing:.3em;transform:translateY(-5px)}
.plo-core-v{font-size:21px;letter-spacing:.02em}
.plo-core-v sup{vertical-align:super;font-size:.62em;line-height:0}

/* ---------- 3. labels de eixo ---------- */
/* width:max-content: sem isso, label posicionado por left:50% encolhe
   pro espaço disponível e quebra linha por ACIDENTE (shrink-to-fit) */
.plo-axis{
  position:absolute;z-index:1;display:flex;flex-direction:column;gap:3px;align-items:center;
  text-align:center;white-space:nowrap;width:max-content;
  transform:translate(-50%,-50%);isolation:isolate;
}
.plo-axis--top{left:50%;top:calc(50% - var(--plo-r-top))}
.plo-axis--bottom{left:50%;top:calc(50% + var(--plo-r-bottom))}
.plo-axis--left{left:calc(50% - var(--plo-ring-r) - var(--plo-gap-left));top:50%}
.plo-axis--right{left:calc(50% + var(--plo-ring-r) + var(--plo-gap-right));top:50%}
.plo-axis-text{
  position:relative;display:inline-block;isolation:isolate;
  color:var(--plo-txt-mid);font-size:21px;line-height:21px;letter-spacing:.84px;
  text-transform:uppercase;white-space:pre-line;
  text-shadow:0 0 5px rgba(var(--plo-backplate),.95),0 0 9px rgba(var(--plo-backplate),.9);
}
.plo-axis-text::before{
  content:"";position:absolute;z-index:-1;inset-block:-.1em;inset-inline:-.4em;
  border-radius:5px;background:rgba(0,0,0,.75);filter:blur(18px);
}

/* ---------- 4. braços polares (lanes) ---------- */
.plo-lane{position:absolute;z-index:2;width:0;height:0;pointer-events:none}
.plo-lane--models{left:50%;top:calc(50% + var(--plo-ring-r))}
.plo-lane--selfimp{left:50%;top:calc(50% + 15px)}
.plo-lane--vline{left:50%;top:50%}
.plo-lane--vlineup{left:50%;top:11%}
.plo-lane--rightout{left:50%;top:50%}

.plo-arm{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--plo-rot));transform-origin:0 0}
.plo-rail{position:absolute;width:calc(var(--plo-r)*1px);height:0}
.plo-line{
  position:absolute;width:100%;height:0;transform:translateY(-.75px);
  border-top:1.5px dashed rgba(var(--plo-g),.5);
}

/* trilho GROSSO tracejado dos feeds externos (fileira de modelos) */
.plo-lane--models .plo-line{
  height:2.7px;border:0;transform:translateY(-50%);
  background-image:repeating-linear-gradient(90deg,rgba(var(--plo-g),.7) 0 6px,transparent 6px 15px);
  filter:drop-shadow(0 0 6px rgba(var(--plo-g),.55));
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0,#000 50%,#000);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.25) 0,#000 50%,#000);
  animation:plo-feed-dash 1.4s linear infinite;
}
.plo-lane--models .plo-bit{display:none}

/* trilhos parciais das lanes internas (segmentos com máscara) */
.plo-lane--inner .plo-line{width:auto;left:var(--plo-line-left,58%);right:0}
.plo-lane--selfimp .plo-line{
  right:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 90px,#000 120px);
  mask-image:linear-gradient(90deg,transparent 0 90px,#000 120px);
}
.plo-lane--vline .plo-line{
  -webkit-mask-image:linear-gradient(90deg,transparent 0 98px,#000 118px);
  mask-image:linear-gradient(90deg,transparent 0 98px,#000 118px);
}
.plo-lane--rightout .plo-line{
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 90px,#000 120px);
  mask-image:linear-gradient(90deg,transparent 0 90px,#000 120px);
}

/* bits (partículas) */
.plo-bit{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:rgb(var(--plo-g));
  box-shadow:0 0 7px rgba(var(--plo-g),.55),0 0 14px rgba(var(--plo-g),.6);
  transform:translateY(-50%);will-change:transform,opacity;
}
.plo-bit--out{animation:plo-bit-out var(--plo-bit-dur,5s) linear infinite both}
.plo-bit--in{animation:plo-bit-in var(--plo-bit-dur,5s) linear infinite both}
.plo-lane--inner .plo-bit--in{animation-name:plo-bit-in-inner}
.plo-lane--inner .plo-bit--out{animation-name:plo-bit-out-inner}
.plo-lane--selfimp .plo-bit--out{animation-name:plo-bit-out-si}

/* bits ✓/✗ (eixo vertical) */
.plo-lane--mark .plo-bit{overflow:visible;border-radius:0;background:transparent;box-shadow:none}
.plo-lane--mark .plo-bit::before{
  content:"✓";position:absolute;left:0;top:0;
  color:rgb(var(--plo-g));font-family:ui-sans-serif,system-ui,sans-serif;
  font-weight:700;font-size:18.4px;line-height:1;
  text-shadow:0 0 5px rgba(var(--plo-g),.7);
  transform:translate(-50%,-50%) rotate(calc(var(--plo-rot)*-1));
}
.plo-lane--mark .plo-bit:nth-of-type(2n)::before{
  content:"✗";color:var(--plo-err);text-shadow:0 0 5px var(--plo-err-glow);
}

/* chips/medalhões na ponta do braço (fileira de modelos) */
.plo-chip{
  position:absolute;left:calc(var(--plo-r)*1px);top:0;display:grid;place-items:center;
  width:calc(var(--plo-chip,58)*1px);height:calc(var(--plo-chip,58)*1px);
  border:1px solid rgba(var(--plo-g),.38);border-radius:50%;
  background:var(--plo-chip-bg);backdrop-filter:blur(3px);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.45),0 0 18px rgba(var(--plo-g),.18);
  transform:translate(-50%,-50%) rotate(calc(var(--plo-rot)*-1));
}
.plo-chip img{width:56%;height:56%;display:block}
.plo-chip .plo-glyph{display:grid;place-items:center;width:100%;height:100%;color:var(--plo-g-bright)}
.plo-chip .plo-glyph svg{width:58%;height:58%;filter:drop-shadow(0 0 5px rgba(var(--plo-g),.55))}

/* ---------- 5. converge (faixa central 100vw) ---------- */
.plo-cv{
  position:absolute;left:50%;top:50%;z-index:2;width:100vw;
  height:clamp(196px,24vw,244px);transform:translate(-50%,-50%);
  isolation:isolate;pointer-events:none;
  background:radial-gradient(ellipse 62% 86% at 50% 50%,rgba(var(--plo-g),.1),transparent 70%);
}
.plo-flow{position:absolute;inset:0;z-index:0}
.plo-zone{position:absolute;top:0;bottom:0;overflow:hidden}
.plo-zone--in{
  display:flex;flex-direction:column;gap:12px;justify-content:space-around;
  left:0;right:calc(50% + var(--plo-core-half) + var(--plo-wire-in));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 88%,transparent);
}
@media(min-width:1025px){.plo--panels .plo-zone--in{gap:8px;justify-content:center;transform:translateY(6px)}}
.plo-zone--out{
  left:calc(50% + 238px);right:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent);
}

/* tickers de chips */
.plo-track{
  position:relative;overflow:hidden;width:100%;height:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 78%,transparent);
}
/* gap por margem no item (não no run): a largura do conteúdo duplicado
   fecha exata em 2× o período e o translate -50% emenda sem salto */
.plo-track-run{
  display:inline-flex;align-items:center;height:100%;white-space:nowrap;
  will-change:transform;animation:plo-ticker var(--plo-tick-dur,30s) linear infinite;
}
.plo-pill{
  margin-right:22px;
  display:inline-flex;gap:8px;align-items:center;padding:5px 12px 5px 10px;
  border:1px solid var(--plo-border);border-radius:999px;
  background:rgba(255,255,255,.02);color:var(--plo-txt-mid);
  font-size:11px;line-height:1;backdrop-filter:blur(2px);
}
.plo-pill-type{color:var(--plo-txt-low);text-transform:lowercase}
.plo-pill-label{color:var(--plo-txt-hi)}
.plo-orb{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--plo-orb,rgb(var(--plo-g)));
  box-shadow:0 0 10px var(--plo-orb-glow,rgba(var(--plo-g),.85));
}

/* feed de memória (saída, direita) */
.plo-mem{position:absolute;inset:0;overflow:hidden}
.plo-mem-run{
  position:absolute;left:0;top:50%;display:inline-flex;
  color:rgb(var(--plo-g));font-size:14px;white-space:nowrap;
  text-shadow:0 0 12px rgba(var(--plo-g),.5);
  transform:translateY(-50%);will-change:transform;
  animation:plo-mem-scroll var(--plo-mem-dur,13s) linear infinite;
}
.plo-mem-item{display:inline-flex;gap:8px;margin-right:36px}
.plo-mem-arrow{color:rgb(var(--plo-g));opacity:.55}
.plo-mem-text{letter-spacing:.02em}

/* fios SVG — seletores com 2 classes de propósito: páginas-host (kit)
   têm regra genérica `.dgm__stage svg{width:100%;height:auto}` que
   venceria 1 classe e estouraria a largura das vias */
.plo-cv .plo-wires{position:absolute;top:50%;z-index:1;height:100%;transform:translateY(-50%);pointer-events:none}
/* 3 vias limpas: invisível na zona dos chips (início), força no vão
   aberto, morrendo JÁ NO LABEL do eixo (~70% do vão) — nada de traço
   atrás dos badges nem depois do label (feedback Thiago 2026-07-23) */
.plo-cv .plo-wires--in{
  right:calc(50% + var(--plo-core-half));width:var(--plo-wire-in);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 5%,#000 13%,#000 52%,rgba(0,0,0,.14) 62%,transparent 68%,transparent 76%,rgba(0,0,0,.5) 84%,rgba(0,0,0,.5) 100%);
  mask-image:linear-gradient(90deg,transparent 0 5%,#000 13%,#000 52%,rgba(0,0,0,.14) 62%,transparent 68%,transparent 76%,rgba(0,0,0,.5) 84%,rgba(0,0,0,.5) 100%);
}
@media(min-width:1025px){.plo--panels .plo-cv .plo-wires--in{height:121px}}
.plo-cv .plo-wires--split{
  left:0;right:0;width:100%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 72px,#000 100px);
  mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent 72px,#000 100px);
}
.plo-wires path{
  fill:none;stroke:rgba(var(--plo-g),.7);stroke-width:1.8;vector-effect:non-scaling-stroke;
  stroke-dasharray:4 6;filter:drop-shadow(0 0 4px rgba(var(--plo-g),.55));
  animation:plo-dash 1.4s linear infinite;
}

/* coração (glow + anel + ponto) */
.plo-heart{
  position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;
  width:calc(var(--plo-core-half)*2);height:calc(var(--plo-core-half)*2);
  transform:translate(-50%,-50%);
}
.plo-heart-glow{
  position:absolute;inset:-119px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(var(--plo-g),.55) 0,transparent 65%);
  opacity:.7;filter:blur(18px);animation:plo-glow 3.2s ease-in-out infinite;
}
.plo-heart-ring{
  position:absolute;inset:-1.625px;border:1.5px solid rgba(var(--plo-g),.6);border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(var(--plo-g),.22),rgba(3,3,8,.65));
  box-shadow:0 0 0 1px rgba(var(--plo-g),.18),inset 0 0 16px rgba(var(--plo-g),.35);
}
.plo-heart-dot{
  width:16px;height:16px;border-radius:50%;background:rgb(var(--plo-g));
  box-shadow:0 0 12px rgba(var(--plo-g),.45),0 0 26px rgba(var(--plo-g),.55);
  animation:plo-pulse 1.6s ease-in-out infinite;
}

/* radar */
.plo-radar{
  position:absolute;left:50%;top:50%;z-index:0;overflow:hidden;
  width:var(--plo-radar-d);height:var(--plo-radar-d);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(var(--plo-radar-rgb),.15) 0,rgba(var(--plo-radar-rgb),.045) 34%,rgba(var(--plo-radar-rgb),0) 68%);
}
.plo-radar-rings{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle calc(var(--plo-radar-d)*.13),transparent calc(100% - 1px),rgba(var(--plo-radar-rgb),.05) calc(100% - 1px) 100%,transparent 100%),
    radial-gradient(circle calc(var(--plo-radar-d)*.21),transparent calc(100% - 1px),rgba(var(--plo-radar-rgb),.06) calc(100% - 1px) 100%,transparent 100%),
    radial-gradient(circle calc(var(--plo-radar-d)*.30),transparent calc(100% - 1px),rgba(var(--plo-radar-rgb),.07) calc(100% - 1px) 100%,transparent 100%),
    radial-gradient(circle calc(var(--plo-radar-d)*.40),transparent calc(100% - 1px),rgba(var(--plo-radar-rgb),.06) calc(100% - 1px) 100%,transparent 100%);
}
.plo-radar-sweep{
  position:absolute;inset:0;border-radius:50%;transform-origin:50% 50%;will-change:transform;
  background:conic-gradient(from 0deg,
    rgba(var(--plo-radar-rgb),0) 0deg 300deg,
    rgba(var(--plo-radar-rgb),.04) 326deg,
    rgba(var(--plo-radar-rgb),.12) 348deg,
    rgba(var(--plo-radar-rgb),.26) 360deg);
  animation:plo-sweep 20s linear infinite;
}
.plo-radar-line{
  position:absolute;left:50%;top:0;width:1px;height:50%;transform:translateX(-.5px);
  background:linear-gradient(to top,rgba(var(--plo-radar-rgb),.02) 0,rgba(var(--plo-radar-rgb),.12) 100%);
}
.plo-radar-ping{
  position:absolute;left:50%;top:50%;width:40%;height:40%;
  border:1px solid rgba(var(--plo-radar-rgb),.3);border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.55);will-change:transform,opacity;
  animation:plo-ping 9s ease-out infinite;
}
.plo-radar-ping:nth-of-type(2){animation-delay:3s}
.plo-radar-ping:nth-of-type(3){animation-delay:6s}

/* ---------- 6. painéis de canto ---------- */
.plo-panels{position:absolute;inset:0;z-index:7;pointer-events:none}
.plo-links{position:absolute;inset:0;overflow:visible;pointer-events:none}
.plo-link{
  opacity:0;fill:none;stroke:rgb(var(--plo-g));stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 3px rgba(var(--plo-g),.5));
}
.is-drawn .plo-link{
  opacity:.5;stroke-dashoffset:0;
  transition:stroke-dashoffset .95s cubic-bezier(.4,0,.2,1) .1s,opacity .5s ease .1s;
}
.is-settled .plo-link{opacity:.18}
.is-drawn .plo-link.is-lit,.is-settled .plo-link.is-lit{opacity:.95;stroke-width:1.4}

.plo-panel{
  position:absolute;width:232px;padding:13px 14px 14px;
  border:1px solid rgba(var(--plo-g),.22);border-radius:10px;
  background:var(--plo-panel-bg);backdrop-filter:blur(3px);
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 18px 40px -22px rgba(0,0,0,.9);
  pointer-events:auto;
}
.plo-panel--tl{left:-188px;top:-21px}
.plo-panel--tr{right:-188px;top:-6px}
.plo-panel--bl{left:-208px;bottom:-6px}
.plo-panel--br{right:-178px;bottom:-6px}
.is-drawn .plo-panel{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(.25s + var(--plo-pi)*.12s);
}
.is-settled .plo-panel{opacity:.36;transition:opacity .7s ease}
.is-drawn .plo-panel.is-lit,.is-settled .plo-panel.is-lit{
  border-color:rgba(var(--plo-g),.55);opacity:1;
  box-shadow:0 0 0 1px rgba(var(--plo-g),.25),0 0 28px -6px rgba(var(--plo-g),.45),0 18px 40px -22px rgba(0,0,0,.9);
}

.plo-panel-head{
  display:flex;gap:7px;align-items:center;margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid rgba(var(--plo-g),.16);
}
.plo-panel-num{
  padding:2px 5px;border:1px solid rgba(var(--plo-g),.35);border-radius:4px;
  color:var(--plo-g-bright);font-weight:600;font-size:10px;letter-spacing:.08em;
}
.plo-panel-name{color:var(--plo-panel-name);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.plo-panel-items{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.plo-item{position:relative;opacity:0;transform:translateX(-4px)}
.is-drawn .plo-item{
  opacity:1;transform:none;
  transition:opacity .4s ease,transform .4s ease;
  transition-delay:calc(.45s + var(--plo-pi)*.12s + var(--plo-i)*.1s);
}
.plo-node{
  display:flex;gap:8px;align-items:center;width:100%;padding:4px 6px;border:0;
  border-radius:6px;background:transparent;color:var(--plo-panel-txt);
  font:inherit;cursor:default;text-align:left;
}
.plo-node:hover,.plo-node:focus-visible{background:rgba(var(--plo-g),.1);outline:none}
.plo-dot{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:rgb(var(--plo-g));box-shadow:0 0 6px rgba(var(--plo-g),.8);
}
.plo-node:hover .plo-dot,.plo-node:focus-visible .plo-dot{background:var(--plo-g-bright)}
.plo-label{font-size:11.5px;letter-spacing:.02em;white-space:nowrap}

/* Tooltips vivem em .plo-tips, camada IRMÃ dos painéis (hoist feito pelo
   JS). Motivo: backdrop-filter de DESCENDENTE de elemento que também tem
   backdrop-filter é no-op no Chromium — o painel vira "backdrop root" e o
   tooltip filho amostra uma imagem vazia (nenhum valor de blur muda nada).
   Fora da subárvore do painel — e sem ancestral com filter/opacity<1/mask —
   o root volta a ser a página e o blur pega tudo pintado atrás: vidro do
   painel, texto do painel e diagrama. A âncora chega por CSS vars
   (--plo-tip-x/yt/yb, setadas no hover); a DIREÇÃO fica no CSS por corner:
   default abre pra BAIXO (âncora yb), --bl/--br abrem pra CIMA (yt). */
.plo-tips{position:absolute;inset:0;z-index:11;pointer-events:none}
.plo-tip{
  position:absolute;left:var(--plo-tip-x,50%);top:calc(var(--plo-tip-yb,50%) + 6px);
  display:flex;flex-direction:column;gap:6px;width:210px;padding:9px 11px;
  border:1px solid rgba(var(--plo-g),.4);border-radius:8px;background:var(--plo-tip-bg);
  box-shadow:0 0 22px -6px rgba(var(--plo-g),.5),0 16px 30px -18px #000;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,0) translateY(4px);
  transition:opacity .18s ease,transform .18s ease;
}
.plo-tip.is-open{opacity:1;visibility:visible;transform:translate(-50%,0) translateY(0)}
.plo-tip--bl,.plo-tip--br{
  top:calc(var(--plo-tip-yt,50%) - 6px);
  transform:translate(-50%,-100%) translateY(-4px);
}
.plo-tip--bl.is-open,.plo-tip--br.is-open{transform:translate(-50%,-100%) translateY(0)}
.plo-tip-desc{color:var(--plo-tip-desc);font-size:11px;line-height:1.45}
.plo-tip-tag{color:var(--plo-g-bright);font-size:9.5px;letter-spacing:.1em}

/* ---------- 7. entrada (reveal) + gate de viewport ---------- */
.plo-reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .64s cubic-bezier(.22,1,.36,1),transform .64s cubic-bezier(.22,1,.36,1);
}
.plo-reveal.is-rev{opacity:1;transform:translateY(0)}

.plo:not(.is-inview) .plo-bit,
.plo:not(.is-inview) .plo-heart-dot,
.plo:not(.is-inview) .plo-heart-glow,
.plo:not(.is-inview) .plo-mem-run,
.plo:not(.is-inview) .plo-radar-ping,
.plo:not(.is-inview) .plo-radar-sweep,
.plo:not(.is-inview) .plo-track-run,
.plo:not(.is-inview) .plo-wires path,
.plo:not(.is-inview) .plo-core-logo,
.plo:not(.is-inview) .plo-line{animation-play-state:paused}

/* ---------- 8. keyframes ---------- */
@keyframes plo-ticker{0%{transform:translate3d(-50%,0,0)}100%{transform:translate3d(0,0,0)}}
@keyframes plo-mem-scroll{0%{transform:translate3d(-50%,-50%,0)}100%{transform:translate3d(0,-50%,0)}}
@keyframes plo-dash{to{stroke-dashoffset:-10}}
@keyframes plo-feed-dash{to{background-position:-15px 0}}
@keyframes plo-glow{0%,100%{opacity:.34;transform:scale(1)}50%{opacity:.58;transform:scale(1.08)}}
@keyframes plo-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.06;transform:scale(.72)}}
@keyframes plo-sweep{to{transform:rotate(1turn)}}
@keyframes plo-logo-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes plo-ping{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}12%{opacity:.45}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@keyframes plo-bit-out{
  0%{opacity:0;transform:translateY(-50%) scale(.5)}
  15%{opacity:1}85%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--plo-r)*1px),-50%) scale(1)}
}
@keyframes plo-bit-in{
  0%{opacity:0;transform:translate(calc(var(--plo-r)*1px),-50%) scale(1)}
  15%{opacity:1}85%{opacity:1}
  100%{opacity:0;transform:translateY(-50%) scale(.5)}
}
@keyframes plo-bit-in-inner{
  0%{opacity:0;transform:translate(calc(var(--plo-r)*1px),-50%) scale(1)}
  18%{opacity:1}78%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--plo-r)*var(--plo-bit-end,.58)*1px),-50%) scale(.5)}
}
@keyframes plo-bit-out-inner{
  0%{opacity:0;transform:translate(calc(var(--plo-r)*var(--plo-bit-start,.16)*1px),-50%) scale(.5)}
  18%{opacity:1}82%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--plo-r)*1px),-50%) scale(1)}
}
@keyframes plo-bit-out-si{
  0%{opacity:0;transform:translate(calc(var(--plo-r)*var(--plo-bit-start,.28)*1px),-50%) scale(.5)}
  18%{opacity:1}82%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--plo-r)*var(--plo-bit-end,.9)*1px),-50%) scale(1)}
}

/* ---------- 9. responsivo ---------- */
@media(max-width:1024.9px){.plo-panels,.plo-tips{display:none}}
@media(max-width:1180px){
  .plo-panel{width:200px}
  .plo-panel--tl{left:-130px}.plo-panel--bl{left:-150px}
  .plo-panel--tr{right:-130px}.plo-panel--br{right:-120px}
}
@media(max-width:981px){.plo{--plo-gap-right:120px}}
@media(max-width:980px){
  .plo-wrap{max-width:560px}
  .plo-zone--out{left:calc(50% + max(180px,calc(var(--plo-core-half) + var(--plo-wire-out) - 35px)))}
  .plo-lane--rightout .plo-arm{--plo-r:188!important}
}
@media(max-width:760px){
  .plo{
    --plo-core-half:59px;
    --plo-gap-top:136px;--plo-gap-bottom:119px;--plo-gap-left:80px;--plo-gap-right:63px;
    --plo-wire:clamp(64px,11vw,130px);--plo-wire-in:4px;
    --plo-radar-d:clamp(290px,49.5vw,330px);
  }
  .plo-cv{height:clamp(210px,38vw,230px)}
  .plo-zone--in{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 48%,transparent 72%);
    mask-image:linear-gradient(90deg,transparent,#000 9%,#000 48%,transparent 72%);
  }
  .plo-track{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 46%,transparent 78%);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 46%,transparent 78%);
  }
  .plo-zone--out{left:calc(50% + 115px)}
  .plo-axis-text{font-size:18px;line-height:18px}
  .plo-axis--right .plo-axis-text::before{inset-inline-end:0;filter:blur(8px)}
  .plo-core-k{font-size:12px;letter-spacing:.15em}
  .plo-core-v{font-size:15px}
  .plo-lane--models .plo-arm{--plo-r:105!important}
  .plo-lane--models .plo-arm:nth-child(2){--plo-r:75!important}
  .plo-lane--models .plo-chip{--plo-chip:52}
  .plo-lane--selfimp .plo-arm{--plo-r:262!important}
  .plo-lane--vline .plo-arm{--plo-r:120!important}
  /* com --plo-wire-in:4px as 3 vias viram um risco vertical espremido
     colado no anel (o original tem o mesmo artefato) — melhor sumir */
  .plo-cv .plo-wires--in{display:none}
}
@media(max-width:520px){
  .plo{
    --plo-core-half:48px;
    --plo-gap-top:96px;--plo-gap-bottom:100px;--plo-gap-left:72px;--plo-gap-right:58px;
    --plo-wire:52px;--plo-radar-d:clamp(248px,49.5vw,277px);
  }
  .plo-cv{height:180px}
  .plo-pill{padding:4px 10px 4px 8px;font-size:10px}
  .plo-mem-run{font-size:12px}
  .plo-mem-item{margin-right:28px}
  .plo-bit{width:4px;height:4px}
  .plo-lane--models .plo-arm{--plo-r:92!important}
  .plo-lane--models .plo-arm:nth-child(2){--plo-r:66!important}
  .plo-lane--models .plo-chip{--plo-chip:44}
  .plo-lane--selfimp .plo-arm{--plo-r:204!important}
  .plo-lane--rightout .plo-arm{--plo-r:160!important}
  .plo-lane--vline .plo-arm{--plo-r:105!important}
}

/* ---------- 10. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .plo-reveal{opacity:1;transform:none;transition:none}
  .plo-bit{animation:none!important;opacity:.85;transform:translate(calc(var(--plo-r)*var(--plo-bit-rest,.5)*1px),-50%)}
  .plo-lane--inner .plo-bit--in{transform:translate(calc(var(--plo-r)*.85*1px),-50%)}
  .plo-track-run{animation:none!important;transform:translate3d(-25%,0,0)}
  .plo-mem-run{animation:none!important;transform:translate3d(-25%,-50%,0)}
  .plo-heart-dot,.plo-heart-glow,.plo-radar-sweep,.plo-wires path,.plo-line,.plo-core-logo{animation:none!important}
  .plo-heart-glow{opacity:.6}
  .plo-radar-ping{display:none}
  .plo-link,.plo-panel,.plo-item,.plo-tip{transition:none!important}
}