/* ════════════════════════════════════════════════════════════
   PING — Algoritmo de Vidro · página clara/didática · X-ID
   Papel quente, tinta escura, âmbar como energia.
   ════════════════════════════════════════════════════════════ */
:root{
  --paper: oklch(0.985 0.004 95);
  --paper-2: oklch(0.961 0.006 95);
  --paper-3: oklch(0.935 0.008 92);
  --ink: oklch(0.225 0.014 80);
  --mute: oklch(0.44 0.014 80);
  --dim: oklch(0.60 0.012 80);
  --line: oklch(0.885 0.010 92);
  --line-soft: oklch(0.92 0.008 92);
  --ping: oklch(0.58 0.135 78);          /* âmbar legível sobre papel */
  --ping-bright: oklch(0.84 0.17 88);    /* âmbar cheio, para fills */
  --ping-deep: oklch(0.50 0.12 75);
  --ping-glass: oklch(0.84 0.17 88 / 0.13);
  --ping-line: oklch(0.70 0.14 82 / 0.45);
  --shelf: oklch(0.55 0.13 250);
  --cmt: oklch(0.56 0.16 330);
  --ok: oklch(0.55 0.14 155);
  --night: oklch(0.16 0.012 80);
  --font: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --rad: 14px;
  --rad-lg: 20px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); letter-spacing:-0.006em; line-height:1.65;
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv11";
  overflow-x:hidden;
}
a{ color:var(--ping); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
.mono{ font-family:var(--mono); letter-spacing:0; }
.wrap{ max-width:880px; margin:0 auto; padding:0 28px; }

/* ── topbar ── */
.topbar{
  position:sticky; top:0; z-index:50;
  background:oklch(0.985 0.004 95 / 0.85);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{
  max-width:880px; margin:0 auto; padding:13px 28px;
  display:flex; align-items:center; gap:14px;
}
.topbar-mark{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; white-space:nowrap; color:var(--ink); }
.topbar-mark:hover{ text-decoration:none; }
.topbar-x{
  width:25px; height:25px; border-radius:7px; background:var(--ink); color:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.topbar-back{
  margin-left:auto; font-size:13.5px; color:var(--mute); white-space:nowrap;
}
.topbar-back:hover{ color:var(--ping); }
/* toggle de idioma na topbar */
.topbar-lang{
  font-size:11px; letter-spacing:0.12em;
  color:var(--dim); text-decoration:none; white-space:nowrap;
  border:1px solid var(--line); border-radius:8px; padding:5px 9px;
  transition:color 0.2s, border-color 0.2s;
}
.topbar-lang:hover{ color:var(--ink); border-color:var(--mute); }

/* ── masthead ── */
.mast{ padding:88px 0 64px; border-bottom:1px solid var(--line-soft); }
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--ping); display:inline-flex; align-items:center; gap:12px; margin-bottom:26px;
}
.kicker .pip{ width:28px; height:1px; background:var(--ping-line); }
.mast h1{
  font-size:clamp(40px, 6vw, 64px); line-height:1.02; letter-spacing:-0.032em;
  font-weight:600; margin:0 0 24px; max-width:18ch; text-wrap:balance;
}
.mast h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ping); }
.mast .lead{ font-size:19px; text-align:justify; hyphens:auto; }
@media(max-width:680px){ .mast .lead{ font-size:16px; } }
.mast-law{
  margin-top:36px; padding:24px 28px; border-radius:var(--rad-lg);
  background:var(--ping-glass); border:1px solid var(--ping-line);
  display:flex; gap:16px; align-items:flex-start;
}
.mast-law .bolt{ color:var(--ping); flex-shrink:0; margin-top:3px; }
.mast-law p{ margin:0; font-size:16.5px; color:var(--ink); max-width:none; }
.mast-law b{ color:var(--ping-deep); }

/* ── frontispício: a máquina de vidro (gravura técnica) ── */
.frontis{ margin:10px 0 28px; }
.frontis img{
  display:block; width:100%; height:auto;
  /* multiply: o branco do arquivo desaparece no papel da página — sem vinheta */
  mix-blend-mode:multiply;
}

/* ── scaffold ── */
section.doc{ padding:72px 0; border-bottom:1px solid var(--line-soft); }
.sec-num{
  font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ping); display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
}
.sec-num .pip{ width:24px; height:1px; background:var(--ping-line); }
h2.sec-title{
  font-size:clamp(28px, 3.6vw, 38px); line-height:1.08; letter-spacing:-0.025em;
  font-weight:600; margin:0 0 16px; max-width:24ch; text-wrap:balance;
}
h2.sec-title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ping); }
h3.sub-title{ font-size:clamp(20px,2.4vw,25px); line-height:1.15; letter-spacing:-0.02em; font-weight:600; margin:40px 0 12px; color:var(--ink); }
.lead{ font-size:17.5px; line-height:1.65; color:var(--mute); max-width:none; margin:0 0 14px; text-wrap:pretty; text-align:justify; hyphens:auto; }
@media(max-width:680px){ .lead{ font-size:15.5px; } }
.lead b, .lead strong{ color:var(--ink); font-weight:600; }
:root{ --soon:oklch(0.55 0.11 232); }
p{ font-size:15.5px; line-height:1.7; color:var(--mute); max-width:none; margin:0 0 14px; text-wrap:pretty; text-align:justify; hyphens:auto; }
@media(max-width:680px){ .doc p{ font-size:14.5px; } }
p b, p strong{ color:var(--ink); font-weight:600; }
.amber{ color:var(--ping-deep); font-weight:600; }

/* ── gesture table ── */
table.gestures{ width:100%; border-collapse:collapse; margin:30px 0 6px; }
.gestures th{
  text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim); font-weight:500;
  padding:0 14px 12px; border-bottom:1px solid var(--line);
}
.gestures td{ padding:18px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; font-size:14.5px; color:var(--mute); }
.gestures td.g-name{ white-space:nowrap; }
.gestures .gi{ display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); font-size:15px; }
.gestures .gi-badge{
  width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.gi-zap{ background:var(--ping-glass); color:var(--ping); border:1px solid var(--ping-line); }
.gi-shelf{ background:oklch(0.55 0.13 250 / 0.10); color:var(--shelf); border:1px solid oklch(0.55 0.13 250 / 0.3); }
.gi-cmt{ background:oklch(0.56 0.16 330 / 0.10); color:var(--cmt); border:1px solid oklch(0.56 0.16 330 / 0.3); }
.gestures td.g-cost{ font-family:var(--mono); font-size:13.5px; line-height:1.5; color:var(--ink); font-weight:500; text-wrap:pretty; }
.free-note{
  margin-top:18px; padding:16px 20px; border-radius:var(--rad);
  background:var(--paper-2); border:1px solid var(--line-soft);
  font-size:14px; color:var(--mute); max-width:none;
}
.free-note b{ color:var(--ink); }
/* mobile: a tabela de gestos vira cards empilhados (3 colunas não cabem) */
@media(max-width:680px){
  table.gestures{ display:block; border-collapse:separate; }
  .gestures thead{ display:none; }
  .gestures tbody{ display:flex; flex-direction:column; gap:10px; }
  .gestures tr{
    display:block; background:var(--paper-2);
    border:1px solid var(--line-soft); border-radius:var(--rad);
    padding:18px 18px 16px;
  }
  .gestures td{ display:block; border:none; padding:0; }
  .gestures td.g-name{ white-space:normal; margin-bottom:8px; }
  .gestures td.g-cost{ margin-bottom:8px; white-space:normal; overflow-wrap:break-word; }
  .gestures td.g-cost::before{
    content:"custo · "; font-family:var(--mono); font-size:10px;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); font-weight:500;
  }
  html[lang="es"] .gestures td.g-cost::before{ content:"costo · "; }
  html[lang="en"] .gestures td.g-cost::before{ content:"cost · ";
  }
}

/* ── figura "como nasce uma vela" · §4 ──
   Diagrama, não decoração: verde/vermelho só aqui (o resto da página é âmbar),
   porque é a única seção que fala de cotação. */
.vf{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0 8px; }
.vf-p{ margin:0; padding:18px 16px 15px; border:1px solid var(--line); border-radius:14px; background:var(--card); display:flex; gap:14px; align-items:center; }
.vf-svg{ width:132px; flex:0 0 auto; }
.vf{ --vf-up:oklch(0.55 0.13 152); --vf-dn:oklch(0.55 0.17 27); }
.vf-open{ stroke:var(--dim); stroke-width:1.2; stroke-dasharray:4 4; }
.vf-wick{ stroke-width:2; }
.vf-body{ }
.vf-up .vf-wick{ stroke:var(--vf-up); } .vf-up .vf-body{ fill:var(--vf-up); }
.vf-down .vf-wick{ stroke:var(--vf-dn); } .vf-down .vf-body{ fill:var(--vf-dn); }
.vf-t{ font-family:var(--mono); font-size:9px; fill:var(--dim); }
/* O pregão de uma vela — loop de 30s em 4 estágios (CSS puro, CDN estático):
   0–2s   parada na abertura
   2–6s   MOVIMENTO CONTRA · a vela de alta abre vermelha (contra-corpo .vf-cb),
          deixando a 1ª sombra (.vf-s1 — a mínima dela)
   6–10s  recuperação · o contra-corpo some, a sombra fica
   10–15s esticada · corpo principal (.vf-mb) até a MÁXIMA (2ª sombra junto)
   15–20s recuo · o corpo assenta em scaleY(.8) — o FECHAMENTO; o que a máxima
          deixou para trás é a sombra de cima
   20–30s resultado desenhado, parado, antes de recomeçar.
   O corpo (26px) cobre o pavio (2px) — a sombra "aparece" quando o corpo recua.
   Os estados-base abaixo são a vela PRONTA: é o que vê quem pediu menos
   movimento (prefers-reduced-motion). */
.vf-s1, .vf-s2{ transform:scaleY(1); }
.vf-cb{ transform:scaleY(0); }
.vf-mb{ transform:scaleY(.8); }
.vf-up .vf-cb{ fill:var(--vf-dn); } .vf-down .vf-cb{ fill:var(--vf-up); }
.vf-up .vf-s1{ animation:vfS1 30s ease infinite, vfS1cU 30s linear infinite; }
.vf-down .vf-s1{ animation:vfS1 30s ease infinite, vfS1cD 30s linear infinite; }
@keyframes vfS1cU{ 0%,32%{ stroke:var(--vf-dn); } 37%,100%{ stroke:var(--vf-up); } }
@keyframes vfS1cD{ 0%,32%{ stroke:var(--vf-up); } 37%,100%{ stroke:var(--vf-dn); } }
.vf-cb{ animation:vfCB 30s ease infinite; }
.vf-s2{ animation:vfS2 30s ease infinite; }
.vf-mb{ animation:vfMB 30s ease infinite; }
.vf-lbl{ animation:vfLbl 30s linear infinite; }
.vf-svg{ animation:vfFade 30s linear infinite; }
@keyframes vfS1{ 0%,6.7%{ transform:scaleY(0); } 20%{ transform:scaleY(1); } 100%{ transform:scaleY(1); } }
@keyframes vfCB{ 0%,6.7%{ transform:scaleY(0); } 20%{ transform:scaleY(1); } 33.3%,100%{ transform:scaleY(0); } }
@keyframes vfS2{ 0%,33.3%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(1); } }
@keyframes vfMB{ 0%,33.3%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 66.7%,100%{ transform:scaleY(.8); } }
@keyframes vfLbl{ 0%,66.7%{ opacity:0; } 71%,97%{ opacity:1; } 100%{ opacity:0; } }
@keyframes vfFade{ 0%,97%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .vf-s1, .vf-s2, .vf-cb, .vf-mb, .vf-lbl, .vf-svg, .vf-up .vf-s1, .vf-down .vf-s1{ animation:none; } }
.vf-up .vf-tc{ fill:var(--vf-up); } .vf-down .vf-tc{ fill:var(--vf-dn); }
.vf-k{ display:block; font-size:14.5px; letter-spacing:-0.01em; }
.vf-k-up{ color:var(--vf-up); } .vf-k-dn{ color:var(--vf-dn); }
.vf-s{ display:block; font-size:12px; color:var(--dim); margin:2px 0 9px; line-height:1.45; }
.vf-l{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.vf-l li{ font-family:var(--mono); font-size:10.5px; line-height:1.6; color:var(--mute); }
.vf-l li.up b{ color:var(--vf-up); } .vf-l li.dn b{ color:var(--vf-dn); }
.vf-l li .hl{ padding:1px 3px; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.vf-l li.up .hl{ background:color-mix(in oklch, var(--vf-up) 16%, transparent); color:color-mix(in oklch, var(--vf-up) 70%, var(--ink)); }
.vf-l li.dn .hl{ background:color-mix(in oklch, var(--vf-dn) 14%, transparent); color:color-mix(in oklch, var(--vf-dn) 68%, var(--ink)); }
@media(max-width:680px){
  .vf{ grid-template-columns:1fr; }
  .vf-svg{ width:96px; }
  .vf-p{ padding:14px 13px 12px; gap:11px; }
  .vf-k{ font-size:13px; }
  .vf-s{ font-size:11px; }
  .vf-l li{ font-size:9.5px; line-height:1.45; }
}

/* ── formula (vidro escuro sobre papel) ── */
.formula{
  font-family:var(--mono); font-size:14.5px; line-height:2.0;
  background:var(--night); border-radius:var(--rad-lg);
  padding:26px 28px; margin:30px 0 8px; overflow-x:auto;
  color:oklch(0.88 0.01 90);
  box-shadow:0 18px 44px -22px oklch(0.16 0.012 80 / 0.5);
}
.formula .c-mut{ color:oklch(0.55 0.012 80); }
.formula .c-e{ color:var(--ping-bright); }
.formula .c-s{ color:oklch(0.74 0.11 250); }
.formula .c-c{ color:oklch(0.74 0.13 330); }
.formula .c-r{ color:var(--ping-bright); font-weight:600; }

/* ── composition bar ── */
.comp{ margin:30px 0 8px; padding:26px 28px; background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--rad-lg); }
.comp-big{
  font-family:var(--mono); font-size:34px; font-weight:500; letter-spacing:-0.02em;
  display:flex; align-items:center; gap:10px; color:var(--ink);
}
.comp-big .bolt{ color:var(--ping); }
.comp-cap{ font-size:13px; color:var(--dim); margin:6px 0 18px; }
.comp-stack{ display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--paper-3); }
.comp-seg-e{ background:var(--ping-bright); }
.comp-seg-s{ background:oklch(0.62 0.14 250); }
.comp-seg-c{ background:oklch(0.66 0.16 330); }
.comp-legend{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:16px; font-size:13.5px; color:var(--mute); }
.comp-leg{ display:inline-flex; align-items:center; gap:8px; }
.comp-leg .sw{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.comp-leg b{ color:var(--ink); font-family:var(--mono); font-weight:500; }

/* ── leagues (escopo) ── */
.leagues{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:32px 0 8px; }
.league{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--rad-lg);
  padding:24px 24px 20px; position:relative;
}
.league.win{ background:var(--ping-glass); border-color:var(--ping-line); }
.league-k{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
.league.win .league-k{ color:var(--ping-deep); }
.league-pos{
  font-family:var(--mono); font-size:38px; font-weight:500; letter-spacing:-0.03em; color:var(--ink); line-height:1;
}
.league.win .league-pos{ color:var(--ping-deep); }
.league-of{ font-size:13px; color:var(--dim); margin-top:8px; }
@media(max-width:680px){ .leagues{ grid-template-columns:1fr; } }
.league-note{ font-size:13.5px; color:var(--dim); margin-top:14px; max-width:none; text-align:justify; hyphens:auto; }

/* ── ligatab · cotação viva dos fatores de liga (§6) ──
   Painel de cotação, não tabela decorativa: o fator é o número que o leitor vem
   consultar, então ele é a coluna tabular à direita, alinhada e destacada. */
.ligatab{ margin:26px 0 0; border:1px solid var(--line-soft); border-radius:var(--rad-lg); background:var(--paper-2); overflow:hidden; }
.lt-head{ display:flex; justify-content:space-between; padding:9px 18px; background:var(--paper-3, var(--paper-2)); border-bottom:1px solid var(--line-soft); font-size:9.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--dim); }
.lt-row{ display:flex; align-items:center; gap:13px; padding:13px 18px; border-bottom:1px solid var(--line-soft); }
.lt-row:last-child{ border-bottom:0; }
.lt-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.lt-id{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lt-id b{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.lt-id small{ font-size:12.5px; color:var(--dim); }
.lt-of{ align-self:flex-start; display:inline-block; width:max-content; font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.08em; padding:1px 5px; border-radius:4px; background:color-mix(in oklch, var(--ping) 16%, transparent); color:var(--ping-deep); vertical-align:2px; }
.lt-x{ flex:0 0 auto; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ping-deep); font-variant-numeric:tabular-nums; }
.lt-note{ font-size:13.5px; line-height:1.6; color:var(--dim); margin-top:14px; max-width:none; text-wrap:pretty; text-align:justify; hyphens:auto; }
.lt-note b{ color:var(--ink); font-weight:600; }
.lt-live{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ping); margin-right:8px; vertical-align:1px; animation:ltpulse 2s ease-in-out infinite; }
@keyframes ltpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.82); } }

/* ── auction demo ── */
.mock{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--rad-lg);
  padding:26px 28px; margin:30px 0 8px;
}
.mock-h{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--dim); margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cmt-row{
  display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line-soft); margin-bottom:8px;
  transition:transform 0.3s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s, background 0.3s;
}
.cmt-row .av{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600; color:var(--paper); background:var(--dim);
  overflow:hidden;
}
.cmt-row .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.cmt-row.you{ border-color:var(--ping-line); background:var(--ping-glass); }
.cmt-row.you .av{ background:var(--ping); }
.cmt-row .ct{ flex:1; min-width:0; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmt-row .ct small{ display:block; font-size:12px; color:var(--dim); }
.cmt-row .dep{
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ping-deep);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.cmt-row .pos{ font-family:var(--mono); font-size:12px; color:var(--dim); width:28px; text-align:right; }
/* pílula de resultante — mesmo layout do comentário real (lc-res) */
.res-pill{
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  padding:4px 9px 4px 7px; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  color:var(--ping-deep); white-space:nowrap;
}
.res-pill .res-rank{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:13px; height:14px; padding-right:6px; margin-right:2px;
  border-right:1px solid var(--line);
  font-family:var(--mono); font-size:10px; font-weight:600; color:var(--dim);
}
.res-pill svg{ color:var(--ping-deep); flex-shrink:0; }
.res-pill .res-n{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ping-deep); }
.res-pill.lead{ background:var(--ping-glass); border-color:var(--ping-line); }
.res-pill.lead .res-rank{ color:var(--ping-deep); border-right-color:var(--ping-line); }
.demo-ctl{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap; }
.demo-ctl label{ font-size:13.5px; color:var(--mute); white-space:nowrap; }
.demo-ctl input[type="range"]{ flex:1; min-width:180px; accent-color:var(--ping); }
.demo-val{
  font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ping-deep);
  min-width:110px; text-align:right;
}
.demo-hint{ font-size:13px; color:var(--dim); margin-top:14px; }
.demo-hint b{ color:var(--ping-deep); }
/* painel de controles da simulação — dois passos numerados + status */
.demo-panel{
  margin-top:18px; padding-top:18px; border-top:1px dashed var(--line);
  display:flex; flex-direction:column; gap:12px;
}
.demo-row{
  display:grid; grid-template-columns:auto minmax(120px, auto) 1fr auto;
  gap:12px; align-items:center;
}
.demo-row label{ font-size:13px; color:var(--mute); line-height:1.35; }
.demo-row input[type="range"]{ width:100%; min-width:80px; accent-color:var(--ping); }
.demo-step{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:var(--ping-glass); border:1px solid var(--ping-line); color:var(--ping-deep);
  font-family:var(--mono); font-size:11px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}
.demo-val{
  font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ping-deep);
  min-width:84px; text-align:right; white-space:nowrap;
}
.demo-btn{
  justify-self:end;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--ping-deep); background:var(--ping-glass);
  border:1px solid var(--ping-line); border-radius:999px; padding:8px 16px;
  white-space:nowrap; transition:transform 0.12s, background 0.15s;
}
.demo-btn:hover{ transform:translateY(-1px); background:oklch(0.84 0.17 88 / 0.2); }
.demo-btn:active{ transform:translateY(0) scale(0.98); }
.demo-status{
  font-size:13.5px; line-height:1.6; color:var(--mute);
  background:var(--paper); border:1px solid var(--line-soft); border-radius:12px;
  padding:12px 16px;
}
.demo-status b{ color:var(--ping-deep); font-family:var(--mono); }
.demo-reset{
  align-self:flex-end;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; cursor:pointer;
  color:var(--dim); background:transparent;
  border:1px dashed var(--line); border-radius:999px; padding:6px 14px;
  transition:color 0.15s, border-color 0.15s;
}
.demo-reset:hover{ color:var(--ping-deep); border-color:var(--ping-line); }
@media(max-width:680px){
  .demo-row{ grid-template-columns:auto 1fr auto; }
  .demo-row label{ grid-column:2 / -1; }
  .demo-row input[type="range"], .demo-row .demo-btn{ grid-column:2; }
}

/* ── soon-note · regra publicada antes do lançamento ── */
.soon-note{ position:relative; padding:20px 24px 20px 56px; margin:22px 0 26px; border:1px dashed color-mix(in oklch, var(--soon) 42%, transparent); border-radius:var(--rad-lg); background:color-mix(in oklch, var(--soon) 6%, transparent); font-size:14.5px; line-height:1.62; color:var(--mute); text-wrap:pretty; }
.soon-note b{ color:color-mix(in oklch, var(--soon) 78%, var(--ink)); font-weight:650; }
.soon-ico{ position:absolute; left:22px; top:20px; color:var(--soon); }
.soon-hi{ color:color-mix(in oklch, var(--soon) 72%, var(--ink)); font-weight:500; }

/* ── window cards ── */
.windows{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:30px 0 8px; }
.window{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--rad-lg); padding:24px 26px;
}
.window h4{ margin:0 0 8px; font-size:17px; color:var(--ink); display:flex; align-items:center; gap:9px; flex-wrap:wrap; row-gap:7px; }
.window h4 .wm{ font-family:var(--mono); font-size:11px; color:var(--ping-deep); border:1px solid var(--ping-line); border-radius:999px; padding:3px 10px; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; flex:0 0 auto; }
.window p{ margin:0; font-size:14px; max-width:none; }
.windows.three{ grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .windows.three{ grid-template-columns:1fr 1fr; } }
@media(max-width:680px){ .windows, .windows.three{ grid-template-columns:1fr; } }

/* ── never list ── */
.nevers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:30px 0 8px; }
.never{
  display:flex; gap:13px; align-items:flex-start; padding:18px 20px;
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--rad);
}
.never .x{
  width:24px; height:24px; border-radius:8px; flex-shrink:0; margin-top:1px;
  background:oklch(0.55 0.16 25 / 0.10); color:oklch(0.52 0.16 25);
  border:1px solid oklch(0.55 0.16 25 / 0.25);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
}
.never p{ margin:0; font-size:14px; max-width:none; }
.never b{ color:var(--ink); }
@media(max-width:680px){ .nevers{ grid-template-columns:1fr; } }

/* ── FAQ ── */
.faq{ margin:30px 0 8px; }
.faq details{
  border-bottom:1px solid var(--line-soft);
}
.faq details:first-child{ border-top:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px;
  padding:20px 4px; font-size:16px; font-weight:600; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .tg{
  margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line); color:var(--dim);
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:400;
  transition:transform 0.25s, color 0.2s, border-color 0.2s;
}
.faq details[open] summary .tg{ transform:rotate(45deg); color:var(--ping); border-color:var(--ping-line); }
.faq .fa{ padding:0 4px 22px; }
.faq .fa p{ font-size:14.5px; max-width:none; }
.faq .fa p:last-child{ margin-bottom:0; }

/* ── três resultantes ── */
.whotable{ width:100%; border-collapse:collapse; margin:30px 0 6px; }
.whotable th{
  text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim); font-weight:500;
  padding:0 14px 12px; border-bottom:1px solid var(--line);
}
.whotable th.c, .whotable td.c{ text-align:center; }
.whotable td{ padding:14px; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--ink); font-weight:500; }
.whotable td.c{ font-family:var(--mono); font-size:14px; }
.whotable .yes{ color:var(--ok); font-weight:600; }
.whotable .nope{ color:oklch(0.52 0.16 25); font-weight:600; }
.whotable .no{ color:var(--line); }
.whotable td small{ display:block; font-weight:400; font-size:12.5px; color:var(--dim); }
.resgrid{ display:flex; flex-direction:column; gap:14px; margin:32px 0 8px; }
.rescard{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:var(--rad-lg);
  padding:26px 28px;
}
.rescard.hot{ background:var(--ping-glass); border-color:var(--ping-line); }
.rescard-h{ display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.rescard-h h4{ margin:0; font-size:19px; letter-spacing:-0.015em; color:var(--ink); }
.rescard-h .who{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ping-deep); border:1px solid var(--ping-line); border-radius:999px; padding:3px 11px;
}
.rescard-f{
  font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--ping-deep); margin:10px 0 14px;
  padding:12px 16px; background:var(--paper); border:1px solid var(--line-soft); border-radius:10px;
  white-space:normal; overflow-wrap:break-word;
}
/* quebra de linha da fórmula: os termos "+ Σ …" descem juntos, alinhados */
.rescard-f .ft{ display:inline-block; }
@media(max-width:680px){
  .formula{ font-size:11.5px; line-height:1.9; padding:16px 14px; overflow-x:auto; }
  .rescard-f{ font-size:11px; padding:10px 12px; }
}
.rescard ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.rescard li{
  font-size:14.5px; color:var(--mute); line-height:1.6;
  display:block; position:relative; padding-left:22px;
}
.rescard li::before{ content:"⚡"; position:absolute; left:0; top:2px; font-size:12px; }
.rescard li b{ color:var(--ink); }

/* ── credo (bordão do contrato negativo) ── */
.credo{
  margin:48px 0 8px; padding:44px 36px; text-align:center;
  background:var(--night); border-radius:var(--rad-lg);
  box-shadow:0 22px 50px -24px oklch(0.16 0.012 80 / 0.55);
}
.credo-pre{
  font-family:var(--mono); font-size:13px; line-height:1.8;
  color:oklch(0.60 0.012 80); margin:0 0 18px; max-width:none;
}
.credo-main{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(28px, 4.2vw, 42px); line-height:1.2; letter-spacing:-0.01em;
  color:oklch(0.96 0.005 90); margin:0 0 18px; max-width:none; text-wrap:balance;
}
.credo-main em{ color:var(--ping-bright); font-style:italic; text-shadow:0 0 36px oklch(0.84 0.17 88 / 0.45); }
.credo-post{
  font-size:13.5px; line-height:1.7; color:oklch(0.68 0.012 80);
  margin:0 auto; max-width:52ch; text-wrap:pretty;
}

/* ── footer ── */
.foot{
  padding:44px 0 64px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px;
  font-family:var(--mono); font-size:12px; color:var(--dim);
}
.foot a{ color:var(--mute); }

/* ── modo embed (hiper-foco): o pop-up já tem sua própria barra "Voltar" ── */
body.embed .topbar{display:none}

/* ── canetas do contrato do gesto ── */
.mk-loan{background:color-mix(in srgb,#2f9db8 26%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,#2f9db8 26%,transparent);border-radius:2px}
.mk-burn{background:color-mix(in srgb,#e0a41c 34%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,#e0a41c 34%,transparent);border-radius:2px}

/* ── sumário ── */
.toc{padding:clamp(26px,4vw,38px) 0;border-bottom:1px solid var(--rule)}
.toc-k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ping-dim);margin-bottom:14px}
.toc-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 26px;margin:0;padding:0;list-style:none}
.toc-l a{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.toc-l a:hover{border-bottom-color:var(--ping)}
.toc-l b{font-size:11px;color:var(--ping-dim);min-width:24px}
@media(max-width:640px){.toc-l{grid-template-columns:1fr;gap:0}.toc-l a{font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--rule)}}

.toc-back{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink);font-size:12.5px;font-weight:600;text-decoration:none;box-shadow:0 6px 22px -8px rgba(20,18,15,.3);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s}
.toc-back.on{opacity:1;transform:none;pointer-events:auto}
.toc-back:hover{border-color:var(--ping)}
@media(max-width:640px){.toc-back{right:12px;bottom:12px;padding:9px 13px;font-size:12px}}
@media print{.toc-back{display:none}}