/* =========================================================================
   projetos.css — identidade da página /projetos ("arquivo de coisas
   construídas"). Depende de css/base.css (tokens --af-*, body.af, .field,
   .grid12, .prose, .meta, .go) e de css/components.css (galeria .gal-*).

   A página é uma sequência de CENAS horizontais. Cada cena é uma placa
   escura ou uma folha de papel, e alterna com a seguinte. Os materiais
   (tipografia, filete, fita, clipe, ficha, molde de aparelho) são os
   mesmos em todas; a composição de cada projeto é própria.
   ========================================================================= */

/* ---------- cena: tokens locais ---------- */

.pj-scene{
  --sc-bg:        var(--af-paper);
  --sc-edge:      var(--af-line);
  --sc-ink:       var(--af-ink);
  --sc-ink-soft:  var(--af-ink-soft);
  --sc-ink-faint: var(--af-ink-faint);
  --sc-line:      var(--af-line);
  --sc-line-soft: var(--af-line-soft);
  --sc-accent:    var(--af-accent);
  --sc-panel:     var(--af-paper);
  --sc-panel-2:   var(--af-panel);
  --sc-tape:      rgba(180,170,140,0.30);
  --sc-shadow:    0 2px 4px rgba(25,27,24,0.05), 0 18px 44px rgba(25,27,24,0.13);
  --sc-lift:      0 4px 10px rgba(25,27,24,0.08), 0 26px 60px rgba(25,27,24,0.18);
  --phone-body:   #1E211D;
  --phone-detail: rgba(255,255,255,0.16);

  /* dissolução de borda para a mesa: uma vinheta inset curta na cor da mesa
     (--pj-ground), no topo e na base, sobre o fundo/textura da cena e sob o
     conteúdo. Sutil, só para tirar o corte horizontal seco entre as cenas. */
  --pj-edge-fade:
    inset 0 clamp(56px, 8vw, 84px) 50px -52px var(--pj-ground),
    inset 0 calc(-1 * clamp(56px, 8vw, 84px)) 50px -52px var(--pj-ground);

  position: relative;
  padding: clamp(1.2rem, 3vw, 2.2rem) var(--gut);
  scroll-margin-top: 6.4rem;
}

/* a placa: cada projeto é um objeto pousado sobre a mesa, não uma faixa */
.pj-scene .pj-scene-in{
  position: relative;
  max-width: var(--field-max);
  margin-inline: auto;
  padding: clamp(2.4rem, 3.2vw, 3.9rem) clamp(1.5rem, 2.7vw, 3.2rem);
  background: var(--sc-bg);
  color: var(--sc-ink);
  border: 1px solid var(--sc-edge);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--sc-shadow);
}

/* A cor de identidade do site ainda não está definida, e o verde herdado nos
   tokens --af-accent* é só um placeholder. Nesta página o accent não tem
   matiz: é tinta de marcação em osso quente, um pouco mais clara que o texto,
   para traço, filete, selo, rótulo mono, foco e o asterismo traçado do Norte.
   Precisa redefinir --accent* junto com --af-accent*: o bridge de base.css
   resolve `--accent: var(--af-accent)` no :root e não reavalia por elemento. */
body.projetos{
  --af-accent:        #D6D2C6;
  --af-accent-strong: #E8E4D8;
  --af-accent-soft:   #3A3B35;
  --af-accent-wash:   rgba(236,232,220,0.06);
  --accent:           #D6D2C6;
  --accent-strong:    #E8E4D8;
  --accent-soft:      #3A3B35;
  --accent-wash:      rgba(236,232,220,0.06);
}

/* placa escura: a cena em negativo. Vale nos dois temas, por isso a tinta
   é a de fundo escuro, não a do tema em uso. */
.pj-scene--plate{
  --sc-bg:        var(--af-plate);
  --sc-edge:      rgba(236,232,220,0.09);
  --sc-ink:       var(--af-on-plate);
  --sc-ink-soft:  #A9ABA1;
  --sc-ink-faint: #8B8E84;
  --sc-line:      #34372F;
  --sc-line-soft: #262922;
  --sc-accent:    #D6D2C6;
  --sc-panel:     #1F221E;
  --sc-panel-2:   #262A24;
  --sc-tape:      rgba(210,200,170,0.16);
  --sc-shadow:    0 2px 4px rgba(0,0,0,0.34), 0 18px 44px rgba(0,0,0,0.42);
  --sc-lift:      0 4px 10px rgba(0,0,0,0.34), 0 26px 60px rgba(0,0,0,0.5);
  --phone-body:   #2B2F29;
  --phone-detail: rgba(255,255,255,0.2);
}

/* cena noturna: usada só pelo Organizador. Grafite quase-preto, marcação em
   osso e cinzas quentes. Nada de roxo. Vale como valor único, não depende do
   tema, igual à .pj-scene--plate. As categorias do calendário de fundo levam
   um matiz discreto da paleta de arquivo (ardósia, ocre, ferrugem, caqui),
   ainda apagadas pela opacidade e pelo desfoque da cena. */
.pj-scene--night{
  --sc-bg:        #151815;
  --sc-edge:      rgba(228,232,224,0.09);
  --sc-ink:       #E9EBE5;
  --sc-ink-soft:  #A6AAA0;
  --sc-ink-faint: #83887F;
  --sc-line:      #33372F;
  --sc-line-soft: #262A23;
  --sc-accent:    #D6D2C6;
  --sc-panel:     #1E221D;
  --sc-panel-2:   #262A24;
  --sc-tape:      rgba(210,214,205,0.13);
  --sc-shadow:    0 2px 4px rgba(0,0,0,0.34), 0 18px 44px rgba(0,0,0,0.44);
  --sc-lift:      0 4px 10px rgba(0,0,0,0.34), 0 26px 60px rgba(0,0,0,0.52);
  --phone-body:   #282C27;
  --phone-detail: rgba(255,255,255,0.18);
  /* categorias do calendário de fundo: um matiz discreto por tipo, tirado da
     paleta de arquivo. A cena continua apagada (opacidade, desfoque), então a
     cor entra sutil. A linha do "agora" fica neutra e é a mais clara. */
  --org-ic:      #C6A343;  /* IC e pesquisa: ocre quente */
  --org-aula:    #5C86A2;  /* aulas: azul-ardósia, a única nota fria */
  --org-prova:   #AE5E40;  /* provas e entregas: ferrugem, atenção */
  --org-estagio: #94794A;  /* estágio: caqui */
  --org-estudo:  #7C7869;  /* estudo: neutro quente, o mais discreto (tracejado) */
  --org-now:     #E4DDC7;  /* linha do agora: osso, neutra e a mais clara */
}
:root[data-theme="dark"] .pj-scene--plate{
  --sc-bg:   #161815;
  --sc-edge: rgba(236,232,220,0.07);
}

/* a mesa: fundo contínuo por trás de todas as placas */
body.projetos{ background: var(--pj-ground); }
body.projetos main{ background: var(--pj-ground); }
:root{ --pj-ground: #E4E0D5; }
:root[data-theme="dark"]{ --pj-ground: #0B0C0A; }

.pj-scene-in{
  display: grid;
  grid-template-columns: minmax(0, 25.5rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.2rem);
  row-gap: clamp(2.2rem, 4vw, 3rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Organizador: esta cena não é uma placa pousada na mesa, é uma FAIXA que
   atravessa a tela de ponta a ponta. O fundo grafite e o calendário vão até
   as bordas; só o conteúdo (texto + aparelho) continua na coluna de leitura
   centralizada, como no resto do site. */
#organizador.pj-scene{
  padding-inline: 0;
  background: var(--sc-bg);
  overflow: hidden;
  box-shadow: var(--pj-edge-fade);
}
#organizador .pj-scene-in{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* ---------- coluna de texto da cena ---------- */

.pj-col{ position: relative; }

.pj-num{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--sc-ink-faint);
  margin: 0 0 1.25rem;
}
.pj-num::before{
  content: "";
  width: 16px;
  height: 0;
  border-top: 1.5px solid var(--sc-accent);
  flex: 0 0 auto;
}

.pj-title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 3.1vw, 2.85rem);
  line-height: 1.03;
  letter-spacing: -0.016em;
  margin: 0 0 0.55rem;
  color: var(--sc-ink);
  text-wrap: balance;
}
.pj-title::after{ content: none; }

.pj-kicker{
  font-family: var(--mono);
  font-size: 0.665rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  margin: 0 0 1.5rem;
  display: block;
}

.pj-lede{
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sc-ink-soft);
  margin: 0 0 1.5rem;
  max-width: 40ch;
}

/* pontos-chave: marca verde pequena, sem virar lista de features */
.pj-keys{
  list-style: none;
  margin: 0 0 1.7rem;
  padding: 0;
  display: grid;
  gap: 0.62rem;
  max-width: 40ch;
}
.pj-keys li{
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sc-ink-soft);
}
.pj-keys li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sc-accent);
}

.pj-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  margin: 0;
}
.pj-scene .go{
  color: var(--sc-accent);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pj-scene .go:hover{ border-bottom-color: var(--sc-accent); }
.pj-scene .go .arr{
  display: inline-block;
  transition: transform var(--af-dur-fast) var(--af-ease);
}
.pj-scene .go:hover .arr{ transform: translateX(3px); }

/* relato completo: o texto longo continua na página, dobrado */
.pj-more{ margin-top: 0.9rem; max-width: var(--text-w); }
.pj-more > summary{
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--sc-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  border-bottom: 1px solid transparent;
}
.pj-more > summary::-webkit-details-marker{ display: none; }
.pj-more > summary:hover{ border-bottom-color: var(--sc-accent); }
.pj-more > summary .pj-more-mark{
  display: inline-block;
  width: 0.8em;
  text-align: center;
  transition: transform var(--af-dur) var(--af-ease);
}
.pj-more[open] > summary .pj-more-mark{ transform: rotate(45deg); }
.pj-more[open] > summary .pj-more-open{ display: none; }
.pj-more:not([open]) > summary .pj-more-close{ display: none; }
.pj-more-body{
  border-left: 1px solid var(--sc-line);
  padding: 0.2rem 0 0.2rem 1.25rem;
  margin-top: 1.1rem;
}
.pj-more-body p{
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--sc-ink-soft);
}
.pj-more-body p:last-child{ margin-bottom: 0; }

/* relato completo em cena de duas colunas (Norte, Organizador): mora fora
   da .pj-col, como filho direto de .pj-scene-in, e vira um painel de largura
   cheia abaixo do texto e do aparelho. Antes ele ficava dentro da coluna de
   texto e, ao abrir, esticava só aquela coluna, descasando da altura do
   aparelho ao lado e deixando um vão vazio enorme na cena inteira. */
.pj-more--panel{
  grid-column: 1 / -1;
  max-width: none;
  padding-top: clamp(1.5rem, 2.4vw, 2.1rem);
  border-top: 1px solid var(--sc-line);
  /* precisa de contexto posicionado, senão o Norte pinta o fundo do céu
     (.pj-sky-photo/.pj-sky-scrim/.pj-sky, absolutos) por cima do painel
     inteiro: elementos não-posicionados pintam antes dos posicionados,
     não importa a ordem no DOM. .pj-col e .pj-stage já tinham essa
     correção; faltava aqui. */
  position: relative;
}
.pj-more--panel .pj-more-body{
  max-width: 66rem;
}
@media (min-width: 760px){
  .pj-more--panel .pj-more-body{
    columns: 2;
    column-gap: clamp(2rem, 4vw, 3.4rem);
  }
  .pj-more--panel .pj-more-body p{
    break-inside: avoid;
  }
}
/* dois relatos lado a lado: a história e a parte técnica, cada um seu
   próprio <details>, para não misturar os dois tons num texto só. */
.pj-more-row{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.6rem);
}
.pj-more-row .pj-more{
  grid-column: auto;
  max-width: none;
}
.pj-more-row .pj-more:last-child{
  border-left: 1px solid var(--sc-line);
  padding-left: clamp(1.6rem, 3vw, 2.6rem);
}
.pj-more-row .pj-more--panel .pj-more-body{
  columns: 1;
  max-width: none;
}
@media (max-width: 760px){
  .pj-more-row{ grid-template-columns: 1fr; row-gap: 0.4rem; }
  .pj-more-row .pj-more:last-child{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--sc-line);
    padding-top: 0.9rem;
  }
}
@media (prefers-reduced-motion: no-preference){
  .pj-more--panel[open] > .pj-more-body{
    animation: pj-more-in 0.42s var(--af-ease, ease) both;
  }
  @keyframes pj-more-in{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}

/* anotação manuscrita: rara, e só onde é comentário de margem */
.pj-hand{
  font-family: var(--af-hand);
  font-size: 1.34rem;
  line-height: 1.25;
  color: var(--sc-ink-faint);
  margin: 1.7rem 0 0;
  transform: rotate(-1.6deg);
  transform-origin: left center;
  max-width: 22ch;
}

/* selo de estado, no fim do número da cena */
.pj-seal{
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--sc-line);
  border-radius: 2px 5px 3px 4px;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  color: var(--sc-ink-faint);
}
.pj-seal svg{ width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pj-seal--priv{ color: var(--sc-accent); border-color: color-mix(in srgb, var(--sc-accent) 45%, transparent); }
.pj-seal--wip{ border-style: dashed; }

/* ficha de fatos: estado e papel, mono, sem caixa */
.pj-facts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.7rem 1.4rem;
  margin: 0 0 1.35rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--sc-line-soft);
  max-width: 40ch;
}
.pj-fact{ display: grid; gap: 0.18rem; }
.pj-fact dt{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-accent);
}
.pj-fact dd{
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--sc-ink-soft);
}

/* etiquetas de tecnologia: dado, não badge */
.pj-stack{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
  padding: 0;
}
.pj-stack li{
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  color: var(--sc-ink-faint);
  border: 1px solid var(--sc-line);
  border-radius: 2px 4px 2px 4px;
  padding: 0.2rem 0.46rem;
}

/* ---------- palco: a composição visual de cada projeto ---------- */

.pj-stage{ position: relative; min-width: 0; align-self: center; }
.pj-scene figure{ margin: 0; }

.pj-caption{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: var(--sc-ink-faint);
  margin: 0.85rem 0 0;
  line-height: 1.5;
}
.pj-caption b{
  font-weight: 400;
  color: var(--sc-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 0.45rem;
}

/* nota de material pendente: o site pode dizer que ainda não tem a foto */
.pj-pending{
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--sc-ink-faint);
  border-left: 1px dashed var(--sc-line);
  padding-left: 0.8rem;
  margin: 1.4rem 0 0;
  line-height: 1.55;
}

/* ---------- abertura da página ----------
   A capa é a folha de rosto do arquivo, não um hero de portfólio. Fica na
   coluna de leitura, encosta na primeira cena (padding de baixo curto) e usa
   o mesmo gesto das cenas: um filete curto na cor de marcação abaixo do
   título, ecoando o traço do .pj-num. A nota não é um adesivo: é uma
   anotação de margem, presa só por um filete à esquerda. */

.pj-cover{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 7vw, 8.5rem) clamp(1.4rem, 3vw, 2.4rem);
  background: var(--pj-ground);
}
/* papel milimetrado quase subliminal: mesma família do grid da constelação do
   Norte, mas quadrado e apagado. Some antes de encostar na nav e na primeira
   cena, para não competir com nada. */
.pj-cover::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(233,229,217,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,229,217,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 60%, transparent 95%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 60%, transparent 95%);
}
/* emenda com o Norte: a base da capa desce da cor da mesa até o tom da placa
   do Norte, e alguns pontos do céu já começam a aparecer aqui, para a primeira
   cena não entrar de repente. */
.pj-cover-sky{
  position: absolute;
  left: 0;
  right: 0;
  /* a transição começa na altura da 3ª linha da lede ("do trabalho. Boa parte
     delas..."), não antes: o topo é ancorado ao topo da capa, não à base. */
  top: clamp(12.5rem, 7rem + 9vw, 15.5rem);
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  /* a transição não tem matiz próprio: parte da cor da mesa (--pj-ground, um
     quase-preto morno) e esfria até o quase-preto azulado do céu do Norte (a
     foto proj-norte-ceu tem topo ~#010208). Sem verde. A subnav e o topo da
     cena do Norte continuam exatamente esta mesma rampa, sem degrau. */
  background: linear-gradient(180deg,
    transparent 0,
    #06070C 40%,
    #04050B 72%,
    #03040A 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%);
}
.pj-cover-sky .cs-dot,
.pj-subnav-sky .cs-dot{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: #EFECE3;
  box-shadow: 0 0 3px 1px rgba(239,236,227,0.4);
  opacity: 0.4;
}
/* as mesmas estrelas atravessam a barra do índice, para o céu não cortar nela */
.pj-subnav-sky{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pj-subnav-sky .cs-dot{ opacity: 0.32; }
.pj-cover-in{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  column-gap: clamp(2rem, 5vw, 4.6rem);
  row-gap: 2.2rem;
  align-items: start;
}
.pj-cover h1{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.3rem, 3.6vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 1.15rem;
}
.pj-cover h1::after{
  content: "";
  display: block;
  width: 2.25rem;
  height: 0;
  border-top: 1.5px solid var(--accent);
  margin-top: 1.15rem;
}
.pj-cover-lede{
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--af-ink-soft);
  max-width: 52ch;
  margin: 0 0 1.4rem;
  font-family: var(--serif);
}
.pj-cover-links{ display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }

/* nota: anotação de margem, sem caixa nem fita, presa por um filete à esquerda.
   Fica na altura do texto de abertura (não colada no título, não lá embaixo):
   o recuo do topo alinha o rótulo com a primeira linha da lede. */
.pj-note{
  align-self: start;
  border-left: 2px solid var(--line);
  padding: 0.1rem 0 0.1rem 1.15rem;
  margin: 2.2rem 0 0;
}
.pj-note-label{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.65rem;
}
.pj-note p{
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--af-ink-soft);
}

/* ---------- índice lateral (a espinha da página) ---------- */

/* barra sticky de projetos: o único índice da página, em todas as larguras */
.pj-subnav{
  position: sticky;
  top: 49px;
  z-index: 15;
  /* a barra é um trecho da mesma rampa da .pj-cover-sky: começa no tom onde a
     capa termina (#03040A) e segue até o do céu do Norte (#02030A). Translúcida
     e sem linha dura para não cortar a transição; o blur segura a legibilidade
     dos rótulos quando ela gruda sob a nav principal sobre o céu do Norte.
     Hex fixo, como .pj-cover-sky. */
  background: linear-gradient(180deg,
    color-mix(in srgb, #03040A 84%, transparent),
    color-mix(in srgb, #02030A 64%, transparent));
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  border-bottom: 0;
}
@media (max-width: 960px){ .pj-subnav{ top: 67px; } }
.pj-subnav-in{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.55rem var(--gut);
  max-width: var(--field-max);
  margin-inline: auto;
}
.pj-subnav-in::-webkit-scrollbar{ display: none; }
.pj-subnav a{
  flex: 0 0 auto;
  gap: 0.35em;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.35rem 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}
.pj-subnav a:hover{ color: var(--ink); }
.pj-subnav a.active{ color: var(--ink); border-bottom-color: var(--accent); }
/* quando a fileira estoura a largura e vira scroller, um respiro na borda
   direita avisa que há mais itens */
@media (max-width: 900px){
  .pj-subnav-in{
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent);
  }
}

/* ---------- alternância mobile / desktop ---------- */

.pj-switch{
  display: inline-flex;
  position: relative;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: var(--sc-panel);
  margin: 0 0 1.5rem;
}
.pj-switch::before{
  content: "";
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 0.2rem;
  width: var(--sw-w, 50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sc-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-accent) 55%, transparent);
  transform: translateX(var(--sw-x, 0));
  transition: transform var(--af-dur) var(--af-ease), width var(--af-dur) var(--af-ease);
}
.pj-switch button{
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--sc-ink-faint);
  padding: 0.5rem 0.95rem;
  min-height: 36px;
  border-radius: 999px;
  transition: color var(--af-dur-fast) var(--af-ease);
}
.pj-switch button[aria-pressed="true"]{ color: var(--sc-ink); }
.pj-switch button:hover{ color: var(--sc-ink); }

.pj-views{ position: relative; }
.pj-view[hidden]{ display: none !important; }
.pj-view{ animation: pj-view-in var(--af-dur-slow) var(--af-ease) both; }
@keyframes pj-view-in{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- moldes de aparelho ---------- */

.pj-phone{
  display: block;
  position: relative;
  padding: 7px;
  border-radius: 20px;
  background: var(--phone-body);
  box-shadow:
    0 0 0 1px var(--sc-line),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 22px 38px -20px rgba(0,0,0,0.55);
}
.pj-phone::before{
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--phone-detail);
  transform: translateX(-50%);
}
.pj-phone-screen{
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  border-radius: 13px;
  background: var(--sc-panel-2);
  border: 0;
}
.pj-phone-screen > picture{ display: block; height: 100%; }
.pj-phone-screen > picture > img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.pj-lap{ display: block; position: relative; }
.pj-lap-body{
  padding: 9px 9px 10px;
  border-radius: 10px 10px 4px 4px;
  background: var(--phone-body);
  box-shadow:
    0 0 0 1px var(--sc-line),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 26px 44px -24px rgba(0,0,0,0.55);
}
.pj-lap-screen{
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: 3px;
  background: var(--sc-panel-2);
  border: 0;
}
/* base do notebook: trapézio a traço, sem parecer render de loja */
.pj-lap-base{
  position: relative;
  height: 11px;
  margin: 0 -4%;
  background: var(--phone-body);
  border-radius: 0 0 9px 9px;
  box-shadow: 0 0 0 1px var(--sc-line), 0 10px 18px -12px rgba(0,0,0,0.6);
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
}
.pj-lap-base::after{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 13%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--phone-detail);
  transform: translateX(-50%);
}

/* composição do Norte: uma única tela, bem apresentada, com o clipe da
   abertura logo ao lado (não empurrado pra ponta do container largo) */
.pj-devices{
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(1.3rem, 2.6vw, 2.1rem);
  perspective: 1400px;
}
.pj-dev-front{ width: clamp(216px, 23vw, 304px); z-index: 4; position: relative; }
.pj-devices--solo{ justify-content: center; }
.pj-devices--solo .pj-dev-front{ width: clamp(232px, 25vw, 320px); }

/* ---------- Norte: a carta celeste ---------- */
/* Um recorte de carta polar, não um fundo estrelado genérico. A retícula
   (círculos de declinação de 80° a 40°, marcas de hora), as posições e os
   tamanhos das estrelas saem de coordenadas equatoriais reais numa projeção
   estereográfica centrada no polo. O verde marca só o que é construção
   humana: a Ursa Menor traçada e a linha que os navegantes esticam de Merak
   por Dubhe até a Polar. O resto do céu é tinta branca fria. */
.pj-constel{
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  z-index: 0;
  color: #DCE5E8;
  /* o céu contorna a coluna de leitura: as duas camadas se somam, então ele
     recua no alto à esquerda e volta inteiro à direita e embaixo */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0 28%, rgba(0,0,0,0.38) 43%, #000 60%),
    linear-gradient(to bottom, transparent 0 73%, rgba(0,0,0,0.46) 83%, #000 92%);
  mask-image:
    linear-gradient(to right, transparent 0 28%, rgba(0,0,0,0.38) 43%, #000 60%),
    linear-gradient(to bottom, transparent 0 73%, rgba(0,0,0,0.46) 83%, #000 92%);
}

/* retícula gravada: fina, quase no limite do visível */
.pj-constel .cn-grid{ fill: none; stroke: currentColor; }
.pj-constel .cn-par{ stroke-width: 0.55; opacity: 0.07; }
.pj-constel .cn-par--main{ stroke-width: 0.7; opacity: 0.115; }
.pj-constel .cn-tick{ stroke-width: 0.6; opacity: 0.13; }
.pj-constel .cn-tick--h{ stroke-width: 0.85; opacity: 0.24; }

/* cada estrela é um ponto de luz com queda, não um disco chapado: núcleo
   claro, corpo na tinta do céu e borda que se apaga. Tamanho e opacidade
   vêm da magnitude, então existe hierarquia de verdade. A tinta varia um
   pouco entre quente e fria, como no céu. */
.pj-constel .cn-ga-core{ stop-color: #ECE7DA; }
.pj-constel #cn-ga .s-core{ stop-color: #ECE7DA; }
.pj-constel #cn-ga .s-body{ stop-color: var(--sc-accent); }

/* primeira grandeza: raios curtos de gravura, nunca halo */
.pj-constel .cn-burst path{
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 0.34;
}

/* cauda do Dragão: só as estrelas, sem traço (ela passa atrás dos aparelhos) */
.pj-constel .cn-dra circle{ opacity: 0.55; }

/* Ursa Maior: insinuada, entrando pela borda de baixo, em tinta neutra */
.pj-constel .cn-uma .cn-line{
  fill: none;
  stroke: currentColor;
  stroke-width: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.21;
}
.pj-constel .cn-uma .cn-star{ opacity: 0.6; }

/* Ursa Menor: o asterismo que conta. Sem cor: o que a separa do resto do céu
   são as ligações traçadas, então elas puxam um pouco mais de tinta. */
.pj-constel .cn-umi .cn-line{
  fill: none;
  stroke: var(--sc-accent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
}
.pj-constel .cn-umi .cn-star{ opacity: 0.95; }

/* a Polar: estrela de gravura, compacta. As ligações que chegam nela param
   antes dos raios, então ela fica solta no meio do vão. */
.pj-constel .cn-polaris{ color: var(--sc-accent); }
.pj-constel .cn-ray{
  fill: none;
  stroke: currentColor;
  stroke-width: 0.62;
  stroke-linecap: round;
  opacity: 0.44;
}
.pj-constel .cn-core{ fill: #F0EBDE; opacity: 0.95; }
.pj-constel .cn-halo{ opacity: 0.9; }

/* cintilação: seis estrelas, devagar, amplitude baixa */
.pj-constel .tw{
  animation: pj-twinkle 6.2s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes pj-twinkle{
  from{ opacity: 0.3; }
  to{ opacity: 0.9; }
}

/* o traço se desenha uma vez, quando a cena entra na tela. O estado normal
   é a carta pronta; quem esconde as ligações é o .cn-anim, posto pelo JS
   só quando ele vai mesmo animar. Assim, sem JS, com movimento reduzido ou
   com transições desligadas, a carta aparece inteira em vez de sumir. */
@media (prefers-reduced-motion: no-preference){
  .pj-constel.cn-anim .cn-draw{
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 0.68, 0.3, 1) var(--d, 0s);
  }
  .pj-constel.cn-anim .cn-polaris{
    opacity: 0;
    transition: opacity 0.8s ease-out 0.2s;
  }
  .pj-constel.cn-anim.is-drawn .cn-draw{ stroke-dashoffset: 0; }
  .pj-constel.cn-anim.is-drawn .cn-polaris{ opacity: 1; }
}

/* ---------- Norte: a faixa de céu ----------
   Esta cena não é uma placa pousada na mesa: é uma FAIXA que atravessa a
   tela de ponta a ponta. A fotografia do céu e a cintilação vão até as
   bordas; só o conteúdo (texto + aparelhos) continua na coluna de leitura
   centralizada, com o véu de legibilidade por baixo dele. O céu segue no seu
   índigo com um fio de ameixa; a cor de marcação, não: é a mesma tinta de
   osso do resto da página. Vale como valor único, não depende do tema. */
#norte.pj-scene{
  --sc-bg:        #16131F;
  --sc-edge:      rgba(226,222,238,0.09);
  --sc-ink:       #E8E6EF;
  --sc-ink-soft:  #A9A7B4;
  --sc-ink-faint: #85838F;
  --sc-line:      #322F3B;
  --sc-line-soft: #262430;
  --sc-accent:    #D8D3C5;
  --sc-panel:     #1E1B29;
  --sc-panel-2:   #26232F;
  --sc-tape:      rgba(214,210,226,0.14);
  --phone-body:   #2A2733;
  --phone-detail: rgba(255,255,255,0.18);
  padding-inline: 0;
  overflow: hidden;
}
#norte .pj-scene-in{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: clamp(2.8rem, 4vw, 4.6rem) var(--gut);
}

/* a transição da capa continua para dentro do Norte: um capuz do mesmo
   quase-preto azulado no topo da cena, sobre a foto e sob o texto, para a
   rampa capa → subnav → céu não ter corte em ponto nenhum. */
#norte.pj-scene::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(120px, 16vh, 190px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    #02030A 0,
    color-mix(in srgb, #02030A 42%, transparent) 55%,
    transparent 100%);
}
/* base do Norte: a foto do céu se dissolve na mesa, para a passagem ao
   Organizador não ser um corte. Abaixo do texto (z 0), acima da foto. */
#norte.pj-scene::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(70px, 9vh, 110px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(0deg,
    var(--pj-ground) 0,
    color-mix(in srgb, var(--pj-ground) 45%, transparent) 55%,
    transparent 100%);
}

/* a carta celeste desenhada à mão foi substituída pela fotografia do céu
   (ver .pj-sky-photo, logo abaixo); o SVG fica no código, só desligado, caso
   um dia volte a fazer sentido. */
#norte .pj-constel{ display: none; }

/* a foto do céu: camada de fundo real, ocupando a placa inteira. A âncora
   86.9% 14.4% é a posição exata da Polar dentro do arquivo norte_fundo.png
   (achada por centroide de brilho em Python), então o marcador .sky-polaris
   cai sobre ela em qualquer recorte de tela, já que background/object-position
   preserva esse ponto por definição. */
#norte .pj-sky-photo{
  position: absolute;
  inset: -1px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#norte .pj-sky-photo picture{ display: block; width: 100%; height: 100%; }
#norte .pj-sky-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 86.9% 14.4%;
}

/* véu de legibilidade: um adensamento do próprio céu que entra pela margem
   esquerda da tela, firma a coluna de leitura e some antes dos aparelhos.
   Não é um cartão: sem borda, sem começo, só a lateral esquerda encostada no
   canto e uma queda longa até o nada. A tinta é quase a cor do céu (um
   quase-preto com um fio de ameixa), então a transição é imperceptível, sem
   névoa clara. As paradas são ancoradas no centro (calc(50% ...)), então
   acompanham o texto em qualquer largura. */
#norte .pj-sky-scrim{
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(to right,
    #0A0910 0,
    #0A0910 calc(50% - 12rem),
    color-mix(in srgb, #0A0910 55%, transparent) calc(50% - 3rem),
    transparent calc(50% + 9rem));
}

/* cintilação: uma dúzia de pontos pequenos sobre a foto, cada um com seu
   próprio ritmo (--d atraso, --sp duração), para não piscarem em uníssono.
   A Polar ganha um pulso um pouco mais presente, sem virar glow de produto. */
#norte .pj-sky{
  position: absolute;
  inset: -1px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0 28%, rgba(0,0,0,0.38) 43%, #000 60%),
    linear-gradient(to bottom, transparent 0 73%, rgba(0,0,0,0.46) 83%, #000 92%);
  mask-image:
    linear-gradient(to right, transparent 0 28%, rgba(0,0,0,0.38) 43%, #000 60%),
    linear-gradient(to bottom, transparent 0 73%, rgba(0,0,0,0.46) 83%, #000 92%);
}
#norte .pj-sky .sky-dot{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: #EFECE3;
  box-shadow: 0 0 3px 1px rgba(239,236,227,0.5);
  opacity: 0.5;
  animation: pj-sky-tw var(--sp, 5.6s) ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes pj-sky-tw{
  from{ opacity: 0.22; transform: scale(0.85); }
  to{   opacity: 0.85; transform: scale(1.1); }
}
#norte .pj-sky .sky-polaris{
  position: absolute;
  left: 86.9%;
  top: 14.4%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #F5F1E7;
  box-shadow: 0 0 5px 1.5px rgba(240,236,226,0.85);
  animation: pj-polaris-core 4.6s ease-in-out infinite;
}
#norte .pj-sky .sky-polaris::before{
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,228,215,0.55), rgba(233,228,215,0) 72%);
  animation: pj-polaris-halo 4.6s ease-in-out infinite;
}
@keyframes pj-polaris-core{
  0%, 100%{ opacity: 0.86; }
  50%{ opacity: 1; }
}
@keyframes pj-polaris-halo{
  0%, 100%{ opacity: 0.55; transform: scale(0.88); }
  50%{ opacity: 1; transform: scale(1.22); }
}

/* o celular ficava colado no texto, com um vão enorme sobrando à direita
   do palco largo; empurrado para a direita, ocupa melhor a coluna. O
   notebook do desktop ganha o mesmo teto de largura e o mesmo alinhamento,
   para a troca mobile/desktop não parecer a imagem esticando de tamanho. */
#norte .pj-devices{ justify-content: flex-end; }
#norte .pj-view[data-view="desktop"] .pj-lap{
  max-width: 42rem;
  margin-left: auto;
}

/* miniaturas e legenda sob o celular, não coladas na esquerda do palco:
   o grupo celular+clipe fica encostado à direita (regra acima), então a
   faixa reserva a mesma largura do clipe (.pj-mark) + gap antes do
   celular (.pj-dev-front), pra alinhar embaixo exatamente com ele. A nota
   "não se preocupe com os valores" vem depois da galeria (fora dela),
   então segue a mesma faixa. */
#norte-gal > .gal-thumbs,
#norte-gal > .gal-caps,
#norte-gal + .pj-caption{
  max-width: clamp(216px, 23vw, 304px);
  margin-left: auto;
  margin-right: calc(clamp(150px, 15vw, 210px) + clamp(1.3rem, 2.6vw, 2.1rem));
}
#norte-gal > .gal-thumbs{ justify-content: center; }
/* no desktop o notebook não tem clipe ao lado, só o teto de largura
   à direita (regra acima), então a nota o acompanha do mesmo jeito */
#norte-web-gal + .pj-caption{ max-width: 42rem; margin-left: auto; }
@media (max-width: 640px){
  /* abaixo de 640px o celular empilha centralizado (ver .pj-devices na
     seção responsiva), então a faixa some e centraliza junto */
  #norte-gal > .gal-thumbs,
  #norte-gal > .gal-caps,
  #norte-gal + .pj-caption{
    max-width: min(74vw, 250px);
    margin-right: auto;
  }
}

@media (max-width: 1099px){
  /* empilhado, o texto ocupa a largura toda: o véu recua para a metade de
     baixo, e é lá que a cintilação aparece. A âncora da Polar continua a
     mesma (86.9% 14.4%), então ela sempre cai na faixa de céu que sobra à
     direita do aparelho. */
  #norte .pj-sky-scrim{
    background-image: linear-gradient(to bottom,
      #0A0910 0,
      #0A0910 34%,
      color-mix(in srgb, #0A0910 55%, transparent) 52%,
      transparent 70%);
  }
  #norte .pj-sky{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 24%, rgba(0,0,0,0.5) 38%, #000 56%);
    mask-image: linear-gradient(to bottom, transparent 0 24%, rgba(0,0,0,0.5) 38%, #000 56%);
  }
}
@media (max-width: 640px){
  /* no celular a placa é uma coluna estreita: sobra uma faixa de céu à
     direita do aparelho, e é lá que a Polar precisa cair */
  .pj-constel{ opacity: 0.8; }
  .pj-constel .cn-plot{ transform: translate(68px, 256px); }
}

/* ---------- Organizador: o calendário de fundo ----------
   Uma semana de planejamento desenhada em CSS, no traço fino do site. Não é
   um widget: é a textura da cena, atrás do aparelho e do texto. Fica apagada
   de propósito (opacidade baixa, contraste baixo, leve desfoque), como a foto
   de mesa que ela substitui. As aulas, a IC, o estágio e as provas são as
   coisas que de fato disputam a semana do Gabriel. */
#organizador .org-cal{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* a grade fica na largura da coluna de leitura, como o véu: cheia, ela
     transbordava para as margens externas em telas largas e aparecia à
     esquerda do card. */
  margin-inline: auto;
  max-width: var(--field-max);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.52;
  filter: blur(0.3px) saturate(0.9);
  padding: clamp(1.6rem, 3vw, 3rem) var(--gut);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 90%, transparent 100%);
}
#organizador .org-cal-grid{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  height: 100%;
  min-height: 340px;
}
#organizador .org-cal-times{
  display: grid;
  grid-template-rows: 26px repeat(8, 1fr);
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--sc-ink-faint);
}
#organizador .org-cal-times span{ padding: 3px 6px 0 0; text-align: right; }

#organizador .org-cal-week{
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 26px repeat(8, 1fr);
  border-left: 1px solid var(--sc-line);
  border-top: 1px solid var(--sc-line);
}
/* as linhas da grade: dois gradientes repetidos, sem 56 divs vazias */
#organizador .org-cal-week::before{
  content: "";
  position: absolute;
  inset: 26px 0 0 0;
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 7 - 1px), var(--sc-line) calc(100% / 7 - 1px), var(--sc-line) calc(100% / 7)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(100% / 8 - 1px), var(--sc-line) calc(100% / 8 - 1px), var(--sc-line) calc(100% / 8));
}
#organizador .org-d{
  grid-row: 1;
  align-self: center;
  padding-left: 7px;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  border-bottom: 1px solid var(--sc-line);
}
#organizador .org-ev{
  align-self: stretch;
  margin: 3px 4px;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--ev) 72%, transparent);
  border-left: 2px solid var(--ev);
  border-radius: 3px;
  background: color-mix(in srgb, var(--ev) 24%, transparent);
  color: #D4D0C4;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  overflow: hidden;
}
#organizador .org-ev--ic{ --ev: var(--org-ic); }
#organizador .org-ev--aula{ --ev: var(--org-aula); }
#organizador .org-ev--prova{ --ev: var(--org-prova); }
#organizador .org-ev--estagio{ --ev: var(--org-estagio); }
#organizador .org-ev--estudo{ --ev: var(--org-estudo); border-style: dashed; }

#organizador .org-now{
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  height: 0;
  border-top: 1.5px solid var(--org-now);
  transform: scaleX(1);
  transform-origin: left;
  animation: org-now-in 0.9s ease-out;
}
#organizador .org-now::before{
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--org-now);
}
#organizador .org-now b{
  position: absolute;
  right: 4px;
  top: -0.85rem;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: var(--org-now);
}
@keyframes org-now-in{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* véu: recua a grade para o fundo perto do texto e nas bordas da placa, para
   não competir com a leitura. Mesma curva do véu da foto de mesa antiga. */
#organizador .org-cal-veil{
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--sc-bg) 0%, var(--sc-bg) 25%, color-mix(in srgb, var(--sc-bg) 58%, transparent) 43%, color-mix(in srgb, var(--sc-bg) 20%, transparent) 62%, transparent 83%),
    linear-gradient(to bottom, color-mix(in srgb, var(--sc-bg) 22%, transparent) 0%, transparent 14% 68%, color-mix(in srgb, var(--sc-bg) 55%, transparent) 90%, var(--sc-bg) 100%);
}
@media (max-width: 1099px){
  /* empilhado, o texto ocupa a largura toda: o véu recua para a metade de
     cima e deixa a grade aparecer atrás do aparelho, que vem depois */
  #organizador .org-cal-veil{
    background-image:
      linear-gradient(to bottom, var(--sc-bg) 0%, var(--sc-bg) 20%, color-mix(in srgb, var(--sc-bg) 72%, transparent) 40%, color-mix(in srgb, var(--sc-bg) 40%, transparent) 62%),
      linear-gradient(to bottom, transparent 0 60%, color-mix(in srgb, var(--sc-bg) 62%, transparent) 84%, var(--sc-bg) 100%);
  }
}
@media (max-width: 640px){
  #organizador .org-cal{ opacity: 0.46; }
  #organizador .org-cal-grid{ grid-template-columns: 28px minmax(0, 1fr); min-height: 300px; }
  #organizador .org-ev{ font-size: 0; padding: 3px; margin: 2px 3px; }
  #organizador .org-now b{ font-size: 0.46rem; }
}

/* o aparelho pousa sobre a grade: sombra mais funda para a camada ler */
#organizador .pj-phone{
  box-shadow:
    0 0 0 1px var(--sc-line),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 34px 66px -26px rgba(0,0,0,0.72);
}

/* miniaturas e legenda centralizadas sob o celular (que já é centralizado
   pelo .pj-devices--solo), em vez de coladas na esquerda do palco largo */
#org-gal > .gal-thumbs{ justify-content: center; }
#org-gal .gal-caps .gal-cap{ margin-inline: auto; }
/* a nota "capturas de beta" vem depois da galeria, fora dela, então segue
   o mesmo tratamento pra não ficar sozinha colada à esquerda */
#org-gal + .pj-caption{ max-width: 46ch; margin-inline: auto; }

/* ficha presa com clipe */
.pj-ficha{
  position: relative;
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  border-radius: 3px 7px 4px 6px;
  padding: 1.5rem 1.1rem 1rem;
  box-shadow: var(--sc-shadow);
}
.pj-ficha-clip{
  position: absolute;
  top: -0.95rem;
  left: 2.2rem;
  transform: rotate(-6deg);
  width: 22px;
  height: 34px;
  color: var(--sc-ink-faint);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
.pj-ficha-label{
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  display: block;
  margin-bottom: 0.85rem;
}
.pj-ficha dl{ margin: 0; display: grid; gap: 0.55rem; }
.pj-ficha .pj-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.82rem;
}
.pj-ficha dt{ color: var(--sc-ink-soft); }
.pj-ficha dd{
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--sc-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pj-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-accent);
  flex: 0 0 auto;
}
.pj-dot--open{ background: transparent; box-shadow: inset 0 0 0 1px var(--sc-ink-faint); }

.pj-ficha--note{ border-style: solid; }
.pj-ficha--note .pj-ficha-text{
  font-family: var(--sans);
  font-size: 0.845rem;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--sc-ink-soft);
  margin: 0 0 0.8rem;
}
.pj-ficha-meta{
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--sc-accent);
  margin: 0;
}

/* fita, para o papel solto */
.pj-tape{
  position: absolute;
  width: 4.6rem;
  height: 1.35rem;
  background: var(--sc-tape);
  border-left: 1px solid rgba(150,140,110,0.16);
  border-right: 1px solid rgba(150,140,110,0.16);
  top: -0.62rem;
  left: 50%;
  transform: translateX(-50%) rotate(-1.8deg);
  pointer-events: none;
}

/* ---------- rótulo de painel, usado pela cena da IA veicular ---------- */

.pj-mod-label{
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  display: block;
  margin-bottom: 0.85rem;
}

/* ---------- pipeline (IA veicular) ---------- */

.pj-pipe{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
  counter-reset: pipe;
}
.pj-step{
  position: relative;
  border: 1px solid var(--sc-line);
  border-radius: 3px 6px 4px 5px;
  background: var(--sc-panel);
  padding: 0.8rem 0.62rem 0.75rem;
  transition: border-color var(--af-dur-fast) var(--af-ease), transform var(--af-dur-fast) var(--af-ease);
}
.pj-step:hover{ border-color: color-mix(in srgb, var(--sc-accent) 60%, var(--sc-line)); transform: translateY(-2px); }
.pj-step-n{
  counter-increment: pipe;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--sc-accent);
  display: block;
  margin-bottom: 0.5rem;
}
.pj-step-n::before{ content: counter(pipe, decimal-leading-zero); }
.pj-step-t{
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--sc-ink);
  margin: 0 0 0.3rem;
}
.pj-step-d{
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.07em;
  line-height: 1.5;
  color: var(--sc-ink-faint);
  margin: 0;
}
/* seta entre etapas, só quando estão na mesma linha */
.pj-step + .pj-step::before{
  content: "";
  position: absolute;
  left: -0.38rem;
  top: 1.15rem;
  width: 0.32rem;
  height: 0.32rem;
  border-top: 1.2px solid var(--sc-accent);
  border-right: 1.2px solid var(--sc-accent);
  transform: rotate(45deg);
  opacity: 0.75;
}

/* saída do pipeline: o que o sistema entrega, sem número inventado */
.pj-out{
  margin-top: 0.9rem;
  border: 1px solid var(--sc-line);
  border-left: 2px solid var(--sc-accent);
  border-radius: 2px 6px 4px 5px;
  background: var(--sc-panel);
  padding: 0.9rem 1rem;
}
.pj-out-items{ display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.pj-out-items span{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.pj-out-items > span::before{
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sc-accent);
}

/* ---------- prancha de fases (Organizador) ---------- */

.pj-phases{
  list-style: none;
  margin: clamp(0.8rem, 1.4vw, 1.1rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--sc-line);
  border-radius: 3px 7px 4px 6px;
  background: var(--sc-panel);
  overflow: hidden;
}
.pj-phase{
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--sc-line-soft);
}
.pj-phase:last-child{ border-bottom: 0; }
.pj-phase-n{
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--sc-ink-faint);
}
.pj-phase-t{ font-size: 0.86rem; line-height: 1.45; color: var(--sc-ink-soft); }
.pj-phase-s{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--sc-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  white-space: nowrap;
}
.pj-phase--open .pj-phase-s{ color: var(--sc-ink-faint); }
.pj-phase--open .pj-phase-t{ opacity: 0.75; }

/* ---------- fichas do arquivo (Outros projetos) ---------- */

.pj-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}
.pj-card{
  position: relative;
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  border-radius: 3px 8px 4px 7px;
  padding: 1.35rem 1.2rem 1.2rem;
  box-shadow: var(--sc-shadow);
  transition: transform var(--af-dur) var(--af-ease), box-shadow var(--af-dur) var(--af-ease);
}
.pj-card{ padding-top: 1.7rem; }
.pj-card .pj-tape{ width: 3.4rem; height: 1.1rem; top: -0.5rem; }
.pj-card:nth-child(2){ transform: rotate(0.5deg); }
.pj-card:nth-child(3){ transform: rotate(-0.6deg); }
.pj-card:hover{ transform: translateY(-3px) rotate(0deg); box-shadow: var(--sc-lift); }
.pj-card-label{
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  display: block;
  margin-bottom: 0.75rem;
}
.pj-card h3{
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  color: var(--sc-ink);
}
.pj-card p{
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sc-ink-soft);
}

/* ---------- 07 · Outros projetos: a placa do arquivo em meia-sangria ----------
   A cena deixa de ser uma placa contida. A coluna de texto fica à esquerda
   sobre a mesa; a placa corre para fora da borda direita da tela, e as três
   peças pousam nela como fichas de papel presas com fita, sobrepostas e
   levemente giradas. O que não tem captura ganha moldura vazia, nunca
   esquema inventado.

   Paleta local: sépia de arquivo antigo. A placa é tabaco escuro; as fichas
   são papel envelhecido amarelado com tinta marrom-escura; a fita é kraft.
   Esta é a única cena da página nessa família de cor. */

.pj-scene--arch{
  padding-inline: 0;
  background: transparent;
  overflow: visible;
}
/* seletor casado com .pj-scene--arch para vencer .pj-scene .pj-scene-in */
.pj-scene--arch .pj-scene-in--arch{
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* sem folha própria: a última seção fica sobre a mesa (--pj-ground), a mesma
     cor do topo e do rodapé. A placa de papelão (.pj-arch) é o único objeto. */
  background: transparent;
  overflow: visible;
  padding: clamp(1.4rem, 2.2vw, 2.4rem) var(--gut);
  row-gap: 2.4rem;
}

/* a coluna de texto fica sobre a mesa (quase preta), mas na tinta sépia da
   cena: creme quente para título e "07", areia para kicker e lede. */
.pj-scene--arch .pj-col{
  --sc-ink:       #E8E0CC;
  --sc-ink-soft:  #A79C82;
  --sc-ink-faint: #8A7F65;
  --sc-accent:    #C7B58C;
  --sc-line:      #3A332A;
}

.pj-arch{
  position: relative;
  min-width: 0;
  /* placa: tabaco escuro, bem acima da mesa (--pj-ground é quase preto), com
     tinta clara sépia. Vale como valor único, não depende de tema. */
  background: #241d16;
  border: 1px solid rgba(228,216,190,0.11);
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,0.035),
    0 2px 4px rgba(18,12,4,0.4), 0 20px 48px rgba(18,12,4,0.5);
  padding: clamp(1.7rem, 2.5vw, 2.9rem) clamp(1.3rem, 2.2vw, 2.6rem);
  overflow: hidden;

  --sc-ink:       #E7DEC8;
  --sc-ink-soft:  #B6AA8C;
  --sc-ink-faint: #8C8067;
  --sc-line:      rgba(228,216,190,0.13);
  --sc-line-soft: rgba(228,216,190,0.08);
  --sc-accent:    #C7B58C;
  --sc-panel:     #E4D8BE;
  --sc-panel-2:   #DBCEB0;
  --sc-tape:      rgba(179,154,106,0.4);
  --sc-shadow:    0 2px 4px rgba(18,12,4,0.4), 0 18px 40px rgba(18,12,4,0.46);
  --sc-lift:      0 4px 10px rgba(18,12,4,0.4), 0 26px 56px rgba(18,12,4,0.54);
  color: var(--sc-ink);
}
/* grão fino: a placa é superfície de papelão, não background-color */
.pj-arch::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
.pj-arch > *{ position: relative; z-index: 1; }

/* cabeçalho da placa: rótulo mono + filete que corre até a sangria */
.pj-arch-head{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 clamp(1.5rem, 2.3vw, 2.3rem);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  white-space: nowrap;
}
.pj-arch-head::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sc-line);
}

.pj-arch .pj-cards{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
/* a ficha: papel envelhecido, tinta marrom-escura. Contexto de cor próprio,
   invertido em relação à placa. */
.pj-arch .pj-card{
  --sc-ink:       #322A1D;
  --sc-ink-soft:  #4C4130;
  --sc-ink-faint: #7A6F57;
  --sc-line:      #CBBB98;
  --sc-line-soft: #D8CCAE;
  --sc-accent:    #5C5038;
  --sc-tape:      rgba(179,154,106,0.42);
  --sc-shadow:    0 2px 4px rgba(30,22,10,0.16), 0 16px 32px rgba(30,22,10,0.32);
  --sc-lift:      0 6px 14px rgba(30,22,10,0.2), 0 26px 54px rgba(30,22,10,0.4);
  background: var(--sc-panel);
  border-color: var(--sc-line);
  color: var(--sc-ink);
}

/* o gesto principal do cartão: "abrir a ficha". Tinta escura no papel, com um
   filete que preenche da esquerda no hover e a seta que desliza. */
.pj-arch .pj-file-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding: 0.1rem 0 0.4rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--sc-ink);
  min-height: 40px;
}
.pj-arch .pj-file-btn::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.18rem;
  width: 100%;
  height: 1px;
  background:
    linear-gradient(var(--sc-accent), var(--sc-accent)) left / 0% 100% no-repeat,
    linear-gradient(var(--sc-line), var(--sc-line)) left / 100% 100% no-repeat;
  transition: background-size var(--af-dur) var(--af-ease);
}
.pj-arch .pj-file-btn:hover::after,
.pj-arch .pj-file-btn:focus-visible::after{ background-size: 100% 100%, 100% 100%; }
.pj-arch .pj-file-arr{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--af-dur-fast) var(--af-ease);
}
.pj-arch .pj-file-btn:hover .pj-file-arr{ transform: translateX(3px); }

/* ---------- a ficha aberta: diálogo centralizado sobre a mesa escurecida ----- */
/* trava-rolagem sem pulo: o corpo fica fixo, deslocado pela posição guardada
   em --pj-file-sy; ao fechar, o JS devolve o scroll. Não mexe no overflow do
   <html> (que reinicia a rolagem no Chrome quando a página usa scroll-behavior
   suave). O <dialog> :modal já é fixo à viewport, então não é afetado. */
html.pj-file-lock{ scroll-behavior: auto; }
html.pj-file-lock body{
  position: fixed;
  top: var(--pj-file-sy, 0);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.pj-file{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 2.5rem);
  border: 0;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}
.pj-file:not([open]){ display: none; }
.pj-file[open]{ display: flex; }
.pj-file::backdrop{
  background: rgba(9,6,1,0.86);
  backdrop-filter: blur(3px) saturate(0.7);
  -webkit-backdrop-filter: blur(3px) saturate(0.7);
}

.pj-file-sheet{
  position: relative;
  margin: auto;
  width: min(42rem, 100%);
  max-height: min(84vh, 880px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.7rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem) clamp(1.6rem, 3.5vw, 2.6rem);
  background: #ECE5D2;
  color: #2C2417;
  border: 1px solid #CBBB96;
  border-radius: 4px 12px 5px 10px;
  box-shadow: 0 34px 90px -22px rgba(10,6,0,0.72), 0 2px 8px rgba(10,6,0,0.4);
}
.pj-file-sheet::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='120'%20height='120'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
.pj-file-sheet > *{ position: relative; }

.pj-file-close{
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: #6A5E44;
  border-radius: 50%;
  transition: color var(--af-dur-fast) var(--af-ease), transform var(--af-dur-fast) var(--af-ease);
}
.pj-file-close svg{ fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pj-file-close:hover{ color: #2C2417; transform: rotate(90deg); }

.pj-file-k{
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #776B52;
  margin: 0 2.4rem 0.5rem 0;
}
.pj-file-t{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: #2C2417;
  margin: 0 0 1.2rem;
}
.pj-file-body{ margin: 0; }
.pj-file-body p{
  font-size: 0.97rem;
  line-height: 1.66;
  color: #443A28;
  margin: 0 0 0.95rem;
  max-width: 58ch;
}
.pj-file-nocap{
  font-family: var(--mono);
  font-size: 0.72rem !important;
  line-height: 1.55;
  color: #776B52 !important;
  border-left: 1px dashed #C2B085;
  padding-left: 0.8rem;
}
.pj-file-body .gallery{ margin: 1.5rem 0 0; }
.pj-file-body .gal-stage{
  max-width: 300px;
  margin-inline: auto;
  border: 1px solid #C6B58C;
  border-radius: 4px;
  background: #D7C9A9;
}
.pj-file-body .gal-thumb{ border-color: #C6B58C; background: #DDD0B2; }
.pj-file-body .gal-thumb.is-active{ border-color: #5C5038; }
.pj-file-body .gal-cap{ color: #776B52; }
.pj-file-body .cap-tag{ color: #5C5038; }

/* fotos de circuito (ULA, cronômetro): esquema largo, não o retrato de
   celular do resto das fichas, então usa o espaço da folha em vez do
   max-width:300px do .gal-stage acima */
.pj-file-circ{ margin: 1.4rem 0 0; }
.pj-file-circ .proj-shot{
  display: block;
  border: 1px solid #C6B58C;
  border-radius: 4px;
  background: #D7C9A9;
  overflow: hidden;
}
.pj-file-circ img{ display: block; width: 100%; height: auto; }
.pj-file-circ figcaption{
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: #776B52;
}

.pj-file-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #D3C6A6;
}
.pj-file-foot .go{ color: #4A3F2B; font-size: 0.82rem; }
.pj-file-foot .go:hover{ border-bottom-color: #4A3F2B; }
.pj-file-stack{ display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.pj-file-stack span{
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  color: #6A5E44;
  border: 1px solid #C6B58C;
  border-radius: 2px 4px 2px 4px;
  padding: 0.2rem 0.46rem;
}

@media (prefers-reduced-motion: no-preference){
  .pj-file[open]{ animation: pjFileFade 160ms ease both; }
  .pj-file[open] .pj-file-sheet{ animation: pjFileRise 220ms cubic-bezier(0.2,0.7,0.25,1) both; }
  .pj-file[open]::backdrop{ animation: pjFileFade 200ms ease both; }
}
@keyframes pjFileFade{ from{ opacity: 0; } }
@keyframes pjFileRise{ from{ opacity: 0; transform: translateY(14px) scale(0.975); } }

/* empilhado: o rótulo mono acima do título já nomeia o arquivo, então o
   cabeçalho da placa (mesmo texto) sai para não repetir de perto */
@media (max-width: 1099px){
  .pj-arch-head{ display: none; }
  .pj-arch{ padding-top: clamp(1.5rem, 4vw, 2.2rem); }
}

/* ≥1100px: a meia-sangria. A coluna de texto alinha com o corpo da página;
   a placa 1fr encosta sozinha na borda direita (o inner tem padding-right 0). */
@media (min-width: 1100px){
  .pj-scene--arch .pj-scene-in--arch{
    grid-template-columns: minmax(13rem, 21rem) minmax(0, 1fr);
    column-gap: clamp(1.8rem, 4vw, 3.8rem);
    align-items: stretch;
    padding: clamp(1.6rem, 2.4vw, 2.8rem) 0 clamp(1.6rem, 2.4vw, 2.8rem)
             max(var(--gut), calc((100% - var(--field-max)) / 2));
  }
  .pj-scene--arch .pj-col{ align-self: center; }
  .pj-arch{
    align-self: stretch;
    border-right: 0;
    border-radius: 7px 0 0 7px;
    box-shadow: -1px 0 0 rgba(0,0,0,0.28), 0 20px 50px -12px rgba(0,0,0,0.5);
    padding-left: clamp(1.5rem, 2.4vw, 2.7rem);
    padding-right: 0;
  }
  .pj-arch-head{ margin-right: clamp(1.5rem, 2.4vw, 2.7rem); }
  .pj-arch .pj-cards{
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0;
  }
  /* fichas grandes, presas com fita e levemente sobrepostas: a primeira, a
     mais rica, fica por cima e inteira; as de trás cedem só a margem esquerda
     para a de cima. A última corre para fora da borda direita da placa e é
     cortada pelo overflow, como um arquivo que continua além da moldura. */
  .pj-arch .pj-card{
    flex: 0 0 clamp(16rem, 24vw, 21rem);
    margin-right: -2.2rem;
  }
  .pj-arch .pj-card:last-child{ margin-right: 0; }
  .pj-arch .pj-card:nth-child(1){ transform: rotate(-1.1deg); z-index: 4; }
  .pj-arch .pj-card:nth-child(2){ transform: rotate(0.8deg); z-index: 3; margin-top: 0.55rem; }
  .pj-arch .pj-card:nth-child(3){ transform: rotate(-0.6deg); z-index: 2; margin-top: 1.15rem; }
  .pj-arch .pj-card:nth-child(4){ transform: rotate(0.5deg); z-index: 1; margin-top: 1.7rem; }
  .pj-arch .pj-card:hover{ transform: rotate(0deg) translateY(-3px); z-index: 5; box-shadow: var(--sc-lift); }
}

/* ---------- galeria dentro das cenas ---------- */

.pj-scene .gal-stage{
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.pj-phone-screen.gal-stage{ aspect-ratio: 9 / 19.5; border-radius: 13px; }
.pj-lap-screen.gal-stage{ aspect-ratio: 2 / 1; border-radius: 3px; }
.pj-scene .gal-item .proj-shot img,
.pj-scene .gal-item .proj-shot video{ object-fit: cover; }
/* proj-calc-hist é bem mais larga que a caixa retrato da galeria (cover cortava as pontas);
   deixa ela inteira e menor em vez de igualar o tamanho das outras telas */
.pj-scene .gal-item.gal-contain .proj-shot img{ object-fit: contain; }
.pj-scene .gal-thumbs{ margin-top: 0.8rem; }
.pj-scene .gal-thumb{
  border-color: var(--sc-line);
  background: var(--sc-panel);
  border-radius: 2px 4px 2px 4px;
}
.pj-scene .gal-thumb.is-active{ border-color: var(--sc-accent); }
.pj-scene .gal-cap{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--sc-ink-faint);
  line-height: 1.5;
  margin: 0.85rem 0 0;
}
.pj-scene .cap-tag{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sc-accent);
  display: block;
  margin-bottom: 0.28rem;
}
.pj-scene .vid-tag{ cursor: default; }
.pj-scene .vid-wrap{ position: relative; display: block; height: 100%; }
.pj-scene .play-badge{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(20,22,19,0.42);
  opacity: 0;
  transition: opacity var(--af-dur) var(--af-ease);
  pointer-events: none;
}
.pj-scene .vid-wrap.is-paused .play-badge{ opacity: 1; }
.pj-scene .play-badge::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 0.72rem solid rgba(255,255,255,0.85);
  border-top: 0.44rem solid transparent;
  border-bottom: 0.44rem solid transparent;
}

/* estado de imagem quebrada: some o palco, não deixa buraco */
.pj-scene .gallery.gal-broken .gal-stage,
.pj-scene .gallery.gal-broken .gal-thumbs{ display: none; }

/* o fecho da página vive no rodapé (ramo `projetos` em sync_shell.py +
   "Rodapé da /projetos" em css/site-shell.css) */

/* ---------- foco ---------- */

.pj-scene a:focus-visible,
.pj-scene button:focus-visible,
.pj-scene summary:focus-visible{
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- responsivo ---------- */

@media (max-width: 1099px){
  .pj-scene .pj-scene-in{ grid-template-columns: minmax(0, 1fr); }
  .pj-col{ max-width: 44rem; }
  .pj-hand{ margin-top: 1.5rem; }
}

@media (max-width: 860px){
  .pj-cover-in{ grid-template-columns: minmax(0, 1fr); }
  .pj-note{ max-width: 34rem; margin-top: 0; }
}

@media (max-width: 900px){
  .pj-pipe{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pj-step + .pj-step::before{ display: none; }
}
@media (max-width: 560px){
  .pj-pipe{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  /* abaixo de 640px, celular + clipe de abertura lado a lado não cabem
     sem se sobrepor; empilha, com o clipe centralizado embaixo (o gap
     de .pj-devices já cuida do espaçamento entre os dois). */
  .pj-devices{ flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.1rem; }
  .pj-mark{ transform: rotate(-1deg); }
  .pj-dev-front{ width: min(74vw, 250px); }
  .pj-phase{ grid-template-columns: 3.7rem minmax(0, 1fr); }
  .pj-phase-s{ grid-column: 2; }
  .pj-cards{ grid-template-columns: minmax(0, 1fr); }
  .pj-card:nth-child(n){ transform: none; }
}

@media (max-width: 420px){
  .pj-switch button{ padding: 0.5rem 0.7rem; font-size: 0.64rem; }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce){
  .pj-view{ animation: none; }
  .pj-switch::before{ transition: none; }
  .pj-card, .pj-step{ transition: none; }
  .pj-card:hover{ transform: none; }
  .pj-arch .pj-card:hover{ transform: none; }
  .pj-step:hover{ transform: none; }
}

/* ---------- impressão ---------- */

@media print{
  .pj-subnav, .pj-switch, .gal-thumbs, .pj-tape,
  .pj-constel, .org-cal, .org-cal-veil,
  #norte .pj-sky-photo, #norte .pj-sky, #norte .pj-sky-scrim,
  .pj-cover::before, .pj-cover-sky,
  #norte.pj-scene::before, #norte.pj-scene::after{ display: none !important; }
  #organizador.pj-scene, .pj-scene--full .pj-scene-in,
  #oito-bits.pj-scene, .pj-scene--ia{ box-shadow: none; }
  .pj-scene{ padding-block: 1.2rem; break-inside: avoid; }
  .pj-scene--plate{ --sc-bg: #fff; --sc-ink: #000; --sc-ink-soft: #333; --sc-ink-faint: #555; --sc-line: #999; --sc-accent: #45443E; --sc-panel: #fff; }
  #norte.pj-scene{ --sc-bg: #fff; --sc-ink: #000; --sc-ink-soft: #333; --sc-ink-faint: #555; --sc-line: #999; --sc-accent: #45443E; --sc-panel: #fff; }
  .pj-arch{ background: #fff; border-color: #999; box-shadow: none; --sc-ink: #000; --sc-ink-soft: #333; --sc-ink-faint: #555; --sc-line: #999; --sc-accent: #45443E; --sc-panel: #fff; --sc-panel-2: #fff; }
  .pj-arch::before{ display: none; }
  .pj-arch .pj-cards{ flex-direction: column; }
  .pj-arch .pj-card{ margin: 0 0 0.6rem; transform: none; background: #fff; --sc-ink: #000; --sc-ink-soft: #333; --sc-ink-faint: #555; --sc-line: #999; --sc-accent: #45443E; }
  .pj-scene--arch .pj-col{ --sc-ink: #000; --sc-ink-soft: #333; --sc-ink-faint: #555; --sc-line: #999; --sc-accent: #45443E; }
  .pj-file{ display: none !important; }
  .pj-view[hidden]{ display: block !important; }
  .pj-more[open] .pj-more-body, .pj-more .pj-more-body{ display: block; }
}

/* ---------- casca da página ---------- */

html{
  scroll-behavior: smooth;
  /* a nav fixa + a barra sticky de projetos, em todas as larguras */
  scroll-padding-top: 6.4rem;
  -webkit-tap-highlight-color: rgba(214,210,198,0.2);
}

body.projetos{ margin: 0; -webkit-font-smoothing: antialiased; caret-color: var(--accent); }
body.projetos p, body.projetos li, body.projetos figcaption{ text-wrap: pretty; }
body.projetos main{ max-width: none; margin: 0; padding: 0; }
body.projetos footer{ background: var(--pj-ground); }

/* ---------- bússola (easter egg "norte") ---------- */

.compass-egg[hidden]{ display: none !important; }
.compass-egg{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: compass-in .3s ease;
}
@keyframes compass-in{ from{ opacity: 0; } }
.compass-card{
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  color: var(--accent);
}
.compass-rose{
  width: 168px; height: 168px;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.25));
}
.compass-needle{
  transform-box: fill-box;
  transform-origin: center;
  animation: compass-spin 2.1s cubic-bezier(.3,.9,.25,1) forwards;
}
@keyframes compass-spin{
  0%{ transform: rotate(220deg); }
  70%{ transform: rotate(-14deg); }
  100%{ transform: rotate(0deg); }
}
.compass-note{
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0;
  animation: rise .5s ease .6s backwards;
}
@media print{ .compass-egg, .to-top, .skip-link{ display: none !important; } }

/* ---------- utilitárias e arranjos que faltavam ---------- */

.pj-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* moldura interna comum a todos os palcos de galeria */
.pj-frame{
  display: block;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.pj-frame--edge{ border: 1px solid var(--sc-line); }

.pj-stage-head{ display: flex; justify-content: center; }

/* o clipe da abertura: um vídeo pequeno preso como uma foto na prancha,
   mesmo gesto do clipe da ficha do Organizador (#i-clip), só que aqui perto
   do celular em vez de longe, e com mais presença. */
.pj-mark{
  position: relative;
  margin: 0;
  width: clamp(150px, 15vw, 210px);
  flex: 0 0 auto;
  transform: rotate(-1.6deg);
}
.pj-mark-clip{
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  width: 19px;
  height: 25px;
  color: var(--sc-ink-faint);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
/* moldura em duas camadas: passe-partout escuro + filete verde bem fino
   rente ao vídeo, como uma foto emoldurada, não só um vídeo recortado */
.pj-mark .proj-shot{
  display: block;
  padding: 7px;
  border: 1px solid var(--sc-line);
  border-radius: 4px 9px 5px 8px;
  background: var(--sc-panel-2);
  box-shadow: 0 16px 28px -16px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.pj-mark .vid-wrap{
  overflow: hidden;
  border-radius: 2px 6px 3px 5px;
  outline: 1px solid color-mix(in srgb, var(--sc-accent) 40%, transparent);
  outline-offset: -1px;
}
.pj-mark video{ display: block; width: 100%; height: auto; }
.pj-mark .pj-caption{ margin-top: 0.65rem; font-size: 0.64rem; }

/* IA veicular: a ficha larga embaixo do pipeline */
.pj-ficha--wide{ margin-top: 1rem; }
.pj-ficha-text{
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--sc-ink-soft);
  margin-bottom: 0.7rem;
}
.work-feat .pj-mod-label{ margin-bottom: 0.9rem; }
.work-feat .pj-stack{ margin-top: 1.1rem; }

/* seta diagonal dos links externos */
.arr-ext{
  fill: none;
  stroke: currentColor;
  vertical-align: -1px;
  transition: transform var(--af-dur-fast) var(--af-ease);
}
.go:hover .arr-ext{ transform: translate(2px, -2px); }

/* miniatura de vídeo com o triângulo de play */
.pj-scene .thumb-play{ position: absolute; inset: 0; display: grid; place-items: center; }
.pj-scene .thumb-play::after{
  content: "";
  width: 0; height: 0;
  border-left: 8px solid rgba(255,255,255,0.9);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

@media (max-width: 640px){
  .pj-stage-head{ align-items: center; }
  .pj-mark{ width: 168px; }
}

/* =========================================================================
   Fundamentos: o navegador do repositório

   A cena deixa de ser duas colunas. Em cima, o título com a nota de margem;
   embaixo, uma placa que imita o repositório aberto, com a árvore de pastas
   à esquerda, o arquivo no centro e uma ficha de papel à direita. O conteúdo
   dos painéis é o material que existe mesmo no repositório.
   ========================================================================= */

.pj-scene--wide .pj-scene-in--stack{
  display: block;
}

/* a placa como material: grão fino e um escurecimento nas bordas, para ela
   parecer superfície e não background-color. Os dois ficam atrás do conteúdo
   (a .pj-scene-in já é contexto de empilhamento, por causa do z-index: 1). */
.pj-scene--wide .pj-scene-in::before,
.pj-scene--wide .pj-scene-in::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.pj-scene--wide .pj-scene-in::before{
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'/%3E%3C/svg%3E");
}
.pj-scene--wide .pj-scene-in::after{
  background:
    radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(0,0,0,0.30) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 0, transparent 22%);
}
:root[data-theme="dark"] .pj-scene--wide .pj-scene-in::before{ opacity: 0.07; }

/* ---------- 03 · Fundamentos: a cena em preto ----------
   Esta é a única cena sem cor de marcação: pretos, grafites e tinta clara.
   O objeto é um notebook ligado sobre uma bancada escura, e tudo que
   destacaria em verde (aba ativa, prompt, hover, cursor) destaca em luz.
   O papel milimetrado por baixo é quase invisível: desenho técnico,
   não HUD. */

#fundamentos.pj-scene{
  --sc-bg:        #101110;
  --sc-edge:      rgba(236,232,220,0.08);
  --sc-ink:       #E8E5DD;
  --sc-ink-soft:  #A6A8A3;
  --sc-ink-faint: #83857F;
  --sc-line:      #313330;
  --sc-line-soft: #232522;
  --sc-accent:    #D6D2C6;
  --sc-panel:     #17191A;
  --sc-panel-2:   #1E2122;
  --af-accent-wash: rgba(236,232,220,0.06);
}

/* a cena inteira, de ponta a ponta: sem placa, sem borda, sem canto
   arredondado. A faixa preta corre a largura toda da tela e o conteúdo
   respira dentro dela. */
.pj-scene--full{ padding-inline: 0; }
.pj-scene--full .pj-scene-in{
  max-width: none;
  margin-inline: 0;
  border: 0;
  border-radius: 0;
  /* a faixa (fundo em .pj-scene-in) se dissolve na mesa nas bordas */
  box-shadow: var(--pj-edge-fade);
  padding: clamp(3.2rem, 6vw, 6.5rem) clamp(1.4rem, 4.5vw, 5.5rem) clamp(3rem, 5.5vw, 6rem);
}

.fu-stage{ position: relative; }

/* composição larga: a coluna de texto de um lado, o aparelho do outro.
   A leitura continua estreita (o texto para em ~56ch), a tela é que
   aproveita a largura que sobrou. */
@media (min-width: 1340px){
  .fu-stage{
    display: grid;
    grid-template-columns: minmax(21rem, 27rem) minmax(0, 1fr);
    grid-template-areas:
      "head mac"
      "after mac";
    column-gap: clamp(2.4rem, 4vw, 5rem);
    row-gap: 2rem;
    align-items: start;
  }
  .fu-head{ grid-area: head; margin-bottom: 0; }
  .fu-viewer-wrap{ grid-area: mac; }
  .fu-after{ grid-area: after; margin-top: 0; }
  .fu-head .pj-lede{ max-width: 42ch; }
  /* na coluna estreita os filetes verticais sobrariam soltos no começo das
     linhas quebradas: a separação passa a ser o espaço */
  .fu-stage .fu-meta{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
  .fu-stage .fu-meta li{ padding: 0; border-left: 0; }
}

.fu-stage::before{
  content: "";
  position: absolute;
  inset: -1.6rem -0.8rem;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(236,232,220,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236,232,220,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(90% 70% at 30% 12%, #000 8%, transparent 62%);
}

/* ---------- cabeçalho da cena ---------- */

.fu-head{
  position: relative;
  z-index: 1;
  margin-bottom: clamp(1.1rem, 2vw, 1.7rem);
}
.fu-head .pj-lede{ max-width: 56ch; }

/* o filete que continua o kicker, como um traço de régua */
.fu-kicker{ display: flex; align-items: center; gap: 0.75rem; }
.fu-kicker-rule{
  display: block;
  width: clamp(1.6rem, 3vw, 3.2rem);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}


.fu-meta{
  list-style: none;
  margin: clamp(1.9rem, 3.2vw, 3rem) 0 0;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--sc-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.7rem;
}
.fu-meta li{
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0 clamp(1.1rem, 2.6vw, 2.6rem);
  border-left: 1px solid var(--sc-line);
  font-family: var(--af-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--sc-ink-faint);
}
.fu-meta li:first-child{ padding-left: 0; border-left: 0; }
.fu-meta b{
  font-family: var(--af-display);
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}
.fu-meta-w{ color: var(--sc-ink-soft); }

/* ---------- a placa do navegador ---------- */

/* min-width: 0 é o que permite a camada encolher dentro da coluna do grid:
   sem isso o conteúdo do navegador (barra, árvore, tabelas) define a largura
   mínima e o aparelho vaza para fora da tela */
.fu-viewer-wrap{
  position: relative;
  min-width: 0;
}

/* ---------- o notebook ----------
   Um aparelho de verdade, montado em três peças: tampa (rebordo + tela),
   dobradiça e base vista de canto. Tudo em preto e cinza, sem cor: a leitura
   de metal vem da luz (filete claro no topo, sombra funda embaixo), não de
   tinta. A tela tem altura fixa, como uma tela real: quem rola é o painel
   (.fu-panes), do jeito que um repositório rola. */

/* a largura tem teto: esticado na placa inteira o aparelho vira uma faixa
   achatada, e um notebook não tem essa proporção. Aqui a tela fica perto de
   16:10, que é a de um notebook de verdade. */
.fu-mac{
  --mac-metal:  #26282A;
  --mac-metal2: #131516;
  --mac-edge:   rgba(255,255,255,0.16);
  position: relative;
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,0.6));
}
/* a sombra de contato: o aparelho pousa, não flutua */
.fu-mac::after{
  content: "";
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  bottom: -26px;
  height: 46px;
  background: radial-gradient(52% 50% at 50% 0, rgba(0,0,0,0.65), transparent 72%);
  pointer-events: none;
}

.fu-mac-lid{
  position: relative;
  padding: 14px 14px 8px;
  border-radius: 14px 14px 5px 5px;
  background:
    linear-gradient(180deg, #34373A 0, var(--mac-metal) 3px, var(--mac-metal) 74%, var(--mac-metal2) 100%);
  box-shadow:
    inset 0 1px 0 var(--mac-edge),
    inset 1px 0 0 rgba(255,255,255,0.06),
    inset -1px 0 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(0,0,0,0.75);
}
/* a câmera, no rebordo de cima */
.fu-mac-cam{
  position: absolute;
  top: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #050606;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  transform: translateX(-50%);
}

/* a dobradiça: a fresta onde a tampa encaixa na base. Curta e com as arestas
   de metal visíveis, para a tela e a base lerem como um aparelho só, sem vão. */
.fu-mac-hinge{
  position: relative;
  height: 5px;
  margin: 0 5.5%;
  background: linear-gradient(180deg, #202325 0, #0B0D0E 50%, #2A2E30 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.85);
}
/* a base vista quase de topo: chanfro nas laterais, brilho na aresta da
   frente e o recorte do dedo no meio */
.fu-mac-deck{
  position: relative;
  height: 18px;
  margin: 0 -2.8%;
  border-radius: 0 0 11px 11px;
  background:
    linear-gradient(180deg, #43474A 0, #2C3033 18%, #1B1E20 62%, #0E1011 100%);
  clip-path: polygon(1.4% 0, 98.6% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -1px 0 rgba(255,255,255,0.05);
}
/* o recorte do dedo, na aresta da frente */
.fu-mac-deck::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12%;
  height: 6px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.35));
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.8);
  transform: translateX(-50%);
}

.fu-repo{
  --fu-side:  color-mix(in srgb, var(--sc-panel) 76%, #000);
  --fu-rule:  color-mix(in srgb, var(--sc-ink) 13%, transparent);
  display: flex;
  flex-direction: column;
  /* a largura precisa ser definida explicitamente: com width auto o
     aspect-ratio resolve pelo lado errado quando o min-height entra em
     jogo, e a tela cresce para fora do aparelho (768px numa moldura de
     440px, em tela estreita) */
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 30rem;
  max-height: 41rem;
  background: var(--sc-panel);
  border-radius: 3px;
  overflow: hidden;
  /* o vidro: sombra do rebordo caindo por dentro da tela, e o filete de luz
     em cima, de tela acesa. A profundidade do objeto vem da tampa. */
  /* NÃO rotacionar: qualquer transform rasteriza a camada e reamostra os
     glifos fora da grade de pixel, e aqui dentro mora o texto todo da cena. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(0,0,0,0.65),
    inset 0 14px 26px -18px rgba(0,0,0,0.9);
}

/* barra de topo */
.fu-bar{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.7rem;
  padding: 0.72rem clamp(0.9rem, 1.6vw, 1.35rem);
  border-bottom: 1px solid var(--fu-rule);
  font-family: var(--af-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--sc-ink-faint);
}
/* etiqueta que nomeia a placa: não é mais um prompt de terminal */
.fu-bar-tag{
  flex: 0 0 auto;
  padding-right: clamp(0.8rem, 1.6vw, 1.35rem);
  border-right: 1px solid var(--fu-rule);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.6rem;
}
.fu-slug{ color: var(--sc-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* o ↗ global de link externo sairia ao lado do svg próprio */
.fu-bar-link::after, .fu-guide::after{ content: none !important; }
.fu-bar-link{
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: clamp(0.8rem, 1.6vw, 1.5rem);
  border-left: 1px solid var(--fu-rule);
  color: var(--sc-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--af-dur-fast) var(--af-ease), border-color var(--af-dur-fast) var(--af-ease);
}
.fu-bar-link:hover{ color: var(--sc-accent); border-bottom-color: var(--sc-accent); }
.fu-bar-link .arr-ext{ stroke-width: 1.8; }
.fu-bar-link:hover .arr-ext{ transform: translate(2px, -2px); }

/* corpo: índice · arquivo. A ficha não mora mais aqui, ela escapou para o
   canto do visualizador (ver .fu-note, depois de .fu-repo no HTML). */
.fu-body{
  display: grid;
  grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- árvore de pastas ---------- */

.fu-tree{
  display: flex;
  flex-direction: column;
  padding: 1.15rem 0 1.1rem;
  border-right: 1px solid var(--fu-rule);
  background: var(--fu-side);
  overflow-y: auto;
  min-width: 0;
}
.fu-tree-label{
  font-family: var(--af-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  margin: 0 0 0.9rem;
  padding-inline: 1.15rem;
}
.fu-nodes{ display: flex; flex-direction: column; min-width: 0; }
.fu-node{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  width: 100%;
  padding: 0.5rem 1.15rem 0.5rem 1.22rem;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--af-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
  text-align: left;
  cursor: pointer;
  transition: color var(--af-dur-fast) var(--af-ease),
              background var(--af-dur-fast) var(--af-ease),
              border-color var(--af-dur-fast) var(--af-ease);
}
.fu-node:hover{ color: var(--sc-ink); background: color-mix(in srgb, var(--sc-ink) 5%, transparent); }
.fu-node.is-active{
  color: var(--sc-ink);
  background: var(--af-accent-wash);
}
/* o traço verde é desenhado de cima para baixo, não aparece pronto */
.fu-node::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sc-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--af-dur) var(--af-ease);
}
.fu-node.is-active::before{ transform: scaleY(1); }
.fu-node.is-active .fu-ico{ color: var(--sc-accent); }
.fu-node-n{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-ico{
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--sc-ink-faint);
  transition: color var(--af-dur-fast) var(--af-ease);
}
/* quanto o índice guarda de cada categoria, contado ao vivo quando a cena acorda */
.fu-node-c{
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.6rem;
  font-size: 0.66rem;
  color: var(--sc-ink-faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--af-dur-fast) var(--af-ease);
}
.fu-node.is-active .fu-node-c{ color: var(--sc-accent); }

/* o guia, no pé da árvore */
.fu-guide{
  display: flex;
  align-items: flex-start;
  gap: 0.62rem;
  margin: 1.4rem 1.15rem 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--fu-rule);
  text-decoration: none;
  color: var(--sc-ink-soft);
  transition: color var(--af-dur-fast) var(--af-ease);
}
.fu-guide .fu-ico{ margin-top: 1px; }
.fu-guide:hover{ color: var(--sc-accent); }
.fu-guide:hover .fu-ico{ color: var(--sc-accent); }
.fu-guide b{
  display: block;
  font-family: var(--af-mono);
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--sc-ink);
}
.fu-guide i{
  display: block;
  font-style: normal;
  font-family: var(--af-sans);
  font-size: 0.72rem;
  color: var(--sc-ink-faint);
  margin-top: 0.14rem;
}
.fu-guide:hover b, .fu-guide:hover i{ color: inherit; }

/* ---------- o painel do arquivo ---------- */

/* a medida de leitura vale aqui dentro também: o texto do painel para em
   ~68ch, e o resto da largura fica de margem, como numa página de arquivo */
.fu-panes{
  /* a folga de baixo tem o tamanho do esmaecimento: no fim da rolagem o
     fade cai sobre ela, nunca sobre a última linha de texto */
  padding: 1.4rem clamp(1.4rem, 3vw, 3rem) 2.6rem clamp(1.2rem, 2.2vw, 2.1rem);
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sc-ink) 22%, transparent) transparent;
  /* o que passa da tela desaparece por esmaecimento, não cortado no meio da
     linha: é o sinal de que o painel rola */
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 2.6rem), transparent 100%);
}
.fu-pane{ max-width: 68ch; }
.fu-pane[hidden]{ display: none !important; }
.fu-pane{ animation: fu-pane-in var(--af-dur) var(--af-ease) both; }
.fu-pane:focus-visible{ outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
/* a árvore encosta na borda da placa, que recorta: o foco fica por dentro */
.pj-scene .fu-node:focus-visible{ outline-offset: -2px; }
@keyframes fu-pane-in{ from{ opacity: 0; transform: translateY(5px); } to{ opacity: 1; transform: none; } }

/* rótulo de categoria no alto do arquivo: ecoa o item aceso no índice,
   em vez de simular uma trilha de caminho clicável */
.fu-pane-kick{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.05rem;
}
.fu-pane-type{
  font-family: var(--af-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--sc-accent);
}
.fu-pane-rule{
  display: block;
  width: 1.1rem;
  height: 1px;
  background: var(--fu-rule);
  flex: 0 0 auto;
}
.fu-pane-ref{
  font-family: var(--af-mono);
  font-size: 0.72rem;
  color: var(--sc-ink-faint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fu-lang{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.16rem 0.55rem;
  border: 1px solid var(--fu-rule);
  border-radius: 3px;
  font-size: 0.66rem;
  color: var(--sc-ink-soft);
}
.fu-lang--py i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-accent);
}

.fu-pane-t{
  font-family: var(--af-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.72rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--sc-ink);
  margin: 0 0 0.9rem;
}
.fu-pane p{
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--sc-ink-soft);
  max-width: 62ch;
  margin: 0 0 0.8rem;
}
.fu-pane code{
  font-family: var(--af-mono);
  font-size: 0.86em;
  color: var(--sc-ink);
  background: color-mix(in srgb, var(--sc-ink) 7%, transparent);
  padding: 0.06em 0.34em;
  border-radius: 2px;
}
.fu-hint{
  font-size: 0.78rem !important;
  color: var(--sc-ink-faint) !important;
  border-top: 1px solid var(--fu-rule);
  padding-top: 0.75rem;
  margin-top: 1.05rem !important;
  margin-bottom: 0 !important;
}
.fu-quote{
  border-left: 2px solid var(--sc-accent);
  padding: 0.1rem 0 0.1rem 0.85rem;
  font-style: italic;
}

/* a capa oficial, dentro do README */
.fu-cover{
  margin: 0 0 1.05rem;
  border: 1px solid var(--fu-rule);
  border-radius: 3px 7px 4px 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sc-panel) 80%, #000);
}
.fu-cover img{ display: block; width: 100%; height: auto; max-height: 8.5rem; object-fit: cover; }

/* ---------- o bloco de código ---------- */

.fu-code{
  position: relative;
  margin: 0 0 0.75rem;
  padding: 0.95rem 1rem 0.95rem 0.7rem;
  border: 1px solid var(--fu-rule);
  border-radius: 3px 7px 4px 6px;
  background: color-mix(in srgb, var(--sc-panel) 74%, #000);
  overflow-x: auto;
}
/* debug muda de natureza: não é leitura, é investigação. O acento vira o
   ferrugem do guia (correção/erro), ecoado no cartão que escapa do
   visualizador, sem apontar uma linha específica como "a" correção, porque
   o acervo não entrega gabarito aqui de propósito. */
.fu-code--bug{ border-left: 2px solid var(--af-rust); }
/* o <pre> não guarda o espaço em branco da indentação do HTML: quem preserva
   o recuo do código é o .fu-clt de cada linha */
.fu-code pre{ margin: 0; counter-reset: fuln; white-space: normal; }
.fu-code code{
  display: block;
  font-family: var(--af-mono);
  font-size: 0.79rem;
  line-height: 1.72;
  background: none;
  padding: 0;
  color: var(--sc-ink);
}
.fu-cl{
  display: block;
  position: relative;
  padding-left: 2.5rem;
  min-height: 1.72em;
  counter-increment: fuln;
}
.fu-cl::before{
  content: counter(fuln);
  position: absolute;
  left: 0;
  width: 1.6rem;
  text-align: right;
  color: var(--sc-ink-faint);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.fu-clt{ display: inline-block; white-space: pre; }

.c-kw{ color: var(--sc-accent); }
.c-num{ color: var(--af-tech-blue); }
.c-st{ color: var(--af-marker); }
.c-fn{ color: var(--sc-ink); }
.c-op{ color: var(--sc-ink-faint); }
.c-cm{ color: var(--sc-ink-faint); font-style: italic; }
:root[data-theme="light"] .pj-scene--plate .c-num{ color: #7FA9BE; }

/* o código se escrevendo: cada linha revela var(--n) caracteres em passos */
.fu-code.is-typing .fu-clt{
  animation: fu-type calc(var(--n) * 0.026s) steps(var(--n)) var(--d) both;
}
@keyframes fu-type{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 -0.15em 0 0); } }

.fu-caret{
  display: inline-block;
  width: 0.6em;
  height: 1.02em;
  margin-left: 1px;
  vertical-align: -0.17em;
  background: var(--sc-accent);
  opacity: 0;
}
/* garantia: terminada a digitação, o código fica visível mesmo que a animação
   tenha sido interrompida no meio */
.fu-code.is-done .fu-clt{ animation: none; clip-path: none; }
.fu-code.is-done .fu-caret{ animation: fu-blink 1.05s steps(1) infinite; }
@keyframes fu-blink{ 0%, 49%{ opacity: 0.85; } 50%, 100%{ opacity: 0; } }

/* botão de copiar */
.fu-copy{
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--fu-rule);
  border-radius: 3px;
  background: color-mix(in srgb, var(--sc-panel) 88%, #000);
  color: var(--sc-ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--af-dur-fast) var(--af-ease), color var(--af-dur-fast) var(--af-ease), border-color var(--af-dur-fast) var(--af-ease);
}
.fu-code:hover .fu-copy, .fu-copy:focus-visible{ opacity: 1; }
.fu-copy:hover{ color: var(--sc-accent); border-color: color-mix(in srgb, var(--sc-accent) 45%, transparent); }
.fu-copy svg{ grid-area: 1 / 1; width: 15px; height: 15px; fill: none; stroke: currentColor; }
/* .sr-only mora só no home.css, que esta página não carrega */
.pj-scene .sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.fu-copy-k{
  stroke: var(--sc-accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  opacity: 0;
}
.fu-copy.is-done{ opacity: 1; color: var(--sc-accent); border-color: color-mix(in srgb, var(--sc-accent) 45%, transparent); }
.fu-copy.is-done .fu-copy-i{ opacity: 0; }
.fu-copy.is-done .fu-copy-k{ opacity: 1; animation: fu-tick 0.42s var(--af-ease) both; }
@keyframes fu-tick{ to{ stroke-dashoffset: 0; } }

/* a saída do programa, como a linha seguinte de um terminal */
.fu-out{
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-family: var(--af-mono);
  font-size: 0.79rem !important;
  color: var(--sc-ink) !important;
  margin: 0 0 1.1rem !important;
  padding-left: 0.7rem;
}
.fu-out-p{ color: var(--sc-accent); letter-spacing: 0.06em; }
.fu-out-v{ letter-spacing: 0.08em; }
/* o resultado só aparece depois de o código terminar de se escrever */
.fu-code.is-typing ~ .fu-out{ opacity: 0; }
.fu-code.is-done ~ .fu-out{ animation: fu-out-in 0.42s var(--af-ease) both; }
@keyframes fu-out-in{ from{ opacity: 0; transform: translateY(-3px); } to{ opacity: 1; transform: none; } }

/* o exercício, no pé do arquivo */
.fu-task{
  border-top: 1px solid var(--fu-rule);
  padding-top: 0.95rem;
  margin-top: 0.2rem;
}
.fu-task-h{
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--af-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.03em;
  color: var(--sc-accent) !important;
  margin-bottom: 0.5rem !important;
}
.fu-chip{
  display: inline-block;
  font-family: var(--af-mono);
  font-size: 0.65rem !important;
  letter-spacing: 0.04em;
  color: var(--sc-ink-faint) !important;
  border: 1px dashed var(--fu-rule);
  border-radius: 3px;
  padding: 0.22rem 0.55rem;
  margin: 0.15rem 0 0 !important;
}

/* tabelas dos painéis */
.fu-tab{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0 0 0.9rem;
}
.fu-tab th{
  text-align: left;
  font-family: var(--af-mono);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  padding: 0 0.7rem 0.45rem 0;
  border-bottom: 1px solid var(--fu-rule);
}
.fu-tab td{
  padding: 0.42rem 0.7rem 0.42rem 0;
  border-bottom: 1px solid var(--sc-line-soft);
  color: var(--sc-ink-soft);
  vertical-align: top;
}
.fu-tab tr:last-child td{ border-bottom: 0; }
.fu-tab td:first-child{ color: var(--sc-ink); font-family: var(--af-mono); font-size: 0.76rem; white-space: nowrap; }
.fu-tab td code{ background: none; padding: 0; }
.fu-tab tbody tr{ transition: background var(--af-dur-fast) var(--af-ease); }
.fu-tab tbody tr:hover{ background: color-mix(in srgb, var(--sc-ink) 4%, transparent); }

/* listas muda de natureza: não é leitura, é exercício. O quadradinho antes
   do número lê como item de lista de tarefas, sem virar emoji nem doodle. */
.fu-tab--check td:first-child::before{
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.55em;
  border: 1.4px solid var(--sc-ink-faint);
  border-radius: 2px;
  vertical-align: -0.05em;
}

/* verbetes do glossário */
.fu-gloss{ margin: 0 0 0.4rem; }
.fu-gloss dt{
  font-family: var(--af-mono);
  font-size: 0.76rem;
  color: var(--sc-ink);
  margin-bottom: 0.28rem;
}
.fu-gloss-en{ color: var(--sc-ink-faint); margin-left: 0.3rem; }
.fu-gloss dd{
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--sc-ink-soft);
  padding-left: 0.85rem;
  border-left: 1px solid var(--fu-rule);
  max-width: 62ch;
}

/* lista de arquivos dos apêndices */
.fu-files{ list-style: none; margin: 0 0 0.4rem; padding: 0; }
.fu-files li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--sc-line-soft);
  font-size: 0.82rem;
  color: var(--sc-ink-faint);
}
.fu-files li:last-child{ border-bottom: 0; }
.fu-files code{ background: none; padding: 0; font-size: 0.76rem; color: var(--sc-ink); }

/* ---------- rodapé da placa ---------- */

.fu-foot{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem clamp(1.6rem, 4vw, 4rem);
  padding: 0.7rem clamp(0.9rem, 1.6vw, 1.35rem);
  border-top: 1px solid var(--fu-rule);
  font-family: var(--af-mono);
  font-size: 0.68rem;
  color: var(--sc-ink);
}
.fu-foot > span{ display: inline-flex; gap: 0.6rem; }
.fu-foot b{ font-weight: 400; color: var(--sc-ink-faint); }

/* ---------- o que fica depois da placa ---------- */

.fu-after{
  margin-top: clamp(2.2rem, 3.4vw, 3rem);
  max-width: 68rem;
}
.fu-after .pj-actions{ margin-top: 0; }

/* ---------- responsivo ---------- */

@media (max-width: 1240px){
  .fu-body{ grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); }
}

@media (max-width: 900px){
  /* a árvore vira uma faixa de abas no topo do navegador, e a tela cresce
     em altura: a proporção de notebook não cabe em tela estreita, e o que
     importa aqui é sobrar espaço de leitura para o painel */
  .fu-repo{ min-height: 36rem; }
  .fu-body{ grid-template-columns: minmax(0, 1fr); }
  .fu-tree{
    border-right: 0;
    border-bottom: 1px solid var(--fu-rule);
    padding: 0.9rem 0 0;
  }
  .fu-tree-label{ margin-bottom: 0.6rem; }
  .fu-nodes{
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 1.15rem;
    gap: 0.15rem;
  }
  .fu-nodes::-webkit-scrollbar{ display: none; }
  .fu-node{
    width: auto;
    flex: 0 0 auto;
    padding: 0.45rem 0.7rem 0.6rem;
    border-radius: 0;
  }
  .fu-node.is-active{ background: none; }
  /* na faixa horizontal o traço se desenha da esquerda para a direita */
  .fu-node::before{
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }
  .fu-node.is-active::before{ transform: scaleX(1); }
  .fu-guide{
    margin: 0;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--fu-rule);
  }
}

@media (max-width: 560px){
  /* sem hover no toque, o botão fica visível e o código desce para não ficar embaixo dele */
  .fu-code{ padding-left: 0.5rem; padding-top: 2.5rem; }
  .fu-cl{ padding-left: 2.1rem; }
  .fu-copy{ opacity: 1; }
}

@media (max-width: 720px){
  /* em duas colunas os filetes verticais sobrariam soltos no começo das
     linhas quebradas, então a separação passa a ser o próprio espaço */
  .fu-meta{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.2rem; }
  .fu-meta li{ padding: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce){
  .fu-pane{ animation: none; }
  .fu-code.is-typing .fu-clt{ animation: none; clip-path: none; }
  .fu-code.is-done .fu-caret{ animation: none; opacity: 0; }
  .fu-copy.is-done .fu-copy-k{ animation: none; stroke-dashoffset: 0; }
  .fu-node::before{ transition: none; }
  .fu-code.is-typing ~ .fu-out{ opacity: 1; }
  .fu-code.is-done ~ .fu-out{ animation: none; }
}

@media print{
  .fu-tree, .fu-copy{ display: none !important; }
  .fu-pane[hidden]{ display: block !important; }
  .fu-body{ grid-template-columns: minmax(0, 1fr); }
  .fu-repo{ box-shadow: none; transform: none; height: auto; }
  .fu-panes{ overflow: visible; }
  .fu-mac-lid{ padding: 0; background: none; box-shadow: none; }
  .fu-mac-hinge, .fu-mac-deck, .fu-mac-cam, .fu-stage::before{ display: none !important; }
  .pj-scene--wide .pj-scene-in::before,
  .pj-scene--wide .pj-scene-in::after{ display: none; }
}

/* =========================================================================
   04 · GERADOR DE ORÇAMENTOS — "o documento que a empresa manda"
   ------------------------------------------------------------------------
   A cena corre a largura da tela sobre uma fotografia de painel de madeira
   (img/fundos/fundo_orcamentos), bem escurecida: atmosfera, não assunto.
   O conteúdo é editorial e vertical. O objeto central é o PDF que o
   aplicativo gera, a saída real que as duas empresas enviam ao cliente;
   ao lado, o próprio aplicativo; e, presa no alto da coluna, a primeira
   versão. Nada de PDF fabricado nem desenho técnico inventado: as capturas
   são reais e onde ainda falta material há um espaço reservado.
   ========================================================================= */

.orc-scene{
  --sc-bg:        #131210;
  --sc-edge:      rgba(236,232,220,0.09);
  --sc-ink:       #ECE7DB;
  --sc-ink-soft:  #AEA99D;
  --sc-ink-faint: #8E887B;
  --sc-line:      #3B362C;
  --sc-line-soft: #2A261F;
  --sc-accent:    #DACFB4;   /* luz morna da madeira, não cor de identidade */
  --sc-panel:     #1C1A15;
  --sc-panel-2:   #24211A;
  --af-accent-wash: rgba(236,232,220,0.06);

  --orc-paper: #E9E3D2;
  --orc-sh:    0 3px 8px rgba(0,0,0,0.36), 0 26px 54px rgba(0,0,0,0.48);
}

/* a madeira: fotografia decorativa atrás de tudo, bem apagada. Sem grão
   por cima (a própria madeira já é a textura da cena). */
.orc-scene .pj-scene-in::before{ display: none; }
/* a madeira aparece da esquerda pra direita: quase apagada atrás da coluna
   de texto, mais presente no lado das folhas. Um leve afundamento embaixo. */
.orc-scene .pj-scene-in::after{
  background:
    linear-gradient(to right,
      rgba(11,11,9,0.94) 0%,
      rgba(11,11,9,0.82) 24%,
      rgba(11,11,9,0.52) 52%,
      rgba(11,11,9,0.24) 80%,
      rgba(11,11,9,0.12) 100%),
    linear-gradient(to bottom, transparent 0%, transparent 58%, rgba(11,11,9,0.5) 100%);
}
.orc-bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.orc-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  filter: brightness(0.4) saturate(0.74) blur(1px);
  transform: scale(1.05);
}

/* coluna editorial: o texto abre a cena numa largura de leitura confortável */
.orc-wrap{
  position: relative;
  max-width: var(--field-max);
  margin-inline: auto;
  display: grid;
  row-gap: clamp(2.4rem, 4vw, 3.4rem);
}
.orc-head{ max-width: 44rem; }
.orc-head .pj-lede{ max-width: 46ch; }
.orc-head .pj-more{ margin-top: 1.4rem; }

/* a primeira versão: uma captura real presa como uma foto. Em telas largas
   ela sai da coluna de texto e ocupa o vazio à direita do cabeçalho; abaixo
   disso volta pro fluxo, flutuando à direita da leitura. */
.orc-origin{
  float: right;
  width: clamp(170px, 19vw, 232px);
  margin: 0.2rem 0 1rem 1.8rem;
  position: relative;
  transform: rotate(1.8deg);
}
@media (min-width: 1100px){
  .orc-head{ position: static; }
  .orc-origin{
    float: none;
    position: absolute;
    top: clamp(2.4rem, 5vw, 4.4rem);
    right: 0;
    width: clamp(232px, 22vw, 300px);
    margin: 0;
  }
}
.orc-origin .pj-ficha-clip{
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 18px;
  height: 24px;
  color: var(--sc-ink-faint);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  z-index: 1;
}
.orc-origin .proj-shot{
  display: block;
  padding: 6px;
  border: 1px solid var(--sc-line);
  border-radius: 3px 8px 4px 7px;
  background: var(--sc-panel-2);
  box-shadow: var(--orc-sh);
}
.orc-origin .proj-shot picture{ display: block; }
.orc-origin img{ display: block; width: 100%; height: auto; border-radius: 1px; }
.orc-origin .pj-caption{ margin-top: 0.6rem; }

/* os dois objetos: a folha do PDF (grande, à esquerda) e o aplicativo */
.orc-work{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas:
    "doc desk"
    "doc app";
  column-gap: clamp(1.8rem, 4vw, 3.6rem);
  row-gap: clamp(1.8rem, 3.5vw, 2.8rem);
  align-items: start;
}
.orc-doc{ grid-area: doc; margin: 0; }
.orc-desk{ grid-area: desk; margin: 0; }
.orc-app{ grid-area: app; margin: 0; }

/* a folha: papel claro assentado sobre a madeira, com leve profundidade */
.orc-doc .orc-sheet{
  display: block;
  background: var(--orc-paper);
  border-radius: 2px;
  box-shadow: var(--orc-sh);
}
.orc-doc .orc-sheet img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* a captura de tela larga: mesmo tratamento de folha, mas 2/1, a
   proporção real do print (a caixa do placeholder era 16/10, um palpite
   de antes de ter a captura de verdade) */
.orc-desk .orc-sheet{
  display: block;
  overflow: hidden;
  background: var(--orc-paper);
  border-radius: 2px;
  box-shadow: var(--orc-sh);
}
.orc-desk .orc-sheet img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* espaço reservado: mantém a proporção final e diz o que vai entrar ali */
.orc-slot.is-ph{
  display: grid;
  place-content: center;
  gap: 0.5rem;
  padding: 1.6rem;
  text-align: center;
  background: var(--sc-panel);
  border: 1px dashed color-mix(in srgb, var(--sc-ink-faint) 55%, transparent);
  border-radius: 3px;
  box-shadow: none;
}
.orc-doc .orc-slot.is-ph{
  aspect-ratio: 210 / 297;
  background: color-mix(in srgb, var(--orc-paper) 14%, var(--sc-panel));
}
.orc-desk .orc-slot.is-ph{
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--orc-paper) 8%, var(--sc-panel));
}
.orc-ph-l{
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
}
.orc-ph-n{
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 26ch;
  margin-inline: auto;
}

/* o aplicativo: a moldura da galeria real (celular) sobre a madeira.
   a tela do celular é estreita e alta, então tem largura própria e fica
   centrada na sua faixa, sem esticar a coluna toda pra cima */
.orc-app .gal-stage{ background: var(--sc-panel); }
.orc-app .gallery{ position: relative; max-width: 380px; margin-inline: auto; }

/* legenda: rótulo mono + frase, o rótulo acende no hover do objeto */
.orc-cap-k{
  display: inline-block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  margin-right: 0.5rem;
  transition: color var(--af-dur) var(--af-ease);
}
.orc-doc:hover .orc-cap-k,
.orc-doc:focus-within .orc-cap-k,
.orc-app:hover .orc-cap-k,
.orc-app:focus-within .orc-cap-k,
.orc-origin:hover .orc-cap-k{ color: var(--sc-accent); }

/* ficha técnica curta da cena */
.orc-meta{
  margin: 1.6rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--sc-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.2rem;
}
.orc-meta > div{ display: grid; gap: 0.16rem; min-width: 0; }
.orc-meta--wide{ flex: 1 1 100%; }
.orc-meta dt{
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
}
.orc-meta dd{
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--sc-ink);
}

/* entrada suave: a folha e o app assentam quando a cena aparece */
.orc-anim .orc-doc,
.orc-anim .orc-desk,
.orc-anim .orc-app{
  opacity: 0;
  transform: translateY(14px);
}
.orc-anim.is-in .orc-doc,
.orc-anim.is-in .orc-desk,
.orc-anim.is-in .orc-app{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s var(--af-ease), transform 0.55s var(--af-ease);
}
.orc-anim.is-in .orc-desk{ transition-delay: 0.06s; }
.orc-anim.is-in .orc-app{ transition-delay: 0.12s; }

/* ---------- responsivo ---------- */

@media (max-width: 960px){
  .orc-work{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "doc"
      "app"
      "desk";
    row-gap: clamp(2.4rem, 6vw, 3.6rem);
  }
  .orc-doc,
  .orc-desk,
  .orc-app{ max-width: 30rem; }
}

@media (max-width: 620px){
  .orc-origin{
    float: none;
    width: min(200px, 62%);
    margin: 0 0 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .orc-bg img{ filter: brightness(0.4) saturate(0.74) blur(1px); }
  .orc-anim .orc-doc,
  .orc-anim .orc-desk,
  .orc-anim .orc-app{ opacity: 1; transform: none; }
}

@media print{
  .orc-bg,
  .orc-scene .pj-scene-in::after{ display: none !important; }
  .orc-work{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "doc" "app" "desk";
  }
  .orc-doc,
  .orc-desk,
  .orc-app,
  .orc-origin{ transform: none; box-shadow: none; opacity: 1; }
}

/* =========================================================================
   Computador de 8 bits: a bancada

   A cena deixa de ser duas colunas. Em cima, o título com a nota de margem;
   embaixo, uma moldura de instrumento contendo o diagrama da arquitetura,
   um painel de inspeção à direita e uma barra de estado com RUN/STEP.

   O diagrama é SVG e representa a arquitetura que o projeto segue: um
   barramento único de 8 bits, PC → MAR → RAM, A e B entrando direto na
   ULA, IR alimentando a unidade de controle e as flags Z/C voltando
   para ela. Nada aqui é decorativo: cada fio existe na arquitetura.
   ========================================================================= */

.m8-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 13.5rem);
  column-gap: clamp(1.5rem, 3vw, 3.4rem);
  align-items: start;
  margin-bottom: clamp(1.7rem, 2.8vw, 2.6rem);
}
.m8-head .pj-lede{ max-width: 56ch; }
.m8-head-main .pj-keys{ margin-top: 1rem; }
.m8-head-main .pj-more{ margin-top: 1.1rem; }

/* linha de dados entre o lede e a moldura */
.m8-meta{
  grid-column: 1 / -1;
  list-style: none;
  margin: clamp(1.7rem, 3vw, 2.6rem) 0 0;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--sc-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.7rem;
}
.m8-meta li{
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0 clamp(1.1rem, 2.6vw, 2.4rem);
  border-left: 1px solid var(--sc-line);
  font-family: var(--af-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--sc-ink-faint);
}
.m8-meta li:first-child{ padding-left: 0; border-left: 0; }
.m8-meta b{
  font-family: var(--af-mono);
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- a moldura do instrumento ---------- */

.m8-rig{
  --m8-chrome: color-mix(in srgb, var(--sc-panel) 86%, #000);
  --m8-inner:  color-mix(in srgb, var(--sc-panel) 55%, #000);
  --m8-rule:   color-mix(in srgb, var(--sc-ink) 13%, transparent);
  position: relative;
  background: var(--m8-chrome);
  border: 1px solid var(--sc-line);
  border-radius: 5px 10px 6px 9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 3px 8px rgba(0,0,0,0.34),
    0 32px 68px rgba(0,0,0,0.44);
  overflow: hidden;
}
/* os quatro parafusos da moldura, discretos */
.m8-screw{
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sc-ink) 22%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  z-index: 3;
  pointer-events: none;
}
.m8-screw::after{
  content: "";
  position: absolute;
  inset: 2px 1px;
  border-top: 1px solid color-mix(in srgb, var(--sc-panel) 70%, #000);
  transform: rotate(28deg);
}
.m8-screw--tl{ top: 8px; left: 9px; }
.m8-screw--tr{ top: 8px; right: 9px; }
.m8-screw--bl{ bottom: 8px; left: 9px; }
.m8-screw--br{ bottom: 8px; right: 9px; }

/* ---------- barra de topo: abas e LED de estado ---------- */

.m8-bar{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 clamp(1.5rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--m8-rule);
  background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
}
.m8-tabs{ display: flex; gap: 0.2rem; margin-left: -0.6rem; }
.m8-tab{
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.85rem 0.6rem;
  min-height: 42px;
  font-family: var(--af-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  border-bottom: 2px solid transparent;
  transition: color var(--af-dur-fast) var(--af-ease), border-color var(--af-dur-fast) var(--af-ease);
}
.m8-tab:hover{ color: var(--sc-ink); }
.m8-tab[aria-selected="true"]{ color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.m8-bar-state{
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--af-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
}
.m8-led{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sc-ink) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-ink) 26%, transparent);
  flex: 0 0 auto;
}
.m8-led.is-on{
  background: var(--sc-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc-accent) 50%, transparent), 0 0 7px color-mix(in srgb, var(--sc-accent) 55%, transparent);
}

/* ---------- corpo: diagrama + painel de inspeção ---------- */

.m8-body[hidden]{ display: none !important; }
.m8-body{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19.5rem);
  align-items: stretch;
  background: var(--m8-inner);
}
.m8-viewport{
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-right: 1px solid var(--m8-rule);
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sc-ink) 22%, transparent) transparent;
}
.m8-viewport::-webkit-scrollbar{ height: 7px; }
.m8-viewport::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--sc-ink) 22%, transparent);
  border-radius: 999px;
}
.m8-svg{
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
  color: var(--sc-ink-soft);
}
/* dica de arrasto, só enquanto o diagrama não couber */
.m8-pan-hint{
  position: absolute;
  right: 0.9rem;
  bottom: 0.7rem;
  font-family: var(--af-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  background: color-mix(in srgb, var(--m8-inner) 88%, transparent);
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
  pointer-events: none;
  transition: opacity var(--af-dur) var(--af-ease);
}
.m8-viewport.is-panned .m8-pan-hint{ opacity: 0; }

/* ---------- o visor, embaixo do diagrama e do painel ---------- */

.m8-out{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1rem clamp(0.9rem, 1.6vw, 1.4rem) 1.1rem;
  border-top: 1px solid var(--m8-rule);
  background: color-mix(in srgb, var(--m8-innerbg) 60%, transparent);
}
.m8-out-intro, .m8-out-note{
  margin: 0;
  max-width: 46ch;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--sc-ink-faint);
}
.m8-out-intro b, .m8-out-note b{ color: var(--sc-ink-soft); font-weight: 600; }
.m8-disp7{
  display: flex;
  align-items: center;
  padding: 0.5rem 0.8rem;
  background: var(--m8-panelbg);
  border: 1px solid var(--m8-rule);
  border-radius: 2px 6px 3px 5px;
}
.m8-disp7-svg{ display: block; width: clamp(190px, 30vw, 250px); height: auto; }
.m8-disp7-svg .seg{
  fill: color-mix(in srgb, var(--m8-led-out) 12%, var(--m8-panelbg));
  transition: fill 0.12s var(--af-ease);
}
.m8-disp7-svg .seg.is-on{ fill: var(--m8-led-out); }
.m8-disp7-svg .opseg{
  fill: color-mix(in srgb, var(--m8-led-out) 12%, var(--m8-panelbg));
  transition: fill 0.12s var(--af-ease);
}
.m8-disp7-svg .m8-op.is-on .opseg{ fill: var(--m8-led-out); }

/* ---------- o desenho ---------- */

.m8-grid-dot{ fill: color-mix(in srgb, var(--sc-ink) 16%, transparent); }

.m8-box{
  fill: color-mix(in srgb, var(--sc-panel) 74%, #000);
  stroke: color-mix(in srgb, var(--sc-ink) 30%, transparent);
  stroke-width: 1.2;
}
.m8-box--soft{ fill: none; stroke-dasharray: 3 3; opacity: 0.7; }
.m8-name{
  font-family: var(--af-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  fill: var(--sc-ink);
}
.m8-sub{
  font-family: var(--af-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  fill: var(--sc-ink-faint);
}
.m8-val{
  font-family: var(--af-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  fill: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.m8-tag{
  font-family: var(--af-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  fill: var(--sc-ink-faint);
}

.m8-wire{
  fill: none;
  stroke: color-mix(in srgb, var(--sc-ink) 32%, transparent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m8-ctl{
  fill: none;
  stroke: color-mix(in srgb, var(--sc-ink) 24%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m8-bus{
  fill: none;
  stroke: color-mix(in srgb, var(--sc-ink) 34%, transparent);
  stroke-width: 7;
  stroke-linecap: round;
}
.m8-bus-lbl{
  font-family: var(--af-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  fill: var(--sc-ink-faint);
}
.m8-node{ fill: color-mix(in srgb, var(--sc-ink) 34%, transparent); }
.m8-disp-big{ font-size: 19px; letter-spacing: 0.06em; }
/* nome do sinal de controle, escrito sobre o módulo enquanto ele age */
.m8-sig{
  font-family: var(--af-mono);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  fill: var(--sc-accent);
}
.m8-svg.is-focus .m8-sigs{ opacity: 0.42; }

/* estados: sinal ativo é verde, e nunca só verde */
.m8-wire.is-on{ stroke: var(--sc-accent); stroke-width: 1.9; }
.m8-ctl.is-on{ stroke: var(--sc-accent); stroke-width: 1.4; opacity: 1; }
.m8-bus.is-on{ stroke: color-mix(in srgb, var(--sc-accent) 82%, transparent); stroke-width: 8.5; }
.m8-bus.is-on + .m8-bus-lbl,
.m8-busval.is-on{ fill: var(--sc-accent); }
.m8-pulse{
  fill: none;
  stroke: color-mix(in srgb, var(--sc-accent) 85%, #FFF);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  opacity: 0;
  pointer-events: none;
}
.m8-pulse.is-on{
  opacity: 1;
  animation: m8-flow 0.95s linear infinite;
}
.m8-pulse.is-on.is-rev{ animation-direction: reverse; }
@keyframes m8-flow{ to{ stroke-dashoffset: 0; } }

/* módulo: alvo de clique, foco e destaque */
.m8-mod{ cursor: pointer; }
.m8-mod .m8-hit{ fill: transparent; stroke: none; }
.m8-mod:hover .m8-box{ stroke: color-mix(in srgb, var(--sc-accent) 70%, transparent); }
.m8-mod:focus{ outline: none; }
.m8-mod:focus-visible .m8-box{
  stroke: var(--sc-accent);
  stroke-width: 2;
}
.m8-mod:focus-visible .m8-ring{ opacity: 1; }
.m8-ring{
  fill: none;
  stroke: var(--sc-accent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
}
.m8-mod.is-sel .m8-ring{ opacity: 1; }
.m8-mod.is-sel .m8-box{ stroke: var(--sc-accent); stroke-width: 2; }
.m8-mod.is-sel .m8-name{ fill: var(--sc-accent); }
/* módulo trabalhando no ciclo atual: borda mais grossa e canto marcado */
.m8-mod.is-live .m8-box{
  stroke: var(--sc-accent);
  stroke-width: 2;
  fill: color-mix(in srgb, var(--sc-accent) 12%, color-mix(in srgb, var(--sc-panel) 74%, #000));
}
.m8-mod.is-live .m8-name{ fill: var(--sc-ink); }
.m8-mod.is-live .m8-val{ fill: var(--sc-accent); }
.m8-corner{ fill: var(--sc-accent); opacity: 0; }
.m8-mod.is-live .m8-corner{ opacity: 1; }
/* o valor pisca curto quando muda */
.m8-val.is-hit{ animation: m8-hit 0.5s var(--af-ease) both; }
@keyframes m8-hit{
  0%{ fill: color-mix(in srgb, var(--sc-accent) 85%, #FFF); }
  100%{ fill: var(--sc-ink-soft); }
}
.m8-mod.is-live .m8-val.is-hit{ animation: none; }

/* seleção baixa o contraste do resto, sem apagar */
.m8-svg.is-focus .m8-mod:not(.is-sel):not(.is-rel){ opacity: 0.42; }
.m8-svg.is-focus .m8-static:not(.is-rel){ opacity: 0.42; }
.m8-mod, .m8-static{ transition: opacity var(--af-dur) var(--af-ease); }

/* LEDs do desenho (Z, C, clock) */
.m8-svg .led{
  fill: none;
  stroke: color-mix(in srgb, var(--sc-ink) 34%, transparent);
  stroke-width: 1.2;
}
.m8-svg .led.is-on{ fill: var(--sc-accent); stroke: var(--sc-accent); }

/* ---------- painel de inspeção ---------- */

.m8-panel{
  min-width: 0;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: color-mix(in srgb, var(--sc-panel) 78%, #000);
}
.m8-panel-head{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--m8-rule);
}
.m8-panel-eyebrow{
  font-family: var(--af-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
}
.m8-nav{ margin-left: auto; display: flex; gap: 0.2rem; }
.m8-nav button{
  appearance: none;
  background: none;
  border: 1px solid var(--m8-rule);
  border-radius: 2px;
  color: var(--sc-ink-faint);
  cursor: pointer;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-family: var(--af-mono);
  font-size: 0.7rem;
  transition: color var(--af-dur-fast) var(--af-ease), border-color var(--af-dur-fast) var(--af-ease);
}
.m8-nav button:hover{ color: var(--sc-accent); border-color: color-mix(in srgb, var(--sc-accent) 55%, transparent); }

.m8-card h3{
  margin: 0 0 0.12rem;
  font-family: var(--af-mono);
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--sc-ink);
}
.m8-card h3::after{ content: none; }
.m8-panel-body{ min-width: 0; }
.m8-card-w{
  font-family: var(--af-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-accent);
}
.m8-card p{
  margin: 0.6rem 0 0;
  font-size: 0.79rem;
  line-height: 1.58;
  color: var(--sc-ink-soft);
  max-width: 40ch;
}
.m8-card p + p{ margin-top: 0.45rem; }
.m8-card p.m8-fine{ color: var(--sc-ink-faint); font-size: 0.72rem; }

/* tabela de valores (ULA, µcode, registrador) */
.m8-rows{
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.3rem;
  font-family: var(--af-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}
.m8-rows > div{
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  justify-content: space-between;
  border-bottom: 1px dotted var(--m8-rule);
  padding-bottom: 0.24rem;
}
.m8-rows dt, .m8-rows .k{ color: var(--sc-ink-faint); }
.m8-rows dd, .m8-rows .v{ margin: 0; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.m8-rows .v.is-hi{ color: var(--sc-accent); }

/* fontes e destinos do barramento */
.m8-io{ margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.m8-io-k{
  font-family: var(--af-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  display: block;
  margin-bottom: 0.28rem;
}
.m8-chips{ display: flex; flex-wrap: wrap; gap: 0.28rem; list-style: none; margin: 0; padding: 0; }
.m8-chips li{
  font-family: var(--af-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
  border: 1px solid var(--m8-rule);
  border-radius: 2px;
  padding: 0.16rem 0.4rem;
}
.m8-chips li.is-on{
  color: var(--sc-accent);
  border-color: color-mix(in srgb, var(--sc-accent) 55%, transparent);
  background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
}
.m8-chips--sig li{ font-size: 0.6rem; }

/* janela de RAM */
.m8-ram{
  margin: 0.2rem 0 0;
  border: 1px solid var(--m8-rule);
  border-radius: 2px;
  font-family: var(--af-mono);
  font-size: 0.63rem;
  letter-spacing: 0.03em;
}
.m8-ram-row{
  display: grid;
  grid-template-columns: 3.1rem 3.1rem minmax(0, 1fr);
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
  color: var(--sc-ink-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 7%, transparent);
}
.m8-ram-row:last-child{ border-bottom: 0; }
.m8-ram-row .a{ color: var(--sc-ink-faint); }
.m8-ram-row .n{ color: var(--sc-ink-faint); font-size: 0.58rem; align-self: center; }
.m8-ram-row.is-mar{ background: color-mix(in srgb, var(--sc-accent) 14%, transparent); color: var(--sc-ink); }
.m8-ram-row.is-mar .a{ color: var(--sc-accent); }
.m8-ram-row.is-pc .a::after{ content: " ←"; color: var(--sc-accent); }
.m8-ram-gap{
  padding: 0.1rem 0.5rem;
  color: var(--sc-ink-faint);
  border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 7%, transparent);
}

/* ---------- barra de estado e controles ---------- */

.m8-status{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem clamp(0.9rem, 1.8vw, 1.6rem);
  padding: 0.7rem clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid var(--m8-rule);
  background: var(--m8-chrome);
  font-family: var(--af-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--sc-ink-faint);
}
.m8-ctrls{ display: flex; gap: 0.4rem; }
.m8-ctrls[hidden]{ display: none !important; }
.m8-btn[aria-pressed="false"] .m8-run-on{ display: none; }
.m8-btn[aria-pressed="true"] .m8-run-off{ display: none; }
.m8-btn{
  appearance: none;
  cursor: pointer;
  background: none;
  border: 1px solid var(--sc-line);
  border-radius: 2px 4px 2px 4px;
  color: var(--sc-ink-soft);
  font-family: var(--af-mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.42rem 0.8rem;
  min-height: 34px;
  transition: color var(--af-dur-fast) var(--af-ease), border-color var(--af-dur-fast) var(--af-ease), background var(--af-dur-fast) var(--af-ease);
}
.m8-btn:hover{ color: var(--sc-ink); border-color: color-mix(in srgb, var(--sc-accent) 55%, transparent); }
.m8-btn[aria-pressed="true"]{
  color: var(--sc-accent);
  border-color: color-mix(in srgb, var(--sc-accent) 60%, transparent);
  background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
}
.m8-btn:disabled{ opacity: 0.4; cursor: default; }
.m8-btn:disabled:hover{ color: var(--sc-ink-soft); border-color: var(--sc-line); }

.m8-read{ display: flex; align-items: center; gap: 0.4rem; }
.m8-read b{
  font-weight: 400;
  color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}
.m8-read .is-hi{ color: var(--sc-accent); }
.m8-tstrip{ display: flex; gap: 0.22rem; align-items: center; }
.m8-tstrip i{
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--sc-ink) 20%, transparent);
}
.m8-tstrip i.is-on{ background: var(--sc-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--sc-accent) 55%, transparent); }
.m8-status-note{ margin-left: auto; color: var(--sc-ink-faint); }

/* ---------- vista física ---------- */

.m8-phys[hidden]{ display: none !important; }
.m8-phys{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  background: var(--m8-inner);
  align-items: center;
}
.m8-phys figure{ margin: 0; }
.m8-phys-shot{
  display: block;
  border: 1px solid var(--sc-line);
  border-radius: 3px 8px 4px 7px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3), 0 22px 46px rgba(0,0,0,0.36);
}
.m8-phys-shot img{ display: block; width: 100%; height: auto; }
.m8-phys figcaption{
  margin-top: 0.6rem;
  font-family: var(--af-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--sc-ink-faint);
}
.m8-phys-txt h3{
  margin: 0 0 0.5rem;
  font-family: var(--af-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
}
.m8-phys-txt h3::after{ content: none; }
.m8-phys-txt p{
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--sc-ink-soft);
  max-width: 44ch;
}
.m8-phys-txt p:last-child{ margin-bottom: 0; }
.m8-pause{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--af-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  border: 1px dashed var(--sc-line);
  border-radius: 2px;
  padding: 0.28rem 0.6rem;
  margin-bottom: 0.9rem;
}
.m8-pause i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sc-ink-faint);
}

/* ---------- as três fichas de laboratório, abaixo da moldura ---------- */

.m8-strip{
  position: relative;
  list-style: none;
  margin: clamp(1.6rem, 2.6vw, 2.3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
/* a linha que liga as três fichas */
.m8-strip::before{
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0.62rem;
  height: 1px;
  background: var(--sc-line);
  z-index: 0;
}
.m8-strip > div{ position: relative; z-index: 1; padding-top: 1.5rem; }
.m8-strip > div::before{
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sc-bg);
  box-shadow: inset 0 0 0 1px var(--sc-ink-faint);
}
.m8-strip dt{
  font-family: var(--af-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
  margin-bottom: 0.22rem;
}
.m8-strip dd{ margin: 0; }
.m8-strip-v{
  display: block;
  font-family: var(--af-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--sc-ink);
}
.m8-strip-p{
  display: block;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--sc-ink-faint);
  max-width: 32ch;
}

/* ---------- entrada da cena ---------- */

.m8-anim .m8-rig{ opacity: 0; transform: translateY(9px); }
.m8-anim.is-in .m8-rig{
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--af-ease), transform 0.45s var(--af-ease);
}
.m8-anim .m8-bus{ stroke-dasharray: 100; stroke-dashoffset: 100; }
.m8-anim.is-in .m8-bus{ animation: m8-draw 0.5s var(--af-ease) 0.3s forwards; }
@keyframes m8-draw{ to{ stroke-dashoffset: 0; } }
.m8-anim #m8-svg-body{ opacity: 0; }
.m8-anim.is-in #m8-svg-body{ animation: m8-app 0.3s var(--af-ease) 0.42s forwards; }
@keyframes m8-app{ to{ opacity: 1; } }

/* ---------- responsivo ---------- */

@media (max-width: 1099px){
  .m8-head{ grid-template-columns: minmax(0, 1fr); }
  .m8-body{ grid-template-columns: minmax(0, 1fr); }
  .m8-viewport{ border-right: 0; border-bottom: 1px solid var(--m8-rule); }
  .m8-panel{ background: color-mix(in srgb, var(--sc-panel) 82%, #000); }
  .m8-phys{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px){
  .m8-strip{ grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .m8-strip::before{ display: none; }
  .m8-strip li{ padding-top: 0; padding-left: 1.5rem; }
  .m8-strip li::before{ top: 0.28rem; }
  .m8-meta li{ padding: 0 1rem; }
}

@media (max-width: 680px){
  .m8-bar-state{ display: none; }
}

@media (max-width: 560px){
  .m8-bar{ padding-inline: 0.9rem; }
  .m8-status{ padding-inline: 0.9rem; }
  .m8-tab{ padding-inline: 0.45rem; font-size: 0.6rem; letter-spacing: 0.1em; }
  /* o estado da barra de topo se repete embaixo, e ali cabe */
  .m8-bar-state{ display: none; }
  .m8-svg{ min-width: 700px; }
  .m8-status-note{ display: none; }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce){
  .m8-pulse{ display: none; }
  .m8-anim .m8-rig{ opacity: 1; transform: none; }
  .m8-anim .m8-bus{ stroke-dasharray: none; stroke-dashoffset: 0; }
  .m8-anim #m8-svg-body{ opacity: 1; }
  .m8-val.is-hit{ animation: none; }
  .m8-mod, .m8-static, .m8-btn, .m8-tab{ transition: none; }
}

/* ---------- impressão ---------- */

@media print{
  .m8-rig{ box-shadow: none; }
  .m8-screw, .m8-ctrls, .m8-nav, .m8-pan-hint, .m8-out{ display: none !important; }
  .m8-body{ grid-template-columns: minmax(0, 1fr); }
  .m8-viewport{ overflow: visible; }
  .m8-svg{ min-width: 0; }
}

/* =========================================================================
   Computador de 8 bits — pele "bancada de instrumentos"

   Recolore a moldura e o diagrama já existentes para a paleta de cobre e
   tungstênio da referência (projetos_partes/computador-8bits-secao.html) e
   abre a cena em faixa de largura total: o texto à esquerda, a máquina à
   direita, sobre um piso em perspectiva com uma grade fina no ar. A
   simulação, as abas e a marcação de módulos continuam iguais; só muda o
   acabamento. Nenhum fio novo, nenhuma peça inventada.
   ========================================================================= */

#oito-bits{
  /* paleta da referência, escopo local */
  --m8-cop:      #C89B60;
  --m8-cop-lit:  #E2B773;
  --m8-cop-dim:  #A87C48;
  --m8-title:    #DEB174;
  --m8-ink:      #F0ECE4;
  --m8-muted:    #B8B3AA;
  --m8-faint:    #8A8F86;
  --m8-hair:     rgba(255,255,255,0.085);
  --m8-panelbg:  #0F1317;
  --m8-innerbg:  #0C0F12;
  --m8-led-run:  #68D889;
  --m8-led-addr: #F0A63A;
  --m8-led-out:  #F45B53;
  --m8-chrome:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 10%),
    linear-gradient(135deg, #15191C, #090B0D 72%);

  /* repinta os tokens de cena que o diagrama existente consome */
  --sc-ink:       var(--m8-ink);
  --sc-ink-soft:  var(--m8-muted);
  --sc-ink-faint: var(--m8-faint);
  --sc-line:      var(--m8-hair);
  --sc-line-soft: rgba(255,255,255,0.05);
  --sc-accent:    var(--m8-cop);
  --sc-panel:     #171B1E;
}

/* ---------- a faixa e o piso ---------- */

#oito-bits.pj-scene{
  padding-inline: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 24%, rgba(81,103,121,0.10), transparent 30%),
    radial-gradient(circle at 58% 72%, rgba(176,117,58,0.07), transparent 24%),
    linear-gradient(180deg, #080B0E 0%, #050607 100%);
  box-shadow: var(--pj-edge-fade);
}
/* grade quadrada no ar */
#oito-bits.pj-scene::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 92px 92px;
  opacity: 0.34;
}
/* piso em perspectiva, só atmosfera, atrás de tudo */
#oito-bits.pj-scene::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12%;
  height: 58%;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(4deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #151311, #0B0A09);
  transform: perspective(1100px) rotateX(58deg);
  transform-origin: bottom center;
}

/* ---------- a cena vira faixa de largura total: texto à esquerda,
   máquina e fichas à direita ---------- */

#oito-bits .pj-scene-in{
  max-width: min(1880px, 100%);
  margin-inline: auto;
  padding: clamp(2.6rem, 4vw, 4.4rem) clamp(1.1rem, 2.4vw, 2.6rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  gap: clamp(1.8rem, 3.4vw, 3.8rem);
}
/* coluna de texto: cabeçalho e a nota de margem. Altura independente da
   máquina; o ar abaixo dela é silêncio deliberado, não um buraco no meio. */
#oito-bits .m8-head{
  flex: 0 1 22rem;
  align-self: flex-start;
  display: block;
  margin: 0;
}

/* coluna direita, empilhada: a máquina, a linha de dados e as fichas */
#oito-bits .m8-right{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 2.4vw, 2rem);
}
#oito-bits .m8-right > *{ margin-top: 0; margin-bottom: 0; }
#oito-bits .m8-meta{ padding-top: 1rem; }
#oito-bits .m8-meta li{ padding-inline: clamp(0.85rem, 2vw, 1.7rem); }
#oito-bits .m8-meta li:first-child{ padding-left: 0; }
#oito-bits .m8-strip > div::before{ background: #07090B; }

/* painel de inspeção mais estreito, para o desenho respirar */
#oito-bits .m8-body{ grid-template-columns: minmax(0, 1fr) minmax(0, 16.5rem); }
#oito-bits .m8-svg{ min-width: 560px; }

/* título editorial, com "8 bits" em cobre claro */
#oito-bits .pj-title{
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
#oito-bits .m8-8{ color: var(--m8-title); }

/* ---------- a moldura do instrumento, em cobre ---------- */

#oito-bits .m8-rig{
  --m8-rule: var(--m8-hair);
  background: var(--m8-chrome);
  border: 1px solid color-mix(in srgb, var(--m8-cop-lit) 24%, transparent);
  border-radius: 10px;
  box-shadow:
    0 38px 55px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.5),
    inset 0 0 60px rgba(0,0,0,0.32);
}
/* parafusos de latão nos quatro cantos */
#oito-bits .m8-screw{
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 35%, #9F825A, #5B4933 45%, #1D2022 70%);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
#oito-bits .m8-screw::after{
  content: "";
  position: absolute;
  inset: 2px;
  border: 0;
  transform: none;
  background: linear-gradient(45deg, transparent 44%, #17191A 44% 56%, transparent 56%);
}

#oito-bits .m8-bar{
  background: linear-gradient(to bottom, rgba(226,183,115,0.06), transparent);
  border-bottom-color: var(--m8-hair);
}
#oito-bits .m8-body{ background: var(--m8-innerbg); }
#oito-bits .m8-panel{ background: var(--m8-panelbg); }
#oito-bits .m8-status{ background: linear-gradient(135deg, #15191C, #0C0E10); }

/* ---------- o desenho, recolorido ---------- */

#oito-bits .m8-grid-dot{ fill: color-mix(in srgb, var(--m8-cop) 12%, transparent); }
#oito-bits .m8-box{
  fill: #12171A;
  stroke: color-mix(in srgb, var(--m8-cop) 28%, transparent);
}
#oito-bits .m8-box--soft{ fill: none; }
#oito-bits .m8-wire{ stroke: color-mix(in srgb, var(--m8-cop-dim) 48%, transparent); }
#oito-bits .m8-ctl{ stroke: color-mix(in srgb, var(--m8-cop-dim) 30%, transparent); }
#oito-bits .m8-bus{ stroke: color-mix(in srgb, var(--m8-cop-dim) 58%, transparent); }
#oito-bits .m8-node{ fill: color-mix(in srgb, var(--m8-cop-dim) 62%, transparent); }
#oito-bits .m8-wire.is-on{ stroke: var(--m8-cop-lit); }
#oito-bits .m8-ctl.is-on{ stroke: var(--m8-cop-lit); }
#oito-bits .m8-bus.is-on{ stroke: color-mix(in srgb, var(--m8-cop-lit) 88%, transparent); }
#oito-bits .m8-pulse{ stroke: color-mix(in srgb, var(--m8-cop-lit) 90%, #FFF); }

/* LEDs em três cores, como na referência: verde executa, âmbar sinaliza,
   vermelho é o número na saída */
#oito-bits #m8-clk-led.is-on{
  fill: var(--m8-led-run);
  stroke: var(--m8-led-run);
}
#oito-bits #m8-z-led.is-on,
#oito-bits #m8-c-led.is-on{
  fill: var(--m8-led-addr);
  stroke: var(--m8-led-addr);
}
#oito-bits .m8-disp-big{
  fill: var(--m8-led-out);
  filter: drop-shadow(0 0 5px rgba(244,91,83,0.45));
}
#oito-bits #m8-t{ color: var(--m8-title); }
#oito-bits .m8-led.is-on{
  background: var(--m8-led-run);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--m8-led-run) 45%, transparent),
    0 0 7px color-mix(in srgb, var(--m8-led-run) 55%, transparent);
}

/* ---------- foto real no lugar do placeholder de protoboard ---------- */

#oito-bits .m8-phys{ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* ---------- responsivo ---------- */

@media (max-width: 1200px){
  #oito-bits .pj-scene-in{
    flex-direction: column;
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }
  #oito-bits .m8-head{
    flex: 0 0 auto;
    align-self: stretch;
    max-width: 46rem;
  }
  #oito-bits .m8-right{ align-self: stretch; }
  #oito-bits .m8-body{ grid-template-columns: minmax(0, 1fr); }
  #oito-bits .m8-svg{ min-width: 0; }
}

@media (max-width: 620px){
  #oito-bits.pj-scene::after{ display: none; }
  #oito-bits .pj-scene-in{ padding-inline: clamp(0.9rem, 4vw, 1.4rem); }
  #oito-bits .pj-title{ font-size: clamp(2rem, 8.5vw, 2.6rem); }
  #oito-bits .m8-meta li{ padding: 0 0.9rem; }
  #oito-bits .m8-svg{ min-width: 640px; }
}

@media print{
  #oito-bits.pj-scene{ background: #FFF; }
  #oito-bits.pj-scene::before,
  #oito-bits.pj-scene::after{ display: none !important; }
  #oito-bits .pj-scene-in{ grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Cena 06 · IA veicular. Full-bleed. Um trecho REAL da câmera da rodovia
   com o processamento do sistema por cima: a caixa de detecção que segue o
   caminhão, a linha de trajeto no asfalto e a virada de cor no cruzamento
   são a saída real do modelo, não desenho. A paleta escura fria e o verde
   ficam presos ao verde real dessas caixas e valem só nesta cena.
   ========================================================================= */

.pj-scene--ia{
  --sc-bg:        #070a0c;
  --sc-edge:      rgba(255,255,255,0.06);
  --sc-ink:       #eef0ea;
  --sc-ink-soft:  #b4b8ae;
  --sc-ink-faint: #7a807b;
  --sc-line:      rgba(255,255,255,0.10);
  --sc-line-soft: rgba(255,255,255,0.055);
  --sc-accent:    #74c58d;   /* o verde das caixas de detecção do vídeo */
  --sc-accent-2:  #9ad4ac;
  --sc-panel:     rgba(9,12,13,0.92);
  --sc-panel-2:   #10151a;
  /* tinta das marcações desenhadas sobre o vídeo: casa com o verde da caixa
     de detecção real (~#65bc53), um pouco mais suave */
  --ia-mark:      #74c95f;
  --ia-mark-sh:   0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8);

  padding-inline: 0;
  background: var(--sc-bg);
  overflow: hidden;
  /* dissolve na mesa nas bordas: é o último card antes da seção "Outros" */
  box-shadow: var(--pj-edge-fade);
}
/* fotografia de fundo: vista aérea de um cruzamento à noite (img/fundos/
   fundo_ia). Só atmosfera: fica bem apagada, quase preta, e some de vez
   para a direita (onde estão o palco e o conteúdo). As ruas do fundo não
   devem aparecer nítidas. */
.ia-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ia-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 44%;
  filter: brightness(0.42) saturate(0.6) contrast(1);
  transform: scale(1.06);
}
/* leitura em primeiro lugar: a foto vira quase só tom, escurecendo forte da
   esquerda para a direita até desaparecer atrás do conteúdo; grade quase
   invisível por cima */
.pj-scene--ia::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(6,9,11,0.62) 0%,
      rgba(6,9,11,0.72) 28%,
      rgba(6,9,11,0.9) 58%,
      rgba(6,9,11,0.98) 82%,
      rgba(6,9,11,1) 100%),
    linear-gradient(180deg, rgba(6,9,11,0.5) 0%, transparent 16%, transparent 82%, rgba(6,9,11,0.5) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: auto, auto, 104px 104px, 104px 104px;
}
.pj-scene--ia .pj-scene-in{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  z-index: 2;
}
.pj-scene--ia .ia-in{
  max-width: min(1680px, 100% - 2 * var(--gut));
  margin-inline: auto;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  column-gap: clamp(2.2rem, 4vw, 4.6rem);
  padding-block: clamp(3rem, 5vw, 5.4rem);
  align-items: start;
}
.ia-col{
  padding-top: clamp(0.4rem, 2vw, 2.4rem);
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.ia-title i{ color: var(--sc-accent); font-style: normal; }
.ia-keys li::before{
  background: var(--sc-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--sc-accent) 42%, transparent);
}

/* resultados reais: preenche o vão que sobrava na coluna de texto, com os
   números grandes de verdade (mesma voz do fu-meta), não uma métrica solta
   para preencher espaço */
.ia-gains{ margin-top: clamp(1.8rem, 3.2vw, 2.6rem); }
.ia-gains-row{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.7rem, 3vw, 2.4rem);
  margin-top: 0.95rem;
}
.ia-gain{ flex: 1 1 11rem; min-width: 9rem; }
.ia-gain-n{
  display: block;
  font-family: var(--af-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.ia-gain p{
  margin: 0;
  font: 400 0.82rem/1.55 var(--af-sans);
  color: var(--sc-ink-soft);
  max-width: 27ch;
}
.ia-gain p b{ color: var(--sc-ink); font-weight: 600; }
.ia-gains-note{
  margin: 1.1rem 0 0;
  font: 400 0.76rem/1.5 var(--af-sans);
  color: var(--sc-ink-faint);
}

/* ---------- outras ferramentas do trabalho: seletor com ícone, dentro do expansível ---------- */
.pj-more-body .ia-tools{
  margin-top: 0.3rem;
  display: grid;
  gap: 0.9rem;
}
.ia-pipe.ia-tools-pipe{ grid-template-columns: repeat(3, 1fr); }
.ia-tools-pipe button:nth-child(3n){ border-right: 0; }
.ia-tools-pipe button:nth-child(n+4){ border-top: 1px solid var(--sc-line-soft); }
.ia-tool-ico{
  width: 19px;
  height: 19px;
  color: var(--sc-ink-faint);
  fill: none;
}
.ia-tools-pipe button[aria-pressed="true"] .ia-tool-ico{ color: var(--sc-accent); }
.pj-more-body .ia-tools .ia-inspector{ margin: 0; }
.pj-more-body .ia-tools .ia-insp-k{
  margin: 0;
  font: 600 0.55rem/1 var(--af-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
}
.pj-more-body .ia-tools .ia-insp-t{
  margin: 8px 0 0;
  font: 400 1.05rem/1.2 var(--af-serif);
  color: var(--sc-ink);
}
.pj-more-body .ia-tools .ia-insp-b{
  margin: 7px 0 0;
  font: 400 0.82rem/1.52 var(--af-sans);
  color: var(--sc-ink-soft);
  max-width: 64ch;
}
/* ---------- o palco ---------- */
.ia-stage{
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2.2rem);
}
.ia-feat{
  display: grid;
  gap: clamp(0.9rem, 1.7vw, 1.4rem);
}

.ia-road{
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 72px rgba(0,0,0,0.46);
}
.ia-road .proj-shot{ display: block; font-size: 0; }
.ia-road .vid-wrap{ display: block; height: auto; }
.ia-road video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  cursor: pointer;
  /* casa o dia claro da captura com a paleta escura da cena, sem editar a obra */
  filter: brightness(0.8) contrast(1.06) saturate(0.86);
  transition: filter var(--af-dur) var(--af-ease);
}
/* vinheta leve só sobre o vídeo, para ele assentar na placa */
.ia-road .vid-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,6,7,0.26), transparent 18%, transparent 74%, rgba(4,6,7,0.3)),
    radial-gradient(128% 118% at 50% 42%, transparent 58%, rgba(4,6,7,0.32));
}
.ia-road .play-badge{ z-index: 3; }

/* a etapa em foco escurece um pouco mais o resto da cena */
.ia-stage[data-active] .ia-road video{ filter: brightness(0.68) contrast(1.05) saturate(0.82); }

/* marcações desenhadas sobre o vídeo. Feitas para parecer que o próprio
   sistema traçou junto com a caixa de detecção: sem placa nem borda. */

/* linha de contagem: um traço contínuo na diagonal, cortando a via. O evento
   de contagem continua sendo o do vídeo (a caixa fica vermelha, "CROSSING"). */
.ia-cline{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}
.ia-cline line{
  stroke: var(--ia-mark);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
  transition: stroke var(--af-dur) var(--af-ease), opacity var(--af-dur) var(--af-ease);
}
/* contador, no canto: mesma cara do relógio queimado no vídeo, do outro lado.
   Branco, mono em negrito com contorno escuro, tamanho parecido com o da
   data/hora (que escala com o vídeo, então acompanhamos com clamp). */
.ia-count{
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  pointer-events: none;
  font: 400 clamp(0.72rem, 1.4vw, 0.96rem)/1 var(--af-mono);
  letter-spacing: 0;
  color: #ffffff;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.8), 1px -1px 0 rgba(0,0,0,0.8),
    -1px 1px 0 rgba(0,0,0,0.8), 1px 1px 0 rgba(0,0,0,0.8),
    0 0 2px rgba(0,0,0,0.55);
}
.ia-count b{ margin-left: 0.5em; font-weight: 400; color: #ffffff; }
.ia-stage[data-active="cross"] .ia-cline line{ stroke: #ff6f5e; opacity: 1; }
.ia-count.is-hit b{ color: #ff6f5e; }

/* canto inferior esquerdo: vinheta suave de canto (também cobre o lugar da
   antiga marca-d'água da câmera) com o rótulo da fonte. Fica mais apagado
   que as marcações verdes, é legenda, não saída do rastreador. */
.ia-src{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  padding: 32px 36px 12px 15px;
  font: 400 0.52rem/1 var(--af-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sc-ink-soft) 82%, #ffffff);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  background: radial-gradient(140% 155% at 0% 100%,
    rgba(6,9,11,0.9) 0%,
    rgba(6,9,11,0.58) 40%,
    rgba(6,9,11,0.18) 64%,
    transparent 80%);
}

.ia-road-cap{
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: none;
  padding: 9px 14px 10px;
  font: 500 0.6rem/1.5 var(--af-mono);
  letter-spacing: 0.015em;
  color: var(--sc-ink-faint);
  background: #0a0d0f;
  border-top: 1px solid var(--sc-line);
}

/* ---------- inspector ---------- */
.ia-inspector{
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  background: var(--sc-panel);
  padding: 14px 16px;
}
.ia-insp-k{
  margin: 0;
  font: 600 0.55rem/1 var(--af-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--sc-ink-faint);
}
.ia-insp-t{
  margin: 8px 0 0;
  font: 400 1.05rem/1.2 var(--af-serif);
  color: var(--sc-ink);
}
.ia-insp-b{
  margin: 7px 0 0;
  font: 400 0.82rem/1.52 var(--af-sans);
  color: var(--sc-ink-soft);
  max-width: 64ch;
}

/* ---------- pipeline ---------- */
.ia-pipe{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--sc-line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(8,11,12,0.55);
}
.ia-pipe button{
  appearance: none;
  border: 0;
  border-right: 1px solid var(--sc-line-soft);
  background: transparent;
  text-align: left;
  padding: 13px 12px;
  cursor: pointer;
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 86px;
  transition: background var(--af-dur-fast) var(--af-ease);
}
.ia-pipe button:last-child{ border-right: 0; }
.ia-pipe button:hover{ background: rgba(255,255,255,0.032); }
.ia-pipe button:focus-visible{ outline: 2px solid var(--sc-accent); outline-offset: -2px; }
.ia-step-n{
  font: 600 0.58rem/1 var(--af-mono);
  letter-spacing: 0.12em;
  color: var(--sc-ink-faint);
}
.ia-pipe b{
  font: 500 0.87rem/1.15 var(--af-serif);
  color: var(--sc-ink-soft);
}
.ia-pipe em{
  font: 500 0.55rem/1.35 var(--af-mono);
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--sc-ink-faint);
}
.ia-pipe button[aria-pressed="true"]{
  background: color-mix(in srgb, var(--sc-accent) 9%, transparent);
  box-shadow: inset 0 2px 0 var(--sc-accent);
}
.ia-pipe button[aria-pressed="true"] b{ color: var(--sc-ink); }

/* ---------- recortes por track (stills reais do rastreador) ---------- */
.ia-aside{
  display: grid;
  gap: clamp(0.9rem, 1.7vw, 1.35rem);
}
.ia-crop-row{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ia-crop{
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--sc-line);
  border-radius: 4px;
  background: var(--sc-panel-2);
}
.ia-crop picture{ display: block; width: 100%; height: 100%; }
.ia-crop img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ia-crop::after{
  content: "recorte";
  position: absolute;
  left: 6px;
  bottom: 5px;
  z-index: 1;
  font: 500 0.48rem/1 var(--af-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
:root[data-lang="en"] .ia-crop::after{ content: "crop"; }
.ia-crops-note{
  margin: 12px 0 0;
  font: 400 0.8rem/1.55 var(--af-sans);
  color: var(--sc-ink-soft);
  max-width: 66ch;
}


/* ---------- responsivo ---------- */
@media (max-width: 1180px){
  .pj-scene--ia .ia-in{ grid-template-columns: minmax(0, 1fr); }
  .ia-col{ max-width: 46rem; padding-top: 0; }
}
@media (max-width: 820px){
  .ia-pipe{ grid-template-columns: repeat(3, 1fr); }
  .ia-pipe button:nth-child(3n){ border-right: 0; }
  .ia-pipe button:nth-child(n+4){ border-top: 1px solid var(--sc-line-soft); }
}
@media (max-width: 560px){
  .ia-pipe{ grid-template-columns: repeat(2, 1fr); }
  .ia-pipe button{ border-right: 1px solid var(--sc-line-soft); }
  .ia-pipe button:nth-child(2n){ border-right: 0; }
  .ia-pipe button:nth-child(n+3){ border-top: 1px solid var(--sc-line-soft); }
  .ia-crop-row{ grid-template-columns: repeat(2, 1fr); }
  .ia-count{ top: 8px; left: 9px; }
  .ia-src{ font-size: 0.44rem; padding: 24px 26px 9px 11px; }

  .ia-cline line{ stroke-width: 1.3; }
  .ia-road-cap{ font-size: 0.56rem; }
}
@media (prefers-reduced-motion: reduce){
  .ia-road video,
  .ia-cline line,
  .ia-pipe button{ transition: none; }
}
@media print{
  .ia-bg, .ia-cline, .ia-src{ display: none !important; }
  .pj-scene--ia{ background: #fff; }
  .pj-scene--ia::before,
  .ia-road .vid-wrap::after{ display: none !important; }
  .pj-scene--ia .ia-in{ grid-template-columns: minmax(0, 1fr); }
  .ia-road-cap{ position: static; background: none; color: #333; }
  .ia-pipe{ grid-template-columns: repeat(3, 1fr); }
}