/* §337 — Observatório. O desenho mora em `.sabe-totem`; a faixa «neste assunto» e o
   fallback ficam fora dele (painel aberto e relatório aberto). A lâmina segue os
   tokens do SabeTudo. O palco (Constelação, Totem, Órbita) é sempre o espaço
   sideral — ver .tt-stage. Doc: docs/laws/337-totem-mapa-do-que-a-base-sabe.md */
.sabe-totem{
  --tt-fg:var(--paper); --tt-muted:var(--lilac); --tt-line:var(--ink-500); --tt-dot:var(--ink-600);
  --tt-stage:var(--ink); --tt-panel:var(--ink-700);
  --tt-acc:var(--tomate-soft); --tt-acc-soft:color-mix(in srgb,var(--tomate) 24%,var(--ink-700));
  --tt-core:var(--squash); --tt-core-hi:color-mix(in srgb,var(--squash) 50%,#fff); --tt-core-ink:var(--warn-ink);
  --tt-glow:color-mix(in srgb,var(--squash) 15%,transparent);
  /* §147 — pragmas dos tons fixos do desenho (SVG preto/branco, nomes distantes, vazio, selos) */
  --tt-black:#000; --tt-white:#fff; --tt-far-ink:#6e5848; --tt-void:#050201; --tt-far-nm:#9a806c; --tt-amber:#C4841A; --tt-teal:#147D6F;
  --tt-hue-shift:0; --tt-sat-scale:1;
  display:flex;flex-direction:column;gap:10px;color:var(--tt-fg);font-family:var(--body);margin:2px 0 18px}
.sabe-totem button{font:inherit;color:inherit;cursor:pointer}
.sabe-totem :focus-visible{outline:2px solid var(--tt-acc);outline-offset:2px}
.sabe-totem .tt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.sabe-totem .tt-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.sabe-totem .tt-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:calc(14px * var(--sabe-fs,1));min-height:30px}
.sabe-totem .tt-lead{color:var(--tt-muted)}
.sabe-totem .tt-crumb button{border:0;background:none;padding:3px 6px;border-radius:6px;color:var(--tomate-text-soft);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sabe-totem .tt-crumb [aria-current]{font-weight:600;padding:3px 6px}
.sabe-totem .tt-sep{color:var(--tt-muted)}
.sabe-totem .tt-find{flex:1 1 240px;min-width:min(100%,220px);max-width:480px}
.sabe-totem .tt-find input{width:100%;box-sizing:border-box;border:1px solid var(--tt-line);border-radius:99px;padding:7px 14px;background:var(--tt-stage);color:var(--tt-fg);font:inherit}
.sabe-totem .tt-find input::placeholder{color:var(--tt-muted)}
.sabe-totem .tt-seg{display:flex;border:1px solid var(--tt-line);border-radius:99px;padding:3px;background:var(--tt-panel)}
.sabe-totem .tt-seg button{border:0;background:none;border-radius:99px;padding:5px 13px;font:600 calc(13px * var(--sabe-fs,1)) var(--display);color:var(--tt-muted)}
.sabe-totem .tt-seg button[aria-pressed="true"]{background:var(--tomate);color:#fff}
.sabe-totem .tt-skies{display:flex;align-items:center;gap:5px}
.sabe-totem .tt-skies button{width:18px;height:18px;padding:0;border-radius:50%;border:2px solid transparent;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.sabe-totem .tt-skies button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.sabe-totem .tt-skies [data-sky="brasa"]{--sw:#ff7a1a}
.sabe-totem .tt-skies [data-sky="cupula"]{--sw:#8ea4c4}
.sabe-totem .tt-skies [data-sky="instrumento"]{--sw:#8a919a}
.sabe-totem .tt-skies [data-sky="luar"]{--sw:#b7a6d6}
.sabe-totem .tt-skies [data-sky="claraboia"]{--sw:#d5deea}

/* palco só até a largura que a altura comporta (1000/660); a lâmina fica com o resto */
.sabe-totem{--tt-h:clamp(380px,calc(100vh - 250px),720px)}
.sabe-totem .tt-main{display:grid;grid-template-columns:minmax(0,calc(var(--tt-h) * 1.515)) minmax(300px,1fr);gap:14px;align-items:start}
/* Espaço sideral: o desenho não acompanha tema claro nem a marca. A lâmina, fora
   daqui, continua nos tokens de .sabe-totem. */
.sabe-totem .tt-stage{
  --tt-fg:#F6E7D4; --tt-muted:#CDB39A; --tt-line:rgba(255,186,130,.34); --tt-dot:rgba(255,220,190,.8);
  --tt-stage:#10060a; --tt-panel:#2a1410;
  --tt-acc:#ffb15a; --tt-acc-soft:rgba(255,122,40,.30);
  --tt-core:#ff7a1a; --tt-core-hi:#fff3c4; --tt-core-ink:#3a1408;
  --tt-glow:rgba(255,80,20,.55);
  --tt-far-ink:#6e5848; --tt-far-nm:#9a806c;
  --tt-folio:rgba(16,6,10,.78); --tt-folio-bd:rgba(255,177,90,.42);
  border:1px solid rgba(255,170,110,.28);border-radius:var(--r);overflow:hidden;
  background-color:#10060a;
  background-image:
    radial-gradient(circle at 50% 46%, rgba(255,72,16,.24), transparent 42%),
    radial-gradient(1.3px 1.3px at 18px 26px, rgba(255,236,220,.92), transparent),
    radial-gradient(1px 1px at 84px 52px, rgba(255,206,176,.7), transparent),
    radial-gradient(1.6px 1.6px at 150px 28px, #fff8f2, transparent),
    radial-gradient(1px 1px at 36px 104px, rgba(255,176,146,.62), transparent),
    radial-gradient(1.1px 1.1px at 190px 120px, rgba(255,228,206,.6), transparent),
    radial-gradient(1.8px 1.8px at 112px 148px, rgba(255,244,230,.88), transparent);
  background-size:100% 100%, 220px 176px, 260px 198px, 330px 240px, 188px 214px, 290px 168px, 370px 268px;
  background-repeat:no-repeat, repeat, repeat, repeat, repeat, repeat, repeat}
/* Céus (§337, 2026-10-16). A Brasa é o bloco acima. Os outros só trocam o palco. */
.sabe-totem[data-ceu="cupula"]{--tt-hue-shift:188; --tt-sat-scale:.72}
.sabe-totem[data-ceu="cupula"] .tt-stage{
  --tt-fg:#e7eef8; --tt-muted:#b7c4d6; --tt-line:rgba(180,200,224,.38); --tt-dot:rgba(226,236,248,.85);
  --tt-stage:#070d18; --tt-panel:#142034;
  --tt-acc:#d5deea; --tt-acc-soft:rgba(142,164,196,.32);
  --tt-core:#8ea4c4; --tt-core-hi:#f2f6fb; --tt-core-ink:#101820;
  --tt-glow:rgba(180,200,230,.5);
  --tt-far-ink:#8ea0b4; --tt-far-nm:#a8b6c8;
  --tt-folio:rgba(7,13,24,.82); --tt-folio-bd:rgba(213,222,234,.4);
  border-color:rgba(142,164,196,.35); background-color:#070d18;
  background-image:
    radial-gradient(circle at 50% 46%, rgba(80,120,180,.22), transparent 42%),
    radial-gradient(1.3px 1.3px at 18px 26px, rgba(236,244,255,.92), transparent),
    radial-gradient(1px 1px at 84px 52px, rgba(186,206,230,.7), transparent),
    radial-gradient(1.6px 1.6px at 150px 28px, #f4f8ff, transparent),
    radial-gradient(1px 1px at 36px 104px, rgba(150,176,210,.55), transparent),
    radial-gradient(1.1px 1.1px at 190px 120px, rgba(210,224,240,.6), transparent),
    radial-gradient(1.8px 1.8px at 112px 148px, rgba(244,248,255,.88), transparent)}
.sabe-totem[data-ceu="cupula"] .tn.tk-core .tt-body{filter:hue-rotate(188deg) saturate(.7)}
.sabe-totem[data-ceu="instrumento"]{--tt-hue-shift:198; --tt-sat-scale:.32}
.sabe-totem[data-ceu="instrumento"] .tt-stage{
  --tt-fg:#eceff3; --tt-muted:#b4bac3; --tt-line:rgba(180,188,198,.32); --tt-dot:rgba(230,234,238,.8);
  --tt-stage:#0c0e11; --tt-panel:#1c2026;
  --tt-acc:#c5ced8; --tt-acc-soft:rgba(143,156,170,.28);
  --tt-core:#9aa3ad; --tt-core-hi:#f4f6f8; --tt-core-ink:#0e141c;
  --tt-glow:rgba(180,190,200,.4);
  --tt-far-ink:#8b939c; --tt-far-nm:#a4abb3;
  --tt-folio:rgba(12,14,17,.84); --tt-folio-bd:rgba(197,206,216,.38);
  border-color:rgba(154,163,173,.32); background-color:#0c0e11;
  background-image:
    radial-gradient(circle at 50% 46%, rgba(140,150,160,.16), transparent 42%),
    radial-gradient(1.3px 1.3px at 18px 26px, rgba(240,242,244,.9), transparent),
    radial-gradient(1px 1px at 84px 52px, rgba(190,196,204,.65), transparent),
    radial-gradient(1.6px 1.6px at 150px 28px, #f7f8f9, transparent),
    radial-gradient(1px 1px at 36px 104px, rgba(160,168,176,.5), transparent),
    radial-gradient(1.1px 1.1px at 190px 120px, rgba(210,214,218,.55), transparent),
    radial-gradient(1.8px 1.8px at 112px 148px, rgba(236,238,240,.85), transparent)}
.sabe-totem[data-ceu="instrumento"] .tn.tk-core .tt-body{filter:hue-rotate(200deg) saturate(.28) brightness(1.15)}
.sabe-totem[data-ceu="luar"]{--tt-hue-shift:238; --tt-sat-scale:.62}
.sabe-totem[data-ceu="luar"] .tt-stage{
  --tt-fg:#f2f0f8; --tt-muted:#c8c4d8; --tt-line:rgba(196,186,220,.36); --tt-dot:rgba(232,226,246,.82);
  --tt-stage:#0b0a16; --tt-panel:#221e3c;
  --tt-acc:#e4e2ee; --tt-acc-soft:rgba(168,150,200,.32);
  --tt-core:#a89bc4; --tt-core-hi:#f7f4ff; --tt-core-ink:#161326;
  --tt-glow:rgba(168,140,210,.48);
  --tt-far-ink:#9a90b0; --tt-far-nm:#b7aec8;
  --tt-folio:rgba(11,10,22,.84); --tt-folio-bd:rgba(228,226,238,.4);
  border-color:rgba(168,155,196,.35); background-color:#0b0a16;
  background-image:
    radial-gradient(circle at 50% 46%, rgba(120,90,180,.22), transparent 42%),
    radial-gradient(1.3px 1.3px at 18px 26px, rgba(244,240,255,.92), transparent),
    radial-gradient(1px 1px at 84px 52px, rgba(190,176,220,.65), transparent),
    radial-gradient(1.6px 1.6px at 150px 28px, #f8f6ff, transparent),
    radial-gradient(1px 1px at 36px 104px, rgba(160,140,200,.5), transparent),
    radial-gradient(1.1px 1.1px at 190px 120px, rgba(214,206,236,.58), transparent),
    radial-gradient(1.8px 1.8px at 112px 148px, rgba(240,236,252,.88), transparent)}
.sabe-totem[data-ceu="luar"] .tn.tk-core .tt-body{filter:hue-rotate(236deg) saturate(.55)}
.sabe-totem[data-ceu="claraboia"]{--tt-hue-shift:196; --tt-sat-scale:.5}
.sabe-totem[data-ceu="claraboia"] .tt-stage{
  --tt-fg:#1b2430; --tt-muted:#4d5968; --tt-line:rgba(30,58,95,.28); --tt-dot:rgba(30,58,95,.45);
  --tt-stage:#e7edf4; --tt-panel:#f7f9fc;
  --tt-acc:#1e3a5f; --tt-acc-soft:rgba(30,58,95,.16);
  --tt-core:#3d5a80; --tt-core-hi:#d5deea; --tt-core-ink:#102033;
  --tt-glow:rgba(30,58,95,.28);
  --tt-far-ink:#5c6b7c; --tt-far-nm:#3e4c5e;
  --tt-folio:rgba(255,255,255,.9); --tt-folio-bd:rgba(30,58,95,.28);
  border-color:rgba(30,58,95,.28); background-color:#e7edf4;
  background-image:
    radial-gradient(circle at 50% 46%, rgba(30,58,95,.08), transparent 46%),
    radial-gradient(1.3px 1.3px at 18px 26px, rgba(30,58,95,.45), transparent),
    radial-gradient(1px 1px at 84px 52px, rgba(61,90,128,.35), transparent),
    radial-gradient(1.6px 1.6px at 150px 28px, rgba(16,32,51,.4), transparent),
    radial-gradient(1px 1px at 36px 104px, rgba(30,58,95,.28), transparent),
    radial-gradient(1.1px 1.1px at 190px 120px, rgba(61,90,128,.3), transparent),
    radial-gradient(1.8px 1.8px at 112px 148px, rgba(16,32,51,.34), transparent)}
.sabe-totem[data-ceu="claraboia"] .tn.tk-core .tt-body{filter:hue-rotate(198deg) saturate(.45) brightness(1.08)}
/* o mapa cabe na tela sem rolar: altura presa à janela, o SVG se centraliza dentro (meet) */
.sabe-totem .tt-stage svg{display:block;width:100%;height:var(--tt-h)}
.sabe-totem .tt-blade{max-height:calc(var(--tt-h) + 36px);overflow-y:auto}
.sabe-totem.tt-narrow .tt-blade{max-height:none;overflow:visible}
.sabe-totem .tt-hint{margin:0;padding:8px 14px;font-size:calc(12.5px * var(--sabe-fs,1));color:var(--tt-muted);border-top:1px solid var(--tt-line);background:var(--tt-panel)}

/* nós */
.sabe-totem .tn{cursor:pointer;outline:none;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .45s}
.sabe-totem .tn .tt-sh{transform:scale(var(--sx,1),var(--sy,1));transition:transform .75s cubic-bezier(.2,.8,.2,1),fill .3s,stroke .3s;vector-effect:non-scaling-stroke;stroke-width:1.6}
.sabe-totem .tn text{font-family:var(--display);fill:var(--tt-fg);paint-order:stroke;stroke:var(--tt-stage);stroke-width:4px;stroke-linejoin:round}
.sabe-totem .tn .tt-nm{font-size:15px;font-weight:600}
.sabe-totem .tn .tt-vl{font-family:var(--mono);font-size:12.5px;fill:var(--tt-muted)}
.sabe-totem .tn.tk-area .tt-nm,.sabe-totem .tn.tk-sub .tt-nm{fill:#F6E7D4}
.sabe-totem .tn.small .tt-nm{font-size:12px;font-weight:500;fill:#9a806c}
.sabe-totem .tn.small text{stroke:none}
.sabe-totem .tn.sel.small .tt-nm{fill:#F6E7D4;font-weight:600}
.sabe-totem .tn.nin .tt-nm,.sabe-totem .tn.vin .tt-vl{stroke:none}
.sabe-totem .tn.tk-area .tt-sh,.sabe-totem .tn.tk-sub .tt-sh{stroke:none}
.sabe-totem .tn .tt-shade{transform:scale(var(--sx,1),var(--sy,1));transition:transform .75s cubic-bezier(.2,.8,.2,1);fill:url(#ttLimbMatte);pointer-events:none}
.sabe-totem .tn.tk-pan .tt-sh{fill:var(--tt-panel);stroke:var(--tt-fg)}
.sabe-totem .tn.tk-rep .tt-sh{fill:var(--tt-panel);stroke:var(--tt-core)}
.sabe-totem .tn.tk-rep .tt-nm{font-size:13px}
.sabe-totem .tn.sel:not(.tk-area):not(.tk-sub) .tt-sh{fill:var(--tt-core);stroke:var(--tt-core-ink);filter:drop-shadow(0 0 10px var(--tt-glow))}
.sabe-totem .tn.sel.nin:not(.tk-area):not(.tk-sub) .tt-nm,.sabe-totem .tn.sel.vin:not(.tk-area):not(.tk-sub) .tt-vl{fill:var(--tt-core-ink)}
.sabe-totem .tn.sel.nin.tk-area .tt-nm,.sabe-totem .tn.sel.nin.tk-sub .tt-nm{fill:#F6E7D4}
@keyframes tt-bob{50%{translate:var(--bx,0px) var(--by,7px)}}
.sabe-totem .tn.bob{animation:tt-bob var(--bd,8.2s) ease-in-out var(--bdelay,0s) infinite alternate}
.sabe-totem .tn .tt-in{transform:scale(calc(var(--sx,1)*.7),calc(var(--sy,1)*.7));transition:transform .75s cubic-bezier(.2,.8,.2,1);fill:none;stroke:var(--tt-acc);stroke-opacity:.4;stroke-dasharray:2 4;vector-effect:non-scaling-stroke;pointer-events:none}
.sabe-totem .tn.small .tt-in{display:none}
.sabe-totem .tn.sel .tt-in{stroke:var(--tt-core-ink)}
.sabe-totem .tn:hover .tt-sh{stroke-width:3}
.sabe-totem .tn:focus-visible .tt-sh{stroke:var(--tt-fg);stroke-width:3.5}
.sabe-totem .tt-cam{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
/* folhas: painel = tela com blocos e barras; relatório = folha com dobra e linhas */
.sabe-totem .tt-ico *{vector-effect:non-scaling-stroke}
.sabe-totem .tn.tk-pan .tt-ico .fr{fill:var(--tt-panel);stroke:var(--tt-acc)}
.sabe-totem .tn.tk-pan .tt-ico .tl{fill:var(--tt-acc);fill-opacity:.6;stroke:none}
.sabe-totem .tn.tk-pan .tt-ico .br{fill:none;stroke:var(--tt-core-hi);stroke-width:1.8;stroke-linecap:round}
.sabe-totem .tn.tk-rep .tt-ico .fr{fill:var(--tt-fg);stroke:var(--tt-core);stroke-linejoin:round}
.sabe-totem .tn.tk-rep .tt-ico .fd{fill:var(--tt-muted);stroke:var(--tt-core);stroke-linejoin:round}
.sabe-totem .tn.tk-rep .tt-ico .ln{fill:none;stroke:var(--tt-panel);stroke-opacity:.6;stroke-width:1.3;stroke-linecap:round}
.sabe-totem .tn.leaf .tt-nm{font-size:13.5px;font-weight:500;fill:var(--tt-fg)}
.sabe-totem .tn.leaf:hover .tt-nm,.sabe-totem .tn.leaf:focus-visible .tt-nm{fill:var(--tt-acc)}
/* nível aberto é protagonista: o resto apaga, o pai fica a meia luz */
.sabe-totem.tt-deep .tn:not(.foc):not(.anc):not(.pin){opacity:.14 !important}
.sabe-totem.tt-deep .tn.anc{opacity:.55 !important}
.sabe-totem.tt-deep .e:not(.leaf){stroke-opacity:.3}
.sabe-totem .tt-burst{fill:none;stroke:var(--tt-acc);stroke-width:2.2;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:tt-burst 1s .3s ease-out both}
@keyframes tt-burst{from{transform:scale(.7);opacity:.95}to{transform:scale(2.6);opacity:0}}
.sabe-totem .tn.tk-core .tt-body{transform:scale(var(--sx,1),var(--sy,1))}
.sabe-totem .tn.tk-core .tt-sh{transform:none;fill:url(#ttSunDisk);stroke:none}
.sabe-totem .tn.tk-core .tt-corona{fill:url(#ttSunCorona);pointer-events:none;animation:tt-breathe 3.6s ease-in-out infinite alternate}
.sabe-totem .tn.tk-core .tt-sunimg{pointer-events:none;transform-box:fill-box;transform-origin:center;animation:tt-sunturn 72s linear infinite,tt-breathe 2.6s ease-in-out infinite alternate}
.sabe-totem .tn.tk-core .tt-flames{pointer-events:none;transform-box:fill-box;transform-origin:center;filter:url(#ttFlameSoft);animation:tt-spin 32s linear infinite}
.sabe-totem .tn.tk-core .tt-tongue{transform-box:fill-box;transform-origin:50% 100%;animation:tt-lick 1.45s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.16s)}
.sabe-totem .tn.tk-core .tt-tongue path{fill:url(#ttFlame)}
.sabe-totem .tn.tk-core .tt-limb{fill:none;stroke:#fff6d0;stroke-width:.7;filter:url(#ttLimbGlow);pointer-events:none;animation:tt-breathe 1.7s ease-in-out infinite alternate}
.sabe-totem .tn.tk-core.in .tt-nm{fill:#3a1408;stroke:#fff4cc;stroke-width:3px;font-weight:700}
@keyframes tt-breathe{from{opacity:.78}to{opacity:1}}
@keyframes tt-sunturn{to{transform:rotate(360deg)}}
@keyframes tt-spin{to{transform:rotate(360deg)}}
@keyframes tt-lick{from{transform:scale(.85,.62);opacity:.22}to{transform:scale(1.04,1.12);opacity:.72}}

.sabe-totem .tt-scaf{animation:tt-fadein .5s .28s both}
@keyframes tt-fadein{from{opacity:0}to{opacity:1}}
.sabe-totem .e{fill:none;stroke:var(--tt-line);stroke-width:1.4}
.sabe-totem .e.hot{stroke:var(--tt-acc);stroke-width:1.6}
.sabe-totem .e.syn{stroke:var(--tt-acc);stroke-opacity:.45;stroke-dasharray:2 9;stroke-linecap:round;stroke-width:2;animation:tt-flow 2.8s linear infinite}
@keyframes tt-flow{to{stroke-dashoffset:-44}}
.sabe-totem .ring{fill:none;stroke:var(--tt-line);stroke-width:1.2;stroke-dasharray:3 7}
.sabe-totem .pillar{fill:url(#ttGp);stroke:var(--tt-line)}
.sabe-totem .scan{fill:var(--tt-acc);opacity:.5;animation:tt-scan 5s ease-in-out infinite alternate}
@keyframes tt-scan{from{transform:translateY(0)}to{transform:translateY(500px)}}

/* lâmina */
.sabe-totem .tt-blade{background:var(--tt-panel);border:1px solid var(--tt-line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.sabe-totem .tt-blade h3{font:700 calc(20px * var(--sabe-fs,1))/1.2 var(--display);margin:0;text-wrap:balance;color:var(--tt-fg)}
.sabe-totem .tt-blade h4{font:600 calc(13px * var(--sabe-fs,1)) var(--display);color:var(--tt-muted);margin:4px 0 -6px}
.sabe-totem .tt-blade p{margin:0;color:var(--tt-muted);font-size:calc(14px * var(--sabe-fs,1));line-height:1.45}
.sabe-totem .tt-who{display:flex;gap:12px;align-items:flex-start}
.sabe-totem .tt-orb{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,var(--tt-core-hi),var(--tt-core) 70%);box-shadow:0 0 0 5px var(--tt-glow),0 0 22px var(--tt-glow)}
.sabe-totem .tt-big{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:var(--r-sm);background:var(--tt-stage);border:1px solid var(--tt-line)}
.sabe-totem .tt-big b{font:500 calc(24px * var(--sabe-fs,1))/1.15 var(--mono);font-variant-numeric:tabular-nums}
.sabe-totem .tt-big span{font-size:calc(13px * var(--sabe-fs,1));color:var(--tt-muted)}
.sabe-totem .tt-ask{display:flex;gap:8px}
.sabe-totem .tt-ask input{flex:1;min-width:0;border:1px solid var(--tt-line);border-radius:var(--r-sm);padding:9px 11px;background:var(--tt-stage);color:var(--tt-fg);font:inherit}
.sabe-totem .tt-btn{border:1px solid transparent;border-radius:var(--r-sm);padding:9px 14px;background:var(--tomate);color:#fff;font-weight:600;font-size:calc(14px * var(--sabe-fs,1))}
.sabe-totem .tt-btn.alt{background:none;color:var(--tt-fg);border-color:var(--tt-line)}
.sabe-totem .tt-askbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.sabe-totem .tt-askbtn em{font-style:normal;font-weight:400;color:var(--tt-muted);font-size:calc(13px * var(--sabe-fs,1))}
.sabe-totem .tt-rows{display:flex;flex-direction:column}
.sabe-totem .tt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-top:1px solid var(--tt-line);background:none;text-align:left;padding:9px 4px}
.sabe-totem .tt-row:first-child{border-top:0}
.sabe-totem .tt-row:hover{background:var(--tt-stage)}
.sabe-totem .tt-shelf{display:flex;flex-direction:column}
.sabe-totem .tt-shelf-row{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;border-top:1px solid var(--tt-line)}
.sabe-totem .tt-shelf-row:first-child{border-top:0}
.sabe-totem .tt-shelf-row .tt-row{border-top:0;width:100%;grid-template-columns:26px minmax(0,1fr);gap:10px}
.sabe-totem .tt-kind{width:26px;height:26px;border-radius:7px;display:grid;place-items:center}
.sabe-totem .tt-kind svg{width:18px;height:18px;display:block}
.sabe-totem .tt-kind .fr{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.sabe-totem .tt-kind .tl{fill:currentColor;stroke:none;opacity:.8}
.sabe-totem .tt-kind .fd{fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;opacity:.45}
.sabe-totem .tt-kind .br,.sabe-totem .tt-kind .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sabe-totem .tt-kind.pan{color:var(--tomate);background:color-mix(in srgb,var(--tomate) 16%,transparent)}
.sabe-totem .tt-kind.rep{color:var(--squash);background:color-mix(in srgb,var(--squash) 32%,transparent)}
.sabe-totem .tt-shelf-row:hover{background:var(--tt-stage)}
.sabe-totem .tt-shelf-row:hover .tt-row{background:none}
.sabe-totem .tt-star{border:0;background:none;padding:0;width:36px;height:36px;color:var(--tt-muted);opacity:.45;font-size:18px;line-height:1}
.sabe-totem .tt-star.on{opacity:1;color:var(--squash)}
.sabe-totem .tt-t{font-weight:600;display:block}
.sabe-totem .tt-s{font-size:calc(12.5px * var(--sabe-fs,1));color:var(--tt-muted);display:block;overflow-wrap:anywhere}
.sabe-totem .tt-v{font:500 calc(13.5px * var(--sabe-fs,1)) var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sabe-totem .tt-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.sabe-totem .tt-chips{display:flex;flex-wrap:wrap;gap:6px}
.sabe-totem .tt-chips button{border:1px solid var(--tt-line);background:none;border-radius:99px;padding:4px 11px;font-size:calc(13px * var(--sabe-fs,1))}
.sabe-totem .tt-cards{display:flex;flex-direction:column;gap:8px}
.sabe-totem .tt-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;border:1px solid var(--tt-line);border-radius:var(--r-sm);padding:10px}
.sabe-totem .tt-card > .tt-kind{flex:0 0 26px}
.sabe-totem .tt-card > div{min-width:0;flex:1 1 160px}
.sabe-totem .tt-card .tag{font:400 calc(11px * var(--sabe-fs,1)) var(--mono);color:var(--tt-muted);border:1px solid var(--tt-line);border-radius:99px;padding:1px 7px;margin-left:4px;white-space:nowrap}
.sabe-totem .tt-card.is-exclusive{flex-direction:column;align-items:stretch;border:3px solid #fbbf24;background:#fff7ed;color:#431407}
.sabe-totem .tt-xband{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;
  background:repeating-linear-gradient(-45deg,#b45309 0 12px,#92400e 12px 24px);color:#fff}
.sabe-totem .tt-xband b{font-size:calc(16px * var(--sabe-fs,1));font-weight:800}
.sabe-totem .tt-xband span{font-size:calc(13px * var(--sabe-fs,1));font-weight:650;line-height:1.35}

/* largura útil estreita (classe posta pelo ResizeObserver): some o desenho, fica a lista */
.sabe-totem.tt-narrow .tt-main{grid-template-columns:minmax(0,1fr)}
.sabe-totem.tt-narrow .tt-stage,.sabe-totem.tt-narrow .tt-seg,.sabe-totem.tt-narrow .tt-skies{display:none}

@media (prefers-reduced-motion:reduce){
  .sabe-totem .tn,.sabe-totem .tn .tt-sh,.sabe-totem .tn .tt-in{transition:none}
  .sabe-totem .tt-cam{transition:none}
  .sabe-totem .tt-burst{display:none}
  .sabe-totem .tn.tk-core .tt-corona,.sabe-totem .tn.tk-core .tt-sunimg,.sabe-totem .tn.tk-core .tt-flames,.sabe-totem .tn.tk-core .tt-tongue,.sabe-totem .tn.tk-core .tt-limb,.sabe-totem .e.syn,.sabe-totem .scan,.sabe-totem .tt-scaf,.sabe-totem .tn.bob{animation:none}
  .sabe-totem .tn.tk-core .tt-tongue{opacity:.7}
}

.obs-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 10px;padding:8px 10px;
  border:1px solid var(--ink-500);border-radius:var(--r-sm,10px);background:var(--ink-700);color:var(--paper)}
.obs-links .obs-links-k{font-size:calc(12px * var(--sabe-fs,1));color:var(--lilac);margin-right:4px}
.obs-links button{border:1px solid var(--ink-500);background:transparent;color:var(--paper);border-radius:99px;
  padding:4px 10px;font:inherit;cursor:pointer;font-size:calc(13px * var(--sabe-fs,1))}
.obs-links button.obs-map{border-color:transparent;background:var(--tomate);color:#fff}
.obs-fallback{margin:0 0 14px;padding:12px 14px;border:1px dashed var(--ink-500);border-radius:var(--r-sm,10px);
  color:var(--paper);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.obs-fallback p{margin:0;color:var(--lilac);flex:1 1 220px}
.obs-fallback button{border:0;background:var(--tomate);color:#fff;border-radius:var(--r-sm,10px);
  padding:8px 12px;font:inherit;font-weight:600;cursor:pointer}

/* §337 — enquanto o mapa carrega, um esqueleto da mesma altura segura o lugar (a coleção não pula).
   Sol com órbitas na página clara. Movimento reduzido deixa o sol parado. */
.tt-skel{height:clamp(380px,calc(100vh - 250px),720px);border:1px dashed var(--ink-500);border-radius:var(--r);margin-bottom:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--lilac);font-family:var(--body);font-size:calc(14px * var(--sabe-fs,1))}
.tt-skel p{margin:0;animation:tt-skel-breathe 2.4s ease-in-out infinite}
.tt-skel-sky{position:relative;width:92px;height:92px;flex:none}
.tt-skel-sun{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff6d8, var(--squash, #e8a317) 46%, var(--tomate) 78%);
  box-shadow:0 0 18px color-mix(in srgb, var(--tomate) 50%, transparent)}
.tt-skel-spin{position:absolute;inset:0;animation:tt-skel-spin 7s linear infinite}
.tt-skel-spin i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--tomate)}
.tt-skel-spin i:nth-child(1){left:50%;top:0;margin-left:-4px}
.tt-skel-spin i:nth-child(2){left:4px;bottom:10px;background:var(--lilac)}
.tt-skel-spin i:nth-child(3){right:4px;bottom:10px;background:var(--lilac)}
@keyframes tt-skel-spin{to{transform:rotate(360deg)}}
@keyframes tt-skel-breathe{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){
  .tt-skel .tt-skel-spin,.tt-skel p{animation:none}
  .tt-skel p{opacity:1}
}
/* §337 emenda 10/10 — faixa Promovidos + selo de campanha */
.sabe-totem .tt-promo-sub{margin:-4px 0 6px;color:var(--tt-muted);font-size:12px}
.sabe-totem .tt-promo .tt-shelf-row{grid-template-columns:minmax(0,1fr) auto}
.sabe-totem .tt-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;white-space:nowrap;
  margin-right:8px;background:var(--tt-acc-soft);color:var(--tt-fg);border:1px solid var(--tt-line)}
.sabe-totem .tt-badge-line{margin:2px 0 8px}

/* §337 — Constelação: mapa inteiro (máscara, anel, lista, linhas). A lâmina não entra aqui. */
.sabe-totem .tt-stage{position:relative}
.sabe-totem .tt-map{display:none;position:absolute;left:0;right:0;top:0;height:var(--tt-h);overflow:hidden}
.sabe-totem.tt-sky .tt-map{display:block}
.sabe-totem.tt-sky .tt-stage > svg{visibility:hidden}
.sabe-totem .tt-world{position:absolute;left:0;top:0;width:1000px;height:660px;transform-origin:0 0}
/* the stage-wide `.tt-stage svg` rule (width:100%; height:var(--tt-h)) must not reach these layers:
   letterboxed, their 1000×660 coordinates drift away from the HTML disks */
.sabe-totem .tt-world > svg.tt-arcs,.sabe-totem .tt-world > svg.tt-sunhost{position:absolute;inset:0;width:1000px;height:660px;overflow:visible;pointer-events:none}
.sabe-totem .tt-arcs{z-index:0}
.sabe-totem .tt-sunhost{z-index:3}
.sabe-totem .tt-sunhost .tt-sun{pointer-events:auto;cursor:pointer}
.sabe-totem .tt-sunhit{fill:var(--tt-black);fill-opacity:0;pointer-events:all}
.sabe-totem .tt-arcs path{fill:none;stroke:var(--tt-acc);stroke-linecap:round}
.sabe-totem .tt-arcs path.kid{stroke-opacity:.72;stroke-dasharray:1.5 5;stroke-width:1.2}
.sabe-totem .tt-arcs path.parent{stroke-opacity:.72;stroke-dasharray:2 6;stroke-width:1.7}
.sabe-totem .tt-arcs path.fade{stroke-opacity:1;stroke-dasharray:2 6;stroke-width:1.7}
.sabe-totem .tt-arcs path.list{stroke-opacity:.72;stroke-dasharray:1.5 5;stroke-width:1.2}
.sabe-totem .tt-map .tt-body{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;z-index:2;opacity:1;
  transition:left .9s cubic-bezier(.22,.8,.2,1),top .9s cubic-bezier(.22,.8,.2,1),opacity .55s ease}
.sabe-totem .tt-map .tt-body.sel{z-index:5}
.sabe-totem .tt-map .tt-body.far{z-index:1}
.sabe-totem .tt-map .tt-body.far,.sabe-totem .tt-map .tt-body.dim{opacity:.38}
.sabe-totem .tt-map .tt-body.far .nm,.sabe-totem .tt-map .tt-body.dim .nm{color:var(--tt-far-ink);font-weight:500}
.sabe-totem .tt-map .tt-body.bye{opacity:0;z-index:0;pointer-events:none}
.sabe-totem .tt-sunhost .tt-sun{transition:transform .9s cubic-bezier(.22,.8,.2,1)}
.sabe-totem .tt-sunhost .tn.tk-core .tt-body{transition:transform .9s cubic-bezier(.22,.8,.2,1)}
.sabe-totem .tt-map .disk{
  --lit:200deg; --hue:24; --sat:82%; --face:52%;
  --skin:linear-gradient(var(--tt-white),var(--tt-white));
  position:absolute;left:0;top:0;z-index:2;
  width:var(--d);height:var(--d);box-sizing:border-box;border-radius:50%;border:none;
  transform:translate(-50%,-50%);
  background-color:hsl(calc(var(--hue) + var(--tt-hue-shift)),calc(var(--sat) * var(--tt-sat-scale)),calc(var(--face) * 0.32));
  background-image:
    var(--skin),
    radial-gradient(circle at 50% 50%, transparent 42%, var(--tt-void) 100%),
    linear-gradient(var(--lit),
      hsl(calc(var(--hue) + var(--tt-hue-shift)),calc(var(--sat) * var(--tt-sat-scale)),var(--face)) 0%,
      hsl(calc(var(--hue) + var(--tt-hue-shift)),calc(var(--sat) * var(--tt-sat-scale) * 0.78),calc(var(--face) * 0.58)) 42%,
      hsl(calc(var(--hue) + var(--tt-hue-shift)),calc(var(--sat) * var(--tt-sat-scale) * 0.5),calc(var(--face) * 0.32)) 74%,
      hsl(calc(var(--hue) + var(--tt-hue-shift)),calc(var(--sat) * var(--tt-sat-scale) * 0.35),calc(var(--face) * 0.16)) 100%);
  background-size:100% 100%,auto,auto;background-repeat:no-repeat;
  background-blend-mode:multiply,normal,normal;
  transition:width .9s cubic-bezier(.22,.8,.2,1),height .9s cubic-bezier(.22,.8,.2,1),transform .9s cubic-bezier(.22,.8,.2,1)}
.sabe-totem .tt-map .disk.far{transform:translate(-50%,-50%) scale(.4)}
.sabe-totem .tt-map .tt-body.bye .disk{transform:translate(-50%,-50%) scale(.2)}
.sabe-totem .tt-map .disk.has-ring{isolation:isolate}
.sabe-totem .tt-map .disk.has-ring::before,
.sabe-totem .tt-map .disk.has-ring::after{
  content:"";position:absolute;left:50%;top:50%;width:180%;height:56%;border-radius:50%;
  border:2.2px solid hsl(calc(var(--hue) + var(--tt-hue-shift)),calc(var(--sat) * var(--tt-sat-scale)),calc(var(--face) + 22%));
  box-shadow:0 0 0 1px hsl(calc(var(--hue) + var(--tt-hue-shift)),calc(var(--sat) * var(--tt-sat-scale) * 0.72),calc(var(--face) * 0.55));
  transform:translate(-50%,-50%) rotate(-18deg);pointer-events:none}
.sabe-totem .tt-map .disk.has-ring::before{
  z-index:-1;clip-path:inset(0 0 46% 0);
  mask-image:radial-gradient(ellipse 27.8% 89% at 50% 50%, transparent 0 98%, var(--tt-black) 100%)}
.sabe-totem .tt-map .disk.has-ring::after{z-index:3;clip-path:inset(46% 0 0 0)}
.sabe-totem .tt-map .nm{
  position:absolute;left:0;top:calc(var(--d) / 2 + 8px);z-index:3;
  transform:translate(-50%,0);white-space:nowrap;pointer-events:none;
  font-weight:600;color:var(--tt-fg);text-shadow:0 0 4px var(--tt-stage),0 0 4px var(--tt-stage)}
.sabe-totem .tt-map .nm.far{color:var(--tt-far-nm);font-weight:500;font-size:12px}
.sabe-totem .tt-map .tt-body:focus-visible .disk{outline:2px solid var(--tt-acc);outline-offset:3px}
.sabe-totem .tt-folio{
  position:absolute;z-index:7;display:flex;flex-direction:column;gap:2px;width:290px;max-height:600px;overflow-y:auto;overflow-x:hidden;
  box-sizing:border-box;padding:6px;border-radius:12px;opacity:0;pointer-events:none;
  background:var(--tt-folio);border:1px solid var(--tt-folio-bd);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:left .9s cubic-bezier(.22,.8,.2,1),top .9s cubic-bezier(.22,.8,.2,1),opacity .45s ease}
.sabe-totem .tt-folio.on{opacity:1;pointer-events:auto}
.sabe-totem .tt-folio button{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  border:0;background:transparent;color:var(--tt-fg);font:13px/1.25 var(--body);text-align:left;
  padding:5px 6px;border-radius:8px;cursor:pointer}
.sabe-totem .tt-folio button:hover{background:rgba(255,255,255,.06)}
.sabe-totem .tt-folio .tt-kind{position:static;transform:none;flex:0 0 auto}
.sabe-totem .tt-folio button > span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.sabe-totem .tt-folio .tt-kind.pan{color:var(--tt-teal);background:rgba(20,125,111,.16)}
.sabe-totem .tt-folio .tt-kind.rep{color:var(--tt-amber);background:rgba(242,169,59,.32)}
.sabe-totem .tt-folio b{display:block;font-weight:650;color:var(--tt-fg)}
.sabe-totem .tt-folio small{display:block;color:var(--tt-muted);font-size:11px;font-weight:500}
@media (prefers-reduced-motion:reduce){
  .sabe-totem .tt-map .tt-body,.sabe-totem .tt-map .disk,
  .sabe-totem .tt-sunhost .tt-sun,.sabe-totem .tt-sunhost .tn.tk-core .tt-body,
  .sabe-totem .tt-folio{transition:none}
}