:root { color-scheme: dark; }
  body { margin: 0; background: #0a0d0a; color: #dbe6d8;
         font: 13.5px/1.55 "IBM Plex Mono", ui-monospace, monospace; }
  /* O TÍTULO FICA NA GRAMÁTICA DA BANCADA — 15px, versalete, mono — e não na
     do laboratório, que o poria em Cinzel a 4rem. Quem veste esta página é a
     barra, o "Voltar" e o rodapé; o miolo continua sendo bancada de trabalho,
     e anunciá-la pronta pela tipografia seria a mesma mentira que o card
     acabou de parar de contar. */
  .cabeca { display: flex; justify-content: space-between; align-items: flex-end;
            gap: 14px; margin: 16px 18px 6px; }
  .cabeca .eyebrow { font-size: 10.5px; letter-spacing: .16em; }
  h1 { font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
       color: #9ec49a; margin: 4px 0 0; font-weight: 600; }
  p.nota { margin: 0 18px 12px; max-width: 96ch; color: #93a691; font-size: 12.5px; }
  .caixa { display: grid; grid-template-columns: 1fr 320px; gap: 14px; padding: 0 16px 20px; }
  #palco { width: 100%; height: 660px; display: block;
           border: 1px solid #24331f; border-radius: 12px; background: #10150f; }
  .painel { border: 1px solid #24331f; border-radius: 12px; background: #10150f;
            padding: 13px 15px; max-height: 660px; overflow-y: auto; }
  label { display: block; margin: 11px 0 5px; color: #9ec49a; font-size: 11.5px;
          letter-spacing: .1em; text-transform: uppercase; }
  input[type=range] { width: 100%; accent-color: #d8c53a; }
  button { background: #1c2718; color: #e8f2e4; border: 1px solid #35492c;
           border-radius: 8px; padding: 7px 10px; font: inherit; cursor: pointer; }
  button:hover { background: #26351f; }
  .pecas { display: flex; gap: 8px; }
  .pecas button { flex: 1; }
  .pecas button[aria-pressed=true] { background: #2f4a27; border-color: #6fa05e; color: #f4fbef; }
  #bater { width: 100%; margin-top: 10px; padding: 10px; font-size: 14px;
           background: #2a3a20; border-color: #5c8a4a; letter-spacing: .06em; }
  #bater[data-batendo=sim] { background: #4a2a2a; border-color: #a05e5e; }
  .lin { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; }
  .lin b { color: #f2f7ec; }
  .aberta { color: #6ed07a; } .fechada { color: #c8737a; }
  /* O CANVAS TEM TAMANHO DE DESENHO E TAMANHO DE CAIXA, e eles são coisas
     diferentes: os 290x240 do atributo são a grade em que o Wiggers desenha,
     e o `width:100%` é o quanto disso cabe no painel. Mexer só no CSS estica
     a imagem; mexer só no atributo muda a régua.

     O `max-width` é POR CAUSA DISSO, e foi medido: abaixo de 900px o painel
     deixa de ser a coluna de 320 e passa a ocupar a largura toda — o canvas
     ia a 555px e o desenho de 290 subia quase ao dobro, borrando um diagrama
     cujo texto tem 9px. Nunca ampliar acima da própria grade; encolher pode,
     que só perde detalhe, não inventa. */
  #wiggers { display: block; width: 100%; max-width: 290px; height: auto; margin-bottom: 6px; }
  /* A caixa de falha fica DENTRO da moldura do palco, no lugar exato onde o
     coração deveria estar — é ali que o olho já está quando não vê nada. */
  /* ESTA LINHA É A MAIS IMPORTANTE DO BLOCO, e a falta dela apagou o coração.
     `hidden` não é mágica: ele funciona por uma regra do NAVEGADOR,
     `[hidden] { display: none }`. Qualquer regra de AUTOR que declare
     `display` no mesmo elemento vence — e a de baixo declara `flex`. Com o
     atributo posto e tudo, a caixa continuava calculando `display: flex`,
     719x660, opaca, POR CIMA do palco. O coração desenhava atrás dela.
     Conferido com `elementFromPoint` no centro do palco: devolvia "falha". */
  .falha[hidden] { display: none; }
  .falha { position: absolute; inset: 0; display: flex; flex-direction: column;
           justify-content: center; gap: 8px; padding: 22px 26px;
           background: #10150f; border-radius: 12px; overflow-y: auto; }
  .falha b { color: #f5c518; font-size: 13.5px; letter-spacing: .04em; }
  .falha p { margin: 0; color: #b0c4ac; font-size: 12.5px; max-width: 62ch; }
  .falha code { display: block; color: #ff9d2e; font-size: 11.5px;
                white-space: pre-wrap; word-break: break-all; max-width: 74ch; }
  .falha .pedido { color: #7f9a80; font-size: 11.5px; margin-top: 4px; }
  .nota-ausencia { margin: 0 0 8px; color: #93a691; font-size: 11.5px; line-height: 1.5; }
  /* verde CLARO, e não o escuro da marca: a regra de contraste do
     `laboratorio.css` é que o verde escuro só carrega superfície, nunca
     texto — parece legível e não é. */
  .nota-ausencia a { color: #9ec49a; display: inline-block; margin-top: 3px; }
  .eletrico { margin: 0 0 6px; padding: 4px 7px; border-radius: 6px;
              background: #131d15; color: #9fd8f2; font-size: 11.5px;
              letter-spacing: .06em; min-height: 1.4em; }
  .grupo { margin-top: 12px; border-top: 1px solid #24331f; padding-top: 9px; }
  .grupo h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
              color: #7f9a7c; font-weight: 600; }
  details { margin-top: 12px; border-top: 1px solid #24331f; padding-top: 8px; }
  summary { cursor: pointer; color: #9ec49a; font-size: 11.5px;
            letter-spacing: .1em; text-transform: uppercase; }
  details[hidden] { display: none; }
  .fasebar { font-size: 12px; color: #cfe0cb; }
  /* A CAMADA DAS LEGENDAS fica POR CIMA do canvas e não recebe toque: o
     rótulo não pode roubar o arrasto de quem gira a peça. */
  .cena { position: relative; }
  .camadaLegendas { position: absolute; inset: 0; overflow: hidden;
                    pointer-events: none; border-radius: 12px; }
  .fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  /* A CAIXINHA É A DA BANCADA DO SARCÔMERO, e de propósito: o professor
     apontou aquela tela e disse que gostava mais do estilo. Pílula de raio
     total, fundo quase opaco, texto seco e curto. Copiei as medidas de lá em
     vez de imitar de olho — duas bancadas do mesmo laboratório não podem ter
     duas gramáticas de legenda. */
  .rotulo { position: absolute;
            font: 600 11.5px/1.3 "IBM Plex Mono", ui-monospace, monospace;
            letter-spacing: .03em; white-space: nowrap;
            padding: 4px 10px; border-radius: 999px;
            /* SEMITRANSPARENTE, para não tapar a peça — mas com desfoque do
               que está atrás. Só baixar a opacidade deixaria a coronária
               passar por dentro das letras e o nome ficaria ilegível justo
               onde há mais o que ver; o desfoque apaga o desenho de trás sem
               apagar a cor, então lê-se o rótulo E percebe-se o que ele
               cobre. O prefixo -webkit- é para o Safari do iPhone, que é
               onde isto vai ser julgado. */
            background: rgba(10,18,12,.52); border: 1px solid;
            -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  /* o rótulo encosta na margem pelo lado de fora e cresce para dentro */
  .rotulo.esq { transform: translate(0, -50%); }
  .rotulo.dir { transform: translate(-100%, -50%); }
  /* VALVAS EM VERDE, VASOS EM VERMELHO — escolha do professor, e ela ajuda:
     o vermelho puxa para a cor do próprio vaso, e o verde tira a valva da
     paleta da carne, que é onde ela some. */
  .rotulo.valva { color: #86efac; border-color: rgba(134,239,172,.45); }
  .rotulo.vaso  { color: #ff9c8f; border-color: rgba(255,156,143,.45); }
  .ra { margin-top: 12px; border-top: 1px solid #24331f; padding-top: 10px; }
  model-viewer { width: 100%; height: 190px; display: block; border-radius: 10px;
                 background: #0c110b; border: 1px solid #24331f; }
  #launchAR { width: 100%; margin-top: 8px; }
  #launchAR:disabled { opacity: .5; cursor: default; }
  .ra-status { margin: 7px 0 0; font-size: 11.5px; color: #93a691; }
  p.credito { margin: 0 18px 14px; max-width: 96ch; color: #7f9a7c; font-size: 11.5px;
              border-top: 1px solid #1c2718; padding-top: 8px; }
  p.credito a { color: #9ec49a; }
  /* NO TELEFONE O PAINEL NÃO PODE TER ROLAGEM PRÓPRIA. Com `max-height` e
     `overflow-y`, ele vira uma caixa de 660 px dentro de uma página que já
     rola — e o que estiver no fundo dela fica invisível para quem rola a
     PÁGINA. Foi assim que o botão de RA sumiu no iPhone: existia, respondia,
     e ninguém o alcançava.

     E ela precisa vir NO FIM da folha: eu a escrevi antes da regra
     `.painel` e a de baixo ganhava, porque a especificidade é a mesma.
     A media query não aumenta especificidade — só a ordem decide. */
  @media (max-width: 900px) {
    .caixa { grid-template-columns: 1fr; }
    .painel { max-height: none; overflow-y: visible; }
    #palco { height: 62vh; }
  }
  /* MESMO JOELHO DAS IRMÃS, 720px: é onde o `.page-head` do laboratório vira
     coluna. Em linha, a 375px, o "Voltar" ficava com 77px e quebrava em duas
     linhas — a seta em cima e a palavra embaixo. E esta regra tem de ser a
     ÚLTIMA da folha: `@media` não aumenta especificidade, e a `.cabeca` de
     cima ganharia dela por ordem. */
  @media (max-width: 720px) {
    .cabeca { flex-direction: column; align-items: flex-start; gap: 8px; }
  }